CSS layout WWW stránky (princip boxů a jejich rozmístění)
Obsah lekce:
- Layout - rozmístění stavebních prvků stránky
- Struktura souborů internetové stránky
- Hlavní kontejner stránky
- Prvek Banner
- Prvek Menu
- Prvek Obsah
- Prvek Patička
Layout - rozmístění stavebních prvků stránky
V této lekci vytvoříme sadu CSS pravidel, které vytvoří základní layout (rozmístění prvků) stránky. Využijeme k tomu html značky div, pomocí kterých nadefinujeme blokové elementy pro základní prvky stránky (na stránkách http://layouts.ironmyers.com/ nebo na http://blog.html.it/layoutgala/ lze nalézt mnoho typů CSS layoutů stránky).
My vytvoříme jeden z nejpoužívanějších layoutů, který obsahuje hlavičku stránky (banner), levé menu, místo pro obsah (content) vpravo od menu a patičku stránky (footer).
Zamysleme se nejprve nad tím, jakou velikost v pixelech budou jednotlivé prvky stránky mít.
- Celková šířka stránky - jakou šířku stránky zvolíme? Především musíme uvažovat, jaká šířka stránky je optimální pro většinu uživatelů vzhledem k rozlišení obrazovek. Jak zjistit, které rozlišení je ještě nutno respektovat, pokud chceme pokrýt co nejvíce uživatelů? Můžeme zkusit na Internetu nalézt statistiku rozlišení uživatelů Internetu. Takovou statistiku lze nalézt například na stránkce http://www.w3schools.com/browsers/browsers_display.asp. Z lednové statistiky roku 2009 jde vidět, že rozlišení 1024x768 pixelů má stále asi 36 % uživatelů a vyšší asi 57 % uživatelů. Pokud vytvoříme stránku, která bude mít šířku takovou, aby byla celá vidět při šířce obrazovky 1024 bodů, tak máme zaručeno, že alespoň 93 % uživatelů naši stránku skutečně uvidí na šířku bez problémů. Zbývá zodpovědět otázku, jak udělat skutečně obsah stránky široký? Uvědomme si, že internetový prohlížeč má na obrazovce vlevo i vpravo okraj. Je-li stránka delší než viditelná část okna prohlížeče, pak šířce ještě ubere vertikální posuvník stránky. Lze uvažovat šířku nejvýše 900 bodů.
- Výška stránky - ta je většinou proměnlivá a může být v podstatě libovolná.
- Výška banneru (hlavičky) - v banneru bývá zpravidla grafika, která charakterizuje internetovou stránku. Rozhodnout se musíme o výšce banneru. Uvažovat můžeme v podstatě libovolnou výšku. Záleží na tom, zda chceme mít banner výrazný. Běžně se volí hodnota výšky 150-250 pixelů.
- Levé menu - zde může být výška opět variabilní, protože nevíme, kolik bude mít menu položek. Šířka by měla být ideálně taková, aby se na jednotlivé položky menu dal napsat jejich název (popis). Běžně můžeme volit hodnotu šířky menu 150-200 pixelů.
- Obsah stránky - ten vyplňuje místo mezi levým menu a pravým okrajem stránky (šířka stránky - šířka menu = šířka obsahu). Pokud máme šířku stránky 900 pixelů a šířku menu 200 pixelů, tak šířka obsahu bude 700 pixelů.
- Patička stránky - šířka bude stejná jako šířka stránky. Výška se nastaví dle potřeby.
Struktura souborů internetové stránky
Nejprve vytvoříme prázdnou html stránku pouze s hlavičkou. Tu si uložíme do složky jako soubor index.html. Ve složce s html souborem vytvoříme složku s názvem css, ve které vytvoříme soubor s názvem styly.css.
Vytvoření souboru s kaskádovými styly
V aplikaci Adobe Dreamweaver (v případě, že jej nemáme k dispozici, tak stačí použít libovolný jiný textový editor jako např. pspad) vytvoříme nový prázdný css soubor v kódování utf-8 (Soubor -> Nový) jako na následujícím obrázku.
Obsahem nově vytvořeného css souboru jsou pouze dva řádky. První z nich je informace o kódování css souboru. Druhou informací je pouze komentář, který obsahuje informaci o tom, že se jedná o css dokument.
@charset "utf-8"; /* CSS Document */
Soubor styly.css uložíme do naší složky css. Jako další krok vytvoříme soubor index.html jako nový prázdný soubor typu html. V Adobe Dreamweaveru zvolíme Soubor -> Nový. Ve zobrazeném okně ještě k html souboru připojíme css soubor (pravý dolní roh okna viz následující obrázek).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="file:///C|/wamp/www/web/css/styly.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
První řádek informuje prohlížeč o použitém typu značení v dokumentu, atribut meta informuje prohlížeč o použitém kódování, UTF-8 se standardně používá díky plné kompatibilitě s českým jazykem.
Všimněme si, že vložený kaskádový styl obsahuje absolutní cestu k souboru v rámci systému Windows na lokálním počítači. Cesta se změní na správnou relativní v momentě, kdy soubor uložíme do kořenovéh adresáře našeho webu (Soubor -> Uložit). Hlavička se pak změní takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/styly.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
Nikdy bychom neměli používat absolutní cesty, protože takový web nelze přesunout jako celek na jiný počítač, nebo do jiné složky. Těmito kroky máme hotovo vše podstatné proto, abychom mohli začít vytvářet náš web.
Hlavní kontejner stránky
K vytvoření elementů webu použijeme html značku div. Element div si můžeme představit jako jakýsi panel, do kterého lze vkládat obrázky, text a další. Každému takovému tagu (elementu) div přiřadíme identifikátor (id) a napíšeme css pravidlo (vytvoříme pro něj styly), které bude popisovat vzhled divu s daným identifikátorem.
Jako první vytvoříme div s identifikátorem box, který bude obsahovat celou internetovou stránku.
<body> <div id="box"> </div> </body>
Vytvořili jsme tedy element div s id box, toto id (název) je pro něj jedinečné. Ve stránce se nesmí vyskytovat dva elementy se stejným id.
div#box{
width:900px;
margin:auto;
background-color:#8cd5f0;
}
Jelikož jsme si div pojmenovali (přiřadili jsme mu id), můžeme na něj aplikovat styly, které budou aplikovány jen na něj. Styly se zapisují do css souboru a to tak, že zapíšeme typ elementu, za to znak # a za to id elementu, na který se má styl použít. Seznam stylů pro daný element se zapisuje do složených závorek a jednotlivé příkazy se oddělují středníkem.
Jako první nastavíme šířku divu na 900 pixelů (šířku lze zadávat buď přímo pomocí pixelů, nebo pomocí procent). Můžeme si všimnout, že stejně jako v html souboru zde nezáleží na počtu mezer a nových řádků, proto si vytvoříme souboru přehledný, abychom se v něm vyznali.
Druhé pravidlo se týká levého a pravého okraje. Margin značí vždy odsazení z některé strany, lze použít zvlášť margin-left, margin-right, margin-top a margin-bottom pro definování odsazení z každé strany zvlášť, nebo lze použít souhrnné margin pro souhrnné definování všech odsazení naráz. Položka auto říká, že se má spočítat šířka nadřazeného elementu (zde tedy celé stránky) a div se má vycentrovat. Pro správné fungování margin: auto ale musí mít div nastavenu pevnou šířku.
Poslední pravidlo zadává, jaká barva má být vykreslována na pozadí divu. Barvy lze zadávat pomocí hexadecimálního zápisu RGB (lze získat například z programu Adobe Photoshop), nebo lze použít některou z předdefinovaných barev jako black, white, red apod. (předdefinovány jsou pouze základní barvy).
Prvek Banner
Prvek box z předchozí části nám tvoří panel pro umístění celé stránky. Nyní ale potřebujeme tento panel rozdělit na hlavičku, menu, obsah a patičku. Toto provedeme přidáním dalších divů, začneme s hlavičkou. Vytvoříme tedy nový div banner a umístíme jej dovnitř divu box. Nezapomeneme mu přiřadit jedinečné id.
<body> <div id="box"> <div id="banner"></div> </div> </body>
Pokračovat budeme přidáním CSS stylů pro tento div.
div#banner{
width:900px;
height:250px;
background-image:url(../obrazky/banner.jpg);
background-position: top center;
background-repeat: no-repeat;
}
Šířku opět nastavíme na 900 pixelů, aby banner zabíral celou horní plochu. Zde narozdíl od divu box nastavíme i výšku - při tvorbě skutečného webu bychom výšku upravili podle výšky banneru. Poslední věcí je přidání obrázku na pozadí divu, což se provádí pomocí příkazu background-image: url(). V závorce se neuvádějí uvozovky, ovšem většinou nám Adobe Dreamweaver umožní vybrat obrázek jako soubor a cestu doplní sám. Pokud nás překvapila část cesty ../, tak toto znamená návrat o adresář výš, aby bylo možno v celém webu použít relativní cesty a web byl tedy přenosný jako celek.
Příkazy background-position (pozice pozadí je stanovena uprostřed horizontálně a nahoru vertikálně) a background-repeat (je nastaveno neopakovat, ale lze nastavit x-repeat pro vodorovné opakování a y-repeat pro svislé opakování) nejsou povinné, ovšem zamezíme tím chybnému vykreslení banneru, pokud by se stalo, že by měl jiné rozměry, než jsme nastavili u divu.
Prvek Menu
Úplně obdobně budeme pokračovat s divem menu. Přiřadíme mu jedinečné id a vložíme jej do divu box právě za div banner, aby bylo menu vykresleno až pod bannerem.
<body> <div id="box"> <div id="banner"></div> <div id="menu"> </div> </div> </body>
div#menu{
width:200px;
float: left;
}
Menu bude mít šířku 200 pixelů. Pokud ovšem budeme chtít, aby bylo menu vůbec vykresleno, musíme do něj umístit nějaký text. V opačném případě nebude vidět, protože jsme mu nenastavili pevnou výšku.
Příkaz float: left je klíčový pro umístění dvou divů vedle sebe. Díky tomuto příkazu docílíme situace, že tento a všechny další divy budou tlačeny nahoru a vlevo za předchozí elementy. U menu to znamená, že bude umístěno v levém horním rohu, což by bylo i tak, ovšem už by nebylo možno přidat vedle něj obsah. Ten by se bez použití příkazu float přidal až pod menu.
Prvek Obsah
Vpravo od menu bude umístěn obsah (content). Přidáme tedy další div právě za menu a přiřadíme mu jedinečné id.
<body> <div id="box"> <div id="banner"></div> <div id="menu"> </div> <div id="content"> Tady bude obsah webu. </div> </div> </body>
div#content{
width:700px;
float: right;
}
Šířku nastavíme na 700 pixelů, aby dohromady s menu tento div zabíral 900 pixelů, což je šířka celého boxu. Pokud bychom zadali šířku větší, obsah by se posunul až pod menu, protože by se již do boxu nevešel. Na druhou stranu, pokud bychom zadali šířku menší, vznikla by mezera.
Zde používáme příkaz float: right, který dělá to samé jako float: left, ovšem natláčí tento a další elementy nahoru a doprava. Pro obsah to tedy znamená, že bude vsunut napravo od menu místo toho, aby byl přidán až pod div menu.
V tomto obrázku vidíme jednotlivé části ohraničené barevným okrajem pro představu, jak bude web vypadat. Vidíme, že div menu má nulovou výšku, protože v něm není žádný obsah. Pokud bychom nastavili součet šířky menu a obsahu větší než je šířka boxu, došlo by k následující situaci - divy by se umístily pod sebe:
Následující obrázek ještě ilustruje situaci, pokud bychom vůbec nepoužili příkaz float.
Prvek Patička
Posledním divem, který přidáme, bude div footer. Vložíme jej přímo za div content a přiřadíme mu jedinečné id.
<body> <div id="box"> <div id="banner">Banner webu. </div> <div id="menu"> </div> <div id="content"> Tady bude obsah webu. </div> <div id="footer"> Patička webu. </div> </div> </body>
div#footer{
width:900px;
clear: both;
}
Nastavíme mu šířku 900 pixelů, aby zabíral celou šířku stránky. Protože již není žádoucí, aby byly další elementy natláčeny vlevo nebo vpravo díky příkazu float, tuto funkci ukončíme příkazem clear: both. Tento příkaz má navíc tu výhodu, že vezme vyšší z divů menu a content (podle jejich obsahů) a výšku druhého na tuto hodnotu automaticky zvětší. Tím dostaneme ve výsledku stránku, která nebude mít nikde mezeru.
Nic víc není třeba, základní kostru pro stránku máme hotovou.
Další čtení
Otázky
- Jakou html značku použijeme pro vytvoření jednotlivých částí rozvržení webové stránky?
- Popište box model v CSS.
- Co musí splňovat div, aby byl ve stránce vidět?
- Jak se chová css vlastnost float?