Einleitung 17

1. Das ist neu in Dreamweaver MX 2004 19

1.1 Neuerungen in Dreamweaver MX 2004 20

1.2 Entfallene Features 21


2. Die Siteverwaltung 23

2.1 Anlegen einer Site 24
Die erste Site in einer Minute 24
Schnelles Arbeiten mit der Dateien-Bedienfeldgruppe 27
Erweiterte Einstellungen 36
Sichern Sie Ihre Sites 40
Die Sitebedienung im Detail 41
Das Bedienfeld Elemente 43

2.2 Dateien abrufen und bereitstellen 47

2.3 Hyperlinks verwalten 51
Suche nach verwaisten Dateien 51
Hyperlinks siteübergreifend überprüfen und reparieren 52
Hyperlinks site-übergreifend ändern 54

2.4 Verwaltung und Planung mit der Sitemap 55
Arbeiten mit der Sitemap 59

2.5 Teamwork: gemeinsames Arbeiten an einer Site 60
Design Notes 60
Berichte 66


3. Das Seitenlayout 69

3.1 Tabellen versus Ebenen 70
Tabellen - das Prinzip, die Einschränkungen 70
DW-Plus: Drei Tabellenbearbeitungsweisen 71
Ebenen - das Prinzip, die Einschränkungen 75
Tabellen und Ebenen kombinieren 76

3.2 Schnelleinstieg: Seitenvorlagen 76
Dokument mit Seitenvorlage erstellen 77
Seitenvorlagen anpassen 79

3.3 Tabellen in der Layoutansicht 79
Portalseite mit Tabellen 80
Die Layoutansicht aktivieren 80
Layoutzellen und -tabellen erstellen 81
Komplexe Layouttabellen erstellen 84
Layouttabellen verschachteln 88
Layouttabellen bearbeiten und formatieren 91
Layoutbreite - fest oder variabel? 94
Voreinstellungen der Layoutansicht 99
Tipps und Tricks zu Layouttabellen 100

3.4 Tabellen in der Standardansicht 100
Tabellenkunde: HTML 101
Tabellen erstellen 103
Tabellen verschachteln 106
Tabellen und Zellen: Auswahl festlegen 106
Tabelleninhalte einstellen 109
Tabellen und Zellen gestalten 113
Tabelleneigenschaften anpassen 116
Zelleneigenschaften anpassen 119
Tabellen ergänzen, verbinden und teilen 122
Tabellenumbau im Detail 127
Größen einstellen 132
Größenänderung im Detail 133
Fehlerbehandlung bei Tabellen 137
Arbeitserleichterung 140

3.5 Gestaltungsideen mit Tabellen 143
Trendige Haarlinien 143
Tabellen mit gepunkteten Rahmen 144
Senkrechte Trennlinien 145
Bilder rahmen 145
Tabellen und Stylesheets 146
Hintergrundbilder in Tabellen 146
Tabellen mit abgerundeten Ecken 147
Tabellen nebeneinander stellen 148
Tabellen mit Schattenwurf 148
Tabellenzeilen mit Rollover-Effekt 149
Tabellenzellen mit Rollbalken 150

3.6 Layout mit Ebenen 150
Firmenseite mit Ebenen erstellen 151
Ebenen auswählen 156
Ebenen verwalten - die Ebenen-Palette 157
Ebeneneigenschaften einstellen 163
Ebenen verschachteln und gruppieren 168
Ebenen und ihr Inhalt 172
Voreinstellungen für Ebenen 178
Tipps und Tricks zu Ebenen 180

3.7 Gestaltungsideen mit Ebenen 181
Vorladeebene für Dokument 181
Ebenen ziehen 183
Ebenentext festlegen 187

3.8 Ebenen in Tabellen konvertieren 190
Mit Ebenen layouten, mit Tabellen ins Web 190
Tipps und Tricks zur Konvertierung 196
Tabellen in Ebenen konvertieren 196

3.9 Layouten mit Tracing-Bildern 198
Vom Photoshop ins Web 198

3.10 Seitenlayout mit Fireworks 201
Seitenentwurf zeichnen 202
Seite teilen 206
Rollover-Navigationsleiste anlegen 206
Raffinierter Bildwechsel 209
Seite in Dreamweaver zusammensetzen 213

3.11 Arbeiten mit Frames 215
Schnelleinstieg - das Prinzip 215
Fotowebseite mit Frames 217
Frameseiten-Eigenschaften einstellen 220
Die Frameset-Eigenschaften 221
Frameseiten editieren 225
Frameseiten speichern 226
Die Target-Frage 226
Designwechsel mit Frames 227
Frames frei zeichnen 230
Verschachtelte Frames 231
Inhalt mit Frames mittig anordnen 231
Frameset in der Codeansicht 234

3.12 Gestaltungsideen mit Frames 235
Fotopräsentation mit Frames 235
Horizontales Rollen in schmalen Frames 236
Interessante Seitenaufteilung 237
Tipps und Tricks zu Frames 239

3.13 Navigationslösungen 240
Textlinks: schnell und gar nicht schlicht 241
Schaltflächen mit Rollover-Effekt 242
Navigationsleisten 244
Auswahlliste als Dropdown-Navigation 247
Menü ein- und ausblenden (Ebenentechnik) 249
Menü mit Baumstruktur 252
Imagemaps - Links in Bildern 256
Animierte Flash-Buttons 257
Elegantes Popup-Menü 258

3.14 Die unsichtbaren Elemente in und 261
Dokumenteigenschaften festlegen 262
Seiten tunen mit Metatags 267
Metatags für den Server: HTTP-equiv 269
Unsichtbare Elemente im Body der Seite 271
Unsichtbare Elemente einsetzen 272


4. Arbeit sparen: Vorlagen, Bibliotheken, SSI 277

4.1 Vorlagen und Bibliotheken - der Unterschied, der Nutzen 279
So funktionieren Vorlagen 280
So funktionieren Bibliothekselemente 280

4.2 Vorlagen erstellen 282
Schnellstart: neue Vorlage anlegen 283
Vorhandenes Dokument zur Vorlage umgestalten 284
Musterseite als Vorlage verwenden 285
Vorhandenes Web auf Vorlagen umstellen 286
Zugeordnete Vorlage ändern 287
Dreamweaver 4-Vorlagen weiter verwenden 287

4.3 Editierbare Bereiche festlegen 288
Einfache editierbare Bereiche 288
Sich wiederholende Bereiche 290
Sich wiederholende Tabellen 291
Editierbare Tags 293
Optionale Bereiche 295
Verschachtelte Vorlagen 297

4.4 Vorlagen auf Seiten anwenden 300
Von Vorlage lösen 301
Zu Grunde liegende Vorlage ändern 301

4.5 Vorlagen ändern und Seiten aktualisieren 301
Seiten aktualisieren 302
Vorlagen löschen 303
Webs ohne Vorlagensyntax exportieren 303
Inhalte aus Vorlagen als XML im- oder exportieren 303
Tipps und Tricks zu Vorlagen 304

4.6 Bibliothekselemente erstellen und bearbeiten 305
Bibliothekselemente erstellen 305
Bibliothekselemente in Seiten einfügen 307
Bibliothekselement öffnen und bearbeiten 308
Sonderfall Verhaltensweisen 309
Tipps und Tricks zu Bibliotheken 310

4.7 Das Archiv Ihres Webs: die Elemente-Palette 311
Elemente sortieren 311
Neue Elemente erstellen 312
Elemente ins Dokumentfenster einfügen 312
Elemente in anderes Web übernehmen 313

4.8 Server-Side Includes (SSI) 313
SSI anlegen und einfügen 314
SSI bearbeiten 315
Exkurs: Umgebungsvariablen ausgeben 316


5. Texte erstellen und anpassen 317

5.1 Seitentitel und -eigenschaften 318

5.2 Texteingabe in Dreamweaver 320
Die Verwendung von Sonderzeichen 322

5.3 Textimport aus Word, Excel & Co 323
Zwischenablage oder Standard-Word-Dokument verwenden 323
Word-HTML-Export verwenden 325
Die Verwendung von DOC-Dateien innerhalb einer Website 328
Eine Tabelle importieren 329

5.4 Schrift- und Absatzformatierung 333
Die Verwendung verschiedener Schriftarten 333
Eigene Schriftkombinationen erstellen 333

5.5 Die Erstellung von Listen 334
Grundlagen 334
Einfache Listen 336
Verschachtelte Listen 336

5.6 Seitengliederung mit Linien 337

5.7 Textbasierte Hyperlinks einrichten 337


6. Texte formatieren mit CSS 339

6.1 Grundlagen und Anwendung von CSS 340
Internal, Embedded und External Stylesheets 340
Erstellen eines Internal Stylesheets für die Schriftart 345
Erstellen eines External Stylesheets 348
Mit dem Tag-Inspektor Stylesheets verwalten 350
Anwenden des externen Stylesheets in neuen Webseiten 351
Design Time Stylesheets 353
CSS ändern, erweitern, löschen 355
Maßangaben und Standardwerte 356

6.2 Formatierungen von Text 359
Schriftformatierung mit CSS 359
Absatzformatierung mit CSS 363

6.3 Auffällige Formatierungen mit CSS 364
Links haben drei Zustände 364
Individuelle Linkfarben 365
Besondere Linkeffekte sorgen für mehr Aufmerksamkeit 366
Der Hover-Effekt 367


7. Erweiterter Einsatz von CSS 369

7.1 Erweiterte Formatierung mit CSS 370
Benutzerdefinierte Pseudoformate einsetzen 370
Formatvorlage für besondere Textabschnitte 371
Abstände und Ränder 372
W3C-Texteffekt erstellen 373
Tabellen und Ränder formatieren 374
Rahmenelemente anpassen 375

7.2 Pixelgenaues Positionieren 377
Pixelgenaues Layout und alte Browser 377
Layer mit CSS formatieren 378
Ebene mit Stylesheets formatieren 379
Das Problem mit den Seitenrändern 381
Grafiken am Rand ausrichten 382
Text und Grafik im Einklang 385
Grafiken von Text umfließen lassen 385

7.3 Seitenlayout für den Ausdruck 388
Eine Seite - zwei Darstellungen 388
Ausgewählte Formateigenschaften 389
Praxislösung: Zwei Webseiten 390
Webseite für den Ausdruck erstellen 391


8. Grafik 393

8.1 Grafiken einfügen 394
Bilder einbinden Step by Step 394

8.2 Die Grafikeigenschaften einstellen 395
Name und Alt-Bezeichnung 396
Größe und Abstände angeben 396
Bilder rahmen 396
Bilder verlinken 397
Bildteile verlinken - Imagemaps 397

8.3 Grafiken bearbeiten 399
Bildgröße ändern? 399
Bilder beschneiden 400
Helligkeit und Kontrast anpassen 401
Bilder schärfen 401

8.4 Integration von Fireworks 402
Fireworks aus Dreamweaver heraus starten 402
Bilder in Fireworks bearbeiten 403
Bilder in Fireworks optimieren 405
Bibliothekselemente exportieren 407
Fireworks-HTML in Dreamweaver einfügen 408
Fireworks-HTML in Dreamweaver aktualisieren 409

8.5 Bilder ausrichten 410
Bild und Text anordnen - Step by Step 410
Ausrichtungsoptionen 412

8.6 Hintergründiges 413
Hintergrundeffekte mit CSS 414

8.7 Farben und Farbwahl 415
Farbschema für Seite wählen 417
Exkurs: Websichere Farben 417

8.8 Photoalbum fürs Web 418

8.9 Tipps und Tricks zu Bildern 420
Niedrige Bildquelle 420
Bilder vorladen 421
Bild-Platzhalter verwenden 422
Bild-Platzhalter und Buttons in Fireworks gestalten 422
Flash-Texte erstellen 425


9. Formulare 427

9.1 Grundlagen zu Formularen 428
Der Aufbau eines Formulars 428
Formularelemente 432

9.2 Formulare erstellen 434
Überlegungen zum Layout 434
Formular für eine Spendenaktion entwickeln 443


10. Interaktive Elemente mit der Verhalten-Palette 455

10.1 Grundlagen zu Verhaltensweisen 456
Was sind Verhaltensweisen? 456
Handler und Aktionen 456
Standard-Dreamweaver-Verhaltensweisen 457

10.2 Verhaltensweisen einsetzen 460
Mit der Verhalten-Palette arbeiten 460
Zielbrowserprüfung und Plug-In-Check 462
Aktueller Browser? 462
Formularfelder prüfen 465
Benutzereingabe testen 465
Shockwave- und Flash-Filme steuern 469
Steuerelemente verwenden 469

10.3 Dynamisches Layout mit Verhaltensweisen 472
Webelemente dynamisch beeinflussen 472
Bild einblenden 472
Ein Puzzlespiel 475
Popup-Meldungen und -Fenster sind echte Hingucker 481
Popup-Fenster für aktuelle Meldungen 482

10.4 JavaScripts aufrufen 484
Einbinden von JavaScripts 484
Nützliche JavaScript-Beispiele 486
Aktuelles Datum ausgeben 486
Nachrichtenticker in der Titelzeile 488


11. Animationen mit Ebenen 491

11.1 Erste Hilfe für Zeitleistennutzer 492
Animierende Alternative: Flash MX 2004 493

11.2 Alternative: Drittanbieter 493
FlevOOware bietet zusätzliche Ebenenfunktionen 494
Layer AniMagic von Project Seven 499


12. Einbinden von Non-HTML-Objekten 501

12.1 Medien einfügen und editieren 502
Medien editieren 503
Einen beliebigen externen Editor einrichten 504

12.2 Shockwave und Flash-Filme einfügen 506
Eine Flash-Animation einfügen 506
Eigenschaften von Flash-Objekten 508

12.3 ActiveX-Elemente 510
Problem der Browserkompatibilität 510
Eigenschaften von ActiveX-Elementen festlegen 512

12.4 Java-Applets 513
Java-Applets einfügen 513
Eigenschaften bestimmen 513
Parameter einstellen 514
Parameter finden 515
Spiel einfügen 516

12.5 Audiodateien einfügen 517
Audioformate - eine Übersicht 518
Einbetten oder linken 519
Eine Webpage mit Hintergrundmusik versehen 519
Konflikte vermeiden - Flash verwenden 521
Eine Audiodatei einem Ereignis zuordnen 524

12.6 Plug-ins 525
Plug-ins: Eine Übersicht 525
Plug-In-Check mit Umleitungsfunktion 525


13. Nachbearbeitung/Feintuning/HTML 529

13.1 Arbeiten im Quelltext 530
Quellcode in Dreamweaver editieren 530
Arbeiten mit externen Editoren 532
Codefragmente verwenden 534
Roundtrip-HTML 537

13.2 Suchen und Korrigieren von Fehlern 538
Im Quelltext 539
Exkurs: Reguläre Ausdrücke 540

13.3 Die Site auf dem Prüfstand 541
Einen Sitebericht erstellen 542
Tipps und Tricks zum Sitecheck 550


14. Arbeiten mit Extensions 557

14.1 Installieren und Verwalten von Erweiterungen 558
Eine Erweiterung installieren 558
Erweiterungen importieren 561
Erweiterungen verwalten 563
Weitere Befehle 564

14.2 Webtipps zu Extensions 564
Dreamweaver 4 und MX Extensions 565
Internettipps zu Extensions 565


15. Anpassung der Arbeitsumgebung 567

15.1 Überblick über die Arbeitsumgebung 568
Dreamweaver MX-Arbeitsbereich 568
Coder-Stil 568
Die Standard-Symbolleisten 572
Schnelles Arbeiten mit den Dreamweaver-Symbolleisten 573

15.2 Voreinstellungen ändern 574

15.3 Anpassen der Menüs 578

15.4 Die Einfügen-Leiste konfigurieren 582


16. Dynamische Webseiten mit MySQL und PHP 587

16.1 Erst einmal die Entwicklungsumgebung schaffen 588
Den Apache-Webserver installieren 589
Konfiguration des Indianers 590
Mit MySQL bekommen Sie eine Datenbank 593
PHP stellt die Programmierseite dar 595
Für mehr Komfort phpMyAdmin installieren 597

16.2 Datenbankverwaltung mit PHPmyAdmin 599
Neuen Benutzer für den Zugriff einrichten 599
Eine neue Datenbank für das Projekt anlegen 602
Datenbank einem Benutzer zuweisen 602
Immobiliendatenbanktabelle anlegen 604
Datensätze bequem und ohne SQL-Kenntnisse manipulieren 607
Keine Lust, Daten einzugeben 608
Daten ändern und löschen 610
Nicht vergessen: Datensicherung 611
Datensicherung mit phpMyAdmin 611
Nach dem Crash die Daten wieder einspielen 613
Datenverarbeitung mit Access 615

16.3 Immobilienangebot mit dynamischen Webseiten 620
Zuerst wird das Grundlayout erstellt 621
Die Startseite anlegen 621
Angebotsseite erstellen 622
Datenbankverknüpfungen herstellen 623
Eine Site erstellen 623
Eine Datenbankverbindung aufbauen 624
Ein Recordset wird als letzte Vorbereitung benötigt 626
Jetzt kann die Datenbank ausgegeben werden 627
PHP-Code anpassen 629
Die Ausgabeseite für die Datensätze erstellen 630
Feinschliff bei der Formatierung 636
Datumsformat per PHP 638
Variable Texte je nach Objekttyp ausgeben 640
Webseite für umfangreiche Datenbanken optimieren 641
Auch die nachträgliche Pflege der Datensätze ist möglich 645
Neuen Datensatz einfügen 646
Datensätze zur Bearbeitung auflisten 649
Datensätze löschen und speichern 652

16.4 Webseiten auf den Webserver übertragen 654


Anhang 657

Workshop-Übersicht 657

Liste der Sonderzeichen (eine Auswahl) 659

Liste wichtiger regulärer Ausdrücke 662


Stichwortverzeichnis 663