Cvičení 5, 6 a 7

Toto cvičení jsme procvičovali styly a začali jsme dělat jednoduchý dvousloupcový design. Řekli jsme si, že pro složitější strukturování stránek a vytváření logických bluků kódu se používá tag div. Pro změnu vladtností části textu se používá řádkový tag span. Tyto tagy nemají žádný semantický význam, jsou určeny pouze pro stylování dokumentu.

div: blokový element určený k vytváření logických bloků, které se lépe stylují.
span: řádkový element určený ke změně vlastností části textu, např. <span class="cerveny">červený text</span> vypadá takto: červený text. Samozřejmě máme připravený styl, který nastaví třídě cerveny červenou barvu.

Rozvržení stránky - layout

Když vytváříme nějakou stránku, chceme, aby se návštěvníkům líbila - proto používáme styly - a aby se jim dobře používala a byla přehledná. K tomu nám dopomůže vhodné rozvržení stránky. Mezi základní typy layoutů patří dvousloupcový s hlavičkou který vypadá asi následovně:

dvousloupcový layout s hlavičkou

…
<div id="page">
    <div id="head">
        <p>hlavička</p>
    </div>
    <div id="obsah">
        <h1>nadpis</h1>
        <p>text stránky</p>
        <div id="box"></div>
    </div>
    <div id="menu">
        <ul>
            <li>položka menu</li>
            <li>položka menu</li>
        </ul>
    </div>
</div>
…

No a k takovémuto XHTML kódu si přidáme následující definici stylů:

/* nastavíme dokumentu bílé pozadí a menší písmo s fontem Arial */
body {
    background: #FFF;
    font: 90% sans-serif;
}

#page {
    background: #EEF; /* světle modré pozadí */
    color: Red; /* červená barva písma */
    width: 760px; /* nastavime šířku dokumentu na 760px */
    margin: 0 auto; /* a zarovnáme ho na střed */
    border: 2px solid blue; /* modrý okraj plnou čarou */
    position: relative;
}

#head {
    background: Black; /* černé pozadí */
    color: White; /* bílé písmo */
    margin: 0; /* zrušíme odsazení od oklolních prvků */
    height: 80px; /* výška hlavičky 80px */
}

#obsah {
    margin-left: 12em; /* uděláme vlevo prostor pro menu*/
    min-height: 200px; /* minimální výška obsahu 200px */
    _height: 200px; /* hack pro MSIE */
}

#menu {
    background: Red;
    position: absolute;
    width: 11em;
    top: 80px;
    left: 0;
    height: 200px;
}

/* pokusný čtvereček na vysvětlení boxmodelu */ 
#box {
    background: #FC3;
    width: 50px;
    height: 50px;
}