Webdesign s webovými standardy

CYAN MAGENTA YELOW BLACK CYAN MAGENTA YELOW BLACK

CYAN MAGENTA YELOW BLACKCYAN MAGENTA YELOW BLACK

Dan

Cede

rhol

m

ENCYKLOPEDIE WEBDESIGNERA

Web

desi

gnW

ebde

sign

s w

ebov

ými s

tand

ardy

stan

dard

y

Dan Cederholmwww.zonerpress.cz

• Co jsou to webové standardy a jak je využívat při tvorbě stránek.

• Úskalí tvorby layoutů založených na XHTML a CSS.

• Práce se seznamy, nadpisy a tabulkami založená na respektování standardů W3C

• Správné použití formulářů, citací a odkazů.

• Velké množství praktických postupů využitelných v praxi.

© Foto: Jiří Heller

WEBDESIGNs webovými

STANDARDY

Dan Cederholm

Webdesigns webovými standardy

Publikace, kterou držíte v rukou, představuje praktickou kuchař-ku we bových standardů. Respektovaný webový designér Dan Cederholm v ní bez zbytečné omáčky vysvětluje, jak využít webové standardy (za které je zodpovědné konsorcium W3C) pro vytvoře-ní estetických, rychle se načítajících a současně platných (validních) webových stránek. V každé kapitole autor srovnává běžné metody webového designu s nejnovějšími metodami založenými na respek-tování webových standardů.

Kniha by vás měla vybavit znalostmi, které jsou potřebné k tomu, abyste mohli používat řešení založená na webových standardech ve svých vlastních projektech. S její pomocí budete schopni činit lepší volby v rámci kódu a stylu.

Z obsahu ve stručnosti vybíráme:

- Práce se seznamy

- Tvorba nadpisů a citací

- Praktické využití tabulek

- Webové formuláře

- Prvky <strong> <em> a další

- Odkazy v HTML

- Minimalizace velikosti kódu

- Použití kaskádových stylů

- Styly pro tisk

- Tvorba CSS layoutů

- Kaskádové styly pro text

- Překlápění obrázků a CSS

Zoner Press tel.: 532 190 883 fax: 543 257 245e-mail: [email protected]://www.zonerpress.cz

ZONER software, s.r.o., Koželužská 7, 602 00 Brno

E N C Y K L O P E D I E W E B D E S I G N E R A

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje web-designér při každodenní práci. Na slevy, které můžete získat, a vy-davatelský plán, v němž vedle knih domácích odborníků najdete celou řadu titulů světově uznávaných autorů, se informujte na ad-rese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PRÉMIOVÝ PLUSPLUS PROGRAM PROGRAM.

ZONER software, s.r.o. významný producent software v oblasti digitální fotografie,

počítačové grafiky a multimédií, poskytovatel internetových

služeb, souvisejících s prezentací na internetu a e-komercí,

a nakladatelství odborné literatury.

www.zoner.cz

© F

oto:

Jiří

Hel

ler,

ww

w.h

elle

r.cz

Foto

grafi

e z

nabí

dky

foto

bank

y H

ELLE

R.CZ

9 7 8 8 0 8 6 8 1 5 1 5 2

ISBN 80-86815-15-3KATALOGOVÉ ČÍSLO: ZR416

E N C Y K L O P E D I E W E B D E S I G N E R A

web_standards.indd 1web_standards.indd 1 17.12.2004 16:53:4717.12.2004 16:53:47

Webdesigns webovými

STANDARDY

webove standardy v praxi.indb 1 30.9.2004 12:11:35

WEBDESIGN

Dan Cederholm

s webovými

STANDARDY


Original English language edition entitled WEB STANDARDS SOLUTIONS: THE MARKUP AND STYLE HANDBOOK, 1st edition, June 2004, 1-59059-381-2, by Cederholm, Dan; published by Apress L.P., 2560 Ninth Street, Suite 219, Berkley, CA 9 47 10, USA. Copyright © 2004 by Apress L.P. Czech language edition Copyright © 2004 ZONER software s.r.o.

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. CZECH language edition published by ZONER software s.r.o. Copyright © 2004

Autorizovaný překlad anglického vydání nazvaného WEB STANDARDS SOLUTIONS: THE MARKUP AND STYLE HANDBOOK, první vydání, červen 2004, 1-59059-381-2, autor Cederholm, Dan; vydal Apress L.P., 2560 Ninth Street, Suite 219, Berkley, CA 9 47 10, USA. Copyright © 2004 by Apress L.P. České vydání Copyright © 2004 ZONER software s.r.o.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována, ukládána na záložních systémech nebo předávána žádnou formou nebo způsobem bez přechozího písemného svolení vydavatele s výjimkou stručných citací zařazených v recenzích nebo posudcích. České vydání vydal ZONER software s.r.o. Copyright © 2004.

Webdesign s webovými standardyAutor: Dan Cederholm

Copyright © ZONER software s.r.o. Vydání první v září 2004. Všechna práva vyhrazena.

KATALOGOVÉ ČÍSLO: ZR416

Zoner PressZONER software s.r.o.Koželužská 7 602 00 Brno

Překlad: Jaroslav Blaž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-15-3


5

Přehled

část I Plné využití možností značkovacího jazyka 21 KAPITOLA 1 Práce se seznamy . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

KAPITOLA 2 Tvorba nadpisů . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

KAPITOLA 3 Jsou tabulky nástrojem ďábla? . . . . . . . . . . . . . . . . . . . . . 49

KAPITOLA 4 Citace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

KAPITOLA 5 Webové formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . 79

KAPITOLA 6 Prvky <strong> <em> a další . . . . . . . . . . . . . . . . . . . . . . 97

KAPITOLA 7 Odkazy v HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

KAPITOLA 8 Další typy seznamů . . . . . . . . . . . . . . . . . . . . . . . . . . 123

KAPITOLA 9 Minimalizace velikosti kódu . . . . . . . . . . . . . . . . . . . . . . 135

část II Styly jednoduše a efektivně 149 KAPITOLA 10 Použití kaskádových stylů . . . . . . . . . . . . . . . . . . . . . . . 151

KAPITOLA 11 Styly pro tisk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

KAPITOLA 12 Tvorba CSS layoutů . . . . . . . . . . . . . . . . . . . . . . . . . . 175

KAPITOLA 13 Kaskádové styly pro text . . . . . . . . . . . . . . . . . . . . . . . . 199

KAPITOLA 14 Nahrazování obrázkem . . . . . . . . . . . . . . . . . . . . . . . . 211

KAPITOLA 15 Styl pro prvek <body> . . . . . . . . . . . . . . . . . . . . . . . . . 229

KAPITOLA 16 Vaše další kroky . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Rejstřík . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243


7

ObsahPředmluva 14O autorovi 15O technickém recenzentovi 15Poděkování 16

Úvod 17Co to jsou webové standardy? 17Proč webové standardy? 17Proč XHTML? 18Strukturovaný kód 19Počátky knihy 19Uspořádání knihy 20

Sdělte nám svůj názor 20

část I Plné využití možností značkovacího jazyka 21 KAPITOLA 1 Práce se seznamy . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Jdeme nakupovat 23Čas na kvíz 24

Metoda A: Zlom pomocí značky <br /> 24Metoda B: Odrážka 25Metoda C: Přiblížení 26Metoda D: Dobře zabalený dáreček 27

Shrnutí 28Něco navíc 29

Odrážky a zase odrážky 29Vlastní odrážky jsou nápaditější 30Využití seznamů pro navigaci 31Upravené navigační záložky 34

KAPITOLA 2 Tvorba nadpisů . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Jaký je nejlepší způsob vytvářenínadpisu dokumentu? 37

Metoda A: Smysluplná? 37Metoda B: Kombinace <p> a <b> 38Metoda C: Styl a podstata 39


Jednoduché formátování nadpisu 42Přidání pozadí 43


Webdesign s webovými standardy8

Vyměnitelné ikony 45Snadné úpravy 45Efekt chameleona 46

Slovo závěrem 48

KAPITOLA 3 Jsou tabulky nástrojem ďábla? . . . . . . . . . . . . . . . . . . . . . 49Dokonale tabulkové 49Tabulka, kterou by mohli tolerovat všichni 50Přidání souhrnu 52Hlavička(y) tabulky 53Vztah hlavičky a samotných dat 54Použití atributu abbr 56Prvky <thead> <tfoot> a <tbody> 57Jsou tabulky nástrojem ďábla? 59Něco navíc 59

Vytvoření mřížky 59Pryč s trhlinami 60Uživatelské přizpůsobení hlaviček 62Hlavičky s obrázkem v pozadí 63Přidělení ikon prvkům ID 65

Slovo na závěr 68

KAPITOLA 4 Citace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Metoda A: Postrádá význam 69Metoda B: Co atribut class? 70Metoda C: Nejlepší je <blockquote> 70

Šroubovák na zatlučení hřebíku 71Shrnutí 71Něco navíc 72

Citát pro zvědavé oči 72Citáty uvnitř kódu 72Styl pro prvek <blockquote> 73

Pár slov na závěr 78

KAPITOLA 5 Webové formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . 79Jaké máme možnosti při vytváření formuláře? 79

Metoda A: Použití tabulky 79Metoda B: Bez tabulky, ale úzké 80Metoda C: Jednoduchá a přístupnější 81Metoda D: Definování formuláře 84

Shrnutí 86


9

Něco navíc 87Báječný tabindex 87Atribut accesskey pro navštěvované formuláře 88Styly pro formuláře 89

Několik slov na závěr 96

KAPITOLA 6 Prvky <strong>, <em> a další . . . . . . . . . . . . . . . . . . . . . 97Přístup prezentační vs. přístup strukturní 97

Proč je <strong> a <em> lepší než <b> a <i>? 98A co <em>? 99Pouze tučné nebo kurzívu prosím 99Tučné písmo i kurzíva 101


Prvky fráze 103Design s prvkem <cite> 103Prvky <abbr> a <acronym> 105Prvek <code> 107Prvek <samp> 108Prvek <var> 108Prvek <kbd> 109

Slova na závěr 109

KAPITOLA 7 Odkazy v HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Odkaz na konkrétní část stránky 111

Metoda A: Prázdné name 111Metoda B: Vše je ve name 112Metoda C: Zbavte se name 113Metoda D: Vše v jednom 114Sdílení jmen 115


Atribut title 116Stylizování odkazů 117

Zvedáme kotvy 121

KAPITOLA 8 Další typy seznamů . . . . . . . . . . . . . . . . . . . . . . . . . . 123Nejlepší způsob zápisu očíslovaného seznamu položek 123

Metoda A: Neuspořádaný pořádek 124Metoda B: Setříděný seznam 125

Nejlepší způsob vytváření množinytermínů a popisků 127Metoda A 127

Obsah



Metoda B 128Shrnutí 130Něco navíc 130

Označit jednotlivé části 131Uživatelská čísla 131Přidání čísel k CSS 132Výsledky 133

Slovo závěrem 134

KAPITOLA 9 Minimalizace velikosti kódu . . . . . . . . . . . . . . . . . . . . . . 135Mimimalizace kódu stránek vytvářených pomocí webových standardů 135

Potomci selektorů 136Metoda A: class – práce všeho druhu 136Metoda B: Přirozený výběr 137Nepotřebný <div> 140Metoda A: Šikovný <div> 140Metoda B: Zbavme se <div> 140Příklady navíc 141


Základní kód 142Přidání stylu 143Uživatelské odrážky 144Přidání okraje 145

Závěr 147

část II Styly jednodušea efektivně 149 KAPITOLA 10 Použití kaskádových stylů . . . . . . . . . . . . . . . . . . . . . . . 151

Jak se na dokument aplikuje CSS 151Metoda A: Prvek <style> 151Metoda B: Externí seznamy stylů 153Metoda C: @import 153Sloučení metod B a C za účelem vytvoření vícenásobných seznamů stylů 156Styly lo-fi a hi-fi 157Osvojte si kaskády 157Metoda D: Styly uvnitř kódu 159


Alternativní styly 161Závěr 164


11

KAPITOLA 11 Styly pro tisk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Jak specifikovat styly pro tisk? 165

Typy médií 166Dva způsoby zacílení 166Metoda A: Atribut media 166Metoda B: @media nebo @import 167Povoleno více hodnot 167Oddělení stylu screen od stylu print 168Vytvoření tiskového stylu 169

Shrnutí 173

KAPITOLA 12 Tvorba CSS layoutů . . . . . . . . . . . . . . . . . . . . . . . . . . 175Jak mohu využít CSS k vytvoření dvousloupcového rozvržení? 175

Metoda A: "Plovoucí" postranní lišta 176Metoda B: Dvojité plovoucí sloupce 181Metoda C: Plovoucí hlavní obsah 182Metoda D: Určení polohy 185


Problém s obdélníkovým modelem 192Falešné sloupce 196

Balíme to 198

KAPITOLA 13 Kaskádové styly pro text . . . . . . . . . . . . . . . . . . . . . . . . 199Jak vylepšit hypertextové odkazy? 199

Časy se mění 200Změna výšky řádku 200Všechno v rodině 201Prostrkání (nebo též proložení) znaků 202Iniciálky 204Zarovnání 205Transformace textu 207Malé verzálky – kapitálky 208Odsazení odstavce 209

Shrnutí 210

KAPITOLA 14 Nahrazování obrázkem . . . . . . . . . . . . . . . . . . . . . . . . 211Jak lze využít CSS k nahrazení textu obrázky 211

Žádné dokonalé řešení neexistuje 211Používat s obezřelostí 212

Metoda A: Náhrada obrázku podle Fahrnera 212Kód 212

Obsah



Značka navíc 213CSS vstupuje do hry 213Přiřadit pozadí 213Výhody 214Nevýhody 214Zvažte pro a proti 215

Metoda B: Nahrazení obrázkem – metoda Leahy/Langridge 215Kód a CSS 215Trápení s obdélníkovým modelem (Box model) 216Nevýhody 216

Metoda C: Pharkova metoda 217Kód a CSS 217Pořád tomu něco chybí 217


Prohození loga 219Příklad 219Dvě loga 220CSS 220Jak realizovat odkaz 221Výsledky 221

Přístupné rollovery s obrázkem na záložkách 222Problém 222Řešení 223Kód: všechny je budeme spravovat pomocí jednoho seznamu 223Jeden obrázek tři stavy 224CSS: A tady začíná magie 224Výsledky 226Proč to použít? 226Počkat, text není v měřítku! 226Kompatibilita 227

Celkové shrnutí 227

KAPITOLA 15 Styl pro prvek <body> . . . . . . . . . . . . . . . . . . . . . . . . . 229Dva, někdy tři sloupce 229

Struktura kódu a stylu 230Náš <body> má třídu 232Nejde jen o sloupečky 233

"Jste zde" 234Navigační seznamy 234Určení částí 235


13

Magické CSS 235Shrnutí 236

KAPITOLA 16 Vaše další kroky . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Kam budou směřovat vaše další kroky? 237

Organizace a publikace 237Vlivné a inspirativní weblogy 239Knihy 241

Rejstřík . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Obsah



PředmluvaVe svých rukách držíte kuchařku webových standardů. Jasnými příklady a bez zbytečných slov navíc v ní designér Dan Cederholm ukazuje, jak využít standardy k vytvoření krásných a použitelných rozhra-ní přístupných všem. Dan tu není proto, aby nějak kreativně nebo obchodně propagoval na standardech založený webový design. To už udělali jiní. Upřímně řečeno, pokud jste se obtěžovali vybrat si tuto kni-hu a prolistovat ji, už pravděpodobně znáte výhody, které design založený na standardech skýtá z hle-diska přístupnosti, dlouhověkosti a obchodu. Nepotřebujete další přehled, ani povzbuzení – potřebujete praktický pohled na komponenty s příklady z reálného světa. Právě to tato kniha obsahuje.

Realistickým přirozeným jazykem – stejným, jaký naleznete na velkém počtu webových stránek – zkou-má Dan univerzální prvky webových serverů jako je rozdělení stránek a navigace. Za použití učební metody, kterou již dříve používal na stránkách SimpleBits.com ukazuje, jak webové standardy usnadňují vytváření různých úprav (když vás šéf nebo klient požádá o změnu na poslední chvíli), a co je nejdůleži-tější – snadnější použití těchto univerzálních komponent ve stránkách. Zde je jeden jednoduchý příklad toho, jak tato kniha funguje a proč stojí za váš čas a peníze:

Webový server, který navrhujete, vyžaduje na svých primárních stránkách třísloupcový layout a dvou-sloupcový layout na stránkách s vnitřním obsahem. Přístup ze staré školy by byl sestavit dvě hlavní šablony v podobě dvou vzájemně nesouvisejících formátovacích tabulek v HTML. Moderní přístup do-poručený Konsorciem World Wide Web (World Wide Web Consortium, W3C) a praktikovaný dnešní-mi designéry řídícími se standardy, je strukturovat obsah s minimálním sémantickým kódem XHTML a pro samotný layoutu použít kaskádové styly (Cascading Style Sheets, CSS).

Jako zkušený webový designér můžete přirozeně předpokládat, že budete muset zhotovit dvě rozdílné šablony XHTML a dva různé seznamy stylů, abyste mohli vyprodukovat dvou a třísloupcový design, ale jak ukazuje tato kniha, k vytvoření obou designů postačí jediná struktura v XHTML a jediný seznam stylů. Přepnutí z jednoho rozložení do druhého pak není složitější než použití atributu class na značku <body>.

Tato knížečka je naplněna podobnými postupy a metodami, které jsem právě uvedl – metodami, které zvýší vaši výkonnost a zjednoduší vaši práci a současně povzbudí vaši tvořivost. Některé z nich vymyslel Dan, jiné pocházejí z líhnoucího se tělesa moderních praktik vyvinutých předvojem webových desig-nérů tvořících na základě standardů. Znalosti zde obsažené rozhodně potřebujete. To, jak je nejlépe ovládnout, je už jenom ve vašich rukách. Bavte se.

Jeffrey Zeldman


15

O autorovi

Dan Cederholm je oceňovaný webový designér konzultant a autor, který se specializuje na navrhování a vytváření stránek za použití webových standardů.

Během roku 2003 se Dan proslavil svými designy webových stránek Fast Company and Inc., pro které použil metody vyho-vující standardům a revolučních technik CSS.

Dan také spravuje populární weblog SimpleBits, do kterého přispívá svými články a komentářemi ohledně webových tech-nologií a života vůbec. Jeho poradenská firma téhož jména se zaměřuje na uplatňování metod uvedených v této knize při vy-tváření simplistických a atraktivních rozhraní.

Na konferencích jako je třeba SXSW Interactive (Austin Texas USA) se Dan dělí o svůj jednoduchý pří-stup k webovému designu a vývoji. Přitom propaguje kód založený na standardech a techniky stylizace, které sám shromáždil.

Bydlí ve městě Salem (Massachusetts, USA) spolu se svou ženou Kerry, dvěma kočkami a jedním geko-nem.

O technickém recenzentovi

Drew McLellan je vývojář webových aplikací a autor. Bydlí na západ od Londýna. Svoje dny tráví v čele úspěšné kreativní agentury zabý-vající se vývojem webu a v noci píše a rediguje technické knihy. Ná-měty jeho práce se zabývá osobní webový server (www.allinthehe-www.allinthehe-

ad.com)ad.com). Drew je autor knihy Dreamweaver MX Web Development (New Riders Publishing). Publikuje technické články na stránkách jako např. A List Apart (www.alistapart.comwww.alistapart.com) a Macromedia (www.macromedia.comwww.macromedia.com). Je členem uskupení Web Standards Project (www.webstandards.orgwww.webstandards.org), pro které zajišťuje aktivity v oblasti pub-lic relations a různé další služby.

Až vyroste, chtěl by být kosmonautem.



PoděkováníJsem velice vděčný následujícím lidem, bez kterých bych knihu nenapsal:

Chris Mills – od začátku mi pomáhal, vedl mne přes všechna úskalí a zajistil, že se nakonec celá kniha dala dohromady.

Drew McLellan – dával mi pěkné a dobré rady vedení a velmi mi pomohl i prakticky.

Všichni od Apress/friends of ED, kteří na knize tvrdě pracovali, obzvláště Sofia Marchant, Ami Knox a Ellie Fountain.

Jeffrey Zeldman – bez něj bych se k psaní knihy vůbec neodhodlal a jemu dluží webové standardy více než komukoliv jinému.

Douglas Bowman – za to, že projevil bezvadnou inspiraci pro design a dokázal, že layout vytvořený pomocí CSS je schopný skvělého fungování i na rozsáhlých komerčních stránkách.

Dave Shea – za osazení zahrady a dokázání, že design založený na CSS je schopen víceméně všeho, co po něm žádáme.

Jason Kottke – za inspirující otázky.

Čtenáři SimpleBits – za cennou diskusi, která podpořila napsání této knihy.

Eric Meyer, Christopher Schmitt, Tantek Çelik, Molly Holzschlag, Todd Dominey, Mike Davidson, Ryan Carver, Dan Rubin, D. Keith Robinson, Mark Pilgrim, Joe Clark, Craig Saila, Nick Finck, Owen Briggs, Simon Willison, Ian Lloyd, Dan Benjamin – to jsou všechno lidé, jejichž online a "offline" snahy v oblasti webových standardů pomohly tisícům lidí, včetně mě.

Členové skupiny Web Standards Project – jejich vzdělávání je neustále přínosem pro webové designery a vývojáře z celého světa.

Moji bývalí kolegové z webového týmu při Fast Company and Inc. – obzvláště Rob Roesler, který mi poskytl velikou podporu; David Searson, od kterého jsem se naučil více, než si kdy dokáže sám před-stavit; Bob Joyal – totéž; Paul Maiorana – že se smířil s mojí cestovatelskou mánií; Daigo Fujiwara; Paul Cabana; Nick Colletta; Heath Row; Irina Lodkin; Carole Matthews; Becca Rees; Alex Ashton; Peter Wilkinson; a také Linda Tischler, která mne přivedla do FC.

Moje rodina a přátelé a ze všeho nejvíce – moje žena Kerry, pro její neúnavnou podporu, ať už se dělo cokoliv.

A děkuji také tobě – čtenáři této knihy.


17

ÚvodTato kniha je určena k tomu, aby vás vybavila takovými prostředky, které jsou potřebné k to-mu, abyste mohli ve svých webových projektech použít vlastní řešení na základě webových stan-dardů a získali schopnost učinit lepší rozhodnutí v rámci kódu a stylu. V každé kapitole bude-me srovnávat běžné postupy webového designu a pokusíme se zodpovědět na otázku, proč je jeden způsob lepší než jiný. Prozkoumáním těchto srovnání budeme schopni použít pro úlohy – v rámci našich projektů – ty nejlepší nástroje. Ze všeho nejdříve se ale musíme ujistit, že si rozumíme – tato kniha je naplněna různými akronymy, bloky kódu a koncepty, které jsou možná pro někoho cizí. Nejdříve si ale popovídejme o webových standardech.

Co to jsou webové standardy?Citujme World Wide Web Consortium (www.w3.org/Consortium/www.w3.org/Consortium/):

"Konsorcium World Wide Web bylo vytvořeno v říjnu 1994 za účelem plného využití potenciálu World Wide Web pomocí vývoje společných protokolů, které prosazují jeho rozvoj a zajišťují jeho univerzálnost. W3C je organizace s okolo 400 členy na celém světě a pro své příspěvky k růstu Webu si získala meziná-rodní věhlas."

W3C, které založil Tim Berners-Lee, je zodpovědné za webové standardy, které tvoří dnešní Web. V kni-ze se budeme zabývat primárně dvěma ze standardů: XHTML (eXtensible HyperText Markup Langua-ge), který představuje sématickou verzi HTML 4.01 společně se syntaxí XML; a CSS (Kaskádové styly; Cascading Style Sheets), které jsou používány ke stylizaci webových stránek.

Proč webové standardy?Včera jsem si koupil žaluzie. Změřil jsem okno, šel jsem do obchodu, vytáhl jsem 60cm žaluzie z po-lice a přinesl jsem je domů. Pasují dokonale. Minulý rok jsme si s manželkou koupili novou myčku na nádobí. Vyhodili jsme starou a objednali novou. Když nový model, přišel dokonale pasoval na místo starého. Tím se snažím říci pouze toto – vylepšování domácnosti je snazší, existují-li standardy. Někdo jako já pak může klidně vkráčet do obchodu a koupit nějakou nádrž do drtiče odpadků, přičemž nádrž bude mít s velikou pravděpodobností rozměry, které budou pasovat. Také mohu zakoupit novou kliku ke dveřím a v devíti případech z deseti se bude ke dveřím hodit bez větších úprav.

Dopředu dané standardní míry usnadňují život lidem, kteří budují a spravují domy. Když nový majitel potřebuje modernizovat nebo spravovat svůj dům, existující standardy mu opravu nebo vylepšení velmi usnadní.

Ne vždy tomu tak ovšem bylo. Ne všechny domy postavené před dvacátým stoletím spojovaly nějaké standardy. To ovšem neznamená, že domy postavené bez standardů by byly špatnými domy. Pouze to znamená, že aktualizace, oprava nebo údržba těchto domů vyžaduje nějakou práci navíc.

Lidé si často kupují staré domy a renovují je. Jakmile dokončí tvrdou dřinu s renovací domu, může vlast-ník využít všech výhod standardních velikostí a rozměrů a údržba domu je tak něj snazší.



Tato kniha ale není o domech. Předcházející analogii ale lze velmi snadno aplikovat na Web – použitím standardů na našich webových stránkách značně usnadníme jejich údržbu. Naši kolegové weboví desig-néři a vývojáři se v nich budou moci mnohem lépe orientovat a chápat jak, jsou stránky strukturovány a stylizovány.

Historicky se designéři a vývojáři spoléhali na nafouklý kód, aby docílili designů, které dosud zaplavují dnešní Web. Vnořené tabulky do hloubky tří úrovní a více, použití průhledných obrázků formátu GIF pro vytvoření na pixel přesných layoutů atd. – to vše bylo po léta normou, nicméně, se zvýšením pod-pory standardů v oblíbených prohlížečích dosáhla schopnost kombinovat hubený strukturovaný kód a CSS takové úrovně, že být v souladu se standardy už není synonymem nudného designu.

Trend se mění a ti, kdo si uvědomili výhody webových standardů, získají před ostatními z branže webového designu a vývoje velký náskok. K tomu zcela jistě dojde.

Pochopením a používáním standardů získáte přístup k následujícím výhodám:

• Redukce rozsahu kódu – Méně kódu znamená rychlejší stránky. Méně kódu také znamená více kapacity na serveru, což zase znamená méně peněz vynaložených na místo na serveru a na šířku přenosového pásma.

• Větší oddělení obsahu od vzhledu – Použitím CSS ke kontrole designu webového serveru se usnadní aktualizace a případné změny designu. Změny v rozsahu celých webových serverů lze učinit okamžitě – pouhou aktualizací jediného seznamu stylů.

• Vylepšená přístupnost – Webové standardy nám umožňují dosáhnout zobrazení na největším možném počtu prohlížečů a zařízení. Obsah lze snadno přečíst v jakémkoliv prohlížeči, mobil-ním telefonu, PDA nebo pomocí jakéhokoliv pomocného softwaru.

• Dopředná kompatibilita – Vytvářením stránek za pomoci webových standardů zabezpečujete jejich čitelnost v budoucnosti. Každá z předcházejících výhod je dostatečným důvodem pro použití webových standardů a tato kniha ukáže, jak otřást vašimi zlozvyky. Najdete v ní také tipy a triky pro vytvoření atraktivních designů založených na standardech.

Proč XHTML?Ukázky kódu v této knize jsou vytvořeny v XHTML (eXtensible HyperText Markup Language). Tech-nicky vzato, XHTML je přeformulované HTML 4 v XML. Co to znamená? No, HTML snad znáte, ne? Tak XHTML je prakticky totéž, jenom s několika pravidly navíc.

Citujme ještě jednou W3C (www.w3.org/TR/xhtml1/#xhtmlwww.w3.org/TR/xhtml1/#xhtml):

"Rodina XHTML je dalším krokem ve vývoji Internetu. Přestoupením na XHTML ještě dnes spokojení vývojáři vstoupí do světa XML spolu se všemi jeho průvodními přínosy. Přitom si mohou zůstat jisti jak zpětnou, tak i dopřednou kompatibilitou svých obsahů."

To je dobrá startovní pozice – dopředná kompatibilita. Když dnes vytvoříme webové stránky pomocí XHTML, činíme kroky k zajištění kompatibility těchto stránek s prohlížeči a ostatními zařízeními bu-doucnosti.


19

XHTML je také navrženo tak, aby bylo čitelné tím největším počtem prohlížečů zařízení a softwaru. Kód napsaný v XHTML má lepší šance na to, že bude pochopen, ať už jej bude číst cokoliv.

Pravidla ale existují.

Ve světě XHTML existují pro to, co je považováno za platný kód, mnohem přísnější pravidla. Všechny značky a atributy musí být psány malými písmeny, všechny atributy musí být uzavřeny uvozovkami a všechny značky musí být nakonec uzavřeny. To je několik pravidel zděděných z XML – tato pravidla jsou pro vás dobrá.

Lpění na přísnějších pravidlech, které určují správné a platné XHTML, vede k tomu, že designéři a vý-vojáři mohou snadněji ladit kód (což je obzvláště užitečné v případě, kdy více autorů pracuje na jednom kódu), přičemž jejich stránky budou mít lepší šanci zobrazit se správně v prohlížečích, které také rozu-mějí standardům. V této knize budeme pro všechny naše příklady používat XHTML.

Strukturovaný kódV knize budu možná často používat slovo "sémantický". Občas budu také používat i termín "strukturo-vaný kód". Tyto dva termíny jsou navzájem zaměnitelné. Když mluvím o sémantice, chci tím říci, že usi-lujeme o použití pouze takových značek, které implikují nějaký význam, nikoliv instrukce pro vzhled. Zpracováváte seznam položek? Pak jej také jako seznam položek do kódu zapište. Nebo snad chcete uvést tabulku dat? Strukturujte ji podle toho. Strukturováním webových stránek sémantickým kódem se blížíme k oddělení obsahu od vzhledu. A díky tomu budou mít naše stránky větší naději, že budou správně (tj. tak, jak bylo zamýšleno) pochopeny větší škálou prohlížečů a zařízení.

Jak jsem již zmínil, v historii se weboví designéři spoléhali na vnořené tabulky s výplňovou grafikou, aby dosáhli layoutu sedícího na pixel přesně. Prvek <table><table> byl použit k umístění každé komponenty webové stránky, přičemž přidával obludné množství nepotřebného kódu. A to všechno vedlo k vytvoře-ní stránek, které jsou prakticky nečitelné pro všechny, kteří používají textové prohlížeče, zařízení s ma-lou obrazovkou nebo nějaký podpůrný software. Nafouklý kód doslova dusil (a stále dusí) celý Web.

Ve všech kapitolách této knihy vysvětlím, jak pomáhá sémantický kód v zeštíhlování stránek, které se současně stávají přístupnější, a které lze snadno stylizovat pomocí CSS.

Počátky knihyNa začátku bylo vše docela nevinné. Uvažoval jsem o tom, že na své osobní stránky umístím jednodu-chý kvíz. Měl obsahovat otázky s mnoha volbami, přičemž každá z odpovědí by vedla ke stejnému nebo podobnému výsledku. Proč je jedna metoda lepší než druhá? Taková měla být skutečná odpověď na otázky kvízu.

Cílem kvízu bylo ukázat výhody a nevýhody každé metody. Také bylo konstatováno, že ani jednu z více metod, které jsou tvořeny platným kódem, nelze vždy označit za nejlepší řešení. Čtenáři mohli přidat svůj komentář a sdělit svůj názor na věc. Skrze tuto diskusi jsem pak objevil ty prostředky, o kterých jsem hovořil dříve. Pokud můžeme pochopit, proč je důležité použít hlavičky stránky a správné sezna-my, pak nám nic nebrání v tom, abychom tyto informace použili v našich každodenních projektech.

Úvod



Také je důležité uvést, že se nesnažím nařizovat nějaké zvláštní způsoby zápisu kódu u vybraných prvků stránky – jako u všeho ostatního ve webovém designu, i zde existuje mnoho různých způsobů, kterými lze dosáhnout stejných výsledků. Použijte to, co je pro danou úlohu tím nejlepším řešením – nicméně, pochopením různých předností a nevýhod několika různých metod budete moci si vybrat lépe, až při-jde ten správný čas.

Uspořádání knihyKniha se skládá ze dvou částí. První se zabývá náměty vztahujícími se ke kódu, druhá pokrývá CSS. Kaž-dá kapitola zodpovídá specifickou otázku a často uvádí více metod vedoucích k dosažení stejných vý-sledků. Na každou metodu se podíváme blíže a upozorníme na její silná a slabá místa. Na konci mnoha kapitol se také nachází část pojmenovaný jako "Něco navíc", která se zavrtává hlouběji do pokročilého kódu a námětů CSS, které mají k dané kapitole nějaký vztah.

Doufám že si čtení knihy užijete. Pusťme se do toho.

Sdělte nám svůj názorJako č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 bych vědět, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat naše další knihy a také bychom chtěli znát vaše podnětné myšlenky, o které jste ochotni se s námi podělit.

Jako odborný redaktor Zoner Press vítám vaše názory. Můžete mi psát – 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, nezapomeňte prosím připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, fax nebo e-mail. 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ěď na každou zprávu – v tomto směru doporučuji využít adresu interval.czinterval.cz.

E-mail: [email protected]@zoner.com

Adresa: Zoner Press

ZONER software s.r.o Miroslav Kučera Koželužská 7 602 00 Brno


1

Seznamy. Najdete je prakticky na každé webové stránce. Seznamy hyperlinků, seznamy zboží v ná-kupním košíku, seznamy oblíbených filmů nebo dokonce seznamy určené k navigaci pro dané webové stránky. Zatímco někomu se to může zdát nepodstatné, v této kapitole budeme mluvit o způsobu kó-dování takových seznamů. Objevíme při tom výhody (a nevýhody) několika běžných metod. Později si nabyté znalosti ověříme v praxi při stylizování několika příkladů běžných seznamů.

Jdeme nakupovatPůvodně jsem zamýšlel použít jako úvodní příklad nějaký dlouhý seznam. Pak jsem si ale uvědomil, že nemám vůbec představu o tom, jaké položky by měl takový seznam zahrnovat, a tak jsem zvolil jedno-duchý seznam zboží k nakoupení…

Dejme tomu, že na svých webových stránkách chcete uveřejnit seznam, jaký si děláte, když jdete na-kupovat. Ponechme stranou, proč by se měl takový seznam vyskytovat na webových stránkách. Pouze potřebujeme jakýkoliv důvod, abychom mohli začít uvažovat o seznamech.

Řekněme, že bychom chtěli, aby měl seznam na stránce podobu vertikální posloupnosti položek, z nichž každá by měla pro sebe jeden řádek.

Apples

Spaghetti

Green Beans

Milk

Práce se seznamy



To je zdánlivě jednoduchá úloha. Existuje ale – a to platí pro všechny aspekty designu a vývoje webových stránek – více možností, jak dosáhnout téhož (nebo podobného) výsledku. Zde budu, jako i ve všech ostatních příkladech uvedených v této knize, prezentovat problém z hlediska XHTML (eXtensible Hy-perText Markup Language). Zvolené metody budou používat platné kódování a budou splňovány stan-dardy vycházející ze směrnic W3C (World Wide Web Consortium www.w3.org/www.w3.org/).

Nyní můžeme buďto jednoduše přidat za každou položkou značku <br /> <br /> nebo vytvořit prvky sezna-mu. Podívejme se na tři různé možnosti a důsledky využití každé jednotlivé z nich.

Čas na kvízJaká z následujících metod je pro vytvoření seznamu na nákup nejvhodnější?

Metoda A: Zlom pomocí značky <br />Apples<br />Apples<br />

Spaghetti<br />Spaghetti<br />

Green Beans<br />Green Beans<br />

Milk<br />Milk<br />

Metoda A byla jistě po léta hojně používaná, možná dokonce na milionech webových stránek. Ve sku-tečnosti si jsem jist, že každý jsme se – alespoň jednou – prohřešili tím, že jsme tento přístup aplikovali. Nemám pravdu? Chceme, aby byla každá položka seznamu na další řádce, což zajistíme vložením znač-ky zalomení (zde právoplatnou uzavírací verzí XHTML, tj. <br /><br />), která za každou položkou zalomí řádek. A vypadá to, že to funguje.

Co kdybychom ale chtěli nákupní seznam stylizovat jinak, než ostatní prvky stránky? Co kdybychom např. chtěli, aby se v seznamu objevily červené čáry místo standardních modrých, nebo aby se velikost textu lišila od textu ve zbytku stránky? To zde nemůžeme. Nemáme na výběr jiné styly písma, než jaké jsou nastavené pro celý dokument (pokud vůbec nějaké přednastavené styly v našem dokumentu exis-tují). A protože u seznamu není žádný okolní prvek, nemůžeme mu přiřadit žádná specifická CSS pra-vidla.

Zalamování řádků

Řekněme také, že jsme do seznamu přidali zvlášť dlouhou položku, např.: "Five Foot Loaf of Antho-ny’s Italian Bread". V závislosti na umístění seznamu na stránce, může – v případě nedostatku místa v horizontálním rozměru nebo pokud nestačí šířka okna prohlížeče – vzniknout nebezpečí zalomení dlouhých položek na další řádku.

Také by bylo pěkné vzít v úvahu možnost uživatelů s oslabeným zrakem, kteří zvětšují velikost písma. Když uživatel zvětší velikost písma, tak se položky, které by se ještě akorát vešly do úzkých sloupců jako na obrázku 1-1, zalomí tak, jak jsme to nepředvídali (viz obrázek 1-2) a zmaří veškerý design.


Kapitola 1 – Práce se seznamy 25

Obrázek 1-1. Příklad s výchozí velikostí textu

Obrázek 1-2. Tentýž příklad se zvětšeným písmem

Vím, že mám koupit chleba, ale znázorněné uspořádání (obrázek 1-2) je trošku matoucí.

Podobné dilema se zalomením na nás vybafne v případě, že si prohlížíme dlouhé řádky na malých obra-zovkách zařízení typu mobilní telefon nebo PDA (Personal Digital Assistant, osobní digitální asistent). Zásadový technofil se může do supermarketu vydat s Palm Pilotem v ruce místo s tradičním kouskem papíru vytrženým ze zápisníku; ovšem, až bude hledat "Anthony’s Italian", může se velice zapotit.

Na tomto příkladě se snažím ukázat, že použití Metody A nepočítá s přizpůsobivostí, jaké mohou webo-vé stránky nabývat v závislosti na proměnných, které jsou mimo oblast působnosti návrháře stránky.

Metoda B: Odrážka<li>Apples<br /><li>Apples<br />

<li>Spaghetti<br /><li>Spaghetti<br />

<li>Green Beans<br /><li>Green Beans<br />

<li>Milk<br /><li>Milk<br />

Všude tam, kde je použit prvek <li><li>, vloží nejkompetentnější prohlížeče vlevo od položky seznamu odrážku. Chceme-li vkládat na každý řádek s novou položkou značku odrážky, můžeme zvolit Metodu B, tj. vložení samotného <li><li>. Některé z těchto kompetentních prohlížečů nicméně nezobrazí odrážku, dokud nebude prvek <li><li> vnořen v jednom ze svých vlastních rodičů, třeba v mocném <ul><ul>. Druhým rodičem <li><li> je prvek <ol> značící "setříděné seznamy" (ordered lists), které proberu na jiném místě této knihy.

Odrážka do jisté míry řeší problém zalomení. Každá nová položka nákupního seznamu je předzname-nána odrážkou vlevo. V případě, že se část nějaké položky při zalomení přesune na další řádek, měla by



nepřítomnost odrážky postačovat k tomu, abychom ji odlišili od zcela nové položky. S Metodou B je ale v nepořádku ještě něco jiného (kromě výsledného zobrazení seznamu) – není totiž platná.

"Kontrola platnosti!"

Podle specifikace XHTML 1.0, v souladu s W3C, musí být všechny značky uzavřeny; kdybychom chtěli s každou položkou seznamu značku <li><li> otevřít a nechat ji neuzavřenou, jak jsme to předvedli v našem příkladu, velká hanba nám!

Napodobili jsme automatické zalamování řádků, které nastává, když se použije nesetříděný seznam při-dáním značky <br /><br /> na konec. Existuje ale podstatně lepší způsob.

Důsledné psaní platného kódu je velmi cenným přístupem. Po zajištění, že je náš kód platný, se budeme méně obávat eventuálního výskytu problémů zapříčiněných neuzavřenými nebo nesprávně vnořenými prvky. Nezapomínejme také, že pokud se na náš kód podívá někdo jiný, snadněji se v něm bude orien-tovat a přesně pochopí, co se kde odehrává.

Pro ověření platnosti vašich souborů (vložením URI nebo přímo souboru) použijte on-line ověřovací nástroj W3C na adrese http://validator.w3.org/http://validator.w3.org/. Později budete šťastni, že jste tak učinili.

Metoda C: Přiblížení<li>Apples</li><li>Apples</li>

<li>Spaghetti</li><li>Spaghetti</li>

<li>Green Beans</li><li>Green Beans</li>

<li>Milk</li><li>Milk</li>

Metoda C nás přivádí blíže lepšímu řešení, ale má jeden velký nedostatek v potenciálně zřejmém ohledu – stále to není platný kód.

Každou značku <li><li> jsme řádně uzavřeli a jelikož jde o prvky na úrovni bloku, jejich použití eliminuje potřebu značky <br /><br />, která dělá totéž – každou položku seznamu vloží na svůj vlastní řádek. Nicmé-ně, chybí nám vnější struktura – nějaký prvek, který by říkal, že tato skupina položek tvoří seznam.

Také je důležité na tento problém pohlížet ze sémantického úhlu pohledu, tj., že seznam je skupinou položek, které k sobě navzájem patří, a proto by tak měly být označeny. A dále, použitím správných značek pro seznam velice jasně prohlížeči, softwaru nebo zařízení řekneme, že: "Tato skupina položek je seznam!" To je dobrý příklad toho, že významem sémantického kódu je ustanovení vztahu mezi struk-turou a podstatou prvků.



Blokové uspořádání versus zápis uvnitř kóduPrvky HTML mohou být v zásadě uspořádány v blocích nebo v textu kódu. Blokové prvky začínají na vlastním řádku a jsou následovány zalomením řádku. Naproti tomu – prvky zapsané do těla kódu (tzn. inline prvky) jsou zobrazeny na stejném řádku jako ostatní prvky téhož typu. Blokové prvky mo-hou obsahovat jiné blokové prvky nebo prvky zapsané do textu kódu, zatímco prvky zapsané přímo do textu kódu nemohou obsahovat blokové prvky.

Příklady blokových prvků jsou <div><div> <h1><h1> až <h6><h6> <form><form>. Příkladem inline prvků jsou například prvky <span><span>, <strong><strong>, <em><em> a další.

Pokud bychom se na náš nákupní seznam měli podívat čistě očima XML, pravděpodobně bychom jej zapsali následovně:

<grocerylist><grocerylist>

<item>Apples</item><item>Apples</item>

<item>Spaghetti</item><item>Spaghetti</item>

<item>Green Beans</item><item>Green Beans</item>

<item>Milk</item><item>Milk</item>

</grocerylist></grocerylist>

Celý seznam má kontejnerový prvek <grocerylist><grocerylist> do kterého patří všechny položky seznamu. Ta-kovéto seskupování položek usnadní život aplikacím založeným na XML, které se mohou snažit extra-hovat položky ze seznamu.

Nějaký vývojář by mohl např. vytvořit seznam XSLT stylů, který převede seznam položek do formátu XHTML, do prostého textu nebo dokonce do dokumentu ve formátu PDF. Vzhledem k předpověditelné povaze skupiny položek seznamu nebude mít software s nalezením informací a s jejich zužitkováním žádné potíže.

I když se v této knize nezabývám přímo XML, jsou odpovídající zásady přeneseny do světa XHTML. Smysluplným strukturováním XHTML kódu totiž dokážeme podstatně zlepšit jeho flexibilitu.

Podívejme se nyní podrobně na Metodu D. Dobře vidíme, jak to všechno do sebe zapadá – uplatníme zde strukturu, kterou většina prohlížečů a zařízení bezproblémů přečte a která nám současně umožní stylizovat náš seznam několika různými způsoby.

Metoda D: Dobře zabalený dáreček<ul><ul>

<li>Apples</li><li>Apples</li>

<li>Spaghetti</li><li>Spaghetti</li>

<li>Green Beans</li><li>Green Beans</li>

<li>Milk</li><li>Milk</li>

</ul></ul>



Čím je metoda D tak zvláštní? Především je zcela platná. Řádný nesetříděný seznam obsahuje prvek <ul><ul>, který zahrnuje řadu položek uzavřených mezi počátečními a koncovými prvky <li><li>. Možná si myslíte, že se tu snažíme pouze ukázat, jak vyhovovat platnosti pouze pro platnost samotnou. Podívejme se na to v praxi.

Protože jsme správně vytvořili kód pro náš nákupní seznam, bude každá položka na zvláštním řádku (kvůli blokové povaze značek <li><li>). Většina vizuálních prohlížečů vedle každé položky zobrazí odráž-ku a odsadí případně zalomené řádky (viz obrázek 1-3).

Obrázek 1-3. Výchozí provedení nesetříděného seznamu

Uživatelé PDA, mobilních telefonů nebo jiných zařízení s malou obrazovkou budou uvidí tento seznam organizovaný podobným způsobem. Jelikož jsme dané zařízení upozornili na charakter dat (zde se jed-ná seznam), může se tak příslušné zařízení samo rozhodnout, jak tento seznam podle svých schopností zobrazit nejlépe.

Pokud se nějaký dlouhý řádek – v důsledku zvětšené velikosti písma nebo úzkého okna prohlížeče – za-lomí na více řádků, bude zalomený řádek zobrazen s takovým odsazením, aby byl zarovnán stejně jako text umístěný nad ním. Rozlišení jednotlivých položek bude tedy zcela přehledné, ať už bude stav pro-hlížeče jakýkoliv.

ShrnutíPoté, co jsem metody pečlivě rozebral, bude se hodit malý přehled s jejich výhodami a nevýhodami:

Metoda A:

• Opomíjí možnost specifického stylizování seznamu.

• V případě zalamování delších řádků v užších sloupcích nebo na malých obrazovkách může vést k matoucím výsledkům.

• Chybí jí sémantický smysl.

Metoda B:

• Přidání odrážky pomůže naznačit novou položku, ale některé prohlížeče ji nemusí zobrazovat není-li přítomen její rodičovský prvek <ul><ul>.

• Nepřítomnost prvku <ul><ul> nebo uzavíracího prvku </li></li> ztěžuje úpravu stylu.

• Neplatná.



Metoda C:

• Použití uzavíracího prvku </li></li> eliminuje potřebu použití značky <br /><br />.

• Opominutí prvku <ul><ul> ztěžuje použití různých stylů.

• Neplatná.

Metoda D:

• Platná!

• Je vybavena sémantickým smyslem a má strukturu.

• Odrážky se ve většině prohlížečů zobrazí vlevo od položky.

• Zalomené řádky většina prohlížečů odsadí.

• Lze snadno stylizovat pouhou aplikací CSS.

Jak je vidět, zdánlivě nevinná otázka nás může dovést k rozsáhlým poznatkům. A i když už na všech svých stránkách používáte výhradně Metodu D, je docela pěkné vědět, proč děláte věci tak, jak je děláte. Takové otázky typu "proč" si budeme klást v celé této knize, přičemž jejich zodpovídáním budete získá-vat stále více zkušeností, což vám ulehčí v budoucnu nalezení toho nejlepšího řešení pro danou situaci.

Něco navícPodívejme se na různé způsoby využití kódu našeho nákupního seznamu s použitím CSS pro vytvoření různého vizuálního formátování. V této části zahodíme všechna výchozí nastavení, přidáme si vlastní odrážky a pak to celé převrátíme do horizontální polohy, čímž získáme pár zajímavých tipů pro vytvá-ření navigačnícg lišt.

Odrážky a zase odrážky"Odrážky na mém nákupním seznamu opravdu vypadají moc příšerně. Raději tedy budu dále používat ty klasické zalamovací značky <br/>."

Ke starým zvykům se vracet nemusíme, můžeme i nadále používat strukturu nesetříděných seznamů, přičemž s pomocí CSS vypneme odrážky a zrušíme odsazení položek (pokud vám jde o tohle). Klíčem je ponechání struktury seznamu a přenechání nastavení detailů vzhledu na samotném CSS.

Nejdříve přidejte pravidlo CSS, které vypne odrážky:

ul {ul {

list-style: none;list-style: none;

}

Výsledky jsou vidět na obrázku 1-4.



Obrázek 1-4. Seznam bez odrážek

Nyní zrušíme odsazení jednotlivých položek. Implicitně je nastavena jistá míra výplně nalevo od každé-ho nesetříděného seznamu. Nebojte se – pomocí následujícího stylu toto odsazení snadno zrušíme:

ul {ul {

list-style: none;list-style: none;

padding-left: 0;padding-left: 0;

}

Výsledky vidíme na Obrázku 1-5.

Obrázek 1-5. Seznam s vypnutými odrážkami a odsazením

Zatímco příklad na obrázku 1-5 vypadá, jako bychom jej vytvořili výhradně s využitím prvků <br /><br />, ve skutečnosti je jedná o týž strukturovaný a platný nesetříděný seznam položek. Můžeme jej zobrazit v jakémkoliv prohlížeči nebo na jakémkoliv zařízení. Případná změna vzhledu je pak díky použití kas-kádových stylů opravdu triviální záležitostí.

Vlastní odrážky jsou nápaditějšíMožná byste chtěli ve svém seznamu odrážky použít, nicméně, nelíbí se vám, jak vypadají. Díky mož-nostem CSS můžete tyto klasické odrážky nahradit odrážkami vlastními, grafickými. V tom případě můžete zvolit ze dvou možností, z nichž já dávám přednost té druhé, protože se s ní dosahuje (při pou-žití v různých prohlížečích) podstatně konzistentnějších výsledků.

První možností je použití vlastnosti list-style-imagelist-style-image, pomocí které specifikujete obrázek, který se má vložit místo standardní odrážky.

ul {ul {

list-style-image: url(fancybullet.gif);list-style-image: url(fancybullet.gif);

}


14

S tím, jak stále více návrhářů a vývojářů vzhlíží k výhodám používání webových standardů, obzvláště pak CSS, jsou dennodenně objevovány nové techniky a hranice možností se stále posouvají. Pravidelně jsou vypracovávány nové, lepší způsoby dosahování daných cílů.

Nejlepší příklad tohoto vývoje lze nalézt v umění "nahrazování obrázkem", což je technika použití CSS za účelem nahrazení obyčejného hypertextového odkazu stylizovanými obrázky.

Jak lze využít CSS k nahrazení textu obrázkyBylo by ideální mít veškerou grafiku týkající se prezentace (tj. nepodstatnou, dekorativní) uvnitř CSS. Umožnilo by to snadno vyměnit aktualizované obrázky a přitom ponechat kód přesně takový, jaký je. Také můžeme zajistit, aby všechny prohlížeče a zařízení zpracovaly ze všeho nejdříve samotný kód, ať už pokročilé CSS vyžadované pro náhradu textu obrázky plně podporují nebo ne. Takovéto přednosti jsem kázal v celé knize.

Žádné dokonalé řešení neexistujeNalézt "dokonalou" metodu výměny obrázků odkazovaných pouze pomocí CSS za texty je ovšem jako hledat Svatý Grál. Taková metoda prostě ještě nebyla nalezena. Existují metody, které fungují ve všech prohlížečích, ale selhávají v podpůrném software typu čteček obrazovky. Existují další metody, které fungují dobře, pokud ovšem uživatelé nespecifikují, že jejich prohlížeč nezobrazuje obrázky a přitom stále umožňují použití CSS.

Nahrazování obrázkem



Žádná z metod dostupných v době psaní těchto řádek sice neuspokojuje každého uživatele, ale uvedené techniky jsou dnes používány na různých stránkách. Při aplikování nějaké metody náhrady obrázky bychom měli postupovat opatrně a chápat nevýhody, které jsou s ní spojené.

Používat s obezřelostíÚčelem této kapitoly je vysvětlit flexibilitu, kterou s sebou náhrada obrázky přináší, ale také ukázat, co na ní je neuspokojující. Časem možná nadšenci pro CSS naleznou nějaké lepší způsoby, jak dosáhnout týchž výsledků. Do té doby si budeme muset vystačit s tím, co máme, a zvážit všechna pro a proti.

Abychom se s myšlenkou náhrady obrázky seznámili, podívejme se na několik oblíbených metod počí-naje technikou náhrady obrázky podle Fahrnera (Fahrner Image Replacement; FIR), kterou to všechno začalo.

Metoda A: Náhrada obrázku podle Fahrnera FIR, pojmenována po autorovi techniky Toddu Fahrnerovi, je původní metodou nahrazování textu pomocí vlastnosti CSS obrázek na pozadí ( background-imagebackground-image). Tuto metodu popularizoval Douglas Bowman ve své fantastické příručce "Použití obrázku pozadí k náhradě textu" (Using Background ima-ge to Replace Text; www.stopdesign.com/also/articles/replace_text/www.stopdesign.com/also/articles/replace_text/) publikované v březnu 2003.

Předveďme si metodu na jednoduchém příkladu, ve kterém pomocí FIR prohodíme značku hlavičky daného textu se stylizovanou grafikou.

KódKód, který pro náhradu použijeme, bude následující:

<h1 id="fir">Fahrner Image Replacement</h1><h1 id="fir">Fahrner Image Replacement</h1>

Jednoduchá značka hlavičky s textem, který si přejeme později nahradit grafikou. Jistě si všimnete, že prvku <h1><h1> jsme přiřadili jednoznačný idid, abychom nad touto speciální hlavičkou měli pomocí CSS plnou kontrolu.

Obrázek 14-1 nám ukazuje výsledky kódu v typickém prohlížeči – hlavička se vypíše výchozím písmem prohlížeče (v tomto případě v písmu Verdana). Dosud to je předpověditelné a nudné.

Obrázek 14-1. Výchozí podoba hlavičky.


Kapitola 14 – Nahrazování obrázků 213

Značka navícFIR požaduje zavedení značky navíc (v dodatku k prvku hlavičky), která v sobě zahrne text kódu. Mohli bychom k tomu sice použít jakoukoliv značku, ale obecnost prvku <span><span> jej činí pro tento úkol doko-nalým. Když se podíváme na nestylizovaný kód, nebude mít prvek <span><span> žádný vliv na vzhled.

Modifikovaný kód nyní vypadá takto:

<h1 id="fir"><span>Fahrner Image Replacement</span></h1><h1 id="fir"><span>Fahrner Image Replacement</span></h1>

Nyní, když máme na svém místě dodatečný prvek <span><span>, jsme připraveni na CSS.

CSS vstupuje do hryPodstatou Metody A je použití dvou prvků, které máme k uskutečnění dvou odlišných úkolů. Pomocí prvku <span><span> text "schováme" a pak prvku <h1><h1> přiřadíme obrázek pozadí stylizovaného typu. Právě tyto dva kroky vyžadují dva prvky.

Schování textu

Nejprve schovejme text použitím vlastnosti displaydisplay u prvku <span><span>:

#fir span {#fir span {

display: none;display: none;

}

To zcela schová text umístěný v této speciální hlavičce uvnitř značek <span><span>. Prohlížeče nic nezobrazí. To je první krok – zcela se zbavit textu. Není potřeba ukazovat výsledný vzhled; jak jistě sami chápete, stránka by byla prázdná.

Přiřadit pozadíVytvořil jsem, podle mého názoru, vkusnou grafickou verzi textu ve Photoshopu (viz obrázek 14-2). Ve svém oblíbeném obrázkovém editoru byste mohli udělat něco podobného. Poznamenejte si rozměry v pixelech, za malý okamžik je budeme potřebovat.

Obrázek 14-2. Obrázek který použijeme k nahrazení textu (fir.gif).

Rozměry obrázku na obrázku 14-2 jsou 287 pixelů na šířku a 29 pixelů na výšku. Jak obrázek, tak roz-měry vložíme jako pozadí do kódu prvku <h1><h1>:

#fir {#fir {

width: 287px;width: 287px;

height: 29px;height: 29px;



background: url(fir.gif) no-repeat;background: url(fir.gif) no-repeat;

}



}

Minule jsme text schovali pomocí vlastnosti displaydisplay prvku <span><span>. Zde specifikujeme výšku a šířku obrázku použitého k nahrazení, jakož i obrázek samotný, za použití vlastnosti backgroundbackground.

Otevřeli jsme "obrázek" u prvku <h1><h1> který sdílí stejné rozměry jako obrázek (287×29 pixelů). Obrázek prosvitne za textem, který jsme schovali pomocí vlastnosti displaydisplay.

Obrázek 14-3 nám ukazuje výsledek hlavičky v prohlížeči. Vše, co vidíme, je stylizovaný obrázek. Skvě-lé!

Obrázek 14-3. Výsledky použití metody FIR (Fahrner Image Replacement).

VýhodyPoužitím metody CSS místo kódu zajistíme, že prohlížeče a zařízení, které CSS nepodporují, zobra-zí čistý text. Vyměňování grafiky je tak snadné, jako aktualizace jediného souboru CSS; nemusíme ak-tualizovat kód.

Spolu s těmito výhodami ale přichází i několik stinných stránek, které je velice důležité zmínit.

NevýhodyExpert na přístupnost Joe Clark učinil rozsáhlý výzkum toho, jak selhává metoda FIR u uživatelů, kteří používají čtečky obrazovky nebo jiný podpůrný software ke čtení webových stránek.

Výsledky jeho testů si lze v úplnosti přečíst v jeho článku "Skutečnosti a názory na FIR" (Facts and Opi-nion About Fahrner Image Replacement; www.alistapart.com/articles/fir/www.alistapart.com/articles/fir/). V něm ukazuje (mimo jiné), že většina čteček obrazovky se (možná chybně) řídí touto deklarací CSS:



}

Text se neschová pouze vizuálně, čtečky obrazovky jej také kvůli tomuto pravidlu úplně vynechají. Ně-kdo může tvrdit, že vlastnost displaydisplay by měly vzhledem k její povaze rozeznat pouze zařízení s ob-razovkou a že by snad měly být vytvořeny nové typy médií CSS specificky pro čtečky obrazovky, aby



měli návrháři lepší kontrolu nad tím, jak různé systémy mohou prezentovat budoucí techniky náhrady obrázkem; nebo že by se měl software pro čtení obrazovky držet jednoho z existujících typů médií, ja-kým je např. auralaural.

Mimo záležitost se zobrazením textu u čteček obrazovky má FIR ještě dvě další nevýhody:

• Pro správné fungování této metody je nutné použít sémanticky nevýznamný prvek <span><span>.

• Ve výjimečném případě, kdy uživatelé ve svém prohlížeči zablokují zobrazení obrázků (často z důvodů šetření šířkou pásma), ale ponechají možnost funkce CSS, nezobrazí se ani text ani obrázek na pozadí.

Zvažte pro a protiFaktem zůstává, že použitím metody FIR návrháři riskují, že postižení nebudou mít přístup k celému obsahu. Totéž (vzdáleně) riskují u uživatelů, kteří používají kombinace " obrázky ano/CSS ne". Trik spo-čívá v uvážení výhod a nevýhod, pochopení stinných stránek a v opatrnosti.

Existuje pár případů, kdy by FIR ještě bylo smysluplné. O dva z nich se s vámi podělím v části "Něco navíc" na konci této kapitoly.

Kvůli těmto objevům v oblasti přístupnosti, které vypluly na povrch, začali další návrháři a vývojáři provádět úpravy konceptu nahrazování obrázkem a nacházeli nové způsoby, jak běžný text "schovat" a přitom vložit obrázek do pozadí. Podívejme se na pár dalších metod.

Metoda B: Nahrazení obrázkem – metoda Leahy/LangridgeMetoda LIR, kterou současně vyvinuli Seamus Leahy (www.moronicbajebus.com/playground/www.moronicbajebus.com/playground/

cssplay/image-replacement/cssplay/image-replacement/) a Stuart Langridge (www.kryogenix.org/code/browser/lir/www.kryogenix.org/code/browser/lir/), se vydává na cestu zvládnutí problematiky nahrazování obrázkem bez použití bezvýznamného prvku <span><span>, který vyžadovala metoda FIR.

Místo použití vlastnosti displaydisplay ke schování textu, LIR text odstraňuje nastavením výšky obsahujícího prvku (v našem příkladu je jím <h1><h1>) na hodnotu 0 a dále nastavením výplně navrchu tak, aby se rov-nala výšce obrázku, který má být k nahrazení použit.

Kód a CSSJelikož nepotřebujeme v této metodě dodatečný prvek <span><span>, náš kód se zredukuje na pouhé:

<h1 id="lir">Leahy/Langridge Image Replacement</h1><h1 id="lir">Leahy/Langridge Image Replacement</h1>

A CSS, které nám nahrazení textu obrázkem (na obrázek 14-4) zaručí, je následující jednoduchá dekla-race:

#lir {#lir {



padding: 90px 0 0 0;padding: 90px 0 0 0;

overflow: hidden;overflow: hidden;

background: url(lir.gif) no-repeat;background: url(lir.gif) no-repeat;

height: 0px !important; /* pro většinu prohlížečů */height: 0px !important; /* pro většinu prohlížečů */

height /**/:90px; /* pro IE5/Win */height /**/:90px; /* pro IE5/Win */

}

Obrázek 14-4. Obrázek lir.gif vytvořený v obrázkovém editoru.

Obrázek vybraný pro náhradu za text má výšku 90 pixelů, proto je pro výplň navrchu nastavena stejná hodnota. Pro většinu prohlížečů nastavujeme výšku na hodnotu 0, což v podstatě odstraní text (nebo cokoliv jiného, co je v prvku <h1><h1> obsaženo). Abychom zajistili, že předchozí hodnota se rozpozná přednostně před hodnotou následující (pouze pro IE5/Windows), použili jsme pravidla !important!important. Kompetentní prohlížeče budou druhé pravidlo pro výšku ignorovat, zatímco IE5/Windows jej rozpo-zná.

Trápení s obdélníkovým modelem ( Box model)Poslední pravidlo se používá k urovnání nepochopení obdélníkového modelu CSS ze strany IE5/Win-dows (viz "Problém s obdélníkovým modelem" v kapitole 12). Jelikož výplň je v IE5/Windows přidána k hodnotám výšky a šířky, budeme muset specificky u těchto prohlížečů zacházet s upravenou hodno-tou.

Výška bude v tomto případě vždy rovna výšce obrázku, který používáme k nahrazení.

NevýhodyZatímco metoda B umožňuje zapomenout na dodatečný prvek <span><span> (oříznutí kódu se vždy hodí) sdílí s metodou A jistou nevýhodu. Je jí skutečnost, že uživatelé, kteří mají vypnuté zobrazování obráz-ků a aktivované CSS, neuvidí vůbec nic.

Mohli bychom také tvrdit, že další nevýhodou metody LIR je to, že vyžaduje trik na řešení problému s obdélníkovým modelem, aby se IE5/Windows choval správně.

Jelikož metoda B nepoužívá ke schování textu vlastnost displaydisplay, mohlo by se předpokládat, že tato metoda je lepší pro uživatele využívající software ke čtení obrazovky, ale stejně jako metodu A, i metodu Leahy/Langridge bychom měli užívat s maximální obezřetností. Musíme vzít v úvahu záležitost s pří-stupností varianty " obrázky vypnuté/CSS zapnuté".



Podívejme se na další variaci nahrazování obrázkem vyvinutou M. Rundlem.

Metoda C: Pharkova metodaJednou z úžasných vlastností Webu je to, že lidé neustále vylepšují techniky a hledají alternativní způ-soby k dosažení daných cílů. V srpnu 2003 přišel vývojář Mike Rundle se svou vlastní variací nahrazo-vání obrázkem (http://phark.typepad.com/phark/2003/08/accessible_imag.htmlhttp://phark.typepad.com/phark/2003/08/accessible_imag.html). Použil k tomu unikátní myšlenku přiřazení velké záporné hodnoty odsazení pro text, který chceme schovat. Text je tedy stále na obrazovce, ale má takové odsazení, že ani na největších monitorech jej neuvidíme. Nápadité!

Kód a CSSJako Metoda B, tak i Pharkova metoda (podle přezdívky Mikeova webového serveru) se také za účelem správného fungování vyhýbá potřebě zvláštního kódu. Kód naší hlavičky by vypadal takto:

<h1 id="phark">The Phark Method</h1><h1 id="phark">The Phark Method</h1>

Prvek <span><span> navíc, který jsme potřebovali v případě metody FIR, není touto metodou vyžadován. Podívejme se na zjednodušující CSS použité ke schování textu a jeho nahrazení obrázkem z obrázku 14-5.

Obrázek 14-5. Obrázek o výšce 26 pixelů, který použijeme jako náhradu (phark.gif).

#phark {#phark {


text-indent: -5000px;text-indent: -5000px;

background: url(phark.gif) no-repeat;background: url(phark.gif) no-repeat;

}

Jak vidíte, metoda C je zdaleka nejlepší a nevyžaduje trik na řešení problému s obdélníkovým modelem (" Box Model Hack"), ani dodatečný kód. Odsazením textu o nesmyslné množství záporných pixelů text vytěsníme tak, že je pro uživatele neviditelný.

Podobně jako u metody B uživatelé softwaru na čtení obrazovek by měli stále moci text v pohodě číst, což je jistě zlepšení.

Pořád tomu něco chybíPřestože se Pharkova metoda zavádí nejlépe, stále nedokáže vyřešit situaci " obrázky vypnuté/CSS za-pnuté". I když by se to mohlo jevit jako velice vzácná situace, znamená to stále, že v době psaní těchto řádků neexistuje dokonalé řešení.



Zrekapitulujme si každou z diskutovaných metod a povšimněme si jejich rozdílů.

ShrnutíPodívali jsme se zblízka na tři oblíbené metody náhrady obrázkem počínaje původní metodou FIR a dvěma jejími následovníky konče. Žádná z technik sice není dokonalým řešením problému, ale např. metoda M. Rundlea se k ideálu velice blíží, a může se uplatnit ve skutečném světě, pokud ovšem její nástrahy a nevýhody nebudeme brát na lehkou váhu.

Vypišme si hlavní rozdíly mezi třemi metodami:

Metoda A:

• Vyžaduje bezvýznamný dodatečný prvek <span><span>.

• Software na čtení obrazovky běžně používaný v době psaní těchto odstavců nic nevysloví kvůli tomu, že bere na vědomí vlastnost displaydisplay (založeno na objevech J. Clarka).

• Ve variantě "obrázky vypnout/CSS zapnout" se nic neobjeví.

Metoda B:

• Nevyžaduje dodatečný kód.

• Software na čtení obrazovky by měl číst text normálně.

• Pro IE5/Windows je nutné použít "Box Model Hack".

• V případě nastavení "obrázky vypnout/CSS zapnout" se neobjeví nic.

Metoda C:

• Nevyžaduje dodatečný kód.

• Software na čtení obrazovky by měl číst text normálně.

• V situaci, kdy je nastaveno "obrázky vypnout/CSS zapnout", se nic neobjeví.

Poslední nevýhody metody C sdílejí všechny současné populární metody. Stále další a další vývojáři však objevují nové způsoby zpracování techniky nahrazení obrázkem a proto věřím, že nakonec bude nalezeno řešení, které uspokojí každého.

Do té doby existuje pár praktických aplikací obecné myšlenky nahrazení obrázkem a my se na dvě z nich podíváme v části "Něco navíc" této kapitoly.

Je důležité zmínit, že návrhář D. Shea, který se drží standardů, stav nahrazování obrázkem široce sle-doval a udržoval pěkně organizovanou stránku, která zahrnuje všechny metody popisované v této kapitole a ještě nějaké další. Určitě jeho stránky sledujte (je tam např. článek věnovaný přehledu technik "Revised Image Replacement"; www.mezzoblue.com/tests/revised-image-repla-www.mezzoblue.com/tests/revised-image-repla-cement/cement/).“



Něco navícV části "něco navíc" se podívejme na dva případy, kdy by bylo v reálném světě oprávněné využít náhradu obrázkem. Nejdříve se budeme zabývat užitečným trikem s prohozením loga, který mi poprvé vysvětlil D. Bowman, významný popularizátor originální techniky FIR metody A. Pak vám sdělím, jak byly za použití náhrady obrázkem bez JavaScriptu navrženy záložky navigačního systému na stránkách Fast Company ’s.

Prohození logaV této kapitole jsme viděli, jak lze CSS použít k náhradě textu obrázkem. Každá z metod k tomu použí-vaných je stižena určitými nedostatky. Tyto nedostatky ale zůstanou stranou, když jednu z těchto metod použijete k nahrazení obrázku … jiným obrázkem.

Ale proč byste to měli chtít udělat?

Hi-fi a lo-fi

Jedním důvodem prohození obrázků by mohlo být použití různých log webového serveru – jednoho loga pro prohlížeče, které umí CSS používat normálně (s odkazem ve vlastnosti backgroundbackground) a jiného loga, které přijímají starší prohlížeče, příruční zařízení, čtečky obrazovky atd.

To se hodí obzvláště tehdy, když hi-fi (high-fidelity, vysoce věrné) logo používá průhlednost nebo barvy specifické pro CSS design vašich stránek. Když není CSS podporováno nebo aktivováno, budete možná chtít, aby nestylizovaná verze zobrazila lo-fi (low-fidelity, snížená věrnost) verzi loga, která ještě vypadá dobře.

PříkladAbych se vyhnul právníkům specializujícím se na autorská práva, použiji opět příklad z mého vlastního webového serveru. Nejen, že tu prohazuji loga, ale počítám také s tím, že na jakékoliv stránce jiné, než je domovská stránka, lze stále kliknout na verzi loga určenou pro CSS a použít ji jako odkaz na stránku indexindex.

Podívejme se na kód, který používám na své domovské stránce pro logo, a na kód pro další stránky.

Pro domovskou stránku:

<div id="logo"><div id="logo">

<span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /><span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" />

</span></span>

</div></div>

Na všech ostatních stránkách je logo, které uživatele po kliknutí nasměruje zpět na domovskou strán-ku.



<div id="logo"><div id="logo">

<span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31" <span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31"

alt="SimpleBits" /></a></span>alt="SimpleBits" /></a></span>

</div></div>

Dvě logaObrázek 14-6 a 14-7 ukazují loga, která jsem použil. První je na stránce zapsáno kódem pro nestylizova-nou verzi (lo-fi), druhé bude odkazováno CSS pro moderní verze prohlížečů (hi-fi).

Obrázek 14-6. Obrázek logo_lofi.gif, který uvidí nestylizované prohlížeče (lo-fi).

Obrázek 14-7. Obrázek logo_corn.gif, který uvidí prohlížeče akceptující CSS (hi-fi).

Text hi-fi loga je bílý a má bílé průhledné pozadí, které má sedět na pozadí barvy kukuřice. Proto by vypadalo v prohlížečích pro nestylizovanou verzi stránek divně. Z tohoto důvodu jsem se rozhodl pro-hodit loga pomocí CSS – abych mohl zvolit jedno z nich podle schopností prohlížeče.

CSSDotáhněme to tedy do konce společně s CSS, které to všechno umožní.

Nejdříve schováme řádkový obrázek nastavením jeho šířky na hodnotu 0. Vzpomeňme, že nepoužívá-ním vlastnosti displaydisplay ke schování lo-fi loga máme lepší šanci u softwaru na čtení obrazovky, který čte schovaný obrázek (prostřednictvím poskytnutého textu):

#logo img {#logo img {

display: block;display: block;

width: 0;width: 0;

}

Za další, přiřkněme hi-fi logo prostřednictvím vlastnosti backgroundbackground prvku <span><span>, který jsem tam přimontoval. Ano, je to bezvýznamné a bezvýznamné sémanticky, ale udělejme v tomto případě výjim-ku.

#logo span {#logo span {

width: 173px;width: 173px;



Date post:	19-Mar-2016
Category:	Documents
Upload:	zoner-software-as
View:	230 times
Download:	0 times

Webdesign s webovými standardy

Documents