Smitka development

WEBtriky III.

Ve třetím díle seriálku o tvorbě webu si vyzkoušíme vytvořit další typ layoutu.

Úkol

Budeme tvořit “vizitkový web“, tedy informační webík s nevelkým množstvím obsahu.
Pro tento účel je velmi vhodné rozložení centrované vertikálně i horizontálně na stránce. Horizontální centrování již známe od prvního dílu, musíme tedy ještě vymyslet jak centrovat horizontálně.


Horizontální centrování bloků

Nejprve si musíme definovat plnou “kreslící plochu“, nastavíme tedy tagům html a body výšku na 100%, podobně jako v díle druhém. Máme tak k dispozici celou plochu prohlížeče. Samotný blok obsahu bude vysoký, dejme tomu, 500px. Aby se dostal na střed, vložíme před něj prvek, který bude vytvářet mezeru. Tato mezera má být vysoká polovinu výšky prohlížeče bez poloviny výšky středového bloku. Jelikož výšku bloku známe, můžeme tyto podmínky jednoduše splnit záporným marginem. Prvku, který vytváří mezeru, nastavíme tedy height:50% a můžeme si vybrat, zda záporný margin použijeme jako spodní mezery, nebo horní samotného prvku. Vybral jsem samotný prvek, jelikož se velikost marginu odvíjí od jeho výšky a nastavení tak bude na jednom místě – nastavíme mu tedy margin-top:-250px.
A to je celý trik :-), k rychlejšímu pochopení pomůže obrázek.



Středový blok

Samotné rozložení středového bloku uděláme klasicky pevný obsah a plovoucí menu vlevo.
Struktura celého webu bude tedy následující:
<div id="mezera"></div> <div id="center"> <div id="menu"></div> <div id="obsah"></div> </div>
Šířka středového bloku jsem zvolil 700px, 200px je menu a 490px samotný obsah. Zbylých 10px zajistí, že obsahový blok nebude ošklivě nalepen na hranu středového a zároveň poskytuje určitou rezervu, aby nedošlo k odskočení obsahu pod menu v případě, že prohlížeč používá krapet jiný výpočet velikostí bloku (narážím na odlišné počítání borduru v IE).

Navigační čudlíky

Další novou techniku použijeme na čudlíky menu, mohla by se nazývat například technika spritů. Design čudlíku bude zajišťovat jeden obrázek na pozadí, kterým budeme pohybovat podle stavu tlačítka. Velká výhoda tohoto postupu je, že obrázek pro všechny stavy je načten již po načtení stránky a při první interakci se nemusí čekat na nový. Za výhodu lze brát i to, že design celého prvku je v jednom souboru.



Tento obrázek je na pozadí čudlíku, v neaktivním stavu je zobrazena horní část a po najetí myši se posune na dolní. Vše je realizováno pomocí css:

#navi a { background: #E3E6BC url(menu.png) repeat-x; background-position: top; } #navi a:hover { background-position: bottom; color:#000; }
Stylem ještě nastavíme pevnou velikost čudlíku v pocelech, tak aby seděla s obrázkem a pěkné je i vertikální vycentrování textu nastavením vlastnosti line-height na stejnou hodnotu jakou je výška prvku.

Obsahový blok

Pár drobných zásahů použijeme i na samotný obsah. Budeme předpokládat, že textové informace budeme uzavírat do bloků <p>. Podle zadání očekáváme poměrně málo textu, a proto si můžeme dovolit udělat web vzdušnější a zvětšíme tedy odstavcům šířku řádků a text zarovnáme do bloku.
line-height:3ex; text-align: justify;
Musíme počítat i s variantou, že textu bude více, než se ho na stránku vejde, proto obsahovému bloku nastavíme overflow na auto, aby se případně vykreslily scrollbary.

Detaily

K tomuto typu layoutu se výborně hodí obrázek na pozadí kolem celého bloku. Použijeme tedy takový, který je o něco větší než našich 700x500 a vytváří tak kolem obsahu nějaký pěkný efekt. Obrázek na pozadí jednoduše vycentrujeme:
background-position: center center

Ještě si lehce pohrajeme s nadpisem první úrovně, že ho do kontrastu se vzdušnějším zbytkem stránky trochu smrskneme - letter-spacing: -2px a první písmeno vykreslíme odlišnou barvou:h1:first-letter { color:#5E5E5E; }
Poslední věcí je jumístění patičky do dolího pravého rohu stránky pomocí
position:absolute; bottom:0; right:0;
Myslím, že nyní s webem můžeme být spokojeni a ukázku vypracovanou na základě těchto postupů můžete opět prostudovat na komentovaném příkladu.

Něco navíc

Jako tradiční bonus na závěr si dnes představíme pěkný textový efekt a to css vlastnost text-shadow, která v prohlížečích s jeho podporou (IE nemá) vykresluje stín. Syntax je jednoduchá:text-shadow: pozice-x pozice-y rozmazání barva
Stín však nemusí vypadat jen jako stín, můžeme z něj vytvořit třeba záři, nebo sloučit více stínů najednou a to již opravdu záleží jen na fantazii :-)
Ukázky opět v příkladu.

Ukázkový příklad



linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development