Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
ADOBE DREAMWEAVER CS6 Formátování HTML vs. CSS
Autor: Ing. Vladimír Műller
2
Adobe Dreamweaver CS6. Porovnání formátování HTML a 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. Porovnání formátování HTML a CSS. Metodický pokyn Žáci se prakticky seznámí s oběma druhy formátování. Pochopí, že formátování pomocí CSS je mnohem efektivnější a méně náročné na čas. Druh materiálu prezentace Datum tvorby Číslo materiálu VY_32_INOVACE_Mu1_4 EU peníze školám CZ.1.07/1.5.00/
3
Co je to vlastně CSS Kaskádové styly, neboli CSS, zajišťují zformátování kódu webové stránky do vizuální podoby tak, aby stránka ve webovém prohlížeči vypadala stejně jako v grafickém návrhu. Pokud například často měníme barvu textu nebo zarovnávání odstavců a nadpisů, znamená to, že musíme napsat mnoho parametrů ke každé značce. Nakonec se ale stejně rozhodneme, že vše bude jinak. Potom nám nezbyde, než celý dokument prolistovat a přepsat hodnoty parametrů u každé značky zvlášť. Určitě by bylo jednodušší, kdybychom vše definovali pouze jednou. Právě k tomu slouží kaskádové styly. Styly definujeme už v hlavičce <head> …</head> dokumentu a tuto definici uzavíráme mezi značky <style>...</style>. K této značce by se však měl přidat parametr type, který udává druh stylů. V budoucnosti by se totiž mohl objevit nový druh stylů. Hodnota "text/css" udává, že se jedná o kaskádové styly. EU peníze školám CZ.1.07/1.5.00/
4
Nejdříve to zkusíme bez stylů CSS…
Spustíme Dreamweaver a otevřeme soubor formatovani_html.html, který získáme kliknutím na následující odkaz (případně zkopírováním do prohlížeče): Všimněte si, že každý prvek obsahu je formátovaný zvlášť značkou <font> Změňte barvu textu tak, že místo „blue“ napíšete „red“ u jmen postav Je to pomalé, pracné a ještě nesmíme udělat chybu. EU peníze školám CZ.1.07/1.5.00/
5
Nyní to zkusíme pomocí stylů CSS…
Otevřeme soubor formatovani_css.html, který získáme z Soubor je podobný. Rozdíl je v hlavičce <head>. Je do ní vložena značka <style>, ve které jsou nastaveny parametry značek h1 a p platné pro celý dokument ať už je jakkoliv dlouhý. EU peníze školám CZ.1.07/1.5.00/
6
Změňte barvu textu z „blue“ na „red“ u značky h1
Změňte barvu textu z „blue“ na „green“ u značky p Jednoduchou změnou dvou parametrů jsme dokázali naráz změnit barvu textu nejdříve u jmen postav a pak u jejich dialogů. V případě formátování HTML a použití značky <font> bylo nutné přepsat hodnotu barvy textu pro každý řádek textu zvlášť. Už je vám jasné proč organizace World Wide Web Consortium (W3C) - mezinárodní konsorcium, jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web – zavrhla značku <font> ve prospěch kaskádových stylů CSS? EU peníze školám CZ.1.07/1.5.00/
7
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/
Podobné prezentace
