Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

Transkript

1 Úvod do CSS Tematický okruh (ŠVP) CSS1 Vysvětlení úlohy CSS při programování www stránek Úvod do CSS VY_32_INOVACE_01_02_01 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Učební materiál podává základní myšlenku kaskádových stylů, ukazuje jejich úlohu při vytváření moderního webu. Osvětluje pojem stylopis, předkládá tři druhy jeho zápisu a vysvětluje jejich přednosti a nedostatky.

2 Interní stylopis Zápis stylopisu do hlavičky HTML dokumentu Interní stylopis VY_32_INOVACE_01_02_02 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se seznámí s výhodami i nevýhodami interního stylopisu, pochopí jeho strukturu a naučí se ho zapsat do hlavičky HTML dokumentu.

3 Inline stylopis Zápis stylopisu do hlavičky HTML dokumentu Inline stylopis VY_32_INOVACE_01_02_03 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se seznámí s výhodami i nevýhodami inline stylopisu, pochopí jeho strukturu a naučí se ho zapsat jako atribut do příslušného tagu.

4 Externí stylopis Zápis stylopisu do externího souboru Externí stylopis VY_32_INOVACE_01_02_04 Vytvořeno říjen 2012 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se seznámí s výhodami externího stylopisu a naučí se jej používat.

5 Volba vhodného typu DTD Obecné zásady pro práci s CSS Volba vhodného typu DTD VY_32_INOVACE_01_02_05 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák dostane vysvětlení toho, proč je důležité správně zvolit DTD už při zakládání stránky a rozšíří si sortiment HTML šablon obsahujících vhodná DTD.

6 Stromová struktura HTML dokumentu Prostředky pro práci s CSS Stromová struktura HTML dokumentu VY_32_INOVACE_01_02_06 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se naučí vizualizovat stromovou strukturu HTML dokumentu. To mu pomůže pochopit vazby mezi prvky a umožní pozdější efektivní práci se selektory.

7 Selektory Zvládnutí syntaxe pro stylování vybraných objektů stránky Selektory VY_32_INOVACE_01_02_07 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se naučí používat selektory pro vybírání objektů, které mají být ostylovány.

8 CSS validace Zvládnutí nástrojů pro validaci stylopisu CSS validace VY_32_INOVACE_01_02_08 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Žák se seznámí s přehledem verzí CSS a naučí se používat CSS validátory, tj. nástroje na validaci stylopisů.

9 Zásady pro psaní HTML podle STRICT specifikace Zvládnutí zásad pro psaní HTML kódu dle specifikace STRICT Zásady pro psaní HTML podle STRICT specifikace VY_32_INOVACE_01_02_09 Materiál slouží k podpoře výuky programování webových aplikací v prvních ročnících oborů a Elektronické zpracování informací. Předpokládá se znalost základů HTML. Pro úspěšné používání CSS je výhodné přepnout prohlížeč do STANDARD módu. Logickou možností, jak to udělat, je použít DTD pro STRICT specifikaci. Proto se žák seznámí se zásadami platnými pro psaní HTML kódu dle specifikace STRICT.

10 Vývojové pomůcky pro práci s CSS Zvládnutí pomůcek pro efektivní práci s CSS Vývojové pomůcky pro práci s CSS VY_32_INOVACE_01_02_10 Žák obdrží pomůcky, které mu pomohou při práci s kaskádovými styly. Jde o ladicí nástroj FIREBUG, což je doplněk k prohlížeči Firefox, a víceúčelová utilita FASTSTONE CAPTURE.

11 Formátování písma Stylování řádkových elementů Formátování písma VY_32_INOVACE_01_02_11 Materiál vede žáka při stylování textového obsahu stránky. Vzhledem k tomu, že vhodné formátování textu může podstatně vylepšit vzhled stránky i čitelnost obsahu, jde o poměrně silný motivační prvek s okamžitým účinkem.

12 Dědičnost a kaskáda Využití dědičnosti a kaskádových vlastností v CSS Dědičnost a kaskáda VY_32_INOVACE_01_02_12 Žák se seznámí s principy a fungováním dědičnosti a kaskády. Jde o stěžejní principy, bez jejichž zvládnutí není možno CSS smysluplně využívat. Je tedy vhodné věnovat této látce dostatek pozornosti a důkladně ji s žáky procvičit.

13 Další vlastnosti písma Využití CSS pro formátování písma Další vlastnosti písma VY_32_INOVACE_01_02_13 Žák se naučí používat další techniky pro formátování písma, mezi které patří styl písma a různé jeho varianty. Naučí se také řídit velikost písma a stupeň jeho tučnosti. Seznámí se s možností, jak využít zkrácené varianty deklarace písma v CSS.

14 Měření rozměrů v pixelech Používání délkových jednotek v CSS Měření rozměrů v pixelech VY_32_INOVACE_01_02_14 Žák se porozumí tomu, proč je pixel v CSS relativní délkovou jednotkou.

15 Relativní délkové jednotky v CSS Používání délkových jednotek v CSS Relativní délkové jednotky v CSS VY_32_INOVACE_01_02_15 Žák se naučí pracovat s relativními délkovými jednotkami em, %.

16 Řádkování v CSS Dovednost formátovat textový obsah Řádkování v CSS VY_32_INOVACE_01_02_16 Žák se naučí pracovat s výškou řádku inline elementů.

17 Kouzla s textem Dovednost formátovat textový obsah Kouzla s textem VY_32_INOVACE_01_02_17 Žák se naučí využívat pokročilejších vlastností CSS pro formátování textu.

18 Grafické efekty u řádkových elementů Dovednost formátovat textový obsah Grafické efekty u řádkových elementů VY_32_INOVACE_01_02_18 Žák se naučí oživovat textové objekty grafickými efekty výplněmi pozadí prvku a rámečky kolem textu.

19 Identifikátory Využití identifikátorů pro stylování webových dokumentů Identifikátory VY_32_INOVACE_01_02_19 Žák se naučí smysluplně používat jednoznačných identifikátorů pro stylování webových dokumentů.

20 Třídy Využití tříd pro stylování webových dokumentů Třídy VY_32_INOVACE_01_02_20 Žák se naučí smysluplně využívat tříd pro stylování webových dokumentů.