Obsah Úvodem
9
KAPITOLA 1
Přehled aktuálního vývoje webů Definice webového designu Poznejte sedm pravidel webového designu Pochopte tři přístupy k webovému designu Shrnutí
11 12 14 16 24
KAPITOLA 2
Design minulosti, přítomnosti a budoucnosti Poznejte bolístky prohlížečů Přidání statistik využití Rozvětvení stránek Pochopení datové šířky pásma Budujte na slabinách předchozího návrhu Shrnutí
25 26 28 30 30 33 43
KAPITOLA 3
Co je třeba, než začnete Využití požadavků Jak porozumět požadavkům na rychlost Pro jaké rozlišení navrhovat Pro jakou barevnou hloubku navrhovat Navrhování s ohledem na budoucí rozšiřitelnost Shrnutí
45 46 51 52 58 60 64
KAPITOLA 4
Vylepšení použitelnosti Zjednodušení architektury Tvorba layoutu Vývoj navigace Jak navrhovat s ohledem na přístupnost Jak navrhovat s ohledem na obsah Shrnutí
K1729.indd 3
65 66 69 71 75 75 78
8.3.2010 13:49:25
4
Obsah
KAPITOLA 5
Shromáždění požadavků na web a vytvoření jeho grafické podoby 79 Získání a shromáždění požadavků na web Vytvoření grafického návrhu pro klienta Přijmutí rozhodnutí ohledně vybraného návrhu a provedení úprav Shrnutí
81 84 91 92
KAPITOLA 6
Co je potřeba k tvorbě skládaného webu Pochopení konceptu skládání obrázků Pochopení jazyka XHTML Porozumění grafice Pochopení jazyka CSS Jak používat vkládané soubory Shrnutí
93 94 102 104 104 110 110
KAPITOLA 7
Jak pracovat s grafikou Co je třeba vědět o vektorových a bitmapových obrázcích Co je třeba vědět o formátech JPEG a GIF Chybné využití obrazových formátů Jak pracovat s grafickým/kompresním softwarem Shrnutí
111 112 113 123 128 128
KAPITOLA 8
Základy tvorby skládaných designů pomocí CSS Design pomocí CSS versus tabulkový design pomocí XHTML Porozumění blokovému modelu CSS Kdy použít tabulky Validace kódu Testování designu v různých prohlížečích Shrnutí
131 132 142 146 147 148 148
KAPITOLA 9
Vzorové řešení: CSS design s málo obsahem Porozumění struktuře designu Budování struktury Tvorba stránek ve druhé úrovni Shrnutí
K1729.indd 4
149 150 154 170 180
8.3.2010 13:49:25
Obsah
5
KAPITOLA 10
Vzorové řešení: CSS design s průměrným množstvím obsahu Porozumění struktuře designu Vytvoření struktury Tvorba stránek ve druhé úrovni webu Shrnutí
181 182 185 204 213
KAPITOLA 11
Vzorové řešení: CSS design s velkým množstvím obsahu Porozumění struktuře designu Tvorba struktury Tvorba stránek ve druhé úrovni Shrnutí
215 216 220 238 253
KAPITOLA 12
Vzorové řešení: Layout se třemi sloupci se stejnou výškou Porozumění struktuře designu Tvorba struktury Tvorba stránek ve druhé úrovni Shrnutí
255 256 259 271 272
KAPITOLA 13
Vzorové řešení: Design založený na pozadí Porozumění struktuře designu Tvorba struktury Tvorba stránek ve druhé úrovni webu Shrnutí
273 274 277 291 292
KAPITOLA 14
Vzorové řešení: Formulář pomocí CSS
293
Porozumění struktuře formuláře Jaké styly použít k tvorbě formuláře Tvorba formuláře řádek po řádku Shrnutí
294 296 297 307
KAPITOLA 15
Vzorové řešení: Šablona XHTML pro malé množství obsahu Tvorba designu pro malé množství obsahu Porozumění přednostem a slabinám vybraného designu Přidání vodítek a řezů
K1729.indd 5
309 310 310 312
8.3.2010 13:49:25
6
Obsah
Vytvoření rodičovské tabulky Vytvoření a propojení šablony stylů Vytvoření tabulky navigační nabídky Přidání obrázku do prostředního sloupce Vytvoření tabulky s obsahem (pravé oblasti) Vytvoření zápatí Shrnutí
313 314 315 317 318 322 323
KAPITOLA 16
Tipy a techniky Tantekův „hack“ neboli „hack“ blokového modelu Pojmenujte správně pravidla a vlastnosti Odstranění vnějších a vnitřních okrajů Vytvoření předlohy designu s pevnou šířkou pomocí CSS Vezměte v potaz zvyšující a snižující se výšku sloupců Centrování designu s pevnou šířkou Vytvoření designu s pohyblivou šířkou Vždy stejné vykreslení značky
Vytvoření čáry bez značky
Použití obrázků na pozadí jako prvků designu Vytvoření efektu překreslení pomocí CSS Využijte vysouvací nabídky pomocí JavaScriptu Zapamatujte si pořadí okrajů u vlastností margin a padding K řešení problémů používejte vlastnosti border a background „Zakomentování“ kódu kvůli řešení problému Konvence jedinečných názvů Dejte si pozor na vnější okraj značek