Velká kniha webdesignu by Zoner Press

CYAN

MAGENTA

YELLOW

CYAN

BLACK

MAGENTA

E N C Y K L O P E D I E

WEBDESIGNU

Velká kniha webdesignu je skutečně velkou knihou – je to více než 500stránkový komplexní průvodce webdesignem napsaný světově uznávanou a velmi populární americkou autorkou a webdesignérkou Lyndou Weinmanovou. Je pochopitelné, že všichni čtenáři této knihy se nebudou chtít stát profesionálními webdesignery, mnozí však mají své osobní webové stránky nebo plánují jejich přípravu. Kniha je určena všem, kteří se chtějí s tvorbou graﬁky pro web seznámit nebo se v ní zdokonalit, třeba jen z toho prostého důvodu, že mají potěšení z dobře vypadajících stránek. Kniha popisuje snad všechna témata z oblasti webdesignu – od základních informací typu jak začít, jak vytvářet esteticky vypadající weby, jak plánovat webové projekty, jaké si stanovovat cíle atd. přes informační architekturu, navigaci, problematiku přístupnosti, barev, pojednání o optimalizaci obrázků pro web, o webových souborech či typograﬁi, až po praktické použití JavaScriptu, XHTML a CSS, zvuku a animací, obrázků, tabulek, rámců, fontů atd.

ZONER software, s.r.o. významný producent software v oblasti digitální fotograﬁe, počítačové graﬁky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Mimo výše zmíněného v knize najdete i užitečné informace o vytváření online komunit, o použitelnosti webových stránek, o standardech pro internetové prohlížeče nebo informace o tom, kde a jak hostovat své webové stránky a řadu dalších zajímavých témat. Lynda Weinmanová vyučuje počítačovou graﬁku již od roku 1984. Spolupracovala s mnoha institucemi, např. Art Center College of Design, UCLA, American Film Institute (AFI) a San Francisco State Multimedia Studies Program. Napsala řadu článků pro časopisy MacWorld, MacUser, MacWeek, Step-by-Step Graphics a How. Přednášela na mnoha konferencích a pracovala jako poradce pro ﬁrmy Apple, Microsoft, Oracle a mnoho dalších společností. Více informací o ní a jejích projektech najdete na stránkách www.lynda.com.

www.zoner.cz

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 webdesignér při každodenní práci. Na slevy, které můžete získat, a vydavatelský 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 adrese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

Zoner Press tel.: 532 190 883 fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz ZONER software, s.r.o., Koželužská 7, 602 00 Brno

YELLOW

BLACK

Fotograﬁe z nabídky fotobanky HELLER.CZ

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

obal_velka_webdes_02.indd 1

W E B D E S I G N E R A

KATALOGOVÉ ČÍSLO: ZR410

ISBN 80-86815-10-2

9 7 8 8 0 8 6

Lynda Weinmanová

<velká kniha webdesignu.4>

VELKÁ KNIHA

MAGENTA

BLACK

ENCYKLOPEDIE WEBDESIGNERA

Lynda Weinmanová

CYAN

YELLOW

VELKÁ KNIHA

WEBDESIGNU

• Překlad 4. vydání bestselleru Lyndy Weinmanové.

• Kompletní průvodce světem webdesignu.

• Webové standardy, použitelnost

a přístupnost webových stránek.

• HTML, XHTML, CSS a JavaScript.

• Návrh, příprava

a optimalizace obrázků pro web.

• Informační architektura, navigace, tvorba estetických webů.

• Typograﬁe,

animace, tabulky, rámce, písma v HTML...

Lynda Weinmanová

www.lynda.com

www.zonerpress.cz

8 1 5 1 0 7

CYAN

MAGENTA

YELLOW

BLACK 14.9.2004 11:10:23

<překlad 4. anglického vydání>

Text: Lynda Weinmanová

Design: Ali Karpová

< velká kniha webdesignu.4 >

vkw.4 LYNDA WEINMAN Authorized translation from the English language edition, entitled DESIGNING WEB GRAPHICS.4, 4th Edition, 0735710791 by WEINMAN, LYNDA, published by Pearson Education, Inc, publishing as New Riders; Copyright © 2004 by Lynda Weinman. 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 © 2004 Autorizovaný překlad anglického vydání nazvaného DESIGNING WEB GRAPHICS, čtvrté vydání, 0735710791, autor WEINMAN, LYNDA, vydal Pearson Education, Inc, ve vydavatelství New Riders; Copyright © 2004 Lynda Weinman. 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 © 2004.

<velká kniha webdesignu.4> Autor: Lynda Weinmanová Copyright © ZONER software s.r.o. Vydání první v roce 2004. Všechna práva vyhrazena. KATALOGOVÉ ČÍSLO: ZR410 Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno Překlad: Šárka Piškovská, Tomáš Znamenáček, Radek Szabó, Silvie Filipová Odpovědný redaktor: Miroslav Kučera DTP: Petr Autrata © 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: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-10-2

4. vydání NA ANGLICKÉ VERZI KNIHY SPOLUPRACOVALI Vydavatel David Dwyer Partner vydavatele Stephanie Wall Šéfredaktor Chris Nelson Výkonný redaktor Steve Weis Manažer produkce Gina Kanouse Marketingový manažer produktu Tammny Detrich Reklamní manažer Susan Nixon Starší redaktor Jeniffer Eberhardt Redaktor projektu Jake McFarland Techniční redaktoři Rich Evers Molly E. Holzschlag Robert Reinhardt Tvůrce rejstříku Cheryl Lenser Korektoři Jessica McCarty Linda Seifert Tvorba originální obálky Bruce Heavin bruce@stink.com Designér Ali Karp alink newmedia alink@earthlink.net

O autorce Lynda Weinmanová učí počítačovou grafiku od roku 1984. Spolupracovala s mnoha institucemi, například Art Center College of Design, UCLA, American Film Institute (AFI) a San Francisco State Multimedia Studies Program. Napsala články pro časopisy MacWorld, MacUser, MacWeek, Step-by-Step Graphics a How. Přednášela na mnoha konferencích, například MacWorld, Seybold, PhotoshopWorld, Thunder Lizard Web a dalších konferencích o Photoshopu, DV Expo, LA DV Show, SIGGRAPH a Comdex. Pracovala jako poradce pro firmy Apple, Microsoft, Oracle a mnoho dalších společností. V roce 1997 založila se svým manželem Brucem Heavinem (pracuje jako grafik) společnost lynda. com, inc. Lynda.com se zaměřuje na výukové materiály pro profesionální grafiky ve formě knih, CD-ROMů, online návodů, kurzů a akcí. Lynda.com je spoluzakladatelem FlashForward, konference pro tvůrce Macromedia Flash. Další akce, například After Effects West a Traveling Road Show, byly zorganizovány přímo na podnět firmy lynda.com. Pro více informací navštivte http://www.lynda.com!

< Úvodní záležitosti

vkw.4 Stručný obsah 01 Začínáme — 01

17 Čáry a odrážky — 275

02 Estetická stránka tvorby webu — 17

18 JavaScript - rollovery a další — 291

03 Plánování webových projektů — 67

19 Obrázkové mapy — 313

04 Stanovení cílů — 77

20 Písma v HTML — 323

05 Příprava a prototyp stránek — 85

21 Tabulky a zarovnání — 329

06 Informační architektura — 97

22 Rámce — 359

07 Navigace — 111

23 Kaskádové styly — 375

08 Problematika přístupnosti — 131

24 Animace a zvuk — 397

09 HTML a XHTML — 155

25 Vytváření komunity — 421

10 Formáty webových souborů — 171

26 Vkládání programových součástí — 435

11 Rychlá grafika — 195

27 Použitelnost — 451

12 Problematika barev — 217

28 Standardy

13 Paleta bezpečných barev — 227 14 HTML značky pro barvy — 245 15 Obrázky na pozadí — 255 16 Průhlednost formátu GIF — 265

pro internetové prohlížeče — 459

29 Hosting — 473 30 Dejte o sobě vědět — 483

> Úvodní záležitosti

Obsah > O autorce

iii

> Použití vztahů mezi barvami ve webdesignu

vkw.4

Vizuální hierarchie

> Obsah > Poděkování

v xii

> Galerie barev > Estetika typografie

26 28

Věnování

> Odborní recenzenti > Sdělte nám svůj názor

<velká kniha webdesignu.4> Úvod

> Proměnlivý svět webu Co je nového v této knize

xiv xv

xvii

xviii xix

Poznámky

> Lynda radí s volbou kariéry

3 2

Školení

Zdokonalení dovedností v obecném designu

Vzdělávejte se sami

Které dovednosti jsou důležité?

První kroky v kariéře

Význam portfolia

Kolik za to chtít

Jak najít práci ve webdesignu Používejte vyhledávače

9 10

> Úvod do typografie

Fonty pro web

xvii

> Jak vkw.4 funguje

01 Začínáme

Základní typografické pojmy

xiii

Čitelnost

Jak se liší fonty na platformách

> Verdana a Georgia > Rozdílné velikosti fontů na Macintoshi a PC > Písma jako součást webové grafiky

38 40 41

Kde získat fonty online

> Základní styly písem

Nepoužívejte příliš mnoho fontů

> Co je to rodina písma? > Aliasing nebo anti-aliasing > Text na stránce

44 46 49

Tisk webových stránek

> > > >

Fireworks a textové efekty HTML pro umístění grafiky na stránce A co takhle Flash? Estetika layoutu

52 53 54 55

Vyhněte se obdélníkům

Používejte mřížku

Mac nebo PC

Galerie stránek, které používají mřížku

Která platforma je lepší?

Délka řádků pro snadnější čtení

13 14

Volný prostor je lepší než těsný prostor

Myslete na přehyb

Estetika animace

> Hardware

> Požadavky na systém > Software Grafické programy

> Shrnutí

02 Estetická stránka tvorby webu > Estetika barev

> Shrnutí

17 03 Plánování webových projektů 18

> Získání práce

67 68

Ptejte se!

> Výběr barevných schémat

Vztahy mezi barvami

> Stručný souhrn > Profil projektu

69 70

Některé pojmy z teorie barev

Vzor kontrolního seznamu

< Úvodní záležitosti

> Vztahy s klienty > Smlouvy a právní záležitosti > Práce v týmu > Shrnutí

04 Stanovení cílů > Vymezení cíle Určení cílové skupiny uživatelů

> Uživatelský prožitek > Jaký cíl má vaše stránka cíl > Shrnutí

72 73 75 76

77 78 80 82 84

> Jak získat nápady > Proč vytvářet prototyp stránek?

86 87 88

Dělejte si náčrtky

Začněte s prázdným dokumentem

Používání vrstev

Tvorba grafického manuálu

> Nebezpečí při vytváření prototypů > Shrnutí

06 Informační architektura > Co je to informační architektura? Běžné organizační systémy Běžné navigační systémy

> Postup > Kolik kategorií? Konkrétní příklady použití kategorií

> Popisky Příklady použití popisků

> Shrnutí

07 Navigace > Účel navigace

Stálá navigace Problémy související s navigací Navigační grafika a indikátory Dobré a špatné použití navigace

115 117 118 120

Důležitá je soudržnost

125

Zdroje

129

> Shrnutí

130

05 Příprava a prototyp stránek

Okno prohlížeče

> > > >

95 96

97 98 98 100

08 Problematika přístupnosti > Oficiální nařízení Section 508

> > > > >

Pravidla přístupnosti W3C 14 pravidel přístupného webu Užitečné techniky Kaskádové styly a přístupnost Kontrolní body a hodnocení přístupnosti Tři "A" přístupnosti

> Systémy pro testování přístupnosti Další informace na Internetu ohledně přístupnosti

> Přístupnost z celosvětového hlediska > Shrnutí

09 HTML a XHTML > HTML a XHTML v knize o grafice? Mám se naučit HTML?

103 104

> Jak se naučit HTML

104

> HTML editory

107 108

110

111

Jak HTML vypadá? Vlastnosti HTML editorů

> Co je to XHTML? Mám se naučit XHTML?

131 132 133

134 135 142 146 148 148

149 150

151 154

155 156 156

158 159

160 162

164 166

Jak se naučit XHTML

166

Důležité pojmy XHTML

167

112

Jak vypadá XHTML?

168

Příprava navigace

112

Editory XHTML

169

Každý něco chce

113

Vizuální hierarchie

114

Význam hledání

114

> Shrnutí

170

> Úvodní záležitosti

10 Formáty webových souborů

171

> Bitmapa nebo vektor? > Ztrátový nebo neztrátový?

172 175

Objasnění formátu GIF

176

> Komprese GIF Prokládané GIFy

176 177

> Malé soubory GIF Bitová hloubka ovlivňuje velikost

> Anti-aliasing nebo aliasing Nevyhlazená grafika

> GIF pro čárovou grafiku > Barevné palety formátu GIF

vii

206 207

208 209

210 211

Prokládané GIFy ve Fireworksu a Photoshopu 178

Dithering a banding

212

Průhledné GIFy

179

Animované GIFy

213

Animované GIFy

180

> Komprese JPEG

181

Progresivní JPEG a standardní JPEG

183

Selektivní komprese JPEG

183

> Smíšená grafika > Dávkové zpracování > Shrnutí

214 215 216

184

12 Problematika barev

217

Gama korekce

184

> Od tisku k webu

218

Průhlednost pomocí alfa kanálu

185

> PNG

> Digitální vodotisk > SVG > SWF Další informace o Flashi

186 187 190 191

RGB nebo CMYK

218

> Problémy s barvami: gama a kalibrace 219 > Profily sRGB a ICC 220 > Co je sRGB? 220 Můj názor na sRGB

222

> WBMP

192

Imode

193

Můj názor na ICC

224

> Shrnutí

194

sRGB ve Photoshopu

224

11 Rychlá grafika > Kontrola rychlosti stahování Jaká je skutečná velikost vašich souborů

> Velikostsouboru ve Fireworksu, IR a Photoshopu > K jakému typu grafiky patří váš obrázek

195 196 197

> Co je barevný profil ICC?

> Přesné barvy na webové stránce > Shrnutí

13 Paleta bezpečných barev > Co je paleta bezpečných barev?

198 199

223

225 226

227 229

Paleta bezpečných barev seřazená podle hodnot

230

Paleta bezpečných barev seřazená podle odstínu

232

Fotografie uložené ve formátu GIF bez ditheringu

200

> Proč existuje paleta bezpečných barev? 234

Fotografie uložené ve formátu JPEG

200

Kdy a proč používat paletu bezpečných barev 234

Fotografie uložené ve formátu GIF s ditheringem

201

Čárová grafika ve formátu GIF bez ditheringu 202 Čárová grafika ve formátu JPEG

202

Čárová grafika ve formátu GIF s ditheringem 203

> Malé soubory JPEG Příklady použití JPEG

204 204

> Grafika obsahující jednolité barvy > Grafika s fotografickým obsahem JPEG neumí uchovat bezpečné barvy

> Potíže se smíšenými obrázky Smíšené obrázky jako GIFy ve Photoshopu

> Jak pracovat s bezpečnými barvami Převod plných barev na bezpečné barvy

236 238 239

240 240

241 241

viii

< Úvodní záležitosti

> Podložky pod myš s bezpečnými barvami > Bezpečné barvy od Pantone > Shrnutí

14 HTML značky pro barvy > Hexadecimální kód pro barvy

242 243 244

245 246

Výchozí barvy

246

> Atributy pro barvy

247

Prvek BODY

248

Barva odkazů

249

> Názvy barev místo hexadecimálních hodnot

250

Atributy se jmény barev

251

Prvek FONT

252

Prvek TABLE

252

> Shrnutí

15 Obrázky na pozadí > Dlaždice na pozadí

254

255 256

Určení velikosti dlaždicového vzorku

257

> Velký obrázek na pozadí stránky

258

Formáty souborů pro vzorky na pozadí

260

> Jednosměrné dlaždice > Estetika obrázkového pozadí > Shrnutí

262 263 264

16 Průhlednost formátu GIF

265

> Co je to průhlednost? > Jak napodobit průhlednost

17 Čáry a odrážky

275

> Vodorovné čáry

276

Vodorovné čáry v HTML a XHTML

276

Pokročilé vytváření vodorovných čar

278

Vodorovné čáry a dlaždice na pozadí

280

Vodorovné čáry vlastní výroby

> Svislé čáry Kliparty pro čáry

> Odrážky Odrážky založené na kódu

> Uspořádané seznamy a seznamy definic > Tvorba vlastních odrážek > Vytváříme grafiku pro odrážky Kliparty pro odrážky

> Shrnutí

280

281 281

282 282

284 286 288 289

290

18 JavaScript - rollovery a další

291

> Stručná historie JavaScriptu > Učíme se JavaScript > Rollovery

292 293 294

Grafika pro rollovery

> Použití vrstev pro rollovery Rozřezání obrázků pro rollovery Rozřezání a optimalizace obrázku

> Tabulky a rollovery > Rollovery v HTML editoru Rollovery typu nahrazení

294

296 296 297

299 300 300

266 267

Rollover s ukazatelem

302

Vícenásobný rollover

304

Maskování

267

Vyskakovací menu ve Fireworksu

307

Napodobení průhlednosti

268

Vzorky na pozadí nemůžete ošidit

269

> Průhlednost formátu GIF

270

Záře, měkké okraje a stíny

271

Nástroje a techniky pro průhlednost formátu GIF

272

> Shrnutí

274

> Detekce prohlížeče Otevření nového okna

> Shrnutí

19 Obrázkové mapy > Obrázkové mapy na straně serveru > Obrázkové mapy na straně klienta Kód pro obrázkové mapy na straně klienta

308 309

312

313 314 314 316

> Úvodní záležitosti

> Obrázkové mapy a XHTML

317

Význam atributu ALT

318

Význam atributů WIDTH a HEIGHT

318

Opravdu potřebujete obrázkovou mapu?

319

Obrázkové mapy v grafických programech

320

Software pro obrázkové mapy

321

> Shrnutí

20 Písma v HTML > Typografie založená na HTML HTML prvky pro text

322

323 324 325

Atribut FACE pro prvek FONT

326

HTML kód pro text v podobě obrázku

326

21 Tabulky a zarovnání

327 328

329

> Jak velká je webová stránka? 330 > Zarovnávání pomocí XHTML a HTML 332 Značky a atributy pro formátování textu

333

Značky pro zarovnání obrázků

336

Vodorovné a svislé odsazení

338

Šířka a výška

339

> Speciální části obrázku > Zarovnání pomocí tabulek

340 341

Tabulky s daty

341

Atributy FRAME a RULES

342

Značky tabulky

343

> Tabulka s grafikou a layout stránky

347

Procenta versus pixely

347

Tabulky založené na procentech

347

Tabulky založené na pixelech

348

Odsazení textu pomocí tabulky

351

Vizuální tvorba tabulek

352

Tabulkové tipy a triky

354

Tabulky a procenta

354

Tabulky a pixely

356

Trik s orámováním tabulky

357

> Shrnutí

> Co jsou to rámce

> > > > >

359 360

Výhody a nevýhody rámců

362

Základy rámců

363

Začínáme pracovat s rámci Střelba na cíl Zábava s rámci Zdvihnuté okraje Shrnutí

364 367 369 373 374

324

Výběr písma v HTML

> A co takhle PDF? > Shrnutí

22 Rámce

358

23 Kaskádové styly > Implementace versus standardy > Anatomie kaskádového stylu Pravidla

> Připojení stylu k HTML dokumentu

375 376 378 378

379

Skupiny selektorů

380

Třídy

380

> Blokové a inline elementy Pseudotřídy Pseudoelementy

> Ukrytí stylu pro starší prohlížeče > Typy kaskádových stylů

382 384 385

387 388

Vložené styly

388

Externí styly

389

Řádkové styly

389

> Jednotky > Typografie > Absolutní pozicování Absolutní pozicování a značka DIV

> WYSIWYG editory > Shrnutí

24 Animace a zvuk > Základní pojmy z oblasti animace > Animovaný GIF Animovaný GIF – technické poznámky

390 391 392 393

395 396

397 398 399 400

> Nástroje pro tvorbu animací ve formátu GIF

402

Macromedia Flash a Shockwave

403

< Úvodní záležitosti

> Macromedia Flash

405

Stahování zásuvných modulů

405

> Macromedia Shockwave Ukládání ve formátu Shockwave

> Macromedia Director Flash versus Director

> Apple QuickTime

406 407

433

407

409

Alternativní kvalita záznamu

410

Běžně používané QuickTime kodeky

411

Terminologie z oblasti digitálního videa

412

> Zvuk na webu

413

Estetika zvuku

413

Práce se zvukem

413

BGSOUND

> Shrnutí

414 415

> CGI Odkazy vztahující se k CGI a programování v CGI

> Personalizace > Cookies Informace o cookies

> Databáze

437 437

438 439

439 440 441

442 442

417

> Nákupní košíky

444

417

418 419

Odkazy k nákupním košíkům

> Ochrana dat Odkazy o ochraně dat

419

420

Výhody a nevýhody komunity

422

> Prvky komunity vyžadují tvorbu skriptů > Ukázky komunity > Otázka soukromí > Emailové bulletiny

423 424 426 427

Externí konference

Jak formuláře fungují

443

422

> Diskusní konference

> Zpracování formulářů

Použití databází

> Co je komunita?

Software

26 Vkládání programových součástí 435

416

421

Odkazy

434

Informace o databázích

25 Vytváření komunity

> List servery

> Shrnutí

408

QuickTime stopy

> Zvukové formáty > Stahování zvukových souborů

432

433 433

409

Frekvence a bity

> Další nápady

431

Knihy o internetových komunitách

408

> Jak udělat malý zvukový záznam

Odkazy na blogy

430

Odkazy

QuickTime na webu

Terminologie digitálního záznamu zvuku

> Blogy

406

Základy QuickTime

> Běžně používaná řešení > Jak dostat zvuk do počítače

Diskusní fóra

404

Učíme se Flash

428

429 429 429

430

Iniciativa W3C P3P

444

445 445 446

> Získávání důvěry uživatelů > Bezpečnost

447 448

Odkazy k bezpečnosti

449

> Shrnutí

450

27 Použitelnost

451

> > > >

Uživatelský design V jednoduchosti je síla Faktor Jacoba Nielsena Uživatelské testování Na co a jak se ptát

> Klíčové náměty > Shrnutí

452 453 454 455 456

457 458

> Úvodní záležitosti

28 Standardy pro internetové prohlížeče

459

> Historie standardů pro internetové prohlížečů

460

Odkazy týkající se webových standardů

460

> Specifikace HTML a XHTML Stránky zabývající se HTML

462 462

Odkazy zabývající se problematikou XHTML 463

> Kaskádové styly Odkazy na stránky zabývající se problematikou CSS.

> Objektový model dokumentu Odkazy na stránky zabývající se problematikou DOM

> JavaScript (ECMAScript)

464 464

465 465

466

Odkazy zabývající se problematikou JavaScriptu/ECMAScriptu

466

> Současné internetové prohlížeče

467

Odkazy zabývající se problematikou internetových prohlížečů

467

> Kompatibilita

468

Kompatibilita layoutu HTML

468

Odkazy zabývající se kompatibilitou layoutu

469

Kompatibilita plug-inů

470

> Nejlepší praxe

470

Odkazy vztahující se k praktickým postupům 471

> Shrnutí

472

29 Hosting

473

> > > >

Co je to webhosting? Zaregistrujte si vlastní doménu! Co můžete očekávat od webhostingu FTP – přesun stránek na server Další pojmy vztahující se k FTP

> Shrnutí

30 Dejte o sobě vědět > Katalogy & Vyhledávače Odkazy na vyhledávače

> Dejte o sobě vědět

474 474 475 480 481

482

483 484 484

485

Odkazy na registrace stránek do vyhledávačů a katalogů 486

> Meta tagy Odkazy vztahující se k prvkům meta

> Výměna odkazů Odkazy věnující se problematice výměny odkazů a bannerů

487 487

488 489

> Shrnutí

490

Rejstřík

491

xii

< Úvodní záležitosti

Poděkování

Lynda s dcerou Jamie si hrají s digitálním foťákem...

To jsem já a můj další koníček – nové kolo! Naučila jsem se, že člověk nemůže žít jen ze samé práce, beze špetky zábavy!

V paralelním vesmíru v Alpách žije editorka Jennifer a pečuje o švýcarské krávy. Ali, femme fatale designu. Pokud zrovna nenavrhuje grafickou úpravu knih, alespoň knihy čte! Nic ji nemůže zastavit...

Můj manžel Bruce. Na fotce se sice tváří vážně, ale mě neoklame.

> Úvodní záležitosti

xiii

Věnování Chci poděkovat svojí milující rodině, Bruco- Tato kniha je věnována všem lidem, kteří chtějí komunivi a Jamie, za to, že mě podporují a berou mě, kovat prostřednictvím Internetu. Vy jste pro tuto knihu inspirací. jaká jsem. Mám velké štěstí, že vás mám. Děkuji i své druhé rodině, lynda.com. Je mi ctí, že mohu spolupracovat s tak úžasným týmem inteligentních a nadšených lidí. Děkuji Garo Greenovi, řediteli vydavatelství lynda.com za to, že věří v mé knihy a ve mě. Jeho pomoc na tomto projektu byla neocenitelná. Děkuji i své další druhé rodině, New Riders Publishing. Připadám si, jako bychom vyrůstali spolu! Jen, Jake, David, Steve a Chris – všichni jste skvělí! Děkuji Ali Karpové, jejíž mimořádná grafická úprava dělá z této knihy hotové umělecké dílo. Je to paráda! Děkuji Domenique Sillettové za příklady a pozvání na suši! Poděkování patří i Ramey, mojí kamarádce, která se mnou chodí cvičit. V neposlední řadě děkuji vám, čtenářům této knihy – vy jste moje inspirace.

xiv

< Úvodní záležitosti

Odborní recenzenti

Rich Evers Rich tvoří a programuje webové stránky od roku 1994. Má slabost kromě jiného pro Dreamweaver, Photoshop a XML/XHTML. Když má špatnou náladu, tak prý ničí myši a klávesnice, hází věcmi a píše kurzívou. Když má dobrou náladu, pravděpodobně ho spatříte, jak vaří, tančí a jezdí na horské dráze (i když ne všechno najednou).

Molly E. Holzchlagová má na svém kontě přes 20 knih o tvorbě webu. Molly píše a přednáší vřelým hlasem, vyzařuje z ní upřímná vášeň pro Internet. Je autorkou sloupků, mnoha specializovaných článků a působí také jako redakční poradce. Publikovala pro Adobe, Macworld, PC Magazine, Builder.com a další. Čtenáři Web Techniques si oblíbili její sloupek Integrated Design. Molly pracovala pro redakce Digital Web Magazine, Web Review a jako odborný editor knihy Eric Meyer on CSS: Mastering the Language of Web Design (Vydal Zoner Press v roce 2004 pod názvem Eric Meyer – ovládněte kaskádové styly). Molly je členkou řídícího výboru pro Web Standards Project (WaSP), působí jako vzdělávací ředitel pro World Organization of Webmasters a na mnoha institucích – včetně University of Arizona – sestavuje studijní programy pro diplomové kurzy zaměřené na tvorbu webu.

Robert Reinhardt Robert je hlavním spoluautorem řady Flash Bible (Viley), dále Flash MX ActionScript Bible (Viley) a Rich Media MX: Building Multi-User Systems with Macromedia MX Software (Macromedia Press). Je také spoluředitelem [theMAKERS] (http://www.FlashSupport.com), multimediální společnosti sídlící v Los Angeles. Vytvářel multimediální kurzy pro vzdělávací zařízení v Kanadě a USA, přednášel na konferenci FlashForward, moderoval FlashintheCan a SIGGRAPH. Jako vystudovaný fotograf zaujímá Robert k počítačovým aplikacím holistický přístup a vytváří provokativní multimediální projekty. K jeho posledním projektům patří grafika pro film režiséra Seana Penna, The Pledge (2000) a webová stránka filmu Training Day od Warner Bros.

> Úvodní záležitosti

Sdělte nám svůj 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 vědět, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat a také vaše další podnětné myšlenky, o které jste ochotni se s námi podělit. Jako 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. 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ěď na každou zprávu. E-mail: miroslav.kucera@zoner.com Adresa: Zoner Press ZONER software, s.r.o Miroslav Kučera Koželužská 7 602 00 Brno

Estetická stránka tvorby webu Úvod

> Písma > Rozvržení stránky > Animace

Po letech zkušeností s výukou, kdy jsem se potkala s mnoha webdesignery a tvůrci stránek, jsem dospěla k přesvědčení, že nikdo nechce záměrně tvořit škaredé stránky; problém je, že někdo zkrátka lepší udělat neumí. Mnoho lidí se začalo věnovat webdesignu bez předchozího vzdělání v oboru. Tato kapitola nenahradí roky školení, ale je určena těm, kdo potřebují poradit se základními principy dobrého designu. Tato kapitola je postavena na dvou aspektech slovníkové definice estetického vkusu: design se řídí jistými principy a hodnocení krásy v umění je subjektivní záležitost.

> Barvy

Nejdříve si všichni mysleli, že naučit se tvořit webové stránky znamená naučit se používat HTML. Později si uvědomili, že potřebují umět pracovat s grafickými programy, aby mohli tvořit obrázky pro web. Pak zjistili, že musí vzít v úvahu použitelnost, přístupnost a přehlednost stránky. Proces tvoření webových stránek prodělal vývoj, který není ničím jiným než vedlejším projevem vyzrálosti – vyzrály výtvory webdesignerů, zlepšil se vkus uživatelů a zvýšilo se očekávání uživatelů. Někde v té směsici spočívá význam designu na starý způsob: barvy, typografie a rozvržení stránky.

02 Estetická stránka tvorby webu

Estetika barev Málokdo se vyzná v teorii barev a většina webových tvůrců, dokonce i příležitostní grafici si nejsou jisti při výběru příjemného barevného schématu. Zdálo by se, že teorie barev je téma, které je zábavné a tvořivé. Většina knih jej však bohužel vysvětluje nezáživným odborným způsobem. Tato kapitola podává teorii barev se zaměřením na web. Mým cílem je vyhnout se příliš odbornému vysvětlování, přičemž se chci zaměřit na snadno identifikovatelné principy a techniky. Za nápady v této části kapitoly však nevděčím sobě. O barvách mě učil manžel, Bruce Heavin, který namaloval ty krásné obálky na mých knihách. Podělil se s moji osobou o některé triky při volbě barev, čímž se moje schopnosti v této oblasti výrazně zlepšily. A některé z těchto užitečných rad bych zde chtěla přístupnou formou předat dál.

Některé pojmy z teorie barev K popisu barev je třeba se nejdříve shodnout v termínech. Zde jsou ty nejdůležitější pojmy, které se v textu objevují.

Spektrum: všechny barvy v určitém barevném prostoru, jako je RGB nebo CMYK.

Odstín: definuje určité místo v barevném kruhu nebo spektru. V našem případě byl zvolen zelený odstín.

Jas: vyjadřuje rozmezí mezi světlem a tmou. Náš příklad zobrazuje červenou barvu v různých stupních jasu od tmavé po světlou.

02 Estetická stránka tvorby webu

Sytost: vyjadřuje intenzitu barvy.

Tlumený: pokud lidé mluví o tlumených barvách, většinou mají na mysli barvy s nízkou sytostí.

Nízký kontrast

Vysoký kontrast

Kontrast: rozdíl hodnot. Vizuální hierarchie se vztahuje ke kontrastu.

Zesvětlení: k barvě se přidává bílá.

Ztmavení: k barvě se přidává černá.

02 Estetická stránka tvorby webu

Výběr barevných schémat K volbě vhodného barevného schématu pro webové stránky je potřeba znát vztahy mezi barvami. Následující část vás seznámí s některými pojmy, které budou později použity v kontextu tvorby webových stránek. Na trhu je mnoho knih o vztahu barev a emocí. Říká se, že purpurová je barva vášně, červená znamená zlost nebo vyvolávající pozornost, modrá je barva klidu. Myslím si, že nikdo nedovede a ani by neměl předurčovat, co která barva znamená pro někoho jiného. To je totiž zcela subjektivní záležitosti bez ohledu na to, co stojí v knihách. Kromě toho, asociace vyvolávané jednotlivými barvami jsou silně podmíněny kulturou. Abych uvedla konkrétní příklad, do naší školy v Kalifornii přišel jednou kdosi z Izraele a stěžoval si, že barvy na našich stránkách jsou stejné, jaké používali nacisti pro pásky, které museli nosit Židé za holocaustu. Byl proto silně rozhořčen, že stránky lynda.com používají žlutou a černou barvu. I když mám židovské předky, taková spojitost mě nikdy nenapadla; prostě se mi líbilo, jak se k sobě žlutá a černá hodí. Nezměnila jsem je, protože ve mně nic takového nevyvolávaly. Byla bych ovšem s výběrem takových barev opatrnější, kdybych navrhovala stránku pro židovské klienty. Některé firmy už mají své barevné schéma, které používají pro své logo, tištěné materiály a celkový image firmy, vytvořeno dávno. V takovém případě je potřeba s jejich barvami vhodně zacházet v souladu s tím, jak to vyžaduje prostředí webu. V jiných situacích máte úplnou volnost ve výběru barevného schématu. Volnost ovšem může být nebezpečná pro toho, kdo s ní neumí zacházet! Raději než na subjektivní a nedefinovatelné emoce, které jsou evokovány barvami, jsem se zaměřila na harmonické vztahy mezi barvami.

02 Estetická stránka tvorby webu

Vztahy mezi barvami Primární barvy

Sekundární barvy

Terciární barvy

Doplňkové barvy

Posunutý doplněk

Sousední barvy

Ukazatele lze posunout na kterékoli místo v barevném kruhu.

Monochromatické

Používá jeden odstín a různý jas téhož odstínu.

Tři příklady monochromatického barevného schématu (zleva doprava): azurová, teplé barvy, studené barvy.

02 Estetická stránka tvorby webu

Použití vztahů mezi barvami ve webdesignu Možná dokážete ohromit své kolegy a klienty, když budete znát rozdíl mezi doplňkovými a terciárními barvami, ale nebudete z toho mít nějaký praktický užitek, pokud tyto vědomosti nedokážete použít při tvorbě stránek. Všechny vztahy mezi barvami, které jsme si právě ukázali, souvisí s výběrem odstínu. Jakou roli však hraje sytost a jas? Jsou právě tak důležité jako odstín, ve většině případů možná ještě důležitější.

Tento hrozný příklad používá barevné schéma poskládané ze sousedních barev – odstín modré, červené a purpurové. Čitelnost je přinejmenším obtížná, ne-li nemožná.

Díváme-li se na nevhodnou kombinaci barev, vidíme, že jejich sytost je maximální a že všechny mají podobnou hodnotu jasu.

Trochu lepší příklad, který používá stejné barevné schéma sousedních barev modré, červené a purpurové, nicméně se liší v použitých hodnotách sytosti a jasu. Jaká to změna! Nestačí prostě zvolit druh barevné palety – je totiž potřeba umět vyvážit hodnoty jasu a sytosti všech barev a zároveň zvolit barevnou kombinaci, která neztěžuje čitelnost textu.

Při pohledu na vhodnější barevnou kombinaci vidíme, že se barvy výrazně liší v hodnotách sytosti a jasu.

02 Estetická stránka tvorby webu

Dobré cvičení, jak se přinutit myslet na tyto věci, je udělat si nejprve náhled stránky ve Photoshopu za použití vrstev. Zkuste vyplnit jednotlivé vrstvy designu odstíny šedé barvy takovým způsobem, aby důležité informace byly vhodným způsobem zvýrazněny. A poté, co jste navrhli stránku v šedých odstínech, nahraďte šedou barvu za jinou barvu, třeba žlutou. Budete překvapení, jak efektivní cvičení představuje tento postup!

Když budeme nejdříve tvořit ve stupních šedé barvy, můžeme se naučit myslet nejenom na barevné odstíny, ale také na jejich jas.

Barevné odstíny nahradily šedou barvu a já jsem získala právě takové barevné sladění, jaké jsem chtěla.

tip PLUGIN PRO PHOTOSHOP Hot Door Harmony je plug-in pro Photoshop, který mě zaujal a který se vztahuje k barevné harmonii. Zkušební verze je dostupná na adrese http://www.hotdoor.com. V době psaní této kapitoly existoval pouze ve verzi pro Macintosh, nicméně, verze pro Windows se připravuje. Tento plug-in vám umožní zvolit barvy prostřednictvím vztahu harmonie. Program vám ukáže výběr v paletě webových barev. Můžete přidávat bílou (zesvětlit) nebo černou (ztmavit), abyste získali různý jas, a poté zkopírovat pro kteroukoli barvu vytvořený hexadecimální kód. Vřele doporučuji tuto pomůcku stáhnout a vyzkoušet.

Plug-in Hot Door Harmony se používá snadno. Vyberte typ barevného schématu (například sousední barvy) a roztočte kuličku na barevném kruhu.

02 Estetická stránka tvorby webu

Pokud porozumíte vztahům mezi odstínem, jasem a sytostí, dokážete ve svých návrzích zdůraznit důležité věci a ty méně důležité potlačit. Získáte tak vládu nad barvami, které už nebudou ponechány náhodě.

02 Estetickรก strรกnka tvorby webu

02 Estetická stránka tvorby webu

Vizuální hierarchie

Galerie barev

Vhodné použití barev při tvorbě stránek je klíčem k efektivní komunikaci. Chcete-li zaměřit pozornost návštěvníka k těm částem stránky, které jsou nejdůležitější, lze toho dosáhnout mnoha různými způsoby. Podívejme se na některé příklady webů, kde barvy slouží jako prostředek k vytvoření vizuální důležitosti a hierarchie.

Imax Everest: film Střecha světa (http://www.mos.org/Everest/howhigh/howhigh.htm) je dobrým příkladem efektivního použití doplňkových barev.

Pokud chci, aby tím nejdůležitějším prvkem na stránce bylo logo, mohu jej zvýraznit pomocí barvy. Pokud je však tím důležitějším prvkem navigace, mohu se rozhodnout, že pomocí barev zvýrazním tuto část stránky.

Dříve než začnete vytvářet vstupní stránku webu, byste si měli stanovit, která informace je první, druhá, třetí a čtvrtá s ohledem na důležitost. Když si takto stanovíte pořadí důležitosti, budete moci použít mnoho z principů zmiňovaných v této kapitole, čímž tak prostřednictvím barev dosáhnete svých komunikačních cílů.

The LA County Arts Commission: (http://www.lacountyarts. org) používá mnoho barev, nicméně, celý web působí jednotně, protože si tvůrce dal záležet, aby hodnoty jasu všech barev byly podobné. Díky tomu působí velké množství různých odstínů harmonicky.

02 Estetická stránka tvorby webu

The Box (http://www.sixsides.com) používá kombinaci sousedních barev a posunutého doplňku. Každá sekce stránek má svoji barvu, takže stránka nejen dobře vypadá, ale má i přehlednou navigaci.

02 Estetická stránka tvorby webu

Estetika typografie Typografie pro web je spojena s mnoha omezeními, podrobněji se jimi zabývá kapitola 20. Tato část kapitoly se věnuje designovým principům spojeným s písmy. Zaměřuje se na písmo jako obrázek nebo písmo jako součást Flashe, nikoli na písma zobrazovaná prostřednictvím HTML.

Základní typografické pojmy Než se dostaneme někam daleko s písmy na webu, je třeba používat společnou terminologii. Následující příklady definují několik základních pojmů z typografie. Monospace (neproporcionální písmo): písmo, které se liší od standardního proporcionálního písma, jehož jednotlivé znaky zabírají různou šířku tím, že jeho znaky mají jednotnou šířkou. Na obrázku nahoře je písmo Courier, v HTML jej lze jednoduše Patkové písmo (serif): hlavní tahy písmen jsou za- použít vložením prvku PRE. Neproporcionální pískončeny patkami. Mnozí typografové se shodují, že ma lze také v HTML použít prostřednictvím prvpatková písma jsou v souvislém bloku textu nejlépe ku CODE nebo TT. čitelná. Výchozím fontem ve většině prohlížečů je právě patkové písmo – Times Roman pro Macintosh a Times New Roman pro PC.

Výchozí proložení (default leading): proložení (leading) je vzdálenost mezi jednotlivými řádky textu. Výraz pochází z dávných dob typografické sazby. Bezpatkové písmo (sans-serif): hlavní tahy nejsou Obrázek představuje výchozí prokládání v HTML zakončeny patkami. Bezpatkové písmo lze definovat bez použití specifických prvků. pomocí atributu FACE prvku FONT nebo pomocí CSS vlastnosti font-family. To si popíšeme později v této kapitole.

poznámka CSS TO UMÍ Mnoho typografických prvků popsaných v této části nelze nadefinovat pomocí klasického HTML, nicméně, s využitím CSS to obvykle možné je. Více v kapitole 23.

Volnější proložení (looser leading): lze ho dosáhnout prostřednictvím CSS a vlastnosti line-height. Více o CSS se dozvíte v kapitole 23.

02 Estetická stránka tvorby webu

Prostrkání znaků (spacing): dodatečná vzdálenost Text nadpisu (Headline text): text nadpisu slouží mezi jednotlivými písmeny ve slově. Lze změnit po- k rozdělení informace. Může používat odlišnou vemocí CSS. likost, barvu nebo jiný font. Podtržení, tučný text nebo jiné podobné zvýraznění umožňuje upoutat pozornost návštěvníka. Posun nad linkou (baseline shift): posun znaků směrem nahoru nebo dolů. Střídavě velká písmena (drop cap): text skládající se z velkých písmem je možné nastavit tak, aby počáteční písmeno každého slova bylo větší. V HTML toho lze dosáhnout poněkud komplikovaně prostřednictvím prvku FONT a atributu SIZE. Dnes se upřednostňuje použití CSS.

Vyrovnání párů (kerning): umožňuje upravit rozestupy mezi jednotlivými znaky. V CSS se k tomu používá vlastnost letter-spacing. Úprava proložení: definuje vzdálenost mezi řádky v bodových jednotkách. V CSS se k tomu používá vlastnost line-height. Mezery mezi slovy: v CSS lze změnit prostřednictvím vlastnosti letter-spacing.

Kapitálky (small caps): server HotWired používá v reklamě na titulní stránce velká písmena o velikosti malých. Je to jeden z příkladů, kdy se kapitálky používají jako druh titulku. Pro text s různou velikostí písma je nejlepší použít CSS.

Blok textu (body text): Souvislý text na stránce.

Tracking: rozestupy mezi jednotlivými písmeny v celém textu.

02 Estetická stránka tvorby webu

Úvod do typografie Fascinuje vás typografický design, nicméně, moc toho o něm nevíte? Je to opravdu atraktivní téma a poměrně složitá věda. Vybrala jsem pro vás některé internetové stránky o typografii, kde se můžete s problematikou sami seznámit. Existuje mnoho interaktivních stránek, které podávají informace o typografii. Zde jsou dvě z mých oblíbených.

CounterSPACE (http://counterspace.motivo.com).

TypoGRAPHIC (http://www.rsub.com/typographic).

tip KDE SE DOZVĚDĚT VÍCE O TYPOGRAFII Microsoft typography

CounterSPACE

Skvělý článek o tvorbě snadno čitelného písma. http://www.microsoft.com/typography/hinting/hinting. htm

Krásně provedená interaktivní studie o písmu vytvořená v programu Macromedia Flash. http://counterspace.motivo.com

The Microsoft Typographic Glossary

typoGRAPHIC

Slovníček typografického žargonu. http://www.microsoft.com/typography/glossary/content. htm

Obsáhlá stránka s pěkným designem, která seznamuje se světem typografie. http://www.rsub.com/typographic

Daniel Will-Harris

Typo.cz

Výběr a užití písma. http://www.will-harris.com/use-type.htm

Česká a zahraniční typografie na webu. http://www.typo.cz

webreview.com Hledejte na stránce „will-harris“. http://webreview.com/archives.shtml

02 Estetická stránka tvorby webu

Fonty pro web Existují odlišné způsoby publikování textu na webu: jedním je formát ASCII (vytvořený pomocí HTML nebo CSS) a druhým je text ve formě webové grafiky, jako jsou formáty GIF, JPEG nebo SWF (Flash). Níže je uveden příklad dvou stránek, které používají text zobrazovaný prostřednictvím HTML. Na prvním obrázku je použit font Verdana, na druhém je použit výchozí font pro webové stránky: Times Roman. Aby tento text mohli návštěvníci vidět úplně stejně, musejí mít příslušné fonty nainstalovány ve svém počítači. Z tohoto důvodu je volba fontů pro text zobrazovaného prostřednictvím HTML výrazně omezena oproti možnostem, které nabízí text zobrazený v grafickém souboru.

Tato stránka má jako font nadefinovanou Verdanu.

Toto je příklad stránky s výchozím fontem (Times Roman).

Obrázky na pozadí Úvod

> Velikost vzorku > Celá obrazovka > Kód

Možná si myslíte, že obrázek, který by vyplnil celou plochu prohlížeče návštěvníka, se musí stahovat velmi dlouho a že by bylo nezodpovědné používat obrázky této velikost pro webovou grafiku. Vytvoření grafiky, která by sahala od zdi ke zdi přes celou obrazovku, se pak jeví jako nesplnitelný úkol vzhledem k tomu, že mnozí z nás se snaží protlačit data přes pomalé modemy a přetížené telefonní linky – nehledě k tomu, že celá obrazovka znamená něco jiného pro uživatele kapesního počítače a něco jiného pro uživatele s 21'' monitorem! Tato kapitola se věnuje HTML značce <BODY> a jeho atributu BACKGROUND, který umožňuje opakovat jeden malý obrázek do nekonečna takovým způsobem, aby vyplnil celou stránku bez ohledu na její rozměry. Tyto malé obrázky budou v této kapitole nazývány jako dlaždice na pozadí. Jejich výhodou je malá velikost, takže se rychle stahují, přičemž se vyskládají za sebou po celé ploše obrazovky. Protože se malá grafika stahuje mnohem rychleji než grafika velká, je tato technika skvěle použitelná pro webové stránky širšího rozsahu, aniž by způsobila nárůst doby stahování.

255

> Dlaždice

Obrovský rozdíl mezi průměrným a výjimečným designem často spočívá v jednom jediném vylepšení. Účinnost obrázkového pozadí se často podceňuje. Tato kapitola vám představí působivé příklady toho, jak dlaždice na pozadí dovedou vytvořit bohatě vrstvené stránky, které jsou mnohem méně náročnější na množství přenesených dat, než by se dalo očekávat.

256

15 Obrázky na pozadí

Dlaždice na pozadí Značka BODY v kombinaci s atributem BACKGROUND dovoluje prohlížeči opakovaně zobrazovat malý obrázek a udělat z něj grafiku pro celou obrazovku. Tohoto efektu je dosaženo opakovaným skládáním téhož obrázku, takže vyplní celou plochu obrazovky bez ohledu na počítačovou platformu a velikost okna. Prohlížeč začne stahovat pouze jeden zdrojový soubor použitý jako vzorek a pak, když se soubor stáhne, vyplní tento vzorek celou stránku. Ušetří se tím čas, protože se čeká na stažení pouze jednoho malého obrázku, přičemž výsledkem je celá obrazovka vyplněná tímto obrázkem. Opakující se dlaždice jsou skvělým řešením pro vytvoření grafiky pro celou obrazovku v prostředí jako je web, který vyžaduje nízký rozsah přenesených dat.

Toto je zdrojová grafika pro dlaždicový efekt.

Kdy je vzorek vytvořen tak, aby působil jednolitě, při opakování dlaždice v celém okně prohlížeče nejste schopni rozeznat původní soubor.

Množství stažených dat ale není jediný problém, který dlaždicové pozadí řeší. Většina webdesignerů sdílí zklamání z toho, že HTML nedovoluje skládat obrázky do vrstev. Když vezmete v úvahu, že vrstvy jsou důležitou funkcí programů jako je Photoshop, QuarkXPress a PageMaker, pochopíte, proč tuto vlastnost tolik lidí postrádá v HTML. Některé z potřeb webdesignerů sice dokáže vyřešit CSS (viz kapitola 23 o kaskádových stylech), ale dlaždicové vzorky na pozadí jsou stále jednodušším řešením pro skládání více obrázků do vrstev, nehledě na to, že je to řešení, které je kompatibilní se staršími prohlížeči. HTML tedy dovoluje umístit text, odkazy a obrázky na obrázkové pozadí, ze kterého se tak stává vysoce užitečný a úsporný prvek designu. HTML kód pro dlaždicový efekt je velmi jednoduchý. Mnohem obtížnější je zařídit, aby grafika dobře vypadala a aby „spáry“ mezi naskládanými obrázky byly buď jasně zřetelné, nebo naopak úplně neviditelné.

15 Obrázky na pozadí

Určení velikosti dlaždicového vzorku Jedna z prvních otázek, která se automaticky nabízí, je otázka, jak velký má být obrázek použitý vytvoření grafického pozadí. HTML nijak neomezuje velikost dlaždice na pozadí. Obrázek však pochopitelně musí mít tvar čtverce nebo obdélníku, protože to je přirozený tvar všech počítačových souborů. Velikost obrázku závisí jenom na vás. Měli byste si uvědomit, že velikost dlaždice má vliv na to, kolikrát se bude opakovat na stránce. Pokud má uživatel monitor s rozlišením 640x480 Malý zdrojový soubor. a vaše dlaždice má rozměry 320x240, bude se opakovat čtyřikrát. Kdyby měla dlaždice rozměr 20x20, opakovala by se dvaatřicetkrát. Pokud dlaždice obsahuje části, které se opakují na každé straně, nebudou vidět žádné „spáry“ a návštěvník nepozná, kolikrát se dlaždice opakuje. Pokud má například obrázek zřetelné orámování, toho orámování zdůrazní skutečnost, že se pozadí stránky skládá z více částí. Velikost dlaždice záleží na jenom vás a na požadovaném efektu. Stále je však potřeba zohlednit omezení veli- Střední zdrojový soubor. kosti souboru. Pokud vytvoříte dlaždici, která bude zabírat mnoho paměti, bude její stahování trvat tak dlouho, jako u kteréhokoliv většího souboru grafiky, který na svém webu umístíte. Podle potřeby se můžete vrátit ke kapitole 11 zabývající se minimalizováním velikosti souborů. Když použijete zdrojový obrázek s většími rozměry, nebude se tolikrát opakovat. Pokud bude obrázek příliš veliký, nebude se opakovat vůbec. V takovém případě přijdete o výhody malého obrázku, který se stáhne pouze Velký zdrojový soubor. jednou a vyplní automaticky celou obrazovku. Na druhou stranu, když se vám podaří vytvořit grafiku velkých rozměrů, ale s malou velikostí souboru, její použití na pozadí stránky místo klasické grafiky může mít své přednosti.

257

258

15 Obrázky na pozadí

Velký obrázek na pozadí stránky Proč byste ale měli používat obrázky s velkými rozměry pro pozadí stránky, když se tím vlastně ztrácí smysl opakovaného dlaždicového pozadí? Takový obrázek totiž můžete umístit za jiné obrázky a text a vytvořit tak celostránkové pozadí, které bude vhodným způsobem doplňovat tyto prvky na stránce. V HTML ale není snadné dosáhnout zobrazení textu nebo obrázků přes jiné obrázky, zejména tehdy, pokud vám jde o vzájemnou pozici takových prvků. Nejsnadnějším řešením je použití dlaždice na pozadí.

Zde je příklad pozadí ze stránky Kennyho Lattimora (http:// www.kennylattimore.com), jehož rozměry jsou 896x1000 pixelů. Velikost souboru činí pouhých 18 kB. Díky tomu, že se skládá z pouhých dvou barev, a protože obsahuje velké plochy jednolité barvy, bylo snadné jej zkomprimovat a uložit ve formátu GIF, i když původní obrázek byl velmi velký.

Ve spojení s textem v HTML vypadá tato stránka jako bohatě vrstvená, a přitom se nestahuje dlouho.

Kaskádové styly Úvod

> Co jsou to kaskádové

styly > Deklarace a selektory > Používáme komentáře > Třídy class > Identifikátory ID > Pseudotřídy > Pseudoelementy > Typografie > Absolutní pozicování > Vrstvy textu a obrázků

Kaskádové styly (CSS, Cascading Style Sheets) umožňují oddělit obsah dokumentů od jejich vzhledu. Co to ale přesně znamená? Ve svých počátcích sloužilo HTML pouze pro vyznačení struktury dokumentu. Struktura dokumentu je nezávislá na tom, jak bude dokument vypadat – říká, který kus textu je nadpis a který obyčejný text, říká, jestli mají být v seznamu místo odrážek číslice nebo písmena atd. Struktura je velmi důležitá především pro přístupnost dokumentu – například, když nějaký uživatel s postižením zraku používá prohlížeč s hlasovým výstupem (screenreader), nebo když se stránku snaží interpretovat jiný program než běžný prohlížeč. HTML původně nenabízelo žádné formátovací možnosti – nebylo možné změnit barvu, písmo textu ani další podobné vlastnosti – proto se časem vynořilo tolik značek, které tuto mezeru zaplňovaly. Tyto značky nicméně bořily čistou strukturu dokumentu.

> Vizuální editory

375

376

23 Kaskádové styly

pokračování úvodu Abychom si ilustrovali neblahý vliv formátovacích značek na strukturu dokumentu, představme si jednoduchý nadpis WWW stránky. HTML říká, že se pro nadpisy používá značka H. Takže, například značka H1 povede k použití velkého černého a tučného výchozího písma, kterým je většinou Times New Roman. Pokud se vám nelíbí výchozí formátování nadpisů, můžete použít značku FONT a vytvořit nadpis podle vlastních představ – text pak může být velký, barevný a vysazen libovolným písmem. Oba postupy pak vedou k něčemu, v čem uživatel jasně rozezná nadpis. Nicméně, značka H1 popisuje logickou strukturu dokumentu, značka FONT pouze změní formátování. Kaskádové styly tento problém řeší. Pomocí nich je totiž možné změnit vzhled stránek bez změny jejich logické struktury. Jinými slovy – váš nadpis si zachová jak strukturu, tak i styl.

Implementace versus standardy World Wide Web Konsorcium (W3C) kaskádové styly důsledně prosazuje a nabízí pro ně velké množství dokumentace a další podpory – v použití kaskádových stylů je ale jeden podstatný problém. Prohlížeče totiž kaskádové styly podporují se střídavými úspěchy. V implementaci kaskádových stylů jsou mezi prohlížeči různých výrobců značné rozdíly, a to ani nemluvím o rozdílech mezi jednotlivými verzemi stejných prohlížečů. Kaskádové styly jsou ovšem snem všech webových designérů. Ti potřebují dokonalou kontrolu nad svou prací, lepší podporu pro rozvržení objektů a větší moc nad typografickými parametry stránek. HTML bylo navrženo k oddělení struktury dokumentu od jeho formátování – aby si obsah stránky mohl přečíst kdokoliv, na jakémkoliv zařízení a v jakémkoliv prohlížeči. V některých případech je podřízení se tomuto poslání pouze dílem dobré vůle webového designéra. V jiných případech – popisovaných v Section 508, o kterém jsme mluvili v kapitole osmé zabývající se přístupností – jsou kaskádové styly nezbytností. Bohužel – všech starých pořádků se nemůžeme zbavit, dokud nebude podpora kaskádových stylů v internetových prohlížečích jednotná. I když je alespoň částečné použití kaskádových stylů mnohem lepší než nic, zpětná kompatibilita je v některých případech docela nepříjemným problémem.

23 Kaskádové styly

Stránky projektu alistapart.com, zobrazené v prohlížeči s kvalitní podporou kaskádových stylů.

377

Tytéž stránky ve starší verzi prohlížeče, která kaskádové styly nepodporuje. Informační obsah sice zůstal zachován, nicméně, design příliš vábně.

Sami se tedy musíte rozhodnout, jestli se pro vaše stránky vůbec kaskádové styly hodí. Pokud jste si jisti, že většina návštěvníků použije jednu konkrétní verzi konkrétního prohlížeče, můžete jeho podporu kaskádových stylů snadno otestovat. Pokud bude většina vašich návštěvníků používat prohlížeč starší, strávíte laděním kódu dost času, než budete s výsledkem spokojeni.Určitě se podívejte na WaSP (Web Standards Project, projekt za prosazování standardů na webu), http://www.webstandards.org/. Najdete tam řadu článků o výhodách použití kaskádových stylů a neúprosné argumenty hovořící v jejich prospěch. Jedinou nevýhodou kaskádových stylů je totiž jejich nejednotná implementace prohlížeči. Další výborný zdroj informací můžete najít na http://www.alistapart.com/. Na této adrese naleznete řadu článků o kaskádových stylech, přístupnosti a návrhu stránek s celou řadou praktických příkladů a výborných nápadů. V této kapitole si kaskádové popíšeme z praktického hlediska – řekneme si, co všem uživatelům webu slibují a na co si ještě budeme muset počkat. Ve výsledku je ale rozhodnutí ve prospěch nebo neprospěch kaskádových stylů pouze na vás – záleží na vašich návštěvnících a používaných prohlížečích.

poznámka PŘEČTĚTE SI SPECIFIKACE! W3C v době vydání knihy vydalo celkem dvě doporučení týkající se kaskádových stylů – CSS1 a CSS2. Doporučení CSS1 bylo formálně vydáno 17. prosince 1996 a aktualizováno 11. ledna 1999, popisuje asi padesát různých vlastností. Doporučení CSS2 bylo oficiálně vydáno 12. května 1998 a obsahuje kolem sto dvaceti vlastností, včetně vlastností popisovaných v doporučení CSS1. Pokud nebude z nějakého důvodu nutné rozlišovat mezi oběma verzemi, budu v této kapitole mluvit souhrnně o CSS.

Pokud si chcete vydaná doporučení přečíst, naleznete je na těchto adresách: Doporučení W3C týkající se CSS: http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2

378

23 Kaskádové styly

Anatomie kaskádového stylu Kaskádové styly používají terminologii, se kterou jste se zatím pravděpodobně ještě nesetkali, například pojmy „deklarace“ a „selektor“. Následujících pár příkladů by vás mělo do této terminologie uvést bezbolestným způsobem.

Pravidla Pravidla jsou základním nástrojem kaskádových stylů. Na následujících dvou obrázcích je ukázka jednoduchého pravidla a jednoduché deklarace:

Pravidlo má dvě části – selektor a deklaraci. Selektor říká, jakého objektu se deklarace týká – na předchozím obrázku je selektorem značka H1. Deklarace pak říká, jaká vlastnost a jak se má změnit. V našem případě jde o změnu barvy na zelenou.

Deklarace má dvě části – vlastnost a hodnotu. V našem případě měníme barvu popisovaného objektu na zelenou.

poznámka HTML 101: CO JE TO ELEMENT? Pokud jste nečetli o kapitolu o HTML, nebo pokud už jste zapomněli – „element“ je značka nebo dvojice značek s obsahem. Například <table border="1"> je otevírací značkou elementu TABLE.

poznámka KASKÁDOVÉ STYLY A PŘÍSTUPNOST V této kapitole si ukážeme, jakou roli hrají pro přístupnost vaší stránky kaskádové styly. V kapitole 8 – která se přímo zabývá přístupností – je toto téma rozepsáno do větší hloubky. Nezapomeňte do této kapitoly alespoň nahlédnout, abyste věděli, jak závažné problémy musí weboví designéři vlastně řešit.

23 Kaskádové styly

379

Připojení stylu k HTML dokumentu Pokud chcete přidat kaskádové styly na své stránky, nestačí je jednoduše napsat – musíte je nějakým způsobem propojit s HTML dokumenty, které je mají použít. K tomu slouží malý kousek kódu uvnitř značky HEAD. Tento kód slouží jako kontejner pro všechny styly, které k dokumentu připojíte. Takto vypadá jednoduchá stránka s kaskádovým stylem:

Kód

1 2 3 4 5

<html> <head> <title>Untitled</title> <style type="text/css"> <!-h1 {color: green;} --> </style> </head> <body> <h1>The Art of Bonsai</h1> </body> </html>

Popis kódu 1 Element STYLE je kontejner pro styly, který patří do hlavičky HTML dokumentu. Atribut TYPE popisuje typ stylu, který používáte – nastavte ho na text/css. Element STYLE může obsahovat libovolné množství pravidel. 2 Na tomto řádku se otvírá HTML komentář. Pokud svůj styl nevložíte do komentáře, mohl by se jeho obsah chybně zobrazit uživatelům starších prohlížečů, které o stylech nic neví. 3 Tento styl obsahuje pouze jedno pravidlo, které definuje značku H1 a mění její barvu na zelenou. H1 je selektor, color je vlastnost, která se mění a green je její nová hodnota. 4 Uzavírací značka HTML komentáře. 5 Uzavírací značka elementu STYLE. 6 Na tomto řádku je text The Art of Bonsai označen jako nadpis první úrovně. Použitý styl pak ovlivňuje jeho vzhled.

380

23 Kaskádové styly

Skupiny selektorů Během stylování stránek často narazíte na případ, kdy je potřeba několika různým značkám přiřadit stejnou definici stylu. A k tomu slouží skupiny selektorů – jejich použitím si zkrátíte kód a urychlíte stahování. Při seskupování definic musíte jména jednotlivých selektorů oddělit čárkou, jak ostatně uvidíte na následujících příkladech. Dejme tomu, že máte ve svém stylu tyto definice:

Kód h1 {color: blue; font-family: verdana} h2 {color: blue; font-family: verdana} h3 {color: blue; font-family: verdana}

Seskupením pak vznikne významově ekvivalentní a přitom mnohem kratší zápis:

Kód h1, h2, h3 {color: blue; font-family: verdana }

Popis kódu Toto pravidlo říká, že všechen text, který je uzavřen mezi značkou H1, H2 nebo H3 se má zobrazit modrou barvou a písmem Verdana.

Třídy V předchozím textu jste se naučili pomocí stylů formátovat jednotlivé elementy. Selektory, které jsme si ukázali, se ale vždy vztahují na celé elementy. Pokud chcete ostylovat část dokumentu, která není nijak zvlášť vyznačena (například, pokud chcete mít v dokumentu tučnou větu, která ovšem z hlediska struktury není nic jiného než prostý text), budou se vám velmi hodit třídy.

Pomocí tříd lze také různě naformátovat elementy stejného typu – už jste se naučili naformátovat všechny značky H1, nicméně, co dělat v případě, když nechcete, aby všechny nadpisy vypadaly stejně? Stačí pak použít příslušnou třídu a HTML atribut CLASS, viz následující ukázka:

23 Kaskádové styly

381

Následující příklad ukazuje, jak použít selektor třídy pro naformátování části odstavce:

Kód <html> <head> <style type="text/css"> <!-1 .text1 {font-family: Verdana;} --> </style> </head> <body> 2 <h1 class="text1">This is some text formatted with a class!</h1> 3 <h1>This text has not been formatted with a class.</h1> </body> </html>

Popis kódu

Kód <html> <head> <style type="text/css"> <!-1 .text1 {font-family: verdana; font-weight: bold;} --> </style> </head> <body> 2 <p>There are <SPAN CLASS="text1">ﬁve basic styles</SPAN> of bonsai.</p> </body> </html>

1 Takto vypadá použití třídy – začíná tečkou, za Popis kódu kterou následuje jedinečné jméno. Zbývající část 1 Selektor třídy, který mění vlastnosti font-fapravidla pak už pro vás není novinkou. mily a font-weight. 2 V kódu je potřeba jasně vyznačit elementy, na které se má selektor třídy použít – k tomu slou- 2 Značka <SPAN> je použita pro označení části textu, který má být odlišně naformátován. Povšimží atribut CLASS. Jeho hodnotou je pak jméno, něte si uzavírací značky </SPAN>, která ukončí které jste použili ve stylu – v našem případě tedy formátování nadefinované v příslušné třídě. text1. Všimněte si, že tečka použitá ve stylu před jménem třídy není součástí tohoto jména! 3 Tato část je tady jenom pro porovnání, není zařazena do žádné zvláštní třídy. Díky třídám je možné použít zvláštní formátování kdekoliv v dokumentu a to nezávisle na použitém elementu. Zvláštní formátování se nepoužije u všech elementů – pouze u těch, které budou mít nastavený atribut CLASS s příslušnou hodnotu.

382

23 Kaskádové styly

Blokové a inline elementy V této kapitole, a koneckonců i celé knize, může- Popis kódu te často narazit na termíny jako blokové nebo inline Element DIV se postará o uzavření obou odelementy. O co vlastně jde? stavců do jednoho neviditelného boxu. Pomocí Blokový element se chová jako box (chcete-li, krabičatributu CLASS mu pak byla nastavena třída poka), která začíná těsně před obsahem elementu a rozjmenovaná jako body – díky tomu pak bude na píná se tak, že obsah za uzavírací značkou elementu oba odstavce použito formátování, které je nademusí začínat až na dalším řádku. Obsah blokového finováno ve stylu třídy body. Atribut CLASS tedy elementu může být – a typicky taky je – několik řádnemusel být použit pro každý odstavec, stačilo ho ků dlouhý. Stručně a velmi nepřesně řečeno – blokopoužít pro element DIV – tím jsme zkrátili kód vé elementy pracují s celými řádky textu. Příkladem příkladu, což je dobře. blokového elementu je například odstavec textu HTML vám nabízí velké množství blokových eleohraničený značkami P. Začíná na jednom okraji mentů, některé z nich pak uvádí následující tabulka. značkou P a cokoliv, co se vyskytne až za uzavírací značkou P, se musí vystěhovat až na další řádek. JaBlokový element Popis kékoliv formátování blokového elementu se vztahuje BLOCKQUOTE Dlouhá citace k celému jeho obsahu. Do blokového elementu nelze umístit další blokový element. Pro umístění obsahu BODY Tělo dokumentu do blokového elementu se používají inline elementy, BR Vynucený zlom řádku o kterých se dozvíte za okamžik. Podívejme se na náDD Deﬁnice sledující obrázek a příslušný zdrojový kód:

Kód <html> <head> <style type="text/css"> <!-.body {font-family: Verdana, Arial, Helvetica, sansserif; fontsize: 10px} .lamb {color: #FF0000} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div class="body"> <p>Mary Had a Little Lamb</p> <p>Mary had a little lamb, its ﬂeece<br> was white as snow.</p> </div> </body> </html>

Seznam deﬁnic

DIV

Obecný kontejner

Deﬁnovaný pojem

H1...H6

Nadpisy

Vodorovný oddělovač

HTML

Tedy... :-)

Prvek seznamu

OBJECT

Obecný objekt

Číslovaný seznam

Odstavec

PRE

Předformátovaný text

Seznam s odrážkami