Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně šířky okna Jednotné rozvržení a vzhled všech stránek webu Typy layoutu Podle počtu sloupců Jednosloupcový Dvousloupcový Třísloupcový Vícesloupcový
Layout stránky Technologie tvorby layoutu Podle nastavení šířky stránky fixní layout – dle rozlišení – šířka cca 1000px fluidní layout – šířka je proměnná dle rozlišení Technologie tvorby layoutu Tabulkový layout Rámcový layout Blokový layout
Tabulkový layout stránky Pro rozvržení stránky (layout stránky) se dříve nejčastěji používala tabulka, protože jazyk HTML neměl žádné univerzální značky pro tuto činnost. Výhody přehledný a jednoduchý kód Nevýhody pomalé načítání - načítá se celá tabulka najednou omezené možnosti formátování buněk tabulky Nepoužívat!!
Rámcový layout stránky Rámcový layout seskupuje obsahu několika html stránek pomocí speciální rámcové stránky. Rámcová stránka definuje rozvržení obsahu stránek do rámcových oblastí. Výhody jednoduché a efektivní řešení rozložení obsahu společné menu pro všechny strany Nevýhody pomalé načítání nevhodné pro vyhledávače Nepoužívat!!
Blokový layout stránky Pro rozvržení stránky pomocí CSS pozicování byly vymezeny značky div a span. Tyto dva elementy jsou univerzální, můžeme obsah uvnitř nich formátovat jakoukoliv vlastností CSS. Výhody rychlé načítání - úsporný kód formátování - větší možnosti nastavení vzhledu úprava vzhledu - centrální šablona stylů Nevýhody rozdíly mezi prohlížeči v interpretaci CSS
Značka DIV Tato značka ohraničí nějakou část stránky, která bude mít společné vlastnosti nadefinované v CSS pomocí nějaké třídy. Do značky div lze vložit další (vnořený) div. Značka div je bloková a hodí se nejlépe pro rozvržení stránky. Značka DIV před sebou a za sebou udělá konec řádku.
Značka SPAN Značka span není značkou blokovou, ale značkou řádkovou. Pomocí této značky lze formátovat určitou část textu. Značka SPAN nemůže v sobě obsahovat blokové značky. Používá se zejména pro práci s textem. Příklad: <p>Normální text a najednou <span title="text bubliny">text, který má bublinu.</span></p>
Dvousloupcový layout Obr. 1
Dvousloupcový layout Obr. 2
Dvousloupcový layout Externí stylopis – styl2.css Obr. 3
Třísloupcový layout Obr. 4
Třísloupcový layout Obr. 5
Třísloupcový layout Externí stylopis – styl3.css Obr. 6
Otázky k opakování Co je to layout stránky? Jakým způsobem lze vytvořit layout stránky? Jaké nevýhody má tabulkový a rámcový layout?
Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 6. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní