1 Installieren, aktivieren und registrieren 21

1.1 Vollversion, Trial und Update 21

1.2 Für Dreamweaver-»Neulinge« 23
1.2.1 Dreamweaver MX 2004 installieren 24
1.2.2 Installation auf Multi-User-Systemen 28

1.3 Für Benutzer von früheren DW-Versionen 29
1.3.1 Upgrade 29
1.3.2 Verschiedene Sprachversionen auf einem Rechner 29
1.3.3 Vorbereitungsarbeiten vor der Installation 30
1.3.4 Nach der Installation 32
1.3.5 Fehlermeldung beim Starten von Dreamweaver 36
1.3.6 Eigene Snippets importieren 37
1.3.7 Konflikte mit Template-Seiten aus Dreamweaver 4 38
1.3.8 Neu in Dreamweaver MX 2004 43

1.4 Update 7.0.1 nachträglich installieren 44

1.5 Für FrontPage-Umsteiger (Windows) 47
1.5.1 Installation von Dreamweaver MX 2004 48
1.5.2 Nach der Installation 48

1.6 Dreamweaver MX 2004 aktivieren 51
1.6.1 Lizenzbestimmungen: »30 + 30« und »1 + 1« 51
1.6.2 Produkt aktivieren 52

1.7 Dreamweaver MX 2004 registrieren 57

1.8 Lizenz transferieren 58


2 Erste Schritte 61

2.1 Arbeitsbereich einrichten 61
2.1.1 Arbeitsbereich für die Windows-Version 61
2.1.2 Arbeitsbereich für die Apple-Version 63

2.2 Voreinstellungen anpassen 64
2.2.1 Allgemein 64
2.2.2 Bedienfelder 66
2.2.3 Codeformat 67
2.2.4 Codehinweise 69
2.2.5 Codeumschreibung 69
2.2.6 CSS-Stile 70
2.2.7 Dateitypen und Editoren 71
2.2.8 Ebenen 72
2.2.9 Eingabehilfen 72
2.2.10 Farbe für Code 72
2.2.11 Layoutmodus 74
2.2.12 Markierung 74
2.2.13 Neues Dokument 75
2.2.14 Office kopieren und einfügen (nur MB) 75
2.2.15 Schriftarten 76
2.2.16 Site 76
2.2.17 Statusleiste 77
2.2.18 Unsichtbare Elemente 78
2.2.19 Validator 78
2.2.20 Vorschau im Browser 79

2.3 Tastenkürzel anpassen 81
2.3.1 Factory Shortcuts 81
2.3.2 Eigene Shortcuts definieren 82
2.3.3 Shortcuts ändern und löschen 86
2.3.4 Dreamweaver überschreibt active set.txt 87

2.4 DW als Quelltext-Editor im Internet Explorer (Windows) 87

2.5 Kontrasteinstellungen (nur Windows) 91

2.6 Screen Reader und Tastaturnavigation (Windows) 93
2.6.1 Navigieren in den Seitenfenstern 93
2.6.2 Navigieren in Dialogfenstern 94


3 Panels, Fenster & Co. 95

3.1 Die Panels von Dreamweaver MX 2004 95
3.1.1 Die Menüleiste 96
3.1.2 Die Einfügen-Leisten 96
3.1.3 Der Tag-Selektor 101

3.2 Der Eigenschafteninspektor 101
3.2.1 Eigenschafteninspektor: Texte und Zellen 101
3.2.2 Eigenschafteninspektor: Tabellen 102
3.2.3 Eigenschafteninspektor: Grafiken 102
3.2.4 Eigenschafteninspektor: Ebenen 102

3.3 Der Ergebnisse-Inspektor 103

3.4 Die Dreamweaver MX 2004-Fenster 103

3.5 Hilfsmittel und Eingabehilfen 109
3.5.1 Lineale und Raster 109
3.5.2 Diverse Eingabehilfen 110


4 Der Extension Manager 113

4.1 Erweiterungen 113
4.1.1 Erweiterungen -was ist das? 113
4.1.2 Wo finde ich diese Erweiterungen? 114
4.1.3 Was kosten Erweiterungen? 114

4.2 Arbeiten mit dem Extension Manager 116
4.2.1 Erweiterungen installieren 117
4.2.2 Deaktivieren, aktivieren und importieren 121
4.2.3 Erweiterung löschen 122

4.3 Eigene Erweiterungen erstellen 124


5 Site-Verwaltung 127

5.1 Mit der Site-Verwaltung arbeiten 127
5.1.1 Vorteile von Sites in Dreamweaver MX 2004 127

5.2 Site definieren 139
5.2.1 Site definieren 140
5.2.2 RDS und FTP-Server definieren 152

5.3 Sites exportieren, importieren und sichern 154

5.4 Arbeiten im Team 154
5.4.1 Aus- und Einchecken 154
5.4.2 PC & Laptop als Team 155

5.5 Design Notes 155
5.5.1 Design Notes erstellen und mit Datei verknüpfen 156


6 Exkurs: Accessability & Usability 159

6.1 Accessability 159
6.1.1 WAI-Richtlinien 160
6.1.2 eAccessibility (EU) 161
6.1.3 BITV (Deutschland) 161
6.1.4 Artikel 7 BV (Österreich) 167
6.1.5 Section 508 167
6.1.6 Accessability in der Praxis 168
6.1.7 Browser 168
6.1.8 Farben & Co. 170

6.2 Usability 173
6.2.1 Formulare benutzerfreundlich gestalten 173
6.2.2 Eigene 404-Seite 1 74
6.2.3 Breadcrumbs 1 75

6.3 Suchmaschinen 177
6.3.1 Meta-Tags 177
6.3.2 Robots.txt 184


7 Workshop I: Grafiken in Dreamweaver MX 2004 bearbeiten und optimieren 187

7.1 Der Eigenschafteninspektor für Grafiken 187
7.1.1 Grafik bearbeiten 187
7.1.2 Grafik in Fireworks optimieren 189
7.1.3 Grafik zuschneiden 190
7.1.4 Grafik neu auflösen 191
7.1.5 Helligkeit und Kontrast ändern 192
7.1.6 Scharf stellen 193

7.2 Where to go 193


8 Workshop II: Word-HTML & Co. bereinigen 195

8.1 Unnötiger Ballast im Quelltext? 195

8.2 Quellcode ausmisten 196

8.3 Where to go 201


9 Arbeiten mit Frames 203

9.1 Pro & Contra Frames 203
9.1.1 Frames - nein, danke! 203
9.1.2 Framing - niemals! 206
9.1.3 Frames - ja, bitte! 208
9.1.4 Was nicht passieren sollte 208

9.2 Frameset und Frameseiten erstellen 209
9.2.1 Aufbau einer Seite mit Frames 210
9.2.2 Frameset in Dreamweaver MX 2004 definieren 212

9.3 Arbeiten mit Frames 219
9.3.1 Frames einfügen 220
9.3.2 Frames löschen 221
9.3.3 Hyperlink einfügen 221
9.3.4 Titel eines Framesets nachträglich ändern 222

9.4 Wozu dient der "noframes"-Bereich? 223

9.5 iFrames 224
9.5.1 iFrame in Dreamweaver MX 2004 einfügen 224


10 Arbeiten mit Ebenen 227

10.1 Was sind Ebenen? 227
10.1.1 Pro & Contra Ebenen 227

10.2 Ebene einfügen 228
10.2.1 Aufbau einer Ebene 229
10.2.2 Der Z-lndex 231
10.2.3 Größe und Lage verändern 232
10.2.4 Das Ebenen-Fenster 233

10.3 Verschachtelte Ebenen 233
10.3.1 Verschachtelte Ebenen einfügen 234


11 Arbeiten mit Tabellen 235

11.1 Pro & Contra Tabellen 235

11.2 Aufbau von Tabellen 235

11.3 Tabellen einfügen 237

11.4 Seitenlayout mit Tabellen 239
11.4.1 Zellen verbinden 239
11.4.2 Zellen teilen 241
11.4.3 Zeilen und Spalten einfügen 241
11.4.4 Zeilen und Spalten löschen 242
11.4.5 Höhen- und Breitenangaben löschen und konvertieren 242
11.4.6 Tabellen verschachteln 242
11.4.7 Platzieren von Text und Bildern 243
11.4.8 Tabelle formatieren 243


12 Workshop III: Inhalte aus Microsoft Word & Excel einfügen 245

12.1 Inhalte aus Word einfügen 245
12.1.1 Teile einer Word-Datei einfügen 245
12.1.2 Inhalt aus Word-Dokument einfügen 246

12.2 Inhalte aus Excel einfügen 247
12.2.1 Ausgewählte Tabelle ohne Formatierung einfügen 247
12.2.2 Ausgewählte Tabelle mit Formatierung übernehmen 248
12.2.3 Tabelle und Grafik aus Arbeitsblatt importieren 250


13 Workshop IV: Tabelle mit »runden Ecken« und unterschiedlichen Seitenrahmen 255

13.1 Vorbereitungsarbeiten 255
13.1.1 Rechteck mit abgerundeten Ecken und Schlagschatten 255
13.1.2 Slices einfügen und exportieren 257

13.2 Tabelle erstellen 259

13.3 Where to go 264


14 Workshop V: Navigationsleiste mit Kateireitern 265

14.1 Vorbereitungsarbeiten 265

14.2 Navigation erstellen 269
14.2.1 Navigationstabelle 269
14.2.2 Inhaltstabelle 271
14.2.3 Abschlusstabelle 272

14.3 Where to go 273


15 CSS-Stile 275

15.1 CSS-Basics 275
15.1.1 CSS-Regeln 275
15.1.2 Aufbau von CSS-Regeln 277
15.1.3 Zentrale Formate, Klassen und Container 278
15.1.4 CSS-Kurzschrift 278
15.1.5 Maßeinheiten 280

15.2 Formate definieren und zuweisen 280

15.3 Stile in externe CSS-Datei exportieren 282


16 CSS-P-Design 283

16.1 Was ist CSS-P? 283

16.2 CSS-P vs. Tabellenlayout 283
16.2.1 Tabellenlayout 283
16.2.2 Tabellenloses Layout 284

16.3 Wie funktioniert CSS-P? 284
16.3.1 Grundlagen 284
16.3.2 Einfaches Seitenlayout mit CSS-P erstellen 284


17 Workshop VI: Dateien von "font"-Tags auf CSS umstellen 291

17.1 Vorbemerkungen 291
17.1.1 Visual Markup vs. Generic Markup 291

17.2 "font"-Tags entfernen 292
17.2.1 Spezifisches Tag entfernen 293
17.2.2 Weitere Formatierungen entfernen 294
17.2.3 Die Tags "b" und "i" in "strong" und "em" umwandeln 294
17.2.4 HTML optimieren 295

17.3 Formatierung per CSS durchführen 296
17.3.1 Schrift und Hyperlinks 296
17.3.2 "strong" aus Navigation entfernen 299
17.3.3 ID für DIV definieren und bearbeiten 300
17.3.4 Überschriften h1 und h3 definieren und zuweisen 303
17.3.5 Fußleiste formatieren 305
17.3.6 CSS-Stile exportieren 307

17.4 Where to go 308


18 Workshop VII: Farbige Scrollbalken und verschiedene Textlinks auf einer Seite 311

18.1 Scrollbalken 311

18.2 Textlinks 313
18.2.1 Textlinks in Dreamweaver MX 2004 definieren 314
18.2.2 Verschiedene Textlinks auf einer Seite 316

18.3 Where to go 319


19 Workshop VIII: Andere Hintergrundfarbe der Tabellenzelle bei onMouseOver 321

19.1 Hintergrundfarbe ändern 321
19.1.1 Bei weißem Hintergrund 321
19.1.2 Bei farbigem Hintergrund 323

19.2 Where to go 325


20 Workshop IX: Formular erstellen, Felder farblich anpassen und validieren 327

20.1 Formular mit verschiedenen Formularelementen erstellen 327

20.2 Formularelemente farblich anpassen 330

20.3 Formularelemente validieren lassen 331
20.3.1 Textfelder überprüfen 332
20.3.2 E-Mail-Adresse überprüfen 332
20.3.3 Checkbox überprüfen 333

20.4 Where to go 334


21 Workshop X: Tabellenlayout in CSS-P umwandeln 335

21.1 Vorbereitungsarbeiten 335

21.2 Vorbemerkungen 335
21.2.1 Seiten in CSS-P umwandeln 335
21.2.2 Arbeitsschritte 336

21.3 Seite aufteilen und DIVs definieren 336
21.3.1 Seite in DIVs aufteilen 337
21.3.2 DIV #inhalt 338
21.3.3 DIV #content 340
21.3.4 CSS-Stile in der Entwurfsphase anzeigen 341

21.4 Tags entfernen 344

21.5 DIVs positionieren 346
21.5.1 #content 346
21.5.2 #oben 347
21.5.3 #navilinks 349
21.5.4 #inhalt 350
21.5.5 #naviunten 351
21.5.6 #footer 352
21.5.7 Seite zentrieren 352
21.5.8 Klasse für die Codebeispiele erstellen 353
21.5.9 Zusammenfassung 354

21.6 Where to go 355


22 Ereignisse, Verhalten und Extensions 357

22.1 Vorbemerkungen 357
22.1.1 Der Null-Hyperlink 358
22.1.2 Ereignisse und Verhalten für Bilder 358
22.1.3 Eins, zwei, drei oder mehr? 358

22.2 Ereignisse 359

22.3 Standard-Verhalten in Dreamweaver 362
22.3.1 Bild austauschen und Bildaustausch wiederherstellen 363
22.3.2 Bilder vorausladen 365
22.3.3 Browser überprüfen 365
22.3.4 Browserfenster öffnen 366
22.3.5 Ebene ziehen 367
22.3.6 Ebenen ein-/ausblenden 367
22.3.7 Ebenentext festlegen 368
22.3.8 Eigenschaft ändern 369
22.3.9 Formular überprüfen 370
22.3.10 Gehe zu URL 370
22.3.11 JavaScript aufrufen 371
22.3.12 Navigationsleistenbild festlegen 371
22.3.13 Plug-in überprüfen 371
22.3.14 Popup-Meldung 371
22.3.15 Popup-Menü anzeigen 372
22.3.16 Shockwave oder Flash-Film steuern 372
22.3.17 Sound abspielen 373
22.3.18 Sprungmenü 373
22.3.19 Statusleistentext festlegen 373
22.3.20 Text von Textfeld einstellen 375
22.3.21 Text vom Frame einstellen 376
22.3.22 Die Zeitleiste 376

22.4 Serververhalten in Dreamweaver MX 2004 376

22.5 Extensions von Drittanbietern 377


23 Workshop XI: »Bilder werden geladen « anzeigen lassen (ohne Flash) 379

23.1 Vorbereitungsarbeiten 379

23.2 Ebene einfügen 380

23.3 Verhalten hinzufügen 381

23.4 Where to go 383


24 Workshop XII: Web-Fotoalbum erstellen und anpassen 385

24.1 Vorbereitungsarbeiten 385
24.1.1 WebFotoAlbum226.mxp installieren 385
24.1.2 Macromedia Fireworks 385
24.1.3 Bilder vorbereiten 386

24.2 Web-Fotoalbum aus Vorlage erstellen 388
24.2.1 Album aus fertiger Vorlage erstellen 388
24.2.2 Web-Fotoalbum anpassen 398

24.3 Web-Fotoalbum ohne Vorlage 400

24.4 Eigene Album-Vorlage erstellen 403
24.4.1 Datei template-thumbnail.html erstellen 406
24.4.2 Datei template.html erstellen 408

24.5 Where to go 410


25 SSI - Server-Side Include 411

25.1 SSI - Server Side Include 411
25.1.1 SSI-Syntax 411
25.1.2 Includes in ASP-Seiten 412
25.1.3 Includes in PHP-Seiten 412

25.2 Includes in Dreamweaver MX 2004 413
25.2.1 Includes einfügen 413
25.2.2 Includes bearbeiten 415
25.2.3 Include-Datei umbenennen 416


26 Arbeiten mit dynamischen Seiten 419

26.1 Arbeiten mit Datenbanken 419
26.1.1 Testserver einrichten 419
26.1.2 Testserver starten 421

26.2 Datenbankanbindung 421

26.3 Datenbankanbindung in Dreamweaver erstellen 423
26.3.1 Für ASP 423
26.3.2 Für PHP 425
26.3.3 Verbindungsdatei anpassen 427

26.4 Ausgabeseite erstellen 428
26.4.1 ASP-Seite 428
26.4.2 ASP-Code im Quelltext ändern, eigenen Code einfügen 431
26.4.3 PHP-Seite 432
26.4.4 PHP-Code im Quelltext ändern, eigenen Code einfügen 435

26.5 Wie kommen meine Tabellen auf den Server? 435
26.5.1 Access-Datenbank 436
26.5.2 MySQL-Datenbank und Tabellen 436

26.6 Rechtevergabe auf dem Server 438


27 Workshop XIII: Formulardaten aus Feedback-/Kontakt-Formular versenden 439

27.1 Formularseite erstellen 439

27.2 Formulardaten versenden 440
27.2.1 Mit mailto: 440
27.2.2 Mit Formmailer 441
27.2.3 Mit ASP 441
27.2.4 Mit PHP 443


28 Workshop XIV: Passwortgeschützten Bereich einrichten 445

28.1 Passwortgeschützte Bereiche einrichten 445

28.2 Benutzer anmelden 445
28.2.1 Mit ASP 445
28.2.2 Mit PHP 447
28.2.3 Fehlerseite erstellen 448

28.3 Zugriff auf Seite beschränken 448
28.3.1 ASP 448
28.3.2 PHP 448

28.4 Benutzer abmelden 448
28.4.1 ASP 448
28.4.2 PHP 449

28.5 Where to go 449


29 Vorlagen erstellen und bearbeiten 451

29.1 Vorlagen in Dreamweaver MX 2004 451
29.1.1 Die Dreamweaver MX 2004 Vorlagen-Syntax 451

29.2 Vorlagen erstellen 452
29.2.1 Bearbeitbare Bereiche einfügen 453
29.2.2 Wiederholende und optionale Bereiche 455


30 Vorlagen anwenden und entfernen 459

30.1 Vorlagen-Seiten erstellen 459

30.2 Vorlagen auf Datei anwenden 460

30.3 Vorlagen aus Dokument entfernen 461

30.4 Dateien ohne Vorlagen-Code exportieren 462


31 Vorlagen-Seiten bearbeiten 463

31.1 Mit bearbeitbaren Bereichen arbeiten 463

31.2 Mit wiederholenden Tabellen arbeiten 463

31.3 Mit wiederholenden Bereichen arbeiten 464

31.4 Mit optionalen Bereichen arbeiten 464


32 Bestehende Vorlagen bearbeiten 467

32.1 Neue Vorlagen ändern 467

32.2 Vorlagen nachträglich ändern 468


33 Snippets und Bibliothekselemente 471

33.1 Snippets 471
33.1.1 Snippets anwenden 472
33.1.2 Snippets bearbeiten 474
33.1.3 Eigene Snippets erstellen 474

33.2 Bibliothekselemente 475
33.2.1 Neues Bibliothekselement erstellen 476
33.2.2 Bibliothekselement einfügen 477
33.2.3 Bibliothekselement vom Original trennen 478
33.2.4 Bibliothekselemente exportieren 478


34 Audio- und Videodateien 481

34.1 Multimedia auf Webseiten 481

34.2 Audio auf Webseiten 485
34.2.1 Audiodateien einbinden 485
34.2.2 Sound abspielen 487

34.3 Videos auf Webseiten 487


35 Flash-Filme und -Elemente 489

35.1 Flash-Film einbinden 489

35.2 Flash-Schaltfläche erstellen und einfügen 490

35.3 Flash-Text erstellen und einfügen 491

35.4 Bild-Viewer verwenden 493


36 Workshop XV: Java-Applets 499

36.1 Mit Java-Applets arbeiten 499
36.1.1 Aufbau des "applet"-Elements 500
36.1.2 Aufbau des "object"-Elements 501

36.2 Zebu's eraser 502
36.2.1 Vorbereitungsarbeiten 502
36.2.2 Applet in Dreamweaver MX 2004 mit "applet" einfügen 503
36.2.3 Applet in Dreamweaver MX 2004 mit "object" einfügen 506
36.2.4 ClasslD hinzufügen 510

36.3 Where to go 511


I Codefragmente 513
I.1 Codefragmente 513


II Menübefehle 519

II.1 Befehle der Menüleiste 519


III Tastenkürzel 531

III.1 Macromedia Standard 531
III.1.1 Tastenkürzel für Befehle der Menüleiste 531
III.1.2 Tastenkürzel für Arbeiten in der Codeansicht 534
III.1.3 Tastenkürzel im Site-Fenster 536
III.1.4 Arbeiten im Dokumentfenster 537

III.2 BBEdit 537
III.2.1 Tastenkürzel für Befehle der Menüleiste 537
III.2.2 Tastenkürzel für Codebearbeitung 541
III.2.3 Tastenkürzel für Arbeiten im Site-Fenster 542
III.2.4 Tastenkürzel für das Arbeiten mit Dokumenten 543


Stichwortverzeichnis 545