Technologie pro publikování na webu 1

Prezentace na téma: "Technologie pro publikování na webu 1"— Transkript prezentace:

1 Technologie pro publikování na webu 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 Obsah
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 <font color="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. <p style="color:black; font-weight:bold;">Text</p> <style type="text/css" media="screen"> p {color: black; font-family: Tahoma;} </style> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> Technologie pro publikování na webu 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 Vazba přes id <p>text</p> p {font-family: Verdana;} <p class="mujodstavec">text</p> .mujodstavec {font-family: Verdana;} <p id="mujjedinecnyodstavec">text</p> #mujjedinecnyodstavec {font-family: Verdana;} Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

15 Jednotky v CSS Čísla Jednotky velikosti Procenta Barva
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