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ě.

Prezentace na téma: "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ě."— Transkript prezentace:

1 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ý

2 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

3 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!!

4 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!!

5 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

6 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.

7 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>

8 Dvousloupcový layout Obr. 1

9 Dvousloupcový layout Obr. 2

10 Dvousloupcový layout Externí stylopis – styl2.css Obr. 3

11 Třísloupcový layout Obr. 4

12 Třísloupcový layout Obr. 5

13 Třísloupcový layout Externí stylopis – styl3.css Obr. 6

14 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?

15 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. Podpora výuky: „Tvorba www stránek“ [online]. 6. února :30. Dostupný z WWW: Použité obrázky: Vlastní