Technologie pro publikování na webu 1

1. Kaskádové styly (CSS) Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

2. Forma a obsah Webovou stránku lze rozdělit na dvě části • Forma • Visuální ztvárnění stránky • Tvorba formy vyžaduje kreativní práci (rozvržení, grafika, formátování, barvy a styly písem…) • Obsah • Tvořen samotnými daty (text odstavce, data v tabulce) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3. Forma a obsah • Hlavní účel webové stránky je prezentovat informace • Volba formy závisí především na • Typu stránek • Rozsahu prezentovaných informací • Zvolených vývojových technologiích • Požadavcích klienta • Moderních trendech Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

4. Forma a obsah • V moderním pojetí tvorby webu se forma a obsah nemísí v jednom kódu <fontcolor="red"face="Arial">Varování</font> • V tomto případě je barva písma i použitý font definován jako atribut elementu font. Tento způsob znemožňuje znovupoužitelnost. Pokud bude třeba změnit barvu či písmo (v tomto případě) varovných hlášení, bude nutné to provést na všech místech v kódu. V moderním pojetí webů jsou forma a obsah odděleny Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

5. Layout • Pod pojmem layout rozumíme visuální rozvržení stránky. • Tvorba layoutu je oddělená od práce programátora • Layout lze chápat jako jakousi šablonu stránek tvořenou elementy jazyka XHTML, kaskádovými styly, obrázky či doplňky Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

6. Tabulkový layout • Celá stránka je chápána jako tabulka s případnými vnořenými tabulkami • Výhody • Snadno pochopitelné • Funkční i při výpadku stylů, kompatibilní v různých prohlížečích • Nevýhody • Nepřehledný kód • Změna vzhledu musí být realizována napříč celým kódem stránky, neúměrně velký zásah do kódu při relativně banální změně vzhledu Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

7. Layout založený na CSS • Stránka je chápána jako skupina oblastí a elementů, vzhled(forma) je definován v samostatném souboru • Výhody • Snadná udržitelnost kódu • Oddělení formy od obsahu • Variabilita, efektivita, přizpůsobivost • Nevýhody • Složitější pro pochopení • V různých prohlížečích může být různě interpretováno – nutnost kontrolovat výstup a případné nesrovnalosti ladit. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

8. Kaskádové styly (CSS) • Visuální formátování elementů XHTML stránky definované zpravidla v samostatném souboru • Tento koncept umožňuje a podporuje • Znovupoužitelnost definovaných stylů • Oddělení formy od obsahu • Jednoduchou záměnou souboru stylů změnit vzhled elementů nebo i celé stránky • Cílit formátování pro konkrétní média (obrazovka, tiskárna, PDA…) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

9. Využití CSS – doplňkové formátování • Základem bývá tabulkový layout, CSS pouze obohacují základní formátování. • Inline stylování za pomoci atributu style • Výsledný kód je nepřehledný, těžko spravovatelný, není zde žádná znovupoužitelnost, výsledná stránka může být často nevalidní • Malé nároky na znalosti, kompatibilita mezi prohlížeči Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10. Využití CSS – formátování elementů • CSS jsou využity k formátování veškerých XHTML elementů, kromě layoutu – ten je realizován většinou tabulkou • Výsledný kód je přehlednější než v prvním případě, definice formátu elementu je na jednom místě, proto změna formátu elementů vyžaduje jen malou změnu kódu • Nelze měnit rozložení stránky Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

11. Využití CSS – kompletní formátování • CSS definuje vzhled elementů i rozvržení stránky jako takové • Definice stylů jsou uloženy zpravidla v jiném souboru • Vyžaduje pokročilou znalost XHTML a CSS • Jednoduchá změna vzhledu • Čistota kódu Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

12. Využití CSS ve stránce • Inline stylování elementu • Žádná znovupoužitelnost, platí pro všechna média • Deklarace stylu v tagu <style> • Styly jsou znovupoužitelné, je možno rozlišovat média • Deklarece stylů v externím souboru • Nejčistčí způsob, nemísí se XHTML a deklarace stylů, ext. soubor lze nalinkovat do jiné stránky. <pstyle="color:black; font-weight:bold;">Text</p> • <styletype="text/css"media="screen"> p {color: black; font-family: Tahoma;} </style> <linkrel="stylesheet"type="text/css"href="style.css"media="screen"/> Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

13. Deklarace stylů - pravidlo • Příklad ilustruje stylování odstavce Selektor p { font-family: Verdana; font-size: 12px; color: red; } Seznam definic Selektor může být buď název elementu, nebo název třídy, nebo název id elementu – viz typy vazeb. Seznam definic je uzavřen do složených závorek, jednotlivé definice jsou zapisovány ve tvaru vlastnost: hodnota; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

14. Typy selektorů – vazby na elementy • Vazba přes název elementu • XHTML:CSS: • Vazba přes třídu • XHTML:CSS: • Vazba přes id • XHTML:CSS: <p>text</p> p {font-family: Verdana;} <pclass="mujodstavec">text</p> .mujodstavec {font-family: Verdana;} <pid="mujjedinecnyodstavec">text</p> #mujjedinecnyodstavec {font-family: Verdana;} Technologie pro publikovánínawebu 1, Ing. JiříŠtěpánek

15. Jednotky v CSS • Čísla • Celá čísla bez i se znaménkem (14;-5;+9) • Reálná čísla (0.5) • Jednotky velikosti • em – relativní jednotka – velikost „M“ právě používaného písma • ex – stejné jako em, ale „x“ (bráno jako ½ em) • px – pixel • cm – centimetr • in – palec • Procenta • Rel. jednotka, s i bez znaménka (25%; -5%; 50,5%) • Barva • Klíčovými slovy (black, blue, silver, red…) • číselně rgb(80, 50,255), rgb(10%,20%,30%). Číselný rozsah je 0-255 • V hexadecimálním tvaru (#RRGGBB) - #0000FF (čistá modrá) Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

16. Shrnutí Webovou stránku lze vnímat ze dvou hledisek – formy a obsahu. Forma je tvořena rozložením stránky, barvami, použitím různých druhů písem, nadpisy… Obsahem jsou data, která jsou na stránce prezentována. Forma a obsah by se neměly nikdy mísit dohromady v jednom kódu. Řešení přináší použití kaskádových stylů. V ideálním případě jsou styly definované v externím souboru a jednotlivé elementy XHTML se na tyto styly odkazují. Vzniká tak prostor pro znovupoužitelnost již jednou definovaného formátování. Je možné využít dědičnosti (vnořený element přebírá formátování předka). Takový postup vytváření webových stránek vede k čistému kódu, ve kterém je možné upravovat formu na jednom místě, bez nutnosti zásahu do XHTML kódu (pokud nejde o zásadní změny layoutu). Kaskádové styly lze s XHTML provázat 3 způsoby – přes název elementu, přes třídu a přes identifikátor (id) elementu. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

17. Příští přednáška • Více o selektorech • Pseudotřídy • Formátování textu • Okraje • Pozicování Technologie pro publikování na webu 1, Ing. Jiří Štěpánek