Interval.cz

Tvorba layoutu webu - praktick² p°ehled

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

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:

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:

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:

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φ 800x600 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 1600x1200 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∙:

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:

DalÜφ informace a p°φklady naleznete v t∞chto textech:

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:

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.

Odkazy, zdroje

Vyhledßvßnφ