00D.qxd
11/5/2007
9:59 AM
Page iii
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
00D.qxd
11/5/2007
9:59 AM
Page iv
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
00D.qxd
11/5/2007
9:59 AM
Page v
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
00D.qxd
11/5/2007
9:59 AM
Page vi
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
