Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/ Obrázky Vkládání do stránky, úpravy formátu, okraje března 2013VY_32_INOVACE_160317_Obrazky_DUM

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nejčastěji grafické formáty používanéna webu GIF (The Graphics Interchange Format) JPEG (The Joint Photographics Experts Group) PNG (The Portable Network Graphics) více: GIF, JPEG a PNG - jak a kdy je použít?GIF, JPEG a PNG - jak a kdy je použít? 2

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Programy pro optimalizaci obrázků Adobe Photoshop Adobe ImageReady Jasc Paint Shop Pro Zoner Photo Studio GIMPShop Photo Editor Max … 3

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Obrázek ve zdrojovém kódu stránky <img src=„../img/logo.gif alt=″logo společnosti″ title ″BSA a.s.″ /> 4 src – určuje URL obrázku alt – popis obrázku je vidět, pokud se obrázek neobjeví v prohlížeči title – objeví se, pokud na obrázek najede kurzor myši

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Rozměr obrázku – šířka Vlastnost width určuje šířku obrázku. Hodnoty: Jednotky délky Šířka vyjádřená příslušnou jednotkou. % Vyjádření procenty vůči šířce nadřazeného elementu. auto Šířka elementu se určí podle jeho obsahu. inherit Hodnota se zdědí od nadřazeného elementu. 5

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Rozměr obrázku – výška Vlastnost height určuje výšku obrázku. Hodnoty jsou stejné jako u definice šířky. Příklad: img { height:250px; width:300px; } 6

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Obtékání obrázku – float Určuje pozici obrázku v rámci plovoucího umístění. left Umístí obrázek doleva v rámci nadřazeného elementu a bude obtékán zprava. right Umístí obrázek doprava v rámci nadřazeného elementu a bude obtékán zleva. img {float: left} 7

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Rámeček kolem obrázku – border Nastavení vlastností pomocí značky border umožňuje deklarovat všechny vlastnosti v jednom zápisu. Definice v CSS: img {border:3px solid blue} 8

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás border-color Barva rámečku obklopující element. Hodnoty barva transparent Rámeček bude průhledný. inherit Hodnota se zdědí od nadřazeného elementu. 9

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Umístění barvy na rámečku Vlastnost border-color definuje barvu kolem celého objektu. Zadání pro jednotlivé strany: border-top-color border-right-color border-bottom-color border-left-color 10

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zkrácená syntaxe border-color border-color: a b c d; Hodnota a je pro horní stranu, b pro pravou stranu, c pro dolní stranu, d pro levou stranu rámečku. border-color: a bc d; Hodnota bc je pro pravou i levou stranu. border-color: ad bc; Hodnota ad platí pro horní a dolní stranu rámečku, hodnota bc definuje barvu levého i pravého rámečku. 11

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás border-style Definice stylu rámečku okolo elementu: solid spojitý double dvojitý groove zařízlý ridge vyvýšený inset vmáčklý dovnitř outset vystouplý ven dotted tečkovaný dashed čárkovaný none žádný inherit hodnota se zdědí od nadřazeného elementu 12

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás border-width Vlastnost určuje šířku rámečku okolo elementu. Hodnoty: Jednotky délky thin slabý rámeček medium střední rámeček thick silný rámeček inherit hodnota se zdědí z nadřazeného elementu 13

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás border-radius Umožňuje definovat rámečku zakulacené rohy. img {border: 2px solid #FF border-radius: 5px} Rádius jednotlivých stran: border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 14

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Vnější okraj – margin Vlastnost margin určuje šířku vnějšího okraje elementu. Hodnoty: % Šířka je vyjádřena procenty vůči šířce nadřazeného elementu. jednotky délky auto Automatické nastavení. inherit Hodnota se zdědí od nadřazeného elementu. 15

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Vnitřní okraj – padding Padding určuje šířku vnitřního okraje elementu. Parametry jsou stejné jako při použití margin. 16

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Blokový model CSS 17 Obrázek (libovolný element) Vnitřní okraj Rámeček Vnější okraj

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 18

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. Encyklopedie webdesignera. ISBN WORLD WIDE WEB CONSORTIUM (W3C). World Wide Web Consortium (W3C) [online] March 2012 [cit ]. Dostupné z: GIF, JPEG a PNG - jak a kdy je použít?. JAROMÍR SKŘIVAN. Webdeisign [online] [cit ]. Dostupné z: kdy-je-pouzit/ Vlkodlak - Wikipedie. Wikipedie [online] [cit ]. Dostupné z: 19