1 / 19

Obrázky

16. března 2013. VY_32_INOVACE_160317_Obrazky_DUM. Obrázky. Vkládání do stránky, úpravy formátu, okraje. 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 )

sheena
Download Presentation

Obrázky

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 16. března 2013 VY_32_INOVACE_160317_Obrazky_DUM Obrázky Vkládání do stránky, úpravy formátu, okraje

  2. Nejčastěji grafické formáty používanéna webu • GIF (TheGraphicsInterchangeFormat) • JPEG(The Joint PhotographicsExperts Group) • PNG (ThePortable Network Graphics) více: GIF, JPEG a PNG - jak a kdy je použít?

  3. Programy pro optimalizaci obrázků • Adobe Photoshop • Adobe ImageReady • JascPaintShop Pro • ZonerPhoto Studio • GIMPShop • Photo Editor Max • …

  4. Obrázek ve zdrojovém kódu stránky <imgsrc=„../img/logo.gif alt=″logo společnosti″ title″BSA a.s.″ /> 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

  5. 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.

  6. Rozměr obrázku – výška Vlastnost heighturčuje výšku obrázku. Hodnoty jsou stejné jako u definice šířky. Příklad: img { height:250px; width:300px; }

  7. 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}

  8. 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}

  9. 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.

  10. Umístění barvy na rámečku Vlastnost border-colordefinuje barvu kolem celého objektu. Zadání pro jednotlivé strany: border-top-color border-right-color border-bottom-color border-left-color

  11. Zkrácená syntaxe border-color border-color: a b c d; Hodnota a je pro horní stranu, b propravou stranu, c pro dolní stranu, d pro levou stranu rámečku. border-color: a bc d; Hodnotabcje pro pravou i levou stranu. border-color: ad bc; Hodnotaad platí pro horní a dolní stranu rámečku, hodnota bc definuje barvu levého i pravého rámečku.

  12. 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

  13. 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

  14. 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

  15. 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.

  16. Vnitřní okraj – padding Padding určuje šířku vnitřního okraje elementu. Parametry jsou stejné jako při použití margin.

  17. Blokový model CSS Vnější okraj Rámeček Vnitřní okraj Obrázek (libovolný element)

  18. Své znalosti si zopakujte v zde. • Kvíz

  19. Zdroje • GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML5 a CSS3 pro webové designéry. Vyd. 1. Brno: ZonerPress, 2011, 286 s. Encyklopedie webdesignera. ISBN 978-80-7413-166-0. • WORLD WIDE WEB CONSORTIUM (W3C). WorldWide Web Consortium (W3C) [online]. http://www.w3.org/. 27 March2012 [cit. 2013-03-16]. Dostupné z: http://www.w3.org • GIF, JPEG a PNG - jak a kdy je použít?. JAROMÍR SKŘIVAN. Webdeisign [online]. 2005-05-16. 2005 [cit. 2013-03-16]. Dostupné z: http://interval.cz/clanky/gif-jpeg-a-png-jak-a-kdy-je-pouzit/ • Vlkodlak - Wikipedie. Wikipedie [online]. 2013 [cit. 2013-03-16]. Dostupné z: http://cs.wikipedia.org/wiki/Vlkodlak

More Related