Kaskádové styly Chameleoni v síti 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: * odpovídající všem nezbytným standardům konsorcia W3C; * 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: "

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 , 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: 75%; color: #000; background-color: #fff; background-image: url(images/bg.gif); background-position: top left; backgroundrepeat: repeat-x; background-attachment: scroll} a {text-decoration: none} a:link {color: #093} a:visited {color: #063} a:active {color: #000} a:hover {text-decoration: underline} a.nav, a.nav:visited, a.nav:hover {color: #fff} a.nav:hover {text-decoration: none} div {position: absolute; margin: 0px; padding: 0px; border-style: none} #logo {top: 0px; left: 0px; width: 100px; height: 100px; background-color: #093} #navbar {top: 103px; left: 0px; width: 100px; height: 200px; background-color: #0c6} #navlinks {top: 113px; left: 10px; width: 80px; height: 180px; font-family: Arial Narrow; font-size: 12px; text-align: center; overflow: hidden} #main {top: 103px; left: 100px; padding: 20px} #banner {top: 20px; right: 20px; width: 468px; height: 60px; background-color: #fff} #logotype {width: 100px; height: 100px; border-style: none} h1 {font-size: 150%; color: #0c6} h2 {font-size: 120%; color: #093} p {text-align: justify; text-indent: 1.5em; margin: 0pt} 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. a:link {color: #f60} a:visited {color: #960} #logo {top: 0px; left: 0px; width: 100px; height: 100px; background-color: #f60} #navbar {top: 103px; left: 0px; width: 100px; height: 200px; background-color: #fc0} h1 {font-size: 150%; color: #fc0} h2 {font-size: 120%; color: #f60} 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.