TARTALOMJEGYZÉK I. rész Bevezetés a Dreamweaver világába 1. óra A Világháló és a Dreamweaver lehetõségei Mire képes a Dreamweaver?...................................... 4 A Dreamweaver technológiája..................................... 5 Webhelypéldák elemzése......................................... 6 Alapvetõ oldalelemek: szöveg, képek és hiperhivatkozások........... 6 Oldalelrendezés............................................. 8 Ûrlapok: adatgyûjtés internetes kereskedelemhez, hírlevelekhez vagy.. 10 bármi máshoz.............................................. 10 Multimédia................................................ 12 Interaktivitás............................................... 14 Webhelyek feltöltése az Internetre.............................. 16 Újrahasznosítható kódok és fájlok.............................. 17 Összefoglalás................................................. 18 Kérdezz-felelek............................................... 19 Gyakorlatok.................................................. 20 2. óra A Dreamweaver kezelése Ismerkedés a Dreamweaverrel.................................... 22 A Dreamweaver munkaterülete................................... 23 Az üdvözlõ képernyõ........................................ 23 A menüsor................................................ 26 A beszúró sáv.............................................. 30 A dokumentumablak........................................ 41 A Document eszköztár....................................... 41 Az állapotsor............................................... 42 Táblák és vizsgálók.......................................... 45 Helyi menük............................................... 48 Súgó........................................................ 49 Összefoglalás................................................. 50 Kérdezz-felelek............................................... 50 Gyakorlatok.................................................. 51 3. óra Webhelyek létrehozása Új webhely meghatározása...................................... 54 A Site Definition varázsló használata............................... 56 Az Editing Files lépés........................................ 57 Az Editing Files, Part 2 lépés................................... 57
iv Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt Az Editing Files, Part 3 lépés................................... 58 A Sharing Files lépés......................................... 59 Az összegzés áttekintése...................................... 60 A webhelygyorstár létrehozása................................. 60 A Files tábla használata......................................... 61 A Files tábla kibontása....................................... 62 Új fájlok létrehozása a Files táblán.............................. 63 A webhelyek szervezése........................................ 67 Összefoglalás................................................. 69 Kérdezz-felelek............................................... 69 Gyakorlatok.................................................. 70 4. óra Szövegkezelés: szöveg és listák Új weboldalak létrehozása....................................... 72 Fájlok mentése............................................. 73 Szöveg hozzáadása weboldalakhoz................................ 74 Szöveg másolása és beillesztése fájlokból......................... 75 Szövegformázás alkalmazása..................................... 77 Bekezdés és sortörés címkék.................................. 78 Oldaltulajdonságok beállítása.................................... 78 Az oldal átfogó megjelenésének beállítása........................ 79 Az általános címsortulajdonságok beállítása....................... 84 Oldalcím hozzádaása........................................ 85 Többszintû stíluslapok (CSS)..................................... 86 Szövegjellemzõk módosítása a tulajdonságvizsgálóban................. 87 A szöveg betûtípusának kiválasztása............................... 87 A szövegméret módosítása.................................... 88 A szöveg színének kiválasztása................................... 89 A Dreamweaver által létrehozott stílusok átnevezése................ 89 A szöveg igazítása............................................. 91 Listák létrehozása és szövegbehúzás............................... 92 Elválasztó hozzáadása az oldalakhoz: a vízszintes elválasztó............. 93 Elõnézet böngészõben.......................................... 94 Összefoglalás................................................. 97 Kérdezz-felelek............................................... 97 Gyakorlatok.................................................. 98 5. óra Hivatkozások hozzáadása a weboldalakhoz: hiperhivatkozások, horgonyok és levélcímzettek Viszonylagos és abszolút elérési utak vizsgálata...................... 100 Abszolút elérési utak........................................ 101 Dokumentumfüggõ elérési utak............................... 103 Webhelygyökérfüggõ elérési utak.............................. 105 Hiperhivatkozások hozzáadása a webhelyen belül................... 106 Hivatkozásszín-beállítások...................................... 109
Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt v Hosszú oldalak szervezése nevesített horgonyok segítségével........... 111 Láthatatlan elemek......................................... 112 Hivatkozás a nevesített horgonyokra........................... 113 A Point-to-File ikon használata................................... 114 Levélcímzett-hivatkozások...................................... 115 Összefoglalás................................................ 117 Kérdezz-felelek.............................................. 117 Gyakorlatok................................................. 118 6. óra Weblapok formázása CSS stíluslapok segítségével Szövegformázás a CSS segítségével............................... 120 Osztálykijelölõk létrehozása..................................... 123 Osztálykijelölõk alkalmazása................................. 126 Az osztálykijelölõk eltávolítása................................ 126 A stílusbeállítások vizsgálata.................................... 127 HTML-címkék felülbírálása...................................... 131 Stílusok szerkesztése.......................................... 133 Külsõ stíluslap létrehozása...................................... 134 Meglévõ CSS-stílusok mentése................................... 134 Új külsõ stíluslap létrehozása................................. 136 CSS-stílusok mentése külsõ stíluslapokra........................ 137 A többszintûség jelentése....................................... 137 Összefoglalás................................................ 139 Kérdezz-felelek.............................................. 139 Gyakorlatok................................................. 140 7. óra A színfalak mögött: a HTML kód vizsgálata A Code nézet................................................ 142 A weboldalak fejléce és törzse................................ 144 A Code nézet lehetõségei.................................... 145 A Coding eszköztár........................................... 147 A kódvizsgáló használata.................................... 148 HTML-címkék megtekintése és szerkesztése a Quick Tag Editor segítségével. 149 A címkeszerkesztõ üzemmód használata........................ 151 A beágyazó üzemmód használata.............................. 151 A HTML-beszúró üzemmód használata.......................... 151 Kódbeállítások meghatározása................................... 152 A kód színeire vonatkozó beállítások........................... 153 A kódformátumra vonatkozó beállítások........................ 154 A kódtippek beállításai...................................... 155 A kódátírás beállításai....................................... 156 A Microsoft Worddel létrehozott HTML kitisztítása.................... 157 Kézikönyvek................................................ 159 Összefoglalás................................................ 160 Kérdezz-felelek.............................................. 160 Gyakorlatok................................................. 161
vi Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt II. rész Képek hozzáadása és kezelése, multimédia 8. óra Képek megjelenítése Képek hozzáadása az oldalakhoz................................. 166 Helyettesítõ szöveg megadása................................... 168 A képjellemzõk............................................ 170 Képek szöveghez igazítása................................... 171 Képtípusok: GIF, JPEG és PNG.................................. 173 Képek szerkesztése a Dreamweaverben........................... 174 Képek optimalizálása a webes alkalmazáshoz.................... 175 Képes hivatkozások létrehozása.................................. 179 Képtérképek létrehozása....................................... 179 Forrópont hozzáadása a képtérképekhez........................ 181 A forrópontok igazítása...................................... 183 Összefoglalás................................................ 184 Kérdezz-felelek.............................................. 184 Gyakorlatok................................................. 185 9. óra A Dreamweavert kiegészítõ alkalmazások Ismerkedés a Photoshoppal..................................... 188 Képek módosítása a weboldalakon való használathoz................. 189 Képek elforgatása, körülvágása és átméretezése................... 189 A képek éleinek lágyítása.................................... 192 Módosítások visszavonása, biztonsági másolatok és............... 193 visszatérés az eredeti képhez................................. 193 Képek létrehozása............................................ 194 Szöveg hozzáadása a képekhez............................... 194 Alakzatok hozzáadása a képekhez................................ 196 A kép beillesztése a Dreamweaverbe........................... 198 Szûrõ hozzáadása váltóképekhez................................. 199 Képek darabokra szeletelése.................................... 202 Táblázatos adatok betöltése az Excelbõl........................... 203 Összefoglalás................................................ 204 Kérdezz-felelek.............................................. 204 Gyakorlatok................................................. 205 10. óra Flash és egyéb multimédia hozzáadása a weboldalakhoz A multimédia és a sávszélesség.................................. 208 A lejátszók.................................................. 208 Flash fájlok hozzáadása........................................ 210 Az <embed> és az <object> címke használata.................... 212 Filmek elõnézete a Dreamweaver dokumentumablakában........... 212 Flash szöveg létrehozása..................................... 213 Flash gombok létrehozása...................................... 215 PDF fájlokra mutató hivatkozások hozzáadása....................... 217 Hangfájlok hozzáadása a weboldalakhoz........................... 218
Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt vii A vezérlõk átméretezése..................................... 220 A hang ismétlése........................................... 221 Hivatkozás hangfájlokra..................................... 223 Java kisalkalmazások hozzáadása a weboldalakhoz................... 224 Összefoglalás................................................ 227 Kérdezz-felelek.............................................. 227 Gyakorlatok................................................. 228 11. óra Elemek kezelése az Assets tábla segítségével Mik azok az elemek?.......................................... 230 Elemek kezelése az Assets táblán................................. 230 A webhely elemeinek felsoroltatása............................... 231 Elemek elõnézete.......................................... 232 Kép elemek............................................... 233 Szín elemek............................................... 234 Hivatkozás elemek......................................... 235 Film elemek.............................................. 236 Parancsfájl elemek......................................... 236 Elemek hozzáadása a weboldalakhoz............................. 238 Kedvenc elemek létrehozása.................................... 239 Új elemek létrehozása az Assets táblán............................ 241 Elemek más webhelyre másolása................................. 243 Összefoglalás................................................ 243 Kérdezz-felelek.............................................. 243 Gyakorlatok................................................. 244 III. rész A weblapok elrendezése 12. óra Adatok megjelenítése táblázatokkal Adattáblázatok létrehozása...................................... 248 A táblázatok elemeinek kijelölése.............................. 250 A cellakitöltés, a térközök és a fejlécek beállításai................. 252 Csökkent látóképességûek számára is elérhetõ táblázatok........... 253 Táblázatok módosítása és tartalom beillesztése...................... 254 Adatok beszúrása és rendezése................................ 255 Sorok és oszlopok beszúrása és eltávolítása...................... 257 Az oszlopszélesség és a sormagasság módosítása.................. 258 A táblázat átméretezése és a szegélyek színének megváltoztatása..... 258 Cellák egyesítése és szétválasztása............................. 259 A cellatartalom igazítása..................................... 259 Színek a táblázatokban...................................... 260 Adatok mentése a táblázatokból................................. 261 Táblázatok egymásba ágyazása.................................. 262 Már létezõ szerkezeti táblázatok módosítása........................ 262 Összefoglalás................................................ 264 Kérdezz-felelek.............................................. 264 Gyakorlatok................................................. 265
viii Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt 13. óra Elemek elhelyezése a CSS segítségével A CSS dobozmodellje.......................................... 268 Egy CSS-oldalelrendezés elemzése................................ 269 A CSS-stílusok képi megjelenítése.............................. 271 A float és a clear jellemzõk................................... 273 A tárolók elhelyezése.......................................... 274 Div-ek beszúrása........................................... 274 Az azonosítókijelölõk használata.............................. 275 Segédkép használata.......................................... 276 Többszörös és környezeti kijelölõk meghatározása................... 278 Lebegõ oldalelemek........................................... 279 Az oszlopok elkészítése..................................... 280 A lebegõ elemek eltávolítása.................................. 283 Az oldalelrendezés középre igazítása.............................. 284 Az oldalelrendezés finomhangolása............................... 285 Összefoglalás................................................ 287 Kérdezz-felelek.............................................. 288 Gyakorlatok................................................. 289 14. óra CSS-stílusok mobileszközökön és nyomtatásban A CSS media jellemzõje........................................ 292 A stílusok megjelenésének megtekintése a Dreamweaverben........... 294 További stíluslapok beillesztése.................................. 295 A külsõ stíluslap médiatípusának megadása...................... 296 Második külsõ stíluslap csatolása.............................. 297 Stíluslap készítése nyomtatáshoz................................. 298 Elemek elrejtése........................................... 299 Az alapértelmezett betûtípus módosítása........................ 302 A stílusütközések azonosítása................................. 303 Hivatkozások elrejtése...................................... 304 Kizárólag nyomtatásban megjelenõ üzenetek..................... 306 A mobileszközök weblapstílusainak elõnézete...................... 307 Összefoglalás................................................ 309 Kérdezz-felelek.............................................. 309 Gyakorlatok................................................. 310 15. óra Könyvtárelemek és sablonok készítése Könyvtárelemek és sablonok kezelése az Assets táblán................ 312 Könyvtárelem létrehozása.................................... 313 Könyvtárelem létrehozása már létezõ objektumokból.............. 314 Új könyvtárelem létrehozása.................................. 315 Könyvtárelemek beillesztése a weblapra........................... 317 Könyvtárelemek módosítása.................................... 319 Sablonok készítése............................................ 321 Sablon létrehozása létezõ webhely alapján....................... 322 Új sablon létrehozása....................................... 323
Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt ix A sablon szerkeszthetõvé tétele............................... 323 Új szerkeszthetõ terület létrehozása............................ 326 Új választható terület létrehozása.............................. 327 Weblap készítése sablon alapján................................. 327 Sablonok módosítása és a kapcsolódó weblapok frissítése........... 329 CSS-stílusok a könyvtárelemekben és sablonokban................... 330 Összefoglalás................................................ 331 Kérdezz-felelek.............................................. 331 Gyakorlatok................................................. 332 IV. rész Dinamikus HTML és az AJAX: AP tárolók, viselkedések és XML 16. óra Navigációs sávok és menüsávok A navigáció alapjai............................................ 336 Váltóképek készítése.......................................... 337 Navigációs sáv készítése váltóképekkel és hivatkozásokkal............. 339 Menüsáv beillesztése.......................................... 342 Több menüsáv használata.................................... 344 A menüsáv CSS-stílusainak szerkesztése......................... 345 Hivatkozott weblapok megnyitása új böngészõablakban............... 348 Összefoglalás................................................ 349 Kérdezz-felelek.............................................. 349 Gyakorlatok................................................. 350 17. óra Dinamikus HTML és AP tárolók Mi is az a DHTML?............................................ 352 AP tároló beszúrása........................................... 353 Az AP tárolók elhelyezése.................................... 356 Háttérszín és háttérkép alkalmazása............................... 357 Az AP tárolók rétegsorrendje................................. 358 Az AP tárolók láthatóságának módosítása........................ 359 AP tárolók egymásba ágyazása................................... 360 Animáció idõszalagokkal....................................... 362 Animáció létrehozása....................................... 362 A Timelines tábla használata.................................. 363 Egyszerû animáció rögzítése.................................. 364 Automatikus és ismétlõdõ lejátszás............................. 366 AP tároló elhelyezése az idõszalagon........................... 367 Kulcskockák beszúrása...................................... 368 Összefoglalás................................................ 370 Kérdezz-felelek.............................................. 370 Gyakorlatok................................................. 371 18. óra Viselkedések használata kulcs az interaktivitáshoz Mik is azok a viselkedések?..................................... 374 A Dreamweaverben elérhetõ források.......................... 375 Ismerkedés a Dreamweaver viselkedéseivel...................... 375
x Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt Események............................................... 378 Viselkedések hozzárendelése objektumokhoz....................... 380 Elemek megjelenítése és elrejtése................................ 382 Üres hivatkozás létrehozása a viselkedés elindításához............. 383 Rejtett AP tároló létrehozása.................................. 383 A Show-Hide Elements viselkedés hozzárendelése................. 384 A viselkedést kiváltó esemény meghatározása.................... 385 A viselkedés módosítása..................................... 386 Új böngészõablak megnyitása................................... 386 Elõugró üzenetek............................................. 388 Több viselkedés hozzárendelése egyazon objektumhoz............... 389 Szöveg megjelenítése tárolóban.................................. 390 A Go to URL viselkedés használata............................... 391 Elhúzható AP tárolók használata................................. 391 Összefoglalás................................................ 393 Kérdezz-felelek.............................................. 394 Gyakorlatok................................................. 395 19. óra Tartalom és XML megjelenítése a Spry keretrendszer segítségével A Spry keretrendszer használata.................................. 398 Külsõ JavaScript és CSS fájlok................................. 400 Spry-hatások alkalmazása....................................... 402 A Squish hatás alkalmazása................................... 403 Az Appear/Fade hatás alkalmazása............................. 404 Füles és összecsukható táblák, valamint harmonikák használata......... 405 Füles táblák használata...................................... 406 Összecsukható táblák használata.............................. 408 Harmonikák használata...................................... 408 A Spry-táblák CSS-stílusainak szerkesztése....................... 409 XML megjelenítése a weblapon.................................. 411 Mi is az az XML?........................................... 411 Pár szó az AJAX-ról......................................... 413 Spry XML-adathalmaz készítése............................... 414 Spry Repeat List beillesztése.................................. 415 Összefoglalás................................................ 415 Kérdezz-felelek.............................................. 416 Gyakorlatok................................................. 416 V. rész Felhasználói adatok fogadása ûrlapokkal 20. óra Ûrlapok készítése és adatgyûjtés a látogatóktól Ûrlap készítése............................................... 420 Szövegmezõk elhelyezése az ûrlapon........................... 422 A szövegmezõk jellemzõi.................................... 424 Választógombok és jelölõnégyzetek elhelyezése az ûrlapokon.......... 428
Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt xi Listamezõk és lenyíló listák az ûrlapokon.......................... 430 Nyomógombok és képgombok hozzáadása az ûrlapokhoz............. 433 Elküldõ és alaphelyzetbe állító gombok beszúrása................. 434 Képgomb beszúrása........................................ 435 Általános célú gombok beszúrása.............................. 435 Ugrómenü készítése........................................... 436 Összefoglalás................................................ 438 Kérdezz-felelek.............................................. 439 Gyakorlatok................................................. 440 21. óra Bevezetés a parancsfájlok világába: ûrlapok adatainak elküldése és kezelése Ûrlapok adatainak ellenõrzése a Validate Form viselkedéssel........... 442 A Spry keretrendszer ellenõrzõ objektumai......................... 445 Ûrlapok adatainak fogadása..................................... 446 A FormMail parancsfájl használata............................. 448 Rejtett mezõk használata..................................... 449 Adatok biztonságos átvitele..................................... 451 Fájl feltöltése ûrlapról.......................................... 452 Weblap elõkészítése ASP, ASP.NET, JSP, PHP és CFML parancsfájlok alkalmazásához.............................................. 453 Összefoglalás................................................ 456 Kérdezz-felelek.............................................. 457 Gyakorlatok................................................. 458 VI. rész Projektek feltöltése és webhelyek kezelése 22. óra Webes projektek feltöltése és megosztása A kiszolgálókapcsolat engedélyezése.............................. 462 Távoli webhely használatba vétele............................. 462 Az Advanced lap beállításai.................................. 467 A webhely áttelepítése a távoli kiszolgálóra......................... 468 A Dreamweaver webhelykezelési lehetõségei....................... 470 A Check In/Check Out lehetõség bekapcsolása................... 470 Fájlok átvitele................................................ 471 Létezõ webhely betöltése....................................... 473 Összefoglalás................................................ 474 Kérdezz-felelek.............................................. 474 Gyakorlatok................................................. 476 23. óra Webhelyek kezelése és szerkesztése Helyi és távoli webhelyek kezelése............................... 478 A helyi és távoli webhely fájljainak összehangolása................ 478 Oldaltérkép készítése.......................................... 482 Hivatkozások kezelése...................................... 484 Jegyzetek csatolása a weblapokhoz............................... 486
xii Tanuljuk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt Jelentések készítése a webhelyrõl................................ 488 Összefoglalás................................................ 489 Kérdezz-felelek.............................................. 490 Gyakorlatok................................................. 490 24. óra A Dreamweaver testreszabása Egyéni építõelemek készítése................................... 492 Billentyûparancsok szerkesztése................................. 495 Menüparancsok létrehozása..................................... 497 Parancs rögzítése.......................................... 498 Parancsok mentése a History tábláról........................... 499 Kedvencek elhelyezése a beszúró sávon........................... 501 A Dreamweaver képességeinek bõvítése külsõ bõvítményekkel......... 502 Keresések alkalmazása, mentése és megosztása..................... 504 Összefoglalás................................................ 506 Kérdezz-felelek.............................................. 507 Gyakorlatok................................................. 507 Függelékek A függelék Források Dreamweaver-fejlesztés........................................ 511 Webfejlesztés általában......................................... 512 Dreamweaver-bõvítmények..................................... 512 CSS-stílusok................................................. 512 Spry keretrendszer............................................ 512 Parancsnyelvek CGI, JavaScript és kiszolgálóoldali parancsfájlok....... 513 CGI..................................................... 513 JavaScript................................................ 513 Kiszolgálóoldali parancsfájlok................................. 513 Akadálymentesítés............................................ 513 Használhatóság.............................................. 513 Letöltések................................................... 514 Böngészõk.................................................. 514 Szervezetek................................................. 514 Szakkifejezések jegyzéke 515 Tárgymutató 527