"Záhlaví stránky jsem vytvořil v horní části stránky pomocí elementu header, který definuje záhlaví. Záhlaví obsahuje banner, neboli obrázek v záhlaví, týkající se celých webových stránek a také obsahuje navigační menu (viz. Obrázek 15).
Obrázek v záhlaví stránky jsem vytvořil v bitmapovém editoru Adobe Photoshop. Velikost obrázku jsem nastavil na 1024x80 pixelů. Nejprve jsem nastavil pozadí celému obrázku. Na pozadí jsem použil barevný přechod v modré barvě. Poté jsem vložil do dokumentu tři velikostně upravené obrázky a naskládal je do levé části obrázku. Pro každý z těchto obrázku jsem vytvořil vlastní vrstvu. V dalším kroku jsem duplikoval všechny tři vrstvy, tedy každý obrázek jsem zkopíroval. Duplikované vrstvy jsem poté zarovnal do pravé části obrázku ve stejném pořadí jako v levé části tohoto obrázku. Na každé straně jsou tedy tři obrázky a uprostřed vznikl srovnatelně velký prostor, do kterého jsem vložil textové pole.
Obrázek 14- Definice vlastností divu s třídou logo
20
Do textového pole jsem vložil nápis „Vožická kultura“. Písmu jsem nastavil velikost 40, černou barvu, která dobře vyniká na modrém pozadí a jako font písma jsem vybral Andalus. Poté už jsem jen obrázek uložil ve formátu JPG.
Pro vložení obrázku do záhlaví jsem vytvořil v elementu header div s třídou logo. Tomuto elementu jsem nastavil na pozadí obrázek, jehož tvorbu jsem popisoval. Dále jsem nastavil výšku elementu div s třídou logo na 80 pixelů, tedy stejně jako je výška samotného vytvořeného obrázku. Margin (vnější okraj) jsem nastavil 10 pixelů pro horní okraj. Dolní okraj jsem nastavil také na 10 pixelů proto, aby později vznikla mezera mezi obrázkem v záhlaví a navigačním menu (viz Obrázek 14).
Obrázek 15- Definice záhlaví stránky
3.1.3 Tvorba navigačního menu stránky
Rozhodl jsem se vytvořit tlačítkové navigační menu. Aby mělo menu pěkný vzhled, musel jsem stylovat (definovat) element button. Vzhledem k tomu, že stylování tlačítek je velice složité a zdlouhavé psaní kódu, rozhodl jsem se, že si tlačítka vygeneruji pomocí CSS3 generátoru tlačítek.
Online generátor CSS3 tlačítek jsem našel na webových stránkách itnetwork.cz. V generátoru šlo nastavit úplně vše, co se tlačítek týkalo, například velikost, tvar, pozadí, stíny atd. Všechny tyto vlastnosti šly nastavit pro tlačítko ve třech různých režimech pokaždé jinak. První režim je, jak bude vypadat tlačítko, pokud na něj nebudeme najíždět myší a klikat, tedy základní režim tlačítka. Druhý režim je, jak bude vypadat tlačítko po najetí myší. Třetí režim, který jsem, ale nepoužil, je, jak bude vypadat tlačítko po kliknutí. Já jsem tedy nastavil pouze první a druhý režim s tím, že obě tlačítka mají stejný tvar, velikost, ale mají nastavenou jinou barvu na pozadí. Základní režim tlačítka má na pozadí nastavenou tmavě modrou barvu, poté co najedeme na tlačítko myší, změní se barva na světlou modrou barvu. Když jsem byl spokojený se vzhledem tlačítka, zkopíroval jsem vygenerovaný CSS3 kód a vložil ho do mé externí šablony stylu."

Práce obsahuje obrázky o rozsahu cca 4 stran.