Abychom zm∞nili barevnΘ schΘma webu, nap°φklad v zim∞ obohatili grafickou ·pravu o sn∞₧enku anebo na ja°e o vφce zelen∞, pot°ebujeme... jednu minutu. S podmφnkou, ₧e novΘ barevnΘ schΘma je ji₧ hotovΘ. Povφme vßm, jak zm∞nit design a barvu pou₧itφm CSS
Prakticky ka₧d² web mß do jistΘ mφry stabilnφ vzhled. N∞kterΘ webovΘ servery vÜak sv∙j vzhled jednou za dva a₧ t°i roky radikßln∞ m∞nφ. Je z°ejmΘ, ₧e tento krok je ovlivn∞n p°ßnφm jejich majitel∙ jφt s dobou a p°izp∙sobit se m≤d∞. V takovΘm p°φpad∞ nemß zpravidla novß verze webu naprosto nic spoleΦnΘho s verzφ p°edchßzejφcφ. Zcela nov² design, nov∞jÜφ technologie, aktualizovanΘ texty, od zßkladu p°epracovanß struktura kategoriφ a - nebojme se to p°iznat - i hromada vynalo₧en²ch finanΦnφch prost°edk∙. Novß image produktu bezesporu vyvolß zv²Üen² zßjem nßvÜt∞vnφk∙, avÜak jen zpoΦßtku. Za m∞sφc nebo za dva bou°e emocφ utichne, p°φval v²k°ik∙ nadÜenφ zmizφ beze stopy v hlubinßch vesmφru a a₧ do dalÜφho globßlnφho redesignu nastane na mo°i ·plnΘ bezv∞t°φ.
Zßsadnφ zm∞na celΘho webu je samoz°ejm∞ Φas od Φasu nutnß, ale zaujmout nßvÜt∞vnφky je mo₧nΘ i mΘn∞ radikßlnφmi zp∙soby, kterΘ jsou mimochodem obΦas i mnohem originßln∞jÜφ a ·Φinn∞jÜφ.
N∞kterΘ webovΘ strßnky nap°φklad umo₧≥ujφ nßvÜt∞vnφk∙m p°izp∙sobit si do urΦitΘ mφry vn∞jÜφ vzhled strßnek podle svΘho vkusu - nastavit barevnou Ükßlu, m∞nit navzßjem pozice r∙zn²ch funkΦnφch prvk∙ atd. P°itom vÜak profil u₧ivatele z∙stßvß uchovßn v databßzi serveru nebo na stroji klienta, a to v podob∞ cookies.
N∞kte°φ administrßto°i server∙ postupujφ jeÜt∞ jinak. Jen slep² by si nevÜiml, k jak²m zm∞nßm dochßzφ na mnoha velk²ch webov²ch serverech nap°φklad p°ed vßnoΦnφmi svßtky. ZnßmΘ strßnky, ani₧ by radikßln∞ zm∞nily sv∙j vzhled, dostßvajφ slavnostnφ, svßteΦnφ atmosfΘru. A prßv∞ tento nßpad je mo₧nΘ dßle rozvφjet. Bylo by nap°φklad mo₧nΘ vpaÜovat na strßnky nßznaky jara, lΘta nebo podzimu podle aktußlnφho roΦnφho obdobφ. NßvÜt∞vnφci se tak zcela jist∞ nebudou nudit.
L╔TO SE STROJ═ DO PODZIMN═HO H┴VU
P°edpoklßdejme, ₧e je zapot°ebφ vytvo°it do urΦitΘ mφry polyfunkΦnφ web, jeho₧ ka₧dß strßnka by obsahovala zßhlavφ s grafickou ·pravou, navigaΦnφ panel a hlavnφ text s pou₧itφm r∙znΘho formßtovßnφ, kter² obsahuje zßhlavφ prvnφ a druhΘ ·rovn∞, odstavce a odkazy.
T°eÜniΦkou na dortu tohoto webu by m∞la b²t schopnost m∞nit sv∙j hßv podle roΦnφho obdobφ. Nebylo by nap°φklad ÜpatnΘ, kdyby barevnß Ükßla strßnek v lΘt∞ byla lad∞na do optimistick²ch zelenkav²ch t≤n∙ a na podzim do ohnivΘ oran₧ovo₧lutΘ. Hlavnφ technick² po₧adavek znφ, aby v p°φpad∞ libovolnΘho poΦtu strßnek projektu pot°eboval administrßtor serveru na zm∞nu barev pouze jednu minutu. O mo₧nosti opravy HTML k≤du nem∙₧e b²t ani °eΦi.
Jak je mo₧nΘ n∞co takovΘho realizovat? Nejprve zavrhneme rozmφst∞nφ pomocφ tabulky. Poj∩me vytvo°it ve vÜech ohledech sprßvn² web, a to:
* zcela realizujφcφ princip rozd∞lenφ obsahu a formy.
Podφvejte se, jak neΦekan∞ jednoduch² m∙₧e b²t HTML k≤d strßnky takovΘho webu, kdy₧ pou₧ijete model kaskßdov²ch styl∙ (CSS2) jako zßkladnφ technologii:
<div id="navlinks"><!Zde jsou umφst∞ny odkazy navigaΦnφho bloku></div>
<div id="main"><! Zde jsou umφst∞ny plnΘ texty strßnek, vΦ. zßhlavφ, odstavc∙ a odkaz∙></div>
</body>
</html>
Jak je vid∞t, k≤d webovΘ strßnky naÜeho hypotetickΘho portßlu sßm o sob∞ neobsahuje ₧ßdnou informaci o jakΘmkoli vizußlnφm formßtovßnφ dokumentu. HolΘ logickΘ schΘma je ideßl sßm o sob∞. Tφm klφΦov²m je samoz°ejm∞ prßv∞ onen soubor styl∙ - style.css, zmi≥ovan² v elementu <link>, kter² je spoleΦn² pro vÜechny strßnky. Zde je jeho nßvrh k≤du pro letnφ variantu designu:
body {margin: 0px; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; fontsize:
VeÜkerΘ funkΦnφ Φßsti webu jsou bloky umφst∞nΘ na absolutnφ pozici. NavigaΦnφ panel je spojenφm dvou blok∙, z nich₧ jeden (navlinks), kter² je o n∞co menÜφ, p°ekr²vß druh² (navbar). Dφky tΘto lsti nemusφme pou₧φt vlastnost padding, kterß je r∙zn²mi verzemi browser∙ r∙zn∞ interpretovßna. Pokud stanovφme pro oba bloky hodnotu danΘ vlastnosti rovnou nule, zachovßme tak pole mezi navigaΦnφmi odkazy a hranicφ viditelnΘ Φßsti navigace. P°itom jak v IE5 (tento browser odeΦφtß hodnotu padding od width), tak i v IE6 (naopak p°iΦφtß padding k width, co₧ je z pohledu standardu sprßvnΘ) z∙stane Üφ°ka navigaΦnφho bloku naÜeho webu nem∞nnß.
Vlastnosti padding vyu₧φvßme pouze v bloku main, kter² odpovφdß oblasti hlavnφho textu. Jde o to, ₧e rozm∞ry odpovφdajφcφho bloku nejsou pevn∞ dßny. Jsou stanoveny velikostφ v bloku umφst∞nΘho textu a dßle rozm∞ry okna browseru. Tak₧e nakonec nebylo zapot°ebφ ₧ßdnΘ finty.
JEDNODUCH▌M POHYBEM RUKY
Co je zapot°ebφ pro podzimnφ verzi webu? ZaprvΘ je t°eba p°ipravit zvlßÜtnφ sadu obrßzk∙ grafickΘho nßvrhu. V naÜem p°φpad∞ jde o dva soubory: logo.gif, kter² obsahuje logo webu, a bg.gif, jen₧ pou₧ijeme pro zobrazenφ pozadφ zßhlavφ.
ZadruhΘ bude samoz°ejm∞ pot°eba alternativnφ soubor popisu styl∙. Z prostorov²ch d∙vod∙ nebudeme uvßd∞t tento k≤d cel², uvedeme jen °ßdky, ve kter²ch dochßzφ ke zm∞nßm.
Nynφ pßr slov o tom, jak je t°eba takov² zßzraΦn² web udr₧ovat. Na serveru musφ b²t, krom∞ HTML strßnek, dva soubory styl∙ a dva adresß°e s obrßzky. V souladu se seznamy, o kter²ch jsme mluvili ji₧ d°φve, se musφ soubor styl∙ pro libovolnou aktußlnφ verzi designu webu jmenovat style.css a katalog zobrazenφ images.
Zatφm nepou₧it² alternativnφ soubor definice styl∙ a adresß° s obrßzky m∙₧eme pojmenovat podobn∞ - style1.css a images1.
Pro zm∞nu designu staΦφ jen p°ejmenovat soubory a adresß°e:
* p°ejmenujeme adresß° images na images2;
* zm∞nφme nßzev souboru style.css na style2.css;
* p°ejmenujeme soubor style1.css na style.css;
* zm∞nφme nßzev adresß°e images1 na images.
Kolik Φasu zabere administrßtorovi v²m∞na kabßtu webu v p°φpad∞ nßhlΘho p°φchodu podzimu? Dokonce i pokud budeme vÜechno provßd∞t ruΦn∞, nestaΦφ nßvÜt∞vnφk webu ani mrknout okem. M∙j osobnφ rekord p°i pou₧itφ FTP klienta souborovΘho mana₧eru Far je 18 sekund. Za minutu, uvedenou v zadßnφ ·kolu, bych to tedy stihl t°ikrßt. Ti obzvlßÜ¥ lφnφ (to se t²kß p°edevÜφm t∞ch Ü¥astlivc∙, kte°φ jsou majiteli specißlnφch webserver∙) si mohou napsat scΘnß° pro p°ejmenovßnφ soubor∙ a adresß°∙ "tam" a "zpßtky" p°φmo v shellu. Ve srovnßnφ s utrpenφm charakteristick²m pro ostatnφ skripty se vßm bude zdßt i zßblesk blesku jako v∞Φnost.
Popisovan² uΦebnicov² p°φklad je samoz°ejm∞ velmi jednoduch², ale velmi zda°ile ilustruje obecn² princip. Kompozice webov²ch strßnek m∙₧e b²t urΦit∞ i mnohem bohatÜφ a rafinovan∞jÜφ a poΦet variant je zcela libovoln² - podstata v∞ci se tφm vÜak nem∞nφ. Naopak je mo₧nΘ, ₧e zßkladnφ prost°edky automatizace ve form∞ sady nejjednoduÜÜφch skript∙ se srozumiteln²mi nßzvy nebudou ji₧ jen jak²msi p°epychem, ale stanou se nezbytnostφ.
Artemij Lomov
KAÄD╔ R┴NO NOV▌ DESIGN
NßÜ tΘm∞° primitivnφ p°φklad dokonce i v souΦasnΘm stavu otevφrß prostor pro dalÜφ rozlet tv∙rΦφ myÜlenky. V₧dy¥ veÜkerΘ rozdφly mezi ob∞ma popsan²mi definicemi styl∙ (letnφ a podzimnφ) tkvφ pouze v hodnotßch vlastnosti color a backround-color pro °adu prvk∙. NaÜe styly vÜak obsahujφ i spoustu dalÜφch informacφ, kterΘ je mo₧nΘ n∞jak²m zp∙sobem naprosto zm∞nit (nap°φklad rozm∞ry blok∙ a vzßjemnΘ rozmφst∞nφ funkΦnφch Φßstφ strßnky, °ezy a velikost pφsma, grafickß ·prava odkaz∙ v zßkladnφm dokumentu a v oblasti navigace, zp∙sob formßtovßnφ textu...), ani₧ bychom museli zasahovat do HTML k≤du webov²ch strßnek jako takov²ch. Pouhou modifikacφ soubor∙ s definicemi styl∙ (a mo₧nß dopln∞nφm databßze pou₧φvanΘ grafiky o novΘ obrßzky) m∙₧eme m∞nit vn∞jÜφ vzhled webu pom∞rn∞ v ÜirokΘm rozsahu, a dokonce ho obΦas zm∞nit i naprosto k nepoznßnφ. P°itom je mo₧nΘ nejr∙zn∞jÜφ verze designu aktivovat v libovolnΘm po°adφ, doslova podle naÜφ nßlady, t°eba ka₧d² den.
