Transcript Layout stránky

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


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í
1.
2.
3.
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í