Stavíme web
Stavíme webDnešním dílem se začneme věnovat tomu, na co jistě všichni netrpělivě čekáte. Postavíme jednoduchý web na základě připraveného grafického návrhu. Teorii se pochopitelně také nevyhneme, protože CSS pozicování vyžaduje nějakou tu znalost o základních kamenech beztabulkového webu. Především se dozvíte, co je blokový element a vytvoříme si základní kostru dokumentu. Připomínám, že nebudu zabíhat do odborných podrobností a budu předpokládat, že vlastníte knihu Petra Staníčka CSS kaskádové styly, kde se o problematice CSS pozicování dozvíte mnohem více. Já vám ukáži pouze základní principy na praktickém příkladu webu fiktivní firmy, zabývající se poradenskou činností. Takže vzhůru do boje.
Mějme tedy takovýto grafický návrh (ukázka). Pro názornost jsem různými barvami označil jednotlivé části webu, které pomocí CSS budeme skládat, což můžete vidět zde (ukázka) Vidíte, že celý web se bude skládat z několika bloků. Teď se dostáváme k tomu, co je blokový element. Jedná se o omezující blok, který je vyplněn nějakým obsahem. Typickým zástupcem blokového elementu je DIV, se kterým jste se jistě setkali. Tento element (ale i mnohé jiné, kupříkladu odstavec P) vytváří ohraničený blok, kterému kromě jiných vlastností můžeme nastavit šířku (width), výšku (height), rámeček (border), okraj (margin) a výplň (padding). Zde také narazíme na první vážnou chybu Internet Exploreru, které se říká chybný box model a jehož princip si prostudujte na Intervalu.cz (http://interval.cz/clanek.asp?article=2965). Zde se také dozvíte na pěkném obrázku co je width, height, margin, padding a border. Při tvorbě layoutu (rozložení jednotlivých prvků stránky) na tento problém budeme myslet a elegantně se mu vyhneme. Vidíme tedy, že kostra dokumentu se bude skládat ze čtyř základních částí. Hlavička, která bude obsahovat čtyři vnořené bloky (určené pro navigaci, informační texty a podobně), hlavní část pro vlastní obsah webu, pravá část pro aktuality, novinky a informace a patička pro copyright a doplňkové informace.
Vezměte si z minula připravenou kostru XHTML dokumentu a uložte si ji do nějakého adresáře jako index.html. Bude vypadat takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="Description" content="Název webu" />
<meta name="Keywords" content="klíčová slova pro vyhledávače" />
<meta name="robots" content="all, follow"/>
<meta name="author" content="Design a kod: Plavacek, http://www.plavacek.net " />
<link rel="stylesheet" href="styles/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
<title>Firma: hlavní stránka</title>
</head>
<body>
</body>
</html>
V tomto adresáři si vyrobte podadresáře images (tam si budete ukládat obrázky) a styles (zde budou stylové předpisy pro vzhled webu a také styl pro tiskovou verzi). Vytvořte si v editoru (PSPad, Dreamweaver apod.) prázdný soubor a nazvěte ho default.css a uložte do adresáře styles. Tímto souborem budeme řídit celý vzhled webu. Dále si připravíme ilustrační obrázky tak, že si rozřežeme původní grafický návrh. Protože stavíme web s pevnou šířkou (je jednodušší než plovoucí layout), šířka obrázku a tedy ani webu nesmí přesáhnout 770px, aby se nezobrazoval vodorovný posuvník. Horní obrázek, kterým začneme, tedy bude mít rozměry 760x75px bez oněch černých okrajů a bílého okraje dole (viz obrázek) a uděláme z něj formát GIF o 256 barvách. Nazveme ho hlavicka.gif a uložíme do adresáře images.
Nyní si připravíme ještě jednu důležitou věc. Protože se jedná o pevný layout, bylo by vhodné umístit celou prezentaci horizontálně na střed monitoru. Abychom pro každý blokový prvek, jichž bude povícero, nemuseli definovat všechny vlastnosti, které by jej udržely uprostřed, použijeme malý trik a opět narazíme na malou chybu Internet Exploreru. Celý obsah webu vložíme do bloku div id="hlavni" a ten posléze ve stylovém předpisu donutíme, aby se držel hezky uprostřed zobrazovací plochy (uvozovky v názvech prvků jsou v XHTML povinné, nezapomínejte na ně). Zároveň s tím si připravíme jednotlivé bloky celé stránky a začneme vlastní stylování.
Poznámka:
Všechny blokové elementy, ze kterých budeme skládat výslednou podobu stránky si označíme pomocí takzvaného identifikátoru ID. Identifikátor nám slouží k tomu, abychom všechny elementy uvnitř takto označených bloků mohli snáze a snadno stylovat (tj. dodávat jim vzhled a požadované vlastnosti). Identifikátor se nesmí v rámci jedné stránky opakovat (na rozdíl od takzvané třídy (class) , což je v pořádku, protože hlavička nebo patička se v každé stránce vyskytne právě jenom jednou. Jednotlivé bloky si nazývejte tak, abyste se ve výsledném kódu snadno vyznali. Nebojte se do kódu stránky vkládat vlastní komentáře, ušetří vám spoustu starostí při možných problémech. Komentáře nejsou zobrazovány a jsou označeny takto:
<!-toto je komentář, prohlížeč ho ignoruje -->.
Pozor - v názvech prvků nepoužívejte českou diakritiku!
Nazveme si proto připravené bloky a pomocí identifikátoru ID si je pěkně označíme, zapíšeme do kódu stránky tak, jak jdou po sobě a opatříme komentářem. Výsledek bude vypadat nějak takto (uvádím jenom část BODY dokumentu):
<body>
<!-- hlavni obsah stranky - slouží k umístění prezentace na střed obrazovky -->
<div id="hlavni">
<!-- hlavička webu - skládá se ze čtyř vnořených blokových prvků DIV -->
<div id="hlavicka">
<div id="horni"></div> <!-- ilustrační obrázek hlavicka.gif -->
<div class="textinfo"></div> <!-- pruh s cernym pozadim, poslouzi kuprikladu pro textovou informaci -->
<div id="logo"></div> <!-- zde budou ilustrační obrázky vlevo, vpravo logo firmy -->
<div class="textinfo"></div><!-- pruh s černým pozadím, poslouží jako hlavni navigace webem -->
</div>
<!-- hlavička webu - skládá se ze čtyř vnořených blokových prvků DIV -->
<!-- vlastni obsah webu -->
<div id="obsah"></div> <!-- velká bílá plocha určená pro texty webu -->
<div id="novinky"></div> <!-- plocha vpravo s ilustračním pozadím pro novinky a aktuality -->
<!-- vlastni obsah webu -->
<!-- patička webu -->
<div id="paticka"></div>
<!-- patička webu -->
</div>
<!-- hlavni obsah stranky - slouží k umístění prezentace na střed obrazovky -->
</body>
Struktura webu tedy bude logická:
- textová informace (kupříkladu kde se právě nacházím)
- navigace
- obsah webu
- novinky a aktuality
- patička webu
Ilustrační obrázky budou umístěny jako pozadí jednotlivých prvků a v kódu stránky tedy nebudou vůbec uvedeny. Vidíte, že pro prvek textinfo jsme nepoužili identifikátor, ale třídu (class) , protože tento blok se opakuje dvakrát (oba černé pruhy jsou totožné a postačí tedy jenom jedna definice v CSS).
Tím jsme vytvořili základní layout webu, kterému nyní přidáme pomocí CSS vzhled a požadované vlastnosti. Soubor index.html si uložte a otevřete si soubor default.css. Nejprve nadefinujeme vlastnosti, které budou platné pro celý web (a využijeme tím pádem dědičnosti, jak jste se dozvěděli dříve). Tyto vlastnosti nastavíme pro element BODY takto:
body {
font-family: Verdana, sans-serif;
font-size: 80%;
background: #fff;
margin: 0;
padding: 10px 0;
text-align: center;
min-width: 770px;
}
Probereme si jednotlivé položky. Nejprve nastavíme font-family, což je písmo, které bude použito na celém webu (tato vlastnost se dědí, proto ji můžeme nastavit jenom jednou). Vybrali jsme si font Verdana, který je na internetu nejpoužívanější a doplnili jsme definici o takzvanou generickou (neboli obecnou) rodinu písma sans-serif. Jde o to, že někteří uživatelé nemusí mít font s tímto názvem instalován, prohlížeč potom sám vybere ze systému uživatele nejpodobnější písmo a použije ho. Uvádění obecné rodiny písma je povinné.
Další položka font-size nastavuje velikost písma platnou pro celý web. Nepoužívejte px ani pt. Px mají jednu nepříjemnou vlastnost, totiž tu, že Internet Explorer neumí takto definované písmo zvětšit. Pt není určeno pro obrazovku. Ideální jsou procenta a také jsme je zvolili. Pokud se týká zvolené velikosti, 80% je slušný kompromis, protože pokud velikost neuvedete, použije se výchozí hodnota prohlížeče a především v Internet Exploreru bude písmo vypadat přece jenom příliš velké.
Background neboli pozadí celé stránky také nezapomínejte uvést, ne každý prohlížeč má totiž výchozí hodnotu barvy pozadí nastavenu tak, jak vy byste očekávali. V tomto případě jsme zvolili barvu bílou.
I prvek body lze stylovat a důvodem, proč jsme margin (neboli okraj) nastavili na nulu je ten, že každý prohlížeč obsahuje jinou výchozí hodnotu (typicky Opera vám může při neuvedení této definice způsobit dost problémů).
Padding (výplň) je také dobré uvádět, platí pro ni vše, co bylo řečeno o marginu. V tomto případě jsme zvolili 10px, což znamená, že horní hrana vlastního obsahu webu bude o 10px odsazená a to shora i zdola. Vysvětlím. V definici CSS lze uvádět vlastnosti jak pro padding tak pro margin takto:
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
Vidíte, že tento zápis je zbytečně složitý a dlouhý a využijeme tedy takzvaného zkráceného zápisu, což nám specifikace CSS umožňuje. Vlastnosti margin a padding lze zapsat zkráceně tak, že si představíme, že vlastnosti pro jednotlivé strany se aplikují ve směru pohybu hodinových ručiček a to počínaje definicí top (tedy horní okraj nebo horní výplň). Proto můžete směle zapsat výše uvedenou definici takto:
padding: 10px 0 10px 0;
Což je totéž a znamená v podstatě, že postupně horní výplň bude 10px, pravá výplň 0, dolní výplň 10px a levá výplň 0. I tento zápis lze ale zkrátit, protože víme, že jsou-li dvě protilehlé hodnoty totožné (tj. horní - dolní, pravá - levá), postačí nám definovat jenom jednu z nich a prohlížeč druhou nastaví naprosto stejně. Čili toto je nejkratší možný zápis:
padding: 10px 0;
Text-align dělá to, co je patrné z jeho názvu - zarovnává vlastní text stránky. Máte na výběr hodnoty left (výchozí hodnota, není nutné uvádět), center (na střed), right (vpravo), justify (do bloku). Důvod uvedení této hodnoty pro BODY je ten, že Internet Explorer obsahuje další chybu, totiž ignoruje vlastnost margin: auto. Tato vlastnost nám právě umožňuje řidit umístění hlavního bloku stránky a protože chceme zarovnat celý web na střed, musíme oklamat Internet Explorer. Ten v rozporu s pravidly pro CSS zarovnává nejen text, ale naprosto chybně i blokové prvky (tedy DIV a podobně). Touto definicí tedy donutíme prvek div id="hlavni", aby se umístil na střed obrazovky. Pro ostatní prohlížeče (Mozilla, Opera) definici provedeme až později.
Min-width: 770px je opět jedna z definic CSS, kterou slavný Internet Explorer úspěšně ignoruje a je určena především pro Mozillu, která obsahuje jednu nepříjemnou chybičku. Zmenšíte-li si totiž okno prohlížeče o něco více, stránka zůstane stále uprostřed obrazovky, což ovšem znamená, že se vám začne ztrácet text. To je velmi mrzuté, naštěstí tato definice podobnému chování zabrání.
Posledním krokem, který v tomto díle učiníme, je definice pro hlavní prvek (div id="hlavni") a zajistíme jeho umístění (a tedy i umístění celé stránky) na střed obrazovky. Celá definice bude vypadat takto:
#hlavni {
width: 760px;
margin: 0 auto;
text-align: left;
}
Křížek ve stylovém předpisu # označuje prvky, které mají přiřazen identifikátor id a nastavuje jim požadované vlastnosti.
Width (šířku) jsme stanovili podle horního obrázku, který má právě takový rozměr. Celý web tedy bude široký 760px, což je dostatečné i pro monitor s rozlišením 800x600. Margin: 0 auto udělá přesně to, co definice text-align: center v BODY, totiž umístí celý blok hlavni na střed v prohlížečích Mozilla a Opera. Jinými slovy, nastaví horní a dolní okraj na 0 a levý a pravý okraj spočítá automaticky. Tím se dosáhne požadovaného efektu. Text-align: left vrátí zarování písma na celém webu opět doleva.
Pokud si teď v prohlížeči otevřete stránku index.html, neuvidíte pochopitelně nic, respektive vybafne na vás prázdná bílá stránku. To v příštím díle napravíme a vytvoříme si kompletní layout webu s použitím připravené grafiky.
Autor: Plaváček
2024 ©