<< 21.Tvorba webu | Témata PVY | 23.Javascript >>

22. Design webu

  • Rozložení obsahu webové stránky - tabulky, rámce bloky - srovnání
  • Kaskádové styly - podstata, možnosti vložení, příklad stylování stránek
  • Blokový layout - definice, struktura, výhody a nevýhody
  • Příklad nastavení - pozadí stránky, styly nadpisů, stylování tlačítek menu

Rozložení obsahu - Layout

  • určuje rozmístění obsahu do jednotlivých částí strany - hlavička, pata, menu, obsah ...
  • Používané způsoby
    • Tabulky
      • využití tagů <table>, <tr>, <td>
      • nejstarší, jednoduchý způsob
      • omezené možnosti formátování a polohování, pomalé načítání strany
    • Rámce
      • Rámec - obdélníková oblast pro zobrazení obsahu HTML souboru
      • Rámcová strana - skládá obsah několika HTML souborů do jedné strany - využití tagu <frameset>
        • jednoduchý a efektivní způsob rozložení, jednoduchá navigace
        • špatná přístupnost, omezené možnosti uspořádání rámců, problém u mobilních zařízení
    • Bloky řízené CSS
      • využití tagu <div> + jeho pozicování a formátování pomocí pravidel CSS
      • moderní způsob rozložení obsahu, široké možnosti polohování a formátování bloků
      • složitější pravidla CSS, mírné rozdíly při zobrazení v různých prohlížečích

Kaskádové styly - CSS - Cascading Style Sheets

  • pravidla pro úpravu designu webových stránek, možnost seskupování(kaskády)
  • pravidla stanovena konsorciem W3C v roce 1999 jako CSS1
    • dnes standard CSS 2 a příprava CSS 3
  • Syntaxe - selektor {vlastnost1 : hodnota ; vlastnost2 : hodnota;}
  • Příklad - h1 {margin: 5px; font-size: 12pt;}
  • Vložení CSS
    • Přímý zápis stylu - do HTML tagu pomocí atributu style
      • <p style="color: red">Červený odstavec.</p>
    • Definice stylu v hlavičce stránky - využití tagu <style>
      • <style>p {line-height: 200%;}/* dvojnásobné řádkování odstavce*/</style>
    • Externí definice v souboru CSS
      • připojení souboru design.css v hlavičce pomocí tagu <link>
      • <link rel="stylesheet" type="text/css" href="design.css">
  • Výhody
    • oddělení obsahu a stylu
    • jednoduchá změna stylu celého webu
    • jednorázové načtení stylu do paměti prohlížeče pro celý web
  • Nevýhody
    • rozdíly v podpoře CSS ze strany prohlížečů (starší verze)

Blokový layout -BOX - model

  • Rozměry bloku
  • Definice bloku
    • pomocí tagu <div>
  • Identifikace bloku
    • využití identifikátoru ID nebo třídy CLASS
    <div id = "selektor_pro_id">Cervena</div>
    <p class = "selektor_pro_class">Zelezy odstavec</p>
    • přiřazení pravidel pomocí selektoru s křížkem nebo s tečkou
    #selektor_pro_id {color: Red}
    .selektor_pro_class {color: Green;}
  • Pozicování bloků
    • Absolutní - od levého horního rohu
      • position : absolute; left: 20px; top: 50px
    • Relativní - od předchozího bloku
      • position : relative; left: 20px; top: 50px
    • Vrstvené bloky - z-index : pořadí
    • Plovoucí bloky - float : left | right

Příklad nastavení layoutu

  • Schema layoutu
  • HTML
  • CSS

Důležité odkazy

Školní stránky

RSS