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

26. února 2002

•

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ů.

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>:

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:

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>