Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy.

Podobné prezentace


Prezentace na téma: "Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy."— Transkript prezentace:

1 Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně šířky okna Zachování polohy při změně šířky okna Jednotné rozvržení a vzhled všech stránek webu Jednotné rozvržení a vzhled všech stránek webu Typy layoutu Typy layoutu Podle počtu sloupců Podle počtu sloupců Jednosloupcový Jednosloupcový Dvousloupcový Dvousloupcový Třísloupcový Třísloupcový Vícesloupcový Vícesloupcový

2 Layout stránky Podle nastavení šířky stránky Podle nastavení šířky stránky fixní layout – dle rozlišení – šířka cca 1000px fixní layout – dle rozlišení – šířka cca 1000px fluidní layout – šířka je proměnná dle rozlišení fluidní layout – šířka je proměnná dle rozlišení Technologie tvorby layoutu Technologie tvorby layoutu Tabulkový layout Tabulkový layout Rámcový layout Rámcový layout Blokový 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. 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 Výhody přehledný a jednoduchý kód přehledný a jednoduchý kód Nevýhody Nevýhody pomalé načítání - načítá se celá tabulka najednou pomalé načítání - načítá se celá tabulka najednou omezené možnosti formátování buněk tabulky omezené možnosti formátování buněk tabulky Nepoužívat!! 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ý 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í. Rámcová stránka definuje rozvržení obsahu stránek do rámcových oblastí. Výhody Výhody jednoduché a efektivní řešení rozložení obsahu jednoduché a efektivní řešení rozložení obsahu společné menu pro všechny strany společné menu pro všechny strany Nevýhody Nevýhody pomalé načítání pomalé načítání nevhodné pro vyhledávače nevhodné pro vyhledávače Nepoužívat!! 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. 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 Výhody rychlé načítání - úsporný kód rychlé načítání - úsporný kód formátování - větší možnosti nastavení vzhledu formátování - větší možnosti nastavení vzhledu úprava vzhledu - centrální šablona stylů úprava vzhledu - centrální šablona stylů Nevýhody Nevýhody rozdíly mezi prohlížeči v interpretaci CSS 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. 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. 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 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. Značka span není značkou blokovou, ale značkou řádkovou. Pomocí této značky lze formátovat určitou část textu. Pomocí této značky lze formátovat určitou část textu. Značka SPAN nemůže v sobě obsahovat blokové značky. Značka SPAN nemůže v sobě obsahovat blokové značky. Používá se zejména pro práci s textem. Používá se zejména pro práci s textem. Příklad: Příklad: Normální text a najednou text, který má bublinu. Normální text a najednou text, který má bublinu.

8 Dvousloupcový layout Obr. 1

9 Dvousloupcový layout Obr. 2

10 Dvousloupcový layout Externí stylopis – styl2.css 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 Externí stylopis – styl3.css Obr. 6

14 Otázky k opakování 1. Co je to layout stránky? 2. Jakým způsobem lze vytvořit layout stránky? 3. 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, BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 6. února :30. Dostupný z WWW: Použité obrázky: Vlastní


Stáhnout ppt "Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy."

Podobné prezentace


Reklamy Google