Layout stránky
Download
Report
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í