Eric Meyer o CSS pokračujeme s kaskádovými styly profesionálně!

Transkript

1 Eric Meyer o CSS pokračujeme s kaskádovými styly profesionálně! Předmluva Douglase Bowmana xii Úvod xiv PROJEKT 1 Přepracování starších stránek 23 PROJEKT 2 Vytváříme galerii fotografií 53 PROJEKT 3 Formátujeme finanční zprávu 79 PROJEKT 4 Práce s pozadím 101 PROJEKT 5 Seznamy a menu 123 PROJEKT 6 Rozbalovací menu založená na CSS 143 PROJEKT 7 Atraktivní záložky 171 PROJEKT 8 Styl pro weblog 199 PROJEKT 9 Navrhujeme osobní stránku 221 PROJEKT 10 Design zahrady 245 Rejstřík 281

2

3 Eric Meyer o CSS pokračujeme s kaskádovými styly profesionálně! Eric Meyer

4 Authorized translation from the English language edition, entitled MORE ERIC MEYER ON CSS, 1st Edition, , by MEYER, ERIC A., published by Pearson Education, Inc, publishing as New Riders; Copyright 2004 by Eric A. Meyer. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by ZONER software s.r.o., Copyright 2005 Autorizovaný překlad anglického vydání nazvaného MORE ERIC MEYER ON CSS, první vydání, , autor MEYER, ERIC A., vydal Pearson Education, Inc, ve vydavatelství New Riders; Copyright 2004 Eric A. Meyer. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení Pearson Education, Inc. České vydání vydal ZONER software s.r.o., Copyright Eric Meyer o CSS - pokračujeme s kaskádovými styly profesionálně! Autor: Eric A. Meyer Copyright ZONER software s.r.o. Vydání první v roce Všechna práva vyhrazena. Katalogové číslo: ZR413 Zoner Press ZONER software s.r.o. Koželužská 7, Brno Překlad: Tomáš Znamenáček Odpovědný redaktor: Miroslav Kučera DTP: Miroslav Kučera Cover foto: Jiří Heller, HELER.CZ s.r.o., Cover a layout: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí. Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o. Koželužská 7, Brno tel.: , fax: knihy@zoner.cz ISBN X

5 Obsah Několik slov o autorovi Několik slov o recenzentech Poděkování Pošlete nám váš názor Předmluva Úvod Co můžete od této knihy očekávat Přehled projektů Doprovodná webová stránka Typografické konvence ix x xi xii xiii xvii xix xix xx xx PROJEKT 1 Přepracování starších stránek 23 Cíle projektu 24 Přípravy 24 Přepracování stránky 26 Rekonstrukce designu 30 Posouzení výsledku 49 Možnosti dalšího rozšíření 51 PROJEKT 2 Vytváříme galerii fotografií 53 Cíle projektu 54 Přípravy 55 Položení základů 55 Tvorba Přehledu 56 Tvorba Katalogu 67 Možnosti dalšího rozšíření 77 PROJEKT 3 Formátujeme finanční zprávu 79 Cíle projektu 80 Přípravy 80 Formátujeme pro obrazovku 81 Možnosti dalšího rozšíření 99 V

6 PROJEKT 4 Práce s pozadím 101 Cíle projektu 102 Přípravy 102 Úsvit stylů 102 Plážový styl 111 Možnosti dalšího rozšíření 121 PROJEKT 5 Seznamy a menu 123 Cíle projektu 124 Přípravy 124 Položení základů 124 Otevřená varianta 126 Uzavřená varianta 134 Možnosti dalšího rozšíření 141 PROJEKT 6 Rozbalovací menu založená na CSS 143 Cíle projektu 144 Přípravy 144 Položení základů 144 Umístění menu 146 Změna orientace menu 160 Poznámka na závěr 167 Možnosti dalšího rozšíření 169 PROJEKT 7 Atraktivní záložky 171 Cíle projektu 172 Přípravy 172 Položení základů 173 Formátování odkazů 176 Skutečné záložky 188 Možnosti dalšího rozšíření 197 VI

7 PROJEKT 8 Styl pro weblog 199 Cíle projektu 200 Přípravy 200 Položení základů 200 Formátujeme weblog 202 Možnosti dalšího rozšíření 219 PROJEKT 9 Navrhujeme osobní stránku 221 Cíle projektu 222 Přípravy 222 Položení základů 222 Tvorba návrhu 224 Možnosti dalšího rozšíření 243 PROJEKT 10 Design Zahrady 245 Cíle projektu 246 Přípravy 246 Položení základů 247 Tvorba návrhu 249 Používáme formát PNG 274 Úvahy 278 Možnosti dalšího rozšíření 279 REJSTŘÍK 281 VII

8 Věnováno památce na moji matku, Carol Suzanne Meyerovou, skutečnou přítelkyni a štěstí pro všechny, kdo ji znali. VIII

9 Několik slov o autorovi Eric A. Meyer pracuje s WWW od konce roku 1993 a je mezinárodně uznávaným odborníkem na HTML, CSS a webové standardy. Je zakladatelem poradenské firmy Complex Spiral ( která se zabývá návrhem WWW prezentací v souladu se standardy. Tím svým klientům mezi které patří například Macromedia nebo Wells Fargo Bank pomáhá snižovat náklady a zvyšuje jejich efektivitu. Začátkem roku 1994 byl Eric autorem grafického řešení a osobou zodpovědnou za chod WWW stránek univerzity Case Western Reserve. Právě v tomto období vznikly jeho široce uznávaní průvodci HTML. Jako vedoucí projektu se podílel na tvorbě online verze Encyklopedie clevelandských dějin spojené se Slovníkem clevelandské biografie (ech.cwru.edu) první to encyklopedii dostupné v nezkrácené podobě na WWW. Je autorem knih Eric Meyer on CSS: Mastering the Language of WebDesign (New Riders, v českém překladu vydal v roce 2004 Zoner Press pod názvem Eric Meyer o CSS ovládněte kaskádové styly), Cascading Style Sheets: The Definitive Guide (O Reilly & Associates) a CSS2.0 Programmer s Reference (Osborne/McGraw-Hill). Napsal celou řadu článků pro O Reilly Network, Web Techniques a Web Review; stojí za tabulkami kompatibility prohlížečů a spolupracoval na tvorbě oficiální W3C testovací CSS sady. Školil zaměstnance mnoha organizací, příkladem budiž Národní laboratoř Los Alamos, Veřejná knihovna v New Yorku, Cornellova univerzita nebo Univerzita Severní Iowy. Eric vystupuje také na technických konferencích, mezi které patří například IW3C2, Web Design World, CMP, SXSW, User Interface Conference a The Other Dreamweawer Conference. Ve svém volném čase dělá Eric dobrého ducha živé diskusní skupiny css-discuss (www. css-discuss.org), kterou společně s Johnem Allsoppem z Western Civilisation založil, a o niž se dnes stará evolt.org. Eric žije v clevelandském Ohiu což je krásné město s ošklivou pověstí a je autorem pořadu "Your Father s Oldsmobile", ve kterém můžete každý víkend na frekvenci 91,1 FM ( zaslechnout písničky ze staré dobré doby bigbandů (tedy, pokud jste z Clevelandu nebo jeho okolí). Když už nemá nic jiného na práci, otravuje svou ženu Kat. IX

10 Několik slov o recenzentech Tito lidé se svými praktickými zkušenostmi podíleli na celém procesu tvorby knihy, kterou právě držíte v rukou. Při psaní textu prohlédli tito odborníci důkladně všechny technické i organizační podklady a jejich připomínky byly pro vznik kvalitního díla naprosto nepostradatelné. Porter Glendinning je vlastníkem a hlavním poradcem firmy Cerebellion Design. Žije poblíž Washingtonu D.C. se svou ženou Laurou (která se snaží smířit s jeho internetovým fetišismem) a labradorem Arrowem (jenž mu žere ponožky). Na webu ho můžete najít na adresách a com. Je jedním z administrátorů diskusní skupiny Babble věnované pokročilým webovým technologiím všeho druhu (www. babblelist.com) a je členem Výboru pro směřování webových standardů ( Dave Shea je tvůrcem a zahradníkem vysoce inspirativní Kaskádové zenové zahrady ( I on je jedním z členů Výboru pro směřování webových standardů ( je vlastníkem a ředitelem firmy Bright Creative ( a v jeho blogu ( com) se můžete dočíst celou řadu zajímavých věcí o webu. Žije v Kanadě, Vancouveru B. C., a když zrovna není před obrazovkou, najdete ho na místním tržišti nebo v nějaké malé pražírně kávy. X

11 Poděkování Lindě Bump Harrisonové a Lori Lyonsové z nakladatelství New Riders/PeachPit Press, které mě během všech prací na knize mocně podporovaly a zasluhují si za trpělivost a toleranci projevenou během uzávěrek (přesněji řečeno během překračování domluvených uzávěrek) čestné místo. Vřelé díky směřují k odborným poradcům, kterými byli Dave Shea a Porter Glendinning děkuji za jejich poznámky vedoucí ke zdůraznění mnoha důležitých faktů, vyjasnění nepřesně napsaných částí textu a opravení chyb. Zvláštní poděkování si zaslouží Dave za nádherný návrh, kterým přispěl k desáté kapitole. Chtěl bych poděkovat Douglasi Bowmanovi za to, že se ujal předmluvy. Dougovu práci jsem obdivoval od přepracování Wired News v roce 2002 jeho technická zručnost je ve spojení s jeho grafickým cítěním zárukou překrásného výsledku. Jeho příspěvek k této knize je pro mě velkou ctí. Mé poděkování patří i tisícům členů diskusní skupiny css-discuss za to, že z ní udělali jeden z nejlepších informačních zdrojů co znám, a za stále udržovaný odstup signálu od šumu. Díky evolt.org a Johnu Handelaarovi za hladké obstarání technického zázemí této diskusní skupiny a díky Johnu Alsoppovi z Western Civilisation za jeho pomoc při zakládání skupiny. Jako obvykle bych chtěl vyjádřit velký vděk všem, kteří mě za ta léta kontaktovali ať už to bylo kvůli poděkování, komentáři, doporučení, otázce nebo nápadu týkajícího se CSS, prohlížečů nebo mého psaní. I když bohužel nebylo v mých silách odpovědět všem, všechny vaše názory jsem si přečetl. Díky vám. A konečně bych chtěl poděkovat své ženě Kathryn jsi ten nejúžasnější společník, kterého muž může mít. Bez Tvé podpory, síly a stálé víry bych nikdy nedošel tak daleko; nikdy Ti nebudu schopen poděkovat za všechno, co pro mě děláš a čím pro mě jsi. Eric A. Meyer Únor 2004 XI

12 Pošlete nám váš názor Jako čtenáři této knihy se stáváte těmi nejdůležitějšími kritiky a komentátory. Vážíme si vašeho názoru a chtěli bychom znát, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat a jiné podnětné myšlenky, které jste nám ochotni sdělit. Jako redaktor Zoner Press vítám vaše názory. Můžete mi faxovat, poslat nebo dopis a sdělit mi, co se vám v této knize líbilo nebo nelíbilo, stejně tak, co bychom měli udělat, aby naše další knihy byly lepší. Pokud mi napíšete, prosím, nezapomeňte připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, fax nebo . Pozorně zhodnotím vaše názory a poskytnu je autorovi a redaktorům, kteří pracovali na této knize. Prosím, vězte, že nemohu pomoci s technickými problémy, které se týkají obsahu knihy, a že díky velkému množství ů, které dostávám, nemohu zaručit odpověd na každou zprávu. miroslav.kucera@zoner.com Adresa: Zoner Press ZONER software, s. r. o Miroslav Kučera Koželužská Brno XII

13 Předmluva "Eric Meyer." Stačí to jméno nahlas vyslovit a okamžitě strhnete mou pozornost možná se s vámi dám dokonce do rozhovoru, byť bychom se viděli poprvé v životě. Probíral jsem se minulý dok přihrádkou plnou technických knih a zaslechl jsem, jak nějaká slečna říká svému kamarádovi název knihy, kterou právě držela v ruce: "Jmenuje se to Eric Meyer o CSS. Mám dojem, že už jsem o tom chlápkovi někde četla." Přišel jsem o něco blíže a nabídl jsem jí radu. "Jestli nějakou podobnou knihu hledáte, tak už nemusíte našla jste." Jen co jsem se dozvěděl, že má přehled alespoň v základních vlastnostech CSS, mohl jsem svou radu vysvětlit. "Ta kniha je dobrá a Eric Meyer též. Uvidíte, že budete nadšená už po první kapitole." Ještě chvíli jsme si o knize a o jejím autorovi povídali pak mi poděkovala, knihu s důvěrou popadla a vyrazila směrem k pokladně. Kdybyste věděli, jakou roli hrál Eric Meyer v mém přístupu k CSS, a jakou roli hrají dnes kaskádové styly v mých výpravách k hranicím možností webdesignu, asi byste se mé ochotě poradit vůbec nedivili. Kaskádové styly jsem totiž celé roky ignoroval. Když jsem pracoval pro HotWired, snažili se mě spolupracovníci při každé příležitosti přistrčit ke kaskádovým stylům mysleli si, že je budu zbožňovat. Jsem především grafik, ale oni věděli, že mi složitější technické problémy nedělají žádné problémy. Nejednotnost a nemožnost dopředu odhadnout výsledek mi ovšem problémy dělá (pokud jde o kód). Když jsem se ale tlaku okolí konečně poddal a začal si s CSS pohrávat, okamžitě jsem narazil na cihlovou zeď. V tehdejších "čtyřkových" verzích prohlížečů Netscape Navigator a Internet Explorer totiž každý složitější pokus překračující základní práci s barvou a písmem vyústil nezvratně v pocit zmaru. Chtěl jsem nastavení okraje, velikosti písma a polohy, které se nemění v závislosti na použité platformě a prohlížeči. V roce 1998 byla ovšem podpora i pro tyto základní vlastnosti strašlivá a působila bolesti hlavy všem, kteří se snažili dosáhnout jednotného vzhledu ve více prohlížečích najednou. Kaskádové styly jsem tedy odepsal jako nedostižnou iluzi, za kterou se honit nehodlám. Chtěl jsem pokračovat v tvorbě graficky vyvedených a použitelných návrhů, které jsem v té době kaskádovým stylům a jejich bědné implementaci v prohlížečích zkrátka svěřit nemohl. Během těchto bitev s CSS jsem naštěstí zavadil o jednu z mála knih, které se jim v té době věnovaly mé štěstí spočívalo v tom, že tuto knihu napsal Eric Meyer. XIII

14 Na knížku se několik let prášilo, protože jsem se CSS vyhýbal. Okolnosti se ale postupem času začaly měnit objevovaly se zmínky o prohlížečích se slušnou podporou kaskádových stylů a menší WWW prezentace CSS s poměrně dobrými výsledky používaly. Tyto změny podráždily mou zvědavost natolik, že jsem se již podruhé kaskádovými styly začal zabývat a počal jsem shánět další informace. Kamkoliv jsem se podíval, tam na mě číhalo jméno Eric Meyer jméno autora knihy, kterou už jsem měl, jméno související s hodnotným zdrojem informací. Články o CSS, testovací sady, diskusní skupina o CSS a jeho vlastní pracovní dokument, na kterém jsem začal okamžitě s téměř nábožnou úctou zkoušet možné kombinace vlastností a jejich hodnot. Jeho kniha se ze zaprášené poličky přesunula na roh mého pracovního stolu, kde byla na dosah mé ruky a kde mi téměř nepřetržitě sloužila jako zdroj informací. "Jakže to funguje tohle pozicování?" "Jak oni v tom CSS říkají prokladu?" "V jakém pořadí by měly být tyhle hodnoty popisující písmo?" Ericova stylu jsem se nemohl nabažit. S každým jeho článkem mi ve velké skládačce zapadl jeden kousek na své místo. A nyní drobná literární dekadence skok časem o rok dopředu. Ericova kniha ještě pořád leží na okraji mého stolu, jen oslí růžky na ní narostly. Byl jsem až po krk ponořený v práci na čistě kaskádovém návrhu Wired News z roku 2002, když vyšla kniha Eric Meyer o CSS jeho první a neocenitelný pohled na CSS napsaný ve formě krátkých projektů. Hned první noc, kterou jsem knihu držel v rukou, jsem se ponořil hluboko do kapitoly o vícesloupcovém rozvržení. A byl jsem ztracen. Zjevení, kterých jsem byl při čtení této knihy svědkem, mě donutila litovat, že jsem ji nedostal do rukou dříve, než jsem se pustil do složitých stylů pro Wired. Dokážete si tedy představit vzrušení, které následovalo zvěst o pokračování této knihy chystané Ericem a nakladatelstvím New Riders. Sága pokračuje! Na cestě je další řada praktických ukázek, které jsou jasnou trefou do černého pro kteréhokoliv webdesignéra a vývojáře. Další řada projektů ze skutečného světa, které řeší naše každodenní pracovní problémy. Další porce Ericova vhledu do jednoduchých i složitých zákoutí CSS. Další porce moudrosti odkázané mistrem Eric Meyer znovu o CSS! Ericova dokonalá znalost kaskádových stylů mu umožňuje psát o nich dostatečně autoritativně. Přesto ale píše osobním a přátelským tónem, který se lehko čte a jemuž snadno porozumíte. Taková kombinace je ideální pro ty, kteří se chtějí naučit něco nového, i pro ty, kteří si hodlají rozšířit vlastní znalosti. Eric vám s lehkostí sobě vlastní ukáže jak na to a zároveň se dozvíte, proč zrovna takhle. Podle mého názoru je u kaskádových stylů toto proč stejně důležité jako jak. Vhodně zvolenou formou projektů se Eric trefuje přesně do ideálního poměru mezi těmito dvěma přístupy. Stačí si projít příklady, začíst se do některé z poznámek nebo varování v textu a v hlavě se vám okamžitě rozbliká malá žárovečka: "Aha, tak takhle to je!" nebo "Hm, tak kvůli tomuhle mi pozadí zmizelo pod plovoucím prvkem? Jasně " XIV

15 Narazili jste na otravný problém, který vám komplikuje práci na rozložení klientových stránek? Snažíte se drobet vylepšit svou obrázkovou galerii? Nemáte tušení, proč jsou obrázky v pozadí stránky neustále o několik pixelů od sebe? Věnujte pár chvil této knize a Eric s vámi projde několik podobných situací, které vám otevřou oči. Budete se asi sami sebe ptát, kde byste byli bez Erica Meyera. Stejně jako u prvního dílu se můžete v této knize okamžitě zastavit u libovolné z následujících kapitol a začít prohlubovat své znalosti CSS. Reálné problémy v knize popsané a vyřešené vám nabídnou řadu nápadů a nabudete díky nim jistoty, která se vám bude na dalších projektech jistě hodit. Sám jsem se otočil o sto osmdesát stupňů od naprostého odmítání CSS až k nadšenému osvojení každé metody nebo techniky, kterou si vymyslím nebo najdu. Eric Meyer hrál (a ještě pořád hraje) v tomto přerodu a v mém vřelém vztahu k síle a pružnosti CSS důležitou roli. Stejně tomu může být i u vás. Pokud jste webdesignér nebo vývojář, který má alespoň titěrné znalosti CSS a prodělali jste alespoň základní úvod do tematiky, pak byste se podle mě neměli rozhodovat mezi koupí této knihy a koupí jejího "prvního dílu". Spíš byste se měli sami sebe zeptat na jakém projektu začnete pracovat, až budete mít knihu celou jen sami pro sebe? Douglas Bowman zakladatel a ředitel Stopdesign San Francisco XV

16 XVI

17 Úvod Ve svých rukou právě držíte (pokud si tedy neprohlížíte elektronickou verzi textu) pokračování knihy Eric Meyer o CSS, vydané v angličtině (a také v češtině díky vydavatelství Zoner Press) za velkého ohlasu čtenářů v roce Výborně se osvědčila forma projektů, kterou byla tato kniha psána řadě čtenářů se líbilo, že se mi mohou při řešení projektu dívat přes rameno. Což bylo přesně to, čeho jsem chtěl při psaní knihy dosáhnout snažil jsem se o to i tentokrát. Pokud si tuto knihu koupíte a bude se vám líbit, bude se vám pravděpodobně líbit i první díl knihy nazvaný jako Eric Meyer o CSS ovládněte kaskádové styly (Zoner Press, 2004). Oba díly jsou navzájem nezávislé: nemusíte vlastnit jeden, abyste si užili druhý. Nemusíte mít strach, že byste se bez přečtení prvního dílu neorientovali v motivech a jednání postav v dílu druhém. Což je ale nejspíš dáno tím, že v mých knihách žádné postavy nejsou. Nedostatek postav je ovšem vyvážen zápletkou, dokonce dvěma zápletkami. První zápletka popisuje dobrodružnou výpravu za poznáním a experimenty náš hrdina (Vy!) v ní kráčí ve stopách svého zkušeného průvodce, aby objevil krásné nové cesty krásného nového světa. Druhá zápletka (či spíše podzápletka) je vystavěna na podloudném záměru autora přemluvit čtenáře k častějšímu používání CSS neustálým zdůrazňováním pružnosti výsledného návrhu, jeho zvýšené dostupnosti, snížené velikosti a překrásných vizuálních efektů. Měli byste si tuto knihu koupit? Tato otázka je rozhodně na místě. Jakkoliv jsem na práci uloženou ve stránkách této knihy hrdý, jsem si též vědom toho, že výsledek není pro všechny čtenáře. Dovolím si tedy popsat obě skupiny čtenářů ty, pro které tato kniha určena je, a ty, pro něž určena není. Pro koho je tato kniha určena Pokud splňujete jeden nebo více z následujících bodů, pak je tato kniha určena právě vám. Hledáte praktického průvodce světem CSS zaměřeného na příklady z reálného světa. Při učení vám vyhovují spíše praktické pokusy než čtení knihy. Možná to zní v knize legračně, ale tato kniha byla schválně psána tak, abyste si při jejím čtení mohli hned všechno vyzkoušet. Už nějakou dobu plánujete rozšíření svého CSS arzenálu, ale stále jste to odkládali, protože jde o tak velké a složité téma a nejste si příliš jistí, kde přesně začít. XVII

18 Vždycky jste chtěli, aby vám někdo ukázal převod tradiční HTML stránky na čistě kaskádový návrh a vysvětlil vám přitom výhody nového návrhu. Pokud spadáte do této kategorie, tak se bez dalšího rozmýšlení vrhněte na první kapitolu. Kdyby se vás někdo zeptal, popsali byste své znalosti HTML jako "pokročilé" nebo "výborné", zatímco znalosti CSS byste hodnotili spíše jako "základní" nebo "lehce pokročilé". Jinými slovy, rozumíte výborně jazyku HTML a samotnému CSS právě natolik, abyste s ním mohli začít experimentovat. Pro koho tato kniha určena není Pokud splňujete jeden nebo více z následujících bodů, pak se vám tato kniha asi příliš nehodí. Nikdy jste CSS nepoužili nebo jste ho dokonce ani nikdy neviděli. I když jsou v textu některé základní pojmy vysvětleny, předpokládám, že čtenář ovládá alespoň základy CSS a dokáže se plynně vyjadřovat v HTML. Někteří čtenáři první knihy (Eric Meyer o CSS) mi psali, že si knihu užili i bez jakýchkoliv předchozích zkušeností s CSS tentokrát si už začátečníci skutečně příliš nepočtou. Chcete pochopit všechna drobná zákoutí teorie ležící v základech CSS a obsáhnout všechny podrobnosti specifikace. Na trhu je řada knih, která tomuto účelu poslouží lépe, my se budeme soustředit na reálné problémy. Pro návrh stránek používáte nějaký WYSIWYG program. Tato kniha předpokládá, že jste schopni HTML a CSS upravovat ručně. Všechny projekty lze samozřejmě ve WYSIWYG programu projít, ale kniha byla psána s jasným důrazem na ruční práci. A když už jsme u toho kniha Eric Meyer o CSS měla velký úspěch u uživatelů programů Dreamweaver a GoLive. Pokud tedy do této kategorie spadáte, máte námět k zamyšlení. Sháníte knihu, která vám poradí, jak psát CSS pro všechny prohlížeče a platformy, včetně prohlížečů Netscape Navigator řady 4 a Internet Explorer řady 3. Podrobnější vysvětlení najdete o pár řádků níže, v odstavci "Co můžete od této knihy očekávat". Četli jste některou z mých knih a nelíbí se vám osobní tón, kterým byla psána. Mohu vám zaručit, že se styl mého psaní v podstatě nemění. XVIII

19 Co můžete od této knihy očekávat Od samotného počátku jsem chtěl napsat poutavou knihu, která se bude soustředit na praktické a zajímavé způsoby použití kaskádových stylů akceptovaných dnešními prohlížeči. Z tohoto důvodu začíná každý projekt čistým dokumentem bez jakéhokoliv stylu a končí plně ostylovanou stránkou připravenou k použití na webu. Pokud se mé dílo podařilo, měli byste mít pocit, že mi při práci nahlížíte přes rameno a já průběžně komentuji každý svůj krok. O každém projektu si můžete udělat obrázek pouhým čtením textu a prohlížením doprovodných obrázků nejlépe ovšem uděláte, pokud si otevřete okno svého oblíbeného prohlížeče a vezmete si k ruce textový editor. Tak můžete sledovat všechny změny v kódu projektu přímo na své obrazovce. A ještě jednu věc bych rád ujasnil: Techniky používané v této knize jsou určeny především pro prohlížeče s číslem verze vyšším než čtyři (a Safari 1.0+). Pokud máte navrhnout stránku, která bude vypadat stejně v prohlížečích Netscape Navigator řady 4, Internet Explorer řady 4, Internet Explorer řady 6 a Netscape Navigator řady 7, pak vám tato kniha asi příliš nepomůže. Přehled projektů Aby byla kniha co nejpraktičtější, rozdělil jsem ji na deset projektů co projekt, to kapitola. Mezi projekty můžete podle nálady přeskakovat, každý je navržen pokud možno samostatně. Přesto byla kniha napsána především pro "standardní" čtenáře pokud ji budete číst odzadu dopředu, asi narazíte na problémy, pozdější projekty přece jen staví na řešení předchozích. S několika drobnými výjimkami by měl být obsah projektu zřejmý z jeho názvu. Například projekt první, "Přepracování starších stránek", popisuje převod starších stránek postavených na kombinaci čistého HTML a průhledných obrázků na stránky vytvořené z HTML a CSS, které používají pro rozmístění prvků pozicování místo tabulek. Druhý a třetí projekt se zabývají některými standardními problémy, budeme se v nich zabývat formátováním galerie fotografií a finanční výsledovky. Projekt číslo čtyři poněkud přitvrdí; jeho předmětem je tvůrčí práce s pozadím stránky a kombinace relativních jednotek s absolutními používaná k dosažení průhlednosti. V projektech pět až sedm se budeme zabývat různými způsoby použití seznamů. První z těchto tří projektů používá seznam k vytvoření postranního menu vypracujeme v něm dvě různé varianty umístění menu pro jeden a tentýž seznam. V druhém projektu vytvoříme z několika vnořených seznamů pěkné vysunovací menu, které bude pracovat ve většině prohlížečů (a tím myslím i IE pod Windows ). Poslední z této trojice projektů vytváří pomocí techniky posuvných dveří (sliding doors technique) ze seznamu odkazů záložky. XIX

20 Projekty osm a devět se zabývají stylováním weblogu a osobní WWW stránky. Projekt desátý je ze všech projektů v této knize nejambicióznější a nejsložitější popisuje krok za krokem tvorbu grafického návrhu Kaskádové zenové zahrady od získání předlohy až po hotový ostylovaný dokument. Doprovodná webová stránka Každá z kapitol této knihy vychází z nějakého skutečného projektu. Součásti projektu si můžete stáhnout najednou i po jednotlivých kapitolách z doprovodné WWW stránky Na této stránce najdete všechny obrázky v projektu použité, opravy případných chyb nalezených v textu knihy a další bonusy v podobě autorových komentářů nebo odkazů na užitečné webové zdroje. Na těchto stránkách je pro každou kapitolu archiv se soubory, které jsou potřeba k pohodlné práci na projektu, včetně grafiky a souboru obsahujícího první verzi projektu. Tyto soubory důsledně dodržují jednotnou konvenci pojmenování, například obrázek označený v knize jako "obrázek 7.3" je pojmenován ch0703.html, pracovní soubor s prvním projektem se jmenuje ch01proj.html. Právě tento soubor si můžete otevřít ve svém textovém editoru a pracovat na něm během čtení knihy. Po každé změně stylu můžete výsledek zkontrolovat ve svém prohlížeči stačí použít tlačítko Obnovit. Na výše zmíněné adrese naleznete také soubory k mé první knize, Eric Meyer o CSS ovládněte kaskádové styly. Stáhnout si je můžete, i když tuto knihu nevlastníte. Sice netuším, k čemu vám soubory pak budou dobré, ale tuto možnost každopádně máte. Typografické konvence Tato kniha se řídí několika typografickými konvencemi, které by vám měly usnadnit čtení. Při prvním setkání s novým pojmem je použita kurzíva pokud na ni narazíte, pak se někde v okolním textu ukrývá definice. Zdrojové kódy, funkce, proměnné a další výpočetní rekvizity jsou sázeny neproporcionálním písmem. V textu budou navíc označeny tmavě červenou barvou, například při zmínce o CSS vlastnostech (margin) nebo hodnotách (10px). Delší úryvky zdrojového kódu jsou celé vysázeny neproporcionálním písmem a červená barva v nich slouží k vyznačení změn oproti předchozí verzi. Drtivá většina ukázek zdrojového kódu představuje pouhou část celkového stylu dokumentu a nově vložené řádky jsou obklopeny několika staršími řádky, které zůstaly beze změny. Několik neměnných řádků slouží k hladšímu udržení kontextu a měly by vám ulehčit hledání částí, které byste měli ve svém textovém editoru při práci na projektu změnit. Takhle nějak to bude vypadat: XX

21 <head> <title>cleveland Eats: Matsu</title> <style type= text/css > /* změna oproti předchozí verzi */ table {border: 2px solid red; margin: 3px;} td {border: 1px dotted purple; padding: 2px;} </style> </head> Každá kniha o počítačích má svůj vlastní vizuální styl. Stačí zběžně prolistovat tuto knihu a všimnete si několika zajímavostí, takhle fungují: Vysvětlivka V tomto odstavci se dozvíte informace, které se vztahují k okolnímu textu, ale nejsou přímou součástí projektu. Může jít například o jiné přístupy k právě řešenému problému každopádně tento text můžete přeskočit, aniž byste přišli o nějakou informaci důležitou pro dokončení projektu. Poznámky Takhle vypadají užitečné poznámky k hlavnímu textu, najdete jich v knize celou řadu. Objeví se v nich různé tipy, komentáře, definice nových pojmů a odkazy na další zdroje. Varování Takhle budou vypadat upozornění na ošidná místa, která by vám mohla dělat problémy. Odkazy na WWW budou obsahovat adresy souborů, které si máte stáhnout nebo zobrazit ve svém prohlížeči. Závěr každého projektu obsahuje oddíl nazvaný jako "Možnosti dalšího rozšíření". V něm naleznete tři krátké úkoly, tři variace na hotový projekt. Ty rozhodně nevyčerpávají všechny možnosti práce s projektem, chápejte je spíše jako výzvu a odrazový můstek k dalším nápadům. Pokud se vám podaří obrázky uvedené v této části kapitoly napodobit pomocí CSS, jste na nejlepší cestě. XXI

22 XXII