ADOBE DREAMWEAVER CS6 Formátování HTML vs. CSS Autor: Ing. Vladimír Műller
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 1. 2. 2014 Číslo materiálu VY_32_INOVACE_Mu1_4 EU peníze školám CZ.1.07/1.5.00/34.0154
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/34.0154
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): http://knihy.cpress.cz/?p=actions&action=download/file&value=files&id=115084 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/34.0154
Nyní to zkusíme pomocí stylů CSS… Otevřeme soubor formatovani_css.html, který získáme z http://knihy.cpress.cz/?p=actions&action=download/file&value=files&id=115084 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/34.0154
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/34.0154
Použité zdroje: Adobe DreamWeaver CS6. Computer press, 2013 Použité zdroje: Adobe DreamWeaver CS6. Computer press, 2013. ISBN 978-802-5137-352. Adobe Dreamweaver CS6. Knihy.cpress.cz [online]. [cit. 2014-02-01]. Dostupné z: http://knihy.cpress.cz/adobe-dreamweaver-cs6-oficialni-vyukovy-kurz.html# EU peníze školám CZ.1.07/1.5.00/34.0154