ADOBE DREAMWEAVER CS6 CSS - Formátování textu

Prezentace na téma: "ADOBE DREAMWEAVER CS6 CSS - Formátování textu"— Transkript prezentace:

1 ADOBE DREAMWEAVER CS6 CSS - Formátování textu
Autor: Ing. Vladimír Műller

2 Adobe Dreamweaver CS6. Formátování textu pomocí CSS.
Tematický okruh ADOBE DREAMWEAVER CS6 Anotace Studenti 3. ročníku, obor Ekonomické lyceum, předmět Informační a komunikační technologie, Adobe Dreamweaver CS6. Formátování textu pomocí CSS. Existence tří pojetí CSS: kaskáda, dědičnost a následnictví. Metodický pokyn Žáci se na praktických příkladech seznámí se třemi pojetími CSS. Druh materiálu prezentace Datum tvorby Číslo materiálu VY_32_INOVACE_Mu1_5 EU peníze školám CZ.1.07/1.5.00/

3 Formátování textu Formátovací pravidlo CSS může předefinovat vlastnosti jakéhokoliv elementu HTML. Každé pravidlo se skládá ze dvou částí: selektoru a jedné nebo více deklarací. Zní to složitě, ale na příkladu to snadno pochopíme: Selektor Deklarace Element HTML p { color: red; font-family: Verdana; } Dva elementy HTML th, td { font-weight: bold; padding: 4px; } Následník div p { font-size: 95%; margin-top: 5px; } Třída .ctr { text-align: center; line-height: 16px; } Identifikátor #hdr { background-color: black; color: white; } Pořadím selektorů a jejich deklarací lze dosáhnout velkého množství různých kombinací formátování dokumentu. Pro lepší pochopení si ve cvičeních projdeme tři pojetí CSS: kaskádu, dědičnost a následnictví EU peníze školám CZ.1.07/1.5.00/

4 Kaskáda Spustíme Dreamweaver a otevřeme soubor kaskada.html, který získáme z Všimněte si, že kód obsahuje dvě identická pravidla CSS pro barvu h1. Zvítězilo pravidlo pro červenou barvu, protože je „blíže“ ke značce <h1>. Změňte pořadí barev a sledujte jak se projeví výsledek v okně Návrh. Hierarchie pravidel: 1. výchozí formátování prohlížeče, 2. šablona stylů umístěná v hlavičce dokumentu, 3. řádkový styl vlastního elementu HTML. EU peníze školám CZ.1.07/1.5.00/

5 Dědičnost Spustíme Dreamweaver a otevřeme soubor dedicnost.html, který získáme z Dvě deklarace h1 nejsou v rozporu, nesoupeří spolu – uplatní se obě dvě. Všimněte si nadbytečnosti kódu pro elementy h2, h3, p – jsou 3x stejné, což je zbytečné opakování – prodlužuje to kód a v konečném důsledku i načítání celé stránky v prohlížeči. Řešení: místo tří pravidel použijeme jen jedno pro rodičovský element div. div (color: blue; font-family: Verdana; ) Dokonce můžeme smazat i obě pravidla pro h1 a nic se nezmění. Proč? EU peníze školám CZ.1.07/1.5.00/

6 Následnictví Otevřeme soubor naslednik.html, který získáme na adrese
Stránka obsahuje tři elementy h1 – samostatný, v rámci elementu div a v rámci elementu div, který je zároveň atributem třídy. Také jsou tu tři pravidla, která aplikují různé styly na tyto elementy. Zkopírujte celý první element <h1>Jsem tu sám</h1> a vložte ho dovnitř elementu div podle následujícího obrázku. V okně návrh sledujte jeho změnu: EU peníze školám CZ.1.07/1.5.00/

7 … pokračování Následnictví
Všimněte si, že stačilo přesunout element a on změnil svoje formátování podle toho kam byl přesunut. Zkuste nakopírovat stejný element mezi značky div, která je zároveň atributem třídy „product“. Stejný element opět změní svoje formátování podle nastaveného formátování elementu div. EU peníze školám CZ.1.07/1.5.00/

8 Použité zdroje: Adobe DreamWeaver CS6. Computer press, 2013
Použité zdroje: Adobe DreamWeaver CS6. Computer press, ISBN Adobe Dreamweaver CS6. Knihy.cpress.cz [online]. [cit ]. Dostupné z: EU peníze školám CZ.1.07/1.5.00/