Tvorba layoutu webu – praktický přehled

17. března 2004

•

V předchozím článku jsme se seznámili s technikami tvorby layoutu a tentokrát si je uvedeme do praxe. Naučíme se, jak stránky mohou vypadat a jak kýženého vzhledu dosáhnout probranými postupy.

Nejdříve bych vám chtěl připomenout, že se nejedná o příručku (X)HTML či CSS. Tyto jazyky nám při tvorbě nabízejí velice široké možnosti a webdesignér si může vybrat mnoho způsobů, jak layout stránek vytvořit, měl by si však uvědomit, že ne všechny jsou právě optimální. Tento článek je průvodcem webdesignéra při tvorbě, snaží se jej upozornit na různé otázky a úskalí, na které může narazit, a pomáhá mu najít co nejlepší řešení.

Testování layoutu

Stránku je dobré při tvorbě neustále testovat v několika prohlížečích. Základem je Mozilla, popřípadě Opera, což jsou prohlížeče, které se snaží postupovat dle standardů W3C, a pak teprve stránku odladit v MSIE. V případě opačného postupu by vás mohl vzhled stránky v alternativních prohlížečích překvapit a je možné, že byste museli většinu CSS kódu přepsat. Rovněž doporučuji vyzkoušet, jak stránka vypadá v MSIE 5, ten se totiž při vykreslování chová velice rozdílně oproti šestkové verzi. O rozdílech a chybách v prohlížečích se více dozvíte z následujících zdrojů:

Internet Explorer a chyba s lomítkem (drobnost spíše pro pobavení) – Lukáš Mačí (MačíWeb, 14. 2. 2004)
Implementační chyby v prohlížečích I. – Jan Bien (Interval.cz, 9. 1. 2004)
O šířce prvku, Exploreru, Mozille a matrjošce – Petr Staníček (Pixylophone, 10. 8. 2003)
Úplný přehled WWW prohlížečů – Petr Staníček (WebTip, 10. 9. 2001)

Rozdíly ve zpracování CSS prohlížeči lze obejít například tak, že vytvoříme více fragmentů kódu, přičemž každý z nich bude přístupný pouze danému prohlížeči. Tato metoda bohužel nepočítá s novými verzemi prohlížečů, které se mohou chovat k takovému kódu nepředvídatelně. Některé návody na řešení nekompatibilit v CSS naleznete v následujících zdrojích:

CSS Filters and Hacks (Dithered)
Schováváme CSS před prohlížeči – Martin Snížek (Interval.cz, 30. 1. 2003)
Will the browser apply the rule(s)? (Centricle)

Většina webdesignérů bohužel nemá možnost vyzkoušet si stránky také na dalších platformách (Macintosh, Linux a podobně), takže se musí spolehnout na validitu kódu (správnost zápisu dle standardu) a funkčnost v dostupných prohlížečích. Kód zkontrolujete snadno pomocí W3C validátorů HTML a CSS nebo jiných nástrojů, jejichž integrované rozhraní naleznete na Walidator.com.

Jak správně psát CSS kód

Tato doporučení se týkají nejen těch, kteří chtějí vytvářet výhradně DIV/CSS layout, ale obecně všech webdesignérů, kteří používají na stránkách CSS. Jednotlivé celky, z nichž se stránka skládá, obalte do značek div. Ty je třeba nějak pojmenovat, k čemuž je určen atribut id, pokud se celek na stránce může vyskytovat jen jednou (například záhlaví), jinak použijte class. Snažte se CSS kód udržovat v externích souborech, nepište jej do atributů style. Využívejte v CSS vnořené definice, jako ul.seznam li a img {...}, nevytvářejte zbytečně nové třídy. Využívejte co nejvíce existující HTML elementy, tedy místo <span class="priklad"> napište <samp>. Tímto tématem se již zabýval Marek Prokop ve svém článku o správném používání CSS.

Vytvářejte také různé verze CSS kódu pro různá zařízení, tedy kromě obrazovky myslete i na tiskárny a prohlížeče na mobilních zařízeních. Počítejte vždy s variantou, že CSS definice nemusí být dostupné, a přesto je nutné zachovat zobrazení webu dle sémantického významu jednotlivých částí obsahu, viz:

Formátování dokumentů pro tisk pomocí CSS – Jan Dudek (Interval.cz, březen 2003)
Jak vyrobit tiskový výstup pomocí CSS – Vilém Málek (Interval.cz, 28. 3. 2002)
Odlišné formátování tisku (Jak psát web)
Tisk WWW stránek pomocí CSS – Marek Prokop (Sova v síti, 21. 1. 2002)

Jde sice samozřejmě jen o doporučení, ovšem díky jejich dodržování lze dosáhnout vysoké přístupnosti stránek a také přehlednosti a snadné upravitelnosti kódu. Podobná pravidla si osvojí jistě každý otrkanější webdesignér sám.

Umístění stránky v okně prohlížeče

Před jakýmkoli návrhem si musíme ujasnit základní věc, kterou je pozice a velikost stránky v okně prohlížeče. Ta totiž nemusí pokrývat jeho celou plochu, zbytek je obvykle vyplněn pozadím stránky. Vlastní stránku je pak třeba vnořit do nějakého bloku, který ji oddělí od značky body, potažmo celého okna prohlížeče. Jde většinou buď o div nebo o jednobuňkovou tabulku. Nejběžnější jsou tyto varianty:

Plná šířka okna. Všechny prvky stránky se plně přizpůsobují velikosti okna a zabírají celou jeho šířku. V tom případě nemusíme stránku nijak vymezovat.
Užší stránka, velikost udaná v procentech. Používá se, pokud webdesignér nechce udělat stránku úplně „roztaženou“, ale také by nerad vymezoval konkrétní velikost. Můžeme tedy obsah stránky vnořit například do značky div s nastavenou vlastností width: 80% nebo do table s atributem width="80%" (přičemž tato tabulka bude mít jedinou buňku a v ní veškerý obsah).
Užší stránka s absolutně definovanou šířkou. Jde o podobný případ jako v předchozí variantě, jen s šířkou definovanou například v pixelech. V CSS můžete použít i typografické body (pt) a další. Pokud má klient menší okno, bude muset rolovat, pokud má okno o mnoho větší, zůstane většina plochy nevyužita. Problém užšího okna lze vyřešit v případě použití tabulky, a to tak, že šířku nedefinujeme pro tabulku (table), ale pro její buňku (td). Tabulka se pak v případě menšího okna odpovídajícím způsobem zúží.
Malá stránečka pozicovaná na střed. Většinou jde o titulní (úvodní) stránku webu. Toto se řeší obvykle roztáhnutou tabulkou s width="100%" a height="100%" a buňkou s centrováním v obou směrech (align="center" valign="middle"). Techniky vertikálního centrování na střed okna však neodpovídají koncepci webových stránek, které se chovají jako pás s omezenou šířkou a neomezenou výškou, tedy výška je určena obsahem stránek, nikoli velikostí okna. Proto mohou některé prohlížeče vlastnost či atribut height ignorovat, vypočítat výšku stránky podle obsahu a zarovnat ji nahoru. Pokud však známe výšku vlastního obsahu, můžeme problém obejít použitím horizontálních rámců, přičemž frameset bude mít definováno něco jako rows="*, 200, *" a vlastní obsah pak vložíme do prostředního rámce. Také je možné zkusit trochu méně kompatibilnější fintu v CSS.

Jak si zvolit šířku stránky? Pamatujte na to, že obecně se široké texty špatně čtou, protože oči hůře navazují na další řádek. Lepší je tedy mít text užší, proto se také často vytvářejí vícesloupcové layouty, při nich je zbývající místo využito pro další obsah. Pokud nastavujete šířku stránky absolutně, mějte na paměti, že někteří uživatelé stále používají rozlišení 800×600 bodů. Nechte jim místo na rolovátka a pro vlastní obsah volte šířku nejvíce 750 bodů. Také není dobré stránku dělat příliš úzkou, protože taková stránka na monitoru s rozlišením 1600×1200 může vypadat opravdu hloupě. Pokud chcete mít stránku přístupnou i na mobilních zařízeních, nenastavujte minimální šířku stránky vůbec.

Jak na velikost stránky podle dalších zdrojů:

České stránky se (ne)roztahují – Martin Kopta (Lupa, 7. 2. 2003)
Jak zvolit šířku stránky – Marek Prokop (Sova v síti, 23. 4. 2001)‘
Optimální šířka odstavce – Lukáš Oborský (Letem Světem, 23. 6. 2003)
TOPlist – globální statistika

Vlastní obsah stránky by měl být od okna oddělen nejen HTML kódem, ale také vizuálně, například okrajem nebo jinou barvou pozadí, podle fantazie autora. Doporučuji vyhýbat se obrázkovému pozadí pro obsah stránky, popřípadě pro něj použít obrázky velmi nevýrazné.

Nezapomeňte si přizpůsobit odstup stránky od okna prohlížeče. V HTML k tomuto účelu slouží atributy leftmargin, topmargin, rightmargin a bottommargin pro MSIE a marginwidth a marginheight pro další prohlížeče, takže je doporučuji definovat všechny najednou. Jinou možností je nadefinovat pro body styl margin.

Zarovnávání bloků

Často potřebujeme uvnitř nějakého bloku zarovnat obsah k nějakému kraji nebo na střed. Tento úkol se řeší jinak pomocí HTML atributů a tabulek a ještě jinak pomocí CSS. Takže jdeme na to:

vodorovné zarovnání:
- HTML: Stačí nám element div s atributem align.
- CSS: Situace je trochu horší. Je-li obsahem text, použijeme vlastnost text-align. V MSIE tato vlastnost (nesprávně) zarovnává i blokové elementy, ovšem v jiných prohlížečích použijeme margin pro zarovnávaný element. Na té straně, ke které obsah nemá být zarovnán, se nastaví hodnota auto, popřípadě ji nastavíme na obě strany pro zarovnání na střed.
svislé zarovnání:
- HTML: V případě tabulkového layoutu je nadřazeným blokem většinou buňka tabulky, použijeme tedy její atribut valign.
- CSS: Zde neexistuje pro takovéto vertikální zarovnání žádná přímá podpora. Většinou se využívají finty v podobě několika vnořených bloků s procentuálním pozicováním.

Další informace a příklady naleznete v těchto textech:

Centrování v CSS – Marek Prokop (Sova v síti, 12. 2. 2002)
Horizontální i vertikální vycentrování boxu o fixních rozměrech – Jakub Dvořák
Victoria’s Vertical Centering – Vilém Málek
Zarovnávání prvků pomocí CSS – Petr Staníček (11. 9. 2002)

Záhlaví a zápatí stránky

Tyto části stránky obvykle zabírají celou šířku a volně navazují na ostatní části mezi nimi, v kódu stránky je umisťujeme volně tam, kam patří, a s jejich pozicováním nebývají problémy. U rámcového layoutu je navíc můžeme uložit do oddělených souborů. Pokud hlavička obsahuje logo, mělo by jít o odkaz na titulní stránku.

Navigační prvky stránky

Jde většinou o menu, ať už jedno nebo i víceúrovňové. Jeho provedení může být velice různorodé (texty, obrázky, klikací mapa a mnoho dalších). Zde je ovšem velice důležité myslet na přístupnost. Pokud funkčnost menu závisí na určité specifické technologii (JavaScript, Java, Flash a podobně), bráníme průchodu stránkami nejen uživatelům, pro něž je tato technologie nedostupná, ale také dalším nástrojům, které mohou být pro nás důležité (různé downloadery, indexery, crawlery).

V podobných případech by se dalo dokonce hovořit přímo o Search Engine Sabotage neboli SES! Proto je nutné pamatovat na zadní vrátka, tedy cestu, jak by mohli navigací procházet i prohlížeče a nástroje, podporující jen základní verze HTML. Uvědomte si, že například pěkné menu s rollover efekty je možné vytvořit i se základními prvky HTML a CSS.

Pokud menu umisťujete nahoře pod záhlaví nebo do něj, je to velice jednoduché, stačí opět kód umístit na správné místo. Problémy nastávají při pozicování například vedle vlastního obsahu, v takovém případě je třeba je umístit do samostatného sloupce layoutu.

Sloupcový layout

Celá řada prvků, které by neměly překážet hlavnímu obsahu, se často umisťuje na levé či pravé straně – takovému uspořádání říkáme sloupcový layout (většinou dvou či třísloupcový). Zde však nastávají problémy s pozicováním. Klasickým řešením v tabulkovém layoutu je vytvořit tabulku, využívající plnou šířku stránky (width="100%"). Tato tabulka obsahuje alespoň jeden řádek, který pak obsahuje buňky podle počtu sloupců. Postranní sloupce mívají definovanou užší šířku, u sloupce s vlastním obsahem se šířka neurčuje, aby se jednoduše roztáhl podle zbývajícího místa. Jak ale víme, takto zneužité tabulky odporují vizi sémantického webu a (nejen) proto se podíváme na varianty využívající CSS pozicování.

Takže naším úkolem je vytvořit sloupcové rozvržení stránek, pro začátek budeme počítat dva sloupce, levý s definovanou šířkou a pravý zabírající zbytek stránky. To se může stát pro začátečníka v CSS noční můrou. V HTML kódu si definujeme dva elementy: <div id="sloupecek"> a <div id="obsah">. Jak docílíme toho, aby se tyto elementy na stránce objevily vedle sebe?

Prvním řešením může být nastavit sloupečku position: absolute; a obsahu odstup od okraje (margin-left) tak, aby se sloupce nepřekrývaly. O podobném layoutu se na Intervalu již psalo v článku o třísloupcovém layoutu v CSS. Pokud bychom ale pod takovým obsahem chtěli umístit zápatí a sloupeček by byl delší (neboli vyšší) než obsah, zápatí by se překrylo se sloupečkem, což určitě nechceme. Teď jistě chápete, že s absolute to prostě nepůjde.

Místo toho můžeme pro odsunutí sloupečku na stranu zkusit float. Obsah necháme buď také plavat, nebo jen odsuneme od kraje pomocí margin, aby nezatékal pod sloupeček. Zápatí pak musí mít nastaveno clear: both;. Může se však stát, že budeme potřebovat clear i v obsahu (při použití dalších vnořených plovoucích prvků) a to nám pak bude v MSIE způsobovat neplechu – zbytek stránky odskočí až pod sloupeček. Jak z toho ven? Pro obsah můžeme definovat také float, protože elementy s nastaveným clear uvnitř něj pak nic nezkazí. Podrobný postup můžete nalézt i na Intervalu v článku o pokročilém dvousloupcovém layoutu v CSS. Přitom nemusíme obsahu definovat žádnou šířku a on se sám roztáhne (pouze v MSIE).

Nebudu to už prodlužovat a rovnou vám nabídnu ukázku třísloupcového layoutu s pevně definovanými sloupci a obsahem přizpůsobujícím se zbývající šířce. Tento příklad má rovněž vyřešen problém s vnořenými plovoucími a čistícími prvky v MSIE. Příklad je odladěn v MSIE 6, MSIE 5 a v trochu starší Mozille 0.9.8.

Všechny DIV/CSS vícesloupcové layouty mají ale další často diskutovaný nedostatek – protože výška sloupečku a obsahu je rozdílná, nelze je vizuálně snadno rozdělit po celé výšce. Pravý okraj levého sloupce ani levý okraj pravého sloupce nezaručuje, že zaplní celou výšku stránky. Velmi často se využívá obrázek, vkládaný na pozadí nadřazeného elementu, který je navržen takovým způsobem, aby, pokud je pravidelně opakován ve vertikálním směru po celé výšce, vytvořil požadované vizuální oddělení. Vlastně mě teď ani nenapadá jiný způsob, jak například zabarvit sloupeček shora až dolů, k zápatí stránky. Na tuto metodu samozřejmě můžeme zapomenout, pokud máme šířku sloupečku definovanou jinak než v pixelech (například v procentech). Pomocí tabulky je řešení takového požadavku naprosto triviální.

Různá řešení vícesloupcového layoutu:

3-col layout via CSS – Petr Staníček (2. 4. 2003)
Jednoduchý dvousloupcový layout – Lukáš Mačí (1. 10. 2003)
Třísloupcový layout s hlavičkou a patičkou – Martin Dvořák

Je bohužel smutným faktem, že layout, který lze velice jednoduše vytvořit tabulkou, je velice složité vytvořit jen za pomoci CSS pozicování. Možná právě proto se webdesignéři, kteří tyto problémy mají za sebou a získali při boji s prohlížeči jistou dávku know-how, ohánějí neustále svými ortodoxními názory na téma přístupnosti, studují HTML kód každé stránky a hledají nesprávně použitou tabulku. Faktem je, že jim musím dát za pravdu, CSS pozicování má mnoho výhod, ale myslím, že nemusí být nutně prosazováno vždy, všude a za všech okolností. DIV/CSS layout se může v netestovaném prohlížeči rozpadnout velice snadno, rozhodit tabulku je, už z principu, mnohem těžší.

Pár slov na závěr

Většina zdrojů, týkajících se tvorby stránek, se zabývá různými možnostmi a rysy HTML a CSS, avšak obvykle nabízí jedinou metodu a nesrovnává ji s ostatními. Proto jsem se pokusil tuto mezeru vyplnit. Myslím, že nyní máte základ znalostí k tvorbě kvalitních a použitelných stránek. Nejdůležitější je neustále si při práci uvědomovat, že řadu věcí lze provést mnoha způsoby, a dle svého uvážení si umět vybrat nejlepší volbu.