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
Eric Meyer o CSS profesionáln! – pokračujeme s kaskádovými styly
Eric Meyer
Authorized translation from the English language edition, entitled MORE ERIC MEYER ON CSS, 1st Edition, 0735714258, 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í, 0735714258, 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 © 2005.
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 2005. Všechna práva vyhrazena. Katalogové íslo: ZR413 Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 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., www.heller.cz © 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, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail:
[email protected] http://www.zonerpress.cz
ISBN 80-86815-17-X
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
PROJEKT 1
PROJEKT 2
PROJEKT 3
ix x xi xii xiii xvii xix xix xx xx
Přepracování starších stránek
23
Cíle projektu Přípravy Přepracování stránky Rekonstrukce designu Posouzení výsledku Možnosti dalšího rozšíření
24 24 26 30 49 51
Vytváříme galerii fotografií
53
Cíle projektu Přípravy Položení základů Tvorba Přehledu Tvorba Katalogu Možnosti dalšího rozšíření
54 55 55 56 67 77
Formátujeme finanční zprávu
79
Cíle projektu Přípravy Formátujeme pro obrazovku Možnosti dalšího rozšíření
80 80 81 99
V
PROJEKT 4
PROJEKT 5
PROJEKT 6
PROJEKT 7
Práce s pozadím
101
Cíle projektu Přípravy Úsvit stylů Plážový styl Možnosti dalšího rozšíření
102 102 102 111 121
Seznamy a menu
123
Cíle projektu Přípravy Položení základů Otevřená varianta Uzavřená varianta Možnosti dalšího rozšíření
124 124 124 126 134 141
Rozbalovací menu založená na CSS
143
Cíle projektu Přípravy Položení základů Umístění menu Změna orientace menu Poznámka na závěr Možnosti dalšího rozšíření
144 144 144 146 160 167 169
Atraktivní záložky
171
Cíle projektu Přípravy Položení základů Formátování odkazů Skutečné záložky Možnosti dalšího rozšíření
172 172 173 176 188 197
VI
PROJEKT 8
PROJEKT 9
PROJEKT 10
Styl pro weblog
199
Cíle projektu Přípravy Položení základů Formátujeme weblog Možnosti dalšího rozšíření
200 200 200 202 219
Navrhujeme osobní stránku
221
Cíle projektu Přípravy Položení základů Tvorba návrhu Možnosti dalšího rozšíření
222 222 222 224 243
Design Zahrady
245
Cíle projektu Přípravy Položení základů Tvorba návrhu Používáme formát PNG Úvahy Možnosti dalšího rozšíření
246 246 247 249 274 278 279
REJSTŘÍK
281
VII
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
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 (www.complexspiral.com), 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 (www.wruw.org) 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
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 www.g9g.org a www.cerebellion. 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ů (www.webstandards.org).
Dave Shea je tvůrcem a zahradníkem vysoce inspirativní Kaskádové zenové zahrady (www.csszengarden.com). I on je jedním z členů Výboru pro směřování webových standardů (www.webstandards.org), je vlastníkem a ředitelem firmy Bright Creative (www.brightcreative.com) a v jeho blogu (www.mezzoblue. 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
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
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 e-mail 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 e-mail. 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í e-mailů, které dostávám, nemohu zaručit odpověd na každou zprávu. E-mail:
[email protected] Adresa: Zoner Press ZONER software, s. r. o Miroslav Kučera Koželužská 7 602 00 Brno
XII
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
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
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
XVI
Ú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 2002. 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
◆
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
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
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 http://more.ericmeyeroncss.com/. 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
Cleveland Eats: Matsu <style type=”text/css”> /* změna oproti předchozí verzi */ table {border: 2px solid red; margin: 3px;} td {border: 1px dotted purple; padding: 2px;}
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
XXII
