Rozvržení stránky (layout)

Články - Rozvržení stránky (layout)

29.12.2011 16:49 | Autor: SyX

Jak správně rozvrhnout stránku a její součásti? Hlavičku, menu, pravý sloupec či patičku? Na to se podíváme v tomto článku.

Základní části struktury webové stránky jsme si popsali v předchozím článku, ty v popisu budou nyní vynechány a budem se soustředit na části, které neznáme.

Do hlavičky (mezi tagy <head> a </head>) si však přidáme jeden řádek, který nám bude načítat CSS (kaskádové styly) z externího souboru, abychom neměli v našem zdroji nepořádek.

<link rel="stylesheet" href="./styles.css" type="text/css" />

Tento kód nám bude načítat CSS soubor styles.css ze stejného adresáře, jako máme tento (např. index.html). Soubor si tedy vytvořte a hned si povíme, k čemu vlastně slouží.

CSS (Cascade Style Sheet) pro Vás bude nepostradatelný pomocník pro veškeré formátování / zobrazování Vaší stránky. Nastavíme si v něm co a jak se má zobrazit, jak to má být veliké, jakou to má mít barvu, apod...

Vraťme se tedy k našemu rozvržení stránky. Budeme tedy chtít na své stránce např. hlavičku s logem, horní menu, praví sloupec, patičku a samozřejmě obsah naší stránky.

Pro každou tuto část si vytvoříme html element <div>, což je blokový element, který nám bude sloužit jen jako obal pro každou naši část webu. Každý takovýto element však musí být i uzavřen pomocí </div>. Budeme s těmito částmi postupovat od vrchu. Jelikož to budou naše hlavní části stránky, přidělíme jim ID podle kterého je rozeznáme, a díky kterému jim pomocí CSS vysvětlíme, jak budou vypadat apod. Avšak náš pravý sloupec bude vedle obsahu, proto náš obsah i pravý sloupec obalíme ještě do jednoho <div>.

Náš soubor index.html bude tedy vypadat zhruba náhledovně:

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="./styles.css" type="text/css" />
        <title>První pokus</title>
    </head>
    <body>
        <div id="hlavicka">
            Zde bude hlavička sránky, např logo.
        </div>
        <div id="menu">
            <a href="#">naše menu 1</a>
            <a href="#">naše menu 2</a>
            <a href="#">naše menu 3</a>
        </div>
        <div id="center">
            <div id="obsah">
                <h1>Naše stránka</h1>
                <p>Zde bude nějaký obsah stránky</p>
            </div>
            <div id="sloupec">
                Zde máme něco v pravém sloupci
            </div>
        </div>
        <div id="paticka">
            Zde bude naše patička, třeba s copyrightem.
        </div>
    </body>
</html>

Tak snad je vše k pochopení, pro příklad sem do různých částí vložil vzorový text, či odkazy (bez adresy).

Nyní máme tedy části webu rozdělené, ale teď jim musíme nastavit v našem CSS souboru velikosti, umístění, atd.. Celému našemu webu však nastavíme stejně písmo i velikost a nulové okraje stránky.

body { margin: 0px; font-family: Verdana, Hevletica, sanf-serif; font-size: 12px; }

Řekněme, že náš web bude široký 980 pixelů, což je v dnešní době asi optimální velikost a zarovnáme jej na střed. Hlavičku budeme chtít 100 pixelů vysokou a do ní si časem dáme třeba nějaké logo. V našel příkladu dáme hlavičce černé pozadí a bílý text, aby byly části webu bobře rozeznatelné.

#hlavicka { width: 980px; height: 100px; margin: 0px auto; background: black; color: white; }

Hodnota margin: 0px auto; nám zařídí, že element bude na středu stránky. Jinak řečeno, horní a dolní okraj bude 0 pixelů a levý s pravým okrajem budou dopočítání automaticky (tj. stejně veliké), což nám udělá vycentrování.

Další naší částí je menu, které nastavíme stejně jako hlavičku, jen s tím rozdílem, že si ho uděláme menší. Opět mu dáme nějakou barvu pozadí, třeba žlutou. K menu přidáme další parametry pro všechny odkazy (#menu a {...}), aby mezi sebou měli nějakou mezeru a byly na středu našeho menu.

1
2

#menu { width: 980px; height: 20px; margin: 0px auto; background: yellow; line-height: 20px; }
#menu a { margin: 0px 20px; }

Další maší částí je obsah, který je ve stejném bloku jako pravý sloupec. Tomu jen nastavíme šířku a zarovnání na střed. Obsahová část stránky bude mít jen šířku a zarovnáme ji na levou část stránky. Pravý sloupec pak nastavíme aby byl zarovnán na pravou část.

1
2
3

#center { width: 980px; margin: 0px auto; }
#obsah { width: 770px; float: left; background: gray; }
#sloupec { width: 200px; float: right; background: blue; }

Opět jsme našim částem nastavili nějakou barvu pozadí, abychom viděli jestli se nám vykreslují dobře. Nyní poslední část, a to naše patička stránky, kterou samozřejmě budeme chtít, aby byla vždy úplě dole jak pod obsahem, tak i pod menu. Nastavíme jí tedy clear: both; a ona bude čekat na náš obsah i bravý sloupec, které jsou zarovnané na strany.

#paticka { clear: both; width: 980px; margin: 0px auto; }

Nyní bychom měli mít CSS hotové. Celý náš soubor s CSS by měl vypadat následovně:

body { font-family: Verdana, Hevletica, sanf-serif; font-size: 12px; }
#hlavicka { width: 980px; height: 100px; margin: 0px auto; background: black; color: white; }
#menu { width: 980px; height: 20px; margin: 0px auto; background: yellow; line-height: 20px; }
#menu a { margin: 0px 20px; }
#center { width: 980px; margin: 0px auto; }
#obsah { width: 770px; float: left; background: gray; }
#sloupec { width: 200px; float: right; background: blue; }
#paticka { clear: both; width: 980px; margin: 0px auto; }

Můžete se podívat na příklad zde, jak by měl náš pokus vypadat.

Hodnocení (35 hlasů)

Komentáře

Zatím zde nejsou žádné komentáře.

Přidat komentář

Příhlášení

Zapomenuté heslo?Registrace

Tvorba www

Chcete mít vlastní web? Vytvořím Vám Vaši vlastní www stránku či webovou aplikaci dle Vašich představ. Časově přívětivě, cenově dostupně.

Kontakt

Spolupráce

Jste firma nebo živnostník pracující v oblasti tvorby www? Nebráním se žádné spolupráci jak s grafickými studii, tak ani s jinými firmami či živnostníky. Pracuji externě ze svého domova, ale osobní setkání není problém.

Facebook

SyX.cz - Tvorba www a webových aplikací

Google+

SyX.czon

Twitter

SyXcz

SyX.cz - Tvorba www a webových aplikací