Velká kniha webdesignu

CYAN MAGENTA YELLOW BLACK CYAN MAGENTA YELLOW BLACK

CYAN MAGENTA YELLOW BLACKCYAN MAGENTA YELLOW BLACK

LyndaWeinmanová

ENCYKLOPEDIE WEBDESIGNERA

<vel

ká k

niha

web

desi

gnu.

4><v

elká

kni

ha w

ebde

sign

u.4>

www.lynda.comwww.zonerpress.cz

• 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ů.

• Typografie, animace, tabulky, rámce, písma v HTML... © Foto: Jiří Heller

WEBDESIGNUVELKÁ KNIHA

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

Lynda Weinmanová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 grafiky 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 este-ticky vypadající weby, jak plánovat webové projekty, jaké si stanovovat cíle atd. přes informační architekturu, navigaci, problematiku přístup-nosti, barev, pojednání o optimalizaci obrázků pro web, o webových souborech či typografii, až po praktické použití JavaScriptu, XHTML a CSS, zvuku a animací, obrázků, tabulek, rámců, fontů atd.

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 grafiku 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 kon-ferencích a pracovala jako poradce pro firmy Apple, Microsoft, Oracle a mnoho dalších společností. Více informací o ní a jejích projektech na-jdete na stránkách www.lynda.com.

WEBDESIGNUVELKÁ KNIHA

Lynda Weinmanová

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 webdesignér při každo-denní 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Ý PRÉMIOVÝ PLUSPLUS PROGRAM PROGRAM.

© 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 0 7

ISBN 80-86815-10-2KATALOGOVÉ ČÍSLO: ZR410

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

obal_velka_webdes_02.indd 1obal_velka_webdes_02.indd 1 14.9.2004 11:10:2314.9.2004 11:10:23

< velká kniha webdesignu.4 >< velká kniha webdesignu.4 >

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

Text: Lynda Weinmanová

Design: Ali Karpová

< ve

lká

knih

a w

ebde

sign

u.4

><

velk

á kn

iha

web

desi

gnu.

4 >

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: ZR410Zoner PressZONER 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: [email protected] http://www.zonerpress.cz

ISBN 80-86815-10-2

vkw.4vkw.4LYNDA WEINMAN

O autorce

Lynda Weinmanová učí počítačovou grafiku od roku 1984. Spolupracovala s mnoha institucemi, na-příklad Art Center College of Design, UCLA, Ame-rican Film Institute (AFI) a San Francisco State Multimedia Studies Program. Napsala články pro ča-sopisy 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 Pho-toshopu, 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é ma-teriá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 Af-ter Effects West a Traveling Road Show, byly zorga-nizovány přímo na podnět firmy lynda.com. Pro více informací navštivte http://www.lynda.com!

4. vydání4. vydáníNA ANGLICKÉ VERZI KNIHY SPOLUPRACOVALI

VydavatelDavid Dwyer

Partner vydavateleStephanie Wall

ŠéfredaktorChris Nelson

Výkonný redaktorSteve Weis

Manažer produkceGina Kanouse

Marketingový manažer produktuTammny Detrich

Reklamní manažerSusan Nixon

Starší redaktorJeniffer Eberhardt

Redaktor projektuJake McFarland

Techniční redaktořiRich Evers

Molly E. HolzschlagRobert Reinhardt

Tvůrce rejstříkuCheryl Lenser

KorektořiJessica McCarty

Linda Seifert

Tvorba originální obálkyBruce Heavin

[email protected]

DesignérAli Karp

alink [email protected]

iv < Úvodní záležitosti

Stručný obsah

01 Začínáme — 01

02 Estetická stránka tvorby webu — 17

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

04 Stanovení cílů — 77

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

06 Informační architektura — 97

07 Navigace — 111

08 Problematika přístupnosti — 131

09 HTML a XHTML — 155

10 Formáty webových souborů — 171

11 Rychlá grafika — 195

12 Problematika barev — 217

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

17 Čáry a odrážky — 275

18 JavaScript - rollovery a další — 291

19 Obrázkové mapy — 313

20 Písma v HTML — 323

21 Tabulky a zarovnání — 329

22 Rámce — 359

23 Kaskádové styly — 375

24 Animace a zvuk — 397

25 Vytváření komunity — 421

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

27 Použitelnost — 451

28 Standardy

pro internetové prohlížeče — 459

29 Hosting — 473

30 Dejte o sobě vědět — 483

vkw.4vkw.4

v> Úvodní záležitosti

Obsah> O autorce iii

vkw.4 iv> Obsah v> Poděkování xii

Věnování xiii

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

<velká kniha webdesignu.4> xviiÚvod xvii

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

> Jak vkw.4 funguje xxPoznámky 2

01 Začínáme 3> Lynda radí s volbou kariéry 2

Školení 3Zdokonalení dovedností v obecném designu 4Vzdělávejte se sami 4Které dovednosti jsou důležité? 5První kroky v kariéře 6Význam portfolia 7Kolik za to chtít 7Jak najít práci ve webdesignu 9Používejte vyhledávače 10

> Hardware 11Mac nebo PC 11Která platforma je lepší? 12

> Požadavky na systém 13> Software 14

Grafické programy 15

> Shrnutí 16

02 Estetická stránka tvorby webu 17> Estetika barev 18

Některé pojmy z teorie barev 18

> Výběr barevných schémat 20Vztahy mezi barvami 21

> Použití vztahů mezi barvami ve webdesignu 22

Vizuální hierarchie 26

> Galerie barev 26> Estetika typografie 28

Základní typografické pojmy 28

> Úvod do typografie 30Fonty pro web 31Čitelnost 34Jak se liší fonty na platformách 34

> Verdana a Georgia 38> Rozdílné velikosti fontů na Macintoshi

a PC 40> Písma jako součást webové grafiky 41

Kde získat fonty online 41

> Základní styly písem 43Nepoužívejte příliš mnoho fontů 43

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

Tisk webových stránek 49

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

Vyhněte se obdélníkům 55Používejte mřížku 58Galerie stránek, které používají mřížku 59Délka řádků pro snadnější čtení 62Volný prostor je lepší než těsný prostor 63Myslete na přehyb 64Estetika animace 65

> Shrnutí 66

03 Plánování webových projektů 67> Získání práce 68

Ptejte se! 68

> Stručný souhrn 69> Profil projektu 70

Vzor kontrolního seznamu 70

vi < Úvodní záležitosti

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

04 Stanovení cílů 77> Vymezení cíle 78

Určení cílové skupiny uživatelů 79

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

05 Příprava a prototyp stránek 85> Jak získat nápady 86> Proč vytvářet prototyp stránek? 87

Okno prohlížeče 88Dělejte si náčrtky 89Začněte s prázdným dokumentem 91Používání vrstev 92Tvorba grafického manuálu 94

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

06 Informační architektura 97> Co je to informační architektura? 98

Běžné organizační systémy 98Běžné navigační systémy 100

> Postup 103> Kolik kategorií? 104

Konkrétní příklady použití kategorií 104

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

> Shrnutí 110

07 Navigace 111> Účel navigace 112

Příprava navigace 112Každý něco chce 113Vizuální hierarchie 114Význam hledání 114

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

Důležitá je soudržnost 125Zdroje 129

> Shrnutí 130

08 Problematika přístupnosti 131> Oficiální nařízení 132

Section 508 133

> Pravidla přístupnosti W3C 134> 14 pravidel přístupného webu 135> Užitečné techniky 142> Kaskádové styly a přístupnost 146> Kontrolní body a hodnocení

přístupnosti 148Tři "A" přístupnosti 148

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

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

09 HTML a XHTML 155> HTML a XHTML v knize o grafice? 156

Mám se naučit HTML? 156

> Jak se naučit HTML 158Jak HTML vypadá? 159

> HTML editory 160Vlastnosti HTML editorů 162

> Co je to XHTML? 164Mám se naučit XHTML? 166Jak se naučit XHTML 166Důležité pojmy XHTML 167Jak vypadá XHTML? 168Editory XHTML 169

> Shrnutí 170

vii> Úvodní záležitosti

10 Formáty webových souborů 171> Bitmapa nebo vektor? 172> Ztrátový nebo neztrátový? 175

Objasnění formátu GIF 176

> Komprese GIF 176Prokládané GIFy 177Prokládané GIFy ve Fireworksu a Photoshopu 178Průhledné GIFy 179Animované GIFy 180

> Komprese JPEG 181Progresivní JPEG a standardní JPEG 183Selektivní komprese JPEG 183

> PNG 184Gama korekce 184Průhlednost pomocí alfa kanálu 185

> Digitální vodotisk 186> SVG 187> SWF 190

Další informace o Flashi 191

> WBMP 192Imode 193

> Shrnutí 194

11 Rychlá grafika 195> Kontrola rychlosti stahování 196

Jaká je skutečná velikost vašich souborů 197

> Velikostsouboru ve Fireworksu, IR a Photoshopu 198

> K jakému typu grafiky patří váš obrázek 199

Fotografie uložené ve formátu GIF bez ditheringu 200Fotografie uložené ve formátu JPEG 200Fotografie uložené ve formátu GIFs 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 204Příklady použití JPEG 204

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

> Anti-aliasing nebo aliasing 208Nevyhlazená grafika 209

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

Dithering a banding 212Animované GIFy 213

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

12 Problematika barev 217> Od tisku k webu 218

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

> Co je barevný profil ICC? 223Můj názor na ICC 224sRGB ve Photoshopu 224

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

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

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

> Proč existuje paleta bezpečných barev? 234Kdy a proč používat paletu bezpečných barev 234

> Grafika obsahující jednolité barvy 236> Grafika s fotografickým obsahem 238

JPEG neumí uchovat bezpečné barvy 239

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

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

viii < Úvodní záležitosti

> Podložky pod myš s bezpečnými barvami 242

> Bezpečné barvy od Pantone 243> Shrnutí 244

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

Výchozí barvy 246

> Atributy pro barvy 247Prvek BODY 248Barva odkazů 249

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

Atributy se jmény barev 251Prvek FONT 252Prvek TABLE 252

> Shrnutí 254

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

Určení velikosti dlaždicového vzorku 257

> Velký obrázek na pozadí stránky 258Formáty souborů pro vzorky na pozadí 260

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

16 Průhlednost formátu GIF 265> Co je to průhlednost? 266> Jak napodobit průhlednost 267

Maskování 267Napodobení průhlednosti 268Vzorky na pozadí nemůžete ošidit 269

> Průhlednost formátu GIF 270Záře, měkké okraje a stíny 271Nástroje a techniky pro průhlednost formátu GIF 272

> Shrnutí 274

17 Čáry a odrážky 275> Vodorovné čáry 276

Vodorovné čáry v HTML a XHTML 276Pokročilé vytváření vodorovných čar 278Vodorovné čáry a dlaždice na pozadí 280Vodorovné čáry vlastní výroby 280

> Svislé čáry 281Kliparty pro čáry 281

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

> Uspořádané seznamy a seznamy definic 284

> Tvorba vlastních odrážek 286> Vytváříme grafiku pro odrážky 288

Kliparty pro odrážky 289

> Shrnutí 290

18 JavaScript - rollovery a další 291> Stručná historie JavaScriptu 292> Učíme se JavaScript 293> Rollovery 294

Grafika pro rollovery 294

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

> Tabulky a rollovery 299> Rollovery v HTML editoru 300

Rollovery typu nahrazení 300Rollover s ukazatelem 302Vícenásobný rollover 304Vyskakovací menu ve Fireworksu 307

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

> Shrnutí 312

19 Obrázkové mapy 313> Obrázkové mapy na straně serveru 314> Obrázkové mapy na straně klienta 314

Kód pro obrázkové mapy na straně klienta 316

ix> Úvodní záležitosti

> Obrázkové mapy a XHTML 317Význam atributu ALT 318Význam atributů WIDTH a HEIGHT 318Opravdu potřebujete obrázkovou mapu? 319Obrázkové mapy v grafických programech 320Software pro obrázkové mapy 321

> Shrnutí 322

20 Písma v HTML 323> Typografie založená na HTML 324

HTML prvky pro text 324Výběr písma v HTML 325Atribut FACE pro prvek FONT 326HTML kód pro text v podobě obrázku 326

> A co takhle PDF? 327> Shrnutí 328

21 Tabulky a zarovnání 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 333Značky pro zarovnání obrázků 336Vodorovné a svislé odsazení 338Šířka a výška 339

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

Tabulky s daty 341Atributy FRAME a RULES 342Značky tabulky 343

> Tabulka s grafikou a layout stránky 347Procenta versus pixely 347Tabulky založené na procentech 347Tabulky založené na pixelech 348Odsazení textu pomocí tabulky 351Vizuální tvorba tabulek 352Tabulkové tipy a triky 354Tabulky a procenta 354Tabulky a pixely 356Trik s orámováním tabulky 357

> Shrnutí 358

22 Rámce 359> Co jsou to rámce 360

Výhody a nevýhody rámců 362Základy rámců 363

> Začínáme pracovat s rámci 364> Střelba na cíl 367> Zábava s rámci 369> Zdvihnuté okraje 373> Shrnutí 374

23 Kaskádové styly 375> Implementace versus standardy 376> Anatomie kaskádového stylu 378

Pravidla 378

> Připojení stylu k HTML dokumentu 379Skupiny selektorů 380Třídy 380

> Blokové a inline elementy 382Pseudotřídy 384Pseudoelementy 385

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

Vložené styly 388Externí styly 389Řádkové styly 389

> Jednotky 390> Typografie 391> Absolutní pozicování 392

Absolutní pozicování a značka DIV 393

> WYSIWYG editory 395> Shrnutí 396

24 Animace a zvuk 397> Základní pojmy z oblasti animace 398> Animovaný GIF 399

Animovaný GIF – technické poznámky 400

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

Macromedia Flash a Shockwave 403

x < Úvodní záležitosti

> Macromedia Flash 404Učíme se Flash 405Stahování zásuvných modulů 405

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

> Macromedia Director 407Flash versus Director 407

> Apple QuickTime 408Základy QuickTime 408QuickTime na webu 409QuickTime stopy 409Alternativní kvalita záznamu 410Běžně používané QuickTime kodeky 411Terminologie z oblasti digitálního videa 412

> Zvuk na webu 413Estetika zvuku 413Práce se zvukem 413

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

Terminologie digitálního záznamu zvuku 416

> Jak udělat malý zvukový záznam 417Frekvence a bity 417

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

BGSOUND 419

> Shrnutí 420

25 Vytváření komunity 421> Co je komunita? 422

Výhody a nevýhody komunity 422

> Prvky komunity vyžadují tvorbu skriptů 423

> Ukázky komunity 424> Otázka soukromí 426> Emailové bulletiny 427

Odkazy 428

> List servery 429Software 429Externí konference 429

> Diskusní konference 430

Diskusní fóra 430

> Blogy 431Odkazy na blogy 432

> Další nápady 433Odkazy 433Knihy o internetových komunitách 433

> Shrnutí 434

26 Vkládání programových součástí 435> Zpracování formulářů 437

Jak formuláře fungují 437

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

> Personalizace 439> Cookies 440

Informace o cookies 441

> Databáze 442Informace o databázích 442Použití databází 443

> Nákupní košíky 444Odkazy k nákupním košíkům 444

> Ochrana dat 445Odkazy o ochraně dat 445Iniciativa W3C P3P 446

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

Odkazy k bezpečnosti 449

> Shrnutí 450

27 Použitelnost 451> Uživatelský design 452> V jednoduchosti je síla 453> Faktor Jacoba Nielsena 454> Uživatelské testování 455

Na co a jak se ptát 456

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

xi> Ú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 462Stránky zabývající se HTML 462Odkazy zabývající se problematikou XHTML 463

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

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

> JavaScript (ECMAScript) 466Odkazy zabývající se problematikou JavaScriptu/ECMAScriptu 466

> Současné internetové prohlížeče 467Odkazy zabývající se problematikou internetových prohlížečů 467

> Kompatibilita 468Kompatibilita layoutu HTML 468Odkazy zabývající se kompatibilitou layoutu 469Kompatibilita plug-inů 470

> Nejlepší praxe 470Odkazy vztahující se k praktickým postupům 471

> Shrnutí 472

29 Hosting 473> Co je to webhosting? 474> Zaregistrujte si vlastní doménu! 474> Co můžete očekávat od webhostingu 475> FTP – přesun stránek na server 480

Další pojmy vztahující se k FTP 481

> Shrnutí 482

30 Dejte o sobě vědět 483> Katalogy & Vyhledávače 484

Odkazy na vyhledávače 484

> Dejte o sobě vědět 485

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

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

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

> Shrnutí 490

Rejstřík 491

xii < Úvodní záležitosti

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

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

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

Ali, femme fatale designu. Pokud zrovna nenavrhuje grafickou úpravu knih, ale-spoň knihy čte! Nic ji nemů-že zastavit...

V paralelním vesmíru v Alpách žije editorka Jennifer a pečuje o švýcarské krávy.

Poděkování

xiii> Úvodní záležitosti

Chci poděkovat svojí milující rodině, Bruco-vi a Jamie, za to, že mě podporují a berou mě, 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 neoceni-telná.

Děkuji i své další druhé rodině, New Riders Publishing. Připadám si, jako bychom vy-rů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.

VěnováníTato kniha je věnována všem lidem, kteří chtějí komuni-kovat prostřednictvím Internetu. Vy jste pro tuto knihu inspirací.

xiv < Úvodní záležitosti

Odborní recenzenti

Rich Evers Rich tvoří a programuje webové stránky od roku 1994. Má slabost kro-mě 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. Pu-blikovala pro Adobe, Macworld, PC Magazine, Builder.com a další. Čtenáři Web Techniques si oblíbili její sloupek Integrated Design. Molly pracovala pro redak-ce 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 Or-ganization 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 Sys-tems 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 SIG-GRAPH. Jako vystudovaný fotograf zaujímá Robert k počítačovým aplikacím ho-listický 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.

xv> Ú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 ob-lastech 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 auto-rovi 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: [email protected]

Adresa: Zoner Press

ZONER software, s.r.o

Miroslav Kučera

Koželužská 7

602 00 Brno

> Barvy

> Písma

> Rozvržení stránky

> Animace

Estetická Estetická stránka tvorby stránka tvorby webuwebu

0202

ÚvodNejdří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řehled-nost stránky. Proces tvoření webových stránek prodělal vývoj, který není ničím jiným než ved-lejší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: bar-vy, typografie a rozvržení stránky.

Po letech zkušeností s výukou, kdy jsem se po-tkala 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 princi-py 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.

1717

18 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 ba-rev 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ý nama-loval 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řístup-nou formou předat dál.

Některé pojmy z teorie barevK popisu barev je třeba se nejdříve shodnout v termínech. Zde jsou ty nejdůležitější pojmy, které se v tex-tu 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.

1902 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á.


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 poj-my, 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ě pod-míněny kulturou. Abych uvedla konkrétní příklad, do naší školy v Ka-lifornii 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 no-sit Ž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, tako-vá 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 nevyvo-lá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.


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.


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 bar-vami, ale nebudete z toho mít nějaký praktický užitek, pokud tyto vědomosti nedokážete použít při tvor-bě 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ší.

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! Ne-stačí 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.

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

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

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


Dobré cvičení, jak se přinutit myslet na tyto věci, je udělat si nejprve náhled stránky ve Photo-shopu 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 navrh-li stránku v šedých odstínech, nahraďte šedou barvu za jinou barvu, třeba žlutou. Budete pře-kvapení, 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.

tiptip PLUGIN PRO PHOTOSHOP

Hot Door Harmony je plug-in pro Photoshop, který mě za-ujal a který se vztahuje k barevné harmonii. Zkušební ver-ze 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řednic-tvím vztahu harmonie. Program vám ukáže výběr v pale-tě 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 roz-točte kuličku na barevném kruhu.


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ě.



Vizuální hierarchieVhodné 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.

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í, dru-há, třetí a čtvrtá s ohledem na důležitost. Když si tak-to 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 komuni-kačních cílů.

Galerie barev

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

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


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


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.

Monospace ( neproporcionální písmo): písmo, kte-ré 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 na-hoře je písmo Courier, v HTML jej lze jednoduše použít vložením prvku PRE. Neproporcionální pís-ma lze také v HTML použít prostřednictvím prv-ku CODE nebo TT.

Výchozí proložení ( default leading): proložení ( leading) je vzdálenost mezi jednotlivými řádky tex-tu. Výraz pochází z dávných dob typografické sazby. Obrázek představuje výchozí prokládání v HTML bez použití specifických prvků.

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

Základní typografické pojmyNež se dostaneme někam daleko s písmy na webu, je třeba používat společnou terminologii. Následu-jící příklady definují několik základních pojmů z ty-pografie.

Patkové písmo ( serif): hlavní tahy písmen jsou za-končeny patkami. Mnozí typografové se shodují, že patková písma jsou v souvislém bloku textu nejlépe č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.

Bezpatkové písmo ( sans-serif): hlavní tahy nejsou zakončeny patkami. Bezpatkové písmo lze definovat pomocí atributu FACE prvku FONT nebo pomocí CSS vlastnosti font-family. To si popíšeme poz-ději v této kapitole.

poznámkapoznámkaCSS TO UMÍ

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


Prostrkání znaků ( spacing): dodatečná vzdálenost mezi jednotlivými písmeny ve slově. Lze změnit po-mocí CSS.

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ě pro-střednictvím prvku FONT a atributu SIZE. Dnes se upřednostňuje použití CSS.

Kapitálky ( small caps): server HotWired používá v reklamě na titulní stránce velká písmena o velikos-ti malých. Je to jeden z příkladů, kdy se kapitálky po-uží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.

Text nadpisu (Headline text): text nadpisu slouží k rozdělení informace. Může používat odlišnou ve-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ů.

Vyrovnání párů ( kerning): umožňuje upravit roze-stupy mezi jednotlivými znaky. V CSS se k tomu po-uží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řednic-tvím vlastnosti letter-spacing.

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


Ú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í infor-mace o typografii. Zde jsou dvě z mých oblíbených.

TypoGRAPHIC (http://www.rsub.com/typographic). CounterSPACE (http://counterspace.motivo.com).

tiptipKDE SE DOZVĚDĚT VÍCE O TYPOGRAFII

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

The Microsoft Typographic GlossarySlovníček typografického žargonu.http://www.microsoft.com/typography/glossary/content.htm

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

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

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

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

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


Fonty pro webExistují 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é grafi-ky, jako jsou formáty GIF, JPEG nebo SWF (Flash).

Níže je uveden příklad dvou stránek, které používají text zobrazovaný pro-stř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 moh-li 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 pro-stř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 Obrázky na pozadína pozadí

> Dlaždice

> Velikost vzorku

> Celá obrazovka

> Kód

ÚvodObrovský 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 čas-to 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, kte-ré jsou mnohem méně náročnější na množství přenesených dat, než by se dalo očekávat.

Možná si myslíte, že obrázek, který by vyplnil ce-lou plochu prohlížeče návštěvníka, se musí sta-hovat velmi dlouho a že by bylo nezodpovědné používat obrázky této velikost pro webovou gra-fiku. Vytvoření grafiky, která by sahala od zdi ke zdi přes celou obrazovku, se pak jeví jako nespl-nitelný úkol vzhledem k tomu, že mnozí z nás se snaží protlačit data přes pomalé modemy a pře-tížené telefonní linky – nehledě k tomu, že celá obrazovka znamená něco jiného pro uživate-

le 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 je-den 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 stahu-je 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í.

1515

255

255

kap_015.indd 255 16.9.2004 10:45:36

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 platfor-mu 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že-ní 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.

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.

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

Množství stažených dat ale není jediný problém, který dlaždicové pozadí řeší. Většina webdesigne-rů 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 kompatibil-ní 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á vy-soce užitečný a úsporný prvek designu. HTML kód pro dlaždicový efekt je velmi jednoduchý. Mno-hem 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é.

kap_015.indd 256 16.9.2004 10:45:38

25715 Obrázky na pozadí

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í. Ob-rázek však pochopitelně musí mít tvar čtver-ce 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 bys-te si uvědomit, že velikost dlaždice má vliv na to, kolikrát se bude opakovat na stránce. Po-kud má uživatel monitor s rozlišením 640x480 a vaše dlaždice má rozměry 320x240, bude se opakovat čtyřikrát. Kdyby měla dlaždice roz-měr 20x20, opakovala by se dvaatřicetkrát.

Pokud dlaždice obsahuje části, které se opaku-jí 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 čás-tí. 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-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 sou-borů.

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 opako-vat vůbec. V takovém případě přijdete o vý-hody malého obrázku, který se stáhne pouze 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.

Malý zdrojový soubor.

Střední zdrojový soubor.

Velký zdrojový soubor.

Určení velikosti dlaždicového vzorku

kap_015.indd 257 16.9.2004 10:45:38

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é plo-chy 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.

kap_015.indd 258 16.9.2004 10:45:40

Kaskádové Kaskádové stylystyly

> 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ů

> Vizuální editory

ÚvodKaská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ží in-terpretovat jiný program než běžný prohlížeč. HTML původně nenabízelo žádné formátova-cí možnosti – nebylo možné změnit barvu, pís-mo 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.

2323

375

375

kap_023.indd 375 16.9.2004 11:18:06

376 23 Kaskádové styly

pokračování úvoduAbychom 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 pove-de k použití velkého černého a tučného výchozího pís-ma, 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ži-vatel jasně rozezná nadpis. Nicméně, značka H1 popisu-je logickou strukturu dokumentu, značka FONT pouze změní formátování.

Kaskádové styly tento problém řeší. Pomocí nich je to-tiž možné změnit vzhled stránek bez změny jejich lo-gické 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 to-tiž 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 kdoko-liv, 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 interne-tový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.

kap_023.indd 376 16.9.2004 11:18:08

37723 Kaskádové styly

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

Tytéž stránky ve starší verzi prohlížeče, která kaskádové styly nepodporu-je. 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 kas-ká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án-ků 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ýbor-ný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 sli-bují a na co si ještě budeme muset počkat. Ve výsledku je ale rozhodnutí ve prospěch nebo neprospěch kas-ká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ámkapoznámkaPŘ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 aktualizo-váno 11. ledna 1999, popisuje asi padesát různých vlastnos-tí. 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ěja-ké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-CSS1http://www.w3.org/TR/REC-CSS2

kap_023.indd 377 16.9.2004 11:18:08


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 bezbo-lestným způsobem.

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

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

Pravidlo má dvě části – selektor a deklaraci. Selek-tor říká, jakého objektu se deklarace týká – na před-chozí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.

poznámkapoznámkaHTML 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 obsa-hem. Například <table border="1"> je otevírací značkou elementu TABLE.

poznámkapoznámkaKASKÁ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 za-bý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.

kap_023.indd 378 16.9.2004 11:18:09


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 <html> <head> <title>Untitled</title>1 <style type="text/css">2 5 </style> </head> <body>6 <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 popi-suje 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 ob-sah 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.

kap_023.indd 379 16.9.2004 11:18:09


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 po-užitím si zkrátíte kód a urychlíte stahování. Při seskupování definic musíte jména jed-notlivý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ódh1 {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ódh1, 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řídyV předchozím textu jste se naučili pomocí stylů for-má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 do-kumentu tučnou větu, která ovšem z hlediska struk-tury 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šech-ny značky H1, nicméně, co dělat v případě, když ne-chcete, 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:

kap_023.indd 380 16.9.2004 11:18:10


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

1 Takto vypadá použití třídy – začíná tečkou, za kterou následuje jedinečné jméno. Zbývající část pravidla pak už pro vás není novinkou.

2 V kódu je potřeba jasně vyznačit elementy, na které se má selektor třídy použít – k tomu slou-ží atribut CLASS. Jeho hodnotou je pak jméno, které jste použili ve stylu – v našem případě tedy 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řa-zena 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.

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; font -weight: bold;} -- > </style> </head> <body>2 <p>There are <SPAN CLASS="text1">five basic styles</SPAN> of bonsai.</p> </body> </html>

Popis kódu

1 Selektor třídy, který mění vlastnosti font-fa-mily a font-weight.

2 Značka <SPAN> je použita pro označení části tex-tu, který má být odlišně naformátován. Povšim-něte si uzavírací značky </SPAN>, která ukončí formátování nadefinované v příslušné třídě.

kap_023.indd 381 16.9.2004 11:18:10


V této kapitole, a koneckonců i celé knize, může-te často narazit na termíny jako blokové nebo inline elementy. O co vlastně jde?

Blokový element se chová jako box (chcete-li, krabič-ka), která začíná těsně před obsahem elementu a roz-píná se tak, že obsah za uzavírací značkou elementu musí začínat až na dalším řádku. Obsah blokového elementu může být – a typicky taky je – několik řád-ků dlouhý. Stručně a velmi nepřesně řečeno – bloko-vé elementy pracují s celými řádky textu. Příkladem blokového elementu je například odstavec textu ohraničený značkami P. Začíná na jednom okraji značkou P a cokoliv, co se vyskytne až za uzavírací značkou P, se musí vystěhovat až na další řádek. Ja-kékoliv formátování blokového elementu se vztahuje k celému jeho obsahu. Do blokového elementu nelze umístit další blokový element. Pro umístění obsahu do blokového elementu se používají inline elementy, o kterých se dozvíte za okamžik. Podívejme se na ná-sledující obrázek a příslušný zdrojový kód:

Kód<html><head><style type="text/css"></style></head><body bgcolor="#FFFFFF" text="#000000"><div class="body"><p>Mary Had a Little Lamb</p><p>Mary had a little lamb, its fleece<br>was white as snow.</p></div></body></html>

Popis kódu

Element DIV se postará o uzavření obou od-stavců do jednoho neviditelného boxu. Pomocí atributu CLASS mu pak byla nastavena třída po-jmenovaná jako body – díky tomu pak bude na oba odstavce použito formátování, které je nade-finováno ve stylu třídy body. Atribut CLASS tedy nemusel být použit pro každý odstavec, stačilo ho použít pro element DIV – tím jsme zkrátili kód příkladu, což je dobře.

HTML vám nabízí velké množství blokových ele-mentů, některé z nich pak uvádí následující tabulka.

Blokový element Popis

BLOCKQUOTE Dlouhá citace

BODY Tělo dokumentu

BR Vynucený zlom řádku

DD Definice

DL Seznam definic

DIV Obecný kontejner

DT Definovaný pojem

H1...H6 Nadpisy

HR Vodorovný oddělovač

HTML Tedy... :-)

LI Prvek seznamu

OBJECT Obecný objekt

OL Číslovaný seznam

P Odstavec

PRE Předformátovaný text

UL Seznam s odrážkami

Blokové a inline elementy

kap_023.indd 382 16.9.2004 11:18:10

Documents

Velká kniha webdesignu