<< HTML Editory | HTML stránky | CSS - kaskádové styly >>
Obsah webové strany
- Hlavní problémy
- polohování textů, popisů, navigace, grafiky a obrázků
- zachování polohy při změně šířky okna
- jednotné rozložení a vzhled všech stránek webu
- přizpůsobení obsahu velikosti okna a typu zařízení
- Řešení pomocí šablony webu - layoutu
Layout - šablona rozložení
- způsob polohování oblastí stránky s různým typem obsahu
- záhlaví, zápatí, řádkové menu, sloupcové menu, obsah ...
Typy layoutu
Podle počtu sloupců
- jednosloupcový, dvojsloupcový, trojsloupcový
Podle nastavení šířky stránky
- fixní layout - pevná šířka stránky s ohledem na rozlišení monitoru - cca 960 - 980 px
- fluidní layout - šířka je proměnná podle aktuální šířky okna - obvykle 90 - 95 %
- responzivní layout - rozvržení se přizpůsobuje šířce okna a typu zobrazovacího zařízení - monitor, tablet, mobil...
Technologie layoutu
Tabulkový layout
- využití html tabulek pro rozložení obsahu
- ukázka výběru tabulky rozvržení v SharePoint Designer - SPD
- 1 - Záhlaví, Levý sloupec, Pravý horní a Základní text
- 2 - Záhlaví, Levý sloupec, Základní text a Zápatí
- Výhody
- přehledný a jednoduchý kód
- využití tabulek rozložení v SPD
- Nevýhody
- pomalé načítání - načítá se celá tabulka najednou
- omezené možnosti formátování buněk tabulky
Rámcový layout
- seskupení obsahu několika html stránek pomocí speciální rámcové stránky
- rámcová strana definuje rozvržení obsahu stránek do rámcových oblastí
- z jednoho rámce lze volat stránky do jiného rámce
- ukázka výběru rámcové strany v SPD
- Výhody
- jednoduché a efektivní řešení rozložení obsahu
- společné menu poro všechny strany
- Nevýhody
- pomalé načítání
- nevhodné pro vyhledávače
Blokový layout řízený kaskádovými styly
- využití html tagů
<div>nebo<span>pro členění obsahu do bloků - využití stylových pravidel CSS? pro nastavení velikosti, polohy a vzhledu oblastí
- ukázka výběru stylové šablony v SPD
- Výhody
- rychlé načítání - úsporný kód, řízení pořadí načtených prvků
- možnosti formátování - větší možnosti nastavení vzhledu
- úprava vzhledu - centrální šablona stylů využívaná více stránkami
- Nevýhody
- nutnost znalosti pravidel CSS
- rozdíly mezi prohlížeči v interpretaci CSS
