CSS mesteri szinten a Dreamweaver CS3-ban

1. fejezet • A CSS alapfogalmai
Az (X)HTML dokumentum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
A dokumentumtípus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Karakterkódolás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
A dokumentum természetes folyása . . . . . . . . . . . . . . . . . . . . . . . 5
Belsõ elemek és tömbelemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Építkezés szakaszokból . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
A CSS dokumentum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
A CSS nyelvtana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
A CSS-kijelölõk típusai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
A rangsor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
És most következzen valami tényleg zavarbaejtõ: a konkrétság . . 18
Öröklés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
A dobozmodell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
A böngészõk különbségei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
A hasLayout tulajdonság . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Elhelyezési módszerek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
A természetes dokumentumfolyam módosítása . . . . . . . . . . . . . . . . 28
Úsztatott képek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Kitöltõ elem alkalmazása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Div elem beszúrása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Abszolút elhelyezésû hasábok . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Úsztatott hasáb kitöltése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Az elrendezés középre igazítása . . . . . . . . . . . . . . . . . . . . . . . . . 42

2. fejezet • Rögzített, középre igazított kezdõlapok használata
Az oldal felépítésének elsõ lépései . . . . . . . . . . . . . . . . . . . . . . . . . . 48
A HTML dokumentum elõkészítése . . . . . . . . . . . . . . . . . . . . . . 50
A látványterv elõkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Tartalomjegyzék
A Body elem stílusának megadása . . . . . . . . . . . . . . . . . . . . . . . 53
Rövidített jellemzõk használata a CSS-ben . . . . . . . . . . . . . . . . . . . . 55
A Dreamweaver CSS-beállításai . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Háttérképek használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
A jobb oldali álhasáb elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . 59
Az árnyékolás létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
A fejléc elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Az abszolút elhelyezés nem mindig rossz . . . . . . . . . . . . . . . . . . 65
Az embléma hozzáadása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Az oldalsáv lekerekítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Kezdjük a tetején! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Hamis alsó rész létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Az oldal alsó részének hozzáadása . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Külsõ oldalburkoló létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Az alsó virág elhelyezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
PNG vagy nem PNG – az itt a kérdés . . . . . . . . . . . . . . . . . . . . . 77
Néhány szó az úsztatásról és a kitöltésrõl . . . . . . . . . . . . . . . . . . . . 81
Kapszula létrehozása az oldalon . . . . . . . . . . . . . . . . . . . . . . . . . 81
Hogyan kerüljük el az úsztatott elemek elúszását,
avagy hogyan kényszerítsük a tárolókat
az úsztatott elemeik befogására? . . . . . . . . . . . . . . . . . . . . . . 82
Ûr – a végsõ határ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
A forráskód elemsorrendjének kérdése . . . . . . . . . . . . . . . . . . . . . . 85
A betûstílusok és a végsõ külalak kialakítása . . . . . . . . . . . . . . . . . . 87
Horgonyok és hivatkozások . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
A címsorok stílusának meghatározása . . . . . . . . . . . . . . . . . . . . 90
Az oldalsáv igazítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Iniciálék – figyelemfelkeltés egyszerûen . . . . . . . . . . . . . . . . . . . . . 93
A lábléc véglegesítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
A hibák kijavítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Az értékek hozzáigazítása az IE 5 elnézõ módjához . . . . . . . . . 95
A hasLayout-tal kapcsolatos problémák kezelése . . . . . . . . . . . 95
A böngészõmegfelelõség ellenõrzése . . . . . . . . . . . . . . . . . . . . . 96
A megjelenítõ típusának meghatározása . . . . . . . . . . . . . . . . . . . . . 98
Stílusszabályok egy egyszerû nyomtatási stíluslaphoz . . . . . . . . 98
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

3. fejezet • Táblázat alapú elrendezés átalakítása CSS-sé
A CSS helyzete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
A meglévõ stílusszabályok megkeresése a Find and Replace
segítségével . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
A CSS-szabályok rendezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
A sorrend meghatározása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
CSS mesteri szinten a Dreamweaver vi CS3-ban
Jellemzõk egyesítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Az egyesítés vége . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
A <table> szörnyûség kitakarítása . . . . . . . . . . . . . . . . . . . . . . . . . 117
A táblázatkód eltüntetése a Find and Replace segítségével . . . 118
Listák formázása CSS-sel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Táblázatok kiszabadítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Ábrák módosítása az Adobe Fireworks CS3 segítségével . . . . . 124
Becsomagolás div elemekbe . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
A lista finomhangolása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Gyorsítsunk! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Az eddig tanultak gyakorlása . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Az oldal fejlécének újjáépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
A háttérkép hozzáadása a fejléchez . . . . . . . . . . . . . . . . . . . . . 136
A navigációs elemek elhelyezése . . . . . . . . . . . . . . . . . . . . . . . 136
A tisztogatás folytatása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
A lábléc elrendezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
A végsõ táblázatjelölõ eltávolítása . . . . . . . . . . . . . . . . . . . . . . . . . 144
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

4. fejezet • A folyékony CSS-elrendezések használata
A CSS-elemkijelölõk egyszerûsítése . . . . . . . . . . . . . . . . . . . . . . . . 150
A fejléc elkészítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
A háttérkép beillesztése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Az embléma beillesztése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
A vízszintes navigációs sáv kialakítása . . . . . . . . . . . . . . . . . . . . . . 156
A vízszintes navigáció stíluslapjának elkészítése . . . . . . . . . . . 158
A horgonyok gombnak öltöztetése . . . . . . . . . . . . . . . . . . . . . . 160
Tervezési idejû stíluslapok használata . . . . . . . . . . . . . . . . . . . . . . 162
A vízszintes navigáció végsõ hangolása . . . . . . . . . . . . . . . . . . . . . 163
A vízszintes görgetés kijavítása . . . . . . . . . . . . . . . . . . . . . . . . . 165
Az áthaladási és a jelenlegi oldalt jelzõ állapot létrehozása . . . 166
A fõ tartalomterület elrendezése . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
A hasábok módosítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
A margók kezelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
A hasábok illúziója . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
A hátterek elhelyezése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
A hasábok finomhangolása . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
A Take the Walking Tour jelvény hozzáadása . . . . . . . . . . . . . 176
A bal oldali navigációs sáv létrehozása . . . . . . . . . . . . . . . . . . . 178
A menühivatkozások formázása . . . . . . . . . . . . . . . . . . . . . . . . 180
Az oldaljelzõ elhelyezése a függõleges menüben . . . . . . . . . . 181
A mainContent terület formázása . . . . . . . . . . . . . . . . . . . . . . . 182
CSS mesteri szinten a Dreamweaver CS3-ban vii
Nézzünk a dolgok mélyére – a lábléc formázása . . . . . . . . . . . . . . 183
Úsztatás jobbra és balra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
A végsõ simítások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Összefoglalás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

5. fejezet • Összetett oldalak készítése rugalmas oldalsablonokkal
Az új dokumentum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
A CSS-alapértelmezések visszaállítása . . . . . . . . . . . . . . . . . . . . 192
Alapértékeket beállító kódépítõelem készítése . . . . . . . . . . . . 194
Csak egy kis ugrás balra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Az alapbeállításokat hatástalanító kód finomítása . . . . . . . . . . 196
Az em egység jelentõsége . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Az em viszonyított mértékegység . . . . . . . . . . . . . . . . . . . . . . . 198
Néhány általános érvényû betûbeállítás . . . . . . . . . . . . . . . . . . 201
A látvány átalakul . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
A fejléc megszépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Illúzió a fejlécben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Kódon belüli navigációs elemek . . . . . . . . . . . . . . . . . . . . . . . . 209
Hogyan szelídítsük meg a Dreamweavert? . . . . . . . . . . . . . . . . 211
Az oldal tartalmi része . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Csinos oldalsávok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
A webhely fõ navigációs sávja . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
A listaelemek háttere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
A hivatkozások stílusának kialakítása . . . . . . . . . . . . . . . . . . . . 221
A <cite> elem használata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Most pedig forduljunk a jobb oldalunkra…
vagyis a jobb oldalsávhoz . . . . . . . . . . . . . . . . . . . . . . . . . . 227
A lábléc: utoljára, de nem utolsósorban . . . . . . . . . . . . . . . . . . 229
Az IECC gyors finomítása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Em alapú ûrlap létrehozása és formázása . . . . . . . . . . . . . . . . . . . . 231
Az ûrlap kódja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Az ûrlap formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Önellenõrzõ ûrlap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Akadálymentesen hozzáférhetõ adattáblázatok
létrehozása és formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
A munka dandárját végezze a Dreamweaver! . . . . . . . . . . . . . . 244
A táblázat méreteinek meghatározása . . . . . . . . . . . . . . . . . . . . 246
Az akadálymentesség javítása további visszajelzéssel . . . . . . . 249
Az adattáblázat formázása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Akkor most készen vagyunk? . . . . . . . . . . . . . . . . . . . . . . . . . . 253
CSS mesteri szinten a Dreamweaver viii CS3-ban

6. fejezet • Galériaoldal építése a CSS és a Spry segítségével
A kezdõsablon kiválasztása . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
A kiindulási környezet felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . 258
És most... a tartalom! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
A max-width és a min-width tulajdonságok használata . . . . . . 262
A sorhosszúság kikényszerítése az Internet Explorerben . . . . . 263
Közel a végkifejlet... a tartalom szélességének korlátozása
az Internet Explorerben . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
A képek rugalmas méretezése . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Mutassatok utat... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Mi is az a Spry keretrendszer? . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Spry alapú navigáció összeállítása . . . . . . . . . . . . . . . . . . . . . . . 270
A Spry-menüsáv formázása CSS-stílusokkal . . . . . . . . . . . . . . . 274
Utolsó simítások a menüsávon . . . . . . . . . . . . . . . . . . . . . . . . . 277
Hol vagyok? Visszajelzés a menüsávval . . . . . . . . . . . . . . . . . . 279
Két CSS-sablon egyesítése egyazon webhelyen . . . . . . . . . . . . . . . 281
Közös oldalelemek egy szempillantás alatt . . . . . . . . . . . . . . . . 286
A sidebar2 formába öntése . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
A galéria felépítése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Galéria – fokozatos gazdagítással . . . . . . . . . . . . . . . . . . . . . . . . . . 295
HTML adathalmaz létrehozása . . . . . . . . . . . . . . . . . . . . . . . . . 296
Egy gyors ellenõrzés... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
A Spry Sliding Panels vezérlõ . . . . . . . . . . . . . . . . . . . . . . . . . . 300
A Spry Sliding Panels vezérlõ szerkezetének összeállítása . . . . 301
Navigáció a csúszópanelen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Nagyfelbontású képek megjelenítése . . . . . . . . . . . . . . . . . . . . 308
Hogyan szerezzünk jeles minõsítést az érvényességi vizsgán? . . . 312
Nem tolakodó JavaScript kód készítése . . . . . . . . . . . . . . . . . . 312
Feltesszük az i-re a pontot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Utolsó simítások . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322