K1023.qxd
7.3.2005
12:53
StrÆnka 5
OBSA H
Předmluva
13
Poděkování
14
1. Přehled dnešního vývoje webů
15
Definice webdesignu Sedm pravidel webdesignu Tři filozofie webdesignu
16 19 20
Filozofie použitelnosti
21
Filozofie multimédií
25
Filozofie spojování jednotlivých prvků do tabulek
27
2. Design pro minulost, přítomnost i budoucnost Potíže s prohlížeči Využití statistik použití Větvení stránek Vysvětlení termínu šířka pásma Chybami se člověk učí Rámce
33 34 36 39 40 42 43
Tlačítka s obrázky
44
Obrázky na pozadí
45
Bláznivé barvy
49
Nekomprimované obrázky
49
Miniatury
50
K1023.qxd
6
7.3.2005
12:53
StrÆnka 6
Obsah
3. Co je potřeba k vytváření webů spojováním jednotlivých prvků v tabulkách Vysvětlení konceptu spojování obrázků Vysvětlení konceptu vnořování tabulek Požadavky na harware
53 55 58 61
Windows
61
Macintosh
62
Požadavky na software Základy jazyka HTML Použití omezeného počtu značek
Budoucnost jazyka HTML (XHTML) Základní principy práce s grafikou Základní principy práce se šablonami CSS Použití omezeného počtu značek vlastností jazyka CSS
Základní principy práce se soubory začlenění
62 64 66
67 69 69 72
73
4. Základy práce s grafikou
75
Vektorové a rastrové obrázky Práce s formáty GIF a JPG
76 78
Použití obrázků ve formátu GIF
78
Princip komprese GIF
85
Použití obrázků ve formátu JPG
86
Nesprávné použití obrazových formátů Principy softwaru pro úpravy a komprimování grafiky
5. Aspekty zvažované před zahájením práce Práce s požadavky
92 98
101 102
Shromažďování požadavků
103
Získání požadavků na vzhled a funkce
106
Vytvoření vývojového diagramu
107
Požadavky na šířku pásma Rozhodnutí o rozlišení
108 110
Design fixních a relativních webů
114
Vytvoření verzí webu pro různá rozlišení
115
Rozhodnutí o hloubce barev Webdesign s ohledem na škálovatelnost Použití vnořených tabulek
116 117 118
K1023.qxd
7.3.2005
12:53
StrÆnka 7
Obsah
7
Použití souborů začlenění
122
Vytvoření flexibilního designu
123
6. Zvyšování použitelnosti Zjednodušení architektury Použití konzistentní konvence názvů
127 128 129
Omezení počtu nutných klepnutí
129
Vyhněte se tomu, aby odkaz směřoval mimo danou sekci
130
Kaskádová a plochá architektura
131
Návrh rozvržení S posouváním nebo bez něj Umístění obsahu
Vývoj navigace
132 132 133
134
Konzistence
134
Použití textu pro položky v nabídkách
135
Volba mezi vodorovnou a svislou strukturou
136
Vyhrazení dostatečné šířky
136
Vysvětlení různých typů nabídek
136
Design s ohledem na přístupnost Design s ohledem na obsah
7. Shromažďování požadavků a vytváření konceptů Shromažďování požadavků a informací o vytvářeném webu Vytvoření konceptů pro klienta
138 138
143 145 148
Vytvoření zdrojové složky
150
Shromažďování a dokumentace agenturních fotografií
151
Výběr barev
153
Rozhodnutí o rozvržení
154
Vývoj vrstev
156
Použití masek
158
Přijetí rozhodnutí o zvoleném konceptu a provádění úprav
8. Rozdělení konceptu, testování a uložení na server Rozčlenění konceptu na kód HTML, grafiku a šablony CSS
159
161 162
Umístění vodítek
163
Přidání řezů
165
Ukládání a komprimování obrázků
168
K1023.qxd
8
7.3.2005
12:53
StrÆnka 8
Obsah
Vytvoření nadřazené tabulky
170
Formátování obsahu pomocí šablon CSS
172
Vnořování dalších tabulek
173
Testování stránky v prohlížečích Internet Explorer a Netscape Problémy, na které je vhodné dávat pozor
Uložení součástí stránky jako souborů začlenění Vytváření stránek druhé a třetí úrovně s domovskou stránkou jako šablonou Spolupráce s klientem při vytváření webu Testování celého webu Uložení webu na server
174 175
177 178 179 179 180
Uložení na interní server pomocí softwaru pro správu souborů
180
Uložení na externí server pomocí softwaru pro práci s protokolem FTP
181
9. Tipy a triky Ukládání zdrojových obrázků Použití částí zdrojových obrázků Vytváření elegantní navigace Opakované použití obrázků Umísťování prvků pomocí prázdného obrázku GIF (spacer GIF) Zapínání okrajů tabulek Odsazování a komentování kódu Odstraňování mezer a komentářů Pokládání průhledného obrázku GIF na pozadí JPG
10. Další tipy a triky Řízení pozadí pomocí „blankbg“ Použití obrázku jako barvy pozadí Konvence pojmenování Omezení přechodů Zavírání tabulek v Netscape Vynucení barvy pozadí Použití černobílých obrázků Vytváření flexibilních designů Formulářová pole Vkládání stylů do částí formulářů
185 186 187 188 189 192 194 196 197 198
203 204 205 207 208 209 209 210 211 212 213
K1023.qxd
7.3.2005
12:53
StrÆnka 9
Obsah
Umístění titulků stránek druhé úrovně Rozhodnutí, zda použít GIF nebo JPG Atributy značky
![]()
Použití adres v odkazech na e-mailovou adresu Použití stránek s počitadly ke zjištění statistiky využití stránek Využití zahrnovacích souborů Přetváření designu změnou barevných schémat a obrázků (rebranding) Nastavení mezer v hlavním těle
11. Případová studie – malé množství obsahu Vytváření designu pro malé množství obsahu Silné a slabé stránky vybraného designu Přidání vodítek a řezů Ukládání a komprese obrázků Vytvoření rodičovské tabulky Vytvoření a připojení souboru stylů Vytvoření tabulky s menu Přidání obrázku do prostředního sloupce Vytvoření tabulky s obsahem (oblast napravo) Vytvoření patičky Vytvoření šablony pro stránky druhé úrovně
12. Případová studie – střední množství obsahu Přidání vodítek a řezů Vytvoření rodičovské tabulky Vytvoření souboru stylů Vytvoření tabulky s hlavičkou Vytvoření tabulky s menu Vytvoření tabulky s obsahem Vytvoření spodního řádku Vytvoření patičky Vytvoření šablony pro stránky druhé úrovně
214 215 216 217 217 218 218 218
221 222 223 224 227 229 230 231 235 236 239 241
243 244 246 247 248 250 254 261 261 262
9
K1023.qxd
10
7.3.2005
12:53
StrÆnka 10
Obsah
13. Případová studie – velké množství obsahu Přidání vodítek a řezů Vytvoření rodičovské tabulky Vytvoření souboru stylů Vytvoření tabulky s horní hlavičkou Vytvoření tabulky se spodní hlavičkou Vytvoření tabulky s menu Vytvoření tabulky s obsahem Vytvoření patičky Vytvoření šablony pro ostatní stránky sídla
14. Úpravy designů z této knihy Ukázky upravených designů Postup při úpravě designu Postup při úpravě šablony druhé úrovně Tipy pro úpravy souboru Photoshopu Práce s HTML a CSS
15. Šablony designu a stránek druhé úrovně Design 1 Design 2 Design 3 Design 4 Design 5 Design 6 Design 7 Design 8 Design 9 Design 10 Design 11 Design 12 Design 13 Design 14
267 269 270 272 272 274 276 278 281 282
287 288 291 292 293 297
301 302 304 306 308 310 312 314 316 318 320 322 324 326 328
K1023.qxd
7.3.2005
12:53
StrÆnka 11
Obsah
Design 15 Design 16 Design 17 Design 18 Design 19 Design 20 Design 21 Design 22 Design 23 Design 24 Design 25 Design 26 Design 27 Design 28 Design 29 Design 30 Design 31 Design 32 Design 33 Design 34 Design 35 Design 36 Design 37 Design 38 Design 39 Design 40 Design 41 Design 42 Design 43 Design 44 Design 45 Design 46 Design 47 Design 48
330 332 334 336 339 341 344 346 348 351 353 355 357 359 361 363 366 368 370 372 374 376 379 381 383 385 387 389 391 393 395 397 399 401
11
K1023.qxd
12
7.3.2005
12:53
StrÆnka 12
Obsah
Design 49 Design 50 Šablony pro obsah stránek druhé úrovně Šablona 1
408
Šablona 2
409
Šablona 3
410
Šablona 4
410
Šablona 5
411
Příloha – O přiloženém CD Systémové požadavky Instalace Odemknutí souborů z CD-ROM
Rejstřík
403 405 408
413 414 415 415
417
