VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS pozicování.

Prezentace na téma: "VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS pozicování."— Transkript prezentace:

1 VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 CSS pozicování

2 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  Rozložení webové stránky (layout) pomocí CSS  Oddělení obsahu webové stránky od designových prvků  Menší objem dat  rychlejší načtení stránek  Jednodušší, efektivnější a rychlejší aktualizace celého webu

3 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku HLAVIČKA PATIČKA LEVÝ SLOUPEC OBSAH

4 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku HLAVIČKA OBSAH LEVÝ SLOUPEC PRAVÝ SLOUPEC PATIČKA

5 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku Příprava souborů:  layout.css – rozvržení stránky v CSS  format.css – formátování nadpisů, odstavců, apod. v CSS  index.html – úvodní webová stránka  strana2.html  strana3.html další stránky  strana4.html

6 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku

7 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku

8 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku

9 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  Propojení CSS k html dokumentu:  Použití stylu z CSS např. Text hlavičky

10 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  V layout.css změňte hodnoty margin (vnější okraj), padding (vnitřní okraj, width (šířka), height (výška), background-color, …  V format.css změňte hodnoty color, text-align  Vytvořte MENU a odkazy pro propojení jednotlivých stránek

11 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  Zkopírujeme a přejmenujeme soubor index.html na strana2.html (strana3.html a strana4.html)  Upravíme zdrojový kód

12 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  Příklad - zdrojový kódzdrojový kód  Soubor layout.csslayout.css  Soubor format.cssformat.css  Webové stránky v prohlížečiprohlížeči

13 Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501 VY_32_INOVACE_4.3.IVT1.06/Ku  JANOVSKÝ, Dušan. Jak psát web [online]. 1999, 14. 10. 2012 [cit. 2013-01-27]. Dostupné z: http://www.jakpsatweb.cz/ http://www.jakpsatweb.cz/  Jak dobře začít s tvorbou webu - po lopatě [online]. 2006 [cit. 2013-01-27]. Dostupné z: http://polopate.jakpsatweb.cz/index.php?page=uvod http://polopate.jakpsatweb.cz/index.php?page=uvod  Tvorba webu [online]. 2003 [cit. 2013-01-27]. Dostupné z: http://www.tvorba-webu.cz/xhtml/ http://www.tvorba-webu.cz/xhtml/  CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: Computer Press, 2007. ISBN 978-80-251-1531-2.