Třísloupcový layout s hlavičkou a patičkou

    0

    Pomocí kaskádových stylů lze velmi dobře upravovat sazbu webových stránek. Ukáži vám, jak s jejich pomocí vytvoříte třísloupcový vzhled s hlavičkou, patičkou a prostorem pro reklamní banner.

    Před čtením článku byste si měli prohlédnout konečný výsledek, ať předem víte, co vlastně tvoříte.

    1. Nejdříve vytvořte začátek struktury HTML dokumentu – definujte typ dokumentu a použitou verzi jazyka HTML (značka !Doctype), uvoďte začátek HTML dokumentu (značka <html>) a začátek hlavičky dokumentu:

    <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
    <html>
    <head>

    2. Za párovou značku <title> doplňte titulek stránky Okraj prohlížeče, který se bude objevovat v horní liště prohlížeče a za text vložte uzavírací značku </title> pro ukončení titulku. Nesmí chybět informace ve značce <meta> o použitém kódování textu (windows-1250) a nakonec ukončete hlavičku dokumentu pomocí uzavírací značky </head>:

    <title>Třísloupcový layout</title>
    <meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
    </head>

    3. Vložte párovou značku <body>:

    <body>

    4. Vložte značku <style>, která říká prohlížeči, že nyní budou následovat jednotlivé definice stylů. Za touto značkou nezapomeňte vložit komentář <!–, který definici stylu „skryje“ před prohlížeči bez podpory kaskádových stylů.

    <style=“text/css“>
    <!–

    5. Teď již můžete začít vytvářet jednotlivé definice. Pro selektor body použijte tyto vlastnosti: margin a padding pro vytvoření 2px odsazení obsahu stránky od okrajů prohlížeče. Stačil by margin, ale protože Opera používá padding, je potřeba použít obě vlastnosti. Dále je to vlastnost font-family pro typ písma použitého na stránce, font-size pro velikost písma a nakonec nechybí background-color pro stanovení barvy podkladu stránky:

    margin: 2px;
    padding: 2px;
    font-family: arial, sans-serif;
    font-size: 14px;
    background-color: #FFFFFF;

    6. Předem jsem se rozhodl, že layout bude fixní a bude mít šířku 750 pixelů. Tu jsem stanovil pomocí vlastnosti width v selektoru .hlavicka. Vlastnost background-color zde není povinná a v našem příkladu slouží pouze pro odlišení jednotlivých částí layoutu:

    .hlavicka {
    width: 750px;
    background-color: #c6c6c6;
    }

    7. Nyní vytvořte definici stylu pro reklamní banner. Ten má rozměry 468 x 60 pixelů. Tyto dvě hodnoty proto použijte pro vlastnosti width a height. Pomocí margin-top odsaďte od hlavičky prostor pro banner o 5 pixelů a pomocí margin-left ho ještě odsaďte zleva o 141 pixelů, čímž docílíte toho, že prostor pro bannner bude přesně uprostřed layoutu. Proč právě 141 pixelů? Od šířky layoutu (750 px) odečtěte prostor pro banner (468 px) a vydělte dvěma.

    .banner {
    width: 468px;
    height: 60px;
    margin-top: 5px;
    margin-left:141px;
    background-color: #efefef;
    }

    8. Nyní si vytvoříte prostor, do kterého vnoříte levý a pravý sloupec. Stačí definovat pouze šířku width a margin-top pro odsazení o 5 px shora od prostoru pro reklamní banner:

    .hlavni {
    width: 750px;
    margin-top: 5px;
    }

    9. Nyní konečně začneme vytvářet styl pro levý sloupec. Velikost levého sloupce jsem stanovil pomocí vlastnosti width na 150 px a pomocí pravidla float: left; jsem z něj udělal plovoucí box a zarovnal doleva:

    .levy-sloupec {
    width: 150px;
    float: left;
    background-color: #e1e1e1;
    }

    10. Ještě je potřeba vytvořit prostor, do kterého v dalších krocích vložíte prostřední a pravý sloupec. Tento prostor bude mít šířku 595 pixelů. Odsadíte ho od levého sloupce pomocí vlastnosti margin-left o 5 px, a pomocí pravidla float: right; ho zarovnáte napravo:

    .pravy-sloupec {
    width: 595px;
    margin-left: 5px;
    float: right;
    }

    11. Dostáváte se k vytvoření stylu pro prostřední sloupec. Jeho šířka bude 440 px a pomocí vlastnosti float ho zarovnáte vlevo:

    .pravy-sloupec-vlevo {
    width: 440px;
    float: left;
    background-color: #efefef;
    }

    12. Zbývá vytvořit poslední sloupec. Jeho šířka je 150 px, a pomocí margin-left je od prostředního sloupce odsazen o 5 px. Pomocí pravidla float: right; je zarovnán na pravou stranu.

    .pravy-sloupec-vpravo {
    width: 150px;
    margin-left: 5px;
    float: right;
    background-color: #e1e1e1;
    }

    13. Zbývá nadefinovat poslední styl – patičku dokumentu. Ta bude mít šířku 750 px a od sloupců nad ní bude pomocí margin-top odsazena o pět pixelů. Pravidlo clear: both; zajistí umístnění patičky pod sloupce:

    .paticka {
    width: 750px;
    margin-top: 5px;
    clear: both;
    background-color: #c6c6c6;
    }

    14. Ukončete poznámku a definici kaskádového stylu:

    –>
    </style>

    15. Několik dalších kroků budete aplikovat vytvořené selektory v CSS na jednotlivé prvky <div>. Začnete hlavičkou:

    <div class=“hlavicka“>
    Zde bude libovolný text hlavičky.
    </div>

    16. Pokračujete HTML definicí pro reklamní banner:

    <div class=“banner“>Reklamní banner 468×60</div>

    17. Nyní vložíte <div> s třídou .hlavni, do kterého budete postupně vnořovat další prvky <div>:

    <div class=“hlavni“>

    18. HTML definice pro levý sloupec je velmi jednoduchá:

    <div class=“levy-sloupec“>
    Zde bude libovolný text sloupce.
    </div>

    19. Nyní vložíte do stránky prvek <div>, do kterého v dalších krocích vnoříte další dva prvky <div> pro prostřední a pravý sloupec:

    <div class=“pravy-sloupec“>

    20. Vložte definici pro prostřední sloupec:

    <div class=“pravy-sloupec-vlevo“>
    Zde bude libovolný text sloupce.
    </div>

    21. Vložte definici pro pravý sloupec:

    <div class=“pravy-sloupec-vpravo“>
    Zde bude libovolný text sloupce.
    <div>

    22. Ukončete prvek <div> s třídou .pravy-sloupec a hned poté prvek <div> s třídou .hlavni:

    </div>
    </div>

    23.Zbývá vložit prvek <div> s třídou .paticka, čímž nevytvoříte nic jiného, než patičku stránky:

    <div class=“paticka“>
    Zde bude libovolný text patičky.
    </div>

    24. Nakonec pomocí uzavírací značky </body> ukončete tělo HTML dokumentu a pomocí uzavírací značky </html> ukončete definici celého HTML dokumentu:

    </body>
    </html>

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    Mohlo by vás zajímat

    Žádný příspěvek v diskuzi

    Odpovědět