Bevezetés... 1 A könyvről... 1 A Dreamweaver CS4 újdonságai... 2 A Dreamweaver használata Mac-en vagy PC-n... 4 Hasznos tudnivalók a könyv olvasásához... 4 Amit átugorhatsz, ha...... 5 Nincsenek elvárásaink... 6 A könyv felépítése... 6 I. rész: Menő weboldalak készítése... 6 II. rész: Értékes webtervezési lehetőségek... 7 III. rész: Mire képes a multimédia és a JavaScript?... 8 IV. rész: Dinamikus tartalom... 8 V. rész: Top 10... 8 A könyvben használt ikonok... 9 Hol is kezdjük?... 9 I. rész: Menő webhelyek készítése... 11 1. fejezet: Hányféleképpen készíthetünk weblapokat?............... 13 Új webhely fejlesztése... 14 A webhely struktúrájának kezelése... 14 Ismerkedj meg az XHTML alapjaival... 16 A webtervezési lehetőségek összehasonlítása... 17 Élvezzük a CSS előnyeit!... 17 Régi stílusú oldalak újratervezése... 20 A keretek alkalmazási lehetőségei... 21 Dinamikus weboldalak készítése... 22 Eltérések az egyes böngészők között... 23 A Dreamweaver CS4 munkaterülete... 24 A munkaterület elrendezésének megváltoztatása... 25 A menüsáv... 26 A dokumentum eszköztár... 27 A dokumentumablak... 27 A dokkolópanelek... 27 Az Insert panel... 28 A Tulajdonságfigyelő (Property inspector)... 29 Az állapotsáv (Status bar)... 30 Beállítások módosítása... 31 2. fejezet: Webhelyek megnyitásaés létrehozása.................... 33 Új vagy létező webhely beállításai... 34 Webhelyek definiálása a Dreamweaverben... 34 Több webhely együttes szerkesztése és kezelése... 37 Dreamweaver.indb xi 7/26/09 9:48:33 PM
xii Dreamweaver CS4 Új oldalak létrehozása... 38 Indulás az üdvözlőképernyőről... 39 Új oldal létrehozása a New Document ablak segítségével... 39 Új oldalak fájlneve... 41 Az első oldal neve legyen index.html... 42 Oldalcímek adása... 43 Az első weboldalad megtervezése... 43 Címsorok formázása címkékkel... 43 Bekezdések és sortörések beszúrása... 44 Szöveg beillesztése más programból... 45 Képek elhelyezése... 46 Hivatkozások megadása... 52 Hivatkozás más oldalakra a webhelyen belül... 53 Hivatkozások egy oldalon belül horgonyokkal... 55 Más oldalakra mutató hivatkozások... 57 E-mail címekre mutató hivatkozások... 58 Az oldal tulajdonságainak módosítása... 59 Metacímkék a keresőmotorok számára... 63 Az oldal előnézetének megtekintése böngészőben... 65 3. fejezet: Kép megjelenítése az oldalon.......................... 67 Webes grafika létrehozása és optimalizálása... 68 Grafikák és fényképek átméretezése... 69 A legjobb képformátum kiválasztása... 71 Képek mentése webes használatra: az alapok... 72 JPEG-képek optimalizálása Photoshoppal... 73 GIF- és PNG-képek optimalizálása Photoshoppal... 74 Mennyire legyen kicsi?... 77 Képek beillesztése a Dreamweaverben... 78 Szöveggel körbefuttatott kép igazítása... 80 Képek szerkesztése a Dreamweaverben... 82 Kép körülvágása... 83 A fényerő és a kontraszt beállítása... 84 Kép élesítése... 85 Képek optimalizálása a Dreamweaverben... 85 Hogyan nyithatsz meg a Dreamweaverből egy képet Photoshopban vagy Fireworksben?... 87 Háttérkép beillesztése... 88 Hivatkozások elhelyezése képeken... 90 4. fejezet: Webhely kezelése, tesztelése és közzététele.............. 93 Webhelyed tesztelése különböző böngészőkben... 94 A böngészők közti eltérések figyelembevétele tervezéskor. 96 A Dreamweaver Browser Compatibility szolgáltatása... 97 Teszteld a művedet: jelentések készítése... 98 Hibás hivatkozások fellelése és javítása... 101 Hibás hivatkozások keresése... 102 A hibás hivatkozások kijavítása... 103 Hivatkozott fájlok kezelése... 104 Fájlok mozgatása és átnevezése... 105 Hivatkozások globális módosítása... 106 Dreamweaver.indb xii 7/26/09 9:48:33 PM
xiii Webhelyed közzététele webszerveren... 107 Hozzáférés a webszerverhez FTP-n keresztül... 108 Webhelyed feltöltése a szerverre... 110 A helyi és a távoli fájlok szinkronizálása... 112 Az elrejtési lehetőségek beállítása... 115 Hozd ki a legtöbbet a Dreamweaver webhelykezelési szolgáltatásaiból... 117 Tesztszerver használata... 117 Fájlok beadásának és kivételének engedélyezése... 117 Tervezői megjegyzések használata... 118 A közreműködési szolgáltatások engedélyezése... 122 Szerkesztési előzmények... 122 Címkék gyors szerkesztése a Quick Tag Editorral... 123 II. rész: Értékes webtervezési lehetőségek... 127 5. fejezet: Kaszkád stíluslapok................................ 129 A kaszkád stíluslapok bemutatása... 130 Ismerkedés a stílusok alapjaival... 131 Ismerkedés a stílusszelektorokkal... 133 Szabálydefiniálási lehetőségek... 138 A háttérben rejlő kód... 141 CSS-szabályok beállítási lehetőségeinek összehasonlítása... 142 A Type kategória... 142 A Background kategória... 144 A Block kategória... 146 A Box kategória... 147 A Border kategória... 149 A List kategória... 149 A Positioning kategória... 150 Az Extensions kategória... 152 A CSS Styles panel használata... 153 Áttekintő kép: az All mód... 154 A stílusok vizsgálata közelebbről: a Current mód... 155 Stílusok létrehozása, listázása és hozzárendelése oldalakhoz... 156 Váltás a Tulajdonságfigyelő CSS- és HTML-módja között... 157 Osztály- és címkestílusok használata a Dreamweaverben... 159 Stílusok létrehozása az osztályszelektorral... 159 Osztálystílusok alkalmazása a Dreamweaverben... 162 Osztálystílusok eltávolítása a Dreamweaverben... 163 Stílusok létrehozása a címkeszelektorral... 164 Létező stílus szerkesztése... 166 Létező stílusok átnevezése... 167 Egész oldalra vonatkozó stílusok, példáulhivatkozások stílusának létrehozása a Page Properties dialógusablakban... 169 Külső stíluslapok használata... 172 Külső stíluslap létrehozása... 172 Külső stíluslap hozzárendelése a weboldalhoz... 174 Dreamweaver.indb xiii 7/26/09 9:48:34 PM
xiv Dreamweaver CS4 Stílusok mozgatása, másolása és szerkesztése külső stíluslapokon... 176 Kész külső stíluslapok használata... 177 6. fejezet: CSS-elrendezések létrehozása......................... 179 CSS-elrendezések használata a Dreamweaverben... 180 Új oldal létrehozása CSS-elrendezéssel... 181 Egy CSS-elrendezés stílusainak szerkesztése... 183 Stílusok használatának be- és kikapcsolása a Firefoxban... 190 Számozatlan felsorolások formázása hivatkozásként... 191 Oldalak egyedi elrendezésének kialakítása CSS-szel... 199 Megjelenések létrehozása a dobozmodell használatával... 199 A margók és a helykitöltés működésének összehasonlítása... 200 A CSS megjelenítése különböző böngészőkben... 202 Egyedi CSS-elrendezés létrehozása... 204 Az oldal és a dobozok létrehozása... 205 A tartalmazó <div> elem stílusának megadása... 207 Oszlopok létrehozása... 209 Az utolsó simítások... 212 Elemek elrendezése AP Divekkel... 213 AP Divek létrehozása... 214 AP Divek takarási viszonyainak és láthatóságának módosítása... 216 Stílusütközések kezelése... 218 Tervezési idejű stíluslapok használata... 219 7. fejezet: A HTML-táblázatokról............................... 221 HTML-táblázatok létrehozása... 222 Táblázatok létrehozása Standard módban... 224 A táblázat megjelenésének megválasztása... 226 A táblázatok hozzáférhetőségének javítása... 228 Cellabeállítások megadása... 228 Több oszlop együttes formázása egy táblázatban... 230 Táblázat celláinak egyesítése és felosztása... 233 Táblázat adatainak rendezése... 235 Táblázat adatainak importálása más programokból... 236 Táblázatok használata elemek igazítására és térközök megadására... 238 Táblázatok egymásba ágyazása... 239 8. fejezet: Keretek az oldalakon................................ 241 Bevezetés a HTML-keretek alapjaiba... 242 Keretek működésének megértése... 244 Keretcsoport létrehozása a Dreamweaverben... 246 Keretcsoportok fájljainak elmentése... 250 Célpontok és hivatkozások megadása a keretekben... 252 Keretek elnevezése... 253 Hivatkozások megnyitása egy adott keretben... 256 Lehetséges célpontok összehasonlítása... 258 Keret tulajdonságainak módosítása... 259 Dreamweaver.indb xiv 7/26/09 9:48:34 PM
xv Keretszegélyek módosítása... 259 Keret méreteinek módosítása... 260 Görgetési és átméretezési beállítások módosítása... 261 Margó magasságának és szélességének beállítása... 262 9. fejezet: A tervezői munka összehangolása..................... 263 Sablonok... 264 Sablonok létrehozása... 265 Szerkeszthető és nem szerkeszthető területek létrehozása... 265 Új sablon létrehozása... 267 Oldal mentése sablonként... 271 Attribútumok szerkeszthetővé tétele... 273 Új oldal létrehozása sablonból... 275 Globális változtatások végrehajtása sablonokkal... 276 Sablon beazonosítása... 277 Sablonok hozzárendelése és leválasztása... 278 Elemek ismételt felhasználása a Library szolgáltatás segítségével... 279 Library-tételek létrehozása és használata... 280 Library-tételek létrehozása... 280 Library-tételek hozzáadása egy oldalhoz... 281 Library-tételek kiemelése... 282 Globális változtatások végrehajtása Library-tételekkel... 282 Library-tétel egy példányának szerkesztése... 283 Tracing Image használata elrendezés kialakításának támogatására... 284 III. rész: Mire képes a multimédia és a JavaScript?... 287 10. fejezet: Tedd webhelyedet interaktívvá a viselkedésekkel......... 289 A viselkedések alapjai... 289 Rollover kép létrehozása... 291 Viselkedés hozzáadása a weboldalhoz... 294 Képek lecserélése... 294 Az Open Browser Window viselkedés használata... 301 Több viselkedés megadása... 304 Viselkedés szerkesztése... 304 Új bővítmények telepítése a viselkedésekhez... 305 11. fejezet: Dobd fel az oldalaidat multimédiával.................. 309 Tudnivalók a multimédia-lejátszókról... 310 Az Adobe Flash használata... 311 Flash SWF-fájlok beillesztése... 312 A Flash tulajdonságainak beállítása... 314 A Flash lehetőségeit bővítő szkriptek... 318 Videó és hang használata a weben... 318 Népszerű videoformátumok összehasonlítása... 319 Népszerű hangformátumok összehasonlítása... 321 Dreamweaver.indb xv 7/26/09 9:48:35 PM
xvi Dreamweaver CS4 Hang- és videofájlok hozzáadása weboldalakhoz... 323 Hivatkozások létrehozása hang- és videofájlokra... 323 Hang- és videofájlok beillesztése... 325 Hang- és videofájlok beállításainak megadása... 326 Multimédia-beállítások megadása... 328 Flash-hang- és videofájlok hozzáadása... 330 Videofájlok átalakítása Flash-formátumba a Flashvideokódolóval... 332 A Java használata... 335 Java-kisalkalmazások beillesztése... 336 A Java paramétereinek beállítása... 336 Hivatkozások létrehozása PDF-fájlokra... 337 12. fejezet: Töltsd ki az űrt!................................... 339 HTML-űrlapok létrehozása... 340 Rádiógombok és jelölőnégyzetek létrehozása... 343 Szövegmezők és szövegterületek hozzáadása... 347 Legördülő listák létrehozása... 349 Az utolsó lépés: jóváhagyó és törlő gombok... 351 Ugrómenük használata... 353 CGI-szkriptek működése... 354 Űrlap és szkript együttműködésének beállítása... 355 Rejtett mezők használata... 358 13. fejezet: AJAX-szolgáltatások létrehozása a Spry segítségével..... 361 Az AJAX csodákra képes!... 361 Legördülő menük létrehozása AJAX-szal... 363 Összecsukható panelek létrehozása... 367 Fülek: több lap egy panelen... 371 Adatok ellenőrzése a Spry segítségével... 374 IV. rész: Dinamikus tartalom... 377 14. fejezet: Dinamikus webhely készítése: az első lépések........... 379 Ismerkedés a dinamikus webhelyekkel... 380 Mik a dinamikus webhelyek előnyei?... 380 Dinamikus webhely működés közben... 382 Dinamikus webhelyek létrehozása: alapfogalmak... 383 Ismerkedés az adatbázisokkal... 383 Dinamikus fejlesztési technológia kiválasztása... 385 Számítógéped beállítása dinamikus oldalak kiszolgálására... 388 Helyi webszerver létrehozása... 389 Jogosultságok beállítása... 392 Adatkapcsolat létrehozása a Dreamweaverben... 395 15. fejezet: Mozgásba hozott adatok............................ 403 A panelek felfedezése... 404 A Databases panel... 404 A Bindings panel... 405 Dreamweaver.indb xvi 7/26/09 9:48:35 PM
xvii A Server Behaviors panel... 406 A Components panel... 409 Rekordcsoport létrehozása... 409 Rekordcsoport használata az oldalon... 411 Ismétlődő területek... 412 Dinamikus kép hozzáadása... 415 Előkészületek... 415 A kép adatbázismezőhöz kapcsolása... 415 Navigáció dinamikus oldalon... 417 (Master-Detail Page Set) létrehozása... 420 Áttekintő és részletező oldalak (Master-Detail Page Set) létrehozása... 420 További lehetőségek adatbázis-vezérelt webhelyek használatára... 422 V. rész: Top 10... 425 16. fejezet: Tíz dolog, amire szükséged lehet..................... 427 Domainnév regisztrálása... 427 Védd meg e-mail címedet a levélszeméttől... 428 Hivatkozások felugró ablakokkal... 429 Kereskedelem a weben... 429 A forgalom nyomon követése... 430 Kérd ki a látogatók véleményét!... 430 Idő megtakarítása sablonok használatával... 431 Légy naprakész webes szabványok a W3.org-on... 431 A Dreamweaver funkcióinak kibővítése az Adobe.com oldalon. 431 Csinosítsd ki a címsort a Faviconnal... 432 Magyar oldalak... 432 17. fejezet: 10 ötlet, amivel időt spórolhatsz meg.................. 433 Tervezz a közönségednek... 433 Legyen egységes a megjelenés... 434 Alkalmazd a három kattintás szabályt... 435 Végy jó rajtot... 435 Használj osztott nézetet... 436 Tervezz Flash-ben... 436 Használd a megfelelő betűtípusokat... 437 Tartsd kéznél a gyakran használt funkciókat... 437 Készülj fel a gyors frissítésekre... 438 Készíts biztonsági másolatot... 439 Tárgymutató... 441 Dreamweaver.indb xvii 7/26/09 9:48:35 PM