HTML

Web o webu

Layout

Řádkový layout

Vytvořte nový html dokument se třemi bloky pro hlavičku, navigační menu a vlastní obsah webu.

Vytvořte nový soubor stylů a připojte jej k html dokumentu.

V CSS definicích bloků nastavte:

  1. vycentrování všech tří bloků (margin auto)
  2. stejnou vnitřní šířku všech tří bloků (width)
  3. stejný levý a pravý vnitřní okraj všech tří bloků (padding-left a padding-right)
  4. horní a dolní vnitřní okraj bloků dle potřeby (padding-top a padding-bottom)
  5. výšku hlavičky (pro navigační menu a bloku obsahu výšku nezadávejte)
  6. přizpůsobení výšky obsahového bloku i plovoucím objektům (overflow auto)
  7. barvy pozadí všech tří bloků i těla stránky - barvy nabírejte kapátkem z colorschemedesigner.com

Do hlavičky zapište název webu, do menu vložte alespoň dva odkazy, do obsahového bloku zapište nadpis a odstavec.

V CSS nastavte:

  1. barvu písma, velikost a druh písma pro blok hlavičky
  2. změňte padding, width a height hlavičky tak, aby text v ní byl vertikálně i horizontálně v jedné třetině.
  3. pro odkazy v menu nastavte barvu písma, velikost a bez podtržení (kontextuální definice pro odkazy uvnitř menu)
  4. změnu barvy písma při najetí myší na odkazy v menu
  5. styly pro nadpisy a odstavce

Sloupcový layout

Vytvořte nový html dokument se třemi bloky pro hlavičku, navigační menu a vlastní obsah webu, které budou vnořeny v obalovacím bloku.

Vytvořte nový soubor stylů a připojte jej k html dokumentu.

V CSS definicích bloků nastavte:

  1. vycentrování obalovacího bloku (margin auto)
  2. přizpůsobení výšky obalovacího bloku vnitřním blokům (overflow auto)
  3. vnitřní šířku obalovacího bloku (width)
  4. barvu pozadí a rámeček obalovacího bloku, případně zaoblené rohy a stín
  5. obtékání všech tří vnitřních bloků (float left)
  6. šířku hlavičky a její levý a pravý vnitřní okraj tak, aby součet byl roven šířce obalovacího bloku (width, padding-left a padding-right)
  7. výšku hlavičky a horní a dolní vnitřní dle potřeby (height, padding-top a padding-bottom)
  8. barvu pozadí a spodní rámeček hlavičky (border-bottom)
  9. šířku navigačního menu na asi 1/5 až 1/4 šířky obalovacího bloku