618544

Adobe DREAMWEAVER CS5 Handleiding

7
Verklein
Vergroot
Pagina terug
1/753
Pagina verder
Verwenden von
ADOBE
®
DREAMWEAVER
®
CS5 & CS5.5
Last updated 10.4.2012
Rechtliche Hinweise
Rechtliche Hinweise
Rechtliche Hinweise finden Sie unter http://help.adobe.com/de_DE/legalnotices/index.html.
iii
Last updated 10.4.2012
Contents
Chapter 1: Neue Funktionen
Neue Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 2: Arbeitsbereich
Arbeitsablauf und Arbeitsbereich in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Arbeiten im Dokumentfenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Symbolleisten, Inspektoren und Kontextmenüs verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Anpassen des Dreamweaver CS5-Arbeitsbereichs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Tastaturbefehle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Chapter 3: Arbeiten mit Dreamweaver-Sites
Dreamweaver-Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Lokale Version Ihrer Site einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Verbindung zu einem Remote-Server herstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Testserver einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Versionskontrolle und erweiterte Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Optionen des Dialogfelds „Sites verwalten“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Dreamweaver-Site-Einstellungen importieren und exportieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Bereits vorhandene Remote-Website bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Site-Voreinstellungen für die Übertragung von Dateien festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Verwalten von Contribute-Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Chapter 4: Dateien erstellen und verwalten
Dokumente öffnen und erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Verwalten von Dateien und Ordnern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Dateien vom Server abrufen/auf dem Server bereitstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Dateien ein- und auschecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Dateien synchronisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Dateien auf Unterschiede vergleichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Frühere Dateiversionen wiederherstellen (Contribute-Benutzer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Dateiinformationen in Design Notes speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Testen der Dreamweaver-Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Chapter 5: Verwalten von Elementen und Bibliotheken
Elemente und Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Elemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Erstellen und Verwalten einer Liste mit Favoritenelementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Verwenden von Bibliothekselementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Chapter 6: Seiten mit CSS erstellen
Grundlegendes zu Cascading Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Bedienfeld „CSS-Stile“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
iv
VERWENDEN VON DREAMWEAVER
Contents
Last updated 10.4.2012
Erweiterungen für die CSS3-Unterstützung im Bedienfeld „CSS-Stile“ (CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Voreinstellungen für CSS-Stile festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Neue CSS-Regeln erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
CSS-Eigenschaften festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
CSS-Regeln bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Eigenschaft zur CSS-Regel hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
CSS-Klassenstile anwenden, entfernen oder umbenennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
CSS-Regeln verschieben/exportieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Inline-CSS einer CSS-Regel hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Link zu einem externen CSS-Stylesheet erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
CSS-Stylesheets bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
CSS-Code formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
CSS-Eigenschaft deaktivieren/aktivieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
CSS in der Live-Ansicht prüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Browserübergreifende Probleme bei der CSS-Wiedergabe überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Mit Entwurfszeit-Stylesheets arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Dreamweaver-Muster-Stylesheets verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
CSS-Stylesheets in einer Contribute-Site aktualisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Gestalten von Seitenlayouts mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Arbeiten mit Div-Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Chapter 7: Seitenlayouts mit HTML gestalten
Visuelle Hilfsmittel für das Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Inhalte in Tabellen darstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Frames verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Chapter 8: Inhalt in Seiten einfügen
Bedienfeld „Einfügen“ verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Seiteneigenschaften festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
CSS-Hyperlinkeigenschaften für eine ganze Seite festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
CSS-Überschrifteneigenschaften für eine ganze Seite festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Eigenschaften für Titel und Kodierung einer Seite festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Tracing-Bild für das Design einer Seite verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Dokumentkodierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Elemente im Dokumentfenster auswählen und anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Ansicht vergrößern und verkleinern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Voreinstellungen für Downloadzeit und -größe festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Arbeiten mit Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Texteigenschaften im Eigenschafteninspektor festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Rechtschreibprüfung für Webseiten durchführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Tabellendaten importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Microsoft Office-Dokumente importieren (nur Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Hyperlinks zu Word- oder Excel-Dokumenten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
HTML-Formatierung verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Horizontale Linien verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Schriftkombinationen ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
v
VERWENDEN VON DREAMWEAVER
Contents
Last updated 10.4.2012
Datumsangaben einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Bilder hinzufügen und ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Hinzufügen von Videos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
SWF-Dateien einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Web-Widgets hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Audiomaterial hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Hinzufügen von Medienobjekten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Aufgaben automatisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Chapter 9: Hyperlinks und Navigation
Allgemeines zu Hyperlinks und Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Hyperlinks erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Sprungmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Fehler in Hyperlinks beheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Chapter 10: Vorschau von Seiten
Vorschau von Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Chapter 11: Mit Seitencode arbeiten
Allgemeine Informationen zum Programmieren in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Codeumgebung einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Festlegen von Codeeinstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Schreiben und Bearbeiten von Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Code ausblenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Code optimieren und debuggen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Code in der Entwurfsansicht bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Mit Head-Inhalt für Seiten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Mit Server-Side Includes arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Verwalten von Tag-Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370
Benutzerdefinierte Tags in Dreamweaver importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Chapter 12: Hinzufügen von JavaScript-Verhalten
Verwenden von JavaScript-Verhalten (allgemeine Anweisungen) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Anwenden integrierter JavaScript-Verhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Chapter 13: Mit anderen Anwendungen arbeiten
Anwendungsübergreifende Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Fireworks und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Photoshop und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Flash und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Mit Adobe Bridge arbeiten und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Mit Device Central arbeiten und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Mit ConnectNow arbeiten und Dreamweaver verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
AIR-Erweiterung für Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
vi
VERWENDEN VON DREAMWEAVER
Contents
Last updated 10.4.2012
Chapter 14: Vorlagen erstellen und verwalten
Dreamweaver-Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Vorlagen und vorlagenbasierte Dokumente erkennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Erstellen von Dreamweaver-Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Erstellen bearbeitbarer Bereiche in Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Erstellen wiederholender Bereiche in Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Verwenden optionaler Bereiche in Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436
Definieren bearbeitbare Tag-Attribute in Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Verschachtelte Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Vorlagen bearbeiten, aktualisieren oder löschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Vorlageninhalte exportieren und importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Inhalte in vorlagenbasierten Dokumenten bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Vorlagensyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Voreinstellungen für Vorlagenbereiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Chapter 15: Spry-Seiten visuell erstellen
Spry-Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Arbeiten mit Spry-Widgets (allgemeine Anweisungen) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Arbeiten mit dem Spry-Akkordeon-Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
Arbeiten mit dem Spry-Menüleisten-Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Arbeiten mit dem Spry-Widget „Reduzierbare Palette“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Arbeiten mit Spry-Widget „Paletten mit Registerkarten“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Arbeiten mit dem Spry-QuickInfo-Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Arbeiten mit dem Spry-Widget „Überprüfung - Optionsschaltergruppe“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Arbeiten mit dem Spry-Widget „Überprüfung - Textbereich“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Arbeiten mit dem Spry-Widget „Überprüfung - Auswahl“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
Arbeiten mit dem Spry-Widget „Überprüfung - Kontrollkästchen“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Arbeiten mit dem Spry-Widget „Überprüfung - Kennwort“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
Arbeiten mit dem Spry-Widget „Überprüfung - Bestätigung“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Daten mit Spry anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Spry-Effekte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514
Chapter 16: Webseiten für mehrere Bildschirme und Geräte entwerfen
Erstellen von Medienabfragen (ab Version CS 5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Ändern der Seitenausrichtung für mobile Geräte (ab Version CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
Erstellen von Webanwendungen für mobile Geräte (CS5.5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522
Verpacken von Webanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Seitenvorschau mithilfe des Bedienfelds „Multi-Screen-Vorschau“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Chapter 17: Adobe Online-Dienste verwenden
Verwenden von Dreamweaver mit Adobe Online-Diensten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530
Chapter 18: XML-Daten mit XSLT anzeigen
XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
XSL-Transformationen auf dem Server ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
vii
VERWENDEN VON DREAMWEAVER
Contents
Last updated 10.4.2012
XSL-Transformationen auf dem Client ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
Fehlende Zeichenentitäten für XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Chapter 19: Erstellen dynamischer Sites vorbereiten
Webanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Computer für die Entwicklung von Anwendungen einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Datenbankverbindungen für ColdFusion-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
Datenbankverbindungen für ASP-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582
Datenbankverbindungen für PHP-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Fehlerbehebung bei Datenbankverbindungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 592
Verbindungsskripts entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597
Chapter 20: Dynamische Seiten erstellen
Optimieren des Arbeitsbereichs für visuelle Entwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599
Dynamische Seiten entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602
Überblick über Quellen für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
Bedienfelder für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610
Definieren von Quellen für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611
Einfügen von dynamischem Inhalt in Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Dynamischen Inhalt ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Anzeigen von Datenbank-Datensätzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633
Live-Daten anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
Hinzufügen benutzerdefinierter Serververhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644
Chapter 21: Visuelles Entwickeln von Anwendungen
Master- und Detailseiten entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 657
Erstellen von Such- und Ergebnisseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665
Datensatz-Einfügeseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671
Erstellen von Datensatz-Aktualisierungsseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675
Erstellen von Datensatz-Löschseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681
Seiten mit erweiterten Objekten für die Datenbankverarbeitung erstellen (ColdFusion, ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . 689
Erstellen von Registrierungsseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693
Anmeldeseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696
Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698
Schützen von Ordnern in Anwendungen (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701
ColdFusion-Komponenten verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702
Chapter 22: Formulare erstellen
Verwenden von Formularen zum Sammeln von Benutzerinformationen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710
Erstellen von Webformularen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714
Erstellen von ColdFusion-Formularen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729
Chapter 23: Eingabehilfen
Dreamweaver-Eingabehilfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743
1
Last updated 10.4.2012
Chapter 1: Neue Funktionen
Neue Funktionen
Important: Auf dieser Seite werden die neuen Leistungsmerkmale in Dreamweaver CS5 und Dreamweaver CS5.5
aufgeführt. Allerdings erfahren Sie hier NICHT, wie diese Leistungsmerkmale angewendet werden. Um weitere
Informationen zu den einzelnen Leistungsmerkmalen zu erhalten, klicken Sie auf den entsprechenden Hyperlink. Auf
AdobeTV können Sie sich auch eine Übersicht über die CS5- oder die CS5.5-Leistungsmerkmale ansehen.
Neue Funktionen (CS5.5)
Multi-Screen-Unterstützung
Sie können eine Vorschau Ihrer Entwürfe in Standard-Bildschirmauflösungen anzeigen oder Medienabfragen dazu
verwenden, die Auflösung zu definieren. Wenn Sie Geräte testen, die die Seitenausrichtung ändern, je nachdem, wie
das Gerät gehalten wird, sollten Sie in der Vorschau sowohl das Quer- als auch das Hochformat begutachten. Weitere
Informationen finden Sie unter “Webseiten für mehrere Bildschirme und Geräte entwerfen” on page 519.
Unterstützung von Medienabfragen
Mithilfe von Medienabfragen können Sie die Darstellung der Site für unterschiedliche Bildschirmauflösungen
anpassen. Weitere Informationen finden Sie unter “Erstellen von Medienabfragen (ab Version CS 5.5)” on page 519.
Webanwendungen für mobile Geräte
Sie können mühelos eine Webanwendung erstellen, die mithilfe des jQuery Mobile-Widgets auf den meisten
Mobilgeräten ausgeführt werden kann. Weitere Informationen finden Sie unter “Erstellen von Webanwendungen für
mobile Geräte (CS5.5)” on page 522.
Webanwendungen für Android, iPhone und iPad verpacken
Sie können Ihre Webanwendungen in Dreamweaver verpacken und auf Android™- und iOS-basierten Geräten
bereitstellen. Weitere Informationen finden Sie unter “Verpacken von Webanwendungen als native mobile
Anwendungen (CS 5.5)” on page 525.
Unterstützung von HTML5, CSS3 und jQuery
Dreamweaver unterstützt Codehinweise für HTML5, CSS3 und jQuery.
Zum Erstellen neuer HTML5-Seiten stehen zudem Startlayouts zur Verfügung. Dreamweaver unterstützt die
HTML5-Funktion zum Einbetten von Videos in HTML-Seiten. Weitere Informationen finden Sie unter “Videos in
Webseiten einbetten (HTML5)” on page 268.
Das CSS-Bedienfeld wurde erweitert, so dass es häufig verwendete CSS3-Eigenschaften unterstützt. Weitere
Informationen finden Sie unter “Codehinweise” on page 330 und “Erweiterungen für die CSS3-Unterstützung im
Bedienfeld „CSS-Stile“ (CS 5.5)” on page 143.
2
VERWENDEN VON DREAMWEAVER
Neue Funktionen
Last updated 10.4.2012
Unterstützung von FTPS
Führen Sie die Übertragung von Daten per FTPS durch. Anders als bei SFTP mit alleiniger Unterstützung von
Verschlüsselung wird bei FTPS (FTP über SSL) sowohl Verschlüsselung als auch Authentifizierung unterstützt.
Weitere Informationen finden Sie unter “FTPS-Verbindungen (CS 5.5)” on page 45.
Unterstützung der W3C-Überprüfung
Mithilfe der W3C-Überprüfung in Dreamweaver können Sie standardkonforme HTML- und XHTML-Seiten
erstellen. Weitere Informationen finden Sie unter “Dokumente mit der W3C-Überprüfung überprüfen (CS 5.5)” on
page 352.
Neue Funktionen (CS5)
Adobe BrowserLab
Dreamweaver CS5 lässt sich in Adobe BrowserLab integrieren, einem der neuen Online-Dienste von CS Live, über den
eine schnelle und akkurate Lösung zur browserübergreifenden Kompatibilitätsprüfung bereitgestellt wird. Mit
BrowserLab können Sie mithilfe verschiedener Anzeige- und Vergleichstools die Vorschau von Webseiten und
lokalen Inhalten anzeigen. Weitere Informationen finden Sie unter “BrowserLab” on page 530.
Integration von Business Catalyst
Adobe Business Catalyst ist eine Host-Anwendung, die herkömmliche Desktop-Tools durch eine zentrale Plattform
für Webdesigner ersetzt. Mit dieser Anwendung, die sich nahtlos in Dreamweaver einbinden lässt, können Sie von
einfachen datenbezogenen Websites bis hin zu erfolgreichen Online-Shops alle gewünschten Projekte erstellen.
Weitere Informationen finden Sie unter http://www.adobe.com/go/business_catalyst_get_extension_de.
CSS-Verbesserungen
CSS deaktivieren/aktivieren
Mit der Option „CSS deaktivieren/aktivieren“ können Sie CSS-Eigenschaften direkt im Bedienfeld „CSS-Stile“
deaktivieren bzw. erneut aktivieren. Beim Deaktivieren einer CSS-Eigenschaft wird die angegebene Eigenschaft
lediglich auskommentiert, ohne dass sie gelöscht wird. Weitere Informationen finden Sie unter “CSS-Eigenschaft
deaktivieren/aktivieren” on page 160.
CSS-Prüfung
Im Prüfmodus können Sie die CSS-Eigenschaften von Box-Modellen, darunter Auffüllung, Rahmen und Rand, visuell
detailliert anzeigen, ohne den Code zu lesen oder ein Dienstprogramm eines Drittanbieters (z. B. Firebug) verwenden
zu müssen. Weitere Informationen finden Sie unter “CSS in der Live-Ansicht prüfen” on page 160.
CSS-Startlayouts
Dreamweaver CS5 enthält aktualisierte und vereinfachte CSS-Startlayouts. Die komplexen untergeordneten
Selektoren aus den CS4-Layouts wurden entfernt und durch vereinfachte und einfach verständliche Klassen ersetzt.
Weitere Informationen finden Sie unter “Seiten mit einem CSS-Layout erstellen” on page 170.
3
VERWENDEN VON DREAMWEAVER
Neue Funktionen
Last updated 10.4.2012
Dynamisch zugehörige Dateien
Mithilfe der Funktion „Dynamisch zugehörige Dateien“ können Sie nach allen externen Dateien und Skripts suchen,
die für die Zusammenstellung PHP-basierter CMS-Seiten (Content-Management-System) erforderlich sind, und die
entsprechenden Dateinamen auf der Symbolleiste „Zugehörige Dateien“ anzeigen. Standardmäßig unterstützt
Dreamweaver die Suche nach Dateien für die WordPress-, Drupal- und Joomla!-CMS-Frameworks. Weitere
Informationen finden Sie unter “Dynamisch zugehörige Dateien öffnen” on page 78.
Live-Ansicht-Navigation
Über die Live-Ansicht-Navigation werden Hyperlinks in der Live-Ansicht aktiviert, sodass Sie serverseitige
Anwendungen und dynamische Daten verwenden können. Über die Funktion können Sie zudem eine URL eingeben,
um die über einen Live-Webserver bereitgestellten Seiten zu prüfen und aufgerufene Seiten zu bearbeiten, wenn sie in
einer Ihrer lokal definierten Sites vorhanden sind. Weitere Informationen finden Sie unter “Seitenvorschau in
Dreamweaver” on page 312.
PHP-Codehinweise für benutzerdefinierte Klassen
Mit PHP-Codehinweisen für benutzerdefinierte Klassen wird die korrekte Syntax für PHP-Funktionen, PHP-Objekte
und PHP-Konstanten angezeigt, sodass Sie den genauen Code eingeben können. Codehinweise können auch für Ihre
benutzerdefinierten Funktionen und Klassen sowie für Frameworks von Drittanbietern (z. B. Zend-Framework)
verwendet werden.
Vereinfachte Site-Einrichtung
Im neu gestalteten Dialogfeld „Site-Definition“ können Sie auf einfachere Weise eine lokale Dreamweaver-Site
einrichten, sodass Sie sofort danach die ersten Webseiten erstellen können. In der Kategorie „Remote-Server“ können
Sie in einer Ansicht sowohl Remote- als auch Testserver angeben. Weitere Informationen finden Sie unter “Lokale
Version Ihrer Site einrichten” on page 42 und “Verbindung zu einem Remote-Server herstellen” on page 42.
Site-spezifische Codehinweise
Mithilfe der Funktion „Site-spezifische Code-Hinweise“ können Sie bei Verwendung von PHP-Bibliotheken und
CMS-Frameworks von Drittanbietern (z. B. WordPress, Drupal, Joomla! oder andere Frameworks) die
Codeumgebung anpassen. Theme-Dateien für Blogs und andere benutzerdefinierte PHP-Dateien und PHP-
Verzeichnisse können als Quellen für Codehinweise einbezogen oder ausgeschlossen werden. Weitere Informationen
finden Sie unter “Site-spezifische Codehinweise” on page 333.
Verbesserte Subversion-Unterstützung
Die Unterstützung von Subversion wird in Dreamweaver CS5 erweitert, sodass Sie nun Dateien lokal verschieben,
kopieren und löschen und dann die Änderungen mit dem SVN-Remote-Repository synchronisieren können. Mit dem
neuen Befehl „Wiederherstellen“ können Sie Hierarchiekonflikte schnell korrigieren oder eine frühere Version einer
Datei wiederherstellen. Darüber hinaus können Sie mit einer neuen Erweiterung angeben, mit welcher Version von
Subversion Sie ein bestimmtes Projekt bearbeiten möchten. Weitere Informationen finden Sie unter “Dateien mithilfe
von Subversion (SVN) abrufen und einchecken” on page 98.
Veraltete Funktionen
Die folgenden Funktionen sind ab Dreamweaver CS5 veraltet:
• Barrierefreiheitsprüfungsbericht
• ASP/JavaScript-Serververhalten
• JavaScript-Verhalten „Browser überprüfen“
4
VERWENDEN VON DREAMWEAVER
Neue Funktionen
Last updated 10.4.2012
• Verbindung zu einem FTP-/RDS-Server ohne Definieren von Sites herstellen
• JavaScript-Verhalten „Shockwave oder SWF steuern“
• Webfotoalbum erstellen
• JavaScript-Verhalten „Popupmenü ausblenden“
• InContext Editing Verfügbare CSS-Klassen verwalten
• FlashPaper einfügen
• Mark of the Web einfügen/entfernen
• Microsoft Visual Sourcesafe-Integration
• Navigationsleisten
• JavaScript-Verhalten „Sound abspielen“
• Menü „Ereignisse zeigen für“ (Bedienfeld „Verhalten“)
• JavaScript-Verhalten „Popupmenü anzeigen“
• JavaScript-Verhalten „Zeitleiste“
• Tags überprüfen
• Live Data-Ansicht
5
Last updated 10.4.2012
Chapter 2: Arbeitsbereich
Arbeitsablauf und Arbeitsbereich in Dreamweaver
Überblick über den Dreamweaver-Arbeitsablauf
Für die Erstellung von Websites stehen verschiedene Methoden zur Verfügung, darunter der folgende Ansatz.
Sites planen und einrichten
Bestimmen Sie den Zielort für die Dateien und prüfen Sie Ressourcen, Zielgruppe sowie den Bestimmungszweck.
Darüber hinaus gilt es, technische Voraussetzungen wie Zugangsmöglichkeiten des Benutzers sowie Einschränkungen
durch den jeweiligen Browsertyp, nicht vorhandene Plug-Ins oder langsame Download-Geschwindigkeiten zu
bedenken. Sobald Sie Ihre Informationen gegliedert und eine geeignete Struktur ausgearbeitet haben, können Sie mit
der Erstellung der Website beginnen. (Siehe dazu den Abschnitt “Arbeiten mit Dreamweaver-Sites” on page 40.)
Site-Dateien strukturieren und verwalten
Im Bedienfeld „Dateien“ lassen sich Dateien und Ordner bequem hinzufügen, löschen und umbenennen. Es bietet
außerdem viele Tools zum Verwalten von Websites, Übertragen von Dateien zwischen lokalem Server und Remote-
Server, Einchecken und Auschecken von Dateien sowie für den Schutz vor unbeabsichtigtem Überschreiben und zum
Synchronisieren von Dateien zwischen der lokalen Site und der Remote-Site. Mithilfe des Bedienfelds „Elemente“
können Sie die Elemente einer Website ganz leicht verwalten. Die meisten Elemente können direkt aus dem Bedienfeld
in ein Dreamweaver-Dokument gezogen werden. Mithilfe von Dreamweaver können Sie zudem verschiedene Aspekte
von Adobe® Contribute®-Sites verwalten. (Siehe dazu die Abschnitte “Verwalten von Dateien und Ordnern” on
page 80 und “Verwalten von Elementen und Bibliotheken” on page 120.)
Webseiten-Layout gestalten
Wählen Sie das von Ihnen bevorzugte Layoutverfahren oder verwenden Sie eine Kombination aus Dreamweaver-
Layoutoptionen, um Ihr Seitenlayout zu gestalten. Sie können AP-Elemente, CSS-Positionierungsstile oder
vordefinierte CSS-Layouts in Dreamweaver für die Erstellung Ihres Layouts verwenden. Mit den Tabellenwerkzeugen
können Sie Webseiten ohne großen Zeitaufwand erstellen und anschließend die Seitenstruktur verändern. Falls in
einem Webbrowser mehrere Elemente gleichzeitig angezeigt werden sollen, können Sie das Dokument-Layout
mithilfe von Frames erstellen. Schließlich können Sie aufbauend auf einer Dreamweaver-Vorlage neue Seiten erstellen
und deren Layout anschließend automatisch aktualisieren, wenn sich die Vorlage ändert. (Siehe dazu die Abschnitte
“Seiten mit CSS erstellen” on page 134 und “Seitenlayouts mit HTML gestalten” on page 189.)
Inhalt in Seiten einfügen
Fügen Sie Elemente wie Text, Bilder, Rollover-Bilder, Imagemaps, Farben, Filme, Sound, HTML-Links, Sprungmenüs
und andere Medien in Ihre Webseiten ein. Sie können die integrierten Seitenerstellungsfunktionen für solche
Elemente wie Seitentitel und Hintergrundbilder verwenden, Einträge direkt vornehmen oder Inhalte aus anderen
Dokumenten importieren. Dreamweaver bietet zudem Verhalten zum Durchführen von Aufgaben für bestimmte
Ereignisse, z. B. die Überprüfung von Formulardaten auf ihre Richtigkeit, wenn der Benutzer auf die Schaltfläche
„Senden“ klickt, oder das Öffnen eines zweiten Browserfensters, wenn die Hauptseite vollständig geladen wurde.
Schließlich bietet Dreamweaver noch Werkzeuge zur Maximierung der Website-Performance und zum Testen der
Webseite-Kompatibilität mit unterschiedlichen Browsern. (Siehe dazu den Abschnitt “Inhalt in Seiten einfügen” on
page 223.)
6
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Seiten durch manuelle Kodierung erstellen
Webseiten können auch handcodiert werden. Dreamweaver verfügt sowohl über benutzerfreundliche visuelle
Bearbeitungstools als auch über eine anspruchsvolle Codeumgebung. Zur Gestaltung und Bearbeitung Ihrer Seiten
können Sie diese Funktionen einzeln oder gemeinsam einsetzen. (Siehe dazu den Abschnitt “Mit Seitencode arbeiten”
on page 317.)
Webanwendungen für dynamische Inhalte einrichten
Viele Websites enthalten dynamische Seiten, auf denen Besucher Informationen anzeigen können, die in
Datenbanken gespeichert sind. Gewöhnlich ermöglichen es diese Seiten einigen Besuchern auch, neue Informationen
hinzuzufügen und in den Datenbanken enthaltene Informationen zu bearbeiten. Um solche Seiten zu erstellen,
müssen Sie zunächst einen Web- und einen Anwendungsserver einrichten, eine Dreamweaver-Site erstellen oder
bearbeiten und die Verbindung zu einer Datenbank herstellen. (Siehe dazu den Abschnitt “Erstellen dynamischer Sites
vorbereiten” on page 567.)
Dynamische Seiten erstellen
In Dreamweaver können Sie viele verschiedene Quellen für dynamischen Inhalt definieren, z. B. aus Datenbanken
extrahierte Datensätze, Formularparameter und JavaBeans-Komponenten. Um dynamischen Inhalt in eine Seite
einzufügen, ziehen Sie ihn einfach auf die Seite.
Sie können festlegen, dass auf der Seite nur ein einziger Datensatz oder viele Datensätze gleichzeitig angezeigt werden.
Sie können mehrere Seiten von Datensätzen anzeigen, besondere Hyperlinks zum Navigieren zwischen
Datensatzseiten hinzufügen und Datensatzzähler erstellen, mit deren Hilfe die Besucher die Datensätze verfolgen
können. Sie können Anwendungs- oder Geschäftslogik mithilfe von Technologien wie Adobe® ColdFusion® und
Webdiensten kapseln. Falls Sie größere Flexibilität benötigen, können Sie eigene Serververhalten und interaktive
Formulare erstellen. (Siehe dazu den Abschnitt “Dynamische Seiten erstellen” on page 599.)
Testen und veröffentlichen
Das Testen Ihrer Seiten gestaltet sich während des Entwicklungszyklus als fortlaufender Prozess. Am Ende des
Arbeitsablaufs veröffentlichen Sie die Website auf einem Server. Viele Entwickler sind auch für eine regelmäßige
Wartung der Website zuständig, um die Aktualität des Inhalts und eine korrekte Funktionsweise zu gewährleisten.
(Siehe dazu den Abschnitt “Dateien vom Server abrufen/auf dem Server bereitstellen” on page 90.)
Ein Video-Tutorial zu Verwendungsmöglichkeiten von Dreamweaver finden Sie unter
www.adobe.com/go/lrvid4040_dw_de.
Arbeitsbereichlayout
Im Dreamweaver-Arbeitsbereich können Sie Dokumente und Objekteigenschaften anzeigen. Im Arbeitsbereich sind
viele der gängigsten Vorgänge in Symbolleisten angeordnet, damit Sie Änderungen in Dokumenten schnell
durchführen können.
Unter Windows® bietet Dreamweaver ein integriertes Layout, in dem alle Funktionen in einem einzigen Fenster
zusammenfasst sind. Im integrierten Arbeitsbereich unter Windows sind alle Fenster und Bedienfelder in einem
einzigen größeren Anwendungsfenster integriert.
7
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
A: Anwendungsleiste B: Dokument (Symbolleiste) C: Dokumentfenster D: Arbeitsbereichumschalter E: Bedienfeldgruppen F: CS Live
G: Tag-Selektor H: Eigenschafteninspektor I: Bedienfeld „Dateien“
Auf Mac OS®-Computern können in Dreamweaver mehrere Dokumente in einem einzigen Fenster mit jeweils einer
Registerkarte für jedes Dokument angezeigt werden. Darüber hinaus kann ein schwebender Arbeitsbereich geöffnet
werden, in dem jedes Dokument in einem gesonderten Fenster angezeigt wird. Bedienfeldgruppen sind anfangs
aneinander gedockt, lassen sich jedoch abdocken und in eigenen Fenstern anzeigen. Wenn Bedienfeldgruppen
angedockt sind und der Dokumentbereich maximiert ist, wird durch Ein- und Ausblenden sowie Größenänderung
von Bedienfeldern die Größe des Hauptfensters geändert, wie dies auch in Windows der Fall ist.
8
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
A: Anwendungsleiste B: Dokument (Symbolleiste) C: Arbeitsbereichumschalter D: Dokumentfenster E: CS Live F: Bedienfeldgruppen
G: Tag-Selektor H: Eigenschafteninspektor I: Bedienfeld „Dateien“
Ein Tutorial zum Verwenden unterschiedlicher Dreamweaver-Arbeitsbereiche finden Sie unter
www.adobe.com/go/lrvid4042_dw_de.
Überblick über Arbeitsbereichselemente
Der Arbeitsbereich enthält die folgenden Elemente.
Note: Dreamweaver enthält viele weitere Bedienfelder, Inspektoren und Fenster. Die Bedienfelder, Inspektoren und
Fenster werden über das Menü „Fenster“ geöffnet.
Begrüßungsbildschirm ermöglicht das Öffnen eines kürzlich bearbeiteten oder das Erstellen eines neuen Dokuments.
Vom Begrüßungsbildschirm aus können Sie außerdem Näheres über Dreamweaver erfahren, indem Sie an einer Tour
durch das Produkt teilnehmen oder ein Tutorial durcharbeiten.
Anwendungsleiste befindet sich am oberen Rand des Anwendungsfensters und enthält einen
Arbeitsbereichumschalter, verschiedene Menüs (nur unter Windows) und weitere Anwendungssteuerelemente.
Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie verschiedene Ansichten des Dokumentfensters (wie die
Entwurfsansicht und die Codeansicht), diverse Ansichtsoptionen und häufig verwendete Vorgänge, z. B. Anzeigen
einer Vorschau im Browser, aufrufen können.
Standardsymbolleiste (wird im Standardlayout des Arbeitsbereichs nicht angezeigt) enthält Schaltflächen für häufig
verwendete Operationen der Menüs „Datei“ und „Bearbeiten“: „Neu“, „Öffnen“, „Bridge durchsuchen“, „Speichern“,
9
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
„Alles speichern“, „Code drucken“, „Ausschneiden“, „Kopieren“, „Einfügen“, „Rückgängig“ und „Wiederholen“. Um
die Standardsymbolleiste anzuzeigen, wählen Sie „Ansicht“ > „Symbolleisten“ > „Standard“.
Code-Symbolleiste (wird nur in der Codeansicht angezeigt) enthält Schaltflächen für zahlreiche
Standardkodieroperationen.
Symbolleiste „Stilwiedergabe“ (in der Standardeinstellung ausgeblendet) enthält Schaltflächen, mit denen Sie beim
Verwenden von medienabhängigen Stylesheets anzeigen können, wie ein Entwurf in verschiedenen Medientypen
aussieht. Sie enthält ferner eine Schaltfläche zum Aktivieren oder Deaktivieren von CSS-Stilen (Cascading Style
Sheets).
Dokumentfenster zeigt die Dokumente an, während Sie sie erstellen und bearbeiten.
Eigenschafteninspektor dient zum Anzeigen und Ändern diverser Eigenschaften eines ausgewählten Seiten- oder
Textobjekts. Jedes Objekt verfügt über spezifische Eigenschaften. Der Eigenschafteninspektor wird im
Arbeitsbereichlayout „Coder“ in der Standardeinstellung reduziert angezeigt.
Tag-Selektor befindet sich in der Statusleiste am unteren Rand des Dokumentfensters. Zeigt die Hierarchie der Tags
an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt auszuwählen, klicken Sie in der
Hierarchie auf das Tag.
Bedienfelder ermöglichen das Überprüfen Ihrer Arbeit und das Durchführen von Änderungen. Beispiele sind das
Bedienfeld „Einfügen“, das Bedienfeld „CSS-Stile“ und das Bedienfeld „Dateien“. Sie können ein Bedienfeld erweitern,
indem Sie auf die entsprechende Registerkarte doppelklicken.
Bedienfeld „Einfügen“ enthält Schaltflächen zum Einfügen verschiedener Objekttypen (z. B. Bilder, Tabellen und
Medienelemente) in ein Dokument. Jedes Objekt entspricht einem HTML-Codeabschnitt, in dem Sie beim Einfügen
verschiedene Attribute festlegen können. Sie können beispielsweise eine Tabelle einfügen, indem Sie im Bedienfeld
„Einfügen“ auf das Symbol „Tabelle“ klicken. Sie haben auch die Möglichkeit, Objekte stattdessen über das Menü
„Einfügen“ einzufügen.
Bedienfeld „Dateien“ ermöglicht die Verwaltung der Dateien und Ordner, die Bestandteil einer Dreamweaver-Site
sind oder auf einem Remote-Server gespeichert werden. Über das Bedienfeld „Dateien“ können Sie auch auf alle
Dateien zugreifen, die sich auf dem lokalen Datenträger befinden, ähnlich dem Windows Explorer (Windows) oder
dem Finder (Macintosh).
Überblick über das Dokumentfenster
Im Dokumentfenster wird das aktuelle Dokument angezeigt. Die folgenden Ansichten stehen zur Auswahl:
Entwurfsansicht ist eine Entwurfsumgebung für grafisches Seitenlayout, grafisches Bearbeiten und schnelle
Anwendungsentwicklung. In dieser Ansicht kann das Dokument in Dreamweaver vollständig bearbeitet werden und
wird grafisch ähnlich der Darstellung in einem Browser angezeigt.
Codeansicht ist eine Umgebung zum manuellen Verfassen und Bearbeiten von HTML, JavaScript und
Serversprachencode, z. B. PHP oder ColdFusion Markup Language (CFML), sowie anderen Arten von Code.
Geteilte Codeansicht ist eine geteilte Version der Codeansicht, in der Sie Bildläufe durchführen können, um
gleichzeitig verschiedene Abschnitte eines Dokuments zu bearbeiten.
Code- und Entwurfsansicht ermöglicht es, sowohl die Codeansicht als auch die Entwurfsansicht eines Dokuments in
einem Fenster anzuzeigen.
Live-Ansicht ähnelt der Entwurfsansicht und bietet eine realistischere Darstellung, wie Ihr Dokument in einem
Browser angezeigt wird. Sie können mit dem Dokument genauso interagieren, wie dies später im Browser geschieht.
In der Live-Ansicht kann der Code nicht bearbeitet werden. Sie können ihn jedoch in der Codeansicht bearbeiten und
dann die Live-Ansicht aktualisieren, damit die Änderungen angezeigt werden.
10
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Live-Codeansicht ist nur beim Anzeigen eines Dokuments in der Live-Ansicht verfügbar. In der Live-Codeansicht
wird der tatsächliche Code dargestellt, den ein Browser zum Ausführen der Seite verwendet. Dieser kann sich
dynamisch ändern, während Sie in der Live-Ansicht mit der Seite interagieren. In der Live-Codeansicht kann der Code
nicht bearbeitet werden.
In einem maximierten Dokumentfenster (Standardeinstellung) werden im oberen Bereich Registerkarten mit den
Dateinamen aller geöffneten Dokumente angezeigt. Hinter dem Dateinamen wird in Dreamweaver ein Sternchen (*)
angezeigt, wenn Sie Änderungen vorgenommen und diese noch nicht gespeichert haben.
Um zu einem Dokument zu wechseln, klicken Sie auf die entsprechende Registerkarte.
Darüber hinaus wird unterhalb der Registerkarte des Dokuments (oder unterhalb der Titelleiste des Dokuments, wenn
Dokumente in separaten Fenstern angezeigt werden) die Symbolleiste „Zugehörige Dateien“ angezeigt. Zugehörige
Dateien sind Dokumente, die mit der aktuellen Datei verknüpft sind, beispielsweise CSS- oder JavaScript-Dateien. Um
eine dieser zugehörigen Dateien im Dokumentfenster zu öffnen, klicken Sie auf der Symbolleiste „Zugehörige
Dateien“ auf den entsprechenden Dateinamen.
More Help topics
“Arbeiten im Dokumentfenster” on page 19
“Live-Ansicht” on page 312
“Zugehörige Dateien öffnen” on page 76
“Allgemeine Informationen zum Programmieren in Dreamweaver” on page 317
Überblick über die Dokumentsymbolleiste
Die Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie schnell zwischen verschiedenen Ansichten des
Dokuments wechseln können. Außerdem befinden sich auf der Symbolleiste einige häufig verwendete Befehle und
Optionen zum Anzeigen und Übertragen von Dokumenten zwischen der lokalen Site und Remote-Sites. In der
folgenden Abbildung ist die erweiterte Dokumentsymbolleiste dargestellt.
A: Codeansicht anzeigen B: Code- und Entwurfsansicht anzeigen C: Entwurfsansicht anzeigen D: Live-Codeansicht
E: Browserkompatibilität prüfen F: Live-Ansicht G: CSS-Prüfmodus H: Vorschau/Debug im Browser I: Visuelle Hilfsmittel
J: Entwurfsansicht aktualisieren K: Dokumenttitel L: Dateiverwaltung
In der Dokumentsymbolleiste werden die folgenden Optionen angezeigt:
Codeansicht anzeigen zeigt ausschließlich die Codeansicht im Dokumentfenster an.
Code- und Entwurfsansicht anzeigen teilt das Dokumentfenster in einen Code- und einen Entwurfsbereich. Wenn Sie
diese kombinierte Ansicht auswählen, wird im Menü „Ansichtsoptionen“ die Option „Entwurfsansicht im
Vordergrund“ verfügbar.
Entwurfsansicht anzeigen zeigt ausschließlich die Entwurfsansicht im Dokumentfenster an.
Note: Wenn Sie mit XML, JavaScript, CSS oder anderen codebasierten Dateitypen arbeiten, können Sie die Dateien nicht
in der Entwurfsansicht anzeigen. Die Schaltflächen „Entwurf“ und „Teilen“ sind dann abgeblendet.
Live-Ansicht zeigt eine nicht bearbeitbare, interaktive und browserbasierte Ansicht des Dokuments an.
Live-Codeansicht zeigt den tatsächlichen Code an, der vom Browser zum Ausführen der Seite verwendet wird.
11
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Dokumenttitel ermöglicht Ihnen die Eingabe eines Titels für das Dokument, der in der Titelleiste des Browsers
angezeigt wird. Wenn das Dokument bereits einen Titel hat, wird er in diesem Feld angezeigt.
Dateiverwaltung öffnet das Popupmenü „Dateiverwaltung“.
Vorschau/Debug im Browser ermöglicht es Ihnen, das Dokument im Browser als Vorschau anzuzeigen oder zu
debuggen. Wählen Sie im Popupmenü einen Browser aus.
Entwurfsansicht aktualisieren aktualisiert die Entwurfsansicht des Dokuments, nachdem Sie es in der Codeansicht
geändert haben. In der Codeansicht vorgenommene Änderungen werden nicht automatisch in der Entwurfsansicht
angezeigt, sondern erst dann, wenn Sie bestimmte Aktionen durchführen, z. B. die Datei speichern oder auf diese
Schaltfläche klicken.
Note: Bei der Aktualisierung werden auch DOM-abhängige (Document Object Model) Codefunktionen neu angezeigt,
wie z. B. die Möglichkeit zur Auswahl der öffnenden oder schließenden Tags eines Codeblocks.
Ansichtsoptionen ermöglicht es Ihnen, Optionen für die Code- und die Entwurfsansicht festzulegen, z. B. welche
Ansicht im Vordergrund angezeigt werden soll. Die im Menü enthaltenen Optionen beziehen sich auf die aktuelle
Ansicht: Entwurfsansicht, Codeansicht oder beide Ansichten.
Visuelle Hilfsmittel ermöglicht die Nutzung verschiedener visueller Hilfsmittel zum Entwerfen von Seiten.
Markup überprüfen ermöglicht die Überprüfung des aktuellen Dokuments oder eines ausgewählten Tags auf
Gültigkeit.
Browserkompatibilität prüfen ermöglicht die Überprüfung der verwendeten CSS auf Kompatibilität mit
verschiedenen Browsern.
More Help topics
“Seitenvorschau in der Live-Ansicht” on page 312
“Festlegen von Codeeinstellungen” on page 324
“Head-Inhalt anzeigen und bearbeiten” on page 363
“Visuelle Hilfsmittel für das Layout” on page 189
Überblick über die Standardsymbolleiste
Die Standardsymbolleiste enthält Schaltflächen für häufig verwendete Operationen der Menüs „Datei“ und
„Bearbeiten“: „Neu“, „Öffnen“, „Bridge durchsuchen“, „Speichern“, „Alles speichern“, „Code drucken“,
„Ausschneiden“, „Kopieren“, „Einfügen“, „Rückgängig“ und „Wiederholen“. Diese Schaltflächen haben dieselben
Funktionen wie die entsprechenden Menübefehle.
Überblick über die Symbolleiste „Stilwiedergabe“
Die (standardmäßig ausgeblendete) Symbolleiste „Stilwiedergabe“ enthält Schaltflächen, mit denen Sie sich beim
Verwenden von medienabhängigen Stylesheets ansehen können, wie ein Entwurf in verschiedenen Medientypen
aussieht. Sie enthält ferner eine Schaltfläche zum Aktivieren oder Deaktivieren von CSS-Stilen. Um diese Symbolleiste
anzuzeigen, wählen Sie „Ansicht“ > „Symbolleisten“ > „Stilwiedergabe“.
12
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Diese Symbolleiste kann nur bei Dokumenten mit medienabhängigen Stylesheets eingesetzt werden, z. B. dann, wenn
in Ihrem Stylesheet eine body-Regel für Druckmedien und eine andere body-Regel für Handheld-Geräte festgelegt
wurde. Weitere Informationen zur Erstellung medienabhängiger Stylesheets finden Sie auf der Website des World
Wide Web Consortium unter www.w3.org/TR/CSS21/media.html.
Standardmäßig zeigt Dreamweaver den Entwurf für den Bildschirmmedientyp an (d. h., Sie sehen, wie eine Seite auf
einem Computerbildschirm wiedergegeben wird). Sie können die folgenden Medientypwiedergaben anzeigen, indem
Sie auf der Symbolleiste „Stilwiedergabe“ auf die entsprechenden Schaltflächen klicken.
Bildschirmmedientyp wiedergeben zeigt, wie die Seite auf einem Computerbildschirm angezeigt wird.
Druckmedientyp wiedergeben zeigt an, wie die Seite auf Papier gedruckt aussehen wird.
Handheld-Medientyp wiedergeben zeigt, wie die Seite auf einem Handheld-Gerät wie beispielsweise einem
Mobiltelefon oder einem BlackBerry-Gerät aussieht.
Projektionsmedientyp wiedergeben zeigt, wie die Seite mit einem Projektionsgerät wiedergegeben wird.
TTY-Medientyp wiedergeben zeigt, wie die Seite mit einem Fernschreiber wiedergegeben wird.
TV-Medientyp wiedergeben zeigt, wie die Seite auf einem Fernsehbildschirm angezeigt wird.
Anzeige der CSS-Stile ein/aus ermöglicht das Aktivieren und Deaktivieren von CSS-Stilen. Diese Schaltfläche ist von
den anderen Medienschaltflächen unabhängig.
Entwurfsphasen-Stylesheets ermöglicht die Angabe eines Stils für die Entwurfsphase.
Ein Tutorial zur Entwicklung von Style Sheets für Drucker und mobile Geräte finden Sie unter
www.adobe.com/go/vid0156_de.
Überblick über die Symbolleiste „Browser-Navigation“
Die Symbolleiste „Browser-Navigation“ wird in der Live-Ansicht aktiv. Auf dieser Symbolleiste wird die Adresse der
Seite angezeigt, die Sie im Dokumentfenster geöffnet haben. Ab Dreamweaver CS5 entspricht die Live-Ansicht in ihrer
Funktion einem Browser, d. h., auch wenn Sie eine Site außerhalb der lokalen Site aufrufen (z. B.
http://www.adobe.com), wird die Seite im Dokumentfenster geladen.
A: Browser-Steuerelemente B: Adresszeile C: Live-Ansicht-Optionen
Hyperlinks sind standardmäßig in der Live-Ansicht nicht aktiv. Dadurch dass Hyperlinks nicht aktiv sind, können Sie
im Dokumentfenster Hyperlinktext auswählen oder darauf klicken, ohne dass eine andere Seite aufgerufen wird. Zum
Testen von Hyperlinks in der Live-Ansicht können Sie einmaliges oder kontinuierliches Klicken aktivieren. Klicken
Sie dazu im Menü „Ansichtsoptionen“ rechts neben der Adresszeile auf „Hyperlinks aufrufen“ oder „Hyperlinks
fortlaufend aufrufen“.
More Help topics
“Seitenvorschau in Dreamweaver” on page 312
13
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Überblick über die Code-Symbolleiste
Die Code-Symbolleiste enthält Schaltflächen zum Ausführen zahlreicher Kodieroperationen wie z. B. Reduzieren und
Erweitern von Codeauswahlen, Hervorheben von ungültigem Code, Anwenden und Entfernen von Kommentaren,
Einziehen von Code und Einfügen kürzlich verwendeter Codefragmente. Die Code-Symbolleiste wird links im
Dokumentfenster vertikal angezeigt und ist nur in der Codeansicht sichtbar.
Es ist nicht möglich, die Code-Symbolleiste abzudocken oder zu verschieben. Sie können sie jedoch ausblenden
(„Ansicht“ > „Symbolleisten“ > „Kodierung“).
Sie können die Code-Symbolleiste ferner bearbeiten, um weitere Schaltflächen anzuzeigen (z. B. „Umbruch“,
„Versteckte Zeichen“ und „Automatischer Einzug“) oder nicht verwendete Schaltflächen auszublenden. Dazu müssen
Sie die XML-Datei bearbeiten, die die Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch
Erweitern von Dreamweaver.
More Help topics
“Code mit der Code-Symbolleiste einfügen” on page 335
Überblick über die Statusleiste
Die Statusleiste am unteren Rand des Dokumentfensters enthält zusätzliche Informationen zu dem Dokument, das Sie
gerade erstellen.
14
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
A: Tag-Selektor B: Werkzeug auswählen C: Handwerkzeug D: Zoomwerkzeug E: Vergrößerung einstellen F: Popupmenü „Fenstergröße“
G: Dokumentgröße und geschätzte Downloadzeit H: Kodierungskennung
Tag-Selektor Zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten
Inhalt auszuwählen, klicken Sie in der Hierarchie auf das Tag. Wenn Sie auf
<body> klicken, wird der gesamte
Hauptteil des Dokuments markiert. Um die
class- oder id-Attribute eines Tags im Tag-Selektor festzulegen, klicken
Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Tag und wählen Sie im
Kontextmenü eine Klasse oder eine ID aus.
Werkzeug auswählen aktiviert bzw. deaktiviert das Handwerkzeug.
Handwerkzeug ermöglicht es, auf ein Dokument zu klicken und das Dokument in das Dokumentfenster zu ziehen.
Zoomwerkzeug und Popupmenü „Vergrößerung einstellen“ ermöglicht eine vergrößerte oder verkleinerte
Darstellung Ihres Dokuments.
Popupmenü „Fenstergröße“ (in der Codeansicht nicht verfügbar) ermöglicht die Anpassung der Größe des
Dokumentfensters an fest definierte oder eigene Maße. Wenn Sie die Anzeigegröße einer Seite in der Entwurfsansicht
oder Live-Ansicht ändern, ändern sich lediglich die Abmessungen der Anzeigegröße. Die Größe des Dokuments bleibt
dagegen unverändert.
Neben vordefinierten und benutzerdefinierten Größen werden in Dreamweaver auch Größen angezeigt, die in einer
Medienabfrage festgelegt sind. Wenn Sie eine Größe auswählen, die einer Medienabfrage entspricht, wird die Seite
unter Verwendung der Medienabfrage angezeigt. Sie können zudem die Seitenausrichtung ändern, um die Vorschau
der Seite für Mobilgeräte anzuzeigen, bei denen sich das Seitenlayout in Abhängigkeit von der Ausrichtung des Geräts
ändert.
Dokumentgröße und Downloadzeit zeigt die geschätzte Dateigröße und Downloadzeit für die Seite einschließlich
aller zu diesem Dokument gehörenden Dateien an, z. B. Bild- und andere Mediendateien.
Kodierungskennung zeigt die Textkodierung des aktuellen Dokuments an.
More Help topics
“Fenstergröße und Verbindungsgeschwindigkeit festlegen” on page 22
“Ansicht vergrößern und verkleinern” on page 235
“Dokumentfenster vergrößern oder verkleinern” on page 21
“Voreinstellungen für Downloadzeit und -größe festlegen” on page 236
15
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Überblick über den Eigenschafteninspektor
Im Eigenschafteninspektor können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. von Text
oder eines eingefügten Objekts, anzeigen und ändern. Der Inhalt des Eigenschafteninspektors hängt vom
ausgewählten Element ab. Wenn Sie beispielsweise ein Bild auf Ihrer Seite markieren, ändert sich die Anzeige des
Eigenschafteninspektors, um die Eigenschaften des Bildes darzustellen (Dateipfad zum Bild, Breite, Höhe und ggf.
Rand des Bildes usw.).
Der Eigenschafteninspektor befindet sich in der Standardeinstellung am unteren Rand des Arbeitsbereichs, kann aber
auch abgedockt und als schwebendes Bedienfeld auf dem Arbeitsbereich positioniert werden.
More Help topics
“An- und Abdocken von Bedienfeldern” on page 26
“Eigenschafteninspektor verwenden” on page 24
16
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Überblick über das Bedienfeld „Einfügen“
Das Bedienfeld „Einfügen“ enthält Schaltflächen zum Erstellen und Einfügen von Objekten, z. B. von Tabellen, Bildern
und Hyperlinks. Die Schaltflächen sind in mehreren Kategorien zusammengefasst. Sie können zwischen diesen
Kategorien wechseln, indem Sie im Popupmenü „Kategorie“ die gewünschte Kategorie auswählen. Weitere
Kategorien werden angezeigt, wenn das aktuelle Dokument Servercode enthält, z. B. bei ASP- oder CFML-
Dokumenten.
Einige Kategorien enthalten Schaltflächen mit Popupmenüs. Wenn Sie eine Option aus einem Popupmenü auswählen,
wird diese zur Standardaktion der entsprechenden Schaltfläche. Beispiel: Wenn Sie im Popupmenü der Schaltfläche
„Bild“ die Option „Bild-Platzhalter“ auswählen, fügt Dreamweaver einen Bild-Platzhalter ein, wenn Sie das nächste
Mal auf die Schaltfläche „Bild“ klicken. Jedes Mal, wenn Sie im Popupmenü eine neue Option auswählen, wird diese
zur Standardaktion der entsprechenden Schaltfläche.
Das Bedienfeld „Einfügen“ ist in die folgenden Kategorien unterteilt:
Kategorie „Allgemein“ ermöglicht das Erstellen und Einfügen der am häufigsten verwendeten Objekte, wie etwa
Bilder und Tabellen.
Kategorie „Layout“ ermöglicht das Einfügen von Tabellen, Tabellenelementen, div-Tags, Frames und Spry-Widgets.
Bei der Bearbeitung von Tabellen können Sie zwischen zwei Ansichten auswählen: „Standard“ (Voreinstellung) und
„Erweitert“.
Kategorie „Formulare“ enthält Schaltflächen zum Erstellen von Formularen und zum Einfügen von
Formularelementen, einschließlich Spry-Überprüfungs-Widgets.
Kategorie „Daten“ ermöglicht das Einfügen von dynamischen Elementen, wie z. B. Datensatzgruppen, wiederholten
Bereichen sowie Formularen zum Einfügen und Aktualisieren von Datensätzen.
Kategorie „Spry“ enthält Schaltflächen zum Entwurf von Spry-Seiten, einschließlich Spry-Datenobjekten und -
Widgets.
17
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Kategorie „InContext Editing“ enthält Schaltflächen zum Erstellen von „InContext Editing“-Seiten, einschließlich
Schaltflächen für bearbeitbare und wiederholende Bereiche, sowie zum Verwalten von CSS-Klassen.
Kategorie „Text“
ermöglicht das Einfügen verschiedener Tags zur Text- und Listenformatierung, z. B.
b
,
em
,
p
,
h1
und
ul
.
Kategorie „Favoriten“ ermöglicht das Gruppieren und Anordnen der Schaltflächen des Bedienfelds „Einfügen“, die
von Ihnen am häufigsten verwendet werden.
Servercode-Kategorien sind nur für Seiten verfügbar, die eine bestimmte Codesprache verwenden, darunter ASP,
CFML Basic, CFML Flow, CFML Advanced und PHP. Alle diese Kategorien enthalten Servercode-Objekte, die Sie in
der Codeansicht einfügen können.
Im Gegensatz zu den anderen Bedienfeldern in Dreamweaver können Sie das Bedienfeld „Einfügen“ aus der
standardmäßigen Andockposition in eine horizontale Position oberhalb des Dokumentfensters ziehen. Dabei ändert
sich das Bedienfeld in eine Symbolleiste (die jedoch nicht wie andere Symbolleisten ein- und ausgeblendet werden
kann).
More Help topics
“Bedienfeld „Einfügen“ verwenden” on page 223
Überblick über das Bedienfeld „Dateien“
Sie verwenden das Bedienfeld „Dateien“ zum Anzeigen und Verwalten der Dateien Ihrer Dreamweaver-Website.
Bei der Anzeige von Websites, Dateien oder Ordnern im Bedienfeld „Dateien“ können Sie die Größe des
Anzeigebereichs ändern sowie das Bedienfeld „Dateien“ erweitern bzw. reduzieren. Wenn das Bedienfeld „Dateien“
reduziert ist, wird der Inhalt der lokalen Site, der Remote-Site, des Testservers oder des SVN-Repository in Form einer
Dateiliste angezeigt. Im erweiterten Bedienfeld werden die lokale Site und entweder die Remote-Site, der Testserver
oder das SVN-Repository angezeigt.
Bei Dreamweaver-Sites können Sie das Bedienfeld „Dateien“ auch anpassen, indem Sie die Ansicht ändern (für die
lokale Site oder Remote-Site), die standardmäßig im reduzierten Bedienfeld angezeigt wird.
18
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
(CS 5.5) Das Bedienfeld „Dateien“ tauscht in regelmäßigen Abständen Daten mit dem Server aus, um seinen Inhalt zu
aktualisieren. Es wird eine Fehlermeldung angezeigt, wenn Sie während dieser automatischen Aktualisierung
versuchen, im Bedienfeld „Dateien“ eine Aktion durchzuführen. Um die automatischen Aktualisierungen zu
deaktivieren, öffnen Sie das Optionsmenü des Bedienfelds „Dateien“ und deaktivieren im Menü „Ansicht“ die Option
„Autom. Aktualisierung“.
Um den Inhalt des Bedienfelds manuell zu aktualisieren, klicken Sie im Bedienfeld auf die Schaltfläche
„Aktualisieren“. Der aktuelle Auscheck-Status der Dateien wird allerdings nur aktualisiert, wenn die automatische
Aktualisierung aktiviert ist.
More Help topics
“Mit Dateien im Bedienfeld „Dateien“ arbeiten” on page 84
Überblick über das Bedienfeld „CSS-Stile“
In diesem Bedienfeld können Sie die CSS-Regeln und -Eigenschaften verfolgen, die sich auf ein derzeit ausgewähltes
Seitenelement auswirken (Modus „Aktuell“), oder die Regeln und Eigenschaften, die sich auf das gesamte Dokument
auswirken (Modus „Alle“). Über eine Umschalttaste oben im Bedienfeld „CSS-Stile“ können Sie zwischen den beiden
Modi wechseln. Im Bedienfeld „CSS-Stile“ können Sie außerdem CSS-Eigenschaften im Modus „Alle“ und „Aktuell“
ändern.
Sie können die Größe eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern.
Im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Bereiche: Das Bedienfeld „Zusammenfassung für
Auswahl“, das die CSS-Eigenschaften für die aktuelle Auswahl im Dokument enthält, das Bedienfeld „Regeln“, das den
Speicherort von ausgewählten Eigenschaften (bzw. je nach der Auswahl die Regelhierarchie für das ausgewählte Tag)
anzeigt, und das Bedienfeld „Eigenschaften“, mit dem Sie CSS-Eigenschaften der Regel ändern können, die die
Auswahl definiert.
19
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Im Modus „Alle“ enthält das Bedienfeld „CSS-Stile“ zwei Bereiche: „Alle Regeln“ (oben) und „Eigenschaften“ (unten).
Im Bedienfeld „Alle Regeln“ wird eine Liste der Regeln angezeigt, die im aktuellen Dokument definiert sind, sowie alle
Regeln, die in den mit dem aktuellen Dokument verknüpften Stylesheets definiert wurden. Im Bedienfeld
„Eigenschaften“ können Sie CSS-Eigenschaften für eine ausgewählte Regel im Bedienfeld „Alle Regeln“ bearbeiten.
Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen
während Ihrer Arbeit in einer Vorschau verfolgen können.
Visuelle Hilfsmittel
Dreamweaver bietet verschiedene Hilfsmittel zur leichteren Gestaltung von Dokumenten und zur ungefähren
Vorschau auf die Darstellung im Browser. Folgende Möglichkeiten stehen zur Verfügung:
• Verkleinern oder Vergrößern des Dokumentfensters auf eine bestimmte Fenstergröße, um zu sehen, wie die
einzelnen Elemente auf die Seite passen.
• Verwendung eines Tracing-Bilds als Seitenhintergrund zum leichteren Duplizieren eines Designs, das mit einer
Illustrations- oder Bildbearbeitungsanwendung wie Adobe® Photoshop® oder Adobe® Fireworks® erstellt wurde.
• Verwendung von Linealen und Hilfslinien zur Bereitstellung eines visuellen Anhaltspunkts für die genaue
Positionierung und Änderung der Größe von Seitenelementen.
• Verwendung des Rasters zur genaueren Positionierung und Größenänderung von absolut positionierten
Elementen (AP-Elementen).
Auf der Seite eingeblendete Rasterlinien erleichtern das Ausrichten von AP-Elementen. Bei aktivierter Funktion
„Am Raster ausrichten“ werden die AP-Elemente automatisch am nächstgelegenen Rasterschnittpunkt ausgerichtet,
wenn Sie sie verschieben oder ihre Größe ändern. (Andere Objekte, wie z. B. Bilder und Absätze, werden nicht am
Raster ausgerichtet.) Die Ausrichtung findet auch dann statt, wenn das Raster nicht eingeblendet ist.
More Help topics
“Visuelle Hilfsmittel für das Layout” on page 189
GoLive-Benutzer
Wenn Sie bis jetzt GoLive verwendet haben und auf Dreamweaver umsteigen möchten, dann lesen Sie die Online-
Einführung zum Arbeitsbereich/-ablauf von Dreamweaver und die Abhandlung zur effektiven Migration Ihrer Site zu
Dreamweaver.
More Help topics
Dreamweaver-Tutorial für GoLive-Benutzer
Arbeiten im Dokumentfenster
Zwischen Ansichten im Dokumentfenster umschalten
Dokumente können im Dokumentfenster in der Codeansicht, der geteilten Codeansicht, der Entwurfsansicht oder in
der Code- und Entwurfsansicht (geteilte Ansicht) bzw. in der Live-Ansicht angezeigt werden. Sie haben zudem die
Möglichkeit, die geteilte Codeansicht oder die Code- und Entwurfsansicht horizontal oder vertikal anzuzeigen. (Die
horizontale Anzeige ist die Standardeinstellung.)
20
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Zur Codeansicht wechseln
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Code“ aus.
• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Codeansicht anzeigen“.
Zur geteilten Codeansicht wechseln
In der geteilten Codeansicht wird das Dokument in zwei Bereiche unterteilt, sodass Sie gleichzeitig zwei Abschnitte
des Codes bearbeiten können.
❖ Wählen Sie „Ansicht“ > „Codeteilung“ aus.
Zur Entwurfsansicht wechseln
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Entwurf“ aus.
• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Entwurfsansicht anzeigen“.
Code- und Entwurfsansicht anzeigen
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Code und Entwurf“ aus.
• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Code- und Entwurfsansicht anzeigen“.
Standardmäßig wird die Codeansicht im oberen Bereich des Dokumentfensters und die Entwurfsansicht im unteren
Bereich angezeigt. Wenn Sie die Entwurfsansicht im oberen Fensterbereich anzeigen möchten, wählen Sie „Ansicht“ >
„Entwurfsansicht oben“ aus.
Zwischen Code- und Entwurfsansicht umschalten
❖ Drücken Sie Strg+' (Apostroph).
Wenn im Dokumentfenster beide Ansichten angezeigt werden, schalten Sie mit diesem Tastaturbefehl den Fokus von
einer Ansicht zur anderen um.
Ansichten vertikal teilen
Diese Option ist nur in der geteilten Codeansicht sowie der Code- und Entwurfsansicht (geteilte Ansicht) verfügbar.
In der Codeansicht und der Entwurfsansicht ist sie dagegen deaktiviert.
1 Stellen Sie sicher, dass die geteilte Codeansicht („Ansicht > „Codeteilung“) oder die Code- und Entwurfsansicht
(„Ansicht“ > „Code und Entwurf“) ausgewählt ist.
2 Wählen Sie „Ansicht“ > „Vertikal teilen“ aus.
In der Code- und Entwurfsansicht können Sie die Entwurfsansicht im linken Bereich anzeigen („Ansicht“ >
„Entwurfsansicht links“).
21
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
More Help topics
“Überblick über das Dokumentfenster” on page 9
“Seitenvorschau in der Live-Ansicht” on page 312
Dokumentfenster überlappend oder nebeneinander anordnen
Wenn zahlreiche Dokumente gleichzeitig angeordnet sind, können Sie diese überlappend oder nebeneinander
anordnen.
More Help topics
“Verwalten von Fenstern und Bedienfeldern” on page 25
“Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh)” on page 31
Dokumentfenster überlappend anordnen
❖ Wählen Sie „Fenster“ > „Überlappend“ aus.
Dokumentfenster nebeneinander anordnen
• Wählen Sie in Windows „Fenster“ > „Untereinander“ oder „Fenster“ > „Nebeneinander“.
• Wählen Sie auf dem Macintosh „Fenster“ > „Tile“ (Nebeneinander).
Dokumentfenster vergrößern oder verkleinern
In der Statusleiste werden die aktuellen Abmessungen des Dokumentfensters (in Pixel) angezeigt. Sie können das
Dokumentfenster auf eine der vordefinierten Größen im Popupmenü einstellen, die vordefinierten Größen bearbeiten
oder neue Größen festlegen und so sicherstellen, dass die Seite für eine bestimmte Größe geeignet ist.
Wenn Sie die Anzeigegröße einer Seite in der Entwurfsansicht oder Live-Ansicht ändern, ändern sich lediglich die
Abmessungen der Anzeigegröße. Die Größe des Dokuments bleibt dagegen unverändert.
Neben vordefinierten und benutzerdefinierten Größen werden in Dreamweaver auch Größen angezeigt, die in einer
Medienabfrage festgelegt sind. Wenn Sie eine Größe auswählen, die einer Medienabfrage entspricht, wird die Seite
unter Verwendung der Medienabfrage angezeigt. Sie können zudem die Seitenausrichtung ändern, um die Vorschau
der Seite für Mobilgeräte anzuzeigen, bei denen sich das Seitenlayout in Abhängigkeit von der Ausrichtung des Geräts
ändert.
Dokumentfenster auf eine voreingestellte Größe ändern
❖ Wählen Sie im Popupmenü „Fenstergröße“ am unteren Rand des Dokumentfensters eine Größe aus. Ab
Dreamweaver CS5.5 wird eine erweiterte Auswahl an vordefinierten Fenstergrößen angeboten, einschließlich
üblicher Größen für Mobilgeräte (wie unten dargestellt).
22
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Die angezeigte Fenstergröße ist die innere Abmessung des Browserfensters ohne Rahmen. Das jeweilige Mobilgerät
oder die Bildschirmgröße stehen rechts daneben.
Eine weniger exakte Größenänderung lässt sich auch mit dem jeweiligen Standardverfahren Ihres Betriebssystems
erzielen, beispielsweise durch Ziehen der rechten unteren Fensterecke.
Note: (Nur Windows) Dokumente im Dokumentfenster sind standardmäßig maximiert. Die Größe maximierter
Dokumente kann nicht geändert werden. Klicken Sie zum Aufheben der maximierten Darstellung auf die entsprechende
Schaltfläche in der rechten oberen Ecke des Dokuments.
Im Popupmenü „Fenstergröße“ aufgeführte Werte ändern
1 Wählen Sie im Popupmenü „Fenstergröße“ die Option „Größen bearbeiten“.
2 Klicken Sie in der Liste „Fenstergrößen“ auf einen Wert für Höhe oder Breite und geben Sie einen neuen Wert ein.
Sie können das Dokument auch auf eine bestimmte Breite einstellen und die Höhe unverändert lassen, indem Sie einen
der Werte für die Höhe auswählen und ihn löschen.
3 Klicken Sie in das Feld „Beschreibung“ und geben Sie einen aussagekräftigen Text für eine bestimmte Größe ein.
Neue Größe zum Popupmenü „Fenstergröße“ hinzufügen
1 Wählen Sie im Popupmenü „Fenstergröße“ die Option „Größen bearbeiten“ aus.
2 Klicken Sie in der Spalte „Breite“ auf die leere Fläche unter dem letzten Wert.
3 Geben Sie Werte für Breite und Höhe ein.
Wenn Sie nur die Breite oder nur die Höhe einstellen möchten, lassen Sie einfach das entsprechende andere Feld leer.
4 Klicken Sie in das Feld „Beschreibung“ und geben Sie einen aussagekräftigen Text für die hinzugefügte Größe ein.
Geben Sie beispielsweise SVGA oder Durchschnitts-PC neben dem Eintrag für einen Monitor mit 800 x 600 Pixel
bzw. 17 Zoll Mac neben dem Eintrag für einen Monitor mit 832 x 624 Pixel ein. Die meisten Bildschirme können auf
eine Vielzahl von Pixel-Auflösungen eingestellt werden.
Fenstergröße und Verbindungsgeschwindigkeit festlegen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links die Kategorie „Statusleiste (CS5)“ bzw. „Fenstergrößen“ (ab CS5.5) aus.
3 Wählen Sie eine der folgenden Optionen:
Fenstergrößen ermöglicht Ihnen, die Fenstergrößen anzupassen, die im Popupmenü der Statusleiste angezeigt
werden.
Verbindungsgeschwindigkeit legt die zum Ermitteln der Downloadzeit verwendete Verbindungsgeschwindigkeit (in
Kbit/s) fest. Die Downloadgröße für die Seite wird in der Statusleiste angezeigt. Ist im Dokumentfenster ein Bild
ausgewählt, wird dessen Downloadgröße im Eigenschafteninspektor angezeigt.
More Help topics
“Überblick über die Statusleiste” on page 13
“Dokumentfenster vergrößern oder verkleinern” on page 21
23
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Berichte in Dreamweaver
Zur Inhaltssuche, Fehlersuche und Inhaltsprüfung können Sie Berichte in Dreamweaver erstellen. Die folgenden
Berichtstypen stehen zur Verfügung:
Suchen ermöglicht die Suche nach Tags, Attributen und bestimmtem Text in Tags.
Referenz ermöglicht die Suche nach hilfreichen Referenzinformationen.
Überprüfung ermöglicht die Prüfung auf Code- bzw. Syntaxfehler.
Browserkompatibilität ermöglicht es Ihnen festzustellen, ob der in Dokumenten enthaltene HTML-Code Tags oder
Attribute enthält, die von den Zielbrowsern nicht unterstützt werden.
Hyperlink-Prüfer ermöglicht die Suche nach defekten, externen und verwaisten Hyperlinks und ihre Reparatur.
Site-Berichte ermöglicht die Optimierung des Arbeitsablaufs bzw. die Prüfung der auf der Site vorhandenen HTML-
Attribute. Arbeitsablaufberichte enthalten „Ausgecheckt von“- und „Kürzlich geändert“-Einträge sowie Design Notes,
während HTML-Berichte Informationen zur Barrierefreiheit sowie Hinweise auf kombinierbare verschachtelte
Schrift-Tags, fehlenden ALT-Text, überflüssige verschachtelte Tags, entfernbare leere Tags und unbenannte
Dokumente enthalten.
FTP-Protokoll ermöglicht das Anzeigen aller FTP-Dateiübertragungen.
Serverdebug ermöglicht die Anzeige von Informationen zum Debuggen von Adobe® ColdFusion®-Anwendungen.
Symbolleisten, Inspektoren und Kontextmenüs
verwenden
Symbolleisten anzeigen
Verwenden Sie die Dokument- und Standardsymbolleiste für Dokument- und Standardbearbeitungsvorgänge, die
Code-Symbolleiste zum schnellen Einfügen von Code und die Symbolleiste „Stilwiedergabe“, um die Seite so
anzuzeigen, wie sie in verschiedenen Medientypen wiedergegeben wird. Sie können die Symbolleisten nach Bedarf
ein- oder ausblenden.
• Wählen Sie „Ansicht“ > „Symbolleisten“ und dann die gewünschte Symbolleiste aus.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf eine beliebige
Symbolleiste und wählen Sie sie dann im Kontextmenü aus.
Note: Um die Code-Symbolleiste im Codeinspektor anzuzeigen („Fenster“ > „Codeinspektor“) müssen Sie die Code-
Symbolleiste im Popupmenü „Ansicht“ am oberen Rand des Inspektors wählen.
More Help topics
“Überblick über die Dokumentsymbolleiste” on page 10
“Überblick über die Standardsymbolleiste” on page 11
“Überblick über die Code-Symbolleiste” on page 13
“Überblick über die Symbolleiste „Stilwiedergabe“” on page 11
24
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Eigenschafteninspektor verwenden
Im Eigenschafteninspektor können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. von Text
oder eines eingefügten Objekts, anzeigen und ändern. Der Inhalt des Eigenschafteninspektors hängt von den
ausgewählten Elementen ab.
Klicken Sie zum Aufrufen der Hilfe für einen bestimmten Eigenschafteninspektor auf die Hilfeschaltfläche in der
rechten oberen Ecke des Eigenschafteninspektors oder wählen Sie im Menü „Optionen“ eines
Eigenschafteninspektors die Option „Hilfe“ aus.
Note: Mit dem Tag-Inspektor können Sie alle mit den Eigenschaften eines Tags verknüpften Attribute anzeigen und
bearbeiten.
More Help topics
“Überblick über den Eigenschafteninspektor” on page 15
“Texteigenschaften im Eigenschafteninspektor festlegen” on page 245
“An- und Abdocken von Bedienfeldern” on page 26
“Attribute mit dem Tag-Inspektor ändern” on page 357
Eigenschafteninspektor ein- bzw. ausblenden
❖ Wählen Sie „Fenster“ > „Eigenschaften“.
Eigenschafteninspektor erweitern bzw. reduzieren
❖ Klicken Sie in der unteren rechten Ecke des Eigenschafteninspektors auf den Erweiterungspfeil.
Eigenschaften von Seitenelementen anzeigen bzw. ändern
1 Wählen Sie das Seitenelement im Dokumentfenster aus.
Sie müssen den Eigenschafteninspektor unter Umständen erweitern, um alle Eigenschaften des ausgewählten
Elements anzuzeigen.
2 Ändern Sie die gewünschten Eigenschaften im Eigenschafteninspektor.
Note: Sie können Informationen zu bestimmten Eigenschaften aufrufen, indem Sie im Dokumentfenster ein Element
auswählen und dann rechts oben im Eigenschaften-Inspektor auf das Fragezeichen klicken.
3 Sollten Ihre Änderungen nicht sofort im Dokumentfenster übernommen werden, bestätigen Sie die Änderungen
mit einem der folgenden Schritte:
• Klicken Sie außerhalb der Textfelder zur Eigenschaftenbearbeitung.
• Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
• Drücken Sie die Tabulatortaste, um zu einer anderen Eigenschaft zu wechseln.
Kontextmenüs verwenden
Kontextmenüs bieten Sofortzugriff auf die wichtigsten Befehle und Eigenschaften für das aktuelle Objekt oder Fenster.
In Kontextmenüs befinden sich nur Befehle für die aktuelle Auswahl.
1 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Objekt oder
Fenster.
25
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
2 Wählen Sie im Kontextmenü einen Befehl aus.
Anpassen des Dreamweaver CS5-Arbeitsbereichs
Verwalten von Fenstern und Bedienfeldern
Sie können einen individuell angepassten Arbeitsbereich erstellen, indem Sie Dokumentfenster und Bedienfelder
verschieben und verändern. Sie haben auch die Möglichkeit, Arbeitsbereiche zu speichern und zwischen ihnen zu
wechseln. Bei Fireworks kann die Umbenennung von benutzerdefinierten Arbeitsbereichen zu unerwartetem
Verhalten führen.
Note: Beim folgenden Beispiel kommt zu Demonstrationszwecken Photoshop zum Einsatz. Die Funktionsweise des
Arbeitsbereichs ist in allen Produkten gleich.
Neuangeordnete, verankerte oder schwebende Dokumentfenster
Wenn Sie mehr als eine Datei öffnen, werden die Dokumentfenster als Registerkarten angezeigt.
• Wenn Sie die Anordnung der Dokumentfenster ändern möchten, ziehen Sie die Registerkarte eines Fensters an die
gewünschte neue Position in der Gruppe.
• Wenn Sie ein Dokumentfenster aus einer Gruppe von Fenstern abdocken (Verankerung lösen) möchten, ziehen
Sie die Registerkarte des Fensters aus der Gruppe heraus.
26
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Note: Wählen Sie in Photoshop „Fenster“ > „Anordnen“ > „Schwebendes Fenster“, um die Verankerung für ein
einzelnes Dokumentfenster aufzuheben bzw. „Fenster“ > „Anordnen“ > „Nur schwebende Fenster“, um die
Verankerung aller Dokumentfenster gleichzeitig aufzuheben. Weitere Informationen finden Sie im technischen
Hinweis unter kb405298.
Note: In Dreamweaver wird das An- und Abdocken von Dokumentfenstern nicht unterstützt. Klicken Sie im
Dokumentfenster auf die Schaltfläche „Minimieren“, um schwebende Fenster (Windows) zu erstellen, oder wählen Sie
„Fenster“ > „Nebeneinander“, um die Dokumentfenster nebeneinander anzuzeigen. Suchen Sie in der Dreamweaver-
Hilfe nach dem Begriff „Nebeneinander“, um weitere Informationen zu diesem Thema anzuzeigen. Für Macintosh-
Benutzer weicht der Workflow geringfügig ab.
• Wenn Sie ein Dokumentfenster an eine separate Gruppe von Fenstern andocken möchten, ziehen Sie das Fenster
in die Gruppe.
• Wenn Sie Gruppen von übereinander oder nebeneinander angeordneten Dokumenten erstellen möchten, ziehen
Sie das Fenster in einen der Ablagebereiche am Rand eines anderen Fensters. Sie haben außerdem die Möglichkeit,
über die Schaltfläche „Layout“ in der Anwendungsleiste ein Layout für die Gruppe auszuwählen.
Note: Von einigen Produkten wird diese Funktion nicht unterstützt. Unter Umständen stehen Ihnen jedoch in den
betreffenden Programmen im Menü „Fenster“ die Befehle „Überlappend“ und „Nebeneinander“ für das Layout Ihrer
Dokumente zur Verfügung.
• Wenn Sie beim Ziehen einer Auswahl zu einem anderen Dokument in einer Registerkartengruppe wechseln
möchten, halten Sie die Auswahl einen Moment lang über die Registerkarte des Dokuments.
Note: Von einigen Produkten wird diese Funktion nicht unterstützt.
An- und Abdocken von Bedienfeldern
Ein Dock ist eine Sammlung von gemeinsam dargestellten Bedienfeldern oder Bedienfeldgruppen, die üblicherweise
vertikal angeordnet sind. Sie können Bedienfelder an- und abdocken, indem Sie sie in ein bzw. aus einem Dock ziehen.
• Um ein Bedienfeld anzudocken, ziehen Sie es an seiner Registerkarte in das Dock – über, unter oder zwischen
andere Bedienfelder.
• Um eine Bedienfeldgruppe anzudocken, ziehen Sie ihre Titelleiste (die deckend dargestellte, leere Leiste über den
Registerkarten) in das Dock.
• Um ein Bedienfeld oder eine Bedienfeldgruppe zu entfernen, ziehen Sie die Komponente an der Registerkarte oder
Titelleiste aus dem Dock. Sie können die Komponente in ein anderes Dock ziehen oder sie schwebend über dem
Arbeitsbereich platzieren.
Das Navigatorbedienfeld wird in ein neues Dock gezogen, angezeigt durch die vertikale blaue Linie
27
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Navigatorbedienfeld in einem eigenen Dock
Sie können verhindern, dass einzelne Bedienfelder den gesamten Platz in einem Dock belegen. Ziehen Sie den unteren
Rand des Docks nach oben, sodass er nicht mehr an den Rand des Arbeitsbereichs angrenzt.
Verschieben von Bedienfeldern
Wenn Sie Bedienfelder verschieben, werden blau hervorgehobene Ablagebereiche sichtbar, die als Ziele für die
Bedienfelder verwendet werden können. Sie können beispielsweise ein Bedienfeld in einem Dock nach oben oder
unten verschieben, indem Sie es in den schmalen blauen Ablagebereich über oder unter einem anderen Bedienfeld
ziehen. Wenn Sie in einen Bereich ziehen, der kein Ablagebereich ist, schwebt das Bedienfeld über dem Arbeitsbereich.
Note: Der Ablagebereich wird durch die Position des Mauszeigers (und nicht die Position des Bedienfelds) aktiviert.
Wenn Sie also den Ablagebereich nicht sehen können, ziehen Sie den Mauszeiger an die Position, an der sich der
Ablagebereich befinden sollte.
• Um ein Bedienfeld zu verschieben, ziehen Sie es an seiner Registerkarte.
• Um eine Bedienfeldgruppe zu verschieben, ziehen Sie die Titelleiste.
Der schmale blaue Bereich zeigt an, dass das Farbbedienfeld über der Gruppe des Ebenenbedienfelds separat angedockt wird.
A. Titelleiste B. Tabulatortaste C. Ablagebereich
Drücken Sie die Strg-Taste (Windows) bzw. Befehlstaste (Mac OS), während Sie ein Bedienfeld verschieben, um zu
verhindern, dass es angedockt wird. Durch Drücken der Esc-Taste beim Verschieben des Bedienfelds können Sie den
Vorgang abbrechen.
Hinzufügen und Entfernen von Bedienfeldern
Wenn Sie alle Bedienfelder aus einem Dock entfernen, wird das Dock ausgeblendet. Sie können ein Dock erstellen,
indem Sie Bedienfelder an die rechte Seite des Arbeitsbereichs ziehen, bis ein Ablagebereich eingeblendet wird.
• Wenn Sie ein Bedienfeld entfernen möchten, klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter
Ctrl-Taste (Mac) auf die zugehörige Registerkarte und wählen Sie dann „Schließen“. Alternativ können Sie das
Bedienfeld im Menü „Fenster“ deaktivieren.
A
B
C
28
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
• Um ein Bedienfeld hinzuzufügen, wählen Sie es im Menü „Fenster“ aus und verankern Sie es dann an der
gewünschten Position.
Bearbeiten von Bedienfeldgruppen
• Um ein Bedienfeld in eine Gruppe zu verschieben, ziehen Sie seine Registerkarte in den hervorgehobenen
Ablagebereich in der Gruppe.
Hinzufügen eines Bedienfelds zu einer Bedienfeldgruppe
• Um die Bedienfelder in einer Gruppe anders anzuordnen, ziehen Sie die Registerkarte eines Bedienfelds an eine
andere Stelle in der Gruppe.
• Soll das Bedienfeld aus einer Gruppe entfernt werden, damit es über dem Arbeitsbereich schwebt, ziehen Sie es an
seiner Registerkarte aus der Gruppe.
• Um eine Gruppe zu verschieben, ziehen Sie die Titelleiste (oberhalb der Registerkarten).
Stapeln schwebender Bedienfelder
Wenn Sie ein Bedienfeld aus einem Dock herausziehen, jedoch nicht auf einen Ablagebereich, schwebt es über dem
Arbeitsbereich. Schwebende Bedienfelder können überall im Arbeitsbereich platziert werden. Sie können schwebende
Bedienfelder oder Bedienfeldgruppen stapeln und anschließend gemeinsam durch Ziehen der obersten Titelleiste
verschieben.
Schwebende gestapelte Bedienfelder
• Um schwebende Bedienfelder zu stapeln, ziehen Sie ein Bedienfeld an seiner Registerkarte auf den Ablagebereich
unterhalb eines anderen Bedienfelds.
• Um die Stapelreihenfolge zu ändern, ziehen Sie ein Bedienfeld an seiner Registerkarte nach oben oder unten.
Note: Lassen Sie die Registerkarte über dem schmalen Ablagebereich zwischen Bedienfeldern los, nicht auf dem
breiten Ablagebereich in einer Titelleiste.
• Um ein Bedienfeld oder eine Bedienfeldgruppe aus dem Stapel zu entfernen, damit die Komponente auf dem
Arbeitsbereich schwebt, ziehen Sie die Komponente an seiner Registerkarte oder Titelleiste aus dem Stapel.
Verändern der Größe von Bedienfeldern
• Um ein Bedienfeld, eine Bedienfeldgruppe oder einen Bedienfeldstapel zu minimieren oder zu maximieren,
doppelklicken Sie auf die Registerkarte. Sie können auch auf den Registerkartenbereich (den leeren Bereich neben
den Registerkarten) doppelklicken.
29
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
• Wenn Sie die Größe eines Bedienfelds verändern möchten, ziehen Sie an einer Seite des Bedienfelds. Die Größe
einiger Bedienfelder – z. B. das Farbbedienfeld in Photoshop – kann nicht durch Ziehen geändert werden.
Minimieren und Maximieren von Bedienfeldsymbolen
Sie können Bedienfelder zu Symbolen verkleinern, um den Arbeitsbereich übersichtlicher zu gestalten. In einigen
Fällen werden Bedienfelder im Standardarbeitsbereich zu Symbolen verkleinert.
Zum Symbol verkleinerte Bedienfelder
Anzeigen von Bedienfeldern, die zum Symbol verkleinert wurden
• Um alle Bedienfeldsymbole in einer Spalte zu verkleinern oder zu vergrößern, klicken Sie auf den Doppelpfeil oben
im Verankerungsbereich.
• Klicken Sie auf das Symbol eines Bedienfelds, um nur dieses Bedienfeld einzublenden.
• Wenn Sie die Größe von Bedienfeldsymbolen so einstellen möchten, dass nur die Symbole (und nicht die
Beschriftungen) angezeigt werden, verändern Sie die Breite des Docks, bis der Text nicht mehr zu sehen ist. Wenn
Sie den Symboltext wieder einblenden möchten, verbreitern Sie das Dock.
• Soll ein Bedienfeld wieder zum Symbol verkleinert werden, klicken Sie auf seine Registerkarte, sein Symbol oder
den Doppelpfeil in der Titelleiste des Bedienfelds.
Bei einigen Programmen können Sie in den Voreinstellungen für die Oberfläche bzw. Benutzeroberfläche
„Bedienfelder automatisch auf Symbole minimieren“ wählen. Ein aus einem Symbol wiederhergestelltes
Bedienfeld wird dann automatisch wieder zum Symbol verkleinert, sobald Sie auf eine andere Stelle klicken.
• Um ein schwebendes Bedienfeld bzw. eine Bedienfeldgruppe einem Symbolverankerungsbereich hinzuzufügen,
ziehen Sie die Komponente an der Registerkarte oder Titelleiste. (Bedienfelder werden automatisch zu Symbolen
verkleinert, wenn sie einem Symboldock hinzugefügt werden.)
30
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
• Um ein Bedienfeldsymbol (oder eine Bedienfeldsymbolgruppe) zu verschieben, ziehen Sie das Symbol. Sie können
Bedienfeldsymbole im Dock nach oben und unten, in andere Docks (dort werden sie im Bedienfeldstil des
betreffenden Docks angezeigt) oder aus dem Dock heraus ziehen (sie werden dann als schwebende Symbole
angezeigt).
Speichern von und Wechseln zwischen Arbeitsbereichen
Wenn Sie die aktuelle Größe und Position von Bedienfeldern als benannten Arbeitsbereich speichern, können Sie den
Arbeitsbereich wiederherstellen, auch nachdem ein Bedienfeld verschoben oder geschlossen wurde. Die Namen
gespeicherter Arbeitsbereiche werden im Arbeitsbereich-Umschalter auf der Anwendungsleiste angezeigt.
Speichern eines benutzerdefinierten Arbeitsbereichs
1 Führen Sie im Arbeitsbereich, der gespeichert werden soll, einen der folgenden Schritte aus:
• (Illustrator) Wählen Sie „Fenster“ > „Arbeitsbereich“ > „Arbeitsbereich speichern“.
• (Photoshop, InDesign, InCopy) Wählen Sie „Fenster“ > „Arbeitsbereich“ > „Neuer Arbeitsbereich“.
• (Dreamweaver) Wählen Sie „Fenster“ > „Arbeitsbereichlayout“ > „Neuer Arbeitsbereich“.
• (Flash) Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option „Neuer
Arbeitsbereich“.
• (Fireworks) Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option „Zustand
speichern“.
2 Geben Sie einen Namen für den Arbeitsbereich ein.
3 (Photoshop, InDesign) Wählen Sie unter „Erfassen“ eine oder mehrere der folgenden Optionen aus:
Bedienfelderpositionen Speichert die aktuellen Bedienfelderpositionen (nur für InDesign).
Tastaturbefehle Speichert die aktuellen Tastaturbefehle (nur Photoshop).
Menüs oder Menüanpassung Speichert den aktuellen Menüsatz.
Anzeigen von und Wechseln zwischen Arbeitsbereichen
❖ Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste einen Arbeitsbereich aus.
In Photoshop können Sie jedem Arbeitsbereich einen Tastaturbefehl zuweisen, damit sich die verschiedenen
Arbeitsbereiche schnell aufrufen lassen.
Löschen eines benutzerdefinierten Arbeitsbereichs
• Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option „Arbeitsbereiche verwalten“ aus,
wählen Sie den Arbeitsbereich aus und klicken Sie dann auf „Löschen“. (In Fireworks steht diese Option nicht zur
Verfügung.)
• (Photoshop, InDesign, InCopy) Wählen Sie im Arbeitsbereich-Umschalter die Option Arbeitsbereich löschen.
• (Illustrator) Wählen Sie „Fenster“ > „Arbeitsbereich“ > „Arbeitsbereiche verwalten“, wählen Sie den gewünschten
Arbeitsbereich und klicken Sie auf das Papierkorbsymbol.
• (Photoshop, InDesign) Wählen Sie „Fenster“ > „Arbeitsbereich“ > Arbeitsbereich löschen. Markieren Sie den
gewünschten Arbeitsbereich und klicken Sie auf „Löschen“.
31
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Wiederherstellen des Standardarbeitsbereichs
1 Wählen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste den Arbeitsbereich „Grundelemente“.
Informationen zu Fireworks finden Sie im Artikel
http://www.adobe.com/devnet/fireworks/articles/workspace_manager_panel.html.
Note: In Dreamweaver ist „Designer“ der Standardarbeitsbereich.
2 Löschen Sie für Fireworks (Windows) folgende Ordner:
Windows Vista \\Benutzer\<Benutzername>\AppData\Roaming\Adobe\Fireworks CS4\
Windows XP \\Dokumente und Einstellungen\<Benutzername>\Anwendungsdaten\Adobe\Fireworks CS4
3 (Photoshop, InDesign, InCopy) Wählen Sie „Fenster“ > „Arbeitsbereich“ > „[Name des Arbeitsbereichs]
zurücksetzen“.
(Photoshop) Wiederherstellen einer gespeicherten Arbeitsbereich-Anordnung
In Photoshop werden die Arbeitsbereiche entsprechend der letzten Anordnung angezeigt. Sie haben jedoch die
Möglichkeit, die ursprünglich gespeicherte Anordnung der Bedienfelder wiederherzustellen.
• Um einen einzelnen Arbeitsbereich wiederherzustellen, wählen Sie „Fenster“ > „Arbeitsbereich“ > „[Name des
Arbeitsbereichs] zurücksetzen“.
• Um alle Arbeitsbereiche in Photoshop wiederherzustellen, klicken Sie in den Oberflächen-Voreinstellungen auf
„Standardarbeitsbereiche wiederherstellen“.
Um die Anordnung der Arbeitsbereiche in der Anwendungsleiste zu verändern, ziehen Sie sie an die gewünschte
Position.
Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh)
In Dreamweaver können Sie mehrere Dokumente in einem einzelnen Fenster anzeigen. Jedem Dokument ist dann
eine eigene Registerkarte zugeordnet. Dreamweaver kann die Dokumente auch als Teil eines schwebenden
Arbeitsbereichs darstellen, in dem jedes Dokument in einem eigenen Fenster angezeigt wird.
Dokumente mit Registerkarte in einem separaten Fenster anzeigen
❖ Klicken Sie bei gedrückter Ctrl-Taste auf die Registerkarte und wählen Sie im Kontextmenü „In neues Fenster
verschieben“ aus.
Separate Dokumente zu Dokumenten mit Registerkarten kombinieren
❖ Wählen Sie „Fenster“ > „Als Registerkarten anzeigen“.
Standardeinstellung für Dokumente mit Registerkarten ändern
1 Wählen Sie „Dreamweaver“ > „Voreinstellungen“ und anschließend die Kategorie „Allgemein“ aus.
2 Aktivieren oder deaktivieren Sie die Option „Dokumente als Registerreiter öffnen“ und klicken Sie auf „OK“.
Dreamweaver zeigt derzeit geöffnete Dokumente beim Ändern der Voreinstellungen weiterhin unverändert an.
Dokumente, die Sie öffnen, nachdem Sie eine neue Voreinstellung gewählt haben, werden entsprechend dieser
Voreinstellung angezeigt.
32
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Farbsymbole aktivieren
In Dreamweaver werden ab Version CS4 standardmäßig schwarze und weiße Symbole verwendet, die sich in farbige
Symbole ändern, wenn Sie mit dem Mauszeiger darauf zeigen. Sie können die Farbsymbole permanent aktivieren,
sodass keine Bewegung mit dem Mauszeiger mehr erforderlich ist.
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Farbsymbole“ aus.
• Wechseln Sie in den Arbeitsbereich „Klassisch“ oder „Coder“.
Wenn Sie die Farbsymbole wieder deaktivieren möchten, heben Sie die Auswahl der Option „Farbsymbole“ im Menü
„Ansicht“ auf oder wechseln Sie in einen anderen Arbeitsbereich.
More Help topics
“Anzeigen von und Wechseln zwischen Arbeitsbereichen” on page 30
Begrüßungsbildschirm ein- bzw. ausblenden
Der Begrüßungsbildschirm wird angezeigt, wenn Sie Dreamweaver starten oder kein Dokument geöffnet ist. Sie
können den Begrüßungsbildschirm ausblenden und später wieder einblenden. Wenn der Begrüßungsbildschirm
ausgeblendet ist und keine Dokumente geöffnet sind, ist das Dokumentfenster leer.
Begrüßungsbildschirm ausblenden
❖ Markieren Sie auf dem Begrüßungsbildschirm das Kontrollkästchen „Nicht mehr anzeigen“.
Begrüßungsbildschirm anzeigen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Aktivieren Sie in der Kategorie „Allgemein“ die Option „Begrüßungsbildschirm anzeigen“.
Dreamweaver in Mehrbenutzersystemen anpassen
Sie können Dreamweaver sogar in Mehrbenutzer-Betriebssystemen, wie z. B. Windows XP und Mac OS X, an Ihre
Anforderungen anpassen.
Dreamweaver verhindert, dass die angepasste Konfiguration eines Benutzers sich auf die angepasste Konfiguration
anderer Benutzer auswirkt. Hierzu erstellt die Anwendung automatisch Kopien verschiedener Konfigurationsdateien,
wenn Sie Dreamweaver das erste Mal in einem der kompatiblen Mehrbenutzer-Betriebssysteme ausführen. Diese
benutzerspezifischen Konfigurationsdateien werden in einem persönlichen Ordner gespeichert.
Beispielsweise werden sie in Windows XP unter „C:\Dokumente und
Einstellungen\Benutzername\Anwendungsdaten\Adobe\Dreamweaver\de_DE\Configuration“ gespeichert (dieser
Ordner ist standardmäßig versteckt). Wählen Sie zum Anzeigen versteckter Dateien und Ordner im Windows
Explorer die Menüoption „Extras“ > „Ordneroptionen“ aus, klicken Sie auf die Registerkarte „Ansicht“ und aktivieren
Sie die Option „Versteckte Dateien anzeigen“.
Unter Windows Vista sind die Dateien unter
„C:\Users\Benutzername\AppData\Roaming\Adobe\Dreamweaver\de_DE\Configuration“ gespeichert (dieser
Ordner ist standardmäßig versteckt). Wählen Sie zum Anzeigen versteckter Dateien und Ordner im Windows
Explorer die Menüoption „Extras“ > „Ordneroptionen“ aus, klicken Sie auf die Registerkarte „Ansicht“ und aktivieren
Sie die Option „Versteckte Dateien anzeigen“.
33
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
In Mac OS X werden sie in Ihrem Stammordner unter „Users/Benutzername/Library/Application
Support/Adobe/Dreamweaver/Configuration“ gespeichert.
Wenn Sie Dreamweaver aktualisieren oder erneut installieren, erstellt Dreamweaver automatisch Sicherungskopien
der vorhandenen Benutzerkonfigurationsdateien, sodass Sie auch weiterhin Zugriff auf durchgeführte Änderungen
besitzen, falls Sie die Dateien manuell angepasst haben.
Allgemeine Voreinstellungen für Dreamweaver festlegen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh) aus.
2 Wählen Sie eine der folgenden Optionen:
Dokumente als Registerreiter öffnen öffnet alle Dokumente in einem zentralen Fenster. Mithilfe der Registerreiter
können Sie zwischen den einzelnen Dokumenten wechseln (nur bei Macintosh-Systemen).
Begrüßungsbildschirm zeigt den Begrüßungsbildschirm von Dreamweaver an, wenn Sie Dreamweaver starten oder
wenn kein Dokument geöffnet ist.
Dokument beim Start erneut öffnen öffnet alle Dokumente, die beim vorherigen Schließen von Dreamweaver
geöffnet waren. Wenn Sie diese Option deaktiviert haben, zeigt Dreamweaver, abhängig von der Einstellung der
Option „Begrüßungsbildschirm“, beim Starten den Begrüßungsbildschirm oder einen leeren Bildschirm an.
Warnung beim Öffnen schreibgeschützter Dateien zeigt eine Warnung an, wenn Sie eine schreibgeschützte
(gesperrte) Datei öffnen. Wählen Sie aus, ob Sie die Datei entsperren, auschecken bzw. schreibgeschützt anzeigen oder
den Vorgang abbrechen möchten.
Zugehörige Dateien aktivieren zeigt die Dateien an, die mit dem aktuellen Dokument verknüpft sind (z. B. CSS- oder
JavaScript-Dateien). Für jede zugehörige Datei wird im oberen Bereich des Dokuments jeweils eine Schaltfläche
angezeigt. Wenn Sie darauf klicken, wird die entsprechende Datei geöffnet.
Dynamisch zugehörige Dateien suchen Hier können Sie auswählen, ob dynamisch zugehörige Dateien automatisch
oder nach manueller Auswahl auf der Symbolleiste „Zugehörige Dateien“ angezeigt werden. Sie können zudem
festlegen, ob die Suche nach dynamisch zugehörigen Dateien deaktiviert wird.
Hyperlinks beim Verschieben von Dateien aktualisieren legt fest, was passiert, wenn Sie ein Dokument Ihrer Site
verschieben, umbenennen oder löschen. Sie können die Voreinstellung so wählen, dass Hyperlinks immer
automatisch aktualisiert werden, nie aktualisiert werden oder Sie zum Durchführen einer Aktualisierung aufgefordert
werden. (Siehe dazu den Abschnitt “Hyperlinks automatisch aktualisieren” on page 302.)
Beim Einfügen von Objekten Dialogfeld anzeigen legt fest, ob Sie in Dreamweaver zum Eingeben zusätzlicher
Informationen aufgefordert werden, wenn Sie Bilder, Tabellen, Shockwave-Filme und bestimmte andere Objekte mit
dem Bedienfeld „Einfügen“ oder dem Menü „Einfügen“ hinzufügen. Wenn diese Option nicht markiert ist, wird das
Dialogfeld nicht angezeigt, und Sie müssen die Quelldatei für Bilder, die Anzahl von Zeilen in einer Tabelle usw. über
den Eigenschafteninspektor angeben. Bei Rollover-Bildern und Fireworks-HTML wird immer ein Dialogfeld
angezeigt, wenn Sie das Objekt einfügen, unabhängig von der Einstellung für diese Option. (Sie können diese
Einstellung vorübergehend außer Kraft setzen, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste
(Macintosh) klicken, wenn Sie Objekte erstellen und einfügen.)
Doppelbyte-Inline-Eingabe aktivieren ermöglicht die Eingabe von Doppelbyte-Text direkt im Dokumentfenster,
wenn Sie eine Entwicklungsumgebung oder ein Language Kit mit Unterstützung für Doppelbyte-Text verwenden
(z. B. für japanische Schriftzeichen). Wenn diese Option nicht markiert ist, wird ein Texteingabefenster zum Eingeben
und Konvertieren von Doppelbyte-Text eingeblendet. Der Text wird nach der Übernahme im Dokumentfenster
angezeigt.
34
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Nach Überschrift zu einfachem Absatz wechseln legt fest, dass durch Drücken der Eingabetaste (Windows) bzw. von
Return (Macintosh) in der Entwurfsansicht am Ende eines Überschriftabsatzes ein neuer Absatz mit dem Tag
p erstellt
wird. (Ein Überschriftabsatz ist ein Absatz mit einem Überschrift-Tag, z. B.
h1 oder h2.) Wenn die Option deaktiviert
ist, wird durch Drücken der Eingabetaste bzw. von Return am Ende eines Überschriftabsatzes ein neuer Absatz erstellt,
der mit dem gleichen Überschrift-Tag versehen ist (Sie können also mehrere Überschriften in einer Zeile eingeben und
die Einzelheiten erst anschließend eingeben).
Mehrere aufeinanderfolgende Leerzeichen zulassen legt fest, dass durch Eingabe von zwei oder mehr
aufeinanderfolgenden Leerzeichen in der Entwurfsansicht geschützte Leerzeichen erstellt werden, die in einem
Browser als mehrere Leerzeichen dargestellt werden. (Beispielsweise können Sie zwei Leerzeichen zwischen Sätzen
eingeben.) Diese Option ist hauptsächlich für Personen vorgesehen, die häufig Textverarbeitungsprogramme
verwenden. Ist diese Option deaktiviert, werden mehrere Leerzeichen hintereinander als ein einziges Leerzeichen
behandelt (da Browser dies ebenfalls tun).
Verwenden Sie <strong> und <em> anstelle von <b> und <i> gibt an, dass Dreamweaver das Tag <strong>
verwendet, wenn Sie eine Aktion durchführen, bei der normalerweise das Tag
<b> eingefügt würde. Ebenso wird das
Tag
<em> eingefügt, wenn Sie normalerweise <i> eingeben würden. Zu solchen Vorgängen zählt beispielsweise auch
das Klicken auf die Schaltflächen „Fett“ oder „Kursiv“ im Eigenschafteninspektor für Text im HTML-Modus bzw. das
Auswählen von „Formatieren“ > „Stil“ > „Fett“ oder „Formatieren“ > „Stil“ > „Kursiv“. Wenn die Tags
b und i in
Ihrem Dokument verwendet werden sollen, deaktivieren Sie diese Option.
Note: Das World Wide Web Consortium rät von der Verwendung der Tags
b und i ab. Die Tags strong und em bieten
umfassendere semantische Informationen als die Tags
b und i.
Warnung beim Platzieren bearbeitbarer Bereiche in <p>- oder <h1>-<h6>-Tags gibt an, ob eine Warnmeldung
angezeigt werden soll, wenn Sie eine Dreamweaver-Vorlage mit einem bearbeitbaren Bereich in einem Absatz- oder
einem Überschrift-Tag speichern möchten. Diese Meldung teilt Ihnen mit, dass Benutzer in dem Bereich keine
weiteren Absätze erstellen können. Diese Option ist in der Standardeinstellung aktiviert.
Zentrieren gibt an, ob Elemente mit divalign="center" oder mit dem center-Tag zentriert werden sollen, wenn
Sie im Eigenschafteninspektor auf die Schaltfläche „Zentrieren“ klicken.
Note: Diesen beiden Ansätze für das Zentrieren wurden mit der HTML 4.01-Spezifikation offiziell verworfen, daher
sollten Sie Text mit CSS-Stilen zentrieren. Beide Verfahren sind in der Spezifikation XHTML 1.0 Transitional nach wie
vor technisch zulässig, in der Spezifikation XHTML 1.0 Strict jedoch nicht mehr.
Zulässige Höchstzahl der Verlaufsschritte gibt die Anzahl der im Bedienfeld „Verlauf“ gespeicherten und angezeigten
Schritte an. (Der Standardwert dürfte für die Anforderungen der meisten Benutzer ausreichend sein.) Wenn Sie die
im Bedienfeld „Verlauf“ angegebene Anzahl von Schritten überschreiten, werden die ältesten Schritte gelöscht.
Weitere Informationen finden Sie unter “Aufgabenautomatisierung” on page 288.
Rechtschreibwörterbuch listet die verfügbaren Wörterbücher auf. Wenn ein Wörterbuch mehrere Dialekte oder
Rechtschreibkonventionen (z. B. Amerikanisches bzw. Britisches Englisch) enthält, werden die Dialekte einzeln im
Popupmenü „Rechtschreibwörterbuch“ aufgeführt.
More Help topics
“Arbeitsbereichlayout” on page 6
“Hyperlinks automatisch aktualisieren” on page 302
35
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Voreinstellungen für Dokumentschriften in Dreamweaver festlegen
Die Kodierung bestimmt, wie ein Dokument im Browser angezeigt wird. In den Voreinstellungen für Schriften zeigt
Dreamweaver die Kodierung in Ihrer bevorzugten Schriftart und -größe an. Die Schriften, die Sie im Dialogfeld
„Schrifteinstellungen“ auswählen, wirken sich nur auf die Schriftdarstellung in Dreamweaver, jedoch nicht auf die
Darstellung des Dokuments im Browser von Benutzern aus. Um die Darstellung von Schriften in Browsern zu ändern,
müssen Sie den Text über den Eigenschafteninspektor oder durch Anwenden einer CSS-Regel ändern.
Informationen darüber, wie Sie eine Standardkodierung für neue Dokumente festlegen, finden Sie unter “Dokumente
öffnen und erstellen” on page 66.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Schriften“.
3 Wählen Sie in der Liste „Schrifteinstellungen“ einen Kodierungstyp aus (z. B. „Westeuropäisch“ oder „Japanisch“).
Note: Zur Anzeige von asiatischen Sprachen muss das Betriebssystem Doppelbyte-Schriften unterstützen.
4 Wählen Sie für jede Kategorie der ausgewählten Kodierung eine Schrift und eine Schriftgröße aus.
Note: In den Popupmenüs mit Schriften werden nur Schriften angezeigt, die auf Ihrem Computer installiert sind. Wenn
Sie also z. B. japanischen Text anzeigen möchten, muss eine japanische Schrift installiert sein.
Proportionalschrift ist die Schrift, mit der in Dreamweaver normaler Text angezeigt wird (beispielsweise Text in
Absätzen, Überschriften und Tabellen). Die Standardeinstellung hängt von den auf Ihrem System installierten
Schriften ab. Bei den meisten westeuropäischen Systemen ist die Standardeinstellung Times New Roman 12 Punkt
(mittel) unter Windows und Times 12 Punkt unter Mac OS.
Feste Schrift ist die Schrift, die in Dreamweaver verwendet wird, um Text innerhalb der Tags pre, code und tt
anzuzeigen. Die Standardeinstellung hängt von den auf Ihrem System installierten Schriften ab. Bei den meisten
westeuropäischen Systemen ist die Standardeinstellung Courier New 10 Punkt (klein) unter Windows und Monaco
12 Punkt unter Mac OS.
Codeansicht ist die Schrift, die für den Text in der Codeansicht und im Codeinspektor verwendet wird. Die
Standardeinstellung hängt von den auf Ihrem System installierten Schriften ab.
More Help topics
“Dokumentkodierung” on page 231
Dreamweaver-Markierungsfarben anpassen
Mit den Voreinstellungen für die Markierung können Sie die Farben anpassen, die Dreamweaver zur Kennzeichnung
von Vorlagenbereichen, Bibliothekselementen, Drittanbieter-Tags, Layoutelementen und Code verwendet.
More Help topics
“Farbauswahl verwenden” on page 235
“Die Markierungsfarbe von Div-Tags ändern” on page 174
Markierungsfarbe ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ und wählen Sie dann die Kategorie „Markierung“ aus.
2 Klicken Sie neben dem Objekt, für das die Markierungsfarbe geändert werden soll, auf das Farbfeld und wählen Sie
in der Farbauswahl eine neue Farbe aus oder geben Sie einen Hexadezimalwert ein.
36
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Markierung von Objekten aktivieren bzw. deaktivieren
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ und dann die Kategorie „Markierung“ aus.
2 Aktivieren oder deaktivieren Sie das Kontrollkästchen „Anzeigen“ neben dem Objekt, für das die
Markierungsfarbe aktiviert bzw. deaktiviert werden soll.
Wiederherstellen der Standardvoreinstellungen
Hinweise zum Wiederherstellen der Dreamweaver-Standardvoreinstellungen finden Sie unter TechNote 83912.
Tastaturbefehle
Referenzseiten für den aktuellen Tastaturbefehlssatz erstellen
Auf einer Referenzseite wird der aktuelle Tastaturbefehlssatz gespeichert. Die Daten werden als HTML-Tabelle
gesichert. Sie können die Referenzseite in einem Browser anzeigen oder ausdrucken.
1 Wählen Sie „Bearbeiten“ > „Tastaturbefehle“ (Windows) bzw. „Dreamweaver“ > „Tastaturbefehle“ (Macintosh).
2 Klicken Sie auf die Schaltfläche „Satz als HTML exportieren“. Dies ist die dritte der vier Schaltflächen am oberen
Rand des Dialogfelds.
3 Wählen Sie im daraufhin angezeigten Dialogfeld „Als HMTL-Datei speichern“ den Namen für die Referenzseite
bzw. ein Speicherverzeichnis für die Datei.
Tastaturbefehle anpassen
Mit dem Tastaturbefehl-Editor erstellen Sie eigene Tastaturbefehle, einschließlich Tastaturbefehle für Codefragmente.
Sie können damit auch Tastaturbefehle entfernen, vorhandene Tastaturbefehle bearbeiten und voreingestellte Sets aus
Tastaturbefehlen auswählen.
More Help topics
“Mit Codefragmenten arbeiten” on page 344
Tastenkombinationen erstellen
Erstellen Sie Ihre eigenen Tastaturbefehle, bearbeiten Sie vorhandene Kurzbefehle oder wählen Sie einen bereits
festgelegten Satz an Kurzbefehlen aus.
1 Wählen Sie „Bearbeiten“ > „Tastaturbefehle“ (Windows) bzw. „Dreamweaver“ > „Tastaturbefehle“ (Macintosh).
2 Wählen Sie unter den folgenden Optionen aus und klicken Sie auf „OK“:
Aktueller Satz Erlaubt Ihnen die Auswahl eines Satzes der in Dreamweaver vordefinierten Tastaturbefehle oder eines
von Ihnen definierten Satzes. Die vordefinierten Sätze werden im Menü zuerst angezeigt. Wenn Sie beispielsweise mit
den Sätzen aus HomeSite oder BBEdit vertraut sind, können Sie diese Tastaturbefehle verwenden, indem Sie den
entsprechenden Satz auswählen.
Befehle Erlaubt die Auswahl einer Kategorie von Befehlen, die bearbeitet werden sollen. Beispielsweise lassen sich
Menübefehle wie „Öffnen“ oder Befehle zur Code-Bearbeitung wie „Fehlende Klammern einfügen“ bearbeiten.
Wählen Sie im Popupmenü „Befehle“ die Option „Codefragmente“, um einen Tastaturbefehl für ein Codefragment
hinzuzufügen oder zu bearbeiten.
37
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Befehlsliste Hiermit werden die Befehle angezeigt, die mit der Kategorie verknüpft sind, die Sie im Popupmenü
„Befehle“ ausgewählt haben sowie die zugehörigen Tastenkombinationen. Die Kategorie „Menübefehle“ zeigt diese
Liste als Baumstruktur an, die der Struktur der Menüs nachgebildet ist. In den anderen Kategorien werden die Befehle
nach Namen (z. B. „Anwendung beenden“) in einer einreihigen Liste aufgeführt.
Verknüpfungen Hiermit werden alle Tastenkombinationen angezeigt, die dem ausgewählten Befehl zugewiesen sind.
Tastenkombination hinzufügen (+) Dem aktuellen Befehl wird eine neue Tastenkombination hinzugefügt. Klicken Sie
auf diese Schaltfläche, um den Kurzbefehlen eine neue Leerzeile hinzuzufügen. Geben Sie eine neue
Tastenkombination ein und klicken Sie auf „Ändern“, um einen neuen Tastaturbefehl für diesen Befehl einzufügen.
Sie können jedem Befehl zwei unterschiedliche Tastaturbefehle zuweisen. Existieren bereits zwei Tastaturbefehle für
einen Befehl, hat die Schaltfläche „Element hinzufügen“ keine Wirkung.
Tastenkombination entfernen (-) entfernt die ausgewählte Tastenkombination aus der Liste der
Tastenkombinationen.
Taste drücken zeigt die Tastenkombination an, die Sie beim Hinzufügen oder Ändern eines Tastaturbefehls eingeben.
Ändern fügt der Liste der Kurzbefehle die im Feld „Taste drücken“ angezeigte Tastenkombination hinzu oder ändert
den ausgewählten Kurzbefehl in die angegebene Tastenkombination.
Doppelt vorhandener Satz dupliziert den aktuellen Satz. Geben Sie dem Satz einen neuen Namen. Der Standardname
besteht aus dem Namen des Satzes und dem angehängten Wort Kopie.
Satz umbenennen benennt den aktuellen Satz um.
Als HTML-Datei exportieren speichert den aktuellen Satz in einem HTML-Tabellenformat, damit er leicht angezeigt
und gedruckt werden kann. Sie können die HTML-Datei in Ihrem Browser öffnen und die Tastaturbefehle
ausdrucken, um eine praktische Liste zur Hand zu haben.
Satz löschen löscht einen Satz. (Der aktive Satz kann nicht gelöscht werden.)
Tastenkombinationen aus einem Befehl entfernen
1 Wählen Sie „Bearbeiten“ > „Tastaturbefehle“ (Windows) bzw. „Dreamweaver“ > „Tastaturbefehle“ (Macintosh).
2 Wählen Sie im Popupmenü „Befehle“ eine Befehlskategorie aus.
3 Wählen Sie in der Liste „Befehle“ einen Befehl aus und wählen Sie dann einen Kurzbefehl aus.
4 Klicken Sie auf die Schaltfläche „Element entfernen“ (-).
Kurzbefehl zu einem Befehl zuweisen
1 Wählen Sie „Bearbeiten“ > „Tastaturbefehle“ (Windows) bzw. „Dreamweaver“ > „Tastaturbefehle“ (Macintosh).
2 Wählen Sie im Popupmenü „Befehle“ eine Befehlskategorie aus.
3 Wählen Sie in der Liste „Befehle“ einen Befehl aus.
Wählen Sie im Popupmenü „Befehle“ die Option „Codefragment“ aus, um einen Tastaturbefehl für ein Codefragment
hinzuzufügen.
Die dem Befehl zugewiesenen Tastaturbefehle werden im Feld „Kurzbefehle“ angezeigt.
4 Bereiten Sie das Hinzufügen eines Kurzbefehls durch eine der folgenden Maßnahmen vor:
• Wenn dem Befehl noch kein oder nur ein Kurzbefehl zugewiesen ist, klicken Sie auf die Schaltfläche „Element
hinzufügen (+)“. Im Feld „Kurzbefehle“ wird eine neue leere Zeile angezeigt und die Einfügemarke wechselt in das
Feld „Taste drücken“.
38
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
• Wenn dem Befehl bereits zwei Kurzbefehle zugewiesen sind, wählen Sie einen von ihnen aus (dieser wird durch
den neuen Kurzbefehl ersetzt). Klicken Sie anschließend in das Feld „Taste drücken“.
5 Drücken Sie eine Tastenkombination. Die Tastenkombination wird im Feld „Taste drücken“ angezeigt.
Note: Wenn ein Problem mit der Tastenkombination auftritt (z. B. wenn sie bereits einem anderen Befehl zugewiesen
ist), wird direkt unter dem Feld „Kurzbefehle“ eine erklärende Meldung eingeblendet und Sie können möglicherweise den
Kurzbefehl nicht hinzufügen bzw. ändern.
6 Klicken Sie auf „Ändern“. Die neue Tastenkombination wird dem Befehl zugewiesen.
Vorhandene Tastenkombination bearbeiten
1 Wählen Sie „Bearbeiten“ > „Tastaturbefehle“ (Windows) bzw. „Dreamweaver“ > „Tastaturbefehle“ (Macintosh).
2 Wählen Sie im Popupmenü „Befehle“ eine Befehlskategorie aus.
3 Wählen Sie in der Liste „Befehle“ einen Befehl aus und wählen Sie dann den zu ändernden Kurzbefehl aus.
4 Klicken Sie in das Feld „Taste drücken“ und geben Sie eine neue Tastenkombination ein.
5 Klicken Sie auf die Schaltfläche „Ändern“, um den Tastaturbefehl zu ändern.
Note: Wenn ein Problem mit der Tastenkombination auftritt (z. B. wenn sie bereits einem anderen Befehl zugewiesen
ist), wird direkt unter dem Feld „Kurzbefehle“ eine erklärende Meldung eingeblendet und Sie können möglicherweise den
Kurzbefehl nicht hinzufügen bzw. ändern.
Tastaturbefehle und Nicht-US-Tastaturen
Die standardmäßigen Dreamweaver Tastaturbefehle sind primär für US-Standardtastaturen ausgelegt. Tastaturen für
andere Ländern (inklusive der in Großbritannien hergestellten) bieten vielleicht nicht die benötigte Funktionalität für
diese Kurzbefehle. Sollte Ihre Tastatur bestimmte, für Dreamweaver aktivierte Kurzbefehle nicht unterstützen, wird
ihre Funktionalität von Dreamweaver deaktiviert.
Anweisungen zur Anpassung von Tastaturbefehlen für Nicht-US-Tastaturen finden Sie unter „Die Zuordnungen von
Tastaturbefehlen ändern“ im Handbuch Erweitern von Dreamweaver.
Erweiterungen
Erweiterungen in Dreamweaver hinzufügen und verwalten
Erweiterungen sind neue Funktionen, die Sie schnell und einfach in Dreamweaver einfügen können. Sie können
zahlreiche Arten von Erweiterungen verwenden, z. B. Erweiterungen zum Umformatieren von Tabellen, zum
Verbinden mit Back-End-Datenbanken oder zur Unterstützung beim Schreiben von Skripts für Browser.
Note: Wenn Sie Erweiterungen installieren möchten, die alle Benutzer in einem Mehrbenutzer-Betriebssystem
verwenden können, müssen Sie sich als Administrator (Windows) bzw. als Root-Benutzer (Mac OS X) anmelden.
Die neuesten Erweiterungen für Dreamweaver finden Sie auf der Adobe Exchange-Website unter
www.adobe.com/go/dreamweaver_exchange_de/. Sie können sich auf der Website anmelden und Erweiterungen
herunterladen (viele davon kostenlos), sich an Diskussionsforen beteiligen, Bewertungen und Kritiken von Benutzern
lesen und den Extension Manager installieren und verwenden. Sie müssen den Extension Manager installieren, bevor
Sie Erweiterungen installieren können.
39
VERWENDEN VON DREAMWEAVER
Arbeitsbereich
Last updated 10.4.2012
Der Extension Manager ist eine separate Anwendung, mit der Sie Erweiterungen in Adobe-Anwendungen installieren
und verwalten können. Starten Sie den Extension Manager von Dreamweaver aus, indem Sie „Befehle“ >
„Erweiterungen verwalten“ wählen.
1 Klicken Sie auf der Adobe Exchange-Website auf den Hyperlink zum Herunterladen einer Erweiterung.
Möglicherweise können Sie in Ihrem Browser wählen, ob die Erweiterung direkt von der Site aus geöffnet und
installiert oder auf der Festplatte gespeichert werden soll.
• Wenn Sie die Erweiterung direkt von der Site aus öffnen, führt der Extension Manager die Installation automatisch
durch.
• Wenn Sie die Erweiterung auf der Festplatte speichern, sollten Sie die Erweiterungspaketdatei (.mxp oder .mxi) auf
Ihrem Computer im Unterordner „Downloaded Extensions“ des Dreamweaver-Anwendungsordners speichern.
2 Doppelklicken Sie auf die Erweiterungspaketdatei oder öffnen Sie den Extension Manager und wählen Sie
„Datei“ > „Erweiterung installieren“. (Sie können auf einige Erweiterungen erst zugreifen, nachdem Sie die
Anwendung neu gestartet haben.)
Note: Mit dem Extension Manager können Sie Erweiterungen entfernen und zusätzliche Informationen über
Erweiterungen anzeigen.
More Help topics
“Dreamweaver in Mehrbenutzersystemen anpassen” on page 32
40
Last updated 10.4.2012
Chapter 3: Arbeiten mit Dreamweaver-
Sites
Eine Adobe® Dreamweaver® CS5-Site ist eine Zusammenstellung aller Dateien und Elemente in Ihrer Website. Sie
können Webseiten auf Ihrem Computer erstellen, auf einen Webserver hochladen und die Site warten, indem Sie
aktualisierte Dateien übertragen, wann immer Sie sie speichern. Sie können auch Websites bearbeiten und warten, die
ohne Dreamweaver erstellt worden sind.
Dreamweaver-Sites
Was ist eine Dreamweaver-„Site“?
In Dreamweaver bezieht sich der Begriff „Site“ auf einen lokalen oder externen Speicherort für die Dokumente, aus
denen eine Website besteht. Eine Dreamweaver-Site bietet die Möglichkeit, sämtliche Webdokumente zu organisieren
und zu verwalten, die Site auf einen Webserver hochzuladen, die Hyperlinks zu prüfen und zu korrigieren und Dateien
freizugeben und zu verwalten. Sie sollten eine Site definieren, damit Sie die Funktionen von Dreamweaver vollständig
nutzen können.
Note: Um eine Dreamweaver-Site zu definieren, müssen Sie nur einen lokalen Ordner einrichten. Sie müssen
Informationen über die Remote-Site und den Testserver hinzufügen, um Dateien an einen Webserver übertragen und
Webanwendungen entwickeln zu können.
Je nach Entwicklungsumgebung und Art der von Ihnen entwickelten Website besteht eine Dreamweaver-Site aus bis
zu drei Komponenten bzw. Ordnern:
Lokaler Stammordner speichert die Dateien, an denen Sie gerade arbeiten. Für Dreamweaver ist dieser Ordner Ihre
„lokale Site“. Er befindet sich üblicherweise auf Ihrem lokalen Computer, kann jedoch auch auf einem Netzwerkserver
liegen.
Remote-Ordner ist ein Ordner, in dem Sie Ihre Dateien zu Test-, Produktions- und Kollaborationszwecken speichern.
Im Bedienfeld „Dateien“ bezeichnet Dreamweaver diesen Ordner als „Remote-Site“. Normalerweise befindet sich der
Remote-Ordner auf demselben Computer, auf dem der Webserver ausgeführt wird. Der Remote-Ordner enthält die
Dateien, auf die Benutzer im Internet zugreifen.
Mithilfe des lokalen und des Remote-Ordners können Sie Dateien zwischen Ihrer lokalen Festplatte und dem
Webserver übertragen. Dies erleichtert das Verwalten der Dateien in Ihren Dreamweaver-Sites. Sie bearbeiten die
Dateien im lokalen Ordner und veröffentlichen sie dann im Remote-Ordner, wenn auch andere in der Lage sein sollen,
sie anzuzeigen.
Testserver-Ordner ist der Ordner, in dem Dreamweaver dynamische Seiten verarbeitet.
Ein Tutorial zum Definieren einer Dreamweaver-Site finden Sie unter www.adobe.com/go/learn_dw_comm08_de.
41
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Struktur der lokalen und Remote-Ordner
Wenn Sie mithilfe von Dreamweaver eine Verbindung zu einem Remote-Ordner herstellen möchten, müssen Sie den
Remote-Ordner in der Kategorie „Server“ des Dialogfelds „Site-Definition“ angeben. Der angegebene Remote-
Ordner, der auch als Hostverzeichnis bezeichnet wird, sollte dem lokalen Stammordner der Dreamweaver-Site
entsprechen. (Der lokale Stammordner ist der Hauptordner einer Dreamweaver-Site.) Wie lokale Ordner können
auch Remote-Ordner beliebige Bezeichnungen haben. Aber Internetdienstanbieter (ISP)bezeichnen die Remote-
Stammordner einzelner Kunden häufig mit Namen wie „public_html“, „pub_html“ oder dergleichen. Wenn Sie für
einen eigenen Remote-Server verantwortlich sind und den Remote-Ordner beliebig bezeichnen können, sollten Sie
den lokalen Stammordner und den Remote-Stammordner mit dem gleichen Namen versehen.
In folgenden Beispiel ist links ein lokaler Stammordner und rechts ein Remote-Ordner dargestellt. Der lokale
Stammordner auf dem lokalen Rechner ist eine direkte Abbildung des Remote-Ordners auf dem Webserver und nicht
einer der in der Verzeichnisstruktur über- oder untergeordneten Ordner des Remote-Ordners.
Note: Die Abbildung oben zeigt einen lokalen Stammordner auf dem lokalen Rechner und einen Remote-Hauptordner
auf dem Remote-Webserver. Falls Sie dagegen mehrere Dreamweaver-Sites auf dem lokalen Computer verwalten,
benötigen Sie auf dem Remote-Server ebenso viele Remote-Ordner wie auf dem lokalen System. In diesem Fall gilt das
Beispiel oben nicht. Statt dessen müssen Sie im Ordner „public_html“ mehrere Remote-Ordner erstellen und diese den
entsprechenden Stammordnern auf dem lokalen System zuweisen.
Wenn Sie zum ersten Mal eine Remote-Verbindung herstellen, ist der Remote-Ordner auf dem Webserver
normalerweise leer. Wenn Sie dann mithilfe von Dreamweaver die Dateien Ihrer lokalen Ordner hochladen, werden
die Remote-Ordner mit Ihren Webdateien entsprechend aufgefüllt. Die Verzeichnisstrukturen der Remote-Ordner
und der lokalen Stammordner sollten immer übereinstimmen. (Es sollte also immer eine direkte Entsprechung der
Dateien und Ordner Ihrer lokalen Ordner und der Remote-Ordner gegeben sein.) Wenn die Struktur des Remote-
Ordners nicht mit der Struktur des lokalen Ordners übereinstimmt, werden die Dateien von Dreamweaver an die
falsche Stelle übertragen und sind für Besucher der Site möglicherweise nicht sichtbar. Außerdem können Bild- und
Hyperlinkpfade unter Umständen nicht mehr funktionieren, wenn die Ordner- und Dateistrukturen nicht mehr
übereinstimmen.
Der Remote-Ordner muss bereits vorhanden sein, damit Dreamweaver eine Verbindung zu dieser Site herstellen
kann. Wenn auf dem Webserver kein entsprechender Remote-Ordner vorhanden ist, müssen Sie diesen erstellen oder
den Server-Administrator des Internetdienstanbieters bitten, dies für Sie zu tun.
Anmeldeverzeichnis
(Sollte in diesem Fall kein
Remote-Ordner sein)
public_html
(Sollte ein
Remote-Ordner sein)
Elemente
(Sollte kein
Remote-Ordner
sein)
Lokaler Ordner
(Stammordner)
HTML
Elemente
HTML
Nein
Nein
Ja
42
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Lokale Version Ihrer Site einrichten
Um eine lokale Version einer Site einzurichten, müssen Sie nur den lokalen Ordner angeben, in dem Sie alle Site-
Dateien speichern. Dieser lokale Ordner kann sich auf dem lokalen Computer oder auf einem Netzwerkserver
befinden.
1 Geben Sie den betreffenden Ordner an bzw. erstellen Sie auf Ihrem Computer den Ordner, in dem die lokalen
Versionen Ihrer Site-Dateien gespeichert werden sollen. (Dieser Ordner kann sich irgendwo auf Ihrem Computer
befinden.) Sie legen diesen Ordner in Dreamweaver als Ihre lokale Site fest.
2 Wählen Sie in Dreamweaver „Site“ > „Neue Site“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Site“ aus (sollte standardmäßig bereits ausgewählt sein).
4 Geben Sie in das Textfeld „Site-Name“ einen Namen für die Site ein. Dieser Name erscheint im Bedienfeld
„Dateien“ und im Dialogfeld „Sites verwalten“, ist aber nicht im Browser zu sehen.
5 Geben Sie im Textfeld „Lokaler Site-Ordner“ den Ordner aus Schritt 1 an – den Ordner, in dem die lokalen
Versionen Ihrer Site-Dateien gespeichert werden sollen. Wenn Sie auf das Ordnersymbol rechts vom Textfeld
klicken, können Sie den Ordner aus der Dateistruktur auswählen.
6 Klicken Sie auf „Speichern“, um das Dialogfeld „Site-Definition“ zu schließen. Sie können jetzt in Dreamweaver
mit der Arbeit an Ihren lokalen Dateien beginnen.
Nachdem die Vorbereitungen abgeschlossen sind, können Sie die anderen Kategorien im Dialogfeld „Site-Definition“
ausfüllen, einschließlich der Kategorie „Server“, mit der Sie einen Remote-Ordner auf dem Remote-Server angeben
können.
Ein Video-Tutorial zum Einrichten einer neuen Dreamweaver-Site finden Sie unter
www.adobe.com/go/learn_dw_comm08_de.
Verbindung zu einem Remote-Server herstellen
Nachdem Sie in Dreamweaver eine lokale Site festgelegt haben, können Sie für die Site auch noch einen Remote-Server
festlegen. Der Remote-Server (der häufig auch als Webserver bezeichnet wird) ist der Computer im Internet, auf dem
Sie Ihre Site-Dateien veröffentlichen, so dass andere Leute sie online betrachten können. Ein Remote-Server ist einfach
ein anderer Computer (wie ihr lokaler Computer), auf dem eine Reihe von Dateien und Ordnern gespeichert sind. Sie
legen auf diesem Remote-Server einen Ordner für Ihre Site fest, so wie Sie auch auf Ihrem lokalen Computer einen
Ordner für Ihre lokale Site festgelegt haben.
In Dreamweaver wird der festgelegte Remote-Ordner als Remote-Site bezeichnet.
Beim Einrichten eines Remote-Ordners müssen Sie eine Verbindungsmethode auswählen, mit der Dreamweaver
Dateien zum Webserver hoch- bzw. von diesem herunterlädt. Meist wird die Verbindungsmethode FTP verwendet,
doch unterstützt Dreamweaver auch die Verbindungsmethoden „Lokal/Netzwerk“, FTPS, SFTP, WebDav und RDS.
Wenn Sie nicht wissen, welche Verbindungsmethode in Ihrem Fall die richtige ist, fragen Sie Ihren
Internetdienstanbieter oder Serveradministrator.
Note: Dreamweaver unterstützt auch Verbindungen zu IPv6-aktivierten Servern. Es werden die Verbindungsmethoden
FTP, SFTP, WebDAV und RDS unterstützt. Weitere Informationen finden Sie unter www.ipv6.org/
43
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Verbindungsmethode festlegen
FTP-Verbindungen
Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver über FTP herstellen.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
Die folgenden Abbildung zeigt die Registerkarte „Einfach“ der Kategorie „Server“ mit bereits ausgefüllten Textfeldern.
Registerkarte „Einfach“ der Kategorie „Server“ im Dialogfeld „Site-Definition“
4 Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Dieser ist beliebig wählbar.
5 Wählen Sie im Popupmenü „Verbinden über“ die Option „FTP“ aus.
6 Geben Sie im Textfeld „FTP-Adresse“ die Adresse des FTP-Servers ein, auf den Sie Dateien für die Website
hochladen.
Die FTP-Adresse ist der vollständige Internet-Name eines Computersystems, z. B. „ftp.mindspring.com“. Geben Sie
die vollständige Adresse ohne zusätzlichen Text ein. Setzen Sie vor allem keinen Protokollnamen vor die Adresse.
Falls Sie die FTP-Adresse nicht kennen, wenden Sie sich an Ihren Webhosting-Dienstanbieter.
Note: Port 21 ist der Standardport für eingehende FTP-Verbindungen. Die Standardportnummer können Sie im Textfeld
auf der rechten Seite ändern. Dies hat zur Folge, dass der FTP-Adresse beim Speichern der Einstellungen ein Doppelpunkt
und die neue Portnummer hinzugefügt werden (z. B. „ftp.mindspring.com:29“).
7 Geben Sie in den Textfeldern „Benutzername“ und „Kennwort“ den Benutzernamen und das Kennwort ein, mit
denen eine Verbindung zum FTP-Server hergestellt wird.
8 Klicken Sie auf „Testen“, um zu prüfen, ob die Werte für FTP-Adresse, Benutzername und Kennwort korrekt sind.
44
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Note: Sie müssen die Angaben für „FTP-Adresse“, „Benutzername“ und „Kennwort“ beim Systemadministrator des
Unternehmens erfragen, bei dem Ihre Site gehostet wird. Niemand sonst hat Zugriff auf diese Informationen. Geben Sie
die Werte genauso ein, wie Sie sie vom Systemadministrator erhalten haben.
9 Dreamweaver speichert dieses Kennwort standardmäßig. Deaktivieren Sie die Option „Speichern“, falls
Dreamweaver Sie immer zur Eingabe eines Kennworts auffordern soll, wenn Sie eine Verbindung zum Remote-
Server herstellen.
10 Geben Sie im Textfeld „Stammverzeichnis“ den Namen des Verzeichnisses (Ordners) auf dem Remote-Server ein,
in dem öffentlich zugängliche Dokumente gespeichert werden.
Wenn Sie sich nicht sicher sind, was Sie als Stammverzeichnis eingeben sollen, wenden Sie sich an den Administrator
des Servers oder lassen Sie das Textfeld leer. Auf einigen Servern ist der Stammordner derselbe Ordner, zu dem Sie
über FTP eine Verbindung herstellen. Stellen Sie eine Verbindung zum Server her, um dies herauszufinden. Wird im
Bereich „Remote-Dateien“ des Bedienfelds „Dateien“ ein Ordner mit einem Namen wie „public_html“, „www“ oder
Ihrem Benutzernamen angezeigt, ist dies wahrscheinlich der Ordner, den Sie in das Textfeld „Stammverzeichnis“
eingeben müssen.
11 Geben Sie im Textfeld „Web-URL“ die URL Ihrer Website ein (z. B. „http://www.mysite.com“). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum Überprüfen von Hyperlinks bei
Verwendung des Hyperlink-Prüfers.
Eine ausführlichere Erklärung dieser Option finden Sie unter “Kategorie „Erweiterte Einstellungen“” on page 52.
12 Wenn Sie zusätzliche Optionen festlegen möchten, erweitern Sie den Bereich „Weitere Optionen“.
13 Aktivieren Sie die Option „Passives FTP verwenden“, wenn die Konfiguration Ihrer Firewall passives FTP
erfordert.
Durch passives FTP kann die FTP-Verbindung von Ihrer lokalen Software statt vom Remote-Server eingerichtet
werden. Falls Sie sich nicht sicher sind, ob Sie passives FTP verwenden, wenden Sie sich an den Systemadministrator
oder versuchen Sie, die Option „Passives FTP verwenden“ zu aktivieren und zu deaktivieren.
Weitere Informationen finden Sie in TechNote 15220 auf der Adobe-Website unter
www.adobe.com/go/tn_15220_de.
14 Aktivieren Sie die Option „IPv6-Übertragungsmodus verwenden“, wenn Sie einen IPv6-fähigen FTP-Server
verwenden.
Mit der Bereitstellung von Version 6 des Internet-Protokolls (IPv6) haben EPRT bzw. EPSV die FTP-Befehle PORT
bzw. PASV ersetzt. Wenn Sie daher eine Verbindung zu einem IPv6-aktivierten FTP-Server herstellen möchten,
müssen Sie den erweiterten passiven (EPSV) und den erweiterten aktiven (EPRT) Befehl für Ihre Datenverbindung
verwenden.
Weitere Informationen finden Sie unter www.ipv6.org/.
15 Wählen Sie „Proxy verwenden“, wenn Sie einen Proxy-Host oder einen Proxy-Anschluss festlegen möchten.
Um weitere Informationen zu erhalten, klicken Sie auf den Hyperlink. Das Dialogfeld „Voreinstellungen“ wird
geöffnet. Klicken Sie dort in der Kategorie „Site“ auf die Schaltfläche „Hilfe“.
16 Klicken Sie auf „Speichern“, um die Ansicht „Einfach“ zu schließen. Legen Sie dann in der Kategorie „Server“ fest,
ob es sich bei dem gerade hinzugefügten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder
beides handelt.
Informationen zur Fehlerbehebung von FTP-Verbindungsproblemen finden Sie in TechNote kb405912 auf der
Adobe-Website unter www.adobe.com/go/kb405912_de.
45
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
SFTP-Verbindungen
Aktivieren Sie die Option „Secure FTP (SFTP) verwenden“, wenn die Konfiguration Ihrer Firewall den Einsatz von
Secure FTP erfordert. In SFTP werden Verbindungen zum Testserver mithilfe von Verschlüsselung und öffentlichen
Schlüsseln gesichert.
Note: Auf dem Server muss ein SFTP-Dienst ausgeführt werden, damit diese Option ausgewählt werden kann. Wenn Sie
nicht wissen, ob auf dem Server SFTP ausgeführt wird, wenden Sie sich an den Systemadministrator.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Dieser ist beliebig wählbar.
5 Wählen Sie im Popupmenü „Verbinden über“ die Option „SFTP“ aus.
Die übrigen Optionen entsprechen den Einstellungen für FTP-Verbindungen. Weitere Informationen finden Sie im
vorangegangenen Abschnitt.
Note: Port 22 ist der Standardport für eingehende SFTP-Verbindungen.
FTPS-Verbindungen (CS 5.5)
Anders als bei SFTP mit alleiniger Unterstützung von Verschlüsselung wird bei FTPS (FTP über SSL) sowohl
Verschlüsselung als auch Authentifizierung unterstützt.
Bei der Datenübertragung per FTPS haben Sie die Möglichkeit, Ihre Anmeldeinformationen sowie die an den Server
übertragenen Daten zu verschlüsseln. Darüber hinaus können Sie festlegen, dass die Anmeldeinformationen und
Verbindungen des Servers authentifiziert werden. Die Anmeldeinformationen eines Servers werden anhand des
aktuellen Satzes von Serverzertifikaten vertrauenswürdiger Zertifizierungsstellen in der Dreamweaver-Datenbank
überprüft. Zertifizierungsstellen, zu denen u. a. Unternehmen wie VeriSign, Thawte usw. gehören, stellen digital
signierte Serverzertifikate aus.
Note: In der folgenden Anleitung werden FTPS-spezifische Optionen erläutert. Erläuterungen zu regulären FTP-
Optionen erhalten Sie im vorigen Abschnitt.
1 Wählen Sie „Site“ > „Sites verwalten“ aus.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche mit dem Pluszeichen „+“ (Neuen Server hinzufügen), um einen neuen Server
hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server
bearbeiten“.
4 Geben Sie unter „Servername“ einen Namen für den neuen Server an.
5 Wählen Sie unter „Verbinden über“ je nach Anforderung eine der folgenden Optionen aus.
FTP über SSL/TLS (implizite Verschlüsselung) Der Server beendet die Verbindung, wenn die
Sicherheitsanforderung nicht empfangen wird.
46
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
FTP über SSL/TLS (explizite Verschlüsselung) Wenn der Client keine Sicherheit anfordert, kann der Server
entweder die unsichere Übertragung fortsetzen oder die Verbindung verweigern bzw. beschränken.
6 Wählen Sie für die Authentifizierung eine der folgenden Optionen aus:
Keine. Die signierten oder selbstsignierten Anmeldeinformationen des Servers werden angezeigt. Wenn Sie die
Anmeldeinformationen des Servers akzeptieren, wird das Zertifikat dem Zertifikatspeicher
trustedSites.db in
Dreamweaver hinzugefügt. Wenn Sie das nächste Mal eine Verbindung mit dem Server herstellen möchten, stellt
Dreamweaver direkt eine Verbindung mit dem Server her.
Note: Wenn sich die Anmeldeinformationen eines selbstsignierten Zertifikats auf dem Server geändert haben, werden
Sie aufgefordert, die neuen Anmeldeinformationen zu akzeptieren.
Vertrauenswürdig Das präsentierte Zertifikat wird anhand des aktuellen Satzes von Serverzertifikaten
vertrauenswürdiger Zertifizierungsstellen in der Dreamweaver-Datenbank überprüft. Die Liste der
vertrauenswürdigen Server ist in der Datei
cacerts.pem gespeichert.
Note: Wenn Sie „Vertrauenswürdiger Server“ auswählen und eine Verbindung mit einem Server mit einem
selbstsignierten Zertifikat herstellen, wird eine Fehlermeldung angezeigt.
7 Erweitern Sie den Bereich „Weitere Optionen“, um weitere Optionen festzulegen.
Nur Befehlskanal verschlüsseln Wählen Sie diese Option aus, wenn Sie nur die übertragenen Befehle verschlüsseln
möchten. Verwenden Sie diese Option, wenn die übertragenen Daten bereits verschlüsselt sind oder keine
vertraulichen Informationen enthalten.
Nur Benutzername und Kennwort verschlüsseln Wählen Sie diese Option aus, wenn Sie lediglich Ihren
Benutzernamen und Ihr Kennwort verschlüsseln möchten.
8 Klicken Sie auf „Speichern“, um die Ansicht „Einfach“ zu schließen. Legen Sie dann in der Kategorie „Server“ fest,
ob es sich bei dem hinzugefügten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder beides
handelt.
Informationen zur Fehlerbehebung von FTP-Verbindungsproblemen finden Sie in der TechNote kb405912 auf der
Adobe-Website unter www.adobe.com/go/kb405912_de.
Lokale oder Netzwerkverbindungen
Verwenden Sie diese Einstellung zum Herstellen einer Verbindung zu einem Netzwerkordner oder wenn Sie auf
Ihrem lokalen Computer Dateien speichern bzw. den Testserver dort ausführen.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Dieser ist beliebig wählbar.
5 Wählen Sie im Popupmenü „Verbinden über“ die Option „Lokal/Netzwerk“ aus.
6 Klicken Sie auf das Ordnersymbol neben dem Textfeld „Serverordner“, um den Ordner zu suchen und
auszuwählen, in dem Sie die Site-Dateien speichern.
7 Geben Sie im Textfeld „Web-URL“ die URL Ihrer Website ein (z. B. „http://www.mysite.com“). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum Überprüfen von Hyperlinks bei
Verwendung des Hyperlink-Prüfers.
47
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Eine ausführlichere Erklärung dieser Option finden Sie unter “Kategorie „Erweiterte Einstellungen“” on page 52.
8 Klicken Sie auf „Speichern“, um die Ansicht „Einfach“ zu schließen. Legen Sie dann in der Kategorie „Server“ fest,
ob es sich bei dem gerade hinzugefügten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder
beides handelt.
WebDAV-Verbindungen
Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver über das WebDAV-Protokoll (Web-based
Distributed Authoring and Versioning) herstellen.
Für diese Verbindungsmethode müssen Sie einen Server besitzen, der dieses Protokoll unterstützt, z. B. Microsoft
Internet Information Server (IIS) 5.0 oder eine geeignet konfigurierte Installation des Apache-Webservers.
Note: Wenn Sie sich für die Verbindungsmethode „WebDAV“ entscheiden und Dreamweaver in einer
Mehrbenutzerumgebung verwenden, müssen Sie sicherstellen, dass alle Benutzer WebDAV einsetzen. Wenn einige
Benutzer WebDAV verwenden und andere eine andere Verbindungsmethode (etwa FTP), wird die Ein-
/Auscheckfunktion von Dreamweaver nicht so funktionieren wie erwartet, da WebDAV ein eigenes Sperrsystem
verwendet.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Dieser ist beliebig wählbar.
5 Wählen Sie im Popupmenü „Verbinden über“ die Option „WebDAV“ aus.
6 Geben Sie als URL die vollständige URL zu dem Verzeichnis auf dem WebDAV-Server an, zu dem Sie eine
Verbindung herstellen möchten.
Zur URL gehören das Protokoll, der Anschluss und das Verzeichnis (sofern abweichend vom Stammverzeichnis), z. B.
„http://webdav.mydomain.net/mysite“.
7 Geben Sie Ihren Benutzernamen und das Kennwort ein.
Diese Informationen dienen zur Serverauthentifizierung und haben nichts mit Dreamweaver zu tun. Wenn Sie Ihren
Benutzernamen und Ihr Kennwort nicht wissen, wenden Sie sich an den Systemadministrator oder Webmaster.
8 Klicken Sie auf „Testen“, um die Verbindungseinstellungen zu testen.
9 Wählen Sie die Option „Speichern“ aus, wenn Dreamweaver Sie beim Starten einer neuen Sitzung nicht mehr zur
Eingabe des Kennworts auffordern soll.
10 Geben Sie im Textfeld „Web-URL“ die URL Ihrer Website ein (z. B. „http://www.mysite.com“). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum Überprüfen von Hyperlinks bei
Verwendung des Hyperlink-Prüfers.
Eine ausführlichere Erklärung dieser Option finden Sie unter “Kategorie „Erweiterte Einstellungen“” on page 52.
11 Klicken Sie auf „Speichern“, um die Ansicht „Einfach“ zu schließen. Legen Sie dann in der Kategorie „Server“ fest,
ob es sich bei dem gerade hinzugefügten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder
beides handelt.
48
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
RDS-Verbindungen
Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver über RDS (Remote Development Services)
herstellen. Bei dieser Verbindungsmethode muss sich der Remote-Ordner auf einem Computer befinden, auf dem
Adobe® ColdFusion® ausgeführt wird.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Dieser ist beliebig wählbar.
5 Wählen Sie im Popupmenü „Verbinden über“ die Option „RDS“ aus.
6 Klicken Sie auf die Schaltfläche „Einstellungen“ und machen Sie im Dialogfeld „RDS-Server konfigurieren“
folgende Angaben:
• Geben Sie den Namen des Hostcomputers ein, auf dem der Webserver installiert ist.
Dies ist wahrscheinlich eine IP-Adresse oder eine URL. Wenn Sie sich nicht sicher sind, fragen Sie Ihren
Administrator.
• Geben Sie die Nummer des Anschlusses an, zu dem Sie eine Verbindung herstellen.
• Geben Sie als Host-Verzeichnis den Stammordner des Remote-Systems ein.
Zum Beispiel „C:\inetpub\wwwroot\myHostDir\“.
• Geben Sie Ihren RDS-Benutzernamen und das entsprechende Kennwort ein.
Note: Diese Optionen werden möglicherweise nicht angezeigt, wenn Sie den Benutzernamen und das Kennwort in den
Sicherheitseinstellungen des ColdFusion-Administrators angegeben haben.
• Wählen Sie die Option „Speichern“, wenn Dreamweaver Ihre Einstellungen speichern soll.
7 Klicken Sie auf „OK“, um das Dialogfeld „RDS-Server konfigurieren“ zu schließen.
8 Geben Sie im Textfeld „Web-URL“ die URL Ihrer Website ein (z. B. „http://www.mysite.com“). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum Überprüfen von Hyperlinks bei
Verwendung des Hyperlink-Prüfers.
Eine ausführlichere Erklärung dieser Option finden Sie unter “Kategorie „Erweiterte Einstellungen“” on page 52.
9 Klicken Sie auf „Speichern“, um die Ansicht „Einfach“ zu schließen. Legen Sie dann in der Kategorie „Server“ fest,
ob es sich bei dem gerade hinzugefügten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder
beides handelt.
Verbindungen über Microsoft Visual SourceSafe
Die Unterstützung für Microsoft Visual SourceSafe wurde ab Dreamweaver CS5 entfernt.
Erweiterte Server-Optionen festlegen
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
49
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Legen Sie die gewünschten einfachen Optionen fest und klicken Sie dann auf „Erweitert“.
5 Aktivieren Sie die Option „Synchronisierungsinformationen beibehalten“, wenn Dreamweaver Ihre lokalen und
Remote-Dateien automatisch synchronisieren soll. Diese Option ist standardmäßig aktiviert.
6 Aktivieren Sie die Option „Dateien beim Speichern automatisch auf Server laden“, wenn Dreamweaver die Dateien
immer auf die Remote-Site übertragen soll, wenn Sie Dateien speichern.
7 Aktivieren Sie die Option „Datei-Auschecken aktivieren“, wenn das System zum Ein- und Auschecken von Dateien
aktiviert werden soll.
8 Wenn Sie einen Testserver verwenden, wählen Sie aus dem Popupmenü „Servermodell“ ein Servermodell aus.
Weitere Informationen hierzu finden Sie unter “Testserver einrichten” on page 50.
Verbindung zu einem Remote-Ordner mit Netzwerkzugriff herstellen oder
trennen
❖ Es ist nicht nötig, eine Verbindung zu dem Remote-Ordner herzustellen; diese besteht automatisch. Klicken Sie auf
die Schaltfläche „Aktualisieren“, um die Remote-Dateien anzuzeigen.
Verbindung zu einem Remote-Ordner mit FTP-Zugriff herstellen oder trennen
❖ Führen Sie im Bedienfeld „Dateien“ folgende Schritte aus:
• Um eine Verbindung herzustellen, klicken Sie in der Symbolleiste auf die Schaltfläche „Stellt Verbindung zum
entfernten Host her“.
• Um eine Verbindung zu trennen, klicken Sie in der Symbolleiste auf „Verbindung zum entfernten Host trennen“.
Fehler beim Einrichten des Remote-Ordners beheben
Die folgende Liste enthält Informationen zu häufig vorkommenden Problemen, die auch Ihnen beim Einrichten eines
Remote-Ordners begegnen können, sowie Lösungsvorschläge für diese Probleme.
Es gibt außerdem auf der Adobe-Website unter www.adobe.com/go/kb405912_de eine ausführliche TechNote, die
speziell Informationen zu FTP-Problemen enthält.
• Die FTP-Implementierung von Dreamweaver funktioniert unter Umständen bei bestimmten Proxy-Servern,
Multilevel-Firewalls und anderen Formen des indirekten Server-Zugriffs nicht einwandfrei. Wenn Probleme beim
FTP-Zugriff auftreten, wenden Sie sich an den Systemadministrator vor Ort.
• Bei der FTP-Implementierung von Dreamweaver müssen Sie eine Verbindung zum Stammordner des Remote-
Systems herstellen. Stellen Sie sicher, dass Sie das Stammverzeichnis des Remote-Systems als Host-Verzeichnis
angegeben haben. Wenn Sie das Hostverzeichnis mit einem einfachen Schrägstrich (/) angegeben haben, müssen
Sie eventuell einen relativen Pfad vom Ausgangsverzeichnis der Verbindung zum Remote-Stammordner angeben.
Ist der Remote-Stammordner beispielsweise ein übergeordnetes Verzeichnis, müssen Sie eventuell einen Pfad in
der Form ../../ zum Hostverzeichnis angeben.
• Verwenden Sie anstelle von Leerzeichen Unterstriche und vermeiden Sie nach Möglichkeit Sonderzeichen in
Datei- und Ordnernamen. Doppelpunkte, Schrägstriche, Punkte und Apostrophe in Datei- und Ordnernamen
können gelegentlich Probleme verursachen.
50
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
• Treten Probleme mit langen Dateinamen auf, geben Sie den Dateien kürzere Namen. Unter Mac OS dürfen
Dateinamen maximal 31 Zeichen enthalten.
• Beachten Sie, dass auf vielen Servern symbolische Hyperlinks (UNIX), Verknüpfungen (Windows) oder
Aliasnamen (Macintosh) verwendet werden, um einen Ordner auf einem Teil der Serverfestplatte mit einem
Ordner an einer anderen Stelle zu verknüpfen. Solche Aliasnamen haben in der Regel keine Auswirkung auf die
Fähigkeit, eine Verbindung zum entsprechenden Ordner oder Verzeichnis herzustellen. Wenn Sie jedoch eine
Verbindung zu einem Teil des Servers, nicht aber zu einem anderen herstellen können, liegt unter Umständen ein
Aliasproblem vor.
• Tritt eine Fehlermeldung wie beispielsweise „Datei kann nicht bereitgestellt werden“ auf, ist unter Umständen kein
Speicherplatz mehr auf dem Remote-Ordner vorhanden. Detaillierte Informationen hierzu finden Sie im FTP-
Protokoll.
Note: Wenn bei FTP-Übertragungen Probleme auftreten, überprüfen Sie das FTP-Protokoll, indem Sie „Fenster“ >
„Ergebnisse“ (Windows) bzw. „Site“ > „FTP-Protokoll“ (Macintosh) wählen und die Registerkarte „FTP-Protokoll“
öffnen.
Testserver einrichten
Falls Sie die Absicht haben, dynamische Seiten zu entwickeln, benötigt Dreamweaver die Dienste eines Testservers,
um während Ihrer Arbeit dynamische Inhalte zu generieren und anzuzeigen. Als Testserver kann der lokale
Computer, ein Entwicklungsserver, ein Staging-Server oder ein Produktionsserver verwendet werden.
Einen ausführlichen Überblick über die Zwecke eines Testservers finden Sie im Dreamweaver Developer Center im
Artikel von David Powers, Setting up a local testing server in Dreamweaver CS5 (Einrichten eines lokalen Testservers
in Dreamweaver CS5).
More Help topics
“Anwendungsserver auswählen” on page 577
“Erstellen dynamischer Sites vorbereiten” on page 567
Testserver einrichten
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Klicken Sie auf „Neu“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und
klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server
bearbeiten“.
4 Legen Sie die gewünschten einfachen Optionen fest und klicken Sie dann auf „Erweitert“.
Note: Beim Festlegen eines Testservers müssen Sie im Fenster „Einfach“ eine Web-URL angeben. Weitere
Informationen finden Sie im folgenden Abschnitt:
5 Wählen Sie unter „Testserver“ das Servermodell aus, das Sie für die Webanwendung verwenden möchten.
51
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Note: Ab Dreamweaver CS5 werden ASP.NET-, ASP JavaScript- und JSP-Serververhalten nicht mehr zusammen mit
Dreamweaver installiert. (Wenn sie wollen, können Sie die veralteten Server-Verhalten wieder aktivieren, aber
denken Sie daran, dass Dreamweaver diese offiziell nicht mehr unterstützt.) Wenn Sie an ASP.NET-, ASP JavaScript-
oder JSP-Seiten arbeiten, unterstützt Dreamweaver jedoch für diese Seiten weiterhin die Live-Ansicht, die farbliche
Codehervorhebung und Codehinweise. Es ist nicht erforderlich, im Dialogfeld „Site-Definition“ die Optionen
„ASP.NET“, „ASP JavaScript“ oder „JSP“ auszuwählen, damit diese Funktionen verfügbar sind.
6 Klicken Sie auf „Speichern“, um das Fenster „Erweitert“ zu schließen. Geben Sie dann in der Kategorie „Server“ den
Server an, den Sie gerade als Testserver hinzugefügt oder bearbeitet haben.
Web-URL für den Testserver
Damit Dreamweaver während Ihrer Arbeit über einen Testserver Daten anzeigen und Verbindungen mit
Datenbanken herstellen kann, müssen Sie eine Web-URL angeben. Über diese während der Entwurfsphase
bestehende Verbindung zeigt Dreamweaver nützliche Informationen zur Datenbank an, beispielsweise die Namen der
Datenbanktabellen und die Namen der Tabellenspalten.
Eine Web-URL für einen Testserver setzt sich aus dem Domänennamen und den Unterverzeichnissen bzw. virtuellen
Verzeichnissen des Stammverzeichnisses Ihrer Website zusammen.
Note: Obwohl sich die in Microsoft IIS verwendete Terminologie von Server zu Server unterscheiden kann, liegen den
meisten Webservern dieselben Konzepte zugrunde.
Das Stammverzeichnis ist der Ordner auf dem Server, der dem Domänennamen der Site zugeordnet ist. So könnte der
Ordner, den Sie zur Verarbeitung von dynamischen Seiten verwenden möchten, beispielsweise den Pfad
„C:\Sites\Firma\“ aufweisen und gleichzeitig Ihr Stammverzeichnis sein (d. h. dieser Ordner wird dem
Domänennamen Ihrer Site, z. B. „www.meinefirma.de“, zugeordnet). In diesem Fall lautet das URL-Präfix
„http://www.meinefirma.de/“.
Falls es sich bei dem Ordner für die Verarbeitung dynamischer Seiten um einen Unterordner Ihres Stammverzeichnisses
handelt, fügen Sie dem URL einfach den Unterordner hinzu. Angenommen, Ihr Stammverzeichnis lautet
„c:\sites\firma\“, der Domänenname Ihrer Site „www.meinefirma.de“ und der zur Verarbeitung der dynamischen Seiten
verwendete Ordner „c:\sites\firma\inventar“. Geben Sie die folgende Web-URL ein:
http://www.meinefirma.de/inventar/
Wenn es sich bei dem Ordner, den Sie zur Verarbeitung von dynamischen Seiten verwenden möchten, nicht um das
Stammverzeichnis oder eines seiner Unterverzeichnisse handelt, müssen Sie ein virtuelles Verzeichnis anlegen.
Ein virtuelles Verzeichnis ist ein Ordner, der nicht physisch im Stammverzeichnis auf dem Server enthalten ist,
obwohl er im URL enthalten zu sein scheint. Ein virtuelles Verzeichnis wird erstellt, indem Sie ein Alias angeben, der
in der URL anstelle des Pfads zum Ordner verwendet wird. Das Stammverzeichnis könnte beispielsweise
„C:\Sites\Firma“ lauten und der verarbeitende Ordner „D:\Anwdg\Inventar“ sein. Für diesen Ordner erstellen Sie ein
Alias mit der Bezeichnung „Lager“. Geben Sie die folgende Web-URL ein:
http://www.meinefirma.de/lager/
Localhost bezeichnet das Stammverzeichnis in Ihren URLs, wenn der Client (normalerweise ein Browser, in diesem
Fall jedoch Dreamweaver) auf demselben System ausgeführt wird wie der Webserver. Angenommen, Dreamweaver
wird auf demselben Windows-System ausgeführt wie der Webserver. Das Stammverzeichnis ist „C:\Sites\Firma“ und
Sie haben eine virtuelles Verzeichnis namens „Lager“ definiert, das auf den Ordner verweist, den Sie zur Verarbeitung
von dynamischen Seiten verwenden möchten. Für bestimmte Webserver müssen Sie jeweils die folgenden Web-URLs
eingegeben:
52
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Note: In der Standardeinstellung wird der ColdFusion MX 7-Webserver auf Port 8500 ausgeführt, der Apache-
Webserver auf Port 80 und der Jakarta Tomcat-Webserver auf Port 8080.
Für Macintosh-Benutzer, die den Apache-Webserver verwenden, lautet das Stammverzeichnis:
Benutzer/Benutzername/Sites, wobei „Benutzername“ für den Macintosh-Benutzernamen steht. Wenn Sie
Mac OS 10.1 oder höher installieren, wird für diesen Ordner automatisch ein Alias mit der Bezeichnung
„~Benutzername“ definiert. Die standardmäßige Web-URL in Dreamweaver lautet daher wie folgt:
http://localhost/~Benutzername/
Wenn als Ordner für die Verarbeitung dynamischer Seiten beispielsweise „Benutzer:Benutzername:Sites:inventar“
verwendet werden soll, lautet die Web-URL folgendermaßen:
http://localhost/~Benutzername/inventar/
Versionskontrolle und erweiterte Einstellungen
Sie haben Zugriff auf die Versionskontrolle und die Kategorie „Erweiterte Einstellungen“ im Dialogfeld „Site-
Definition“, indem Sie „Site“ > „Sites verwalten“ wählen, die zu ändernde Site auswählen und auf „Bearbeiten“ klicken.
Kategorie „Versionskontrolle“
Zum Abrufen und Einchecken von Dateien können Sie Subversion verwenden. Weitere Informationen finden Sie
unter “Dateien mithilfe von Subversion (SVN) abrufen und einchecken” on page 98.
Kategorie „Erweiterte Einstellungen“
Lokale Info
Standard-Bilderordner Der Ordner, in dem Bilder für Ihre Site gespeichert werden sollen. Geben Sie den Pfad zu
diesem Ordner ein oder klicken Sie auf das Ordnersymbol, um ihn über die Dateistruktur auszuwählen. Dieser Pfad
wird verwendet, wenn Sie Dokumenten Bilder hinzufügen.
Hyperlinks relativ zu Legt den Typ der Hyperlinks fest, die von Dreamweaver erstellt werden, wenn Sie Hyperlinks zu
anderen Elementen oder Seiten in Ihrer Site einfügen. Dreamweaver kann zwei Arten von Hyperlinks erstellen: relativ
zum jeweiligen Dokument oder relativ zum Site-Stammordner. Weitere Informationen zu den Unterschieden
zwischen diesen beiden Hyperlinktypen finden Sie unter “Absolute, zum Dokument relative und zum Site-
Stammordner relative Pfade” on page 294.
Standardmäßig erstellt Dreamweaver zum Dokument relative Hyperlinks. Wenn Sie die Standardeinstellung
zugunsten von zum Site-Stammordner relativen Hyperlinks ändern, stellen Sie sicher, dass im Textfeld „Web-URL“
die korrekte Web-URL der Site eingetragen ist (siehe unten). Wenn Sie diese Einstellung ändern, werden die Pfade
Webserver Web-URL
ColdFusion MX 7 http://localhost:8500/lager/
IIS http://localhost/lager/
Apache (Windows) http://localhost:80/lager/
Jakarta Tomcat (Windows) http://localhost:8080/lager/
53
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
vorhandener Hyperlinks nicht automatisch angepasst. Die Einstellung wirkt sich nur auf neue Hyperlinks aus, die Sie
grafisch in Dreamweaver erstellen.
Note: In der Vorschau eines Dokuments in einem lokalen Browser werden Inhalte, die durch einen zum Site-
Stammordner relativen Hyperlink verknüpft sind, nur angezeigt, wenn Sie einen Testserver angeben oder unter
„Bearbeiten“ > „Voreinstellungen“ > „Vorschau in Browser“ die Option „Vorschau mit temporärer Datei“ auswählen.
Der Grund hierfür ist, dass Browser im Gegensatz zu Servern Site-Stammordner nicht erkennen können.
Web-URL Die URL der Website. Die Web-URL dient in Dreamweaver zum Erstellen von Sitestamm-relativen
Hyperlinks und zum Überprüfen von Hyperlinks bei Verwendung des Hyperlink-Prüfers.
Site-Stammordner-relative Hyperlinks sind nützlich, wenn Sie sich noch nicht über die endgültige Position der gerade
bearbeiteten Seite innerhalb der Ordnerstruktur im Klaren sind oder wenn die Möglichkeit besteht, Hyperlinks
enthaltende Dateien zu einem späteren Zeitpunkt an eine andere Position zu verschieben bzw. umzustrukturieren. Bei
Site-Stammordner-relativen Hyperlinks handelt es sich um Hyperlinks, deren Pfade zu anderen Site-Elementen relativ
zum Site-Stammordner angegeben sind, nicht zum jeweiligen Dokument. Dadurch bleiben die Pfade zu den
verknüpften Elementen gültig, selbst wenn das Dokument später an eine andere Position verschoben wird.
Beispiel: Als Web-URL ist „http://www.mysite.com/mycoolsite“ (das Site-Stammverzeichnis des Remote-Servers)
angegeben und im Ordner „mycoolsite“ des Remote-Servers gibt es auch einen Ordner „images“
(http://www.mysite.com/mycoolsite/images). Die Datei „index.html“ befindet sich in diesem Beispiel im Ordner
„mycoolsite“.
Wenn Sie einen Site-Stammordner-relativen Hyperlink aus der Datei „index.html“ auf ein Bild im Ordner „image“
erstellen, sieht dieser wie folgt aus:
<img src="/mycoolsite/images/image1.jpg" />
Diese Schreibweise unterscheidet sich von der für einen Dokument-relativen Hyperlink, die einfach wie folgt wäre:
<img src="images/image1.jpg" />
Durch Einfügen von „/mycoolsite/“ in den Bildpfad wird das Bild relativ zum Site-Stammordner verknüpft, nicht
relativ zu Dokument. Solange das Bild im Ordner „image“ abgelegt bleibt, ist der Dateipfad zum Bild
(„/mycoolsite/images/image1.jpg“) stets korrekt, selbst wenn Sie die Datei „index.html“ in einen anderen Ordner
verschieben.
Weitere Informationen finden Sie unter “Absolute, zum Dokument relative und zum Site-Stammordner relative
Pfade” on page 294.
Im Hinblick auf die Hyperlink-Überprüfung ist die Web-URL erforderlich, um zu ermitteln, ob ein Hyperlink Site-
intern oder extern ist. Beispiel: Wenn die Web-URL „http://www.mysite.com/mycoolsite“ lautet und der Hyperlink-
Prüfer auf der Seite einen Hyperlink mit der URL „http://www.yoursite.com“ findet, wird davon ausgegangen, dass es
sich dabei um einen externen Hyperlink handelt und dies entsprechend gemeldet. Analog dazu verwendet der
Hyperlink-Prüfer die Web-URL, um zu ermitteln, ob es sich um Site-interne Hyperlinks handelt. Diese werden dann
überprüft, ob sie noch gültig oder beschädigt sind.
Groß-/Kleinschreibung bei Hyperlinks überprüfen Ist diese Option aktiviert, achtet Dreamweaver beim Überprüfen
von Hyperlinks darauf, dass die Groß-/Kleinschreibung der Hyperlinks mit der Schreibung der Dateinamen
übereinstimmt. Diese Option ist auf UNIX-Systemen sinnvoll, auf denen die Groß-/Kleinschreibung bei Dateinamen
eine Rolle spielt.
Cache aktivieren Diese Option gibt an, ob ein lokaler Cache erstellt werden soll, um die Geschwindigkeit der
Hyperlinks zu erhöhen und die Siteverwaltung zu vereinfachen. Wenn Sie diese Option nicht markieren, fordert
Dreamweaver Sie erneut auf, einen Cache zu erstellen, bevor die Site angelegt wird. Sie sollten Sie diese Option auch
wählen, weil das Bedienfeld „Elemente“ (in der Bedienfeldgruppe „Dateien“) nur funktioniert, wenn ein Cache erstellt
wurde.
54
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
„Cloaking“ und weitere Kategorien
Weitere Informationen zu Cloaking, Design Notes, Dateiansichtsspalten, Contribute, Vorlagen oder Spry-Kategorien
erhalten Sie, wenn Sie auf die Schaltfläche „Hilfe“ im Dialogfeld klicken.
Optionen des Dialogfelds „Sites verwalten“
Das Dialogfeld „Sites verwalten“ ist Ihre Schnittstelle zu verschiedenen Dreamweaver-Funktionen. Von diesem
Dialogfeld aus können Sie die Vorgänge zum Erstellen einer neuen Site, zum Bearbeiten vorhandener Sites und zum
Importieren und Exportieren der Site-Einstellungen auslösen.
Note: Es ist nicht möglich, im Dialogfeld „Sites verwalten“ eine Verbindung zu einem Remote-Server herzustellen oder
Dateien darauf zu veröffentlichen. Wie Sie eine Verbindung zu einem Remote-Server herstellen, erfahren Sie im
Abschnitt “Verbindung zu einem Remote-Server herstellen” on page 42.) Wie Sie eine Verbindung zu einer vorhandenen
Website herstellen, erfahren Sie im Abschnitt “Bereits vorhandene Remote-Website bearbeiten” on page 56.
1 Wählen Sie „Site“ > „Sites verwalten“ und wählen Sie in der Liste links eine Site aus.
2 Klicken Sie auf eine Schaltfläche, um eine der Optionen auszuwählen, nehmen Sie die erforderlichen Änderungen
vor und klicken Sie auf „Fertig“.
Neu ermöglicht die Erstellung einer neuen Site. Wenn Sie auf die Schaltfläche „Neu“ klicken, wird das Dialogfeld
„Site-Definition“ geöffnet, in dem Sie den Pfad für die neue Site eingeben können. Weitere Informationen finden Sie
unter “Lokale Version Ihrer Site einrichten” on page 42.
Bearbeiten ermöglicht die Bearbeitung von Angaben wie Benutzername, Kennwort und der Serverinformationen
einer vorhandenen Dreamweaver-Site. Wählen Sie links in der Siteliste die vorhandene Site aus und klicken Sie auf die
Schaltfläche „Bearbeiten“, um Änderungen an der Site vorzunehmen. Weitere Informationen zum Bearbeiten
vorhandener Site-Optionen finden Sie unter “Verbindung zu einem Remote-Server herstellen” on page 42.)
Duplizieren erstellt eine Kopie einer vorhandenen Site. Um eine Site zu duplizieren, wählen Sie links in der Siteliste
die Site aus, und klicken auf die Schaltfläche „Duplizieren“. Die duplizierte Site wird nun ebenfalls in der Siteliste
angezeigt, ihr Name wurde um das Wort „Kopie“ ergänzt. Um den Namen der duplizierten Site zu ändern, lassen Sie
die Site ausgewählt und klicken auf die Schaltfläche „Bearbeiten“.
Entfernen entfernt die ausgewählte Site und ihre Definition aus der Liste der Dreamweaver-Sites, die Site-Dateien
selbst werden nicht gelöscht. (Wenn Sie die Site-Dateien ganz von Ihrem Computer entfernen wollen, müssen Sie die
Dateien direkt löschen.) Um eine Site aus Dreamweaver zu löschen, wählen Sie die Site in der Siteliste aus und klicken
auf die Schaltfläche „Entfernen“. Diese Aktion kann nicht rückgängig gemacht bzw. widerrufen werden.
Exportieren//Importieren ermöglicht entweder den Export der ausgewählten Site-Einstellungen als XML-Datei (*.ste)
oder den Import der Einstellungen einer Site. Weitere Informationen finden Sie unter “Dreamweaver-Site-
Einstellungen importieren und exportieren” on page 55.
Note: Beim Importieren werden nur Site-Einstellungen eingelesen, die zuvor exportiert worden sind. Es werden nicht
etwa die Site-Dateien importiert, um damit eine neue Dreamweaver-Site zu erstellen. Informationen zum Erstellen einer
neuen Site in Dreamweaver, erhalten Sie unter “Lokale Version Ihrer Site einrichten” on page 42.
More Help topics
“Dreamweaver-Sites” on page 40
“Bereits vorhandene Remote-Website bearbeiten” on page 56
55
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Dreamweaver-Site-Einstellungen importieren und
exportieren
Sie können Ihre Site-Einstellungen als XML-Datei exportieren, um sie später in eine andere Dreamweaver-Site zu
importieren. Das Exportieren bzw. Importieren ermöglicht Ihnen die Übertragung von Site-Einstellungen auf andere
Rechner oder Produktversionen, den Austausch von Site-Einstellungen mit anderen Benutzern sowie das Sichern
Ihrer Site-Einstellungen.
Beim Importieren bzw. Exportieren werden keine Site-Dateien importiert oder exportiert. Es werden nur die Site-
Einstellungen importiert bzw. exportiert, so dass Sie sich beim Erstellen neuer Sites in Dreamweaver Zeit sparen.
Informationen zum Erstellen einer neuen Site in Dreamweaver, erhalten Sie unter “Lokale Version Ihrer Site
einrichten” on page 42.
Exportieren Sie Ihre Site regelmäßig, damit Sie über eine Sicherungskopie verfügen, falls auf der Site ein Problem
auftreten sollte.
More Help topics
“Dreamweaver-Sites” on page 40
Backing up and restoring site definitions
Site-Einstellungen exportieren
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine oder mehrere Sites aus, deren Einstellungen Sie exportieren möchten, und klicken Sie auf die
Schaltfläche „Exportieren“:
• Um mehrere Sites auszuwählen, klicken Sie bei bedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste
(Macintosh) auf die einzelnen Sites.
• Um einen Bereich von Sites auszuwählen, klicken Sie bei gedrückter Umschalttaste auf die erste und letzte Site im
Bereich.
3 Wenn Sie für sich selbst eine Sicherungskopie Ihrer Site-Einstellungen anlegen möchten, wählen Sie im Dialogfeld
„Site '...' wird exportiert“ die erste Option aus und klicken auf „OK“. Dreamweaver speichert die
Anmeldeinformationen des Remote-Servers, d. h. den Benutzernamen und das Kennwort, sowie lokale
Pfadinformationen.
4 Wenn Sie die Einstellungen anderen Benutzern zur Verfügung stellen möchten, wählen Sie im Dialogfeld „Site '...'
wird exportiert“ die zweite Option aus und klicken Sie auf „OK“. (Dreamweaver speichert keine Informationen, die
für andere Benutzer ungeeignet sind, z. B. Ihre Anmeldeinformationen für den Remote-Server oder lokale Pfade.)
5 Navigieren Sie nacheinander für jede zu exportierende Site zu dem Ordner, in dem die Site gespeichert werden soll,
und klicken Sie auf „Speichern“. (Dreamweaver speichert die Site als XML-Datei mit der Dateierweiterung „STE“.)
6 Klicken Sie auf „Fertig“.
Note: Speichern Sie die *.ste-Datei im Stammordner Ihrer Site oder auf Ihrem Desktop, damit Sie sie schnell finden.
Wenn Sie sich nicht mehr erinnern können, wo Sie sie gespeichert haben, führen Sie auf Ihrem Computer eine Dateisuche
durch, in der Sie nach der Erweiterung *.ste suchen.
Site-Einstellungen importieren
1 Wählen Sie „Site“ > „Sites verwalten“.
56
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
2 Klicken Sie auf „Importieren“.
3 Navigieren Sie zu einer oder mehreren (in Dateien mit der Dateinamenerweiterung .ste definierten) Sites, deren
Einstellungen Sie importieren möchten, und wählen Sie die Dateien aus.
Um mehrere Sites auszuwählen, klicken Sie bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste
(Macintosh) auf jede gewünschte „.ste“-Datei. Um einen Bereich von Sites auszuwählen, klicken Sie bei gedrückter
Umschalttaste auf die erste und letzte Datei im Bereich.
4 Klicken Sie auf „OK“ und anschließend auf „Fertig“.
Nachdem Dreamweaver die Sites importiert hat, wird der Sitename im Dialogfeld „Sites verwalten“ angezeigt.
Bereits vorhandene Remote-Website bearbeiten
Mit Dreamweaver können Sie eine vorhandene Remote-Site (oder einen beliebigen Teil einer Remote-Site) auf die
lokale Festplatte kopieren und dort bearbeiten, selbst wenn die ursprüngliche Site nicht mit Dreamweaver erstellt
wurde. Sie benötigen die korrekten Verbindungsinformationen und müssen eine Verbindung zum Remote-Server der
Site herstellen, damit Sie die Site bearbeiten können.
1 Erstellen Sie einen lokalen Ordner, der die Site enthalten soll, und richten Sie ihn als lokalen Ordner für die Site ein.
(Siehe dazu den Abschnitt “Lokale Version Ihrer Site einrichten” on page 42.)
Note: Sie müssen eine lokale Kopie der gesamten Struktur des jeweiligen Zweigs der vorhandenen Remote-Site erstellen.
2 Richten Sie mit den Remote-Zugriff-Informationen zur vorhandenen Site einen Remote-Ordner ein. Sie müssen
eine Verbindung zur Remote-Site herstellen, um die Dateien auf Ihren Computer herunterzuladen, bevor Sie sie
bearbeiten können. (Siehe dazu den Abschnitt “Verbindung zu einem Remote-Server herstellen” on page 42.)
Achten Sie darauf, dass Sie dabei den richtigen Stammordner für die Remote-Site wählen.
3 Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ („Fenster“ > „Dateien“) auf die Schaltfläche „Verbindung
zum Remote-Host herstellen“ (bei FTP-Zugriff) oder auf die Schaltfläche „Aktualisieren“ (bei Netzwerkzugriff),
um die Remote-Site anzuzeigen.
4 Bearbeiten Sie die Site:
• Wenn Sie die gesamte Site bearbeiten möchten, wählen Sie im Bedienfeld „Dateien“ den Stammordner der Remote-
Site aus. Klicken Sie dann in der Symbolleiste auf „Datei(en) abrufen“, um die gesamte Site auf die lokale Festplatte
herunterzuladen.
• Wenn Sie nur eine Datei oder einen Ordner der Site bearbeiten möchten, wählen Sie die Datei bzw. den Ordner in
der Remote-Ansicht des Bedienfelds „Site“ aus. Klicken Sie dann in der Symbolleiste auf „Datei(en) abrufen“, um
diese Datei bzw. diesen Ordner auf die lokale Festplatte herunterzuladen.
Dreamweaver kopiert automatisch so viele Strukturelemente der Remote-Site, wie erforderlich sind, um die
heruntergeladene Datei im korrekten Pfad der Site-Hierarchie abzulegen. Wenn Sie nur einen einzigen Teil einer Site
bearbeiten, sollten Sie abhängige Dateien, wie etwa Bilddateien, normalerweise mit einbeziehen.
More Help topics
“Dreamweaver-Sites” on page 40
Editing an existing remote website (Dreamweaver-Blog)
57
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Site-Voreinstellungen für die Übertragung von Dateien
festlegen
Im Bedienfeld „Dateien“ können Sie die Dateiübertragungsfunktionen mithilfe von Voreinstellungen steuern.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links im Dialogfeld „Voreinstellungen“ in der Kategorieliste die Option „Site“ aus.
3 Legen Sie die Optionen fest und klicken Sie auf „OK“.
Immer zeigen Legt fest, welche Site (entfernt oder lokal) immer angezeigt wird und in welchem Fensterbereich des
Bedienfelds „Dateien“ (links oder rechts) die lokalen Dateien und die Remote-Dateien angezeigt werden sollen.
Standardmäßig wird die lokale Site immer rechts angezeigt. Der nicht ausgewählte Fensterbereich (standardmäßig der
linke) kann nach Belieben verändert werden: In diesem Fensterbereich können die Dateien der anderen Site
(standardmäßig der Remote-Site) angezeigt werden.
Abhängige Dateien Zeigt eine Eingabeaufforderung für die Übertragung von abhängigen Dateien an (beispielsweise
Bilder, externe Stylesheets und andere Dateien, auf die in der HTML-Datei verwiesen wird), die der Browser
zusammen mit der HTML-Datei lädt. Standardmäßig ist sowohl die Option „Aufforderung bei Abrufen/Auschecken“
als auch „Aufforderung bei Bereitstellen/Einchecken“ aktiviert.
Wenn Sie eine neue Datei auschecken, sollten Sie auch die abhängigen Dateien herunterladen. Wenn sich die neuesten
Versionen der abhängigen Dateien bereits auf der lokalen Festplatte befinden, müssen sie jedoch nicht erneut
heruntergeladen werden. Auch beim Upload und Einchecken von Dateien ist es nicht notwendig, die Dateien zu
senden, wenn auf dem Zielsystem bereits aktuelle Dateien vorhanden sind.
Wenn Sie diese Optionen deaktivieren, werden Ihre abhängigen Dateien nicht übertragen. Soll daher das Dialogfeld
„Abhängige Dateien“ auch angezeigt werden, wenn diese Optionen deaktiviert sind, halten Sie die Alt-Taste
(Windows) bzw. die Wahltaste (Macintosh) gedrückt, während Sie die Befehle „Abrufen“, „Bereitstellen“, „Einchecken“
oder „Auschecken“ wählen.
FTP-Verbindung Legt fest, ob die Verbindung zur Remote-Site getrennt wird, wenn nach der angegebenen
Minutenanzahl keinerlei Aktivität aufgetreten ist.
FTP-Zeitüberschreitung Gibt an, wie viele Sekunden lang Dreamweaver versucht, eine Verbindung zum Remote-
Server herzustellen.
Reagiert der Server nicht innerhalb des angegebenen Zeitraums, wird in Dreamweaver eine entsprechende
Warnmeldung angezeigt.
FTP-Übertragungsoptionen Bestimmt, ob Dreamweaver nach der angegebenen Anzahl an Sekunden die
Standardoption auswählt, wenn während der Dateiübertragung ein Dialogfeld eingeblendet wird und keine Reaktion
des Benutzers erfolgt.
Proxy-Host Gibt die Adresse des Proxy-Servers an, zu dem die Verbindung hergestellt wird, wenn Sie sich hinter einer
Firewall befinden.
Wenn Sie keine Firewall eingerichtet haben, lassen Sie dieses Feld leer. Wenn Sie sich hinter einer Firewall befinden,
wählen Sie im Dialogfeld „Site-Definition“ die Option „Proxy verwenden“ aus („Server“ > „Vorhandenen Server
bearbeiten“ (Stiftsymbol) > „Weitere Optionen“).
Proxy-Anschluss Bestimmt, über welchen Anschluss im Proxy oder in der Firewall eine Verbindung zum Remote-
Server hergestellt wird. Der Standardanschluss für FTP ist 21. Wenn Sie einen anderen Anschluss verwenden
möchten, geben Sie die Nummer in dieses Feld ein.
58
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Bereitstellungsoptionen: Dateien vor dem Bereitstellen speichern Legt fest, dass nicht gespeicherte Dateien
automatisch gespeichert werden sollen, bevor sie in der Remote-Site bereitgestellt werden.
Optionen zum Verschieben: Eingabeaufforderung vor dem Verschieben von Dateien auf den Server Zeigt eine
Warnmeldung an, wenn Sie Dateien auf die Remote-Site verschieben möchten.
Sites verwalten Öffnet das Dialogfeld „Sites verwalten“, in dem Sie eine vorhandene Site bearbeiten oder eine neue
Site erstellen können.
Sie können festlegen, ob Ihre Dateien im ASCII-Modus (Text) oder im Binärmodus übertragen werden. Dazu
bearbeiten Sie die Datei FTPExtensionMap.txt im Ordner Dreamweaver/Configuration (bzw.
FTPExtensionMapMac.txt auf Macintosh-Systemen). Weitere Informationen hierzu finden Sie im Handbuch
Dreamweaver erweitern.
Verwalten von Contribute-Sites
Verwalten von Contribute-Sites
Adobe® Contribute® CS4 kombiniert die Funktionen eines Webbrowsers mit denen eines einfachen Webseiten-
Editors. Ihre Kollegen oder Kunden können auf einer von Ihnen erstellten Site zu einer Seite navigieren und diese
bearbeiten oder aktualisieren, sofern sie hierzu berechtigt sind. Contribute-Benutzer können einfachen Webinhalt,
hierzu gehören auch formatierter Text, Bilder, Tabellen und Hyperlinks, hinzufügen und aktualisieren. Contribute-
Site-Administratoren legen fest, in welchem Ausmaß die Sites von regulären Benutzern (die keine Administrator-
Zugriffsberechtigung haben) bearbeitet werden können.
Note: In diesem Abschnitt wird vorausgesetzt, dass Sie ein Contribute-Administrator sind.
Als Site-Administrator versetzen Sie Benutzer, die keine Administratorfunktion innehaben, in die Lage, Seiten zu
bearbeiten. Dazu erstellen Sie einen Verbindungsschlüssel und senden ihn an die Benutzer (Informationen hierzu
finden Sie in der Contribute-Hilfe). Sie können eine Verbindung zu einer Contribute-Site auch mithilfe von
Dreamweaver einrichten, wobei der Site-Designer eine Verbindung zur Contribute-Site herstellen und alle in
Dreamweaver verfügbaren Bearbeitungsfunktionen verwenden kann.
Contribute ergänzt den Funktionsumfang Ihrer Website mit Contribute Publishing Server (CPS), einer Suite von
Publishing-Anwendungen und Tools zur Benutzerverwaltung, mit der Sie Contribute in den
Benutzerverzeichnisdienst Ihrer Organisation, z. B. Lightweight Directory Access Protocol (LDAP) oder Active
Directory, integrieren können. Wenn Sie Ihre Dreamweaver-Site als Contribute-Site aktivieren, liest Dreamweaver die
Contribute-Verwaltungseinstellungen, wann immer Sie eine Verbindung mit der Remote-Site herstellen. Wenn
Dreamweaver feststellt, dass CPS aktiviert ist, erbt es einige Funktionen von CPS, z. B. die Wiederherstellung früherer
Dateiversionen und die Ereignisprotokollierung.
Sie können Dreamweaver dafür verwenden, eine Verbindung zu einer Datei in einer Contribute-Site herzustellen und
diese Datei zu modifizieren. Die meisten Dreamweaver-Funktionen sind bei Contribute-Sites genauso aufgebaut wie
bei jeder anderen Site. Wenn Sie Dreamweaver allerdings für Contribute-Sites verwenden, führt Dreamweaver
bestimmte Dateiverwaltungsoperationen wie z. B. das Speichern mehrfacher Dokumentversionen und Protokollieren
bestimmter Ereignisse in der CPS-Konsole automatisch durch.
Weitere Informationen hierzu finden Sie in der Contribute-Hilfe.
59
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Site-Struktur und Seitendesign für Contribute-Sites
Um Contribute-Benutzer in die Lage zu versetzen, Ihre Website zu bearbeiten, sollten Sie die folgenden Punkte
beachten, wenn Sie sie strukturieren:
• Halten Sie die Site-Struktur einfach. Achten Sie darauf, dass Ordner nicht zu tief verschachtelt werden. Gruppieren
Sie zusammengehörende Elemente in einem Ordner.
• Richten Sie für die auf dem Server enthaltenen Ordner entsprechende Lese- und Schreibberechtigungen ein.
• Bei der Erstellung der Ordner sollten ihnen Indexseiten hinzufügen, um Contribute-Benutzern das Ablegen neuer
Seiten in den richtigen Ordnern zu erleichtern. Beispielsweise können Sie für Contribute-Benutzer, die Seiten mit
Sitzungsprotokollen bereitstellen, im Site-Stammordner einen Ordner mit der Bezeichnung „Sitzungsprotokolle“
erstellen und darin eine Indexseite anlegen. Richten Sie anschließend einen Hyperlink von der Hauptseite zur
Indexseite für Sitzungsprotokolle ein. Contribute-Benutzer können dann zur Indexseite wechseln und für das
Protokoll einer bestimmten Sitzung eine neue Seite erstellen, die mit dieser Seite verknüpft ist.
• Stellen Sie auf der Indexseite eines jeden Ordners eine Liste mit Verknüpfungen zu den im jeweiligen Ordner
enthaltenen einzelnen Inhaltsseiten und Dokumenten bereit.
• Gestalten Sie das Seitendesign möglichst einfach, um verzierte Formatierungen auf ein Minimum zu beschränken.
• Die Formatierung sollten Sie besser mit CSS als mit HTML-Tags realisieren und dabei aussagekräftige Namen für
Ihre CSS-Stile verwenden. Wenn die Contribute-Benutzer Standardformatvorlagen von Microsoft Word
verwenden, sollten Sie die Namen dieser Word-Formatvorlagen auch für Ihre CSS-Stile verwenden, damit
Contribute die Formatvorlagen richtig zuordnen kann, wenn Informationen aus einem Word-Dokument kopiert
und in eine Contribute-Seite einfügt werden.
• Um zu verhindern, dass Contribute-Benutzern ein bestimmter CSS-Stil zur Verfügung steht, ändern Sie den
Namen des Stils, sodass er mit „mmhide_“ beginnt. Wenn Sie auf einer Seite beispielsweise einen Stil mit der
Bezeichnung „Rechts_ausgerichtet“ verwenden, der Contribute-Benutzern nicht zur Verfügung gestellt werden
soll, ändern Sie den Namen des Stils in „mmhide_Rechts_ausgerichtet“.
Note: Sie müssen „mmhide_“ zum Stilnamen in der Codeansicht hinzufügen; diese Änderung kann nicht im
Bedienfeld „CSS-Stile“ hinzugefügt werden.
• Verwenden Sie möglichst wenige CSS-Stile, um die Formatierung einfach und übersichtlich zu gestalten.
• Wenn Server-Side Includes für HTML-Seitenelemente, wie z. B. Kopf- und Fußzeilen, verwendet werden,
empfiehlt es sich, eine nicht verknüpfte HTML-Seite zu erstellen, die Hyperlinks zu den Include-Dateien enthält.
Contribute-Benutzer können dann für diese Seite ein Lesezeichen setzen, um schnell zu den Include-Dateien
navigieren und diese bearbeiten zu können.
More Help topics
“Erstellen von Dreamweaver-Vorlagen” on page 428
“Mit Server-Side Includes arbeiten” on page 367
Dateiübertragung an eine bzw. von einer Contribute-Site
In Contribute wird ein System ähnlich dem Eincheck-/Auschecksystem von Dreamweaver eingesetzt, um
sicherzustellen, dass zu einem gegebenen Zeitpunkt immer nur ein Benutzer eine Webseite bearbeiten kann. Wenn Sie
die Contribute-Kompatibilität in Dreamweaver aktivieren, wird das Dreamweaver-Eincheck-/Auschecksystem
automatisch aktiviert.
60
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Verwenden Sie stets die Befehle „Einchecken“ und „Auschecken“, um in Dreamweaver-Dateien an eine oder von einer
Contribute-Site zu übertragen. Wenn Sie stattdessen die Befehle PUT (Bereitstellen) und GET (Abrufen) für die
Datenübertragung verwenden, besteht die Gefahr, dass Sie die von einem Contribute-Benutzer an einer Datei kürzlich
vorgenommenen Änderungen überschreiben.
Wenn Sie eine Datei in eine Contribute-Site einchecken, erstellt Dreamweaver im Ordner „_baks“ automatisch eine
Sicherungskopie der zuvor eingecheckten Dateiversion und fügt Ihren Benutzernamen und das aktuelle Datum in eine
Design Notes-Datei ein.
More Help topics
“Dateien ein- und auschecken” on page 95
Contribute-Datei- und -Ordnerberechtigungen auf dem Server
In Contribute ist eine Funktion zur Verwaltung von Datei- und Ordnerberechtigungen für jede von Ihnen definierte
Benutzerrolle enthalten. Contribute enthält jedoch kein Verfahren für die Verwaltung der zugrunde liegenden Lese-
und Schreibberechtigungen, die der Server den Dateien und Ordnern zuweist. In Dreamweaver können Sie diese
Berechtigungen direkt auf dem Server verwalten.
Wenn ein Contribute-Benutzer auf dem Server keinen Lesezugriff auf eine abhängige Datei wie z. B. ein auf einer Seite
dargestelltes Bild hat, wird der Inhalt der abhängigen Datei nicht im Contribute-Fenster angezeigt. Ist beispielsweise
keine Leseberechtigung für einen Bildordner vorhanden, werden die im jeweiligen Ordner enthaltenen Bilder in
Contribute als fehlerhafte Bildsymbole dargestellt. Ähnlich werden Dreamweaver-Vorlagen in einem Unterordner des
Site-Stammordners gespeichert. Wenn ein Contribute-Benutzer also keine Leseberechtigung für den Stammordner
besitzt, kann er auf dieser Site nur dann Vorlagen verwenden, wenn Sie diese in einen entsprechenden, dem Benutzer
zugänglichen Ordner kopieren.
Beim Einrichten einer Dreamweaver-Site müssen Sie Benutzern auf dem Server Lesezugriff auf den Ordner „_mm“
(den Unterordner „_mm“ des Stammordners), den Ordner „Templates“ und auf alle weiteren Ordner gewähren, die
für Benutzer erforderliche Elemente enthalten.
Selbst wenn es aus Sicherheitsgründen nicht möglich ist, Benutzern Lesezugriff auf den Ordner „/Templates“ zu
gewähren, können Sie dennoch Contribute-Benutzern Zugriff auf Vorlagen ermöglichen. Weitere Informationen
finden Sie unter “Zugriff auf Vorlagen ohne Zugriff auf Stammordner für Contribute-Benutzer einrichten” on page 64.
Weitere Informationen über Contribute-Berechtigungen finden Sie in der Contribute-Hilfe unter Contribute
verwalten.
Contribute-Sonderdateien
Contribute enthält eine Reihe von Sonderdateien, die nicht für die Besucher Ihrer Site vorgesehen sind.
• Die Datei für gemeinsam genutzte Einstellungen, eine Datei mit einem verwirrenden Namen und der Erweiterung
CSI, wird im Stammverzeichnis der Site im Ordner „_mm“ angezeigt und enthält Informationen, die von
Contribute zur Verwaltung der Site verwendet werden.
• Ältere Versionen von Dateien, in Ordnern mit dem Namen „_baks“
• Temporäre Seitenversionen, damit Benutzer eine Vorschau der Änderungen anzeigen können.
• Temporäre Sperrdateien, die darauf hinweisen, dass eine jeweilige Seite bearbeitet oder in der Vorschau angezeigt wird.
• Design Notes-Dateien, die Metadaten über die in der Site abgelegten Seiten enthalten.
Generell sollte keine dieser Contribute-Sonderdateien in Dreamweaver bearbeitet werden. Sie werden von
Dreamweaver automatisch verwaltet.
61
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Wenn diese Contribute-Sonderdateien nicht auf dem öffentlich zugänglichen Server angezeigt werden sollen,
können Sie einen Testserver einrichten, auf dem Contribute-Benutzer an Seiten arbeiten können. Kopieren Sie
dann diese Webseiten regelmäßig vom Testserver auf einen Produktionsserver im Internet. Bei Verwendung eines
Testservers kopieren Sie nur die Webseiten auf den Produktionsserver und nicht die oben genannten Contribute-
Sonderdateien. Insbesondere dürfen die Ordner „_mm“ und „_baks“ nicht auf den Produktionsserver kopiert
werden.
Note: In der Contribute-Hilfe finden Sie unter dem Begriff „Website-Sicherheit“ Informationen darüber, wie Sie einen
Server einrichten können, um Besuchern den Zugriff auf Dateien in Ordnern zu verweigern, die mit einem Unterstrich
beginnen.
Manchmal kann es erforderlich sein, andere Contribute-Sonderdateien manuell zu löschen, z. B. dann, wenn
temporäre Vorschau-Seiten nach Beendigung der Vorschau von Contribute nicht gelöscht werden. Diese
temporären Seiten müssen dann manuell gelöscht werden. Die Dateinamen temporärer Vorschauseiten beginnen
mit „TMP“.
Ähnlich kann es unter bestimmten Bedingungen dazu kommen, dass eine veraltete Sperrdatei versehentlich nicht
vom Server entfernt wird. In diesem Fall müssen Sie die Sperrdatei manuell löschen, damit andere Benutzer die
Seite bearbeiten können.
Eine Site für die Verwendung von Contribute vorbereiten
Wenn Sie eine vorhandene Dreamweaver-Site für Contribute-Benutzer vorbereiten, müssen Sie die Contribute-
Kompatibilität ausdrücklich aktivieren, um Contribute-bezogene Funktionen verwenden zu können. Sie erhalten
keine Aufforderung in Dreamweaver. Wenn Sie eine Verbindung zu einer Site herstellen, die als Contribute-Site
eingerichtet wurde (und bereits über einen Administrator verfügt), werden Sie in Dreamweaver aufgefordert, die
Contribute-Kompatibilität zu aktivieren.
Die Contribute-Kompatibilität wird jedoch nicht von allen Verbindungsarten unterstützt. Für Verbindungsarten
gelten die folgenden Einschränkungen:
• Wenn bei der Verbindung zu Ihrer Remote-Site das WebDAV-Protokoll verwendet wird, können Sie die
Contribute-Kompatibilität nicht aktivieren, da diese Quellcode-Versionskontrollsysteme nicht mit den Design
Notes- und Eincheck-/Auschecksystemen kompatibel sind, die von Dreamweaver für Contribute-Sites verwendet
werden.
• Wenn Sie eine RDS-Verbindung zur Remote-Site herstellen, können Sie die Contribute-Kompatibilität zwar
aktivieren, müssen aber dann Ihre Verbindung anpassen, bevor Sie sie gemeinsam mit anderen Contribute-
Benutzern nutzen können.
• Wenn Ihr lokaler Computer als Webserver eingesetzt wird, müssen Sie die Site über eine FTP- oder
Netzwerkverbindung (und nicht über ein lokales Ordnerverzeichnis) einrichten, damit Sie Ihre Verbindung
gemeinsam mit anderen -Benutzern nutzen können.
Wenn Sie die Contribute-Kompatibilität aktivieren, werden in Dreamweaver automatisch Design Notes (zusammen
mit der Option „Design Notes für gemeinsame Nutzung bereitstellen“) und das Eincheck-/Auscheck-System aktiviert.
Wenn Contribute Publishing Server (CPS) auf der Remote-Site, zu der Sie eine Verbindung hergestellt haben, aktiviert
wurde, benachrichtigt Dreamweaver den CPS über jede von Ihnen ausgeführte Netzwerkoperation, wie z. B. das
Einchecken, Wiederherstellen früherer Dateiversionen oder Veröffentlichen einer Datei. Der CPS protokolliert diese
Ereignisse und Sie können das Protokoll auf der CPS-Verwaltungskonsole anzeigen. (Wenn Sie CPS deaktivieren,
werden diese Ereignisse nicht protokolliert.) Mithilfe von Contribute können Sie CPS aktivieren. Weitere
Informationen hierzu finden Sie in der Adobe Contribute-Hilfe.
62
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Note: Sie können die Kompatibilität einer Site mit Contribute herstellen, ohne dass Contribute auf Ihrem Computer
installiert ist. Wenn Sie jedoch Contribute Administrator über Dreamweaver starten möchten, muss Contribute auf
demselben Computer installiert sein wie Dreamweaver und Sie müssen eine Verbindung mit der Remote-Site herstellen,
bevor Sie die Contribute-Kompatibilität aktivieren können. Andernfalls kann Dreamweaver die Administrator-
Einstellungen von Contribute nicht lesen, anhand derer ermittelt wird, ob CPS und Wiederherstellung aktiviert wurden.
Important: Stellen Sie sicher, dass die Datei für gemeinsam genutzte Einstellungen (CSI-Datei), über die die Site in
Contribute verwaltet wird, sich auf dem Remote-Server befindet und nicht beschädigt ist. Diese Datei wird in Contribute
automatisch erstellt (zudem werden ältere Versionen der Datei überschrieben), wenn Sie die Site in Contribute
Administrator verwalten. Wenn sich die Datei für gemeinsam genutzte Einstellungen nicht auf dem Server befindet oder
beschädigt ist, wird bei jedem Netzwerkvorgang (z. B. Bereitstellen) in Dreamweaver die Fehlermeldung „Die für die
Kompatibilität mit Contribute erforderliche Datei ist auf dem Server nicht vorhanden“ zurückgegeben. Um
sicherzustellen, dass die korrekte Datei auf dem Server vorhanden ist, deaktivieren Sie in Dreamweaver die Verbindung
mit dem Server, starten Sie Contribute Administrator, nehmen Sie eine Änderung an den Einstellungen vor und stellen
Sie dann in Dreamweaver die Verbindung mit dem Server wieder her. Weitere Informationen hierzu finden Sie in der
Adobe Contribute-Hilfe.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie dann auf „Bearbeiten“.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einstellungen“, wählen Sie die Kategorie
„Contribute“ und dann „Contribute-Kompatibilität aktivieren“ aus.
4 Wenn ein Dialogfeld eingeblendet wird, das Sie zur Aktivierung von Design Notes und von
Einchecken/Auschecken auffordert, klicken Sie auf „OK“.
5 Falls Sie Ihre Eincheck-/Auscheck-Kontaktinformationen nicht bereits angegeben haben, geben Sie im
eingeblendeten Dialogfeld Ihren Namen und Ihre E-Mail-Adresse ein und klicken Sie auf „OK“. Der
Wiederherstellungsstatus, der CPS-Status, das Textfeld „Site-Stamm-URL“ und die Schaltfläche „Site in Contribute
verwalten“ werden im Dialogfeld „Site-Definition“ angezeigt.
Wenn die Wiederherstellungsfunktion in Contribute aktiviert wurde, können Sie frühere Versionen von Dateien
wiederherstellen, die Sie in Dreamweaver geändert haben.
6 Prüfen Sie die URL im Textfeld „Site-Stamm-URL“ und korrigieren Sie sie bei Bedarf. Dreamweaver erstellt eine
Site-Stamm-URL basierend auf anderen von Ihnen bereitgestellten Site-Definitionsdaten. Manchmal ist die
erstellte URL jedoch nicht korrekt.
7 Klicken Sie auf die Schaltfläche „Testen“, um zu prüfen, ob Sie die richtige URL eingegeben haben.
Note: Wenn Sie nun einen Verbindungsschlüssel senden oder Contribute-Site-Administrationsaufgaben durchführen
möchten, überspringen Sie die restlichen Schritte.
8 Klicken Sie auf „Site in Contribute verwalten“, wenn Sie Änderungen an den Einstellungen vornehmen möchten.
Beachten Sie, dass Contribute auf demselben Computer installiert sein muss, wenn Sie Contribute Administrator
über Dreamweaver öffnen möchten.
9 Klicken Sie auf „Speichern“ und anschließend auf „Fertig“.
More Help topics
“Frühere Dateiversionen wiederherstellen (Contribute-Benutzer)” on page 109
Contribute-Sites mithilfe von Dreamweaver verwalten
Nachdem Sie die Contribute-Kompatibilität aktiviert haben, können Sie Contribute mithilfe von Dreamweaver
starten, um Site-Administrationsaufgaben durchzuführen.
63
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Note: Contribute muss auf demselben Computer installiert sein wie Dreamweaver.
Als Administrator einer Contribute-Site können Sie folgende Aufgaben durchführen:
• Administrator-Einstellungen für die Site ändern.
Bei Contribute-Administrator-Einstellungen handelt es sich um eine Sammlung von Einstellungen, die für alle
Benutzer Ihrer Website gelten. Anhand dieser Einstellungen können Sie Contribute optimieren, um eine positivere
Benutzererfahrung zu erzielen.
• Berechtigungen von Contribute-Benutzerrollen ändern.
• Zugriff für Contribute-Benutzer einrichten.
Contribute-Benutzer benötigen bestimmte Site-Informationen, um eine Verbindung zur Site herstellen zu können.
Sie können alle diese Informationen in einer als Verbindungsschlüssel bezeichneten Datei zusammenfassen und an
Contribute-Benutzer senden.
Note: Ein Verbindungsschlüssel ist nicht mit einer exportierten Dreamweaver-Sitedatei gleichzusetzen.
Bevor Sie Contribute-Benutzern die zur Seitenbearbeitung erforderlichen Verbindungsinformationen geben,
sollten Sie in Dreamweaver die grundlegende Ordnerhierarchie für Ihre Site festlegen und die für die Site
erforderlichen Vorlagen und CSS-Stylesheets erstellen.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie dann auf „Bearbeiten“.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einstellungen“ und wählen Sie die Kategorie
„Contribute“ aus.
4 Klicken Sie auf die Schaltfläche „Site in Contribute verwalten“.
Note: Diese Schaltfläche wird nur dann angezeigt, wenn Sie die Contribute-Kompatibilität aktiviert haben.
5 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf „OK“.
Das Dialogfeld zur Verwaltung der Website wird angezeigt.
• Um die Administator-Einstellungen zu ändern, wählen Sie in der Liste auf der linken Seite eine Kategorie aus und
ändern Sie die Einstellungen nach Bedarf.
• Um die Rolleneinstellungen zu ändern, klicken Sie in der Kategorie für Benutzer und Rollen auf die Schaltfläche
zum Bearbeiten der Rolleneinstellungen und nehmen Sie die gewünschten Änderungen vor.
• Zur Übermittlung eines Verbindungsschlüssels für die Einrichtung von Benutzerverbindungen klicken Sie in der
Kategorie für Benutzer und Rollen auf die Schaltfläche „Verbindungsschlüssel senden“ und führen Sie
anschließend den Verbindungsassistenten aus.
6 Klicken Sie auf „Schließen“, dann auf „OK“ und schließlich auf „Fertig“.
Weitere Informationen zu Administrator-Einstellungen, zum Verwalten von Benutzerrollen und Erstellen eines
Verbindungsschlüssels finden Sie in der Contribute-Hilfe.
More Help topics
“Dreamweaver-Site-Einstellungen importieren und exportieren” on page 55
64
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Remote-Dateien in einer Contribute-Site löschen, verschieben oder
umbenennen
Das Löschen von Dateien aus dem Remote-Server für Contribute-Sites funktioniert im Prinzip ebenso wie das
Löschen von Dateien aus dem Server anderer Dreamweaver-Sites. Wenn Sie jedoch eine Datei aus einer Contribute-
Site löschen, werden Sie in Dreamweaver gefragt, ob alle älteren Versionen der Datei gelöscht werden sollen. Wenn
Sie die älteren Versionen behalten möchten, speichert Dreamweaver auch eine Kopie der aktuellen Version im Ordner
„_baks“, damit Sie sie zu einem späteren Zeitpunkt wiederherstellen können.
Das Umbenennen bzw. Verschieben von Remote-Dateien aus einem Ordner in einen anderen funktioniert auf
Contribute-Sites ähnlich wie auf Dreamweaver-Sites. Außerdem werden bei Contribute-Sites die im Ordner „_baks“
gespeicherten verknüpften vorherigen Versionen der Datei von Dreamweaver umbenannt bzw. verschoben.
1 Wählen Sie in der Remote-Ansicht des Bedienfelds „Dateien“ („Fenster“ > „Dateien“) die Datei aus und drücken
Sie die Rücktaste (Windows) bzw. die Löschtaste (Macintosh).
Bestätigen Sie in dem daraufhin eingeblendeten Dialogfeld, ob die Datei gelöscht werden soll.
2 Führen Sie im Bestätigungsdialogfeld folgende Schritte aus:
• Wählen Sie die Option „Frühere Versionen löschen“, um alle vorherigen Versionen der Datei sowie die aktuelle
Version zu löschen.
• Deaktivieren Sie die Option „Frühere Versionen löschen“, um vorherige Versionen der Datei auf dem Server zu
belassen.
3 Klicken Sie auf „Ja“, um die Datei zu löschen.
Zugriff auf Vorlagen ohne Zugriff auf Stammordner für Contribute-Benutzer
einrichten
In einer Contribute-Site werden die zugrunde liegenden Datei- und Ordnerberechtigungen direkt auf dem Server
verwaltet. Wenn es aus Sicherheitsgründen nicht möglich ist, Benutzern Lesezugriff auf den Ordner „Templates“ zu
gewähren, können Sie dennoch Vorlagen für Benutzer bereitstellen.
1 Richten Sie die Contribute-Site so ein, dass der Stammordner als solcher angezeigt wird.
2 Kopieren Sie über das Bedienfeld „Dateien“ den Vorlagenordner aus dem Stammordner der Hauptsite manuell in
den Stammordner der Contribute-Site.
3 Nachdem Sie die Vorlagen der Hauptsite aktualisiert haben, kopieren Sie die geänderten Vorlagen nach Bedarf in
die entsprechenden Unterordner.
Bei dieser Methode sollten Sie in den Unterordnern keine Hyperlinks verwenden, die mit dem Site-Stammordner
verknüpft sind. Mit dem Site-Stammordner verknüpfte Hyperlinks beziehen sich auf den Hauptstammordner des
Servers und nicht auf den von Ihnen in Dreamweaver definierten Stammordner. Contribute-Benutzer können keine
Hyperlinks erstellen, die mit dem Site-Stammordner verknüpft sind.
Wenn Hyperlinks in Contribute-Seiten als fehlerhaft erscheinen, liegt möglicherweise ein Problem mit den
Ordnerberechtigungen vor, insbesondere dann, wenn die Hyperlinks mit Seiten außerhalb des Stammverzeichnisses
des jeweiligen Contribute-Benutzers verknüpft sind. Überprüfen Sie die Lese- und Schreibberechtigungen für die auf
dem Server vorliegenden Ordner.
More Help topics
“Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade” on page 294
65
VERWENDEN VON DREAMWEAVER
Arbeiten mit Dreamweaver-Sites
Last updated 10.4.2012
Fehlerbehebung in einer Contribute-Site
Manchmal scheint eine Remote-Datei einer Contribute-Site ausgecheckt zu sein, in Wirklichkeit ist sie aber auf dem
Computer des Benutzers gar nicht gesperrt. Sie können die Datei entsperren, damit sie von den Benutzern bearbeitet
werden kann.
Wenn Sie auf eine Schaltfläche klicken, die mit der Administration von Contribute-Sites verbunden ist, bestätigt
Dreamweaver, dass eine Verbindung zu Ihrer Remote-Site hergestellt werden kann und dass die von Ihnen
angegebene Site-Stamm-URL gültig ist. Wenn in Dreamweaver keine Verbindung hergestellt werden kann oder wenn
die URL ungültig ist, wird eine Fehlermeldung eingeblendet.
Wenn die Administrationstools nicht ordnungsgemäß funktionieren, liegt möglicherweise ein Fehler im Ordner
„_mm“ vor.
Dateien in Contribute-Sites entsperren
Note: Vor der Durchführung dieses Verfahrens muss sichergestellt werden, dass die Datei nicht ausgecheckt ist. Wenn Sie
die Sperre einer Datei aufheben, während diese von einem Contribute-Benutzer bearbeitet wird, kann die Datei von
mehreren Benutzern gleichzeitig bearbeitet werden.
1 Führen Sie einen der folgenden Schritte aus:
• Öffnen Sie die Datei im Dokumentfenster und wählen Sie dann „Site“ > „Auschecken rückgängig“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) ins Bedienfeld
„Dateien“ („Fenster“ > „Dateien“) und wählen Sie dann „Auschecken rückgängig“.
In dem ggf. eingeblendeten Dialogfeld wird angezeigt, von wem die Datei ausgecheckt wurde. Sie werden aufgefordert,
das Entsperren der Datei zu bestätigen.
2 Wenn das Dialogfeld eingeblendet wird, klicken Sie zur Bestätigung auf „Ja“.
Die Datei wird auf dem Server entsperrt.
Fehler bei Verbindungsproblemen von Contribute-Sites beheben
1 Überprüfen Sie die Site-Stamm-URL in der Kategorie „Contribute“ des Dialogfelds „Site-Definition“, indem Sie
diese URL in einem Browser öffnen, um sicherzustellen, dass die korrekte Seite geöffnet wird.
2 Klicken Sie in der Kategorie „Remote-Informationen“ des Dialogfelds „Site-Definition“ auf die Schaltfläche
„Testen“, um sicherzustellen, dass eine Verbindung zur Site hergestellt werden kann.
3 Wenn bei Klicken auf die Schaltfläche „Testen“ trotz korrekter URL eine Fehlermeldung angezeigt wird, wenden
Sie sich an Ihren Systemadministrator.
Fehlerbehebung in Contribute-Administrationstools
1 Vergewissern Sie sich auf dem Server, dass Sie über die Lese- und Schreibberechtigung und ggf.
Ausführungsberechtigungen für den Ordner „_mm“ verfügen.
2 Der Ordner „_mm“ muss eine Datei für gemeinsam genutzte Einstellungen enthalten, deren Name die Erweiterung
„CSI“ hat.
3 Ist dies nicht der Fall, müssen Sie mithilfe des Verbindungsassistenten eine Verbindung zur Site herstellen und Site-
Administrator werden. Die Datei für gemeinsam genutzte Einstellungen wird automatisch erstellt, wenn Sie
Administrator werden. Weitere Informationen dazu, wie Sie den Administratorstatus für eine bestehende
Contribute-Website erlangen, finden Sie in der Contribute-Hilfe unter Contribute verwalten.
66
Last updated 10.4.2012
Chapter 4: Dateien erstellen und verwalten
Dokumente öffnen und erstellen
Dreamweaver-Dokumente erstellen
Dreamweaver stellt eine flexible Arbeitsumgebung bereit, die die Arbeit mit einem breiten Spektrum unterschiedlicher
Webdokumente ermöglicht. So können Sie neben HTML-Dokumenten verschiedene weitere textbasierte
Dokumentformate wie ColdFusion Markup Language (CFML), ASP, JavaScript und Cascading Stylesheets (CSS)
erstellen und öffnen. Zudem werden auch Quellcode-Dateien, wie Visual Basic, .NET, C# und Java unterstützt.
Dreamweaver bietet mehrere Möglichkeiten zur Erstellung neuer Dokumente. Folgende Dokumente können erstellt
werden:
• Neue leere Dokumente oder Vorlagen
• Dokumente, die auf den in Dreamweaver vordefinierten Seitendesigns – darunter über 30 CSS-Designs – basieren
• Dokumente, die auf vorhandenen Vorlagen basieren
Sie können auch Voreinstellungen für Dokumente festlegen. Wenn Sie z. B. größtenteils mit einem bestimmten
Dokumenttyp arbeiten, können Sie ihn als Standard-Dokumenttyp für neu zu erstellende Seiten definieren.
In der Entwurfsansicht oder der Codeansicht lassen sich auf einfache Weise Dokumenteigenschaften, z. B. Meta-
Tags, Dokumenttitel und Hintergrundfarben, sowie mehrere andere Seiteneigenschaften definieren.
Dreamweaver-Dateitypen
Sie können in Dreamweaver eine Vielzahl unterschiedlicher Dateitypen verwenden. Hauptsächlich werden Sie mit
HTML-Dateien arbeiten. Dateien im HTML-Format (HyperText Markup Language) enthalten die tagbasierten
Sprachelemente, die zum Anzeigen von Webseiten in einem Browser verantwortlich sind. Sie können HTML-Dateien
entweder mit der Erweiterung .html oder .htm speichern. In Dreamweaver wird zum Speichern von HTML-Dateien
standardmäßig die Erweiterung .html verwendet.
In Dreamweaver können Sie HTML5-basierte Webseiten erstellen und bearbeiten. Zum Erstellen neuer HTML5-
Seiten stehen zudem Startlayouts zur Verfügung.
Es folgen einige der anderen häufig verwendeten Dateitypen, die Sie in Dreamweaver möglicherweise verwenden:
CSS CSS-Dateien (Cascading Style Sheet) haben die Erweiterung .css. Sie werden zum Formatieren von HTML-
Inhalten und zum genauen Positionieren der verschiedenen Seitenelemente verwendet.
GIF GIF-Dateien (Graphics Interchange Format) haben die Erweiterung .gif. Das GIF-Format ist ein beliebtes
Webgrafikformat für Cartoons, Logos, Grafiken mit transparenten Bereichen und für Animationen. GIF-Dateien
enthalten maximal 256 Farben.
JPEG JPEG-Dateien (Joint Photographic Experts Group – nach der Organisation, die dieses Format entwickelt hat)
haben die Erweiterung .jpg und sind in der Regel Fotos oder Bilder mit hoher Farbauflösung. Das JPEG-Format eignet
sich am besten für digitale oder gescannte Fotos, Bilder mit Texturen oder Farbverlaufübergängen und alle Bilder mit
mehr als 256 Farben.
XML XML-Dateien (eXtensible Markup Language) haben die Erweiterung .xml. Sie enthalten Daten in einer
Rohform, die mithilfe von XSL (eXtensible Stylesheet Language) formatiert werden können.
67
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
XSL XSL-Dateien (eXtensible Stylesheet Language) haben die Erweiterung .xsl oder .xslt. Sie werden zum Formatieren
von XML-Daten verwendet, die auf einer Webseite angezeigt werden sollen.
CFML CFML-Dateien (ColdFusion Markup Language) haben die Erweiterung .cfm. Sie werden zum Verarbeiten
dynamischer Seiten verwendet.
PHP Hypertext Preprocessor-Dateien haben die Erweiterung .php und werden zum Verarbeiten dynamischer Seiten
verwendet.
More Help topics
“XML-Daten mit XSLT anzeigen” on page 538
“Visuelles Entwickeln von Anwendungen” on page 657
“Grundlegendes zu Cascading Stylesheets” on page 134
Leere Seiten erstellen
Sie können entweder ein vordefiniertes CSS-Layout zur Erstellung Ihrer Seite verwenden oder eine leere Seite anlegen
und ein eigenes Layout erstellen.
1 Wählen Sie „Datei“ > „Neu“.
2 Gehen Sie zur Kategorie „Leere Seite“ des Dialogfelds „Neues Dokument“ und wählen Sie in der Spalte „Seitentyp“
den Seitentyp aus, den Sie erstellen möchten. Wählen Sie beispielsweise „HTML“, um eine HTML-Seite zu
erstellen, „ColdFusion“, um eine ColdFusion-Seite zu erstellen usw.
3 Wenn Sie ein CSS-Layout in Ihre neue Seite integrieren möchten, wählen Sie in der Spalte „Layout“ ein
vordefiniertes CSS-Layout. Andernfalls wählen Sie „Kein“. Abhängig von Ihrer Auswahl werden auf der rechten
Seite des Dialogfelds unter Umständen eine Vorschau und eine Beschreibung des gewählten Layouts angezeigt.
Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die
Texteinstellungen des Besuchers angepasst.
Fließend Die Spaltenbreite wird als Prozentwert der Breite des Besucher-Browserfensters definiert. Die Darstellung
wird angepasst, wenn der Besucher das Browserfenster schmaler oder breiter macht. Die vom Besucher
vorgenommenen Texteinstellungen haben jedoch keine Auswirkungen auf die Spaltenbreite.
Dreamweaver enthält auch zwei HTML5-CSS-Layouts: zwei oder drei Spalten mit fester Breite.
4 Wählen Sie im Popupmenü „DocType“ einen Dokumenttyp aus. In den meisten Fällen können Sie die vorgegebene
Auswahl „XHTML 1.0 Transitional“ verwenden.
Durch Auswahl einer der XHTML-Dokumenttypdefinitionen (DTD) stellen Sie sicher, dass Ihre Seite XHTML-
kompatibel angelegt wird. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie
im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen. Extensible Hypertext Markup
Language, abgekürzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen können
Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit
älteren und künftigen Browsern kompatibel sind.
Note: Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese
Site enthält die Spezifikationen für XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) und XHTML 1.0
(www.w3c.org/TR/xhtml1/). Einschlägige Informationen bieten auch die XHTML-Validator-Sites für webbasierte
Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).
Dreamweaver unterstützt auch den Dokumenttyp „HTML5“ als gesonderte Option.
68
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
5 Wenn Sie in der Spalte „Layout“ ein CSS-Layout gewählt haben, wählen Sie im zugehörigen Popupmenü den
Speicherort für das CSS aus.
Zum Head-Bereich hinzufügen Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknüpft das
neue Stylesheet mit der von Ihnen erstellten Seite.
Verknüpfen mit bestehender Datei Ermöglicht die Angabe einer bereits vorhandenen CSS-Datei, die die für das
Layout benötigten CSS-Regeln enthält. Klicken Sie dazu auf das Symbol „Stylesheet anfügen“ über dem Teilfenster
„CSS-Datei anfügen“ und wählen Sie ein vorhandenes CSS-Stylesheet aus. Diese Option ist besonders praktisch, wenn
Sie dasselbe CSS-Layout (d. h. die in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere Dokumente
anwenden möchten.
6 (Optional) CSS-Stylesheets können auch einer Seite zugeordnet werden, die unabhängig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol „Stylesheet anfügen“ über dem Teilfenster „CSS-Datei anfügen“
und wählen Sie ein CSS-Stylesheet aus.
Eine detaillierte, schrittweise Anleitung für diesen Vorgang finden Sie im Artikel von David Powers: Automatically
attaching a style sheet to new documents (Stylesheets automatisch an neue Dokumente anfügen).
7 Wählen Sie „InContext Editing aktivieren“ aus, wenn Sie eine Seite erstellen möchten, die nach dem Speichern mit
InContext Editing kompatibel ist.
Eine mit InContext Editing kompatible Seite muss mindestens ein
div-Tag aufweisen, das als bearbeitbarer Bereich
angegeben werden kann. Beim HTML-Seitentyp müssen Sie beispielsweise eines der CSS-Layouts für die neue Seite
auswählen, da diese Layouts bereits vordefinierte
div-Tags enthalten. Der bearbeitbare InContext Editing-Bereich
wird automatisch im
div-Tag mit der content-ID platziert. Später können Sie der Seite gegebenenfalls weitere
bearbeitbare Bereiche hinzufügen.
8 Klicken Sie auf „Voreinstellungen“, wenn Sie standardmäßige Dokumentvoreinstellungen festlegen möchten, wie
z. B. den Dokumenttyp, die Kodierung oder die Dateierweiterung.
9 Klicken Sie auf „Weitere Inhalte abrufen“, wenn Sie Dreamweaver Exchange starten möchten. Von dort können
Sie weitere Inhalte für das Seitendesign herunterladen.
10 Klicken Sie auf die Schaltfläche „Erstellen“.
11 Speichern Sie das neue Dokument („Datei“ > „Speichern“).
12 Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem die Datei gespeichert werden soll.
Es empfiehlt sich, Ihre Datei in einer Dreamweaver-Site zu speichern.
13 Geben Sie im Feld „Dateiname“ einen Namen für die Datei ein.
Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht
mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie
Punkte, Doppelpunkte oder Schrägstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden
sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr
funktionieren.
More Help topics
“XHTML-Code” on page 318
“Gestalten von Seitenlayouts mit CSS” on page 165
69
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
“Standard-Dokumenttyp und Standardkodierung festlegen” on page 73
“Business Catalyst InContext Editing” on page 530
Leere Vorlagen erstellen
Über das Dialogfeld „Neues Dokument“ können Sie Dreamweaver-Vorlagen erstellen. Vorlagen werden
standardmäßig im Ordner „Vorlagen“ auf Ihrer Site gespeichert.
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Leere Vorlage“ aus.
3 Wählen Sie in der Spalte „Vorlagentyp“ die Art der Seite aus, die Sie erstellen möchten. Wählen Sie beispielsweise
„HTML-Vorlage“ aus, um eine HTML-Vorlage zu erstellen, oder „ColdFusion-Vorlage“, um eine ColdFusion-
Vorlage zu erstellen, usw.
4 Wenn Sie ein CSS-Layout in Ihre neue Seite integrieren möchten, wählen Sie in der Spalte „Layout“ ein
vordefiniertes CSS-Layout. Andernfalls wählen Sie „Kein“. Abhängig von Ihrer Auswahl werden auf der rechten
Seite des Dialogfelds unter Umständen eine Vorschau und eine Beschreibung des gewählten Layouts angezeigt.
Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die
Texteinstellungen des Besuchers angepasst.
Fließend Die Spaltenbreite wird als Prozentwert der Breite des Besucher-Browserfensters definiert. Die Darstellung
wird angepasst, wenn der Besucher das Browserfenster schmaler oder breiter macht. Die vom Besucher
vorgenommenen Texteinstellungen haben jedoch keine Auswirkungen auf die Spaltenbreite.
5 Wählen Sie im Popupmenü „DocType“ einen Dokumenttyp aus. In den meisten Fällen können Sie die vorgegebene
Auswahl „XHTML 1.0 Transitional“ verwenden.
Durch Auswahl einer der XHTML-Dokumenttypdefinitionen (DTD) stellen Sie sicher, dass Ihre Seite XHTML-
kompatibel angelegt wird. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie
im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen. Extensible Hypertext Markup
Language, abgekürzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen können
Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit
älteren und künftigen Browsern kompatibel sind.
Note: Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese
Site enthält die Spezifikationen für XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) und XHTML 1.0
(www.w3c.org/TR/xhtml1/). Einschlägige Informationen bieten auch die XHTML-Validator-Sites für webbasierte
Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).
6 Wenn Sie in der Spalte „Layout“ ein CSS-Layout gewählt haben, wählen Sie im zugehörigen Popupmenü den
Speicherort für das CSS aus.
Zum Head-Bereich hinzufügen Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknüpft das
neue Stylesheet mit der von Ihnen erstellten Seite.
Verknüpfen mit bestehender Datei Ermöglicht die Angabe einer bereits vorhandenen CSS-Datei, die die für das
Layout benötigten CSS-Regeln enthält. Klicken Sie dazu auf das Symbol „Stylesheet anfügen“ über dem
Teilfenster „CSS-Datei anfügen“ und wählen Sie ein vorhandenes CSS-Stylesheet aus. Diese Option ist besonders
praktisch, wenn Sie dasselbe CSS-Layout (d. h. die in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere
Dokumente anwenden möchten.
70
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
7 (Optional) CSS-Stylesheets können auch einer Seite zugeordnet werden, die unabhängig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol „Stylesheet anfügen“ über dem Teilfenster „CSS-Datei anfügen“
und wählen Sie ein CSS-Stylesheet aus.
8 Wählen Sie „InContext Editing aktivieren“ aus, wenn Sie eine Seite erstellen möchten, die nach dem Speichern mit
InContext Editing kompatibel ist.
Eine mit InContext Editing kompatible Seite muss mindestens ein
div-Tag aufweisen, das als bearbeitbarer Bereich
angegeben werden kann. Beim HTML-Seitentyp müssen Sie beispielsweise eines der CSS-Layouts für die neue Seite
auswählen, da diese Layouts bereits vordefinierte
div-Tags enthalten. Der bearbeitbare InContext Editing-Bereich
wird automatisch im
div-Tag mit der content-ID platziert. Später können Sie der Seite gegebenenfalls weitere
bearbeitbare Bereiche hinzufügen.
9 Klicken Sie auf „Voreinstellungen“, wenn Sie standardmäßige Dokumentvoreinstellungen festlegen möchten, wie
z. B. den Dokumenttyp, die Kodierung oder die Dateierweiterung.
10 Klicken Sie auf „Weitere Inhalte abrufen“, wenn Sie Dreamweaver Exchange starten möchten. Von dort können
Sie weitere Inhalte für das Seitendesign herunterladen.
11 Klicken Sie auf die Schaltfläche „Erstellen“.
12 Speichern Sie das neue Dokument („Datei“ > „Speichern“). Wenn Sie der Vorlage noch keine bearbeitbaren
Bereiche hinzugefügt haben, weist ein Dialogfeld darauf hin, dass das Dokument keine bearbeitbaren Bereiche
enthält. Klicken Sie auf „OK“, um das Dialogfeld zu schließen.
13 Wählen Sie im Dialogfeld „Speichern unter“ eine Site aus, in der die Vorlage gespeichert wird.
14 Geben Sie im Feld „Dateiname“ einen Namen für die neue Vorlage ein. Sie brauchen dem Namen der Vorlage keine
Dateierweiterung anzufügen. Wenn Sie auf „Speichern“ klicken, wird die neuen Vorlage automatisch mit der
Erweiterung „.dwt“ im Ordner „Vorlagen“ auf Ihrer Site gespeichert.
Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht
mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie
Punkte, Doppelpunkte oder Schrägstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden
sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr
funktionieren.
More Help topics
“XHTML-Code” on page 318
“Gestalten von Seitenlayouts mit CSS” on page 165
“Vorlagen erstellen und verwalten” on page 420
“Arbeiten mit Dreamweaver-Sites” on page 40
“Standard-Dokumenttyp und Standardkodierung festlegen” on page 73
“Business Catalyst InContext Editing” on page 530
Seiten basierend auf einer vorhandenen Vorlage erstellen
Mithilfe einer vorhandenen Vorlage können Sie das neue Dokument auswählen, als Vorschau anzeigen und erstellen.
Wählen Sie im Dialogfeld „Neues Dokument“ eine Vorlage aus einer beliebigen definierten Dreamweaver-Site aus
oder erstellen Sie im Bedienfeld „Elemente“ ein neues Dokument aus einer vorhandenen Vorlage.
71
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
More Help topics
“Vorlagen erstellen und verwalten” on page 420
“Arbeiten mit Dreamweaver-Sites” on page 40
“Standard-Dokumenttyp und Standardkodierung festlegen” on page 73
Auf Vorlagen basierende Dokumente erstellen
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Seite aus Vorlage“ aus.
3 Wählen Sie in der Spalte „Site“ die Dreamweaver-Site aus, in der sich die gewünschte Vorlage befindet. Wählen Sie
dann in der Liste rechts eine Vorlage aus.
4 Deaktivieren Sie das Kontrollkästchen „Seite bei Vorlagenänderung aktualisieren“, wenn Sie nicht möchten, dass
diese Seite bei jeder Änderung der Vorlage, auf der die Seite basiert aktualisiert wird.
5 Klicken Sie auf „Voreinstellungen“, wenn Sie standardmäßige Dokumentvoreinstellungen festlegen möchten, wie
z. B. den Dokumenttyp, die Kodierung oder die Dateierweiterung.
6 Klicken Sie auf „Weitere Inhalte abrufen“, wenn Sie Dreamweaver Exchange starten möchten. Von dort können
Sie weitere Inhalte für das Seitendesign herunterladen.
7 Klicken Sie auf „Erstellen“ und speichern Sie das Dokument („Datei“ > „Speichern“).
Dokumente aus Vorlagen im Bedienfeld „Elemente“ erstellen
1 Öffnen Sie das Bedienfeld „Elemente“ („Fenster“ > „Elemente“), falls es nicht bereits geöffnet ist.
2 Klicken Sie im Bedienfeld „Elemente“ auf das links angezeigte Vorlagensymbol , um eine Liste von Vorlagen in
der aktuellen Site anzuzeigen.
Wenn Sie die zu verwendende Vorlage gerade erst erstellt haben, müssen Sie möglicherweise auf die Schaltfläche
„Aktualisieren“ klicken, um sie anzuzeigen.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Vorlage, die
Sie anwenden möchten, und wählen Sie dann „Neu von Vorlage“.
Das Dokument wird im Dokumentfenster geöffnet.
4 Speichern Sie das Dokument.
Auf Dreamweaver-Beispieldateien basierende Seiten erstellen
Im Lieferumfang von Dreamweaver sind mehrere von Fachleuten entwickelte Seitenlayoutdateien für Frames sowie
CSS-Entwurfsdateien enthalten. Diese Beispieldateien können Sie als Ausgangspunkt zum Entwerfen von Seiten für
Ihre Sites verwenden. Wenn Sie ein Dokument auf der Grundlage einer Beispieldatei erstellen, erstellt Dreamweaver
eine Kopie der Datei.
Sie können Beispieldateien in der Vorschau anzeigen und im Dialogfeld „Neues Dokument“ eine kurze Beschreibung
der Designelemente des Dokuments lesen. Bei „CSS-Stylesheets“ können Sie ein vordefiniertes Stylesheet kopieren
und anschließend auf Ihre Dokumente anwenden.
Note: Wenn Sie ein Dokument basierend auf einem vordefinierten Frameset erstellen, wird nur die Struktur und nicht
der Inhalt des Frameset kopiert. Außerdem müssen Sie jede Frame-Datei separat speichern.
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Framesets“ aus.
72
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
3 Wählen Sie in der Spalte „Beispielordner“ den Eintrag „CSS-Stylesheet“ oder „Frameset“ und anschließend in der
Liste rechts eine Beispieldatei aus.
4 Klicken Sie auf die Schaltfläche „Erstellen“.
Das neue Dokument wird im Dokumentfenster (Code- und Entwurfsansicht) geöffnet. Wenn Sie die Option „CSS-
Stylesheet“ gewählt haben, wird das CSS-Stylesheet in der Codeansicht geöffnet.
5 Speichern Sie das Dokument („Datei“ > „Speichern“).
6 Wenn das Dialogfeld „Abhängige Dateien kopieren“ angezeigt wird, stellen Sie die Optionen ein und klicken Sie
dann auf „Kopieren“, um die Elemente in den ausgewählten Ordner zu kopieren.
Sie können einen eigenen Pfad für die abhängigen Dateien wählen oder den von Dreamweaver erzeugten
Standardordner verwenden, der auf dem Quellnamen der Beispieldatei basiert.
More Help topics
“Grundlegendes zu Cascading Stylesheets” on page 134
“Frame-Dateien und Frameset-Dateien speichern” on page 217
Andere Arten von Seiten erstellen
Über die Kategorie „Andere“ im Dialogfeld „Neues Dokument“ können Sie verschiedene Seitentypen erstellen, die Sie
in Dreamweaver verwenden möchten, z. B. C#-, VBScript- oder reine Textseiten.
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Andere“ aus.
3 Wählen Sie in der Spalte „Seitentyp“ die Art des zu erstellenden Dokuments aus und klicken Sie auf die Schaltfläche
„Erstellen“.
4 Speichern Sie das Dokument („Datei“ > „Speichern“).
Dokumente speichern und wiederherstellen
Sie können ein Dokument unter seinem aktuellen Namen am aktuellen Ort speichern oder eine Kopie des Dokuments
mit einem anderen Namen an einem anderen Ort ablegen.
Vermeiden Sie bei der Benennung von Dateien und Ordnern Leer- und Sonderzeichen. Verwenden Sie insbesondere
keine Sonderzeichen (wie ä, ß oder ¥) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrägstriche) in Namen von
Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim
Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren. Dateinamen sollten auch nicht mit
einer Ziffer beginnen.
More Help topics
“Leere Seiten erstellen” on page 67
Dokumente speichern
1 Führen Sie einen der folgenden Schritte aus:
• Um die aktuelle Version auf der Festplatte zu überschreiben und vorgenommene Änderungen zu speichern,
wählen Sie „Datei“ > „Speichern“.
• Um eine Datei in einem anderen Ordner oder unter einem anderen Namen zu speichern, wählen Sie „Datei“ >
„Speichern unter“.
73
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Wechseln Sie im Dialogfeld „Speichern unter“ zu dem Ordner, in dem die Datei gespeichert werden soll.
3 Geben Sie im Textfeld „Dateiname“ einen Namen für die Datei ein.
4 Klicken Sie auf „Speichern“, um die Datei zu speichern.
Alle geöffneten Dokumente speichern
1 Wählen Sie „Datei“ > „Alles speichern“.
2 Wenn nicht gespeicherte Dokumente geöffnet sind, wird das Dialogfeld „Speichern unter“ für jedes nicht
gespeicherte Dokument angezeigt.
Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem die Datei gespeichert werden soll.
3 Geben Sie im Feld „Dateiname“ einen Namen für die Datei ein und klicken Sie auf „Speichern“.
Zuletzt gespeicherte Version eines Dokuments wiederherstellen
1 Wählen Sie „Datei“ > „Wiederherstellen“.
In einem Dialogfeld wird die Frage angezeigt, ob Sie die Änderungen verwerfen und die zuletzt gespeicherte Version
wiederherstellen möchten.
2 Klicken Sie auf „Ja“, um die vorherige Version wiederherzustellen, oder auf „Nein“, um die Änderungen
beizubehalten.
Note: Wenn Sie ein Dokument speichern und anschließend Dreamweaver beenden, können Sie die vorherige Version
eines Dokuments nach einem Neustart von Dreamweaver nicht wiederherstellen.
Standard-Dokumenttyp und Standardkodierung festlegen
Sie können festlegen, welcher Dokumenttyp als Standarddokument für eine Site verwendet werden soll.
Wenn Ihre Site beispielsweise überwiegend Seiten eines bestimmten Dateityps enthält (z. B. Cold Fusion-, HTML-
oder ASP-Dokumente), können Sie Dokumentvoreinstellungen definieren, mit denen neue Dokumente automatisch
in dem angegebenen Dateityp erstellt werden.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
Sie können auch im Dialogfeld „Neues Dokument“ auf die Schaltfläche „Voreinstellungen“ klicken, um neue
Dokumentvoreinstellungen festzulegen.
2 Klicken Sie in der Kategorieliste links auf „Neues Dokument“.
3 Legen Sie die Voreinstellungen fest bzw. nehmen Sie die erforderlichen Änderungen vor und speichern Sie Ihre
Einstellungen dann, indem Sie auf „OK“ klicken.
Standarddokument
Wählen Sie den Dokumenttyp aus, der künftig für das Erstellen neuer Seiten verwendet werden soll.
Standarderweiterung Legen Sie fest, welche Dateierweiterung (.htm oder .html) für neue HTML-Seiten vorzugsweise
verwendet werden soll.
Note: Diese Option ist für andere Dateitypen deaktiviert.
Standard-Dokumenttyp (DDT) Wählen Sie eine der XHTML-Dokumenttypdefinitionen (DTD) aus, damit neue
Seiten XHTML-kompatibel angelegt werden. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel
machen, indem Sie im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen.
Standardkodierung Legen Sie mit der Standardkodierung fest, welche Kodierung für neue Dokumente und beim
Öffnen von Dokumenten verwendet werden soll, in denen keine Kodierung angegeben ist.
74
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Wenn Sie „Unicode (UTF-8)“ als Dokumentkodierung auswählen, sind keine Entitätskodierungen mehr erforderlich,
da mit UTF-8 alle Zeichen dargestellt werden können. Wenn Sie eine andere Dokumentkodierung auswählen, ist zur
Darstellung bestimmter Zeichen möglicherweise eine Entitätsreferenz erforderlich. Weitere Informationen zu
Zeichenentitäten finden Sie unter www.w3.org/TR/REC-html40/sgml/entities.html.
Wenn Sie „Unicode (UTF-8)“ als Standardkodierung auswählen, können Sie eine Kennzeichnung der Byte-
Reihenfolge (Byte Order Mark, BOM) in das Dokument einfügen lassen, indem Sie die Option „Unicode-Signatur
(BOM) einschließen“ aktivieren.
Eine BOM belegt 2 bis 4 Bytes am Anfang einer Textdatei und identifiziert eine Datei als Unicode-Datei und darüber
hinaus die Byte-Reihenfolge der nachfolgenden Byte. Da UTF-8 keine Byte-Reihenfolge besitzt, ist für diese
Kodierungsform das Hinzufügen einer UTF-8-BOM optional. Bei UTF-16 und UTF-32 jedoch ist eine BOM
obligatorisch.
Unicode-Normalisierungsformular Wählen Sie eine Option in dieser Liste aus, wenn Sie „Unicode (UTF-8)“ als
Standardkodierung gewählt haben.
Es gibt vier Unicode-Normalisierungsformulare. Die wichtigste ist die Normalisierungsform C, denn es ist die im
Zeichenmodell für das World Wide Web am häufigsten verwendete Normalisierungsform. Adobe bietet aus Gründen
der Vollständigkeit darüber hinaus drei weitere Unicode-Normalisierungsformulare.
Dialogfeld „Neues Dokument“ mit Strg+N anzeigen Deaktivieren Sie diese Option („mit Befehl+N“ auf Macintosh-
Systemen), wenn mit dem Tastaturbefehl nicht erst ein Dialogfeld geöffnet werden soll, sondern automatisch ein neues
Dokument des Standard-Dokumenttyps erstellt werden soll.
In Unicode gibt es Zeichen, die sich zwar visuell ähneln, im Dokument aber auf unterschiedliche Art und Weise
gespeichert werden können. So kann beispielsweise das Zeichen „ë“ durch ein Einzelzeichen (e-Umlaut) oder durch
zwei Zeichen (reguläres lateinisches Zeichen e + Kombinierungsumlaut) dargestellt werden. Ein Unicode-
Kombinierungszeichen ist ein Zeichen, das zusammen mit dem davor stehenden Zeichen verwendet wird, damit
beispielsweise der Umlaut über dem „lateinischen e“ angezeigt wird. Beide Formen führen zum gleichen visuellen
Ergebnis, aber die in der Datei gespeicherten Informationen sind unterschiedlich.
Beim Normalisieren wird sichergestellt, dass alle Zeichen, die in unterschiedlicher Weise gespeichert werden können,
immer auf dieselbe Weise gespeichert werden. Dies bedeutet, dass alle „ë“-Zeichen in einem Dokument entweder als
Einzelzeichen (e mit Umlaut) oder als zwei Zeichen (e + Kombinierungsumlaut) in einem Dokument gespeichert
werden, aber nicht in beiden Formen.
Weitere Informationen zur Unicode-Normalisierung und den spezifischen verwendbaren Formen finden Sie auf der
Unicode-Website unter www.unicode.org/reports/tr15.
More Help topics
“XHTML-Code” on page 318
“Dokumentkodierung” on page 231
Konvertieren von HTML5 in einen älteren Dokumenttyp
Wenn Sie „Datei“ > „Konvertieren“ wählen, um von HTML5 zu einem älteren Dokumenttyp zu wechseln, werden
HTML5-Elemente oder -Attribute nicht entfernt. Nur der Dokumenttyp (DOCTYPE) ändert sich und es werden
abschließende Schrägstriche (für XHTML) eingefügt.
Semantische Tags wie
<header> oder <article> und Attribute wie required, placeholder oder type="number"
sind von den Änderungen nicht betroffen.
75
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Standarddateierweiterung für neue HTML-Dokumente festlegen
Sie können die Standarddateierweiterung von HTML-Dokumenten definieren, die in Dreamweaver erstellt werden.
Für neue HTML-Dokumente kann beispielsweise die Erweiterung .htm oder die Erweiterung .html verwendet
werden.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
Sie können auch im Dialogfeld „Neues Dokument“ auf die Schaltfläche „Voreinstellungen“ klicken, um neue
Dokumentvoreinstellungen festzulegen.
2 Klicken Sie in der Kategorieliste links auf „Neues Dokument“.
3 Vergewissern Sie sich, dass im Popupmenü „Standarddokument“ die Option „HTML“ ausgewählt ist.
4 Geben Sie im Feld „Standarderweiterung“ die Dateierweiterung an, die für neue HTML-Dokumente, die in
Dreamweaver erstellt werden, verwendet werden soll.
Auf Windows-Systemen können Sie die folgenden Erweiterungen festlegen: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso,
.xhtml.
Auf Macintosh-Systemen können Sie die folgenden Erweiterungen festlegen: .html, .htm, .shtml, .shtm, .tpl, .lasso,
.xhtml, .ssi.
Vorhandene Dokumente öffnen und bearbeiten
Sie können vorhandene Webseiten oder reine Textdokumente öffnen, auch wenn diese nicht in Dreamweaver erstellt
worden sind, und sie in der Entwurfs- oder Codeansicht bearbeiten.
Wenn es sich bei dem zu öffnenden Dokument um eine Microsoft Word-Datei handelt, die als HTML gespeichert
wurde, können Sie die von Word in HTML-Dateien eingefügten überflüssigen Markup-Tags mit dem Befehl „Word-
HTML optimieren“ entfernen.
Um HTML- oder XHTML-Code zu optimieren, der nicht von Microsoft Word erzeugt wurde, verwenden Sie den
Befehl „HTML optimieren“ bzw. „XHTML optimieren“.
Darüber hinaus können Sie auch andere Textdateien als HTML-Dateien, wie z. B. JavaScript-Dateien, XML-Dateien,
CSS-Stylesheets oder Textdateien, öffnen, die in Textverarbeitungsprogrammen oder Texteditoren gespeichert
wurden.
1 Wählen Sie „Datei“ > „Öffnen“.
Sie können Dateien auch mithilfe des Bedienfelds „Dateien“ öffnen.
2 Wechseln Sie zu der gewünschten Datei und wählen Sie sie aus.
Note: Falls noch nicht geschehen, empfiehlt es sich, zu öffnende und zu bearbeitende Dateien in einer Dreamweaver-Site
anzuordnen, anstatt sie von einer anderen Stelle aus zu öffnen.
3 Klicken Sie auf „Öffnen“.
Das Dokument wird im Dokumentfenster geöffnet. JavaScript-, Text- und CSS-Dateien werden standardmäßig in der
Codeansicht geöffnet. Sie können das Dokument während Ihrer Arbeit in Dreamweaver aktualisieren und die
Änderungen in der Datei speichern.
76
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
More Help topics
“Code optimieren” on page 350
“Externen Editor für Multimedia-Dateien starten” on page 281
“Mit Dateien im Bedienfeld „Dateien“ arbeiten” on page 84
Zugehörige Dateien öffnen
In Dreamweaver können Sie Dateien anzeigen, die mit dem Hauptdokument verknüpft sind, ohne dass das
Hauptdokument den Eingabefokus verliert. Wenn beispielsweise CSS- und JavaScript-Dateien mit einem
Hauptdokument verknüpft sind, können Sie diese zugehörigen Dateien in Dreamweaver anzeigen und bearbeiten,
während das Hauptdokument gleichzeitig sichtbar bleibt.
Note: Dynamisch zugehörige Dateien (z. B. PHP-Dateien in Content-Management-Systemen) werden im nächsten
Hilfeabschnitt behandelt.
Standardmäßig werden in Dreamweaver die Namen aller Dateien, die mit einem Hauptdokument verknüpft sind, in
der Symbolleiste „Zugehörige Dateien“ unterhalb des Titels des Hauptdokuments angezeigt. Die Anordnung der
Schaltflächen in der Symbolleiste entspricht der Reihenfolge der Hyperlinks zu den zugehörigen Dateien im
Hauptdokument.
Note: Wenn eine zugehörige Datei fehlt, wird in Dreamweaver dennoch die entsprechende Schaltfläche in der
Symbolleiste „Zugehörige Dateien“ angezeigt. Wenn Sie auf die Schaltfläche klicken, wird jedoch keine Datei angezeigt.
In Dreamweaver werden die folgenden Typen zugehöriger Dateien unterstützt:
• Client-Skriptdateien
• Server-Side Includes
• Spry-Datensatzquellen (XML und HTML)
• Externe CSS-Stylesheets (einschließlich verschachtelter Stylesheets)
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung zugehöriger Dateien
finden Sie unter www.adobe.com/go/dw10relatedfiles_de.
Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehörigen Dateien und zum Code-Navigator finden
Sie unter www.adobe.com/go/lrvid4044_dw_de.
Zugehörige Dateien über die Symbolleiste „Zugehörige Dateien“ öffnen
Führen Sie einen der folgenden Schritte aus:
• Klicken Sie oben im Dokument in der Symbolleiste „Zugehörige Dateien“ auf den Dateinamen der zugehörigen
Datei, die Sie öffnen möchten.
• Klicken Sie in der Symbolleiste „Zugehörige Dateien“ mit der rechten Maustaste auf den Dateinamen der
zugehörigen Datei, die Sie öffnen möchten, und wählen Sie dann im Kontextmenü die Option „Als separate Datei
öffnen“ aus. Wenn Sie eine zugehörige Datei auf diese Weise öffnen, bleibt das Hauptdokument nicht gleichzeitig
sichtbar.
Zugehörige Dateien über den Code-Navigator öffnen
1 Setzen Sie die Einfügemarke in eine Zeile oder in einen Bereich, von denen Sie wissen, dass sie von einer
zugehörigen Datei beeinflusst werden.
2 Warten Sie, bis der Indikator für den Code-Navigator angezeigt wird. Klicken Sie dann auf den Indikator, um den
Code-Navigator zu öffnen.
77
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
3 Bewegen Sie den Mauszeiger über die Elemente im Code-Navigator, um weitere Informationen zu diesen
Elementen anzuzeigen. Wenn Sie beispielsweise eine bestimmte CSS-Farbeigenschaft ändern möchten, jedoch die
entsprechende Regel nicht kennen, können Sie die Eigenschaft suchen, indem Sie den Mauszeiger über die
verfügbaren Regeln im Code-Navigator bewegen.
4 Klicken Sie auf das gewünschte Element, um die entsprechende zugehörige Datei zu öffnen.
Zurück in den Quellcode des Hauptdokuments wechseln
❖ Klicken Sie in der Symbolleiste „Zugehörige Dateien“ auf die Schaltfläche „Quellcode“.
Anzeige zugehöriger Dateien ändern
Ihnen stehen mehrere Möglichkeiten zum Anzeigen zugehöriger Dateien zur Verfügung:
• Wenn Sie eine zugehörige Datei in der Entwurfsansicht oder in der Code- und Entwurfsansicht (geteilte Ansicht)
öffnen, wird die zugehörige Datei oberhalb der Entwurfsansicht des Hauptfensters in einer geteilten Ansicht
angezeigt.
Sie können „Ansicht“ > „Entwurfsansicht oben“ auswählen, wenn die zugehörige Datei stattdessen im
Dokumentfenster unten angezeigt werden soll.
• Wenn Sie eine zugehörige Datei in der vertikal geteilten Code- und Entwurfsansicht („Ansicht“ > „Vertikal teilen“)
öffnen, wird die zugehörige Datei neben der Entwurfsansicht des Hauptfensters in einer geteilten Ansicht
angezeigt.
Sie können abhängig von der gewünschten Position der Entwurfsansicht „Entwurfsansicht links“ („Ansicht“ >
„Entwurfsansicht links“) auswählen oder die Auswahl aufheben.
• Wenn Sie eine zugehörige Datei in der geteilten Codeansicht („Ansicht“ > „Geteilte Codeansicht“) oder in der
vertikal geteilten Codeansicht („Ansicht“ > „Vertikal teilen“) öffnen, wird die zugehörige Datei abhängig von den
ausgewählten Optionen in einer geteilten Ansicht unter, über oder neben dem Quellcode des Hauptdokuments
angezeigt.
Die „Codeansicht“ in der Anzeigeoption bezieht sich auf den Quellcode des Hauptdokuments. Wenn Sie
beispielsweise „Ansicht“ > „Codeansicht oben“ auswählen, wird der Quellcode des Hauptdokuments in
Dreamweaver in der oberen Hälfte des Dokumentfensters angezeigt. Wenn Sie „Ansicht“ > „Codeansicht links“
auswählen, wird der Quellcode des Hauptdokuments im linken Bereich des Dokumentfensters angezeigt.
• In der Standardcodeansicht können Sie zugehörige Dokumente nicht gleichzeitig mit dem Quellcode des
Hauptdokuments anzeigen.
Zugehörige Dateien deaktivieren
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Heben Sie in der Kategorie „Allgemein“ die Auswahl von „Zugehörige Dateien aktivieren“ auf.
More Help topics
“Zwischen Ansichten im Dokumentfenster umschalten” on page 19
“Zu zugehörigem Code navigieren” on page 341
“Seitenvorschau in Dreamweaver” on page 312
Tutorial zu zugehörigen Dateien
78
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Dynamisch zugehörige Dateien öffnen
Die Funktion „Dynamisch zugehörige Dateien“ erweitert die Funktionalität der Funktion „Zugehörige Dateien“
dadurch, dass Sie die zugehörigen Dateien dynamischer Seiten auf der Symbolleiste „Zugehörige Dateien“ anzeigen
können. Mithilfe der Funktion „Dynamisch zugehörige Dateien“ können Sie insbesondere die zahlreichen
dynamischen Includes anzeigen, die zum Erzeugen des Laufzeitcodes für gängige Open-Source-PHP-Content-
Management-Systeme (CMS) wie WordPress, Drupal und Joomla! erforderlich sind.
Zur Verwendung der Funktion „Dynamisch zugehörige Dateien“ müssen Sie Zugriff auf einen lokalen oder Remote-
PHP-Anwendungsserver haben, auf dem WordPress, Drupal oder Joomla! ausgeführt wird. Eine gängige Methode
zum Testen von Seiten besteht darin, einen localhost-PHP-Anwendungsserver einzurichten und die Seiten lokal zu
testen.
Vor dem Testen von Seiten müssen Sie die folgenden Schritte ausführen:
• Richten Sie eine Dreamweaver-Site ein. Stellen Sie dabei sicher, dass das Textfeld „Web-URL“ im Dialogfeld „Site-
Definition“ ausgefüllt ist.
• Richten Sie einen PHP-Anwendungsserver ein.
Important: Erst wenn der Server aktiv ist, können Sie in Dreamweaver dynamisch zugehörige Dateien verwenden.
• Installieren Sie WordPress, Drupal oder Joomla! auf dem Anwendungsserver. Weitere Informationen finden Sie
unter:
• WordPress-Installation
• Drupal-Installation
• Joomla-Installation
• Definieren Sie in Dreamweaver einen lokalen Ordner, in den Sie die CMS-Dateien herunterladen und in dem Sie
sie bearbeiten.
• Definieren Sie das Verzeichnis der installierten WordPress-, Drupal- oder Joomla!-Dateien als Remote- und
Testordner.
• Rufen Sie die CMS-Dateien vom Remote-Ordner ab (Download).
More Help topics
www.adobe.com/go/dwcs5drf_en
Voreinstellungen für dynamisch zugehörige Dateien festlegen
Wenn Sie eine Seite öffnen, die mit dynamisch zugehörigen Dateien verknüpft ist, können die Dateien mit
Dreamweaver automatisch gesucht werden. Alternativ können Sie die Dateien manuell suchen (dazu klicken Sie auf
einen Hyperlink in der Statusleiste über der Seite). Als Standardeinstellung ist die manuelle Suche festgelegt.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac OS)
aus.
2 Stellen Sie sicher, dass in der Kategorie „Allgemein“ die Option „Zugehörige Dateien aktivieren“ ausgewählt ist.
3 Wählen Sie im Popupmenü „Dynamisch zugehörige Dateien“ die Option „Manuell“ oder „Automatisch“ aus.
Durch Auswählen von „Deaktiviert“ können Sie zudem die Suche insgesamt deaktivieren.
Dynamisch zugehörige Dateien suchen
1 Öffnen Sie eine Seite, die mit dynamisch zugehörigen Dateien verknüpft ist, z. B. die Seite „index.php“ des
Stammordners einer WordPress-, Drupal- oder Joomla!-Site.
79
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Wenn für die Suche nach dynamisch zugehörigen Dateien die Option „Manuell“ (die Standardeinstellung)
festgelegt ist, klicken Sie auf den Hyperlink für die Suche in der Statusleiste, die über der Seite im Dokumentfenster
angezeigt wird.
Wenn die Suche nach dynamisch zugehörigen Dateien automatisch aktiviert ist, wird auf der Symbolleiste
„Zugehörige Dateien“ eine Liste mit dynamisch zugehörigen Dateien angezeigt.
Die zugehörigen und dynamisch zugehörigen Dateien auf der Symbolleiste „Zugehörige Dateien“ sind in der
folgenden Reihenfolge aufgeführt:
• statische zugehörige Dateien (d. h. zugehörige Dateien, die keiner dynamischen Verarbeitung bedürfen)
• externe zugehörige Dateien (d. h. .css- und .js-Dateien), die Server-Include-Dateien mit dynamischen Pfaden
zugeordnet sind
• Server-Include-Dateien mit dynamischen Pfaden (d. h. .php-, .inc- und .module-Dateien)
Zugehörige Dateien filtern
Da häufig zahlreiche zugehörige und dynamisch zugehörige Dateien vorhanden sind, können Sie zugehörige Dateien
in Dreamweaver filtern, um so genau die Dateien zu suchen, die Sie bearbeiten möchten.
1 Öffnen Sie eine Seite, die mit zugehörigen Dateien verknüpft ist.
2 Suchen Sie gegebenenfalls nach dynamisch zugehörigen Dateien.
3 Klicken Sie auf das Symbol „Zugehörige Dateien filtern“ rechts auf der Symbolleiste „Zugehörige Dateien“.
4 Wählen Sie die Dateitypen aus, die auf der Symbolleiste „Zugehörige Dateien“ angezeigt werden sollen.
Standardmäßig werden alle zugehörigen Dateien ausgewählt.
5 Klicken Sie zum Erstellen eines benutzerdefinierten Filters auf das Symbol „Zugehörige Dateien filtern“ und
wählen Sie „Eigener Filter“ aus.
Im Dialogfeld „Eigener Filter“ können nur exakte Dateinamen („style.css“), Dateierweiterungen („.php“) und
Platzhalterausdrücke mit Sternchen („*menu*“) gefiltert werden. Sie können nach mehreren
Platzhalterausdrücken filtern, indem Sie die einzelnen Ausdrücke jeweils durch ein Semikolon trennen (z. B.
„style.css;*.js;*tpl.php“).
Note: Filtereinstellungen werden nach dem Schließen der Datei nicht beibehalten.
Microsoft Word-HTML-Dateien optimieren
Sie können Dokumente öffnen, die in Microsoft Word als HTML-Dateien gespeichert wurden. Anschließend können
Sie im Dialogfeld „Word-HTML optimieren“ den von Word erstellten überflüssigen HTML-Code entfernen. Der
Befehl „Word-HTML optimieren“ kann für Dokumente verwendet werden, die in Word 97 oder höher als HTML-
Dateien gespeichert wurden.
Der Code, der von Dreamweaver entfernt wird, dient in Word hauptsächlich zur Formatierung und Anzeige des
Dokuments und ist für die Anzeige der HTML-Datei nicht erforderlich. Sie sollten eine Sicherungskopie der
ursprünglichen Word-Datei (.doc) aufbewahren, da das HTML-Dokument eventuell nicht mehr in Word geöffnet
werden kann, nachdem Sie den Befehl „Word-HTML optimieren“ gewählt haben.
Um HTML- oder XHTML-Code zu optimieren, der nicht von Microsoft Word erzeugt wurde, verwenden Sie den
Befehl „HTML optimieren“ bzw. „XHTML optimieren“.
1 Speichern Sie Ihr Microsoft Word-Dokument als HTML-Datei (Webseite).
Note: Auf Windows-Systemen sollten Sie nun die Datei in Word schließen, um zu verhindern, dass es zu einer
Zugriffsverletzung kommt.
80
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Öffnen Sie die HTML-Datei in Dreamweaver.
Wechseln Sie in die Codeansicht („Ansicht“ > „Code“), um den von Word erzeugten HTML-Code anzuzeigen.
3 Wählen Sie „Befehle“ > „Word-HTML optimieren“.
Note: Wenn Dreamweaver die Word-Version, in der die Datei gespeichert worden ist, nicht bestimmen kann, wählen Sie
die richtige Version aus dem Popupmenü aus.
4 Aktivieren bzw. deaktivieren Sie die Optionen für die Optimierung. Die Voreinstellungen, die Sie hier vornehmen,
werden als Standardoptimierungseinstellungen verwendet.
Dreamweaver wendet die Optimierungseinstellungen auf das HTML-Dokument an und blendet ein
Änderungsprotokoll ein (sofern diese Option nicht im Dialogfeld deaktiviert wurde).
Alle Word-spezifischen Markierungen entfernen entfernt den gesamten Microsoft Word-spezifischen HTML-Code,
einschließlich XML von HTML-Tags, Word-spezifischer Metadaten und Link-Tags im head-Bereich des Dokuments,
Word-XML-Markup, bedingter Tags und deren Inhalt sowie leerer Absätze und Randdefinitionen aus Stilen. Auf der
Registerkarte „Detailliert“ können Sie die obigen Optionen einzeln auswählen.
CSS optimieren entfernt alle Word-spezifischen CSS-Elemente, einschließlich Inline-CSS-Stile, wenn zulässig (dabei
hat der übergeordnete Stil die gleichen Stileigenschaften), Stilattribute, die mit „mso“ beginnen, alle Stildeklarationen,
die nicht CSS entsprechen, alle CSS-Stile aus Tabellen sowie alle nicht benutzten Stildefinitionen aus dem Head-
Bereich. Sie können diese Optionen auf der Registerkarte „Detailliert“ genau festlegen.
<font>-Tags optimieren entfernt HTML-Tags und wandelt den Standardtextkörper in HTML-Text der Größe 2 um.
Ungültig verschachtelte Tags korrigieren entfernt die Font-Tags, die Word außerhalb der Absatz- und Überschriften-
Tags (Blockebene) einfügt.
Quellcodeformatierung anwenden wendet die Formatierungsoptionen für den HTML-Quellcode, die Sie in den
Voreinstellungen für das HTML-Format und in der Datei SourceFormat.txt angeben, auf das Dokument an.
Protokoll nach Abschluss zeigen zeigt abschließend ein Meldungsfeld an, in dem die Änderungen aufgeführt werden,
die bei der Optimierung am Dokument vorgenommen wurden.
5 Klicken Sie auf „OK“ oder öffnen Sie zuerst die Registerkarte „Detailliert“, wenn die Optionen „Alle Word-
spezifischen Markierungen entfernen“ und „CSS optimieren“ weiter angepasst werden sollen, und klicken Sie
danach auf „OK“.
More Help topics
“Code optimieren” on page 350
“Microsoft Office-Dokumente importieren (nur Windows)” on page 249
Verwalten von Dateien und Ordnern
Dateien und Ordner
Über das Bedienfeld „Dateien“ von Dreamweaver können Sie Ihre Dateien verwalten und zwischen dem Client-
Rechner und einem Remote-Server übertragen. Parallele Datei- und Ordnerstrukturen in beiden Sites werden beim
Übertragen von Dateien zwischen lokalen und Remote-Sites beibehalten. Wenn Sie Dateien von einer Site zu einer
anderen übertragen, erstellt Dreamweaver die entsprechenden Ordner, sofern sie noch nicht vorhanden sind. Darüber
hinaus können die Dateien zwischen lokaler und Remote-Site synchronisiert werden; Dreamweaver kopiert
gegebenenfalls Dateien zwischen den Sites und löscht nicht mehr benötigte Dateien.
81
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Bedienfeld „Dateien“ verwenden
Im Bedienfeld „Dateien“ können Sie Dateien und Ordner anzeigen – auch wenn diese nicht mit einer Dreamweaver-
Site verknüpft sind – und Standardaufgaben der Dateiverwaltung wie beispielsweise das Öffnen und Verschieben von
Dateien durchführen.
Note: In früheren Versionen von Dreamweaver wurde das Bedienfeld „Dateien“ „Site“ genannt.
Sie können das Bedienfeld „Dateien“ nach Bedarf verschieben und Voreinstellungen für dieses Bedienfeld festlegen.
Mit diesem Bedienfeld können Sie folgende Aufgaben durchführen:
• Sites, einen Server und lokale Laufwerke aufrufen
• Dateien und Ordner anzeigen
• Dateien und Ordner im Bedienfeld „Dateien“ verwalten
Wählen Sie bei Dreamweaver-Sites die folgenden Optionen aus, um Dateien anzuzeigen oder zu übertragen:
Optionen im erweiterten Bedienfeld „Dateien“
A: Site-Popupmenü B: Verbinden/Trennen C: Aktualisieren D: FTP-Protokoll der Site anzeigen E: Ansicht der Site-Dateien F: Testserver
G: Repository-Ansicht H: Abrufen I: Bereitstellen J: Datei(en) auschecken K: Datei(en) einchecken L: Synchronisieren
M: Erweitern/Reduzieren
Note: Die Ansicht „Site-Dateien“, die Ansicht „Testserver“ und die Schaltflächen für „Synchronisieren“ werden nur im
erweiterten Bedienfeld „Dateien“ angezeigt.
Site-Popupmenü Ermöglicht die Auswahl einer Dreamweaver-Site und zeigt die Dateien auf dieser Site an. Das Site-
Menü ermöglicht auch den Zugriff auf alle Dateien auf Ihrer lokalen Festplatte – ähnlich wie der Windows Explorer
(Windows) bzw. der Finder (Macintosh).
Verbinden/Trennen (FTP, RDS und WebDAV-Protokoll) Stellt eine Verbindung mit der Remote-Site her oder trennt
die Verbindung. Standardmäßig trennt Dreamweaver die Verbindung zur Remote-Site, wenn nach 30 Minuten keine
Bewegungen festgestellt wurden (nur bei FTP). Wenn Sie das Zeitlimit ändern möchten, wählen Sie „Bearbeiten“ >
„Voreinstellungen“ (Windows) oder „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und anschließend in der
Kategorieliste links die Option „Site“.
Aktualisieren Aktualisiert die Verzeichnislisten der lokalen und der Remote-Site. Mit dieser Schaltfläche können Sie
die Verzeichnislisten manuell aktualisieren, wenn Sie im Dialogfeld „Site-Definition“ die Option „Liste mit lokalen
Dateien automatisch aktualisieren“ oder „Liste mit Remote-Dateien automatisch aktualisieren“ deaktiviert haben.
Ansicht der Site-Dateien Zeigt die Dateistruktur der Remote-Site und der lokalen Site in den zwei Fensterbereichen
des Bedienfelds „Dateien“ an. (Mit einer Voreinstellung können Sie festlegen, welche Site im linken und welche Site
im rechten Fensterbereich angezeigt wird.) Die Ansicht der Site-Dateien ist die Standardansicht für das Bedienfeld
„Dateien“.
Testserver-Ansicht Zeigt die Verzeichnisstruktur des Testservers und der lokalen Site.
Repository-Ansicht Zeigt das Subversion-Repository (SVN) an.
Abrufen Kopiert die ausgewählten Dateien von der Remote-Site in Ihre lokale Site (wobei eventuell vorhandene lokale
Versionen der Dateien überschrieben werden). Wenn Sie das Kontrollkästchen „Ein- und Auschecken von Dateien
aktivieren“ markiert haben, sind die lokalen Kopien schreibgeschützt und die Dateien können von anderen
Teammitgliedern auf der Remote-Site ausgecheckt werden. Ist das Kontrollkästchen „Ein- und Auschecken von
Dateien aktivieren“ nicht markiert, werden die Dateien mit Lese- und Schreibberechtigung versehen.
82
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Note: Dreamweaver kopiert die Dateien, die Sie im aktiven Fensterbereich des Bedienfelds „Dateien“ auswählen. Wenn
der Fensterbereich der Remote-Site aktiviert ist, werden die ausgewählten Remote- oder Testserver-Dateien in die lokale
Site kopiert. Ist dagegen der lokale Bereich aktiviert, kopiert Dreamweaver die in der Remote-Site oder auf dem Testserver
gespeicherten Versionen der ausgewählten lokalen Dateien in die lokale Site.
Bereitstellen Kopiert die ausgewählten Dateien von der lokalen Site in die Remote-Site.
Note: Dreamweaver kopiert die Dateien, die Sie im aktiven Fensterbereich des Bedienfelds „Dateien“ auswählen. Wenn
der lokale Fensterbereich aktiviert ist, werden die ausgewählten lokalen Dateien in die Remote-Site oder auf den
Testserver kopiert. Ist dagegen der Bereich der Remote-Site aktiviert, kopiert Dreamweaver die lokalen Versionen der
ausgewählten Remote-Serverdateien in die Remote-Site.
Wenn Sie eine noch nicht auf der Remote-Site vorhandene Datei bereitstellen und die Option „Ein- und Auschecken
von Dateien aktivieren“ markiert ist, fügt die Datei der Remote-Site als „ausgecheckt“ hinzu. Klicken Sie auf die
Schaltfläche „Dateien einchecken“, wenn die Datei ohne den Status „ausgecheckt“ hinzugefügt werden soll.
Datei(en) auschecken Überträgt eine Kopie der Datei vom Remote-Server an die lokale Site (wobei gegebenenfalls die
vorhandene lokale Kopie der Datei überschrieben wird) und markiert die Datei auf dem Server als ausgecheckt. Diese
Option ist nicht verfügbar, wenn die Option „Ein- und Auschecken von Dateien aktivieren“ im Dialogfeld „Site-
Definition“ für die aktuelle Site deaktiviert ist.
Datei(en) einchecken Überträgt eine Kopie der lokalen Datei an den Remote-Server und ermöglicht es anderen
Mitarbeitern, die Datei zu bearbeiten. Die lokale Datei wird dadurch schreibgeschützt. Diese Option ist nicht
verfügbar, wenn die Option „Ein- und Auschecken von Dateien aktivieren“ im Dialogfeld „Site-Definition“ für die
aktuelle Site deaktiviert ist.
Synchronisieren Synchronisiert Dateien zwischen lokalen und Remote-Ordnern.
Schaltfläche „Erweitern/Reduzieren“ Blendet das Bedienfeld „Dateien“ ein bzw. aus, sodass ein bzw. zwei Teilfenster
angezeigt werden.
More Help topics
“Überblick über das Bedienfeld „Dateien“” on page 17
“Arbeiten mit Dreamweaver-Sites” on page 40
“Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken” on page 96
“Dateien auf einem Remote-Server bereitstellen” on page 92
“Dateien von einem Remote-Server abrufen” on page 91
“Dateien synchronisieren” on page 104
Dateien und Ordner anzeigen
Dateien und Ordner können im Bedienfeld „Dateien“ angezeigt werden, unabhängig davon, ob sie mit einer
Dreamweaver-Site verknüpft sind oder nicht. Wenn Sites, Dateien oder Ordner im Bedienfeld „Dateien“ angezeigt
werden, können Sie die Größe des Anzeigebereichs ändern. Bei Dreamweaver-Sites können Sie das Bedienfeld
„Dateien“ zudem erweitern bzw. reduzieren.
Bei Dreamweaver-Sites können Sie das Bedienfeld „Dateien“ auch anpassen, indem Sie die Ansicht ändern (für die
lokale Site oder Remote-Site), die standardmäßig im reduzierten Bedienfeld angezeigt wird. Sie können auch die
Inhaltsanzeigen im erweiterten Bedienfeld „Dateien“ mit der Option „Immer anzeigen“ umschalten.
83
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Bedienfeld „Dateien“ öffnen oder schließen
❖ Wählen Sie „Fenster“ > „Dateien“.
Das Bedienfeld „Dateien“ erweitern bzw. reduzieren (nur Dreamweaver-Sites)
❖ Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ („Fenster“ > „Dateien“) auf die Schaltfläche zum
Erweitern/Reduzieren .
Note: Wenn Sie auf die Schaltfläche zum Erweitern/Reduzieren klicken, um das Bedienfeld zu erweitern, während es
angedockt ist, wird das Bedienfeld maximiert, sodass Sie nicht im Dokumentfenster arbeiten können. Sie können zum
Dokumentfenster zurückkehren, indem Sie erneut auf die Schaltfläche zum Erweitern/Reduzieren klicken, um das
Bedienfeld zu reduzieren. Wenn Sie auf die Schaltfläche zum Erweitern/Reduzieren klicken, um das Bedienfeld zu
erweitern, während es nicht angedockt ist, können Sie weiterhin im Dokumentfenster arbeiten. Sie müssen das Bedienfeld
reduzieren, bevor Sie es wieder andocken können.
Wenn das Bedienfeld „Dateien“ reduziert wurde, wird der Inhalt der lokalen Site, der Remote-Site oder des Testservers
in Form einer Dateiliste angezeigt. Wenn das Bedienfeld „Dateien“ erweitert wurde, werden die lokale Site und
entweder die Remote-Site oder der Testserver angezeigt.
Die Größe des Anzeigebereichs im erweiterten Bedienfeld „Dateien“ ändern
❖ Führen Sie im erweiterten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) einen der folgenden Schritte aus:
• Ziehen Sie den Balken, der die beiden Ansichtsbereiche trennt, nach links oder rechts, um den linken bzw. rechten
Fensterbereich zu verkleinern oder zu vergrößern.
• Navigieren Sie mithilfe der Bildlaufleisten am unteren Rand des Bedienfelds „Dateien“ durch den Inhalt der
Ansicht.
Die Site-Ansicht im Bedienfeld „Dateien“ ändern (nur Dreamweaver-Sites)
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie im minimierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) im Popupmenü „Site-Ansicht“ die
Option „Lokale Ansicht“, „Remote-Ansicht“, „Testserver“ oder „Repository-Ansicht“ aus.
Note: Als Standardeinstellung wird im Popupmenü „Site-Ansicht“ die lokale Ansicht angezeigt.
• Klicken Sie im maximierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) auf die Schaltfläche „Site-Dateien“ (für
die Remote-Site), die Schaltfläche „Testserver“ oder die Schaltfläche „Repository-Dateien“.
A: Site-Dateien B: Testserver C: Repository-Dateien
Note: Eine Remote-Site, einen Testserver oder ein SVN-Repository können Sie erst anzeigen, nachdem Sie sie eingerichtet
haben.
ABC
84
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Dateien außerhalb einer Dreamweaver-Site anzeigen
❖ Über das Site-Popupmenü können Sie durch die Ordnerstruktur Ihres Computers navigieren, wie Sie es vom
Windows Explorer (Windows) bzw. vom Finder (Macintosh) gewohnt sind.
Mit Dateien im Bedienfeld „Dateien“ arbeiten
Sie können Dateien öffnen oder umbenennen; Dateien hinzufügen, verschieben oder löschen; oder das Bedienfeld
„Dateien“ nach vorgenommenen Änderungen aktualisieren.
Bei Dreamweaver-Sites können Sie außerdem feststellen, welche Dateien (entweder in der lokalen Site oder in der
Remote-Site) aktualisiert wurden, seit sie zum letzten Mal übertragen wurden.
More Help topics
“Dateien synchronisieren” on page 104
“Sites, einen Server und lokale Laufwerke aufrufen” on page 87
Dateien öffnen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in dem Popupmenü, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site, einen Server oder ein Laufwerk aus.
2 Wechseln Sie zu der gewünschten Datei, die Sie öffnen möchten.
3 Führen Sie einen der folgenden Schritte aus:
• Doppelklicken Sie auf das Symbol der jeweiligen Datei.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Symbol der
Datei und wählen Sie dann „Öffnen“.
Dreamweaver öffnet die Datei im Dokumentfenster.
Dateien und Ordner erstellen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Datei bzw. einen Ordner aus.
Dreamweaver erstellt die neue Datei bzw. den neuen Ordner im derzeit ausgewählten Ordner oder in dem Ordner, in
dem sich die ausgewählte Datei befindet.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Neue Datei“ bzw. „Neuer Ordner“.
3 Geben Sie einen Namen für die neue Datei oder den neuen Ordner ein.
4 Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Dateien und Ordner löschen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die zu löschende Datei bzw. den zu löschenden
Ordner aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Bearbeiten“ > „Löschen“ aus.
Dateien und Ordner umbenennen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die umzubenennende Datei bzw. den
umzubenennenden Ordner aus.
85
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus, um den Namen der Datei bzw. des Ordners zu aktivieren:
• Klicken Sie zweimal mit einer kleinen Pause dazwischen auf den Dateinamen.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Symbol der
Datei und wählen Sie dann „Bearbeiten“ > „Umbenennen“ aus.
3 Geben Sie den neuen Namen über den alten Namen ein.
4 Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Dateien und Ordner verschieben
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die zu verschiebende Datei bzw. den zu
verschiebenden Ordner aus.
2 Führen Sie einen der folgenden Schritte aus:
• Kopieren Sie die Datei bzw. den Ordner und fügen Sie sie bzw. ihn am neuen Speicherort ein.
• Ziehen Sie die Datei bzw. den Ordner an den neuen Speicherort.
3 Aktualisieren Sie das Bedienfeld „Dateien“, um die Datei bzw. den Ordner am neuen Speicherort zu sehen.
Bedienfeld „Dateien“ aktualisieren
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie mit der rechten Maustaste (Windows), bzw. bei gedrückter Ctrl-Taste (Macintosh) auf eine Datei oder
einen Ordner und wählen Sie „Aktualisieren“.
• Nur bei Dreamweaver-Sites: Klicken Sie im Bedienfeld „Dateien“ auf die Schaltfläche „Aktualisieren“ (dadurch
werden beide Fensterbereiche aktualisiert).
Note: Dreamweaver aktualisiert das Bedienfeld „Dateien“, wenn Sie Änderungen in einer anderen Anwendung
vornehmen und dann zu Dreamweaver zurückkehren.
Nach Dateien in der Dreamweaver-Site suchen
In Dreamweaver können Sie ausgewählte, geöffnete, ausgecheckte und kürzlich geänderte Dateien problemlos in Ihrer
Site suchen. Außerdem können Sie in Ihrer lokalen Site bzw. Remote-Site nach neueren Dateien suchen.
More Help topics
“Berichte zum Testen von Sites verwenden” on page 117
Geöffnete Dateien in der Site suchen
1 Öffnen Sie die Datei im Dokumentfenster.
2 Wählen Sie „Site“ > „In der Site suchen“.
Die Datei wird in Dreamweaver im Bedienfeld „Dateien“ ausgewählt.
Note: Wenn die geöffnete Datei im Dokumentfenster nicht Bestandteil der aktuellen Site im Bedienfeld „Dateien“ ist,
versucht Dreamweaver festzustellen, zu welchen Dreamweaver-Sites die Datei gehört. Wenn die aktuelle Datei nur zu
einer lokalen Site gehört, wird diese Site in Dreamweaver im Bedienfeld „Dateien“ geöffnet und die Datei wird
hervorgehoben.
86
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Ausgecheckte Dateien in einer Dreamweaver-Site suchen und auswählen
❖ Klicken Sie im reduzierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in der oberen rechten Ecke auf das Menü
„Optionen“ und wählen Sie dann „Bearbeiten“ > „Ausgecheckte Dateien auswählen“.
Dreamweaver wählt die Dateien im Bedienfeld „Dateien“ aus.
Ausgewählte Dateien in der lokalen Site oder Remote-Site suchen
1 Wählen Sie in der lokalen Ansicht oder in der Remote-Ansicht des Bedienfelds „Dateien“ („Fenster“ > „Dateien“)
die Datei aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Auf lokaler Site lokalisieren“ oder „Auf Remote-Site lokalisieren“ (je nachdem, wo die Datei ausgewählt wurde).
Die Datei wird in Dreamweaver im Bedienfeld „Dateien“ ausgewählt.
Dateien finden und auswählen, deren lokale Version neuer ist als die Version in der Remote-
Site
❖ Klicken Sie im reduzierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in der oberen rechten Ecke auf das Menü
„Optionen“ und wählen Sie dann „Bearbeiten“ > „Neuere auswählen (lokal)“.
Dreamweaver wählt die Dateien im Bedienfeld „Dateien“ aus.
Dateien finden und auswählen, deren Version in der Remote-Site neuer ist als die lokale
Version
❖ Klicken Sie im reduzierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in der oberen rechten Ecke auf das Menü
„Optionen“ und wählen Sie dann „Bearbeiten“ > „Neuere auswählen (entfernt)“.
Dreamweaver wählt die Dateien im Bedienfeld „Dateien“ aus.
Kürzlich geänderte Dateien in Ihrer Site suchen
1 Klicken Sie im reduzierten Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in der oberen rechten Ecke auf das Menü
„Optionen“ und wählen Sie dann „Bearbeiten“ > „Zuletzt bearbeitete auswählen“.
2 Führen Sie einen der folgenden Schritte aus, um Suchdaten für die Berichterstellung anzugeben:
• Zur Erstellung eines Berichts über alle in den vergangenen Tagen geänderten Dateien wählen Sie „Dateien, die
erstellt oder geändert wurden, in den letzten“ und geben im Feld eine Zahl ein.
• Zur Erstellung eines Berichts über alle innerhalb eines bestimmten Zeitraums geänderten Dateien klicken Sie auf den
Optionsschalter „Dateien, die erstellt oder geändert wurden, zwischen“ und geben dann einen Datumsbereich ein.
3 Optional: Geben Sie im Feld „Geändert von“ einen Benutzernamen ein, um die Suche auf Dateien zu beschränken,
die von einem bestimmten Benutzer im angegebenen Datumsbereich geändert wurden.
Note: Diese Option ist nur für Berichte auf Contribute-Sites verfügbar.
4 Wählen Sie bei Bedarf einen Optionsschalter, um anzugeben, wo die im Bericht enthaltenen Dateien angezeigt
werden sollen:
Lokales System, wenn die Site statische Seiten enthält.
Testserver wenn die Site dynamische Seiten enthält.
87
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Note: Bei dieser Option wird vorausgesetzt, dass im Dialogfeld „Site-Definition“ ein Testserver definiert wurde (XREF).
Wenn Sie ein URL-Präfix für einen Testserver eingeben, der nicht definiert wurde, oder wenn Sie einen Bericht für mehr
als eine Site ausführen, ist diese Option nicht verfügbar.
Anderes Speicherverzeichnis, wenn Sie im Textfeld einen Pfad eingeben möchten.
5 Klicken Sie auf „OK“, um Ihre Einstellungen zu speichern.
Dreamweaver markiert die im festgelegten Zeitraum geänderten Dateien im Bedienfeld „Dateien“.
Nicht verwendete Dateien identifizieren und löschen
Sie können Dateien, die in Ihrer Site nicht mehr benötigt werden, identifizieren und löschen.
1 Wählen Sie „Site“ > „Hyperlinks auf der ganzen Site prüfen“.
Dreamweaver überprüft alle Hyperlinks in der Site und listet fehlerhafte Hyperlinks im Bedienfeld „Ergebnisse“ auf.
2 Wählen Sie im Popupmenü des Bedienfelds „Hyperlink-Prüfer“ die Option „Verwaiste Dateien“ aus.
Dreamweaver zeigt alle Dateien an, zu denen es keine eingehenden Hyperlinks gibt, d. h., dass keine Dateien in Ihrer
Seite mit diesen Dateien verknüpft sind.
3 Wählen Sie die zu löschenden Dateien aus und klicken Sie auf „Löschen“.
Important: Auch wenn es in Ihrer Site keine Dateien gibt, die mit diesen Dateien verknüpft sind, können die aufgeführten
Dateien trotzdem mit anderen Dateien verknüpft sein. Gehen Sie daher beim Löschen der Dateien vorsichtig vor.
More Help topics
“Site-Cloaking aktivieren und deaktivieren” on page 111
Sites, einen Server und lokale Laufwerke aufrufen
Sie können Dateien und Ordner auf Ihren Dreamweaver-Sites sowie auf anderen Sites außerhalb Dreamweaver
aufrufen, ändern und speichern. Zusätzlich zu Dreamweaver-Sites können Sie einen Server, ein lokales Laufwerk oder
Ihren Desktop aufrufen.
Bevor Sie einen Remote-Server aufrufen können, müssen Sie Dreamweaver für die Zusammenarbeit mit dem Server
einrichten.
Note: Am einfachsten können Sie Ihre Dateien verwalten, indem Sie eine Dreamweaver-Site erstellen.
Vorhandene Dreamweaver-Site öffnen
❖ Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in dem Popupmenü, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site aus.
88
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Ordner auf einem Remote-FTP- oder Remote-RDS-Server öffnen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in dem Popupmenü, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, einen Server aus.
Note: Für alle Server, die Sie für den Betrieb mit Dreamweaver konfiguriert haben, werden die Servernamen angezeigt.
2 Wechseln Sie wie gewohnt zu der gewünschten Datei und bearbeiten Sie diese.
Auf lokale Laufwerke oder auf Ihren Desktop zugreifen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in dem Menü, in dem die aktuelle Site, der aktuelle
Server bzw. das aktuelle Laufwerk angezeigt werden, die Option „Desktop“, „Lokaler Datenträger“ oder „CD-
Laufwerk“.
2 Wechseln Sie zur gewünschten Datei. Danach stehen folgende Möglichkeiten zur Verfügung:
• Dateien in Dreamweaver oder in anderen Anwendungen öffnen
• Dateien umbenennen
• Dateien kopieren
• Dateien löschen
• Dateien ziehen
Wenn Sie eine Datei von einer Dreamweaver-Site in eine andere oder in einen Ordner ziehen, der nicht zu einer
Dreamweaver-Site gehört, wird die gezogene Datei von Dreamweaver an den Speicherort, an dem Sie die Datei
ablegen, kopiert. Wenn Sie eine Datei hingegen innerhalb derselben Dreamweaver-Site an einen anderen Ort ziehen,
wird die Datei von Dreamweaver an den neuen Speicherort verschoben. Wenn Sie eine Datei, die nicht zu einer
Dreamweaver-Site gehört, in einen anderen Ordner ziehen, der ebenfalls nicht zu einer Dreamweaver-Site gehört,
wird die Datei von Dreamweaver an den neuen Speicherort verschoben.
Note: Um eine Datei zu verschieben, die von Dreamweaver standardmäßig kopiert wird, halten Sie beim Ziehen die
Umschalttaste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt. Um eine Datei zu kopieren, die von Dreamweaver
standardmäßig verschoben wird, halten Sie beim Ziehen die Strg-Taste (Windows) bzw. die Wahltaste (Macintosh)
gedrückt.
Angezeigte Datei- und Ordnerdetails im erweiterten Bedienfeld „Dateien“
anpassen
Wenn eine Dreamweaver-Site im erweiterten Bedienfeld „Dateien“ angezeigt wird, werden Informationen über die
Dateien und Ordner im Spaltenformat angezeigt. Zu diesen Informationen gehören Dateityp und Änderungsdatum
der jeweiligen Datei.
89
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Zum Anpassen von Spalten gibt es die folgenden Möglichkeiten (manche Vorgänge sind nur auf hinzugefügte Spalten
und nicht auf Standardspalten anwendbar):
• Spalten neu ordnen oder neu ausrichten
• Neue Spalten hinzufügen (maximal 10 Spalten sind möglich)
• Spalten ausblenden (außer Spalte „Dateiname“)
• Spalten für die gemeinsame Nutzung durch alle mit der Site verbundenen Benutzer zugänglich machen
• Spalten löschen (nur benutzerdefinierte Spalten)
• Spalten umbenennen (nur benutzerdefinierte Spalten)
• Mit einer Design Note verknüpfen (nur benutzerdefinierte Spalten)
Spaltenreihenfolge ändern
❖ Wählen Sie einen Spaltennamen aus und klicken Sie dann auf den Aufwärts- oder Abwärtspfeil, um die Position
der ausgewählten Spalte zu ändern.
Note: Sie können die Reihenfolge aller Spalten ändern, mit Ausnahme der Spalte „Name“. Diese Spalte befindet sich stets
am Anfang.
Spalten hinzufügen, löschen oder ändern
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie dann auf „Bearbeiten“.
3 Erweitern Sie „Erweiterte Einstellungen“ und wählen Sie die Kategorie „Dateiansichtsspalten“ aus.
4 Wählen Sie eine Spalte aus und klicken Sie auf das Pluszeichen (+), um eine Spalte hinzuzufügen, bzw. auf das
Minuszeichen (–), um eine Spalte zu löschen.
Note: Die Spalte wird sofort und ohne Rückfrage gelöscht. Vergewissern Sie sich deshalb vor dem Klicken auf das
Minuszeichen (–), dass Sie die Spalte wirklich löschen möchten.
5 Geben Sie im Feld „Spaltenname“ einen Namen für die Spalte ein.
6 Wählen Sie im Menü „Mit Design Notes verknüpfen“ einen Wert aus oder geben Sie einen Wert ein.
Note: Sie müssen eine neue Spalte mit einer Design Note verknüpfen, damit Daten vorhanden sind, die im Bedienfeld
„Dateien“ angezeigt werden können.
7 Wählen Sie eine Ausrichtungsoption, um festzulegen, wie Text innerhalb der Spalte ausgerichtet wird.
8 Aktivieren oder deaktivieren Sie die Option „Anzeigen“, um die Spalte ein- oder auszublenden.
9 Aktivieren Sie die Option „An alle Benutzer dieser Site freigeben“, damit alle Benutzer, die mit der Remote-Site
verbunden sind, die Spalte verwenden können.
Spalteneinträge im Bedienfeld „Dateien“ nach den gewünschten Details sortieren
❖ Klicken Sie auf die Überschrift der Spalte, deren Einträge sortiert werden sollen.
Klicken Sie erneut auf die Überschrift, um die Reihenfolge (aufsteigend oder absteigend) umzukehren, in der
Dreamweaver die Spalteneinträge sortiert.
90
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Dateien vom Server abrufen/auf dem Server
bereitstellen
Dateiübertragung und abhängige Dateien
Wenn Sie in einem Team arbeiten, können Sie mithilfe des Eincheck-/Auschecksystems Dateien zwischen lokalen
Sites und Remote-Sites übertragen. Wenn Sie allein an der Remote-Site arbeiten, können Sie mit den Befehlen
„Bereitstellen“ und „Abrufen“ Dateien übertragen, ohne sie ein- oder auszuchecken.
Wenn Sie ein Dokument mit dem Bedienfeld „Dateien“ zwischen einem lokalen und einem Remote-Ordner
übertragen, haben Sie die Möglichkeit, die unabhängigen Dateien des Dokuments zu übertragen. Abhängige Dateien
sind Bilder, externe Stylesheets und andere Dateien, auf die in Ihrem Dokument verwiesen wird und die ein Browser
beim Laden des Dokuments ebenfalls lädt.
Note: Wenn Sie eine neue Datei auschecken, sollten Sie auch die abhängigen Dateien herunterladen. Wenn sich die
neuesten Versionen der abhängigen Dateien bereits auf der lokalen Festplatte befinden, müssen sie jedoch nicht erneut
heruntergeladen werden. Auch beim Upload und Einchecken von Dateien ist es nicht notwendig, die Dateien zu senden,
wenn auf der Remote-Site bereits aktuelle Dateien vorhanden sind.
Bibliothekselemente werden als abhängige Dateien behandelt.
Einige Server melden beim Bereitstellen von Bibliothekselementen Fehler. Sie können diese Dateien jedoch
ausschließen, um ihre Übertragung zu verhindern.
More Help topics
“Dateien ein- und auschecken” on page 95
“Site-Cloaking aktivieren und deaktivieren” on page 111
Dateiübertragung im Hintergrund
Sie können sich beim Bereitstellen oder Abrufen von Dateien anderen Aktivitäten zuwenden, die vom Server
unabhängig sind. Die Dateiübertragung im Hintergrund ist bei allen von Dreamweaver unterstützten
Übertragungsprotokollen möglich: FTP, SFTP, LAN, WebDAV, Subversion und RDS.
Zu den serverunabhängigen Aktivitäten gehören das Bedienen der Tastatur, Bearbeiten externer Stylesheets, Erzeugen
von Berichten für die ganze Site und Erstellen neuer Sites.
Dreamweaver kann die folgenden serverbezogenen Aktionen nicht ausführen, während Dateien übertragen werden:
• Dateien bereitstellen, abrufen, ein- und auschecken
• Auschecken rückgängig machen
• Datenbankverbindung erstellen
• Dynamische Daten binden
• Seitenvorschau in der Live-Ansicht
• Webdienst einfügen
• Remote-Dateien oder -Ordner löschen
• Vorschau in einem Browser auf einem Testserver anzeigen
• Dateien auf einem Remote-Server speichern
91
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
• Bilder von einem Remote-Server einfügen
• Dateien von einem Remote-Server öffnen
• Dateien beim Speichern automatisch bereitstellen
• Dateien zur Remote-Site ziehen
• Dateien auf der Remote-Site ausschneiden, kopieren oder einfügen
• Remote-Ansicht aktualisieren
Das Dialogfeld „Dateivorgang im Hintergrund“ ist bei Dateiübertragungen standardmäßig geöffnet. Sie können das
Dialogfeld minimieren, indem Sie in der rechten oberen Ecke auf die Schaltfläche „Minimieren“ klicken. Wenn Sie das
Dialogfeld während einer Dateiübertragung schließen, wird die Übertragung abgebrochen.
Dateien von einem Remote-Server abrufen
Mit dem Befehl „Abrufen“ werden Dateien von der Remote-Site in Ihre lokale Site kopiert. Sie können Dateien im
Bedienfeld „Dateien“ oder im Dokumentfenster abrufen.
Dreamweaver erstellt ein Protokoll der Dateivorgänge, die während der Übertragung stattgefunden haben und die Sie
anzeigen und speichern können.
Note: Die Dateiübertragung im Hintergrund kann nicht abgeschaltet werden. Wenn das Übertragungsprotokoll im
Dialogfeld „Dateivorgang im Hintergrund“ geöffnet ist, können Sie es schließen, um so die Übertragungsleistung zu
verbessern.
Dreamweaver zeichnet auch alle FTP-Dateiübertragungen auf. Tritt bei einer Dateiübertragung per FTP ein Fehler
auf, können Sie mit dem Site-FTP-Protokoll die Problemursache ermitteln.
More Help topics
“Dateien ein- und auschecken” on page 95
“Dateien synchronisieren” on page 104
Dateien über das Bedienfeld „Dateien“ von einem Remote-Server abrufen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die herunterzuladenden Dateien aus.
Normalerweise wählen Sie diese Dateien in der Remote-Ansicht aus, Sie können sie aber auch in der lokalen Ansicht
auswählen. Wenn die Remote-Ansicht aktiviert ist, kopiert Dreamweaver die ausgewählten Remote-Dateien in die
lokale Site. Ist dagegen die lokale Ansicht aktiviert, kopiert Dreamweaver die Remote-Versionen der ausgewählten
lokalen Dateien in die lokale Site.
Note: Verwenden Sie den Befehl „Synchronisieren“, um nur die Dateien abzurufen, deren Remote-Version aktueller als
die lokale Version ist.
2 Führen Sie einen der folgenden Schritte aus, um die Dateien abzurufen:
• Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ auf die Schaltfläche „Abrufen“.
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf die Datei und wählen Sie dann im Kontextmenü die Option „Abrufen“.
3 Klicken Sie im Dialogfeld „Abhängige Dateien“ auf „Ja“, um abhängige Dateien herunterzuladen. Wenn Sie bereits
Kopien der abhängigen Dateien besitzen, klicken Sie auf „Nein“. Standard ist, die abhängigen Dateien nicht
herunterzuladen. Sie können diese Option unter „Bearbeiten“ > „Voreinstellungen“ > „Site“ festlegen.
92
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Dreamweaver lädt die ausgewählten Dateien wie folgt herunter:
• Wenn Sie das Eincheck-/Auschecksystem verwenden, erhalten Sie beim Abrufen eine schreibgeschützte lokale
Kopie der Datei. Die Datei verbleibt in der Remote-Site bzw. auf dem Testserver und kann von anderen
Teammitgliedern ausgecheckt werden.
• Wenn Sie das Ein- und Auschecksystem nicht verwenden, erhalten Sie beim Abrufen der Datei eine Kopie mit Lese-
und Schreibberechtigung.
Note: Wenn Sie in einem Team arbeiten, d. h., wenn andere Mitarbeiter an denselben Dateien arbeiten, sollten Sie
das Kontrollkästchen „Ein- und Auschecken von Dateien aktivieren“ nicht deaktivieren. Wenn andere Personen das
Eincheck-/Auschecksystem für die Site verwenden, sollten auch Sie dieses System nutzen.
Sie können die Dateiübertragung jederzeit beenden, indem Sie im Dialogfeld „Dateivorgang im Hintergrund“ auf
die Schaltfläche „Abbrechen“ klicken.
Dateien mithilfe des Dokumentfensters von einem Remote-Server abrufen
1 Das Dokument muss im Dokumentfenster aktiviert sein.
2 Führen Sie einen der folgenden Schritte aus, um die Dateien abzurufen:
• Wählen Sie „Site“ > „Abrufen“.
• Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol für die Dateiverwaltung und wählen Sie dann
im Menü die Option „Abrufen“.
Note: Wenn die aktuelle Datei kein Bestandteil der aktuellen Site im Bedienfeld „Dateien“ ist, versucht Dreamweaver
festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehört. Wenn die aktuelle Datei nur zu einer lokalen Site
gehört, öffnet Dreamweaver diese Site und ruft die Datei dann ab.
FTP-Protokoll anzeigen
1 Klicken Sie auf das Menü „Optionen“ in der oberen rechten Ecke des Bedienfelds „Dateien“.
2 Wählen Sie „Ansicht“ > „Site-FTP-Protokoll“ aus.
Note: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll
anzuzeigen.
Dateien auf einem Remote-Server bereitstellen
Mit dem Befehl „Bereitstellen“ werden Dateien von der lokalen Site in die Remote-Site kopiert, wobei der
Auscheckstatus der Datei normalerweise nicht geändert wird.
In den beiden folgenden Situationen kann es sinnvoll sein, den Befehl „Bereitstellen“ anstelle von „Einchecken“ zu
verwenden:
• Wenn Sie nicht in einem Team arbeiten und das Eincheck-/Auschecksystem nicht verwenden.
• Wenn Sie die aktuelle Version der Datei auf dem Server bereitstellen, die Datei aber noch weiter bearbeiten
möchten.
Note: Wenn Sie eine Datei bereitstellen, die noch nicht in der Remote-Site vorhanden war, und das Eincheck-
/Auschecksystem aktiviert ist, wird die Datei in die Remote-Site kopiert und dann für Sie ausgecheckt, damit Sie die
Datei weiter bearbeiten können.
Sie können Dateien im Bedienfeld „Dateien“ oder im Dokumentfenster bereitstellen. Dreamweaver erstellt ein
Protokoll der Dateivorgänge, die während der Übertragung stattgefunden haben und die Sie anzeigen und
speichern können.
93
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Note: Die Dateiübertragung im Hintergrund kann nicht abgeschaltet werden. Wenn das Übertragungsprotokoll im
Dialogfeld „Dateivorgang im Hintergrund“ geöffnet ist, können Sie es schließen, um so die Übertragungsleistung zu
verbessern.
Dreamweaver zeichnet auch alle FTP-Dateiübertragungen auf. Tritt bei einer Dateiübertragung per FTP ein Fehler
auf, können Sie mit dem Site-FTP-Protokoll die Problemursache ermitteln.
Ein Tutorial zum Bereitstellen von Dateien auf einem Remote-Server finden Sie unter
www.adobe.com/go/vid0163_de.
Ein Tutorial zum Lösen von Problemen bei der Veröffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
More Help topics
“Dateien synchronisieren” on page 104
“Eincheck-/Auschecksystem” on page 95
Tutorial „Bereitstellen von Dateien“
Tutorial „Probleme bei der Veröffentlichung beheben“
Dateien über das Bedienfeld „Dateien“ auf einem Remote- oder Testserver bereitstellen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die hochzuladenden Dateien aus.
In der Regel wählen Sie diese Dateien in der lokalen Ansicht aus, Sie können die entsprechenden Dateien jedoch auch
in der Remote-Ansicht auswählen.
Note: Sie können nur die Dateien bereitstellen, deren lokale Version aktueller ist als die Remote-Version.
2 Führen Sie einen der folgenden Schritte aus, um die Datei auf dem Remote-Server bereitzustellen:
• Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ auf die Schaltfläche „Bereitstellen“.
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf die Datei und wählen Sie dann im Kontextmenü die Option „Bereitstellen“.
3 Wurde die Datei nicht gespeichert, wird (je nach Voreinstellungen in der Kategorie „Site“ des Dialogfelds
„Voreinstellungen“) ein Dialogfeld angezeigt, in dem Sie die Datei speichern können, bevor Sie sie auf dem
Remote-Server bereitstellen. Wenn ein Dialogfeld angezeigt wird, klicken Sie auf „Ja“, um die Datei zu speichern,
bzw. auf „Nein“, um die zuvor gespeicherte Version auf dem Remote-Server bereitzustellen.
Note: Wenn Sie die Datei nicht speichern, werden Änderungen, die Sie seit dem letzten Speichern vorgenommen haben,
nicht auf dem Remote-Server bereitgestellt. Die Datei bleibt jedoch weiterhin geöffnet, sodass Sie gegebenenfalls die
Änderungen speichern können, nachdem Sie die Datei auf dem Server bereitgestellt haben.
4 Klicken Sie auf „Ja“, um abhängige Dateien zusammen mit den ausgewählten Dateien hochzuladen, oder klicken
Sie auf „Nein“, wenn Sie keine abhängigen Dateien hochladen möchten. Standard ist, die abhängigen Dateien nicht
hochzuladen. Sie können diese Option unter „Bearbeiten“ > „Voreinstellungen“ > „Site“ festlegen.
Note: Wenn Sie eine neue Datei einchecken, sollten Sie auch die abhängigen Dateien an den Server übertragen. Wenn
sich die neuesten Versionen der abhängigen Dateien bereits auf dem Remote-Server befinden, müssen sie jedoch nicht
erneut hochgeladen werden.
Sie können die Dateiübertragung jederzeit beenden, indem Sie im Dialogfeld „Dateivorgang im Hintergrund“ auf die
Schaltfläche „Abbrechen“ klicken.
Dateien über das Dokumentfenster auf einem Remote-Server bereitstellen
1 Das Dokument muss im Dokumentfenster aktiviert sein.
94
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus, um die Datei bereitzustellen:
• Wählen Sie „Site“ > „Bereitstellen“.
• Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol für die Dateiverwaltung und wählen Sie dann
im Menü die Option „Bereitstellen“.
Note: Wenn die aktuelle Datei kein Bestandteil der aktuellen Site im Bedienfeld „Dateien“ ist, versucht Dreamweaver
festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehört. Wenn die aktuelle Datei nur zu einer lokalen Site
gehört, öffnet Dreamweaver diese Site und stellt die Datei dann bereit.
FTP-Protokoll anzeigen
1 Klicken Sie auf das Menü „Optionen“ in der oberen rechten Ecke des Bedienfelds „Dateien“.
2 Wählen Sie „Ansicht“ > „Site-FTP-Protokoll“ aus.
Note: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll
anzuzeigen.
Dateiübertragungen verwalten
Sie können den Status von Dateiübertragungen sowie eine Liste der übertragenen Dateien und das Ergebnis ihrer
Übertragung (Übertragung erfolgreich, übersprungen oder fehlgeschlagen) anzeigen. Außerdem können Sie ein
Protokoll der Dateivorgänge speichern.
Note: In Dreamweaver können Sie sich beim Übertragen von Dateien an oder von einem Server anderen Aktivitäten
zuwenden, die vom Server unabhängig sind.
Dateiübertragungen abbrechen
❖ Klicken Sie im Dialogfeld „Dateivorgang im Hintergrund“ auf die Schaltfläche „Abbrechen“. Wenn das Dialogfeld
nicht angezeigt wird, klicken Sie unten im Bedienfeld „Dateien“ auf die Schaltfläche „Dateivorgang“.
Dialogfeld „Dateivorgang im Hintergrund“ während der Übertragung anzeigen
❖ Klicken Sie unten im Bedienfeld „Dateien“ auf die Schaltfläche „Dateivorgang“ oder „Protokoll“.
Note: Die Schaltfläche „Protokoll“ lässt sich nicht ausblenden oder entfernen. Sie ist ein permanenter Bestandteil des
Bedienfelds.
Einzelheiten zum letzten Übertragungsvorgang anzeigen
1 Klicken Sie unten im Bedienfeld „Dateien“ auf die Schaltfläche „Protokoll“, um das Dialogfeld „Dateivorgang im
Hintergrund“ zu öffnen.
2 Klicken Sie auf den Erweiterungspfeil neben „Details“.
Protokoll der letzten Dateiübertragung speichern
1 Klicken Sie unten im Bedienfeld „Dateien“ auf die Schaltfläche „Protokoll“, um das Dialogfeld „Dateivorgang im
Hintergrund“ zu öffnen.
2 Klicken Sie auf die Schaltfläche „Protokoll speichern“ und speichern Sie die Informationen als Textdatei.
Sie können die Dateivorgänge prüfen, indem Sie die Protokolldatei in Dreamweaver oder in einem Texteditor öffnen.
95
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Dateien ein- und auschecken
Eincheck-/Auschecksystem
Wenn Sie in einer Teamumgebung arbeiten, können Sie Dateien bei lokalen Servern und Remote-Servern ein- und
auschecken. Wenn Sie allein an der Remote-Site arbeiten, können Sie mit den Befehlen „Bereitstellen“ und „Abrufen“
Dateien übertragen, ohne sie ein- bzw. auszuchecken.
Note: Bei einem Testserver können Sie zwar die Befehle „Bereitstellen“ und „Abrufen“ verwenden, nicht aber das Ein-
und Auschecken.
Wenn Sie eine Datei auschecken, teilen Sie den Mitarbeitern des Teams mit: „Ich arbeite gerade an dieser Datei – bitte
nehmt im Moment keine Änderungen daran vor!“ Wenn eine Datei ausgecheckt wurde, wird im Bedienfeld „Dateien“
der Name der Person angezeigt, die die Datei ausgecheckt hat. Neben dem Dateisymbol wird ein rotes Häkchen
angezeigt (wenn die Datei von einem Teammitglied ausgecheckt wurde) oder ein grünes Häkchen (wenn Sie selbst die
Datei ausgecheckt haben).
Wenn Sie eine Datei wieder einchecken, kann sie von anderen Mitarbeitern des Teams ausgecheckt und bearbeitet
werden. Wenn Sie eine bearbeitete Datei wieder einchecken, wird die lokale Version schreibgeschützt und im
Bedienfeld „Dateien“ wird neben der Datei ein Sperrsymbol angezeigt, damit Sie keine Änderungen an der Datei
vornehmen können.
Dreamweaver versieht die ausgecheckten Dateien auf dem Remote-Server nicht mit Schreibschutz. Wenn Sie Dateien
mit einer anderen Anwendung als Dreamweaver übertragen, könnten ausgecheckte Dateien daher überschrieben
werden. Um dies zu verhindern, wird in anderen Anwendungen als Dreamweaver die „LCK“-Datei neben der
ausgecheckten Datei in der Dateistruktur angezeigt.
More Help topics
“Dateien vom Server abrufen/auf dem Server bereitstellen” on page 90
Eincheck-/Auschecksystem einrichten
Bevor Sie das Eincheck-/Auschecksystem verwenden können, müssen Sie die lokale Site zunächst einem Remote-
Server zuordnen.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Legen Sie die gewünschten einfachen Optionen fest und klicken Sie dann auf „Erweitert“.
5 Wählen Sie „Datei-Auschecken aktivieren“ aus, wenn Sie mit mehreren Personen (oder allein, jedoch mit
mehreren Computern) arbeiten. Deaktivieren Sie diese Option, wenn für Ihre Website das Ein- und Auschecken
von Dateien nicht benötigt wird.
Mit dieser Option können Sie anderen Personen mitteilen, dass Sie eine Datei zur Bearbeitung ausgecheckt haben.
Weiterhin kann diese Option Sie darauf hinweisen, dass Sie eine neuere Version derselben Datei auf einem anderen
Computer gespeichert haben.
Wenn die Optionen für das Ein- und Auschecken nicht angezeigt werden, bedeutet das, dass Sie noch keinen Remote-
Server eingerichtet haben.
96
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
6 Wenn Sie das Kontrollkästchen „Dateien beim Öffnen auschecken“ aktivieren, werden Dateien automatisch
ausgecheckt, wenn Sie sie im Bedienfeld „Dateien“ durch Doppelklicken öffnen.
Wenn Sie mit „Datei“ > „Öffnen“ eine Datei öffnen, wird diese Datei nicht ausgecheckt, selbst wenn die oben genannte
Option aktiviert ist.
7 Legen Sie die restlichen Optionen fest:
Name auschecken Der Auscheck-Name wird im Bedienfeld „Dateien“ neben den ausgecheckten Dateien angezeigt.
So können Teammitglieder sich mit der richtigen Person in Verbindung setzen, wenn eine Datei, die sie benötigen,
ausgecheckt wurde.
Note: Wenn Sie allein an einer Website arbeiten, aber mehrere Computer verwenden, wählen Sie für jeden Computer
einen anderen Auscheck-Namen (beispielsweise AnnaR-HeimMac und AnnaR-BüroPC). So können Sie stets feststellen,
auf welchem Computer sich die neueste Version einer Datei befindet, falls Sie vergessen haben, die Datei wieder
einzuchecken.
E-Mail-Adresse Wenn Sie eine E-Mail-Adresse eingeben und dann eine Datei auschecken, wird Ihr Name im
Bedienfeld „Dateien“ neben dieser Datei als Hyperlink angezeigt (blau und unterstrichen). Klickt ein Teammitglied
auf diesen Hyperlink, öffnet das Standard-E-Mail-Programm des Teammitglieds automatisch eine neue Nachricht, die
die E-Mail-Adresse des Benutzers enthält. Die Betreffzeile dieser Nachricht entspricht dem Datei- und Site-Namen.
Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner
auschecken
Nachdem Sie das Eincheck-/Auschecksystem eingerichtet haben, können Sie Dateien mithilfe des Bedienfelds
„Dateien“ oder vom Dokumentfenster aus auf einem Remote-Server ein- und auschecken.
Dateien über das Bedienfeld „Dateien“ auschecken
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) die Dateien aus, die vom Remote-Server ausgecheckt
werden sollen.
Note: Sie können Dateien in der lokalen Ansicht oder in der Remote-Ansicht auswählen, nicht jedoch in der Testserver-
Ansicht.
Ein rotes Häkchen kennzeichnet eine Datei, die von einem anderen Teammitglied ausgecheckt wurde. Ein
Sperrsymbol bedeutet, dass die Datei schreibgeschützt (Windows) bzw. gesperrt ist (Macintosh).
2 Führen Sie einen der folgenden Schritte aus, um die Datei(en) auszuchecken:
• Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ auf die Schaltfläche „Auschecken“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
im Kontextmenü die Option „Auschecken“.
3 Klicken im Dialogfeld „Abhängige Dateien“ auf „Ja“, um abhängige Dateien zusammen mit den ausgewählten
Dateien herunterzuladen, oder klicken Sie auf „Nein“, wenn Sie keine abhängigen Dateien herunterladen möchten.
Standard ist, die abhängigen Dateien nicht herunterzuladen. Sie können diese Option unter „Bearbeiten“ >
„Voreinstellungen“ > „Site“ festlegen.
Note: Wenn Sie eine neue Datei auschecken, sollten Sie auch die abhängigen Dateien herunterladen. Wenn sich die
neuesten Versionen der abhängigen Dateien bereits auf der lokalen Festplatte befinden, müssen sie jedoch nicht erneut
heruntergeladen werden.
Neben dem Symbol der lokalen Datei wird ein grünes Häkchen angezeigt, das darauf hinweist, dass Sie die Datei
ausgecheckt haben.
97
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Important: Wenn Sie die gerade aktive Datei auschecken, wird die aktuell geöffnete Version der Datei mit der neuen
ausgecheckten Version überschrieben.
Dateien über das Bedienfeld „Dateien“ einchecken
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) ausgecheckte oder neue Dateien aus.
Note: Sie können Dateien in der lokalen Ansicht oder in der Remote-Ansicht auswählen, nicht jedoch in der Testserver-
Ansicht.
2 Führen Sie einen der folgenden Schritte aus, um die Datei(en) einzuchecken:
• Klicken Sie in der Symbolleiste des Bedienfelds „Dateien“ auf die Schaltfläche „Einchecken“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
im Kontextmenü die Option „Einchecken“.
3 Klicken Sie auf „Ja“, um abhängige Dateien zusammen mit den ausgewählten Dateien hochzuladen, oder klicken
Sie auf „Nein“, wenn Sie keine abhängigen Dateien hochladen möchten. Standard ist, die abhängigen Dateien nicht
hochzuladen. Sie können diese Option unter „Bearbeiten“ > „Voreinstellungen“ > „Site“ festlegen.
Note: Wenn Sie eine neue Datei einchecken, sollten Sie auch die abhängigen Dateien an den Server übertragen. Wenn
sich die neuesten Versionen der abhängigen Dateien bereits auf dem Remote-Server befinden, müssen sie jedoch nicht
erneut hochgeladen werden.
Neben dem Symbol der lokalen Datei wird ein Sperrsymbol angezeigt, das darauf hinweist, dass die Datei nun
schreibgeschützt ist.
Important: Wenn Sie die gerade aktive Datei einchecken, wird sie eventuell automatisch vor dem Einchecken gespeichert,
je nachdem, welche Voreinstellungen Sie gewählt haben.
Geöffnete Datei vom Dokumentfenster aus einchecken
1 Die ein- oder auszucheckende Datei muss im Dokumentfenster geöffnet sein.
Note: Sie können geöffnete Dateien nur einzeln einchecken.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Site“ > „Einchecken“.
• Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol für die Dateiverwaltung und wählen Sie dann
im Menü die Option „Einchecken“.
Wenn die aktuelle Datei kein Bestandteil der aktiven Site im Bedienfeld „Dateien“ ist, versucht Dreamweaver
festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehört. Wenn die aktuelle Datei zu einer anderen Site
als der im Bedienfeld „Dateien“ aktiven gehört, öffnet Dreamweaver diese andere Site und führt dann die Eincheck-
Operation durch.
Important: Wenn Sie die gerade aktive Datei einchecken, wird sie eventuell automatisch vor dem Einchecken gespeichert,
je nachdem, welche Voreinstellungen Sie gewählt haben.
Auschecken einer Datei rückgängig machen
Wenn Sie eine Datei auschecken, sie dann aber doch nicht bearbeiten möchten (oder die vorgenommenen
Änderungen verwerfen), können Sie das Auschecken rückgängig machen. Die Datei kehrt wieder in den
ursprünglichen Zustand zurück.
Führen Sie einen der folgenden Schritte aus, um das Auschecken einer Datei rückgängig machen:
• Öffnen Sie die Datei im Dokumentfenster und wählen Sie dann „Site“ > „Auschecken rückgängig“.
98
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) im Bedienfeld
„Dateien“ („Fenster“ > „Dateien“) und wählen Sie dann „Auschecken rückgängig“.
Die lokale Kopie der Datei ist nun schreibgeschützt und Änderungen, die Sie bereits vorgenommen haben, gehen
verloren.
Dateien mit WebDAV ein- und auschecken
Dreamweaver kann eine Verbindung zu einem Server herstellen, der WebDAV (Web-based Distributed Authoring
and Versioning) verwendet, ein Satz an HTTP-Protokoll-Erweiterungen, die Benutzern das gemeinsame Bearbeiten
und Verwalten von Dateien auf Remote-Webservern ermöglichen. Weitere Informationen finden Sie unter
www.webdav.org.
1 Definieren Sie, sofern Sie dies nicht bereits getan haben, eine Dreamweaver-Site, die den lokalen Ordner festlegt,
in dem Sie Ihre Projektdateien speichern.
2 Wählen Sie „Site“ > „Sites verwalten“ und doppelklicken Sie in der Liste auf Ihre Site.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Server“ und führen Sie eine der folgenden Aktionen aus:
• Klicken Sie auf die Schaltfläche „Neuen Server hinzufügen“, um einen neuen Server hinzuzufügen.
• Wählen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltfläche „Vorhandenen Server bearbeiten“.
4 Wählen Sie im Fenster „Einfach“ im Popupmenü „Verbinden über“ die Option „WebDAV“ und alle weiteren
gewünschten Grundeinstellungen aus.
5 Klicken Sie auf die Schaltfläche „Erweitert“.
6 Wählen Sie die Option „Datei-Auschecken aktivieren“ aus und geben Sie folgende Informationen ein:
• Geben Sie in das Feld „Name auschecken“ einen Namen ein, an dem andere Teammitglieder Sie erkennen.
• Geben Sie in das Feld „E-Mail-Adresse“ Ihre E-Mail-Adresse ein.
Anhand des Namens und der E-Mail-Adresse wird das Eigentumsrecht auf dem WebDAV-Server identifiziert, diese
Angaben werden außerdem als Kontaktinformationen im Bedienfeld „Dateien“ angezeigt.
7 Klicken Sie auf „Speichern“.
Dreamweaver konfiguriert die Site für WebDAV-Zugriff. Wenn Sie den Befehl „Einchecken“ oder „Auschecken“ für
eine beliebige Site-Datei verwenden, wird die Datei mit WebDAV übertragen.
Note: Möglicherweise kann WebDAV Dateien mit dynamischen Inhalten (z. B. PHP-Tags oder SSIs) nicht
ordnungsgemäß auschecken, da diese mit dem HTTP-Befehl GET bereits beim Auschecken dargestellt werden.
Dateien mithilfe von Subversion (SVN) abrufen und einchecken
Dreamweaver kann eine Verbindung mit einem Server herstellen, auf dem Subversion (SVN) verwendet wird, ein
Versionskontrollsystem, über das Benutzer gemeinsam Dateien auf Remote-Webservern bearbeiten und verwalten
können. Dreamweaver ist kein vollständiger SVN-Client, Benutzer können jedoch die neuesten Versionen von
Dateien abrufen, Änderungen vornehmen und die Dateien wieder einchecken.
Important: Dreamweaver CS5 verwendet die Clientbibliothek von Subversion 1.6.6 und Dreamweaver CS5.5 die Client-
Bibliothek der Version 1.6.9. Spätere Versionen der Subversion-Clientbibliothek sind nicht abwärtskompatibel. Wenn Sie
die Client-Anwendung eines Drittanbieters (z. B. TortoiseSVN) aktualisieren, damit die Anwendung mit einer späteren
Version von Subversion verwendet werden kann, werden die lokalen Subversion-Metadaten von der aktualisierten
Subversion-Anwendung aktualisiert. Dreamweaver kann dann keine Kommunikationsverbindung mehr mit Subversion
99
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
herstellen. Aktualisierungen des Subversion-Servers sind von diesem Problem nicht betroffen, da diese Aktualisierungen
abwärtskompatibel sind. Wenn Sie auf die Client-Anwendung eines Drittanbieters aktualisieren, die mit Subversion ab
Version 1.7 verwendet wird, müssen Sie zunächst bei Adobe nach Aktualisierungen suchen, bevor Sie Subversion wieder
mit Dreamweaver verwenden können. Weitere Informationen zu diesem Problem finden Sie unter
www.adobe.com/go/dw_svn_de.
Adobe empfiehlt beim Verwenden von mit Subversion verwalteten Dateien den Einsatz eines Drittanbieter-Tools zum
Dateivergleich. Beim Vergleich von Dateien auf Unterschiede können Sie genau die Änderungen feststellen, die
andere Benutzer an den Dateien vorgenommen haben. Weitere Informationen über Tools zum Dateivergleich finden
Sie, indem Sie in einer Suchmaschine wie z. B. Google den Suchbegriff „Dateivergleich“ eingeben. Dreamweaver
funktioniert mit den meisten Drittanbieter-Tools.
Ein Video mit einem Überblick zur Verwendung von SVN und Dreamweaver finden Sie unter
www.adobe.com/go/lrvid4049_dw_de.
SVN-Verbindung einrichten
Bevor Sie Subversion (SVN) als Versionskontrollsystem mit Dreamweaver einsetzen können, müssen Sie eine
Verbindung mit einem SVN-Server einrichten. Dies erfolgt in der Kategorie „Versionskontrolle“ des Dialogfelds
„Site-Definition“.
Der SVN-Server ist ein Datei-Repository, aus dem mehrere Benutzer Dateien abrufen bzw. diese darin ablegen
können. Er unterscheidet sich von dem Remote-Server, der normalerweise für Dreamweaver verwendet wird. Beim
Einsatz von SVN ist der Remote-Server auch weiterhin der Internet-Server für Ihre Webseiten. Die Aufgabe des SVN-
Servers ist es hingegen, das Repository für die Dateien aufzunehmen, für die Sie eine Versionskontrolle durchsetzen
möchten. Der übliche Arbeitsablauf ist hierbei, Dateien vom SVN-Server abzurufen und geänderte Dateiversionen
darin abzulegen und die Dateien dann aus Dreamweaver heraus auf dem Remote-Server zu veröffentlichen. Das
Einrichten des Remote-Servers ist vollständig unabhängig vom Einrichten des SVN-Servers.
Sie benötigen Zugriff auf einen SVN-Server und ein SVN-Repository, bevor Sie mit dem Einrichten beginnen können.
Weitere Informationen zu SVN finden Sie auf der Subversion-Website unter http://subversion.apache.org/.
Um die SVN-Verbindung einzurichten, führen Sie die folgenden Schritte aus:
1 Wählen Sie „Sites“ > „Sites verwalten“ aus, markieren Sie die Site, für die Sie eine Versionskontrolle einrichten
möchten, und klicken Sie auf die Schaltfläche „Bearbeiten“.
Note: Wenn Sie für eine Dreamweaver-Site noch keinen lokalen und keinen Remote-Ordner eingerichtet haben,
müssen Sie vor dem Fortfahren zumindest eine lokale Site definieren. (Die Remote-Site ist in dieser Phase nicht
erforderlich, muss jedoch später ebenfalls eingerichtet werden, bevor Sie die Dateien im Internet veröffentlichen.)
Weitere Informationen finden Sie unter “Arbeiten mit Dreamweaver-Sites” on page 40.
2 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Versionskontrolle“ aus.
3 Wählen Sie im Popupmenü „Zugriff“ die Option „Subversion“ aus.
4 Legen Sie Zugriffsoptionen wie folgt fest:
• Wählen Sie im Popupmenü „Protokoll“ das zu verwendende Protokoll aus. Verfügbare Protokolle sind
„HTTP“, „HTTPS“, „SVN“ und „SVN+SSH“.
Note: Die Verwendung des Protokolls „SVN+SSH“ erfordert eine spezielle Konfiguration. Weitere Informationen
finden Sie unter www.adobe.com/go/learn_dw_svn_ssh_de.
• Geben Sie im Textfeld „Serveradresse“ die Adresse für den SVN-Server ein (normalerweise in der Form
servername.domain.com).
100
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
• Geben Sie im Textfeld „Repository-Pfad“ den Pfad zum gewünschten Repository auf dem SVN-Server an (z. B.
/svn/stammverzeichnis. Der Serveradministrator benennt das Stammverzeichnis für das SVN-Repository.)
• Optional: Wenn Sie einen vom Standardport abweichenden Serverport verwenden möchten, wählen Sie die
Option „Nicht-Standard“ aus und geben Sie im Textfeld daneben die Portnummer ein.
• Geben Sie den Benutzernamen und das Kennwort für den SVN-Server ein.
5 Klicken Sie auf „Testen“, um die Verbindung zu testen, oder klicken Sie auf „OK“, um das Dialogfeld zu schließen.
Klicken Sie anschließend auf „Fertig“, um das Dialogfeld „Sites verwalten“ zu schließen.
Nachdem die Verbindung mit dem Server hergestellt wurde, können Sie den SVN-Repository-Inhalt im Bedienfeld
„Dateien“ anzeigen. Wählen Sie dazu im Popupmenü „Ansicht“ die Option „Repository-Ansicht“ aus oder klicken Sie
im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „Repository-Dateien“ .
More Help topics
“Arbeiten mit Dreamweaver-Sites” on page 40
“Bedienfeld „Dateien“ verwenden” on page 81
Neueste Dateiversionen abrufen
Wenn Sie die neueste Version einer Datei aus dem SVN-Repository abrufen, führt Dreamweaver den Inhalt dieser
Datei mit dem Inhalt der entsprechenden lokalen Kopie zusammen. (Anders ausgedrückt: Wenn ein anderer Benutzer
die Datei seit dem letzten Einchecken durch Sie aktualisiert hat, werden diese Änderungen mit der lokalen Version der
Datei auf Ihrem Computer zusammengeführt.) Wenn die Datei noch nicht auf der lokalen Festplatte vorhanden ist,
wird sie einfach heruntergeladen.
Note: Beim erstmaligen Abrufen von Dateien aus dem Repository sollten Sie ein leeres lokales Verzeichnis verwenden
oder ein lokales Verzeichnis, das keine Dateien enthält, die denselben Namen tragen wie Dateien im Repository. Beim
ersten Versuch werden in Dreamweaver keine Repository-Dateien auf dem lokalen Laufwerk bereitgestellt, wenn das
lokale Laufwerk Dateien enthält, deren Namen mit Dateien im Remote-Repository übereinstimmen.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Führen Sie einen der folgenden Schritte aus:
• Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird
automatisch die „Lokale Ansicht“ angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die gewünschte Datei oder den gewünschten Ordner und wählen Sie die
Option „Versionskontrolle“ > „Neueste Versionen abrufen“ aus.
• Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmenü „Ansicht“ des Bedienfelds „Dateien“ die
Option „Repository-Ansicht“ auswählen, oder indem Sie im erweiterten Bedienfeld „Dateien“ auf die
Schaltfläche „Repository-Dateien“ klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die Datei bzw. den Ordner von Interesse und wählen Sie die Option
„Neueste Versionen abrufen“ aus.
Note: Sie können auch mit der rechten Maustaste auf eine Datei klicken und im Kontextmenü die Option „Auschecken“
auswählen oder die Datei auswählen und dann auf die Schaltfläche „Auschecken“ klicken, um die neueste Version
abzurufen. Da SVN jedoch keinen Auscheck-Arbeitsablauf unterstützt, bewirkt dieser Vorgang kein Auschecken der
Datei im herkömmlichen Sinn.
Dateien übernehmen
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
101
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus:
• Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird
automatisch die „Lokale Ansicht“ angezeigt.) Markieren Sie dann die zu übernehmende Datei und klicken Sie
auf die Schaltfläche „Einchecken“.
• Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmenü „Ansicht“ des Bedienfelds „Dateien“ die
Option „Repository-Ansicht“ auswählen, oder indem Sie im erweiterten Bedienfeld „Dateien“ auf die
Schaltfläche „Repository-Dateien“ klicken. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die zu übernehmende Datei und wählen Sie dann „Einchecken“ aus.
3 Überprüfen Sie im Dialogfeld „Übernehmen“ die geplanten Aktionen, nehmen Sie bei Bedarf Änderungen vor und
klicken Sie auf „OK“.
Sie können Aktionen ändern, indem Sie die entsprechende Datei markieren und auf die Schaltflächen am unteren
Rand des Dialogfelds „Übernehmen“ klicken. Es stehen zwei Optionen zur Auswahl: „Übernehmen“ oder
„Ignorieren“.
Note: Ein grünes Häkchen an einer Datei im Bedienfeld „Dateien“ weist auf eine geänderte Datei hin, die noch nicht
wieder ins Repository übernommen wurde.
Status von Dateien oder Ordnern im Repository aktualisieren
Sie können den Status „SVN“ einer einzelnen Datei oder eines einzelnen Ordners aktualisieren. Durch diese
Aktualisierung wird nicht die gesamte Anzeige aktualisiert.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmenü „Ansicht“ des Bedienfelds „Dateien“ die
Option „Repository-Ansicht“ auswählen, oder indem Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche
„Repository-Dateien“ klicken.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Repository und wählen Sie die Option „Status aktualisieren“ aus.
Status von lokalen Dateien oder Ordnern aktualisieren
Sie können den Status „SVN“ einer einzelnen Datei oder eines einzelnen Ordners aktualisieren. Durch diese
Aktualisierung wird nicht die gesamte Anzeige aktualisiert.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird automatisch
die „Lokale Ansicht“ angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Bedienfeld „Dateien“ und wählen Sie die Option „Status aktualisieren“ aus.
Dateiversionen anzeigen
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
102
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus:
• Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird
automatisch die „Lokale Ansicht“ angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die Datei, deren verschiedene Versionen Sie anzeigen möchten, und
wählen Sie die Option „Versionskontrolle“ > „Versionen anzeigen“ aus.
• Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmenü „Ansicht“ des Bedienfelds „Dateien“ die
Option „Repository-Ansicht“ auswählen, oder indem Sie im erweiterten Bedienfeld „Dateien“ auf die
Schaltfläche „Repository-Dateien“ klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die Datei, deren verschiedene Versionen Sie anzeigen möchten, und
wählen Sie die Option „Versionen anzeigen“ aus.
3 Markieren Sie im Dialogfeld „Versionsverlauf“ die gewünschten Versionen und führen Sie einen der folgenden
Schritte aus:
• Klicken Sie auf „Mit lokaler Version vergleichen“, um die ausgewählte Version mit der lokalen Version der
Datei zu vergleichen.
Note: Sie müssen ein Drittanbieter-Tool zum Dateivergleich installieren, um Dateien vergleichen zu können.
Weitere Informationen über Tools zum Dateivergleich finden Sie, indem Sie in einer Suchmaschine wie z. B.
Google den Suchbegriff „Dateivergleich“ eingeben. Dreamweaver funktioniert mit den meisten Drittanbieter-
Tools.
• Klicken Sie auf „Vergleichen“, um zwei ausgewählte Versionen miteinander zu vergleichen. Klicken Sie bei
gedrückter Strg-Taste auf die Versionen, um zwei Versionen gleichzeitig zu markieren.
• Klicken Sie auf „Anzeigen“, um die ausgewählte Version anzuzeigen. Bei dieser Aktion wird die aktuelle lokale
Kopie dieser Datei nicht überschrieben. Sie können die ausgewählte Version auf der Festplatte speichern wie
jede beliebige andere Datei.
• Klicken Sie auf „Als aktuelle Version hochstufen“, um die ausgewählte Version im Repository als neueste
Version festzulegen.
Dateien sperren und entsperren
Durch Sperren einer Datei im SVN-Repository wissen andere Benutzer, dass Sie diese Datei derzeit bearbeiten. Andere
Benutzer können diese Datei weiterhin lokal bearbeiten, können die Datei jedoch erst einchecken, nachdem Sie die
Sperre aufgehoben haben. Wenn Sie eine Datei im Repository sperren, wird für die Datei ein geöffnetes Schlosssymbol
angezeigt. Anderen Benutzern wird ein geschlossenes Schlosssymbol angezeigt.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Führen Sie einen der folgenden Schritte aus:
• Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmenü „Ansicht“ des Bedienfelds „Dateien“ die
Option „Repository-Ansicht“ auswählen, oder indem Sie im erweiterten Bedienfeld „Dateien“ auf die
Schaltfläche „Repository-Dateien“ klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die gewünschte Datei oder den gewünschten Ordner und wählen Sie die
Option „Sperren“ oder „Entsperren“ aus.
• Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird
automatisch die „Lokale Ansicht“ angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die gewünschte Datei oder den gewünschten Ordner und wählen Sie die
Option „Sperren“ oder „Entsperren“ aus.
103
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Neue Datei zum Repository hinzufügen
Ein blaues Plussymbol an einer Datei im Bedienfeld „Dateien“ weist auf eine Datei hin, die noch nicht im Repository
vorhanden ist.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Markieren Sie im Bedienfeld „Dateien“ die dem Repository hinzuzufügende Datei und klicken Sie auf die
Schaltfläche „Einchecken“.
3 Stellen Sie sicher, dass für die Datei im Dialogfeld „Übernehmen“ die Aktion „Übernehmen“ ausgewählt ist, und
klicken Sie auf „OK“.
Dateien verschieben, kopieren, löschen oder wiederherstellen
• Wenn Sie eine Datei verschieben möchten, ziehen Sie sie in den Zielordner in Ihrer lokalen Site.
Beim Verschieben einer Datei wird die Datei im neuen Speicherort mit dem Symbol „Mit Verlauf hinzufügen“ und
im alten Speicherort mit dem Symbol „Löschen“ gekennzeichnet. Wenn Sie diese Dateien anwenden, wird die
Datei im alten Speicherort nicht mehr angezeigt.
• Wenn Sie eine Datei kopieren möchten, markieren Sie sie, kopieren Sie sie („Bearbeiten“ > „Kopieren“) und fügen
Sie sie dann im neuen Speicherort ein („Bearbeiten“ > „Einfügen“).
Beim Kopieren und Einfügen einer Datei wird die Datei im neuen Speicherort mit dem Symbol „Mit Verlauf
hinzufügen“ gekennzeichnet.
• Wenn Sie eine Datei löschen möchten, markieren Sie sie und drücken Sie die Entf-Taste.
In Dreamweaver haben Sie die Möglichkeit, auszuwählen, ob nur die lokale Version der Datei oder ob die lokale
Version und die Version der Datei auf dem SVN-Server gelöscht werden sollen. Wenn Sie festlegen, dass nur die
lokale Version gelöscht werden soll, hat dies keine Auswirkung auf die Datei auf dem SVN-Server. Wenn Sie
festlegen, dass auch die Datei auf dem SVN-Server gelöscht werden soll, wird die lokale Version der Datei mit dem
Symbol „Löschen“ gekennzeichnet und Sie müssen die Datei anwenden, damit der Löschvorgang durchgeführt wird.
• Wenn Sie eine kopierte oder verschobene Datei im ursprünglichen Speicherort wiederherstellen möchten, klicken
Sie mit der rechten Maustaste auf die Datei und wählen Sie „Versionskontrolle“ > „Wiederherstellen“·aus.
Dateikonflikte lösen
Wenn zwischen Ihrer Datei und anderen Dateien auf dem Server Konflikte auftreten, können Sie die Datei bearbeiten
und dann als „Konflikt gelöst“ kennzeichnen. Wenn Sie beispielsweise eine Datei einchecken möchten, die im
Widerspruch zu Änderungen eines anderen Benutzers steht, können Sie die Datei nicht einchecken. Sie können die
neueste Version der Datei aus dem Repository abrufen, manuell Änderungen an Ihrer Arbeitskopie vornehmen und
die Datei dann als „Konflikt gelöst“ kennzeichnen, damit Sie sie einchecken können.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird automatisch
die „Lokale Ansicht“ angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Datei, für die
ein Konflikt gelöst werden soll, und wählen Sie dann „Versionskontrolle“ > „Als aufgelöst markieren“ aus.
104
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Offlinemodus
Gegebenenfalls ist es nützlich, den Repository-Zugriff während anderer Dateiübertragungsvorgänge zu vermeiden,
indem Sie in den Offlinemodus wechseln. Dreamweaver stellt die Verbindung zum SVN-Repository wieder her,
sobald Sie einen Vorgang ausführen, für den eine Verbindung erforderlich ist („Neueste Versionen abrufen“,
„Übernehmen“ usw.).
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird automatisch
die „Lokale Ansicht“ angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Bedienfeld „Dateien“ und wählen Sie die Option „Versionskontrolle“ > „Offlinemodus“ aus.
Lokale SVN-Sites optimieren
Mit diesem Befehl können Sie Sperren von Dateien aufheben, sodass nicht abgeschlossene Vorgänge fortgesetzt
werden können. Verwenden Sie diesen Befehl, um alte Sperren aufzuheben, wenn Fehlermeldungen hinsichtlich
gesperrter Arbeitskopien angezeigt werden.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben.
2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld „Dateien“ an, indem Sie im Popupmenü
„Ansicht“ die Option „Lokale Ansicht“ auswählen. (Wenn das Bedienfeld „Dateien“ erweitert ist, wird automatisch
die „Lokale Ansicht“ angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die zu
entfernende Datei und wählen Sie dann „Versionskontrolle“ > „Entfernen“ aus.
Dateien und Ordner in mit Subversion verwalteten Sites verschieben
Wenn Sie die lokalen Versionen von Dateien und Ordnern einer mit Subversion verwalteten Site verschieben, besteht
das Risiko, Probleme für andere Benutzer zu verursachen, die möglicherweise gerade eine Synchronisierung mit dem
SVN-Repository durchführen. Wenn Sie beispielsweise eine Datei lokal verschieben und diese Datei einige Stunden
nicht an das Repository übergeben, kann es vorkommen, dass ein anderer Benutzer versucht, die aktuelle Dateiversion
von der vorherigen Position der Datei abzurufen. Aus diesem Grund sollten Sie Dateien stets sofort nach einem
lokalen Verschieben wieder an den SVN-Server zurückübermitteln.
Dateien und Ordner bleiben auf dem SVN-Server erhalten, bis sie manuell gelöscht werden. Wenn Sie also eine Datei
in einen anderen Ordner verschieben und erneut einchecken, bleibt die alte Dateiversion am vorherigen Speicherort
auf dem Server erhalten. Um Verwirrung zu vermeiden sollten Sie deshalb alte Kopien von verschobenen Dateien und
Ordnern löschen.
Wenn Sie eine Datei lokal verschieben und wieder an den SVN-Server übermitteln, geht der Versionsverlauf der Datei
verloren.
Dateien synchronisieren
Dateien in der lokalen Site und der Remote-Site synchronisieren
Nachdem Sie Dateien in der lokalen Site und der Remote-Site erstellt haben, können Sie sie synchronisieren.
Note: Ist die Remote-Site ein FTP-Server (und kein Netzwerkserver), werden die Dateien über FTP synchronisiert.
105
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Bevor Sie die Sites synchronisieren, können Sie überprüfen, welche Dateien Sie bereitstellen, abrufen, löschen oder
ignorieren möchten. Dreamweaver bestätigt nach Abschluss der Synchronisierung, welche Dateien aktualisiert
wurden.
More Help topics
“Dateiübertragungen verwalten” on page 94
“Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken” on page 96
“Dateien von einem Remote-Server abrufen” on page 91
“Dateien auf einem Remote-Server bereitstellen” on page 92
“Dateien auf Unterschiede vergleichen” on page 106
Ohne Synchronisierung die neuesten Dateien in der lokalen oder Remote-Site ermitteln
❖ Führen Sie im Bedienfeld „Dateien“ einen der folgenden Schritte aus:
• Klicken Sie oben rechts auf das Menü „Optionen“ und wählen Sie „Bearbeiten“ > „Neuere auswählen (lokal)“ oder
„Bearbeiten“ > „Neuere auswählen (entfernt)“.
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) und wählen Sie dann „Auswählen“ > „Neuere (lokal)“ oder „Auswählen“ > „Neuere (Remote)“.
Ausführliche Synchronisierungsinformationen für eine bestimmte Datei anzeigen
❖ Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf die Datei, zu der Sie Informationen abrufen möchten, und wählen Sie „Synchronisierungsdaten
anzeigen“.
Note: Diese Funktion ist nur verfügbar, wenn Sie im Dialogfeld „Site-Definition“ in der Kategorie „Remote-
Informationen“ die Option „Synchronisierungsinformationen beibehalten“ aktiviert haben.
Dateien synchronisieren
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) in dem Popupmenü, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site aus.
2 Optional: Wählen Sie bestimmte Dateien oder Ordner aus oder öffnen Sie den nächsten Schritt, um die gesamte
Site zu synchronisieren.
3 Klicken Sie auf das Menü „Optionen“ in der oberen rechten Ecke des Bedienfelds „Dateien“ und wählen Sie „Site“ >
„Synchronisieren“.
Sie können auch oben im Bedienfeld „Dateien“ auf die Schaltfläche „Synchronisieren“ klicken, um Dateien zu
synchronisieren.
4 Führen Sie im Menü „Dateien synchronisieren“ einen der folgenden Schritte aus:
• Wählen Sie „Gesamte Sitename -Site“, um die gesamte Site zu synchronisieren.
• Wenn Sie nur ausgewählte Dateien synchronisieren möchten, wählen Sie „Nur lokale Dateien auswählen“ (oder
„Nur Remote-Dateien auswählen“, wenn Sie die letzte Auswahl in der Remote-Ansicht des Bedienfelds „Dateien“
vorgenommen haben).
106
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
5 Wählen Sie die Richtung, in die die Dateien kopiert werden sollen:
Aktuellere Dateien für entferntes Objekt bereitstellen Lädt alle lokalen Dateien hoch, die es auf dem Remote-Server
nicht gibt oder die seit dem letzten Upload geändert wurden.
Aktuellere Dateien für entferntes Objekt beziehen Lädt alle Remote-Dateien herunter, die es lokal nicht gibt oder die
seit dem letzten Download geändert wurden.
Aktuellere Dateien abrufen und bereitstellen Legt die neuesten Versionen sämtlicher Dateien sowohl auf der lokalen
Site als auch auf der Remote-Site ab.
6 Bestimmen Sie, ob die Dateien in der Ziel-Site, die keine Entsprechung in der Ursprungs-Site haben, gelöscht
werden sollen. (Dies ist nicht möglich, wenn Sie im Popupmenü „Richtung“ die Optionen „Abrufen“ und
„Bereitstellen“ wählen.)
Wenn Sie „Aktuellere Dateien für entferntes Objekt bereitstellen“ wählen und die Option „Löschen“ aktivieren,
werden alle Dateien in der Remote-Site, für die keine entsprechenden lokalen Dateien vorhanden sind, gelöscht. Wenn
Sie „Aktuellere Dateien von entferntem Objekt beziehen“ wählen, werden alle Dateien in der lokalen Site, für die keine
entsprechenden Remote-Dateien vorhanden sind, gelöscht.
7 Klicken Sie auf „Vorschau“.
Note: Bevor Sie die Dateien synchronisieren können, müssen Sie eine Vorschau der Aktionen anzeigen, die Dreamweaver
hierzu ausführt.
Befindet sich die neueste Version jeder ausgewählten Datei bereits an beiden Stellen, wird gemeldet, dass keine
Synchronisierung erforderlich ist. Andernfalls wird das Dialogfeld „Synchronisieren“ eingeblendet, in dem Sie die
Aktionen (Bereitstellen, Abrufen, Löschen und Ignorieren) für diese Dateien ändern können, bevor die
Synchronisierung erfolgt.
8 Überprüfen Sie die für jede Datei durchzuführende Aktion.
9 Um die Aktion für eine bestimmte Datei zu ändern, wählen Sie die Datei aus und klicken Sie auf eines der
Aktionssymbole unten im Vorschaufenster.
Vergleichen Die Aktion „Vergleichen“ funktioniert nur, wenn in Dreamweaver ein Tool für den Dateivergleich
installiert und angegeben wurde. Wenn das Aktionssymbol abgeblendet ist, kann die Aktion nicht durchgeführt
werden.
Ausgewählte Dateien als bereits synchronisiert markieren Mit dieser Option können Sie angeben, dass die
ausgewählte Datei bzw. die ausgewählten Dateien bereits synchronisiert wurden.
10 Klicken Sie auf „OK“, um die Dateien zu synchronisieren. Sie können die Einzelheiten der Synchronisierung
anzeigen oder als lokale Datei speichern.
Dateien auf Unterschiede vergleichen
Lokale und Remote-Dateien vergleichen
Dreamweaver kann mit Tools für den Dateivergleich eingesetzt werden, um den Code von lokalen und Remote-
Versionen der gleichen Datei, zwei unterschiedliche Remote-Dateien oder zwei verschiedene lokale Dateien zu
vergleichen. Das Vergleichen von lokalen und Remote-Versionen ist nützlich, wenn Sie lokal an einer Datei arbeiten
und vermuten, dass die Dateikopie auf dem Server von einer anderen Person modifiziert wurde. Sie können die
Remote-Änderungen in der lokalen Version anzeigen, ohne Dreamweaver zu verlassen, bevor Sie die Datei auf dem
Server bereitstellen.
107
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Das Vergleichen von zwei lokalen oder zwei Remote-Dateien ist ferner nützlich, um frühere, benannte Versionen
Ihrer Dateien beizubehalten. Wenn Sie die in einer älteren Version vorgenommenen Änderungen an einer Datei
vergessen haben, können Sie sich diese durch einen schnellen Vergleich in Erinnerung rufen.
Bevor Sie beginnen, müssen Sie ein Tool für den Dateivergleich von einem Dritthersteller installieren. Weitere
Informationen über Tools zum Dateivergleich finden Sie, indem Sie in einer Suchmaschine wie z. B. Google den
Suchbegriff „Dateivergleich“ eingeben. Dreamweaver funktioniert mit den meisten Drittanbieter-Tools.
Vergleichstool in Dreamweaver angeben
1 Installieren Sie das Tool für den Dateivergleich auf dem gleichen System wie Dreamweaver.
2 Öffnen Sie in Dreamweaver das Dialogfeld „Voreinstellungen“ („Bearbeiten“ > „Voreinstellungen“ (Windows)
bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh)) und wählen Sie die Kategorie „Dateien vergleichen“ aus.
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in Windows auf die Schaltfläche „Durchsuchen“ und wählen Sie eine Anwendung für den
Dateivergleich aus.
• Klicken Sie auf dem Macintosh auf die Schaltfläche „Durchsuchen“ und wählen Sie nicht das Tool für den
Dateivergleich selbst aus, sondern das Tool oder Skript, das das Tool für den Dateivergleich über die Befehlszeile
startet.
Starttools oder Startskripts befinden sich auf dem Macintosh in der Regel im Ordner „/usr/bin“. Wenn Sie
beispielsweise FileMerge verwenden möchten, navigieren Sie zu „/usr/bin“ und wählen Sie „opendiff“ aus, das Tool
zum Starten von FileMerge.
In der folgenden Tabelle sind gängige Macintosh-Tools für den Dateivergleich und der Speicherort der zugehörigen
Starttools bzw. -Skripts auf der Festplatte aufgeführt.
Note: Der Ordner „usr“ ist normalerweise im Finder ausgeblendet. Sie können in Dreamweaver über die Schaltfläche
„Durchsuchen“ darauf zugreifen.
Note: Welche Ergebnisse tatsächlich angezeigt werden, hängt vom verwendeten Vergleichstool ab. Schlagen Sie im
Benutzerhandbuch Ihres Tools nach, wie die Ergebnisse zu interpretieren sind.
Zwei lokale Dateien vergleichen
Sie können zwei lokale Dateien vergleichen, die sich an einem beliebigen Speicherort auf Ihrem Computer befinden.
1 Klicken Sie im Bedienfeld „Dateien“ bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste
(Macintosh) auf die beiden Dateien, um sie auszuwählen.
Um Dateien außerhalb der definierten Site auszuwählen, wählen Sie den lokalen Datenträger im linken Popupmenü
im Bedienfeld „Dateien“ und wählen die Dateien aus.
2 Klicken Sie mit der rechten Maustaste auf eine der ausgewählten Dateien und wählen Sie im Kontextmenü „Lokale
Dateien vergleichen“.
Note: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrückter Ctrl-Taste auf die ausgewählten Dateien.
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Tool Auszuwählende Datei
FileMerge /usr/bin/opendiff (oder /Developer/usr/bin/opendiff)
BBEdit /usr/bin/bbdiff
TextWrangler /usr/bin/twdiff
108
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Zwei Remote-Dateien vergleichen
Sie können auch zwei auf einem Remote-Server gespeicherte Dateien vergleichen. Dazu müssen Sie allerdings
zunächst eine Dreamweaver-Site mit Remote-Einstellungen definieren.
1 Zeigen Sie die Dateien auf dem Remote-Server im Bedienfeld „Dateien“ an, indem Sie im rechten Popupmenü die
Option „Remote-Ansicht“ auswählen.
2 Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die beiden
Dateien, um sie auszuwählen.
3 Klicken Sie mit der rechten Maustaste auf eine der ausgewählten Dateien und wählen Sie im Kontextmenü
„Remote-Dateien vergleichen“.
Note: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrückter Ctrl-Taste auf die ausgewählten Dateien.
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Lokale Dateien mit Remote-Dateien vergleichen
Sie können eine lokale Datei mit einer Datei auf dem Remote-Server vergleichen. Dazu müssen Sie zunächst eine
Dreamweaver-Datei mit Remote-Einstellungen definieren.
❖ Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste auf eine lokale Datei und wählen Sie im
Kontextmenü „Mit Remote-Dateien vergleichen“.
Note: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrückter Ctrl-Taste auf die lokale Datei.
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Remote-Dateien mit lokalen Dateien vergleichen
Sie können eine Remote-Datei mit einer lokalen Datei vergleichen. Dazu müssen Sie allerdings zunächst eine
Dreamweaver-Site mit Remote-Einstellungen definieren.
1 Zeigen Sie die Dateien auf dem Remote-Server im Bedienfeld „Dateien“ an, indem Sie im rechten Popupmenü die
Option „Remote-Ansicht“ auswählen.
2 Klicken Sie mit der rechten Maustaste in das Bedienfeld und wählen Sie im Kontextmenü „Mit lokalen Dateien
vergleichen“.
Note: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrückter Ctrl-Taste auf die Datei.
Geöffnete Dateien mit Remote-Dateien vergleichen
Es ist möglich, eine in Dreamweaver geöffnete Datei mit ihrem Gegenstück auf dem Remote-Server zu vergleichen.
❖ Wählen Sie im Dokumentfenster „Datei“ > „Mit Remote-Dateien vergleichen“.
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Sie können stattdessen auch mit der rechten Maustaste am oberen Rand des Dokumentfensters auf die Registerkarte
des Dokuments klicken und im Kontextmenü „Mit Remote-Dateien vergleichen“ wählen.
Vor dem Bereitstellen von Dateien einen Vergleich durchführen
Wenn Sie eine Datei lokal bearbeiten und dann versuchen, diese auf den Remote-Server hochzuladen, teilt Ihnen
Dreamweaver mit, ob sich die Remote-Version der Datei geändert hat, und gibt Ihnen die Möglichkeit, die beiden
Dateien zu vergleichen, bevor Sie die Datei hochladen und die Remote-Version überschreiben.
109
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Bevor Sie beginnen, müssen Sie auf Ihrem System ein Tool für den Dateivergleich installieren und in Dreamweaver
angeben.
1 Nachdem Sie eine Datei in einer Dreamweaver-Site bearbeitet haben („Site“ > „Bereitstellen“), müssen Sie sie in der
Remote-Site bereitstellen.
Wenn die Remote-Version der Datei geändert wurde, erhalten Sie eine Benachrichtigung mit der Möglichkeit, die
Unterschiede anzuzeigen.
2 Klicken Sie auf die Schaltfläche „Vergleichen“, um die Unterschiede anzuzeigen.
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Wenn Sie kein Tool für den Dateivergleich angegeben haben, werden Sie dazu aufgefordert.
3 Nachdem Sie die Änderungen in dem Tool geprüft oder zusammengeführt haben, können Sie den
Bereitstellungsvorgang fortsetzen oder abbrechen.
Beim Synchronisieren von Dateien einen Vergleich durchführen
Es ist möglich, beim Synchronisieren der Site-Dateien mit Dreamweaver die lokalen Versionen Ihrer Dateien mit
ihren Remote-Versionen zu vergleichen.
Bevor Sie beginnen, müssen Sie auf Ihrem System ein Tool für den Dateivergleich installieren und in Dreamweaver
angeben.
1 Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle im Bedienfeld „Dateien“ und wählen Sie im
Kontextmenü die Option „Synchronisieren“.
2 Füllen Sie dieses Dialogfeld aus und klicken Sie auf „Vorschau“.
Nachdem Sie auf „Vorschau“ geklickt haben, werden die ausgewählten Dateien und die Aktionen aufgelistet, die beim
Synchronisieren durchgeführt werden.
3 Wählen Sie in der Liste alle zu vergleichenden Dateien aus und klicken Sie auf die Schaltfläche „Vergleichen“ (das
Symbol mit zwei kleinen Seiten).
Note: Die Dateien müssen textbasiert sein, wie z. B. HTML- oder ColdFusion-Dateien.
Dreamweaver startet das Vergleichstool, das die lokalen und Remote-Versionen jeder ausgewählten Datei vergleicht.
More Help topics
“Dateien synchronisieren” on page 104
Frühere Dateiversionen wiederherstellen (Contribute-
Benutzer)
Frühere Dateiversionen wiederherstellen (Contribute-Benutzer)
Wenn die Kompatibilität mit Adobe Contribute aktiviert wurde, speichert Dreamweaver automatisch mehrere
Versionen eines Dokuments.
Note: Contribute muss auf demselben Computer wie Dreamweaver installiert sein.
110
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Ferner muss die Wiederherstellung früherer Dateiversionen in den Verwaltungseinstellungen von Contribute
aktiviert worden sein. Weitere Informationen finden Sie unter Contribute verwalten.
1 Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf eine Datei.
2 Wählen Sie „Frühere Version der Seite wiederherstellen“.
Wenn es eine frühere Version der Seite gibt, wird das Dialogfeld „Wiederherstellen“ eingeblendet.
3 Wählen Sie die Version der Seite, die wiederhergestellt werden soll, und klicken Sie auf „Wiederherstellen“.
More Help topics
“Eine Site für die Verwendung von Contribute vorbereiten” on page 61
“Remote-Dateien in einer Contribute-Site löschen, verschieben oder umbenennen” on page 64
Dateien und Ordner in Ihrer Dreamweaver-Site von
Operationen ausschließen (Cloaking)
Site-Cloaking
Durch Site-Cloaking können Sie bestimmte Dateien und Ordner von Vorgängen wie Bereitstellen oder Abrufen
ausschließen. Sie können zudem alle Dateien eines bestimmten Typs (JPEG, FLV, XML usw.) von Vorgängen auf der
Site ausschließen. Dreamweaver speichert Ihre Einstellungen für die jeweiligen Sites, sodass Sie diese Einstellungen
beim Bearbeiten der entsprechenden Sites nicht jedes Mal neu vornehmen müssen.
Wenn Sie beispielsweise eine umfangreiche Site bearbeiten und die Multimediadateien nicht täglich hochladen
möchten, können Sie das Site-Cloaking für den Multimediaordner aktivieren. Die Dateien in diesem Ordner werden
dann von allen Vorgängen ausgeschlossen, die Sie auf der Site durchführen.
Sie können Dateien und Ordner in der lokalen Site oder Remote-Site durch Cloaking ausschließen. Durch Cloaking
werden Dateien und Ordner von den folgenden Vorgängen ausgeschlossen:
• Bereitstellen, Abrufen, Einchecken und Auschecken
• Berichte erstellen
• Neuere lokale und neuere Remote-Dateien suchen
• Operationen für die gesamte Site durchführen, wie etwa das Prüfen und Ändern von Hyperlinks
• Synchronisieren
• Mit dem Inhalt des Bedienfelds „Elemente“ arbeiten
• Vorlagen und Bibliotheken aktualisieren
Note: Sie können weiterhin Vorgänge für bestimmte ausgeschlossene Ordner oder Dateien durchführen, indem Sie
den Ordner bzw. die Datei im Bedienfeld „Dateien“ auswählen und dann den gewünschten Vorgang durchführen.
Das Cloaking wird außer Kraft gesetzt, wenn Sie die Operation direkt für eine Datei oder einen Ordner ausführen.
Note: Vorlagen und Bibliothekselemente, für die das Cloaking aktiviert wurde, werden in Dreamweaver nur vom
Bereitstellen und vom Abrufen ausgeschlossen. Dreamweaver schließt diese Elemente nicht von Batch-Operationen
aus, da sie sonst möglicherweise nicht mehr mit ihren Instanzen synchronisiert sind.
111
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Site-Cloaking aktivieren und deaktivieren
Durch Site-Cloaking können Sie bestimmte Ordner, Dateien und Dateitypen in einer Site von den auf der gesamten
Site durchgeführten Vorgängen ausschließen, z. B. beim Bereitstellen oder Abrufen. Das Site-Cloaking ist
standardmäßig aktiviert. Sie können das Site-Cloaking dauerhaft oder nur vorübergehend deaktivieren, wenn Sie eine
Operation für alle Dateien, also auch die ausgeschlossenen, ausführen möchten. Wenn Sie das Site-Cloaking
deaktivieren, wird das Cloaking für alle bisher ausgeschlossenen Dateien aufgehoben. Wenn Sie das Site-Cloaking
wieder aktivieren, werden alle Dateien, für die das Cloaking bisher galt, wieder ausgeschlossen.
Note: Über die Option „Cloaking für alles deaktivieren“ können Sie zudem das Cloaking für alle Dateien aufheben.
Dadurch wird das Cloaking jedoch nicht deaktiviert. Auch gibt es keine Möglichkeit, das Cloaking für alle zuvor
ausgeschlossenen Dateien und Ordner erneut automatisch festzulegen. Stattdessen müssen Sie das Cloaking wieder für
jeden Ordner, jede Datei und jeden Dateityp einzeln festlegen.
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Datei oder einen Ordner aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und führen Sie dann
einen der folgenden Schritte aus:
• Wählen Sie „Cloaking“ > (Auswahl aufheben zum Deaktivieren).
• Wählen Sie „Cloaking“ > „Einstellungen“ aus, um die Kategorie „Cloaking“ des Dialogfelds zum Einrichten der Site
zu öffnen. Aktivieren oder deaktivieren Sie die gewünschten Optionen sowie „Cloaking von Dateien mit
Erweiterung“, um Cloaking für bestimmte Dateitypen zu aktivieren oder zu deaktivieren. Sie können im Textfeld
die Suffixe der Dateien eingeben, für die Sie das Cloaking festlegen möchten. Wenn Sie das Cloaking für bestimmte
Dateien aufheben möchten, löschen Sie die entsprechenden Suffixe aus dem Textfeld.
Cloaking für Site-Dateien und Site-Ordner festlegen und aufheben
Sie können das Cloaking nur für bestimmte Dateien und Ordner, jedoch nicht für alle Dateien und Ordner oder für
eine gesamte Site festlegen. Beim Cloaking bestimmter Dateien und Ordner können Sie mehrere Dateien und Ordner
gleichzeitig ausschließen.
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Site mit aktiviertem Site-Cloaking aus.
2 Wählen Sie die Ordner oder Dateien aus, für die Sie das Cloaking festlegen oder aufheben möchten.
3 Klicken Sie mit der rechten Maustaste (Windows) oder bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
im Kontextmenü „Cloaking“ > „Cloaking aktivieren“ bzw. „Cloaking“ >„Cloaking deaktivieren“ aus.
Wenn das Cloaking für eine Datei oder einen Ordner festgelegt wurde, verläuft eine rote Linie durch das Datei- bzw.
Ordnersymbol. Diese Linie wird ausgeblendet, wenn das Cloaking für die Datei oder den Ordner aufgehoben wird.
Note: Sie können weiterhin Vorgänge für bestimmte ausgeschlossene Ordner oder Dateien durchführen, indem Sie die
Datei bzw. den Ordner im Bedienfeld „Dateien“ auswählen und dann den gewünschten Vorgang durchführen. Das
Cloaking wird außer Kraft gesetzt, wenn Sie die Operation direkt für eine Datei oder einen Ordner ausführen.
Cloaking für bestimmte Dateitypen festlegen und aufheben
Sie können das Cloaking für bestimmte Dateitypen festlegen, damit Dreamweaver alle Dateien ausschließt, die mit
einem bestimmten Suffix enden. Beispielsweise können Sie das Cloaking für alle Dateien mit der Dateierweiterung
„.txt“ festlegen. Bei den angegebenen Dateitypen muss es sich nicht unbedingt um Dateierweiterungen handeln,
sondern Sie können beliebige Zeichenfolgen für das Ende der Dateinamen angeben.
Cloaking für bestimmte Dateitypen in einer Site festlegen
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Site mit aktiviertem Site-Cloaking aus.
112
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie
„Cloaking“ > „Einstellungen“.
3 Aktivieren Sie die Option „Cloaking von Dateien mit Erweiterung“, geben Sie im entsprechenden Feld die
auszuschließenden Dateitypen ein und klicken Sie auf „OK“.
Sie können beispielsweise
.jpg eingeben, damit das Cloaking für alle Dateien in der Site gilt, deren Name mit „.jpg“
endet.
Trennen Sie mehrere Dateitypen durch ein Leerzeichen voneinander. Verwenden Sie dazu weder ein Komma noch
einen Strichpunkt.
Die entsprechenden durch Cloaking ausgeschlossenen Dateien sind im Bedienfeld „Dateien“ durch eine rote Linie
gekennzeichnet.
Manche Softwareanwendungen erstellen Backupdateien mit einer bestimmten Dateierweiterung, wie z. B. „.bak“.
Auch für solche Dateien können Sie das Cloaking aktivieren.
Note: Sie können weiterhin Vorgänge für bestimmte ausgeschlossene Ordner oder Dateien durchführen, indem Sie die
Datei bzw. den Ordner im Bedienfeld „Dateien“ auswählen und dann den gewünschten Vorgang durchführen. Das
Cloaking wird außer Kraft gesetzt, wenn Sie die Operation direkt für eine Datei oder einen Ordner ausführen.
Cloaking für bestimmte Dateitypen in einer Site aufheben
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Site mit aktiviertem Site-Cloaking aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie
„Cloaking“ > „Einstellungen“.
3 Nehmen Sie im Dialogfeld „Site-Definition“ auf der Registerkarte „Erweitert“ eine der folgenden Einstellungen vor:
• Deaktivieren Sie das Kontrollkästchen „Cloaking von Dateien mit Erweiterung“, damit das Cloaking für alle im
Feld angegebenen Dateitypen wieder aufgehoben wird.
•
Wenn Sie das Cloaking nur für bestimmte Dateitypen aufheben möchten, löschen Sie diese Dateitypen aus dem Feld.
4 Klicken Sie auf „OK“.
Die entsprechenden Dateisymbole werden nun wieder ohne die roten Linien angezeigt. Dies weist darauf hin, dass das
Cloaking für die Dateien aufgehoben wurde.
Cloaking für alle Dateien und Ordner aufheben
Sie können das Cloaking für alle Dateien und Ordner in einer Site in einem Schritt aufheben. Dies kann jedoch nicht
rückgängig gemacht werden. Es gibt keine Möglichkeit, das Cloaking erneut für alle Dateien und Ordner festzulegen,
für die das Cloaking bisher galt. Sie müssen das Cloaking für die Dateien und Ordner einzeln wieder festlegen.
Wenn Sie das Cloaking für alle Ordner und Dateien vorübergehend aufheben und dann wieder aktivieren möchten,
deaktivieren Sie das Site-Cloaking.
1 Wählen Sie im Bedienfeld „Dateien“ („Fenster“ > „Dateien“) eine Site mit aktiviertem Site-Cloaking aus.
2 Wählen Sie eine beliebige Datei oder einen beliebigen Ordner in der Site aus.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie
„Cloaking > „Cloaking für alles deaktivieren“.
Note: Durch diesen Schritt wird auch die Option „Cloaking von Dateien mit Erweiterung“ in der Kategorie „Cloaking“
des Dialogfelds „Site-Definition“ deaktiviert.
113
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Die Ordner- und Dateisymbole werden nun wieder ohne die roten Linien angezeigt. Dies weist darauf hin, dass das
Cloaking für alle Dateien und Ordner in der Site aufgehoben wurde.
Dateiinformationen in Design Notes speichern
Design Notes
Design Notes sind Notizen, die Sie für eine Datei erstellen. Sie gehören zwar zu der Datei, auf die sie sich beziehen,
werden jedoch in einer separaten Datei gespeichert. Im erweiterten Bedienfeld „Dateien“ sehen Sie, welche Dateien
mit Design Notes versehen sind: diejenigen, die in der Spalte „Anmerkungen“ mit einem Design Notes-Symbol
gekennzeichnet sind.
Mit Design Notes können Sie die zum Dokument gehörenden zusätzlichen Dateiinformationen verwalten, wie
beispielsweise Dateinamen von Bildquellen und Anmerkungen zum Dateistatus. Wenn Sie beispielsweise ein
Dokument von einer Site auf eine andere kopieren, können Sie für dieses Dokument Design Notes hinzufügen, die
besagen, dass das ursprüngliche Dokument sich in dem anderen Site-Ordner befindet.
Mithilfe von Design Notes können Sie zudem vertrauliche Informationen speichern, die aus Sicherheitsgründen nicht
in einem Dokument enthalten sein können. Dazu gehören beispielsweise Informationen darüber, wie ein bestimmter
Preis oder eine bestimmte Konfiguration gewählt wurde oder welche Marketing-Faktoren eine Design-Entscheidung
beeinflusst haben.
Wenn Sie eine Datei in Adobe® Fireworks® oder Flash öffnen und in einem anderen Format exportieren, wird in
Fireworks und Flash der Name der ursprünglichen Quelldatei automatisch in einer Design Notes-Datei gespeichert.
Angenommen, Sie öffnen in Fireworks die Datei „meinhaus.png“ und exportieren sie als „meinhaus.gif“. In diesem
Fall erstellt Fireworks eine Design Notes-Datei namens „meinhaus.gif.mno“. Diese Design Notes-Datei enthält den
Namen der Originaldatei in Form einer absoluten
file:-URL. Die Design Notes für die Datei „meinhaus.gif“ könnten
beispielsweise die folgende Zeile enthalten:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
In Flash könnte eine ähnliche Design Note die folgende Zeile enthalten:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Note: Damit Design Notes gemeinsam mit anderen Teammitgliedern genutzt werden können, sollte der gleiche Site-
Stammpfad definiert werden (z. B. „sites/assets/orig“).
Wenn Sie die Grafik in Dreamweaver importieren, wird die Design Notes-Datei automatisch zusammen mit der
Grafik in die Site kopiert. Wenn Sie das Bild in Dreamweaver auswählen und mit Fireworks bearbeiten möchten,
öffnet Fireworks die Originaldatei zur Bearbeitung.
More Help topics
“Externen Editor für Multimedia-Dateien starten” on page 281
Design Notes für eine Site aktivieren und deaktivieren
Design Notes sind Notizen, die mit Dateien verknüpft sind, jedoch in einer separaten Datei gespeichert werden. Mit
Design Notes werden die zum Dokument gehörenden zusätzlichen Dateiinformationen verwaltet, wie beispielsweise
Dateinamen von Bildquellen oder Anmerkungen zum Dateistatus.
114
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Sie können die Design Notes für eine Site in der Kategorie „Design Notes“ des Dialogfelds „Site-Definition“ aktivieren
und deaktivieren. Wenn Sie die Design Notes aktiviert haben, besteht auch die Möglichkeit, diese an Andere
weiterzugeben.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie im Dialogfeld „Sites verwalten“ eine Site aus und klicken Sie anschließend auf „Bearbeiten“.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie
„Design Notes“ aus.
4 Aktivieren Sie „Design Notes verwalten“, um die Verwendung von Design Notes zu aktivieren (bzw. deaktivieren
Sie die Option, wenn keine Design Notes verwendet werden sollen).
5 Wenn Sie alle lokalen Design Notes-Dateien für Ihre Site löschen möchten, klicken Sie auf „Entfernen“ und dann
auf „Ja“. (Wenn Sie Design Notes-Remote-Dateien löschen möchten, müssen Sie sie manuell löschen.)
Note: Mit dem Befehl zum Entfernen von Design Notes werden nur MNO-Dateien (Design Notes-Dateien) gelöscht. Der
Ordner „_notes“ oder die Datei „dwsync.xml“ im Ordner „_notes“ werden dagegen nicht gelöscht. Mithilfe der Datei
„dwsync.xml“ werden in Dreamweaver die Informationen zur Site-Synchronisierung verwaltet.
6 Wählen Sie „Bereitstellen von Design Notes für gemeinsame Nutzung aktivieren“ aus, um mit Ihrer Site verknüpfte
Design Notes mit den anderen Dokumenten hochzuladen, und klicken Sie auf „OK“.
• Wenn Sie diese Option aktivieren, kann das ganze Team die Design Notes nutzen. Wenn Sie eine Datei bereitstellen
oder abrufen, wird die zugehörige Design Notes-Datei automatisch von Dreamweaver bereitgestellt oder
abgerufen.
• Wenn Sie diese Option nicht aktivieren, werden die Design Notes lokal von Dreamweaver verwaltet, sie werden
aber nicht zusammen mit Ihren Dateien hochgeladen. Falls Sie alleine an Ihrer Site arbeiten, werden durch die
Deaktivierung dieser Option Dateiübertragungen beschleunigt. Die Design Notes werden nicht auf die Remote-
Site übertragen, wenn Sie Dateien einchecken bzw. bereitstellen. Sie können jedoch weiterhin Design Notes für die
Site lokal hinzufügen und modifizieren.
Design Notes mit Dateien verknüpfen
Sie können für jedes Dokument oder jede Vorlage in einer Site Design Notes erstellen. Design Notes können auch für
Applets, ActiveX-Steuerelemente, Bilder, Flash-Inhalte, Shockwave-Objekte und Bildfelder in Dokumenten erstellt
werden.
Note: Wenn Sie einer Vorlagendatei Design Notes hinzufügen, übernehmen die mit der Vorlage erstellten Dokumente
nicht die Design Notes.
1 Führen Sie einen der folgenden Schritte aus:
• Öffnen Sie die Datei im Dokumentfenster und wählen Sie dann „Datei“ > „Design Notes“.
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) und wählen Sie dann die Option „Design Notes“.
Note: Wenn die Datei sich in einer Remote-Site befindet, müssen Sie sie zunächst auschecken oder abrufen und dann im
lokalen Ordner auswählen.
2 Wählen Sie auf der Registerkarte „Basis-Info“ im Popupmenü „Status“ einen Status für das Dokument aus.
3 Klicken Sie auf das Kalendersymbol (rechts über dem Feld „Anmerkungen“), um das aktuelle Datum in die
Anmerkungen einzufügen.
4 Geben Sie im Feld „Anmerkungen“ Ihre Anmerkungen ein.
115
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
5 Aktivieren Sie die Option „Zeigen, wenn Datei geöffnet ist“, damit die Design Notes-Datei bei jedem Öffnen der
Datei angezeigt wird.
6 Klicken Sie auf der Registerkarte „Alle Informationen“ auf das Pluszeichen (+), um ein neues Schlüsselwort-Wert-
Paar hinzuzufügen. Wenn Sie ein Paar entfernen möchten, wählen Sie es aus und klicken Sie auf die Schaltfläche
mit dem Minuszeichen (-).
Sie können beispielsweise ein Schlüsselwort
Autor nennen (im Feld „Name“) und als Wert Heidi definieren (im Feld
„Wert“).
7 Klicken Sie auf „OK“, um die Notizen zu speichern.
Dreamweaver speichert die Design Notes in einem Ordner namens „_notes“. Dieser Ordner wird in dem Ordner
angelegt, in dem sich die aktuelle Datei befindet. Der Dateiname besteht aus dem Dateinamen des Dokuments sowie
der Erweiterung „.mno“. Wenn der Dateiname beispielsweise „index.html“ lautet, erhält die zugehörige Design Notes-
Datei den Namen „index.html.mno“.
More Help topics
“Dateien vom Server abrufen/auf dem Server bereitstellen” on page 90
“Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken” on page 96
Mit Design Notes arbeiten
Nachdem Sie eine Design Note mit einer Datei verknüpft haben, können Sie sie öffnen, löschen oder ihren Status
ändern.
Mit einer Datei verknüpfte Design Notes öffnen
❖ Führen Sie einen der folgenden Schritte aus, um die Design Notes zu öffnen:
• Öffnen Sie die Datei im Dokumentfenster und wählen Sie dann „Datei“ > „Design Notes“.
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) und wählen Sie dann die Option „Design Notes“.
• Doppelklicken Sie in der Spalte „Anmerkungen“ des Bedienfelds „Dateien“ auf das gelbe Design Notes-Symbol.
Note: Wählen Sie zum Anzeigen des gelben Symbols für Design Notes die Optionen „Site“ > „Sites verwalten“ > [Name
der Site] > „Bearbeiten“ > „Erweiterte Einstellungen“ > „Dateiansichtsspalten“ aus. Wählen Sie rechts in der Liste den
Eintrag „Anmerkungen“ aus und aktivieren Sie die Option „Anzeigen“. Wenn Sie nun in der Symbolleiste des Bedienfelds
„Dateien“ auf „Einblenden und lokale Site sowie Remote-Site anzeigen“ klicken, sehen Sie, dass die lokale Site um die
Spalte „Anmerkungen“ erweitert wurde und darin für jede Datei mit einer Design Note ein gelbes Design Notes-Symbol
angezeigt wird.
Benutzerdefinierten Design Notes-Status zuweisen
1 Öffnen Sie die Design Notes einer Datei oder eines Objekts (dieses Verfahren wurde im vorherigen Abschnitt
beschrieben).
2 Klicken Sie auf die Registerkarte „Alle Informationen“.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+).
4 Geben Sie im Feld „Name“ das Wort Status ein.
5 Geben Sie im Feld „Wert“ den Status ein.
Wenn bereits ein Statuswert vorhanden war, wird er durch den neuen ersetzt
116
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
6 Klicken Sie auf die Registerkarte „Basis-Info“. Sie sehen, dass der neue Statuswert im Popupmenü „Status“
angezeigt wird.
Note: Als Status kann jeweils nur ein benutzerdefinierter Wert definiert werden. Wenn Sie diese Schritte wiederholen,
ersetzt Dreamweaver den zuerst eingegebenen Statuswert durch den neu eingegebenen Statuswert.
Nicht zugeordnete Design Notes aus der Site löschen
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie die Site aus und klicken Sie auf „Bearbeiten“.
3 Wählen Sie links im Dialogfeld „Site-Definition“ in der Kategorieliste die Option „Design Notes“ aus.
4 Klicken Sie auf die Schaltfläche „Entfernen“.
Dreamweaver fragt Sie, ob die Design Notes, die nicht länger einer Datei in der Site zugeordnet sind, wirklich gelöscht
werden sollen.
Wenn Sie mit Dreamweaver eine Datei löschen, die eine zugeordnete Design Notes-Datei hat, löscht Dreamweaver die
Design Notes-Datei ebenfalls. Deswegen kommen verwaiste Design Notes-Dateien normalerweise nur dann vor,
wenn eine Datei außerhalb von Dreamweaver gelöscht oder umbenannt wird.
Note: Wenn Sie die Option „Design Notes verwalten“ deaktiviert haben, bevor Sie auf „Entfernen“ klicken, löscht
Dreamweaver alle Design Notes-Dateien der Site.
Testen der Dreamweaver-Site
Richtlinien zum Testen von Sites
Bevor Sie eine Site an einen Server übertragen und zur Ansicht freigeben, sollten Sie die Site lokal testen. (Idealerweise
sollten Sie die Site während ihres Aufbaus häufig testen und auf Fehler überprüfen. Dadurch können Probleme
frühzeitig erkannt werden und ein erneutes Auftreten des Fehlers lässt sich vermeiden.)
Die Seiten sollten genauso aussehen und funktionieren, wie dies im für sie vorgesehenen Browser zu erwarten ist. Es
sollten keine nicht funktionierenden Hyperlinks enthalten sein und die Downloadzeit sollte nicht zu lang sein. Sie
können die gesamte Site auch testen und auf Fehler überprüfen, indem Sie einen Sitebericht ausführen.
Die folgenden Richtlinien sollen Ihnen dabei helfen, eine ansprechende und gut strukturierte Site zu erstellen:
1. Stellen Sie sicher, dass die Seiten in den Zielbrowsern funktionieren.
Die Seiten sollten in Browsern, die weder Stile, Ebenen, Plug-Ins noch JavaScript unterstützen, lesbar und
funktionsfähig sein. Bei Seiten, die in älteren Browsern nicht angezeigt werden können, sollten Sie eventuell das
Verhalten „Browser überprüfen“ verwenden, um die Besucher der Site automatisch zu einer anderen Seite
weiterzuleiten.
2. Zeigen Sie eine Vorschau der Seiten in verschiedenen Browsern und Plattformen an.
Dadurch können Sie Unterschiede im Layout, bei Farben, Schriftgrößen und Standardgrößen des Browserfensters
ermitteln, die bei einer Überprüfung im Zielbrowser nicht zu erkennen sind.
117
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
3. Überprüfen Sie Ihre Site auf fehlerhafte Hyperlinks und reparieren Sie diese.
Auch andere Sites können geändert oder umstrukturiert werden, und die Seiten, auf die Hyperlinks verweisen, können
zwischenzeitlich eventuell verschoben oder gelöscht worden sein. Sie können sicherheitshalber eine
Hyperlinkprüfung durchführen.
4. Überprüfen Sie die Dateigröße der Seiten und die für den Download benötigte Zeit.
Wenn eine Seite aus einer einzigen großen Tabelle besteht, wird sie im Browser erst angezeigt, nachdem die ganze
Tabelle geladen wurde. Daher sollten Sie große Tabellen eventuell in kleinere unterteilen. Ist dies nicht möglich,
können Sie anderen, weniger umfangreichen Inhalt (wie beispielsweise eine Begrüßung oder ein Werbebanner) oben
auf der Seite und außerhalb der Tabelle platzieren. Die Besucher der Site können dann diesen Inhalt lesen, während
die Tabelle heruntergeladen wird.
5. Führen Sie zum Testen und zur Fehlersuche der ganzen Site mehrere Siteberichte durch.
Sie können die gesamte Site auf Fehler überprüfen, beispielsweise auf unbenannte Dokumente, leere Tags und
überflüssige verschachtelte Tags.
6. Überprüfen Sie den Code, um Tag- oder Syntaxfehler ausfindig zu machen.
7. Aktualisieren und warten Sie eine Site, auch nachdem sie veröffentlicht ist.
Eine Site kann auf verschiedene Weise (im Internet) veröffentlicht werden. In jedem Fall sind laufende
Wartungsarbeiten erforderlich. Das Erstellen und Einsetzen eines Systems zur Versionskontrolle ist von großer
Bedeutung. Hierfür können Sie entweder die in Dreamweaver enthaltenen Tools oder speziell dafür vorgesehene
externe Programme verwenden.
8. Nehmen Sie an den Diskussionsforen teil.
Die Dreamweaver-Diskussionsforen finden Sie auf der Adobe-Website unter
www.adobe.com/go/dreamweaver_newsgroup_de.
In den Foren finden Sie eine Fülle von Informationen zu verschiedenen Browsern, Plattformen usw. Sie können auch
technische Fragen besprechen und praktische Tipps mit anderen Dreamweaver-Benutzern austauschen.
Ein Tutorial zum Lösen von Problemen mit der Veröffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
More Help topics
“Fehlerhafte Hyperlinks reparieren” on page 310
“Hyperlinks in Dreamweaver testen” on page 304
“Verhalten „Browser überprüfen“ definieren” on page 379
“XML-Dokumente überprüfen” on page 352
“Browserkompatibilität überprüfen” on page 351
Tutorial „Probleme bei der Veröffentlichung beheben“
Berichte zum Testen von Sites verwenden
Sie können Site-Berichte über den Arbeitsablauf oder über HTML-Attribute ausführen. Sie können mithilfe des
Befehls „Berichte“ auch die Hyperlinks in Ihrer Site prüfen.
118
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
Mithilfe von Arbeitsablaufberichten können Sie die Zusammenarbeit zwischen den Mitgliedern eines Webteams
verbessern. Sie können Arbeitsablaufberichte ausführen, aus denen hervorgeht, wer eine Datei ausgecheckt hat, welche
Dateien mit Design Notes verknüpft sind und welche Dateien kürzlich geändert wurden. Sie können Design Notes-
Berichte noch verfeinern, indem Sie Name-Wert-Parameter festlegen.
Note: Um die Arbeitsablaufberichte ausführen zu können, muss eine Verbindung zur Remote-Site definiert sein.
Mit HTML-Berichten können Sie Berichte für mehrere HTML-Attribute kompilieren und erstellen. Sie können
kombinierbare verschachtelte font-Tags, fehlenden Alt-Text, redundante verschachtelte Tags, entfernbare leere Tags
und unbenannte Dokumente überprüfen.
Nachdem Sie einen Bericht erstellt haben, können Sie ihn als XML-Datei speichern und anschließend in eine Vorlage
oder in eine Datenbank bzw. ein Tabellenkalkulationsprogramm importieren und ausdrucken oder auf einer Website
anzeigen.
Note: Darüber hinaus haben Sie die Möglichkeit, über die Adobe Dreamweaver Exchange Website verschiedene
Berichtstypen zu Dreamweaver hinzuzufügen.
More Help topics
“Berichte in Dreamweaver” on page 23
“Hyperlinks in Dreamweaver testen” on page 304
“Erweiterungen in Dreamweaver hinzufügen und verwalten” on page 38
Berichte zum Testen einer Site generieren
1 Wählen Sie „Site“ > „Berichte“.
2 Wählen Sie im Popupmenü „Bericht“ aus, welche Elemente in den Bericht aufgenommen werden sollen, indem Sie
die Berichtstypen aktivieren, die ausgeführt werden sollen (Arbeitsablauf oder HTML-Berichte).
Ein Bericht zu den in der Site gewählten Dateien kann nur ausgeführt werden, wenn Sie bereits Dateien im Bedienfeld
„Dateien“ ausgewählt haben.
3 Wenn Sie einen Arbeitsablaufbericht ausgewählt haben, klicken Sie auf die Schaltfläche „Berichtseinstellungen“.
Andernfalls können Sie diesen Schritt überspringen.
Note: Bei Auswahl von mehreren Arbeitsablaufberichten müssen Sie für jeden Bericht auf die Schaltfläche
„Berichtseinstellungen“ klicken. Wählen Sie einen Bericht, klicken Sie auf „Berichtseinstellungen“ und geben Sie die
Einstellungen ein. Wiederholen Sie diesen Vorgang dann für jeden weiteren Arbeitsablaufbericht.
Ausgecheckt von Erstellt einen Bericht, der alle von einem bestimmten Teammitglied ausgecheckten Dokumente
auflistet. Geben Sie den Namen eines Teammitglieds ein und klicken Sie dann auf „OK“, um zum Dialogfeld
„Berichte“ zurückzukehren.
Design Notes Erstellt einen Bericht, der alle Design Notes für die ausgewählten Dokumente oder für die Site auflistet.
Geben Sie ein oder mehrere Name-Wert-Paare ein und wählen Sie in den entsprechenden Popupmenüs
Vergleichswerte aus. Klicken Sie dann auf „OK“, um zum Dialogfeld „Berichte“ zurückzukehren.
Zuletzt bearbeitete Erstellt einen Bericht, der die während eines bestimmten Zeitraums geänderten Dateien auflistet.
Legen Sie den Zeitraum fest und bestimmen Sie, wo die Dateien angezeigt werden sollen.
4 Sie können folgende HTML-Berichte erstellen:
Kombinierbare verschachtelte FONT-Tags Erstellt einen Bericht, der alle verschachtelten Tags aufführt, die zur
Säuberung des Codes zusammengefasst werden können.
Beispiel:
<font color="#FF0000"><font size="4">STOP!</font></font> ausgegeben.
119
VERWENDEN VON DREAMWEAVER
Dateien erstellen und verwalten
Last updated 10.4.2012
ALT-Text fehlt Erstellt eine Liste aller img-Tags, die über keinen alternativen Text verfügen.
Bei reinen Textbrowsern oder Browsern, die so eingestellt wurden, dass sie Bilder manuell herunterladen, wird anstelle
der Bilder Alternativtext angezeigt. Der Alternativtext wird von Bildschirmlesegeräten gelesen und in manchen
Browsern angezeigt, wenn der Besucher die Maus über das Bild bewegt.
Überflüssige verschachtelte Tags Erstellt einen Bericht, in dem die zu optimierenden verschachtelten Tags aufgeführt
sind.
Beispielsweise könnte dieser Bericht wie folgt lauten:
<i> Es grünt so grün, <i> wenn</i> Spaniens Blüten
blühen</i>.
Entfernbare leere Tags Erstellt einen Bericht, in dem alle leeren Tags aufgeführt werden, die zur Optimierung des
HTML-Codes entfernt werden können.
Sie könnten beispielsweise in der Codeansicht einen Eintrag oder ein Bild gelöscht und dabei die Tags nicht entfernt
haben, die damit verbunden sind.
Unbenannte Dokumente Erstellt einen Bericht, in dem alle innerhalb der ausgewählten Parameter vorgefundenen
unbenannten Dokumente aufgelistet sind. Dreamweaver führt in diesem Bericht alle Dokumente mit Standardtiteln,
mehreren title-Tags oder fehlenden title-Tags auf.
5 Klicken Sie auf „Ausführen“, um den Bericht zu erstellen.
Je nachdem, welchen Berichtstyp Sie ausführen, werden Sie möglicherweise dazu aufgefordert, Ihre Datei zu
speichern, Ihre Site zu definieren oder einen Ordner auszuwählen (falls Sie das nicht bereits getan haben).
Eine Ergebnisliste wird im Bedienfeld „Site-Berichte“ (in der Bedienfeldgruppe „Ergebnisse“) angezeigt.
Berichte verwenden und speichern
1 Führen Sie einen Bericht aus (siehe vorangegangene Anleitung).
2 Führen Sie im Bedienfeld „Site-Berichte“ einen der folgenden Schritte aus, um den Bericht anzuzeigen:
• Klicken Sie auf die Überschrift der Spalte, deren Ergebnisse sortiert werden sollen:
Sie können nach Dateiname, Zeilennummer oder Beschreibung sortieren. Darüber hinaus können Sie mehrere
unterschiedliche Berichte ausführen und diese geöffnet lassen.
• Wählen Sie eine beliebige Zeile im Bericht aus und klicken Sie links im Bedienfeld „Site-Berichte“ auf die
Schaltfläche „Weitere Informationen“, um eine Problembeschreibung anzuzeigen.
• Doppelklicken Sie auf eine beliebige Zeile im Bericht, um den entsprechenden Code im Dokumentfenster
anzuzeigen.
Note: Wenn die Entwurfsansicht aktiv ist, ändert Dreamweaver die Anzeige in eine geteilte Ansicht, um das gemeldete
Problem im Code anzuzeigen.
3 Klicken Sie auf „Bericht speichern“, um den Bericht zu speichern.
Wenn Sie einen Bericht speichern, können Sie ihn in eine vorhandene Vorlagendatei importieren. Sie können diese
Vorlagendatei dann in eine Datenbank oder ein Tabellenkalkulationsprogramm importieren und ausdrucken oder
den Bericht in einer Website anzeigen.
Verwenden Sie nach der Ausführung von HTML-Berichten den Befehl zum Bereinigen von HTML, um im Bericht
aufgeführte HTML-Fehler zu korrigieren.
120
Last updated 10.4.2012
Chapter 5: Verwalten von Elementen und
Bibliotheken
Elemente und Bibliotheken
Elemente
Mithilfe von Adobe® Dreamweaver® CS5 können Sie die auf der Site gespeicherten Elemente, z. B. Bilder, Filme,
Farben, Skripts und Hyperlinks, verwalten und in der Vorschau anzeigen. Sie können ein Element auch durch Ziehen
direkt in einer Seite des aktuellen Dokuments einfügen.
Sie können Elemente aus unterschiedlichen Quellen verwenden. Beispielsweise können Sie Elemente in einer
Anwendung wie Adobe® Fireworks® oder Adobe® Flash® erstellen, von einem Mitarbeiter erhalten oder von einer
Clipart-CD oder Grafikwebsite kopieren.
In Dreamweaver haben Sie außerdem Zugriff auf zwei spezielle Arten von Elementen: Bibliotheken und Vorlagen. Bei
beiden handelt es sich um verknüpfte Elemente: Wenn Sie Bibliothekselemente oder Vorlagen bearbeiten, werden in
Dreamweaver alle Dokumente aktualisiert, in denen diese Elemente verwendet werden. Bibliothekselemente sind im
Allgemeinen kleine Designelemente, beispielsweise das Logo einer Site oder Copyright-Hinweise. Mithilfe von
Vorlagen können Sie größere Designbereiche verwalten.
More Help topics
“Dreamweaver-Vorlagen” on page 420
Bibliothekselemente
Eine Bibliothek ist eine spezielle Dreamweaver-Datei mit einer Sammlung einzelner Elemente oder Elementkopien,
die Sie auf Webseiten einfügen können. Die Elemente in einer Bibliothek werden als Bibliothekselemente bezeichnet.
Zu den Elementen, die in einer Bibliothek gespeichert werden können, zählen u. a. Bilder, Tabellen, Audiodateien und
mit Adobe Flash erstellte Dateien. Nach jeder Bearbeitung eines Bibliothekselements können Sie automatisch alle
Seiten aktualisieren, in denen das entsprechende Element verwendet wird.
Wenn Sie beispielsweise eine umfangreiche Site für ein Unternehmen erstellen, dessen Slogan auf allen Seiten
angezeigt werden soll, können Sie ein Bibliothekselement mit dem Slogan erstellen und auf jeder Seite verwenden.
Wenn sich der Slogan ändert, können Sie das Bibliothekselement ändern und automatisch alle Seiten aktualisieren, in
denen das Element verwendet wird.
In Dreamweaver werden Bibliothekselemente im Ordner „Library“ im lokalen Stammordner jeder Site gespeichert.
Jede Site verfügt über eine eigene Bibliothek.
Ein Bibliothekselement können Sie aus jedem Element im
body-Abschnitt eines Dokuments erstellen, z. B. aus Text,
Tabellen, Formularen, Java-Applets, Plug-Ins, ActiveX-Elementen, Navigationsleisten und Bildern.
Bei verknüpften Elementen wie Bildern ist in der Bibliothek nur ein Verweis auf das Element gespeichert. Die
Originaldateien müssen an dem angegebenen Ort verbleiben, damit die Bibliothekselemente ordnungsgemäß
funktionieren.
121
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Dennoch kann es sinnvoll sein, Bilder in einem Bibliothekselement zu speichern. So könnten Sie beispielsweise ein
img-Tag in einem Bibliothekselement speichern, wodurch Sie den alt-Text oder gar das src-Attribut des Bilds in der
gesamten Site auf einfache Weise ändern können. (Sie sollten jedoch mit diesem Verfahren nicht die Attribute für die
Breite und Höhe eines Bildes ändern, soweit Sie nicht die tatsächliche Größe des Bildes mithilfe eines Bildeditors
kontrollieren können.)
Note: Beachten Sie, dass bei einem Bibliothekselement mit Hyperlinks diese Hyperlinks auf der neuen Site möglicherweise
nicht funktionieren. Zudem werden Bilder in einem Bibliothekselement nicht auf die neue Site kopiert.
Bei Verwendung eines Bibliothekselements wird in Dreamweaver auf der Webseite eine Verknüpfung mit dem
Bibliothekselement und nicht das Element selbst eingefügt. In Dreamweaver wird demnach eine Kopie des HTML-
Quellcodes dieses Elements in das Dokument eingefügt und ein HTML-Kommentar mit einem Verweis auf das
externe Originalelement hinzugefügt. Dieser externe Verweis ermöglicht die automatische Aktualisierung.
Wenn Sie ein Bibliothekselement erstellen, das ein Element mit einem angefügten Dreamweaver-Verhalten enthält,
werden durch Dreamweaver das Element und der zugehörige Event-Handler (das Attribut, das angibt, welches
Ereignis die Aktion auslöst, z. B.
onClick, onLoad oder onMouseOver, und welche Aktion beim Auftreten des
Ereignisses aufgerufen werden soll) in die Datei des Bibliothekselements kopiert. Dabei werden in Dreamweaver die
zugehörigen JavaScript-Funktionen nicht in das Bibliothekselement kopiert. Stattdessen fügt Dreamweaver, wenn Sie
das Bibliothekselement in ein Dokument einfügen, automatisch die entsprechenden JavaScript-Funktionen in den
head-Abschnitt dieses Dokuments ein (soweit sie dort nicht bereits vorhanden sind).
Note: JavaScript-Code, der ohne Verwendung der Dreamweaver-Verhalten erstellt wurde, kann in einem
Bibliothekselement eingefügt werden, wenn er über das Verhalten „JavaScript aufrufen“ ausgeführt wird. Wenn Sie kein
Dreamweaver-Verhalten zum Ausführen des Codes verwenden, wird dieser nicht als Bestandteil des Bibliothekselements
beibehalten.
Für die Bearbeitung der Verhalten in Bibliothekselementen gelten besondere Anforderungen. Bibliothekselemente
können keine Stylesheets enthalten, da der Code für diese Objekte zum
head-Abschnitt gehört.
More Help topics
“Verhalten in einem Bibliothekselement bearbeiten” on page 132
Elemente verwenden
Überblick über das Bedienfeld „Elemente“
Im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) können Sie die Elemente in der aktuellen Site verwalten. Im
Bedienfeld „Elemente“ werden Elemente der Site angezeigt, die zu dem im Dokumentfenster aktiven Dokument
gehört.
Note: Sie müssen eine lokale Site definieren, bevor Sie Elemente im Bedienfeld „Elemente“ anzeigen können.
122
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Bedienfeld „Elemente“ mit angezeigter Siteliste. Die Symbole für die Kategorien werden links angezeigt. Der Vorschaubereich befindet sich
oberhalb der Liste.
Über das Bedienfeld „Elemente“ können Elemente auf zwei Arten angezeigt werden:
Siteliste Zeigt alle Elemente der Site an, einschließlich der Farben und URLs, die in den Dokumenten der Site
verwendet werden.
Favoritenliste Zeigt nur die Elemente an, die Sie ausdrücklich ausgewählt haben.
Wenn Sie zwischen diesen beiden Ansichten wechseln möchten, aktivieren Sie im Vorschaubereich entweder das
Optionsfeld „Site“ oder „Favoriten“. (Die beiden Ansichten sind bei den Kategorien „Vorlagen“ und „Bibliothek“
nicht verfügbar.)
Note: Die meisten Vorgänge im Bedienfeld „Elemente“ können in beiden Listen durchgeführt werden. Einige Aufgaben
können jedoch nur in der Favoritenliste ausgeführt werden.
In beiden Listen sind Elemente einer der folgenden Kategorien zugeordnet:
Bilder Bilddateien im GIF-, JPEG- oder PNG-Format.
Farben Farben, die in Dokumenten und Stylesheets verwendet werden, darunter Text-, Hintergrund- und
Hyperlinkfarben.
URLs Externe Hyperlinks in den Dokumenten der aktuellen Site, einschließlich Hyperlinks für FTP, Gopher,
HTTP, HTTPS, JavaScript, E-Mail (
mailto) und lokale Dateien (file://).
Flash Dateien in allen Adobe Flash-Versionen. Im Bedienfeld „Elemente“ werden nur SWF-Dateien (mit Flash
erstellte, komprimierte Dateien) und keine FLA-Dateien (Flash-Quelldateien) angezeigt.
Shockwave Dateien in allen Adobe Shockwave-Versionen.
Filme QuickTime- oder MPEG-Dateien.
Skripts JavaScript- oder VBScript-Dateien. Skripts in HTML-Dateien (im Gegensatz zu unabhängigen
JavaScript- oder VBScript-Dateien) werden im Bedienfeld „Elemente“ nicht angezeigt.
Vorlagen Masterseiten-Layouts, die auf mehreren Seiten verwendet werden. Beim Ändern einer Vorlage werden
automatisch alle mit der Vorlage verbundenen Seiten geändert.
Bibliothekselemente Designelemente, die auf mehreren Seiten verwendet werden. Wenn Sie Änderungen an
einem Bibliothekselement vornehmen, werden alle Seiten aktualisiert, die dieses Element enthalten.
123
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Note: Damit eine Datei im Bedienfeld „Elemente“ angezeigt wird, muss sie einer dieser Kategorien angehören. Einige
andere Dateitypen werden zwar manchmal auch als Elemente bezeichnet, werden jedoch nicht im Bedienfeld „Elemente“
angezeigt.
In der Standardeinstellung sind Elemente in einer Kategorie alphabetisch nach Namen aufgeführt, sie können jedoch
auch nach Typ oder anderen Kriterien sortiert werden. Darüber hinaus können Sie Elemente in der Vorschau anzeigen
sowie die Größe der Spalten und des Vorschaubereichs ändern.
More Help topics
“Erstellen und Verwalten einer Liste mit Favoritenelementen” on page 126
“Verwenden von Bibliothekselementen” on page 128
Elemente im Vorschaubereich anzeigen
❖ Wählen Sie das entsprechende Element im Bedienfeld „Elemente“ aus.
Wenn Sie beispielsweise ein Filmelement auswählen, wird im Vorschaubereich ein Symbol angezeigt. Sie können den
Film wiedergeben, indem Sie oben rechts im Vorschaubereich auf die Schaltfläche „Abspielen“ (grünes Dreieck)
klicken.
Elemente in einer Kategorie anzeigen
❖ Klicken Sie im linken Bereich des Bedienfelds „Elemente“ auf das Symbol der entsprechenden Kategorie.
Elemente sortieren
❖ Klicken Sie auf eine Spaltenüberschrift.
Wenn Sie beispielsweise die Liste der Bilder nach Typ sortieren möchten (sodass alle GIF-Bilder, alle JPEG-Bilder usw.
jeweils untereinander aufgeführt werden), klicken Sie auf die Spaltenüberschrift „Typ“.
Größe von Spalten ändern
❖ Ziehen Sie die Trennlinie zwischen zwei Spaltenüberschriften in die gewünschte Richtung.
Größe des Vorschaubereichs ändern
❖ Ziehen Sie die Trennleiste (zwischen dem Vorschaubereich und der Elementliste) nach oben oder unten.
Bedienfeld „Elemente“ aktualisieren
Die Erstellung der Siteliste kann einen Moment dauern, da in Dreamweaver zuerst der Site-Cache gelesen werden muss.
Bestimmte Änderungen werden nicht sofort im Bedienfeld „Elemente“ angezeigt. Beim Hinzufügen oder Entfernen
eines Elements auf einer Site werden die Änderungen im Bedienfeld „Elemente“ beispielsweise erst angezeigt, wenn
Sie die Siteliste aktualisieren, indem Sie auf die Schaltfläche „Siteliste aktualisieren“ klicken. Wenn Sie Elemente
außerhalb von Dreamweaver hinzufügen oder entfernen, z. B. über Windows Explorer oder den Finder, müssen Sie
den Site-Cache neu erstellen, um das Bedienfeld „Elemente“ zu aktualisieren.
Wenn Sie die einzige Instanz einer bestimmten Farbe oder URL aus einer Site entfernen oder eine neue Datei
speichern, die eine bisher nicht verwendete Farbe oder URL enthält, werden die Änderungen im Bedienfeld
„Elemente“ erst wirksam, wenn Sie die Siteliste aktualisieren.
• Klicken Sie auf die Schaltfläche „Siteliste aktualisieren“ , um die Siteliste manuell zu aktualisieren. In
Dreamweaver wird der Site-Cache gegebenenfalls erstellt oder aktualisiert.
124
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die
Elementliste und klicken Sie dann auf „Siteliste aktualisieren“, um die Siteliste zu aktualisieren und den Site-Cache
neu zu erstellen.
Elemente in ein Dokument einfügen
Sie können die meisten Elemente in ein Dokument einfügen, indem Sie sie mit der Maus in die Codeansicht oder
Entwurfsansicht des Dokumentfensters ziehen oder indem Sie im Bedienfeld auf die Schaltfläche „Einfügen“ klicken.
Farben und URLs können Sie entweder einfügen oder auf ausgewählten Text in der Entwurfsansicht anwenden. (URLs
können auch auf andere Elemente in der Entwurfsansicht angewendet werden, z. B. auf Bilder.)
1 Setzen Sie die Einfügemarke in der Entwurfsansicht an die Stelle, an der Sie das Element einfügen möchten.
2 Wählen Sie im Bedienfeld „Elemente“ im linken Bereich das Symbol für die gewünschte Elementkategorie aus.
Note: Sie können jede Kategorie mit Ausnahme von „Vorlagen“ auswählen. Eine Vorlage kann nur auf ein gesamtes
Dokument angewendet und nicht in ein Dokument eingefügt werden.
3 Wählen Sie im oberen Bereich des Bedienfelds die Option „Site“ oder „Favoriten“ und anschließend das
einzufügende Element aus.
Bei Bibliothekselementen steht weder die Siteliste noch die Favoritenliste zur Verfügung. Überspringen Sie diesen
Schritt, wenn Sie ein Bibliothekselement einfügen.
4 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie das Element aus dem Bedienfeld in das Dokument.
Skripts können in den head-Inhaltsbereich des Dokumentfensters gezogen werden. Wenn dieser Bereich nicht
angezeigt wird, wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
• Wählen Sie im Bedienfeld das entsprechende Element aus und klicken Sie auf „Einfügen“.
Wenn es sich bei dem eingefügten Element um eine Farbe handelt, wird diese auf den hinter der Einfügemarke
angezeigten Text angewendet.
Farben im Bedienfeld „Elemente“ auf Text anwenden
Im Bedienfeld „Elemente“ werden die Farben angezeigt, die bereits auf die verschiedenen Objekte angewendet
wurden, z. B. auf Text, Tabellenränder oder den Hintergrund.
1 Wählen Sie den Text im Dokument aus.
2 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Farben“ aus.
3 Wählen Sie die gewünschte Farbe aus und klicken Sie auf „Anwenden“.
More Help topics
“Favoritenelemente hinzufügen oder entfernen” on page 127
URLs im Bedienfeld „Elemente“ auf Bilder oder Text anwenden
1 Wählen Sie den Text oder das Bild aus.
2 Wählen Sie im Bedienfeld „Elemente“ entsprechend dem Speicherort der URL entweder in der Ansicht „Sites“ oder
„Favoriten“ die Kategorie „URLs“ aus.
Note: In der Standardeinstellung werden die URLs für die Dateien Ihrer Site in der Ansicht „Sites“ gespeichert. In der
Ansicht „Favoriten“ finden Sie die URLs, die Sie selbst hinzugefügt haben.
125
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
3 Wählen Sie die gewünschte URL aus.
4 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie die URL aus dem Bedienfeld in die Auswahl der Entwurfsansicht.
• Wählen Sie die URL aus und klicken Sie dann auf die Schaltfläche „Einfügen“.
Elemente auswählen und bearbeiten
Über das Bedienfeld „Elemente“ können Sie mehrere Elemente gleichzeitig auswählen. Außerdem können Sie über das
Bedienfeld „Elemente“ schnell Elemente bearbeiten.
More Help topics
“Externen Editor für Multimedia-Dateien starten” on page 281
Mehrere Elemente auswählen
1 Wählen Sie im Bedienfeld „Elemente“ ein Element aus.
2 Führen Sie dann einen der folgenden Schritte aus, um weitere Elemente auszuwählen:
• Klicken Sie bei gedrückter Umschalttaste, um mehrere aufeinanderfolgende Elemente auszuwählen.
• Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh), um ein einzelnes Element
auszuwählen (dabei spielt es keine Rolle, ob sich das Element direkt neben der vorhandenen Auswahl befindet oder
nicht). Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und klicken Sie auf ein
ausgewähltes Element, um die Auswahl aufzuheben.
Elemente bearbeiten
Beim Bearbeiten eines Elements im Bedienfeld „Elemente“ ändert sich das Verhalten je nach Elementart. Bei einigen
Elementen, z. B. Bildern, wird automatisch ein externer Editor geöffnet, wenn für die entsprechende Elementart ein
Editor festgelegt wurde. Farben und URLs können nur in der Favoritenliste bearbeitet werden. Beim Bearbeiten von
Vorlagen und Bibliothekselementen werden die Änderungen in Dreamweaver vorgenommen.
1 Führen Sie im Bedienfeld „Elemente“ einen der folgenden Schritte aus:
• Doppelklicken Sie auf das gewünschte Element.
• Wählen Sie das Element aus und klicken Sie dann auf die Schaltfläche „Bearbeiten“ .
Note: Wenn das Element in einem externen Editor bearbeitet werden muss und der Editor nicht automatisch geöffnet
wird, wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh)
und anschließend die Kategorie „Dateitypen/Editoren“ aus. Stellen Sie dann sicher, dass für diese Elementart ein externer
Editor definiert ist.
2 Nehmen Sie die gewünschten Änderungen vor.
3 Führen Sie abschließend einen der folgenden Schritte aus:
• Wenn es sich bei dem Element um eine Datei handelt (alle Elemente außer Farben und URLs), speichern und
schließen Sie die Datei mit dem entsprechenden Editor.
• Wenn das Element eine URL ist, klicken Sie im Dialogfeld „URL bearbeiten“ auf „OK“.
Note: Wenn das Element eine Farbe ist, wird der Farbwähler nach der Auswahl einer Farbe automatisch geschlossen.
Wenn Sie den Farbwähler schließen möchten, ohne eine Farbe auszuwählen, drücken Sie die Esc-Taste.
126
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Elemente auf anderen Sites wiederverwenden
Im Bedienfeld „Elemente“ werden alle Elemente erkannter Typen angezeigt, die auf der aktuellen Site vorhanden sind.
Wenn Sie ein Element aus der aktuellen Site in einer anderen Site verwenden möchten, müssen Sie es in die andere
Site kopieren. Sie können ein einzelnes Element, eine Gruppe von Elementen oder einen ganzen Favoritenordner auf
einmal kopieren.
Möglicherweise müssen Sie im Bedienfeld „Dateien“ zunächst die Datei suchen, die dem gewünschten Element im
Bedienfeld „Elemente“ entspricht, bevor Sie das Element auf oder von der Remote-Site übertragen können.
Note: Im Bedienfeld „Dateien“ wird unter Umständen eine andere Site angezeigt als im Bedienfeld „Elemente“. Der
Grund hierfür besteht darin, dass das Bedienfeld „Elemente“ mit dem aktiven Dokument verknüpft ist.
Datei eines Elements im Bedienfeld „Dateien“ suchen
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie des zu suchenden Elements aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) im Bedienfeld
„Elemente“ auf den Namen oder das Symbol des Elements und wählen Sie dann im Kontextmenü den Befehl „In
der Site suchen“ aus.
Note: Der Befehl „In der Site suchen“ ist bei Farben und URLs nicht verfügbar, da diese Elemente nicht in Dateien auf
der Site gespeichert sind.
Im daraufhin geöffneten Bedienfeld „Dateien“ wird die Datei des ausgewählten Elements angezeigt. Über den Befehl
„In der Site suchen“ wird die Datei gesucht, die dem Element selbst entspricht. Die Dateien, in denen das Element
verwendet wird, werden dagegen nicht gesucht.
Elemente aus dem Bedienfeld „Elemente“ auf eine andere Site kopieren
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie des zu kopierenden Elements aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in der Siteliste oder
Favoritenliste auf eines oder mehrere Elemente, wählen Sie „Zur Site kopieren“ und dann im Untermenü mit allen
definierten Sites den Namen der Zielsite aus.
Note: In der Favoritenliste können Sie einen Favoritenordner und einzelne Elemente kopieren.
Die Elemente werden in die entsprechenden Speicherorte auf der Zielsite kopiert. In Dreamweaver werden in der
Ordnerhierarchie der Zielsite gegebenenfalls neue Ordner erstellt. Die Elemente werden zudem in die Favoritenliste
der Zielsite eingefügt.
Note: Wenn es sich bei dem kopierten Element um eine Farbe oder URL handelt, wird es nur in der Favoritenliste der
Zielsite angezeigt. Da für Farben und URLs keine Dateien vorliegen, kann keine entsprechende Datei auf die andere Site
kopiert werden.
Erstellen und Verwalten einer Liste mit
Favoritenelementen
Favoritenelemente verwalten
Die vollständige Liste aller erkannten Elementlisten kann bei umfangreichen Sites unübersichtlich werden. Sie können
häufig verwendete Elemente in einer Favoritenliste einfügen, zusammengehörige Elemente in Gruppen
zusammenfassen und den Elementen aussagekräftige Kurznamen zuweisen, um die entsprechenden Elemente im
Bedienfeld „Elemente“ dann schnell zu finden.
127
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Note: Favoritenelemente werden nicht als separate Dateien auf der Festplatte gespeichert. Sie sind nur Verweise auf
Elemente in der Siteliste. Dreamweaver verwaltet die Elemente so, dass immer die korrekten Elemente aus der Siteliste in
der Favoritenliste angezeigt werden.
Die meisten Vorgänge im Bedienfeld „Elemente“ sind in der Favoritenliste und der Siteliste identisch. Einige Tasks
können allerdings nur in der Favoritenliste durchgeführt werden.
Favoritenelemente hinzufügen oder entfernen
Im Bedienfeld „Elemente“ haben Sie mehrere Möglichkeiten, um Elemente in die Favoritenliste einer Site einzufügen.
Das Hinzufügen einer Farbe oder URL zur Favoritenliste erfordert einen zusätzlichen Schritt. In der Siteliste können
keine neuen Farben oder URLs eingefügt werden, da sie ausschließlich Elemente enthält, die bereits auf der Site
verwendet werden.
Note: Für Vorlagen und Bibliothekselemente stehen keine Favoritenlisten zur Verfügung.
More Help topics
“Überblick über das Bedienfeld „Elemente“” on page 121
“Farbauswahl verwenden” on page 235
Elemente zur Favoritenliste hinzufügen
Führen Sie einen der folgenden Schritte aus:
• Wählen Sie in der Siteliste des Bedienfelds „Elemente“ mindestens ein Element aus und klicken Sie dann auf die
Schaltfläche „Zu Favoriten hinzufügen“ .
• Wählen Sie in der Siteliste des Bedienfelds „Elemente“ mindestens ein Element aus, klicken Sie mit der rechten
Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie „Zu Favoriten hinzufügen“.
• Wählen Sie im Bedienfeld „Dateien“ mindestens ein Element aus, klicken Sie mit der rechten Maustaste (Windows)
bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie „Zu Favoriten hinzufügen“. In Dreamweaver werden
Dateien ignoriert, die keiner Kategorie im Bedienfeld „Elemente“ entsprechen.
• Klicken Sie in der Entwurfsansicht des Dokumentfensters mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf ein Element. Wählen Sie dann im Kontextmenü den Befehl aus, über den
das Element in die entsprechende Favoritenkategorie eingefügt wird.
Das Kontextmenü für Text enthält den Befehl „Zu Farbfavoriten hinzufügen“ oder „Zu URL-Favoriten
hinzufügen“, je nachdem, ob an den Text ein Hyperlink angefügt ist oder nicht. Sie können nur Elemente
hinzufügen, die einer der Kategorien im Bedienfeld „Elemente“ entsprechen.
Neue Farben oder URLs zur Favoritenliste hinzufügen
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Farben“ oder „URLs“ aus.
2 Wählen Sie im oberen Bereich des Bedienfelds die Option „Favoriten“ aus.
3 Klicken Sie auf die Schaltfläche „Neue Farbe“ oder „Neue URL“ .
4 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie mit dem Farbwähler eine Farbe aus und weisen Sie der Farbe dann gegebenenfalls einen Kurznamen zu.
Wenn Sie den Farbwähler schließen möchten, ohne eine Farbe auszuwählen, drücken Sie die Esc-Taste oder klicken
Sie auf die graue Leiste oben im Farbwähler.
• Geben Sie im Dialogfeld „URL hinzufügen“ eine URL und einen Kurznamen ein und klicken Sie dann auf „OK“.
128
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Elemente aus der Favoritenliste entfernen
1 Wählen Sie im oberen Bereich des Bedienfelds „Elemente“ die Option „Favoriten“ aus.
2 Wählen Sie in der Favoritenliste ein oder mehrere Elemente (oder einen Ordner) aus.
3 Klicken Sie auf die Schaltfläche „Aus Favoriten entfernen“ .
Daraufhin werden die Elemente aus der Favoritenliste, jedoch nicht aus der Siteliste entfernt. Wenn Sie einen
Favoritenordner löschen, werden der Ordner und sein gesamter Inhalt entfernt.
Kurznamen für Favoritenelemente erstellen
Kurznamen (z. B. „PageBackgroundColor“ anstatt „#999900“) können Elementen nur in der Favoritenliste
zugewiesen werden. In der Siteliste sind Elemente immer mit ihren tatsächlichen Dateinamen (bei Farben und URLs
mit den tatsächlichen Werten) aufgeführt.
1 Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) die Kategorie des gewünschten Elements aus.
2 Wählen Sie im oberen Bereich des Bedienfelds die Option „Favoriten“ aus.
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) im Bedienfeld
„Elemente“ auf den Namen oder das Symbol des Elements und wählen Sie dann „Kurznamen bearbeiten“ aus.
• Klicken Sie auf den Namen des Elements und klicken Sie nach einer Pause erneut auf den Namen. (Doppelklicken
Sie nicht auf den Namen, da dadurch das Element zum Bearbeiten geöffnet wird.)
4 Geben Sie den Kurznamen für das Element ein und drücken Sie dann die Eingabetaste.
More Help topics
“Überblick über das Bedienfeld „Elemente“” on page 121
Elemente in Favoritenordnern gruppieren
Wenn Sie ein Element in einen Favoritenordner einfügen, wird der Speicherort der entsprechenden Datei auf dem
Datenträger nicht geändert.
1 Wählen Sie im oberen Bereich des Bedienfelds „Elemente“ die Option „Favoriten“ aus.
2 Klicken Sie auf die Schaltfläche „Neuer Favoritenordner“ .
3 Geben Sie den Kurznamen für den Ordner ein und drücken Sie dann die Eingabetaste (Windows) bzw. Return
(Macintosh).
4 Ziehen Sie die gewünschten Elemente in den Ordner.
Verwenden von Bibliothekselementen
Bibliothekselemente erstellen
Bibliothekselemente sind Elemente, die auf einer Website wiederverwendet oder häufig aktualisiert werden.
More Help topics
“Bibliothekselemente” on page 120
129
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Auf einer Auswahl basierende Bibliothekselemente erstellen
1
Wählen Sie im Dokumentfenster einen Dokumentabschnitt aus, der als Bibliothekselement gespeichert werden soll.
2 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie die Auswahl in die Kategorie „Bibliothek“ .
• Klicken Sie unten in der Kategorie „Bibliothek“ auf die Schaltfläche „Neues Bibliothekselement“ .
• Wählen Sie „Modifzieren“ > „Bibliothek“ > „Objekt in Bibliothek einfügen“ aus.
3 Geben Sie einen Namen für das neue Bibliothekselement ein und drücken Sie dann die Eingabetaste (Windows)
bzw. Return (Macintosh).
In Dreamweaver wird jedes Bibliothekselement als separate Datei (mit der Dateinamenerweiterung .lbi) im Ordner
„Library“ gespeichert, der sich im lokalen Stammverzeichnis der Site befindet.
Leere Bibliothekselemente erstellen
1 Stellen Sie sicher, dass im Dokumentfenster kein Objekt ausgewählt ist.
Wenn ein Objekt ausgewählt ist, wird es in das neue Bibliothekselement eingefügt.
2 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
3 Klicken Sie im unteren Bereich des Bedienfelds auf die Schaltfläche „Neues Bibliothekselement“ .
4 Geben Sie für das noch ausgewählte Element einen Namen ein und drücken Sie dann die Eingabetaste (Windows)
bzw. Return (Macintosh).
Bibliothekselemente in Dokumente einfügen
Wenn Sie ein Bibliothekselement in eine Seite einfügen, wird der tatsächliche Inhalt zusammen mit einem Verweis auf
das Originalelement eingefügt.
1 Setzen Sie die Einfügemarke in das Dokumentfenster.
2 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
3 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie ein Bibliothekselement vom Bedienfeld „Elemente“ in das Dokumentfenster.
Wenn Sie den Inhalt eines Bibliothekselements ohne Verweis auf das Element im Dokument einfügen möchten, drücken
Sie die Strg-Taste (Windows) bzw. die Wahltaste (Macintosh), während Sie das Element aus dem Bedienfeld „Elemente“
ziehen. Wenn Sie ein Element auf diese Weise einfügen, können Sie es im Dokument bearbeiten. Das Dokument wird jedoch
nicht aktualisiert, wenn Sie Seiten aktualisieren, auf denen das Bibliothekselement verwendet wird.
• Wählen Sie ein Bibliothekselement aus und klicken Sie auf „Einfügen“.
Bibliothekselemente bearbeiten und Dokumente aktualisieren
Wenn Sie ein Bibliothekselement bearbeiten, können Sie alle Dokumente aktualisieren, die dieses Element enthalten.
Wenn Sie keine Aktualisierung durchführen möchten, bleiben die Dokumente mit dem Bibliothekselement verknüpft.
Sie können sie dann später aktualisieren.
Sie können Bibliothekselemente umbenennen, um die Verknüpfung mit Dokumenten oder Vorlagen aufzuheben,
Elemente in der Sitebibliothek löschen und fehlende Bibliothekselemente neu erstellen.
130
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Note: Beim Bearbeiten eines Bibliothekselements ist das Bedienfeld „CSS-Stile“ nicht verfügbar, da Bibliothekselemente
nur
body-Elemente enthalten können und CSS-Code im head-Bereich eines Dokuments eingefügt wird. Außerdem ist
das Dialogfeld „Seiteneigenschaften“ nicht verfügbar, da Bibliothekselemente keine
body-Tags oder deren Attribute
enthalten können.
Bibliothekselemente bearbeiten
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
2 Wählen Sie ein Bibliothekselement aus.
3 Klicken Sie entweder auf die Schaltfläche „Bearbeiten“ oder doppelklicken Sie auf das Bibliothekselement.
In Dreamweaver wird ein dem Dokumentfenster entsprechendes neues Fenster geöffnet, in dem das
Bibliothekselement bearbeitet werden kann. Durch den grauen Hintergrund wird angegeben, dass ein
Bibliothekselement und kein Dokument bearbeitet wird.
4 Nehmen Sie die gewünschten Änderungen vor und speichern Sie sie dann.
5 Geben Sie an, ob die Dokumente auf der lokalen Site aktualisiert werden sollen, auf denen das Bibliothekselement
verwendet wird. Wählen Sie „Aktualisieren“ aus, damit die Dokumente sofort aktualisiert werden. Wenn Sie
„Nicht aktualisieren“ auswählen, werden die Dokumente erst aktualisiert, wenn Sie „Modifizieren“ >
„Bibliothek“ > „Aktuelle Seite aktualisieren“ oder „Seiten aktualisieren“ auswählen.
Aktuelles Dokument zur Verwendung der aktuellen Version aller Bibliothekselemente
aktualisieren
❖ Wählen Sie „Modifizieren“ > „Bibliothek“ > „Aktuelle Seite aktualisieren“ aus.
Gesamte Site oder alle Dokumente mit einem bestimmten Bibliothekselement aktualisieren
1 Wählen Sie „Modifizieren“ > „Bibliothek“ > „Seite aktualisieren“ aus.
2 Geben Sie im Popupmenü „Suchen in“ die zu aktualisierenden Objekte an:
• Wenn alle Seiten der ausgewählten Site aktualisiert werden sollen, sodass die aktuelle Version aller
Bibliothekselemente verwendet wird, wählen Sie „Gesamte Site“ und anschließend im daneben angezeigten
Popupmenü den Namen der Site aus.
• Wenn alle Seiten der aktuellen Site aktualisiert werden sollen, in denen das Bibliothekselement verwendet wird,
wählen Sie „Dateien mit“ und anschließend im daneben angezeigten Popupmenü den Namen eines
Bibliothekselements aus.
3 Achten Sie darauf, dass unter „Aktualisieren“ das Kontrollkästchen „Bibliothekselemente“ aktiviert ist.
Wenn Sie gleichzeitig Vorlagen aktualisieren möchten, wählen Sie auch „Vorlagen“ aus.
4 Klicken Sie auf „Starten“.
Die Dateien werden in Dreamweaver entsprechend den Angaben aktualisiert. Wenn die Option „Protokoll anzeigen“
aktiviert ist, wird in Dreamweaver ein Bericht mit den erfolgreich aktualisierten Dateien sowie anderen Informationen
generiert.
Bibliothekselemente umbenennen
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
2 Wählen Sie das Bibliothekselement aus und klicken Sie nach einer Pause erneut auf das Element. (Doppelklicken
Sie nicht auf den Namen, da dadurch das Element zum Bearbeiten geöffnet wird.)
131
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
3 Geben Sie einen neuen Namen ein.
4 Klicken Sie auf eine andere Stelle oder drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
5 Geben Sie an, ob Dokumente aktualisiert werden sollen, in denen das Bibliothekselement verwendet wird. Wählen
Sie dazu entweder „Aktualisieren“ oder „Nicht aktualisieren“ aus.
Bibliothekselemente in einer Bibliothek löschen
Wenn Sie ein Bibliothekselement löschen, wird es in Dreamweaver aus der Bibliothek entfernt. Der Inhalt der
Dokumente, in denen das Element verwendet wird, ändert sich jedoch nicht.
1 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
2 Wählen Sie das entsprechende Bibliothekselement aus.
3 Klicken Sie entweder auf die Schaltfläche „Löschen“, oder drücken Sie die Entf-Taste und bestätigen Sie dann, dass
das Element gelöscht werden soll.
Important: Ein gelöschtes Bibliothekselement kann nicht wiederhergestellt werden. Es kann jedoch neu erstellt werden.
Fehlende oder gelöschte Bibliothekselemente neu erstellen
1 Wählen Sie in einem Ihrer Dokumente eine Instanz des Elements aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche „Neu erstellen“.
Markierung von Bibliothekselementen anpassen
Über die Markierungsvoreinstellungen können Sie die Markierungsfarbe für Bibliothekselemente anpassen sowie die
Markierung ein- oder ausblenden.
More Help topics
“Farbauswahl verwenden” on page 235
Markierungsfarbe für Bibliothekselemente ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie im linken Bereich des Dialogfelds „Voreinstellungen“ in der Liste die Kategorie „Markierung“ aus.
3 Klicken Sie in das Farbfeld für „Bibliothekselemente“ und wählen Sie mit dem Farbwähler eine Markierungsfarbe
aus (oder geben Sie den Hexadezimalwert für die Markierungsfarbe im Textfeld ein).
4 Wählen Sie „Anzeigen“ aus, um die Markierungsfarbe im Dokumentfenster anzuzeigen.
5 Klicken Sie auf „OK“.
Markierungen im Dokumentfenster ein- und ausblenden
❖ Wenn eine Markierung angezeigt werden soll, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare
Elemente“ aus. Wenn die Markierung ausgeblendet werden soll, deaktivieren Sie „Unsichtbare Elemente“.
132
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
Eigenschaften von Bibliothekselementen bearbeiten
Mithilfe des Eigenschafteninspektors können Sie ein Bibliothekselement zum Bearbeiten öffnen, die Verknüpfung
zwischen einem ausgewählten Bibliothekselement und der zugehörigen Quelldatei aufheben oder ein Element mit
dem aktuellen ausgewählten Bibliothekselement überschreiben.
1 Wählen Sie in einem Dokument ein Bibliothekselement aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine der folgenden Optionen aus:
Quelle Zeigt den Dateinamen und den Speicherort der Quelldatei des Bibliothekselements an. Diese Informationen
können nicht bearbeitet werden.
Öffnen Öffnet die Quelldatei des Bibliothekselements zum Bearbeiten. Sie können das Element auch im Bedienfeld
„Elemente“ auswählen und auf die Schaltfläche „Bearbeiten“ klicken.
Von Original trennen Hebt die Verknüpfung zwischen dem ausgewählten Bibliothekselement und der
entsprechenden Quelldatei auf. Das entsprechende Element kann im Dokument bearbeitet werden, es ist jedoch kein
Bibliothekselement mehr und wird beim Ändern des Originalelements nicht mehr aktualisiert.
Neu erstellen Überschreibt das ursprüngliche Bibliothekselement mit der aktuellen Auswahl. Mit dieser Option
können Sie Bibliothekselemente neu erstellen, wenn das ursprüngliche Bibliothekselement fehlt oder versehentlich
gelöscht wurde.
Bibliothekselemente in einem Dokument bearbeitbar machen
Wenn Sie ein Bibliothekselement in ein Dokument eingefügt haben und es anschließend nur auf dieser Seite
bearbeiten möchten, müssen Sie die Verknüpfung zwischen dem Bibliothekselement im Dokument und der
Bibliothek aufheben. Nachdem Sie eine Instanz eines Bibliothekselements bearbeitbar gemacht haben, wird diese
Instanz nicht mehr aktualisiert, wenn sich das Bibliothekselement ändert.
1 Wählen Sie im aktuellen Dokument ein Bibliothekselement aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf „Von Original trennen“.
Verhalten in einem Bibliothekselement bearbeiten
Wenn Sie ein Verhalten in einem Bibliothekselement bearbeiten möchten, müssen Sie das Element zunächst in ein
Dokument einfügen und es anschließend in diesem Dokument bearbeitbar machen. Nachdem Sie die gewünschten
Änderungen vorgenommen haben, können Sie das Bibliothekselement neu erstellen. Dadurch wird das Element in der
Bibliothek durch das bearbeitete Element aus dem Dokument ersetzt.
1 Öffnen Sie ein Dokument, das das Bibliothekselement enthält.
Notieren Sie sich den Namen des Bibliothekselements und die enthaltenen Tags. Sie benötigen diese Informationen
später.
2 Wählen Sie das Bibliothekselement aus und klicken Sie dann im Eigenschafteninspektor („Fenster“ >
„Eigenschaften“) auf „Von Original trennen“.
3 Wählen Sie das Element aus, dem das Verhalten angefügt ist.
4 Doppelklicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf die Aktion, die Sie ändern möchten.
5 Nehmen Sie im dann angezeigten Dialogfeld die gewünschten Änderungen vor und klicken Sie auf „OK“.
6 Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ aus.
7 Notieren Sie den genauen Namen (unter Berücksichtigung der Groß- und Kleinschreibung) des ursprünglichen
Bibliothekselements, wählen Sie es aus und klicken Sie dann auf die Schaltfläche „Löschen“.
133
VERWENDEN VON DREAMWEAVER
Verwalten von Elementen und Bibliotheken
Last updated 10.4.2012
8 Wählen Sie im Dokumentfenster alle Elemente aus, aus denen sich das Bibliothekselement zusammensetzt.
Achten Sie darauf, dass Sie genau die gleichen Elemente auswählen, die im ursprünglichen Bibliothekselement
vorhanden waren.
9 Klicken Sie im Bedienfeld „Elemente“ auf die Schaltfläche „Neues Bibliothekselement“ und geben Sie dem
neuen Element den Namen des gelöschten Elements. Verwenden Sie dabei die gleiche Schreibweise sowie Groß-
und Kleinschreibung.
10 Wenn Sie das Bibliothekselement in den anderen Dokumenten der Site aktualisieren möchten, wählen Sie
„Modifizieren“ > „Bibliothek“ > „Seiten aktualisieren“ aus.
11 Wählen Sie im Popupmenü „Suchen in“ die Option „Dateien mit“ aus.
12 Wählen Sie im Popupmenü daneben den Namen des soeben neu erstellten Bibliothekselements aus.
13 Überprüfen Sie, ob unter der Option „Aktualisieren“ das Kontrollkästchen „Bibliothekselemente“ aktiviert ist und
klicken Sie dann auf „Starten“.
14 Klicken Sie nach Abschluss der Aktualisierungen auf „Schließen“.
More Help topics
“Verwenden von JavaScript-Verhalten” on page 363
134
Last updated 10.4.2012
Chapter 6: Seiten mit CSS erstellen
Grundlegendes zu Cascading Stylesheets
Cascading Stylesheets
Cascading Stylesheets (CSS) sind eine Sammlung von Formatierungsregeln, die das Aussehen der Inhalte einer
Webseite bestimmen. Bei der Formatierung einer Seite mit CSS-Stilen werden Inhalt und Darstellung getrennt. Der
Inhalt der Seite – der HTML-Code – befindet sich in der HTML-Datei. Die CSS-Regeln, die die Präsentation des Codes
definieren, befinden sich dagegen in einer anderen Datei (einem externen Stylesheet) oder in einem anderen Teil des
HTML-Dokuments (in der Regel im head-Bereich). Die Trennung zwischen Inhalt und Darstellung hat den Vorteil,
dass bei einer Änderung nicht alle Eigenschaften auf jeder Seite einzeln aktualisiert zu werden brauchen. Dadurch ist
es erheblich einfacher, das Erscheinungsbild einer Website zentral zu verwalten. Zudem ermöglicht es die Trennung
zwischen Inhalt und Darstellung, den HTML-Code einfacher und sauberer zu halten. Dadurch wird die Seite im
Browser schneller aufgebaut und die Navigation für Anwender, die auf Barrierefreiheit angewiesen sind (z. B. Nutzer
von Bildschirmlesegeräten), wird erleichtert.
Mit CSS können Sie das Erscheinungsbild Ihrer Seite vielfältig gestalten und bis ins Detail kontrollieren. Sie können
zahlreiche Textattribute festlegen, darunter Schriftart und Schriftgröße, Auszeichnungen wie fett, kursiv oder
unterstrichen, Textschattierung, Text- und Hintergrundfarbe, Farbe und Unterstreichung für Hyperlinks und vieles
mehr. Wenn Sie CSS zur Schriftartenverwaltung verwenden, können Sie zudem ein einheitlicheres Seitenlayout und
Aussehen in den verschiedenen Browsern erzielen.
Neben der Textformatierung können Sie mit CSS auch das Format und die Position von Blockelementen auf einer
Webseite bestimmen. Ein Blockelement ist ein eigenständiges Inhaltselement, das im HTML-Text in der Regel durch
eine neue Zeile abgetrennt und als Block formatiert wird. Beispiele sind die Tags
h1, p und div. Sie alle erzeugen
Blockelemente auf der Webseite. Sie können Ränder und Rahmen für Blockelemente definieren, ihnen eine bestimmte
Position zuweisen, eine Hintergrundfarbe hinzufügen, sie mit Fließtext umgeben und viele andere
Gestaltungsoptionen nutzen. Das Seitenlayout mit CSS erfolgt hauptsächlich über das Bearbeiten von
Blockelementen.
More Help topics
“Arbeiten mit Div-Tags” on page 172
“Gestalten von Seitenlayouts mit CSS” on page 165
CSS verwenden (Tutorial)
CSS-Regeln
Eine CSS-Formatierungsregel besteht aus zwei Teilen: dem Selektor und der Deklaration (bzw. meistens einem Block
aus mehreren Deklarationen). Der Selektor ist ein Begriff (wie
p, h1,ein Klassenname oder ein id-Attribut), mit dem
das formatierte Element identifiziert wird. Mit dem Deklarationsblock werden dagegen die Stileigenschaften selbst
definiert. Im folgenden Beispiel ist
h1 der Selektor, die Elemente in der geschweiften Klammer ({}) bilden den
Deklarationsblock:
135
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Eine einzelne Deklaration besteht ihrerseits aus zwei Teilen: der Eigenschaft (z. B. font-family) und dem Wert (z. B.
Helvetica). In der obigen CSS-Regel wurde ein bestimmter Stil für h1-Tags erstellt: der Text für alle mit diesem Stil
verknüpften
h1-Tags hat eine Größe von 16 Pixel, die Schriftart Helvetica und den Schriftschnitt fett.
Der Stil wird über eine oder mehrere Regeln definiert und getrennt von dem eigentlichen Text gespeichert, dessen
Formatierung er festlegt – entweder in einem externen Stylesheet oder im head-Bereich eines HTML-Dokuments. So
lässt sich eine Regel für
h1-Tags gleichzeitig auf viele Tags anwenden. Bei Nutzung externer Stylesheets kann sich die
Regel auch auf Tags erstrecken, die sich auf zahlreichen verschiedenen Seiten befinden. Durch das CSS-Konzept wird
die Aktualisierung von Websites so erheblich vereinfacht. Eine CSS-Regel braucht nur an einem einzigen Ort geändert
zu werden, um die Formatierung aller Elemente, die den in ihr definierten Stil verwenden, automatisch zu
aktualisieren.
In Dreamweaver können Sie die folgenden Arten von Stilen definieren:
• Klassenstile ermöglichen die Anwendung von Formatierungseigenschaften auf beliebige Elemente auf der Seite.
• HTML-Tag-Stile legen die Formatierung für ein bestimmtes Tag, z. B. für h1, fest. Wenn Sie einen CSS-Stil für das
h1-Tag erstellen oder ändern, werden sämtliche mit dem h1-Tag formatierten Textstellen sofort aktualisiert.
• Erweiterte Stile definieren die Formatierung einer bestimmten Kombination von Elementen oder anderer in CSS
zulässiger Selektorformulare neu (der Selektor
td h2 gilt z. B. für alle h2- Kopfzeilen in einer Tabellenzelle).
Erweiterte Stile können ferner die Formatierung von Tags neu definieren, die ein bestimmtes
id-Attribut enthalten
(z. B.gelten die durch
#myStyle definierten Stile für alle Tags, die das Attribut-Wert-Paar id="myStyle"
enthalten).
CSS-Regeln können sich an folgenden Stellen befinden:
Externe CSS-Stylesheets Sammlungen von CSS-Regeln, die in einer separaten, externen CSS-Datei (.css) gespeichert
sind (dies ist keine HTML-Datei). Diese Datei wird über einen Hyperlink im head-Bereich eines Dokuments oder eine
@import-Regel mit einer oder mehreren Seiten einer Website verknüpft.
Interne (oder eingebettete) CSS-Stylesheets Sammlungen von CSS-Regeln, die sich in einem style-Tag im Head-
Bereich eines HTML-Dokuments befinden.
Inline-Stile Werden in bestimmten Instanzen von Tags in einem ganzen HTML-Dokument definiert. (Die
Verwendung von Inline-Stilen wird nicht empfohlen.)
main.html
Externes Stylesheet
events.html
H1 {
font-family: Ariel;
font-size: 16px;
font-weight: bold;
}
Where to stay
Spring Festival
What to do
136
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Dreamweaver erkennt Stile, die in vorhandenen Dokumenten definiert sind, sofern diese Stile den CSS-Richtlinien
entsprechen. Dreamweaver stellt die zugewiesenen Stile zudem direkt in der Entwurfsansicht dar. (Die
Dokumentvorschau in einem Browserfenster vermittelt gleichwohl den genauesten Eindruck vom „Live“-
Erscheinungsbild der Seite.) Einige CSS-Stile werden in Microsoft Internet Explorer, Netscape, Opera, Apple Safari
und anderen Browsern nicht einheitlich dargestellt; andere werden derzeit von keinem Browsertyp unterstützt.
Um das mit Dreamweaver gelieferte CSS-Referenzhandbuch von O’Reilly anzuzeigen, wählen Sie „Hilfe“ >
„Referenz“ und anschließend im Bedienfeld „Referenz“ im Popupmenü „Buch“ die Option „O’Reilly CSS Referenz“.
More Help topics
“CSS-Klassenstile anwenden, entfernen oder umbenennen” on page 154
Cascading Styles
Der Begriff cascading (kaskadierend) bezieht sich auf die Art und Weise, in der ein Browser die Stile bestimmter
Elemente einer Webseite anzeigt. Die Stile, die auf einer Webseite zu sehen sind, können aus drei unterschiedlichen
Quellen stammen: Dem Stylesheet, das der Autor der Seite erstellt hat, ggf. den benutzerangepassten Stilen und den
Standardstilen des Browsers. In den vorherigen Abschnitten ging es um die Erstellung von Stilen für eine Webseite,
die ein Autor der Webseite und der Stylesheets dieser Seite hinzugefügt hat. Aber die Browser verfügen ebenfalls über
eigene Standard-Stylesheets, mit denen die Anzeige von Webseiten definiert wird. Außerdem können auch die
Benutzer ihre Browser anpassen und so die Anzeige von Webseiten ändern. Letztendlich hängt die Anzeige einer
Webseite von den Regeln ab, die sich aus der Überschneidung (Kaskadierung) der Stile dieser drei Quellen ergeben,
um die Webseite optimal anzuzeigen.
Anhand eines allgemeinen Tags - dem Absatz-Tag
<p> - wird dieses Konzept verdeutlicht. In der Standardeinstellung
verfügen die Browser über Stylesheets, mit denen die Schriftart und die Schriftgröße von Fließtext definiert wird (also
von Text, der im HTML-Code zwischen den
<p>-Tags enthalten ist). So wird in der Standardeinstellung jeglicher
Fließtext, einschließlich Absatztext, in Internet Explorer beispielsweise in Times New Roman, mittlere Größe,
angezeigt.
Als Autor einer Webseite können Sie aber natürlich auch ein eigenes Stylesheet anlegen, mit dem der Standardstil des
Browsers für Absatztext und die Schriftgröße überschrieben werden. So können Sie beispielsweise in einem Stylesheet
die folgende Regel definieren:
p {
font-family: Arial;
font-size: small;
}
Sobald ein Benutzer die Seite lädt, überschreiben die von Ihnen als dem Autor der Webseite definierten
Absatzschriftart und die Größeneinstellungen die Standardeinstellungen des Browsers.
Die Benutzer können die Browseranzeige so anpassen, wie es Ihrer Nutzung am besten entspricht. In Internet Explorer
können sie beispielsweise mithilfe von „Ansicht“ > „Textgröße“ > „Sehr groß“ die Schriftart der Seite vergrößern, falls
ihnen die Schrift zu klein erscheint. Letztendlich überschreibt (zumindest in diesem Fall) die vom Benutzer geänderte
Einstellung sowohl den Standardstil des Browsers als auch den vom Autor der Webseite definierten Absatzstil.
Aber auch die als Vererbung bezeichnete Übernahme der Eigenschaften von übergeordneten Elementen spielt bei der
Kaskadierung eine Rolle. Die Eigenschaften der meisten Elemente einer Webseite werden übernommen (vererbt):
Absatz-Tags erben beispielsweise bestimmte Eigenschaften von den body-Tags und span-Tags übernehmen
bestimmte Eigenschaften der Absatz-Tags. Wenn Sie also in einem Stylesheet die folgende Regel definieren:
137
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
body {
font-family: Arial;
font-style: italic;
}
werden alle Absatz-Tags Ihrer Webseite (sowie der Text, der Eigenschaften von diesen Absatz-Tags übernimmt) in
Arial und kursiv angezeigt, da das Absatz-Tag diese Eigenschaften vom body-Tag erbt. Natürlich können Sie Ihre
Regeln auch differenzierter definieren und Stile erstellen, die z. B. auch die Standardformeln der Vererbung
überschreiben. So können Sie beispielsweise in einem Stylesheet die folgende Regel definieren:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Der gesamte Fließtext wird in Arial angezeigt - mit Ausnahme von Text in Absatz-Tags und Text, der diese
Eigenschaften übernimmt. Dieser wird in einer normalen Courier-Schrift dargestellt. Technisch gesehen erbt der
Absatztext zunächst die Eigenschaften, die für das body-Tag definiert wurden. Aber diese Eigenschaften werden dann
ignoriert, da für den Absatztext ja eigene Eigenschaften festgelegt wurden. Anders ausgedrückt erben die
Seitenelemente zwar die Eigenschaften übergeordneter Objekte, wenden dann aber eigene Tag-Eigenschaften an und
überschreiben die Standardeinstellungen der Vererbung.
Alle oben beschriebenen Faktoren sowie andere Aspekte, wie die CSS-Spezifizierung (ein System, das den einzelnen
Arten von CSS-Regeln eine unterschiedliche Gewichtung zuweist) und die Reihenfolge der CSS-Regeln, ergeben eine
komplexe Überschneidung von Elementen mit höheren und niedrigeren Prioritäten. Weitere Informationen zu den
Regeln der Kaskadierung, Vererbung und Spezifizierung finden Sie auf der Seite www.w3.org/TR/CSS2/cascade.html.
Textformatierung und CSS
Standardmäßig verwendet Dreamweaver Cascading Stylesheets (CSS), um Texte zu formatieren. Durch die Stile, mit
denen Sie Texte über den Eigenschafteninspektor oder Menübefehle formatieren, werden CSS-Regeln erstellt und im
head-Bereich des aktuellen Dokuments eingebettet.
Sie können CSS-Regeln und -Eigenschaften auch über das Bedienfeld „CSS-Stile“ erstellen und bearbeiten. Dieses
Bedienfeld ist wesentlich robuster als der Eigenschafteninspektor und zeigt alle für das aktuelle Dokument definierten
CSS-Regeln an, unabhängig davon, ob diese Regeln im head-Bereich des Dokuments eingebettet oder in einem
externen Stylesheet enthalten sind. Adobe empfiehlt die Verwendung des Bedienfelds „CSS-Stile“ (anstelle des
Eigenschafteninspektors) als Haupttool zum Erstellen und Bearbeiten von CSS. Das Ergebnis ist Code, der optimiert
und einfacher zu verwalten ist.
Neben selbst erstellten Stilen und Stylesheets können Sie auch die vordefinierten Stylesheets von Dreamweaver auf
Ihre Dokumente anwenden.
Ein Tutorial zur Textformatierung mit CSS finden Sie unter www.adobe.com/go/vid0153_de.
More Help topics
“Bedienfeld „CSS-Stile“” on page 139
“Neue CSS-Regeln erstellen” on page 145
Tutorial zur Textformatierung mit CSS
138
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Kurzschrifteigenschaften
Die CSS-Eigenschaften ermöglichen die Erstellung von Stilen mithilfe einer abgekürzten Syntax, CSS-Kurzschrift
genannt. Mit der CSS-Kurzschrift können Sie die Werte zahlreicher Eigenschaften mit einer einzigen Deklaration
bestimmen. Die Eigenschaft
font ermöglicht es Ihnen beispielsweise, mit einer einzigen Syntaxzeile die Eigenschaften
zu
font-style, font-variant, font-weight, font-size, line-height und font-family einzurichten.
Bei der Verwendung von CSS-Kurzschrift ist zu beachten, dass den von einer CSS-Kurzschrifteigenschaft
ausgelassenen Werten der Standardwert zugeordnet wird. Dies kann dazu führen, dass Seiten nicht ordnungsgemäß
angezeigt werden, wenn demselben Tag zwei oder mehr CSS-Regeln zugeordnet werden.
Die nachfolgend dargestellte Regel für
h1 verwendet beispielsweise die lange CSS-Syntax. Beachten Sie, dass den
Eigenschaften
font-variant, font-stretch, font-size-adjust und font-style ihre Standardwerte zugeordnet
wurden.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Als einzelne Kurzschrifteigenschaft würde dieselbe Regel folgendermaßen aussehen:
h1 { font: bold 16pt/18pt Arial }
Bei Verwendung der Kurzschrift werden den ausgelassenen Werten automatisch ihre Standardwerte zugewiesen.
Daher werden in obigem Kurzschriftbeispiel die Tags
font-variant, font-style, font-stretch und font-size-
adjust ausgelassen
Wenn Sie Stile an mehreren Orten definiert haben (z. B. in eine HTML-Seite eingebettet und aus einem externen
Stylesheet importiert) und sowohl die lange als auch die kurze Form der CSS-Syntax verwenden, bedenken Sie, dass
Eigenschaften, die in einer Kurzschriftregel ausgelassen werden, möglicherweise Eigenschaften außer Kraft setzen
(oder überlagern), die an anderer Stelle explizit eingerichtet wurden.
Daher verwendet Dreamweaver standardmäßig die lange Form der CSS-Schreibweise. Auf diese Weise werden
Probleme vermieden, die auftreten können, wenn eine Kurzschriftregel eine Langschriftregel überschreibt. Wenn Sie
eine mit CSS-Kurzschrift codierte Webseite in Dreamweaver öffnen, achten Sie darauf, dass Dreamweaver etwaige
neue CSS-Regeln in Langschrift erstellt. Sie können bestimmen, wie Dreamweaver CSS-Regeln erstellt und bearbeitet,
indem Sie im Dialogfeld „Voreinstellungen“ („Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ >
„Voreinstellungen“ (Macintosh)) in der Kategorie „CSS-Stile“ die CSS-Bearbeitungsvoreinstellungen ändern.
Note: Über das Bedienfeld „CSS-Stile“ werden Regeln nur in Langschrift erstellt. Wenn Sie im Bedienfeld „CSS-Stile“ eine
Seite oder ein CSS-Stylesheet erstellen, bedenken Sie, dass durch Verwendung der Kurzschrift in CSS-Regeln
möglicherweise Eigenschaften außer Kraft gesetzt werden, die in Langschrift erstellt wurden. Erstellen Sie Ihre Stile daher
in CSS-Langschrift.
139
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Bedienfeld „CSS-Stile“
In diesem Bedienfeld können Sie die CSS-Regeln und -Eigenschaften, die sich auf ein derzeit ausgewähltes
Seitenelement auswirken (Modus „Aktuell“), oder alle für das gesamte Dokument verfügbaren Regeln und
Eigenschaften (Modus „Alle“), verfolgen. Über eine Umschalttaste oben im Bedienfeld können Sie zwischen den
beiden Modi wechseln. Im Bedienfeld „CSS-Stile“ können Sie außerdem CSS-Eigenschaften im Modus „Alle“ und
„Aktuell“ ändern.
Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“
Im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Bereiche: das Bedienfeld „Zusammenfassung für
Auswahl“, das die CSS-Eigenschaften für die aktuelle Auswahl im Dokument enthält, das Bedienfeld „Regeln“, das den
Speicherort von ausgewählten Eigenschaften (bzw. je nach der Auswahl die Regelhierarchie für das ausgewählte Tag)
anzeigt, und das Bedienfeld „Eigenschaften“, mit dem Sie CSS-Eigenschaften der Regel ändern können, die die
Auswahl definiert.
Sie können die Größe eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern. Die
Größe von Spalten können Sie ändern, indem Sie die Trennlinien ziehen.
Im Bedienfeld „Zusammenfassung für Auswahl“ wird eine Zusammenfassung der CSS-Eigenschaften und
zugehörigen Werte für das Element angezeigt, das derzeit im aktuellen Dokument ausgewählt wurde. Die
Zusammenfassung enthält die Eigenschaften für alle Regeln, die direkt für die Auswahl gelten. Es werden nur
festgelegte Eigenschaften angezeigt.
Die folgenden Regeln erstellen beispielsweise einen Klassenstil und einen Tag-Stil (in diesem Fall „paragraph“):
140
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
.foo{
color: green;
font-family: 'Arial';
}
p{
font-family: 'serif';
font-size: 12px;
}
Wenn Sie im Dokumentfenster Absatztext mit dem Klassenstil .foo auswählen, werden im Bedienfeld
„Zusammenfassung für Auswahl“ die relevanten Eigenschaften für beide Regeln angezeigt, da beide Regeln für die
Auswahl gelten. In diesem Fall werden im Bereich „Zusammenfassung für Auswahl“ folgende Eigenschaften
aufgeführt:
font-size: 12px
font-family: 'Arial'
color: green
Die Eigenschaften werden im Bedienfeld „Zusammenfassung für Auswahl“ in aufsteigender Reihenfolge nach
Genauigkeit angezeigt. Im obigen Beispiel definiert der Tag-Stil die Schriftgröße und der Klassenstil die Schriftfamilie
und die Farbe. (Die vom Klassenstil definierte Schriftfamilie setzt die vom Tag-Stil definierte Schriftfamilie außer
Kraft, da Klassenselektoren eine höhere Genauigkeit haben als Tag-Selektoren. Weitere Informationen zur CSS-
Genauigkeit finden Sie unter www.w3.org/TR/CSS2/cascade.html.
Im Bedienfeld „Regeln“ werden je nach Auswahl zwei verschiedene Ansichten angezeigt: die Ansicht „Über“ oder die
Ansicht „Regeln“. In der Ansicht „Über“ (Standardansicht) zeigt das Bedienfeld den Namen der Regel an, die die
ausgewählte CSS-Eigenschaft definiert, und den Namen der Datei, die die Regel enthält. In der Ansicht „Regeln“ zeigt
das Bedienfeld eine Hierarchie aller Regeln an, die direkt oder indirekt für die aktuelle Auswahl gelten. (Das Tag, für
das die Regel direkt gilt, wird in der rechten Spalte angezeigt.) Sie können durch Klicken auf die Schaltflächen
„Informationen über ausgewählte Eigenschaft anzeigen“ und „CSS-Regeln für ausgewähltes Tag anzeigen“ in der
oberen rechten Ecke des Bedienfelds „Regeln“ zwischen den beiden Ansichten umschalten.
Wenn Sie im Bedienfeld „Zusammenfassung für Auswahl“ eine Eigenschaft auswählen, werden alle Eigenschaften der
definierenden Regel im Bedienfeld „Eigenschaften“ angezeigt. (Die definierende Regel wird auch im Bedienfeld
„Regeln“ ausgewählt, sofern diese Ansicht den Fokus besitzt.) Wenn es beispielsweise eine Regel namens
.maintext
gibt, die eine Schriftfamilie, Schriftgröße und Farbe definiert, werden durch Auswählen einer dieser Eigenschaften im
Bedienfeld „Zusammenfassung für Auswahl“ im Bedienfeld „Eigenschaften“ alle Eigenschaften angezeigt, die von der
Regel
.maintext definiert werden, und im Bedienfeld „Regeln“ die ausgewählte Regel .maintext. (Darüber hinaus
werden im Bedienfeld „Regeln“ ausgewählte Regeln im Bedienfeld „Eigenschaften“ der betreffenden Regel angezeigt.)
Sie können das CSS dann problemlos über das Bedienfeld „Eigenschaften“ modifizieren, ganz gleich, ob das CSS im
aktuellen Dokument eingebettet oder über ein angefügtes Stylesheet verknüpft ist. Standardmäßig werden im
Bedienfeld „Eigenschaften“ nur die zuvor festgelegten Eigenschaften (alphabetisch) angezeigt.
Sie können dieses Bedienfeld ferner in zwei weiteren Ansichten anzeigen. In der Kategorieansicht werden
Eigenschaften in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten
Eigenschaften am oberen Rand jeder Kategorie als blauer Text angezeigt. In der Listenansicht wird eine alphabetische
Liste aller verfügbaren Eigenschaften angezeigt. Auch hier werden die festgelegten Eigenschaften so sortiert, dass sie
am oberen Rand jeder Kategorie als blauer Text erscheinen. Um zwischen den Ansichten zu wechseln, klicken Sie auf
die Schaltfläche „Kategorieansicht zeigen“, „Listenansicht anzeigen“ oder „Nur festgelegte Eigenschaften anzeigen“,
die sich unten links im Bedienfeld „Eigenschaften“ befinden.
Die festgelegten Eigenschaften sind in allen Ansichten blau dargestellt, während die für diese Auswahl irrelevanten
Eigenschaften rot durchgestrichen sind. Wenn Sie den Mauszeiger (oder Cursor) auf einer irrelevanten Regel
positionieren, wird eine Meldung angezeigt, in der erklärt wird, weshalb diese Eigenschaft irrelevant ist.
Normalerweise ist eine Eigenschaft irrelevant, weil sie außer Kraft gesetzt oder nicht übernommen wurde.
141
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen
während Ihrer Arbeit in einer Vorschau verfolgen können.
More Help topics
“Bedienfeld „CSS-Stile“ öffnen” on page 143
Bedienfeld „CSS-Stile“ im Modus „Alle“
Im Modus „Alle“ enthält das Bedienfeld „CSS-Stile“ zwei Bereiche: „Alle Regeln“ (oben) und „Eigenschaften“ (unten).
Im Bedienfeld „Alle Regeln“ wird eine Liste der Regeln angezeigt, die im aktuellen Dokument definiert sind, sowie alle
Regeln, die in den mit dem aktuellen Dokument verknüpften Stylesheets definiert wurden. Im Bedienfeld
„Eigenschaften“ können Sie CSS-Eigenschaften für eine ausgewählte Regel im Bedienfeld „Alle Regeln“ bearbeiten.
Sie können die Größe eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern. Die
Größe der Eigenschaftenspalten können Sie durch Ziehen der Trennlinien ändern.
Wenn Sie im Bedienfeld „Alle Regeln“ eine Regel auswählen, werden alle Eigenschaften, die in dieser Regel definiert
sind, im Bedienfeld „Eigenschaften“ angezeigt. Sie können das CSS dann problemlos über das Bedienfeld
„Eigenschaften“ modifizieren, ganz gleich, ob das CSS im aktuellen Dokument eingebettet oder über ein angefügtes
Stylesheet verknüpft ist. Standardmäßig werden im Bedienfeld „Eigenschaften“ nur die zuvor festgelegten
Eigenschaften (alphabetisch) angezeigt.
Sie können Eigenschaften ferner in zwei weiteren Ansichten anzeigen. In der Kategorieansicht werden Eigenschaften
in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten Eigenschaften am
oberen Rand jeder Kategorie angezeigt. Die Listenansicht enthält eine alphabetische Liste aller verfügbaren
Eigenschaften und sortiert die Eigenschaften ebenfalls am oberen Rand. Um zwischen den Ansichten zu wechseln,
klicken Sie auf die Schaltfläche „Kategorieansicht zeigen“, „Listenansicht anzeigen“ oder „Nur festgelegte
Eigenschaften anzeigen“, die sich unten links im Bedienfeld „Eigenschaften“ befinden. Die festgelegten Eigenschaften
werden in allen Ansichten blau angezeigt.
Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen
während Ihrer Arbeit in einer Vorschau verfolgen können.
142
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
More Help topics
“Bedienfeld „CSS-Stile“ öffnen” on page 143
Schaltflächen und Ansichten des Bedienfelds „CSS-Stile“
Sowohl im Modus „Alle“ als auch im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Schaltflächen, mit denen
Sie die Ansicht im Bedienfeld „Eigenschaften“ (dem unteren Bedienfeld) ändern können:
A: Kategorieansicht anzeigen B: Listenansicht anzeigen C: Nur festgelegte Eigenschaften anzeigen
Kategorieansicht anzeigen Unterteilt die von Dreamweaver unterstützten CSS-Eigenschaften in acht Kategorien:
Schriftart, Hintergrund, Block, Rahmen, Box, Liste, Positionierung und Erweiterungen. Die Eigenschaften jeder
Kategorie sind in einer ausblendbaren Liste aufgeführt, die Sie durch Klicken auf die Schaltfläche mit dem Pluszeichen
(+) neben dem Kategorienamen erweitern oder reduzieren können. Festgelegte Eigenschaften werden oben in der
Liste in Blau angezeigt.
Listenansicht anzeigen Zeigt alle von Dreamweaver unterstützten CSS-Eigenschaften in alphabetischer Reihenfolge
an. Festgelegte Eigenschaften werden oben in der Liste in Blau angezeigt.
Nur festgelegte Eigenschaften anzeigen Zeigt nur die zuvor festgelegten Eigenschaften an. Dies ist die
Standardansicht.
Sowohl im Modus „Alle“ als auch im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ die folgenden Schaltflächen:
A: Stylesheet anfügen B: Neue CSS-Regel C: Stil bearbeiten D: CSS-Eigenschaft deaktivieren/aktivieren E: CSS-Regel löschen
Stylesheet anfügen Öffnet das Dialogfeld „Entferntes Stylesheet hinzufügen“. Wählen Sie ein externes Stylesheet aus,
zu dem Sie eine Verknüpfung herstellen oder das Sie in Ihr aktuelles Dokument importieren möchten.
Neue CSS-Regel Öffnet ein Dialogfeld, in dem Sie die Art des zu erstellenden Stils auswählen. Um beispielsweise einen
benutzerdefinierten Stil zu erstellen, definieren Sie entweder ein HTML-Tag neu oder definieren Sie einen CSS-
Selektor.
Stil bearbeiten Öffnet ein Dialogfeld, in dem Sie die Stile im aktuellen Dokument oder in einem externen Stylesheet
bearbeiten können.
CSS-Regel löschen Entfernt die ausgewählte Regel oder Eigenschaft aus dem Bedienfeld „CSS-Stile“ und entfernt die
Formatierung von allen Elementen, auf die sie angewendet wurde. Klassen- oder Kennungen-Eigenschaften, auf die
der Stil verweist, werden mit dieser Option jedoch nicht entfernt. Die Schaltfläche „CSS-Regel löschen“ kann auch
verwendet werden, um ein angehängtes CSS-Stylesheet abzutrennen (die Verknüpfung zu entfernen).
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in das Bedienfeld „CSS-
Stile“, um ein Kontextmenü mit Optionen für CSS-Stylesheet-Befehle zu öffnen.
A B C
A B C D E
143
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Bedienfeld „CSS-Stile“ öffnen
Sie können im Bedienfeld „CSS-Stile“ sowohl CSS-Stile anzeigen, erstellen, bearbeiten und entfernen als auch externe
Stylesheets mit Dokumenten verbinden.
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Fenster“ > „CSS-Stile“ aus.
• Drücken Sie Umschalt+F11.
• Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „CSS“.
Erweiterungen für die CSS3-Unterstützung im
Bedienfeld „CSS-Stile“ (CS 5.5)
Im CSS-Bedienfeld wurde ein Popupbedienfeld für die folgenden Eigenschaften eingefügt:
• text-shadow
• box-shadow
• border-radius
• border-image
Mit den Optionen im Popupbedienfeld wird sichergestellt, dass Sie die Eigenschaften korrekt anwenden, auch wenn
Sie mit der zugehörigen W3C-Syntax nicht vertraut sind.
Popupbedienfeld mit Optionen für die CSS3-Eigenschaft „border-image“
CSS3-Eigenschaften mithilfe des Popupbedienfelds anwenden
❖ Klicken Sie auf das Symbol mit dem Pluszeichen („+“) für die entsprechenden Eigenschaften. Verwenden Sie die
Optionen im Popupbedienfeld, um die Eigenschaft anzuwenden.
144
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Mehrere Wertsätze angeben
CSS3-Eigenschaften wie z. B. „text-shadow“ unterstützen mehrere Wertsätze. Beispiel: text-shadow: 3px 3px
#000, -3px -3px #0f0;
Wenn Sie in der Codeansicht mehrere Wertsätze angeben und das Popupbedienfeld zur Bearbeitung einer Eigenschaft
öffnen, wird der erste Wertsatz angezeigt. Wenn Sie diesen Wertsatz im Popupbedienfeld bearbeiten, betrifft dies nur
den ersten Wertsatz im Code. Die anderen Wertsätze sind davon nicht betroffen und werden wie angegeben im Code
angewendet.
Eigenschaften in der Kategorieansicht suchen
In der Kategorieansicht befindet sich text-shadow in der Kategorie „Schriftart“. box-shadow, border-radius und
border-image sind unter der Kategorie „Rahmen“ aufgeführt.
Kompatibilität mit Browsern sicherstellen
Dreamweaver CS 5.5 unterstützt auch die browserspezifische Implementierung (WebKit, Mozilla) der Eigenschaften
„box-shadow“, „border-radius“ und „border-image“.
Verwenden Sie in der Kategorieansicht die Optionen in der entsprechenden Browserkategorie, um für diese
Eigenschaften die Browserkompatibilität sicherzustellen. Bearbeiten Sie beispielsweise
-moz-border-image in der
Kategorie „Mozilla“, um die Kompatibilität mit der von Mozilla implementierten Eigenschaft „border-image“
sicherzustellen.
Vorschau der Änderungen in der Live-Ansicht
Die an CSS-Eigenschaften vorgenommenen Änderungen werden in der Entwurfsansicht nicht angezeigt. Wechseln
Sie in die Live-Ansicht, um die Änderungen in der Vorschau anzuzeigen. Sie können in der Live-Ansicht auch eine
schnelle Bearbeitung von CSS3-Eigenschaften vornehmen. Diese Änderungen werden dann unmittelbar in dieser
Ansicht angezeigt.
In der Live-Ansicht werden die folgenden CSS3-Eigenschaften unterstützt:
• text-shadow
• border-radius
• -webkit-box-shadow
• -webkit-border-image
Voreinstellungen für CSS-Stile festlegen
Mit den Voreinstellungen für CSS-Stile wird gesteuert, wie Dreamweaver den Code für die Definition von CSS-Stilen
schreibt. CSS-Stile können in einer Kurzschriftform geschrieben werden, die von einigen Entwicklern bevorzugt wird.
Einige ältere Browserversionen können die Kurzschrift allerdings nicht korrekt interpretieren.
1 Klicken Sie auf „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh) und wählen Sie in der Liste „Kategorie“ den Eintrag „CSS-Stile“.
2 Wählen Sie die gewünschten CSS-Stiloptionen aus:
Beim Erstellen von CSS-Regeln: Kurzschrift verwenden für Legt fest, welche CSS-Stilattribute in Dreamweaver in
Kurzschrift geschrieben werden.
145
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Beim Bearbeiten von CSS-Regeln: Kurzschrift verwenden Legt fest, ob Dreamweaver bereits vorhandene Stile in
Kurzschrift umwandelt.
Wenn Sie „Falls Original in Kurzschrift“ wählen, bleiben alle Stile unverändert.
Wählen Sie dagegen „Gemäß obiger Einstellungen“, werden die Stile aller Eigenschaften, die Sie unter „Kurzschrift
verwenden für“ ausgewählt haben, in Kurzschrift umgewandelt.
Beim Doppelklicken im CSS-Bedienfeld Ermöglicht die Auswahl eines Werkzeugs für das Bearbeiten von CSS-Regeln.
3 Klicken Sie auf „OK“.
Neue CSS-Regeln erstellen
Sie können eine CSS-Regel erstellen, um die Formatierung von HTML-Tags oder eines durch das Attribut class oder
ID gekennzeichneten Textbereichs zu automatisieren.
1 Setzen Sie die Einfügemarke in das Dokument und führen Sie dann einen der folgenden Schritte aus, um das
Dialogfeld „Neue CSS-Regel“ zu öffnen:
• Wählen Sie „Formatieren“ > „CSS-Stile“ > „Neu“ aus.
• Klicken Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) rechts unten auf die Schaltfläche „Neue CSS-Regel“ (+).
• Markieren Sie Text im Dokumentfenster und wählen Sie im Popupmenü „Zielregel“ des CSS-
Eigenschafteninspektors („Fenster“ > „Eigenschaften“) die Option „Neue CSS-Regel“ aus. Klicken Sie dann auf die
Schaltfläche „Regel bearbeiten“ oder wählen Sie im Eigenschafteninspektor eine Option aus (z. B. die Schaltfläche
„Fett“), um eine neue Regel einzurichten.
2 Geben Sie im Dialogfeld „Neue CSS-Regel“ den Selektor-Typ für die zu erstellende CSS-Regel an:
• Wenn Sie einen benutzerdefinierten Stil erstellen möchten, der als class-Attribut auf HTML-Elemente
angewendet werden kann, wählen Sie im Popupmenü „Selektor-Typ“ die Option „Klasse“ aus und geben Sie dann
im Textfeld „Selektor-Name“ einen Namen für den Stil ein.
Note: Die Namen von Klassen müssen mit einem Punkt beginnen und können aus einer beliebigen Kombination von
Buchstaben und Zahlen bestehen (z. B. „.myhead1“). Wenn Sie am Anfang keinen Punkt eingeben, fügt Dreamweaver
ihn automatisch hinzu.
• Wenn Sie die Formatierung für ein Tag mit einem bestimmten ID-Attribut festlegen möchten, wählen Sie im
Popupmenü „Selektor-Typ“ die Option „ID“ aus und geben Sie dann im Textfeld „Selektor-Name“ die eindeutige
ID (z. B. „containerDIV“) ein.
Note: IDs müssen mit einem Nummernsymbol (#) beginnen und können aus einer beliebigen Kombination von
Buchstaben und Ziffern bestehen (z. B. „#myID1“). Wenn Sie als erstes Zeichen kein Nummernsymbol eingeben, wird das
Symbol in Dreamweaver automatisch hinzugefügt.
• Wenn Sie die Standardformatierung eines bestimmten HTML-Tags neu definieren möchten, wählen Sie im
Popupmenü „Selektor-Typ“ die Option „Tag“ aus. Geben Sie dann im Textfeld „Selektor-Name“ ein HTML-Tag
ein oder wählen Sie im Popupmenü ein Tag aus.
• Wenn Sie eine zusammengesetzte Regel festlegen möchten, die auf mindestens zwei Tags, Klassen oder IDs
gleichzeitig angewendet wird, wählen Sie die Option „Zusammengesetzter Ausdruck“ aus und geben Sie die
Selektoren für die zusammengesetzte Regel ein. Wenn Sie beispielsweise div p eingeben, wirkt sich die Regel auf
alle p-Elemente in Div-Tags aus. Beim Hinzufügen oder Löschen von Selektoren wird in einem Textbereich genau
beschrieben, auf welche Elemente sich die Regel auswirkt.
146
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
3 Wählen Sie die Position aus, an der Sie die Regel definieren möchten, und klicken Sie dann auf „OK“.
• Wenn Sie die Regel in einem Stylesheet ablegen möchten, das bereits mit dem Dokument verknüpft ist, wählen Sie
das entsprechende Stylesheet aus.
• Wenn Sie ein externes Stylesheet erstellen möchten, wählen Sie „Neue Stylesheet-Datei“.
• Wenn Sie den Stil in das aktuelle Dokument einbetten möchten, wählen Sie „Nur dieses Dokument“.
4 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Stiloptionen aus, die Sie für die neue CSS-Regel festlegen
möchten. Weitere Informationen finden Sie im folgenden Abschnitt:
5 Nachdem Sie alle Formateigenschaften festgelegt haben, klicken Sie auf „OK“.
Note: Wenn Sie auf „OK“ klicken, ohne Formatoptionen festgelegt zu haben, wird eine neue leere Regel erstellt.
CSS-Eigenschaften festlegen
Sie können Eigenschaften für CSS-Regeln festlegen. Hierzu zählen beispielsweise die Textschriftart, das
Hintergrundbild bzw. die Hintergrundfarbe, der Abstand und Layouteigenschaften sowie die Darstellung von
Listenelementen. Erstellen Sie zunächst eine neue Regel und legen Sie dann beliebige der folgenden Eigenschaften fest.
CSS-Schrifteigenschaften definieren
In der Kategorie „Schrift“ des Dialogfelds „CSS-Regel-Definition“ definieren Sie grundlegende Schriftart- und
Schriftstileigenschaften für einen CSS-Stil.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Schrift“ aus und legen Sie die gewünschten
Stileigenschaften fest.
Die folgenden Eigenschaften können leer gelassen werden, wenn sie für den Stil nicht von Bedeutung sind:
Font-family Legt mindestens eine Schriftfamilie für den Stil fest. In Browsern wird der Text in der ersten Schrift der
Schriftfamilie angezeigt, die auf dem jeweiligen Computer installiert ist. Geben Sie aus Gründen der Kompatibilität
mit Internet Explorer 3.0 an erster Stelle eine Windows-Schrift an. Das Font-family-Attribut wird von beiden
Browsern unterstützt.
Font-size Legt die Größe des Texts fest. Sie können eine bestimmte Größe wählen, indem Sie die Größe als Zahl und
die entsprechende Maßeinheit auswählen, oder Sie können eine relative Größe wählen. Wählen Sie Pixel als
Größeneinheit, wenn Sie verhindern möchten, dass Browser den Text verzerren. Das Font-size-Attribut wird von
beiden Browsern unterstützt.
Font-style Legt den Schriftstil fest (Standard, kursiv oder oblique). Die Standardeinstellung lautet „normal“. Das
Font-style-Attribut wird von beiden Browsern unterstützt.
Line-height Legt die Höhe der Zeile fest, in die der Text eingefügt wird. Diese Einstellung wird traditionell als
Zeilenabstand bezeichnet. Wählen Sie „normal“, wenn die Zeilenhöhe je nach Schriftgröße automatisch berechnet
werden soll, oder geben Sie einen genauen Wert ein und wählen Sie eine Maßeinheit. Das Line-height-Attribut wird
von beiden Browsern unterstützt.
Text-decoration Formatiert den Text unterstrichen, überstrichen oder durchgestrichen bzw. als blinkenden Text. Die
Standardeinstellung für normalen Text ist „none“. Die Standardeinstellung für Hyperlinks ist „underline“. Wenn Sie
147
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
für Hyperlinks die Einstellung „none“ wählen, können Sie die Unterstreichung von Hyperlinks entfernen, indem Sie
eine spezielle Klasse definieren. Das Font-decoration-Attribut wird von beiden Browsern unterstützt.
Font-weight Weist der Schrift eine spezifische oder relative Stärke zu. Eine normale Stärke entspricht dem Wert 400,
fett gedruckte Schrift hat den Wert 700. Das Font-weight-Attribut wird von beiden Browsern unterstützt.
Font-variant Formatiert den Text als Kapitälchen. Dreamweaver zeigt dieses Attribut nicht im Dokumentfenster an.
Das Font-variant-Attribut wird von Internet Explorer, aber nicht von Netscape Navigator unterstützt.
Text-transform Formatiert den ersten Buchstaben jedes Worts in der Auswahl als Großbuchstaben bzw. stellt alle
ausgewählten Wörter vollständig in Groß- oder Kleinbuchstaben dar. Das Font-transform-Attribut wird von beiden
Browsern unterstützt.
Color Bestimmt die Textfarbe. Das Color-Attribut wird von beiden Browsern unterstützt.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Hintergrundeigenschaften für CSS-Stile definieren
In der Kategorie „Hintergrund“ des Dialogfelds „CSS-Regel-Definition“ definieren Sie Hintergrundeigenschaften für
einen CSS-Stil. Hintergrundeigenschaften können auf jedes Element einer Webseite angewendet werden. Sie können
zum Beispiel einen Stil erstellen, der einen Textbereich oder eine ganze Seite mit einer Hintergrundfarbe oder einem
Hintergrundbild versieht. Sie können auch die Position des Hintergrundbilds festlegen.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Hintergrund“ aus und legen Sie die gewünschten
Stileigenschaften fest.
Die folgenden Eigenschaften können leer gelassen werden, wenn sie für den Stil nicht von Bedeutung sind:
Background-color Legt die Hintergrundfarbe für das Element fest. Das Background-color-Attribut wird von beiden
Browsern unterstützt.
Hintergrundbild Legt das Hintergrundbild für das Element fest. Das Background-image-Attribut wird von beiden
Browsern unterstützt.
Background-repeat Legt fest, ob und wie das Hintergrundbild wiederholt werden soll. Das Background-repeat-
Attribut wird von beiden Browsern unterstützt.
• Mit „no-repeat“ wird das Bild nur einmal am Anfang des Elements angezeigt.
• Mit „repeat“ wird das Bild mehrmals horizontal und vertikal hinter dem Element angezeigt.
• Mit „repeat-x“ und „repeat-y“ wird ein horizontales bzw. vertikales Bilderband angezeigt. Die Bilder werden dabei
auf die Größe des Elements zugeschnitten.
Note: Mit dem Background-repeat-Attribut können Sie die Definition des
body-Tags abwandeln und ein
Hintergrundbild definieren, das nicht mehrmals neben- oder untereinander angezeigt wird.
Background-attachment Legt fest, ob die Position des Hintergrundbilds fixiert ist oder ob das Hintergrundbild
zusammen mit dem Inhalt einen Bildlauf durchführt. Beachten Sie, dass einige Browser auch dann einen Bildlauf für
das Hintergrundbild durchführen, wenn Sie die feste Position gewählt haben. Dieses Attribut wird von Internet
Explorer, aber nicht von Netscape Navigator unterstützt.
148
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Background-position (X) und Background-position (Y) Legen die Anfangsposition des Hintergrunds in Relation zum
Element fest. Diese Einstellungen können verwendet werden, um ein Hintergrundbild auf der Seite vertikal (Y) und
horizontal (X) zu zentrieren. Wenn Sie für das Background-attachment-Attribut die Einstellung „fixed“ ausgewählt
haben, wird die Position relativ zum Dokumentfenster und nicht relativ zum Element aufgefasst.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Blockeigenschaften für CSS-Stile definieren
In der Kategorie „Block“ des Dialogfelds „CSS-Regel-Definition“ legen Sie die Abstände und die Ausrichtung von Tags
und Eigenschaften fest.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Block“ und anschließend ggf. eine der folgenden
Stileigenschaften aus. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das
entsprechende Feld leer.)
Word-spacing Legt den Abstand zwischen Wörtern fest. Um einen bestimmten Wert einzustellen, wählen Sie im
Popupmenü die Option „(Wert)“ aus und geben Sie einen Zahlenwert ein. Wählen Sie im zweiten Popupmenü eine
Maßeinheit aus (z. B. px, pt usw.).
Note: Sie können auch negative Werte eingeben. Allerdings hängt die korrekte Anzeige vom Browser ab. Dreamweaver
zeigt dieses Attribut nicht im Dokumentfenster an.
Letter-spacing Bestimmt den Abstand zwischen den Buchstaben oder sonstigen Zeichen. Wenn Sie den
Zeichenabstand verringern möchten, geben Sie einen negativen Wert ein (z. B. -4). Die Einstellung für den
Zeichenabstand setzt die Blocksatz-Einstellung eines Textes außer Kraft. Das Letter-spacing-Attribut wird von
Internet Explorer ab Version 4 und von Netscape Navigator 6 unterstützt.
Vertical-align Bestimmt die vertikale Ausrichtung des Elements, auf das dieses Attribut angewendet wird.
Dreamweaver zeigt dieses Attribut nur dann im Dokumentfenster an, wenn es auf das
<img>-Tag angewendet wird.
Text-align Legt fest, wie Text innerhalb des Elements ausgerichtet wird. Das Text-align-Attribut wird von beiden
Browsern unterstützt.
Text-indent Bestimmt, wie weit die erste Textzeile eingerückt wird. Ein negativer Wert kann verwendet werden, um
einen hängenden Einzug zu erstellen, die korrekte Anzeige hängt aber vom Browser ab. Dreamweaver zeigt dieses
Attribut nur dann im Dokumentfenster an, wenn das Tag auf Elemente der Blockebene angewendet wird. Das Text-
indent-Attribut wird von beiden Browsern unterstützt.
White-space Legt fest, wie Leerräume innerhalb des Elements gehandhabt werden. Drei Optionen stehen zur
Auswahl: Mit der Einstellung „normal“ werden Leerräume entfernt. Mit der Einstellung „pre“ wird der Text so
behandelt, als stünde er in
pre-Tags (d. h. sämtliche Leerräume wie Leerzeichen, Tabulatoren und Absatzmarken
werden berücksichtigt). Mit „nowrap“ wird festgelegt, dass nur dann ein Textumbruch erfolgen soll, wenn ein
br-Tag
gefunden wird. Dreamweaver zeigt dieses Attribut nicht im Dokumentfenster an. Das White-space-Attribut wird von
Netscape Navigator und von Internet Explorer ab Version 5.5 unterstützt.
Display Bestimmt, ob und wie ein Element angezeigt wird. Die Option „none“ bewirkt, dass das Element, auf das sich
die Option bezieht, nicht angezeigt wird.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
149
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Boxeigenschaften definieren
Über die Kategorie „Box“ des Dialogfelds „CSS-Regel-Definition“ können Sie Einstellungen für Tags und
Eigenschaften definieren, die sich auf die Anordnung der Elemente auf der Seite auswirken.
Mit entsprechenden Auffüllungs- und Randeinstellungen können Sie die Eigenschaften der einzelnen Seiten eines
Elements festlegen. Mit der Option „Für alle gleich“ können Sie hingegen allen Seiten eines Elements dieselbe
Einstellung zuweisen.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Option „Box“ und anschließend beliebige der folgenden
Stileigenschaften aus. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das
entsprechende Feld leer.)
Breite, Höhe Legen die Breite und Höhe des Elements fest.
Float Bestimmt, auf welcher Seite andere Elemente wie etwa Text, absolut positionierte <div>-Elemente, Tabellen
usw. um ein Element herumfließen. Andere Elemente werden rund um das schwebende Element in normaler Weise
umgebrochen. Das Float-Attribut wird von beiden Browsern unterstützt.
Clear Legt fest, auf welcher Seite keine AP-Elemente zugelassen sind. Wenn auf der freien Seite ein AP-Element
enthalten ist, wird das Element mit der Einstellung „Clear“ darunter verschoben. Das Clear-Attribut wird von beiden
Browsern unterstützt.
Padding Legt den Abstand zwischen dem Inhalt des Elements und seinem Rahmen fest (wenn kein Rahmen
verwendet wird, bezieht sich diese Einstellung auf den Abstand zum Seitenrand). Deaktivieren Sie die Option „Für alle
gleich“, wenn Sie die Auffüllung für einzelne Seiten des Elements individuell einstellen möchten.
Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Auffüllung fest.
Margin Bestimmt den Abstand zwischen dem Rand eines Elements (bzw. dem Seitenrand, wenn kein Rand
vorhanden sind) und einem anderen Element. Dreamweaver zeigt dieses Attribut nur dann im Dokumentfenster an,
wenn es auf Elemente der Blockebene angewendet wird (Absätze, Überschriften, Listen usw.). Deaktivieren Sie die
Option „Für alle gleich“, wenn Sie den Randabstand für einzelne Seiten des Elements individuell einstellen möchten.
Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Randabstand fest.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Rahmeneigenschaften für CSS-Stile definieren
Definieren Sie in der Kategorie „Rahmen“ des Dialogfelds „CSS-Regel-Definition“ Eigenschaften wie Breite, Farbe
und Stil für den Rahmen, der ein Element umgibt.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
150
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Rahmen“ aus und legen Sie die folgenden
Stileigenschaften fest. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das
entsprechende Feld leer.)
Typ Bestimmt das Aussehen des Rahmens. Wie der Rahmen tatsächlich dargestellt wird, hängt jedoch vom jeweiligen
Browser ab. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie den Rahmenstil für einzelne Seiten des Elements
individuell einstellen möchten.
Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Rahmenstil fest.
Breite Legt die Breite des Rahmens um ein Element fest. Das Width-Attribut wird von beiden Browsern unterstützt.
Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Rahmenbreite für einzelne Seiten des Elements individuell
einstellen möchten.
Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Breite fest.
Color Legt die Farbe des Rahmens fest. Sie können die Farbe jeder Seite separat festlegen, die Anzeige hängt allerdings
vom Browser ab. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Rahmenfarbe für einzelne Seiten des
Elements individuell einstellen möchten.
Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Farbe fest.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Listeneigenschaften für CSS-Stile definieren
In der Kategorie „Liste“ des Dialogfelds „CSS-Regel-Definition“ definieren Sie Eigenschaften aller Listen-Tags, wie
Größe und Art der Aufzählungspunkte.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Liste“ aus und legen Sie beliebige der folgenden
Stileigenschaften fest. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das
entsprechende Feld leer.)
List-style-type Legt das Aussehen von Aufzählungspunkten bzw. der Nummerierung fest. Das List-style-type-
Attribut wird von beiden Browsern unterstützt.
List-style-image
Legt ein Bild fest, das als benutzerdefinierter Listenpunkt verwendet werden soll. Klicken Sie auf
„Durchsuchen“ (Windows) bzw. „Wählen“ (Macintosh), um ein Bild auszuwählen, oder geben Sie den Pfad des Bilds ein.
List-style-position Bestimmt, ob bei einem Listenelement eine umgebrochene Zeile eingerückt wird („outside“) oder
am linken Seitenrand beginnt („inside“).
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Positionierungseigenschaften für CSS-Stile definieren
Die Positionierungs-Stileigenschaften legen fest, wie der mit dem ausgewählten CSS-Stil formatierte Inhalt auf der
Seite positioniert wird.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
151
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Option „Positionierung“ aus und legen Sie die gewünschten
Stileigenschaften fest.
Die folgenden Eigenschaften können leer gelassen werden, wenn sie für den Stil nicht von Bedeutung sind:
Position Legt fest, wie der Browser die ausgewählten Elemente positionieren soll. Folgende Optionen sind verfügbar:
• Die Option absolute ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die Felder „Platzierung“
eingeben, relativ zum nächsten absolut oder relativ positionierten Vorgänger an. Falls kein absolut oder relativ
positionierter Vorgänger existiert, wird der Inhalt relativ zur oberen linken Ecke der Seite positioniert.
• Die Option relative ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die „Placement“-Felder
eingeben, relativ zur Position des Blocks im Textfluss des Dokuments an. Beispiel: Wenn Sie einem Element eine
relative Position und obere und linke Koordinaten von je 20px zuweisen, wird das Element von seiner normalen
Position im Fluss aus um 20px nach rechts und 20px nach unten verschoben. Elemente können auch relativ - mit
oder ohne Koordinaten für oben, links, rechts oder unten - positioniert werden, um einen Kontext für absolut
positionierte Unterelemente zu schaffen.
• Die Option fixed ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die „Placement“-Felder
eingeben, relativ zur oberen linken Ecke des Browsers an. Der Inhalt bleibt an dieser Position fixiert, während der
Benutzer durch die Seite blättert.
• Die Option static ordnet den Inhalt an seiner Position im Textfluss an. Dies ist die Standardposition aller
positionierbaren HTML-Elemente.
Visibility Legt den Anfangsstatus für die Sichtbarkeit des Inhalts fest. Wenn Sie keine Sichtbarkeitseigenschaft
festlegen, wird standardmäßig der Wert des übergeordneten Tags für den betreffenden Inhalt übernommen. Die
vorgegebene Sichtbarkeitseinstellung für das <body>-Tag ist „visible“. Wählen Sie eine der folgenden
Sichtbarkeitsoptionen aus:
• Die Option inherit übernimmt die Sichtbarkeitseigenschaft des übergeordneten Elements.
• Die Option visible zeigt den Inhalt an, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt.
• Die Option hidden blendet den Inhalt aus, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt.
Z-Index Legt die Stapelreihenfolge für den Inhalt fest. Elemente mit höherem Z-Index werden oberhalb von
Elementen mit niedrigerem (oder keinem) Z-Index angezeigt. Sie können positive und negative Werte eingeben.
(Wenn Ihr Inhalt absolut positioniert ist, ändern Sie die Stapelreihenfolge am einfachsten im Bedienfeld „AP-
Elemente“.)
Überlauf Legt fest, was geschieht, wenn der Inhalt eines Containers (z. B. eines <div>- oder <p>-Containers) die
Containergröße überschreitet. Diese Eigenschaften steuern, wie eine Erweiterung gehandhabt wird:
• Die Option visible vergrößert den Container, sodass der ganze Inhalt sichtbar ist. Der Container wird nach unten
und nach rechts erweitert.
• Die Option hidden behält die Größe des Containers bei und schneidet den überlaufenden Inhalt ab. Dabei werden
keine Bildlaufleisten angezeigt.
• Die Option scroll fügt dem Container Bildlaufleisten hinzu, unabhängig davon, ob der Inhalt die Containergröße
überschreitet oder nicht. Sie können Bildlaufleisten explizit hinzufügen, damit in einer dynamischen Umgebung
keine Verwirrung entsteht, wenn Bildlaufleisten einmal angezeigt und dann wieder nicht angezeigt werden. Diese
Option wird im Dokumentfenster nicht angezeigt.
• Die Option auto bewirkt, dass Bildlaufleisten nur dann angezeigt werden, wenn der Inhalt des Containers seine
Begrenzung überschreitet. Diese Option wird im Dokumentfenster nicht angezeigt.
152
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Placement Legt die Position und Größe des Inhaltsblocks fest. Wie der Browser die Position interpretiert, hängt von
der Einstellung unter „Position“ ab. Die Größenwerte werden außer Kraft gesetzt, wenn der Inhaltsblock die
angegebene Größe überschreitet.
Als Maßeinheit für Position und Größe wird standardmäßig die Einheit Pixel (px) verwendet. Sie können aber auch
die folgenden Maßeinheiten verwenden: Pica (pc), Punkt (pt), Zoll (in), mm, cm, em, ex oder % (Prozentsatz vom
Wert des übergeordneten Elements). Zwischen der Abkürzung der Maßeinheit und dem Wert darf kein Leerzeichen
stehen: Eine korrekte Eingabe ist zum Beispiel
3mm.
Clip Definiert den sichtbaren Teil des Inhalts. Wenn Sie einen Schneidebereich festlegen, können Sie auf diesen mit
einer Skriptsprache wie z. B. JavaScript zugreifen und die Eigenschaften bearbeiten, um Spezialeffekte (z. B.
Wischeffekte) zu erzielen. Der Wischeffekt kann über Zeitleisten und das Verhalten „Eigenschaft ändern“ eingerichtet
werden.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
Erweiterungseigenschaften für CSS-Stile definieren
Zu den Stileigenschaften der Kategorie „Erweiterungen“ gehören Filter-, Seitenumbruch- und Mauszeigeroptionen.
Note: In Dreamweaver stehen eine ganze Reihe zusätzlicher Erweiterungseigenschaften zur Verfügung, auf die Sie nur
über das Bedienfeld „CSS-Stile“ zugreifen können. Sie können die Liste der verfügbaren Erweiterungseigenschaften auf
einfache Weise aufrufen, indem Sie das Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) öffnen, unten im Bedienfeld auf
die Schaltfläche „Kategorieansicht zeigen“ klicken und die Kategorie „Erweiterungen“ erweitern.
1 Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist.
2 Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Option „Erweiterungen“ und anschließend beliebige der
folgenden Formateigenschaften. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das
entsprechende Feld leer.)
Page-break-before Erzwingt beim Drucken den Beginn einer neuen Seite entweder vor oder nach dem Objekt, das
von dem Stil beeinflusst wird. Wählen Sie im Popupmenü die gewünschte Option aus. Diese Option wird von
Browsern der Version 4.0 nicht unterstützt. In späteren Versionen ist dies jedoch möglicherweise der Fall.
Cursor Ändert das Aussehen des Mauszeigers, wenn dieser sich auf einem Objekt befindet, das von dem Stil gesteuert
wird. Wählen Sie im Popupmenü die gewünschte Option aus. Dieses Attribut wird von Internet Explorer ab
Version 4.0 sowie von Netscape Navigator 6 unterstützt.
Filter Wendet Spezialeffekte wie Unschärfe oder Invertierung auf das Objekt an, das von dem Stil gesteuert wird.
Wählen Sie im Popupmenü einen Effekt aus.
4 Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“.
CSS-Regeln bearbeiten
Bei Bedarf können Sie sowohl interne als auch externe Regeln, die Sie auf ein Dokument angewendet haben, mühelos
ändern.
153
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Wenn Sie Stile in einem CSS-Stylesheet ändern, das bereits den Text in einem Dokument steuert, werden diese
Änderungen umgehend an allen Textstellen vorgenommen, die von diesem CSS-Stylesheet gesteuert werden.
Änderungen an einem externen Stylesheet wirken sich auf alle Dokumente aus, die mit ihm verknüpft sind.
Zum Bearbeiten von Stylesheets können Sie einen externen Editor festlegen.
Regeln im Bedienfeld „CSS-Stile“ (Modus „Aktuell“) bearbeiten
1 Öffnen Sie das Bedienfeld „CSS-Stile“, indem Sie „Fenster“ > „CSS-Stile“ auswählen.
2 Klicken Sie oben im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Aktuell“.
3 Wählen Sie ein Textelement im aktuellen Text, um dessen Eigenschaften anzuzeigen.
4 Führen Sie einen der folgenden Schritte aus:
• Doppelklicken Sie im Bedienfeld „Zusammenfassung für Auswahl“ auf eine Eigenschaft, um das Dialogfeld „CSS-
Regel-Definition“ anzuzeigen, und nehmen Sie die Änderungen vor.
• Wählen Sie im Bedienfeld „Zusammenfassung für Auswahl“ eine Eigenschaft aus und bearbeiten Sie diese im
darunter angezeigten Bedienfeld „Eigenschaften“.
• Wählen Sie eine Regel im Bedienfeld „Regeln“ aus und bearbeiten Sie beliebige Eigenschaften der Regel im darunter
angezeigten Bedienfeld „Eigenschaften“.
Note: Sie können das Doppelklick-Verhalten zum Bearbeiten von CSS durch Modifizieren der Dreamweaver-
Voreinstellungen ändern.
Regeln im Bedienfeld „CSS-Stile“ (Modus „Alle“) bearbeiten
1 Öffnen Sie das Bedienfeld „CSS-Stile“, indem Sie „Fenster“ > „CSS-Stile“ auswählen.
2 Klicken Sie oben im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Alle“.
3 Führen Sie einen der folgenden Schritte aus:
• Doppelklicken Sie im Bedienfeld „Alle Regeln“ auf eine Regel, um das Dialogfeld „CSS-Regel-Definition“
anzuzeigen, und nehmen Sie die Änderungen vor.
• Wählen Sie eine Regel im Bedienfeld „Alle Regeln“ aus und bearbeiten Sie die Eigenschaften der Regel im darunter
angezeigten Bedienfeld „Eigenschaften“.
• Wählen Sie eine Regel im Bedienfeld „Alle Regeln“ und klicken Sie dann im Bedienfeld „CSS-Stile“ in der unteren
rechten Ecke auf die Schaltfläche „Stil bearbeiten“.
Note: Sie können das Doppelklick-Verhalten zum Bearbeiten von CSS durch Modifizieren der Dreamweaver-
Voreinstellungen ändern.
Namen von CSS-Selektoren ändern
1 Wählen Sie im Bedienfeld „CSS-Stile“ (Modus „Alle“) den zu ändernden Selektor aus.
2 Klicken Sie erneut auf den Selektor, um den Namen bearbeiten zu können.
3 Nehmen Sie die Änderungen vor und drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
More Help topics
“Texteigenschaften im Eigenschafteninspektor festlegen” on page 245
154
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Eigenschaft zur CSS-Regel hinzufügen
Über das Bedienfeld „CSS-Stile“ können Sie Ihren Regeln bestimmte Eigenschaften hinzufügen.
1 Klicken Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS“) im Bereich „Alle Regeln“ (Modus „Alle“) auf eine Regel
oder wählen Sie im Bedienfeld „Zusammenfassung für Auswahl“ eine Eigenschaft (Modus „Aktuell“) aus.
2 Führen Sie einen der folgenden Schritte aus:
• Wenn die Ansicht „Nur festgelegte Eigenschaften anzeigen“ im Bedienfeld „Eigenschaften“ ausgewählt wurde,
klicken Sie auf den Hyperlink „Eigenschaften hinzufügen“ und fügen Sie eine Eigenschaft hinzu.
• Wenn die Kategorie- oder Listenansicht im Bedienfeld „Eigenschaften“ ausgewählt wurde, geben Sie für die
hinzuzufügende Eigenschaft einen Wert an.
CSS-Klassenstile anwenden, entfernen oder
umbenennen
Klassenstile sind die einzigen CSS-Stile, die auf einen beliebigen Text im Dokument angewendet werden können,
unabhängig davon, welche Tags den Text steuern. Alle mit dem aktuellen Dokument verbundenen Klassenstile
werden im Bedienfeld „CSS-Stile“ mit einem Punkt [.] vor ihrem Namen und im Popupmenü „Stil“ des
Eigenschafteninspektors für Text angezeigt.
Sie werden feststellen, dass die meisten Stile sofort aktualisiert wurden. Um sicher zu gehen, dass alle Stile richtig
angewendet wurden, sollten Sie die Seite jedoch auch in einem Browser betrachten. Wenn Sie zwei oder mehr Stile auf eine
Textstelle anwenden, kann ein Konflikt zwischen diesen Stilen entstehen, der zu unerwarteten Ergebnissen führen kann.
Wenn Sie eine Vorschau der in einem externen CSS-Stylesheet definierten Stile erstellen, denken Sie daran, das
Stylesheet zu speichern, um sicher zu gehen, dass Ihre Änderungen bei der Vorschau im Browser angezeigt werden.
More Help topics
“Cascading Stylesheets” on page 134
“Cascading Styles” on page 136
“Bedienfeld „CSS-Stile“” on page 139
CSS-Klassenstil anwenden
1 Wählen Sie im Dokument den Text aus, auf den Sie einen CSS-Stil anwenden möchten.
Setzen Sie die Einfügemarke in einen Absatz, um den Stil auf den ganzen Absatz anzuwenden.
Wenn Sie einen Textbereich innerhalb eines einzigen Absatzes auswählen, wirkt sich der CSS-Stil nur auf den
ausgewählten Textbereich aus.
Wenn der CSS-Stil auf ein bestimmtes Tag angewendet werden soll, wählen Sie das Tag im Tag-Selektor links unten
im Dokumentfenster aus.
2 Wenn Sie einen Klassenstil anwenden möchten, führen Sie einen der folgenden Schritte aus:
• Wählen Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) den Modus „Alle“ aus, klicken Sie mit der rechten
Maustaste auf den Namen des gewünschten Stils und wählen Sie im Kontextmenü die Option „Anwenden“.
155
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
• Wählen Sie im Eigenschafteninspektor für HTML im Popupmenü „Klasse“ den Klassenstil aus, den Sie anwenden
möchten.
• Klicken Sie im Dokumentfenster mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf den ausgewählten Text. Wählen Sie dann im Kontextmenü den Befehl „CSS-Stile“ und wählen Sie
den gewünschten Stil.
• Wählen Sie „Formatieren“ > „CSS-Stile“ und dann im Untermenü den gewünschten Stil aus.
Klassenstil von einer Auswahl entfernen
1 Wählen Sie das Objekt oder den Text aus, aus dem Sie den Stil entfernen möchten.
2 Wählen Sie im Eigenschafteninspektor für HTML („Fenster“ > „Eigenschaften“) im Popupmenü „Klasse“ die
Option „Keine“ aus.
Klassenstil umbenennen
1 Klicken Sie im Bedienfeld „CSS-Stile“ mit der rechten Maustaste auf den umzubenennenden CSS-Klassenstil und
wählen Sie „Klasse umbenennen“.
Sie können eine Klasse auch umbenennen, indem Sie im Optionsmenü des Bedienfeldes „CSS-Stile“ die Option
„Klasse umbenennen“ auswählen.
2 Vergewissern Sie sich, dass im Dialogfeld „Klasse umbenennen“ die umzubenennende Klasse im Popupmenü
„Klasse umbenennen“ ausgewählt ist.
3 Geben Sie in das Textfeld „Neuer Name“ den neuen Namen für die Klasse ein und klicken Sie dann auf „OK“.
Wenn die umzubenennende Klasse Teil des Head-Bereichs des aktuellen Dokuments ist, ändert Dreamweaver den
Klassennamen (auch an sämtlichen Fundstellen im aktuellen Dokument). Wenn die umzubenennende Klasse eine
externe CSS-Datei ist, öffnet Dreamweaver die Datei und ändert den Namen in der Datei. Dreamweaver öffnet
außerdem ein Dialogfeld „Suchen und ersetzen“, damit Sie die gesamte Site nach Fundstellen des alten Klassennamens
durchsuchen können.
CSS-Regeln verschieben/exportieren
Die CSS-Verwaltungsfunktionen in Dreamweaver sorgen dafür, dass sich die CSS-Regeln problemlos an andere Orte
verschieben oder exportieren lassen. Sie können Regeln u. a. von Dokument zu Dokument verschieben, vom Head-
Bereich eines Dokuments in ein externes Stylesheet sowie zwischen externen CSS-Dateien.
Note: Falls die Regel, die Sie verschieben möchten, mit einer Regel im Ziel-Stylesheet in Konflikt steht, zeigt Dreamweaver
das Dialogfeld „Gleichnamige Regel vorhanden“ an. Sollten Sie beabsichtigen, die in Konflikt stehende Regel zu
verschieben, platziert Dreamweaver die verschobene Regel direkt neben die entsprechende Regel im Ziel-Stylesheet.
More Help topics
“Code mit der Code-Symbolleiste einfügen” on page 335
156
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Regeln in ein neues Stylesheet verschieben/exportieren
1 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie im Bedienfeld „CSS-Stile“ die zu verschiebenden Regeln aus. Klicken Sie anschließend mit der rechten
Maustaste auf die Auswahl und wählen Sie im Kontextmenü die Option „CSS-Regeln verschieben...“ aus. Um
mehrere Regeln auszuwählen, halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und
klicken Sie auf die gewünschten Regeln.
• Wählen Sie in der Codeansicht die zu verschiebenden Regeln aus. Klicken Sie anschließend mit der rechten Maustaste
auf die Auswahl und wählen Sie im Kontextmenü die Option „CSS-Stile“ > „CSS-Regeln verschieben...“ aus.
Note: Auch wenn Sie nur einen Teil der Regel auswählen, wird die gesamte Regel an den neuen Ort verschoben.
2 Wählen Sie im Dialogfeld „In externes Stylesheet verschieben“ die neue Stylesheet-Option aus und klicken Sie auf
„OK“.
3 Geben Sie im Dialogfeld „Stylesheet-Datei speichern unter“ einen Namen für das neue Stylesheet ein und klicken
Sie auf „Speichern“.
Wenn Sie auf „Speichern“ klicken, speichert Dreamweaver ein neues Stylesheet mit den ausgewählten Regeln und fügt
es dem aktuellen Dokument hinzu.
Sie können Regeln auch mithilfe der Code-Symbolleiste verschieben. Die Code-Symbolleiste steht nur in der
Codeansicht zur Verfügung.
CSS-Regeln in ein vorhandenes Stylesheet verschieben/exportieren
1 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie im Bedienfeld „CSS-Stile“ die zu verschiebenden Regeln aus. Klicken Sie anschließend mit der rechten
Maustaste auf die Auswahl und wählen Sie im Kontextmenü die Option „CSS-Regeln verschieben...“ aus. Um
mehrere Regeln auszuwählen, halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und
klicken Sie auf die gewünschten Regeln.
• Wählen Sie in der Codeansicht die zu verschiebenden Regeln aus. Klicken Sie anschließend mit der rechten Maustaste
auf die Auswahl und wählen Sie im Kontextmenü die Option „CSS-Stile“ > „CSS-Regeln verschieben...“ aus.
Note: Auch wenn Sie nur einen Teil der Regel auswählen, wird die gesamte Regel an den neuen Ort verschoben.
2 Wählen Sie im Dialogfeld „In externes Stylesheet verschieben“ ein vorhandenes Stylesheet aus dem Popupmenü
aus oder navigieren Sie zu einem vorhandenen Stylesheet und klicken Sie auf „OK“.
Note: Das Popupmenü zeigt alle mit dem aktuellen Dokument verbundenen Stylesheets an.
Sie können Regeln auch mithilfe der Code-Symbolleiste verschieben. Die Code-Symbolleiste steht nur in der
Codeansicht zur Verfügung.
CSS-Regeln durch Ziehen mit der Maus umstellen oder verschieben
❖
Wählen Sie im Bedienfeld „CSS-Stile“ (Modus „Alle“) eine Regel aus und ziehen Sie diese an den gewünschten Ort. Um
Regeln innerhalb eines Stylesheets neu anzuordnen oder eine Regel in ein anderes Stylesheet bzw. in den Head-Bereich
des Dokuments zu verschieben, wählen Sie die betreffenden Regeln aus und ziehen sie an den gewünschten Ort.
Sie können mehrere Regeln auf einmal verschieben, indem Sie bei gedrückter Strg-Taste (Windows) bzw. bei
gedrückter Befehlstaste (Macintosh) auf mehrere Regeln klicken.
157
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Mehrere Regeln zum Verschieben auswählen
❖ Klicken Sie im Bedienfeld „CSS-Stile“ bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste
(Macintosh) auf die gewünschten Regeln.
Inline-CSS einer CSS-Regel hinzufügen
Inline-Stile sind keine empfohlenen Best Practices. Um das CSS ordentlicher und übersichtlicher zu gestalten, können
Sie Inline-Stile in CSS-Regeln konvertieren, die sich im Head-Bereich des Dokuments oder in einem externen
Stylesheet befinden.
1 Wählen Sie in der Codeansicht („Ansicht“ > „Code“) das gesamte Stilattribut aus, das den zu konvertierenden
Inline-CSS-Stil enthält.
2 Klicken Sie mit der rechten Maustaste und wählen Sie „CSS-Stile“ > „Inline-CSS in Regel konvertieren“.
3 Geben Sie im Dialogfeld „Inline-CSS konvertieren“ einen Klassennamen für die neue Regel ein und führen Sie
dann eine der folgenden Aktionen aus:
• Geben Sie ein Stylesheet an, in dem die neue CSS-Regel angezeigt werden sein soll, und klicken Sie auf „OK“.
• Wählen Sie den Head-Bereich des Dokuments als den Ort aus, an dem die neue CSS-Regel angezeigt werden soll,
und klicken Sie auf „OK“.
Sie können Regeln auch mithilfe der Code-Symbolleiste konvertieren. Die Code-Symbolleiste steht nur in der
Codeansicht zur Verfügung.
More Help topics
“Code mit der Code-Symbolleiste einfügen” on page 335
Link zu einem externen CSS-Stylesheet erstellen
Wenn Sie ein externes CSS-Stylesheet bearbeiten, wirken sich die Bearbeitungen auf alle Dokumente aus, die mit dem
CSS-Stylesheet verknüpft sind. Sie können die in einem Dokument enthaltenen CSS-Stile exportieren, um ein neues
CSS-Stylesheet zu erstellen, und ein externes Stylesheet anfügen bzw. eine Verknüpfung zu einem externen Stylesheet
herstellen, um die darin enthaltenen Stile anzuwenden.
Sie können jedes Stylesheet, das Sie erstellen oder in die Site kopieren, an Ihre Seiten anhängen. Außerdem wird
Dreamweaver mit vorgefertigten Stylesheets geliefert, die automatisch in die Site übertragen werden und an die Seiten
angehängt werden können.
1 Führen Sie einen der folgenden Schritte aus, um das Bedienfeld „CSS-Stile“ anzuzeigen:
• Wählen Sie „Fenster“ > „CSS-Stile“ aus.
• Drücken Sie Umschalt+F11.
2 Klicken Sie im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Stylesheet anfügen“. (Sie befindet sich unten rechts im
Bedienfeld.)
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf „Durchsuchen“, um nach einem externen CSS-Stylesheet zu suchen.
• Geben Sie im Feld „Datei/URL“ den Pfad des Stylesheets ein.
158
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
4 Wählen Sie unter „Hinzufügen als“ eine der nachstehenden Optionen:
• Um zwischen dem aktuellen Dokument und einem externen Stylesheet eine Verknüpfung herzustellen, wählen Sie
„Verknüpfung“. Hierdurch wird im HTML-Code das Verknüpfungs-Tag
href eingefügt und auf die URL der
Datei verwiesen, in der sich das veröffentlichte Stylesheet befindet. Diese Methode wird sowohl von Microsoft
Internet Explorer als auch von Netscape Navigator unterstützt.
• Es ist nicht möglich, mit einem <link>-Tag eine Referenz zwischen zwei externen Stylesheets hinzuzufügen. Wenn
Sie Stylesheets verschachteln möchten, müssen Sie eine Import-Direktive verwenden. Die meisten Browser
erkennen die Import-Direktive auch innerhalb einer Seite (anstatt nur in Stylesheets). Es gibt kleine Unterschiede
in der Art und Weise, das Problem widersprüchlicher Eigenschaften zu lösen, wenn die Regeln in verknüpften
externen Stylesheets und die Regeln in den in eine Seite importierten Stylesheets in Konflikt zueinander stehen.
Wählen Sie „Import“, wenn Sie ein Stylesheet importieren möchten, anstatt eine Verknüpfung herzustellen.
5 Geben Sie im Popupmenü „Medien“ das Zielmedium für das Stylesheet an.
Weitere Informationen zu medienabhängigen Stylesheets finden Sie auf der Website des World Wide Web
Consortium unter www.w3.org/TR/CSS21/media.html.
6 Klicken Sie auf die Schaltfläche „Vorschau“, um sicherzustellen, dass das Stylesheet der aktuellen Seite die
gewünschten Stile zuweist.
Wenn dies nicht der Fall ist, klicken Sie auf „Abbrechen“, um das Stylesheet zu entfernen. Die Seite wird mit der
vorherigen Darstellung wiederhergestellt.
7 Klicken Sie auf „OK“.
More Help topics
“Auf Dreamweaver-Beispieldateien basierende Seiten erstellen” on page 71
CSS-Stylesheets bearbeiten
Ein CSS-Stylesheet kann eine oder mehrere Regeln enthalten. Sie können eine einzelne Regel in einem CSS-Stylesheet
über das Bedienfeld „CSS-Stile“ bearbeiten oder das CSS-Stylesheet auch direkt bearbeiten.
1 Wählen Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) den Modus „Alle“ aus.
2 Doppelklicken Sie im Fensterbereich „Alle Regeln“ auf den Namen des gewünschten Stylesheets.
3 Ändern Sie das Stylesheet wie gewünscht im Dokumentfenster und speichern Sie es.
CSS-Code formatieren
Sie können Voreinstellungen für die Steuerung des CSS-Codes festlegen, wenn Sie eine CSS-Regel mithilfe der
Dreamweaver-Oberfläche erstellen oder bearbeiten. So können Sie beispielsweise Voreinstellungen definieren, die
dafür sorgen, dass sämtliche CSS-Eigenschaften in separate Zeilen platziert werden, Leerzeilen zwischen CSS-Regeln
gesetzt werden usw.
Wenn Sie Voreinstellungen für die CSS-Codeformatierung festlegen, werden die ausgewählten Einstellungen
automatisch auf alle CSS-Regeln angewendet, die Sie neu erstellen. Allerdings können Sie diese Voreinstellungen auch
manuell für einzelne Dokumente übernehmen. Das könnte sich als hilfreich erweisen, wenn Sie ein älteres HTML-
oder CSS-Dokument formatieren müssen.
159
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Note: Die Voreinstellungen für die CSS-Codeformatierung gelten nur für CSS-Regeln in externen oder eingebetteten
Stylesheets (nicht jedoch für Inline-Stile).
More Help topics
“Codeformat ändern” on page 325
Einstellungen für das Formatieren von CSS-Code festlegen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus.
2 Wählen Sie im Dialogfeld „Voreinstellungen“ die Kategorie „Codeformat“ aus.
3 Klicken Sie neben der Option „Erweiterte Formatierung“ auf die Schaltfläche „CSS...“.
4 Wählen Sie im Dialogfeld „CSS-Quellformatoptionen“ die Optionen aus, die auf den CSS-Quellcode angewendet
werden sollen. Im Fenster „Vorschau“ unten wird angezeigt, wie das CSS gemäß den von Ihnen ausgewählten
Optionen aussehen würde.
Eigenschaften einrücken Legt den Einrückwert für Eigenschaften innerhalb einer Regel fest. Sie können Tabulatoren
oder Leerzeichen angeben.
Jede Eigenschaft in separater Zeile Setzt jede Eigenschaft innerhalb einer Regel in eine separate Zeile
Öffnende Klammer in separater Zeile Setzt die öffnende Klammer für eine Regel in eine andere Zeile als den Selektor.
Nur wenn mehr als 1 Eigenschaft Setzt Regeln mit einer einzigen Eigenschaft in dieselbe Zeile wie den Selektor.
Alle Selektoren für eine Regel in derselben Zeile Setzt alle Selektoren für die Regel in dieselbe Zeile.
Leerzeile zwischen Regeln Fügt eine Leerzeile zwischen die einzelnen Regeln ein.
5 Klicken Sie auf „OK“.
Note: Die CSS-Codeformatierung übernimmt auch die Voreinstellung „Zeilenumbruch-Typ“, die Sie im Dialogfeld
„Voreinstellungen“ in der Kategorie „Codeformat“ festlegen.
CSS-Code in einem CSS-Stylesheet manuell formatieren
1 Öffnen Sie ein CSS-Stylesheet.
2 Wählen Sie „Befehle“ > „Quellcodeformatierung anwenden“ aus.
Die Formatierungsoptionen, die Sie in den Voreinstellungen für die CSS-Codeformatierung festlegen, werden auf das
gesamte Dokument angewendet. Ein einzelne Auswahl kann nicht formatiert werden.
Eingebetteten CSS-Code manuell formatieren
1 Öffnen Sie ein HTML-Seite, die eingebetteten CSS-Code im Head-Bereich des Dokuments enhält.
2 Wählen Sie einen beliebigen Teil des CSS-Codes aus.
3 Wählen Sie „Befehle“ > „Quellcodeformatierung auf Auswahl anwenden“ aus.
Die Formatierungsoptionen, die Sie in den Voreinstellungen für die CSS-Codeformatierung festlegen, werden nur auf
die CSS-Regeln im „head“-Bereich des Dokuments angewendet.
Note: Sie können „Befehle“ > „Quellcodeformatierung anwenden“ auswählen, um das gesamte Dokument entsprechend
den festgelegten Voreinstellungen für die Codeformatierung zu formatieren.
160
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Eigenschaft deaktivieren/aktivieren
Mit der Funktion „CSS-Eigenschaft deaktivieren/aktivieren“ können Sie CSS-Codeabschnitte aus dem Bedienfeld
„CSS-Stile“ auskommentieren, ohne direkt im Code Änderungen vornehmen zu müssen. Wenn Sie CSS-
Codeabschnitte auskommentieren, können Sie sehen, welche Auswirkungen bestimmte Eigenschaften und Werte auf
Ihre Seite haben.
Wenn Sie eine CSS-Eigenschaft deaktivieren, werden ihr CSS-Kommentar-Tags und die Beschriftung „[disabled]“
(deaktiviert) hinzugefügt. Sie können die deaktivierte CSS-Eigenschaft dann nach Bedarf problemlos wieder aktivieren
oder löschen.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung von „CSS-Eigenschaft
deaktivieren/aktivieren“ finden Sie unter www.adobe.com/go/dwcs5css_de.
1 Wählen Sie im Bereich „Eigenschaften“ des Bedienfelds „CSS-Stile“ („Fenster“ > „CSS-Stile“) die Eigenschaft aus,
die Sie deaktivieren möchten.
2 Klicken Sie in der rechten unteren Ecke des Bereichs „Eigenschaften“ auf das Symbol „CSS-Eigenschaft
deaktivieren/aktivieren“. Das Symbol wird auch angezeigt, wenn Sie den Mauszeiger links neben die Eigenschaft
bewegen.
Nachdem Sie auf das Symbol „CSS-Eigenschaft deaktivieren/aktivieren“ geklickt haben, wird links neben der
Eigenschaft das Symbol „Deaktiviert“ angezeigt. Wenn Sie die Eigenschaft wieder aktivieren möchten, klicken Sie
auf das Symbol „Deaktiviert“ oder klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter
Befehlstaste (Macintosh OS) auf die Eigenschaft und wählen Sie „Aktivieren“ aus.
3 (Optional) Um alle deaktivierten Eigenschaften in einer bestimmten Regel zu aktivieren oder zu löschen, klicken
Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh OS) auf eine Regel oder
Eigenschaft, in der Eigenschaften deaktiviert sind, und wählen „Alle in der ausgewählten Regel deaktivierten
aktivieren“ oder „Alle in der ausgewählten Regel deaktivierten löschen“.
CSS in der Live-Ansicht prüfen
Mithilfe der Kombination aus Prüfmodus und Live-Ansicht können Sie HTML-Elemente und ihre zugeordneten CSS-
Stile schnell identifizieren. Wenn der Prüfmodus aktiviert ist, können Sie den Mauszeiger über Elemente auf der Seite
bewegen, um die Attribute des CSS-Modells für alle Elemente auf Blockebene anzuzeigen.
Note: Weitere Informationen zum CSS-Box-Modell finden Sie in der CSS 2.1-Spezifikation (in englischer Sprache).
Im Prüfmodus können Sie nicht nur das Box-Modell visuell darstellen, sondern darüber hinaus auch das Bedienfeld
„CSS-Stile“ verwenden, wenn Sie den Mauszeiger über Elemente im Dokumentfenster bewegen. Wenn das Bedienfeld
„CSS-Stile“ im Modus „Aktuell“ geöffnet ist und Sie den Mauszeiger über ein Element auf der Seite bewegen, werden
die Regeln und Eigenschaften im Bedienfeld „CSS-Stile“ automatisch aktualisiert, sodass die Regeln und Eigenschaften
des Elements angezeigt werden. Zudem werden alle Ansichten oder Bedienfelder, die mit dem betreffenden Element
verbunden sind, ebenfalls aktualisiert (z. B. die Codeansicht, der Tag-Inspektor, der Eigenschafteninspektor usw.).
1 Öffnen Sie das Dokument im Dokumentfenster und klicken Sie auf die Schaltfläche „Überprüfen“ (in der
Dokumentsymbolleiste neben der Schaltfläche „Live-Ansicht“).
Note: Wenn die Live-Ansicht nicht bereits aktiviert ist, wird sie im Prüfmodus automatisch aktiviert.
2 Bewegen Sie den Mauszeiger über die Elemente auf der Seite, um das CSS-Box-Modell anzuzeigen. Rahmen, Rand,
Auffüllung und Inhalt werden im Prüfmodus in verschiedenen Farben hervorgehoben.
161
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
3 (Optional) Drücken Sie die Nach-links-Taste auf der Tastatur, damit das übergeordnete Element des aktuellen
hervorgehobenen Elements hervorgehoben wird. Drücken Sie die Nach-rechts-Taste, damit wieder die
Hervorhebung des untergeordneten Elements angezeigt wird.
4 (Optional) Klicken Sie auf ein Element, um eine hervorgehobene Auswahl zu sperren.
Note: Wenn Sie auf ein Element klicken, um eine hervorgehobene Auswahl zu sperren, wird der Prüfmodus
deaktiviert.
More Help topics
“Seitenvorschau in Dreamweaver” on page 312
“Bedienfeld „CSS-Stile“” on page 139
Browserübergreifende Probleme bei der CSS-
Wiedergabe überprüfen
Die Funktion „Browserkompatibilitätsprüfung“ hilft Ihnen dabei, Kombinationen von HTML und CSS zu finden, die
in bestimmten Browsern zu Problemen führen. Wenn Sie eine geöffnete Datei einer Browserkompatibilitätsprüfung
unterziehen, durchsucht Dreamweaver die Datei und meldet potenzielle Probleme bei der CSS-Wiedergabe im
Bedienfeld „Ergebnisse“. Eine Verlässlichkeitseinstufung, die durch einen zu einem Viertel, zur Hälfte, zu drei Vierteln
bzw. komplett ausgefüllten Kreis dargestellt wird, gibt die Wahrscheinlichkeit an, mit der es zu einem Auftreten des
Problems kommt. Dabei steht ein viertelvoller Kreis für ein mögliches Auftreten, während ein ganz ausgefüllter Kreis
ein sehr wahrscheinliches Auftreten signalisiert. Bei jedem gefundenen potenziellen Problem verweist Dreamweaver
über einen direkten Hyperlink auf die entsprechende Dokumentation in Adobe CSS Advisor. Diese Website enthält
Details zu den bekannten Problemen bei der Browserwiedergabe und bietet Lösungen zur Problembehandlung.
Die Browserkompatibilitätsprüfung überprüft standardmäßig die Kompatibilität mit folgenden Browsern: Firefox 1.5,
Internet Explorer (Windows) 6.0 und 7.0, Internet Explorer (Macintosh) 5.2, Netscape Navigator 8.0, Opera 8.0 und
9.0 sowie Safari 2.0.
Diese Funktion ersetzt die frühere Funktion „Zielbrowser-Prüfung“, bietet aber weiterhin deren CSS-Funktionalität.
Das heißt, die neue Browserkompatibilitätsprüfung prüft weiterhin den Code in Ihren Dokumenten, um festzustellen,
ob manche der CSS-Eigenschaften oder -Werte von den Zielbrowsern nicht unterstützt werden.
Die potenziellen Probleme mit der Browserunterstützung lassen sich in drei Stufen unterteilen:
• Ein Fehler bezeichnet CSS-Code, der ein ernsthaftes sichtbares Problem in einem bestimmten Browser verursachen
kann, beispielsweise das Verschwinden von Teilen einer Seite. (Fehler ist die Standardkennzeichnung für Probleme
mit der Browserunterstützung. Deshalb kann es mitunter vorkommen, dass Code mit unbekannten Auswirkungen
als Fehler gekennzeichnet wird.)
• Eine Warnung bezeichnet einen CSS-Codeabschnitt, der in einem bestimmten Browser nicht korrekt angezeigt
wird, der jedoch keine ernsten Anzeigeprobleme verursacht.
• Eine Informationsmeldung bezeichnet Code, der von einem bestimmten Browser nicht unterstützt wird, ansonsten
aber keine sichtbaren Auswirkungen hat.
Browserkompatibilitätsprüfungen bewirken keinerlei Änderungen im Dokument.
162
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
More Help topics
“XML-Dokumente überprüfen” on page 352
CSS Advisor
Browserkompatibilitätsprüfung ausführen
❖ Wählen Sie „Datei“ > „Seite überprüfen“ > „Browserkompatibilität“ aus.
Von einem gefundenen Problem betroffenes Element auswählen
❖ Doppelklicken Sie auf das Problem im Bedienfeld „Ergebnisse“.
Zum nächsten oder vorherigen identifizierten Problem im Code wechseln
❖ Wählen Sie in der Symbolleiste „Dokument“ im Menü „Browserkompatibilitätsprüfung“ die Option „Nächstes
Problem“ bzw. „Vorheriges Problem“.
Browser für die Kompatibilitätsprüfung durch Dreamweaver auswählen
1 Wählen Sie im Bedienfeld „Ergebnisse“ („Fenster“ > „Ergebnisse“) die Registerkarte
„Browserkompatibilitätsprüfung“.
2 Klicken Sie auf den grünen Pfeil in der oberen linken Ecke des Bedienfeldes „Ergebnisse“ und wählen Sie
„Einstellungen“ aus.
3 Markieren Sie bei jedem Browser, der in die Überprüfung einbezogen werden soll, das zugehörige
Kontrollkästchen.
4 Wählen Sie für jeden ausgewählten Browser eine Mindestversion für die Überprüfung aus dem entsprechenden
Popupmenü.
Um beispielsweise festzustellen, ob Probleme mit der CSS-Wiedergabe im Internet Explorer 5.0 (oder höher) und im
Netscape Navigator 7.0 (oder höher) auftreten könnten, markieren Sie die Kontrollkästchen neben den
Browsernamen und wählen im Popupmenü „Internet Explorer“ die Version „5.0“ und im Popupmenü „Netscape“ die
Version „7.0“.
Probleme aus der Browserkompatibilitätsprüfung ausschließen
1 Führen Sie eine Browserkompatibilitätsprüfung aus.
2 Klicken Sie dann im Bedienfeld „Ergebnisse“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf das Problem, das von zukünftigen Prüfungen ausgeschlossen werden soll.
3 Klicken Sie im Kontextmenü auf „Problem ignorieren“.
Liste der ignorierten Probleme bearbeiten
1 Wählen Sie im Bedienfeld „Ergebnisse“ („Fenster“ > „Ergebnisse“) die Registerkarte
„Browserkompatibilitätsprüfung“.
2 Klicken Sie auf den grünen Pfeil in der oberen linken Ecke des Bedienfeldes „Ergebnisse“ und wählen Sie „Liste der
ignorierten Probleme bearbeiten“ aus.
3 In der Datei „Exceptions.xml“ wählen Sie dann das Problem, das aus der Liste mit den ignorierten Problemen
entfernt werden soll, und löschen es.
163
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
4 Schließen und speichern Sie die Datei „Exceptions.xml“.
Browserkompatibilitätsprüfungs-Bericht speichern
1 Führen Sie eine Browserkompatibilitätsprüfung aus.
2 Klicken Sie auf der linken Seite des Bedienfeldes „Ergebnisse“ auf die Schaltfläche „Bericht speichern“.
Bewegen Sie den Mauszeiger über die Schaltflächen im Bedienfeld „Ergebnisse“, um Quickinfos aufzurufen.
Note: Berichte werden nicht automatisch gespeichert. Falls Sie die Kopie eines Berichts aufbewahren möchten, müssen
Sie die oben beschrieben Vorgehensweise befolgen, um den Bericht zu speichern.
Browserkompatibilitätsprüfungs-Bericht in einem Browser anzeigen
1 Führen Sie eine Browserkompatibilitätsprüfung aus.
2 Klicken Sie auf der linken Seite des Bedienfeldes „Ergebnisse“ auf die Schaltfläche „Bericht durchsuchen“.
Bewegen Sie den Mauszeiger über die Schaltflächen im Bedienfeld „Ergebnisse“, um Quickinfos aufzurufen.
Website „Adobe CSS Advisor“ aufrufen
1 Wählen Sie im Bedienfeld „Ergebnisse“ („Fenster“ > „Ergebnisse“) die Registerkarte
„Browserkompatibilitätsprüfung“.
2 Klicken Sie unten rechts im Bedienfeld auf den Hyperlink.
Mit Entwurfszeit-Stylesheets arbeiten
Mit Entwurfszeit-Stylesheets können Sie, während Sie an einem Dreamweaver-Dokument arbeiten, verschiedene
Entwürfe ein- oder ausblenden, die durch ein CSS-Stylesheet angewendet werden. Auf diese Weise können Sie zum
Beispiel beim Entwerfen einer Seite die Auswirkung eines Stylesheets ein- oder ausblenden, das nur für Macintosh-
Systeme oder nur für Windows gilt.
Entwurfszeit-Stylesheets wirken sich nur während der Entwurfsphase eines Dokuments aus. Wenn die Seite in einem
Browserfenster angezeigt wird, werden nur die Stile dargestellt, die tatsächlich mit dem Dokument verknüpft bzw.
darin eingebettet sind.
Note: Über die Symbolleiste „Stilwiedergabe“ können Sie auch die Stile für eine ganze Seite aktivieren oder deaktivieren.
Um diese Symbolleiste anzuzeigen, wählen Sie „Ansicht“ > „Symbolleisten“ > „Stilwiedergabe“. Die ganz rechts
befindliche Schaltfläche „Anzeige der CSS-Stile ein/aus“ funktioniert unabhängig von den anderen Medienschaltflächen
auf der Symbolleiste.
Nachstehend wird beschrieben, wie Sie ein Entwurfszeit-Stylesheet nutzen.
1 Führen Sie einen der folgenden Schritte aus, um das Dialogfeld „Entwurfszeit-Stylesheets“ zu öffnen:
• Klicken Sie mit der rechten Maustaste in das Bedienfeld „CSS-Stile“ und wählen Sie im Kontextmenü die Option
„Entwurfszeit“.
• Wählen Sie „Formatieren“ > „CSS-Stile“ > „Entwurfsphase“ aus.
164
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
2 Legen Sie im Dialogfeld fest, ob ein Stylesheet ein- oder ausgeblendet werden soll.
• Um in der Entwurfsphase ein CSS-Stylesheet einzublenden, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+) über „Nur während Entwurfszeit anzeigen“. Wählen Sie dann im Dialogfeld „Stylesheet
auswählen“ das anzuzeigende CSS-Stylesheet aus.
• Um ein CSS-Stylesheet auszublenden, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über „Während
Entwurfszeit ausblenden“. Wählen Sie dann im Dialogfeld „Stylesheet auswählen“ das auszublendende CSS-
Stylesheet aus.
• Wenn Sie ein Stylesheet aus beiden Listen entfernen möchten, klicken Sie zunächst auf das betreffende Stylesheet
und anschließend auf die entsprechende Schaltfläche mit dem Minuszeichen (–).
3 Klicken Sie auf „OK“, um das Dialogfeld zu schließen.
Im Bedienfeld „CSS-Stile“ wird der Name des ausgewählten Stylesheets aktualisiert und mit dem Indikator „Versteckt“
oder „Entwurf“ versehen.
More Help topics
“Überblick über die Symbolleiste „Stilwiedergabe“” on page 11
Dreamweaver-Muster-Stylesheets verwenden
Dreamweaver enthält Muster-Stylesheets, die Sie Seiten zuweisen oder als Ausgangspunkt für die Entwicklung eigener
Stile verwenden können.
1 Führen Sie einen der folgenden Schritte aus, um das Bedienfeld „CSS-Stile“ anzuzeigen:
• Wählen Sie „Fenster“ > „CSS-Stile“ aus.
• Drücken Sie Umschalt+F11.
2 Klicken Sie im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Stylesheet anfügen“. (Sie befindet sich unten rechts im
Bedienfeld.)
3 Klicken Sie im Dialogfeld „Entferntes Stylesheet hinzufügen“ auf „Muster-Stylesheets“.
4 Wählen Sie im Listenfeld im Dialogfeld „Muster-Stylesheets“ ein Stylesheet aus.
Im Vorschaufeld wird immer die Text- und Farbenformatierung des aktuell von Ihnen ausgewählten Stylesheets
angezeigt.
5 Klicken Sie auf die Schaltfläche „Vorschau“, um das Stylesheet zuzuweisen und festzustellen, ob es die gewünschten
Stile auf die aktuelle Seite anwendet.
Wenn es nicht die gewünschten Stile sind, wählen Sie ein anderes Stylesheet aus der Liste aus und klicken Sie auf
„Vorschau“.
6 Dreamweaver speichert das Stylesheet standardmäßig in einem Ordner namens „CSS“ direkt unter dem
Stammordner der Site, die Sie für Ihre Seite erstellt haben. Ist dieser Ordner nicht vorhanden, wird er von
Dreamweaver erstellt. Sie können die Datei an einem anderen Ort speichern, indem Sie auf die Option
„Durchsuchen“ klicken und einen anderen Ordner auswählen.
7 Wenn Sie ein Stylesheet gefunden haben, dessen Formatierungsregeln Ihren Designwünschen entspricht, klicken
Sie auf „OK“.
165
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Stylesheets in einer Contribute-Site aktualisieren
Adobe Contribute-Benutzer können keine Änderungen an CSS-Stylesheets vornehmen. Mit Dreamweaver können Sie
ein Stylesheet für eine Contribute-Site ändern.
1 Bearbeiten Sie das Stylesheet mit den Stylesheet-Bearbeitungsfunktionen von Dreamweaver.
2 Bitten Sie alle an der Site arbeitenden Contribute-Benutzer, die Seiten zu veröffentlichen, für die dieses Stylesheet
verwendet wird. Bearbeiten Sie dann die Seiten und sehen Sie sich das neue Stylesheet an.
Sie sollten die folgenden Faktoren beachten, wenn Sie ein Stylesheet für eine Contribute-Site aktualisieren:
• Wenn Sie ein Stylesheet ändern, während ein Contribute-Benutzer eine Seite bearbeitet, der dieses Stylesheet
zugewiesen ist, kann der Benutzer die am Stylesheet vorgenommenen Änderungen erst sehen, wenn er die Seite
veröffentlicht.
• Wenn Sie einen Stil aus einem Stylesheet löschen, wird der Stilname nicht aus den Seiten gelöscht, die dieses
Stylesheet verwenden. Da der zugewiesene Stil aber nicht mehr vorhanden ist, wird er nicht mehr in der Art
angezeigt, wie es der Contribute-Benutzer erwartet. Falls nichts passiert, wenn ein Benutzer einen bestimmten Stil
zuweisen möchte, kann es daran liegen, dass der Stil aus dem Stylesheet gelöscht wurde.
Gestalten von Seitenlayouts mit CSS
CSS-Seitenlayout
Bei einem CSS-Seitenlayout handelt es sich um ein Layout, das den Inhalt einer Webseite mithilfe des CSS-Formats
organisiert anstatt mithilfe herkömmlicher HTML-Tabellen oder Frames. Der Grundbaustein des CSS-Layouts ist das
Div-Tags. Dabei handelt es sich um ein HTML-Tag, das in den meisten Fällen als Container für Text, Bilder oder
sonstige Seitenelemente dient. Wenn Sie ein CSS-Layout erstellen, setzen Sie Div-Tags auf die Seite, fügen ihnen Inhalt
hinzu und positionieren sie an unterschiedlichen Stellen. Im Gegensatz zu Tabellenzellen, die darauf beschränkt sind,
irgendwo innerhalb der Zeilen und Spalten einer Tabelle vorhanden zu sein, können Div-Tags überall auf einer
Webseite enthalten sein. Sie können div-Tags absolut positionieren (durch Angabe von x- und y-Koordinaten) oder
relativ positionieren (durch Angabe ihres Abstands zu anderen Seitenelementen). Sie können div-Tags auch durch
Angabe von Floats, Auffüllungen und Rändern positionieren. Dies ist die bevorzugte Methode der heutigen
Webstandards.
Das Erstellen von CSS-Layouts aus dem Nichts kann sich als schwierig erweisen, weil es so viele Vorgehensweisen
dafür gibt. Sie können einfache zweispaltige CSS-Layouts erstellen, indem Sie schwebende Elemente, Ränder,
Auffüllungen und sonstige CSS-Eigenschaften in nahezu endlosen Kombinationen festlegen. Darüber hinaus sorgt das
Problem der browserübergreifenden Wiedergabe dafür, dass bestimmte CSS-Layouts in manchen Browsern
ordnungsgemäß angezeigt werden, in anderen dagegen nicht. Dreamweavererleichtert das Erstellen von Seiten mit
CSS-Layouts erheblich, denn es enthält bereits 16 vordefinierte Layoutvorlagen, die in den verschiedenen Browsern
eingesetzt werden können.
Die in Dreamweaver enthaltenen vordefinierten CSS-Layoutvorlagen bieten die einfachste Möglichkeit, eine Seite mit
einem CSS-Layout zu erstellen. Es ist allerdings auch möglich, CSS-Layouts mithilfe der absolut positionierten
Elemente (AP-Elemente) in Dreamweaver zu erstellen. Ein AP-Element (absolut positioniertes Element) in
Dreamweaver ist ein HTML-Seitenelement – ein
div-Tag oder ein beliebiges anderes Tag –, dem eine absolute
Position zugewiesen wurde. Eine Einschränkung der AP-Elemente in Dreamweaver besteht jedoch darin, dass sie
absolut positioniert sind. Ihre Positionen auf der Seite lassen sich nicht an die Größe des Browserfensters anpassen.
166
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Als erfahrener Benutzer können Sie div-Tags manuell einfügen und mit CSS-Positionierungsstilen versehen, um
Seitenlayouts zu erstellen.
Struktur des CSS-Seitenlayouts
Bevor Sie mit diesem Abschnitt weitermachen, sollten Sie mit den grundlegenden CSS-Konzepten vertraut sein.
Der Grundbaustein des CSS-Layouts ist das Div-Tags. Dabei handelt es sich um ein HTML-Tag, das in den meisten
Fällen als Container für Text, Bilder oder sonstige Seitenelemente dient. Das folgende Beispiel zeigt eine HTML-Seite,
die drei separate Div-Tags enthält: Das folgende Beispiel zeigt eine HTML-Seite, die drei separate Div-Tags enthält:
ein großes „Container“-Tag sowie zwei weitere Tags. Innerhalb des Container-Tags befinden sich ein Randleisten-Tag
und ein Hauptinhalts-Tag.
A: Div-Tag „container“ B: Div-Tag „sidebar“ C: Div-Tag „mainContent“
Nachstehend finden Sie den Code für alle drei Div-Tags auf der HTML-Seite:
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
Im oben genannten Beispiel sind keinem der Div-Tags Stile angehängt worden. Wenn keine CSS-Regeln definiert sind,
wird jedes Div-Tag samt seinen Inhalten an einem Standardort auf der Seite positioniert. Wenn jedoch jedes Div-Tag
über eine eindeutige ID verfügt (wie im Beispiel oben), können Sie mithilfe der IDs CSS-Regeln erstellen. Wenn diese
CSS-Regeln angewendet werden, ändern sie den Stil und die Positionierung der Div-Tags.
A
B
C
167
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Die folgende CSS-Regel, die sich im Head-Bereich des Dokuments oder in einer externen CSS-Datei befinden kann,
erstellt Stilregeln für das erste Div-Tag, d. h. das „Container“-Tag, auf der Seite:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
Die #container-Regel bewirkt, dass das Div-Tag „container“ eine Breite von 780 Pixel, einen weißen Hintergrund,
keinen Rand (am linken Rand der Seite) und einen schwarzen, 1 Pixel starken Rahmen besitzt und dass der Text links
ausgerichtet ist. Das Anwenden der Regel auf das Div-Tag „container“ hat folgende Auswirkungen:
Div-Tag „container“, 780 Pixel, kein Rand
A: Links ausgerichteter Text B: Weißer Hintergrund C: Durchgehender 1 Pixel starker schwarzer Rahmen
Die nächste CSS-Regel erstellt Stilregeln für das Div-Tag „sidebar“:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
Die #sidebar-Regel bewirkt, dass das Div-Tag „sidebar“ (Randleiste) eine Breite von 200 Pixel, eine grauen
Hintergrund, eine obere und untere Auffüllung von 15 Pixel, eine rechte Auffüllung von 10 Pixel und eine linke
Auffüllung von 20 Pixel hat. (Die Auffüllung erfolgt standardmäßig von oben rechts nach unten links.) Darüber
hinaus positioniert die Regel das Div-Tag „sidebar“ schwebend: nach links. Diese Eigenschaft schiebt das Div-Tag
„sidebar“ auf die linke Seite des Div-Tags „container“. Das Anwenden der Regel auf das Div-Tag „sidebar“ hat
folgende Auswirkungen:
B
C
A
168
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Div-Tag „sidebar“, links fließend
A: Breite von 200 Pixel B: Obere und untere Auffüllung von 15 Pixel
Abschließend stellt die CSS-Regel für das Div-Hauptcontainertag das Layout fertig:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Die #mainContent-Regel bewirkt, dass das Div-Tag „mainContent“ über einen linken Rand von 250 Pixel verfügt. Das
bedeutet, dass es für einen Leerraum von 250 Pixel zwischen der linken Seite des Div-Tags „container“ und der linken
Seite des Div-Tags „mainContent“ sorgt. Außerdem sorgt die Regel für 20 Pixel Abstand auf der rechten, linken und
unteren Seite des Div-Tags „mainContent“. Das Anwenden der Regel auf das Div-Tag „mainContent“ hat folgende
Auswirkungen:
Div-Tag „mainContent“, linker Rand: 250 Pixel
A: Linke Auffüllung von 20 Pixel B: Rechte Auffüllung von 20 Pixel C: Untere Auffüllung von 20 Pixel
Der vollständige Code sieht folgendermaßen aus:
B
B
A
A
C
B
169
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo
pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
Note: Der oben gezeigte Beispielcode ist eine vereinfachte Version des Codes, der das zweispaltige Layout mit fester linker
Randleiste erstellt, wenn Sie ein neues Dokument mithilfe der in Dreamweaver enthaltenen vordefinierten Layouts
erstellen.
More Help topics
“Grundlegendes zu Cascading Stylesheets” on page 134
170
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Seiten mit einem CSS-Layout erstellen
In Dreamweaver können Sie eine neue Seite erstellen, die bereits ein CSS-Layout enthält. In Dreamweaver können Sie
unter 16 verschiedenen CSS-Layoutvorlagen auswählen. Darüber hinaus können Sie eigene CSS-Layouts erstellen und
in den Konfigurationsordner einfügen, damit sie im Dialogfeld „Neues Dokument“ als Layoutoptionen angezeigt
werden.
Dreamweaver CSS-Layouts werden in den folgenden Browsern korrekt wiedergegeben: Firefox (Windows und
Macintosh) 1.0, 1.5, 2.0 und 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 und 8.0; Opera (Windows und Macintosh)
8.0, 9.0 und 10.0; Safari 2.0, 3.0 und 4.0 sowie Chrome 3.0.
Einen Artikel mit erläuternden Informationen zur Verwendung der CSS-Layouts aus dem Lieferumfang von
Dreamweaver finden Sie im Dreamweaver Developer Center.
Darüber hinaus sind unter Adobe Dreamweaver Exchange weitere CSS-Layouts verfügbar.
More Help topics
“Leere Seiten erstellen” on page 67
“Standard-Dokumenttyp und Standardkodierung festlegen” on page 73
“Link zu einem externen CSS-Stylesheet erstellen” on page 157
Seiten mit einem CSS-Layout erstellen
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Leere Seite“ aus. (Das ist die Standardauswahl.)
3 Wählen Sie unter „Seitentyp“ die Art der zu erstellenden Seite aus.
Note: Sie müssen einen HTML-Seitentyp für das Layout auswählen. Sie können beispielsweise HTML, ColdFusion®, PHP
usw. auswählen. Sie können keine ActionScript™-, CSS-, Bibliothekselement-, JavaScript-, XML-, XSLT- oder
ColdFusion-Seiten mit einem CSS-Layout erstellen. Die Seitentypen in der Kategorie „Andere“ des Dialogfelds „Neues
Dokument“ schließen die Verwendung von CSS-Seitenlayouts ebenfalls aus.
4 Wählen Sie unter „Layout“ das gewünschte CSS-Layout aus. Sie können unter 16 verschiedenen Layouts
auswählen. Das Vorschaufenster zeigt das Layout und enthält eine kurze Beschreibung des ausgewählten Layouts.
Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die
Texteinstellungen des Besuchers angepasst.
Fließend Die Spaltenbreite wird als Prozentwert der Breite des Besucher-Browserfensters definiert. Die Darstellung
wird angepasst, wenn der Besucher das Browserfenster schmaler oder breiter macht. Die vom Besucher
vorgenommenen Texteinstellungen haben jedoch keine Auswirkungen auf die Spaltenbreite.
5 Wählen Sie im Popupmenü „DocType“ einen Dokumenttyp aus.
6 Wählen Sie einen Speicherort für das CSS des Layouts im Popupmenü „Layout-CSS“ aus.
Zum Head-Bereich hinzufügen Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in ein neues, externes CSS-Stylesheet und verknüpft
das neue Stylesheet mit der von Ihnen erstellten Seite.
171
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Verknüpfen mit bestehender Datei Ermöglicht die Angabe einer bereits vorhandenen CSS-Datei, die die für das
Layout benötigten CSS-Regeln enthält. Diese Option ist besonders praktisch, wenn Sie dasselbe CSS-Layout (d. h. die
in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere Dokumente anwenden möchten.
7 Führen Sie einen der folgenden Schritte aus:
• Wenn Sie im Popupmenü „Layout-CSS“ die Standardoption „Zum Head-Bereich hinzufügen“ gewählt haben,
klicken Sie auf „Erstellen“.
• Wenn Sie im Popupmenü „Layout-CSS“ die Option „Neue Datei erstellen“ gewählt haben, klicken Sie auf
„Erstellen“ und geben dann im Dialogfeld „Stylesheet-Datei speichern unter“ einen Namen für die neue externe
Datei ein.
• Wenn Sie im Popupmenü „Layout-CSS“ die Option „Verknüpfen mit bestehender Datei“ ausgewählt haben, fügen
Sie die externe Datei dem Textfeld „CSS-Datei anfügen“ hinzu, indem Sie auf das Symbol „Stylesheet anfügen“
klicken, das Dialogfeld „Entferntes Stylesheet hinzufügen“ ausfüllen und dann auf „OK“ klicken. Wenn Sie fertig
sind, klicken Sie im Dialogfeld „Neues Dokument“ auf „Erstellen“.
Note: Wenn Sie die Option „Verknüpfen mit bestehender Datei“ wählen, muss die angegebene Datei bereits über die
Regeln für die enthaltene CSS-Datei verfügen.
Wenn Sie das Layout-CSS in eine neue Datei platzieren oder mit einer bestehenden Datei verknüpfen, dann verknüpft
Dreamweaver die Datei automatisch mit der HTML-Seite, die Sie erstellen.
Note: Die bedingten Kommentare im Internet Explorer, die Probleme bei der Wiedergabe in Internet Explorer beheben,
bleiben in den Head-Bereich des neuen CSS-Layoutdokuments eingebettet, selbst wenn Sie die Option „Neue externe
Datei“ oder „Bestehende externe Datei“ als Speicherort für das Layout-CSS auswählen.
8 (Optional) CSS-Stylesheets können auch einer Seite zugeordnet werden, die unabhängig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol „Stylesheet anfügen“ über dem Teilfenster „CSS-Datei anfügen“ und
wählen Sie ein CSS-Stylesheet aus.
Eine detaillierte, schrittweise Anleitung für diesen Vorgang finden Sie im Artikel von David Powers: Automatically
attaching a style sheet to new documents (Stylesheets automatisch an neue Dokumente anfügen).
Angepasste CSS-Layouts zur Auswahlliste hinzufügen
1 Erstellen Sie eine HTML-Seite, die das CSS-Layout enthält, das im Dialogfeld „Neues Dokument“ zur Auswahlliste
hinzugefügt werden soll. Das CSS für das Layout muss sich im Head-Bereich der HTML-Seite befinden.
Damit das CSS-Layout zu den anderen in Dreamweaver enthaltenen voreingestellten Layouts passt, sollten Sie die
HTML-Datei mit der Erweiterung „.htm“ speichern.
2 Fügen Sie die HTML-Seite dem Ordner „Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts“ hinzu.
3 Optional: Fügen Sie dem Ordner „Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts“ ein Vorschaubild
(z. B. eine GIF- oder PNG-Datei) hinzu. Die in Dreamweaver enthaltenen Standardbilder sind 227 Pixel breite und
193 Pixel hohe PNG-Dateien.
Geben Sie dem Vorschaubild denselben Dateinamen wie der HTML-Datei, damit Sie es wieder leicht zuordnen
können. Wenn Sie Ihre HTML-Datei zum Beispiel meinbenutzerdefiniertesLayout.htm genannt haben, sollte Ihr
Vorschaubild als meinbenutzerdefiniertesLayout.png gespeichert werden.
4 Optional: Erstellen Sie eine Datei „notes“ für das benutzerdefinierte Layout, indem Sie den Ordner „Adobe
Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes“ öffnen, vorhandene Dateien „notes“ kopieren, im
gleichen Ordner einfügen und die Kopien für das benutzerdefinierte Layout umbenennen. Zum Beispiel könnten
Sie die Datei „oneColElsCtr.htm.mno“ kopieren und in „meinbenutzerdefiniertesLayout.htm.mno.“ umbenennen.
172
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
5 Optional: Nachdem Sie ein Datei „notes“ für Ihr benutzerdefiniertes Layout erstellt haben, können Sie die Datei
öffnen und den Layoutnamen, die Beschreibung und das Vorschaubild festlegen.
Arbeiten mit Div-Tags
div-Tags einfügen und bearbeiten
Sie können Seitenlayouts erstellen, indem Sie div-Tags manuell einfügen und CSS-Positionierungsstile auf sie
anwenden. Ein
div-Tag dient dazu, den Inhalt einer Webseite logisch zu unterteilen. Sie können div-Tags verwenden,
um Inhaltsblöcke zu zentrieren, Spalteneffekte zu erzeugen, verschiedene Farbbereiche zu erstellen usw.
Wenn Sie mit der Erstellung von Webseiten mittels
div-Tags und Cascading Stylesheets (CSS) nicht vertraut sind,
können Sie eine der mit Dreamweaver ausgelieferten Layoutvorlagen als Grundlage für Ihr CSS-Layout nutzen. Wenn
Sie nicht gern mit CSS arbeiten, aber mit der Nutzung von Tabellen vertraut sind, können Sie auch Tabellen
verwenden.
Note: Dreamweaver behandelt alle Div-Tags mit absoluter Position als AP-Elemente (absolut positionierte Elemente),
auch wenn Sie diese nicht mit dem Zeichenwerkzeug für AP-Div-Tags erstellt haben.
More Help topics
“AP-Elemente in Dreamweaver” on page 176
“Seiten mit einem CSS-Layout erstellen” on page 170
“Inhalte in Tabellen darstellen” on page 192
Div-Tags einfügen
Mithilfe von div-Tags können Sie CSS-Layoutblöcke erstellen und in Ihrem Dokument platzieren. Dies ist praktisch,
wenn das Dokument mit einem vorhandenen CSS-Stylesheet verknüpft ist, das Positionierungsstile zuweist. Mit
Dreamweaver ist es möglich, ein Div-Tag schnell einzufügen und ihm vorhandene Stile zuzuweisen.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das div-Tag einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Layout-Objekte“ > „Div-Tag“ aus.
• Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Div-Tag einfügen“ .
3 Wählen Sie eine der folgenden Optionen:
Einfügen Ermöglicht die Auswahl der Position für das div-Tag sowie des Tag-Namens, wenn es sich nicht um ein
neues Tag handelt.
Klasse Zeigt den Klassenstil an, der dem Tag derzeit zugewiesen ist. Wenn ein Stylesheet angefügt wurde, werden die
darin definierte Klassen in der Liste angezeigt. In diesem Popupmenü können Sie den Stil auswählen, den Sie auf das
Tag anwenden möchten.
ID Ermöglicht das Ändern des Namens, mit dem das div-Tag identifiziert wird. Wenn ein Stylesheet angefügt wurde,
werden die darin definierten IDs in der Liste angezeigt. Die IDs von Blöcken, die bereits Bestandteil Ihres Dokuments
sind, werden nicht aufgeführt.
Note: In Dreamweaver wird eine Warnmeldung angezeigt, wenn Sie eine ID eingeben, die bereits mit einem anderen Tag
in Ihrem Dokument verknüpft ist.
173
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Neue CSS-Regel Öffnet das Dialogfeld „Neue CSS-Regel“.
4 Klicken Sie auf „OK“.
Das
div-Tag wird in Ihrem Dokument als Feld mit Platzhaltertext angezeigt. Wenn Sie den Zeiger über das Feld
hinaus bewegen, wird dieses in Dreamweaver hervorgehoben.
Wenn der
div-Tag absolut positioniert ist, wird er zu einem AP-Element. (Nicht absolut positionierte div-Tags
können bearbeitet werden.)
More Help topics
“AP-Elemente in Dreamweaver” on page 176
“Seiten mit einem CSS-Layout erstellen” on page 170
Div-Tags bearbeiten
Nachdem Sie ein div-Tag eingefügt haben, können Sie es verändern oder Inhalt hinzufügen.
Note: Absolut positionierte Div-Tags werden zu AP-Elementen.
Wenn Sie Div-Tags Rahmen zuweisen oder die CSS-Layout-Konturen aktivieren, werden diese Tags mit Rahmen
angezeigt. („CSS-Layout-Konturen“ ist standardmäßig im Menü „Ansicht“ > „Visuelle Hilfsmittel“ ausgewählt.)
Wenn Sie den Zeiger über ein
div-Tag führen, markiert Dreamweaver das Tag. Sie können die Markierungsfarbe
ändern oder die Markierungsfunktion deaktivieren.
Wenn Sie ein
div-Tag auswählen, können Sie Regeln für dieses im Bedienfeld „CSS-Stile“ anzeigen und bearbeiten.
Sie können dem
div-Tag ferner Inhalte hinzufügen, indem Sie die Einfügemarke im div-Tag positionieren und Inhalt
wie bei einer Seite hinzufügen.
More Help topics
“AP-Elemente in Dreamweaver” on page 176
“Bedienfeld „CSS-Stile“ öffnen” on page 143
Auf ein Div-Tag angewendete Regeln anzeigen und bearbeiten
1 Führen Sie einen der folgenden Schritte aus, um das div-Tag auszuwählen:
• Klicken Sie auf den Rahmen des div-Tags.
Suchen Sie die Markierung, damit Sie den Rahmen sehen können.
• Klicken Sie in das div-Tag und drücken Sie zweimal Strg+A (Windows) oder Befehl+A (Macintosh).
• Klicken Sie in das div-Tag und wählen Sie das div-Tag im Tag-Selektor unten im Dokumentfenster aus.
2 Wählen Sie ggf. „Fenster“ > „CSS-Stile“ aus, um das Bedienfeld „CSS-Stile“ zu öffnen.
Die auf das
div-Tag angewandten Regeln werden im Bedienfeld angezeigt.
3 Bearbeiten Sie die Regeln nach Bedarf.
Einfügemarke in einen Div-Tag setzen, um Inhalt hinzuzufügen
❖ Klicken Sie auf eine beliebige Stelle innerhalb des Div-Tags.
174
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Platzhaltertext in einem Div-Tag ändern
❖ Markieren Sie den Text und überschreiben Sie ihn oder drücken Sie die Entf-Taste.
Note: Sie können dem
div-Tag genau wie einer Seite Inhalt hinzufügen.
Die Markierungsfarbe von Div-Tags ändern
Wenn Sie den Zeiger in der Entwurfsansicht über die Kante eines div-Tags führen, hebt Dreamweaver die Tag-
Rahmen hervor. Sie können die Markierungsfunktion nach Bedarf aktivieren oder deaktivieren oder die
Markierungsfarbe im Dialogfeld „Voreinstellungen“ ändern.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie in der Liste links die Kategorie „Markierung“.
3 Führen Sie einen der folgenden Schritte aus und klicken Sie auf „OK“.
• Um die Markierungsfarbe für div-Tags zu ändern, klicken Sie in das Farbfeld „Mouse-Over“ und wählen Sie mit
dem Farbwähler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert für die Markierungsfarbe im
Textfeld ein).
• Um die Markierung von div-Tags zu aktivieren bzw. zu deaktivieren, aktivieren bzw. deaktivieren Sie das
Kontrollkästchen „Anzeigen“ für „Mouse-Over“.
Note: Diese Optionen wirken sich auf alle Objekte aus, wie beispielsweise auf Tabellen, die in Dreamweaver
hervorgehoben werden, wenn Sie den Zeiger darüber bewegen.
CSS-Layout-Blöcke
CSS-Layout-Blöcke visualisieren
In der Entwurfsansicht können Sie CSS-Layout-Blöcke visualisieren. Ein CSS-Layout-Block ist ein HTML-
Seitenelement, das Sie an einer beliebigen Stelle auf der Seite positionieren können. Genauer gesagt ist ein CSS-Layout-
Block entweder ein
div-Tag ohne display:inline oder ein anderes Seitenelement, das die CSS-Deklaration
display:block, position:absolute oder position:relative enthält. Im Folgenden finden Sie einige Beispiele
von Elementen, die in Dreamweaver als CSS-Layout-Blöcke angesehen werden:
• Ein div-Tag
• Ein Bild, dem eine absolute oder relative Position zugewiesen wurde
• Ein a-Tag, dem der Stil display:block zugewiesen wurde
• Ein Absatz, dem eine absolute oder relative Position zugewiesen wurde
Note: Damit CSS-Layout-Blöcke visuell wiedergegeben werden können, enthalten Sie keine Inline-Elemente (d. h.
Elemente, deren Code in einer Textzeile enthalten ist) und auch keine einfachen Blockelemente (wie z. B. Absätze).
Dreamweaver bietet eine Auswahl an visuellen Hilfsmitteln zum Anzeigen von CSS-Layout-Blöcken. Sie können beim
Entwerfen z. B. Konturen, Hintergründe oder das Box-Modell für CSS-Layout-Blöcke aktivieren. Sie können
außerdem die QuickInfo anzeigen, die Eigenschaften zu einem ausgewählten CSS-Layout-Block anzeigt, indem Sie
den Mauszeiger über den Layout-Block führen.
Die folgende Liste mit visuellen Hilfsmitteln für CSS-Layout-Blöcke beschreibt, welche Elemente Dreamweaver für
jeden Layout-Block wiedergibt:
CSS-Layout-Konturen Zeigt die Konturen aller CSS-Layout-Blöcke auf der Seite an.
175
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
CSS-Layout-Hintergründe Zeigt vorübergehend zugewiesene Hintergrundfarben für einzelne CSS-Layout-Blöcke an
und blendet andere Hintergrundfarben oder Bilder aus, die normalerweise auf der Seite angezeigt werden.
Wenn Sie das visuelle Hilfsmittel zum Anzeigen der Hintergründe von CSS-Layout-Blöcken aktivieren, weist jedem
CSS-Layout-Block Dreamweaver automatisch eine separate Hintergrundfarbe zu. (Dreamweaver wählt die Farben
anhand eines Algorithmus aus, d. h., Sie haben keine Möglichkeit, die Farben selbst zuzuweisen.) Die zugewiesenen
Farben sind visuell auffällig und sollen Ihnen die Unterscheidung zwischen CSS-Layout-Blöcken erleichtern.
CSS-Layout Box-Modell Zeigt das Box-Modell (d. h. Auffüllung und Ränder) des ausgewählten CSS-Layout-Blocks an.
CSS-Layout-Blöcke anzeigen
Sie können die visuellen Hilfsmittel für CSS-Layoutblöcke nach Bedarf aktivieren oder deaktivieren.
Konturen von CSS-Layout-Blöcken anzeigen
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Konturen“ aus.
Hintergründe von CSS-Layout-Blöcken anzeigen
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Hintergründe“ aus.
Box-Modelle von CSS-Layout-Blöcken anzeigen
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „CSS-Layout-Box-Modell“ aus.
Sie können auch durch Klicken auf die Schaltfläche „Visuelle Hilfsmittel“ in der Dokumentsymbolleiste auf Optionen
für die visuellen Hilfsmittel für von CSS-Layout-Blöcke zugreifen.
Visuelle Hilfsmittel für CSS-Layout-Blöcke mit Elementen verwenden, die keine CSS-Layout-
Blöcke sind
Mithilfe eines Entwurfszeit-Stylesheets können Sie die Hintergründe, die Rahmen oder das Box-Modell von
Elementen anzeigen, die normalerweise nicht als CSS-Layout-Blöcke angesehen werden. Dazu müssen Sie zunächst
ein Entwurfszeit-Stylesheet erstellen, das dem entsprechenden Seitenelement das
display:block-Attribut zuweist.
1 Erstellen Sie ein externes CSS-Stylesheet, indem Sie „Datei“ > „Neu“, in der Spalte „Kategorie“ die Option
„Einfache Seite“ und in der Spalte „Einfache Seite“ die Option „CSS“ auswählen und auf „Erstellen“ klicken.
2 Erstellen Sie in dem neuen Stylesheet Regeln, die das display:block-Attribut den Seitenelementen zuweisen, die
als CSS-Layout-Blöcke angezeigt werden sollen.
Wenn Sie beispielsweise eine Hintergrundfarbe für Absätze anzeigen und Elemente auflisten möchten, können Sie ein
Stylesheet mit folgenden Regeln erstellen:
p{
display:block;
}
li{
display:block;
}
3 Speichern Sie die Datei.
4 Öffnen Sie die Seite, ab der Sie die neuen Stile anhängen möchten, in der Entwurfsansicht.
5 Wählen Sie „Formatieren“ > „CSS-Stile“ > „Entwurfsphase“ aus.
6 Klicken Sie im Dialogfeld „Entwurfszeit-Stylesheets“ auf das Pluszeichen oberhalb des Textfelds „Nur während
Entwurfszeit anzeigen“, wählen Sie das eben erstellte Stylesheet aus und klicken Sie auf „OK“.
176
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
7 Klicken Sie auf „OK“, um das Dialogfeld „Entwurfszeit-Stylesheets“ zu schließen.
Das Stylesheet wird an das Dokument angehängt. Wenn Sie mit dem vorstehenden Beispiel ein Stylesheet erstellt hätte,
würden alle Absätze und Listenelemente mit dem
display:block-Attribut formatiert, sodass Sie die visuellen
Hilfsmittel für CSS-Layout-Blöcke für Absätze und Listenelemente aktivieren oder deaktivieren könnten.
More Help topics
“Mit Entwurfszeit-Stylesheets arbeiten” on page 163
AP-Elemente verwenden
AP-Elemente in Dreamweaver
Ein AP-Element (absolut positioniertes Element) ist ein HTML-Seitenelement – ein div-Tag oder ein beliebiges
anderes Tag –, dem eine absolute Position zugewiesen wurde. AP-Elemente können Text, Bilder oder beliebigen
anderen Inhalt enthalten, den Sie in den body-Bereich eines HTML-Dokuments einfügen können.
In Dreamweaver können Sie AP-Elemente zur Seitenlayouterstellung verwenden. Sie haben die Möglichkeit, AP-
Elemente vor- und hintereinander zu platzieren, einige AP-Elemente auszublenden und andere zu zeigen und AP-
Elemente auf dem Bildschirm zu verschieben. Beispielsweise kann vor ein AP-Element, in das ein Hintergrundbild
eingefügt wurde, ein zweites AP-Element gesetzt werden, das Text mit transparentem Hintergrund enthält.
AP-Elemente sind in der Regel absolut positionierte Div-Tags. (Dieser AP-Elementtyp wird von Dreamweaver
standardmäßig eingefügt.) Beachten Sie jedoch, dass Sie jedes HTML Element (beispielsweise ein Bild) als AP-Element
klassifizieren können, indem Sie ihm eine absolute Position zuweisen. Alle AP-Elemente (nicht nur absolut
positionierte Div-Tags) werden im Bedienfeld „AP-Elemente“ angezeigt.
HTML-Code für AP-Div-Elemente
Dreamweaver erstellt AP-Elemente mithilfe des div-Tags. Wenn Sie ein AP-Element mit dem Werkzeug „AP Div
zeichnen“ erstellen, fügt Dreamweaver ein
div-Tag in das Dokument ein und weist ihm einen id-Wert zu
(standardmäßig Div1 für das erste Div-Tag, Div2 für das zweite Div-Tag usw.). Sie können das AP-Div-Tag später mit
dem Bedienfeld „AP-Elemente“ oder dem Eigenschafteninspektor wie gewünscht umbenennen. Dreamweaver
verwendet ferner eingebettetes CSS im Head-Bereich des Dokuments, um das AP-Div-Tag zu positionieren und seine
genauen Abmessungen zu bestimmen.
Das folgende Beispiel gibt den HTML-Code für ein AP-Div-Tag wieder:
177
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample AP Div Page</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:62px;
top:67px;
width:421px;
height:188px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
</div>
</body>
</html>
Sie können für AP-Div-Tags (oder andere AP-Elemente) auf Ihrer Seite Eigenschaften festlegen wie die X- und Y-
Koordinaten, den Z-Index (auch Stapelreihenfolge genannt) und die Sichtbarkeit.
AP Div einfügen
Mit Dreamweaver lassen sich AP-Div-Tags bequem erstellen und auf der Seite positionieren. Auch das Erstellen
verschachtelter AP-Div-Tags ist möglich.
Wenn Sie ein AP-Div-Tag einfügen, zeigt Dreamweaver standardmäßig dessen Konturen in der Entwurfsansicht an
und hebt den Block hervor, sobald Sie den Mauszeiger darüber führen. Sie können das visuelle Hilfsmittel
deaktivieren, mit dem die Konturen von AP-Div-Tags (oder anderen AP-Elementen) angezeigt werden, indem Sie im
Menü „Ansicht“ > „Visuelle Hilfsmittel“ die Optionen „AP-Element-Konturen“ und die „CSS-Layout-Konturen“
deaktivieren. Sie können außerdem Hintergründe und das Box-Modell für AP-Elemente als visuelles Hilfsmittel
einblenden, während Sie an dem Entwurf arbeiten.
Nachdem Sie ein AP-Div-Tag erstellt haben, können Sie diesem Inhalt hinzufügen. Setzen Sie dazu die Einfügemarke
in das AP-Div-Tag und fügen Sie den Inhalt so hinzu, wie Sie dies bei einer Seite tun würden.
More Help topics
“AP-Elemente auswählen” on page 183
“Die Markierungsfarbe von Div-Tags ändern” on page 174
“CSS-Layout-Blöcke visualisieren” on page 174
Einzelnes AP-Div-Tag oder mehrere aufeinanderfolgende AP-Div-Tags zeichnen
1 Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf die Schaltfläche „AP Div zeichnen“ .
2 Führen Sie in der Entwurfsansicht des Dokumentfensters einen der folgenden Schritte aus:
• Zeichnen Sie ein einzelnes AP-Div-Tag durch Ziehen mit der Maus.
• Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und zeichnen Sie nacheinander mehrere
AP-Div-Tags durch Ziehen mit der Maus.
178
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Solange Sie die Strg-Taste bzw. die Befehlstaste gedrückt halten, können Sie weitere neue AP-Div-Tags zeichnen.
AP-Div-Tag an einem bestimmten Ort in das Dokument einfügen
❖ Setzen Sie die Einfügemarke in das Dokumentfenster und wählen Sie dann „Einfügen“ > „Layout-Objekte“ > „AP
Div“ aus.
Note: Hierbei wird das AP-Div-Tag an der Stelle eingefügt, an der Sie im Dokumentfenster geklickt haben. Die visuelle
Darstellung des AP-Div-Tags hat damit Auswirkungen auf andere, es umgebende Seitenelemente (wie z. B. Text).
Einfügemarke in ein AP-Div-Tag setzen
❖ Klicken Sie auf eine beliebige Stelle innerhalb des AP-Div-Tags.
Die Begrenzungen des AP-Div-Tags werden markiert und der Auswahlgriff wird eingeblendet. Das AP-Div-Tag selbst
ist nicht ausgewählt.
Rahmen der AP-Div-Tags einblenden
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ aus und aktivieren Sie die Konturen für AP-Div-Tags oder die CSS-
Layout-Konturen.
Note: Sie erzielen den gleichen Effekt, wenn Sie beide Optionen gleichzeitig auswählen.
Rahmen der AP-Div-Tags ausblenden
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ aus und deaktivieren Sie die Konturen für AP-Div-Tags oder die
CSS-Layout-Konturen.
Mit verschachtelten AP-Div-Tags arbeiten
Ein verschachteltes AP-Div-Tag ist ein AP-Div-Tag, dessen Code in den Tags eines anderen AP-Div-Tags enthalten
ist. Der Code im folgenden Beispiel spezifiziert zwei nicht verschachtelte und zwei verschachtelte AP-Div-Tags:
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4"></div>
</div>
Die grafische Darstellung für AP-Div-Tag-Gruppen könnte wie folgt aussehen:
In der ersten Gruppe sind beide Div-Tags übereinander auf der Seite positioniert. In der zweiten Gruppe befindet sich
das AP-Div-Tag apDiv4 DIV hingegen innerhalb von apDiv3. (Die Stapelreihenfolge der AP-Div-Tags kann im
Bedienfeld „AP-Elemente“ geändert werden.)
179
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Meist werden AP-Div-Tags durch Verschachteln zu Gruppen zusammengefasst. Ein verschachteltes AP-Div-Tag wird
zusammen mit dem übergeordneten AP-Div-Tag verschoben und kann wahlweise auch die Sichtbarkeit vom
übergeordneten AP-Div-Tag erben.
Wenn die Option „Verschachtelung“ aktiviert ist, werden AP-Div-Tags automatisch verschachtelt, wenn Sie ein AP-
Div innerhalb eines anderen AP-Div zeichnen. Wenn Sie innerhalb oder über einem anderen AP-Div-Tag zeichnen,
müssen Sie zudem die Option „Überlappungen verhindern“ deaktivieren.
Verschachtelte AP-Div-Tags zeichnen
1 Vergewissern Sie sich, dass im Bedienfeld „AP-Elemente“ („Fenster“ > „AP-Elemente“) die Option
„Überlappungen verhindern“ deaktiviert ist.
2 Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf die Schaltfläche „AP Div zeichnen“ .
3 Zeichnen Sie in der Entwurfsansicht des Dokumentfensters durch Ziehen mit der Maus ein AP-Div-Tag innerhalb
eines vorhandenen AP-Div-Tags.
Wenn die Option „Verschachteln“ in den Voreinstellungen für AP-Elemente deaktiviert ist, halten Sie die Alt-Taste
(Windows) bzw. die Wahltaste (Macintosh) gedrückt, um durch Ziehen mit der Maus ein AP-Div-Tag innerhalb eines
vorhandenen AP-Div-Tags zu zeichnen.
Verschachtelte AP-Div-Tags werden in verschiedenen Browsern möglicherweise etwas unterschiedlich angezeigt.
Wenn Sie verschachtelte AP-Div-Tags erstellen, sollten Sie während der Entwurfsphase des Öfteren das
Erscheinungsbild in verschiedenen Browsern überprüfen.
Verschachtelte AP-Div-Tags einfügen
1 Vergewissern Sie sich, dass die Option „Überlappungen verhindern“ deaktiviert ist.
2 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters in ein vorhandenes AP-Div-Tag und
wählen Sie dann „Einfügen“ > „Layout-Objekte“ > „AP Div“ aus.
AP-Div-Tags automatisch verschachteln, wenn ein AP-Div-Tag innerhalb eines anderen gezeichnet wird
❖ Aktivieren Sie in den Voreinstellungen für AP-Elemente die Option „Verschachteln“.
Voreinstellungen für AP-Elemente anzeigen oder festlegen
Verwenden Sie die Kategorie „AP-Elemente“ im Dialogfeld „Voreinstellungen“, um die Standardeinstellungen für neu
zu erstellende AP-Elemente anzugeben.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie AP-Elemente aus der Kategorieliste auf der linken Seite aus, legen Sie die nachstehenden
Voreinstellungen nach Bedarf fest und klicken Sie dann auf „OK“.
Visibility Legt fest, ob AP-Elemente standardmäßig sichtbar sind. Die Optionen sind „Standard“, „Übernehmen“,
„Sichtbar“ und „Versteckt“.
Breite, Höhe Legen Sie die standardmäßige Breite und Höhe (in Pixel) für AP-Elemente fest, die Sie über „Einfügen“ >
„Layout-Objekte“ > „AP Div“ erstellen.
Background-color Legt eine Standard-Hintergrundfarbe fest. Wählen Sie mit der Farbauswahl eine Farbe aus.
Hintergrundbild Legt ein Standard-Hintergrundbild fest. Klicken Sie auf „Durchsuchen“, um die Bilddatei auf Ihrem
Computer zu suchen.
180
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Verschachtelt: Verschachteln, wenn in einem AP-Div erstellt Legt fest, ob ein AP-Div-Tag, das von einem Punkt
innerhalb eines vorhandenen AP-Div-Tags aus gezeichnet wird, als verschachteltes AP-Div-Tag gilt. Halten Sie die
Alt-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrückt, um diese Einstellung beim Zeichnen eines AP-Div-
Tags vorübergehend zu ändern.
Eigenschaften für ein einzelnes AP-Element anzeigen oder festlegen
Wenn ein AP-Element ausgewählt wird, zeigt der Eigenschafteninspektor die Eigenschaften des betreffenden
Elements an.
1 Wählen Sie ein AP-Element aus.
2 Klicken Sie in der unteren rechten Ecke des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) auf den
Erweiterungspfeil, falls das Bedienfeld noch nicht erweitert ist, um alle Eigenschaften anzuzeigen.
3 Wählen Sie eine der folgenden Optionen:
CSS-P-Element Legt eine Kennung für das ausgewählte AP-Element fest. Die Kennung dient zur Identifizierung des
AP-Elements im Bedienfeld „AP-Elemente“ und in JavaScript.
Verwenden Sie nur alphanumerische Standardzeichen und keine Sonderzeichen, wie Leerzeichen, Bindestriche,
Schrägstriche oder Punkte. Jedes AP-Element muss eine eigene eindeutige Kennung haben.
Note: Der CSS-P-Eigenschafteninspektor präsentiert dieselben Optionen für relativ positionierte Elemente.
L / O Legen Sie die Position der oberen linken Ecke des AP-Elements relativ zur oberen linken Ecke der Seite bzw. (bei
verschachtelten Elementen) des übergeordneten AP-Elements fest.
B / H Legen Sie Breite und Höhe des AP-Elements fest.
Note: Überschreitet der Inhalt des AP-Elements die angegebene Größe, wird der untere Rand des Elements (wie in der
Entwurfsansicht in Dreamweaver angezeigt) so verschoben, dass der Inhalt Platz findet. (Bei der Anzeige in einem
Browser wird der untere Rand nur dann erweitert, wenn die Eigenschaft „Überlauf“ auf „Sichtbar“ eingestellt ist.)
Die Standardeinheit für die Position und die Größe ist Pixel (px). Sie können stattdessen folgende Maßeinheiten
festlegen: Pica, Punkt, Zoll, mm, cm oder % (Prozentsatz vom entsprechenden Wert des übergeordneten AP-
Elements). Zwischen Abkürzung und Wert darf kein Leerzeichen stehen: Die korrekte Eingabe für 3 Millimeter ist
beispielsweise „3mm“.
Z-Index Legt den Z-Index oder die Stapelreihenfolge des AP-Elements fest.
AP-Elemente mit einem höheren Zahlenwert werden in Browsern vor AP-Elemente mit einem niedrigeren Wert
angezeigt. Sie können positive und negative Werte eingeben. Statt durch Eingabe spezifischer Z-Index-Werte kann die
Stapelreihenfolge von AP-Elementen auch einfacher über das Bedienfeld „AP-Elemente“ geändert werden.
Sichtb. Legt fest, ob das AP-Element anfänglich sichtbar ist oder nicht. Wählen Sie eine der folgenden Optionen:
• „Standard“ gibt keine spezifische Sichtbarkeitseigenschaft an. Wenn keine Sichtbarkeit angegeben ist, schalten die
meisten Browser auf „Übernehmen“.
• „Übernehmen“ bedeutet, dass die Sichtbarkeitseigenschaft des übergeordneten AP-Elements verwendet werden
soll.
181
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
• „Sichtbar“ zeigt den Inhalt des AP-Elements an, unabhängig davon, welcher Wert für das übergeordnete Element gilt.
• „Versteckt“ blendet den Inhalt des AP-Elements aus, unabhängig davon, welcher Wert für das übergeordnete
Element gilt.
Mit einer Skriptsprache wie JavaScript können Sie die Sichtbarkeitseigenschaften steuern und den Inhalt der AP-
Elemente dynamisch anzeigen.
Hg-Bild Legt ein Hintergrundbild für das AP-Element fest.
Klicken Sie auf das Ordnersymbol, um eine Bilddatei zu suchen und auszuwählen.
Hg-Farbe Legt eine Hintergrundfarbe für das AP-Element fest.
Lassen Sie dieses Feld leer, wenn der Hintergrund durchsichtig sein soll.
Klasse Legt die CSS-Klasse fest, die den Stil des AP-Elements bestimmt.
Überlauf Legt fest, wie AP-Elemente in einem Browser dargestellt werden, wenn der Inhalt die angegebene Größe des
AP-Elements überschreitet.
Sichtbar gibt an, dass der zusätzliche Inhalt in dem AP-Element angezeigt wird. Das Element wird soweit vergrößert,
dass der Inhalt darin Platz hat. „Versteckt“ gibt an, dass zusätzlicher Inhalt nicht im Browser angezeigt wird. „Scrollen“
bewirkt, dass der Browser das AP-Element mit Bildlaufleisten anzeigt, auch wenn diese nicht benötigt werden. „Auto“
bewirkt, dass der Browser das AP-Element nur dann mit Scrollbalken anzeigt, wenn diese benötigt werden (wenn der
Inhalt des AP-Elements dessen Begrenzungen überschreitet).
Note: Die Option
Überlauf wird nicht in allen Browsern einheitlich unterstützt.
Clip Legt den sichtbaren Bereich des AP-Elements fest.
Legen Sie die linken, oberen, rechten und unteren Koordinaten fest, um in dem Koordinatenraum des AP-Elements
(bezogen auf dessen obere linke Ecke) ein Rechteck zu definieren. Das AP-Element wird so „beschnitten“, dass nur das
angegebene Rechteck sichtbar ist. Um beispielsweise den Inhalt eines AP-Elements mit Ausnahme eines Rechtecks
unsichtbar zu machen, das 50 Pixel breit und 75 Pixel hoch ist und sich in der linken oberen Ecke des Elements
befindet, legen Sie L auf 0, O auf 0, R auf 50 und U auf 75 fest.
Note: Auch wenn CSS eine andere Semantik für „clip“ festlegt, interpretiert Dreamweaver „clip“ doch in der gleichen
Weise wie die meisten Browser.
4 Wenn Sie in einem Textfeld einen Wert eingegeben haben, drücken Sie die Tabulatortaste oder die Eingabetaste
(Windows) bzw. Return (Macintosh), um den Wert zu übernehmen.
Eigenschaften für mehrere AP-Elemente anzeigen oder festlegen
Wenn zwei oder mehr AP-Elemente ausgewählt werden, zeigt der Eigenschafteninspektor die Textattribute und eine
Teilauswahl der Eigenschaften für AP-Elemente an. So können Sie mehrere AP-Elemente auf einmal bearbeiten.
Mehrere AP-Elemente auswählen
❖ Halten Sie die Umschalttaste gedrückt, während Sie die AP-Elemente auswählen.
Eigenschaften für mehrere AP-Elemente anzeigen und festlegen
1 Mehrere AP-Elemente auswählen.
182
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
2 Klicken Sie in der unteren rechten Ecke des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) auf den
Erweiterungspfeil, falls das Bedienfeld noch nicht erweitert ist, um alle Eigenschaften anzuzeigen.
3 Legen Sie die folgenden Eigenschaften für mehrere AP-Elemente nach Bedarf fest:
L / O Legen Sie die Position der oberen linken Ecke der AP-Elemente relativ zur oberen linken Ecke der Seite bzw. (bei
verschachtelten Elementen) des übergeordneten AP-Elements fest.
B / H Legen Sie Breite und Höhe der AP-Elemente fest.
Note: Überschreitet der Inhalt eines AP-Elements die angegebene Größe, wird der untere Rand des Elements (wie in der
Entwurfsansicht in Dreamweaver angezeigt) so verschoben, dass der Inhalt Platz findet. (Bei der Anzeige in einem
Browser wird der untere Rand nur dann erweitert, wenn die Eigenschaft „Überlauf“ auf „Sichtbar“ eingestellt ist.)
Die Standardeinheit für die Position und die Größe ist Pixel (px). Sie können stattdessen folgende Maßeinheiten
festlegen: Pica, Punkt, Zoll, mm, cm oder % (Prozentsatz vom entsprechenden Wert des übergeordneten AP-
Elements). Zwischen Abkürzung und Wert darf kein Leerzeichen stehen: Die korrekte Eingabe für 3 Millimeter ist
beispielsweise „3mm“.
Sichtb. Legt fest, ob die AP-Elemente anfänglich sichtbar sind oder nicht. Wählen Sie eine der folgenden Optionen:
• „Standard“ gibt keine spezifische Sichtbarkeitseigenschaft an. Wenn keine Sichtbarkeit angegeben ist, schalten die
meisten Browser auf „Übernehmen“.
• „Übernehmen“ bedeutet, dass die Sichtbarkeitseigenschaft des übergeordneten AP-Elements verwendet werden
soll.
• „Sichtbar“ zeigt den Inhalt der AP-Elemente an, unabhängig davon, welcher Wert für das jeweils übergeordnete
Element gilt.
• „Versteckt“ blendet den Inhalt des AP-Elements aus, unabhängig davon, welcher Wert für das übergeordnete
Element gilt.
Mit einer Skriptsprache wie JavaScript können Sie die Sichtbarkeitseigenschaften steuern und den Inhalt der AP-
Elemente dynamisch anzeigen.
Tag Legt das zur Definition der AP-Elemente verwendete HTML-Tag fest.
Hg-Bild Legt ein Hintergrundbild für die AP-Elemente fest.
Klicken Sie auf das Ordnersymbol, um eine Bilddatei zu suchen und auszuwählen.
Hg-Farbe Legt eine Hintergrundfarbe für die AP-Elemente fest. Lassen Sie dieses Feld leer, wenn der Hintergrund
durchsichtig sein soll.
4 Wenn Sie in einem Textfeld einen Wert eingegeben haben, drücken Sie die Tabulatortaste oder die Eingabetaste
(Windows) bzw. Return (Macintosh), um den Wert zu übernehmen.
Überblick über das Bedienfeld „AP-Elemente“
Im Bedienfeld „AP-Elemente“ („Fenster“ > „AP-Elemente“) können Sie die AP-Elemente in Ihrem Dokument
verwalten. Über das Bedienfeld „AP-Elemente“ können Sie Überlappungen verhindern, die Sichtbarkeit von AP-
Elementen ändern, AP-Elemente verschachteln oder stapeln und ein oder mehrere AP-Elemente auswählen.
183
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Note: Ein AP-Element (absolut positioniertes Element) in Dreamweaver ist ein HTML-Seitenelement – ein div-Tag oder
ein beliebiges anderes Tag –, dem eine absolute Position zugewiesen wurde. Relativ positionierte Elemente werden im
Bedienfeld „AP-Elemente“ nicht angezeigt.
AP-Elemente werden als Namensliste in der Reihenfolge ihres Z-Index-Werts angezeigt. In der Standardeinstellung
ist das zuerst erstellte AP-Element (mit dem Z-Indexwert 1) am unteren Listenende und das zuletzt erstellte AP-
Element am Anfang der Liste aufgeführt. Sie können jedoch den Z-Indexwert eines AP-Elements ändern, indem Sie
es in der Stapelreihenfolge an eine andere Position verschieben. Wenn Sie beispielsweise acht AP-Elemente erstellt
haben und das vierte AP-Element an den Anfang der Liste verschieben möchten, können Sie diesem Element einen
höheren Z-Indexwert als den anderen Elementen zuweisen.
AP-Elemente auswählen
Wählen Sie ein oder mehrere AP-Elemente aus, um sie zu bearbeiten oder ihre Eigenschaften zu ändern.
AP-Elemente im Bedienfeld „AP-Elemente“ auswählen
❖ Klicken Sie im Bedienfeld „AP-Elemente“ („Fenster“ > „AP-Elemente“) auf den Namen des AP-Elements.
AP-Elemente im Dokumentfenster auswählen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf den Auswahlgriff eines AP-Elements.
Wenn der Auswahlgriff nicht angezeigt wird, klicken Sie in das AP-Element, damit er sichtbar wird.
• Klicken Sie auf den Rand eines AP-Elements.
• Halten Sie Strg+Umschalt (Windows) bzw. Befehl+Umschalt (Macintosh) gedrückt und klicken Sie in ein AP-
Element.
• Klicken Sie in ein AP-Element und drücken Sie Strg+A (Windows) oder Befehl+A (Macintosh), um dessen Inhalt
auszuwählen. Drücken Sie Strg+A bzw. Befehl+A erneut, um das AP-Element auszuwählen.
• Klicken Sie in ein AP-Element und wählen Sie das Tag im Tag-Selektor aus.
Mehrere AP-Elemente auswählen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie im Bedienfeld „AP-Elemente“ (Fenster > AP-Elemente) bei gedrückter Umschalttaste auf zwei oder
mehr AP-Elementnamen.
• Klicken Sie im Dokumentfenster bei gedrückter Umschalttaste in zwei oder mehr AP-Elemente oder klicken Sie
auf die AP-Elementerahmen.
Stapelreihenfolge von AP-Elementen ändern
Die Stapelreihenfolge von AP-Elementen kann über den Eigenschafteninspektor oder über das Bedienfeld „AP-
Elemente“ geändert werden. Das AP-Element, das in der Liste des Bedienfelds „AP-Elemente“ ganz oben steht,
befindet sich an der ersten Stelle der Stapelreihenfolge und wird vor den anderen AP-Elementen angezeigt.
Im HTML-Code bestimmt die Stapelreihenfolge (der Z-Index) der AP-Elemente, in welcher Reihenfolge sie in einem
Browser gezeichnet werden. Je höher der Z-Indexwert eines AP-Elements ist, desto höher ist die Position des AP-
Elements in der Stapelreihenfolge. (Ein Element mit dem Z-Index 4 wird beispielsweise oberhalb eines Elements mit
dem Z-Index 3 angezeigt. 1 ist dabei immer die niedrigste Zahl in der Stapelreihenfolge.) Den Z-Index der einzelnen
AP-Elemente können Sie im Bedienfeld „AP-Elemente“ oder im Eigenschafteninspektor ändern.
184
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Stapelreihenfolge von AP-Elementen im Bedienfeld „AP-Elemente“ ändern
1 Öffnen Sie das Bedienfeld „AP-Elemente“ mit dem Menübefehl „Fenster“ > „AP-Elemente“.
2 Doppelklicken Sie auf die Z-Indexzahl neben dem AP-Element, dessen Z-Index Sie ändern möchten.
3 Geben Sie die Zahl ein und drücken Sie die Eingabetaste bzw. den Zeilenschalter.
• Geben Sie eine höhere Zahl ein, um das AP-Element in der Stapelreihenfolge hochzusetzen.
• Geben Sie eine niedrigere Zahl ein, um das AP-Element in der Stapelreihenfolge zurückzusetzen.
Stapelreihenfolge von AP-Elementen im Eigenschafteninspektor ändern
1 Öffnen Sie das Bedienfeld „AP-Elemente“ mit dem Menübefehl „Fenster“ > „AP-Elemente“, um die aktuelle
Stapelreihenfolge anzuzeigen.
2 Wählen Sie im Bedienfeld „AP-Elemente“ oder im Dokumentfenster das AP-Element aus, dessen Z-Index Sie
ändern möchten.
3 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl im Textfeld „Z-Index“ ein.
• Geben Sie eine höhere Zahl ein, um das AP-Element in der Stapelreihenfolge hochzusetzen.
• Geben Sie eine niedrigere Zahl ein, um das AP-Element in der Stapelreihenfolge zurückzusetzen.
AP-Elemente ein- und ausblenden
Wenn Sie an Ihrem Dokument arbeiten, können Sie AP-Elemente mithilfe des Bedienfelds „AP-Elemente“ manuell
ein- oder ausblenden, um festzustellen, wie die Seite unter verschiedenen Bedingungen aussieht.
Note: Das aktuell ausgewählte AP-Element ist immer sichtbar und wird im Vordergrund angezeigt, solange es
ausgewählt ist.
Sichtbarkeit von AP-Elementen ändern
1 Öffnen Sie das Bedienfeld „AP-Elemente“ mit dem Menübefehl „Fenster“ > „AP-Elemente“.
2 Klicken Sie in die Spalte mit dem Augensymbol, um die Sichtbarkeit eines AP-Elements zu ändern.
• Ein geöffnetes Auge bedeutet, dass das AP-Element sichtbar ist.
• Ein geschlossenes Auge bedeutet, dass das AP-Element nicht sichtbar ist.
• Wenn kein Augensymbol angezeigt wird, übernimmt das AP-Element in der Regel die Sichtbarkeit der
übergeordneten Ebene. (Bei nicht verschachtelten AP-Elementen ist das übergeordnete Element der Hauptteil des
Dokuments, der immer sichtbar ist.)
Außerdem wird kein Augensymbol angezeigt, wenn keine Sichtbarkeit angegeben ist (diese Option wird im
Eigenschafteninspektor als Standardsichtbarkeit angezeigt).
Sichtbarkeit aller AP-Elemente gleichzeitig ändern
❖ Klicken Sie im Bedienfeld „AP-Elemente“ („Fenster“ > „Ebenen“) auf das Augensymbol in der Überschriftenzeile
ganz oben in der Spalte.
Note: Auf diese Weise können Sie alle AP-Elemente als sichtbar oder versteckt definieren. Die Option „Übernehmen“ ist
dabei jedoch nicht verfügbar.
AP-Elemente vergrößern oder verkleinern
Sie können ein einzelnes AP-Element verkleinern bzw. vergrößern oder die Größe von mehreren AP-Elementen
gleichzeitig ändern, um sie auf die gleiche Breite und Höhe einzustellen.
185
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Wenn die Option „Überlappungen verhindern“ aktiv ist, können Sie die Größe eines AP-Element nur so weit ändern,
dass es sich nicht mit einem anderen AP-Element überlappt.
More Help topics
“Layoutraster verwenden” on page 191
Größe eines AP-Elements ändern
1 Wählen Sie in der Entwurfsansicht ein AP-Element aus.
2 Führen Sie einen der folgenden Schritte aus, um die Größe des AP-Elements zu verändern:
• Um die Größe durch Ziehen zu ändern, ziehen Sie einen der Größenänderungsgriffe des AP-Elements.
• Um die Ebene um je ein Pixel zu verkleinern oder zu vergrößern, halten Sie die Strg-Taste (Windows) bzw. die
Wahltaste (Macintosh) gedrückt und drücken dann eine der Pfeiltasten.
Die Pfeiltasten verschieben den rechten und den unteren Rand des AP-Elements. Den oberen und den linken Rand
können Sie auf diese Weise nicht verschieben.
• Um die Ebene in Raster-Inkrementen zu verkleinern oder zu vergrößern, halten Sie Umschalt+Strg (Windows)
bzw. Umschalt+Wahl (Macintosh) gedrückt und drücken dann eine der Pfeiltasten.
•
Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) Werte für die Breite („B“) und die Höhe („H“) ein.
Das Ändern der Größe wirkt sich auf die Breite und Höhe eines AP-Elements aus. Dies hat jedoch keinen Einfluss
darauf, wie viel vom Inhalt des AP-Elements sichtbar ist. Den sichtbaren Bereich eines AP-Elements können Sie in den
Voreinstellungen festlegen.
Größe mehrerer AP-Elemente gleichzeitig ändern
1 Wählen Sie in der Entwurfsansicht zwei oder mehr AP-Elemente aus.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Anordnen“ > „Auf gleiche Breite einstellen“ bzw. „Modifizieren“ > „Anordnen“ >
„Auf gleiche Höhe einstellen“ aus.
Die zuerst ausgewählten AP-Elemente werden an die Breite oder Höhe des zuletzt ausgewählten AP-Elements
angepasst.
• Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) unter „Mehrere CSS-P-Elemente“ Werte für
die Breite und die Höhe ein.
Die eingegebenen Werte werden auf alle ausgewählten AP-Elemente angewandt.
AP-Elemente verschieben
In der Entwurfsansicht können Sie AP-Elemente verschieben wie Objekte in den meisten Grafikanwendungen.
Wenn die Option „Überlappungen verhindern“ aktiv ist, können Sie ein AP-Element nur so weit verschieben, dass es
sich nicht mit einem anderen AP-Element überlappt.
1 Wählen Sie in der Entwurfsansicht, ein oder mehrere AP-Elemente aus.
2 Führen Sie einen der folgenden Schritte aus:
• Um die AP-Elemente durch Ziehen zu verschieben, ziehen Sie den Auswahlgriff des zuletzt ausgewählten AP-
Elements (dieses Element ist schwarz markiert).
• Um die Ebenen um je ein Pixel zu verschieben, drücken Sie eine der Pfeiltasten.
186
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Um die AP-Elemente um das aktuelle Inkrement zur Ausrichtung am Raster zu verschieben, halten Sie die
Umschalttaste gedrückt, während Sie die Pfeiltasten drücken.
More Help topics
“Layoutraster verwenden” on page 191
AP-Elemente ausrichten
Mit den Befehlen zum Ausrichten von AP-Elementen können Sie ein oder mehrere AP-Elemente an einem Rand des
zuletzt ausgewählten AP-Elements ausrichten.
Beim Ausrichten von AP-Elementen werden möglicherweise nicht ausgewählte, untergeordnete AP-Elemente mit
verschoben, weil das ihnen übergeordnete AP-Element ausgewählt und verschoben wird. Wenn Sie dies vermeiden
möchten, verwenden Sie keine verschachtelten AP-Elemente.
1 Wählen Sie das AP-Element in der Entwurfsansicht aus.
2 Wählen Sie „Modifizieren“ > „Anordnen“ und anschließend eine Ausrichtungsoption aus.
Wenn Sie beispielsweise den Befehl „Oben ausrichten“ wählen, werden alle AP-Elemente so verschoben, dass sich ihr
oberer Rand in der gleichen vertikalen Position befindet wie der obere Rand des zuletzt ausgewählten (schwarz
markierten) AP-Elements.
AP-Elemente in Tabellen umwandeln
Einige Webdesigner nutzen AP-Elemente bei der Layouterstellung als Ersatz für Tabellen. Mit Dreamweaver kann ein
Layout aus AP-Elementen erstellt und anschließend auf Wunsch in Tabellen umgewandelt werden. Das Konvertieren
von AP-Elementen in Tabellen ist beispielsweise erforderlich, wenn Sie ältere Browser (vor Version 4.0) unterstützen
möchten. Grundsätzlich wird jedoch nachdrücklich davon abgeraten, AP-Elemente in Tabellen umzuwandeln. Diese
Vorgehensweise kann dazu führen, dass Tabellen mit zahlreichen leeren Zellen erzeugt werden und der Code unnötig
aufgeblasen wird. Um ein Seitenlayout mit Tabellen zu erstellen, sollten Sie möglichst die dafür vorgesehenen
Standard-Layoutwerkzeuge von Dreamweaver verwenden.
Sie können zwischen AP-Elementen und Tabellen hin- und herwechseln, um das Layout anzupassen und die Seite zu
optimieren. (Beachten Sie jedoch, dass Dreamweaver eine Tabelle bei der Rückkonvertierung in AP-Elemente immer
zu AP-Div-Tags wandelt – unabhängig davon, welche AP-Elementtypen sich vor der Konvertierung in Tabellen auf
der Seite befanden.) Es ist nicht möglich, nur bestimmte Tabellen bzw. AP-Elemente auf einer Seite zu konvertieren.
Die Umwandlung von AP-Elementen in Tabellen und von Tabellen in AP-Div-Tags kann nur für die gesamte Seite
erfolgen.
Note: Bei Vorlagen oder Dokumenten, die auf Vorlagen basieren, ist das Konvertieren von AP-Elementen in Tabellen
bzw. von Tabellen in AP-Div-Tags nicht möglich. Erstellen Sie ein stattdessen Ihr Layout in einem vorlagenfreien
Dokument und nehmen Sie die Konvertierung vor, bevor Sie das Dokument als Vorlage speichern.
Zwischen AP-Elementen und Tabellen konvertieren
Sie können Ihr Layout mit AP-Elementen erstellen und diese anschließend in Tabellen konvertieren, damit das Layout
in älteren Browsern angezeigt werden kann.
Stellen Sie sicher, dass sich die AP-Elemente nicht überlappen, bevor Sie sie in Tabellen konvertieren. Achten Sie auch
darauf, dass der Standardmodus („Ansicht“ > „Tabellenmodus“ > „Standardmodus“) aktiviert ist.
AP-Elemente in eine Tabelle konvertieren
1 Wählen Sie „Modifizieren“ > „Konvertieren“ > „AP-Divs in Tabelle“ aus.
187
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
2 Legen Sie die folgenden Optionen fest und klicken Sie auf „OK“.
Höchste Genauigkeit Erstellt eine Tabellenzelle für jedes AP-Element. Außerdem werden nach Bedarf zusätzliche
Zellen erstellt, um den Abstand zwischen AP-Elementen beizubehalten.
Kleinste: Leere Zellen ausblenden Legt fest, dass die Ränder der AP-Elemente ausgerichtet werden sollen, wenn sie
innerhalb der angegebenen Pixelanzahl positioniert werden.
Wenn Sie diese Option auswählen, hat die resultierende Tabelle weniger leere Zeilen und Spalten, stimmt aber
möglicherweise nicht genau mit Ihrem Layout überein.
Durchsichtige GIFs verwenden Bewirkt, dass in die letzte Zeile der Tabelle transparente GIFs eingefügt werden.
Dadurch wird sichergestellt, dass die Tabelle in allen Browsern mit gleicher Spaltenbreite angezeigt wird.
Ist diese Option aktiviert, können Sie die resultierende Tabelle nicht durch Ziehen der Spalten bearbeiten. Ist diese
Option deaktiviert, enthält die resultierende Tabelle zwar keine transparenten GIFs, die Breite der Spalten wird aber
in den verschiedenen Browsern möglicherweise unterschiedlich angezeigt.
Auf Seite zentrieren Bewirkt, dass die resultierende Tabelle auf der Seite zentriert wird. Ist diese Option deaktiviert,
beginnt die Tabelle am linken Seitenrand.
Tabellen in AP-Divs konvertieren
1 Wählen Sie „Modifizieren“ > „Konvertieren“ > „Tabellen in AP-Divs“ aus.
2 Legen Sie die folgenden Optionen fest und klicken Sie auf „OK“.
AP-Elementüberlappungen verhindern Beschränkt die Position der AP-Elemente, sodass sie sich nicht überlappen,
wenn Sie AP-Elemente erstellen, verschieben, vergrößern oder verkleinern.
Bedienfeld AP-Elemente einblenden Zeigt das Bedienfeld „AP-Elemente“ an.
„Raster anzeigen“ und „Am Raster ausrichten“ Ermöglichen die Verwendung eines Rasters, um die Positionierung
von AP-Elementen zu vereinfachen.
Die Tabellen werden in AP-Div-Tags umgewandelt. Leere Zellen werden nur dann in AP-Elemente konvertiert, wenn
sie eine Hintergrundfarbe haben.
Note: Seitenelemente, die sich außerhalb von Tabellen befinden, werden ebenfalls in AP-Div-Tags eingefügt.
AP-Elementüberlappungen verhindern
Da Tabellenzellen sich nicht überlappen können, kann Dreamweaver keine Tabelle aus überlappenden AP-Elementen
erstellen. Wenn Sie die AP-Elemente in einem Dokument in Tabellen umwandeln möchten, aktivieren Sie die Option
„Überlappungen verhindern“. Dies schränkt die Bewegung und Positionierung der AP-Elemente so ein, dass sie
einander nicht überlappen können.
Ist diese Option aktiviert, können AP-Element nicht vor anderen AP-Elementen erstellt oder so verschoben,
vergrößert oder verkleinert werden, dass sie sich über anderen AP-Elementen befinden. Weiterhin können AP-
Elemente nicht in vorhandenen AP-Elementen verschachtelt werden. Wenn Sie bereits überlappende AP-Elemente
erstellt haben, bevor Sie diese Option aktivieren, müssen Sie die betreffenden AP-Elemente manuell verschieben,
damit sie einander nicht überlappen. Vorhandene AP-Elementüberlappungen auf einer Seite werden von
Dreamweaver nicht automatisch behoben, wenn Sie die Option „Überlappungen verhindern“ aktivieren.
Wenn sowohl diese Option als auch die Ausrichtfunktion aktiviert sind, werden AP-Elemente nicht am Raster
ausgerichtet, wenn sich dadurch zwei AP-Elemente überlappen würden. Stattdessen wird ein AP-Element am Rand
des nächstgelegenen AP-Elements ausgerichtet.
188
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
Note: Bei bestimmten Aktionen können Sie AP-Elemente überlappen, obwohl die Option „Überlappungen verhindern“
aktiviert ist. Wenn Sie ein AP-Element mithilfe des Menüs „Einfügen“ hinzufügen, Werte im Eigenschafteninspektor
eingeben oder AP-Elemente neu positionieren, indem Sie den HTML-Quellcode bearbeiten, kann es vorkommen, dass
AP-Elemente sich auch dann überlappen oder verschachtelt sind, wenn die Option aktiviert ist. In diesem Fall müssen
Sie die überlappenden AP-Elemente durch Ziehen in der Entwurfsansicht voneinander trennen.
•
Wählen Sie im Bedienfeld „AP-Elemente“ („Fenster“ > „AP-Elemente“) die Option „Überlappungen verhindern“ aus.
• Wählen Sie im Dokumentfenster „Modifizieren“ > „Anordnen“ > „AP-Elementüberlappungen verhindern“ aus.
189
Last updated 10.4.2012
Chapter 7: Seitenlayouts mit HTML
gestalten
Visuelle Hilfsmittel für das Layout
Lineale einrichten
Lineale dienen zum Messen, Organisieren und Planen des Layouts. Sie können am linken und oberen Rand der Seite
eingeblendet werden. Als Maßeinheit kann Pixel, Zoll oder Zentimeter ausgewählt werden.
• Lineale können durch Auswahl von „Ansicht“ > „Lineale“ > „Zeigen“ ein- und ausgeblendet werden.
• Wenn Sie den Ursprung ändern möchten, ziehen Sie das Linealursprungssymbol (in der Entwurfsansicht in der
linken oberen Ecke des Dokumentfensters) an eine beliebige Stelle der Seite.
• Wenn Sie den Ursprung wieder an die Standardposition zurücksetzen möchten, wählen Sie „Ansicht“ > „Lineale“ >
„Ursprung zurücksetzen“ aus.
• Um die Maßeinheit zu ändern, wählen Sie „Ansicht“ > „Lineale“ und dann „Pixel“, „Zoll“ oder „Zentimeter“ aus.
Layouthilfslinien einrichten
Hilfslinien sind Linien, die Sie aus den Linealen auf das Dokument ziehen. Sie dienen zum genaueren Positionieren
und Ausrichten von Objekten. Sie können Hilfslinien außerdem zum Messen der Größe von Seitenelementen oder
zum Emulieren der sichtbaren Bereiche von Webbrowsern verwenden.
Sie können Elemente an Hilfslinien und Hilfslinien an Elementen ausrichten. Dies vereinfacht ihre Ausrichtung. (Die
Funktion zum Ausrichten kann jedoch nur verwendet werden, wenn Elemente absolut positioniert wurden.) Darüber
hinaus können Sie Hilfslinien sperren, um zu verhindern, dass sie versehentlich von anderen Benutzern verschoben
werden.
Horizontale oder vertikale Hilfslinien erstellen
1 Ziehen Sie eine Linie aus dem entsprechenden Lineal.
2 Positionieren Sie die Hilfslinie im Dokumentfenster und lassen Sie die Maustaste los. Durch erneutes Ziehen
können Sie die Position der Hilfslinie ändern.
Note: In der Standardeinstellung werden Hilfslinien als absolute Pixelmaße von der oberen oder linken Seite des
Dokuments aufgezeichnet und relativ zum Ursprung des Lineals angezeigt. Drücken Sie beim Erstellen oder Verschieben
einer Hilfslinie die Umschalttaste, um sie als Prozentsatz aufzuzeichnen.
Hilfslinien ein- oder ausblenden
❖ Wählen Sie „Ansicht“ > „Hilfslinien“ > „Hilfslinien anzeigen“ aus.
Elemente an Hilfslinien ausrichten
• Wenn Sie Elemente an Hilfslinien ausrichten möchten, wählen Sie „Ansicht“ > „Hilfslinien“ > „An Hilfslinien
ausrichten“ aus.
• Wenn Sie Hilfslinien an Elementen ausrichten möchten, wählen Sie „Ansicht“ > „Hilfslinien“ > „Hilfslinien an
Elementen ausrichten“ aus.
190
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Note: Wenn Sie die Größe von Elementen, z. B. von absolut positionierten (AP-)Elementen, Tabellen oder Bildern,
ändern, werden die geänderten Elemente an Hilfslinien ausgerichtet.
Alle Hilfslinien sperren oder entsperren
❖ Wählen Sie „Ansicht“ > „Hilfslinien“ > „Hilfslinien sperren“ aus.
Hilfslinien anzeigen und an eine bestimmte Position verschieben
1 Führen Sie den Mauszeiger über die Hilfslinie, um ihre Position anzuzeigen.
2 Doppelklicken Sie auf die Hilfslinie.
3 Geben Sie im Dialogfeld „Hilfslinie verschieben“ die neue Position ein und klicken Sie auf „OK“.
Abstand zwischen Hilfslinien anzeigen
❖ Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und zeigen Sie mit dem Mauszeiger auf
eine beliebige Stelle zwischen den beiden Hilfslinien.
Note: Für Hilfslinien wird die gleiche Maßeinheit wie für die Lineale verwendet.
Sichtbaren Bereich eines Webbrowsers emulieren
❖ Wählen Sie „Ansicht“ > „Hilfslinien“ aus und wählen Sie dann im Menü eine vordefinierte Browsergröße aus.
Hilfslinien entfernen
❖ Ziehen Sie die Hilfslinie aus dem Dokument.
Hilfslinieneinstellungen ändern
❖ Wählen Sie „Ansicht“ > „Hilfslinien“ > „Hilfslinien bearbeiten“ aus, legen Sie die folgenden Optionen fest und
klicken Sie auf „OK“.
Hilfslinienfarbe Gibt die Farbe der Hilfslinien an. Klicken Sie auf das Farbfeld und wählen Sie im Farbwähler eine
Farbe aus oder geben Sie im Textfeld den Hexadezimalwert einer Farbe ein.
Abstandsfarbe Gibt die Farbe der Linien an, die als Abstandsanzeigen angezeigt werden, wenn Sie den Mauszeiger
zwischen Hilfslinien setzen. Klicken Sie auf das Farbfeld und wählen Sie im Farbwähler eine Farbe aus oder geben Sie
im Textfeld den Hexadezimalwert einer Farbe ein.
Hilfslinien anzeigen Blendet Hilfslinien in der Entwurfsansicht ein.
An Hilfslinien ausrichten Richtet Elemente beim Verschieben auf der Seite an Hilfslinien aus.
Hilfslinien sperren Fixiert Hilfslinien an der jeweiligen Position.
Hilfslinien an Elementen ausrichten Richtet Hilfslinien beim Ziehen mit der Maus an Elementen auf der Seite aus.
Alles löschen Löscht alle Hilfslinien auf der Seite.
Hilfslinien mit Vorlagen verwenden
Wenn Hilfslinien zu einer Dreamweaver-Vorlage hinzugefügt werden, übernehmen alle Instanzen der Vorlage diese
Hilfslinien. Hilfslinien in Vorlageninstanzen werden jedoch als bearbeitbare Bereiche behandelt und können von
Benutzern geändert werden. Geänderte Hilfslinien in einer Vorlageninstanz werden beim Aktualisieren der Instanz
anhand der Mastervorlage an der Originalposition wiederhergestellt.
191
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Sie können zu Instanzen einer Vorlage auch benutzerdefinierte Hilfslinien hinzufügen. Die auf diese Weise
hinzugefügten Hilfslinien werden nicht überschrieben, wenn die Vorlageninstanz anhand der Mastervorlage
aktualisiert wird.
More Help topics
“AP-Elemente ausrichten” on page 186
“AP-Elemente verschieben” on page 185
Layoutraster verwenden
Mit dem Raster wird im Dokumentfenster ein System aus horizontalen und vertikalen Linien angezeigt. Es ist nützlich
für die genaue Positionierung von Objekten. Sie können absolut positionierte Seitenelemente beim Verschieben
automatisch am Raster ausrichten und durch Festlegen der Rastereinstellungen das Ausrichtverhalten oder das Raster
selbst ändern. Dabei spielt es keine Rolle, ob das Raster ein- oder ausgeblendet ist.
More Help topics
“AP-Elemente ausrichten” on page 186
“AP-Elemente verschieben” on page 185
Raster ein- oder ausblenden
❖ Wählen Sie „Ansicht“ > „Raster“ > „Raster anzeigen“ aus.
Ausrichten aktivieren oder deaktivieren
❖ Wählen Sie „Ansicht“ > „Raster“ > „Am Raster ausrichten“ aus.
Rastereinstellungen ändern
1 Wählen Sie „Ansicht“ > „Raster“ > „Rastereinstellungen“ aus.
2 Legen Sie die Optionen fest und klicken Sie auf „OK“, um die Änderungen anzuwenden.
Color Gibt die Farbe der Rasterlinien an. Klicken Sie auf das Farbfeld und wählen Sie im Farbwähler eine Farbe aus
oder geben Sie im Textfeld den Hexadezimalwert einer Farbe ein.
Raster anzeigen Blendet das Raster in der Entwurfsansicht ein.
Am Raster ausrichten Richtet die Seitenelemente an den Rasterlinien aus.
Abstand Legt den Abstand zwischen den Rasterlinien fest. Geben Sie eine Zahl ein und wählen Sie im Menü die
Maßeinheit „Pixel“, „Zoll“ oder „Zentimeter“ aus.
Display Gibt an, ob die Rasterlinien als durchgehende Linien oder als Punktlinien angezeigt werden.
Note: Wenn die Option „Raster anzeigen“ nicht aktiviert ist, wird das Raster im Dokument nicht eingeblendet. Darüber
hinaus werden keine Änderungen angezeigt.
Tracing-Bilder verwenden
Tracing-Bilder können als Hilfsmittel zur Reproduktion eines Seitendesigns verwendet werden, das in einer
Grafikanwendung wie Adobe Freehand oder Fireworks erstellt wurde.
Ein Tracing-Bild ist ein JPEG-, GIF- oder PNG-Bild, das im Hintergrund des Dokumentfensters platziert wird. Sie
können das Bild ausblenden, seine Transparenz festlegen und seine Position ändern.
192
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Das Tracing-Bild wird nur in Dreamweaver angezeigt. Beim Anzeigen der Seite in einem Browser ist es nicht sichtbar.
Wenn das Tracing-Bild eingeblendet ist, sind das tatsächliche Hintergrundbild und die Hintergrundfarbe der Seite
nicht im Dokumentfenster, sondern nur bei der Vorschau der Seite im Browser sichtbar.
Tracing-Bilder im Dokumentfenster einfügen
1 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Tracing-Bild“ > „Laden“ aus.
• Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ aus und klicken Sie dann neben dem Textfeld „Tracing-Bild“
auf „Durchsuchen“.
2 Wählen Sie im Dialogfeld „Bildquelle auswählen“ eine Bilddatei aus und klicken Sie auf „OK“.
3 Legen Sie im Dialogfeld „Seiteneigenschaften“ die Transparenz des Bilds fest, indem Sie den Schieberegler für die
Bildtransparenz nach links oder rechts ziehen. Klicken Sie dann auf „OK“.
Wenn Sie ein anderes Tracing-Bild auswählen oder die Transparenz des aktuellen Tracing-Bilds ändern möchten,
können Sie jederzeit „Modifizieren“ > „Seiteneigenschaften“ auswählen.
Tracing-Bilder ein- oder ausblenden
❖ Wählen Sie „Ansicht“ > „Tracing-Bild“ > „Zeigen“ aus.
Position von Tracing-Bildern ändern
❖ Wählen Sie „Ansicht“ > „Tracing-Bild“ > „Position einstellen“ aus.
• Geben Sie die entsprechenden Koordinatenwerte in den Feldern „X“ und „Y“ ein, um die Position eines Tracing-
Bilds präzise anzugeben.
• Über die Pfeiltasten können Sie das Bild um jeweils 1 Pixel verschieben.
• Drücken Sie die Umschalttaste und eine der Pfeiltasten, um das Bild um jeweils 5 Pixel zu verschieben.
Tracing-Bilder auf die Ausgangsposition zurücksetzen
❖ Wählen Sie „Ansicht“ > „Tracing-Bild“ > „Position zurücksetzen“ aus.
Das Tracing-Bild wird wieder in der oberen linken Ecke (0,0) des Dokumentfensters angezeigt.
Tracing-Bilder an einem ausgewählten Element ausrichten
1 Wählen Sie ein Element im Dokumentfenster aus.
2 Wählen Sie „Ansicht“ > „Tracing-Bild“ > „An Auswahl ausrichten“ aus.
Die obere linke Ecke des Tracing-Bilds wird an der oberen linken Ecke des ausgewählten Elements ausgerichtet.
Inhalte in Tabellen darstellen
Tabellen
Tabellen sind ideal dazu geeignet, tabellarische Daten, Texte und Grafiken in übersichtlicher Form auf HTML-Seiten
darzustellen. Eine Tabelle besteht aus einer oder mehreren Zeilen, eine Zeile aus einer oder mehreren Zellen. Zwar
sind Spalten gewöhnlich nicht explizit im HTML-Code festgelegt, in Dreamweaver können jedoch neben Zeilen und
Zellen auch Spalten bearbeitet werden.
193
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
In Dreamweaver wird die Tabellen- und Spaltenbreite für jede Tabellenspalte angezeigt, wenn die Tabelle ausgewählt
wird oder sich die Einfügemarke in der Tabelle befindet. Neben der Breite werden Pfeile für das Kopfzeilenmenü und
die Spaltenüberschriftmenüs angezeigt. Über die Menüs können Sie schnell und einfach auf häufig verwendete
Tabellenbefehle zugreifen. Sie können die Breiten und Menüs aktivieren oder deaktivieren.
Wenn für eine Tabelle oder Spalte keine Breite angezeigt wird, wurde im HTML-Code für die Tabelle oder Spalte keine
Breite festgelegt. Wenn zwei Zahlen angezeigt werden, stimmt die in der Entwurfsansicht dargestellte visuelle Breite
nicht mit der im HTML-Code definierten Breite überein. Dies kann dann der Fall sein, wenn Sie die Größe einer
Tabelle durch Ziehen der unteren rechten Ecke ändern oder wenn Sie einer Zelle Inhalt hinzufügen, der die eingestellte
Breite der Zelle überschreitet.
Wenn Sie beispielsweise die Breite einer Spalte auf 200 Pixel einstellen und anschließend der Spalte Inhalt hinzufügen,
der die Breite auf 250 Pixel erweitert, werden zwei Zahlen für diese Spalte angezeigt: „200“ (die im Code definierte
Breite) und „(250)“ in Klammern (die visuelle, auf dem Bildschirm dargestellte Spaltenbreite).
Note: Sie können das Layout von Seiten auch mit CSS-Positionierungsstilen erstellen.
More Help topics
“Gestalten von Seitenlayouts mit CSS” on page 165
Rangfolge der Tabellenformatierung in HTML
Wenn Sie Tabellen in der Entwurfsansicht formatieren, können Sie Eigenschaften für die gesamte Tabelle oder für
ausgewählte Zeilen, Spalten oder Zellen der Tabelle festlegen. Bei einzelnen Tabellenzellen kann für eine Eigenschaft,
beispielsweise Hintergrundfarbe oder Ausrichtung, ein anderer Wert als für die gesamte Tabelle festgelegt werden.
Dabei hat die Formatierung der Zellen Vorrang vor der Formatierung der Zeilen, die wiederum Vorrang vor der
Formatierung der Tabelle hat.
Die Rangfolge bei der Formatierung von Tabellen lautet wie folgt:
1 Zellen
2 Zeilen
3 Tabelle
Wenn Sie beispielsweise für eine Zelle als Hintergrundfarbe Blau festlegen und anschließend als Hintergrundfarbe der
ganzen Tabelle Gelb auswählen, wird die blaue Zelle nicht gelb dargestellt, da die Formatierung der Zelle Vorrang vor
der Tabellenformatierung hat.
Note: Wenn Sie Eigenschaften für eine Spalte definieren, ändert Dreamweaver für jede Zelle der Spalte die Attribute des
td-Tags.
Tabellenzellen verbinden und teilen
Sie können eine beliebige Anzahl aneinandergrenzender Zellen verbinden, wenn die Auswahl eine Reihe oder ein
Rechteck von Zellen darstellt. Dadurch entsteht eine einzige Zelle, die sich über mehrere Spalten oder Zeilen erstreckt.
Sie können eine Zelle in eine beliebige Anzahl Zeilen oder Spalten teilen. Dies gilt auch für Zellen, die zuvor nicht
verbunden wurden. In Dreamweaver wird die Tabelle (durch Hinzufügen der erforderlichen
colspan- oder rowspan-
Attribute) automatisch neu strukturiert, um die gewünschte Tabellenanordnung zu erzielen.
194
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Im folgenden Beispiel wurden die Zellen in der Mitte der ersten beiden Zeilen zu einer Zelle verbunden, die sich über
zwei Zeilen erstreckt.
Tabellen und Inhalte einfügen
Neue Tabellen können im Bedienfeld „Einfügen“ oder über das Menü „Einfügen“ erstellt werden. Anschließend
können Text und Bilder auf die gleiche Weise in Tabellenzellen wie außerhalb von Tabellen eingefügt werden.
Note: Die Layoutmodus-Funktion ist ab Dreamweaver CS4 veraltet. Mit dem Layoutmodus wurden Seitenlayouts
mithilfe von Tabellen erstellt, deren Verwendung inzwischen von Adobe nicht mehr empfohlen wird. Weitere
Informationen zum Layoutmodus und warum er nicht mehr vorhanden ist, finden Sie im Dreamweaver Team Blog.
1 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der die Tabelle
angezeigt werden soll.
Note: Wenn es sich um ein leeres Dokument handelt, können Sie die Einfügemarke nur an den Dokumentanfang setzen.
• Wählen Sie „Einfügen“ > „Tabelle“ aus.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf „Tabelle“.
2 Legen Sie die Attribute im Dialogfeld „Tabelle“ fest und klicken Sie auf „OK“, um die Tabelle zu erstellen.
Zeilen Legt die Anzahl der Tabellenzeilen fest.
Spalten Legt die Anzahl der Tabellenspalten fest.
Tabellenbreite gibt die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers an.
Randstärke gibt die Breite der Tabellenränder in Pixel an.
Zellabstand legt den Abstand zwischen aneinander grenzen Tabellenzellen in Pixel fest.
Wenn Sie für Randstärke, Zellabstand und Zellauffüllung nicht ausdrücklich Werte zuweisen, wird in den meisten
Browsern für die Randstärke und die Zellauffüllung der Wert „1“ und für den Zellabstand der Wert „2“ festgelegt.
Legen Sie für „Zellauffüllung“ und „Zellabstand“ den Wert „0“ fest, wenn die Tabelle im Browser ohne Rand,
Zellauffüllung und Zellabstand angezeigt werden soll.
Zellauffüllung Gibt den Abstand zwischen den Zellrändern und dem Zellinhalt in Pixel an.
Keine. Die Spalten- oder Zeilenüberschriften in der Tabelle sind nicht aktiviert.
Links Macht die erste Spalte der Tabelle zur Spalte für Überschriften, sodass Sie für jede Zeile der Tabelle eine
Überschrift eingeben können.
Oben Macht die erste Zeile der Tabelle zur Zeile für Überschriften, sodass Sie für jede Spalte der Tabelle eine
Überschrift eingeben können.
Beide In der Tabelle können Spalten- und Zeilenüberschriften eingegeben werden.
Falls Sie davon ausgehen können, dass von den Besuchern Ihrer Website Bildschirmlesegeräte verwendet werden,
empfiehlt es sich, Überschriften einzugeben. Mit Bildschirmlesegeräten werden die Tabellenüberschriften gelesen,
sodass Benutzer sich leichter in der Tabelle zurechtfinden.
Beschriftung Gibt eine Tabellenüberschrift an, die außerhalb der Tabelle angezeigt wird.
195
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Beschriftung ausrichten Gibt die Stelle an, an der die Tabellenbeschriftung im Verhältnis zur Tabelle angezeigt wird.
Zusammenfassung Enthält eine Beschreibung der Tabelle. Bildschirmlesegeräte lesen den Text der
Zusammenfassung, wobei dieser nicht im Browser des Benutzers angezeigt wird.
Tabellendaten importieren und exportieren
Sie können Tabellendaten, die in einer anderen Anwendung (z. B. Microsoft Excel) erstellt und in einem Textformat
mit Trennzeichen (mit durch Tabulatoren, Kommata, Doppelpunkte oder Semikola getrennten Elementen)
gespeichert wurden, inDreamweaver importieren und als Tabelle formatieren.
Sie können zudem Tabellendaten aus Dreamweaver in eine Textdatei exportieren, in der die Inhalte
aneinandergrenzender Zellen durch ein Trennzeichen getrennt sind. Als Trennzeichen können Kommata,
Doppelpunkte, Semikola und Leerzeichen verwendet werden. Wenn Sie eine Tabelle exportieren, wird die gesamte
Tabelle exportiert. Einzelne Teile einer Tabelle können nicht exportiert werden.
Falls nur einige Daten aus der Tabelle exportiert werden sollen, beispielsweise die ersten sechs Zeilen oder Spalten,
kopieren Sie die Zellen, die die gewünschten Daten enthalten, aus der Tabelle (um eine neue Tabelle zu erstellen) und
exportieren die neue Tabelle.
Tabellendaten importieren
1 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Datei“ > „Importieren“ > „Tabellendaten“ aus.
• Klicken Sie in der Kategorie „Daten“ des Bedienfelds „Einfügen“ auf das Symbol „Tabellendaten importieren“ .
• Wählen Sie „Einfügen“ > „Tabellenobjekte“ > „Tabellendaten importieren“ aus.
2 Geben Sie die Optionen für die Tabellendaten an und klicken Sie auf „OK“.
Datendatei Der Name der zu importierenden Datei. Klicken Sie auf die Schaltfläche „Durchsuchen“, um eine Datei
auszuwählen.
Trennzeichen Das in der importierten Datei verwendete Trennzeichen.
Wenn Sie „Anderes“ auswählen, wird rechts neben dem Popupmenü ein Textfeld angezeigt. Geben Sie das in der Datei
verwendete Trennzeichen ein.
Note: Geben Sie das Trennzeichen an, das beim Speichern der Datendatei verwendet wurde. Andernfalls wird die Datei
nicht ordnungsgemäß importiert und die Daten werden in der Tabelle nicht korrekt formatiert.
Tabellenbreite Die Breite der Tabelle.
• Wählen Sie „An Daten anpassen“ aus, damit die Spaltenbreite an die längste Textzeichenfolge in der Spalte
angepasst wird.
• Wählen Sie „Festlegen“ aus, um eine feste Tabellenbreite in Pixel oder als Prozentsatz der Fensterbreite des
Browsers festzulegen.
Rahmen gibt die Breite der Tabellenränder in Pixel an.
Zellauffüllung Der Abstand zwischen Zellinhalt und Zellrändern in Pixel.
Zellabstand Der Abstand zwischen aneinander grenzenden Tabellenzellen in Pixel.
196
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Wenn Sie für Rahmen, Zellabstand und Zellauffüllung nicht ausdrücklich Werte zuweisen, wird in den meisten
Browsern für den Rahmen und die Zellauffüllung der Wert „1“ und für den Zellabstand der Wert „2“ festgelegt. Legen
Sie für „Zellauffüllung“ und „Zellabstand“ den Wert „0“ fest, wenn die Tabelle im Browser ohne Zellauffüllung und
Zellabstand angezeigt werden soll. Wenn für „Rahmen“ der Wert „0“ festgelegt ist und die Zell- und Tabellenränder
angezeigt werden sollen, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Tabellenrahmen“ aus.
Format der obersten Zeile Gibt gegebenenfalls die Formatierung an, die der obersten Zeile der Tabelle zugewiesen
wird. Es stehen vier Formatierungsoptionen zur Verfügung: „Keine Formatierung“, „Fett“, „Kursiv“ oder „Fett und
Kursiv“.
Tabellen exportieren
1 Setzen Sie die Einfügemarke in eine Zelle der Tabelle.
2 Wählen Sie „Datei“ > „Exportieren“ > „Tabelle“ aus.
3 Legen Sie die folgenden Optionen fest:
Trennzeichen Gibt an, welches Trennzeichen zwischen den Elementen in der exportierten Datei verwendet wird.
Zeilenumbrüche Legt fest, in welchem Betriebssystem die exportierte Datei geöffnet wird: „Windows“, „Macintosh“
oder „UNIX“. (In den einzelnen Betriebssystemen wird das Ende einer Textzeile unterschiedlich angegeben.)
4 Klicken Sie auf „Exportieren“.
5 Geben Sie einen Namen für die Datei ein und klicken Sie auf „Speichern“.
Tabellenelemente auswählen
Sie können eine ganze Tabelle, Zeile oder Spalte auswählen. Sie können zudem eine oder mehrere einzelne Zellen
auswählen.
Wenn Sie den Mauszeiger über eine Tabelle, Zeile, Spalte oder Zelle bewegen, werden in Dreamweaver alle Zellen der
Auswahl markiert, damit Sie wissen, welche Zellen ausgewählt werden. Dies ist von Vorteil, wenn die jeweiligen
Tabellen keine Rahmen aufweisen oder verschachtelt sind oder wenn Zellen mehrere Spalten oder Zeilen umfassen.
Sie können die Markierungsfarbe in den Voreinstellungen ändern.
Wenn Sie den Mauszeiger auf den Rahmen einer Tabelle setzen und dann die Strg-Taste (Windows) bzw. die
Befehlstaste (Macintosh) gedrückt halten, wird die gesamte Struktur, d. h. alle Zellen der Tabelle, hervorgehoben. Dies
ist nützlich, wenn Sie bei verschachtelten Tabellen die Struktur einer einzelnen Tabelle anzeigen möchten.
Ganze Tabelle auswählen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf die linke obere Ecke der Tabelle, auf eine beliebige Stelle auf dem oberen oder unteren Tabellenrand
oder auf den Rand einer Zeile oder Spalte.
Note: Wenn der Mauszeiger die Form des Tabellenrastersymbols annimmt, können Sie die Tabelle auswählen (sofern
Sie nicht auf den Rand einer Zeile oder Spalte klicken).
• Klicken Sie in eine Tabellenzelle und wählen Sie dann im Tag-Selektor links unten im Dokumentfenster das
<table>-Tag aus.
• Klicken Sie in eine Tabellenzelle und wählen Sie dann „Modifizieren“ > „Tabelle“ > „Tabelle auswählen“.
• Klicken Sie in eine Tabellenzelle und dann auf das Kopfzeilenmenü und wählen Sie „Tabelle auswählen“. Am
unteren und rechten Rand der ausgewählten Tabelle werden Auswahlziehpunkte angezeigt.
197
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Einzelne oder mehrere Zeilen oder Spalten auswählen
1 Setzen Sie den Mauszeiger auf den linken Rand einer Zeile oder auf den oberen Rand einer Spalte.
2 Wenn sich der Mauszeiger in einen Auswahlpfeil ändert, klicken Sie, um eine Zeile oder Spalte auszuwählen, oder
ziehen Sie den Mauszeiger, um mehrere Zeilen oder Spalten auszuwählen.
Einzelne Spalten auswählen
1 Klicken Sie in die entsprechende Spalte.
2 Klicken Sie auf das Spaltenüberschriftmenü und wählen Sie dann „Spalte auswählen“ aus.
Einzelne Zellen auswählen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in die Zelle und wählen Sie dann im Tag-Selektor unten links im Dokumentfenster das Tag <td> aus.
• Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) in die Zelle.
• Klicken Sie in die Zelle und wählen Sie dann „Bearbeiten“ > „Alles auswählen“.
Wenn eine Zelle ausgewählt ist und Sie die gesamte Tabelle auswählen möchten, wählen Sie erneut „Bearbeiten“ >
„Alles auswählen“.
Reihe oder rechteckigen Block von Zellen auswählen
❖ Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie den Mauszeiger von einer Zelle in eine andere Zelle.
• Klicken Sie in eine Zelle, klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) in die
gleiche Zelle, um diese auszuwählen, und klicken Sie dann bei gedrückter Umschalttaste in eine andere Zelle.
Alle Zellen innerhalb der Reihe oder des Rechtecks zwischen den beiden Zellen werden ausgewählt.
Nicht aneinandergrenzende Zellen auswählen
❖ Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die auszuwählenden Zellen,
Zeilen oder Spalten.
198
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Wenn die entsprechenden Zellen, Zeilen oder Spalten noch nicht ausgewählt sind, werden sie zur Auswahl
hinzugefügt. Ist sie bereits ausgewählt, wird sie aus der Auswahl entfernt.
Markierungsfarbe für Tabellenelemente ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Markierung“ aus, nehmen Sie eine der folgenden Änderungen
vor und klicken Sie auf „OK“.
• Um die Markierungsfarbe für Tabellenelemente zu ändern, klicken Sie auf das Farbfeld „Mouse-Over“ und wählen
Sie mit dem Farbwähler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert für die Markierungsfarbe
im Textfeld ein).
• Um die Markierung von Tabellenelementen zu aktivieren oder zu deaktivieren, aktivieren oder deaktivieren Sie das
Kontrollkästchen „Anzeigen“ für „Mouse-Over“.
Note: Diese Optionen wirken sich auf alle Objekte aus, beispielsweise auf absolut positionierte Elemente (AP-Elemente),
die in Dreamweaver markiert werden, wenn Sie den Zeiger darüber bewegen.
Tabelleneigenschaften festlegen
Tabellen können mit dem Eigenschafteninspektor bearbeitet werden.
1 Wählen Sie eine Tabelle aus.
2 Ändern Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Eigenschaften nach Bedarf.
Tabellen-ID Die Identifikationsnummer der Tabelle.
Zeilen und Spalten Die Anzahl der Zeilen und Spalten in der Tabelle.
B Die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers.
Note: Die Höhe einer Tabelle müssen Sie in der Regel nicht festlegen.
Zellauffüllung Der Abstand zwischen Zellinhalt und Zellrändern in Pixel.
Zellabstand Der Abstand zwischen aneinander grenzenden Tabellenzellen in Pixel.
Ausrichten Gibt an, an welcher Stelle die Tabelle relativ zu anderen Elementen im gleichen Absatz, beispielsweise Text
oder Bilder, angezeigt wird.
Über „Links“ wird die Tabelle links neben anderen Elementen ausgerichtet (Text im gleichen Absatz wird rechts neben
der Tabelle umgebrochen). Über „Rechts“ wird die Tabelle rechts neben anderen Elementen ausgerichtet (Text wird
links neben der Tabelle umgebrochen). Über „Zentriert“ wird die Tabelle zentriert (Text wird oberhalb und/oder
unterhalb der Tabelle angezeigt). „Standard“ gibt an, dass die Standardausrichtung des Browsers verwendet wird.
Wenn die Ausrichtungsoption „Standard“ ausgewählt ist, wird neben der Tabelle kein anderer Inhalt angezeigt.
Wenn eine Tabelle neben anderen Inhalten angezeigt werden soll, wählen Sie die Ausrichtungsoption „Links“ oder
„Rechts“ aus.
Rahmen gibt die Breite der Tabellenränder in Pixel an.
Wenn Sie für Rahmen, Zellabstand und Zellauffüllung nicht ausdrücklich Werte zuweisen, wird in den meisten
Browsern für den Rahmen und die Zellauffüllung der Wert „1“ und für den Zellabstand der Wert „2“ festgelegt. Legen
Sie für „Rahmen“, „Zellauffüllung“ und „Zellabstand“ den Wert „0“ fest, wenn die Tabelle im Browser ohne
Zellauffüllung und Zellabstand angezeigt werden soll. Wenn für „Rahmen“ der Wert „0“ festgelegt ist und die Zell- und
Tabellenränder angezeigt werden sollen, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Tabellenrahmen“ aus.
199
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Klasse Legt eine CSS-Klasse in der Tabelle fest.
Note: Unter Umständen müssen Sie den Eigenschafteninspektor für Tabellen erweitern, damit die folgenden Optionen
angezeigt werden. Klicken Sie zum Erweitern des Eigenschafteninspektors für Tabellen auf den Erweiterungspfeil in der
rechten unteren Ecke.
Spaltenbreiten löschen und „Zeilenhöhen löschen“ löschen in der Tabelle alle explizit festgelegten Werte für
Spaltenbreite oder Zeilenhöhe.
Tabellenbreite in Pixel konvertieren und „Tabellenhöhe in Pixel konvertieren“ wandeln die aktuelle Breite oder Höhe
aller Spalten in der Tabelle (sowie die Breite der gesamten Tabelle) in Pixel um.
Tabellenbreite in Prozent konvertieren und „Tabellenhöhe in Prozent konvertieren“ wandeln die aktuelle Breite oder
Höhe aller Spalten in der Tabelle (sowie die Breite der gesamten Tabelle) in einen Prozentsatz der Breite des
Dokumentfensters um.
Wenn Sie in einem Textfeld einen Wert eingegeben haben, drücken Sie die Tabulatortaste oder die Eingabetaste
(Windows) bzw. Return (Macintosh), um den Wert zu übernehmen.
Eigenschaften für Zellen, Zeilen und Spalten festlegen
Mit dem Eigenschafteninspektor können Sie die Zellen und Zeilen einer Tabelle bearbeiten.
1 Wählen Sie die gewünschte Spalte oder Zeile aus.
2 Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die folgenden Optionen fest:
Horiz Gibt die horizontale Ausrichtung des Inhalts einer Zelle, Zeile oder Spalte an. Sie können den Inhalt
linksbündig, rechtsbündig oder zentriert ausrichten oder angeben, dass die Standardausrichtung des Browsers
verwendet werden soll (normalerweise linksbündig für normale Zellen und zentriert für die Zellen der Kopfzeile).
Vert Gibt die vertikale Ausrichtung des Inhalts einer Zelle, Zeile oder Spalte an. Sie können den Inhalt oben, unten,
in der Mitte oder an der Grundlinie ausrichten oder angeben, dass die Standardausrichtung des Browsers verwendet
werden soll (normalerweise in der Mitte).
B / H
Geben die Breite und Höhe der ausgewählten Zellen in Pixel oder als Prozentsatz der gesamten Tabellenbreite
oder -höhe an. Wenn Sie Breite und Höhe als Prozentwert angeben möchten, tragen Sie hinter dem Wert ein
Prozentzeichen (%) ein. Lassen Sie das Feld leer (Standardeinstellung), wenn die Spaltenbreite oder -höhe entsprechend
dem Zellinhalt sowie der Breite und Höhe der anderen Spalten und Zeilen im Browser festgelegt werden soll.
In der Standardeinstellung wird im Browser die Zeilenhöhe und Spaltenbreite anhand des breitesten Bilds oder der
längsten Zeile einer Spalte ausgewählt. Daher wird eine Spalte beim Hinzufügen von Inhalt manchmal wesentlich
breiter als andere Spalten in der Tabelle.
Note: Sie können die Höhe als Prozentsatz der gesamten Tabellenhöhe angeben, die Zeile wird dann jedoch in Browsern
möglicherweise nicht mit dem festgelegten Prozentsatz angezeigt.
Hg Die Hintergrundfarbe einer Zelle, Spalte oder Zeile, die mit der Farbauswahl ausgewählt wurde.
Zellen verbinden Fasst Zellen, Zeilen oder Spalten zu einer Zelle zusammen. Zellen können nur verbunden werden,
wenn sie eine Reihe oder ein Rechteck bilden.
Zelle teilen Teilt eine Zelle in mindestens zwei Zellen. Sie können jeweils nur eine Zelle teilen. Wenn mehrere Zellen
ausgewählt sind, ist diese Schaltfläche deaktiviert.
Kein Umbruch Deaktiviert den Zeilenumbruch. Der gesamte Text einer Zelle wird somit in einer Zeile angezeigt.
Wenn „Kein Umbruch“ aktiviert ist, werden die Zellen so verbreitert, dass alle eingegebenen oder eingefügten Daten
in einer Zeile angezeigt werden. (Normalerweise werden Zellen zunächst entsprechend dem längsten Wort oder
breitesten Bild horizontal und anschließend entsprechend dem anderen Inhalt vertikal erweitert.)
200
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Header Formatiert die ausgewählten Zellen als Kopfzeilenzellen der Tabelle. Der Inhalt von Kopfzeilenzellen in
Tabellen ist in der Standardeinstellung fett und zentriert formatiert.
Die Angabe von Höhe und Breite kann entweder in Pixel oder in Prozent erfolgen. Dabei kann auch zwischen diesen
beiden Maßeinheiten umgerechnet werden.
Note: Wenn Sie Eigenschaften für eine Spalte definieren, ändert Dreamweaver für jede Zelle der Spalte die Attribute des
td-Tags. Wenn Sie jedoch für eine Zeile bestimmte Eigenschaften festlegen, ändert Dreamweaver die Attribute des tr-
Tags, statt die Attribute aller td-Tags in der Zeile zu ändern. Wenn Sie allen Zellen einer Zeile das gleiche Format
zuweisen, wird durch Anwenden des Formats auf das
tr-Tag gewährleistet, dass der HTML-Code präziser und besser
strukturiert ist.
3 Drücken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Macintosh), um die Werte zu
übernehmen.
Einfache Tabellenbearbeitung im erweiterten Tabellenmodus
Im erweiterten Tabellenmodus werden in allen Tabellen in einem Dokument vorübergehend die Zellauffüllung und
der Zellabstand aktiviert und die Tabellenrahmen werden zur einfacheren Bearbeitung verstärkt. In diesem Modus
können Sie Elemente in Tabellen auswählen und die Einfügemarke präzise positionieren.
Sie können eine Tabelle beispielsweise erweitern, um die Einfügemarke links oder rechts neben ein Bild setzen zu
können, ohne dabei versehentlich das Bild oder die Tabellenzelle auszuwählen.
A: Tabelle im Standardmodus B: Tabelle im erweiterten Tabellenmodus
Note: Nachdem Sie die gewünschten Elemente ausgewählt oder die Einfügemarke positioniert haben, sollten Sie wieder
den Standardmodus der Entwurfsansicht auswählen, um dann die Tabelle zu bearbeiten. Bei bestimmten visuellen
Arbeitsschritten, beispielsweise beim Ändern der Größe, werden im erweiterten Tabellenmodus nicht die erwarteten
Ergebnisse erzielt.
In den erweiterten Tabellenmodus wechseln
1 Wählen Sie in der Codeansicht „Ansicht“ > „Entwurf“ oder „Ansicht“ > „Code und Entwurf“ aus. (In der
Codeansicht können Sie nicht in den erweiterten Tabellenmodus wechseln).
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Tabellenmodus“ > „Erweiterter Tabellenmodus“ aus.
• Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf „Erweiterter Tabellenmodus“.
Im oberen Bereich des Dokumentfensters wird eine Leiste mit der Bezeichnung „Erweiterter Tabellenmodus“
angezeigt. In Dreamweaver werden die Zellauffüllung und der Zellabstand aktiviert sowie die Tabellenränder
vergrößert.
B
A
201
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Erweiterten Tabellenmodus beenden
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in der Leiste mit der Aufschrift „Erweiterter Tabellenmodus“ am oberen Rand des Dokumentfensters
auf „Beenden“.
• Wählen Sie „Ansicht“ > „Tabellenmodus“ > „Standardmodus“ aus.
• Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf „Standardmodus“.
Tabellen und Zellen formatieren
Sie können die Darstellung einer Tabelle ändern, indem Sie Eigenschaften für die Tabelle und die entsprechenden
Zellen festlegen oder ein vordefiniertes Layout auf die Tabelle anwenden. Beachten Sie beim Festlegen der
Eigenschaften für die Tabelle und die Zellen die folgende Rangfolge für die Formatierung: Zellen, Zeilen und Tabellen.
Text in Tabellenzellen wird auf die gleiche Weise formatiert wie Text außerhalb von Tabellen.
Format einer Tabelle, Zeile, Zelle oder Spalte ändern
1 Wählen Sie eine Tabelle, Zelle, Zeile oder Spalte aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf den Erweiterungspfeil in der rechten
unteren Ecke und nehmen Sie die gewünschten Änderungen an den Eigenschaften vor.
3 Ändern Sie die Eigenschaften nach Bedarf.
Um weitere Informationen zu den Optionen anzuzeigen, klicken Sie auf die Hilfeschaltfläche des
Eigenschafteninspektors.
Note: Wenn Sie Eigenschaften für eine Spalte definieren, ändert Dreamweaver für jede Zelle der Spalte die Attribute des
td-Tags. Wenn Sie bestimmte Eigenschaften jedoch für eine Zeile festlegen, ändert Dreamweaver die Attribute des tr-
Tags, statt die Attribute aller
td-Tags in der Zeile zu ändern. Wenn Sie allen Zellen einer Zeile das gleiche Format
zuweisen, wird durch Anwenden des Formats auf das
tr-Tag gewährleistet, dass der HTML-Code präziser und besser
strukturiert ist.
Eingabehilfen-Attributwerte für Tabellen in der Codeansicht hinzufügen oder bearbeiten
❖ Bearbeiten Sie die jeweiligen Attribute im Code.
Klicken Sie unten im Dokumentfenster im Tag-Selektor auf die Tabelle und wählen Sie das
<table>-Tag aus, um
Tags im Code schnell ausfindig zu machen.
Eingabehilfen-Attributwerte für Tabellen in der Entwurfsansicht hinzufügen oder
bearbeiten
• Markieren Sie zum Bearbeiten einer Tabellenbeschriftung die entsprechende Beschriftung und geben Sie eine neue
Beschriftung ein.
• Setzen Sie zum Bearbeiten der Ausrichtung der Beschriftung die Einfügemarke in die Tabellenbeschriftung, klicken
Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann die
Option „Tag-Code bearbeiten“ aus.
•
Wählen Sie zum Bearbeiten der Tabellenzusammenfassung die Tabelle aus, klicken Sie mit der rechten Maustaste
(Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann die Option „Tag-Code bearbeiten“ aus.
202
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Tabellen, Spalten und Zeilen vergrößern oder verkleinern
Tabellen vergrößern oder verkleinern
Sie können ganze Tabellen oder einzelne Zeilen und Spalten vergrößern oder verkleinern. Wenn Sie die Größe einer
ganzen Tabelle ändern, wird die Größe aller Zellen in der Tabelle proportional geändert. Wenn für Zellen einer Tabelle
feste Werte für Höhe und Breite definiert wurden, ändert sich durch Verkleinern oder Vergrößern der Tabelle nur die
angezeigte Größe der Zellen im Dokumentfenster, nicht jedoch ihre definierte Höhe und Breite.
Sie können die Größe einer Tabelle durch Ziehen einer der zugehörigen Auswahlziehpunkte ändern. In Dreamweaver
wird die Tabellenbreite zusammen mit einem Kopfzeilenmenü oben oder unten in der Tabelle angezeigt, wenn die
Tabelle ausgewählt wird oder sich die Einfügemarke in der Tabelle befindet.
Die im HTML-Code festgelegten Spaltenbreiten stimmen manchmal nicht mit den auf dem Bildschirm angezeigten
Breiten überein. Wenn dies der Fall ist, können Sie die Breiten angleichen. Tabellen- und Spaltenbreiten und
Kopfzeilenmenüs werden in Dreamweaver angezeigt, um das Layout von Tabellen zu vereinfachen. Sie können die
Breiten und Menüs nach Bedarf aktivieren oder deaktivieren.
Spalten und Zeilen vergrößern oder verkleinern
Sie können die Breite einer Spalte oder die Höhe einer Zeile im Eigenschafteninspektor ändern oder indem Sie den
Rand der Spalte oder Zeile ziehen. Wenn beim Ändern der Größe Probleme auftreten, können Sie die Spaltenbreite
oder Zeilenhöhe zurücksetzen und den Vorgang wiederholen.
Note: Breite und Höhe einer Zelle können in der Codeansicht auch direkt im HTML-Code geändert werden.
In Dreamweaver wird die Spaltenbreite zusammen mit dem Spaltenüberschriftmenü oben oder unten in den Spalten
angezeigt, wenn die Tabelle ausgewählt wird oder sich die Einfügemarke in der Tabelle befindet. Die
Spaltenüberschriftmenüs können nach Bedarf aktiviert oder deaktiviert werden.
More Help topics
“Mit Seitencode arbeiten” on page 317
Größe von Tabellen, Spalten und Zeilen ändern
Größe von Tabellen ändern
❖ Wählen Sie die Tabelle aus.
• Um die Breite der Tabelle zu ändern, ziehen Sie den rechten Auswahlziehpunkt.
• Um die Höhe der Tabelle zu ändern, ziehen Sie den unteren Auswahlziehpunkt.
• Um Höhe und Breite der Tabelle zu ändern, ziehen Sie den Auswahlziehpunkt an der rechten unteren Ecke.
Spaltenbreite ändern und Gesamtbreite der Tabelle beibehalten
❖ Ziehen Sie den rechten Rand der zu ändernden Spalte.
203
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Die Breite der angrenzenden Spalte ändert sich ebenfalls, d. h. im Endeffekt wird die Breite von zwei Spalten geändert.
Visuell wird dargestellt, wie die Spalten angepasst werden. Die Gesamtbreite der Tabelle ändert sich nicht.
Note: Wenn Sie bei Tabellen mit relativen (als Prozentualwert und nicht in Pixel definierten) Breiten den rechten Rand
der ganz rechts stehenden Spalte ziehen, wird die Breite der gesamten Tabelle geändert und alle Spalten werden
proportional verbreitert bzw. verschmälert.
Spaltenbreite ändern und Größe anderer Spalten beibehalten
❖ Ziehen Sie bei gedrückter Umschalttaste den Rand der jeweiligen Spalte.
Die Breite dieser Spalte ändert sich. Visuell wird dargestellt, wie die Spalten angepasst werden. Die Gesamtbreite der
Tabelle ändert sich und passt sich an die neue Spaltenbreite an.
Höhe von Zeilen ändern
❖ Ziehen Sie den unteren Rand der entsprechenden Zeile.
Spaltenbreiten im Code den sichtbaren Spaltenbreiten anpassen
1 Klicken Sie in eine Zelle.
2 Klicken Sie auf das Kopfzeilenmenü und wählen Sie dann die Option „Alle Breiten angleichen“ aus.
In Dreamweaver wird die im Code angegebene Breite der sichtbaren Spaltenbreite angepasst.
Alle in einer Tabelle definierten Breiten und Höhen löschen
1 Wählen Sie die Tabelle aus.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zellbreiten löschen“ oder „Modifizieren“ > „Tabelle“ > „Zellhöhen
löschen“ aus.
204
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
• Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche „Zeilenhöhen
löschen“ oder „Spaltenbreiten löschen“ .
• Klicken Sie auf das Kopfzeilenmenü und wählen Sie die Option „Alle Höhen löschen“ oder „Alle Breiten löschen“.
Festgelegte Breite von Spalten löschen
❖ Klicken Sie in die Spalte und dann auf das Spaltenüberschriftmenü und wählen Sie „Spaltenbreite löschen“ aus.
Tabellen- und Spaltenbreiten und Menüs aktivieren oder deaktivieren
1 Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Tabellenbreite“ aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in die Tabelle und
wählen Sie dann „Tabelle“ > „Tabellenbreite“ aus.
Zeilen und Spalten hinzufügen und entfernen
Sie können Zeilen und Spalten über „Modifizieren“ > „Tabelle“ oder über das Spaltenüberschriftmenü hinzufügen
und entfernen.
Durch Drücken der Tabulatortaste in der letzten Zelle einer Tabelle wird automatisch eine weitere Tabellenzeile
hinzugefügt.
Einzelne Zeilen oder Spalten hinzufügen
❖ Klicken Sie in eine Zelle und führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeile einfügen“ oder „Modifizieren“ > „Tabelle“ > „Spalte einfügen“ aus.
Eine Zeile wird oberhalb der Einfügemarke und eine Spalte wird links neben der Einfügemarke eingefügt.
• Klicken Sie auf das Spaltenüberschriftmenü und wählen Sie dann „Spalte links einfügen“ oder „Spalte rechts
einfügen“ aus.
Mehrere Zeilen oder Spalten einfügen
1 Klicken Sie in eine Zelle.
205
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
2 Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeilen oder Spalten einfügen“ aus, legen Sie die Optionen im Dialogfeld
fest und klicken Sie auf „OK“.
Einfügen Gibt an, ob Zeilen oder Spalten eingefügt werden.
Anzahl der Zeilen oder Anzahl der Spalten Die Anzahl der einzufügenden Zeilen bzw. Spalten.
Wo Gibt an, ob die neuen Zeilen oder Spalten vor oder nach der Zeile bzw. Spalte der ausgewählten Zelle eingefügt
werden.
Zeilen oder Spalten löschen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in der zu löschenden Zeile oder Spalte in eine Zelle und wählen Sie dann „Modifizieren“ > „Tabelle“ >
„Zeile löschen“ oder „Modifizieren“ > „Tabelle“ > „Spalte löschen“ aus.
• Wählen Sie eine vollständige Zeile oder Spalte und anschließend „Bearbeiten“ > „Löschen“ aus.
Zeilen oder Spalten mit dem Eigenschafteninspektor einfügen oder löschen
1 Wählen Sie die Tabelle aus.
2 Führen Sie im Eigenschafteninspektor einen der folgenden Schritte aus:
• Wenn Sie Zeilen einfügen oder löschen möchten, erhöhen oder verringern Sie den Wert in „Zeilen“.
• Wenn Sie Spalten einfügen oder löschen möchten, erhöhen oder verringern Sie den Wert in „Spalten“.
Note: In Dreamweaver wird keine Warnmeldung angezeigt, wenn Sie Zeilen oder Spalten löschen, die Daten enthalten.
Zellen verbinden und teilen
Über den Eigenschafteninspektor oder über die Befehle unter „Modifizieren“ > „Tabelle“ können Sie Zellen verbinden
oder teilen.
Mehrere Zellen einer Tabelle verbinden
1 Wählen Sie die Zellen in einer zusammenhängenden Reihe und in der Form eines Rechtecks aus.
In der folgenden Abbildung ist ein Rechteck mit Zellen ausgewählt. Die Zellen können daher verbunden werden.
In der folgenden Abbildung ist die Auswahl kein Rechteck von Zellen. Die Zellen können deshalb nicht verbunden
werden.
206
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zellen verbinden“ aus.
• Klicken Sie im erweiterten HTML-Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche
„Zellen verbinden“ .
Note: Wenn die Schaltfläche nicht angezeigt wird, klicken Sie auf den Erweiterungspfeil rechts unten im
Eigenschafteninspektor, sodass alle Optionen angezeigt werden.
Der Inhalt der einzelnen Zellen wird in die neue verbundene Zelle verschoben. Für die verbundene Zelle gelten die
Eigenschaften der Zelle, die zuerst ausgewählt wurde.
Zellen teilen
1 Klicken Sie in die Zelle und führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zelle teilen“ aus.
• Klicken Sie im erweiterten HTML-Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche
„Zellen teilen“ .
Note: Wenn die Schaltfläche nicht angezeigt wird, klicken Sie auf den Erweiterungspfeil rechts unten im
Eigenschafteninspektor, sodass alle Optionen angezeigt werden.
2 Geben Sie im Dialogfeld „Zelle teilen“ an, wie die Zelle geteilt werden soll:
Zelle teilen in Gibt an, ob die Zelle in Zeilen oder Spalten geteilt wird.
Anzahl der Zeilen/Anzahl der Spalten Gibt an, in wie viele Zeilen oder Spalten die Zelle geteilt wird.
Anzahl der Zeilen oder Spalten in einer Zelle erhöhen oder verringern
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeilenraum vergrößern“ oder „Modifizieren“ > „Tabelle“ >
„Spaltenraum vergrößern“ aus.
• Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeilenraum verkleinern“ oder „Modifizieren“ > „Tabelle“ >
„Spaltenraum verkleinern“ aus.
Zellen kopieren, einfügen und löschen
Sie können eine einzelne Tabellenzelle oder mehrere Zellen gleichzeitig kopieren, einfügen oder löschen, ohne dass die
Formatierung der Zelle geändert wird.
Die Zellen können entweder an der Einfügemarke oder anstelle eines ausgewählten Bereichs in eine vorhandene
Tabelle eingefügt werden. Wenn Sie mehrere Tabellenzellen einfügen möchten, muss der Inhalt der Zwischenablage
mit der Struktur der Tabelle oder der ausgewählten Zellen übereinstimmen, in die die Zellen eingefügt werden sollen.
Tabellenzellen ausschneiden oder kopieren
1
Wählen Sie eine Zelle oder mehrere Zellen in einer zusammenhängenden Reihe und in der Form eines Rechtecks aus.
207
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
In der folgenden Abbildung ist ein Rechteck mit Zellen ausgewählt. Die Zellen können daher ausgeschnitten oder
kopiert werden.
In der folgenden Abbildung ist die Auswahl kein Rechteck von Zellen. Die Zellen können deshalb nicht ausgeschnitten
oder kopiert werden.
2 Wählen Sie „Bearbeiten“ > „Ausschneiden“ oder „Bearbeiten“ > „Kopieren“ aus.
Note: Wenn Sie eine ganze Zeile oder Spalte und „Bearbeiten“ > „Ausschneiden“ ausgewählt haben, wird die ganze Zeile
oder Spalte (und nicht nur der Inhalt der Zellen) aus der Tabelle entfernt.
Tabellenzellen einfügen
1 Wählen Sie die Stelle aus, an der die Zellen eingefügt werden sollen:
• Um vorhandene Zellen durch die eingefügten Zellen zu ersetzen, wählen Sie eine Gruppe vorhandener Zellen aus,
die das gleiche Layout haben wie die Zellen in der Zwischenablage. (Wenn Sie beispielsweise einen Block mit 3 x 2
Zellen kopiert haben, können Sie einen anderen Block mit 3 x 2 Zellen auswählen, der durch Einfügen ersetzt wird.)
• Um eine ganze Zeile mit Zellen über einer bestimmten Zelle einzufügen, klicken Sie in die entsprechende Zelle.
• Um eine ganze Spalte mit Zellen links neben einer bestimmten Zelle einzufügen, klicken Sie in die entsprechende
Zelle.
Note: Wenn sich in der Zwischenablage keine ganze Tabellenzeile oder -spalte befindet und Sie in eine Zelle klicken und
dann die Zellen aus der Zwischenablage einfügen, werden möglicherweise die Zelle, in die Sie geklickt haben, und deren
Nachbarzellen (je nach Position der Zelle in der Tabelle) durch die eingefügten Zellen ersetzt.
• Um mit den eingefügten Zellen eine neue Tabelle zu erstellen, positionieren Sie die Einfügemarke außerhalb der
Tabelle.
2 Wählen Sie „Bearbeiten“ > „Einfügen“ aus.
Wenn Sie ganze Zeilen oder Spalten in eine vorhandene Tabelle einfügen, werden diese Zeilen oder Spalten zur Tabelle
hinzugefügt. Wenn Sie eine einzelne Zelle einfügen, wird der Inhalt der ausgewählten Zelle ersetzt. Wenn Sie den
Inhalt der Zwischenablage außerhalb einer Tabelle einfügen, wird mit den Zeilen, Spalten oder Zellen eine neue
Tabelle definiert.
Zellinhalt entfernen und Zellen dabei nicht ändern
1 Wählen Sie eine oder mehrere Zellen aus.
208
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Note: Vergewissern Sie sich, dass die Auswahl nicht nur aus ganzen Zeilen oder Spalten besteht.
2 Wählen Sie „Bearbeiten“ > „Löschen“ aus oder drücken Sie die Entf-Taste.
Note: Wenn nur ganze Zeilen oder Spalten ausgewählt sind und Sie „Bearbeiten“ > „Löschen“ auswählen oder die Entf-
Taste drücken, werden die gesamten Zeilen oder Spalten und nicht nur deren Inhalt gelöscht.
Zeilen oder Spalten mit verbundenen Zellen löschen
1 Wählen Sie die Zeile oder Spalte aus.
2 Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeile löschen“ oder „Modifizieren“ > „Tabelle“ > „Spalte löschen“ aus.
Tabellen verschachteln
Eine verschachtelte Tabelle ist eine Tabelle in einer Zelle einer anderen Tabelle. Sie können eine verschachtelte Tabelle
wie jede andere Tabelle formatieren. Die Breite wird jedoch durch die Breite der Zelle begrenzt, in der sich die Tabelle
befindet.
1 Klicken Sie in eine Zelle der vorhandenen Tabelle.
2 Wählen Sie „Einfügen“ > „Tabelle“ aus, legen Sie die Optionen unter „Tabelle einfügen“ fest und klicken Sie auf
„OK“.
Tabellen sortieren
Sie können die Zeilen einer Tabelle nach dem Inhalt einer einzelnen Spalte sortieren. Sie können jedoch auch
komplexere Sortiervorgänge durchführen und die Tabelle nach dem Inhalt zweier Spalten sortieren.
Sie können keine Tabellen sortieren, die die Attribute
colspan oder rowspan enthalten, d. h. Tabellen mit
verbundenen Zellen.
1 Wählen Sie die Tabelle aus oder klicken Sie in eine beliebige Zelle.
2 Wählen Sie „Befehle“ > „Tabelle sortieren“ aus, legen Sie die Optionen im Dialogfeld fest und klicken Sie auf „OK“.
Sortieren nach Gibt an, nach den Werten welcher Spalte die Zeilen der Tabelle sortiert werden.
Reihenfolge Legt fest, ob die Spalte alphabetisch oder numerisch und in aufsteigender (A bis Z, von der kleinsten zur
größten Zahl) oder absteigender Reihenfolge sortiert wird.
Wenn es sich beim Inhalt einer Spalte um Zahlen handelt, wählen Sie „Numerisch“ aus. Wird eine alphabetische
Sortierung auf eine Liste mit ein- und zweistelligen Zahlen angewendet, werden die Zahlen so sortiert, als wären sie
Wörter (z. B. 3, 30, 10, 20, 2) und nicht Zahlen (z. B.1, 2, 3, 10, 20, 30).
Dann nach/Reihenfolge Legt die Reihenfolge eines zweiten Sortiervorgangs in einer anderen Spalte fest. Geben Sie die
Spalte des zweiten Sortiervorgangs im Popupmenü „Dann nach“ an und die entsprechende Reihenfolge in den
einzelnen Popupmenüs für „Reihenfolge“.
Erste Zeile beim Sortieren berücksichtigen Gibt an, dass die erste Zeile der Tabelle beim Sortieren berücksichtigt wird.
Wählen Sie diese Option nicht aus, wenn es sich bei der ersten Zeile um eine Überschriftenzeile handelt, die nicht
verschoben werden soll.
Kopfzeilen sortieren Legt fest, dass alle Zeilen im Abschnitt thead der Tabelle (soweit vorhanden) nach denselben
Kriterien sortiert werden wie die Zeilen des Hauptteils. (Beachten Sie, dass die
thead-Zeilen im Abschnitt thead
verbleiben und auch nach der Sortierung am Anfang der Tabelle angezeigt werden.) Weitere Informationen zum
thead-Tag finden Sie im Bedienfeld „Referenz“ (wählen Sie dazu „Hilfe“ > „Referenz“).
209
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Fußzeilen sortieren Legt fest, dass alle Zeilen im Abschnitt tfoot der Tabelle (soweit vorhanden) nach denselben
Kriterien sortiert werden wie die Zeilen des Hauptteils. (Beachten Sie, dass die
tfoot-Zeilen im Abschnitt tfoot
verbleiben und auch nach der Sortierung am Anfang der Tabelle angezeigt werden.) Weitere Informationen zum
tfoot-Tag finden Sie im Bedienfeld „Referenz“ (wählen Sie dazu „Hilfe“ > „Referenz“).
Alle Zeilenfarben nach dem Sortieren beibehalten Gibt an, dass die Attribute der Tabellenzeilen (z. B. Zeilenfarbe)
nach der Sortierung dem gleichen Inhalt zugewiesen sind. Wählen Sie diese Option nicht aus, wenn Tabellenzeilen
abwechselnd in zwei Farben formatiert sind. Dadurch wird sichergestellt, dass der Farbwechsel zwischen den Zeilen
in der sortierten Tabelle erhalten bleibt. Wenn die Zeilenattribute jeweils für den Inhalt einzelner Zeilen gelten, wählen
Sie diese Option aus, um sicherzustellen, dass diese Attribute in der sortierten Tabelle mit den entsprechenden Zeilen
verknüpft bleiben.
Frames verwenden
Funktionsweise von Frames und Framesets
Ein Frame ist ein Bereich eines Browserfensters, in dem ein HTML-Dokument unabhängig von den restlichen
Fensterinhalten angezeigt werden kann. Frames bieten die Möglichkeit, ein Browserfenster in mehrere Bereiche zu
unterteilen und in jedem Bereich ein anderes HTML-Dokument anzuzeigen. Am häufigsten werden Frames so
verwendet, dass in einem Frame ein Dokument mit Navigationssteuerelementen angezeigt wird, während in einem
anderen Frame ein Dokument mit Inhalten angezeigt wird.
Ein Frameset ist eine HTML-Datei, die das Layout und die Eigenschaften einer Gruppe von Frames definiert, darunter
die Anzahl der Frames, die Größe und Position der Frames sowie die URL der Seite, die anfänglich in den einzelnen
Frames angezeigt wird. Das Frameset selbst enthält keinen HTML-Inhalt, der im Browser zu sehen ist. Eine Ausnahme
bildet lediglich der Abschnitt
noframes. Die Frameset-Datei liefert dem Browser lediglich Informationen darüber, wie
die einzelnen Frames angezeigt werden und welche Dokumente sie enthalten sollen.
Wenn Sie ein Frameset in einem Browser anzeigen möchten, geben Sie die URL der Frameset-Datei ein. Der Browser
öffnet dann die relevanten Dokumente, die in den Frames angezeigt werden. Die Frameset-Datei einer Site hat häufig
den Namen index.html, sodass sie automatisch angezeigt wird, wenn der Besucher keinen speziellen Dateinamen
angibt.
210
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Im folgenden Beispiel ist ein Frame-Layout mit drei Frames dargestellt: ein schmaler Frame an der Seite mit einer
Navigationsleiste, ein Frame im oberen Bereich mit dem Logo und dem Titel der Website und ein großer Frame mit
dem Hauptinhalt, der die restliche Seite ausfüllt. In jedem dieser Frames wird jeweils ein separates HTML-Dokument
angezeigt.
In diesem Beispiel ändert sich das Dokument im oberen Frame nie, wenn der Besucher auf der Site navigiert. Die
Navigationsleiste im seitlichen Frame enthält Hyperlinks. Wenn Sie auf einen der Hyperlinks klicken, ändert sich der
Inhalt im Haupt-Frame, der Inhalt des seitlichen Frames bleibt jedoch immer gleich. Im Haupt-Frame rechts wird das
jeweilige Dokument angezeigt, auf dessen Hyperlink der Besucher geklickt hat.
Ein Frame ist keine Datei. Das in einem Frame angezeigte Dokument wirkt wie ein fester Bestandteil des Frames. Dies
ist jedoch nicht der Fall. Der Frame ist der Rahmen für das Dokument.
Note: Der Begriff „Seite“ bezieht sich entweder auf ein einzelnes HTML-Dokument oder auf den gesamten aktuellen
Inhalt eines Browserfensters zu einem bestimmten Zeitpunkt, auch wenn mehrere HTML-Dokumente gleichzeitig
angezeigt werden. So bezieht sich z. B. der Ausdruck „eine Seite mit Frames“ normalerweise auf ein Frameset sowie auf
die Dokumente, die anfänglich in diesen Frames angezeigt werden.
Eine Site, die in einem Browser als einzelne Seite mit drei Frames angezeigt wird, besteht in Wirklichkeit aus
mindestens vier HTML-Dokumenten: aus der Frameset-Datei und aus den drei Dokumenten, die den anfangs in den
Frames angezeigten Inhalt enthalten. Wenn Sie in Dreamweaver eine Seite mit Framesets gestalten, müssen Sie alle
vier Dateien speichern, damit die Seite im Browser richtig dargestellt wird.
Weitere umfangreiche Informationen zu Frames finden Sie auf der Website von Thierry Koblentz unter
www.tjkdesign.com/articles/frames/.
Entscheidung für oder gegen Frames
Adobe rät von der Verwendung von Frames für das Layout von Webseiten ab. Die Verwendung von Frames hat unter
anderem folgende Nachteile:
• Eine präzise grafische Ausrichtung der Elemente in verschiedenen Frames kann schwierig sein.
211
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
• Das Testen der Navigation kann zeitaufwendig sein.
• Die URLs der einzelnen Frameseiten werden im Browser nicht angezeigt, sodass es für einen Besucher oft schwierig
ist, eine bestimmte Seite als Lesezeichen zu speichern (außer Sie sehen einen Servercode vor, mit dem der Besucher
die Frameversion einer bestimmten Seite laden kann).
Eine umfassende Abhandlung dazu, warum Frames nicht verwendet werden sollten, finden Sie in der Erläuterung von
Gary White unter http://apptools.com/rants/framesevil.php.
Frames werden, wenn Sie sie dennoch verwenden sollten, am häufigsten zur Navigation eingesetzt. Ein Frameset
besteht häufig aus einem Frame, der die Navigationsleiste enthält, und einem anderen Frame zum Anzeigen der Seiten
mit dem Hauptinhalt. Diese Verwendung von Frames bringt mehrere Vorteile mit sich:
• Der Browser des Besuchers muss die Navigationsgrafiken nicht bei jeder Seite neu laden.
• Jeder Frame verfügt über eine eigene Bildlaufleiste (wenn der Inhalt zu groß für das Fenster ist), sodass der
Besucher jeweils in den einzelnen Frames einen Bildlauf durchführen kann. Wenn sich die Navigationsleiste in
einem separaten Frame befindet, muss ein Besucher, der beispielsweise in einem Frame auf einer langen Seite einen
Bildlauf bis zum Ende durchführt, keinen Bildlauf zurück zum Anfang der Seite durchführen, um die
Navigationsleiste verwenden zu können.
In vielen Fällen können Sie mit Webseiten ohne Frames die gleiche Wirkung erzielen wie mit einem Frameset. Wenn
im linken Bereich einer Seite beispielsweise eine Navigationsleiste angezeigt werden soll, können Sie hierzu entweder
Frames verwenden oder die Navigationsleiste stattdessen auf jeder Seite der Website einfügen. (Mit Dreamweaver
können Sie mehrere Seiten mit dem gleichen Layout erstellen.) Das folgende Bild zeigt ein Seitendesign, das vom
Layout her wie ein Frame aussieht, obwohl keine Frames verwendet werden.
In schlecht entworfenen Sites werden Frames unnötigerweise verwendet, z. B. ein Frameset, mit dem der Inhalt von
Navigations-Frames bei jedem Klicken auf eine Navigationsschaltfläche neu geladen wird. Bei Sites, auf denen Frames
sinnvoll eingesetzt werden (z. B. um Navigationssteuerelemente statisch in einem Frame anzuzeigen, während sich der
Inhalt eines anderen Frames ändern kann), bietet die Verwendung von Frames durchaus Vorteile.
212
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Nicht alle Browser bieten eine gute Unterstützung von Frames und das Navigieren in Frames kann für Besucher mit
Behinderungen problematisch sein. Wenn Sie also Frames verwenden, stellen Sie im Frameset auch stets einen
noframes-Abschnitt für Besucher bereit, die keine Frames anzeigen können. Darüber hinaus können Sie explizit
einen Hyperlink zu einer Version der Site ohne Frames angeben.
Weitere umfangreiche Informationen zu Frames finden Sie auf der Website von Thierry Koblentz unter
www.tjkdesign.com/articles/frames/.
Verschachtelte Framesets
Ein Frameset, das sich innerhalb eines anderen Framesets befindet, wird als verschachteltes Frameset bezeichnet. Eine
einzelne Frameset-Datei kann mehrere verschachtelte Framesets enthalten. Bei den meisten Webseiten mit Frames
kommen verschachtelte Frames zum Einsatz und auch die meisten in Dreamweaver vordefinierten Framesets sind
verschachtelt. Jede Gruppe von Frames, deren einzelne „Spalten“ oder „Zeilen“ aus unterschiedlich vielen Frames
bestehen, basiert auf einem verschachtelten Frameset.
So besteht zum Beispiel das üblichste Frame-Layout aus einem Frame im oberen Bereich (in dem das Firmenlogo
angezeigt wird) und zwei Frames im unteren Bereich (einem Navigations-Frame und einem Inhalts-Frame). Dieses
Layout erfordert ein verschachteltes Frameset: ein zweizeiliges Frameset mit einem in der zweiten Zeile
verschachtelten zweispaltigen Frameset.
A: Haupt-Frameset B: Menü-Frame und Inhalts-Frame sind im Haupt-Frameset verschachtelt.
In Dreamweaver werden die erforderlichen verschachtelten Framesets erstellt. Wenn Sie die Teilungsoptionen für
Frames von Dreamweaver verwenden, müssen Sie sich keine Gedanken über die Einzelheiten der verschachtelten und
nicht verschachtelten Frames machen.
Es gibt zwei Möglichkeiten, Framesets in HTML zu verschachteln: Das innere Frameset kann entweder in derselben
Datei definiert werden wie das externe Frameset oder in einer separaten Datei. Bei allen in Dreamweaver
vordefinierten Framesets sind alle Framesets in ein und derselben Datei definiert.
Beide Arten der Verschachtelung führen optisch zum gleichen Ergebnis. Ohne den Code zu lesen, ist es schwer zu
erkennen, um welche Art der Verschachtelung es sich handelt. In Dreamweaver kommt eine externe Frameset-Datei
am ehesten dann zu Einsatz, wenn Sie mit dem Befehl „Öffnen in Frame“ eine Frameset-Datei innerhalb eines Frames
öffnen. Dies führt möglicherweise zu Problemen beim Festlegen von Hyperlink-Zielen. Im Allgemeinen ist es am
einfachsten, alle Framesets in einer einzigen Datei zu definieren.
A
B
213
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Framesets im Dokumentfenster verwenden
Dreamweaver bietet die Möglichkeit, alle Dokumente, die mit einem Frameset verknüpft sind, in einem einzigen
Dokumentfenster anzuzeigen und zu bearbeiten. Auf diese Weise können Sie schon beim Bearbeiten ungefähr
erkennen, wie die Frame-Seiten in einem Browser angezeigt werden. Einige Aspekte dieser Methode sind jedoch unter
Umständen etwas gewöhnungsbedürftig. Dazu zählt insbesondere, dass in jedem Frame ein separates HTML-
Dokument angezeigt wird. Selbst wenn die Dokumente keinen Inhalt haben, müssen Sie sie zunächst speichern, um
sie in der Vorschau anzeigen zu können (da das Frameset nur präzise in der Vorschau angezeigt werden kann, wenn
es in jedem Frame die URL für das anzuzeigende Dokument enthält).
Führen Sie die folgenden allgemeinen Schritte aus, um sicherzustellen, dass ein Frameset in Browsern korrekt
angezeigt wird:
1 Erstellen Sie das Frameset und geben Sie für jeden Frame ein Dokument an.
2 Speichern Sie jede Datei, die in einem Frame angezeigt wird. Beachten Sie, dass in jedem Frame ein separates
HTML-Dokument angezeigt wird und dass jedes dieser Dokumente zusammen mit der Frameset-Datei
gespeichert werden muss.
3 Legen Sie die Eigenschaften für die einzelnen Frames und das Frameset fest (z. B. den Namen für jeden Frame oder
die Optionen zum Durchführen des Bildlaufs).
4 Legen Sie im Eigenschafteninspektor die Eigenschaft „Ziel“ für alle Hyperlinks fest, damit die entsprechenden
verknüpften Inhalte im jeweils richtigen Bereich angezeigt werden.
Frames und Framesets erstellen
Es gibt zwei Möglichkeiten, in Dreamweaver ein Frameset zu erstellen: Sie können ein vordefiniertes Frameset
auswählen oder selbst ein Frameset erstellen.
Wenn Sie ein vordefiniertes Frameset auswählen, werden alle Framesets und Frames eingerichtet, die für das Layout
erforderlich sind. Dies ist die einfachste Methode, um schnell und problemlos ein Layout mit Frames zu erstellen. Ein
vordefiniertes Frameset können Sie nur in der Entwurfsansicht des Dokumentfensters einfügen.
Sie können in Dreamweaver darüber hinaus ein benutzerdefiniertes Frameset erstellen, indem Sie das
Dokumentfenster unterteilen.
Blenden Sie vor der Erstellung eines Framesets oder der Verwendung von Frames in der Entwurfsansicht des
Dokumentfensters die Frame-Rahmen ein, indem Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Frame-Rahmen“
auswählen.
More Help topics
“Dreamweaver-Eingabehilfen” on page 743
Vordefinierte Framesets erstellen und vorhandene Dokumente in Frames anzeigen
1 Setzen Sie die Einfügemarke in ein Dokument und führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „HTML“ > „Frames“ und dann ein vordefiniertes Frameset aus.
• Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf den Dropdownpfeil der Schaltfläche
„Frames“ und wählen Sie ein vordefiniertes Frameset aus.
Die Frameset-Symbole ermöglichen visuelle Darstellungen aller auf das aktuelle Dokument angewendeten Framesets.
Der blaue Bereich eines Frameset-Symbols entspricht dabei dem aktuellen Dokument. Die weißen Bereiche stehen für
Frames, in denen andere Dokumente angezeigt werden.
214
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
2 Wenn Dreamweaver so eingerichtet ist, dass Sie bei Frames zur Eingabe von Eingabehilfen-Attributen aufgefordert
werden, wählen Sie im Popupmenü einen Frame aus, geben Sie einen Namen für den Frame ein und klicken Sie auf
„OK“. (Bei Benutzern, die Bildschirmlesegeräte verwenden, wird der Name vom Bildschirmlesegerät vorgelesen,
wenn dieses einen Frame auf der Seite erkennt.)
Note: Wenn Sie auf „OK“ klicken, ohne einen neuen Namen einzugeben, wird dem Frame in Dreamweaver ein Name
zugewiesen, der dessen Position im Frameset entspricht (z. B. linker Frame oder rechter Frame).
Note: Wenn Sie auf „Abbrechen“ klicken, wird das Frameset im Dokument angezeigt, ohne dass ihm jedoch in
Dreamweaver Eingabehilfen-Tags oder -Attribute zugewiesen werden.
Wählen Sie „Fenster“ > „Frames“ aus, um ein Diagramm der zu benennenden Frames anzuzeigen.
Leere vordefinierte Framesets erstellen
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Framesets“ aus.
3 Wählen Sie in der Spalte „Beispielordner“ den Ordner „Frameset“ aus.
4 Wählen Sie in der Spalte „Beispielseite“ ein Frameset aus und klicken Sie auf „Erstellen“.
5 Wenn Sie unter „Voreinstellungen“ die Eingabehilfen-Attribute für Frames aktiviert haben, wird das Dialogfeld
„Eingabehilfen-Attribute für Frame-Tag“ angezeigt. Legen Sie in diesem Dialogfeld die Optionen für jeden Frame
fest und klicken Sie auf „OK“.
Note: Wenn Sie auf „Abbrechen“ klicken, wird das Frameset im Dokument angezeigt, ohne dass ihm jedoch in
Dreamweaver Eingabehilfen-Tags oder -Attribute zugewiesen werden.
Framesets erstellen
❖ Wählen Sie „Modifizieren“ > „Frameset“ und anschließend im Untermenü eine Teilungsoption (z. B. „Frame links
teilen“ oder „Frame rechts teilen“) aus.
Dreamweaver teilt das Fenster in Frames. Wenn Sie ein vorhandenes Dokument geöffnet haben, wird es in einem der
Frames angezeigt.
Frames in kleinere Frames teilen
•
Um den Frame an der Einfügemarke zu teilen, wählen Sie unter „Modifizieren“ > „Frameset“ eine Teilungsoption aus.
• Um einen Frame oder ein Frameset vertikal oder horizontal zu teilen, ziehen Sie einen Frame-Rahmen vom Rand
zur Mitte der Entwurfsansicht.
• Um einen Frame mit einem Frame-Rahmen zu teilen, der sich nicht am Rand der Entwurfsansicht befindet, ziehen
Sie bei gedrückter Alt-Taste (Windows) bzw. bei gedrückter Wahltaste (Macintosh) einen Frame-Rahmen.
• Um einen Frame in vier Frames zu unterteilen, ziehen Sie einen Frame-Rahmen von einer Ecke der
Entwurfsansicht zur Mitte des Frames.
Wenn Sie drei Frames erstellen möchten, erstellen Sie zunächst zwei Frames und teilen Sie dann einen dieser Frames.
Zwei nebeneinander liegende Frames zu verbinden ist nicht einfach und erfordert eine Änderung des Frameset-Codes.
Daher ist es schwieriger, vier Frames zu drei Frames zu verbinden als zwei Frames in drei Frames zu ändern.
Frames löschen
❖ Ziehen Sie einen Frame-Rahmen auf eine Stelle außerhalb der Seite oder auf den Rahmen des übergeordneten
Frames.
215
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Wenn der zu löschende Frame ein Dokument mit nicht gespeichertem Inhalt enthält, werden Sie von Dreamweaver
aufgefordert, das Dokument zu speichern.
Note: Das Löschen eines ganzen Framesets ist durch Ziehen des Rahmens nicht möglich. Wenn Sie ein Frameset löschen
möchten, schließen Sie das Dokumentfenster, in dem es angezeigt wird. Wenn die Frameset-Datei gespeichert wurde,
löschen Sie diese Datei.
Größe von Frames ändern
• Die ungefähre Größe von Frames können Sie durch Ziehen des Frame-Rahmens in der Entwurfsansicht des
Dokumentfensters festlegen.
• Im Eigenschafteninspektor können Sie genaue Größen angeben sowie den Bereich der Zeilen oder Spalten für
Frames im Browser für den Fall festlegen, dass die Frames im Browserfenster nicht vollständig angezeigt werden
können.
Frames und Framesets auswählen
Wenn Sie Änderungen an den Eigenschaften eines Frames oder Framesets vornehmen möchten, wählen Sie zunächst
den jeweiligen Frame oder das jeweilige Frameset aus. Sie können Frames und Framesets im Dokumentfenster oder
im Bedienfeld „Frames“ auswählen.
Im Bedienfeld „Frames“ sind die Frames in einem Frameset visuell dargestellt. Im Bedienfeld „Frames“ wird die
Hierarchie der Frameset-Struktur übersichtlicher dargestellt als im Dokumentfenster. Die einzelnen Framesets sind in
diesem Bedienfeld durch eine sehr dicke Rahmenlinie gekennzeichnet, während die einzelnen Frames an einer dünnen
grauen Rahmenlinie und einem entsprechenden Frame-Namen zu erkennen sind.
Wenn ein Frame in der Entwurfsansicht des Dokumentfensters ausgewählt ist, wird sein Rahmen von einer
gepunkteten Linie umgeben. Ist ein Frameset ausgewählt, werden die Rahmen aller Frames innerhalb des Framesets
von einer gepunkteten Linie umgeben.
216
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Note: Durch das Platzieren der Einfügemarke in einem Dokument, das in einem Frame angezeigt wird, wird der Frame
nicht ausgewählt. Für verschiedene Aufgaben (z. B. für das Festlegen der Frame-Eigenschaften) müssen Sie jedoch den
jeweiligen Frame erst auswählen.
Frames oder Framesets im Bedienfeld „Frames“ auswählen
1 Wählen Sie „Fenster“ > „Frames“ aus.
2 Führen Sie im Bedienfeld „Frames“ einen der folgenden Schritte aus:
• Wenn Sie einen Frame auswählen möchten, klicken Sie auf den entsprechenden Frame. (Um den Frame wird im
Bedienfeld „Frames“ und in der Entwurfsansicht des Dokumentfensters ein Auswahlrahmen angezeigt.)
• Wenn Sie ein Frameset auswählen möchten, klicken Sie auf den Rahmen des Framesets.
Frames oder Framesets im Dokumentfenster auswählen
• Klicken Sie in der Entwurfsansicht bei gedrückter Umschalt- und Alt-Taste (Windows) bzw. bei gedrückter
Umschalt- und Wahltaste (Macintosh) in einen Frame, um diesen auszuwählen.
• Klicken Sie in der Entwurfsansicht auf eine der inneren Frame-Rahmenlinien des Framesets, um dieses
auszuwählen. (Hierzu müssen die Frame-Rahmen angezeigt werden. Wählen Sie gegebenenfalls „Ansicht“ >
„Visuelle Hilfsmittel“ > „Frame-Rahmen“ aus, um sie einzublenden.)
Note: Im Allgemeinen kann ein Frameset im Bedienfeld „Frames“ leichter ausgewählt werden als im Dokumentfenster.
Weitere Informationen finden Sie in den oben stehenden Themen.
Andere Frames oder Framesets auswählen
• Wenn Sie den nächsten oder vorherigen Frame bzw. das nächste oder vorherige Frameset auf derselben
Hierarchieebene wie die aktuelle Auswahl auswählen möchten, drücken Sie Alt+Pfeil-nach-links oder Alt+Pfeil-
nach-rechts (Windows) bzw. Befehl+Pfeil-nach-links oder Befehl+Pfeil-nach-rechts (Macintosh). Mit diesen
Tasten gelangen Sie von einem Frame bzw. Frameset zum nächsten, und zwar in der Reihenfolge ihrer Definition
in der Frameset-Datei.
• Um ein übergeordnetes Frameset auszuwählen (das Frameset, das die aktuelle Auswahl enthält), drücken Sie
Alt+Pfeil-nach-oben (Windows) bzw. Befehl+Pfeil-nach-oben (Macintosh).
• Zum Auswählen des ersten untergeordneten Frames oder Framesets im aktuellen Frameset (d. h. in der
Reihenfolge ihrer Definition in der Frameset-Datei) drücken Sie Alt+Pfeil-nach-unten (Windows) bzw.
Befehl+Pfeil-nach-unten (Macintosh).
Dokumente in Frames öffnen
Sie können den anfänglichen Inhalt eines Frames angeben, indem Sie einem leeren Dokument in einem Frame neue
Inhalte hinzufügen oder indem Sie in einem Frame ein vorhandenes Dokument öffnen.
1 Setzen Sie die Einfügemarke in einen Frame.
2 Wählen Sie „Datei“ > „Öffnen in Frame“ aus.
3 Wählen Sie ein Dokument aus, das im Frame geöffnet werden soll, und klicken Sie auf „OK“ (Windows) bzw.
„Wählen“ (Macintosh).
4 (Optional) Um dieses Dokument als Standarddokument festzulegen, das beim Öffnen des Framesets im Browser
im Frame angezeigt wird, speichern Sie das Frameset.
217
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Frame-Dateien und Frameset-Dateien speichern
Um ein Frameset in einem Browser in der Vorschau anzeigen zu können, müssen Sie die Frameset-Datei sowie alle
Dokumente speichern, die in den Frames angezeigt werden. Sie können jede Frameset-Datei und jedes Dokument
einzeln speichern oder gleichzeitig die Frameset-Datei und alle Dokumente speichern, die in Frames angezeigt
werden.
Note: Wenn Sie ein Frameset mit den visuellen Hilfsmitteln von Dreamweaver erstellen, erhält jedes neue Dokument, das
in einem Frame angezeigt wird, einen Standarddateinamen. Die erste Frameset-Datei erhält beispielsweise den Namen
„UnbenanntFrameset-1“ und das erste Dokument in einem Frame den Namen „UnbenanntFrame-1“.
Frameset-Dateien speichern
❖ Wählen Sie das Frameset im Bedienfeld „Frames“ oder im Dokumentfenster aus.
• Um die Frameset-Datei zu speichern, wählen Sie „Datei“ > „Frameset speichern“ aus.
• Um die Frameset-Datei als neue Datei zu speichern, wählen Sie „Datei“ > „Frameset speichern unter“ aus.
Note: Wenn die Frameset-Datei noch nicht gespeichert wurde, sind diese beiden Befehle identisch.
In Frames angezeigte Dokumente speichern
❖ Klicken Sie in den Frame und wählen Sie „Datei“ > „Frame oder Datei speichern“ > „Frame speichern unter“ aus.
Alle mit einem Frameset verknüpften Dateien speichern
❖ Wählen Sie „Datei“ > „Alle Frames speichern“ aus.
Hierdurch werden alle im Frameset geöffneten Dokumente gespeichert, darunter auch die Frameset-Datei und alle
Frame-Dokumente. Wenn die Frameset-Datei noch nicht gespeichert wurde, wird in der Entwurfsansicht um das
Frameset (oder den nicht gespeicherten Frame) ein breiter Rahmen angezeigt. Sie können dann einen Dateinamen
auswählen.
Note: Wenn Sie ein Dokument mit dem Befehl „Datei“ > „Öffnen in Frame“ in einem Frame geöffnet haben und dann
das Frameset speichern, wird das geöffnete Dokument zum Standarddokument, das in diesem Frame angezeigt wird.
Wenn Sie nicht möchten, dass dieses Dokument als Standarddokument behandelt wird, verzichten Sie auf das Speichern
der Frameset-Datei.
Eigenschaften und Attribute für Frames anzeigen und festlegen
Im Eigenschafteninspektor können Sie die meisten Eigenschaften für Frames anzeigen und festlegen, darunter
Rahmen, Ränder und Bildlaufleisten. Wenn Sie eine Frame-Eigenschaft festlegen, wird dadurch die entsprechende
Eigenschaft des Framesets überschrieben.
Außerdem kann es sinnvoll sein, Frame-Attribute einzurichten, wie z. B. das Attribut „title“ (nicht zu verwechseln mit
dem Attribut „name“), sodass Sie leichter darauf zugreifen können. Sie können die Eingabehilfen-Entwurfsoption für
Frames aktivieren, um bei der Erstellung von Frames Attribute anzugeben. Sie können Attribute aber auch nach dem
Einfügen eines Frames festlegen. Wenn Sie Eingabehilfen-Attribute für einen Frame bearbeiten möchten, verwenden
Sie den Tag-Inspektor zum direkten Bearbeiten des HTML-Codes.
More Help topics
“Dreamweaver-Eingabehilfen” on page 743
218
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Frame-Eigenschaften anzeigen oder festlegen
1 Führen Sie einen der folgenden Schritte aus, um einen Frame auszuwählen:
• Klicken Sie bei gedrückter Alt-Taste (Windows) bzw. bei gedrückter Umschalt- und Wahltaste (Macintosh) in der
Entwurfsansicht des Dokumentfensters auf einen Frame.
• Klicken Sie im Bedienfeld „Frames“ („Fenster“ > „Frames“) auf einen Frame.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf den Erweiterungspfeil in der rechten
unteren Ecke, um alle Frame-Eigenschaften anzuzeigen.
3 Legen Sie im Eigenschafteninspektor die Optionen für Frames fest.
Frame-Name Der Name, mit dem im Attribut target eines Hyperlinks oder in einem Skript auf den entsprechenden
Frame verwiesen wird. Ein Frame-Name muss ein einzelnes Wort sein. Unterstriche (_) sind zulässig, Bindestriche (-
), Punkte (.) und Leerzeichen dürfen dagegen nicht verwendet werden. Frame-Namen müssen mit einem Buchstaben
(nicht mit einer Zahl) beginnen. Bei Frame-Namen wird zwischen Groß- und Kleinschreibung unterschieden.
Verwenden Sie als Frame-Namen keine Begriffe, die für JavaScript reserviert sind (z. B. top oder navigator).
Damit ein Hyperlink den Inhalt eines anderen Frames ändert, müssen Sie zunächst dem Ziel-Frame einen Namen
zuweisen. Um später leichter Frame-übergreifende Hyperlinks erstellen zu können, sollten Sie alle Frames gleich bei
der Erstellung benennen.
Quelle Gibt das Quelldokument an, das im Frame angezeigt werden soll. Klicken Sie auf das Symbol des gewünschten
Ordners und wählen Sie eine Datei aus.
Scrollen Legt fest, ob im Frame Bildlaufleisten angezeigt werden. Wenn Sie hier „Standard“ auswählen, wird kein
Wert für das entsprechende Attribut festgelegt, sodass in jedem Browser jeweils der entsprechende Standardwert
verwendet werden kann. Bei den meisten Browsern ist die Standardeinstellung „Automatisch“, d. h., Rollbalken
werden nur angezeigt, wenn in einem Browserfenster nicht genug Platz ist, um den gesamten Inhalt des aktuellen
Frames anzuzeigen.
Keine Größenänderung Verhindert, dass Site-Besucher die Größe eines Frames durch Ziehen der Rahmenlinien im
Browser ändern können.
Note: In Dreamweaver können Sie die Größe des Frames weiterhin ändern. Die Option bezieht sich nur auf die
Darstellung der Frames im Browser.
Rahmen Legt fest, ob ein Frame im Browser mit oder ohne Rahmen angezeigt wird. Die für den Frame gewählte
Rahmenoption setzt die Rahmeneinstellungen des Framesets außer Kraft.
Folgende Rahmenoptionen stehen zur Verfügung: „Ja“ (Rahmen einblenden), „Nein“ (Rahmen ausblenden) und
„Standard“. In den meisten Browsern werden Rahmen in der Standardeinstellung angezeigt, sofern für das
übergeordnete Frameset nicht „Nein“ ausgewählt wurde. Ein Rahmen wird nur ausgeblendet, wenn für alle an den
Rahmen angrenzenden Frames unter „Rahmen“ die Option „Nein“ ausgewählt ist oder wenn für die Eigenschaft
„Rahmen“ des übergeordneten Framesets die Option „Nein“ und für alle an den Rahmen angrenzenden Frames die
Option „Standard“ festgelegt ist.
Rahmenfarbe Legt die Farbe für alle Rahmenlinien des Frames fest. Diese Farbe gilt für alle Rahmenlinien, die an den
Frame angrenzen, und überschreibt die für das Frameset festgelegte Rahmenfarbe.
Randbreite Legt die Breite des linken und des rechten Rands (den Abstand zwischen dem Frame-Rahmen und dem
Inhalt) in Pixel fest.
Randhöhe Legt die Höhe des oberen und des unteren Rands (den Abstand zwischen dem Frame-Rahmen und dem
Inhalt) in Pixel fest.
Note: Das Festlegen der Randbreite und -höhe eines Rahmens entspricht nicht dem Festlegen der Ränder unter
„Modifizieren“ > „Seiteneigenschaften“.
219
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Die Hintergrundfarbe eines Frames können Sie ändern, indem Sie die Hintergrundfarbe des Dokuments im Frame in
den Seiteneigenschaften festlegen.
Eingabehilfen-Werte für Frames festlegen
1 Wählen Sie im Bedienfeld „Frames“ („Fenster“ > „Frames“) einen Frame aus, indem Sie die Einfügemarke in den
entsprechenden Frame setzen.
2 Wählen Sie „Modifizieren“ > „Tag bearbeiten <frameset>“ aus.
3 Wählen Sie links in der Kategorieliste die Option „Stylesheet/Eingabehilfe“ aus, geben Sie die gewünschten Werte
ein und klicken Sie auf „OK“.
Eingabehilfen-Werte für Frames bearbeiten
1 Wenn gerade die Entwurfsansicht aktiviert ist, wählen Sie für das Dokument die Codeansicht oder die Code- und
Entwurfsansicht aus.
2 Wählen Sie im Bedienfeld „Frames“ („Fenster“ > „Frames“) einen Frame aus, indem Sie die Einfügemarke in den
entsprechenden Frame setzen. In Dreamweaver wird das Tag des Frames im Code markiert.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in den Code und
wählen Sie anschließend „Tag bearbeiten“ aus.
4 Nehmen Sie im Tag-Editor die gewünschten Änderungen vor und klicken Sie auf „OK“.
Hintergrundfarbe von Dokumenten in Frames ändern
1 Setzen Sie die Einfügemarke in den Frame.
2 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ aus.
3 Klicken Sie im Dialogfeld „Seiteneigenschaften“ auf das Menü „Hintergrundfarbe“ und wählen Sie eine Farbe aus.
Frameset-Eigenschaften anzeigen und festlegen
Im Eigenschafteninspektor können Sie die meisten Eigenschaften für Framesets anzeigen und festlegen, einschließlich
Frameset-Titel, Rahmen und Frame-Größe.
Titel für Frameset-Dokumente festlegen
1 Führen Sie einen der folgenden Schritte aus, um ein Frameset auszuwählen:
• Klicken Sie in der Entwurfsansicht des Dokumentfensters auf eine Rahmenlinie zwischen zwei Frames des
Framesets.
• Klicken Sie im Bedienfeld „Frames“ („Fenster“ > „Frames“) auf den Rahmen eines Framesets.
2 Geben Sie in der Dokumentsymbolleiste im Feld „Titel“ einen Namen für das Frameset-Dokument ein.
Der Titel eines Framesets wird bei einem Browser in dessen Titelleiste angezeigt.
Frameset-Eigenschaften anzeigen oder festlegen
1 Führen Sie einen der folgenden Schritte aus, um ein Frameset auszuwählen:
• Klicken Sie in der Entwurfsansicht des Dokumentfensters auf eine Rahmenlinie zwischen zwei Frames des
Framesets.
• Klicken Sie im Bedienfeld „Frames“ („Fenster“ > „Frames“) auf den Rahmen eines Framesets.
220
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf den Erweiterungspfeil in der rechten
unteren Ecke und legen Sie die Frameset-Optionen fest.
Rahmen Legt fest, ob die Frames in einem Browser mit oder ohne Rahmen angezeigt werden sollen. Wählen Sie „Ja“
aus, damit der Rahmen angezeigt wird, oder „Nein“, damit kein Rahmen angezeigt wird. Bei der Auswahl von
„Standard“ wird im Browser festgelegt, wie der Rahmen angezeigt wird.
Randbreite Gibt die Breite aller Rahmen im Frameset an.
Rahmenfarbe Legt eine Farbe für den Rahmen fest. Wählen Sie mit dem Farbwähler eine Farbe aus oder geben Sie den
Hexadezimalwert für die gewünschte Farbe ein.
Zeilen/Spalten-Auswahl Legt die Frame-Größe für Zeilen und Spalten des ausgewählten Framesets fest. Klicken Sie
links neben oder über der Zeilen/Spalten-Auswahl auf die gewünschte Registerkarte. Geben Sie dann im Textfeld
„Wert“ einen Wert für die Höhe oder Breite ein.
3 Wenn Sie den Bereich angeben möchten, der den einzelnen Frames im Browser zugewiesen wird, wählen Sie die
gewünschte Option im Menü „Einheiten“ aus:
Pixel Legt die Größe der ausgewählten Spalte oder Zeile auf einen absoluten Wert fest. Wählen Sie diese Option für
Frames aus, die immer die gleiche Größe beibehalten sollen, z. B. Navigationsleisten. Zuerst wird den Frames ein
Bereich zugewiesen, deren Größe in Pixel festgelegt wurde. Anschließend wird den Frames mit prozentualer oder
relativer Größenangabe ein Bereich zugewiesen. Bei den meisten Frame-Layouts ist links ein Frame mit fester
Pixelbreite und rechts ein Frame mit relativer Breite definiert, sodass der rechte Frame den gesamten verbleibenden
Bereich einnehmen kann, nachdem dem linken Frame die entsprechende Pixelbreite zugewiesen wurde.
Note: Wenn alle Breiten in Pixel angegeben sind, werden die Frames in Browsern, die breiter oder schmaler als das
Frameset sind, proportional gedehnt oder gestaucht, sodass sie trotzdem den gesamten Platz einnehmen. Dasselbe gilt
auch für Höhen, die in Pixel angegeben sind. Daher ist es im Allgemeinen ratsam, mindestens eine Breite bzw. Höhe als
relativen Wert anzugeben.
Prozent Gibt an, dass die Breite oder Höhe der ausgewählten Spalte oder Zeile einem bestimmten Prozentsatz der
Breite oder Höhe des Framesets entspricht. Diesen Frames wird erst nach den in Pixel definierten Frames ein Bereich
zugewiesen, jedoch vor Frames, für die eine relative Größe angegeben wurde.
Relativ Legt fest, dass die ausgewählte Spalte oder Zeile den gesamten restlichen Bereich einnehmen soll, nachdem
den Frames mit Pixel- und Prozentangabe der entsprechende Bereich zugewiesen wurde. Dieser restliche Bereich wird
unter allen Frames mit relativer Größe proportional aufgeteilt.
Note: Wenn Sie im Menü „Einheiten“ die Option „Relativ“ auswählen, werden alle Angaben gelöscht, die Sie im Feld
„Wert“ eingegeben haben. Wenn Sie eine Zahl angeben möchten, müssen Sie sie erneut eingeben. Wenn jedoch nur eine
Zeile oder Spalte auf „Relativ“ gesetzt ist, muss kein Zahlenwert eingegeben werden, da dieser Zeile oder Spalte nach den
anderen Zeilen und Spalten der gesamte restliche Bereich zugewiesen wird. Um sicherzustellen, dass diese Einstellung
browserübergreifend gilt, können Sie im Feld „Wert“ die Zahl „1“ eingeben. Dieser Wert entspricht der Eingabe keines
Werts.
221
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
Frame-Inhalte durch Hyperlinks steuern
Um über einen Hyperlink in einem bestimmten Frame ein Dokument in einem anderen Frame öffnen zu können,
müssen Sie ein Ziel für den Hyperlink festlegen. Das Attribut
target eines Hyperlinks definiert, in welchem Frame
oder Fenster der Inhalt geöffnet wird, auf den der Hyperlink verweist.
Wenn sich die Navigationsleiste beispielsweise im linken Frame befindet und Sie festlegen möchten, dass der
entsprechende Inhalt rechts im Haupt-Frame angezeigt wird, müssen Sie bei allen Hyperlinks der Navigationsleiste
den Namen des Haupt-Frames als Ziel angeben. Wenn ein Besucher dann auf einen Navigationslink klickt, wird der
jeweilige Inhalt im Haupt-Frame geöffnet.
1 Wählen Sie in der Entwurfsansicht einen Text oder ein Objekt aus.
2 Führen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Feld „Hyperlink“ einen der folgenden
Schritte aus:
• Klicken Sie auf das Ordnersymbol und wählen Sie die Datei aus, für die ein Hyperlink erstellt werden soll.
• Ziehen Sie das Dateizeigersymbol in das Bedienfeld „Dateien“ und wählen Sie die zu verknüpfende Datei aus.
3 Wählen Sie im Eigenschafteninspektor im Menü „Ziel“ den Frame oder das Fenster aus, in dem das verknüpfte
Dokument angezeigt werden soll:
• _blank öffnet das verknüpfte Dokument in einem neuen Browserfenster. Das aktuelle Fenster bleibt unverändert.
• _parent öffnet das verknüpfte Dokument im übergeordneten Frameset des Frames, der den Hyperlink enthält,
sodass es das gesamte Frameset ersetzt.
• _self öffnet das verknüpfte Dokument im aktuellen Frame. Dabei wird der derzeitige Inhalt des Frames ersetzt.
• _top öffnet das verknüpfte Dokument im aktuellen Browserfenster. Dabei werden alle Frames ersetzt.
Darüber hinaus werden in diesem Menü Frame-Namen angezeigt. Wählen Sie einen benannten Frame aus, um das
verknüpfte Dokument in diesem Frame zu öffnen.
Note: Frame-Namen werden nur angezeigt, wenn Sie ein Dokument innerhalb eines Framesets bearbeiten. Wenn Sie ein
Dokument im zugehörigen Dokumentfenster bearbeiten, werden im Popupmenü „Ziel“ jedoch keine Frame-Namen
angezeigt. Wenn Sie ein Dokument außerhalb des Framesets bearbeiten, können Sie im Textfeld „Ziel“ den Namen des
Ziel-Frames eingeben.
Wenn Sie einen Hyperlink zu einer Seite außerhalb Ihrer Site bereitstellen, verwenden Sie stets
target="_top" oder
target="_blank", um sicherzustellen, dass die Seite nicht als Teil Ihrer Site angezeigt wird.
Inhalte für Browser ohne Frame-Unterstützung erstellen
In Dreamweaver können Sie angeben, dass Inhalte in textbasierten Browsern und in älteren grafikfähigen Browsern
angezeigt werden sollen, die keine Frames unterstützen. Dieser Inhalt wird in der Frameset-Datei in die
noframes-
Tags eingeschlossen. Wenn die Frameset-Datei in einem Browser geladen wird, der keine Frames unterstützt, wird nur
der Inhalt innerhalb der
noframes-Tags angezeigt.
Note: Der Inhalt im
noframes-Bereich sollte mehr beinhalten als nur einen Hinweis mit dem Inhalt „Sie benötigen einen
aktuelleren Browser, der Frames unterstützt.”. Einige Site-Besucher verwenden Systeme, in denen keine Frames angezeigt
werden können.
1 Wählen Sie „Modifizieren“ > „Frameset“ > „NoFrames-Inhalt bearbeiten“ aus.
In Dreamweaver wird der Inhalt der Entwurfsansicht gelöscht. Oben in der Entwurfsansicht wird „NoFrames-Inhalt“
angezeigt.
222
VERWENDEN VON DREAMWEAVER
Seitenlayouts mit HTML gestalten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus:
• Geben Sie im Dokumentfenster wie bei anderen Dokumenten Inhalte ein oder fügen Sie diese ein.
• Wählen Sie „Fenster“ > „Codeinspektor“ aus, setzen Sie die Einfügemarke zwischen die body-Tags, die innerhalb
des
noframes-Tags angezeigt werden, und geben Sie dann den HTML-Code für den gewünschten Inhalt ein.
3 Wählen Sie erneut „Modifizieren“ > „Frameset“ > „NoFrames-Inhalt bearbeiten“ aus, um wieder zur normalen
Ansicht des Frameset-Dokuments zu wechseln.
Verwenden von JavaScript-Verhalten mit Frames
Einige JavaScript-Verhalten und navigationsbezogene Befehle eignen sich besonders gut zur Verwendung mit Frames:
Text vom Frame einstellen Inhalt und Formatierung eines Frames werden durch die angegebenen Inhalte ersetzt. Bei
diesen Inhalten kann es sich um beliebigen gültigen HTML-Code handeln. Mit dieser Aktion können Informationen
in einem Frame dynamisch angezeigt werden.
Gehe zu URL Öffnet eine neue Seite im aktuellen Fenster oder im angegebenen Frame. Mit dieser Aktion kann der
Inhalt von mindestens zwei Frames mit einem Mausklick geändert werden.
Sprungmenü einfügen Legt eine Menüliste mit Hyperlinks fest, über die Dateien in einem Browserfenster geöffnet
werden. Sie können zudem ein bestimmtes Fenster oder einen bestimmten Frame als Ziel angeben. Das Dokument
wird dann in diesem Fenster oder Frame geöffnet.
Weitere Informationen finden Sie unter “Hinzufügen von JavaScript-Verhalten” on page 375.
More Help topics
“Verhalten „Text vom Frame einstellen“ definieren” on page 385
“Verhalten „Gehe zu URL“ definieren” on page 382
“Verhalten „Navigationsleistenbild festlegen“ definieren” on page 385
“Verhalten „Sprungmenü“ definieren” on page 383
223
Last updated 10.4.2012
Chapter 8: Inhalt in Seiten einfügen
Bedienfeld „Einfügen“ verwenden
Das Bedienfeld „Einfügen“ enthält Schaltflächen zum Erstellen und Einfügen von Objekten, z. B. von Tabellen und
Bildern. Die Schaltflächen sind nach Kategorien strukturiert.
More Help topics
“Überblick über das Bedienfeld „Einfügen“” on page 16
“Tags mit Tag-Editoren bearbeiten” on page 339
“Elemente im Dokumentfenster auswählen und anzeigen” on page 231
Bedienfeld „Einfügen“ ein- und ausblenden
❖ Wählen Sie „Fenster“ > „Einfügen“ aus.
Note: Wenn Sie bestimmte Dateitypen wie XML, JavaScript, Java und CSS verwenden, sind das Bedienfeld „Einfügen“
und die Option „Entwurfsansicht“ abgeblendet, da Sie in diese Codedateien keine Elemente einfügen können.
Schaltflächen einer bestimmten Kategorie anzeigen
❖ Wählen Sie im Popupmenü „Kategorie“ einen Kategorienamen aus. Wenn Sie beispielsweise die Schaltflächen der
Kategorie „Layout“ anzeigen möchten, wählen Sie „Layout“ aus.
224
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Popupmenü für eine Schaltfläche anzeigen
❖ Klicken Sie auf den Abwärtspfeil neben dem Schaltflächensymbol.
Objekte einfügen
1 Wählen Sie im Bedienfeld „Einfügen“ im Popupmenü „Kategorie“ die entsprechende Kategorie aus.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf eine Objektschaltfläche oder ziehen Sie das Symbol der Schaltfläche ins Dokumentfenster.
• Klicken Sie auf die Pfeilschaltfläche und wählen Sie dann im Menü eine Option aus.
Je nach Objekt wird ein Dialogfeld zum Einfügen des Objekts angezeigt, in dem Sie aufgefordert werden, zu einer Datei
zu wechseln oder Parameter für ein Objekt anzugeben. Oder Dreamweaver fügt Code in das Dokument ein oder öffnet
einen Tag-Editor bzw. ein Bedienfeld, in dem Sie Informationen angeben können, bevor der Code eingefügt wird.
Bei einigen Objekten wird beim Einfügen in der Entwurfsansicht kein Dialogfeld eingeblendet, beim Einfügen in der
Codeansicht wird jedoch ein Tag-Editor angezeigt. Bei einigen wenigen Objekten führt das Einfügen in der
Entwurfsansicht dazu, dass Dreamweaver vor dem Einfügen in die Codeansicht wechselt.
Note: Manche Objekte, z. B. benannte Anker, sind unsichtbar, wenn die Seite in einem Browserfenster angezeigt wird.
Sie können in der Entwurfsansicht Symbole als Markierung für die Position solcher unsichtbaren Objekte anzeigen.
Dialogfeld zum Einfügen von Objekten überspringen und leeres
Platzhalterobjekt einfügen
❖ Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Wahltaste (Macintosh) auf die Schaltfläche für das Objekt.
Wenn Sie beispielsweise einen Platzhalter für ein Bild einfügen möchten, ohne eine Bilddatei anzugeben, klicken Sie
bei gedrückter Strg-Taste bzw. Wahltaste auf die Schaltfläche „Bild“.
225
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Mit diesem Verfahren können nicht alle Dialogfelder zum Einfügen von Objekten übergangen werden. Für viele
Objekte, darunter AP-Elemente und Framesets, können keine Platzhalter oder Objekte mit Standardwerten eingefügt
werden.
Voreinstellungen des Bedienfelds „Einfügen“ ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Deaktivieren Sie im Dialogfeld „Voreinstellungen“ in der Kategorie „Allgemein“ die Option „Beim Einfügen von
Objekten Dialogfeld anzeigen“, wenn beim Einfügen von Objekten wie z. B. Bilder, Tabellen, Skripts und Head-
Elemente keine Dialogfelder angezeigt werden sollen, oder halten Sie während der Erstellung des Objekts die Strg-
Taste (Windows) bzw. die Wahltaste (Macintosh) gedrückt.
Wenn Sie ein Objekt einfügen, während diese Option deaktiviert ist, erhält das Objekt die Standardattributwerte. Sie
können die Eigenschaften des Objekts nach dem Einfügen mit dem Eigenschafteninspektor ändern.
Objekte in der Kategorie „Favoriten“ des Bedienfelds „Einfügen“ hinzufügen,
löschen oder verwalten
1 Wählen Sie im Bedienfeld „Einfügen“ eine beliebige Kategorie aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in den Bereich, in
dem die Schaltflächen angezeigt werden, und wählen Sie dann „Favoriten anpassen“ aus.
3 Nehmen Sie im Dialogfeld „Favoriten anpassen“ die gewünschten Änderungen vor und klicken Sie auf „OK“.
• Wenn Sie ein Objekt hinzufügen möchten, wählen Sie im Bedienfeld „Verfügbare Objekte“ auf der linken Seite ein
Objekt aus und klicken Sie dann auf den Pfeil zwischen den beiden Bedienfeldern oder doppelklicken Sie im
Bedienfeld „Verfügbare Objekte“ auf das Objekt.
Note: Objekte können einzeln hinzugefügt werden. Es ist nicht möglich, einen Kategorienamen wie z. B. „Allgemein“
auszuwählen und der Favoritenliste eine gesamte Kategorie hinzuzufügen.
• Wenn Sie ein Objekt oder ein Trennzeichen löschen möchten, wählen Sie auf der rechten Seite im Feld
„Objektfavoriten“ ein Objekt aus und klicken Sie dann oberhalb des Bedienfelds auf die Schaltfläche „Ausgewähltes
Objekt aus der Liste der Objektfavoriten entfernen“.
• Wenn Sie ein Objekt verschieben möchten, wählen Sie auf der rechten Seite im Feld „Objektfavoriten“ ein Objekt
aus und klicken Sie dann oberhalb des Felds auf den Aufwärts- bzw. Abwärtspfeil.
• Wenn Sie unterhalb eines Objekts eine Trennlinie hinzufügen möchten, wählen Sie auf der rechten Seite im Feld
„Objektfavoriten“ ein Objekt aus und klicken Sie dann unterhalb des Bedienfelds auf die Schaltfläche „Trennlinie
hinzufügen“.
4 Wenn die Kategorie „Favoriten“ des Bedienfelds „Einfügen“ nicht bereits eingeblendet ist, wählen Sie diese
Kategorie aus, um die vorgenommenen Änderungen anzuzeigen.
Objekte mithilfe von Schaltflächen in der Kategorie „Favoriten“ einfügen
❖ Wählen Sie die Kategorie „Favoriten“ im Popupmenü „Kategorie“ des Bedienfelds „Einfügen“ aus und klicken Sie
dann auf die Schaltfläche für ein hinzugefügtes Objekt vom Typ „Favoriten“.
226
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Bedienfeld „Einfügen“ als horizontale Einfügeleiste anzeigen
Im Gegensatz zu den anderen Bedienfeldern in Dreamweaver können Sie das Bedienfeld „Einfügen“ aus der
standardmäßigen Andockposition in eine horizontale Position oberhalb des Dokumentfensters ziehen. Dabei ändert
sich das Bedienfeld in eine Symbolleiste (die jedoch nicht wie andere Symbolleisten ein- und ausgeblendet werden
kann).
1 Klicken Sie auf die Registerkarte des Bedienfelds „Einfügen“ und ziehen Sie sie in den oberen Bereich des
Dokumentfensters.
2 Wenn Sie eine horizontale blaue Linie oben im Dokumentfenster sehen, können Sie das Bedienfeld „Einfügen“ an
der entsprechenden Position ablegen.
Note: Die horizontale Einfügeleiste ist zudem standardmäßiger Bestandteil des Arbeitsbereichs „Klassisch“. Wenn Sie
zum Arbeitsbereich „Klassisch“ wechseln möchten, wählen Sie im Arbeitsbereichumschalter der Anwendungsleiste die
Option „Klassisch“ aus.
Horizontale Einfügeleiste als Bedienfeldgruppe wiederherstellen
1 Klicken Sie auf den Griff der horizontalen Einfügeleiste (links an der Einfügeleiste) und ziehen Sie die Leiste an die
Stelle, an der die Bedienfelder angedockt sind.
2 Positionieren Sie das Bedienfeld „Einfügen“ und legen Sie es ab. Durch eine blaue Linie wird angezeigt, an welchen
Positionen Sie das Bedienfeld einfügen können.
Kategorien der horizontalen Einfügeleiste als Registerkarten anzeigen
❖ Klicken Sie auf das Pfeilsymbol neben dem Kategorienamen am linken Ende der horizontalen Einfügeleiste und
wählen Sie dann „Als Registerkarten anzeigen“ aus.
227
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Kategorien der horizontalen Einfügeleiste als Menü anzeigen
❖ Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste auf eine Kategorie in der
horizontalen Einfügeleiste und wählen Sie dann „Als Menü anzeigen“ aus.
Seiteneigenschaften festlegen
Für jede Seite, die Sie in Dreamweaver erstellen, können Sie im Dialogfeld „Seiteneigenschaften“ („Modifizieren“ >
„Seiteneigenschaften“) Layout- und Formatierungseigenschaften definieren. Im Dialogfeld „Seiteneigenschaften“
können Sie die Standardeinstellungen für die Schriftfamilie, Schriftgröße, Hintergrundfarbe, Ränder, Hyperlinkstile
und viele andere das Seitendesign betreffende Aspekte festlegen. Sie können jeder von Ihnen erstellten Seite neue
Seiteneigenschaften zuweisen und die Eigenschaften bereits bestehender Seiten modifizieren. Die im Dialogfeld
„Seiteneigenschaften“ vorgenommenen Änderungen gelten für die gesamte Seite.
Dreamweaver bietet zwei Methoden zum Ändern von Seiteneigenschaften: CSS und HTML. Adobe empfiehlt die
Verwendung von CSS, um Hintergründe festzulegen und Seiteneigenschaften zu ändern.
Note: Die ausgewählten Seiteneigenschaften werden nur auf das aktuelle Dokument angewendet. Wenn für eine Seite ein
externes CSS-Stylesheet verwendet wird, überschreibt Dreamweaver die im Stylesheet festgelegten Tags nicht, da dies
Auswirkungen auf alle Seiten haben würde, denen dieses Stylesheet zugewiesen ist.
CSS-Eigenschaften für Seitenschrift, Hintergrundfarbe und Hintergrundbild
festlegen
Im Dialogfeld „Seiteneigenschaften“ können Sie verschiedene grundlegende Layoutoptionen für Webseiten festlegen.
Dazu gehören unter anderem die Schrift, die Hintergrundfarbe und das Hintergrundbild.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Erscheinungsbild (CSS)“ und legen Sie die Optionen fest.
Seitenschrift Gibt die auf den Webseiten zu verwendende Standardschriftfamilie an. Dreamweaver verwendet die von
Ihnen definierte Schriftfamilie, es sei denn, für ein Textelement wurde ausdrücklich eine andere Schrift gewählt.
Größe Gibt die auf den Webseiten zu verwendende Standardschriftgröße an. Dreamweaver verwendet die von Ihnen
definierte Schriftgröße, es sei denn, für ein Textelement wurde ausdrücklich eine andere Schriftgröße gewählt.
Textfarbe Definiert die Standardfarbe der Schrift.
Background-color Legt eine Hintergrundfarbe für die Seite fest. Klicken Sie auf das Farbfeld neben
„Hintergrundfarbe“ und wählen Sie eine Farbe im Farbwähler aus.
Hintergrundbild Legt ein Hintergrundbild fest. Klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie das
gewünschte Bild aus. Alternativ dazu können Sie den Pfad zu dem Hintergrundbild im Feld „Hintergrundbild“
eingeben.
Genau wie ein Browser ordnet Dreamweaver mehrere Exemplare des Hintergrundbilds neben- und untereinander an,
wenn dieses nicht das ganze Fenster füllt. (Bei Bedarf können Sie diese Bildwiederholung mithilfe von CSS
unterbinden.)
Wiederholen Gibt an, wie das Hintergrundbild auf der Seite angezeigt wird:
• Wählen Sie „nicht wiederholen“ aus, um das Hintergrundbild nur einmal anzuzeigen.
• Wählen Sie „wiederholen“ aus, um das Bild horizontal und vertikal zu wiederholen.
228
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Wählen Sie „wiederholen-x“ aus, um das Bild horizontal zu wiederholen.
• Wählen Sie „wiederholen-y“ aus, um das Bild vertikal zu wiederholen.
„Linker Rand“ und „Rechter Rand“ Definieren die Größe des linken und des rechten Seitenrands.
„Oberer Rand“ und „Unterer Rand“ Definieren die Größe der oberen und des unteren Seitenrands.
HTML-Seiteneigenschaften festlegen
Wenn Sie Eigenschaften in dieser Kategorie des Dialogfelds „Seiteneigenschaften“ festlegen, wird die Seite mit HTML-
Code und nicht mit CSS-Code formatiert.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Erscheinungsbild (HTML)“ und legen Sie die Optionen fest.
Hintergrundbild Legt ein Hintergrundbild fest. Klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie das
gewünschte Bild aus. Alternativ dazu können Sie den Pfad zu dem Hintergrundbild im Feld „Hintergrundbild“
eingeben.
Genau wie ein Browser ordnet Dreamweaver mehrere Exemplare des Hintergrundbilds neben- und untereinander an,
wenn dieses nicht das ganze Fenster füllt. (Bei Bedarf können Sie diese Bildwiederholung mithilfe von CSS
unterbinden.)
Hintergrund Legt eine Hintergrundfarbe für die Seite fest. Klicken Sie auf das Farbfeld neben „Hintergrundfarbe“ und
wählen Sie eine Farbe im Farbwähler aus.
Text Definiert die Standardfarbe der Schrift.
Hyperlink Gibt die Farbe an, die Hyperlinktext zugewiesen werden soll.
Besuchte Links Gibt die Farbe an, die besuchten Hyperlinks zugewiesen werden soll.
Aktive Hyperlinks Gibt an, welche Farbe ein Hyperlink annimmt, wenn ein Benutzer darauf klickt.
„Linker Rand“ und „Rechter Rand“ Definieren die Größe des linken und des rechten Seitenrands.
„Oberer Rand“ und „Unterer Rand“ Definieren die Größe der oberen und des unteren Seitenrands.
CSS-Hyperlinkeigenschaften für eine ganze Seite
festlegen
Sie können für Hyperlinks die Schriftarten, Schriftgrade, Farben und andere Eigenschaften festlegen. Standardmäßig
erstellt Dreamweaver CSS-Regeln für Hyperlinks und wendet sie auf alle Hyperlinks an, die Sie auf der Seite
verwenden. (Die Regeln sind in den
head-Abschnitt der Seite eingebettet.)
Note: Wenn Sie einzelne Hyperlinks auf einer Seite anpassen möchten, müssen Sie einzelne CSS-Regeln erstellen und
dann einzeln auf die Hyperlinks anwenden.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Hyperlinks (CSS)“ und legen Sie die Optionen fest.
Schriftart für Hyperlinks Definiert die standardmäßige Schriftfamilie für Hyperlinktext. Wenn Sie keine andere
Schrift festgelegt haben, verwendet Dreamweaver standardmäßig die für die gesamte Seite definierte Schriftfamilie.
229
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Größe Definiert die standardmäßige Schriftgröße für Hyperlinktext.
Farbe für Hyperlinks Gibt die Farbe an, die Hyperlinktext zugewiesen werden soll.
Besuchte Links Gibt die Farbe an, die besuchten Hyperlinks zugewiesen werden soll.
Rollover-Hyperlinks Gibt an, welche Farbe ein Hyperlink annimmt, wenn der Mauszeiger darauf positioniert ist.
Aktive Hyperlinks Gibt an, welche Farbe ein Hyperlink annimmt, wenn ein Benutzer darauf klickt.
Unterstreichungsstil Definiert den Unterstreichungsstil für Hyperlinks. Wenn für Ihre Seite bereits ein
Unterstreichungsstil für Hyperlinks definiert ist (z. B. über ein externes CSS-Stylesheet), dann wird das Menü
„Unterstreichungsstil“ standardmäßig als nicht zu ändernde Option angezeigt. Diese Option macht Sie auf einen
definierten Hyperlinkstil aufmerksam. Wenn Sie den Unterstreichungsstil für Hyperlinks im Dialogfeld
„Seiteneigenschaften“ modifizieren, ändert Dreamweaver die vorherige Hyperlinkdefinition.
CSS-Überschrifteneigenschaften für eine ganze Seite
festlegen
Sie können für die Überschriften auf einer Seite die Schriftarten, Schriftgrade und Farben festlegen. Standardmäßig
erstellt Dreamweaver CSS-Regeln für die Überschriften und wendet sie auf alle Überschriften an, die Sie auf der Seite
verwenden. (Die Regeln sind in den
head-Abschnitt der Seite eingebettet.)
Überschriften können im HTML-Eigenschafteninspektor ausgewählt werden.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Überschriften (CSS)“ und legen Sie die Optionen fest.
Schrift für Überschriften Gibt die standardmäßige Schriftfamilie für Überschriften an. Dreamweaver verwendet die
von Ihnen definierte Schriftfamilie, es sei denn, für ein Textelement wurde ausdrücklich eine andere Schrift gewählt.
„Überschrift 1“ bis „Überschrift 6“ Definieren die Schriftgröße und die Schriftfarbe für bis zu sechs Ebenen von
Überschriften-Tags.
Eigenschaften für Titel und Kodierung einer Seite
festlegen
In der Kategorie „Titel/Kodierung“ des Dialogfelds „Seiteneigenschaften“ können Sie den Dokumentkodierungstyp
angeben, der speziell für die Sprache gilt, in der die Webseiten verfasst werden. Ferner können Sie angeben, welche
Unicode-Normalisierungsform mit diesem Kodierungstyp verwendet werden soll.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Titel/Kodierung“ und stellen Sie die Optionen ein.
Titel Legt den Titel der Seite fest, der in der Titelleiste des Dokumentfensters und der meisten Browserfenster
angezeigt wird.
Document Type (DTD) Gibt eine Dokumenttypdefinition an. Sie können beispielsweise ein HTML-Dokument
XHTML-kompatibel machen, indem Sie „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ im Popupmenü
auswählen.
230
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Kodierung Bestimmt den Zeichensatz, der in einem Dokument verwendet werden soll.
Wenn Sie „Unicode (UTF-8)“ als Dokumentkodierung auswählen, sind keine Entitätskodierungen mehr erforderlich,
da mit UTF-8 alle Zeichen dargestellt werden können. Wenn Sie eine andere Dokumentkodierung auswählen, ist zur
Darstellung bestimmter Zeichen möglicherweise eine Entitätsreferenz erforderlich. Weitere Informationen zu
Zeichenentitäten finden Sie unter www.w3.org/TR/REC-html40/sgml/entities.html.
Neu laden Konvertiert das vorhandene Dokument oder öffnet es in der neuen Kodierung erneut.
Unicode-Normalisierungsformular Nur aktiviert, wenn Sie unter „Kodierung“ die Option „Unicode (UTF-8)“
auswählen. Es gibt vier Unicode-Normalisierungsformulare. Die wichtigste ist dabei die Normalisierungsform C,
denn sie ist die im Zeichenmodell für das World Wide Web am häufigsten verwendete Form. Adobe bietet aus
Gründen der Vollständigkeit darüber hinaus drei weitere Unicode-Normalisierungsformulare.
In Unicode gibt es einige Zeichen, die sich zwar visuell ähneln, im Dokument aber auf unterschiedliche Art und Weise
gespeichert werden können. So kann beispielsweise das Zeichen „ë“ durch ein Einzelzeichen (e-Umlaut) oder durch
zwei Zeichen (reguläres lateinisches Zeichen e + Kombinierungsumlaut) dargestellt werden. Ein Unicode-
Kombinierungszeichen ist ein Zeichen, das zusammen mit dem davor stehenden Zeichen verwendet wird, damit
beispielsweise der Umlaut über dem „lateinischen e“ angezeigt wird. Beide Formen führen zum gleichen visuellen
Ergebnis, aber die in der Datei gespeicherten Informationen sind unterschiedlich.
Die Normalisierung gewährleistet, dass alle Zeichen, die in unterschiedlichen Formen gespeichert werden können, in
derselben Form gespeichert werden. Dies bedeutet, dass alle „ë“-Zeichen in einem Dokument entweder als
Einzelzeichen (e mit Umlaut) oder als zwei Zeichen (e + Kombinierungsumlaut) in einem Dokument gespeichert
werden, aber nicht in beiden Formen.
Weitere Informationen zur Unicode-Normalisierung und den spezifischen verwendbaren Formen finden Sie auf der
Unicode-Website unter www.unicode.org/reports/tr15.
Unicode-Signatur (BOM) einschließen Schließt eine Byte Order Mark (BOM) in das Dokument ein. Eine BOM sind
2 bis 4 Bytes am Anfang einer Textdatei, die eine Datei als Unicode und somit die Byte-Folge der nachfolgenden Byte
identifizieren. Da UTF-8 keine Byte-Reihenfolge besitzt, ist für diese Kodierungsform das Hinzufügen einer UTF-8-
BOM optional. Bei UTF-16 und UTF-32 jedoch ist eine BOM obligatorisch.
Tracing-Bild für das Design einer Seite verwenden
Sie können eine Bilddatei als Hilfsmittel für Ihr Seitendesign einfügen. Dieses Bild wird als Hintergrundbild angezeigt,
das Sie bei der Gestaltung des Seitenlayouts überarbeiten können.
1 Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ oder klicken Sie im Eigenschafteninspektor für Text auf die
Schaltfläche „Seiteneigenschaften“.
2 Klicken Sie auf die Kategorie „Tracing-Bild“ und stellen Sie die Optionen ein.
Strukturbild Gibt ein Bild an, das als Hilfsmittel zum Kopieren eines Designs verwendet werden soll. Dieses Bild dient
nur zur Referenz und ist nicht zu sehen, wenn das Dokument im Browser angezeigt wird.
Transparenz Bestimmt die Deckkraft des Tracing-Bildes, die von vollkommen transparent bis vollkommen deckend
reichen kann.
231
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Dokumentkodierung
Die Dokumentkodierung bestimmt den Zeichensatz, der in einem Dokument verwendet werden soll. Die
Dokumentkodierung wird in einem
meta-Tag im head-Abschnitt der Datei angegeben. Dadurch erkennen der
Browser und Dreamweaver, wie das Dokument dekodiert werden soll und welche Schriften für die Anzeige des
dekodierten Textes zu verwenden sind.
Wenn Sie beispielsweise „Westeuropäisch“ auswählen, wird folgendes
meta-Tag eingefügt:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
Dreamweaver zeigt das Dokument mit den Schriften an, die Sie unter „Schrifteinstellungen“ für die Kodierung
„Westeuropäisch“ ausgewählt haben. Ein Browser zeigt das Dokument mit den Schriften an, die der jeweilige Benutzer
für die Kodierung „Westeuropäisch“ eingestellt hat.
Wenn Sie „Japanisch (Shift JIS)“ auswählen, wird folgendes
meta-Tag eingefügt:
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
Dreamweaver zeigt das Dokument mit den Schriften an, die Sie für die Kodierung „Japanisch“ ausgewählt haben. Ein
Browser zeigt das Dokument mit den Schriften an, die der jeweilige Benutzer für die Kodierung „Japanisch“ eingestellt hat.
Sie haben die Möglichkeit, eine andere Dokumentkodierung für eine Seite zu wählen. Außerdem können Sie die
Standardkodierung ändern, die Dreamweaver zum Erstellen neuer Dokumente verwendet, einschließlich der
Schriften, die zur Anzeige der einzelnen Kodierungen eingesetzt werden.
More Help topics
“Standard-Dokumenttyp und Standardkodierung festlegen” on page 73
Elemente im Dokumentfenster auswählen und anzeigen
Um ein Element in der Entwurfsansicht des Dokumentfensters auszuwählen, müssen Sie darauf klicken. Ist ein
Element unsichtbar, müssen Sie es erst sichtbar machen, um es auswählen zu können.
Für einige HTML-Code-Informationen gibt es keine sichtbare Entsprechung in einem Browser. Dies gilt zum Beispiel
für
comment-Tags. Oftmals ist es jedoch beim Entwurf einer Seite nützlich, solche unsichtbaren Elemente auswählen,
bearbeiten, verschieben und löschen zu können.
In Dreamweaver können Sie festlegen, ob die Stellen, an denen sich unsichtbare Elemente in der Entwurfsansicht des
Dokumentfensters befinden, durch entsprechende Symbole markiert werden sollen. In der Kategorie „Unsichtbare
Elemente“ des Dialogfelds „Voreinstellungen“ können Sie bestimmen, welche Elementmarkierungen sichtbar sind.
Beispielsweise können Sie festlegen, dass zwar benannte Anker, aber keine Zeilenumbrüche eingeblendet werden
sollen.
Bestimmte unsichtbare Elemente (z. B. Kommentare und benannte Anker) können Sie mithilfe der Schaltflächen in
der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ erstellen. Sie können diese Elemente dann im
Eigenschafteninspektor modifizieren.
More Help topics
“Anzeigen von Code” on page 322
“Bedienfeld „Einfügen“ verwenden” on page 223
232
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Elemente auswählen
• Zum Auswählen eines sichtbaren Elements im Dokumentfenster klicken Sie auf das Element oder ziehen den
Mauszeiger über das Element.
• Zum Auswählen eines unsichtbaren Elements wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare
Elemente“ (sofern diese Menüoption noch nicht aktiviert ist) und klicken dann auf die Markierung des Elements
im Dokumentfenster.
Einige Objekte erscheinen auf der Seite nicht an der Stelle, an der sich der zugehörige Code befindet. Beispielsweise
kann sich ein absolut positioniertes Element (AP-Element) in der Entwurfsansicht überall auf der Seite befinden,
aber der Code, der das AP-Element definiert, steht in der Codeansicht an einer bestimmten Stelle. Wenn
unsichtbare Elemente eingeblendet sind, zeigt Dreamweaver im Dokumentfenster Markierungen an, aus denen
hervorgeht, wo der Code dieser Elemente zu finden ist. Durch das Auswählen einer Markierung wählen Sie das
gesamte Element aus. Wenn Sie also beispielsweise die Markierung eines AP-Elements auswählen, wird das ganze
AP-Element ausgewählt.
• Um ein komplettes Tag (einschließlich seines Inhalts) auszuwählen, klicken Sie im Tag-Selektor links unten im
Dokumentfenster auf das gewünschte Tag. (Der Tag-Selektor wird in der Entwurfsansicht und in der Codeansicht
eingeblendet.) Er zeigt immer die Tags an, die dem gegenwärtig ausgewählten Bereich bzw. der Position der
Einfügemarke entsprechen. Das Tag ganz links ist das äußerste Tag, das die aktuelle Auswahl oder die
Einfügemarke enthält. Das nächste Tag ist in diesem äußersten Tag enthalten usw. Das Tag ganz rechts ist das
innerste Tag, das die aktuelle Auswahl oder die Einfügemarke enthält.
Im folgenden Beispiel befindet sich die Einfügemarke in einem Absatz-Tag,
<p>. Um die Tabelle auszuwählen, die
den auszuwählenden Abschnitt enthält, wählen Sie das Tag
<table> links von dem Tag <p> aus.
HTML-Code für ausgewählte Textstellen oder Objekte anzeigen
❖ Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Codeansicht anzeigen“.
• Wählen Sie „Ansicht“ > „Code“ aus.
• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Code- und Entwurfsansicht anzeigen“.
• Wählen Sie „Ansicht“ > „Code und Entwurf“ aus.
• Wählen Sie „Fenster“ > „Codeinspektor“ aus.
Wenn Sie in einem der beiden Codeeditoren (Codeansicht oder Codeinspektor) eine bestimmte Stelle auswählen, wird
diese Stelle in der Regel auch im Dokumentfenster ausgewählt. Eventuell müssen Sie die beiden Ansichten
synchronisieren, damit die Auswahl angezeigt wird.
Markierungssymbole für unsichtbare Elemente ein- oder ausblenden
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
Note: Das Layout einer Seite kann sich durch das Einblenden von unsichtbaren Elementen geringfügig ändern, da andere
Elemente möglicherweise um ein paar Pixel verschoben werden. Um das Layout präzise darzustellen, sollten Sie die
unsichtbaren Elemente ausblenden.
233
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Voreinstellungen für unsichtbare Elemente festlegen
Mit den Voreinstellungen für unsichtbare Elemente legen Sie fest, welche Arten von Elementen eingeblendet werden,
wenn Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“ wählen.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh) und klicken Sie auf „Unsichtbare Elemente“.
2 Wählen Sie die Elemente aus, die eingeblendet werden sollen, und klicken Sie auf „OK“.
Note: Ein Häkchen neben dem Namen eines Elements im Dialogfeld bedeutet, dass das Element sichtbar ist, wenn Sie
„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“ aktiviert haben.
Benannte Anker Zeigt ein Symbol an, das die Position der einzelnen benannten Anker (a name = "") im Dokument
markiert.
Skripts Zeigt ein Symbol an, das die Position von JavaScript- oder VBScript-Code im Body-Bereich des Dokuments
markiert. Wählen Sie das Symbol aus, um das Skript im Eigenschafteninspektor zu bearbeiten oder eine Verknüpfung
zu einer externen Skriptdatei herzustellen.
Comments Zeigt ein Symbol an, das die Position eines HTML-Kommentars markiert. Wählen Sie das Symbol aus, um
den Kommentar im Eigenschafteninspektor anzuzeigen.
Zeilenumbrüche Zeigt ein Symbol an, das die Position der einzelnen Zeilenumbrüche markiert (BR). Diese Option ist
standardmäßig deaktiviert.
Client-Imagemaps Zeigt ein Symbol an, das die Position einer Client-Imagemap im Dokument markiert.
Eingebettete Stile Zeigt ein Symbol an, das die Position von CSS-Stilen markiert, die in den Body-Bereich eines
Dokuments eingebettet sind. CSS-Stile, die im head-Bereich eines Dokuments definiert sind, werden nicht im
Dokumentfenster angezeigt.
Versteckte Formularfelder Zeigt ein Symbol an, das die Position von Formularfeldern markiert, bei denen das
Attribut
type auf "hidden" gesetzt ist.
Formularbegrenzer Zeigt eine Begrenzungslinie um ein Formular an, damit Sie sehen, wo Sie Formularelemente
einfügen können. Die Begrenzungslinie zeigt den Bereich des
form-Tags an. Alle Formularelemente, die sich
innerhalb der Begrenzungslinie befinden, sind also korrekt im
form-Tag eingeschlossen.
Ankerpunkte für AP-Elemente Zeigt ein Symbol an, das die Position von Code markiert, der ein AP-Element definiert.
Das AP-Element selbst kann sich an einer beliebigen Stelle auf der Seite befinden. (AP-Elemente sind keine
unsichtbaren Elemente. Unsichtbar ist nur der Code, der das AP-Element definiert.) Wählen Sie das Symbol aus, um
das AP-Element auszuwählen. Sie können dann den Inhalt des AP-Elements sehen, auch wenn das AP-Element als
versteckt markiert ist.
Ankerpunkte für ausgerichtete Elemente Zeigt ein Symbol an, das die Position von HTML-Code für Elemente
anzeigt, die das Attribut
align annehmen können. Dies können Bilder, Tabellen, ActiveX-Objekte, Plug-Ins und
Applets sein. In einigen Fällen wird der Code für das Element vom sichtbaren Objekt getrennt.
Sichtbare Server-Markup-Tags Zeigt die Position von Server-Markup-Tags (wie ASP- und ColdFusion-Tags) an,
deren Inhalt nicht im Dokumentfenster angezeigt werden kann. Mit diesen Tags werden beim Verarbeiten durch
einen Server im Allgemeinen HTML-Tags generiert. Mit dem Tag <CFGRAPH> wird beim Verarbeiten durch einen
ColdFusion-Server beispielsweise eine HTML-Tabelle generiert. Das Tag wird in Dreamweaver durch ein
unsichtbares ColdFusion-Element dargestellt, da die endgültige dynamische Ausgabe der Seite in Dreamweaver nicht
ermittelt werden kann.
Unsichtbare Server-Markup-Tags Zeigt die Position von Server-Markup-Tags (wie ASP- und ColdFusion-Tags) an,
deren Inhalt nicht im Dokumentfenster angezeigt werden kann. Bei diesen Tags handelt es sich in der Regel um Tags
234
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
für die Einrichtung oder Verarbeitung oder um logische Tags (z. B. <CFSET>, <CFWDDX> oder <CFXML>), mit
denen keine HTML-Tags generiert werden.
CSS-Anzeige: Kein Zeigt ein Symbol an, das die Position des versteckten Inhalts markiert:none-Eigenschaft im
verknüpften oder eingebetteten Stylesheet.
„Dynamischen Text zeigen als“ Zeigt standardmäßig jeglichen dynamischen Text auf der Seite im Format
{Datensatzgruppe:Feld} an. Wenn die Länge dieser Werte groß genug ist, um die Formatierung der Seite zu verzerren,
können Sie die Anzeige stattdessen auf {} umstellen.
Server-Side Includes Zeigt die tatsächlichen Inhalte jeder Server-Side Includes-Datei an.
Farben
Websichere Farben
In HTML werden Farben entweder als Hexadezimalwerte (z. B. #FF0000) oder als Farbnamen (z. B. red) ausgedrückt.
Eine websichere Farbe sieht in Safari und Microsoft Internet Explorer sowohl auf Windows- als auch auf Macintosh-
Systemen im 256-Farben-Modus gleich aus. Es gibt 216 systemübergreifende Farben. Alle Hexadezimalwerte, die aus
Kombinationen von 00, 33, 66, 99, CC oder FF zusammengesetzt sind (entsprechend den RGB-Werten 0, 51, 102, 153,
204 und 255), sind websichere Farben.
Tests ergeben jedoch, dass nur 212 und nicht 216 websichere Farben existieren, weil Internet Explorer unter Windows
die Farben #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) und #33FF00 (51,255,0) nicht korrekt
darstellt.
Als Webbrowser erstmals eingeführt wurden, konnten die meisten Computer lediglich 256 Farben (8 Bit pro Channel
- bpc) darstellen. Heutzutage können Computer Tausende oder Millionen Farben (16 und 32 Bit) darstellen, daher ist
die Rechtfertigung, die websichere Palette zu verwenden, kaum noch gültig, wenn Sie Ihre Site für Benutzer mit
aktuellen Computersystemen entwickeln.
Ein Grund, die websichere Farbpalette zu verwenden, ist gegeben, wenn Sie Anwendungen für alternative
Internetgeräte wie beispielsweise PDAs und Mobiltelefone entwickeln. Viele dieser Geräte haben lediglich
Schwarzweiß-Displays (1 Bit) oder Displays mit 256 Farben (8 Bit).
Für die Paletten „Farbwürfel“ (Standardeinstellung) und „Kontinuierlicher Farbton“ in Dreamweaver wird die
websichere Palette mit 216 Farben verwendet. Wenn Sie eine Farbe aus diesen Paletten wählen, wird der
Hexadezimalwert der Farbe angezeigt.
Wenn Sie eine Farbe außerhalb des websicheren Bereichs auswählen möchten, öffnen Sie den System-Farbwähler
durch Klicken auf die Schaltfläche „Systemfarben“ rechts oben im Dreamweaver-Farbwähler. Der System-Farbwähler
ist nicht auf websichere Farben beschränkt.
Die UNIX-Browserversionen verwenden eine andere Farbpalette als die Windows- und Macintosh-Versionen. Wenn
Sie ausschließlich für UNIX-Browser entwickeln (oder Ihre Zielgruppe Windows- oder Macintosh-Systeme mit 24-
Bit-Monitoren oder UNIX-Systeme mit 8-Bit-Monitoren einsetzt), sollten Sie eventuell Hexadezimalwerte aus
Kombinationen von 00, 40, 80, BF und FF verwenden, um websichere Farben für SunOS zu erhalten.
235
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Farbauswahl verwenden
In Dreamweaver enthalten viele Dialogfelder und auch der Eigenschafteninspektor für viele Seitenelemente ein
Farbfeld, über das ein Farbwähler geöffnet werden kann. Mit dem Farbwähler wählen Sie eine Farbe für ein
Seitenelement aus. Außerdem können Sie die standardmäßige Textfarbe für Seitenelemente festlegen.
1 Klicken Sie in einem Dialogfeld oder im Eigenschafteninspektor auf ein Farbfeld.
Der Farbwähler wird eingeblendet.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie mit der Pipette ein Farbfeld in der Palette aus. Alle Farben in den Farbpaletten „Farbwürfel“
(Standardeinstellung) und „Kontinuierlicher Farbton“ sind websicher. Die Farben in anderen Paletten sind nicht
websicher.
• Sie können mit der Pipette eine Farbe von einer beliebigen Stelle des Bildschirms aufnehmen, sogar von Positionen
außerhalb der Dreamweaver-Fenster. Um eine Farbe vom Desktop oder einer anderen Anwendung aufzunehmen,
klicken Sie mit der Maustaste und halten Sie diese gedrückt; dadurch bleibt die Pipette aktiviert. Wählen Sie
daraufhin eine Farbe außerhalb von Dreamweaver aus. Wenn Sie auf den Desktop oder eine andere Anwendung
klicken, wird von Dreamweaver die Farbe aufgenommen, auf die Sie zuvor geklickt haben. Wenn Sie jedoch zu
einer anderen Anwendung wechseln, müssen Sie möglicherweise auf ein Dreamweaver-Fenster klicken, um die
Arbeit in Dreamweaver fortzusetzen.
• Mit dem Popupmenü in der oberen rechten Ecke des Farbwählers können Sie Ihre Farbauswahl erweitern. Sie
haben die Wahl zwischen „Farbwürfel“, „Kontinuierlicher Farbton“, „Windows“, „Mac OS“ und „Graustufen“.
Note: Die Farbpaletten „Farbwürfel“ und „Kontinuierlicher Farbton“ sind websicher, „Windows“, „Mac OS“ und
„Graustufen“ dagegen nicht.
• Um die aktuelle Farbe zu löschen, ohne eine andere Farbe zu wählen, klicken Sie auf die Schaltfläche
„Standardfarbe“ .
• Um den Systemfarbenwähler zu öffnen, klicken Sie auf die Schaltfläche „Systemfarbenauswahl“ .
Ansicht vergrößern und verkleinern
Mit Dreamweaver können Sie die Ansicht eines Dokuments vergrößern (einzoomen), um die Pixelgenauigkeit von
Grafiken zu überprüfen, kleine Elemente einfacher auszuwählen, Seiten mit kleinem Text bzw. große Seiten zu
entwerfen usw.
Note: Die Zoomwerkzeuge sind nur in der Entwurfsansicht verfügbar.
More Help topics
“Überblick über die Statusleiste” on page 13
Ansicht einer Seite vergrößern oder verkleinern
1 Klicken Sie auf das Zoomwerkzeug (das Vergrößerungsglas) in der unteren rechten Ecke des Dokumentfensters.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie an der Stelle, die Sie vergrößern möchten, so oft auf der Seite, bis die gewünschte Vergrößerungsstufe
erreicht wurde.
236
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Ziehen Sie einen Rahmen über den Bereich auf der Seite, den Sie näher heranholen möchten, und lassen Sie die
Maustaste los.
• Wählen Sie eine voreingestellte Vergrößerungsstufe im Popupmenü „Vergrößerung einstellen“.
• Geben Sie eine Vergrößerungsstufe in das Textfeld „Vergrößerung einstellen“ ein.
Sie können die Ansicht auch ohne das Zoomwerkzeug vergrößern, indem Sie Strg+= (Windows) bzw. Befehl+=
(Macintosh) drücken.
3 Um die Vergrößerungsstufe zu verkleinern, wählen Sie das Zoomwerkzeug aus, drücken Sie die Alt-Taste
(Windows) bzw. die Wahltaste (Macintosh) und klicken Sie auf die Seite.
Sie können die Ansicht auch ohne das Zoomwerkzeug verkleinern, indem Sie Strg+- (Windows) bzw. Befehl+-
(Macintosh) drücken.
Seite nach dem Vergrößern oder Verkleinern der Ansicht bearbeiten
❖ Klicken Sie auf das Auswahlwerkzeug (das Zeigersymbol) in der unteren rechten Ecke des Dokumentfensters und
anschließend auf die Seite.
Seite nach dem Vergrößern oder Verkleinern der Ansicht schwenken
1 Klicken Sie auf das Handwerkzeug (das Handsymbol) in der unteren rechten Ecke des Dokumentfensters.
2 Ziehen Sie die Seite.
Dokumentfenster mit einer Auswahl füllen
1 Wählen Sie ein Element auf der Seite aus.
2 Wählen Sie „Ansicht“ > „Auswahl anpassen“.
Dokumentfenster mit einer ganzen Seite füllen
❖ Wählen Sie „Ansicht“ > „Alles anpassen“.
Dokumentfenster mit der gesamten Breite einer Seite füllen
❖ Wählen Sie „Ansicht“ > „Breite anpassen“.
Voreinstellungen für Downloadzeit und -größe
festlegen
Bei der Berechnung der Größe wird von Dreamweaver der gesamte Inhalt der Seite berücksichtigt, einschließlich aller
verknüpften Objekte, wie beispielsweise Bilder und Plug-Ins. Dreamweaver berechnet die geschätzte Downloadzeit
anhand der Verbindungsgeschwindigkeit, die Sie in den Voreinstellungen für die Statusleiste angegeben haben. Die
tatsächliche Downloadzeit kann jedoch variieren und richtet sich nach den allgemeinen Internetbedingungen.
Beim Überprüfen der Downloadzeit für eine bestimmte Webseite hat sich die 8-Sekunden-Regel als Orientierungshilfe
bewährt. Nach dieser Regel warten die meisten Benutzer nicht länger als acht Sekunden, bis eine Seite geladen ist.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
237
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
2 Wählen Sie links in der Kategorienliste die Option „Statusleiste“ aus.
3 Wählen Sie die Verbindungsgeschwindigkeit, die zur Berechnung der Downloadzeit verwendet werden soll, und
klicken Sie auf „OK“.
More Help topics
“Fenstergröße und Verbindungsgeschwindigkeit festlegen” on page 22
Arbeiten mit Text
Dokumenten Text hinzufügen
Sie können einem Dreamweaver-Dokument Text hinzufügen, indem Sie den Text direkt im Dokumentfenster
eingeben oder den Text ausschneiden und einfügen. Außerdem können Sie Text aus anderen Dokumenten
importieren.
Sie können zum Einfügen von Text in ein Dreamweaver-Dokument den Befehl „Einfügen“ bzw. „Inhalte einfügen“
verwenden. Mit dem Befehl „Inhalte einfügen“ können Sie für das Format von eingefügtem Text genauer definieren.
Wenn Sie beispielsweise Text aus einem formatierten Word-Dokument in das Dreamweaver-Dokument einfügen,
jedoch alle Formatierungen entfernen möchten, damit Sie auf den eingefügten Text ein eigenes CSS-Stylesheet
anwenden können, können Sie den Text in Word auswählen, ihn in die Zwischenablage kopieren und mit dem Befehl
„Inhalte einfügen“ die Option auswählen, mit der nur Text eingefügt wird.
Wenn Sie mit dem Befehl „Einfügen“ Text aus anderen Anwendungen einfügen, können Sie Voreinstellungen für das
Einfügen als Standardoptionen festlegen.
Note: Mit den Tastaturbefehlen Strg+V (Windows) und Befehl+V (Macintosh) wird in der Codeansicht nur Text (ohne
Formatierung) eingefügt.
❖ Führen Sie einen der folgenden Schritte aus, um Text in ein Dokument einzufügen:
• Geben Sie Text direkt im Dokumentfenster ein.
• Kopieren Sie Text aus einer anderen Anwendung in die Zwischenablage, wechseln Sie zu Dreamweaver, setzen Sie
die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die gewünschte Stelle und wählen Sie
„Bearbeiten“ > „Einfügen“ oder „Bearbeiten“ > „Inhalte einfügen“.
Wenn Sie „Bearbeiten“ > „Inhalte einfügen“ wählen, wird ein Dialogfeld mit diversen Formatierungsoptionen für das
Einfügen angezeigt.
Sie können Text außerdem mit den folgenden Tastaturbefehlen einfügen:
Einfügeoption Tastaturbefehl
Einfügen Strg+V (Windows)
Befehl+V (Macintosh)
Inhalte einfügen Strg+Umschalt+V (Windows)
Befehl+Umschalt+V (Macintosh)
238
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Sonderzeichen einfügen
Einige Sonderzeichen werden in HTML durch einen Namen oder eine Zahl dargestellt, die als Entität bezeichnet
wird. HTML enthält Entitätsnamen für Zeichen wie das Copyright-Symbol (
&copy;), das Et-Zeichen (&) und das
Symbol für eingetragene Marken (
&reg;). Jede Entität hat einen Namen (z. B. &mdash;) und ein numerisches
Gegenstück (z. B.
&#151;).
HTML verwendet spitze Klammern (<>) im Code. Aus diesem Grund müssen Sie Sonderzeichen für „größer als“ oder
„kleiner als“ verwenden, damit diese Zeichen von Dreamweaver nicht als Code interpretiert werden. In diesem Fall
verwenden Sie „&gt;“ für „größer als“ (>) und „&lt;“ für „kleiner als“ (<).
Leider werden auf älteren Browsern viele dieser benannten Entitäten nicht richtig angezeigt.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie ein Sonderzeichen einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie den Namen des Zeichens im Untermenü „Einfügen“ > „HTML“ > „Sonderzeichen“ aus.
• Klicken Sie in der Kategorie „Text“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Zeichen“ und wählen Sie im
Untermenü das gewünschte Zeichen aus.
Es stehen zahlreiche weitere Sonderzeichen zur Verfügung. Um eines dieser Sonderzeichen auszuwählen, wählen Sie
„Einfügen“ > „HTML“ > „Sonderzeichen“ > „Weitere“ aus oder klicken Sie in der Kategorie „Text“ des Bedienfelds
„Einfügen“ auf die Schaltfläche „Zeichen“ und wählen Sie die Option „Andere Zeichen“ aus. Wählen Sie im Dialogfeld
„Anderes Zeichen einfügen“ ein Zeichen aus und klicken Sie auf „OK“.
Leerzeichen zwischen Zeichen einfügen
In HTML ist nur ein Leerzeichen zwischen zwei anderen Zeichen möglich. Wenn Sie größere Leerräume haben
möchten, müssen Sie geschützte Leerzeichen einfügen. Sie können im Dialogfeld „Voreinstellungen“ festlegen, dass
einem Dokument automatisch geschützte Leerzeichen hinzugefügt werden.
Geschützte Leerzeichen einfügen
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „HTML“ > „Sonderzeichen“ > „Geschütztes Leerzeichen“.
• Drücken Sie Strg+Umschalt+Leertaste (Windows) bzw. Wahltaste+Leertaste (Macintosh).
• Klicken Sie in der Kategorie „Text“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Zeichen“ und wählen Sie das
Symbol „Geschütztes Leerzeichen“ aus.
Voreinstellung für geschützte Leerzeichen festlegen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Aktivieren Sie in der Kategorie „Allgemein“ die Option „Mehrere aufeinanderfolgende Leerzeichen zulassen“.
Absatzabstände hinzufügen
Dreamweaver funktioniert ähnlich wie viele Textverarbeitungsprogramme: Durch Drücken der Eingabetaste
(Windows) bzw. von Return (Macintosh) erstellen Sie einen neuen Absatz. Webbrowser fügen zwischen Absätzen
automatisch eine Leerzeile ein. Eine einzelne Leerzeile können Sie hinzufügen, indem Sie einen Zeilenumbruch
einfügen.
239
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Neue Absätze hinzufügen
❖ Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Zeilenumbruch einfügen
❖ Führen Sie einen der folgenden Schritte aus:
• Drücken Sie Umschalt+Eingabetaste (Windows) bzw. Umschalt+Return (Macintosh).
• Wählen Sie „Einfügen“ > „HTML“ > „Sonderzeichen“ > „Zeilenumbruch“.
• Klicken Sie in der Kategorie „Text“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Zeichen“ und wählen Sie das
Symbol „Zeilenumbruch“ aus.
Aufzählungslisten und nummerierte Listen erstellen
Sie können nummerierte (geordnete) Listen, Listen mit Aufzählungspunkten (ungeordnete Listen) und
Definitionslisten aus bereits vorhandenem Text oder aus Text erstellen, den Sie neu in das Dokumentfenster eingeben.
Definitionslisten verwenden keine vorgestellten Zeichen wie Aufzählungspunkte oder Zahlen und werden häufig für
Glossare und Beschreibungen verwendet. Listen können auch verschachtelt sein. Verschachtelte Listen enthalten
weitere Listen. Sie können beispielsweise eine geordnete Liste oder eine Liste mit Aufzählungspunkten innerhalb einer
anderen Liste des gleichen oder eines anderen Listentyps erstellen.
Im Dialogfeld „Listeneigenschaften“ legen Sie das Erscheinungsbild einer gesamten Liste oder eines einzelnen
Listenelements fest. Sie können den Nummerierungsstil wählen, den Zähler zurücksetzen oder den
Aufzählungspunkt-Stil für einzelne Einträge oder die gesamte Liste definieren.
More Help topics
“CSS-Eigenschaften festlegen” on page 146
Neue Listen erstellen
1 Setzen Sie die Einfügemarke an die Stelle im Dreamweaver-Dokument, an der Sie die Liste einfügen möchten.
Führen Sie dann einen der folgenden Schritte aus:
• Klicken Sie im HTML-Eigenschafteninspektor auf die Schaltfläche „Aufzählungsliste“ oder „Nummerierte Liste“.
• Wählen Sie „Formatieren“ > „Liste“ und dann den gewünschten Listentyp aus: „Ungeordnete Liste“ (Aufzählung),
„Geordnete Liste“ (nummeriert) oder „Definitionsliste“.
Der Aufzählungspunkt bzw. die Nummer des ersten Listenelements wird im Dokumentfenster angezeigt.
2 Geben Sie den Text für das Listenelement ein und drücken Sie anschließend die Eingabetaste (Windows) bzw.
Return (Macintosh), um ein weiteres Listenelement zu erstellen.
3 Drücken Sie zweimal die Eingabetaste (Windows) bzw. Return (Macintosh), um die Liste fertig zu stellen.
Liste aus bereits vorhandenem Text erstellen
1 Wählen Sie die Absätze aus, die in eine Liste umgewandelt werden sollen.
2 Klicken Sie im HTML-Eigenschafteninspektor auf die Schaltfläche „Aufzählungsliste“ oder „Nummerierte Liste“
oder wählen Sie „Formatieren“ > „Liste“ und dann den gewünschten Listentyp aus: „Ungeordnete Liste“,
„Geordnete Liste“ oder „Definitionsliste“.
Verschachtelte Listen erstellen
1 Wählen Sie die Listenelemente aus, die die Unterpunkte bilden sollen.
240
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
2 Klicken Sie im HTML-Eigenschafteninspektor auf die Schaltfläche „Blockzitat“ oder wählen Sie „Formatieren“ >
„Einzug“ aus.
Dreamweaver rückt den Text ein und erstellt eine separate Liste mit den HTML-Attributen der ursprünglichen Liste.
3 Weisen Sie dem eingerückten Text einen neuen Listentyp oder Stil zu, indem Sie nach dem oben beschriebenen
Verfahren vorgehen.
Eigenschaften einer gesamten Liste festlegen
1 Erstellen Sie im Dokumentfenster mindestens ein Listenelement. Der neue Stil wird automatisch auch auf alle
weiteren Einträge übertragen, die Sie hinzufügen.
2 Setzen Sie die Einfügemarke in den Text des Listenelements und wählen Sie „Formatieren“ > „Liste“ >
„Eigenschaften“ aus, um das Dialogfeld „Listeneigenschaften“ zu öffnen.
3 Wählen Sie die gewünschten Optionen für die Liste aus:
Listentyp Bestimmt die Eigenschaften der ganzen Liste. „Listenelement“ hingegen bestimmt die Eigenschaften eines
einzelnen Listenelements. Wählen Sie im Popupmenü „Aufzählungsliste“, „Nummerierte Liste“, „Verzeichnisliste“
oder „Menüliste“ aus. Je nach gewähltem Listentyp werden im Dialogfeld verschiedene Optionen angezeigt.
Stil Legt den Stil für die Nummerierung oder Aufzählungszeichen fest, der für eine geordnete bzw. ungeordnete Liste
verwendet werden soll. Dieser Stil wird allen Elementen der Liste zugewiesen, sofern Sie den einzelnen Elementen
innerhalb der Liste keinen neuen Stil zuweisen.
Zähler starten Legt den Wert des ersten Elements einer nummerierten Liste fest.
4 Klicken Sie auf „OK“, um die gewählten Einstellungen zu übernehmen.
Eigenschaften für ein einzelnes Listenelement festlegen
1 Setzen Sie die Einfügemarke im Dokumentfenster in den Text des Listenelements.
2 Wählen Sie „Formatieren“ > „Liste“ > „Eigenschaften“ aus.
3 Wählen Sie unter „Listenelement“ die gewünschten Optionen:
Neuer Stil Legt einen Stil für das ausgewählte Listenelement fest. Die Stile im Popupmenü „Neuer Stil“ richten sich
nach der Art der Liste, die im Popupmenü „Listentyp“ angezeigt wird. Wenn beispielsweise im Popupmenü
„Listentyp“ die Option „Aufzählungsliste“ angezeigt wird, stehen im Popupmenü „Neuer Stil“ nur Optionen für
Aufzählungslisten zur Auswahl.
Zähler zurücksetzen auf Ermöglicht die Festlegung einer Zahl, mit der die Nummerierung der Listenelemente
beginnen soll.
4 Klicken Sie auf „OK“, um die Optionen zu übernehmen.
Text suchen und ersetzen
Mit dem Befehl „Suchen und ersetzen“ können Sie in einem Dokument oder einer Gruppe von Dokumenten nach
Text, HTML-Tags und Attributen suchen. Im Bedienfeld „Suchen“ in der Bedienfeldgruppe „Ergebnisse“ werden die
Suchergebnisse von „Alle suchen“ angezeigt.
Note: Mit den folgenden Befehlen können Sie nach Dateien in einer Site suchen: „Auf lokaler Site lokalisieren“ und „Auf
entfernter Site lokalisieren“.
241
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
More Help topics
“Anzeigen von Code” on page 322
“Reguläre Ausdrücke” on page 320
Text suchen und ersetzen
1 Öffnen Sie das Dokument, das durchsucht werden soll, oder wählen Sie im Bedienfeld „Dateien“ mehrere
Dokumente oder einen Ordner aus.
2 Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“.
3 Legen Sie mit der Option „Suchen in“ fest, welche Dateien durchsucht werden sollen:
Ausgewählter Text Beschränkt die Suche auf den im aktiven Dokument gegenwärtig ausgewählten Text.
Aktuelles Dokument Beschränkt den Suchvorgang auf das aktive Dokument.
Geöffnete Dokumente Durchsucht alle gegenwärtig geöffneten Dokumente.
Datei oder Ordner auswählen Beschränkt den Suchvorgang auf einen bestimmten Ordner. Nachdem Sie „Ordner“
ausgewählt haben, klicken Sie auf das Ordnersymbol, um zu dem Ordner zu wechseln, der durchsucht werden soll.
Ausgewählte Dateien der Site Beschränkt den Suchvorgang auf die Dateien und Ordner, die gegenwärtig im
Bedienfeld „Dateien“ ausgewählt sind.
Gesamte aktuelle lokale Site Dehnt die Suche auf alle HTML-Dokumente, Bibliotheksdateien und Textdokumente in
der aktuellen Site aus.
4 Geben Sie im Popupmenü „Suchen“ an, wonach Sie suchen möchten:
Quellcode Dient zur Suche nach bestimmten Textzeichenfolgen im HTML-Quellcode. Sie können mit dieser Option
zwar nach bestimmten Tags suchen, aber die Option „Spezifisches Tag“ ist hierfür besser geeignet.
Text Dient zur Suche nach bestimmten Textzeichenfolgen im Dokumenttext. Dabei wird HTML-Code ignoriert, der
die Zeichenfolge unterbricht. Bei der Suche nach
der schwarze Hund würden also die beiden folgenden Textstellen
gefunden:
der schwarze Hund und der <i>schwarze</i> Hund.
Text (erweitert) Dient zur Suche nach bestimmten Textzeichenfolgen, die sich entweder innerhalb oder außerhalb
von Tags befinden. Angenommen, Ihr Dokument enthält den nachfolgenden HTML-Code, dann wird bei der Suche
nach der Textzeichenfolge
bemüht außerhalb des i-Tags nur das zweite Auftreten des Wortes bemüht gefunden:
Peter <i>bemüht</i> sich, seine Arbeit pünktlich zu erledigen, aber er schafft es nicht immer.
Er bemüht sich sehr.
Spezifisches Tag Dient zur Suche nach bestimmten Tags, Attributen und Attributwerten, z. B. nach allen td-Tags, bei
denen
valign auf top eingestellt ist.
Note: Durch Drücken von Strg+Eingabetaste oder Umschalt+Eingabetaste (Windows) bzw. Ctrl+Return,
Umschalt+Return oder Befehl+Return (Macintosh) können Sie Zeilenumbrüche innerhalb der Suchfelder einfügen. Auf
diese Weise können Sie nach Absatzmarken suchen. Stellen Sie sicher, dass bei dieser Suche das Kontrollkästchen
„Unterschiede bei Leerraum ignorieren“ deaktiviert ist, wenn Sie keine regulären Ausdrücke verwenden. Bei dieser Suche
wird explizit eine Absatzmarke gesucht, nicht nur ein ein Zeilenumbruch. So wird z. B. das
<br>-Tag oder <p>-Tag nicht
gefunden. Absatzmarken werden in der Entwurfsansicht als Leerraum und nicht als Zeilenumbrüche dargestellt.
5 Wählen Sie die folgenden Optionen, um die Suche einzuschränken oder zu erweitern:
Groß-/Kleinschreibung Bewirkt, dass nur Text gefunden wird, dessen Schreibweise dem gesuchten Text genau
entspricht. Wenn Sie beispielsweise den Text
das große Rennen suchen, wird der Text Das Große Rennen nicht
gefunden.
242
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Leerraum ignorieren Bewirkt, dass alle Leerräume als ein einzelnes Leerzeichen interpretiert werden. Wenn Sie diese
Option markieren, entspricht
dieses Wort zwar der Zeichenfolge dieses Wort und der Zeichenfolge
dieses Wort, nicht jedoch der Zeichenfolge diesesWort. Wenn Sie das Kontrollkästchen „Regulären
Ausdruck verwenden“ aktiviert haben, steht diese Option nicht zur Verfügung. Bei regulären Ausdrücken müssen Sie
explizit angeben, dass Leerräume ignoriert werden sollen. Beachten Sie, dass die Tags
<p> und <br> nicht als Leerraum
gelten.
Ganzes Wort Bewirkt, dass nur Text gefunden wird, der einem oder mehreren Worten genau entspricht.
Note: Diese Option ist vergleichbar mit dem Suchmuster nach regulären Ausdrücken nach einem Suchbegriff der mit /b,
der Wortabgrenzung für reguläre Ausdrücke, anfängt und endet.
Regulären Ausdruck verwenden Bewirkt, dass bestimmte Zeichen und kurze Zeichenfolgen (z. B. ?, *, \w und \b) in
der Suchzeichenfolge als Operatoren für reguläre Ausdrücke interpretiert werden. Wenn Sie zum Beispiel nach der
Textzeichenfolge
der b\w*\b Hund suchen, wird sowohl der braune Hund als auch der bellende Hund gefunden.
Note: Wenn Sie in der Codeansicht Änderungen am Dokument vornehmen und anschließend versuchen, andere
Elemente als Quellcode zu suchen und zu ersetzen, erscheint eine Meldung, dass Dreamweaver vor dem Suchvorgang
zunächst die beiden Ansichten synchronisiert.
6 Wenn Sie nur suchen und nicht ersetzen möchten, klicken Sie auf die Schaltflächen „Weitersuchen“ oder „Alle
suchen“.
Weitersuchen Springt immer zur nächsten Stelle des gesuchten Textes oder Tags im aktuellen Dokument. Wenn es
keine Fundstellen des gesuchten Tags im aktuellen Dokument mehr gibt, fährt Dreamweaver mit dem nächsten
Dokument fort, wenn Sie in mehreren Dokumenten suchen.
Alle suchen Öffnet das Bedienfeld „Suchen“ in der Bedienfeldgruppe „Ergebnisse“. Wenn Sie die Suche nur in einem
Dokument durchführen, zeigt „Alle suchen“ alle Fundstellen des Suchtexts oder Tags mit einem Teil des Kontexts an.
Wenn Sie die Suche in einem Verzeichnis oder einer Site durchführen, zeigt „Alle suchen“ die Liste der Dokumente
an, die den gesuchten Text oder das gesuchte Tag enthalten.
7 Um den gefundenen Text bzw. ein Tag zu ersetzen, klicken Sie auf „Ersetzen“ oder „Alle ersetzen“.
8 Klicken Sie abschließend auf „Schließen“.
Eine weitere Suche durchführen, ohne das Dialogfeld „Suchen und ersetzen“ anzuzeigen
❖ Drücken Sie F3 (Windows) bzw. Befehl+G (Macintosh).
Bestimmte Suchergebnisse im Kontext anzeigen
1 Wählen Sie „Fenster“ > „Ergebnisse“, um das Bedienfeld „Suchen“ einzublenden.
2 Doppelklicken Sie im Bedienfeld „Suchen“ auf eine Zeile.
Wenn Sie die aktuelle Datei durchsuchen, wird im Dokumentfenster die Zeile mit dem Suchergebnis angezeigt.
Wenn Sie eine Gruppe von Dateien durchsuchen, wird die Datei mit dem Suchergebnis geöffnet.
Dieselbe Suche erneut ausführen
❖ Klicken Sie auf die Schaltfläche zum Suchen und Ersetzen.
Suchvorgänge anhalten
❖ Klicken Sie auf die Schaltfläche „Anhalten“.
243
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Spezifisches Tag suchen
Mit dem Dialogfeld „Suchen und ersetzen“ können Sie nach Text oder Tags in einem Dokument suchen und
gefundenen Text und gefundene Tags durch anderen Text oder andere Tags ersetzen.
1 Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“.
2 Wählen Sie im Popupmenü „Suchen“ die Option „Spezifisches Tag“.
3 Wählen Sie im Popupmenü neben dem Popupmenü „Suchen“ ein bestimmtes Tag oder [beliebiges Tag] aus
oder geben Sie im Textfeld einen Tag-Namen ein.
4 (Optional) Wählen Sie eine der folgenden Optionen, um den Suchvorgang einzuschränken:
Mit Attribut Dient zum Auswählen eines Attributs, das im Tag enthalten sein muss. Sie können einen bestimmten
Wert für das Attribut angeben oder
[beliebiger Wert] wählen.
Ohne Attribut Dient zum Auswählen eines Attributs, das nicht im Tag enthalten sein darf. Wählen Sie diese Option,
wenn Sie beispielsweise alle
IMG-Tags suchen möchten, die nicht das Attribut ALT enthalten.
Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss. In <b><font
size="4">heading 1</font></b> ist beispielsweise das font-Tag im b-Tag eingeschlossen.
Ohne Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag nicht enthalten darf.
Innerhalb des Tags Gibt an, dass sich das gesuchte Tag innerhalb eines bestimmten anderen Tags befinden muss.
Außerhalb des Tags Gibt an, dass sich das gesuchte Tag nicht innerhalb eines bestimmten anderen Tags befinden darf.
5 (Optional) Klicken Sie auf die Schaltfläche mit dem Pluszeichen und wiederholen Sie Schritt 3, um die Suche noch
weiter einzuschränken.
6 Wenn Sie keine der Optionen in Schritt 3 und 4 gewählt haben, klicken Sie auf die Schaltfläche mit dem
Minuszeichen (–), um das Optionen-Popupmenü zu schließen.
7 Wenn Sie eine Aktion durchführen möchten, sobald ein Tag gefunden wird (z. B. Entfernen oder Ersetzen des
Tags), wählen Sie die gewünschte Aktion im Popupmenü „Aktion“ aus und geben Sie ggf. weitere zum
Durchführen der Aktion notwendige Details an.
Bestimmte Textstellen suchen (erweitert)
Mit dem Dialogfeld „Suchen und ersetzen“ können Sie nach Text oder Tags in einem Dokument suchen und
gefundenen Text und gefundene Tags durch anderen Text oder andere Tags ersetzen.
1 Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“.
2 Wählen Sie im Popupmenü „Suchen“ die Option „Text (erweitert)“.
3 Geben Sie im Textfeld neben dem Popupmenü „Suchen“ Text ein.
Geben Sie zum Beispiel
Unbenannt ein.
4 Wählen Sie entweder „innerhalb des Tags“ oder „außerhalb des Tags“ und wählen Sie dann im Popupmenü rechts
daneben ein Tag aus.
Wählen Sie beispielsweise „Innerhalb des Tags“ und dann das Tag
title.
5 (Optional) Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um den Suchvorgang mit einer der folgenden
Optionen einzuschränken:
Mit Attribut Dient zum Auswählen eines Attributs, das im Tag enthalten sein muss. Sie können einen bestimmten
Wert für das Attribut angeben oder
[beliebiger Wert] wählen.
244
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Ohne Attribut Dient zum Auswählen eines Attributs, das nicht im Tag enthalten sein darf. Wählen Sie diese Option,
wenn Sie beispielsweise alle
IMG-Tags suchen möchten, die nicht das Attribut ALT enthalten.
Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss. In <b><font
size="4">heading 1</font></b> ist beispielsweise das font-Tag im b-Tag eingeschlossen.
Ohne Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag nicht enthalten darf.
Innerhalb des Tags Gibt an, dass sich das gesuchte Tag innerhalb eines bestimmten anderen Tags befinden muss.
Außerhalb des Tags Gibt an, dass sich das gesuchte Tag nicht innerhalb eines bestimmten anderen Tags befinden darf.
6 (Optional) Wiederholen Sie Punkt 4, um die Suche weiter einzuschränken.
Abkürzungen und Akronyme definieren
HTML bietet Tags, mit denen Sie Abkürzungen und Akronyme für Suchmaschinen, Rechtschreibprüfprogramme,
Übersetzungsprogramme oder Sprach-Synthesizer auf Ihrer Seite definieren können. Sie könnten beispielsweise
festlegen, dass auf Ihrer Seite die Abkürzung MB für Maschinenbau steht bzw. das Akronym WHO für die
Weltgesundheitsorganisation (World Health Organization).
1 Wählen Sie die Abkürzung oder das Akronym im Text auf Ihrer Seite.
2 Wählen Sie „Einfügen“ > „HTML“ > „Textobjekte“ > „Abkürzung“ bzw. „Einfügen“ > „HTML“ > „Textobjekte“ >
„Akronym“.
3 Geben Sie den vollständigen Text des Akronyms bzw. der Abkürzung ein.
4 Geben Sie die Sprache ein, wobei „en“ für Englisch, „de“ für Deutsch oder „it“ für Italienisch steht.
Voreinstellungen für das Kopieren und Einfügen festlegen
Wenn Sie mit „Bearbeiten“ > „Einfügen“ Text aus anderen Anwendungen einfügen, können Sie spezielle
Voreinstellungen für das Einfügen als Standardoptionen festlegen. Wenn Sie Text beispielsweise immer als reinen
Text oder Text mit einfacher Formatierung einfügen möchten, können Sie die entsprechende Standardoption in der
Kategorie „Kopieren/Einfügen“ des Dialogfelds „Voreinstellungen“ festlegen.
Note: Zum Einfügen von Text in ein Dreamweaver-Dokument können Sie entweder den Befehl „Einfügen“ oder den
Befehl „Inhalte einfügen“ verwenden. Mit dem Befehl „Inhalte einfügen“ können Sie für das Format von eingefügtem Text
genauer definieren. Wenn Sie beispielsweise Text aus einem formatierten Word-Dokument in das Dreamweaver-
Dokument einfügen, jedoch alle Formatierungen entfernen möchten, damit Sie auf den eingefügten Text ein eigenes CSS-
Stylesheet anwenden können, können Sie den Text in Word auswählen, ihn in die Zwischenablage kopieren und mit dem
Befehl „Inhalte einfügen“ die Option auswählen, mit der nur Text eingefügt wird.
Note: In der Kategorie „Kopieren/Einfügen“ des Dialogfelds „Voreinstellungen“ festgelegte Voreinstellungen gelten nur
für Material, das Sie in der Entwurfsansicht einfügen.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Klicken Sie auf die Kategorie „Kopieren/Einfügen“.
3 Legen Sie die folgenden Optionen wie gewünscht fest und klicken Sie auf „OK“:
Nur Text Ermöglicht das Einfügen von unformatiertem Text. Wenn der Originaltext formatiert ist, werden alle
Formatierungen einschließlich der Zeilenumbrüche und Absätze entfernt.
245
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Text mit Struktur Ermöglicht das Einfügen von Text unter Beibehaltung seiner Struktur. Einfache Formatierungen
gehen jedoch verloren. Sie können z. B. Text einfügen und die Struktur von Absätzen, Listen und Tabellen beibehalten,
ohne Fett-, Kursiv- oder sonstige Formatierungen beizubehalten.
Text mit Struktur und einfacher Formatierung Ermöglicht das Einfügen von strukturiertem und einfachem mit
HTML formatiertem Text (z. B. Absätze und Tabellen sowie Text, der mit dem
b-, i-, u-, strong-, em-, hr-, abbr- oder
acronym-Tag formatiert wurde).
Text mit Struktur und vollständiger Formatierung Ermöglicht das Einfügen von Text unter Beibehaltung der
vollständigen Struktur, der HTML-Formatierung und der CSS-Stile.
Note: Bei der Option zum Einfügen der vollständigen Formatierung bleiben allerdings keine CSS-Stile erhalten, die aus
einem externen Stylesheet stammen. Ferner bleiben Stile nicht erhalten, wenn die Anwendung, aus der die Stile stammen,
Stile beim Einfügen in die Zwischenablage nicht erhält.
Zeilenumbrüche beibehalten Ermöglicht die Beibehaltung von Zeilenumbrüchen im eingefügten Text. Diese Option
ist deaktiviert, wenn Sie „Nur Text“ ausgewählt haben.
Abstand der Word-Absätze optimieren Wählen Sie diese Option aus, wenn Sie „Text mit Struktur“ oder „Text mit
Struktur und einfacher Formatierung“ aktiviert haben und beim Einfügen von Text zusätzliche Abstände zwischen
Absätzen vermeiden möchten.
Texteigenschaften im Eigenschafteninspektor festlegen
Mit dem Eigenschafteninspektor können Sie HTML- oder CSS-Formatierungen anwenden. Beim Anwenden der
HTML-Formatierung werden in Dreamweaver im „body“-Bereich der Seite die entsprechenden Eigenschaften zum
HTML-Code hinzugefügt. Beim Anwenden der CSS-Formatierung werden die Eigenschaften in Dreamweaver in den
„head“-Bereich des Dokuments oder in ein separates Stylesheet geschrieben.
Note: Beim Erstellen von CSS-Inline-Stilen wird der Code für Stilattribute in Dreamweaver direkt in das Body-Tag der
Seite eingefügt.
Text formatieren (CSS und HTML)
In Dreamweaver können Sie den Text ähnlich wie in einem normalen Textverarbeitungsprogramm formatieren. Sie
können Standardformate (Absatz, Überschrift 1, Überschrift 2 usw.) für einen Textblock definieren. Darüber hinaus
können Sie die Schriftart, Größe, Farbe und Ausrichtung von ausgewähltem Text ändern oder Textstile wie „Fett“,
„Kursiv“, „Code“ (nicht proportional) und „Unterstrichen“ zuweisen.
Dreamweaver verfügt über zwei Eigenschafteninspektoren, den CSS-Eigenschafteninspektor und den HTML-
Eigenschafteninspektor, die in einem Eigenschafteninspektor vereint sind. Wenn Sie den CSS-Eigenschafteninspektor
verwenden, formatiert Dreamweaver den Text anhand von Cascading Style Sheets (CSS). Mit CSS können
Webdesigner und Entwickler die Gestaltung von Webseiten präziser steuern. Außerdem bietet CSS verbesserte
Funktionen für die Barrierefreiheit sowie kleinere Dateigrößen. Mithilfe des CSS-Eigenschafteninspektors können Sie
auf vorhandene Stile zugreifen sowie neue Stile erstellen.
246
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
CSS ist eine Möglichkeit, das Layout einer Webseite präzise zu steuern, ohne deren Struktur zu beeinträchtigen. Durch
die Trennung der grafischen Designelemente (Schriftarten, Farben, Ränder usw.) von der logischen Struktur der
Webseite hat der Webdesigner mit CSS die Kontrolle sowohl über visuelle als auch über typografische Elemente, ohne
die Integrität des Inhalts zu gefährden. Darüber hinaus ermöglicht die Festlegung der Formatierung und des
Seitenlayouts mit einem einzigen, eindeutigen Codeblock – ohne auf Imagemaps,
font-Tags, Tabellen und
Platzhalterbilder (GIFs) zurückgreifen zu müssen – schnellere Downloads und eine optimierte Site-Pflege. Der
Codeblock stellt außerdem eine zentrale Stelle dar, von der aus Designattribute für mehrere Webseiten gesteuert
werden können.
Mit CSS erstellte Stile können direkt im Dokument oder für bessere Leistung und Flexibilität in einem externen
Stylesheet gespeichert werden. Wenn Sie ein externes Stylesheet an mehrere Webseiten anfügen, werden alle
Änderungen am Stylesheet automatisch auf alle Seiten übertragen. Der Zugriff auf alle CSS-Regeln für eine Seite
erfolgt über das Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“). Im Bedienfeld „CSS-Stile“ (Modus „Aktuell“) oder
über das Popupmenü „Zielregel“ des CSS-Eigenschafteninspektors können Sie auf die Regeln zugreifen, die für die
aktuelle Auswahl gelten.
Sie können den Text in Ihren Webseiten jedoch auch mit HTML-Markup-Tags formatieren. Wenn Sie anstelle von
CSS-Stilen HTML-Tags verwenden möchten, formatieren Sie den Text mit dem HTML-Eigenschafteninspektor.
Note: Sie können CSS und HTML 3.2-Formatierungen auf einer Seite kombinieren. Die Formatierung wird in
hierarchischer Folge zugewiesen: Die HTML 3.2-Formatierung setzt die Formatierung außer Kraft, die durch externe
CSS-Stylesheets zugewiesen wurde. Die in ein Dokument eingebetteten CSS-Stile haben Vorrang vor externen CSS-Stilen.
More Help topics
“Bedienfeld „CSS-Stile“ öffnen” on page 143
“Grundlegendes zu Cascading Stylesheets” on page 134
CSS-Regeln im Eigenschafteninspektor bearbeiten
1 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist, und klicken
Sie auf die Schaltfläche „CSS“.
2 Führen Sie einen der folgenden Schritte aus:
• Setzen Sie die Einfügemarke in einen Textblock, der mit der zu bearbeitenden Regel formatiert wurde. Die Regel
wird im Popupmenü „Zielregel“ angezeigt.
• Wählen Sie in diesem Popupmenü eine Regel aus.
3 Nehmen Sie mithilfe der verschiedenen Optionen des CSS-Eigenschafteninspektors die entsprechenden
Änderungen an der Regel vor.
Zielregel Die Regel, die Sie im CSS-Eigenschafteninspektor bearbeiten. Wenn ein vorhandener Stil auf den Text
angewendet wird und Sie in den Text auf der Seite klicken, wird die Regel für das Textformat angezeigt. Über das
Popupmenü „Zielregel“ können Sie darüber hinaus neue CSS-Regeln oder neue Inline-Stile erstellen oder vorhandene
Klassen auf ausgewählten Text anwenden. Beim Erstellen einer neuen Regel müssen Sie die Optionen im Dialogfeld
„Neue CSS-Regel“ festlegen. Weitere Informationen finden Sie in den Hyperlinks am Ende dieses Themenabschnitts.
Regel bearbeiten Öffnet das Dialogfeld „CSS-Regel-Definition“ für die Zielregel. Wenn Sie über das Popupmenü
„Zielregel“ die Option „Neue CSS-Regel“ auswählen und auf die Schaltfläche „Regel bearbeiten“ klicken, wird
stattdessen das Dialogfeld „Neue CSS-Regel“ zum Eingeben der Regeldefinition geöffnet.
CSS-Bedienfeld Öffnet das Bedienfeld „CSS-Stile“ und zeigt Eigenschaften der Zielregel in der aktuellen Ansicht an.
Schrift Ändert die Schriftart der Zielregel.
247
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Größe Legt die Schriftgröße der Zielregel fest.
Textfarbe Legt die ausgewählte Farbe als Schriftfarbe in der Zielregel fest. Wählen Sie eine websichere Farbe aus,
indem Sie auf das Farbfeld klicken, oder geben Sie einen Hexadezimalwert (z. B. #FF0000) in das daneben liegende
Textfeld ein.
Fett Fügt der Zielregel die bold-Eigenschaft hinzu.
Kursiv Fügt der Zielregel die italic-Eigenschaft hinzu.
Linksbündig, Zentrieren und Rechtsbündig Fügen der Zielregel die entsprechende alignment-Eigenschaft hinzu.
Note: Bei den Eigenschaften „Schrift“, „Größe“, „Textfarbe“, „Fett“, „Kursiv“ und „Ausrichtung“ werden immer die
Eigenschaften der Regel angezeigt, die für die aktuelle Auswahl im Dokumentfenster gilt. Wenn Sie Änderungen an
diesen Eigenschaften vornehmen, wirkt sich dies auf die Zielregel aus.
Ein Video-Tutorial zur Verwendung des CSS-Eigenschafteninspektors finden Sie unter
www.adobe.com/go/lrvid4041_dw_de.
HTML-Formatierung im Eigenschafteninspektor festlegen
1 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist, und klicken
Sie auf die Schaltfläche „HTML“.
2 Wählen Sie den Text aus, den Sie formatieren möchten.
3 Legen Sie die gewünschten Optionen für den ausgewählten Text fest:
Format Legt den Absatzstil des ausgewählten Textes fest. „Absatz“ bestimmt das Standardformat für ein <p>-Tag,
„Überschrift 1“ fügt ein
H1-Tag hinzu usw.
ID Weist Ihrer Auswahl eine ID zu. Im Popupmenü „ID“ werden (gegebenenfalls) alle im Dokument deklarierten
jedoch nicht verwendeten IDs angezeigt.
Klasse Zeigt den Klassenstil an, der derzeit auf den ausgewählten Text angewendet ist. Wenn keine Stile auf die
Auswahl angewendet wurden, wird im Popupmenü „Kein CSS-Stil“ angezeigt. Wenn mehrere Stile auf die Auswahl
angewendet wurden, ist das Popupmenü leer.
Führen Sie im Menü „Stil“ einen der folgenden Schritte aus:
• Wählen Sie den Stil aus, den Sie auf die Auswahl anwenden möchten.
• Wählen Sie „Kein“, um den derzeit ausgewählten Stil zu entfernen.
• Wählen Sie „Umbenennen“ aus, um den Stil umzubenennen.
• Wählen Sie „Stylesheet anfügen“ aus, um das Dialogfeld zu öffnen, in dem Sie der Seite ein externes Stylesheet
zuordnen können.
Fett Weist dem ausgewählten Text je nach dem in der Kategorie „Allgemein“ des Dialogfelds „Voreinstellungen“
voreingestellten Stil entweder das Tag
<b> oder das Tag <strong> zu.
Kursiv Weist dem ausgewählten Text je nach dem in der Kategorie „Allgemein“ des Dialogfelds „Voreinstellungen“
voreingestellten Stil entweder das Tag
<i> oder das Tag<em> zu.
Ungeordnete Liste Erstellt anhand des ausgewählten Textes eine Liste mit Aufzählungspunkten. Wenn kein Text
ausgewählt ist, wird eine neue Liste mit Aufzählungspunkten begonnen.
Geordnete Liste Erstellt anhand des ausgewählten Textes eine nummerierte Liste. Wenn kein Text ausgewählt ist,
wird eine neue nummerierte Liste begonnen.
248
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
„Blockzitat“ und „Blockzitat entfernen“ Dienen zum Ein- und Ausrücken von ausgewähltem Text. Dazu wird das
blockquote-Tag entweder hinzugefügt oder entfernt. Einzüge innerhalb einer Liste erzeugen eine Liste mit
Unterpunkten. Durch Ausrücken der eingezogenen Listenelemente werden die Unterpunkte wieder aufgehoben.
Hyperlink Macht den ausgewählten Text zu einem Hyperlink. Klicken Sie auf das Ordnersymbol, um eine Datei auf
Ihrer Website auszuwählen. Geben Sie entweder die URL der Seite ein oder ziehen Sie das Dateizeigersymbol auf eine
Datei im Bedienfeld „Dateien“ oder ziehen Sie eine Datei aus dem Bedienfeld „Dateien“ in das Feld.
Titel Gibt den QuickInfo-Text für einen Hypertext-Link an.
Ziel Dient zum Festlegen des Frames oder Fensters, in dem das verknüpfte Dokument geladen wird:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, der den Hyperlink
enthält. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze
Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, sodass Sie es in der Regel nicht angeben müssen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Klassen mit dem HTML-Eigenschafteninspektor umbenennen
In Dreamweaver werden alle für eine Seite verfügbaren Klassen im Menü „Klasse“ des HTML-
Eigenschafteninspektors angezeigt. Sie können Stile in dieser Liste mit Klassenstilen umbenennen, indem Sie die
Option „Umbenennen“ am Ende der Liste auswählen.
1 Wählen Sie im Eigenschafteninspektor für Text im Popupmenü „Stil“ die Option „Umbenennen“.
2 Wählen Sie im Popupmenü „Stil umbenennen“ den umzubenennenden Stil aus.
3 Geben Sie unter „Neuer Name“ einen neuen Namen ein und klicken Sie auf „OK“.
Rechtschreibprüfung für Webseiten durchführen
Mit dem Befehl „Rechtschreibprüfung“ können Sie die Rechtschreibung im aktuellen Dokument prüfen. Bei dem
Dokument muss es sich um eine Webseite handeln (z. B. um eine HTML-, ColdFusion- oder PHP-Seite). Bei
Textdateien oder XML-Dateien kann der Befehl „Rechtschreibprüfung“ nicht ausgeführt werden.
Zudem werden bei diesem Befehl HTML-Tags und Attributwerte ignoriert.
Note: Mit Dreamweaver kann nur eine Rechtschreibprüfung der jeweils im Dokumentfenster geöffneten Datei
durchgeführt werden. Eine Rechtschreibprüfung aller Dateien einer Site gleichzeitig ist nicht möglich.
Bei der Rechtschreibprüfung wird standardmäßig das Wörterbuch „Englisch (USA)“ verwendet. Wenn Sie das
Wörterbuch wechseln möchten, wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Allgemein“ (Windows) bzw.
„Dreamweaver“ > „Voreinstellungen“ > „Allgemein“ (Macintosh) und dann im Popupmenü
„Rechtschreibwörterbuch“ das gewünschte Wörterbuch aus.
1 Wählen Sie „Befehle“ > „Rechtschreibprüfung“ aus oder drücken Sie Umschalt+F7.
Wenn Dreamweaver auf ein unbekanntes Wort stößt, wird das Dialogfeld „Rechtschreibung prüfen“ eingeblendet.
2 Wählen Sie die entsprechende Option für diese Unstimmigkeit aus.
Zu Persönlich hinzufügen Fügt das nicht erkannte Wort Ihrem persönlichen Wörterbuch hinzu.
249
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Ignorieren Ignoriert das nicht erkannte Wort an der gegenwärtigen Fundstelle.
Ändern Ersetzt das nicht erkannte Wort an der gegenwärtigen Fundstelle durch den Text, den Sie im Feld „Ändern
in“ eingeben oder durch den Korrekturvorschlag, den Sie unter „Vorschläge“ auswählen.
Alle ignorieren Ignoriert das nicht erkannte Wort an sämtlichen Fundstellen.
Alle ändern Ersetzt das nicht erkannte Wort an sämtlichen Fundstellen auf dieselbe Weise.
Note: Einträge, die in persönliche Wörterbücher eingefügt wurden, können in Dreamweaver nicht gelöscht werden.
Tabellendaten importieren
Sie können Tabellendaten in ein Dokument importieren, indem Sie die entsprechenden Dateien (z. B. Microsoft
Excel-Dateien oder Datenbankdateien) als Textdateien mit Trennzeichen speichern.
Sie können aus Microsoft Word HTML-Dokumenten Tabellendaten importieren und formatieren sowie Text
importieren.
Darüber hinaus können Sie Text aus Microsoft Excel-Dokumenten in ein Dreamweaver-Dokument einfügen, indem
Sie den Inhalt der Excel-Datei in eine Webseite importieren.
1 Wählen Sie „Datei“ > „Importieren“ > „Tabellendaten“ oder „Einfügen“ > „Tabellenobjekte“ > „Tabellendaten
importieren“.
2 Wählen Sie die gewünschte Datei aus oder geben Sie ihren Namen in das Textfeld ein.
3 Wählen Sie das Trennzeichen aus, das beim Speichern der Datei als Textdatei mit Trennzeichen verwendet wurde.
Zur Auswahl stehen „Tabulator“, „Komma“, „Semikolon“, „Doppelpunkt“ und „Anderes“.
Wenn Sie „Anderes“ wählen, wird neben der Option ein leeres Feld eingeblendet. Geben Sie das Zeichen ein, das als
Trennzeichen verwendet wurde.
4 Verwenden Sie die restlichen Optionen, um die Tabelle zu formatieren oder zu definieren, in die die Daten
importiert werden sollen. Klicken Sie auf „OK“.
More Help topics
“Vorhandene Dokumente öffnen und bearbeiten” on page 75
“Tabellendaten importieren und exportieren” on page 195
Microsoft Office-Dokumente importieren (nur
Windows)
Sie können den Inhalt von Microsoft Word- oder Excel-Dokumenten vollständig in neue oder bestehende Webseiten
einfügen. Wenn Sie ein Word- oder Excel-Dokument importieren, erhält Dreamweaver die konvertierte HTML-Datei
und fügt sie in die Webseite ein. Nachdem Dreamweaver die konvertierte HTML-Datei erhalten hat, muss die Datei
kleiner als 300 KB sein.
Statt den vollständigen Inhalt einer Datei zu importieren, können Sie auch Teile eines Word-Dokuments einfügen und
die Formatierung beibehalten.
250
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Benutzer von Microsoft Office 97 können keine Inhalte aus Word- oder Excel-Dokumenten in ihre Website
importieren. Sie müssen einen Hyperlink zum gewünschten Dokument einfügen.
1 Öffnen Sie die Webseite, in die Sie den Inhalt eines Word- oder Excel-Dokuments einfügen möchten.
2 Führen Sie in der Entwurfsansicht einen der folgenden Schritte aus, um die Datei auszuwählen:
• Ziehen Sie die Datei von ihrem aktuellen Speicherort zu der Seite, auf der der Dateiinhalt angezeigt werden soll.
• Wählen Sie „Datei“ > „Importieren“ > „Word-Dokument“ oder „Datei“ > „Importieren“ > „Excel-Dokument“.
3 Suchen Sie im Dialogfeld zum Importieren von Dokumenten nach der Datei, die Sie hinzufügen möchten, wählen
Sie unten im Dialogfeld aus dem Popupmenü mit den Formatierungen eine Formatierungsoption und klicken Sie
dann auf „Öffnen“.
Nur Text Fügt unformatierten Text ein. Ist der Originaltext formatiert, werden alle Formatierungen entfernt.
Text mit Struktur Ermöglicht das Einfügen von Text unter Beibehaltung seiner Struktur. Einfache Formatierungen
gehen jedoch verloren. Sie können z. B. Text einfügen und die Struktur von Absätzen, Listen und Tabellen beibehalten,
ohne Fett-, Kursiv- oder sonstige Formatierungen beizubehalten.
Text mit Struktur und einfacher Formatierung Ermöglicht das Einfügen von strukturiertem und einfachem mit
HTML formatiertem Text (z. B. Absätze und Tabellen sowie Text, der mit dem
b-, i-, u-, strong-, em-, hr-, abbr- oder
acronym-Tag formatiert wurde).
Text mit Struktur und vollständiger Formatierung Ermöglicht das Einfügen von Text unter Beibehaltung der
vollständigen Struktur, der HTML-Formatierung und der CSS-Stile.
Abstand der Word-Absätze optimieren Ermöglicht es Ihnen, beim Einfügen von Text zusätzliche Abstände zwischen
Absätzen zu löschen, wenn Sie die Option „Text mit Struktur und einfacher Formatierung“ ausgewählt haben.
Der Inhalt des Word- oder Excel-Dokuments wird auf Ihrer Seite angezeigt.
Hyperlinks zu Word- oder Excel-Dokumenten erstellen
Sie können einen Hyperlink zu einem Microsoft Word- oder Excel-Dokument in eine bestehende Seite einfügen.
1 Öffnen Sie die Seite, in die Sie den Hyperlink einfügen möchten.
2 Ziehen Sie die Datei von ihrem aktuellen Speicherort an die Stelle auf der Dreamweaver-Seite, an der der Hyperlink
angezeigt werden soll.
3 Wählen Sie „Hyperlink erstellen“ und klicken Sie dann auf „OK“.
4 Wenn das Dokument, für das Sie einen Hyperlink erstellen, nicht im Stammordner der Site gespeichert ist, fordert
Dreamweaver Sie auf, das Dokument in den Stammordner zu kopieren.
Durch das Kopieren des Dokuments in den Stammordner gewährleisten Sie, dass das Dokument beim Veröffentlichen
der Site verfügbar ist.
5 Achten Sie beim Hochladen der Seite auf den Webserver darauf, auch die Word- oder Excel-Datei hochzuladen.
Ihre Seite enthält nun einen Hyperlink zu dem Word- oder Excel-Dokument. Der Hyperlinktext ist der Name der
verknüpften Datei. Sie können diesen Text bei Bedarf im Dokumentfenster ändern.
251
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
HTML-Formatierung verwenden
Obwohl CSS als bevorzugte Methode für die Formatierung von Text eingesetzt werden sollte, können Sie in
Dreamweaver Text weiterhin mit HTML formatieren.
Absätze formatieren
Über das Popupmenü „Format“ im HTML-Eigenschafteninspektor oder über „Formatieren“ > „Absatzformat“
können Sie die Standard-Tags für Absätze und Überschriften anwenden.
1 Setzen Sie die Einfügemarke in den Absatz oder wählen Sie eine Textstelle im Absatz aus.
2 Wählen Sie über „Formatieren“ > „Absatzformat“ oder im Popupmenü „Format“ des Eigenschafteninspektors eine
Option aus:
• Wählen Sie ein Absatzformat aus (z. B. „Überschrift 1“, „Überschrift 2“, „Vorformatierter Text“ usw.). Das zum
ausgewählten Stil gehörende HTML-Tag (z. B.
h1 für Überschrift 1, h2 für Überschrift 2, pre für vorformatierten
Text usw.) wird auf den gesamten Absatz angewendet.
• Wählen Sie „Keine“, um ein Absatzformat zu entfernen.
Wenn Sie ein Überschriften-Tag auf einen Absatz anwenden, fügt Dreamweaver automatisch die nächste Textzeile als
Standardabsatz hinzu. Wenn Sie diese Einstellung ändern möchten, wählen Sie „Bearbeiten“ > „Voreinstellungen“
(Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und deaktivieren Sie in der Kategorie
„Allgemein“ unter „Bearbeitungsoptionen“ die Option „Nach Überschrift zu einfachem Absatz wechseln“.
More Help topics
“Texteigenschaften im Eigenschafteninspektor festlegen” on page 245
“CSS-Eigenschaften festlegen” on page 146
Textfarbe ändern
Sie können die Standardfarbe des gesamten Textes auf einer Seite ändern oder Sie können die Farbe des auf der Seite
ausgewählten Textes ändern.
More Help topics
“Farbauswahl verwenden” on page 235
Standardtextfarben für eine Seite definieren
❖ Wählen Sie „Modifizieren“ > „Seiteneigenschaften“ > „Erscheinungsbild (HTML)“ oder „Hyperlinks (HTML)“
aus und legen Sie dann unter „Textfarbe“, „Farbe für Hyperlinks“, „Besuchte Hyperlinks“ und „Aktive Hyperlinks“
die gewünschten Farben fest.
Note: Die Farbe des aktiven Hyperlinks ist die Farbe, die ein Hyperlink annimmt, wenn ein Besucher darauf klickt. Einige
Webbrowser verwenden nicht unbedingt die von Ihnen definierte Farbe.
Farbe des ausgewählten Textes ändern
❖ Wählen Sie „Formatieren“ > „Farbe“ aus, wählen Sie im Systemfarbenwähler eine Farbe aus und klicken Sie dann
auf „OK“.
252
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Text ausrichten
Über „Formatieren“ > „Ausrichten“ können Sie Text mit HTML ausrichten. Mit dem Befehl „Formatieren“ >
„Ausrichten“ > „Zentrieren“ können Sie ein beliebiges Element auf einer Seite zentrieren.
Text auf einer Seite ausrichten
1 Wählen Sie die Textstelle aus, die Sie ausrichten möchten, oder setzen Sie die Einfügemarke an den Anfang des
Texts.
2 Wählen Sie „Formatieren“ > „Ausrichten“ und dann die gewünschte Ausrichtung aus.
Seitenelemente zentrieren
1 Wählen Sie das Element aus, das Sie zentrieren möchten (Bild, Plug-In, Tabelle oder ein anderes Seitenelement).
2 Wählen Sie „Formatieren“ > „Ausrichten“ > „Zentrieren“ aus.
Note: Sie können ganze Textblöcke ausrichten und zentrieren, jedoch nicht einen Teil einer Überschrift oder eines
Absatzes.
Text einrücken
Mit dem Befehl „Einzug“ wird ein Textabsatz mit dem HTML-Tag blockquote versehen, sodass er von beiden
Seitenrändern her eingerückt wird.
1 Setzen Sie die Einfügemarke in den einzurückenden Absatz.
2 Wählen Sie „Formatieren“ > „Einzug“ oder „Negativeinzug“ aus bzw. wählen Sie im Kontextmenü „Liste“ >
„Einzug“ oder „Negativeinzug“ aus.
Note: Sie können auch mehrere Einzüge auf einen Absatz anwenden. Mit jeder weiteren Auswahl dieses Befehls wird der
Text auf beiden Seiten weiter eingerückt.
Schriftstile anwenden
Mit HTML-Code können Sie ein Zeichen oder ganze Absätze und Textblöcke einer Site formatieren. Über das Menü
„Formatieren“ können Sie die Schriftattribute für den ausgewählten Text festlegen oder ändern. Sie können die
Schriftart, den Schriftstil (z. B. „Fett“ oder „Kursiv“) und die Schriftgröße bestimmen.
1 Wählen Sie die Textstelle aus. Wenn Sie keinen Text markieren, wirkt sich die gewählte Option auf den Text aus,
den Sie anschließend eingeben.
2 Wählen Sie eine der folgenden Optionen:
• Wenn Sie die Schrift ändern möchten, wählen Sie unter „Formatieren“ > „Schrift“ eine Schrift aus. Wählen Sie
„Standard“ aus, um bereits angewendete Schriften zu entfernen. Hiermit wird die Standardschrift auf den
ausgewählten Text angewendet (entweder die Standardschrift des Browsers oder die Schriftart, die dem Tag im
CSS-Stylesheet zugewiesen ist).
• Wenn Sie den Schriftstil ändern möchten, wählen Sie unter „Formatieren“ > „Stil“ einen Schriftstil aus („Fett“,
„Kursiv“, „Unterstrichen“ usw.).
More Help topics
“Seiten mit CSS erstellen” on page 134
“Neue CSS-Regeln erstellen” on page 145
253
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Horizontale Linien verwenden
Horizontale Linien sind praktisch, um Informationen übersichtlicher auf Ihrer Webseite anzuordnen. Sie können Text
und Objekte auf einer Seite mit einer oder mehreren Linien optisch voneinander trennen.
Horizontale Linien erstellen
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine horizontale Linie einfügen möchten.
2 Wählen Sie „Einfügen“ > „HTML“ > „Horizontale Linie“.
Horizontale Linien ändern
1 Wählen Sie die horizontale Linie im Dokumentfenster aus.
2 Wählen Sie „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor zu öffnen, und ändern Sie dann die
gewünschten Eigenschaften:
Textfeld „ID“ Hier können Sie eine ID für die horizontale Linie angeben.
B / H Geben die Breite und Höhe der Linie in Pixel oder als Prozentsatz der Seitengröße an.
Ausrichten Legt die Ausrichtung der Linie fest („Standard“, „Links“, „Zentriert“ oder „Rechts“). Diese Einstellung
kann nur geändert werden, wenn die Linie schmaler als das Browserfenster ist.
Schattierung Legt fest, ob die Linie eine Schattierung erhalten soll. Deaktivieren Sie diese Option, wenn die Linie in
einer Volltonfarbe erstellt werden soll.
Klasse Hier können Sie ein Stylesheet anfügen oder eine Klasse aus einem bereits angefügten Stylesheet anwenden.
Schriftkombinationen ändern
Mit dem Befehl „Schriftliste bearbeiten“ können Sie die Schriftkombinationen festlegen, die im
Eigenschafteninspektor und unter „Formatieren“ > „Schrift“ angezeigt werden.
Über Schriftkombinationen bestimmen Sie, wie der Text einer Webseite in einem Browser dargestellt wird. In
Browsern wird der Text in der ersten Schrift der Kombination angezeigt, die auf dem jeweiligen Computer installiert
ist. Ist keine der Schriften der Kombination installiert, wird der Text im Browser in der Schrift angezeigt, die in den
Voreinstellungen des Browsers angegeben ist.
Schriftkombinationen ändern
1 Wählen Sie „Formatieren“ > „Schrift“ > „Schriftliste bearbeiten“ aus.
2 Wählen Sie in der Schriftliste oben im Dialogfeld die gewünschte Schriftkombination aus.
Die Schriften, die zur ausgewählten Kombination gehören, sind in der Liste „Ausgewählte Schriften“ unten links im
Dialogfeld aufgeführt. Die rechte Liste enthält alle Schriften, die im System installiert sind.
3 Führen Sie einen der folgenden Schritte aus:
• Wenn Sie Schriften einer Schriftkombination hinzufügen bzw. daraus entfernen möchten, klicken Sie auf die
Schaltfläche << oder >> zwischen den beiden Listen „Ausgewählte Schriften“ und „Verfügbare Schriften“.
• Wenn Sie eine Schriftkombination hinzufügen oder entfernen möchten, klicken Sie oben im Dialogfeld auf die
Schaltfläche mit dem Pluszeichen (+) bzw. Minuszeichen (–).
254
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Wenn Sie eine Schrift hinzufügen möchten, die nicht auf dem Computer installiert ist, geben Sie im Textfeld unter
der Liste „Verfügbare Schriften“ den Namen der Schrift ein und klicken Sie auf die Schaltfläche <<, um der
Kombination die Schrift hinzuzufügen. Mit dieser Funktion können Sie beispielsweise eine Windows-spezifische
Schrift angeben, wenn Sie eine Website auf einem Macintosh entwerfen.
• Wenn Sie die Schriftkombination in der Liste nach oben oder nach unten verschieben möchten, klicken Sie auf die
Pfeilschaltflächen oben im Dialogfeld.
Der Schriftliste eine neue Kombination hinzufügen
1 Wählen Sie „Formatieren“ > „Schrift“ > „Schriftliste bearbeiten“ aus.
2 Wählen Sie in der Liste „Verfügbare Schriften“ eine Schrift aus und klicken Sie auf die Schaltfläche <<, um die
Schrift in die Liste „Ausgewählte Schriften“ zu verschieben.
3 Wiederholen Sie Schritt 2 für alle weiteren Schriften in der Kombination.
Wenn Sie eine Schrift hinzufügen möchten, die nicht auf dem Computer installiert ist, geben Sie im Textfeld unter der
Liste „Verfügbare Schriften“ den Namen der Schrift ein und klicken Sie auf die Schaltfläche <<, um der Kombination
die Schrift hinzuzufügen. Mit dieser Funktion können Sie beispielsweise eine Windows-spezifische Schrift angeben,
wenn Sie eine Website auf einem Macintosh entwerfen.
4 Wenn Sie alle gewünschten Schriften ausgewählt haben, wählen Sie in der Liste „Verfügbare Schriften“ eine
generische Schriftfamilie aus. Klicken Sie dann auf die Schaltfläche <<, um die generische Schriftfamilie in die Liste
„Ausgewählte Schriften“ zu verschieben.
Zu den generischen Schriftfamilien gehören Cursive, Fantasy, Monospace, Sans-Serif und Serif. Wenn keine der
Schriften in der Liste „Ausgewählte Schriften“ im System des Benutzers installiert ist, wird der Text in der
Standardschrift der jeweiligen generischen Schriftfamilie angezeigt. Beispielsweise ist die Standardschriftart für
Monospace auf den meisten Computern Courier.
Datumsangaben einfügen
Dreamweaver stellt ein praktisches Datumsobjekt zur Verfügung, mit dem das aktuelle Datum in Ihrem bevorzugten
Format (mit oder ohne Uhrzeit) eingefügt werden kann. Darüber hinaus haben Sie die Möglichkeit, das Datum jedes
Mal zu aktualisieren, wenn Sie die Datei speichern.
Note: Das Datum und die Uhrzeit, die im Dialogfeld „Datum einfügen“ angezeigt werden, sind weder aktuell, noch
entsprechen sie dem Datum und der Uhrzeit, die Besucher Ihrer Website sehen. Sie sind lediglich Beispiele dafür, wie diese
Informationen dargestellt werden.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Datum einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Datum“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Datum“.
3 Wählen Sie in dem daraufhin angezeigten Dialogfeld ein Format für den Wochentag, für das Datum und für die
Uhrzeit aus.
4 Wenn das eingefügte Datum jedes Mal aktualisiert werden soll, wenn Sie das Dokument speichern, markieren Sie
die Option „Beim Speichern automatisch aktualisieren“. Wenn Sie das Datum nach dem Einfügen in reinen Text
umwandeln möchten, der nie automatisch aktualisiert wird, deaktivieren Sie diese Option.
5 Klicken Sie auf „OK“, um das Datum einzufügen.
255
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Wenn Sie „Beim Speichern automatisch aktualisieren“ markiert haben, können Sie das Datum nach dem Einfügen
in das Dokument bearbeiten, indem Sie auf den formatierten Text klicken und anschließend im
Eigenschafteninspektor „Datumsformat bearbeiten“ wählen.
Bilder hinzufügen und ändern
Bilder
Es gibt viele verschiedene Arten von Grafikdateiformaten. Auf Webseiten werden jedoch im Allgemeinen nur drei
Grafikdateiformate verwendet: GIF, JPEG und PNG. Die Formate GIF und JPEG werden am umfassendsten
unterstützt und können von den meisten Browsern dargestellt werden.
GIF-Dateien (Graphic Interchange Format) GIF-Dateien umfassen maximal 256 Farben und eignen sich besonders für
die Anzeige von Bildern, die keine ineinander verlaufenden Farbtöne oder großen Bereiche mit einander sehr
ähnlichen Farben enthalten (z. B. Navigationsleisten, Schaltflächen, Symbole, Logos oder andere Bilder mit
einheitlichen Farben und Farbtönen).
JPEG (Joint Photographic Experts Group) Das JPEG-Dateiformat eignet sich insbesondere für Fotos und Bilder mit
kontinuierlichen Farbtönen, da JPEG-Dateien Millionen von Farben enthalten können. Je höher die Qualität des
JPEG-Bildes ist, desto größer wird die Datei und desto länger dauert die Übertragung. Oft kann durch Komprimieren
der JPEG-Datei ein guter Ausgleich zwischen Bildqualität und Dateigröße erzielt werden.
Das PNG-Dateiformat (Portable Network Group) Das PNG-Dateiformat ist eine patentfreie Alternative zu GIF-
Dateien. Es unterstützt Bilder mit indizierten Farben, Graustufen und Echtfarben sowie einen Alphakanal zur
Transparenzdarstellung. PNG ist das programmeigene Dateiformat von Adobe® Fireworks®. In PNG-Dateien bleiben
alle ursprünglichen Daten für Ebenen, Vektoren, Farben und Effekte (wie z. B. Schlagschatten) erhalten und alle
Elemente sind stets voll bearbeitbar. Die Dateien müssen die Erweiterung .png haben, damit Dreamweaver sie als
PNG-Dateien erkennt.
Bilder einfügen
Wenn Sie ein Bild in ein Dreamweaver-Dokument einfügen, wird im HTML-Quellcode ein Verweis auf die Datei
erstellt. Damit dieser Verweis problemlos funktioniert, muss sich die Bilddatei in der aktuellen Site befinden. Falls sich
die Datei nicht in der aktuellen Site befindet, fragt Dreamweaver Sie, ob Sie die Datei in die Site kopieren möchten.
Sie können Bilder auch dynamisch einfügen. Dynamische Bilder ändern sich häufig. So müssen zum Beispiel
Rotationssysteme für Werbebanner einzelne Banner nach dem Zufallsprinzip aus einer Liste potentieller Banner
auswählen und das ausgewählte Banner dynamisch anzeigen, wenn eine Seite angefordert wird.
Nachdem Sie ein Bild eingefügt haben, können Sie für das Bild-Tag Eingabehilfen-Attribute festlegen, die von
Bildschirmlesegeräten für sehbehinderte Benutzer gelesen werden können. Diese Attribute können im HTML-Code
bearbeitet werden.
Ein Tutorial zum Einfügen von Bildern finden Sie unter www.adobe.com/go/vid0148_de.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der das Bild erscheinen soll. Führen Sie
anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf das Symbol „Bilder“ .
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie
das Symbol „Bild“ aus. Wenn das Symbol „Bild“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie das Symbol
in das Dokumentfenster ziehen (bzw. in die Codeansicht, wenn Sie den Code bearbeiten).
256
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Wählen Sie „Einfügen“ > „Bild“ aus.
• Ziehen Sie ein Bild aus dem Bedienfeld „Elemente“ („Fenster“ > „Elemente“) an die gewünschte Stelle im
Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
• Ziehen Sie ein Bild aus dem Bedienfeld „Dateien“ an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann
mit Schritt 3 fort.
• Ziehen Sie ein Bild vom Desktop an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
2 Führen Sie im daraufhin erscheinenden Dialogfeld einen der folgenden Schritte aus:
• Wählen Sie „Dateisystem“, um eine Bilddatei auszuwählen.
• Wählen Sie „Datenquellen“, um eine dynamische Bildquelle auszuwählen.
• Klicken Sie auf die Schaltfläche „Sites und Server“, um in einem Remote-Ordner einer Ihrer Dreamweaver-Sites
eine Bilddatei zu wählen.
3 Wählen Sie in der Verzeichnisstruktur das Bild oder die Bildquelle aus, das bzw. die Sie einfügen möchten.
Wenn Sie in einem nicht gespeicherten Dokument arbeiten, erstellt Dreamweaver den Verweis file:// auf die Bilddatei.
Wenn Sie das Dokument in einem beliebigen Ordner in der Site speichern, wandelt Dreamweaver diesen Verweis in
einen dokumentrelativen Pfad um.
Note: Beim Einfügen von Bildern können Sie auch absolute Pfade zu Bildern auf Remote-Servern verwenden (d. h. zu
Bildern, die sich nicht auf der lokalen Festplatte befinden). Wenn Sie bei der Arbeit jedoch Leistungsprobleme feststellen,
empfiehlt es sich unter Umständen, die Anzeige der Bilder in der Entwurfsansicht zu deaktivieren, indem Sie die Auswahl
von „Befehle“ > „Externe Dateien anzeigen“ aufheben.
4 Klicken Sie auf „OK“. Das Dialogfeld „Eingabehilfen-Attribute für Image-Tag“ wird eingeblendet, sofern Sie das
Dialogfeld in den Voreinstellungen aktiviert haben („Bearbeiten“ > „Voreinstellungen“).
5 Geben Sie Werte in die Textfelder „Alternativtext“ und „Lange Beschreibung“ ein und klicken Sie anschließend auf
„OK“.
• Geben Sie im Textfeld „Alternativer Text“ einen Namen oder eine kurze Beschreibung für das Bild ein. Die
Informationen, die Sie hier eingeben, werden später vom Bildschirmlesegerät vorgelesen. Diese Informationen
sollten nicht länger als etwa 50 Zeichen sein. Für längere Beschreibungen können Sie im Textfeld „Lange
Beschreibung“ einen Hyperlink auf eine Datei angeben, die nähere Informationen über das Bild enthält.
• Geben Sie im Feld „Lange Beschreibung“ den Speicherort einer Datei ein, die angezeigt werden soll, wenn der
Benutzer auf das Bild klickt. Sie können auch auf das Ordnersymbol klicken und die Datei aus der
Verzeichnisstruktur auswählen. Dieses Feld enthält einen Hyperlink auf eine Datei, die sich auf das Bild bezieht
oder nähere Informationen darüber bietet.
Note: Je nach Bedarf können Sie in nur einem der Textfelder Text eingeben oder in beiden Textfeldern. Das
Bildschirmlesegerät liest dann das „alt“-Attribut des Bildes.
Note: Wenn Sie auf „Abbrechen“ klicken, wird das Bild in das Dokument eingefügt, ohne jedoch von Dreamweaver mit
Eingabehilfen-Tags oder -Attributen versehen zu werden.
6 Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschten Eigenschaften des Bildes fest.
More Help topics
“Bilder dynamisch gestalten” on page 628
“Imagemaps” on page 307
“Arbeitsbereich für barrierefreies Seitenlayout optimieren” on page 744
257
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
“Seiteneigenschaften festlegen” on page 227
Tutorial zum Einfügen von Bildern
Bildeigenschaften festlegen
Mit dem Eigenschafteninspektor für Bilder können Sie die Eigenschaften eines Bildes festlegen. Wenn nicht alle
Bildeigenschaften angezeigt werden, klicken Sie unten rechts auf den Erweiterungspfeil.
1 Wählen Sie „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor für ein ausgewähltes Bild anzuzeigen.
2 Geben Sie in das Textfeld unterhalb des Piktogramms einen Namen ein, damit Sie sich auf das Bild beziehen
können, wenn Sie ein Dreamweaver-Verhalten (beispielsweise „Bild vertauschen“) oder eine Skriptsprache wie
JavaScript oder VBScript verwenden.
3 Stellen Sie die gewünschten Bildoptionen ein.
B / H Legen die Breite und Höhe des Bildes in Pixel fest. Dreamweaver aktualisiert diese Felder automatisch und gibt
darin die ursprünglichen Maße an, wenn Sie ein Bild in eine Seite einfügen.
Wenn Sie für „B“ und „H“ Werte festlegen, die nicht der tatsächlichen Breite und Höhe des Bildes entsprechen, wird
das Bild unter Umständen nicht korrekt im Browser angezeigt. (Um die ursprünglichen Werte wiederherzustellen,
klicken Sie auf die Feldbeschriftungen „B“ und „H“ oder rechts neben den Textfeldern „B“ und „H“ auf die
Schaltfläche „Größe zurücksetzen“.)
Note: Sie können die Breite und Höhe ändern, um die Größe des jeweiligen Bildes zu skalieren. Dies hat jedoch keine
Auswirkungen auf die Downloadzeit, da der Browser zunächst alle Bilddaten herunterlädt und erst dann das Bild
skaliert. Wenn Sie die Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bildes dieselbe Größe
haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.
Quelle Gibt die Quelldatei des Bildes an. Klicken Sie auf das Ordnersymbol, um die Quelldatei auszuwählen, oder
geben Sie den Pfad ein.
Hyperlink Gibt einen Hyperlink für das Bild an. Ziehen Sie das Dateizeigersymbol auf eine Datei im Bedienfeld
„Dateien“, klicken Sie auf das Ordnersymbol, um ein Dokument in der Site zu suchen, oder geben Sie den URL-Pfad
manuell ein.
Ausrichten Richtet Bild und Text an derselben Zeile aus.
Alt Gibt alternativen Text an, der anstelle des Bildes geladen wird, wenn ein reiner Textbrowser verwendet wird bzw.
wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit
Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut
vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich über dem Bild befindet.
„Map“ und Hotspot-Tools Damit können Sie eine clientseitige Imagemap beschriften und erstellen.
V-Abstand und H-Abstand Fügen an den Kanten des Bildes Leerräume ein (in Pixel angegeben). „V-Abstand“ fügt
einen Leerraum am oberen und unteren Bildrand hinzu. „H-Abstand“ fügt einen Leerraum am linken und rechten
Bildrand hinzu.
258
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Ziel Gibt den Frame oder das Fenster an, in dem die verknüpfte Seite geladen werden soll. (Diese Option ist nur
verfügbar, wenn das Bild mit einer anderen Datei verknüpft ist.) Alle Frames im aktuellen Dokument werden
namentlich in der Liste „Ziel“ aufgeführt. Sie können auch einen der folgenden reservierten Zielnamen auswählen:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink
enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das
ganze Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Rahmen Gibt die Breite des Bildrahmens in Pixel an. Standardmäßig wird kein Rahmen verwendet.
Bearbeiten Startet den Bildeditor, den Sie in den Voreinstellungen für externe Editoren gewählt haben, und öffnet das
ausgewählte Bild.
Bildeinstellungen bearbeiten Öffnet das Dialogfeld „Bildvorschau“ und ermöglicht das Optimieren des Bildes.
Zuschneiden Dient zum Zuschneiden der Bildgröße, wobei unerwünschte Bereiche aus dem ausgewählten Bild
entfernt werden.
Neu auflösen Ermöglicht es Ihnen, ein in der Größe geändertes Bild neu aufzulösen, wobei dessen Qualität in der
neuen Größe und Form verbessert wird.
Helligkeit und Kontrast Ändert die Helligkeits- und Kontrasteinstellungen eines Bildes.
Scharf stellen Ändert die Bildschärfe.
Größe zurücksetzen Setzt die Werte unter „B“ und „H“ auf die ursprünglichen Bildmaße zurück. Dieses Symbol
wird neben den Feldern „B“ und „H“ angezeigt, wenn Sie die Werte des ausgewählten Bilds einstellen.
Eingabehilfen-Attribute für Bilder im Code bearbeiten
Wenn Sie Eingabehilfen-Attribute für ein Bild eingefügt haben, können Sie diese Werte im HTML-Code bearbeiten.
1 Wählen Sie im Dokumentfenster ein Bild aus.
2 Führen Sie einen der folgenden Schritte aus:
• Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Tag bearbeiten“.
• Bearbeiten Sie den Wert des Feldes „Alt“ im Eigenschafteninspektor.
Bilder ausrichten
Sie können ein Bild an Text, an einem anderen Bild, einem Plug-In oder an anderen Elementen in derselben Zeile
ausrichten. Außerdem können Sie die horizontale Ausrichtung eines Bildes festlegen.
1 Wählen Sie das Bild in der Entwurfsansicht aus.
2
Legen Sie die Ausrichtungsattribute des Bildes im Eigenschafteninspektor anhand des Popupmenüs „Ausrichten“ fest.
Sie können die Ausrichtung eines Bildes relativ zu anderen Elementen in derselben Zeile oder demselben Absatz
festlegen.
259
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Mit HTML-Code ist es nicht möglich, Text um die Konturen eines Bildes fließen zu lassen, wie dies bei einigen
Textverarbeitungsprogrammen möglich ist.
Folgende Ausrichtungsoptionen stehen zur Auswahl:
Standard Gibt eine Ausrichtung an der Grundlinie vor. (Der Standard kann variieren, je nachdem, welchen Browser
die Besucher Ihrer Website verwenden.)
Grundlinie und Unten Richten die Grundlinie des Textes (oder eines anderen Elements im selben Absatz) an der
Unterkante des ausgewählten Objekts aus.
Oben Richtet die Oberkante eines Bildes an der Oberkante des höchsten Elements (Bild oder Text) in der aktuellen
Zeile aus.
Mitte Richtet die Bildmitte an der Grundlinie der aktuellen Zeile aus.
Oberlänge Richtet die Oberkante des Bildes an der Oberkante des höchsten Zeichens in der Textzeile aus.
Absolute Mitte Richtet die Bildmitte an der Mitte des Textes in der aktuellen Zeile aus.
Absolut unten Richtet die Unterkante des Bildes an der Unterkante der Textzeile aus (wobei auch Unterlängen wie
etwa beim Buchstaben g berücksichtigt werden).
Links Platziert das ausgewählte Bild am linken Rand und der Text fließt rechts um das Bild. Wenn vor dem Objekt
linksbündiger Text steht, bewirkt diese Option normalerweise, dass links ausgerichtete Objekte in einer neuen Zeile
erscheinen.
Rechts Platziert das Bild am rechten Rand und der Text fließt links um das Bild. Wenn vor dem Objekt rechtsbündiger
Text steht, bewirkt diese Option normalerweise, dass rechts ausgerichtete Objekte in einer neuen Zeile erscheinen.
Größe von Bildern visuell ändern
Sie können Elemente wie Bilder, Plug-Ins, Shockwave- oder SWF-Dateien, Applets und ActiveX-Steuerelemente in
Dreamweaver visuell vergrößern oder verkleinern.
Durch visuelles Vergrößern bzw. Verkleinern eines Bildes können Sie sich ansehen, wie sich das Bild bei
verschiedenen Größeneinstellungen auf das Layout auswirkt. Die Bilddatei wird dabei allerdings nicht auf die von
Ihnen angegebenen Proportionen skaliert. Wenn Sie ein Bild in Dreamweaver visuell vergrößern oder verkleinern, die
Bilddatei jedoch nicht mithilfe einer Bildbearbeitungssoftware (z. B. Adobe Fireworks) auf die gewünschte Größe
skalieren, wird das Bild beim Laden der Seite im Browser des Benutzers skaliert. Dadurch wird die Seite
möglicherweise verzögert heruntergeladen und das Bild im Browser des Benutzers falsch angezeigt. Wenn Sie die
Downloadzeit verkürzen und sicherstellen möchten, dass alle Instanzen eines Bildes dieselbe Größe haben, skalieren
Sie die Bilder mit einem Bildbearbeitungsprogramm.
Wenn Sie die Größe eines Bildes in Dreamweaver ändern, können Sie es neu auflösen, um den neuen Maßen Rechnung
zu tragen. Bei der Neuauflösung werden einer vergrößerten oder verkleinerten JPEG- oder GIF-Bilddatei Pixel
hinzugefügt bzw. daraus entfernt, um das Erscheinungsbild des Originals weitgehend zu reproduzieren. Die
Neuauflösung eines Bildes führt zu einer kleineren Dateigröße und einer kürzeren Downloadzeit.
More Help topics
“Bilder in Dreamweaver bearbeiten” on page 262
Größe von Elementen visuell ändern
1 Wählen Sie das Element (beispielsweise ein Bild oder eine SWF-Datei) im Dokumentfenster aus.
260
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
An der unteren und der rechten Seite sowie in der unteren rechten Ecke des Elements werden Ziehgriffe angezeigt, mit
denen Sie die Größe des Elements ändern können. Werden keine Größenänderungsgriffe angezeigt, klicken Sie neben
das Element, dessen Größe Sie ändern möchten, und wählen Sie es dann erneut aus. Alternativ dazu können Sie im
Tag-Selektor auf das entsprechende Tag klicken, um das Element auszuwählen.
2 Ändern Sie die Größe des Elements mit einer der folgenden Methoden:
• Ziehen Sie den Griff an der rechten Seite, um die Breite des Elements zu ändern.
• Ziehen Sie den Griff an der unteren Seite, um die Höhe des Elements zu ändern.
• Ziehen Sie den Griff an der Ecke, um Höhe und Breite des Elements gleichzeitig zu ändern.
• Halten Sie die Umschalttaste gedrückt und ziehen Sie den Griff an der Ecke, um das Verhältnis zwischen Breite und
Höhe beizubehalten, während Sie die Größe des Elements ändern.
• Möchten Sie die Breite und Höhe auf eine bestimmte Größe einstellen (z. B. 1 x 1 Pixel), geben Sie dazu im
Eigenschafteninspektor einen numerischen Wert ein. Elemente können visuell auf eine Mindestgröße von 8 x 8
Pixel verkleinert werden.
3 Wenn Sie die Originalmaße eines in der Größe geänderten Elements wiederherstellen möchten, löschen Sie im
Eigenschafteninspektor die Werte in den Feldern „B“ und „H“ oder klicken Sie auf die Schaltfläche „Größe
zurücksetzen“.
Ursprüngliche Größe eines Bildes wiederherstellen
❖ Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Größe zurücksetzen“ .
Bilder nach einer Größenänderung neu auflösen
1 Ändern Sie die Größe des Bildes, wie zuvor beschrieben.
2 Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Neu auflösen“ .
Note: Bildplatzhalter und andere Elemente mit Ausnahme von Bitmapbildern können nicht neu aufgelöst werden.
Bild-Platzhalter einfügen
Ein Bild-Platzhalter ist eine Grafik, die Sie vorübergehend einsetzen, bis die endgültigen Grafiken für die Webseite
bereitstehen. Sie können Größe und Farbe des Platzhalters bestimmen und ihn mit einer Beschriftung versehen.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine Platzhaltergrafik einfügen möchten.
2 Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Bild-Platzhalter“ aus.
3 Optional: Geben Sie unter „Name“ den Text ein, der als Beschriftung des Bild-Platzhalters dienen soll. Wenn Sie
keine Beschriftung wünschen, lassen Sie das Feld einfach leer. Der Name muss mit einem Buchstaben beginnen
und darf nur Buchstaben und Ziffern enthalten. Leerzeichen und ASCII-Sonderzeichen sind nicht zulässig.
4 Erforderlich: Geben Sie in die Felder „Breite“ und „Höhe“ Maßangaben für das Bild in Pixel ein.
5 Optional: Führen Sie unter „Farbe“ einen der folgenden Schritte aus, um eine Farbe anzuwenden:
• Wählen Sie im Farbwähler eine Farbe aus.
• Geben Sie den Hexadezimalwert für die gewünschte Farbe ein (z. B. #FF0000).
• Geben Sie einen websicheren Farbnamen ein (z. B. „red“).
6 Optional: Geben Sie unter „Alternativtext“ eine Beschreibung des Bildes für Benutzer an, die einen reinen
Textbrowser verwenden.
Note: Im HTML-Code wird dabei automatisch ein Bild-Tag mit dem undefinierten Attribut
src eingefügt.
261
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
7 Klicken Sie auf „OK“.
Die Farbe, die Größenattribute und die Beschriftung eines Platzhalters werden folgendermaßen angezeigt:
In einem Browserfenster sind die Beschriftung und die Größenangaben nicht sichtbar.
More Help topics
“Größe von Bildern visuell ändern” on page 259
“Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden” on page 393
Bild-Platzhalter ersetzen
Ein Bild-Platzhalter ist kein Bild, das in einem Browser angezeigt wird. Bevor Sie eine Site veröffentlichen, sollten Sie
alle verwendeten Bild-Platzhalter durch browserkompatible Bilddateien wie GIF- oder JPEG-Bilder ersetzen.
Wenn Sie über Fireworks verfügen, können Sie direkt aus dem Dreamweaver-Bild-Platzhalter heraus eine neue Grafik
erstellen. Das neue Bild erhält dabei dieselben Maße wie der Platzhalter. Sie können das Bild in einem Bildeditor
bearbeiten und dann wieder in Dreamweaver einfügen.
1 Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
• Doppelklicken Sie auf den Bild-Platzhalter.
• Klicken Sie auf den Bild-Platzhalter, um ihn auszuwählen, und klicken Sie dann im Eigenschafteninspektor
(„Fenster“ > „Eigenschaften“) auf das Ordnersymbol neben „Quelle“.
2 Wählen Sie im Dialogfeld „Bildquelle“ das Bild aus, durch das Sie den Bild-Platzhalter ersetzen möchten, und
klicken Sie dann auf „OK“.
More Help topics
“Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden” on page 393
Eigenschaften für Bild-Platzhalter festlegen
Zum Festlegen der Eigenschaften eines Bild-Platzhalters wählen Sie den Platzhalter im Dokumentfenster aus. Klicken
Sie anschließend auf „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor anzuzeigen. Um alle Attribute
einzublenden, klicken Sie auf den Erweiterungspfeil in der rechten unteren Ecke.
Legen Sie im Eigenschafteninspektor die gewünschten Angaben für Name, Breite, Höhe, Bildquelle, Alternativtext,
Ausrichtung und Farbe des Bild-Platzhalters fest.
262
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Im Eigenschafteninspektor für Platzhalter sind das graue Textfeld und das Textfeld „Ausrichten“ deaktiviert. Sie
können diese Eigenschaften im Eigenschafteninspektor für Bilder festlegen, wenn Sie den Platzhalter durch ein Bild
ersetzen.
❖ Wählen Sie eine der folgenden Optionen:
B / H Legen die Breite und Höhe des Bild-Platzhalters in Pixel fest.
Quelle Gibt die Quelldatei des Bildes an. Bei Bild-Platzhaltern ist dieses Feld leer. Klicken Sie auf „Durchsuchen“, um
ein Ersatzbild für die Platzhaltergrafik auszuwählen.
Hyperlink Gibt einen Hyperlink für den Bild-Platzhalter an. Ziehen Sie das Dateizeigersymbol auf eine Datei im
Bedienfeld „Dateien“, klicken Sie auf das Ordnersymbol, um ein Dokument in der Site zu suchen, oder geben Sie den
URL-Pfad manuell ein.
Alt Gibt alternativen Text an, der anstelle des Bildes geladen wird, wenn ein reiner Textbrowser verwendet wird bzw.
wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit
Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut
vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich über dem Bild befindet.
Erstellen Dient zum Starten von Fireworks, um ein Ersatzbild zu erstellen. Die Schaltfläche „Erstellen“ ist nur dann
aktiviert, wenn auch Fireworks auf dem Computer installiert ist.
Größe zurücksetzen Setzt die Werte unter „B“ und „H“ auf die ursprünglichen Bildmaße zurück.
Color Legt eine Farbe für den Bild-Platzhalter fest.
More Help topics
“Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden” on page 393
Bilder in Dreamweaver bearbeiten
Sie können Bilder in Dreamweaver neu auflösen, zuschneiden, optimieren und scharf stellen. Darüber hinaus können
Sie die Helligkeit und den Kontrast von Bildern ändern.
Bildbearbeitungsfunktionen
Dreamweaver enthält allgemeine Bildbearbeitungsfunktionen, mit denen Sie Bilder ändern können, ohne eine externe
Bildbearbeitungsanwendung wie Fireworks oder Photoshop verwenden zu müssen. Die Bildbearbeitungsfunktionen
von Dreamweaver sind so ausgelegt, dass Sie ohne Probleme mit Inhaltsdesignern zusammenarbeiten können, um
Bilddateien für Websites zu erstellen.
Note: Sie können die Bildbearbeitungsfunktionen von Dreamweaver auch verwenden, wenn Fireworks oder andere
Bildbearbeitungsanwendungen nicht auf Ihrem Computer installiert sind.
❖ Wählen Sie „Modifizieren“ > „Bild“ aus. Sie können beliebige dieser Dreamweaver-Bildbearbeitungsfunktionen
auswählen:
Neu auflösen Fügt einer in der Größe geänderten JPEG- oder GIF-Bilddatei Pixel hinzu bzw. entfernt Pixel, um das
Erscheinungsbild des Originals weitgehend zu reproduzieren. Die Neuauflösung eines Bildes führt zu einer kleineren
Dateigröße und einer kürzeren Downloadzeit.
Wenn Sie die Größe eines Bildes in Dreamweaver ändern, können Sie es neu auflösen, um seinen neuen Maßen
Rechnung zu tragen. Wenn ein Bitmapobjekt neu aufgelöst wird, werden Pixel dem Bild hinzugefügt oder daraus
entfernt, um es größer oder kleiner zu machen. Die Neuauflösung eines Bildes in eine höhere Auflösung geht im
Allgemeinen mit geringen Qualitätsverlusten einher. Bei einer Neuberechnung in eine niedrigere Auflösung gehen
jedoch immer Daten verloren und dies führt in der Regel zu Qualitätseinbußen.
263
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Zuschneiden Ermöglicht Ihnen das Bearbeiten des Bildes durch Reduzieren des Bildbereichs. Im Allgemeinen wird
ein Bild zugeschnitten, um das Motiv mehr in den Mittelpunkt zu stellen und unerwünschte Bereiche zu entfernen,
von denen das zentrale Motiv im Bild umgeben ist.
Helligkeit und Kontrast Ändert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter,
Tiefen und Mitteltöne eines Bildes aus. Normalerweise wird die Option „Helligkeit/Kontrast“ zur Korrektur von zu
dunklen oder zu hellen Bildern verwendet.
Scharf stellen Stellt den Fokus eines Bildes ein, indem der Kontrast der im Bild gefundenen Kanten erhöht wird.
Wenn Sie ein Bild scannen oder eine Aufnahme mit einer Digitalkamera machen, werden die Objektkanten im Bild
von den meisten Bilderfassungsprogrammen standardmäßig weichgezeichnet. Auf diese Weise wird verhindert, dass
extrem feine Details in den Pixeln verloren gehen, aus denen Digitalbilder bestehen. Um jedoch die Details in einem
Digitalbild herauszuarbeiten, ist es oftmals erforderlich, das Bild scharf zu zeichnen. Dabei wird der Kantenkontrast
erhöht und das Bild wirkt schärfer.
Note: Die Bildbearbeitungsfunktionen von Dreamweaver können nur auf Bilder im JPEG-, GIF- oder PNG-Dateiformat
angewandt werden. Andere Bitmap-Bilddateiformate können mit diesen Bildbearbeitungsfunktionen nicht bearbeitet
werden.
Bilder zuschneiden
In Dreamweaver können Sie Bitmapdateibilder zuschneiden.
Note: Beim Zuschneiden eines Bildes wird die Quellbilddatei auf der Festplatte geändert. Aus diesem Grund sollten Sie
eine Sicherungskopie der Bilddatei für den Fall anlegen, dass Sie das Originalbild wiederherstellen müssen.
1 Öffnen Sie die Seite, die das zuzuschneidende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden
Schritte aus:
• Klicken Sie im Eigenschafteninspektor für Bilder auf das Symbol für das Zuschneidewerkzeug .
• Wählen Sie „Modifizieren“ > „Bild“ > „Zuschneiden“.
Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt.
2 Bewegen Sie die Zuschneidegriffe, bis der Begrenzungsrahmen den Bereich des Bildes umrahmt, den Sie
beibehalten möchten.
3 Doppelklicken Sie in den Begrenzungsrahmen oder drücken Sie die Eingabetaste, um die Auswahl zuzuschneiden.
4 Ein Dialogfeld informiert Sie darüber, dass die zuzuschneidende Bilddatei auf der Festplatte geändert wird. Klicken
Sie auf „OK“. Sämtliche Pixel des ausgewählten Bitmaps, die außerhalb des Begrenzungsrahmens liegen, werden
entfernt, aber die anderen Objekte im Bild bleiben erhalten.
5 Überprüfen Sie in der Vorschau, ob das Bild Ihren Erwartungen entspricht. Wählen Sie „Bearbeiten“ >
„Rückgängig Zuschneiden“, um das Originalbild wiederherzustellen.
Note: Sie können die Auswirkungen des Befehls „Zuschneiden“ so lange rückgängig machen (und die Originalbilddatei
wiederherstellen), bis Sie Dreamweaver beenden oder die Datei in einem externen Bildbearbeitungsprogramm
bearbeiten.
Bilder optimieren
Sie können Bilder in Ihren Webseiten in Dreamweaver optimieren.
1 Öffnen Sie die Seite, die das zu optimierende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden
Schritte aus:
• Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Bildeinstellungen im Vorschaufenster
bearbeiten“ .
264
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Wählen Sie „Modifizieren“ > „Bild“ > „Optimieren“ aus.
2 Nehmen Sie im Dialogfeld „Bildvorschau“ die gewünschten Änderungen vor und klicken Sie auf „OK“.
Bilder scharf stellen
Der Befehl „Scharf stellen“ vergrößert den Kontrast der Pixel am Objektrand, um die Definition oder Schärfe eines
Bildes zu verbessern.
1 Öffnen Sie die Seite, die das scharf zu stellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden
Schritte aus:
• Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Scharf stellen“ .
• Wählen Sie „Modifizieren“ > „Bild“ > „Scharf stellen“.
2 Sie können den Schärfegrad bestimmen, den Dreamweaver auf das Bild anwendet. Betätigen Sie hierzu den
Schieberegler oder geben Sie im Textfeld einen Wert zwischen 0 und 10 ein. Während Sie die Schärfe des Bildes im
Dialogfeld „Scharf stellen“ einstellen, können Sie die Änderungen am Bild in einer Vorschau betrachten.
3 Klicken Sie auf „OK“, wenn Sie mit dem Ergebnis zufrieden sind.
4 Speichern Sie die Änderungen mit „Datei“ > „Speichern“ oder stellen Sie das Originalbild wieder her, indem Sie
„Bearbeiten“ > „Rückgängig Scharf stellen“ wählen.
Note: Nach dem Speichern der Seite mit dem Bild können Sie die Auswirkungen des Befehls „Scharf stellen“ nicht mehr
rückgängig machen (und das Originalbild wiederherstellen). Wenn Sie die Seite speichern, werden die am Bild
vorgenommenen Änderungen unwiderruflich gespeichert.
Helligkeit und Kontrast von Bildern anpassen
„Helligkeit/Kontrast“ ändert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter,
Tiefen und Mitteltöne eines Bildes aus. Normalerweise wird die Option „Helligkeit/Kontrast“ zur Korrektur von zu
dunklen oder zu hellen Bildern verwendet.
1 Öffnen Sie die Seite, die das einzustellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden
Schritte aus:
• Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Helligkeit/Kontrast“ .
• Wählen Sie „Modifizieren“ > „Bild“ > „Helligkeit/Kontrast“.
2 Ziehen Sie an den Schiebereglern für „Helligkeit“ und „Kontrast“, um die Einstellungen anzupassen. Die gültigen
Werte liegen im Bereich von -100 bis 100.
3 Klicken Sie auf „OK“.
Rollover-Bilder erstellen
Sie können Rollover-Bilder in eine Seite einfügen. Ein Rollover ist ein Bild, das sich im Browser ändert, wenn Sie den
Mauszeiger darüber bewegen.
Sie benötigen zwei Bilder, um ein Rollover zu erstellen: das primäre Bild (wird angezeigt, wenn die Seite geladen wird)
und das sekundäre Bild (wird angezeigt, wenn der Mauszeiger über das primäre Bild bewegt wird). Die beiden Bilder
eines Rollovers müssen dieselbe Größe haben. Ist dies nicht der Fall, passt Dreamweaver die Größe des zweiten Bildes
an die Größe des ersten Bildes an.
Rollover-Bilder werden automatisch so eingerichtet, dass sie auf das
onMouseOver-Ereignis reagieren. Sie können ein
Bild auch so konfigurieren, dass es auf andere Ereignisse (beispielsweise einen Mausklick) reagiert, sowie ein Rollover-
Bild austauschen.
265
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Ein Tutorial zum Erstellen von Rollovers finden Sie unter www.adobe.com/go/vid0159_de.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Rollover einfügen möchten.
2 Fügen Sie das Rollover mit einer der folgenden Methoden ein:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie
das Symbol „Rollover-Bild“ aus. Wenn das Symbol „Rollover-Bild“ im Bedienfeld „Einfügen“ angezeigt wird,
können Sie es direkt in das Dokumentfenster ziehen.
• Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Rollover-Bild“.
3 Legen Sie die Optionen fest und klicken Sie auf „OK“.
Bildname Der Name des Rollover-Bildes.
Originalbild Das Bild, das beim Laden der Seite angezeigt werden soll. Geben Sie den Pfad in das Textfeld ein oder
klicken Sie auf „Durchsuchen“ und wählen Sie das Bild aus.
Rollover-Bild Das Bild, das angezeigt werden soll, wenn der Zeiger über das Originalbild bewegt wird. Geben Sie den
Pfad ein oder klicken Sie auf „Durchsuchen“, um das Bild auszuwählen.
Rollover-Bild vorausladen Lädt die Bilder vorab in den Cache des Browsers, sodass es nicht zu Verzögerungen
kommt, wenn der Zeiger über das Bild bewegt wird.
Alternativtext Optional: Eine Beschreibung des Bildes für Benutzer, die einen reinen Textbrowser verwenden.
Wenn angeklickt, gehe zu URL Die Datei, die geöffnet werden soll, wenn ein Benutzer auf das Rollover-Bild klickt.
Geben Sie den Pfad ein oder klicken Sie auf „Durchsuchen“ und wählen Sie die Datei aus.
Note: Wenn Sie keinen Hyperlink für das Bild festlegen, fügt Dreamweaver einen Null-Hyperlink (#) in den HTML-
Quellcode ein, mit dem das Rollover-Verhalten verknüpft wird. Wenn Sie den Null-Hyperlink entfernen, funktioniert das
Rollover-Bild nicht mehr.
4 Wählen Sie „Datei“ > „Vorschau in Browser“ oder drücken Sie F12.
5 Bewegen Sie den Zeiger im Browser über das Originalbild, um das Rollover-Bild anzuzeigen.
Note: Die Wirkung eines Rollover-Bildes ist in der Entwurfsansicht nicht sichtbar.
More Help topics
“Verhalten „Bild austauschen“ definieren” on page 388
Rollover-Tutorial
Mit externen Bildeditoren arbeiten
Während Sie in Dreamweaver arbeiten, können Sie ein ausgewähltes Bild in einem externen Bildeditor öffnen. Wenn
Sie nach dem Speichern des Bildes zu Dreamweaver zurückkehren, sind alle vorgenommenen Änderungen im
Dokumentfenster zu sehen.
Sie können Fireworks als Ihren primären externen Bildeditor einrichten. Sie können auch bestimmen, welche
Dateitypen ein Editor öffnen soll, und Sie können mehrere Bildeditoren auswählen. Beispielsweise können Sie in den
Voreinstellungen angeben, dass Fireworks zum Bearbeiten von GIF-Dateien gestartet werden soll und ein anderer
Bildeditor zum Bearbeiten von JPEG-Dateien.
266
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
More Help topics
“Photoshop und Dreamweaver verwenden” on page 398
“Fireworks und Dreamweaver verwenden” on page 392
“Externen Editor für Multimedia-Dateien starten” on page 281
Externen Bildeditor starten
❖ Führen Sie einen der folgenden Schritte aus:
• Doppelklicken Sie auf das Bild, das Sie bearbeiten möchten.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das zu
bearbeitende Bild. Wählen Sie dann „Bearbeiten mit“ > „Durchsuchen“ und wählen Sie einen Editor aus.
• Wählen Sie das zu bearbeitende Bild aus und klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.
• Doppelklicken Sie im Bedienfeld „Dateien“ auf die Bilddatei, um den primären Bildeditor zu starten. Wenn Sie
keinen Bildeditor angegeben haben, startet Dreamweaver den Standardeditor für den Dateityp.
Note: Wenn Sie ein Bild vom Bedienfeld „Dateien“ aus öffnen, sind die oben beschriebenen Fireworks-
Integrationsfunktionen nicht aktiv. Fireworks öffnet nicht die ursprüngliche PNG-Datei. Um die Fireworks-
Integrationsfunktionen zu nutzen, müssen Sie Bilder vom Dokumentfenster aus öffnen.
Wenn das aktualisierte Bild nach der Rückkehr zum Dreamweaver-Fenster nicht angezeigt wird, wählen Sie das Bild
aus und klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Aktualisieren“.
Externen Bildeditor für einen vorhandenen Dateityp festlegen
Sie können einen Bildeditor zum Öffnen und Bearbeiten von Grafikdateien auswählen.
1 Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld
„Voreinstellungen“ zu öffnen:
• Wählen Sie „Bearbeiten“ > „Voreinstellungen“ bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und
klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
• Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und wählen Sie „Dateitypen/Editoren“ aus.
2 Wählen Sie in der Liste „Erweiterungen“ die Dateierweiterung aus, für die Sie einen externen Editor festlegen
möchten.
3 Klicken Sie auf die Schaltfläche „Hinzufügen“ (+) über der Liste „Editoren“.
4 Navigieren Sie im Dialogfeld „Externen Editor auswählen“ zu der Anwendung, die Sie als Editor für diesen
Dateityp starten möchten.
5 Klicken Sie im Dialogfeld „Voreinstellungen“ auf „Zu primärem Editor machen“, wenn dieser Editor der primäre
Editor für diesen Dateityp werden soll.
6 Wenn Sie weitere Editoren für diesen Dateityp festlegen möchten, wiederholen Sie die Schritte 3 und 4.
Dreamweaver verwendet automatisch den primären Editor, wenn Sie diesen Bildtyp bearbeiten. Die anderen
aufgeführten Editoren können Sie im Kontextmenü für das Bild im Dokumentfenster wählen.
Neuen Dateityp zur Liste „Erweiterungen“ hinzufügen
1 Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld
„Voreinstellungen“ zu öffnen:
• Wählen Sie „Bearbeiten“ > „Voreinstellungen“ bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und
klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
267
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
• Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und wählen Sie „Dateitypen/Editoren“ aus.
2 Klicken Sie im Dialogfeld „Voreinstellungen“ in der Kategorie „Dateitypen/Editoren“ auf die Schaltfläche
„Hinzufügen (+)“ oberhalb der Liste „Erweiterungen“.
In der Liste „Erweiterungen“ wird ein Textfeld angezeigt.
3 Geben Sie die Dateinamenerweiterung für den Dateityp ein, bei dem ein Editor gestartet werden soll.
4 Um einen externen Editor für den Dateityp anzugeben, klicken Sie auf die Schaltfläche „Hinzufügen (+)“ oberhalb
der Liste „Editoren“.
5 Ein Dialogfeld wird eingeblendet, in dem Sie die Anwendung auswählen können, mit der dieser Bildtyp bearbeitet
werden soll.
6 Klicken Sie auf „Zu primärem Editor machen“, wenn dieser Editor der primäre Editor für diesen Bildtyp sein soll.
Vorhandene Editoreinstellung ändern
1 Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld
„Voreinstellungen“ zu öffnen:
• Wählen Sie „Bearbeiten“ > „Voreinstellungen“ bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und
klicken Sie links auf die Kategorie „Dateitypen/Editoren“.
• Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und wählen Sie „Dateitypen/Editoren“ aus.
2 Wählen Sie im Dialogfeld „Voreinstellungen“ in der Kategorie„Dateitypen/Editoren“ in der Liste „Erweiterungen“
den zu ändernden Dateityp aus, um den bzw. die vorhandenen Editor(en) anzuzeigen.
3 Wählen Sie in der Liste „Editoren“ den Editor aus, auf den sich die Änderung beziehen soll, und führen Sie dann
einen der folgenden Schritte aus:
• Verwenden Sie die Schaltfläche „Hinzufügen“ (+) oder „Entfernen“ (–) über der Liste „Editoren“, um einen Editor
hinzuzufügen oder zu entfernen.
• Klicken Sie auf die Schaltfläche „Zu primärem Editor machen“, um einen neuen Editor festzulegen, der
standardmäßig zum Bearbeiten gestartet wird.
Bilder mit Verhalten versehen
Sie können ein beliebiges verfügbares Verhalten an ein Bild oder einen Hotspot anfügen. Wenn Sie ein Verhalten an
einen Hotspot anfügen, fügt Dreamweaver den HTML-Code in das
area-Tag ein. Speziell für Bilder stehen drei
Verhalten zur Auswahl: „Bilder vorausladen“, „Bild austauschen“ und „Bildaustausch wiederherstellen“.
Bilder vorausladen Lädt Bilder, die nicht sofort auf der Seite angezeigt werden, in den Browser-Cache (z. B. Bilder, die
mithilfe von Verhalten, AP-Elementen oder JavaScript ausgetauscht werden). Damit werden durch das Herunterladen
verursachte Verzögerungen verhindert, wenn die Bilder angezeigt werden sollen.
Bild austauschen Ersetzt ein Bild durch ein anderes, indem das SRC-Attribut des img-Tags geändert wird. Verwenden
Sie diese Aktion, um Schaltflächen-Rollover und sonstige Bildeffekte zu erstellen. (Sie können damit auch mehrere
Bilder gleichzeitig austauschen.)
Bildaustausch wiederherstellen Stellt für die letzte Gruppe von vertauschten Bildern die vorherigen Quelldateien
wieder her. Diese Aktion wird immer automatisch angefügt, wenn Sie die Aktion „Bild austauschen“ an ein Objekt
anfügen. Daher müssen Sie diese Aktion in der Regel nicht manuell auswählen.
Mithilfe von Verhalten können Sie auch anspruchsvollere Navigationssysteme (z. B. Sprungmenüs) erstellen.
268
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
More Help topics
“Sprungmenüs einfügen” on page 305
“Verhalten „Bild austauschen“ definieren” on page 388
“Verhalten „Bilder vorausladen“ definieren” on page 385
Hinzufügen von Videos
Videos in Webseiten einbetten (HTML5)
HTML5 unterstützt Video- und Audio-Tags, über die Benutzer Video- und Audiodateien ohne externe Plug-Ins oder
Player in einem Browser wiedergeben können. Dreamweaver unterstützt Codehinweise zum Hinzufügen von Video-
und Audio-Tags.
Die Videos, die Sie in die Webseite einbetten, werden in der Live-Ansicht in einer Vorschau dargestellt.
Note: Sie können zwar jedes Video in Ihre Webseite einbetten, in der Live-Ansicht werden jedoch nicht immer alle Videos
dargestellt. Die Audio- und Video-Tags werden in Dreamweaver mit dem Apple QuickTime-Plug-In unterstützt. Wenn
das Apple QuickTime-Plug-In unter Windows nicht installiert ist, werden die Medieninhalte in der Webseite nicht
dargestellt.
FLV-Dateien einfügen
FLV-Dateien einfügen
Sie können FLV-Videos auf einfache Weise ohne das Flash-Authoring-Tool in Webseiten einfügen. Dazu benötigen
Sie zunächst eine kodierte FLV-Datei.
Dreamweaver fügt eine SWF-Komponente ein, mit der die FLV-Datei angezeigt wird. Bei der Ansicht in einem
Browser werden über diese Komponente die ausgewählte FLV-Datei sowie mehrere Steuerelemente für die
Wiedergabe angezeigt.
269
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
In Dreamweaver haben Sie folgende Möglichkeiten zum Bereitstellen von FLV-Videos für die Besucher Ihrer Website:
Progressiver Video-Download Lädt die FLV-Datei auf die Festplatte des Besuchers herunter und gibt danach das
Video wieder. Im Gegensatz zu herkömmlichen „Download-und-Abspielen“-Methoden kann das Abspielen der
Videodatei beim progressiven Download bereits gestartet werden, bevor die Datei vollständig heruntergeladen wurde.
Streaming-Video Ermöglicht die Wiedergabe des Videos im Streaming-Verfahren, sodass es nach einer kurzen
Zwischenspeicherung für die unterbrechungsfreie Wiedergabe in der Webseite wiedergegeben wird. Um Streaming-
Video für Ihre Webseiten zu aktivieren, benötigen Sie jedoch Adobe® Flash® Media Server.
Der Film muss als kodierte FLV-Datei vorliegen, bevor Sie ihn in Dreamweaver verwenden können. Sie können
Videodateien einfügen, die mit zwei Arten von Codecs erstellt wurden: Sorenson Squeeze und On2.
Wie bei herkömmlichen SWF-Dateien wird beim Einfügen einer FLV-Datei Code eingefügt, mit dem erkannt wird,
ob der Benutzer für die Wiedergabe des Videos die richtige Version von Flash Player verwendet. Wenn dies nicht der
Fall ist, wird auf der Seite alternativer Inhalt angezeigt und der Benutzer aufgefordert, die neueste Version von Flash
Player herunterzuladen.
Note: Zum Anzeigen von FLV-Dateien müssen Benutzer Flash Player ab Version 8 auf ihrem Computer installiert
haben. Wenn ein Benutzer nicht die erforderliche Version, jedoch Flash Player ab Version 6.0 r65 verwendet, wird im
Browser statt des alternativen Inhalts die Express-Installation für Flash Player angezeigt. Wenn der Benutzer die Express-
Installation nicht ausführt, wird auf der Seite der alternative Inhalt angezeigt.
Weitere Informationen zum Verwenden von Videodateien finden Sie im Video Technology Center unter
www.adobe.com/go/flv_devcenter_de.
FLV-Dateien einfügen
1 Wählen Sie „Einfügen“ > „Medien“ > „FLV“ aus.
2 Wählen Sie im Dialogfeld „FLV einfügen“ im Popupmenü „Videotyp“ die Option „Progressiver Video-Download“
oder „Streaming-Video“ aus.
3 Nehmen Sie für die übrigen Dialogfeldoptionen die gewünschten Einstellungen vor und klicken Sie auf „OK“.
Note: Microsoft Internet Information Server (IIS) verarbeitet keine verschachtelten object-Tags. Für ASP-Seiten
verwendet Dreamweaver beim Einfügen von SWF- oder FLV-Dateien verschachtelten object/embed-Code anstelle von
verschachteltem object-Code.
Optionen für progressive Video-Downloads festlegen
Im Dialogfeld „FLV einfügen“ können Sie Optionen für den progressiven Video-Download einer FLV-Datei festlegen,
die in einer Webseite eingefügt wurde.
1 Wählen Sie „Einfügen“ > „Medien“ > „FLV“ aus (oder klicken Sie in der Kategorie „Medien“ der Einfügeleiste
„Allgemein“ auf das Symbol „FLV“).
2 Wählen Sie im Dialogfeld „FLV einfügen“ im Menü „Videotyp“ die Option „Progressiver Video-Download“ aus.
3 Legen Sie die folgenden Optionen fest:
URL Gibt einen relativen oder absoluten Pfad zur FLV-Datei an. Um einen relativen Pfad anzugeben (z. B.
„mypath/myvideo.flv“), klicken Sie auf „Durchsuchen“, navigieren Sie zu der FLV-Datei und wählen Sie sie aus. Um
einen absoluten Pfad anzugeben, geben Sie die URL (z. B. „http://www.example.com/myvideo.flv“) der FLV-Datei ein.
Skin Legt die Darstellung der Videokomponente fest. Eine Vorschau der ausgewählten Skin wird unterhalb des
Popupmenüs „Skin“ angezeigt.
270
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Breite Gibt die Breite der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit
Dreamweaver die genaue Breite der FLV-Datei ermitteln kann. Wenn Dreamweaver die Breite nicht ermitteln kann,
müssen Sie einen Wert eingeben.
Höhe Gibt die Höhe der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit
Dreamweaver die genaue Höhe der FLV-Datei ermitteln kann. Wenn Dreamweaver die Höhe nicht ermitteln kann,
müssen Sie einen Wert eingeben.
Note: „Gesamtgröße einschließlich Skin“ gibt die Breite und Höhe der FLV-Datei zuzüglich der Breite und Höhe der
ausgewählten Skin an.
Beschränkung Bewirkt, dass das Verhältnis zwischen Breite und Höhe der Videokomponente beibehalten wird. Diese
Option ist standardmäßig aktiviert.
Autom. Wiedergabe Gibt an, ob das Video beim Öffnen der Webseite abgespielt werden soll.
Automatisch zurückspulen Bestimmt, ob die Wiedergabesteuerung an die Startposition zurückgesetzt werden soll,
nachdem das Video vollständig abgespielt wurde.
4 Klicken Sie auf „OK“, um das Dialogfeld zu schließen und die FLV-Datei in die Webseite einzufügen.
Mit dem Befehl „FLV einfügen“ werden eine SWF-Datei zum Wiedergeben von Videos und eine SWF-Skin-Datei
erstellt. Mithilfe dieser Dateien wird das Videomaterial in der Webseite angezeigt. (Möglicherweise müssen Sie im
Bedienfeld „Dateien“ auf die Schaltfläche zum Aktualisieren klicken, um die neuen Dateien zu sehen.) Diese Dateien
werden im gleichen Verzeichnis gespeichert wie die HTML-Datei, der Sie das Videomaterial hinzufügen. Wenn Sie
die HTML-Seite hochladen, die die FLV-Datei enthält, lädt Dreamweaver diese Dateien als abhängige Dateien hoch
(sofern Sie im Dialogfeld „Abhängige Dateien bereitstellen“ die Option „Ja“ aktiviert haben).
Optionen für Streaming-Video festlegen
Im Dialogfeld „FLV einfügen“ können Sie Optionen für den Streaming-Video-Download einer FLV-Datei festlegen,
die in einer Webseite eingefügt wurde.
1 Wählen Sie „Einfügen“ > „Medien“ > „FLV“ aus (oder klicken Sie in der Kategorie „Medien“ der Einfügeleiste
„Allgemein“ auf das Symbol „FLV“).
2 Wählen Sie im Popupmenü „Videotyp“ die Option „Streaming-Video“ aus.
Server-URI Gibt den Server-, Anwendungs- und Instanznamen wie folgt an:
rtmp://www.Beispiel.com/Anwendungsname/Instanzname.
Streamname Gibt den Namen der abzuspielenden FLV-Datei an (z. B. myvideo.flv). Die Erweiterung „.flv“ ist nicht
zwingend erforderlich.
Skin Legt die Darstellung der Videokomponente fest. Eine Vorschau der ausgewählten Skin wird unterhalb des
Popupmenüs „Skin“ angezeigt.
Breite Gibt die Breite der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit
Dreamweaver die genaue Breite der FLV-Datei ermitteln kann. Wenn Dreamweaver die Breite nicht ermitteln kann,
müssen Sie einen Wert eingeben.
Höhe Gibt die Höhe der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit
Dreamweaver die genaue Höhe der FLV-Datei ermitteln kann. Wenn Dreamweaver die Höhe nicht ermitteln kann,
müssen Sie einen Wert eingeben.
Note: „Gesamtgröße einschließlich Skin“ gibt die Breite und Höhe der FLV-Datei zuzüglich der Breite und Höhe der
ausgewählten Skin an.
Beschränkung Bewirkt, dass das Verhältnis zwischen Breite und Höhe der Videokomponente beibehalten wird. Diese
Option ist standardmäßig aktiviert.
271
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Live-Videoeinspielung Gibt an, ob das Videomaterial live eingespielt wird. Wenn diese Option ausgewählt ist, wird in
Flash Player eine von Flash® Media Server gestreamte Live-Videoeinspielung wiedergegeben. Der Name der Live-
Videoeinspielung ist der Name, der im Textfeld „Streamname“ angegeben wurde.
Note: Wenn Sie „Live-Videoeinspielung“ auswählen, wird auf der Skin der Komponente nur der Lautstärkeregler
angezeigt, weil Live-Video nicht manipuliert werden kann. Außerdem sind die beiden Optionen „Automatisch abspielen“
und „Automatisch zurückspulen“ wirkungslos.
Autom. Wiedergabe Gibt an, ob das Video beim Öffnen der Webseite abgespielt werden soll.
Automatisch zurückspulen Bestimmt, ob die Wiedergabesteuerung an die Startposition zurückgesetzt werden soll,
nachdem das Video vollständig abgespielt wurde.
Zwischenspeicherzeit Gibt den Zeitraum in Sekunden an, der vor dem Beginn der Videowiedergabe für die
Zwischenspeicherung von Videomaterial erforderlich ist. Die Zwischenspeicherzeit wird standardmäßig auf
0 eingestellt; das heißt, die Videowiedergabe beginnt, sobald auf die Schaltfläche „Abspielen“ geklickt wurde. (Wenn
„Automatisch abspielen“ ausgewählt wurde, beginnt die Videowiedergabe, sobald eine Verbindung zum Server
hergestellt wurde.) Das Festlegen einer Zwischenspeicherzeit empfiehlt sich, wenn Sie Videomaterial bereitstellen
möchten, das eine höhere Bitrate als die Verbindungsgeschwindigkeit der Website-Besucher hat oder wenn der
Internetverkehr zu Engpässen bei der Bandbreite oder zu Verbindungsproblemen führen könnte. Wenn Sie 15
Sekunden Videomaterial an die Webseite senden möchten, bevor die Seite das Material abspielt, stellen Sie die
Zwischenspeicherzeit auf 15 ein.
3 Klicken Sie auf „OK“, um das Dialogfeld zu schließen und die FLV-Datei in die Webseite einzufügen.
Mit dem Befehl „FLV einfügen“ werden eine SWF-Datei zum Wiedergeben von Videos und eine SWF-Skin-Datei
erstellt. Mithilfe dieser Dateien wird das Video in der Webseite angezeigt. Der Befehl erstellt außerdem eine main.asc-
Datei, die Sie auf den Flash Media Server hochladen müssen. (Möglicherweise müssen Sie im Bedienfeld „Dateien“ auf
die Schaltfläche zum Aktualisieren klicken, um die neuen Dateien zu sehen.) Diese Dateien werden im gleichen
Verzeichnis gespeichert wie die HTML-Datei, der Sie das Videomaterial hinzufügen. Wenn Sie die HTML-Seite
hochladen, die die FLV-Datei enthält, müssen Sie auch diese SWF-Dateien auf den Webserver und die Datei
„main.asc“ auf den Flash Media Server hochladen.
Note: Wenn sich auf dem Server bereits eine Datei „main.asc“ befindet, laden Sie die mit dem Befehl „FLV einfügen“
erstellte Datei „main.asc“ nur nach vorheriger Rücksprache mit Ihrem Serveradministrator hoch.
Sie können alle erforderlichen Mediendateien problemlos hochladen, indem Sie im Dreamweaver-Dokumentfenster
den Platzhalter für die Videokomponente auswählen und dann im Eigenschafteninspektor („Fenster“ >
„Eigenschaften“) auf die Schaltfläche „Medien hochladen“ klicken. Um die Liste der erforderlichen Dateien
anzuzeigen, klicken Sie auf „Erforderliche Dateien anzeigen“.
Note: Über die Schaltfläche „Medien hochladen“ wird nicht die HTML-Datei hochgeladen, die das Videomaterial
enthält.
Flash Player-Downloadinformationen bearbeiten
Beim Einfügen einer FLV-Datei in eine Seite wird in Dreamweaver Code eingefügt, mit dem ermittelt wird, ob der
Benutzer die korrekte Version von Flash Player verwendet. Wenn dies nicht der Fall ist, wird alternativer Inhalt
angezeigt und der Benutzer aufgefordert, die neueste Version herunterzuladen. Sie können den alternativen Inhalt
jederzeit ändern.
Dieses Verfahren wird auch bei SWF-Dateien angewendet.
272
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Wenn ein Benutzer nicht die erforderliche Version, jedoch Flash Player ab Version 6.0 r65 verwendet, wird im
Browser die Express-Installation für Flash Player angezeigt. Wenn der Benutzer die Express-Installation nicht ausführt,
wird auf der Seite der alternative Inhalt angezeigt.
1 Wählen Sie in der Entwurfsansicht des Dokumentfensters die SWF- oder FLV-Datei aus.
2 Klicken Sie auf dem Register der SWF- oder FLV-Datei auf das Symbol mit dem Auge.
Sie können auch Strg+] drücken, um zur Anzeige des alternativen Inhalts zu wechseln. Um zur Ansicht der SWF- oder
FLV-Datei zurückzukehren, drücken Sie Strg+[, bis der gesamte alternative Inhalt ausgewählt ist. Drücken Sie dann
erneut Strg+[.
3 Sie können den Inhalt wie jeden anderen Inhalt in Dreamweaver bearbeiten.
Note: Sie können keine SWF- oder FLV-Dateien als alternativen Inhalt einfügen.
4 Klicken Sie erneut auf das Symbol mit dem Auge, um in die Ansicht der SWF- oder FLV-Datei zurückzukehren.
Fehlerbehebung für FLV-Dateien
In diesem Abschnitt werden einige der häufigsten Gründe für Probleme mit FLV-Dateien erörtert.
Anzeigeprobleme aufgrund fehlender zugehöriger Dateien
Der von Dreamweaver ab CS4 erzeugte Code benötigt neben der eigentlichen FLV-Datei vier abhängige Dateien:
• swfobject_modified.js
• expressInstall.swf
• FLVPlayer_Progressive.swf
• Skin-Datei (z. B. Clear_Skin_1.swf)
Beachten Sie, dass für Dreamweaver ab CS4 zwei abhängige Dateien mehr erforderlich sind als für Dreamweaver CS3.
Die ersten beiden dieser Dateien (swfobject_modified.js und expressInstall.swf) werden in einem Ordner mit dem
Namen „Scripts“ installiert, der von Dreamweaver im Stammverzeichnis der Site angelegt wird, sofern er noch nicht
vorhanden ist.
Die anderen beiden Dateien (FLVPlayer_Progressive.swf und die Skin-Datei) werden im gleichen Ordner wie die Seite
installiert, in die die FLV-Datei eingebettet ist. Die Skin-Datei enthält die Steuerelemente für die FLV-Datei. Ihr Name
ist abhängig von der Skin, die in den in der Dreamweaver-Hilfe beschriebenen Optionen ausgewählt wurde. Wenn Sie
beispielsweise „Clear Skin“ auswählen, lautet der Name der Datei „Clear_Skin_1.swf“.
Alle vier abhängigen Dateien MÜSSEN auf den Remote-Server hochgeladen sein, damit die FLV-Datei korrekt
angezeigt wird.
Der häufigste Grund für das Fehlschlagen der Ausführung von FLV-Dateien auf einer Webseite ist, dass vergessen
wurde, diese Dateien hochzuladen. Wenn eine der Dateien fehlt, wird auf der Webseite ein weißes Rechteck angezeigt.
Um sicherzustellen, dass alle abhängigen Dateien hochgeladen werden, verwenden Sie zum Hochladen der Seite mit
der FLV-Datei das Dreamweaver-Bedienfeld „Dateien“. Beim Hochladen der Seite werden Sie gefragt, ob Sie auch
abhängige Dateien hochladen möchten (falls Sie diese Option nicht deaktiviert haben). Klicken Sie auf „Ja“, um die
abhängigen Dateien hochzuladen.
Anzeigeproblem bei der lokalen Vorschau von Seiten
Aufgrund von Sicherheitsaktualisierungen in Dreamweaver CS4 können Seiten mit eingebetteter FLV-Datei nicht
mehr mit dem Befehl „Vorschau im Browser“ getestet werden, es sei denn Sie definieren einen lokalen Testserver in
der Dreamweaver Site-Definition und verwenden den Testserver für die Vorschau der Seite.
273
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Normalerweise wird ein Testserver nur benötigt, wenn Sie Seiten mit ASP, ColdFusion oder PHP entwickeln (siehe
“Computer für die Entwicklung von Anwendungen einrichten” on page 575). Wenn Sie Websites erstellen, die nur
HTML verwenden, und keinen Testserver definiert haben, drücken Sie F12 (Windows) bzw. Option+F12
(Macintosh). Daraufhin wird eine große Auswahl von Skin-Steuerelementen angezeigt. Zum Umgehen dieses
Problems können Sie entweder einen Testserver definieren und ihn dann zur Seitenvorschau einsetzen oder Ihre
Dateien auf einen Remote-Server hochladen und sie von dort anzeigen.
Note: Es ist möglich, dass auch Sicherheitseinstellungen dafür verantwortlich sind, wenn eine Vorschau lokaler FLV-
Inhalte nicht möglich ist. Adobe konnte dies jedoch nicht bestätigen. Sie können versuchen, Ihre Sicherheitseinstellungen
zu ändern und das Problem so zu beheben. Weitere Informationen zum Ändern der Sicherheitseinstellungen finden Sie
in TechNote 117502.
Weitere mögliche Ursachen für Probleme mit FLV-Dateien
• Stellen Sie bei Problemen mit der lokalen Vorschau sicher, dass die Option „Vorschau mit temporärer Datei“
deaktiviert ist. Diese Optopn finden Sie unter „Bearbeiten“ > „Voreinstellungen“ > „Vorschau im Browser“.
• Stellen Sie sicher, dass das neueste FlashPlayer-Plugin installiert ist.
• Vermeiden Sie nach Möglichkeit, Dateien und Ordner außerhalb von Dreamweaver zu verschieben. Wenn Sie
Dateien und Ordner außerhalb von Dreamweaver verschieben, ist nicht mehr gewährleistet, dass für FLV-
abhängige Dateien die korrekten Pfade eingetragen sind.
• Sie können die Probleme verursachende FLV-Datei vorübergehend durch eine andere ersetzen, von der Sie wissen,
dass sie funktioniert. Wenn die ersetzte FLV-Datei korrekt angezeigt wird, dann liegt das Problem an der
ursprünglichen FLV-Datei und nicht am Browser oder am Computer.
FLV-Komponenten bearbeiten oder löschen
Sie können die Einstellungen für Videos auf Ihrer Webseite ändern, indem Sie im Dreamweaver-Dokumentfenster
den Platzhalter für die Videokomponente auswählen und die Änderungen im Eigenschafteninspektor vornehmen.
Eine andere Möglichkeit besteht darin, die Videokomponente zu löschen und die neue Videokomponente über
„Einfügen“ > „Medien“ > „FLV“ einzufügen.
FLV-Komponenten bearbeiten
1 Wählen Sie den Platzhalter für die Videokomponente im Dreamweaver-Dokumentfenster aus, indem Sie in der
Mitte des Platzhalters auf das Symbol „FLV“ klicken.
2 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und nehmen Sie die gewünschten
Änderungen vor.
Note: Der Videotyp kann nicht mit dem Eigenschafteninspektor geändert werden (z. B. von „Progressiver Video-
Download“ in „Streaming-Video“). Wenn Sie den Videotyp ändern möchten, löschen Sie die FLV-Komponente und
fügen Sie dann über „Einfügen“ > „Medien“ > „FLV“ die geänderte Komponente wieder ein.
FLV-Komponenten löschen
❖ Wählen Sie den Platzhalter für die FLV-Komponente im Dreamweaver-Dokumentfenster aus und drücken Sie die
Entf-Taste.
274
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
FLV-Erkennungscode entfernen
Ab Dreamweaver CS4 wird Flash Player-Erkennungscode direkt in das object-Tag eingefügt, das die FLV-Datei
enthält. In Dreamweaver bis Version CS3 befindet sich Erkennungscode hingegen außerhalb des object-Tags der FLV-
Datei. Aus diesem Grund müssen Sie beim Löschen von FLV-Dateien aus Seiten, die mit Dreamweaver bis
Version CS3 erstellt wurden, zunächst die FLV-Dateien löschen und dann mit dem Befehl „FLV-Erkennung
entfernen“ auch den Erkennungscode entfernen.
❖ Wählen Sie „Befehle“ > „FLV-Erkennung entfernen“ aus.
SWF-Dateien einfügen
FLA-, SWF- und FLV-Dateitypen
Vor dem Einfügen der mit Adobe Flash erstellten Inhalte mithilfe von Dreamweaver sollten Sie sich mit den folgenden
Dateitypen vertraut machen.
FLA-Datei (.fla) Dies ist die Quelldatei für alle Projekte. Sie wird im Flash-Authoring-Tool erstellt. Dieser Dateityp
kann nur in Flash geöffnet werden (nicht in Dreamweaver oder in Browsern). Sie können die FLA-Datei in Flash
öffnen und als SWF- oder SWT-Datei veröffentlichen, um sie in Browsern verwenden zu können.
SWF-Datei (.swf) Dies ist eine komprimierte Version der FLA-Datei (.fla), die für die Anzeige im Web optimiert
wurde. Diese Datei kann in Browsern wiedergegeben und in der Vorschau von Dreamweaver angezeigt, jedoch nicht
in Flash bearbeitet werden.
FLV-Datei (.flv) Dies ist eine Videodatei, die kodierte Audio- und Videodaten für die Wiedergabe über Flash® Player
enthält. QuickTime- oder Windows Media-Videodateien können beispielsweise mit einem Kodierprogramm (z. B.
Flash® Video Encoder oder Sorensen Squeeze) in FLV-Dateien umgewandelt werden. Weitere Informationen finden
Sie im Video Technology Center unter www.adobe.com/go/flv_devcenter_de.
More Help topics
“Flash und Dreamweaver verwenden” on page 408
“FLV-Dateien einfügen” on page 268
SWF-Dateien einfügen und in der Vorschau anzeigen
Mit Dreamweaver können Sie SWF-Dateien in Webseiten einfügen und dann als Vorschau in einem Dokument oder
Browser anzeigen. Sie haben außerdem die Möglichkeit, im Eigenschafteninspektor die Eigenschaften für SWF-
Dateien festzulegen.
Ein Tutorial zum Einfügen von SWF-Dateien in Webseiten finden Sie unter www.adobe.com/go/vid0150_de.
More Help topics
“Flash und Dreamweaver verwenden” on page 408
“Bearbeiten einer SWF-Datei aus Dreamweaver in Flash” on page 408
SWF-Dateien und DHTML-Ebenen
“Shockwave-Filme einfügen” on page 283
275
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
“FLV-Dateien einfügen” on page 268
Tutorial zum Verwenden von Flash-Inhalten
SWF-Dateien einfügen
1 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den Inhalt
einfügen möchten. Führen Sie anschließend einen der folgenden Schritte aus:
• Wählen Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ die Option „Medien“ aus und klicken Sie auf
das Symbol „SWF“ .
• Wählen Sie „Einfügen“ > „Medien“ > „SWF“ aus.
2 Wählen Sie im dann angezeigten Dialogfeld eine SWF-Datei (.swf) aus.
Im Dokumentfenster wird ein Platzhalter für die SWF-Datei angezeigt.
Der Platzhalter wird mit blauer Kontur und einem Register angezeigt. Auf dem Register sind der Elementtyp (SWF-
Datei) und die ID der SWF-Datei angegeben. Darüber hinaus wird auf dem Register ein Symbol mit einem Auge
angezeigt. Über dieses Symbol kann zwischen der SWF-Datei und den Downloadinformationen gewechselt werden,
die Benutzern angezeigt werden, wenn sie nicht die korrekte Version von Flash Player verwenden.
3 Speichern Sie die Datei.
Daraufhin wird eine Meldung darüber angezeigt, dass die beiden abhängigen Dateien „expressInstall.swf“ und
„swfobject_modified.js“ im Ordner „Scripts“ Ihrer Site gespeichert werden. Denken Sie daran, dass auch diese Dateien
hochgeladen werden müssen, wenn Sie die SWF-Datei auf Ihren Webserver hochladen. Die SWF-Datei kann in
Browsern nur korrekt angezeigt werden, wenn auch diese abhängigen Dateien hochgeladen wurden.
Note: Microsoft Internet Information Server (IIS) verarbeitet keine verschachtelten object-Tags. Für ASP-Seiten
verwendet Dreamweaver beim Einfügen von SWF- oder FLV-Dateien verschachtelten object/embed-Code anstelle von
verschachteltem object-Code.
Flash Player-Downloadinformationen bearbeiten
Beim Einfügen einer SWF-Datei in eine Seite wird in Dreamweaver Code eingefügt, mit dem ermittelt wird, ob der
Benutzer die korrekte Version von Flash Player verwendet. Wenn dies nicht der Fall ist, wird alternativer Inhalt
angezeigt und der Benutzer aufgefordert, die neueste Version herunterzuladen. Sie können den alternativen Inhalt
jederzeit ändern.
Dieses Verfahren wird auch bei FLV-Dateien angewendet.
Note: Wenn ein Benutzer nicht die erforderliche Version, jedoch Flash Player ab Version 6.0 r65 verwendet, wird im
Browser die Express-Installation für Flash Player angezeigt. Wenn der Benutzer die Express-Installation nicht ausführt,
wird auf der Seite der alternative Inhalt angezeigt.
1 Wählen Sie in der Entwurfsansicht des Dokumentfensters die SWF- oder FLV-Datei aus.
2 Klicken Sie auf dem Register der SWF- oder FLV-Datei auf das Symbol mit dem Auge.
276
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Sie können auch Strg+] drücken, um zur Anzeige des alternativen Inhalts zu wechseln. Um zur Ansicht der SWF- oder
FLV-Datei zurückzukehren, drücken Sie Strg+[, bis der gesamte alternative Inhalt ausgewählt ist. Drücken Sie dann
erneut Strg+[.
3 Sie können den Inhalt wie jeden anderen Inhalt in Dreamweaver bearbeiten.
Note: Sie können keine SWF- oder FLV-Dateien als alternativen Inhalt einfügen.
4 Klicken Sie erneut auf das Symbol mit dem Auge, um in die Ansicht der SWF- oder FLV-Datei zurückzukehren.
Vorschau von SWF-Dateien im Dokumentfenster anzeigen
1 Klicken Sie im Dokumentfenster auf den Platzhalter der SWF-Datei, um den Inhalt auszuwählen.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche „Abspielen“. Klicken Sie
auf „Stopp“, um die Vorschau zu beenden. Sie können eine Vorschau der SWF-Datei auch in einem Browser
anzeigen, indem Sie die Taste F12 drücken.
Um eine Vorschau aller SWF-Dateien einer Seite anzuzeigen, drücken Sie Strg+Alt+Umschalt+P (Windows) bzw.
Befehl+Wahl+Umschalt+P (Macintosh). Alle SWF-Dateien werden in den Wiedergabemodus versetzt.
Eigenschaften für SWF-Dateien festlegen
Sie können im Eigenschafteninspektor die Eigenschaften für SWF-Dateien festlegen. Die Eigenschaften können auch
auf Shockwave-Filme angewendet werden.
❖ Wählen Sie eine SWF-Datei oder einen Shockwave-Film aus und legen Sie die gewünschten Eigenschaften im
Eigenschafteninspektor („Fenster“ > „Eigenschaften“) fest. Um alle Eigenschaften anzuzeigen, klicken Sie auf den
Erweiterungspfeil in der unteren rechten Ecke des Eigenschafteninspektors.
ID Gibt eine eindeutige ID für die SWF-Datei an. Geben Sie im unbeschrifteten Textfeld ganz links im
Eigenschafteninspektor eine ID ein. Ab Dreamweaver CS4 ist eine eindeutige ID zwingend erforderlich.
B / H Legen die Breite und Höhe des Filmes in Pixel fest.
Datei Gibt den Pfad zur SWF- oder Shockwave-Datei an. Klicken Sie auf das Ordnersymbol, um die Datei
auszuwählen, oder geben Sie den Pfad ein.
Quelle Gibt den Pfad zum Quelldokument (FLA-Datei) an, wenn Dreamweaver und Flash auf dem Computer
installiert sind. Um eine SWF-Datei zu bearbeiten, aktualisieren Sie das Quelldokument des Films.
Hg Legt eine Hintergrundfarbe für den Filmbereich fest. Diese Farbe wird auch angezeigt, wenn der Film nicht
abgespielt wird (beim Laden und nach dem Abspielen).
Bearbeiten Startet Flash zum Aktualisieren einer FLA-Datei (eine im Flash-Authoring-Tool erstellte Datei). Diese
Option ist deaktiviert, wenn Flash nicht auf Ihrem Computer installiert ist.
Klasse Ermöglicht das Anwenden einer CSS-Klasse auf den Film.
Schleife Der Film wird in einer Endlosschleife wiedergegeben. Wenn „Schleife“ nicht ausgewählt ist, wird der Film
einmal wiedergegeben und dann beendet.
Automatisch abspielen Spielt den Film automatisch ab, während die Seite geladen wird.
V-Abstand und H-Abstand Legen die Anzahl der Pixel für den Leerraum oberhalb, unterhalb und an beiden Seiten des
Films fest.
Qualität Steuert das Anti-Aliasing während der Wiedergabe des Films. Durch hohe Einstellungen verbessert sich die
Wiedergabe von Filmen. Bei Filmen mit hohen Einstellungen ist jedoch ein schneller Prozessor erforderlich, damit die
Filme korrekt wiedergegeben werden. Mit der Einstellung „Niedrig“ erzielen Sie eine höhere Geschwindigkeit auf
Kosten der Darstellung und mit der Einstellung „Hoch“ eine bessere Darstellung auf Kosten der Geschwindigkeit. Bei
277
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
„Auto-Niedrig“ hat zunächst die Geschwindigkeit einen höheren Stellenwert, die Darstellung wird jedoch nach
Möglichkeit verbessert. Bei „Auto-Hoch“ haben Darstellung und Geschwindigkeit den gleichen Stellenwert, die
Darstellung wird jedoch gegebenenfalls zugunsten der Geschwindigkeit reduziert.
Skalierung Legt fest, wie der Film in die Abmessungen eingepasst wird, die in die Felder für die Breite und Höhe
eingegeben wurden. Bei der Einstellung „Standard (Alles zeigen)“ wird der gesamte Film angezeigt.
Ausrichten Legt fest, wie der Film auf der Seite ausgerichtet wird.
wMode Legt den für die SWF-Datei wMode-Parameter fest, um Konflikte mit DHTML-Elementen (z. B. Spry-
Widgets) zu vermeiden. Der Standardwert ist „opaque“. Bei diesem Wert werden DHTML-Elemente in einem
Browser über SWF-Dateien angezeigt. Wenn die SWF-Datei transparente Bereiche enthält und DHTML-Elemente
hinter diesen Bereichen angezeigt werden sollen, wählen Sie die Option „transparent“ aus. Wählen Sie die Option
„window“ aus, damit der wMode-Parameter aus dem Code entfernt und die SWF-Datei über anderen DHTML-
Elementen angezeigt wird.
Abspielen Gibt den Film im Dokumentfenster wieder.
Parameter Öffnet ein Dialogfeld, in dem Sie zusätzliche Parameter eingeben können, die an den Film übergeben
werden sollen. Der Film muss für den Erhalt dieser zusätzlichen Parameter konfiguriert worden sein.
FlashPaper-Dokumente einfügen
Die Funktion „FlashPaper einfügen“ ist ab Dreamweaver CS5 veraltet.
Web-Widgets hinzufügen
Bei einem Web-Widget handelt es sich um eine Webseitenkomponente aus HTML-, CSS- und JavaScript-Code.
Beispiele für Web-Widgets sind Akkordeons, Paletten mit Registerkarten und Kalender.
Ihre eigene Auswahl von Web-Widgets in Dreamweaver können Sie mithilfe des Adobe Widget-Browsers festlegen.
Der Adobe Widget-Browser ist eine grafische Benutzeroberfläche, über die Sie Widgets durchsuchen, konfigurieren
und in einer Vorschau anzeigen können.
1 Wählen Sie „Einfügen“ > „Widget“.
2 Wählen Sie im Dialogfeld „Widget“ ein Widget aus, legen Sie (gegebenenfalls) die Vorgabe fest und klicken Sie auf
„OK“.
Sie können ein Web-Widget auch zu einer Dreamweaver-Seite hinzufügen (ab CS5.5), indem Sie folgende Schritte
ausführen:
1 Klicken Sie im Widget Browser auf „Eigene Widgets“.
2 Wählen Sie das Widget aus, das hinzugefügt werden soll.
3 Klicken Sie in der linken oberen Ecke der Registerkarte „Live-Ansicht“ auf das Symbol „Drag-&-Drop in
Dreamweaver“ und halten Sie die Maustaste gedrückt. Ziehen Sie das Widget auf den Dreamweaver-Arbeitsbereich
und zwar in der Entwurfsansicht (Windows) bzw. in der Entwurfs- oder Codeansicht (Macintosh OS).
Sie können das Widget zwar nicht in die Live-Ansicht ziehen, können es aber nach dem Ablegen auf der Seite in der
Live-Ansicht testen.
278
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
More Help topics
Adobe Widget-Browser-Hilfe
“Arbeiten mit Spry-Widgets (allgemeine Anweisungen)” on page 457
Audiomaterial hinzufügen
Audiodateiformate
Sie können Audiodateien in eine Webseite integrieren. Es gibt verschiedene Arten von Audiodateien und -formaten,
z. B. .wav, .midi und .mp3. Bevor Sie sich für ein Format und eine Methode zum Hinzufügen einer Audiodatei
entscheiden, sollten Sie sich mit Faktoren wie Zweck der Audiodatei, Zielgruppe, Dateigröße, Audioqualität und
Unterschiede zwischen den einzelnen Browsern beschäftigen.
Note: Audiodateien werden von unterschiedlichen Browsern auf sehr unterschiedliche Weise verarbeitet. Sie können
einer SWF-Datei eine Audiodatei hinzufügen und dann die SWF-Datei einbetten, um eine bessere Konsistenz zu
gewährleisten.
In der folgenden Liste werden die gängigen Audiodateiformate samt ihrer Vor- und Nachteile beim Entwickeln von
Websites beschrieben.
.midi oder .mid (Musical Instrument Digital Interface) Dieses Dateiformat wird für Instrumentalmusik verwendet.
MIDI-Dateien werden von vielen Browsern unterstützt und erfordern kein Plug-In. Die Klangqualität ist zwar generell
sehr gut, kann aber je nach der verwendeten Soundkarte schwanken. Eine kleine MIDI-Datei kann einen langen
Audio-Clip enthalten. MIDI-Dateien können nicht aufgezeichnet werden, sondern werden mithilfe eines Computers
mit spezieller Hard- und Software synthetisiert.
.wav (Waveform Extension) Diese Dateien haben eine gute Klangqualität, werden von vielen Browsern unterstützt
und erfordern kein Plug-In Sie können Ihre eigenen WAV-Dateien von CDs oder Kassetten überspielen oder mit
einem Mikrofon aufnehmen. Aufgrund des Umfangs dieser Dateien ist die Länge der Audio-Clips, die Sie auf
Webseiten verwenden können, ziemlich begrenzt.
.aif (Audio Interchange File Format, auch AIFF) Dateien im AIFF-Format haben wie WAV-Dateien eine gute
Klangqualität, werden von vielen Browsern unterstützt und benötigen kein Plug-In. Sie können Ihre eigenen AIFF-
Dateien von CDs oder Kassetten überspielen oder mit einem Mikrofon aufnehmen. Aufgrund des Umfangs dieser
Dateien ist die Länge der Audio-Clips, die Sie auf Webseiten verwenden können, ziemlich begrenzt.
.mp3 (Motion Picture Experts Group Audio oder MPEG-Audio Layer-3) Dies ist ein komprimiertes Format, das
Audiodateien erheblich verkleinert. Die Klangqualität ist sehr gut: Wenn eine MP3-Datei korrekt aufgenommen und
komprimiert ist, kann CD-Qualität erreicht werden. Mit der MP3-Technologie können Sie die Datei im Streaming-
Verfahren abspielen, sodass die Besucher Ihrer Website nicht zuerst die ganze Datei herunterladen müssen, bevor die
Datei abgespielt werden kann. Die Datei ist jedoch größer als eine Real Audio-Datei, daher kann das Herunterladen
eines ganzen Musiktitels über eine gängige Modem-DFÜ-Verbindung (Telefonleitung) trotzdem eine ganze Weile
dauern. Für die Wiedergabe von MP3-Dateien müssen Besucher Ihrer Website eine Hilfsanwendung oder ein Plug-In
wie QuickTime, Windows Media Player oder RealPlayer installiert haben.
.ra, .ram, .rpm oder Real Audio Dieses Format zeichnet sich durch eine sehr starke Komprimierung und somit
kleinere Dateien als bei MP3 aus. Ganze Musikdateien können in einer akzeptablen Zeit heruntergeladen werden. Da
diese Dateien im Streaming-Verfahren von einem normalen Webserver heruntergeladen werden können, ist das
Anhören der Audiodatei bereits möglich, bevor die Datei vollständig übertragen wurde. Besucher Ihrer Website
müssen das RealPlayer-Plug-In herunterladen und installieren, bevor sie diese Dateien wiedergeben können.
279
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
.qt, .qtm, .mov oder QuickTime Dies ist sowohl ein Audio- als auch ein Videoformat, das von Apple Computer
entwickelt wurde. QuickTime ist in Apple Macintosh-Betriebssystemen enthalten und wird von den meisten
Macintosh-Anwendungen mit Audio, Video oder Animation verwendet. PCs können Dateien im QuickTime-Format
ebenfalls abspielen; hierfür ist jedoch ein spezieller QuickTime-Treiber erforderlich. QuickTime unterstützt die
meisten Kodierformate einschließlich Cinepak, JPEG und MPEG.
Note: Zusätzlich zu den oben angeführten gängigeren Formaten gibt es zahlreiche verschiedene Audio- und Video-
Dateiformate, die zur Verwendung im Internet zur Verfügung stehen. Wenn Sie auf ein Mediendateiformat treffen, mit
dem Sie nicht vertraut sind, bitten Sie den Ersteller des Formats um Informationen dazu, wie Sie es am besten verwenden
und nutzen können.
More Help topics
“Medienobjekte einfügen und bearbeiten” on page 280
Hyperlinks zu einer Audiodatei
Die Verwendung von Hyperlinks zu Audiodateien ist ein einfaches und effektives Verfahren zum Hinzufügen von
Audiodateien zu einer Webseite. Bei diesem Verfahren können Besucher Ihrer Website wählen, ob sie sich die Datei
anhören möchten. Gleichzeitig stellen Sie die Datei einem breiten Publikum zur Verfügung.
1 Wählen Sie die Textstelle oder Grafik aus, die Sie als Hyperlink zur Audiodatei verwenden möchten.
2 Klicken Sie im Eigenschafteninspektor auf das Ordnersymbol neben dem Textfeld „Hyperlink“, um die Audiodatei
auszuwählen, oder geben Sie den Pfad und den Namen der Datei im Feld „Hyperlink“ ein.
Audiodateien einbetten
Beim Einbetten von Audiodateien wird der Sound direkt in die Seite integriert. Die Audiodatei wird allerdings nur
wiedergegeben, wenn Besucher der Website das entsprechende Plug-In für die Audiodatei installiert haben. Betten Sie
Audiodateien ein, wenn Sie sie als Hintergrundmusik verwenden, die Lautstärke ändern bzw. die Darstellung auf der
Seite oder den Anfang und das Ende der Audiodatei festlegen möchten.
Beim Einfügen von Audiodateien in Ihre Webseiten sollten Sie darauf achten, dass die Dateien in der Site auf eine
sinnvolle Weise eingesetzt werden. Außerdem sollten Sie die Präferenzen der Site-Besucher hinsichtlich der Nutzung
dieser Medienressourcen berücksichtigen. Stellen Sie immer ein Steuerelement zum Aus- oder Stummschalten des Sounds
bereit, falls die Besucher ihn nicht hören möchten.
1 Setzen Sie die Einfügemarke in der Entwurfsansicht an die Stelle, an der Sie die Datei einbetten möchten. Führen
Sie anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
im Popupmenü das Symbol „Plug-In“ aus.
• Wählen Sie „Einfügen“ > „Medien“ > „Plug-In“.
2 Suchen Sie die Audiodatei und klicken Sie auf „OK“.
3 Geben Sie die Breite und Höhe ein, indem Sie die Werte in den entsprechenden Textfeldern im
Eigenschafteninspektor eingeben oder die Größe des Plug-In-Platzhalters im Dokumentfenster ändern.
Diese Werte legen die Größe fest, in der die Audio-Steuerelemente im Browser angezeigt werden.
280
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Hinzufügen von Medienobjekten
Medienobjekte einfügen und bearbeiten
Neben SWF- und FLV-Dateien können Sie QuickTime- oder Shockwave-Filme, Java-Applets, ActiveX-
Steuerelemente und andere Audio- oder Videoobjekte in ein Dreamweaver-Dokument einfügen. Wenn Sie
Eingabehilfen-Attribute mit einem Medienobjekt eingefügt haben, können Sie diese Eingabehilfen-Attribute
einstellen und die zugehörigen Werte im HTML-Code bearbeiten.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Objekt einfügen möchten.
2 Fügen Sie das Objekt ein, indem Sie einen der folgenden Schritte ausführen:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
das Symbol für den einzufügenden Objekttyp aus.
• Wählen Sie das entsprechende Objekt im Untermenü „Einfügen“ > „Medien“ aus.
• Wenn das einzufügende Objekt kein Shockwave-, Applet- oder ActiveX-Objekt ist, wählen Sie „Einfügen“ >
„Medien“ > „Plug-In“ aus.
Daraufhin wird ein Dialogfeld angezeigt, in dem Sie eine Quelldatei auswählen und verschiedene Parameter für das
Medienobjekt festlegen können.
Wenn Sie festlegen möchten, dass dieses Dialogfeld nicht angezeigt wird, wählen Sie „Bearbeiten“ >
„Voreinstellungen“ > „Allgemein“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ > „Allgemein“
(Macintosh) aus und deaktivieren Sie die Option „Beim Einfügen von Objekten Dialogfeld zeigen“. Um die derzeitigen
Einstellungen für die Anzeige von Dialogfeldern außer Kraft zu setzen, halten Sie die Strg-Taste (Windows) bzw. die
Wahltaste (Macintosh) gedrückt, während Sie das Objekt einfügen. (Um beispielsweise einen Platzhalter für einen
Shockwave-Film ohne Angabe der Datei einzufügen, klicken Sie bei gedrückter Strg-Taste bzw. Wahltaste in der
Kategorie „Allgemein“ des Bedienfelds „Einfügen“ im Popupmenü „Medien“ auf die Schaltfläche „Shockwave“ oder
wählen Sie „Einfügen“ > „Medien“ > „Shockwave“ aus.)
3 Nehmen Sie im Dialogfeld „Datei auswählen“ die gewünschten Einstellungen vor und klicken Sie dann auf „OK“.
Note: Das Dialogfeld „Eingabehilfen-Attribute“ wird angezeigt, wenn Sie unter „Bearbeiten“ > „Voreinstellungen“
festgelegt haben, dass beim Einfügen von Medien Attribute angezeigt werden sollen.
4 Legen Sie die Eingabehilfen-Attribute fest.
Note: Sie können Medienobjektattribute auch bearbeiten, indem Sie das Objekt auswählen und den HTML-Code in der
Codeansicht bearbeiten, oder indem Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) klicken und „Tag-Code bearbeiten“ wählen.
Titel Geben Sie für das Medienobjekt einen Titel ein.
Zugriffstaste Geben Sie im Textfeld eine Taste (einen Buchstaben) ein, mit der das Formularobjekt im Browser
ausgewählt werden kann. Die Besucher der Site können dann durch Drücken der Strg-Taste (Windows) zusammen
mit der Zugriffstaste auf das Objekt zugreifen. Wenn Sie zum Beispiel „B“ als Zugriffstaste definieren, können Sie das
Objekt im Browser mit Strg+B auswählen.
Reihenfolgenposition Geben Sie eine Zahl für die Tabulatorreihenfolge des Formularobjekts an. Das Festlegen einer
Reihenfolge ist sinnvoll, wenn eine Seite weitere Hyperlinks und Formularobjekte enthält. Der Benutzer gelangt dann
in einer bestimmten Reihenfolge mithilfe der Tabulatortaste von einem Element zum nächsten. Wenn Sie für ein
Objekt eine Reihenfolgenposition festlegen, sollten Sie dies auch bei allen anderen Objekten tun.
5 Klicken Sie auf „OK“, um das Medienobjekt einzufügen.
281
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Wenn Sie auf „Abbrechen“ klicken, wird im Dokument ein Medienobjekt-Platzhalter angezeigt, der jedoch von
Dreamweaver nicht mit Eingabehilfen-Tags oder -Attributen versehen wird.
Zur Angabe einer Quelldatei, der Abmessungen und anderer Parameter und Attribute verwenden Sie den
Eigenschafteninspektor des entsprechenden Objekts. Sie können die Eingabehilfen-Attribute eines Objekts
bearbeiten.
More Help topics
“Arbeitsbereich für barrierefreies Seitenlayout optimieren” on page 744
Externen Editor für Multimedia-Dateien starten
Die meisten Mediendateien können bearbeitet werden, indem Sie von Dreamweaver aus einen externen Editor
aufrufen. Außerdem können Sie festlegen, welcher Editor von Dreamweaver zur Bearbeitung einer Datei gestartet
werden soll.
1 Stellen Sie sicher, dass der Mediendateityp mit einem Editor im System verbunden ist.
Um herauszufinden, welcher Editor mit dem Dateityp verbunden ist, wählen Sie in Dreamweaver „Bearbeiten“ >
„Voreinstellungen“ und dann in der Liste „Kategorie“ den Eintrag „Dateitypen/Editoren“. Klicken Sie in der Spalte
„Erweiterungen“auf die Erweiterung der Datei, damit alle verbundenen Editoren in der Spalte „Editoren“ angezeigt
werden. Sie können den mit einem Dateityp verbundenen Editor ändern.
2 Doppelklicken Sie im Bedienfeld „Dateien“ auf die Mediendatei, um sie im externen Editor zu starten.
Der Editor, der gestartet wird, wenn Sie im Bedienfeld „Dateien“ auf eine Datei doppelklicken, wird als primärer
Editor bezeichnet. Wenn Sie beispielsweise auf eine Bilddatei doppelklicken, startet Dreamweaver die Datei im
primären externen Bildeditor, z. B. in Adobe Fireworks.
3 Wenn Sie die Datei nicht mit dem primären externen Editor bearbeiten möchten, können Sie mit einem der
folgenden Schritte einen anderen Editor im System zum Bearbeiten der Datei verwenden:
• Klicken Sie im Bedienfeld „Dateien“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf den Dateinamen und wählen Sie im Kontextmenü „Öffnen mit“.
• Klicken Sie in der Entwurfsansicht mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf das Medienelement in der aktuellen Seite und wählen Sie „Bearbeiten mit“ aus dem Kontextmenü.
Editor in Dreamweaver festlegen
Sie können den Editor festlegen, der von Dreamweaver zum Bearbeiten eines Dateityps und zum Hinzufügen oder
Löschen der Dateitypen gestartet werden soll, die von Dreamweaver erkannt werden.
Präzise festlegen, welche externen Editoren für einen bestimmten Dateityp gestartet
werden sollen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ und wählen Sie in der Liste „Kategorie“ den Eintrag
„Dateitypen/Editoren“ aus.
Auf der linken Seite unter „Erweiterungen“ werden Dateierweiterungen aufgelistet, wie z. B. .gif, .wav und .mpg. Die
verknüpften Editoren für eine ausgewählte Erweiterung werden rechts unter „Editoren“ aufgeführt.
282
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
2
Wählen Sie die Dateityperweiterung in der Liste „Erweiterungen“ aus und führen Sie einen der folgenden Schritte aus:
• Klicken Sie zum Verknüpfen eines neuen Editors mit dem Dateityp auf die Schaltfläche mit dem Pluszeichen (+)
über der Liste „Editoren“ und nehmen Sie im angezeigten Dialogfeld die erforderlichen Einstellungen vor.
Wählen Sie beispielsweise das Anwendungssymbol für Acrobat aus, um diese Anwendung mit dem Dateityp zu
verbinden.
• Wählen Sie den Editor in der Liste „Editoren“ aus und klicken Sie auf „Zu primärem Editor machen“, wenn Sie
einen Editor als primären Editor für einen Dateityp festlegen möchten (also als den Editor, der geöffnet wird, wenn
Sie im Bedienfeld „Dateien“ auf den Dateityp doppelklicken).
• Sie lösen die Verbindung zwischen einem Editor und einem Dateityp, indem Sie den Editor in der Liste der
Editoren auswählen und auf die Schaltfläche mit dem Minuszeichen (–) über dieser Liste klicken.
Neuen Dateityp und entsprechenden Editor hinzufügen
1 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über der Liste „Erweiterungen“ und geben Sie eine
Dateityperweiterung (einschließlich des Punkts vor der Erweiterung) oder mehrere verwandte Erweiterungen
(jeweils durch ein Leerzeichen getrennt) ein.
Sie können beispielsweise
.xml .xsl eingeben, um diese Dateitypen mit einem im System installierten XML-Editor
zu verbinden.
2 Wählen Sie einen Editor für den Dateityp aus, indem Sie auf die Schaltfläche mit dem Pluszeichen (+) über der Liste
„Editoren“ klicken und im daraufhin angezeigten Dialogfeld Eingaben vornehmen.
Dateitypen entfernen
❖ Wählen Sie den Dateityp in der Liste „Erweiterungen“ aus und klicken Sie auf die Schaltfläche mit dem
Minuszeichen (-) über dieser Liste.
Note: Das Entfernen eines Dateityps kann nicht wieder rückgängig gemacht werden. Entfernen Sie einen Dateityp also
nur, wenn Sie sich absolut sicher sind.
Design Notes mit Medienobjekten verwenden
In Dreamweaver können Sie Medienobjekten genau wie anderen Objekten Design Notes hinzufügen. Design Notes
sind mit einer bestimmten Datei verbundene Anmerkungen, die in einer separaten Datei gespeichert sind. Mit Design
Notes können Sie die zum Dokument gehörenden zusätzlichen Dateiinformationen verwalten, wie beispielsweise
Dateinamen von Bildquellen und Anmerkungen zum Dateistatus.
1 Klicken Sie im Dokumentfenster mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) auf das Objekt.
Note: Sie können einem Objekt erst dann Design Notes hinzufügen, nachdem Sie die Site definiert haben.
2 Klicken Sie im Kontextmenü auf „Design Notes für Seite“.
3 Geben Sie die Informationen ein, die Sie in die Design Note aufnehmen möchten.
Sie können einem Medienobjekt auch über das Bedienfeld „Dateien“ eine Design Note zuweisen. Wählen Sie hierzu
die Datei aus, öffnen Sie das Kontextmenü und klicken Sie darin auf „Design Notes“.
More Help topics
“Design Notes für eine Site aktivieren und deaktivieren” on page 113
“Dateiinformationen in Design Notes speichern” on page 113
283
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Shockwave-Filme einfügen
Mit Dreamweaver können Sie Shockwave-Filme in Ihre Dokumente einfügen. Adobe® Shockwave® ist ein Standard für
interaktive Multimedia-Inhalte im Internet. Hierbei handelt es sich um ein komprimiertes Format, mit dem
Mediendateien, die in Adobe® Director® erstellt wurden, schnell heruntergeladen und von den meisten gängigen
Browsern wiedergegeben werden können.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie einen Shockwave-Film einfügen
möchten. Führen Sie anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
im Popupmenü das Symbol „Shockwave“ aus.
• Wählen Sie „Einfügen“ > „Medien“ > „Shockwave“.
2 Wählen Sie im angezeigten Dialogfeld eine Filmdatei aus.
3 Geben Sie im Eigenschafteninspektor in den Feldern „H“ und „B“ die Höhe und die Breite des Films ein.
More Help topics
“Eigenschaften für SWF-Dateien festlegen” on page 276
Videos hinzufügen, die keine FLV-Videos sind
Sie können Ihrer Seite auf verschiedene Arten und in unterschiedlichen Formaten Videodateien hinzufügen.
Videodateien können entweder zum Benutzer heruntergeladen oder mithilfe des Streaming-Verfahrens übertragen
werden, bei dem die Wiedergabe bereits beim Herunterladen erfolgt.
1 Kopieren Sie den Clip in den Site-Ordner.
Solche Clips liegen meist im AVI- oder MPEG-Dateiformat vor.
2 Erstellen Sie einen Hyperlink zu dem Clip oder betten Sie den Clip in die Seite ein.
Geben Sie zum Erstellen des Hyperlinks zu dem Clip einen Text wie z. B. „Clip-Download“ ein, wählen Sie den Text
aus und klicken Sie im Eigenschafteninspektor auf das Ordnersymbol. Wählen Sie die Videodatei aus.
Note: Zum Anzeigen gängiger Streaming-Formate wie Real Media, QuickTime und Windows Media muss eine
Hilfsanwendung (ein Plug-In) heruntergeladen werden.
Plug-Ins einfügen
Sie können Inhalt wie zum Beispiel einen QuickTime-Film für ein Browser-Plug-In erstellen und mit Dreamweaver
diesen Inhalt in ein HTML-Dokument einfügen. Typische Plug-Ins sind beispielsweise RealPlayer und QuickTime
und Beispiele für Inhaltsdateien sind MP3-Dateien und QuickTime-Filme.
Sie können eine Vorschau von Filmen und Animationen, die auf Browser-Plug-Ins basieren, direkt in der
Entwurfsansicht des Dokumentfensters anzeigen. Wenn Sie alle Plug-In-Elemente zusammen abspielen, sehen Sie,
wie die Seite für den Benutzer angezeigt wird. Sie können sie aber auch einzeln abspielen, um sicherzustellen, dass Sie
die richtigen Medienelemente eingebettet haben.
Note: Auf ActiveX-Steuerelementen basierende Filme oder Animationen können nicht als Vorschau angezeigt werden.
Nachdem Sie den Inhalt für ein Browser-Plug-In eingefügt haben, können Sie im Eigenschafteninspektor die
Parameter für den Inhalt festlegen. Um die Eigenschaften eines Plug-In-Objekts anzuzeigen, wählen Sie es im
Eigenschafteninspektor aus,
284
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Der Eigenschafteninspektor zeigt zunächst nur die am häufigsten verwendeten Attribute an. Klicken Sie unten rechts
auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
Inhalte für Plug-Ins einfügen und Eigenschaften festlegen
1 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den Inhalt
einfügen möchten. Führen Sie anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
im Menü das Symbol „Plug-In“ aus.
• Wählen Sie „Einfügen“ > „Medien“ > „Plug-In“.
2 Wählen Sie im angezeigten Dialogfeld eine Inhaltsdatei für ein Plug-In aus und klicken Sie auf „OK“.
3 Nehmen Sie im Eigenschafteninspektor die gewünschten Einstellungen für das Plug-In vor.
Spry-QuickInfo Legt einen Namen fest, um das Plug-In bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem
unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein.
B / H Legen die Werte für Breite und Höhe in Pixel fest, die dem Objekt auf der Seite zugewiesen werden.
Quelle Gibt die Datenquelldatei an. Klicken Sie auf das Ordnersymbol, um die Datei auszuwählen, oder geben Sie
einen Dateinamen ein.
Plg-URL Gibt die URL des pluginspace-Attributs an. Geben Sie die vollständige URL der Site ein, von der die
Benutzer das Plug-In herunterladen können. Wenn ein Benutzer, der die Seite anzeigt, nicht über das Plug-In verfügt,
versucht der Browser, das Plug-In von dieser URL herunterzuladen.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird.
V-Abstand und H-Abstand Legen die Anzahl der Pixel für den Leerraum oberhalb, unterhalb und an beiden Seiten des
Plug-Ins fest.
Rahmen Legt die Breite des Rahmens fest, der das Plug-In umgibt.
Parameter Öffnet ein Dialogfeld, in dem Sie zusätzliche Parameter eingeben können, die an das Plug-In übergeben
werden sollen. Viele Plug-Ins reagieren auf Sonderparameter.
Sie können die Attribute des ausgewählten Plug-Ins auch anzeigen, indem Sie auf die Schaltfläche „Attribut“ klicken.
In dem daraufhin angezeigten Dialogfeld können Sie Attribute wie die Breite und Höhe bearbeiten, hinzufügen und
löschen.
Inhalt eines Plug-Ins im Dokumentfenster wiedergeben
1
Fügen Sie ein bzw. mehrere Medienelemente anhand eines der im vorherigen Abschnitt beschriebenen Verfahren ein.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie eines der eingefügten Medienelemente aus und wählen Sie „Ansicht“ > „Plug-Ins“ > „Wiedergeben“
oder klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Abspielen“.
• Wählen Sie „Ansicht“ > „Plug-Ins“ > „Alle wiedergeben“, um alle Medienelemente auf der ausgewählten Seite
abzuspielen, für die Plug-Ins erforderlich sind.
Note: Der Befehl „Alle wiedergeben“ wirkt sich nur auf das aktuelle Dokument aus und beispielsweise nicht auf andere
Dokumente innerhalb des Framesets.
Wiedergabe des Plug-In-Inhalts stoppen
❖ Wählen Sie ein Medienelement aus und wählen Sie „Ansicht“ > „Plug-Ins“ > „Stoppen“ oder klicken Sie im
Eigenschafteninspektor auf die Schaltfläche „Stoppen“.
285
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Sie können auch „Ansicht“ > „Plug-Ins“ > „Alle stoppen“ wählen, um die Wiedergabe aller Plug-In-Inhalte zu
stoppen.
Fehlersuche in Plug-Ins
Gehen Sie wie folgt vor, wenn Sie die oben angegebenen Schritte ausgeführt haben, jedoch nicht der gesamte Inhalt
des Plug-Ins im Dokumentfenster wiedergegeben wird:
• Stellen Sie sicher, dass das entsprechende Plug-In auf Ihrem Computer installiert ist und dass der Inhalt mit Ihrer
Version des Plug-Ins kompatibel ist.
• Öffnen Sie die Datei „Configuration/Plugins/UnsupportedPlugins.txt“ in einem Texteditor und prüfen Sie, ob das
problematische Plug-In darin aufgeführt ist. Diese Datei enthält eine Liste der Plug-Ins, die in Dreamweaver zu
Problemen führen und daher nicht unterstützt werden. (Wenn bei einem bestimmten Plug-In Probleme auftreten,
sollten Sie es dieser Datei hinzufügen.)
• Überprüfen Sie, ob genügend Speicherplatz vorhanden ist. Einige Plug-Ins benötigen 2 bis 5 MB zusätzlichen
Speicher, damit sie ausgeführt werden können.
ActiveX-Steuerelemente einfügen
Sie können ein ActiveX-Steuerelement in die Seite einfügen. ActiveX-Steuerelemente (früher OLE-Steuerelemente
genannt) sind Komponenten, die wieder verwendet werden können. Sie sind mit einer Miniaturanwendung
vergleichbar und funktionieren in etwa wie ein Browser-Plug-In. Diese Steuerelemente können in Internet Explorer
mit Windows verwendet werden, nicht jedoch in Macintosh-Browsern. Mit dem ActiveX-Objekt von Dreamweaver
können Sie Attribute und Parameter für ActiveX-Steuerelemente in den Browsern Ihrer Website-Besucher angeben.
Nachdem Sie ein ActiveX-Objekt eingefügt haben, legen Sie mit dem Eigenschafteninspektor Attribute für
das
object-Tag sowie Parameter für die ActiveX-Steuerelemente fest. Klicken Sie im Eigenschafteninspektor auf die
Schaltfläche „Parameter“, um Namen und Werte für Eigenschaften einzugeben, die nicht im Eigenschafteninspektor
angezeigt werden. Es gibt kein allgemein gültiges Standardformat für die Parameter der ActiveX-Steuerelemente.
Schlagen Sie in der Dokumentation des jeweiligen ActiveX-Steuerelements nach, welche Parameter verwendet werden
sollten.
❖ Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie den Inhalt einfügen möchten. Führen Sie
anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
das Symbol „ActiveX“ aus.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
das Symbol „ActiveX“ aus. Wenn das Symbol „ActiveX“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie es
direkt in das Dokumentfenster ziehen.
• Wählen Sie „Einfügen“ > „Medien“ > „ActiveX“. Ein Symbol zeigt an, wo das ActiveX-Steuerelement auf der Seite
in Internet Explorer angezeigt wird.
ActiveX-Eigenschaften
Der Eigenschafteninspektor zeigt zunächst nur die am häufigsten verwendeten Attribute an. Klicken Sie unten rechts
auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
Spry-QuickInfo Legt einen Namen fest, um das ActiveX-Objekt bei der Skriptverarbeitung zu identifizieren. Geben Sie
in dem unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein.
B / H Legen die Breite und Höhe des Objekts in Pixel fest.
286
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Klassen-ID Identifiziert das ActiveX-Steuerelement für den Browser. Geben Sie entweder einen Wert ein oder wählen
Sie im Popupmenü einen Wert aus. Wenn die Seite geladen wird, verwendet der Browser die Klassen-ID, um das
ActiveX-Steuerelement zu finden, das für das jeweilige ActiveX-Objekt erforderlich ist. Kann der Browser das
angegebene ActiveX-Steuerelement nicht finden, versucht er, es von der Site herunterzuladen, die unter „Basis“
angegeben ist.
Einbetten Fügt ein embed-Tag im object-Tag für das ActiveX-Steuerelement ein. Wenn es zu dem ActiveX-
Steuerelement eine Entsprechung zu anderen Plug-Ins gibt, aktiviert das Tag
embed dieses Plug-In. Dreamweaver
ordnet die von Ihnen als ActiveX-Eigenschaften eingegebenen Werte ihren Plug-In-Entsprechungen in zu.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird.
Parameter Öffnet ein Dialogfeld, in dem Sie zusätzliche Parameter eingeben können, die an das ActiveX-Objekt
übergeben werden sollen. Viele ActiveX-Steuerelemente reagieren auf Sonderparameter.
Quelle Definiert die Datendatei, die für ein Plug-In verwendet werden soll, wenn die Option „Einbetten“ aktiviert ist.
Wenn Sie keinen Wert angeben, versucht Dreamweaver, den Wert anhand der bereits eingegebenen ActiveX-
Eigenschaften zu ermitteln.
V-Abstand und H-Abstand Legen die Anzahl der Pixel für den Leerraum oberhalb, unterhalb und an beiden Seiten des
Objekts fest.
Basis Legt die URL fest, die das ActiveX-Steuerelement enthält. Internet Explorer lädt das ActiveX-Steuerelement von
dieser Site herunter, wenn es noch nicht im System des Besuchers installiert ist. Wenn Sie den Parameter „Basis“ nicht
angeben und der Besucher Ihrer Website nicht über das erforderliche ActiveX-Steuerelement verfügt, kann der
Browser das ActiveX-Objekt nicht anzeigen.
ALT-Bild Legt ein Bild fest, das angezeigt werden soll, wenn der Browser das object-Tag nicht unterstützt. Diese
Option steht nur zur Verfügung, wenn die Option „Einbetten“ deaktiviert ist.
Daten Legt eine zu ladende Datendatei für das ActiveX-Steuerelement fest. Viele ActiveX-Steuerelemente, wie
beispielsweise Shockwave und RealPlayer, verwenden diesen Parameter nicht.
Java-Applets einfügen
Mit Dreamweaver können Sie ein Java-Applet in ein HTML-Dokument einfügen. Java ist eine Programmiersprache,
mit der kleine Anwendungen (Applets) entwickelt werden können. Diese Anwendungen können in Webseiten
eingebettet werden.
Nachdem Sie ein Java-Applet eingefügt haben, können Sie im Eigenschafteninspektor Parameter festlegen. Wählen Sie
ein Java-Applet aus, damit die folgenden Eigenschaften im Eigenschafteninspektor angezeigt werden.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Applet einfügen möchten. Führen
Sie anschließend einen der folgenden Schritte aus:
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie
das Symbol „Applet“ aus.
• Wählen Sie „Einfügen“ > „Medien“ > „Applet“.
2 Wählen Sie eine Datei aus, die ein Java-Applet enthält.
Java-Applet-Eigenschaften
Der Eigenschafteninspektor zeigt zunächst nur die am häufigsten verwendeten Attribute an. Klicken Sie unten rechts
auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
Spry-QuickInfo Legt einen Namen fest, um das Applet bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem
unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein.
287
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
B / H Legen die Breite und Höhe des Applets in Pixel fest.
Code Bezeichnet die Datei, in der sich der Java-Code des Applets befindet. Klicken Sie auf das Ordnersymbol, um die
Datei auszuwählen, oder geben Sie einen Dateinamen ein.
Basis Identifiziert den Ordner, der das ausgewählte Applet enthält. Wenn Sie ein Applet wählen, wird dieses Feld
automatisch ausgefüllt.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird.
Alt Legt den alternativen Inhalt fest (in der Regel ein Bild), der angezeigt werden soll, wenn der Browser des Benutzers
keine Java-Applets unterstützt oder wenn Java deaktiviert ist. Wenn Sie Text eingeben, fügt Dreamweaver den Text als
Wert des Applet-Attributs
alt ein. Wenn Sie ein Bild wählen, fügt Dreamweaver ein img-Tag zwischen dem
öffnenden und dem schließenden
applet-Tag ein.
V-Abstand und H-Abstand Legen die Anzahl der Pixel für den Leerraum oberhalb, unterhalb und an beiden Seiten des
Applets fest.
Parameter Öffnet ein Dialogfeld, in dem Sie zusätzliche Parameter eingeben können, die an das Applet übergeben
werden sollen. Viele Applets reagieren auf Sonderparameter.
Medien über Verhalten steuern
Sie können Ihrer Seite Verhalten hinzufügen und damit unterschiedliche Medienobjekte starten oder anhalten.
Shockwave oder Flash-Film steuern Hiermit können Sie Shockwave-Filme oder SWF-Dateien wiedergeben, anhalten
und zurückspulen sowie zu einem bestimmten Bild in Shockwave-Filmen oder SWF-Dateien wechseln.
Sound abspielen Ermöglicht die Audiowiedergabe. Sie können beispielsweise festlegen, dass ein Audio-Effekt
abgespielt wird, wenn ein Benutzer den Mauszeiger über einen Hyperlink bewegt.
Plug-In überprüfen Hiermit können Sie prüfen, ob Besucher Ihrer Site über das erforderliche Plug-In verfügen, und
sie dann je nach dem Ergebnis an unterschiedliche URLs weiterleiten. Dies gilt nur für Plug-Ins, da das Verhalten
„Plug-In überprüfen“ das Vorhandensein von ActiveX-Steuerelementen nicht überprüft.
More Help topics
“Verhalten „Shockwave oder SWF steuern“ definieren” on page 380
“Verhalten „Sound abspielen“ definieren” on page 384
“Verhalten „Plug-In überprüfen“ definieren” on page 380
Medienobjekte über Parameter steuern
Zur Steuerung von Shockwave- und SWF-Dateien, ActiveX-Steuerelementen, Plug-Ins und Java-Applets können Sie
Sonderparameter definieren. Parameter werden mit den Tags
object, embed und applet verwendet. Parameter
setzen Attribute, die speziell für verschiedene Objekttypen gelten. In einer SWF-Datei kann beispielsweise für das
object-Tag der Qualitätsparameter
<paramname="quality"value="best"> verwendet werden. Das Dialogfeld
„Parameter“ wird über den Eigenschafteninspektor aufgerufen. Informationen zu den benötigten Parametern finden
Sie in der Dokumentation des verwendeten Objekts.
Note: Es gibt keinen allgemein gültigen Standard zum Identifizieren der Datendateien von ActiveX-Steuerelementen.
Schlagen Sie in der Dokumentation des verwendeten ActiveX-Steuerelements nach, um festzustellen, welche Parameter
verwendet werden sollten.
288
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Name und Wert für einen Parameter eingeben
1 Wählen Sie im Dokumentfenster ein Objekt aus, für das Parameter festgelegt werden können (wie beispielsweise
einen Shockwave-Film, ein ActiveX-Steuerelement, ein Browser-Plug-In oder ein Java-Applet).
2 Öffnen Sie das Dialogfeld mit einer der folgenden Methoden:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Objekt und
wählen Sie dann im Kontextmenü die Option „Parameter“.
• Öffnen Sie den Eigenschafteninspektor, falls er nicht bereits geöffnet ist, und klicken Sie in der unteren Hälfte des
Eigenschafteninspektors auf die Schaltfläche „Parameter“. (Vergewissern Sie sich, dass der Eigenschafteninspektor
erweitert ist.)
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und geben Sie den Namen und den Wert des Parameters
in die entsprechenden Spalten ein.
Parameter entfernen
❖ Wählen Sie einen Parameter aus und klicken Sie auf die Schaltfläche mit dem Minuszeichen (–).
Parameter neu anordnen
❖ Wählen Sie einen Parameter aus und drücken Sie dann die Pfeil-nach-oben- bzw. die Pfeil-nach-unten-Taste.
Aufgaben automatisieren
Aufgabenautomatisierung
Im Bedienfeld „Verlauf“ werden die beim Ausführen von Aufgaben ausgeführten Schritte aufgezeichnet.
Automatisieren Sie eine häufig ausgeführte Aufgabe, indem Sie die entsprechenden Schritte im Bedienfeld „Verlauf“
wiederholen oder indem Sie einen neuen Befehl erstellen, mit dem diese Schritte automatisch ausgeführt werden.
Bestimmte Mausaktionen wie das Auswählen durch Klicken im Dokumentfenster können nicht wiederholt oder
gespeichert werden. Wenn Sie eine solche Mausaktion ausführen, wird im Bedienfeld „Verlauf“ eine schwarze Linie
angezeigt (die erst sichtbar wird, wenn Sie eine andere Aktion ausführen). Um dies zu vermeiden, sollten Sie die
Einfügemarke im Dokumentfenster möglichst mit den Pfeiltasten und nicht mit der Maus verschieben.
Einige andere Schritte können ebenfalls nicht wiederholt werden, z. B. das Ziehen eines Seitenelements an eine andere
Stelle der Seite. Wenn Sie einen solchen Schritt ausführen, wird im Bedienfeld „Verlauf“ ein Symbol mit einem kleinen
roten X angezeigt.
Gespeicherte Befehle stehen dauerhaft zur Verfügung (sofern Sie sie nicht löschen). Aufgezeichnete Befehle werden
dagegen entfernt, wenn Sie Adobe® Dreamweaver® CS5 beenden. Kopierte Folgen von Schritten werden entfernt,
wenn Sie andere Objekte kopieren.
Bedienfeld „Verlauf“ verwenden
Das Bedienfeld „Verlauf“ („Fenster“ > „Verlauf“) enthält eine Liste mit den Schritten, die Sie im aktiven Dokument
seit dem Erstellen oder Öffnen des Dokuments ausgeführt haben (jedoch nicht die Schritte, die in anderen Frames,
Dokumentfenstern oder im Bedienfeld „Site“ ausgeführt wurden). Im Bedienfeld „Verlauf“ können Sie mehrere
Schritte gleichzeitig rückgängig machen und Aufgaben automatisieren.
289
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
A: Schieberegler B: Schritte C: Schaltfläche „Wiedergabe“ D: Schaltfläche „Schritte kopieren“ E: Schaltfläche „Als Befehl speichern“
Der Schieberegler im Bedienfeld „Verlauf“ zeigt anfänglich auf den zuletzt ausgeführten Schritt.
Note: Sie können die Anordnung der Schritte im Bedienfeld „Verlauf“ nicht ändern. Betrachten Sie das Bedienfeld
„Verlauf“ nicht als willkürliche Sammlung von Befehlen, sondern als Funktion, die ausgeführten Schritte in der
Reihenfolge ihrer Ausführung anzuzeigen.
Letzten Schritt rückgängig machen
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Bearbeiten“ > „Rückgängig“ aus.
• Ziehen Sie den Schieberegler im Bedienfeld „Verlauf“ um einen Bearbeitungsschritt in der Liste nach oben.
Note: Wenn Sie die automatische Reglerbewegung zu einem bestimmten Schritt erreichen möchten, müssen Sie auf eine
Stelle links von dem Schritt klicken. Wenn Sie auf den Schritt selbst klicken, wird er ausgewählt. Das Auswählen eines
Schritts entspricht nicht dem Zurückwechseln zu diesem Schritt im Rückgängig-Verlauf.
Mehrere Schritte gleichzeitig rückgängig machen
❖ Ziehen Sie den Schieberegler zu einem Schritt oder klicken Sie entlang der Schiebereglerspur links neben einen
Schritt.
Der Schieberegler bewegt sich automatisch zu diesem Schritt und die dazwischen liegenden Schritte werden
rückgängig gemacht.
Note: Wie beim Rückgängigmachen eines einzelnen Schritts können Sie auch nach dem Rückgängigmachen mehrerer
Schritte keinen der Schritte wiederherstellen, nachdem Sie einen anderen Vorgang im Dokument durchgeführt haben.
Die rückgängig gemachten Schritte werden aus dem Bedienfeld „Verlauf“ entfernt.
Anzahl der im Bedienfeld „Verlauf“ gespeicherten und angezeigten Schritte festlegen
Die Standardanzahl von Schritten ist für die Anforderungen der meisten Benutzer ausreichend. Je höher die Zahl ist,
desto mehr Speicher ist für das Bedienfeld „Verlauf“ erforderlich. Dies kann die Leistung und Geschwindigkeit des
Computers erheblich beeinträchtigen.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Allgemein“ aus.
3 Geben Sie unter „Zulässige Höchstzahl der Verlaufsschritte“ die gewünschte Zahl ein.
Wenn die maximale Anzahl der Schritte im Bedienfeld „Verlauf“ erreicht ist, werden die ältesten Schritte gelöscht.
Verlaufsliste für das aktuelle Dokument löschen
❖ Wählen Sie im Kontextmenü des Bedienfelds „Verlauf“ die Option „Verlauf leeren“ aus.
290
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Mit diesem Befehl werden zudem alle Rückgängig-Informationen für das aktuelle Dokument gelöscht. Nach dem
Auswählen von „Verlauf leeren“ können die in der Liste gelöschten Schritte nicht mehr angezeigt werden. Mit
„Verlauf leeren“ werden keine Schritte rückgängig gemacht, sondern lediglich die Aufzeichnungen der Schritte aus
dem Speicher entfernt.
Schritte wiederholen
Im Bedienfeld „Verlauf“ können Sie den letzten ausgeführten Schritt, mehrere aufeinanderfolgende Schritte oder
mehrere nicht aufeinanderfolgende Schritte wiederholen. Wiederholen Sie die Schritte direkt im Bedienfeld „Verlauf“.
Einzelne Schritte wiederholen
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Bearbeiten“ > „Wiederholen“ aus.
• Wählen Sie im Bedienfeld „Verlauf“ einen Schritt aus und klicken Sie auf die Schaltfläche „Wiedergabe“. Daraufhin
wird der Schritt wiederholt und im Bedienfeld „Verlauf“ eine Kopie des Schritts angezeigt.
Folge von Schritten wiederholen
1 Wählen Sie Schritte im Bedienfeld „Verlauf“ aus:
• Um aufeinanderfolgende Schritte auszuwählen, ziehen Sie den Mauszeiger von einem Schritt zu einem anderen.
(Ziehen Sie nicht den Schieberegler, sondern ziehen Sie den Mauszeiger von der Beschriftung eines Schritts zu der
eines anderen.) Sie können auch den ersten Schritt auswählen und dann bei gedrückter Umschalttaste auf den
letzten Schritt klicken.
• Um nicht aufeinanderfolgende Schritte auszuwählen, wählen Sie einen Schritt aus und klicken Sie dann bei
gedrückter Strg-Taste (Windows) bzw. gedrückter Befehlstaste (Macintosh) auf weitere Schritte.
Es werden die ausgewählten (markierten) Schritte wiederholt und nicht unbedingt der Schritt, auf den der
Schieberegler zeigt.
Note: Sie können eine Folge von Schritten, die eine schwarze Linie zur Angabe eines nicht aufzeichenbaren Schritts
enthalten, zwar auswählen, der entsprechende Schritt wird beim Wiederholen der Schritte jedoch übersprungen.
2 Klicken Sie auf „Wiedergabe“.
Die Schritte werden der Reihe nach wiederholt. Im Bedienfeld „Verlauf“ wird ein neuer Schritt mit der Bezeichnung
„Schritte wiederholen“ angezeigt.
Auswahl festlegen oder erweitern
❖ Halten Sie die Umschalttaste gedrückt und drücken Sie eine Pfeiltaste.
Wenn beim Ausführen einer Aufgabe, die später wiederholt werden soll, eine schwarze Linie für nicht wiederholbare
Mausaktionen angezeigt wird, können Sie alle Schritte bis zu dieser Aufgabe rückgängig machen und stattdessen eine
andere Methode wie etwa die Pfeiltasten verwenden.
Schritte im Bedienfeld „Verlauf“ auf Objekte anwenden
Eine Abfolge von Schritten aus dem Bedienfeld „Verlauf“ können Sie auf jedes Objekt im Dokumentfenster anwenden.
Wenn Sie mehrere Objekte auswählen und dann Schritte aus dem Bedienfeld „Verlauf“ auf diese Objekte anwenden,
werden die Objekte als kombinierte Auswahl betrachtet und in Dreamweaver wird versucht, die Schritte auf diese
kombinierte Auswahl anzuwenden. Mehrere Schritte können jedoch jeweils nur auf ein Objekt angewendet werden.
291
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Um die Schritte auf jedes Objekt einer Objektgruppe anzuwenden, muss der letzte Schritt der Folge darin bestehen,
das nächste Objekt in der Objektgruppe auszuwählen. Das zweite Verfahren veranschaulicht dieses Prinzip in einem
konkreten Szenario: beim Festlegen des vertikalen und horizontalen Abstands einer Abfolge von Bildern.
Schritte auf ein anderes Objekt anwenden
1 Wählen Sie das Objekt aus.
2 Wählen Sie die entsprechenden Schritte im Bedienfeld „Verlauf“ aus und klicken Sie auf „Wiedergabe“.
Schritte auf mehrere Objekte anwenden
1 Beginnen Sie mit einem Dokument, bei dem jede Zeile aus einem kleinen Bild (z. B. einem grafischen
Aufzählungspunkt oder Symbol), gefolgt von Text, besteht.
Das Ziel soll sein, den Abstand zwischen den Bildern und dem Text sowie zwischen den vertikal aufeinanderfolgenden
Bildern zu vergrößern.
2 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist.
3 Wählen Sie das erste Bild aus.
4 Geben Sie im Eigenschafteninspektor in den Feldern „V-Abstand“ und „H-Abstand“ Zahlen ein, um den Abstand
für das Bild festzulegen.
5 Klicken Sie erneut auf das Bild, um das Dokumentfenster zu aktivieren, ohne die Einfügemarke zu verschieben.
6 Drücken Sie die Taste Pfeil-nach-links, um die Einfügemarke links neben das Bild zu setzen.
7 Drücken Sie die Taste Pfeil-nach-unten, um die Einfügemarke um eine Zeile nach unten zu verschieben, sodass sie
sich genau links neben dem zweiten Bild der Reihe befindet.
8 Drücken Sie Umschalt+Pfeil-nach-rechts, um das zweite Bild auszuwählen.
Note: Wählen Sie das Bild nicht durch Klicken aus, da dieser Schritt später nicht wiederholt werden kann.
9 Wählen Sie im Bedienfeld „Verlauf“ die Schritte aus, die dem Ändern des Abstands für das Bild und dem
Auswählen des nächsten Bilds entsprechen. Klicken Sie auf „Wiedergabe“, um diese Schritte zu wiederholen.
Der Abstand für das aktuelle Bild ändert sich und das nächste Bild wird ausgewählt.
292
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
10 Klicken Sie so oft auf „Wiedergabe“, bis alle Bilder den richtigen Abstand haben.
Schritte zwischen Dokumenten kopieren und einfügen
Jedes geöffnete Dokument hat eine eigene Verlaufsliste. Sie können jedoch Schritte eines Dokuments kopieren und in
ein anderes einfügen.
Wenn Sie ein Dokument schließen, wird seine Verlaufsliste gelöscht. Wenn Sie Schritte eines Dokuments später
verwenden möchten, kopieren oder speichern Sie die Schritte, bevor Sie das Dokument schließen.
1 Wählen Sie die gewünschten Schritte im Bedienfeld „Verlauf“ des Dokuments aus, das die Schritte enthält.
2 Klicken Sie im Bedienfeld „Verlauf“ auf „Schritte kopieren“ .
Note: Die Schaltfläche „Schritte kopieren“ im Bedienfeld „Verlauf“ entspricht nicht dem Befehl „Kopieren“ im Menü
„Bearbeiten“. Über „Bearbeiten“ > „Kopieren“ können Sie keine Schritte kopieren, obwohl Sie sie über „Bearbeiten“ >
„Einfügen“ einfügen.
Vorsicht beim Kopieren von Schritten, die den Befehl „Kopieren“ oder „Einfügen“ enthalten:
• Verwenden Sie „Schritte kopieren“ nicht, wenn einer der Schritte der Befehl „Kopieren“ ist. Diese Schritte lassen
sich meist nicht problemlos einfügen.
• Wenn die Schritte den Befehl „Einfügen“ enthalten, können Sie sie nur einfügen, wenn sie vor diesem Befehl auch
den Befehl „Kopieren“ enthalten.
3 Öffnen Sie das andere Dokument.
4 Setzen Sie die Einfügemarke an die gewünschte Stelle oder wählen Sie ein Objekt aus, auf das die Schritte
angewendet werden sollen.
5 Wählen Sie „Bearbeiten“ > „Einfügen“ aus.
Beim Einfügen in das Bedienfeld „Verlauf“ des Dokuments werden die Schritte wiederholt. Im Bedienfeld „Verlauf“
werden die Schritte nur als ein Schritt mit der Bezeichnung „Schritte einfügen“ angezeigt.
Wenn Sie Schritte in einen Texteditor, in die Codeansicht oder in den Codeinspektor einfügen, werden sie als
JavaScript-Code angezeigt. Dies kann nützlich sein, wenn Sie in Zukunft eigene Skripts schreiben möchten.
More Help topics
“Schreiben und Bearbeiten von Code” on page 330
Befehle aus Schritten der Verlaufsliste erstellen und verwenden
Speichern Sie eine Gruppe von Schritten aus der Verlaufsliste als benannten Befehl, der dann im Menü „Befehle“ zur
Verfügung steht. Erstellen und speichern Sie einen neuen Befehl, wenn Sie eine Gruppe von Schritten später erneut
verwenden möchten, insbesondere wenn dies beim nächsten Starten von Dreamweaver erfolgen soll.
Befehle erstellen
1 Wählen Sie im Bedienfeld „Verlauf“ einen Schritt oder eine Gruppe von Schritten aus.
2 Klicken Sie auf die Schaltfläche „Als Befehl speichern“ oder wählen Sie im Kontextmenü des Bedienfelds „Verlauf“
die Option „Als Befehl speichern“.
3 Geben Sie einen Namen für den Befehl ein und klicken Sie auf „OK“.
Der Befehl wird im Menü „Befehle“ angezeigt.
293
VERWENDEN VON DREAMWEAVER
Inhalt in Seiten einfügen
Last updated 10.4.2012
Note: Der Befehl wird im Ordner „Dreamweaver/Configuration/Commands“ als JavaScript-Datei (in manchen Fällen
als HTML-Datei) gespeichert. Wenn Sie Dreamweaver auf einem Mehrbenutzer-Betriebssystem installiert haben, wird
die Datei im Ordner „Commands“ des entsprechenden Benutzers gespeichert.
Gespeicherte Befehle verwenden
1 Wählen Sie ein Objekt aus, auf das der Befehl angewendet werden soll, oder setzen Sie die Einfügemarke in das
Element, bei dem der Befehl ausgeführt werden soll.
2 Wählen Sie den Befehl im Menü „Befehle“ aus.
Befehlsnamen bearbeiten
1 Wählen Sie „Befehle“ > „Befehlsliste bearbeiten“ aus.
2 Wählen Sie den Befehl aus, den Sie umbenennen möchten, geben Sie den neuen Namen ein und klicken Sie dann
auf „Schließen“.
Namen im Menü „Befehle“ löschen
1 Wählen Sie „Befehle“ > „Befehlsliste bearbeiten“ aus.
2 Wählen Sie einen Befehl.
3 Klicken Sie auf „Löschen“ und anschließend auf „Schließen“.
Befehle aufzeichnen und speichern
Zeichnen Sie einen vorübergehend benötigten Befehl zur kurzfristigen Verwendung auf oder zeichnen Sie einen
Befehl auf und speichern Sie ihn zur späteren Verwendung. In Dreamweaver wird jeweils nur ein aufgezeichneter
Befehl beibehalten. Sobald Sie einen neuen Befehl aufzeichnen, wird der alte Befehl gelöscht, wenn Sie ihn nicht zuvor
gespeichert haben.
Folge von Schritten vorübergehend aufzeichnen
1 Wählen Sie „Befehle“ > „Aufzeichnung starten“ aus oder drücken Sie Strg+Umschalt+X (Windows) bzw.
Befehl+Umschalt+X (Macintosh).
Der Mauszeiger ändert seine Form. Dies weist darauf hin, dass eine Aufzeichnung stattfindet.
2 Wenn die Aufzeichnung abgeschlossen ist, wählen Sie „Befehle“ > „Aufzeichnung stoppen“ aus oder drücken Sie
Strg+Umschalt+X (Windows) bzw. Befehl+Umschalt+X (Macintosh).
Aufgezeichnete Befehle wiederholen
❖ Wählen Sie „Befehle“ > „Aufgezeichneten Befehl abspielen“ aus.
Aufgezeichnete Befehle speichern
1 Wählen Sie „Befehle“ > „Aufgezeichneten Befehl abspielen“ aus.
2 Wählen Sie den Schritt „Befehl ausführen“ aus, der in der Verlaufsliste des Bedienfelds „Verlauf“ angezeigt wird,
und klicken Sie dann auf die Schaltfläche „Als Befehl speichern“.
3 Geben Sie einen Namen für den Befehl ein und klicken Sie auf „OK“.
Der Befehl wird im Menü „Befehle“ angezeigt.
294
Last updated 10.4.2012
Chapter 9: Hyperlinks und Navigation
Allgemeines zu Hyperlinks und Navigation
Hyperlinks
Nachdem Sie eine Dreamweaver-Site, in der die Website-Dokumente gespeichert werden, eingerichtet und HTML-
Seiten erstellt haben, können Sie die Dokumente mit anderen Dokumenten verknüpfen.
Dreamweaver bietet Ihnen mehrere Möglichkeiten, um Dokumente, Bilder, Multimedia-Dateien oder übertragbare
Software mit Hyperlinks zu versehen. Sie können Hyperlinks zu einem Text oder Bild an einer beliebigen Position
innerhalb eines Dokuments erstellen. Der Text oder das Bild kann sich in einer Überschrift, einer Liste, einer Tabelle,
einem absolut positionierten Element (AP-Element) oder einem Frame befinden.
Es stehen mehrere Verfahren zur Verfügung, mit denen Hyperlinks erstellt und verwaltet werden können. Manche
Webdesigner ziehen es vor, während der Bearbeitung Hyperlinks zu noch nicht vorhandenen Seiten oder Dateien zu
erstellen, während andere zunächst sämtliche Dateien und Seiten erstellen und dann die Hyperlinks hinzufügen. Eine
weitere Möglichkeit besteht darin, Platzhalterseiten zu erstellen, in die Sie Hyperlinks einfügen und diese testen, bevor
Sie alle Seiten der Website fertig stellen.
More Help topics
“Hyperlinks in Dreamweaver testen” on page 304
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade
Beim Erstellen von Hyperlinks muss unbedingt der Dateipfad zwischen dem Dokument, in das Sie den Hyperlink
setzen, und dem Dokument bzw. Element, auf das der Hyperlink verweist, bekannt sein.
Jede Webseite hat eine eindeutige Adresse, die so genannte URL (Universal Resource Locator). Wenn Sie jedoch einen
lokalen Hyperlink erstellen (einen Hyperlink von einem Dokument zu einem anderen innerhalb einer Site), geben Sie
normalerweise nicht die gesamte URL des Dokuments an, zu der die Verknüpfung hergestellt wird, sondern einen
relativen Pfad vom aktuellen Dokument oder vom Stammordner der Site.
Es gibt drei Arten von Hyperlinkpfaden:
• Absolute Pfade (z. B. http://www.adobe.com/support/dreamweaver/contents.html)
• Dokumentrelative Pfade (z. B. dreamweaver/contents.html)
• Zum Site-Stammordner relative Pfade (z. B. /support/dreamweaver/contents.html)
In Dreamweaver können Sie auf einfache Weise den Typ des Dokumentpfads auswählen, der für die Hyperlinks
erstellt werden soll.
Note: Es empfiehlt sich, den Hyperlink-Typ zu verwenden, den Sie bevorzugen und mit dem Sie am besten vertraut
sind (entweder relativ zum Site-Stammordner oder dokumentrelativ). Wenn Sie die Zieldateien von Hyperlinks
suchen, anstatt den Pfad direkt einzugeben, stellen Sie sicher, dass der Pfad korrekt ist.
More Help topics
“Relativen Pfad neuer Hyperlinks festlegen” on page 299
“Arbeiten mit Dreamweaver-Sites” on page 40
295
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Absolute Pfade
Absolute Pfade enthalten die vollständige URL des verknüpften Dokuments und das zu verwendende Protokoll (für
Webseiten in der Regel http://), beispielsweise http://www.adobe.com/support/dreamweaver/contents.html. Für ein
Bildelement kann die vollständige URL z. B. wie folgt lauten:
http://www.adobe.com/support/dreamweaver/images/bild1.JPG.
Absolute Pfade sind erforderlich, wenn Sie einen Hyperlink zu einem Dokument oder einem Element auf einem
anderen Server erstellen. Sie können absolute Pfade zwar auch für lokale Hyperlinks (d. h. für Hyperlinks zu
Dokumenten auf derselben Site) verwenden, davon wird jedoch abgeraten. Wenn Sie die Site in eine andere Domäne
verlagern, werden alle lokalen absoluten Pfade ungültig. Die Verwendung relativer Pfade für lokale Hyperlinks bietet
zudem eine größere Flexibilität, wenn Sie die Dateien innerhalb der Website verschieben müssen.
Note: Beim Einfügen von Bildern (nicht Hyperlinks) können Sie absolute Pfade zu Bildern auf Remote-Servern
verwenden (d. h. zu Bildern, die sich nicht auf der lokalen Festplatte befinden).
Dokumentrelative Pfade
Für die meisten Websites eignen sich in der Regel dokumentrelative Pfade am besten. Sie sind besonders dann geeignet,
wenn sich das aktuelle Dokument und das zu verknüpfende Dokument bzw. Element im gleichen Ordner befinden
und wahrscheinlich nicht verschoben werden. Darüber hinaus können Sie mit einem dokumentrelativen Pfad einen
Hyperlink zu einem Dokument bzw. Element in einem anderen Ordner erstellen, indem Sie den Pfad durch die
Ordnerhierarchie vom aktuellen Dokument zum verknüpften Dokument angeben.
Wenn Sie einen dokumentrelativen Pfad angeben, lassen Sie den Teil des absoluten Pfads weg, der für das aktuelle
Dokument und das verknüpfte Dokument bzw. Element identisch ist. Nur der Teil, der sich unterscheidet, wird
angegeben.
Angenommen, Sie haben eine Site mit folgender Struktur:
• Wenn Sie einen Hyperlink von „contents.html“ zu „hours.html“ (beide im gleichen Ordner) erstellen möchten,
verwenden Sie den relativen Pfad „hours.html“.
• Wenn Sie einen Hyperlink von „contents.html“ zu „tips.html“ (im Unterordner „resources“) erstellen möchten,
verwenden Sie den relativen Pfad „resources/tips.html“. Mit jedem Schrägstrich (/) wird eine Ebene weiter unten
in der Ordnerhierarchie angegeben.
• Wenn Sie einen Hyperlink von „contents.html“ zu „index.html“ (im übergeordneten Ordner, eine Ebene über
„contents.html“) erstellen möchten, verwenden Sie den relativen Pfad „../index.html“. Mit zwei Punkten und
einem Schrägstrich (../) wird eine Ebene weiter oben in der Ordnerhierarchie angegeben.
my_site (Stammordner)
support
contents.html
hours.html
tips.html
Ressourcen
catalog.html
Produkte
index.html (Homepage)
296
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
• Wenn Sie einen Hyperlink von „contents.html“ zu „catalog.html“ (in einem anderen Unterordner des
übergeordneten Ordners) erstellen möchten, verwenden Sie den relativen Pfad „../products/catalog.html“. In
diesem Fall wird durch „../“ die höhere Ebene des übergeordneten Ordners und durch „products/“ die tiefere Ebene
des Unterordners „products“ angegeben.
Wenn Sie mehrere Dateien als Gruppe verschieben (z. B. beim Verschieben eines ganzen Ordners, bei dem alle im
Ordner enthaltenen Dateien denselben relativen Pfad zueinander beibehalten), müssen Sie dokumentrelative
Hyperlinks zwischen diesen Dateien nicht aktualisieren. Wenn Sie jedoch eine einzelne Datei mit
dokumentrelativen Hyperlinks verschieben oder eine Datei, die durch einen dokumentrelativen Pfad verknüpft ist,
müssen Sie diese Hyperlinks aktualisieren. (Wenn Sie Dateien im Bedienfeld „Dateien“ verschieben oder
umbenennen, werden alle entsprechenden Hyperlinks in Dreamweaver automatisch aktualisiert.)
Zum Site-Stammordner relative Pfade
Zum Site-Stammordner relative Pfade beschreiben den Pfad vom Stammordner der Site zu einem Dokument. Sie
können solche Pfade beispielsweise verwenden, wenn Sie eine umfangreiche Website bearbeiten, die mehrere Server
verwendet, oder wenn auf einem Server mehrere unterschiedliche Sites vorhanden sind. Wenn Sie mit diesem Pfadtyp
nicht vertraut sind, sollten Sie weiterhin dokumentrelative Pfade verwenden.
Ein zum Site-Stammordner relativer Pfad beginnt mit einem Schrägstrich, der den Stammordner der Site darstellt.
Beispielsweise ist „/support/tips.html“ ein zum Site-Stammordner relativer Pfad zur Datei „tips.html“ im Ordner
„support“ des Stammordners der Site.
Zum Site-Stammordner relative Pfade sind oftmals am besten für Hyperlinks geeignet, wenn Sie auf einer Website
häufig HTML-Dateien zwischen Ordnern verschieben. Wenn Sie ein Dokument verschieben, das zum Site-
Stammordner relative Hyperlinks enthält, müssen Sie diese Hyperlinks nicht ändern, da sie relativ zum Stammordner
und nicht zum Dokument selbst sind. Wenn in den HTML-Dateien beispielsweise zum Site-Stammordner relative
Hyperlinks für abhängige Dateien (z. B. Bilder) verwendet werden, sind diese Hyperlinks nach dem Verschieben einer
HTML-Datei weiterhin gültig.
Wenn Sie jedoch die Dokumente, die durch stammrelative Hyperlinks verknüpft sind, verschieben oder umbenennen,
müssen Sie diese Hyperlinks aktualisieren, selbst wenn die Dokumentpfade relativ zueinander nicht geändert wurden.
Wenn Sie beispielsweise einen Ordner verschieben, müssen Sie alle stammrelativen Hyperlinks zu Dateien in diesem
Ordner aktualisieren. (Wenn Sie Dateien im Bedienfeld „Dateien“ verschieben oder umbenennen, werden alle
entsprechenden Hyperlinks in Dreamweaver automatisch aktualisiert.)
Hyperlinks erstellen
Hyperlinks zwischen Dateien und Dokumenten erstellen
Machen Sie sich vor dem Erstellen von Hyperlinks mit der Funktionsweise von absoluten, dokumentrelativen und
zum Site-Stammordner relativen Pfaden vertraut. Sie können in einem Dokument verschiedene Typen von
Hyperlinks erstellen:
• Hyperlinks zu einem anderen Dokument oder einer anderen Datei, z. B. einer Grafik-, Film-, PDF- oder
Audiodatei
• Hyperlinks mit einem benannten Anker, mit denen der Besucher zu einer bestimmten Stelle in einem Dokument
springt
• E-Mail-Verknüpfungen, mit denen eine leere E-Mail-Nachricht erstellt wird, wobei die Adresse des Empfängers
bereits eingetragen ist
297
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
• Null- und Skript-Hyperlinks, mit denen Sie einem Objekt ein Verhalten zuweisen oder einen Hyperlink erstellen
können, der JavaScript-Code ausführt
Mit dem Eigenschafteninspektor und dem Dateizeigersymbol können Sie Hyperlinks von Bildern, Objekten oder
Textpassagen zu einem anderen Dokument oder einer anderen Datei erstellen.
In Dreamweaver werden Hyperlinks zu anderen Seiten auf der Site mithilfe dokumentrelativer Pfade erstellt. Sie
können Dreamweaver auch so konfigurieren, dass neue Hyperlinks mit zum Site-Stammordner relativen Pfaden
erstellt werden.
Important: Dokumentrelative Pfade sind ohne einen festen Ausgangspunkt nicht gültig. Daher sollten Sie eine neue Datei
erst speichern und dann einen dokumentrelativen Pfad erstellen. Wenn Sie einen dokumentrelativen Pfad vor dem
Speichern der Datei erstellen, verwendet Dreamweaver zunächst einen absoluten Pfad, der mit „file://“ beginnt. Beim
Speichern der Datei wandelt Dreamweaver den Pfad mit „file://“ in einen relativen Pfad um.
Ein Tutorial zur Erstellung von Hyperlinks finden Sie unter www.adobe.com/go/vid0149_de.
More Help topics
“Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade” on page 294
Tutorial zur Erstellung von Hyperlinks
Definieren von JavaScript-Verhalten für Hyperlinks
Sie können für beliebige Hyperlinks in einem Dokument ein Verhalten definieren. Wenn Sie verknüpfte Elemente in
ein Dokument einfügen, können Sie folgende Verhalten verwenden:
Statusleistentext festlegen legt den Text einer Meldung fest, die in der Statusleiste unten links im Browserfenster
angezeigt wird. Sie können mit diesem Verhalten in der Statusleiste beispielsweise eine Beschreibung des Ziels eines
Hyperlinks angeben, anstatt die zugehörige URL anzuzeigen.
Browserfenster öffnen öffnet eine URL in einem neuen Fenster. Sie können die Eigenschaften des neuen Fensters
festlegen, einschließlich des Namens, der Größe und der Attribute (ob die Größe des Fensters geändert werden kann,
ob es eine Menüleiste hat usw.).
Sprungmenü bearbeitet ein Sprungmenü. Sie können die Menüleiste ändern, eine andere verknüpfte Datei angeben
oder den Ort im Browser wählen, an dem das verknüpfte Dokument geöffnet wird.
More Help topics
“Anwenden integrierter JavaScript-Verhalten” on page 379
Hyperlinks zu Dokumenten mit dem Eigenschafteninspektor erstellen
Mit dem Ordnersymbol oder dem Feld „Hyperlink“ des Eigenschafteninspektors können Sie Hyperlinks von Bildern,
Objekten oder Text zu anderen Dokumenten oder Dateien erstellen.
1 Wählen Sie den gewünschten Text oder ein Bild in der Entwurfsansicht des Dokumentfensters aus.
2
Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf das Ordnersymbol rechts neben dem Feld „Hyperlink“, um eine Datei auszuwählen.
Der Pfad zum verknüpften Dokument wird im Feld „URL“ angezeigt. Geben Sie im Popupmenü „Relativ zu“ des
Dialogfelds „HTML-Datei auswählen“ an, ob der Pfad dokumentrelativ oder stammrelativ ist. Klicken Sie dann auf
„Auswählen“. Der ausgewählte Pfadtyp gilt nur für den aktuellen Hyperlink. (Sie können die Standardeinstellung des
Felds „Relativ zu“ für die Site ändern.)
298
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
• Geben Sie den Pfad und Dateinamen des Dokuments im Feld „Hyperlink“ ein.
Wenn Sie einen Hyperlink zu einem Dokument auf der Site erstellen möchten, geben Sie einen dokumentrelativen
oder einen zum Site-Stammordner relativen Pfad ein. Wenn Sie einen Hyperlink zu einem Dokument außerhalb Ihrer
Site erstellen möchten, geben Sie einen absoluten Pfad samt Protokoll ein (z. B. http://). Dieses Verfahren eignet sich
für Hyperlinks zu Dateien, die noch nicht erstellt wurden.
3 Wählen Sie im Popupmenü „Ziel“ einen Ort aus, in dem das Dokument geöffnet werden soll:
• _blank lädt das verknüpfte Dokument in ein neues, unbenanntes Browserfenster.
• _parent lädt das verknüpfte Dokument in das übergeordnete Frameset oder Fenster des Frames, in dem der
Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird das verknüpfte
Dokument in das ganze Browserfenster geladen.
• _self lädt das verknüpfte Dokument in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, also müssen Sie es normalerweise nicht angeben.
• _top lädt das verknüpfte Dokument in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Wenn für alle Hyperlinks auf der Seite das gleiche Ziel verwendet werden soll, können Sie dieses Ziel einmal angeben,
indem Sie auf „Einfügen“ > „HTML“ > „Head-Tags“ > „Basis“ klicken und anschließend die Zielinformationen
auswählen. Weitere Informationen zur Verwendung von Frames als Ziele finden Sie unter “Frame-Inhalte durch
Hyperlinks steuern” on page 221.
More Help topics
“Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade” on page 294
Hyperlinks zu Dokumenten mit dem Dateizeigersymbol erstellen
1 Wählen Sie den gewünschten Text oder ein Bild in der Entwurfsansicht des Dokumentfensters aus.
2 Erstellen Sie einen Hyperlink mit einem der beiden folgenden Schritte:
• Ziehen Sie das Dateizeigersymbol (Zielsymbol) rechts neben dem Feld „Hyperlink“ im Eigenschafteninspektor
und zeigen Sie auf einen sichtbaren Anker im aktuellen Dokument, auf einen sichtbaren Anker in einem anderen
geöffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf ein Dokument im Bedienfeld „Dateien“.
• Ziehen Sie den Mauszeiger bei gedrückter Umschalttaste auf einen sichtbaren Anker im aktuellen Dokument, auf
einen sichtbaren Anker in einem anderen geöffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf
ein Dokument im Bedienfeld „Dateien“.
Note: Sie können nur dann einen Hyperlink zu einem anderen geöffneten Dokument erstellen, wenn im Dokumentfenster
keine Dokumente maximiert sind. Um Dokumentfenster nebeneinander anzuordnen, wählen Sie „Fenster“ >
„Überlappend“ oder „Fenster“ > „Nebeneinander“ aus. Wenn Sie auf ein geöffnetes Dokument zeigen, wird es in den
Vordergrund des Bildschirms verschoben, während Sie die Auswahl vornehmen.
More Help topics
“Hyperlinks zu bestimmten Stellen in einem Dokument erstellen” on page 300
Hyperlinks mit dem Befehl „Hyperlink“ einfügen
Mit dem Befehl „Hyperlink“ können Sie Textverknüpfungen zu Bildern, Objekten und anderen Dokumenten oder
Dateien erstellen.
1 Setzen Sie die Einfügemarke im Dokument an die Stelle, an der Sie den Hyperlink einfügen möchten.
299
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus, um das Dialogfeld „Hyperlink einfügen“ anzuzeigen:
• Wählen Sie „Einfügen“ > „Hyperlink“ aus.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Hyperlink“.
3 Geben Sie den Text des Hyperlinks und im Textfeld „Hyperlink“ den Namen der Datei ein, zu der ein Hyperlink
erstellt werden soll (oder klicken Sie auf das Ordnersymbol , um die Datei zu suchen).
4 Wählen Sie im Popupmenü „Ziel“ das Fenster aus, in dem die Datei geöffnet werden soll, oder geben Sie dessen
Namen ein.
Im Listenfeld sind die Namen aller Frames aufgeführt, die Sie im aktuellen Dokument benannt haben. Wenn Sie einen
Frame angeben, der nicht vorhanden ist, wird die verknüpfte Seite in einem neuen Fenster geöffnet, das den
angegebenen Namen erhält. Sie können auch einen der folgenden reservierten Zielnamen auswählen:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink
enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das
ganze Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
5 Geben Sie im Feld „Reihenfolgenposition“ eine Zahl ein.
6 Geben Sie im Feld „Titel“ einen Titel für den Hyperlink ein.
7 Geben Sie im Feld „Zugriffstaste“ eine Tastaturtaste (einen Buchstaben) zum Auswählen des Hyperlinks im
Browser ein.
8 Klicken Sie auf „OK“.
Relativen Pfad neuer Hyperlinks festlegen
In Dreamweaver werden in der Standardeinstellung Hyperlinks zu anderen Seiten auf der Site mithilfe
dokumentrelativer Pfade erstellt. Wenn Sie stattdessen zum Site-Stammordner relative Pfade verwenden möchten,
definieren Sie zunächst in Dreamweaver einen lokalen Ordner, indem Sie einen lokalen Stammordner auswählen, der
als Entsprechung des Dokumentstamms auf einem Server dient. Dreamweaver ermittelt anhand dieses Ordners die
zum Site-Stammordner relativen Pfade zu Dateien.
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Doppelklicken Sie im Dialogfeld „Sites verwalten“ in der Liste auf die entsprechende Site.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie
„Lokale Infos“ aus.
4 Legen Sie den relativen Pfad neuer Hyperlinks fest, indem Sie die Option „Dokument“ oder „Stammordner“
auswählen.
Der Pfad vorhandener Hyperlinks wird nicht geändert, wenn Sie nach dem Ändern dieser Einstellung auf „OK“
klicken. Die Einstellung gilt nur für neue Hyperlinks, die Sie mit Dreamweaver erstellen.
300
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Note: In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner
relativen Pfad verknüpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter „Bearbeiten“ >
„Voreinstellungen“ > „Vorschau in Browser“ die Option „Vorschau mit temporärer Datei“ auswählen. Der Grund
hierfür ist, dass Browser im Gegensatz zu Servern Sitestämme nicht erkennen können. Wenn Sie eine Vorschau des
Inhalts anzeigen möchten, der durch stammrelative Pfade verknüpft ist, übertragen Sie die Datei an einen Remote-Server
und wählen Sie dann „Datei“ > „Vorschau in Browser“ aus.
5 Klicken Sie auf „Speichern“.
Die neue Pfadeinstellung gilt nur für die aktuelle Site.
More Help topics
“Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade” on page 294
“Arbeiten mit Dreamweaver-Sites” on page 40
Hyperlinks zu bestimmten Stellen in einem Dokument erstellen
Mit dem Eigenschafteninspektor können Sie Hyperlinks zu einer bestimmten Stelle in einem Dokument erstellen,
indem Sie zunächst benannte Anker definieren. Benannte Anker stellen Markierungen in einem Dokument dar und
werden häufig an bestimmten Themen oder ganz oben in einem Dokument eingefügt. Anschließend können Sie
Hyperlinks zu diesen benannten Ankern erstellen, sodass Besucher der Website direkt zur angegebenen Stelle
gelangen.
Zum Erstellen eines Hyperlinks zu einem benannten Anker sind zwei Schritte erforderlich. Zunächst erstellen Sie
einen benannten Anker und anschließend einen Hyperlink zu dem benannten Anker.
Note: Benannte Anker können nicht in absolut positionierten Elementen (AP-Elementen) platziert werden.
Benannte Anker erstellen
1 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den benannten
Anker erstellen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Benannter Ankerpunkt“ aus.
• Drücken Sie Strg+Alt+A (Windows) bzw. Befehl+Wahl+A (Macintosh).
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Benannter Anker“.
3 Geben Sie im Feld „Ankername“ einen Namen für den Anker ein und klicken Sie auf „OK“. (Der Ankername darf
keine Leerzeichen enthalten.)
Das Ankersymbol wird an der Einfügemarke eingeblendet.
Note: Wenn das Ankersymbol nicht angezeigt wird, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare
Elemente“ aus.
Hyperlinks zu benannten Ankern erstellen
1 Wählen Sie in der Entwurfsansicht des Dokumentfensters einen Text oder ein Bild aus, über die ein Hyperlink
erstellt werden soll.
301
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
2 Geben Sie im Feld „Hyperlink“ des Eigenschafteninspektors das Zeichen „#“ und den Namen des Ankers ein. Um
beispielsweise im aktuellen Dokument einen Hyperlink zu einem Anker mit der Bezeichnung „#top“ zu erstellen,
geben Sie Folgendes ein: Um einen Hyperlink zu einem Anker namens „top“ in einem anderen Dokument im
selben Ordner herzustellen, geben Sie
Dateiname.html#top ein.
Note: Bei Ankernamen wird die Groß- und Kleinschreibung berücksichtigt.
Hyperlinks zu benannten Ankern mit dem Dateizeigersymbol erstellen
1 Öffnen Sie das Dokument mit dem benannten Anker.
Note: Wenn der Anker nicht angezeigt wird, können Sie ihn mit „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare
Elemente“ sichtbar machen.
2 Wählen Sie in der Entwurfsansicht des Dokumentfensters den Text oder das Bild aus, von dem Sie den Hyperlink
erstellen möchten. (Wenn sich der Text oder das Bild in einem anderen geöffneten Dokument befindet, müssen Sie
zu diesem Dokument wechseln.)
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie im Eigenschafteninspektor rechts neben dem Feld „Hyperlink“ auf das Dateizeigersymbol
(Zielsymbol) und ziehen Sie es auf den Anker, zu dem Sie den Hyperlink erstellen möchten – entweder im gleichen
oder in einem anderen geöffneten Dokument.
• Ziehen Sie den ausgewählten Text oder das ausgewählte Bild im Dokumentfenster bei gedrückter Umschalttaste
auf den Anker, zu dem der Hyperlink erstellt werden soll. Das ist entweder ein Anker im gleichen oder in einem
anderen geöffneten Dokument.
E-Mail-Verknüpfungen erstellen
Wenn Sie auf eine E-Mail-Verknüpfung klicken, wird ein neues Nachrichtenfenster in dem E-Mail-Programm
geöffnet, das mit dem Browser des Benutzers verknüpft ist. Im Feld „An“ im Fenster der E-Mail-Nachricht wird die
im E-Mail-Hyperlink angegebene Adresse automatisch eingefügt.
E-Mail-Verknüpfungen mit dem Befehl „E-Mail-Verknüpfung einfügen“ erstellen
1 Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der die E-Mail-
Verknüpfung eingefügt werden soll, oder wählen Sie den Text oder das Bild aus, die als E-Mail-Verknüpfung
angezeigt werden sollen.
2 Führen Sie einen der folgenden Schritte aus, um die Verknüpfung einzufügen:
• Wählen Sie „Einfügen“ > „E-Mail-Verknüpfung“ aus.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „E-Mail-Verknüpfung“.
3 Geben Sie im Feld „Text“ den Text der E-Mail ein oder bearbeiten Sie ihn.
4 Geben Sie im Feld „E-Mail“ die E-Mail-Adresse ein und klicken Sie auf „OK“.
E-Mail-Verknüpfungen mit dem Eigenschafteninspektor erstellen
1 Wählen Sie den gewünschten Text oder ein Bild in der Entwurfsansicht des Dokumentfensters aus.
2 Geben Sie im Eigenschafteninspektor im Feld „Hyperlink“ mailto: ein, gefolgt von einer E-Mail-Adresse.
Geben Sie keine Leerzeichen zwischen dem Doppelpunkt und der E-Mail-Adresse ein.
Betreffzeile von E-Mails automatisch eintragen
1 Erstellen Sie wie zuvor erläutert mit dem Eigenschafteninspektor eine E-Mail-Verknüpfung.
302
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
2 Fügen Sie im Feld „Hyperlink“ des Eigenschafteninspektors nach der E-Mail-Adresse den Text ?subject= ein und
geben Sie nach dem Gleichheitszeichen einen Betreff an. Geben Sie zwischen dem Fragezeichen und dem Ende der
E-Mail-Adresse keine Leerzeichen ein.
Der vollständige Text sieht etwa folgendermaßen aus:
mailto:jemand@IhreSite.com?subject=E-Mail von unserer Site
Null- und Skript-Hyperlinks erstellen
Ein Null-Hyperlink ist ein Hyperlink ohne Ziel. Verwenden Sie Null-Hyperlinks, wenn Sie Verhalten für Objekte oder
Textpassagen auf einer Seite definieren möchten. Sie können einem Null-Hyperlink beispielsweise ein Verhalten
zuweisen, damit ein Bild ausgetauscht oder ein absolut positioniertes Element (AP-Element) angezeigt wird, wenn sich
der Mauszeiger über dem Hyperlink befindet.
Skript-Hyperlinks führen JavaScript-Code aus oder rufen JavaScript-Funktionen auf. Mit diesen Hyperlinks erhalten
Besucher der Website zusätzliche Informationen zu einem bestimmten Element, ohne die aktuelle Webseite verlassen
zu müssen. Skript-Hyperlinks können darüber hinaus verwendet werden, um Berechnungen,
Formularüberprüfungen und andere Verarbeitungsvorgänge durchzuführen, wenn der Besucher auf ein bestimmtes
Element klickt.
More Help topics
“Verhalten definieren” on page 377
Null-Hyperlinks erstellen
1 Wählen Sie in der Entwurfsansicht des Dokumentfensters eine Textstelle, ein Objekt oder ein Bild aus.
2 Geben Sie im Eigenschafteninspektor im Feld Hyperlink die Zeichenkette javascript:; ein (d. h. das Wort
javascript, gefolgt von einem Doppelpunkt und einem Semikolon).
Skript-Hyperlinks erstellen
1 Wählen Sie in der Entwurfsansicht des Dokumentfensters eine Textstelle, ein Objekt oder ein Bild aus.
2 Geben Sie im Eigenschafteninspektor im Feld „Hyperlink“ javascript:, gefolgt von JavaScript-Code oder einem
Funktionsaufruf, ein. (Geben Sie keine Leerzeichen zwischen dem Doppelpunkt und dem Code oder dem
Funktionsaufruf ein.)
Hyperlinks automatisch aktualisieren
Wenn Sie ein Dokument innerhalb einer lokalen Site verschieben oder umbenennen, kann Dreamweaver sämtliche
Hyperlinks von und zu diesem Dokument aktualisieren. Die Funktion kann am besten verwendet werden, wenn Sie
die gesamte Site (oder einen ganzen eigenständigen Teil dieser Site) auf der lokalen Festplatte speichern. Dreamweaver
ändert die Dateien im Remote-Ordner erst, wenn Sie die lokalen Dateien auf dem Remote-Server ablegen oder
einchecken.
Das Aktualisieren der Hyperlinks kann beschleunigt werden, wenn in Dreamweaver eine Cache-Datei erstellt wird, in
der Informationen zu allen Hyperlinks im lokalen Ordner gespeichert werden. Die Cache-Datei wird nicht sichtbar
aktualisiert, wenn Sie Hyperlinks in Dateien auf der lokalen Site einfügen, ändern oder löschen.
Automatisches Aktualisieren von Hyperlinks aktivieren
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
303
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
2 Wählen Sie links im Dialogfeld „Voreinstellungen“ in der Kategorieliste die Option „Allgemein“ aus.
3 Wählen Sie im Bereich „Dokumentoptionen“ der allgemeinen Voreinstellungen eine Option im Popupmenü
„Hyperlinks beim Verschieben von Dateien aktualisieren“ aus.
Immer Aktualisiert automatisch alle Hyperlinks zu und von einem ausgewählten Dokument, wenn Sie dieses
Dokument verschieben oder umbenennen.
Nie Aktualisiert nicht automatisch alle Hyperlinks zu und von einem ausgewählten Dokument, wenn Sie dieses
Dokument verschieben oder umbenennen.
Eingabeaufforderung Zeigt ein Dialogfeld an, in dem alle von der Änderung betroffenen Dateien aufgeführt sind.
Klicken Sie auf „Aktualisieren“, um die Hyperlinks in diesen Dateien zu aktualisieren, oder auf „Nicht aktualisieren“,
wenn die Dateien nicht geändert werden sollen.
4 Klicken Sie auf „OK“.
Cache-Datei für die Site erstellen
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie dann auf „Bearbeiten“.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie
„Lokale Infos“ aus.
4 Wählen Sie in der Kategorie „Lokale Informationen“ die Option „Cache aktivieren“ aus.
Wenn Sie nach dem Starten von Dreamweaver zum ersten Mal Hyperlinks zu Dateien im lokalen Ordner ändern oder
löschen, werden Sie in Dreamweaver aufgefordert, den Cache zu laden. Wenn Sie auf „Ja“ klicken, wird der Cache
geladen und Dreamweaver aktualisiert alle Hyperlinks zu den gerade geänderten Dateien. Wenn Sie auf „Nein“
klicken, wird die Änderung zwar im Cache aufgezeichnet, der Cache wird in Dreamweaver jedoch nicht geladen und
die Hyperlinks werden nicht aktualisiert.
Das Laden des Caches kann bei umfangreicheren Sites einige Minuten dauern, da in Dreamweaver ermittelt werden
muss, ob der Cache die aktuellen Daten enthält, indem die Zeitstempel der Dateien der lokalen Site mit den im Cache
aufgezeichneten Zeitstempeln verglichen werden. Wenn Sie die Dateien nicht in anderen Anwendungen außerhalb
von Dreamweaver bearbeitet haben, können Sie ohne Weiteres auf die Schaltfläche „Stopp“ klicken, wenn diese
Schaltfläche eingeblendet wird.
Cache neu erstellen
❖ Wählen Sie im Bedienfeld „Dateien“ die Optionen „Site“ > „Erweitert“ > „Site-Cache neu erstellen“ aus.
Hyperlinks für die ganze Site ändern
Dreamweaver kann Hyperlinks automatisch aktualisieren, wenn Sie Dateien verschieben oder umbenennen. Sie
können alle Hyperlinks (einschließlich E-Mail-Verknüpfungen, FTP-, Null- und Skript-Hyperlinks) darüber hinaus
manuell ändern, sodass sie auf ein anderes Dokument verweisen.
Diese Funktion empfiehlt sich, wenn Sie eine Datei löschen möchten, auf die Hyperlinks in anderen Dateien
verweisen. Sie können sie jedoch auch für andere Zwecke einsetzen. Angenommen, Sie haben für die Worte „Filme
dieses Monats“ auf der gesamten Site den Hyperlink „/movies/july.html“ definiert. Am 1. August ändern Sie diese
Hyperlinks, sodass sie auf „/movies/august.html“ verweisen.
1 Wählen Sie in der lokalen Ansicht des Bedienfelds „Dateien“ eine Datei aus.
Note: Wenn Sie einen E-Mail-, FTP-, Null- oder Skript-Hyperlink ändern, müssen Sie keine Datei auswählen.
304
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
2 Wählen Sie „Site“ > „Hyperlink für ganze Site ändern“ aus.
3 Legen Sie die folgenden Optionen im Dialogfeld „Hyperlink für ganze Site ändern“ fest:
Ändern aller Hyperlinks zu Klicken Sie auf das Ordnersymbol , um die Zieldatei zu suchen und auszuwählen, für
die Hyperlinks entfernt werden sollen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ändern, müssen Sie den
vollständigen Text des zu ändernden Hyperlinks eingeben.
In Hyperlinks zu Klicken Sie auf das Ordnersymbol , um die neue zu verknüpfende Datei zu suchen und
auszuwählen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ändern, müssen Sie den vollständigen Text des
neuen Hyperlinks eingeben.
4 Klicken Sie auf „OK“.
Dreamweaver aktualisiert alle Dokumente, die mit der ausgewählten Datei verknüpft sind, sodass sie auf die neue
Datei verweisen. Dabei wird das Pfadformat des Dokuments übernommen (wenn der alte Pfad z. B. dokumentrelativ
ist, ist auch der neue Pfad dokumentrelativ).
Nachdem ein Hyperlink auf der gesamten Site geändert wurde, ist die ausgewählte Datei verwaist (d. h., keine Dateien
auf dem lokalen Datenträger verweisen auf diese Datei). Sie können diese Datei daher bedenkenlos löschen, da
dadurch keine Hyperlinks der lokalen Dreamweaver-Site beschädigt werden.
Important: Da diese Änderungen nur lokal durchgeführt werden, müssen Sie die entsprechende verwaiste Datei im
Remote-Ordner manuell löschen und Dateien mit geänderten Hyperlinks hochladen oder einchecken. Andernfalls sind
die Änderungen für Besucher der Website nicht sichtbar.
Hyperlinks in Dreamweaver testen
Hyperlinks sind in Dreamweaver nicht aktiv. Dies bedeutet, dass Sie ein verknüpftes Dokument nicht öffnen können,
indem Sie im Dokumentfenster auf den Hyperlink klicken.
❖ Führen Sie einen der folgenden Schritte aus:
• Markieren Sie den Hyperlink und wählen Sie dann „Modifizieren“ > „Verknüpfte Seite öffnen“ aus.
• Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf den Hyperlink.
Note: Das verknüpfte Dokument muss sich auf dem lokalen Datenträger befinden.
More Help topics
“Fehlerhafte, externe und verwaiste Hyperlinks suchen” on page 309
“Fehlerhafte Hyperlinks reparieren” on page 310
Sprungmenüs
Informationen zu Sprungmenüs
Ein Sprungmenü ist ein Popupmenü in einem Dokument, mit dem Besuchern der Website Hyperlinks zu
Dokumenten oder Dateien angezeigt werden. Sie können Hyperlinks zu Dokumenten auf der Website, zu
Dokumenten auf anderen Websites, E-Mail-Verknüpfungen, Hyperlinks zu Grafiken oder zu allen Dateitypen
erstellen, die in einem Browser geöffnet werden können.
305
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Jeder Option in einem Sprungmenü ist eine URL zugeordnet. Wenn Benutzer eine Option auswählen, erfolgt die
Weiterleitung (der „Sprung“) zur zugeordneten URL. Sprungmenüs werden im Formularobjekt „Sprungmenü“
eingefügt.
Ein Sprungmenü kann drei Komponenten enthalten:
• Eine Menüauswahlaufforderung, wie z. B. eine Kategoriebeschreibung für die Menüelemente, oder Anweisungen,
wie z. B. „Wählen Sie eine Option aus:“ (optional).
• Erforderlich: Eine Liste verknüpfter Menüoptionen. Ein Benutzer wählt eine Option aus und ein verknüpftes
Dokument oder eine verknüpfte Datei wird geöffnet.
• Optional: Eine Sprungschaltfläche.
More Help topics
“Verhalten „Sprungmenü“ definieren” on page 383
“Verhalten „Sprungmenü Gehe zu“ definieren” on page 383
Sprungmenüs einfügen
1 Öffnen Sie ein Dokument und setzen Sie dann die Einfügemarke in das Dokumentfenster.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Formular“ > „Sprungmenü“ aus.
• Klicken Sie in der Kategorie „Formulare“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Sprungmenü“.
3 Legen Sie die Optionen im Dialogfeld „Sprungmenü einfügen“ fest und klicken Sie auf „OK“. Es folgt eine
unvollständige Liste der verfügbaren Optionen:
Schaltflächen Plus („+“) und Minus („–“) Klicken Sie zum Einfügen eines Elements auf „+“. Klicken Sie zum Einfügen
weiterer Elemente erneut auf „+“. Um ein Element zu löschen, markieren Sie es und klicken Sie auf „–“.
Pfeilschaltflächen Wählen Sie ein Element aus und klicken Sie auf die Pfeile, um es in der Liste nach oben oder nach
unten zu verschieben.
Text Geben Sie den Namen für ein unbenanntes Element ein. Wenn das Menü eine Auswahlaufforderung enthalten
soll (z. B. „Wählen Sie eine Option aus“), geben Sie diese hier als erstes Menüelement ein. (Sie müssen in diesem Fall
ebenfalls unten die Option „Erstes Objekt nach URL-Änderung auswählen“ aktivieren.)
Wenn ausgewählt, gehe zu Navigieren Sie zur Zieldatei oder geben Sie ihren Pfad ein.
Öffne URLs in Geben Sie an, ob die Datei im gleichen Fenster oder in einem Frame geöffnet werden soll. Wenn der
Ziel-Frame nicht im Menü angezeigt wird, schließen Sie das Dialogfeld „Sprungmenü einfügen“ und benennen Sie den
Frame.
Schaltfläche „Gehe zu“ hinter Menü einfügen Wählen Sie diese Option aus, damit anstelle einer
Menüauswahlaufforderung eine Schaltfläche „Gehe zu“ eingefügt wird.
Erstes Objekt nach URL-Änderung auswählen Wählen Sie diese Option aus, wenn Sie als erstes Menüelement eine
Menüauswahlaufforderung („Wählen Sie eine Option aus:“) eingefügt haben.
More Help topics
“Eigenschaften und Attribute für Frames anzeigen und festlegen” on page 217
306
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Elemente in Sprungmenüs bearbeiten
Sie können die Reihenfolge der Menüelemente oder die Datei ändern, mit der ein Element verknüpft ist, oder
Elemente hinzufügen, löschen und umbenennen.
Um den Ort zu ändern, an dem eine verknüpfte Datei geöffnet wird, oder um eine Menüauswahlaufforderung
einzufügen oder zu ändern, müssen Sie im Bedienfeld „Verhalten“ das Verhalten „Sprungmenü“ definieren.
1 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist.
2 Klicken Sie in der Entwurfsansicht des Dokumentfensters auf das Sprungmenüobjekt, um es auszuwählen.
3 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Listenwerte“.
4 Nehmen Sie im Dialogfeld „Listenwerte“ die gewünschten Änderungen an den Menüelementen vor und klicken
Sie dann auf „OK“.
More Help topics
“Verhalten „Sprungmenü“ definieren” on page 383
Fehlersuche bei Sprungmenüs
Nachdem ein Benutzer bereits eine Sprungmenüoption ausgewählt hat, kann dies nicht nochmals erfolgen, wenn er
diese Seite wieder aufruft oder im Feld „Öffne URLs in“ ein Frame festgelegt ist. Es gibt zwei Möglichkeiten, dieses
Problem zu umgehen:
• Verwenden Sie eine Menüauswahlaufforderung, z. B. eine Kategorie oder eine Benutzeraufforderung wie „Wählen
Sie eine Option aus:“. Menüauswahlaufforderungen werden nach jeder Menüauswahl automatisch erneut
ausgewählt.
• Verwenden Sie eine Schaltfläche „Gehe zu“, über die Besucher der Website den aktuellen ausgewählten Hyperlink
erneut aufrufen können. Wenn die Schaltfläche „Gehe zu“ mit einem Sprungmenü verwendet wird, gelangt der
Benutzer ausschließlich über diese Schaltfläche zu der URL des im Menü ausgewählten Eintrags. Wenn ein
Benutzer im Sprungmenü ein Menüelement auswählt, wird er nicht mehr automatisch auf eine andere Seite oder
in einen anderen Frame umgeleitet.
Note: Verwenden Sie im Dialogfeld „Sprungmenü einfügen“ in jedem Sprungmenü nur eine dieser Optionen, da sie
sich auf das gesamte Sprungmenü auswirken.
Navigationsleisten
Informationen zu Navigationsleisten
Die Funktion „Navigationsleiste“ ist ab Dreamweaver CS5 veraltet.
Zum Erstellen von Navigationsleisten wird die Verwendung des Menüleisten-Widgets empfohlen.
More Help topics
“Arbeiten mit dem Spry-Menüleisten-Widget” on page 462
307
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Imagemaps
Informationen zu Imagemaps
Imagemaps sind Bilder, die in Bereiche oder Hotspots unterteilt sind. Wenn ein Besucher auf einen Hotspot klickt, wird
eine Aktion ausgeführt (beispielsweise wird eine neue Datei geöffnet).
Bei clientseitigen Imagemaps werden die Hyperlinkinformationen im HTML-Dokument gespeichert und nicht in
einer separaten Mapdatei wie bei serverseitigen Imagemaps. Wenn ein Besucher auf einen Hotspot im Bild klickt, wird
die zugeordnete URL direkt an den Server gesendet. Dadurch sind clientseitige Imagemaps schneller als Server-
Imagemaps, da der Server nicht interpretieren muss, auf welche Stelle der Benutzer geklickt hat. Clientseitige
Imagemaps werden in Netscape Navigator ab Version 2.0, NCSA Mosaic 2.1 und 3.0 sowie in allen Microsoft Internet
Explorer-Versionen unterstützt.
Dreamweaver ändert keine Verweise auf Server-Imagemaps in vorhandenen Dokumenten. Ein Dokument kann
client- und serverseitige Imagemaps enthalten. Beachten Sie, dass Browser, die beide Arten von Imagemaps
unterstützen, clientseitigen Imagemaps den Vorrang geben. Wenn Sie eine Server-Imagemap in ein Dokument
einfügen möchten, müssen Sie den entsprechenden HTML-Code erstellen.
Clientseitige Imagemaps einfügen
Wenn Sie eine clientseitige Imagemap einfügen möchten, erstellen Sie einen Hotspot-Bereich und definieren
anschließend einen Hyperlink, der geöffnet wird, sobald ein Besucher auf den Hotspot-Bereich klickt.
Note: Sie können mehrere Hotspot-Bereiche erstellen. Diese gehören jedoch zur gleichen Imagemap.
1 Wählen Sie im Dokumentfenster ein Bild aus.
2 Klicken Sie im Eigenschafteninspektor auf den Erweiterungspfeil in der unteren rechten Ecke, um alle
Eigenschaften einzublenden.
3 Geben Sie im Feld „Imagemap“ einen eindeutigen Namen für die Imagemap-Datei ein. Wenn Sie mehrere
Imagemaps in einem Dokument verwenden, stellen Sie sicher, dass Sie jeder Imagemap einen eindeutigen Namen
zuweisen.
4 Definieren Sie die Imagemap-Bereiche mit einem der folgenden Schritte:
• Klicken Sie auf das Kreissymbol und ziehen Sie den Mauszeiger um das Bild, um einen runden Hotspot zu
erstellen.
• Klicken Sie auf das Rechtecksymbol und ziehen Sie den Mauszeiger um das Bild, um einen rechteckigen
Hotspot zu erstellen.
• Klicken Sie auf das Polygonsymbol und definieren Sie einen unregelmäßig geformten Hotspot, indem Sie
einmal für jeden Eckpunkt klicken. Klicken Sie auf das Pfeilsymbol, um die Form zu schließen.
Nach dem Erstellen eines Hotspots wird der Eigenschafteninspektor für Hotspots angezeigt.
5
Klicken Sie im Feld „Hyperlink“ des Eigenschafteninspektors für Hotspots auf das Ordnersymbol , um die zu
öffnende Datei auszuwählen, die beim Klicken auf den Hotspot geöffnet werden soll oder geben Sie den Pfad direkt ein.
6 Wählen Sie im Popupmenü „Ziel“ das Fenster aus, in dem die Datei geöffnet werden soll, oder geben Sie dessen
Namen ein.
308
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Im Listenfeld sind die Namen aller Frames aufgeführt, die Sie im aktuellen Dokument benannt haben. Wenn Sie einen
Frame angeben, der nicht vorhanden ist, wird die verknüpfte Seite in einem neuen Fenster geladen, das den
angegebenen Namen erhält. Sie können auch einen der folgenden reservierten Zielnamen auswählen:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink
enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das
ganze Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Note: Die Option „Ziel“ ist nur verfügbar, wenn der ausgewählte Hotspot einen Hyperlink enthält.
7 Geben Sie im Feld „Alt“ den alternativen Text ein, der in reinen Textbrowsern oder in Browsern angezeigt wird,
bei denen Bilder manuell heruntergeladen werden. In einigen Browsern wird dieser Text als QuickInfo angezeigt,
wenn die Besucher der Website den Mauszeiger über den Hotspot bewegen.
8 Wiederholen Sie die Schritte 4 bis 7, um weitere Hotspots in der Imagemap zu definieren.
9 Wenn Sie dem Bild alle gewünschten Verknüpfungen hinzugefügt haben, klicken Sie auf einen leeren Bereich im
Dokument, um den Eigenschafteninspektor zu ändern.
Imagemap-Hotspots ändern
Sie können die in einer Imagemap erstellten Hotspots problemlos bearbeiten. Sie können Hotspot-Bereiche
verschieben, Hotspots vergrößern bzw. verkleinern oder Hotspots innerhalb eines absolut positionierten Elements
(AP-Element) vor- und zurückverschieben.
Sie können auch ein Bild mit Hotspots von einem Dokument in ein anderes kopieren oder einen oder mehrere
Hotspots kopieren und in ein anderes Bild einfügen. Die dem Bild zugewiesenen Hotspots werden dabei ebenfalls in
das neue Dokument kopiert.
Mehrere Hotspots in einer Imagemap auswählen
1 Wählen Sie einen Hotspot mit dem Tool für Mauszeiger-Hotspots aus.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie bei gedrückter Umschalttaste auf die anderen Hotspots, die Sie auswählen möchten.
• Drücken Sie Strg+A (Windows) bzw. Befehl+A (Macintosh), um alle Hotspots auszuwählen.
Hotspots verschieben
1 Wählen Sie den Hotspot mit dem Tool für Mauszeiger-Hotspots aus.
2 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie den Hotspot an eine neue Stelle.
• Verschieben Sie den Hotspot um 10 Pixel in eine bestimmte Richtung, indem Sie bei gedrückter Strg-Taste die
entsprechende Pfeiltaste drücken.
• Verschieben Sie den Hotspot um 1 Pixel in eine bestimmte Richtung, indem Sie die entsprechende Pfeiltaste
drücken.
309
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Größe von Hotspots ändern
1 Wählen Sie den Hotspot mit dem Tool für Mauszeiger-Hotspots aus.
2 Ändern Sie die Größe oder Form des Hotspots durch Ziehen eines Ziehpunkts zur Größenänderung von Hotspots.
Fehler in Hyperlinks beheben
Fehlerhafte, externe und verwaiste Hyperlinks suchen
Mit der Funktion „Hyperlinks überprüfen“ können Sie nach fehlerhaften Hyperlinks und verwaisten Dateien
(Dateien, die auf der Site noch vorhanden, jedoch mit keinen anderen Dateien auf der Site verknüpft sind) suchen. Sie
können in einer geöffneten Datei, in einem Teil einer lokalen Site oder in der gesamten lokalen Site suchen.
In Dreamweaver werden nur die Hyperlinks zu Dokumenten innerhalb der Site überprüft. Dabei wird in
Dreamweaver zwar eine Liste der externen Hyperlinks in den ausgewählten Dokumenten erstellt, sie werden jedoch
nicht überprüft.
Sie können darüber hinaus Dateien identifizieren und löschen, die in anderen Dateien auf der Site nicht mehr
verwendet werden.
More Help topics
“Nicht verwendete Dateien identifizieren und löschen” on page 87
Hyperlinks in aktuellem Dokument überprüfen
1 Speichern Sie die Datei in einem Ordner der lokalen Dreamweaver-Site.
2 Wählen Sie „Datei“ > „Seite überprüfen“ > „Hyperlinks“ aus.
Der Bericht „Fehlerhafte Hyperlinks“ wird im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“)
angezeigt.
3 Wählen Sie im Bedienfeld „Hyperlink-Prüfer“ im Popupmenü „Anzeigen“ die Option „Externe Hyperlinks“ aus,
um einen anderen Bericht anzuzeigen.
Der Bericht „Externe Hyperlinks“ wird im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“)
angezeigt.
Sie können nach verwaisten Dateien suchen, wenn Sie Hyperlinks auf der ganzen Site überprüfen.
4 Wenn Sie den Bericht speichern möchten, klicken Sie im Bedienfeld „Hyperlink-Prüfer“ auf die Schaltfläche
„Bericht speichern“. Der Bericht ist eine temporäre Datei. Er wird gelöscht, wenn Sie ihn nicht speichern.
Hyperlinks in Teilen einer lokalen Site überprüfen
1 Wählen Sie im Bedienfeld „Dateien“ im Popupmenü „Aktuelle Sites“ eine Site aus.
2 Wählen Sie in der lokalen Ansicht die zu überprüfenden Dateien oder Ordner aus.
3 Starten Sie die Überprüfung mit einem der folgenden Schritte:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf eine der
ausgewählten Dateien und wählen Sie dann im Kontextmenü die Optionen „Hyperlinks überprüfen“ >
„Ausgewählte Dateien/Ordner“ aus.
310
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
• Wählen Sie „Datei“ > „Seite überprüfen“ > „Hyperlinks“ aus.
Der Bericht „Fehlerhafte Hyperlinks“ wird im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“)
angezeigt.
4 Wählen Sie im Bedienfeld „Hyperlink-Prüfer“ im Popupmenü „Anzeigen“ die Option „Externe Hyperlinks“ aus,
um einen anderen Bericht anzuzeigen.
Der Bericht „Externe Hyperlinks“ wird im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“)
angezeigt.
Sie können nach verwaisten Dateien suchen, wenn Sie Hyperlinks auf der ganzen Site überprüfen.
5 Wenn Sie einen Bericht speichern möchten, klicken Sie im Bedienfeld „Hyperlink-Prüfer“ auf die Schaltfläche
„Bericht speichern“.
Hyperlinks für die ganze Site überprüfen
1 Wählen Sie im Bedienfeld „Dateien“ im Popupmenü „Aktuelle Sites“ eine Site aus.
2 Wählen Sie „Site“ > „Hyperlinks auf der ganzen Site prüfen“.
Der Bericht „Fehlerhafte Hyperlinks“ wird im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“)
angezeigt.
3 Wählen Sie im Bedienfeld „Hyperlink-Prüfer“ im Popupmenü „Anzeigen“ die Option „Externe Hyperlinks“ oder
„Verwaiste Dateien“ aus, um einen anderen Bericht anzuzeigen.
Im Bedienfeld „Hyperlink-Prüfer“ wird eine Liste der Dateien angezeigt, die dem ausgewählten Berichtstyp
entsprechen.
Note: Wenn Sie den Berichtstyp „Verwaiste Dateien“ auswählen, können Sie verwaiste Dateien direkt im Bedienfeld
„Hyperlink-Prüfer“ löschen. Wählen Sie dazu eine Datei in der Liste aus und drücken Sie die Entf-Taste.
4 Wenn Sie einen Bericht speichern möchten, klicken Sie im Bedienfeld „Hyperlink-Prüfer“ auf die Schaltfläche
„Bericht speichern“.
Fehlerhafte Hyperlinks reparieren
Nach dem Ausführen eines Berichts für Hyperlinks können Sie fehlerhafte Hyperlinks und Bildverweise direkt im
Bedienfeld „Hyperlink-Prüfer“ reparieren. Sie können die Dateien jedoch auch in der Liste öffnen und die Hyperlinks
im Eigenschafteninspektor reparieren.
Hyperlinks im Bedienfeld „Hyperlink-Prüfer“ reparieren
1 Führen Sie eine Hyperlinkprüfung durch.
2 Wählen Sie den fehlerhaften Hyperlink in der Spalte „Fehlerhafte Hyperlinks“ (nicht in der Spalte „Dateien“) des
Bedienfelds „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“) aus.
Neben dem fehlerhaften Hyperlink wird ein Ordnersymbol angezeigt.
3 Klicken Sie auf das Ordnersymbol neben dem fehlerhaften Hyperlink, um die entsprechende Datei
auszuwählen, oder geben Sie den korrekten Pfad und Dateinamen ein.
4 Drücken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Macintosh).
311
VERWENDEN VON DREAMWEAVER
Hyperlinks und Navigation
Last updated 10.4.2012
Wenn weitere fehlerhafte Verweise zu derselben Datei vorhanden sind, werden Sie aufgefordert, auch die Verweise in
den anderen Dateien zu reparieren. Klicken Sie auf „Ja“, damit in Dreamweaver alle aufgelisteten Dokumente
aktualisiert werden, die auf diese Datei verweisen. Klicken Sie auf „Nein“, wenn in Dreamweaver nur der aktuelle
Verweis aktualisiert werden soll.
Note: Wenn „Ein- und Auschecken von Dateien aktivieren“ für die Site aktiviert ist, versucht Dreamweaver, Dateien
auszuchecken, die geändert werden müssen. Wenn eine Datei nicht ausgecheckt werden kann, wird in Dreamweaver eine
Warnmeldung angezeigt und die fehlerhaften Verweise werden nicht geändert.
Hyperlinks im Eigenschafteninspektor reparieren
1 Führen Sie eine Hyperlinkprüfung durch.
2 Doppelklicken Sie im Bedienfeld „Hyperlink-Prüfer“ (in der Bedienfeldgruppe „Ergebnisse“) auf einen Eintrag in
der Spalte „Dateien“.
Daraufhin öffnet Dreamweaver das Dokument, wählt das fehlerhafte Bild oder den fehlerhaften Hyperlink aus und
markiert im Eigenschafteninspektor den Pfad und den Dateinamen. (Wenn der Eigenschafteninspektor nicht
angezeigt wird, wählen Sie „Fenster“ > „Eigenschaften“ aus, um ihn zu öffnen.)
3 Legen Sie im Eigenschafteninspektor einen neuen Pfad und Dateinamen fest, indem Sie auf das Ordnersymbol
klicken, um die Datei auszuwählen, oder indem Sie den markierten Text überschreiben.
Wenn Sie einen Bildverweis aktualisieren und das neue Bild nicht in der korrekten Größe angezeigt wird, klicken Sie
im Eigenschafteninspektor auf „B“ und „H“ oder klicken Sie auf die Schaltfläche „Aktualisieren“, um die Werte für
Breite und Höhe zurückzusetzen.
4 Speichern Sie die Datei.
Die reparierten Hyperlinks werden aus der Liste im „Hyperlink-Prüfer“ entfernt. Wenn Sie im „Hyperlink-Prüfer“
einen neuen Pfad und Dateinamen eingegeben haben (oder die Änderungen im Eigenschafteninspektor gespeichert
haben), der Hyperlink jedoch weiterhin in der Liste angezeigt wird, bedeutet dies, dass die neue Datei inDreamweaver
nicht gefunden wird und der Hyperlink weiterhin als fehlerhaft angezeigt wird.
312
Last updated 10.4.2012
Chapter 10: Vorschau von Seiten
Vorschau von Seiten
Die Entwurfsansicht stellt Ihre Seite annähernd so dar, wie sie im Web aussehen wird. Sie wird jedoch nicht genau so
gerendert wie in einem Webbrowser. Die Live-Ansicht bietet eine genauere Darstellung und ermöglicht es Ihnen, in
der Codeansicht vorgenommene Entwurfsänderungen sofort anzuzeigen. Mit der Funktion „Vorschau in Browser“
können Sie prüfen, wie Ihre Seiten in einem bestimmten Browser dargestellt werden.
Seitenvorschau in Dreamweaver
Live-Ansicht
Die Live-Ansicht unterscheidet sich von der herkömmlichen Dreamweaver-Entwurfsansicht dadurch, dass sie eine
nicht bearbeitbare, realistischere Darstellung Ihrer Seite in einem Browser bietet. Die Live-Ansicht ersetzt nicht den
Befehl „Vorschau in Browser“, sondern bietet vielmehr eine weitere Möglichkeit, die Darstellung Ihrer Seite „live“ zu
prüfen, ohne dazu den Dreamweaver-Arbeitsbereich verlassen zu müssen.
Wenn Sie sich in der Entwurfsansicht befinden, können Sie jederzeit zur Live-Ansicht wechseln. Der Wechsel zur
Live-Ansicht ist jedoch nicht mit dem Wechsel zwischen den anderen herkömmlichen Dreamweaver-Ansichten
(Codeansicht/Geteilte Ansicht/Entwurfsansicht) vergleichbar. Beim Wechseln aus der Entwurfsansicht zur Live-
Ansicht wird die Entwurfsansicht lediglich zwischen den beiden Zuständen „bearbeitbar“ und „live“ umgeschaltet.
Nach dem Wechsel zur Live-Ansicht ist die Entwurfsansicht zwar fixiert, die Codeansicht bleibt jedoch bearbeitbar.
Sie können also Codeänderungen vornehmen und dann die Live-Ansicht aktualisieren, um die Änderungen zu
übernehmen. In der Live-Ansicht besteht die zusätzliche Möglichkeit, zur Live-Codeansicht zu wechseln. Die Live-
Codeansicht entspricht insofern der Live-Ansicht, dass eine Version des Codes angezeigt wird, den der Browser zum
Darstellen der Seite ausführt. Wie die Live-Ansicht ist auch die Live-Codeansicht nicht bearbeitbar.
Ein zusätzlicher Vorteil der Live-Ansicht ist die Möglichkeit, JavaScript anzuhalten. Sie können beispielsweise zur
Live-Ansicht wechseln und den Mauszeiger über Spry-basierte Tabellenzeilen führen, deren Farbe sich in
Abhängigkeit von der Benutzerinteraktion ändert. Wenn Sie dann JavaScript anhalten, wird die Seite in der Live-
Ansicht in ihrem aktuellen Zustand fixiert. Sie können nun den CSS- bzw. JavaScript-Code bearbeiten und die Seite
aktualisieren, um die Änderungen zu überprüfen. Das Anhalten von JavaScript in der Live-Ansicht ist hilfreich, wenn
Sie Eigenschaften für die verschiedenen Zustände von Popupmenüs oder anderen interaktiven Elementen prüfen und
ändern möchten, die in der herkömmlichen Entwurfsansicht nicht dargestellt werden.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung der Live-Ansicht finden
Sie unter www.adobe.com/go/dw10liveview_de.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Navigation in der Live-Ansicht finden
Sie unter www.adobe.com/go/dwcs5livenav_de.
Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehörigen Dateien und zum Code-Navigator finden
Sie unter www.adobe.com/go/lrvid4044_dw_de.
Seitenvorschau in der Live-Ansicht
1 Stellen Sie sicher, dass die Entwurfsansicht („Ansicht > „Entwurf“) oder die Code- und Entwurfsansicht
(„Ansicht“ > „Code und Entwurf“) ausgewählt ist.
313
VERWENDEN VON DREAMWEAVER
Vorschau von Seiten
Last updated 10.4.2012
2 Klicken Sie auf die Schaltfläche „Live-Ansicht“.
3 Optional: Nehmen Sie Änderungen in der Entwurfsansicht, im Bedienfeld „CSS-Stile“, in einem externen CSS-
Stylesheet oder in einer anderen zugehörigen Datei vor.
Obwohl Codeänderungen in der Live-Ansicht nicht möglich sind, ändern sich beim Klicken in der Live-Ansicht
die Optionen für Änderungen in anderen Bereichen (z. B. im Bedienfeld „CSS-Stile“ oder in der Codeansicht).
Sie können zugehörige Dateien (wie CSS-Stylesheets) bearbeiten, während der Fokus in der Live-Ansicht bleibt,
indem Sie die zugehörige Datei mithilfe der Symbolleiste „Zugehörige Dateien“ am oberen Rand des Dokuments
öffnen.
4 Klicken Sie nach Änderungen in der Codeansicht oder in einer zugehörigen Datei in der Symbolleiste „Dokument“
auf die Schaltfläche „Aktualisieren“ bzw. drücken Sie F5, um die Live-Ansicht zu aktualisieren.
5 Klicken Sie erneut auf die Schaltfläche „Live-Ansicht“, um zur bearbeitbaren Entwurfsansicht zurückzukehren.
Vorschau von Live-Code
Der in der Live-Codeansicht angezeigte Code entspricht der Darstellung des Seitenquelltexts in einem Browser.
Während Browser-Seitenquelltext statisch ist und nur den zum jeweiligen Zeitpunkt vom Browser zur Darstellung
verwendeten Code enthält, ist die Live-Codeansicht dynamisch und wird bei Interaktionen mit der Seite in der Live-
Ansicht kontinuierlich aktualisiert.
1 Stellen Sie sicher, dass die Live-Ansicht aktiv ist.
2 Klicken Sie auf die Schaltfläche „Live-Code“.
Dreamweaver zeigt „live“ den Code an, der vom Browser zum Ausführen der Seite verwendet wird. Der Code ist
gelb markiert und kann nicht bearbeitet werden.
Beim Interagieren mit interaktiven Elementen auf der Seite werden die dynamischen Änderungen im Code
hervorgehoben.
3 Wenn Sie die Hervorhebung der Änderungen in der Live-Codeansicht deaktivieren möchten, wählen Sie
„Ansicht“ > „Live-Ansicht-Optionen“ > „Änderungen in Live-Code hervorheben“ aus.
4 Klicken Sie erneut auf die Schaltfläche „Live-Code“, um zur bearbeitbaren Codeansicht zurückzukehren.
Wenn Sie die Voreinstellungen für den Live-Code ändern möchten, wählen Sie „Bearbeiten“ > „Voreinstellungen“
(Windows) oder „Dreamweaver“ > „Voreinstellungen“ (Macintosh OS) und dann die Kategorie „Farbe für Code“ aus.
JavaScript anhalten
Führen Sie einen der folgenden Schritte aus:
• Drücken Sie F6.
• Wählen Sie aus dem Popupmenü der Schaltfläche „Live-Ansicht“ die Option „JavaScript anhalten“ aus.
Eine Statusleiste am oberen Rand des Dokuments informiert darüber, dass JavaScript angehalten ist. Klicken Sie zum
Schließen der Statusleiste auf die entsprechende Verknüpfung.
314
VERWENDEN VON DREAMWEAVER
Vorschau von Seiten
Last updated 10.4.2012
Live-Ansicht-Optionen
Neben der Option „JavaScript anhalten“ stehen im Popupmenü der Schaltfläche „Live-Ansicht“ oder im Menü
„Ansicht“ > „Live-Ansicht-Optionen“ noch einige andere Optionen zur Auswahl.
JavaScript anhalten Von JavaScript beeinflusste Elemente werden in ihrem aktuellen Zustand fixiert.
JavaScript deaktivieren JavaScript wird deaktiviert und die Seite erneut so dargestellt, als wäre JavaScript im Browser
nicht aktiviert.
Plug-Ins deaktivieren Plug-Ins werden deaktiviert und die Seite erneut so dargestellt, als wären Plug-Ins im Browser
nicht aktiviert.
Änderungen in Live-Code hervorheben Die Hervorhebung von Änderungen im Live-Code wird deaktiviert oder
aktiviert.
Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten Sie können neue Registerkarten für Site-Dokumente
öffnen, die Sie mithilfe der Symbolleiste „Browser-Navigation“ oder der Funktion „Hyperlink(s) aufrufen“ aufrufen.
Dazu müssen Sie zunächst zum entsprechenden Dokument wechseln und dann „Live-Ansicht-Seite auf einer neuen
Registerkarte bearbeiten“ auswählen, um eine neue Registerkarte für das Dokument zu erstellen.
Hyperlink aufrufen
Der nächste Hyperlink, auf den Sie klicken, wird in der Live-Ansicht aktiv. Alternativ dazu können
Sie bei gedrückter Strg-Taste bzw. Befehlstaste in der Live-Ansicht auf einen Hyperlink klicken, damit er aktiv wird.
Hyperlinks fortlaufend aufrufen Hyperlinks sind in der Live-Ansicht permanent aktiv, bis Sie sie wieder deaktivieren
oder die Seite schließen.
Remote-Dateien automatisch synchronisieren Die lokale und die Remote-Datei werden automatisch synchronisiert,
wenn Sie auf das Symbol „Aktualisieren“ auf der Symbolleiste „Browser-Navigation“ klicken. Die Datei wird vor dem
Aktualisieren auf dem Server bereitgestellt, sodass beide Dateien synchronisiert sind.
Testserver als Dokumentenquelle verwenden Diese Option wird hauptsächlich für dynamische Seiten (z. B.
ColdFusion-Seiten) verwendet und ist für dynamische Seiten standardmäßig aktiviert. Wenn diese Option aktiviert
ist, verwendet Dreamweaver die Dateiversion auf dem Testserver der Site als Quelle für die Anzeige in der Live-
Ansicht.
Lokale Dateien für Dokumentverknüpfungen verwenden Dies ist die Standardeinstellung für nicht-dynamische Sites.
Wenn diese Option für dynamische Sites auf einem Testserver aktiviert wird, verwendet Dreamweaver die lokalen
Versionen der mit dem Dokument verknüpften Dateien (z. B. CSS- und JavaScript-Dateien) und nicht die Dateien auf
dem Testserver. Sie können dann lokal Änderungen an den zugehörigen Dateien vornehmen und die Ergebnisse
überprüfen, bevor Sie sie auf dem Testserver ablegen. Wenn diese Option deaktiviert ist, verwendet Dreamweaver die
Versionen der zugehörigen Dateien auf dem Testserver.
Einstellungen für HTTP-Anforderungen Es wird ein Dialogfeld mit erweiterten Einstellungen angezeigt, in dem Sie
Werte zum Anzeigen von Live-Daten eingeben können. Weitere Informationen erhalten Sie auch, wenn Sie im
Dialogfeld auf die Hilfeschaltfläche klicken.
More Help topics
“Überblick über die Symbolleiste „Browser-Navigation“” on page 12
“Zwischen Ansichten im Dokumentfenster umschalten” on page 19
“Zugehörige Dateien öffnen” on page 76
“Live-Daten anzeigen” on page 643
Video-Tutorial zur Live-Ansicht
315
VERWENDEN VON DREAMWEAVER
Vorschau von Seiten
Last updated 10.4.2012
Vorschau von Seiten im Browser
Vorschau in einem Browser
Die Vorschau einer Seite im Browser ist jederzeit möglich, ohne dass die Seite dafür eigens auf einen Webserver
hochgeladen werden muss. Bei der Vorschau von Seiten sollten alle Browserfunktionen funktionieren, z. B. JavaScript-
Verhalten, dokumentbezogene und absolute Hyperlinks, ActiveX®-Steuerelemente und Netscape Navigator-Plug-Ins.
Dazu müssen die erforderlichen Plug-Ins oder ActiveX-Steuerelemente jedoch in den verwendeten Browsern
installiert sein.
Bevor Sie ein Dokument in der Vorschau anzeigen, müssen Sie es zunächst speichern. Andernfalls wird es im Browser
ohne die jüngsten Änderungen dargestellt.
1 Führen Sie einen der folgenden Schritte aus, um eine Seitenvorschau durchzuführen:
• Wählen Sie „Datei“ > „Vorschau in Browser“ und anschließend einen der aufgeführten Browser.
Note: Wenn keine Browser aufgeführt sind, wählen Sie „Bearbeiten“ > „Voreinstellungen“ oder „Dreamweaver“ >
„Voreinstellungen (Macintosh)“. Wählen Sie anschließend die Kategorie „Vorschau im Browser“ auf der linken Seite, um
einen Browser auszuwählen.
• Drücken Sie F12 (Windows) oder Wahl+F12 (Macintosh), um die Vorschau des aktuellen Dokuments im
Primärbrowser anzuzeigen.
• Drücken Sie Strg>+F12 (Windows) bzw. Befehl+F12 (Macintosh), um die Vorschau des aktuellen Dokuments im
Sekundärbrowser anzuzeigen.
2 Klicken Sie auf die Hyperlinks und testen Sie den Inhalt Ihrer Seite.
Note: In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner
relativen Pfad verknüpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter „Bearbeiten“ >
„Voreinstellungen“ > „Vorschau in Browser“ die Option „Vorschau mit temporärer Datei“ auswählen. Der Grund
hierfür ist, dass Browser im Gegensatz zu Servern Site-Stammordner nicht erkennen können.
Wenn Sie eine Vorschau des Inhalts anzeigen möchten, der durch stammrelative Pfade verknüpft ist, übertragen Sie
die Datei an einen Remote-Server und wählen Sie dann „Datei“ > „Vorschau in Browser“, um sie anzuzeigen.
3 Schließen Sie die Seite im Browser, wenn Sie den Test abschließen.
More Help topics
“Zum Site-Stammordner relative Pfade” on page 296
Voreinstellungen für die Vorschau im Browser festlegen
Sie können Voreinstellungen für den Browser festlegen, der für die Vorschau einer Site verwendet wird, sowie einen
standardmäßigen Primär- und Sekundärbrowser definieren.
1 Wählen Sie „Datei“ > „Vorschau in Browser“ > „Browserliste bearbeiten“.
2 Um der Liste einen Browser hinzuzufügen, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), geben im
Dialogfeld „Browser hinzufügen“ die erforderlichen Details ein und klicken dann auf „OK“.
3 Um einen Browser aus der Liste zu löschen, wählen Sie ihn aus und klicken dann auf die Schaltfläche mit dem
Minuszeichen (–).
4 Um die Einstellungen für einen ausgewählten Browser zu ändern, klicken Sie auf die Schaltfläche „Bearbeiten“,
führen die Änderungen im Dialogfeld „Browser bearbeiten“ durch und klicken dann auf „OK“.
316
VERWENDEN VON DREAMWEAVER
Vorschau von Seiten
Last updated 10.4.2012
5 Mit den Optionen „Primärbrowser“ und „Sekundärbrowser“ können Sie angeben, ob es sich beim gewählten
Browser um den primären oder den sekundären Browser handelt.
Mit F12 (Windows) bzw. Wahl+F12 (Macintosh) wird der Primärbrowser geöffnet und mit Strg+F12 (Windows) bzw.
Befehl+F12 (Macintosh) der Sekundärbrowser.
6 Aktivieren Sie die Option „Vorschau mit temporärer Datei“, um für Vorschau und Serverdebuggen eine temporäre
Kopie zu erstellen. (Deaktivieren Sie die Option, wenn Sie das Dokument direkt aktualisieren möchten.)
Vorschau von Seiten auf Mobilgeräten
Verwenden Sie Device Central mit integrierter Small-Screen Rendering-Funktion von Opera, um eine Vorschau von
mit Dreamweaver erstellten Seiten auf unterschiedlichen mobilen Geräten anzuzeigen. Auf unterschiedlichen Geräte
sind unterschiedliche Browser installiert, die Vorschau vermittelt jedoch eine gute Vorstellung dessen, wie der Inhalt
auf einem bestimmten Gerät aussehen und funktionieren wird.
1 Starten Sie Dreamweaver.
2 Öffnen Sie eine Datei.
3 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Datei“ > „Vorschau im Browser“ > „Device Central“.
• Klicken Sie auf der Symbolleiste des Dokumentfensters auf die Schaltfläche „Vorschau/Debuggen im
Browser“ , halten Sie die Maustaste gedrückt und wählen Sie „Vorschau in Device Central“.
Die Datei wird auf der Registerkarte „Device Central Emulator“ angezeigt. Zum Fortfahren des Tests doppelklicken
Sie in der Liste „Gerätegruppen“ oder „Verfügbare Geräte“ auf den Namen eines anderen Geräts.
More Help topics
“Mit Device Central arbeiten und Dreamweaver verwenden” on page 411
317
Last updated 10.4.2012
Chapter 11: Mit Seitencode arbeiten
Allgemeine Informationen zum Programmieren in
Dreamweaver
More Help topics
“Codehinweise” on page 330
“Festlegen von Codeeinstellungen” on page 324
“Anpassen von Tastaturbefehlen” on page 324
“Seiten mit XHTML kompatibel machen” on page 354
“Nach Tags, Attributen oder Text im Code suchen” on page 345
“Suchmuster speichern und aufrufen” on page 346
“Optimieren des Arbeitsbereichs für visuelle Entwicklung” on page 599
“Anzeigen von Datenbank-Datensätzen” on page 633
Unterstützte Sprachen
Neben Textbearbeitungsfunktionen bietet Adobe® Dreamweaver® CS5 verschiedene Features wie z. B. Codehinweise,
die die Kodierungsarbeit in den folgenden Sprachen erleichtern:
• HTML
• XHTML
• CSS
• JavaScript
• ColdFusion Markup Language (CFML)
• VBScript (für ASP)
• C# und Visual Basic (für ASP.NET)
• JSP
• PHP
Andere Sprachen, wie etwa Perl, werden von den sprachspezifischen Kodierungsfunktionen in Dreamweaver nicht
unterstützt. Beispielsweise können Sie Perl-Dateien erstellen und bearbeiten, aber Codehinweise funktionieren bei
dieser Sprache nicht.
Ungültiger Markup
Wenn Ihr Dokument ungültigen Code enthält, wird dieser in Dreamweaver in der Entwurfsansicht angezeigt und
optional in der Codeansicht hervorgehoben. Sobald Sie den Code in einer der Ansichten auswählen, werden im
Eigenschafteninspektor Informationen dazu angezeigt, warum der Code ungültig ist und wie er repariert werden kann.
318
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Note: Die Option zum Hervorheben von ungültigem Code in der Codeansicht ist standardmäßig deaktiviert. Wechseln
Sie zum Aktivieren dieser Option in die Codeansicht („Ansicht“ > „Code“) und wählen Sie dann „Ansicht“ >
„Codeansichtsoptionen“ > „Ungültigen Code hervorheben“ aus.
Sie können auch Voreinstellungen für das automatische Korrigieren verschiedener Arten von ungültigem Code beim
Öffnen von Dokumenten festlegen.
Automatische Codeänderung
Sie können Dreamweaver durch Aktivieren verschiedener Optionen anweisen, Ihren handgeschriebenen Code
anhand bestimmter Kriterien automatisch zu bereinigen. Ihr Code wird jedoch nur dann umgeschrieben, wenn die
Optionen für das Umschreiben von Code aktiviert sind oder Sie eine Aktion durchführen, durch die der Code
verändert wird. Beispielsweise werden von Dreamweaver keine Leerräume aus dem Code entfernt und die Groß-
/Kleinschreibung von Attributen bleibt unverändert, sofern Sie nicht den Befehl „Quellenformatierung übernehmen“
einsetzen.
Einige dieser Codeumschreibungsoptionen sind standardmäßig aktiviert.
Durch die Roundtrip-HTML-Funktionen in Dreamweaver können Sie Ihre Dokumente in Dreamweaver und in
textbasierten HTML-Editoren öffnen, ohne dass dadurch der Inhalt oder die Struktur des ursprünglichen HTML-
Quellcodes wesentlich beeinflusst wird. Zu diesen Funktionen gehören die folgenden:
• Mit dem Texteditor eines Drittanbieters können Sie bei Bedarf das aktuelle Dokument bearbeiten.
• Dreamweaver nimmt standardmäßig keine Änderungen in Code vor, der in anderen HTML-Editoren erstellt oder
bearbeitet wurde, selbst wenn er ungültig ist. Hierfür müssen Sie erst die Optionen zur Codeumschreibung
aktivieren.
• Dreamweaver ändert keine Tags, die nicht erkannt werden. Dies gilt auch für XML-Tags, denn Dreamweaver
stehen keine Kriterien zur Verfügung, die eine Beurteilung unbekannter Tags erlauben würden. Wenn ein
unerkanntes Tag ein anderes Tag überlappt (z. B.
<MyNewTag><em>text</MyNewTag></em>), markiert
Dreamweaver dies zwar als Fehler, schreibt den Code aber nicht um.
• Auf Wunsch können Sie festlegen, dass Dreamweaver ungültigen Code in der Codeansicht hervorhebt (in Gelb).
Wenn Sie einen so hervorgehobenen Abschnitt auswählen, werden im Eigenschafteninspektor Anweisungen zur
Korrektur des Fehlers angezeigt.
XHTML-Code
Dreamweaver erstellt neuen XHTML-Code und optimiert bereits vorhandenen XHTML-Code so, dass er den meisten
XHTML-Anforderungen entspricht. Darüber hinaus stehen Ihnen in die Werkzeuge zur Verfügung, die Sie benötigen,
um die wenigen verbleibenden XHTML-Anforderungen zu erfüllen.
Note: Einige dieser Anforderungen gelten auch für verschiedene HTML-Versionen.
In der folgende Tabelle sind die XHTML-Anforderungen aufgeführt, die Dreamweaver automatisch erfüllt:
319
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
XHTML-Anforderung Von Dreamweaver ausgeführte Aktionen
Vor dem Stammelement muss eine DOCTYPE-Deklaration vorhanden
sein, die auf eine der drei DTD-Dateien (DTD = Document Type
Definition) für XHTML („strict“, „transitional“ oder „frameset“)
verweist.
Fügt einem XHTML-Dokument eine XHTML-DOCTYPE-Deklaration
hinzu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Oder bei einem XHTML-Dokument mit einem Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Das Stammelement des Dokuments muss html sein und das html-
Element muss den XHTML-Namensbereich (namespace) ausweisen.
Fügt das Attribut namespace in folgender Weise dem Element html
hinzu:
<html xmlns="http://www.w3.org/1999/xhtml">
Ein Standarddokument muss die Strukturelemente head, title und
body aufweisen. Ein Frameset-Dokument muss die Strukturelemente
head, title und frameset aufweisen.
In Standarddokumente werden die Elemente
head, title und body
integriert. In Frameset-Dokumente werden die Elemente
head,
title und frameset integriert.
Alle Elemente des Dokuments müssen richtig ineinander
verschachtelt sein:
<p>So ist es <i>falsch.</p></i> <p>So ist es
<i>richtig.</i></p>
Erzeugt korrekt verschachtelten Code und korrigiert beim
Optimieren von XHTML falsch verschachtelten Code, der nicht mit
Dreamweaver erstellt wurde.
Alle Element- und Attributnamen müssen in Kleinbuchstaben
geschrieben sein.
Schreibt bei selbst erzeugtem und optimiertem XHTML-Code die
Namen von HTML-Elementen und -Attributen automatisch in
Kleinbuchstaben, unabhängig davon, welche Schreibweise Sie für
Tags und Attribute eingestellt haben.
Jedes Element muss ein schließendes Tag haben, sofern es in der DTD
nicht als EMPTY (leer) deklariert wurde.
Versieht selbst erzeugten und optimierten XHTML-Code mit
schließenden Tags.
Leere Elemente müssen ein schließendes Tag haben oder das
öffnende Tag muss mit
/> enden. Beispielsweise ist <br> ungültig.
Die korrekte Form lautet
<br></br> oder <br/>. Die folgenden
Elemente sind leer:
area, base, basefont, br, col, frame, hr, img,
input, isindex, link, meta und param.
Zur Gewährleistung der Abwärtskompatibilität mit nicht XML-
fähigen Browsern muss vor
/> ein Leerzeichen stehen (z. B. <br />,
nicht
<br/>).
Fügt bei selbst erzeugtem und optimiertem XHTML-Code ein
Leerzeichen vor dem Schluss-Schrägstrich von leeren Elementen ein.
Attribute dürfen nicht minimiert sein. Beispielsweise ist
<td nowrap> ungültig. Die korrekte Form lautet
<td nowrap="nowrap">.
Dies betrifft die folgenden Attribute:
checked, compact, declare,
defer, disabled, ismap, multiple, noresize, noshade,
nowrap, readonly und selected.
Versieht selbst erzeugten und optimierten XHTML-Code mit
vollwertigen Attribut-Wert-Paaren.
Hinweis: Wenn ein HTML-Browser HTML 4 nicht unterstützt, kann es
sein, dass er diese booleschen Attribute in ihrer vollwertigen Form
nicht interpretieren kann.
Alle Attributwerte müssen in Anführungszeichen stehen. Setzt Attributwerte bei selbst erzeugtem und optimiertem XHTML-
Code in Anführungszeichen.
Die folgenden Elemente müssen die Attribute
id und name
aufweisen:
a, applet, form, frame, iframe, img und map.
Beispielsweise ist
<a name="intro">Introduction</a>
ungültig. Die korrekte Form lautet
<a id="intro">Introduction</a> oder <a id="section1"
name="intro"> Introduction</a>
.
Stellt die Attribute
name und id auf den gleichen Wert ein, wenn das
Attribut
name von einem Eigenschafteninspektor festgelegt wurde.
Dies gilt für den von Dreamweaver erzeugten Code und beim
Optimieren von XHTML.
320
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Reguläre Ausdrücke
Reguläre Ausdrücke sind Muster, die bestimmte Zeichenkombinationen im Text beschreiben. Mit regulären
Ausdrücken können Sie bei der Codesuche bestimmte Konzepte definieren, beispielsweise Zeilen, die mit dem Wort
„var“ beginnen oder Attributwerte, die eine Zahl enthalten.
In der folgenden Tabelle werden die Sonderzeichen in regulären Ausdrücken mit den zugehörigen Bedeutungen
aufgelistet. Darüber hinaus enthält die Tabelle konkrete Beispiele. Wenn Sie eine Textzeichenfolge suchen möchten,
die eines der aufgelisteten Sonderzeichen enthält, stellen Sie dem Sonderzeichen einen Schrägstrich voran.
Angenommen, Sie möchten das Sternchen im folgenden Satz suchen:
Dabei gelten bestimmte Bedingungen*. In
diesem Fall könnte das Suchmuster folgendermaßen aussehen: Bedingungen\*. Wenn Sie dem Sternchen keinen
Schrägstrich voranstellen, werden alle Vorkommen von „Bedingungen“ im Text gefunden, nicht nur die, auf die ein
Sternchen folgt (außerdem werden die Begriffe „Bedingunge“, „Bedingungenn“ und „Bedingungennn“ gefunden).
Bei Attributen mit Werten eines Aufzählungstyps müssen die Werte in
Kleinbuchstaben geschrieben werden.
Ein Wert eines Aufzählungstyps ist ein Wert aus einer bestimmten
Liste von zulässigen Werten. So sind zum Beispiel beim Attribut
align folgende Werte zulässig: center, justify, left und right.
Schreibt bei selbst erzeugtem und optimiertem XHTML-Code die
Werte eines Aufzählungstyps automatisch in Kleinbuchstaben.
Alle Skript- und Stilelemente müssen das Attribut
type aufweisen.
(Das Attribut
type des Elements script ist seit der Einführung von
HTML 4 erforderlich, durch die das Attribut
language seine
Bedeutung verloren hat.)
Verwendet bei selbst erzeugtem Code und optimierten XHTML-Code
die Attribute
type und language in script-Elementen und das
Attribut
type in style-Elementen.
Alle img- und area-Elemente müssen das Attribut alt aufweisen. Fügt bei selbst erzeugtem Code diese Attribute hinzu und weist beim
Optimieren von XHTML-Code auf fehlende
alt-Attribute hin.
Zeichen Entsprechung Beispiel
^ Anfang der Eingabe oder Zeile ^T entspricht „T“ in „Tanzen und Singen“, jedoch nicht in
„Onkel Toms Hütte“.
$ Ende der Eingabe oder Zeile h$ entspricht „h“ in „Koch“, jedoch nicht in „kochen“.
* Das voranstehende Zeichen 0 Mal oder
mehrmals
um* entspricht „um“ in „Raum“, „umm“ in „summen“ und „u“
in „Kugel“.
+ Das voranstehende Zeichen 1 Mal oder
mehrmals
um+ entspricht „um“ in „Raum“ und „umm“ in „summen“,
jedoch keiner Zeichenfolge in „Kugel“.
? Das voranstehende Zeichen höchstens 1 Mal
(d. h., das voranstehende Zeichen ist optional)
bl?au entspricht „blau“ in „tiefblau“ und „bau“ in „vorbauen“,
jedoch keiner Zeichenfolge in „schlau“ oder „brauen“.
. Ein einziges Zeichen außer Zeilenvorschub .ar entspricht „tar“ und „rar“ im Satz „ein Star ist rar“.
x|y Entweder x oder y
FF0000|0000FF entspricht „FF0000“ in
bgcolor="#FF0000" und „0000FF“ in font
color="#0000FF"
.
{n} Genau n Vorkommen des voranstehenden
Zeichens
e{2} entspricht „ee“ in „leer“ und den beiden ersten „e“ in
„Seeelefant“, jedoch keiner Zeichenfolge in „Geld“.
{n,m} Mindestens n und höchstens m Vorkommen
des voranstehenden Zeichens
F{2,4} entspricht „FF“ in „#FF0000“ und den ersten vier „F“
in „#FFFFFF“.
XHTML-Anforderung Von Dreamweaver ausgeführte Aktionen
321
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Verwenden Sie Klammern, um Gruppen innerhalb des regulären Ausdrucks zu bilden und später aufzurufen.
Verwenden Sie anschließend im Feld „Ersetzen durch“ die Operatoren $1, $2, $3 usw., um auf die erste, zweite, dritte
usw. eingeklammerte Gruppe zu verweisen.
Note: Wenn Sie im Feld „Suchen nach“ auf eine eingeklammerte Gruppe an einer früheren Stelle im regulären Ausdruck
verweisen möchten, verwenden Sie statt $1, $2, $3 nun \1, \2, \3.
[abc] Beliebige der in Klammern eingeschlossenen
Zeichen. Verwenden Sie einen Bindestrich, um
einen Zeichenbereich anzugeben ([a-f]
entspricht beispielsweise [abcdef]).
[e-g] entspricht „e“ in „Bett“, „f“ in „Fluss“ und „g“ in „ganz“.
[^abc] Beliebige, nicht in den Klammern angegebene
Zeichen. Verwenden Sie einen Bindestrich, um
einen Zeichenbereich anzugeben ([^a-f]
entspricht beispielsweise [^abcdef]).
[^aeiou] entspricht „r“ in „orange“, „b“ in „buchen“ und „k“
in „ok!“.
\b Eine Wortabgrenzung (beispielsweise ein
Leerzeichen oder ein Zeilenumbruch)
\bb entspricht „b“ in „buchen“, jedoch keiner Zeichenfolge in
„Lorbeer“ oder „Snob“.
\B Alle Zeichen, ausgenommen
Wortabgrenzungen
\Bb entspricht „b“ in „Lorbeer“, jedoch keiner Zeichenfolge in
„buchen“.
\d Eine beliebige Ziffer. Entspricht [0-9]. \d entspricht „3“ in „C3PO“ und „2“ in „Apartment 2G“.
\D Ein beliebiges Zeichen, das keine Ziffer ist.
Entspricht [^0-9].
\D entspricht „S“ in „900S“ und „Q“ in „Q45“.
\f Formularvorschub
\n Zeilenvorschub
\r Zeilenumbruch
\s Ein beliebiges, einzelnes, nicht druckbares
Zeichen, beispielsweise Leerzeichen, Tabulator,
Seitenvorschub oder Zeilenvorschub
\sbook entspricht „buchen“ in „jetzt buchen“, jedoch keiner
Zeichenfolge in „verbuchen“.
\S Ein beliebiges einzelnes, druckbares Zeichen
\Sbook entspricht „buchen“ in „verbuchen“, keiner
Zeichenfolge in „jetzt buchen“.
\t Ein Tabulator
\w Ein beliebiges alphanumerisches Zeichen,
einschließlich Unterstrich. Entspricht [A-Za-z0-
9_].
b\w* entspricht „bellende“ in „der bellende Hund“ und
sowohl „bellende“ als auch „braune“ in „der bellende braune
Hund“.
\W Ein beliebiges Zeichen, nicht jedoch
alphanumerisch. Entspricht [^A-Za-z0-9_].
\W entspricht „&“ in „Hinz & Kunz“ und „%“ in „100 %“.
Strg+Eingabe oder
Umschalt+Eingabe
(Windows) bzw.
Ctrl+Return,
Umschalt+Return oder
Befehl+Return (Macintosh)
Absatzmarken. Stellen Sie sicher, dass Sie beim
Durchführen dieser Suche das Kontrollkästchen
„Unterschiede bei Leerraum ignorieren“
deaktivieren, wenn Sie keine regulären
Ausdrücke verwenden. Beachten Sie, dass dies
einem besonderen Zeichen und nicht einem
Zeilenumbruch entspricht. So entspricht es z. B.
nicht dem Tag
<br> oder dem Tag <p>.
Absatzmarken werden in der Entwurfsansicht
als Leerräume und nicht als Zeilenumbrüche
dargestellt.
Zeichen Entsprechung Beispiel
322
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Wenn Sie beispielsweise nach „(\d+)\/(\d+)\/(\d+)“ suchen und diese Zeichenfolge durch „$2/$1/$3“ ersetzen, werden
Datum und Monat in einem Datum vertauscht, das Schrägstriche enthält, um so das amerikanische Datumsformat in
das europäische Datumsformat umzuwandeln.
Code für Serververhalten
Wenn Sie eine dynamische Seite erstellen und im Bedienfeld „Serververhalten“ ein Serververhalten auswählen, fügt
Dreamweaver in die Seite Codeblöcke ein, um die Funktion des Serververhaltens zu ermöglichen.
Wenn Sie den Code in einem Codeblock manuell ändern, können Sie das Serververhalten nicht mehr mit
Bedienfeldern wie „Bindungen“ und „Serververhalten“ bearbeiten. Dreamweaver sucht im Seitencode nach
bestimmten Mustern, um Serververhalten zu erkennen und im Bedienfeld „Serververhalten“ anzuzeigen. Wenn der
Code in einem Codeblock auch nur geringfügig geändert wird, kann Dreamweaver das Serververhalten nicht mehr
erkennen und im Bedienfeld „Serververhalten“ anzeigen. Das Serververhalten ist jedoch weiterhin auf der Seite
vorhanden und kann in der Codeumgebung von Dreamweaver bearbeitet werden.
Codeumgebung einrichten
Programmiererfreundliche Arbeitsbereiche verwenden
Sie können die Codeumgebung in Dreamweaver an Ihre Arbeitsweise anpassen. So können Sie zum Beispiel die Art
der Codedarstellung ändern, verschiedene Tastaturbefehle festlegen oder Ihre bevorzugte Tag-Bibliothek importieren
und anwenden.
Dreamweaver enthält mehrere Arbeitsbereichlayouts, die für optimale Codeerstellung konzipiert sind. Über den
Arbeitsbereichumschalter auf der Anwendungsleiste haben Sie die Auswahl zwischen den Arbeitsbereichen
„Anwendungsentwickler“, „Anwendungsentwickler Plus“, „Coder“ und „Coder Plus“. In allen diesen
Arbeitsbereichen wird standardmäßig die Codeansicht (entweder im gesamten Dokumentfenster oder als geteilte
Ansicht) angezeigt. Die Bedienfelder sind auf der linken Seite angedockt. Mit Ausnahme von „Anwendungsentwickler
Plus“ wird in allen Arbeitsbereichen der Eigenschafteninspektor in der Standardansicht nicht angezeigt.
Wenn keiner der vorkonfigurierten Arbeitsbereiche Ihren Anforderungen entspricht, können Sie das
Arbeitsbereichlayout entsprechend anpassen. Öffnen Sie dazu Bedienfelder und docken Sie sie an der gewünschten
Position an. Speichern Sie dann den Arbeitsbereich als benutzerdefinierten Arbeitsbereich.
More Help topics
“Verwalten von Fenstern und Bedienfeldern” on page 25
“Speichern von und Wechseln zwischen Arbeitsbereichen” on page 30
“Tastaturbefehle anpassen” on page 36
“Verwalten von Tag-Bibliotheken” on page 370
Anzeigen von Code
Der Quellcode des aktuellen Dokuments kann auf unterschiedliche Weise angezeigt werden: Sie können ihn im
Dokumentfenster anzeigen, indem Sie die Codeansicht aktivieren, Sie können das Dokumentfenster teilen, sodass
sowohl die Seite als auch der zugehörige Code angezeigt werden oder Sie können im Codeinspektor, einem separaten
Codefenster, arbeiten. Er funktioniert genau wie die Codeansicht. Sie können ihn sich daher als ablösbare Codeansicht
für das aktuelle Dokument vorstellen.
323
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
More Help topics
“Codeformat ändern” on page 325
“Einstellungen für Codehinweise festlegen” on page 332
“Codefarben festlegen” on page 328
Code im Dokumentfenster anzeigen
❖ Wählen Sie „Ansicht“ > „Code“ aus.
Code- und Entwurfsansicht im Dokumentfenster gleichzeitig anzeigen
1 Wählen Sie „Ansicht“ > „Code und Entwurf“ aus.
Der Code erscheint im oberen Fensterbereich und der Seitenentwurf im unteren.
2 Wenn Sie die Entwurfsansicht im oberen Fensterbereich anzeigen möchten, wählen Sie in der Dokument-
Symbolleiste im Menü „Ansichtsoptionen“ die Option „Entwurfsansicht oben“ aus.
3 Wenn Sie die Größe der Fensterbereiche im Dokumentfenster ändern möchten, ziehen Sie die Trennleiste an die
gewünschte Position. Die Trennleiste befindet sich zwischen den beiden Fensterbereichen.
Die Codeansicht wird automatisch aktualisiert, wenn Sie in der Entwurfsansicht Änderungen vornehmen. Wenn Sie
jedoch in der Codeansicht Änderungen vorgenommen haben, müssen Sie das Dokument in der Entwurfsansicht
manuell aktualisieren, indem Sie auf die Entwurfsansicht klicken oder F5 drücken.
Code mit dem Codeinspektor in separatem Fenster anzeigen
Mit dem Codeinspektor können Sie genau wie in der Codeansicht in einem separaten Codefenster arbeiten.
❖ Wählen Sie „Fenster“ > „Codeinspektor“. Die Symbolleiste enthält die folgenden Optionen:
Dateiverwaltung stellt die Datei bereit bzw. ruft sie ab.
Vorschau/Debug im Browser zeigt eine Vorschau des Dokuments an bzw. dient zum Debuggen des Dokuments in
einem Browser.
Entwurfsansicht aktualisieren aktualisiert das Dokument in der Entwurfsansicht anhand der von Ihnen
vorgenommenen Codeänderungen. Am Code vorgenommene Änderungen werden nicht automatisch in der
Entwurfsansicht angezeigt, sondern erst dann, wenn Sie bestimmte Aktionen durchführen, z. B. die Datei speichern
oder auf diese Schaltfläche klicken.
Referenz öffnet das Bedienfeld „Referenz“. Weitere Informationen finden Sie unter “Referenzmaterial zu Sprachen
verwenden” on page 347.
Code-Navigation ermöglicht die schnelle Fortbewegung durch den Code. Weitere Informationen finden Sie unter “Zu
JavaScript- oder VBScript-Funktionen navigieren” on page 342.
Ansichtsoptionen dient zur Angabe, wie der Code angezeigt werden soll. Weitere Informationen finden Sie unter
“Erscheinungsbild des Codes festlegen” on page 324.
Wie Sie die an der linken Fensterseite befindliche Code-Symbolleiste verwenden, erfahren Sie unter “Code mit der
Code-Symbolleiste einfügen” on page 335.
324
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Anpassen von Tastaturbefehlen
In Dreamweaver können Sie Tastaturbefehle nach Ihren Wünschen definieren. Wenn Sie an bestimmte
Tastaturbefehle gewöhnt sind, beispielsweise an Umschalttaste+Eingabetaste zum Einfügen eines Zeilenumbruchs
oder Strg+G zum Wechseln zu einer bestimmten Position im Code, können Sie diese Befehle in Dreamweaver über
den Tastaturbefehl-Editor festlegen.
Anweisungen hierzu finden Sie unter “Tastaturbefehle anpassen” on page 36.
More Help topics
“Mit Codefragmenten arbeiten” on page 344
Dateien standardmäßig in der Codeansicht öffnen
Wenn Sie einen Dateityp öffnen, der normalerweise kein HTML enthält (z. B. eine JavaScript-Datei), wird diese Datei
in der Codeansicht (bzw. im Codeinspektor) und nicht in der Entwurfsansicht geöffnet. Sie können festlegen, welche
Dateitypen in der Codeansicht geöffnet werden.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Dateitypen/Editoren“.
3 Geben Sie im Feld „In Codeansicht öffnen“ die Erweiterungen der Dateitypen ein, die automatisch in der
Codeansicht geöffnet werden sollen.
Fügen Sie zwischen den einzelnen Dateinamenerweiterungen jeweils ein Leerzeichen ein. Sie können beliebig viele
Erweiterungen hinzufügen.
More Help topics
“Mit externen Editoren arbeiten” on page 329
“Validator-Voreinstellungen festlegen” on page 353
Festlegen von Codeeinstellungen
Voreinstellungen für Code
Sie können Codeeinstellungen Ihren Anforderungen entsprechend festlegen, z. B. Codeformatierung oder
Codeeinfärbung.
Note: Weitere Einstellungen können Sie im Tag-Bibliothek-Editor festlegen (siehe “Verwalten von Tag-Bibliotheken” on
page 370).
Erscheinungsbild des Codes festlegen
Über den Menübefehl „Ansicht“ > „Codeansichtsoptionen“ können Sie den Zeilenumbruch aktivieren,
Zeilennummern für den Code anzeigen, ungültigen Code markieren lassen, Code-Elemente anhand
syntaxspezifischer Farben hervorheben, Einzüge anwenden sowie versteckte Zeichen einblenden.
1 Zeigen Sie ein Dokument in der Codeansicht oder im Codeinspektor an.
325
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Ansicht“ > „Codeansichtsoptionen“ aus.
• Klicken Sie in der Codeansicht oder im Codeinspektor oben in der Symbolleiste auf die Schaltfläche
„Ansichtsoptionen“ .
3 Aktivieren oder deaktivieren Sie die folgenden Optionen:
Umbruch bricht den Code um, sodass Sie ihn ohne horizontalen Bildlauf vollständig sehen können. Diese Option fügt
keine echten Zeilenumbrüche ein. Sie sorgt lediglich dafür, dass der Code übersichtlicher angezeigt wird.
Zeilennummern zeigt neben dem Code Zeilennummern an.
Versteckte Zeichen zeigt nicht druckbare Sonderzeichen anstelle von Leerräumen an. Leerzeichen werden z. B. durch
einen Punkt repräsentiert, ein doppeltes Steuerzeichen ersetzt Tabulatoren und jeder Zeilenumbruch wird mit einer
Absatzmarke gekennzeichnet.
Note: Die in Dreamweaver für den Umbruch verwendeten Zeilenwechsel werden nicht durch eine Absatzmarke
gekennzeichnet.
Ungültigen Code hervorheben bewirkt, dass ungültiger HTML-Code in Dreamweaver gelb markiert wird. Wenn Sie
ein ungültiges Tag auswählen, werden im Eigenschafteninspektor Anweisungen zur Korrektur des Fehlers angezeigt.
Syntaxfarbcodierung aktiviert bzw. deaktiviert die farbige Codehervorhebung. Informationen zum Ändern des
Farbschemas finden Sie unter “Codefarben festlegen” on page 328.
Automatischer Einzug rückt den Code automatisch ein, wenn Sie bei der Codeeingabe die Eingabetaste drücken. Die
neue Codezeile wird auf die Stufe der vorherigen Zeile eingerückt. Informationen zum Ändern von Einzügen finden
Sie in den Ausführungen zur Option „Tabulatorgröße“ unter “Codeformat ändern” on page 325.
More Help topics
“Anzeigen von Code” on page 322
“Überblick über die Code-Symbolleiste” on page 13
“Einstellungen für Codehinweise festlegen” on page 332
Codeformat ändern
Sie können das Erscheinungsbild des Codes ändern, indem Sie Formateinstellungen wie Einzug, Zeilenlänge und
Groß- oder Kleinschreibung von Tag- und Attributnamen festlegen.
Alle Codeformatoptionen mit Ausnahme von „Schreibweise außer Kraft setzen von“ werden nur auf neue Dokumente
oder auf Ergänzungen zu Dokumenten automatisch angewendet, die Sie anschließend erstellen.
Wenn Sie vorhandene HTML-Dokumente neu formatieren möchten, öffnen Sie das gewünschte Dokument und
wählen Sie „Befehle“ > „Quellenformatierung übernehmen“.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus.
2 Wählen Sie links in der Kategorieliste die Option „Codeformat“.
3 Wählen Sie eine der folgenden Optionen:
Einzug gibt an, ob von Dreamweaver erstellter Code eingerückt werden soll (gemäß den Einzugsregeln, die in diesen
Voreinstellungen festgelegt sind).
326
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Note: Die meisten Einzugsoptionen in diesem Dialogfeld gelten nur für Code, der von Dreamweaver erstellt wurde, nicht
für Code, den Sie eingeben. Wenn jede von Ihnen eingegebene neue Codezeile auf die Stufe der vorherigen Zeile eingerückt
werden soll, wählen Sie „Ansicht“ > „Codeansichtsoptionen“ > „Automatischer Einzug“. Weitere Informationen hierzu
finden Sie unter “Erscheinungsbild des Codes festlegen” on page 324.
mit (Textfeld und Popupmenü) zeigt an, wie viele Leerzeichen oder Tabulatoren Dreamweaver zum Einrücken des
von ihm generierten Codes verwenden soll. Wenn Sie beispielsweise im Textfeld den Wert „3“ eingeben und
„Tabulatoren“ im Popupmenü wählen, wird der von Dreamweaver generierte Code für jede Einrückungsstufe um drei
Tabulatorzeichen eingerückt.
Tabulator-Schrittweite bestimmt, wie viele Zeichen ein Tabulatorzeichen in der Codeansicht umfasst. Ist die
„Tabulatorgröße“ z. B. auf „4“ eingestellt, dann wird jeder Tabulator in der Codeansicht als ein vier Zeichen breiter
Leerraum dargestellt. Ist darüber hinaus „Einzug mit“ auf „3“ eingestellt, wird der von Dreamweaver generierte Code
bei jeder Einrückungsstufe um drei Tabulatorzeichen eingerückt. In der Codeansicht wird folglich ein zwölf Zeichen
breiter Leerraum angezeigt.
Note: Die Einrückung erfolgt in Dreamweaver entweder mit Leerstellen oder mit Tabulatoren. Aufeinanderfolgende
Leerstellen werden beim Einfügen von Code nicht in einen Tabulator umgewandelt.
Zeilenumbruch-Typ definiert den Typ des Remote-Servers (Windows, Macintosh oder UNIX), der als Host für die
Remote-Site dient. Durch die Wahl der korrekten Steuerzeichenfolge für den Zeilenumbruch wird gewährleistet, dass
der HTML-Quellcode auf dem Remote-Server richtig angezeigt wird. Diese Einstellung bietet sich auch an, wenn Sie
mit einem externen Texteditor arbeiten, der nur bestimmte Zeilenumbrüche erkennt. Wenn Sie Notepad als externen
Editor verwenden, wählen Sie „CR LF (Windows)“, und wenn Sie SimpleText verwenden, wählen Sie „CR
(Macintosh)“.
Note: Bei Servern, auf die Sie über FTP zugreifen, bezieht sich diese Option nur auf den binären Übertragungsmodus.
Beim ASCII-Übertragungsmodus von Dreamweaver wird diese Option ignoriert. Wenn Sie Dateien im ASCII-Modus
herunterladen, fügt Dreamweaver die Zeilenumbrüche ein, die dem Betriebssystem Ihres Computers entsprechen. Beim
Hochladen von Dateien im ASCII-Modus werden alle Zeilenumbrüche auf „CR LF“ eingestellt.
Standardschreibweise für Tag-Namen und Standardschreibweise für Attributnamen legt die Groß- und
Kleinschreibung von Tag- und Attributnamen fest. Diese Optionen gelten für Tags und Attribute, die Sie in die
Entwurfsansicht einfügen oder dort bearbeiten, nicht jedoch für Tags und Attribute, die Sie direkt in der Codeansicht
eingeben. Die Optionen werden auch nicht beim Öffnen eines Dokuments auf die darin bereits enthaltenen Tags und
Attribute angewandt (es sei denn, Sie aktivieren mindestens eines der beiden Kontrollkästchen unter „Schreibweise
außer Kraft setzen von“).
Note: Diese Voreinstellungen gelten ausschließlich für HTML-Seiten. Dreamweaver ignoriert sie bei XHTML-Seiten, weil
Tags und Attribute in Großbuchstaben in XHTML ungültig sind.
Schreibweise außer Kraft setzen: Tags und Attribute gibt an, ob die festgelegte Schreibweise grundsätzlich
angewendet werden soll, unter anderem auch beim Öffnen eines bereits vorhandenen HTML-Dokuments. Wenn Sie
eines dieser Kontrollkästchen aktivieren und auf „OK“ klicken, um das Dialogfeld zu schließen, werden alle Tags oder
Attribute im aktuellen Dokument unmittelbar so geändert, dass sie der Einstellung für die Schreibweise entsprechen.
Auch die Tags oder Attribute in Dokumenten, die Sie zukünftig öffnen, werden angepasst (bis Sie das
Kontrollkästchen wieder deaktivieren). Die Tags oder Attribute, die Sie in der Codeansicht und im Quick Tag Editor
eingeben oder im Bedienfeld „Einfügen“ hinzufügen, werden ebenfalls an die gewählte Schreibweise angepasst. Wenn
Tag-Namen beispielsweise immer in Kleinbuchstaben umgewandelt werden sollen, legen Sie unter
„Standardschreibweise für Tags“ die Option „Kleinbuchstaben“ fest und aktivieren dann das Kontrollkästchen
„Schreibweise außer Kraft setzen: Tags“. Wenn Sie anschließend ein Dokument öffnen, das Tag-Namen in
Großbuchstaben enthält, werden diese von Dreamweaver in Kleinbuchstaben konvertiert.
327
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Note: In älteren HTML-Versionen waren Tag- und Attributnamen in Klein- und auch in Großbuchstaben zulässig, bei
XHTML sind für Tag- und Attributnamen jedoch Kleinbuchstaben erforderlich. Der Trend im Web geht zu XHTML,
daher ist es in der Regel am besten, Tag- und Attributnamen in Kleinbuchstaben zu verwenden.
TD-Tag: Keinen Umbruch im TD-Tag einschließen behebt ein Wiedergabeproblem, das bei einigen älteren Browsern
auftritt, wenn direkt nach dem Tag <td> bzw. direkt vor dem Tag </td> ein Leerraum oder Zeilenumbruch steht.
Wenn Sie diese Option aktivieren, fügt Dreamweaver nach einem <td>-Tag bzw. vor einem </td>-Tag keine
Zeilenumbrüche ein, selbst wenn dies gemäß den Formatierungsangaben in der Tag-Bibliothek erforderlich wäre.
Erweiterte Formatierung dient zum Festlegen von Formatierungsoptionen für CSS-Code (Cascading Style Sheets)
sowie für individuelle Tags und Attribute im Tag-Bibliothek-Editor.
White Space Character (Leerraumzeichen) (nur in der japanischen Version) ermöglicht die Auswahl von &nbsp; oder
Zenkaku-Leerzeichen für HTML-Code. Der in dieser Option ausgewählte Leerraum wird beim Erstellen von Tabellen
und wenn die Option „Mehrere aufeinanderfolgende Leerzeichen zulassen“ in Seiten mit dem Kodierungstyp
„Japanese“ aktiviert ist, für leere Tags verwendet.
More Help topics
“CSS-Code formatieren” on page 158
“Einstellungen für Codehinweise festlegen” on page 332
Einstellungen für das Umschreiben von Code festlegen
Mit den Voreinstellungen für die Codeumschreibung können Sie festlegen, wie und ob Ihr Code in Dreamweaver
verändert wird, wenn Dokumente geöffnet werden, wenn Formularelemente kopiert und eingefügt werden und wenn
Attributwerte und URLs mit Werkzeugen wie dem Eigenschafteninspektor eingegeben werden. Diese Einstellungen
haben keine Auswirkung auf das Bearbeiten von HTML oder Skripts in der Codeansicht.
Wenn Sie die Umschreibungsoptionen deaktivieren, werden im Dokumentfenster ungültige Elemente des HTML-
Codes angezeigt, die mit dieser Option umgeschrieben worden wären.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Codeumschreibung“.
3 Wählen Sie eine der folgenden Optionen:
Falsch verschachtelte und nicht geschlossene Tags reparieren schreibt überlappende Tags um. Beispielsweise wird
<b><i>Text</b></i> umgeschrieben in <b><i>Text</i></b>. Diese Option fügt auch fehlende schließende
Anführungszeichen und Schlussklammern ein.
Formularelemente beim Einfügen umbenennen gewährleistet, dass für Formularobjekte keine Namen doppelt
vergeben werden. Diese Option ist standardmäßig aktiviert.
Note: Im Unterschied zu den übrigen Optionen in diesem Voreinstellungen-Dialogfeld wird diese Option nicht
angewendet, wenn Sie ein Dokument öffnen, sondern nur wenn Sie ein Formularelement kopieren und einfügen.
Überzählige Schluss-Tags entfernen löscht schließende Tags, für die es keine entsprechenden öffnenden Tags gibt.
Beim Reparieren oder Entfernen von Tags Warnmeldung zeigen zeigt eine Zusammenfassung des technisch
ungültigen HTML-Codes an, für den Dreamweaver einen Korrekturversuch unternommen hat. Dabei wird die
Position des fehlerhaften Codes (Zeilen- und Spaltennummer) angegeben, sodass Sie die Korrektur überprüfen
können.
328
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Code niemals umschreiben: In Dateien mit den Erweiterungen verhindert, dass Dreamweaver den Code in Dateien
mit den angegebenen Dateierweiterungen umschreibt. Diese Option ist besonders hilfreich bei Dateien mit Tags von
Drittanbietern.
<, >, & und " in Attributwerten mit & kodieren stellt sicher, dass Attributwerte, die Sie mit Dreamweaver-Werkzeugen
wie dem Eigenschafteninspektor eingeben oder bearbeiten, nur zulässige Zeichen enthalten. Diese Option ist
standardmäßig aktiviert.
Note: Diese Option und die folgenden Optionen werden nicht auf URLs angewendet, die Sie in der Codeansicht eingeben.
Auch Code, der bereits in einer Datei vorhanden ist, wird dadurch nicht verändert.
Sonderzeichen nicht kodieren verhindert, dass URLs in Dreamweaver so verändert werden, dass nur zulässige
Zeichen enthalten sind. Diese Option ist standardmäßig aktiviert.
Sonderzeichen in URLs mit &# kodieren stellt sicher, dass URLs, die Sie mit Dreamweaver-Werkzeugen wie dem
Eigenschafteninspektor eingeben oder bearbeiten, nur zulässige Zeichen enthalten.
Sonderzeichen in URLs mit % kodieren hat die gleiche Wirkung wie die vorherige Option, allerdings wird hier ein
anderes Verfahren zum Kodieren von Sonderzeichen verwendet. Dieses Kodierungsverfahren (bei dem das
Prozentzeichen eingesetzt wird) bietet u. U. mehr Kompatibilität mit älteren Browsern. Zeichen aus bestimmten
Sprachen können mit dieser Methode jedoch weniger gut verarbeitet werden.
More Help topics
“Microsoft Word-HTML-Dateien optimieren” on page 79
“Einstellungen für Codehinweise festlegen” on page 332
Codefarben festlegen
Mit den Farbeinstellungen für Code können Sie Farben für allgemeine Kategorien von Tags und Code-Elementen wie
Formular-Tags oder JavaScript-Bezeichner festlegen. Wenn Sie für ein bestimmtes Tag eine andere Farbe einstellen
möchten, ändern Sie die Tag-Definition im Tag-Bibliothek-Editor entsprechend.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Farbe für Code“.
3 Wählen Sie in der Liste „Dokumenttyp“ einen Dokumenttyp aus. Alle Änderungen, die Sie an den Code-
Farbeinstellungen vornehmen, wirken sich auf alle Dokumente dieses Typs aus.
4 Klicken Sie auf die Schaltfläche „Farbschema bearbeiten“.
5 Wählen Sie im Dialogfeld „Farbschema bearbeiten“ in der Liste „Stile für“ ein Code-Element aus und legen Sie
Textfarbe, Hintergrundfarbe und (optional) Stil („Fett“, „Kursiv“ oder „Unterstrichen“) für dieses Code-Element
fest. Der Beispielcode im Vorschaufeld wird mit den neuen Farben und Stilen angezeigt.
Klicken Sie auf „OK“, um die Änderungen zu speichern, und schließen Sie das Dialogfeld „Farbschema bearbeiten“.
6 Wählen Sie die gewünschten Optionen in den Code-Farbeinstellungen aus und klicken Sie auf „OK“.
Standardhintergrund legt die Farbe des Standardhintergrunds für die Codeansicht und den Codeinspektor fest.
Versteckte Zeichen legt die Farbe für versteckte Zeichen fest.
Live-Code-Hintergrund legt die Hintergrundfarbe für die Live-Codeansicht fest. Die Standardfarbe ist gelb.
Live-Code-Änderungen legt die Markierungsfarbe des Codes fest, der sich in der Live-Codeansicht ändert. Die
Standardfarbe ist rosa.
329
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Schreibgeschützt-Hintergrund legt die Hintergrundfarbe für schreibgeschützten Text fest.
More Help topics
“Code-Farbeinstellungen für Vorlagen anpassen” on page 455
“Bibliotheken, Tags und Attribute bearbeiten” on page 371
“Vorschau von Live-Code” on page 313
“Einstellungen für Codehinweise festlegen” on page 332
Mit externen Editoren arbeiten
Sie können einen externen Editor angeben, mit dem Dateien mit bestimmten Dateierweiterungen bearbeitet werden.
Sie können beispielsweise einen Texteditor wie BBEdit, Notepad oder TextEdit von Dreamweaver aus aufrufen, um
JavaScript-(JS-)Dateien zu bearbeiten.
Sie können unterschiedlichen Dateierweiterungen unterschiedliche externe Editoren zuweisen.
More Help topics
“Dateien standardmäßig in der Codeansicht öffnen” on page 324
Externen Editor für einen Dateityp festlegen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus.
2 Wählen Sie links in der Kategorieliste die Option „Dateitypen/Editoren“ aus, stellen Sie die gewünschten Optionen
ein und klicken Sie auf „OK“.
In Codeansicht öffnen gibt die Dateierweiterungen an, die automatisch in der Codeansicht in Dreamweaver geöffnet
werden sollen.
Externer Codeeditor legt den zu verwendenden Texteditor fest.
Geänderte Dateien neu laden gibt an, wie Dreamweaver sich verhält, wenn festgestellt wird, dass an einem in
Dreamweaver geöffneten Dokument externe Änderungen vorgenommen wurden.
Beim Starten speichern
legt fest, ob Dreamweaver das aktuelle Dokument vor dem Starten des Editors immer oder nie
speichern soll oder ob Sie bei jedem Start des externen Editors gefragt werden, ob das Dokument gespeichert werden soll.
Fireworks dient zum Festlegen von Editoren für verschiedene Mediendateitypen.
Externe Codeeditoren aufrufen
❖ Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“.
330
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Schreiben und Bearbeiten von Code
Codehinweise
Codehinweise helfen Ihnen dabei, Code-Elemente schnell und fehlerfrei einzufügen und zu bearbeiten. Bei der
Eingabe von Zeichen in der Codeansicht wird eine Liste mit Optionen angezeigt, mit denen Ihre Eingabe automatisch
vervollständigt werden kann. Wenn Sie beispielsweise die ersten Zeichen eines Tags, Attributs oder CSS-
Eigenschaftsnamens eingeben, wird eine Liste mit Optionen angezeigt, die mit diesen Zeichen beginnen. Diese
Funktion erleichtert das Eingeben und Bearbeiten von Code. Mit dieser Funktion können Sie zudem anzeigen, welche
Attribute für bestimmte Tags, welche Parameter für bestimmte Funktionen oder welche Methoden für bestimmte
Objekte verfügbar sind.
Codehinweise stehen für verschiedene Arten von Code zur Verfügung. Beim Eingeben der ersten Zeichen eines
bestimmten Codetyps wird eine Liste der entsprechenden Optionen angezeigt. Wenn Sie beispielsweise eine Liste der
Codehinweise für HTML-Tags anzeigen möchten, geben Sie eine öffnende spitze Klammer (<) ein. Zum Anzeigen von
JavaScript-Codehinweisen geben Sie nach einem Objekt einen Punkt (Punkt-Operator) ein.
Die besten Ergebnisse – insbesondere bei Codehinweisen für Funktionen und Objekte – erzielen Sie, wenn Sie im
Dialogfeld mit den Voreinstellungen für Codehinweise die Option „Verzögerung“ auf 0 Sekunden setzen.
Die Funktion für Codehinweise erkennt zudem benutzerdefinierte, nicht integrierte JavaScript-Klassen. Sie können
diese benutzerdefinierten Klassen erstellen oder über Bibliotheken von Drittanbietern, z. B. Prototype, hinzufügen.
Die Liste der Codehinweise wird ausgeblendet, wenn Sie die Rücktaste (Windows) bzw. die Rückschritttaste
(Macintosh) drücken.
Ein Video-Tutorial zu Codehinweisen finden Sie unter www.adobe.com/go/lrvid4048_dw_de.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die JavaScript-Unterstützung in
Dreamweaver finden Sie unter www.adobe.com/go/dw10javascript_de.
Unterstützte Sprachen und Technologien
Dreamweaver unterstützt Codehinweise für die folgenden Sprachen und Technologien:
• Adobe ColdFusion
• Ajax
• ASP JavaScript
• ASP.NET C#
• ASP.NET VB
• ASP VBScript
• CSS2 und CSS3
• DOM (Document Object Model)
• HTML4 und HTML5
• jQuery (ab CS5.5)
• JavaScript (einschließlich Codehinweise für benutzerdefinierte Klassen)
• JSP
• PHP MySQL
• Spry
331
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Menü mit Codehinweisen anzeigen
Das Menü mit Codehinweisen wird bei der Eingabe in der Codeansicht automatisch angezeigt. Sie können das Menü
jedoch auch anzeigen, wenn Sie keine Eingabe vornehmen.
1 Setzen Sie die Einfügemarke in der Codeansicht („Fenster“ > „Code“) in ein Tag.
2 Drücken Sie Strg+Leertaste.
Code mithilfe von Codehinweisen in der Codeansicht einfügen
1 Geben Sie den Anfang eines Codeabschnitts ein. Wenn Sie beispielsweise ein Tag einfügen möchten, geben Sie eine
öffnende spitze Klammer (
<) ein. Setzen Sie zum Einfügen eines Attributs die Einfügemarke direkt hinter einen
Tag-Namen und drücken Sie die Leertaste.
Eine Liste mit Elementen (z. B. Tag-Namen oder Attributnamen) wird angezeigt.
Sie können die Liste jederzeit schließen, indem Sie die Esc-Taste drücken.
2 Durchlaufen Sie die Liste mit dem Rollbalken oder mit der Nach-oben- bzw. Nach-unten-Taste.
3 Wenn Sie ein Element aus der Liste einfügen möchten, doppelklicken Sie auf das Element oder wählen Sie es aus
und drücken Sie dann die Eingabetaste (Windows) bzw. Return (Macintosh).
Falls ein kürzlich erstellter CSS-Stil nicht in einer Codehinweisliste mit CSS-Stilen erscheint, wählen Sie aus der Liste
der Codehinweise die Option „Stil-Liste aktualisieren“. In der Entwurfsansicht wird nach dem Auswählen von „Stil-
Liste aktualisieren“ manchmal ungültiger Code angezeigt. Diesen ungültigen Code können Sie aus der Entwurfsansicht
entfernen, indem Sie nach dem Eingeben des Stils die Taste F5 zum Aktualisieren drücken.
4 Zum Einfügen eines schließenden Tags geben Sie </ (Schrägstrich) ein.
Note: Dreamweaver ermittelt standardmäßig, an welcher Stelle ein schließendes Tag erforderlich ist und fügt dieses Tag
automatisch ein. Sie können dieses Standardverhalten ändern, sodass Dreamweaver ein schließendes Tag einfügt,
nachdem Sie die schließende spitze Klammer (>) des öffnenden Tags eingegeben haben. Darüber hinaus können Sie das
Standardverhalten auch so festlegen, dass überhaupt kein schließendes Tag eingefügt wird. Wählen Sie „Bearbeiten“ >
„Voreinstellungen“ > „Codehinweise“ und anschließend eine der Optionen unter „Schließende Tags“ aus.
Tags mithilfe von Codehinweisen bearbeiten
• Wenn Sie ein Attribut durch ein anderes Attribut ersetzen möchten, löschen Sie das entsprechende Attribut und
den zugehörigen Wert. Fügen Sie dann entsprechend den zuvor beschriebenen Schritten ein neues Attribut mit
dem zugehörigen Wert ein.
• Wenn Sie einen Wert ändern möchten, löschen Sie den Wert und fügen Sie dann entsprechend der Beschreibung
im vorherigen Abschnitt einen Wert ein.
JavaScript-Codehinweise aktualisieren
Beim Bearbeiten von JavaScript-Dateien wird die Liste der verfügbaren Codehinweise in Dreamweaver automatisch
aktualisiert. Beispiel: Sie bearbeiten eine HTML-Datei und wechseln zu einer JavaScript-Datei, um eine Änderung
vorzunehmen. Diese Änderung ist in der Liste der Codehinweise aufgeführt, wenn Sie wieder zur HTML-Datei
wechseln. Die automatische Aktualisierung wird jedoch nur durchgeführt, wenn Sie die JavaScript-Dateien in
Dreamweaver bearbeiten.
Wenn Sie die JavaScript-Dateien außerhalb von Dreamweaver bearbeiten, drücken Sie Strg+Punkt (.), um die
JavaScript-Codehinweise zu aktualisieren.
332
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Codehinweise und Syntaxfehler
Die Funktion für Codehinweise wird möglicherweise nicht ordnungsgemäß ausgeführt, wenn Dreamweaver
Syntaxfehler im Code erkennt. Informationen zu Syntaxfehlern werden auf einer Statusleiste im oberen Bereich der
Seite angezeigt. Auf der Statusleiste für Syntaxfehler wird die erste Zeile des fehlerhaften Codes angezeigt. Nach der
Korrektur des Syntaxfehlers werden alle weiteren Fehler angezeigt, die an späterer Stelle im Code auftreten.
Die Nummern der Zeilen mit Syntaxfehlern sind zur besseren Erkennung zudem rot hervorgehoben. Die rote
Markierung wird in der Codeansicht der fehlerhaften Datei angezeigt.
In Dreamweaver werden neben den Syntaxfehlern der aktuellen Seite auch die Fehler auf den zugehörigen Seiten
angezeigt. Beispiel: Sie bearbeiten eine HTML-Seite mit einer integrierten JavaScript-Datei. Wenn die integrierte
JavaScript-Datei einen Fehler enthält, wird auch für diese Datei eine Fehlermeldung angezeigt. Sie können die
zugehörige fehlerhafte Datei öffnen, indem Sie oben im Dokument auf den Namen der Datei klicken.
Sie können die Statusleiste für Syntaxfehler deaktivieren, indem Sie auf der Code-Symbolleiste auf die Schaltfläche für
Syntaxfehlermeldungen klicken.
Einstellungen für Codehinweise festlegen
Sie können die Standardvoreinstellungen für Codehinweise ändern. Wenn beispielsweise keine Codehinweise für
CSS-Eigenschaftennamen oder Spry angezeigt werden sollen, können Sie sie in den Voreinstellungen für
Codehinweise deaktivieren. Sie können darüber hinaus Voreinstellungen für Verzögerungszeiten und schließende
Tags festlegen.
Selbst wenn die Codehinweise deaktiviert sind, können Sie in der Codeansicht ein Popupmenü mit Codehinweisen
einblenden, indem Sie Strg+Leertaste drücken.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus.
2 Wählen Sie links in der Kategorieliste die Option „Codehinweise“.
3 Wählen Sie eine der folgenden Optionen:
Schließende Tags ermöglicht die Angabe, wie Dreamweaver schließende Tags einfügen soll. Standardmäßig fügt
Dreamweaver das schließende Tag automatisch ein, nachdem Sie die folgenden Zeichen eingegeben haben:
</. Sie
können dieses Standardverhalten ändern, damit das schließende Tag nach der Eingabe der abschließenden spitzen
Klammer (>) des öffnenden Tags oder überhaupt kein schließendes Tag eingefügt wird.
Codehinweise aktivieren zeigt beim Eingeben von Code in der Codeansicht Codehinweise an. Stellen Sie mit dem
Schieberegler „Verzögerung“ die Wartezeit (in Sekunden) ein, nach der die entsprechenden Hinweise angezeigt
werden sollen.
Beschreibungs-QuickInfos aktivieren zeigt eine ausführliche Beschreibung (sofern verfügbar) für den ausgewählten
Codehinweis an.
Menüs ermöglicht die Angabe, welche Art von Codehinweisen beim Eingeben von Code angezeigt werden sollen.
Wählen Sie alle oder nur einige der Menüs aus.
More Help topics
“Menü mit Codehinweisen im Quick Tag Editor verwenden” on page 360
W3C Document Object Model
Tutorial zu Codehinweisen
333
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Site-spezifische Codehinweise
In Dreamweaver CS5 können Entwickler mithilfe von Joomla, Drupal, WordPress oder anderen Frameworks beim
Programmieren in der Codeansicht PHP-Codehinweise anzeigen. Um diese Codehinweise anzeigen zu können, müssen
Sie im Dialogfeld „Site-spezifische Code-Hinweise“ zunächst eine Konfigurationsdatei erstellen. Die
Konfigurationsdatei beschreibt, an welcher Stelle Dreamweaver die für Ihre Site spezifischen Codehinweise finden kann.
Ein Video-Tutorial zum Arbeiten mit sitespezifischen Codehinweisen finden Sie unter
www.adobe.com/go/learn_dw_comm13_de.
Konfigurationsdatei erstellen
Erstellen Sie im Dialogfeld „Site-spezifische Code-Hinweise“ die Konfigurationsdatei, die zum Anzeigen von
Codehinweisen in Dreamweaver erforderlich ist.
Die Konfigurationsdatei wird in Dreamweaver standardmäßig im Verzeichnis „Adobe Dreamweaver
CS5\configuration\Shared\Dinamico\Presets“ gespeichert.
Note: Die Codehinweise, die Sie erstellen, gelten speziell für die im Dreamweaver-Bedienfeld „Dateien“ ausgewählte Site.
Damit die Codehinweise angezeigt werden, muss sich die Seite, die Sie bearbeiten, in der aktuell ausgewählten Site
befinden.
1 Wählen Sie „Site“ > „Site-spezifische Code-Hinweise“ aus.
Die Funktion „Site-spezifische Code-Hinweise“ analysiert automatisch Ihre Site, um festzustellen, welches CMS-
Framework (Content Management System) Sie verwenden. Dreamweaver unterstützt standardmäßig die drei
Frameworks Drupal, Joomla und WordPress.
Über die vier Schaltflächen rechts neben dem Popupmenü „Struktur“ können Sie Framework-Strukturen
importieren, speichern, umbenennen oder löschen.
Note: Die vorhandenen Framework-Standardstrukturen können Sie nicht löschen oder umbenennen.
2 Geben Sie im Textfeld „Ordner im Stammordner“ den Ordner im Stammordner an, in dem Sie die Framework-
Dateien speichern. Sie können auf das Ordnersymbol neben dem Textfeld klicken, um zum Verzeichnis der
Framework-Dateien zu wechseln.
In Dreamweaver wird eine Dateistruktur der Ordner angezeigt, die Ihre Framework-Dateien enthalten. Wenn alle
Ordner und/oder Dateien, die Sie analysieren möchten, angezeigt werden, klicken Sie auf „OK“, um die Analyse
durchzuführen. Wenn Sie die Analyse anpassen möchten, fahren Sie mit den nächsten Schritten fort.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Dateien“, um eine Datei oder einen
Ordner auszuwählen, die bzw. den Sie der Analyse hinzufügen möchten. Im Dialogfeld „Datei/Ordner hinzufügen“
können Sie bestimmte Dateierweiterungen angeben, die in die Analyse einbezogen werden sollen.
Note: Durch die Angabe bestimmter Dateierweiterungen wird der Analysevorgang beschleunigt.
4 Wenn Sie Dateien aus der Analyse entfernen möchten, wählen Sie die entsprechenden Dateien aus und klicken Sie
dann auf die Schaltfläche mit dem Minuszeichen (-) über dem Fenster „Dateien“.
Note: Wenn Drupal oder Joomla als Framework verwendet werden, wird im Dialogfeld „Site-spezifische Code-
Hinweise“ ein zusätzlicher Pfad zu einer Datei in Ihrem Dreamweaver-Konfigurationsordner angezeigt. Löschen Sie
diese Datei nicht, sie ist bei Verwendung dieser Frameworks zwingend erforderlich.
5 Um festzulegen, wie eine bestimmte Datei oder ein bestimmter Ordner mithilfe der Funktion „Site-spezifische
Code-Hinweise“ verarbeitet wird, wählen Sie die Datei bzw. den Ordner in der Liste aus und führen Sie einen der
folgenden Schritte aus:
• Wählen Sie „Diesen Ordner analysieren“ aus, um den ausgewählten Ordner in die Analyse einzubeziehen.
334
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
• Wählen Sie „Rekursiv“ aus, um alle Dateien und Unterordner in einem ausgewählten Verzeichnis
einzubeziehen.
• Klicken Sie auf die Schaltfläche „Erweiterungen“, um das Dialogfeld „Erweiterung(en) suchen“ zu öffnen, in
dem Sie die Dateierweiterungen angeben können, die für eine bestimmte Datei oder einen bestimmten Ordner
in die Analyse einbezogen werden sollen.
Site-Struktur speichern
Sie können benutzerdefinierte Site-Strukturen im Dialogfeld „Site-spezifische Code-Hinweise“ speichern.
1 Erstellen Sie die gewünschte Struktur mit Dateien und Ordnern, indem Sie Dateien und Ordner nach Bedarf
hinzufügen und löschen.
2 Klicken Sie oben rechts im Dialogfeld auf die Schaltfläche „Struktur speichern“.
3 Geben Sie einen Namen für die Site-Struktur an und klicken Sie auf „Speichern“.
Note: Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben
oder zu bestätigen, dass Sie die Struktur mit dem gleichen Namen überschreiben möchten. Die Framework-
Standardstrukturen können jedoch nicht überschrieben werden.
Site-Strukturen umbenennen
Beachten Sie beim Umbenennen der Site-Struktur, dass Sie die Namen der drei Framework-Standardstrukturen sowie
das Wort „benutzerdefiniert“ nicht verwenden können.
1 Zeigen Sie die Struktur an, die Sie umbenennen möchten.
2 Klicken Sie auf die Symbolschaltfläche „Struktur umbenennen“ oben rechts im Dialogfeld.
3 Geben Sie einen neuen Namen für die Struktur an und klicken Sie auf „Umbenennen“.
Note: Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben
oder zu bestätigen, dass Sie die Struktur mit dem gleichen Namen überschreiben möchten. Die Framework-
Standardstrukturen können jedoch nicht überschrieben werden.
Einer Site-Struktur Dateien und Ordner hinzufügen
Sie können der Site-Struktur alle Dateien oder Ordner hinzufügen, die mit Ihrem Framework verknüpft sind.
Anschließend können Sie die Dateierweiterungen der Dateien angeben, die analysiert werden sollen. (Informationen
dazu finden Sie im nächsten Abschnitt.)
1 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Dateien“, um das Dialogfeld
„Datei/Ordner hinzufügen“ zu öffnen.
2 Geben Sie im Textfeld „Datei/Ordner hinzufügen“ den Pfad zu der Datei oder dem Ordner ein, die bzw. den Sie
hinzufügen möchten. Sie können auch auf das Ordnersymbol neben dem Textfeld klicken, um zu einer Datei oder
einem Ordner zu wechseln.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über dem Fenster „Erweiterungen“, um die
Dateierweiterungen der Dateien anzugeben, die analysiert werden sollen.
Note: Durch die Angabe bestimmter Dateierweiterungen wird der Analysevorgang beschleunigt.
4 Klicken Sie auf „Hinzufügen“.
335
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Site nach Dateierweiterungen durchsuchen
Im Dialogfeld „Erweiterung(en) suchen“ können Sie Dateierweiterungen anzeigen oder bearbeiten, die in die Site-
Struktur eingebunden sind.
1 Klicken Sie im Dialogfeld „Site-spezifische Code-Hinweise“ auf die Schaltfläche „Erweiterungen“.
Im Dialogfeld „Erweiterung(en) suchen“ sind die aktuellen durchsuchbaren Erweiterungen aufgeführt.
2 Wenn Sie der Liste eine andere Erweiterung hinzufügen möchten, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+) über dem Fenster „Erweiterungen“.
3 Zum Löschen einer Erweiterung in der Liste klicken Sie auf die Schaltfläche mit dem Minuszeichen (-).
Code mit der Code-Symbolleiste einfügen
1 Vergewissern Sie sich, dass die Codeansicht aktiviert ist („Ansicht“ > „Code“).
2 Platzieren Sie die Einfügemarke im Code oder wählen Sie einen Codeblock aus.
3 Klicken Sie in der Symbolleiste „Code“ auf eine Schaltfläche oder wählen Sie ein Element in einem Popupmenü der
Symbolleiste aus.
Um die Funktion der verschiedenen Schaltflächen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltfläche,
bis die zugehörige QuickInfo angezeigt wird. In der Standardeinstellung werden die folgenden Schaltflächen in der
Symbolleiste „Code“ angezeigt:
Geöffnete Dokumente listet die geöffneten Dokumente auf. Wenn Sie hier ein Dokument auswählen, wird es im
Dokumentfenster angezeigt.
Code-Navigator anzeigen zeigt den Code-Navigator an. Weitere Informationen finden Sie unter “Zu zugehörigem
Code navigieren” on page 341.
Vollständiges Tag ausblenden blendet den Inhalt zwischen einem öffnenden und dem zugehörigen schließenden Tag
aus (z. B. den Inhalt zwischen
<table> und </table>). Sie müssen die Einfügemarke in das öffnende oder
schließende Tag setzen und dann auf die Schaltfläche „Vollständiges Tag ausblenden“ klicken, um den Inhalt
auszublenden.
Sie können den Code außerhalb eines vollständigen Tags auch ausblenden, indem Sie eine Einfügemarke in ein
öffnendes oder schließendes Tag setzen und bei gedrückter Alt-Taste (Windows) bzw. der Wahltaste (Macintosh) auf
die Schaltfläche „Vollständiges Tag ausblenden“ klicken. Darüber hinaus können Sie das „intelligente Ausblenden“
aktivieren, damit Dreamweaver den außerhalb vollständiger Tags ausgeblendeten Inhalt nicht anpasst. Dazu klicken Sie
bei gedrückter Strg-Taste bzw. Ctrl auf diese Schaltfläche. Weitere Informationen über die Codeansicht finden Sie im
Abschnitt “Informationen zum Ausblenden von Code” on page 348.
Auswahl ausblenden blendet den ausgewählten Code aus.
Sie können den Code außerhalb einer Auswahl auch ausblenden, indem Sie bei gedrückter Alt-Taste (Windows) bzw.
Wahltaste (Macintosh) auf die Schaltfläche „Auswahl ausblenden“ klicken. Wenn Sie bei gedrückter Strg-Taste bzw.
Ctrl-Taste auf diese Schaltfläche klicken, können Sie ferner das „intelligente Ausblenden“ deaktivieren, sodass Sie genau
die Auswahl ausblenden, ohne dass diese von Dreamweaver manipuliert wird. Weitere Informationen über die
Codeansicht finden Sie im Abschnitt “Informationen zum Ausblenden von Code” on page 348.
Alles einblenden stellt den ausgeblendeten Code wieder her.
Übergeordnetes Tag auswählen wählt den Inhalt sowie die umgebenden öffnenden und schließenden Tags der Zeile
aus, in der sich die Einfügemarke befindet. Wenn Sie mehrmals auf diese Schaltfläche klicken und Ihre Tags paarweise
vorhanden sind, wählt Dreamweaver schließlich das äußerste Tag-Paar aus, also
html und /html.
336
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Klammern ausgleichen wählt den Inhalt sowie die umgebenden Klammern der Zeile aus, in der sich die Einfügmarke
befindet. Wenn Sie mehrmals auf diese Schaltfläche klicken und die umgebenden Symbole paarweise vorhanden sind,
wählt Dreamweaver schließlich das äußerste Klammerpaar im Dokument aus.
Zeilennummern ermöglicht das Ausblenden oder Anzeigen von Zeilennummern am Anfang jeder Codezeile.
Ungültigen Code hervorheben markiert ungültigen Code gelb.
Syntaxfehlermeldungen auf der Statusleiste aktiviert bzw. deaktiviert eine Statusleiste im oberen Bereich der Seite,
auf der Syntaxfehler angezeigt werden. Wenn in Dreamweaver ein Syntaxfehler erkannt wird, wird auf der Statusleiste
für Syntaxfehler die Codezeile mit dem Fehler angegeben. Darüber hinaus wird in der Codeansicht die Nummer der
Zeile mit dem Fehler im linken Bereich des Dokuments hervorgehoben. Die Statusleiste ist standardmäßig aktiviert,
wird jedoch nur angezeigt, wenn auf einer Seite Syntaxfehler ermittelt werden.
Kommentar anwenden umgibt den ausgewählten Code mit Tags oder öffnet ein neues Kommentar-Tag.
• Bei „HTML-Kommentar anwenden“ wird der ausgewählte Code mit den Tags <!-- und --> umschlossen. Wenn
kein Code ausgewählt ist, wird ein neues Tag geöffnet.
• „//-Kommentar anwenden“ fügt // am Anfang jeder Zeile des ausgewählten CSS- oder JavaScript-Codes hinzu
bzw. fügt ein einzelnes
//-Tag ein, wenn kein Code ausgewählt ist.
• „/* */-Kommentar anwenden“ umgibt den ausgewählten CSS- oder JavaScript-Code mit /* und */.
• „'-Kommentar anwenden“ ist für Visual Basic gedacht. Diese Option fügt ein Apostroph am Anfang jeder Visual
Basic-Skriptzeile oder, wenn kein Code ausgewählt ist, an der Einfügemarke ein.
• Wenn Sie an einer ASP-, ASP.NET-, JSP-, PHP- oder ColdFusion-Datei arbeiten und die Option
„Serverkommentar anwenden“ auswählen, ermittelt Dreamweaver das richtige Kommentar-Tag automatisch und
weist es der Auswahl zu.
Kommentar entfernen entfernt Kommentar-Tags aus dem ausgewählten Code. Bei einer Auswahl, die verschachtelte
Kommentare enthält, werden nur die äußeren Kommentar-Tags entfernt.
Tag um Objekt legen kapselt den ausgewählten Code mit dem im Quick Tag Editor ausgewählten Tag.
Zuletzt verwendete Codefragmente ermöglicht das Einfügen des zuletzt verwendeten Codefragments im Bedienfeld
„Codefragmente“. Weitere Informationen finden Sie im Abschnitt “Mit Codefragmenten arbeiten” on page 344.
CSS verschieben oder konvertieren ermöglicht die Übernahme von CSS an einer anderen Stelle bzw. die
Konvertierung von Inline-CSS in CSS-Regeln. Weitere Informationen finden Sie unter “CSS-Regeln
verschieben/exportieren” on page 155 und “Inline-CSS einer CSS-Regel hinzufügen” on page 157.
Code einrücken verschiebt die Auswahl nach rechts.
Code ausrücken verschiebt die Auswahl nach links.
Quellcode formatieren weist dem ausgewählten Code zuvor angegebene Codeformate zu. Wenn kein Code
ausgewählt ist, werden die Formate der gesamten Seite zugewiesen. Sie können Voreinstellungen für die
Codeformatierung im Handumdrehen festlegen, indem Sie über die Schaltfläche „Quellcode formatieren“ die Option
„Codeformateinstellungen“ auswählen, oder Tag-Bibliotheken bearbeiten, indem Sie auf „Tag-Bibliotheken
bearbeiten“ klicken.
Die Anzahl der in der Symbolleiste „Code“ verfügbaren Schaltflächen ist von der Größe der Codeansicht im
Dokumentfenster abhängig. Um alle verfügbaren Schaltflächen anzuzeigen, können Sie die Codeansicht vergrößern
oder auf den Erweiterungspfeil unten in der Symbolleiste „Code“ klicken.
Sie können die Symbolleiste „Code“ ferner bearbeiten, um weitere Schaltflächen anzuzeigen (z. B. „Umbruch“,
„Versteckte Zeichen“ und „Automatischer Einzug“) oder nicht verwendete Schaltflächen auszublenden. Dazu müssen
337
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Sie die XML-Datei bearbeiten, die die Symbolleiste generiert. jjj Weitere Informationen hierzu finden Sie im
Handbuch Erweitern von Dreamweaver.
Note: Sie können über das Menü „Ansicht“ auf die Option zum Anzeigen versteckter Zeichen zugreifen, die keine
Standardschaltfläche der Code-Symbolleiste ist („Ansicht“ > „Codeansichtsoptionen“ > „Versteckte Zeichen“).
More Help topics
“Überprüfen, ob Tags und Klammern paarweise vorhanden sind” on page 351
“Überblick über die Code-Symbolleiste” on page 13
“Symbolleisten anzeigen” on page 23
Code im Bedienfeld „Einfügen“ einfügen
1 Setzen Sie die Einfügemarke in den Code.
2 Wählen Sie im Bedienfeld „Einfügen“ die entsprechende Kategorie aus.
3 Klicken Sie im Bedienfeld „Einfügen“ auf eine Schaltfläche oder wählen Sie in einem Popupmenü des Bedienfelds
eine Option aus.
Wenn Sie auf ein Symbol klicken, wird der Code entweder sofort auf der Seite angezeigt oder Sie werden in einem
Dialogfeld dazu aufgefordert, weitere Informationen einzugeben, damit der Code vervollständigt werden kann.
Um die Funktion der verschiedenen Schaltflächen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltfläche,
bis die zugehörige QuickInfo angezeigt wird. Die Anzahl und Art der im Bedienfeld „Einfügen“ verfügbaren
Schaltflächen hängt vom aktuellen Dokumenttyp ab. Darüber hinaus spielt es eine Rolle, ob Sie in der Codeansicht
oder der Entwurfsansicht arbeiten.
Obwohl das Bedienfeld „Einfügen“ eine Sammlung häufig verwendeter Tags bietet, enthält diese Sammlung nicht alle
verfügbaren Tags. Eine umfangreichere Tag-Sammlung können Sie über die Tag-Auswahl aufrufen.
More Help topics
“Bedienfeld „Einfügen“ verwenden” on page 223
Tags über die Tag-Auswahl einfügen
Über die Tag-Auswahl können Sie beliebige Tags aus den Dreamweaver-Tag-Bibliotheken in eine Seite einfügen
(hierzu gehören auch die ColdFusion- und ASP.NET-Tag-Bibliotheken).
1 Setzen Sie die Einfügemarke an die gewünschte Position im Code. Klicken Sie dann mit der rechten Maustaste
(Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie „Tag einfügen“.
Die Tag-Auswahl wird eingeblendet. Der linke Bereich enthält eine Liste der unterstützten Tag-Bibliotheken, der
rechte Bereich zeigt die einzelnen Tags im ausgewählten Tag-Bibliothek-Ordner.
2 Wählen Sie in der Tag-Bibliothek eine Tag-Kategorie aus oder erweitern Sie die Kategorie und wählen Sie eine
Unterkategorie aus.
3 Wählen Sie im rechten Bereich ein Tag aus.
4 Wenn Sie in der Tag-Auswahl Informationen zur Syntax und Verwendung des Tags anzeigen möchten, klicken Sie
auf die Schaltfläche „Tag-Info“. Sofern Information über das Tag zur Verfügung stehen, werden sie angezeigt.
5 Wenn Sie dieselben Informationen über das Tag im Bedienfeld „Referenz“ anzeigen möchten, klicken Sie auf das
Symbol <?>. Sofern Information über das Tag zur Verfügung stehen, werden sie angezeigt.
338
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
6 Klicken Sie auf „Einfügen“, um das ausgewählte Tag in den Code einzufügen.
Bei Tags, die im rechten Bereich in spitzen Klammern angezeigt werden (z. B.
<title></title>), sind keine
zusätzlichen Informationen erforderlich. Sie werden unmittelbar an der Einfügemarke in das Dokument eingefügt.
Wenn für das Tag zusätzliche Informationen notwendig sind, wird ein Tag-Editor eingeblendet.
7 Wenn ein Tag-Editor geöffnet wird, geben Sie die zusätzlich erforderlichen Informationen ein und klicken Sie auf
„OK“.
8 Klicken Sie auf die Schaltfläche „Schließen“.
More Help topics
“Dreamweaver-Tag-Bibliotheken” on page 370
HTML-Kommentare einfügen
Ein Kommentar ist Text, den Sie als Beschreibung oder Zusatzinformation in HTML-Code einfügen. Die Kommentare
werden lediglich in der Codeansicht angezeigt und sind im Browser nicht sichtbar.
Kommentare an der Einfügemarke einfügen
❖ Wählen Sie „Einfügen“ > „Kommentar“.
In der Codeansicht wird ein Kommentar-Tag eingefügt und die Einfügemarke wird in die Mitte des Tags gesetzt.
Geben Sie Ihren Kommentar ein.
In der Entwurfsansicht wird das Dialogfeld „Kommentar“ angezeigt. Geben Sie Ihren Kommentar ein und klicken Sie
auf „OK“.
Kommentarmarkierungen in der Entwurfsansicht anzeigen
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
Achten Sie darauf, dass in den Voreinstellungen in der Kategorie „Unsichtbare Elemente“ die Option „Kommentare“
ausgewählt ist; andernfalls wird die Kommentarmarkierung nicht angezeigt.
Vorhandene Kommentare bearbeiten
• Suchen Sie den Kommentar in der Codeansicht und bearbeiten Sie den Kommentartext.
• Wählen Sie in der Entwurfsansicht die Kommentarmarkierung aus, bearbeiten Sie den Kommentartext im
Eigenschafteninspektor und klicken Sie dann im Dokumentfenster.
Code kopieren und einfügen
1 Kopieren Sie den Code in der Codeansicht oder in einer anderen Anwendung.
2 Setzen Sie die Einfügemarke in der Codeansicht an die gewünschte Stelle und wählen Sie „Bearbeiten“ >
„Einfügen“.
More Help topics
“Ausgeblendete Codefragmente einfügen und verschieben” on page 349
339
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Tags mit Tag-Editoren bearbeiten
Mit Tag-Editoren können Sie die Attribute eines Tags anzeigen, definieren und bearbeiten.
1 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf ein Tag in der
Codeansicht oder auf ein Objekt in der Entwurfsansicht und wählen Sie im Popupmenü die Option „Tag
bearbeiten“. (Der Inhalt dieses Dialogfelds hängt vom jeweils ausgewählten Tag ab.)
2 Definieren oder bearbeiten Sie Attribute für das Tag und klicken Sie auf „OK“.
Wenn Sie weitere Informationen über das Tag im Tag-Editor anzeigen möchten, klicken Sie auf „Tag-Info“.
Code über das Kontextmenü „Kodierung“ bearbeiten
1 Wählen Sie in der Codeansicht einen Codeabschnitt aus und klicken Sie mit der rechten Maustaste (Windows)
bzw. bei gedrückter Ctrl-Taste (Macintosh).
2 Wählen Sie im Untermenü „Auswahl“ beliebige der folgenden Optionen:
Auswahl ausblenden blendet den ausgewählten Code aus.
Alles außer Auswahl ausblenden blendet den gesamten Code mit Ausnahme des ausgewählten Codes aus.
Auswahl einblenden blendet das ausgewählte Codefragment ein.
Vollständiges Tag ausblenden blendet den Inhalt zwischen einem öffnenden und dem zugehörigen schließenden Tag
aus (z. B. den Inhalt zwischen
<table> und </table>).
Alles außer vollständigem Tag ausblenden blendet den Inhalt außerhalb eines öffnenden und des zugehörigen
schließenden Tags aus (z. B. den Inhalt außerhalb von
<table> und </table>).
Alles einblenden stellt den ausgeblendeten Code wieder her.
HTML-Kommentar anwenden umgibt den ausgewählten Code mit den Tags <!-- und --> umschlossen. Wenn kein
Code ausgewählt ist, wird ein neues Tag geöffnet.
/* */-Kommentar anwenden umgibt den ausgewählten CSS- oder JavaScript-Code mit /* und */.
//-Kommentar anwenden fügt // am Anfang jeder Zeile des ausgewählten CSS- oder JavaScript-Codes hinzu bzw.
fügt ein einzelnes
//-Tag ein, wenn kein Code ausgewählt ist.
'-Kommentar anwenden fügt ein Apostroph am Anfang jeder Visual Basic-Skriptzeile oder, wenn kein Code
ausgewählt ist, an der Einfügemarke ein.
Serverkommentar anwenden umgibt den ausgewählten Code mit entsprechenden Tags. Wenn Sie an einer ASP-,
ASP.NET-, JSP-, PHP- oder ColdFusion-Datei arbeiten und die Option „Serverkommentar anwenden“ auswählen,
ermittelt Dreamweaver das richtige Kommentar-Tag automatisch und weist es der Auswahl zu.
Hack mit Backslash und Kommentar anwenden umgibt den ausgewählten CSS-Code mit Kommentar-Tags, die
Internet Explorer 5 für Macintosh veranlassen, den Code zu ignorieren.
Caio-Hack anwenden umgibt den ausgewählten CSS-Code mit Kommentar-Tags, die Netscape Navigator 4
veranlassen, den Code zu ignorieren.
Kommentar entfernen entfernt Kommentar-Tags aus dem ausgewählten Code. Bei einer Auswahl, die verschachtelte
Kommentare enthält, werden nur die äußeren Kommentar-Tags entfernt.
Hack mit Backslash und Kommentar entfernen entfernt Kommentar-Tags aus dem ausgewählten CSS-Code. Bei einer
Auswahl, die verschachtelte Kommentare enthält, werden nur die äußeren Kommentar-Tags entfernt.
340
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Caio-Hack entfernen entfernt Kommentar-Tags aus dem ausgewählten CSS-Code. Bei einer Auswahl, die
verschachtelte Kommentare enthält, werden nur die äußeren Kommentar-Tags entfernt.
Tabulatoren in Leerzeichen konvertieren konvertiert jeden Tabulator innerhalb der Auswahl in eine Reihe von
Leerzeichen, wie in den Voreinstellungen in der Kategorie „Codeformat“ für die Einstellung „Tabulatorgröße“
angegeben. Weitere Informationen hierzu finden Sie unter “Codeformat ändern” on page 325.
Leerzeichen in Tabulatoren konvertieren konvertiert Leerzeichenfolgen innerhalb der Auswahl in Tabulatoren. Jede
Leerzeichenfolge, die aus so vielen Leerstellen besteht, wie als Tabulatorgröße definiert ist, wird in einen Tabulator
umgewandelt.
Einzug rückt die Auswahl nach rechts ein. Weitere Informationen finden Sie unter “Codeblöcke einrücken” on
page 340.
Negativeinzug verschiebt die Auswahl nach links.
Alle Tags entfernen entfernt alle Tags innerhalb der Auswahl.
Zeilen in Tabelle konvertieren umgibt die Auswahl mit einem table-Tag ohne Attribute.
Zeilenumbrüche hinzufügen fügt am Ende jeder Zeile der Auswahl ein br-Tag hinzu.
In Großschreibung konvertieren konvertiert alle Buchstaben innerhalb der Auswahl (einschließlich Tag- und
Attributnamen sowie Werte) in Großbuchstaben.
In Kleinschreibung konvertieren konvertiert alle Buchstaben innerhalb der Auswahl (einschließlich Tag- und
Attributnamen sowie Werte) in Kleinbuchstaben.
Tags in Großschreibung konvertieren konvertiert alle Tag- und Attributnamen sowie Attributwerte innerhalb der
Auswahl in Großbuchstaben.
Tags in Kleinschreibung konvertieren konvertiert alle Tag- und Attributnamen sowie Attributwerte innerhalb der
Auswahl in Kleinbuchstaben.
More Help topics
“Codefragmente aus- und einblenden” on page 348
Serversprachen-Tag mit dem Eigenschafteninspektor bearbeiten
Mit dem Eigenschafteninspektor für Code können Sie den Code in einem Serversprachen-Tag (beispielsweise in
einem ASP-Tag) bearbeiten, ohne in die Codeansicht wechseln zu müssen.
1 Wählen Sie in der Entwurfsansicht das Symbol für das Serversprachen-Tag aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Bearbeiten“.
3 Nehmen Sie die gewünschten Änderungen am Tag-Code vor und klicken Sie auf „OK“.
More Help topics
“Computer für die Entwicklung von Anwendungen einrichten” on page 575
Codeblöcke einrücken
Beim Schreiben und Bearbeiten von Code in der Codeansicht oder im Codeinspektor können Sie die Einrückungsstufe
eines ausgewählten Codeblocks oder einer Codezeile ändern und den Code so um einen Tabulator nach rechts oder
links verschieben.
341
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Ausgewählte Codeblöcke einrücken
• Drücken Sie die Tabulatortaste.
• Wählen Sie „Bearbeiten“ > „Code einrücken“.
Ausgewählte Codeblöcke ausrücken
• Drücken Sie Umschalt+Tab.
• Wählen Sie „Bearbeiten“ > „Code ausrücken“.
Zu zugehörigem Code navigieren
Im Code-Navigator wird eine Liste mit Codequellen für eine bestimmte Auswahl auf der Seite angezeigt. Mithilfe des
Code-Navigators können Sie zu zugehörigen Codequellen navigieren, beispielsweise zu internen und externen CSS-
Regeln, Server-Side Includes, externen JavaScript-Dateien, übergeordneten Vorlagendateien, Bibliotheksdateien und
iframe-Quelldateien. Wenn Sie auf einen Hyperlink im Code-Navigator klicken, wird die Datei mit dem
entsprechenden Codesegment geöffnet. Die Datei wird im Bereich für zugehörige Dateien angezeigt, wenn dieser
aktiviert ist. Wenn der Bereich für zugehörige Dateien nicht aktiviert ist, wird die ausgewählte Datei als gesondertes
Dokument im Dokumentfenster geöffnet.
Wenn Sie im Code-Navigator auf eine CSS-Regel klicken, wechseln Sie direkt zu dieser Regel. Wenn die Regel in die
Datei integriert ist, wird sie in der geteilten Ansicht angezeigt. Wenn es sich bei der Regel um eine externe CSS-Datei
handelt, wird die Datei geöffnet und die Regel im Bereich für zugehörige Dateien über dem Hauptdokument angezeigt.
Sie können den Code-Navigator in der Entwurfs-, Code- und geteilten Ansicht sowie über den Codeinspektor öffnen.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung des Code-Navigators
finden Sie unter www.adobe.com/go/dw10codenav_de.
Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehörigen Dateien und zum Code-Navigator finden
Sie unter www.adobe.com/go/lrvid4044_dw_de.
Code-Navigator öffnen
❖ Klicken Sie bei gedrückter Alt-Taste (Windows) oder bei der Tastenkombination Befehlstaste+Wahltaste
(Macintosh) auf eine Stelle auf der Seite. Im Code-Navigator werden Hyperlinks zum Code für den Bereich
angezeigt, auf den Sie geklickt haben.
Klicken Sie auf eine Stelle außerhalb des Code-Navigators, um diesen zu schließen.
Note: Sie können den Code-Navigator auch öffnen, indem Sie auf den entsprechenden Indikator klicken. Dieses
Anzeigeelement wird neben der Einfügemarke auf der Seite angezeigt, wenn das Mausgerät 2 Sekunden nicht verwendet wird.
Mithilfe des Code-Navigators zu Code navigieren
1 Öffnen Sie den Code-Navigator für den gewünschten Bereich auf der Seite.
2 Klicken Sie auf das entsprechende Codesegment.
Die zugehörigen Codequellen werden im Code-Navigator nach Dateien gruppiert und die Dateien sind in
alphabetischer Reihenfolge aufgeführt. Beispiel: CSS-Regeln in drei externen Dateien wirken sich auf die Auswahl in
Ihrem Dokument aus. In diesem Fall sind diese drei Dateien sowie die für die Auswahl relevanten CSS-Regeln im
Code-Navigator aufgeführt. Für CSS-Regeln, die sich auf eine bestimmte Auswahl beziehen, nimmt der Code-
Navigator die gleiche Funktion ein wie das Bedienfeld „CSS-Stile“ im Modus „Aktuell“.
342
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Wenn Sie den Mauszeiger über Hyperlinks zu CSS-Regeln bewegen, werden im Code-Navigator QuickInfos zu den
Eigenschaften der Regeln angezeigt. Diese QuickInfos sind nützlich bei der Unterscheidung mehrerer Regeln mit dem
gleichen Namen.
Anzeigeelement für den Code-Navigator deaktivieren
1 Öffnen Sie den Code-Navigator.
2 Aktivieren Sie in der unteren rechten Ecke die Option zum Deaktivieren des Indikators.
3 Klicken Sie auf eine Stelle außerhalb des Code-Navigators, um diesen zu schließen.
Um den Indikator für den Code-Navigator erneut zu aktivieren, klicken Sie bei gedrückter Alt-Taste (Windows) oder
bei gedrückter Tastenkombination Befehlstaste+Wahltaste (Macintosh) mit der linken Maustaste, um den Code-
Navigator zu öffnen. Heben Sie dann die Auswahl der Option zum Deaktivieren des Indikators auf.
More Help topics
“Zugehörige Dateien öffnen” on page 76
Tutorial zum Code-Navigator
Zu JavaScript- oder VBScript-Funktionen navigieren
Sie können in der Codeansicht und im Codeinspektor eine Liste aller im Code enthaltenen JavaScript- oder VBScript-
Funktionen anzeigen und zu einer beliebigen Funktion springen.
1 Zeigen Sie das Dokument in der Codeansicht („Ansicht“ > „Code“) oder im Codeinspektor („Fenster“ >
„Codeinspektor“) an.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in der Codeansicht mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh)
an einer beliebigen Stelle und wählen Sie das Untermenü „Funktionen“ im Kontextmenü aus.
Das Untermenü „Funktionen“ wird in der Entwurfsansicht nicht angezeigt.
Wenn der Code JavaScript- oder VBScript-Funktionen enthält, werden diese im Untermenü aufgeführt.
Um die Funktionen in alphabetischer Reihenfolge anzuzeigen, klicken Sie bei gedrückter Strg-Taste mit der rechten
Maustaste (Windows) bzw. bei gedrückter Tastenkombination Wahl+Ctrl (Macintosh) in der Codeansicht und
wählen Sie das Untermenü „Funktionen“.
• Klicken Sie im Codeinspektor in der Symbolleiste auf die Schaltfläche „Liste aller Funktionen“ ({ }).
3 Wählen Sie einen Funktionsnamen aus, um in Ihrem Code zu dieser Funktion zu springen.
JavaScript extrahieren
Mit dem JavaScript Extractor (JSE) wird der JavaScript-Code vollständig oder größtenteils aus einem Dreamweaver-
Dokument entfernt, in eine externe Datei exportiert sowie eine Verknüpfung zwischen der externen Datei und dem
Dokument erstellt. Mit dem JSE können zudem Event-Handler wie z. B.
onclick und onmouseover aus dem Code
entfernt werden. Anschließend kann der mit diesen Event-Handlern verknüpfte JavaScript-Code unauffällig an das
Dokument angefügt werden.
343
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Beachten Sie vor der Verwendung die folgenden Beschränkungen des JavaScript Extractor:
• Mit dem JSE werden keine Skript-Tags im Body-Bereich des Dokuments extrahiert (mit Ausnahme von Spry-
Widgets). Es ist möglich, dass das Externalisieren dieser Skript-Tags zu unerwarteten Ergebnissen führt.
Standardmäßig sind diese Skript-Tags in Dreamweaver im Dialogfeld „JavaScript externalisieren“ aufgeführt, sie
werden jedoch nicht zur Extraktion ausgewählt. (Bei Bedarf können Sie sie manuell auswählen.)
• Mit dem JSE wird JavaScript-Code nicht aus bearbeitbaren Bereichen von DWT-Dateien (Dreamweaver-
Vorlagendateien), aus nicht bearbeitbaren Bereichen von Vorlageninstanzen oder aus Dreamweaver-
Bibliothekselementen extrahiert.
• Nach dem Extrahieren von JavaScript über die Option „JavaScript externalisieren und als "unauffälliges
(unobtrusive) JavaScript" anfügen“ können Dreamweaver-Verhalten nicht mehr im Bedienfeld „Verhalten“
bearbeitet werden. Das Bedienfeld „Verhalten“ kann nicht überprüft und mit Verhalten gefüllt werden, die
unauffällig angefügt wurden.
• Nach dem Schließen der Seite können Sie Ihre Änderungen nicht mehr rückgängig machen. Sie können die
Änderungen jedoch während derselben Bearbeitungssitzung jederzeit rückgängig machen. Wählen Sie dazu
„Bearbeiten“ > „Rückgängig“ > „JavaScript externalisieren“ aus.
• Einige sehr komplexe Seiten werden möglicherweise nicht wie erwartet ausgeführt. Bedenken Sie dies beim
Extrahieren von JavaScript aus Seiten mit
document.write() im Body-Bereich und mit globalen Variablen.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die JavaScript-Unterstützung in
Dreamweaver finden Sie unter www.adobe.com/go/dw10javascript_de.
Verwenden des JavaScript Extractor:
1 Öffnen Sie eine Seite, die JavaScript-Code enthält (z. B. eine Spry-Seite).
2 Wählen Sie „Befehle“ > „JavaScript externalisieren“ aus.
3 Bearbeiten Sie im Dialogfeld „JavaScript externalisieren“ gegebenenfalls die Standardoptionen.
• Wählen Sie „Nur JavaScript externalisieren“ aus, wenn JavaScript in eine externe Datei verschoben und im
aktuellen Dokument auf diese Datei verwiesen werden soll. Mit dieser Option werden Event-Handler wie
onclick und onload im Dokument beibehalten und Verhalten im Bedienfeld „Verhalten“ bleiben sichtbar.
• Wählen Sie „JavaScript externalisieren und als "unauffälliges (unobtrusive) JavaScript" anfügen“ aus, wenn 1)
JavaScript in eine externe Datei verschoben und im aktuellen Dokument auf diese Datei verwiesen werden soll
und 2) Event-Handler aus dem HTML-Code entfernt und zur Laufzeit mithilfe von JavaScript eingefügt werden
sollen. Wenn Sie diese Option auswählen, können Sie im Bedienfeld „Verhalten“ keine Verhalten mehr
bearbeiten.
• Heben Sie in der Spalte „Bearbeiten“ die Auswahl der Änderungen auf, die Sie nicht vornehmen möchten, oder
wählen Sie Änderungen aus, die in Dreamweaver nicht standardmäßig ausgewählt sind.
In Dreamweaver sind standardmäßig die folgenden Änderungen aufgeführt, jedoch nicht ausgewählt:
• Skriptblöcke im Head-Tag des Dokuments mit Aufrufen von document.write() oder
document.writeln()
• Skriptblöcke im Head-Tag des Dokuments mit Funktionssignaturen für EOLAS-Verarbeitungscode, bei
dem in der Regel
document.write()-Aufrufe verwendet werden
• Skriptblöcke im Body-Tag des Dokuments – mit Ausnahme von Skriptblöcken, die nur Konstruktoren für
Spry-Widgets oder Spry-Datensätze enthalten
• In Dreamweaver werden Elementen, die über keine ID verfügen, automatisch IDs zugewiesen. Sie können diese
IDs im jeweiligen Textfeld „ID“ ändern.
344
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
4 Klicken Sie auf „OK“.
Im Dialogfeld „Zusammenfassung“ wird eine Übersicht über die Extraktionen angezeigt. Überprüfen Sie die
Extraktionen und klicken Sie dann auf „OK“.
5 Speichern Sie die Seite.
In Dreamweaver werden die Datei „SpryDOMUtils.js“ sowie eine weitere Datei erstellt, die den extrahierten
JavaScript-Code enthält. Die Datei „SpryDOMUtils.js“ wird im Ordner „SpryAssets“ in der Site gespeichert und die
zweite Datei auf der gleichen Ebene wie die Seite, aus der der JavaScript-Code extrahiert wurde. Denken Sie daran, dass
beim Hochladen der Ausgangsdatei auf den Webserver auch diese abhängigen Dateien hochgeladen werden müssen.
More Help topics
“Spry-Seiten visuell erstellen” on page 457
Mit Codefragmenten arbeiten
Mit Codefragmenten können Sie Inhalte speichern, um bei Bedarf schnell darauf zurückgreifen zu können. Sie können
HTML-, JavaScript-, CFML-, ASP-, PHP- und andere Codefragmente erstellen, einfügen, bearbeiten und löschen.
Außerdem können Sie Codefragmente verwalten und mit anderen Mitarbeitern austauschen. Es sind einige
vordefinierte Codefragmente verfügbar, die Sie als Ausgangsbasis verwenden können.
Codefragmente, die <font>-Tags und andere abgelöste Elemente und Attribute enthalten, befinden sich im Bedienfeld
„Codefragmente“ im Ordner „Legacy“.
Codefragmente einfügen
1 Setzen Sie die Einfügemarke an die Stelle, an der Sie das Codefragment einfügen möchten, oder wählen Sie den
Code, der von einem Codefragment umgeben werden soll.
2 Doppelklicken Sie im Bedienfeld „Codefragmente“ („Fenster“ > „Codefragmente“) auf das gewünschte
Codefragment.
Sie können auch mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das
Codefragment klicken und dann im Popupmenü den Befehl „Einfügen“ wählen.
Codefragmente erstellen
1 Klicken Sie unten im Bedienfeld „Codefragmente“ auf das Symbol „Neues Codefragment“.
2 Geben Sie einen Namen für das Codefragment ein.
Note: Codefragmentnamen dürfen keine Zeichen enthalten, die auch in Dateinamen ungültig wären, beispielsweise
Schrägstriche (/ oder \), Sonderzeichen und Anführungszeichen (").
3 (Optional) Geben Sie für das Codefragment eine Textbeschreibung ein. Dies erleichtert anderen Teammitgliedern
die Verwendung des Codefragments.
4 Wählen Sie unter „Codefragmenttyp“ die Option „Umbruch für Auswahl“ oder „Block einfügen“.
a Wenn Sie „Umbruch für Auswahl“ wählen, fügen Sie Code in die folgenden Textfelder ein:
Einfügen vor Geben oder fügen Sie den Code ein, der vor der aktuellen Auswahl eingefügt werden soll.
Einfügen nach Geben oder fügen Sie den Code ein, der nach der aktuellen Auswahl eingefügt werden soll.
Wenn Sie einen Standardabstand für die Blöcke festlegen möchten, verwenden Sie Zeilenumbrüche: Drücken Sie
innerhalb der Textfelder die Eingabetaste (Windows) bzw. Return (Macintosh).
345
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Note: Da Codefragmente als Anfangs- und Endblöcke erstellt werden können, ist es möglich, sie um andere Tags und
Inhalte zu legen. Dies ist besonders beim Einfügen von speziellen Formatierungen, Links, Navigationselementen und
Skriptblöcken von Vorteil. Heben Sie einfach den Inhalt hervor, um den Sie den Code legen möchten, und fügen Sie dann
das Codefragment ein.
b Wenn Sie „Block einfügen“ gewählt haben, geben oder fügen Sie den gewünschten Code ein.
5 (Optional) Wählen Sie einen „Vorschautyp“: „Code“ oder „Entwurf“.
Entwurf setzt den Code um und zeigt das Ergebnis im Vorschaubereich des Bedienfelds „Codefragmente“ an.
Code zeigt den Code im Vorschaubereich an.
6 Klicken Sie auf „OK“.
Codefragmente bearbeiten oder löschen
❖ Wählen Sie im Bedienfeld „Codefragmente“ ein Codefragment aus und klicken Sie unten im Bedienfeld auf die
Schaltfläche „Codefragment bearbeiten“ oder „Entfernen“.
Codefragment-Ordner erstellen und Codefragmente verwalten
1 Klicken Sie unten im Bedienfeld „Codefragmente“ auf die Schaltfläche „Neuer Codefragment-Ordner“.
2 Ziehen Sie Codefragmente nach Wunsch in den neuen Ordner oder in andere Ordner.
Tastaturbefehle für Codefragmente hinzufügen oder bearbeiten
1 Klicken Sie im Bedienfeld „Codefragmente“ mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste
(Macintosh) und wählen Sie „Tastenkombinationen bearbeiten“.
Der Editor für Tastaturbefehle wird geöffnet.
2 Wählen Sie im Popupmenü „Befehle“ die Option „Codefragmente“.
Daraufhin wird eine Liste mit Codefragmenten angezeigt.
3 Wählen Sie ein Codefragment aus und weisen Sie ihm einen Tastaturbefehl zu.
Weitere Informationen finden Sie unter “Tastaturbefehle anpassen” on page 36.
Codefragmente gemeinsam mit anderen Teammitgliedern nutzen
1 Suchen Sie die Datei zu dem Codefragment, das Sie gemeinsam mit anderen nutzen möchten, im Ordner
„Configuration/Snippets“ innerhalb des Anwendungsordners von Dreamweaver.
2 Kopieren Sie die Codefragment-Datei in einen freigegebenen Ordner auf Ihrem Einzelplatz- oder
Netzwerkcomputer.
3 Fordern Sie die anderen Teammitglieder auf, die Codefragment-Datei in ihren eigenen Ordner
„Configuration/Snippets“ zu kopieren.
Nach Tags, Attributen oder Text im Code suchen
Sie haben die Möglichkeit, nach bestimmten Tags, Attributen und Attributwerten zu suchen. Sie können
beispielsweise nach allen
img-Tags suchen, die nicht das Attribut alt aufweisen.
346
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Sie können auch nach bestimmten Textzeichenfolgen suchen, die sich innerhalb oder außerhalb von Container-Tags
befinden. Wenn Sie beispielsweise nach dem Wort
Unbenannt in einem title-Tag suchen, werden alle unbenannten
Seiten in der Site gefunden.
1 Öffnen Sie das Dokument, das durchsucht werden soll, oder wählen Sie im Bedienfeld „Dateien“ mehrere
Dokumente oder einen Ordner aus.
2 Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“.
3 Wählen Sie die Dateien, die durchsucht werden sollen, bestimmen Sie die Art der auszuführenden Suche und geben
Sie den gesuchten Text bzw. die gesuchten Tags an. Falls gewünscht, können Sie auch Ersatztext festlegen. Klicken
Sie dann auf eine der Suchen-Schaltflächen oder auf eine der Ersetzen-Schaltflächen.
4 Klicken Sie auf die Schaltfläche „Schließen“.
5 Um eine weitere Suche durchzuführen, ohne das Dialogfeld „Suchen und ersetzen“ anzuzeigen, drücken Sie F3
(Windows) bzw. die Tastenkombination Befehl+G (Macintosh).
More Help topics
“Reguläre Ausdrücke” on page 320
“Text suchen und ersetzen” on page 240
Suchmuster speichern und aufrufen
Sie können Suchmuster speichern und später erneut verwenden.
More Help topics
“Reguläre Ausdrücke” on page 320
“Text suchen und ersetzen” on page 240
Suchmuster speichern
1 Stellen Sie im Dialogfeld „Suchen und ersetzen“ („Bearbeiten“ > „Suchen und ersetzen“) die Suchparameter ein.
2 Klicken Sie auf die Schaltfläche „Abfrage speichern“ (das Diskettensymbol).
3 Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem Abfragen gespeichert werden sollen. Geben Sie
dann einen Dateinamen ein, um die Suche zu kennzeichnen, und klicken Sie auf „Speichern“.
Wenn Sie mit dem Suchmuster beispielsweise alle
img-Tags suchen, die nicht das Attribut alt enthalten, könnten Sie
als Dateinamen für die Abfrage „img_kein_alt.dwr“ eingeben.
Note: Gespeicherte Abfragen haben die Dateierweiterung .dwr. Einige gespeicherte Abfragen aus älteren Dreamweaver-
Versionen können auch die Erweiterung .dwq aufweisen.
Suchmuster aufrufen
1 Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“.
2 Klicken Sie auf das Symbol „Abfrage laden“ (das Ordnersymbol).
3 Wechseln Sie zu dem Ordner, in dem Ihre Abfragen gespeichert sind. Wählen Sie dann eine Abfragedatei aus und
klicken Sie auf „Öffnen“.
4 Klicken Sie auf „Weitersuchen“, „Alle suchen“, „Ersetzen“ oder „Alle ersetzen“, um mit der Suche zu beginnen.
347
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Referenzmaterial zu Sprachen verwenden
Im Bedienfeld „Referenz“ steht Ihnen eine Kurzreferenz für Markup-Sprachen, Programmiersprachen und CSS-Stile
zur Verfügung. Es bietet Informationen zu spezifischen Tags, Objekten und Stilen, mit denen Sie in der Codeansicht
(oder im Codeinspektor) arbeiten. Dieses Bedienfeld stellt des Weiteren Beispielcode bereit, den Sie in Ihre
Dokumente einfügen können.
Bedienfeld „Referenz“ öffnen
1 Führen Sie in der Codeansicht einen der folgenden Schritte durch:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf ein Tag, ein
Attribut oder ein Schlüsselwort und wählen Sie im Kontextmenü die Option „Referenz“.
• Setzen Sie die Einfügemarke in ein Tag, ein Attribut oder ein Schlüsselwort und drücken Sie die
Tastenkombination Umschalt+F1.
Das Bedienfeld „Referenz“ wird geöffnet und zeigt Informationen über das Tag, Attribut oder Schlüsselwort an, auf
das Sie geklickt haben.
2 Wenn Sie die Textgröße im Bedienfeld „Referenz“ ändern möchten, klicken Sie im Optionsmenü (das Sie durch
Klicken auf den kleinen Pfeil rechts oben im Bedienfeld öffnen) auf „Große Schrift“, „Mittlere Schrift“ oder „Kleine
Schrift“.
Beispielcode in ein Dokument einfügen
1 Klicken Sie im Bedienfeld „Referenz“ an einer beliebigen Stelle im Beispielcode.
Das gesamte Codebeispiel wird hervorgehoben.
2 Wählen Sie „Bearbeiten“ > „Kopieren“ und fügen Sie den Beispielcode in das Dokument in der Codeansicht ein.
Informationen im Bedienfeld „Referenz“ anzeigen
1 Wenn Sie Tags, Objekte oder Stile aus einem anderen Buch anzeigen möchten, wählen Sie ein Buch im Popupmenü
„Buch“ aus.
2 Um Informationen zu einem bestimmten Element anzuzeigen, wählen Sie dieses (je nach dem ausgewählten Buch)
im Popupmenü „Tag“, „Objekt“, „Stil“ oder „CFML“ aus.
3 Wenn Sie Informationen zu einem Attribut des ausgewählten Elements anzeigen möchten, wählen Sie das Attribut
im Popupmenü neben dem Popupmenü „Tag“, „Objekt“, „Stil“ oder „CFML“ aus.
Dieses Menü enthält die Liste der Attribute für das von Ihnen ausgewählte Element. Mit der Standardauswahl
„Beschreibung“ wird eine Beschreibung des ausgewählten Elements angezeigt.
348
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Code drucken
Sie können den Code drucken, um ihn offline zu bearbeiten, zu archivieren oder Dritten zur Verfügung zu stellen.
1 Öffnen Sie eine Seite in der Codeansicht.
2 Wählen Sie „Datei“ > „Code drucken“.
3 Geben Sie die Druckoptionen an und klicken Sie dann auf „OK“ (Windows) bzw. „Drucken“ (Macintosh).
Code ausblenden
Informationen zum Ausblenden von Code
Sie können Codefragmente aus- und einblenden, damit andere Bereiche des Dokuments sichtbar werden, ohne dass
Sie die Bildlaufleiste verwenden müssen. Wenn Sie z. B. alle CSS-Regeln im
head-Tag anzeigen möchten, die für ein
div-Tag weiter unten auf der Seite relevant sind, können Sie den gesamten Code zwischen dem head-Tag und dem
div-Tag ausblenden. Anschließend werden beide relevanten Codefragmente gleichzeitig auf dem Bildschirm
angezeigt. Codefragmente können zwar sowohl in der Entwurfsansicht als auch in der Codeansicht ausgewählt
werden, aber Sie können Code nur in der Codeansicht ausblenden.
Note: Aus Dreamweaver-Vorlagen erstellte Dateien werden mit vollständig eingeblendetem Code angezeigt, auch wenn
die Vorlagendatei (.dwt) ausgeblendete Codefragmente enthält
More Help topics
“Ausgeblendete Codefragmente einfügen und verschieben” on page 349
“Code mit der Code-Symbolleiste einfügen” on page 335
“Code optimieren” on page 350
Codefragmente aus- und einblenden
Wenn Sie Code auswählen, werden neben der Auswahl Ausblenden-Schaltflächen (Minussymbole unter Windows,
vertikale Dreiecke auf dem Macintosh) angezeigt. Klicken Sie auf die Schaltflächen, um die Auswahl aus- und wieder
einzublenden. Wenn der Code ausgeblendet ist, ändern sich die Ausblenden-Schaltflächen in Einblenden-
Schaltflächen (Plussymbole unter Windows, horizontale Dreiecke auf dem Macintosh).
Gelegentlich wird das Codefragment, das Sie ausgewählt haben, nicht genau in der gewünschten Weise ausgeblendet.
Das liegt daran, dass Dreamweaver beim Ausblenden von Code die „intelligente Ausblendung“ anwendet, die
praktische Aspekte mit einem visuell ansprechenden Erscheinungsbild kombiniert. Wenn Sie z. B. ein eingerücktes
Tag und die Leerzeichen vor dem Tag auswählen, blendet Dreamweaver die Leerzeichen nicht aus, da die meisten
Benutzer erwarten, dass die Einrückungen erhalten bleiben. Wenn Sie die intelligente Ausblendung deaktivieren und
Dreamweaver anweisen möchten, die von Ihnen vorgenommene Auswahl exakt auszublenden, drücken Sie die Strg-
Taste bzw. Ctrl, bevor Sie den Code ausblenden.
Bei ausgeblendeten Codefragmenten wird ein Warnsymbol angezeigt, wenn ein Fragment Fehler oder Code enthält,
der nicht von allen Browsern unterstützt wird.
Sie können den Code auch ausblenden, indem Sie bei gedrückter Alt-Taste (Windows) bzw. Wahltaste (Macintosh)
auf eine der Ausblenden-Schaltflächen klicken oder indem Sie in der Code-Symbolleiste auf die Schaltfläche „Auswahl
ausblenden“ klicken.
1 Wählen Sie Code aus.
349
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Wählen Sie „Bearbeiten“ > „Code ausblenden“ und wählen Sie eine der Optionen.
More Help topics
“Code über das Kontextmenü „Kodierung“ bearbeiten” on page 339
“Code mit der Code-Symbolleiste einfügen” on page 335
Ausgeblendete Codefragmente auswählen
❖ Klicken Sie in der Codeansicht auf das ausgeblendete Codefragment.
Note: Wenn Sie in der Entwurfsansicht eine Auswahl vornehmen, die ein ausgeblendetes Codefragment teilweise enthält,
wird das Fragment automatisch in der Codeansicht eingeblendet. Wenn Sie in der Entwurfsansicht eine Auswahl
vornehmen, die ein vollständiges Codefragment umfasst, bleibt das Fragment in der Codeansicht ausgeblendet.
Code in einem ausgeblendeten Codefragment anzeigen, ohne das Fragment einzublenden
❖ Bewegen Sie den Mauszeiger über das ausgeblendete Codefragment.
Code mit Tastaturbefehlen aus- und einblenden
❖ Sie können die folgenden Tastaturbefehle verwenden:
Ausgeblendete Codefragmente einfügen und verschieben
Sie haben die Möglichkeit, ausgeblendete Codefragmente zu kopieren und einzufügen bzw. durch Ziehen zu
verschieben.
More Help topics
“Code mit der Code-Symbolleiste einfügen” on page 335
“Code optimieren” on page 350
Ausgeblendete Codefragmente kopieren und einfügen
1 Wählen Sie das ausgeblendete Codefragment aus.
2 Wählen Sie „Bearbeiten“ > „Kopieren“.
3 Setzen Sie die Einfügemarke an die Stelle, an der der Code eingefügt werden soll.
4 Wählen Sie „Bearbeiten“ > „Einfügen“ aus.
Note: Beim Einfügen in andere Anwendungen bleibt das Codefragment nicht ausgeblendet.
Befehl Windows Macintosh
Auswahl ausblenden Strg+Umschalt+C Befehl+Umschalt+C
Alles außer Auswahl ausblenden Strg+Alt+C Befehl+Alt+C
Auswahl einblenden Strg+Umschalt+E Befehl+Umschalt+E
Vollständiges Tag ausblenden Strg+Umschalt+J Befehl+Umschalt+J
Alles außer vollständigem Tag ausblenden Strg+Alt+J Befehl+Alt+J
Alles einblenden Strg+Alt+E Befehl+Alt+E
350
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Ausgeblendete Codefragmente ziehen
1 Wählen Sie das ausgeblendete Codefragment aus.
2 Ziehen Sie die Auswahl an die neue Position.
Um eine Kopie der Auswahl zu ziehen, ziehen Sie sie bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Alt-
Taste (Macintosh)
Note: Sie können die Auswahl nicht in andere Dokumente ziehen.
Code optimieren und debuggen
Code optimieren
Sie können automatisch leere Tags entfernen, verschachtelte font-Tags kombinieren und unleserlichen oder
unübersichtlichen HTML- bzw. XHTML-Code besser strukturieren.
Wie Sie aus einem Microsoft Word-Dokument generierte HTML-Dokumente optimieren, erfahren Sie unter
“Vorhandene Dokumente öffnen und bearbeiten” on page 75.
1 Öffnen Sie ein Dokument.
• Wenn das Dokument im HTML-Code geschrieben ist, wählen Sie „Befehle“ > „HTML-Code optimieren“.
• Wenn das Dokument im XHTML-Code geschrieben ist, wählen Sie „Befehle“ > „XHTML-Code optimieren“.
Über HTML-Optimierungen hinaus werden bei einem XHTML-Dokument mit dem Befehl „XHTML-Code
optimieren“ XHTML-Syntaxfehler behoben, Großbuchstaben in Tag-Attributen durch Kleinbuchstaben ersetzt und
fehlende (erforderliche) Attribute eines Tags hinzugefügt bzw. gemeldet.
2 Aktivieren Sie im angezeigten Dialogfeld die gewünschten Optionen und klicken Sie auf „OK“.
Note: Dieser Vorgang kann mehrere Sekunden dauern, je nachdem, wie groß Ihr Dokument ist und wie viele Optionen
Sie ausgewählt haben.
Entfernen: Leere Container-Tags entfernt alle Tags, zwischen denen keine Inhalte stehen. Beispielsweise sind <b></b>
und
<font color="#FF0000"></font> leere Tags, das <b>-Tag in <b>Beispieltext</b> ist dagegen nicht leer.
Entfernen: Überflüssige verschachtelte Tags entfernt alle nicht benötigten Instanzen eines Tags. Beispielsweise sind in
dem Code
<b>Das wollte ich <b>wirklich</b> sagen</b> die b-Tags um das Wort wirklich überflüssig und
werden daher entfernt.
Entfernen: HTML-Kommentare, nicht Dreamweaver entfernt alle Kommentare, die nicht von Dreamweaver eingefügt
wurden. Zum Beispiel würde
<!--begin body text--> entfernt werden. Der Kommentar
<!--TemplateBeginEditable name="doctitle"--> aber nicht, da es sich hierbei um einen Dreamweaver-
Kommentar handelt, der den Anfang eines bearbeitbaren Bereichs in einer Vorlage markiert.
Entfernen: Spezielles Dreamweaver-Markup entfernt Kommentare, die Dreamweaver dem Code hinzufügt, damit
Dokumente bei der Aktualisierung von Vorlagen und Bibliothekselementen automatisch aktualisiert werden können.
Wenn Sie diese Option beim Optimieren von Code in einem Dokument aktivieren, das auf einer Vorlage basiert, wird
das Dokument von der Vorlage gelöst. Weitere Informationen finden Sie unter “Dokument von einer Vorlage lösen”
on page 450.
Entfernen: Spezifische(s) Tag(s) entfernt die Tags, die im angrenzenden Textfeld angegeben werden. Löschen Sie mit
dieser Option benutzerdefinierte Tags, die von anderen visuellen Editoren eingefügt wurden, und andere Tags, die
nicht in der Site erscheinen sollen (beispielsweise
blink). Mehrere Tags müssen durch Kommas voneinander getrennt
werden (z. B.
font,blink).
351
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Verschachtelte <font>-Tags, wenn möglich kombinieren vereinigt zwei oder mehr font-Tags, die denselben
Textbereich steuern. So würde beispielsweise
<font size="7"><font color="#FF0000">big
red</font></font> in <font size="7" color="#FF0000">big red</font> geändert.
Protokoll nach Abschluss zeigen zeigt abschließend ein Meldungsfeld an, in dem die Änderungen aufgeführt werden,
die bei der Optimierung am Dokument vorgenommen wurden.
More Help topics
“Codeformat ändern” on page 325
“Codefarben festlegen” on page 328
Überprüfen, ob Tags und Klammern paarweise vorhanden sind
Sie können überprüfen lassen, ob die Tags, Klammern ( ), geschweiften Klammern { \} und eckigen Klammern [ ] in
der Seite ausgeglichen sind. Ausgeglichenheit liegt vor, wenn Tags, Klammern, geschweifte und eckige Klammern
jeweils paarweise vorhanden sind.
Prüfen, ob Tags paarweise vorhanden sind
1 Öffnen Sie das Dokument in der Codeansicht.
2 Setzen Sie die Einfügemarke in den verschachtelten Code, den Sie prüfen möchten.
3 Wählen Sie „Bearbeiten“ > „Übergeordnetes Tag auswählen“.
Die den Abschnitt umgebenden Tag-Paare (und der zugehörige Inhalt) werden im Code ausgewählt. Wenn Sie den
Befehl „Bearbeiten“ > „Übergeordnetes Tag auswählen“ mehrmals ausführen und Ihre Tags paarweise vorhanden
sind, wählt Dreamweaver schließlich das äußerste Tag-Paar aus, also
html und /html.
Prüfen, ob Klammern, geschweifte Klammern und eckige Klammern paarweise vorhanden
sind
1 Öffnen Sie das Dokument in der Codeansicht.
2 Setzen Sie die Einfügemarke in den Code, den Sie prüfen möchten.
3 Wählen Sie „Bearbeiten“ > „Fehlende Klammern einfügen“.
Der gesamte Code zwischen den umgebenden Klammern, geschweiften Klammern bzw. eckigen Klammern wird
ausgewählt. Wenn Sie erneut „Bearbeiten“ > „Fehlende Klammern einfügen“ wählen, wird der gesamte Code
innerhalb der Klammern, geschweiften Klammern bzw. eckigen Klammern ausgewählt, die die neue Auswahl
umgeben.
Browserkompatibilität überprüfen
Mithilfe der Funktionen für die Browserkompatibilitätsprüfung können Sie Kombinationen von HTML und CSS
aufspüren, die Browserfehler auslösen können. Darüber hinaus testet diese Funktion den Code Ihrer Dokumente auf
sämtliche CSS-Eigenschaften oder -Werte, die von den Zielbrowsern nicht unterstützt werden.
Note: Diese Funktion ersetzt die frühere Funktion „Zielbrowser-Prüfung“, bietet aber weiterhin deren CSS-
Funktionalität.
More Help topics
“Browserübergreifende Probleme bei der CSS-Wiedergabe überprüfen” on page 161
352
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
XML-Dokumente überprüfen
Sie können für den Validator Voreinstellungen festlegen, spezifische zu überprüfende Probleme vorgeben und die
Fehlertypen auswählen, die im Überprüfungsbericht ausgegeben werden sollen.
1 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie bei einer XML- oder XHTML-Datei den Befehl „Datei“ > „Überprüfen“ > „Als XML“ aus.
• Im Bedienfeld „Ergebnisse“ wird auf der Registerkarte „Überprüfung“ entweder „Keine Fehler oder Warnungen
gefunden“ gemeldet oder es werden die gefundenen Syntaxfehler aufgelistet.
2 Doppelklicken Sie auf eine Fehlermeldung, um den zugehörigen Fehler im Dokument hervorzuheben.
3 Wenn Sie den Bericht als XML-Datei speichern möchten, klicken Sie auf die Schaltfläche „Bericht speichern“.
4 Wenn Sie den Bericht in Ihrem Primärbrowser anzeigen möchten (von dem aus Sie den Bericht drucken können),
klicken Sie auf die Schaltfläche „Bericht durchsuchen“.
Dokumente mit der W3C-Überprüfung überprüfen (CS 5.5)
In Dreamweaver können Sie seit der Version CS5.5 durch die integrierte Unterstützung der W3C-Überprüfung
standardkonforme Webseiten erstellen. Mit der W3C-Überprüfung werden Ihre HTML-Dokumente auf die
Konformität mit HTML- oder XHTML-Standards überprüft. Sie können sowohl geöffnete Dokumente als auch auf
einem Live-Server bereitgestellte Dateien überprüfen.
Mithilfe des Berichts, der nach der Überprüfung erstellt wird, können Sie Fehler in Ihrer Datei beheben.
Note: Das Leistungsmerkmal „W3C-Überprüfung“ ist in Dreamweaver erst seit der Version CS5.5 verfügbar. Die frühere,
noch in CS4 verfügbare Version des Leistungsmerkmals war inzwischen veraltet. Weitere Informationen über die frühere
Version dieses Leistungsmerkmals finden Sie in der Dreamweaver CS4-Dokumentation.
Geöffnete Dokumente überprüfen
1 Wählen Sie „Fenster“ > „Ergebnisse“ > „W3C-Überprüfung“ aus.
2 Wählen Sie „Datei“ > „Überprüfen“ > „Aktuelles Dokument überprüfen (W3C)“ aus.
Live-Dokumente überprüfen
Bei Live-Dokumenten wird der vom Browser empfangene Code überprüft. Dieser Code wird angezeigt, wenn Sie im
Browser mit der rechten Maustaste klicken und dann die Option zum Anzeigen des Quellcodes auswählen. Die
Überprüfung von Live-Dokumenten empfiehlt sich vor allem bei dynamischen Seiten mit PHP, JSP usw.
Die Option „Live-Dokument überprüfen“ ist nur aktiviert, wenn die URL der zu überprüfenden Seite mit http beginnt.
1 Wählen Sie „Fenster“ > „Ergebnisse“ > „W3C-Überprüfung“ aus.
2 Klicken Sie auf „Live-Ansicht“.
3 Wählen Sie „Datei“ > „Überprüfen“ > „Live-Dokument überprüfen (W3C)“ aus.
Wenn Sie bei Live-Dokumenten im Bedienfeld „W3C-Überprüfung“ auf einen Fehler doppelklicken, wird ein
separates Fenster geöffnet. In diesem Fenster wird der vom Browser generierte Code angezeigt und die Zeile mit dem
Fehler wird hervorgehoben.
Einstellungen für die Überprüfung anpassen
1 Wählen Sie „Fenster“ > „Ergebnisse“ > „W3C-Überprüfung“ aus.
353
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Klicken Sie im Bedienfeld „W3C-Überprüfung“ auf das Symbol für die W3C-Überprüfung (Wiedergabesymbol).
Wählen Sie „Einstellungen“ aus.
3 Wählen Sie einen Dokumenttyp für die Überprüfung aus, wenn für das Dokument nicht ausdrücklich ein
Dokumenttyp festgelegt wurde.
4 Wenn Fehler und Warnungen nicht angezeigt werden sollen, deaktivieren Sie die entsprechenden Optionen.
5 Klicken Sie auf „Verwalten“, wenn Warnungen oder Fehler, die Sie in der W3C-Überprüfung ausgeblendet haben,
gelöscht werden sollen. Wenn Sie Warnungen und Fehler entfernen, werden diese bei Auswahl von „Alles
anzeigen“ im Bedienfeld „W3C-Überprüfung“ nicht angezeigt.
6 Wählen Sie „Dialogfeld zur Benachrichtigung für die W3C-Überprüfung nicht anzeigen“ aus, wenn das Dialogfeld
zur Benachrichtigung für die W3C-Überprüfung beim Starten der Überprüfung nicht angezeigt werden soll.
Überprüfungsberichte verwenden
Nach Abschluss der Überprüfung werden die Überprüfungsberichte im Bedienfeld „W3C-Überprüfung“ angezeigt.
• Wenn Sie weitere Informationen zu einem Fehler oder einer Warnung anzeigen möchten, markieren Sie den Fehler
bzw. die Warnung im Bedienfeld „W3C-Überprüfung“. Klicken Sie dann auf „Weitere Informationen“.
• Wenn Sie den Bericht als XML-Datei speichern möchten, klicken Sie auf „Bericht speichern“.
• Wenn Sie den gesamten Bericht im HTML-Format anzeigen möchten, klicken Sie auf „Bericht durchsuchen“. Im
HTML-Bericht sind die vollständige Liste der Fehler und Warnungen sowie eine Zusammenfassung aufgeführt.
• Um zu dem Codeabschnitt mit dem Fehler zu springen, markieren Sie den Fehler im Bedienfeld „W3C-
Überprüfung“. Klicken Sie auf die Schaltfläche „Optionen“ und wählen Sie „Gehe zu Zeile“ aus.
•
Wenn Sie Fehler oder Warnungen ausblenden möchten, wählen Sie den entsprechenden Fehler oder die betreffende
Warnung aus. Klicken Sie auf die Schaltfläche „Optionen“ und wählen Sie dann „Fehler ausblenden“ aus.
• Wenn alle Fehler und Warnungen, einschließlich der ausgeblendeten Fehler und Warnungen angezeigt werden
sollen, klicken Sie auf die Schaltfläche „Optionen“. Wählen Sie dann „Alles anzeigen“ aus. Alle ausgeblendeten
Fehler und Warnungen, die Sie im Dialogfeld „Voreinstellungen“ gelöscht haben, werden nicht angezeigt.
• Klicken Sie zum Löschen aller Ergebnisse im Bedienfeld „W3C-Überprüfung“ auf die Schaltfläche „Optionen“.
Wählen Sie dann „Ergebnisse löschen“ aus.
Validator-Voreinstellungen festlegen
Die Funktion „Tags überprüfen“ ist ab Dreamweaver CS5 veraltet. Dreamweaver unterstützt jedoch weiterhin externe
Codeüberprüfungsprogramme, die als Erweiterungen installiert sind. Wenn Sie eine externe Validator-Erweiterung
installieren, werden ihre Einstellungen in Dreamweaver in der Kategorie „Validator“ des Dialogfelds
„Voreinstellungen“ aufgeführt.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Validator“.
3 Wählen Sie die Tag-Bibliotheken aus, die für die Überprüfung herangezogen werden sollen.
Es ist nicht möglich, mehrere Versionen derselben Tag-Bibliothek oder Sprache auszuwählen. Wenn Sie also z. B.
HTML 4.0 wählen, können Sie nicht auch HTML 3.2 oder HTML 2.0 wählen. Wählen Sie die früheste Version aus, die
für die Überprüfung herangezogen werden soll. Enthält ein Dokument beispielsweise gültigen HTML 2.0-Code,
handelt es sich dabei auch um gültigen HTML 4.0-Code.
4 Klicken Sie auf „Optionen“, um Optionen für diese Bibliotheken einzustellen.
354
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
5 Wählen Sie Anzeigeoptionen für die Arten von Fehlern und Warnungen, die im Validator-Bericht aufgeführt
werden sollen.
6 Wählen Sie die Elemente aus, nach denen der Validator suchen soll.
Anführungszeichen im Text gibt an, dass Dreamweaver bei jeder Verwendung von Anführungszeichen im Text des
Dokuments eine Warnmeldung anzeigen soll. Sie müssen im Text von HTML-Dokumenten statt Anführungszeichen
die Entität &quot; verwenden.
Entitäten im Text gibt an, dass Dreamweaver empfehlen soll, bestimmte Zeichen, z. B. Et-Zeichen (&), kleiner als (<)
und größer als (>), in die entsprechenden HTML-Entitäten zu ändern.
7 Klicken Sie auf „OK“, um das Dialogfeld „Validator-Optionen“ zu schließen. Klicken Sie dann erneut auf „OK“,
um die Voreinstellungen festzulegen.
Seiten mit XHTML kompatibel machen
Wenn Sie eine Seite erstellen, können Sie diese XHTML-kompatibel machen. Es ist auch möglich, ein vorhandenes
HTML-Dokument XHTML-kompatibel zu machen.
More Help topics
“XHTML-Code” on page 318
XHTML-kompatible Dokumente erstellen
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie die Kategorie und den Typ der zu erstellenden Seite aus.
3 Wählen Sie ganz rechts im Dialogfeld im DocType-Popupmenü eine der XHTML-DTDs
(Dokumenttypdefinitionen) aus und klicken Sie auf „Erstellen“.
Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie „XHTML 1.0 Transitional“
oder „XHTML 1.0 Strict“ im Popupmenü auswählen.
Note: Nicht alle Dokumenttypen können XHTML-kompatibel gemacht werden.
Standardmäßig XHTML-kompatible Dokumente erstellen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac OS X) und
wählen Sie die Kategorie „Neues Dokument“.
2 Wählen Sie ein Standarddokument aus und dann im Popupmenü „Standard-Dokumenttyp (DDT)“ eine der
XHTML-DTDs (Dokumenttypdefinitionen) aus. Klicken Sie auf „OK“.
Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie „XHTML 1.0 Transitional“
oder „XHTML 1.0 Strict“ im Popupmenü auswählen.
Vorhandene HTML-Dokumente XHTML-kompatibel machen
1 Öffnen Sie ein Dokument und führen Sie einen der folgenden Schritte aus:
• Wählen Sie für ein Dokument ohne Frames „Datei“ > „Konvertieren“ und anschließend eine der XHTML-
Dokumenttypdefinitionen aus.
Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie „XHTML 1.0
Transitional“ oder „XHTML 1.0 Strict“ im Popupmenü auswählen.
355
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
• Wählen Sie für ein Dokument mit Frames einen Frame aus. Wählen Sie dann „Datei“ > „Konvertieren“ und
anschließend eine der XHTML-Dokumenttypdefinitionen aus.
2 Um das gesamte Dokument zu konvertieren, wiederholen Sie diesen Schritt für jeden Frame sowie für das
Frameset-Dokument.
Note: Es ist nicht möglich, eine Instanz einer Vorlage zu konvertieren, da sie in derselben Sprache vorliegen muss wie die
Vorlage, auf der sie basiert. So ist zum Beispiel ein auf einer XHTML-Vorlage basierendes Dokument immer in XHTML
kodiert. Ein auf einer nicht XHTML-kompatiblen HTML-Vorlage basierendes Dokument ist immer in HTML kodiert
und kann nicht in XHTML oder eine andere Sprache konvertiert werden.
ColdFusion-Debugger verwenden (nur Windows)
Wenn Sie als ColdFusion-Entwickler ColdFusion als Dreamweaver-Testserver verwenden, können Sie ColdFusion-
Debugger-Informationen anzeigen, ohne Dreamweaver zu verlassen.
Note: Auf Macintosh-Systemen wird diese Funktion nicht unterstützt. Macintosh-Entwickler können jedoch mit
„Vorschau in Browser“ (F12) eine ColdFusion-Seite in einem separaten Browser öffnen. Wenn die Seite Fehler enthält,
werden Informationen über die möglichen Ursachen der Fehler im unteren Bereich der Seite angezeigt.
Wenn Sie ColdFusion MX 6.1 oder eine frühere Version ausführen, müssen die Debug-Einstellungen in ColdFusion
Administrator aktiviert sein, bevor Sie mit dem Debugging beginnen. Für ColdFusion MX 7 oder spätere Versionen
aktiviert Dreamweaver diese Einstellungen für Sie.
Stellen Sie außerdem sicher, dass auf Dreamweaver-Testserver ColdFusion ausgeführt wird. Weitere Informationen
hierzu finden Sie unter “Testserver einrichten” on page 50.
Um sicherzustellen, dass die Debug-Informationen immer aktualisiert werden, wenn die Seite im internen Browser
angezeigt wird, sorgen Sie dafür, dass Internet Explorer immer nach der neuesten Version sucht, wenn die Datei
angefordert wird. Wählen Sie hierzu im Internet Explorer die Option „Extras“ > „Internetoptionen“, wählen Sie die
Registerkarte „Allgemein“ und klicken Sie im Bereich „Temporäre Internetdateien“ auf die Schaltfläche „Einstellungen“.
Wählen Sie im Dialogfeld „Einstellungen“ die Option „Bei jedem Zugriff auf die Seite“.
1 Öffnen Sie die ColdFusion-Seite in Dreamweaver.
2 Klicken Sie auf das Serverdebug-Symbol in der Dokument-Symbolleiste.
Dreamweaver fordert die Seite vom ColdFusion-Server an und zeigt sie im internen Internet Explorer-Browserfenster
an. Wenn die Seite Fehler enthält, werden mögliche Fehlerursachen im unteren Bereich der Seite angezeigt.
Gleichzeitig wird das Bedienfeld „Serverdebug“ geöffnet. Das Bedienfeld liefert eine Menge nützlicher Informationen.
Es nennt beispielsweise alle Seiten, die der Server verarbeitet hat, um die Seite darzustellen, alle für die Seite
durchgeführten SQL-Abfragen und alle Servervariablen, ggf. mit den jeweiligen Werten. Überdies bietet das
Bedienfeld eine Übersicht über alle Ausführungszeiten.
3 Wenn im Bedienfeld „Serverdebug“ die Kategorie „Ausnahmen“ angezeigt wird, klicken Sie auf das Pluszeichen
(+), um die Kategorie zu erweitern.
Die Kategorie „Ausnahmen“ wird angezeigt, wenn der Server ein oder mehrere Probleme in der Seite gefunden hat.
Erweitern Sie die Kategorie, um Einzelheiten zu dem Problem anzuzeigen.
4 Wechseln Sie zurück in die Codeansicht („Ansicht“ > „Code“) oder in die Entwurfsansicht („Ansicht“ >
„Entwurf“) und korrigieren Sie den Fehler.
5 Speichern Sie die Datei und klicken Sie erneut auf das Symbol „Serverdebug“.
356
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Dreamweaver stellt die Seite erneut im internen Browser dar und aktualisiert die Informationen im Bedienfeld
„Serverdebug“. Wenn die Seite keine Fehler mehr aufweist, wird die Kategorie „Ausnahmen“ nicht mehr im
Bedienfeld angezeigt.
6 Zum Verlassen des Debug-Modus wechseln Sie in die Codeansicht („Ansicht“ > „Code“) oder in die
Entwurfsansicht („Ansicht“ > „Entwurf“).
More Help topics
“ColdFusion-Komponenten verwenden” on page 702
Code in der Entwurfsansicht bearbeiten
Grundlagen zum Bearbeiten von Code in der Entwurfsansicht
Sie können mit Dreamweaver in grafischer Arbeitsweise Webseiten erstellen und bearbeiten, ohne sich um den
zugrunde liegenden Quellcode kümmern zu müssen. Dennoch kann es mitunter interessant sein, den Code selbst zu
bearbeiten, um gewisse Aspekte präziser zu steuern oder um etwaige Fehler in der Seite ausfindig zu machen. In
Dreamweaver können Sie den Code auch bearbeiten, während Sie in der Entwurfsansicht arbeiten.
Dieser Abschnitt wendet sich an Benutzer, die zwar normalerweise in der Entwurfsansicht arbeiten, aber bei Bedarf
auch schnellen Zugriff auf den Code haben möchten.
Untergeordnete Tags in der Entwurfsansicht auswählen
Wenn Sie in der Entwurfsansicht ein Objekt auswählen, das untergeordnete Tags enthält (z. B. eine HTML-Tabelle),
können Sie das erste untergeordnete Tag dieses Objekts schnell auswählen, indem Sie „Bearbeiten“ >
„Untergeordnetes Objekt auswählen“ wählen.
Note: Dieser Befehl ist nur in der Entwurfsansicht verfügbar.
Beispielsweise hat das
<table>-Tag normalerweise untergeordnete <tr>-Tags. Wenn Sie ein <table>-Tag im Tag-
Selektor auswählen, können Sie mit dem Befehl „Bearbeiten“ > „Untergeordnetes Objekt auswählen“ die erste Zeile in
der Tabelle auswählen. Dreamweaver wählt das erste
<tr>-Tag im Tag-Selektor aus. Da das <tr>-Tag seinerseits
untergeordnete Tags enthält (insbesondere
<td>-Tags), führt die erneute Auswahl von „Bearbeiten“ >
Untergeordnetes Objekt auswählen“ zur Auswahl der ersten Tabellenzelle.
Code mit dem Eigenschafteninspektor bearbeiten
Mit dem Eigenschafteninspektor können Sie die Attribute von Text oder Objekten in der Seite ansehen und
bearbeiten. Die im Eigenschafteninspektor angezeigten Eigenschaften entsprechen in der Regel Attributen von Tags.
Wenn eine Eigenschaft im Eigenschafteninspektor geändert wird, hat dies im Allgemeinen dieselbe Wirkung wie eine
Änderung des entsprechenden Attributs in der Codeansicht.
Note: Sie können sowohl im Tag-Inspektor als auch im Eigenschafteninspektor die Attribute eines Tags anzeigen und
bearbeiten. Im Tag-Inspektor haben Sie die Möglichkeit, jedes mit einem Tag verknüpfte Attribut anzuzeigen und zu
bearbeiten. Im Eigenschafteninspektor werden nur die gängigsten Attribute angezeigt. Hier stehen Ihnen jedoch mehr
Steuerelemente für das Ändern der Werte dieser Attribute zur Verfügung und Sie haben die Möglichkeit, bestimmte
Objekte (wie z. B. Tabellenspalten) zu bearbeiten, die keinen spezifischen Tags entsprechen.
1 Klicken Sie in den Text oder wählen Sie ein Objekt auf der Seite aus.
357
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Der Eigenschafteninspektor für den Text oder das Objekt wird unterhalb des Dokumentfensters eingeblendet. Sollte
der Eigenschafteninspektor nicht zu sehen sein, wählen Sie „Fenster“ > „Eigenschaften“.
2 Nehmen Sie im Eigenschafteninspektor die gewünschten Attributänderungen vor.
CFML mit dem Eigenschafteninspektor bearbeiten
Mit dem Eigenschafteninspektor können Sie ColdFusion-Code in der Entwurfsansicht überprüfen und ändern.
1 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Attribute“, um die vorhandenen Tag-Attribute zu
bearbeiten oder neue hinzuzufügen.
2 Wenn zwischen dem Anfangs- und dem Schluss-Tag ein Inhalt vorhanden ist, klicken Sie auf die Schaltfläche
„Inhalt“, um ihn zu bearbeiten.
Die Schaltfläche „Inhalt“ wird nur angezeigt, wenn das ausgewählte Tag kein leeres Tag ist (d. h., wenn sowohl das
Anfangs- als auch das Schluss-Tag vorhanden ist).
3 Wenn das Tag einen bedingten Ausdruck enthält, ändern Sie diesen bei Bedarf im Feld „Ausdruck“.
Attribute mit dem Tag-Inspektor ändern
Der Tag-Inspektor dient zum Bearbeiten oder Hinzufügen von Attributen und Attributwerten. Mit dem Tag-
Inspektor können Sie Tags und Objekte über eine Eigenschaftenseite bearbeiten, die den bei IDEs (Integrated
Development Environments) üblichen Eigenschaftenseiten ähnelt.
1 Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
• Klicken Sie in der Codeansicht (oder im Codeinspektor) auf eine beliebige Stelle im Namen oder Inhalt eines Tags.
• Wählen Sie in der Entwurfsansicht ein Objekt aus oder wählen Sie im Tag-Selektor ein Tag aus.
2 Öffnen Sie den Tag-Inspektor („Fenster“ > „Tag-Inspektor“) und wählen Sie die Registerkarte „Attribute“ aus.
Im Tag-Inspektor werden die Attribute der Auswahl und ihre aktuellen Werte angezeigt.
3 Führen Sie im Tag-Inspektor einen der folgenden Schritte durch:
• Wenn die Attribute nach Kategorien geordnet angezeigt werden sollen, klicken Sie auf die Schaltfläche
„Kategorieansicht zeigen“ .
• Wenn die Attribute alphabetisch geordnet angezeigt werden sollen, klicken Sie auf die Schaltfläche „Listenansicht
zeigen“ .
• Wenn Sie den Wert eines Attributs ändern möchten, wählen Sie den Wert aus und bearbeiten Sie ihn.
• Wenn Sie einem Attribut ohne Wert einen Wert hinzufügen möchten, klicken Sie rechts neben dem Attribut auf
die Spalte mit den Attributwerten und fügen Sie einen Wert ein.
• Wenn für das Attribut vordefinierte Werte zur Verfügung stehen, wählen Sie im Popupmenü (bzw. im Farbwähler)
rechts neben der Spalte mit den Attributwerten einen Wert aus.
• Wenn das Attribut einen URL-Wert annehmen soll, klicken Sie auf die Schaltfläche „Durchsuchen“, verwenden Sie
zur Auswahl einer Datei das Dateiverweissymbol oder geben Sie im Feld die URL ein.
• Wenn das Attribut einen Wert aus einer Quelle für dynamischen Inhalt (z. B. eine Datenbank) annehmen soll,
klicken Sie rechts neben der Spalte mit den Attributwerten auf die Schaltfläche „Dynamische Daten“. Wählen Sie
dann eine Quelle aus.
• Wenn Sie einen Attributwert löschen möchten, wählen Sie den Wert aus und drücken Sie die Rücktaste (Windows)
bzw. die Löschtaste (Macintosh).
358
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
• Wenn Sie den Namen eines Attributs ändern möchten, wählen Sie ihn aus und bearbeiten Sie ihn.
Note: Wenn Sie den Namen eines Standardattributs ändern und anschließend einen Wert für dieses Attribut hinzufügen,
wird das Attribut mit dem neuen Wert in die entsprechende Kategorie verschoben.
• Wenn Sie ein neues Attribut hinzufügen möchten, das bisher nicht aufgelistet wird, klicken Sie auf den leeren Raum
unter dem letzten Attributnamen in der Liste und geben Sie einen neuen Attributnamen ein.
4 Aktualisieren Sie das Tag im Dokument, indem Sie die Eingabetaste (Windows) bzw. Return (Macintosh) drücken
oder im Tag-Inspektor auf eine andere Stelle klicken.
More Help topics
“Verwenden von JavaScript-Verhalten (allgemeine Anweisungen)” on page 375
“Definieren von Quellen für dynamischen Inhalt” on page 611
Überblick über den Quick Tag Editor
Mit dem Quick Tag Editor können Sie HTML-Tags schnell ansehen, einfügen und bearbeiten, ohne die
Entwurfsansicht zu verlassen.
Wenn Sie im Quick Tag Editor ungültigen HTML-Code eingeben, versucht Dreamweaver, diesen Code zu
korrigieren. Dazu werden an den erforderlichen Stellen schließende Anführungszeichen oder schließende spitze
Klammern eingefügt.
Zum Einstellen der Quick Tag Editor-Optionen öffnen Sie den Quick Tag Editor. Drücken Sie dazu Strg+T
(Windows) bzw. Befehl+T (Macintosh).
Im Quick Tag Editor stehen drei verschiedene Modi zur Verfügung:
• „HTML einfügen“ wird zum Einfügen von neuem HTML-Code verwendet
• „Tag bearbeiten“ dient zur Bearbeitung vorhandener Tags.
• „Tag um Objekt legen“ wird verwendet, um ein neues Tag um die aktuelle Auswahl zu legen.
Note: In welchem Modus der Quick Tag Editor geöffnet wird, hängt von der aktuellen Auswahl in der Entwurfsansicht ab.
Unabhängig vom Modus müssen Sie bei der Arbeit mit dem Quick Tag Editor die folgenden Arbeitsschritte
ausführen: Zuerst öffnen Sie den Editor, anschließend können Sie Tags und Attribute eingeben oder bearbeiten
und dann schließen Sie den Editor.
Sie können zwischen den Modi umschalten, indem Sie Strg+T (Windows) bzw. Befehl+T (Macintosh) drücken,
während der Quick Tag Editor aktiv ist.
More Help topics
“Menü mit Codehinweisen im Quick Tag Editor verwenden” on page 360
Code mit dem Quick Tag Editor bearbeiten
Mit dem Quick Tag Editor können Sie HTML-Tags schnell einfügen und bearbeiten, ohne die Entwurfsansicht zu
verlassen.
More Help topics
“Skripts in der Entwurfsansicht schreiben und bearbeiten” on page 361
359
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
HTML-Tags einfügen
1 Klicken Sie in die Entwurfsansicht, um die Einfügemarke an die Stelle zu setzen, an der Sie Code einfügen möchten.
2 Drücken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh).
Der Quick Tag Editor wird im Modus „HTML einfügen“ geöffnet.
3 Geben Sie das HTML-Tag ein und drücken Sie die Eingabetaste.
Das Tag wird in den Code eingefügt, ggf. mit dem entsprechenden Schluss-Tag.
4 Drücken Sie Esc, wenn Sie den Editor schließen möchten, ohne Änderungen vorzunehmen.
HTML-Tags bearbeiten
1 Wählen Sie in der Entwurfsansicht ein Objekt aus.
Sie können das zu bearbeitende Tag auch im Tag-Selektor unten im Dokumentfenster auswählen. Weitere
Informationen hierzu finden Sie unter “Code mit dem Tag-Selektor bearbeiten” on page 360.
2 Drücken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh).
Der Quick Tag Editor wird im Modus „Tag bearbeiten“ geöffnet.
3 Geben Sie neue Attribute ein, bearbeiten Sie vorhandene Attribute oder bearbeiten Sie den Namen des Tags.
4 Drücken Sie die Tabulatortaste, um von einem Attribut zum nächsten zu gelangen. Drücken Sie Umschalt+Tab,
um zum vorherigen Attribut zurückzukehren.
Note: Standardmäßig treten die Änderungen in Kraft, wenn Sie Tab oder Umschalt+Tab drücken.
5 Um den Quick Tag Editor zu schließen und alle Änderungen in Kraft zu setzen, drücken Sie die Eingabetaste.
6 Um den Quick Tag Editor zu beenden, ohne weitere Änderungen vorzunehmen, drücken Sie Esc.
Aktuelle Auswahl mit HTML-Tags umgeben
1 Wählen Sie in der Entwurfsansicht unformatierten Text oder ein Objekt aus.
Note: Wenn Sie Text oder ein Objekt auswählen, der bzw. das ein öffnendes oder schließendes HTML-Tag enthält, wird
der Quick Tag Editor im Modus „Tag bearbeiten“ statt im Modus „Tag um Objekt legen“ geöffnet.
2 Drücken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh) oder klicken Sie im Eigenschafteninspektor auf die
Schaltfläche für den Quick Tag Editor.
Der Quick Tag Editor wird im Modus „Tag um Objekt legen“ geöffnet.
3 Geben Sie ein einzelnes öffnendes Tag ein, z. B. strong, und drücken Sie die Eingabetaste (Windows) bzw. Return
(Macintosh).
Das Tag wird am Anfang der aktuellen Auswahl und das entsprechende Schluss-Tag am Ende eingefügt.
4 Um den Quick Tag Editor zu beenden, ohne Änderungen vorzunehmen, drücken Sie Esc.
360
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Menü mit Codehinweisen im Quick Tag Editor verwenden
Im Quick Tag Editor ist ein Menü mit Codehinweisen für Attribute verfügbar. In diesem Menü werden alle gültigen
Attribute des Tags angezeigt, das Sie gerade bearbeiten oder einfügen.
Sie können das Menü mit Codehinweisen auch deaktivieren oder die Zeit einstellen, nach der es im Quick Tag Editor
eingeblendet werden soll.
Wenn Sie ein Menü mit Codehinweisen mit einer Liste der gültigen Attribute für ein Tag anzeigen möchten,
unterbrechen Sie für einen Moment die Bearbeitung eines Attributnamens im Quick Tag Editor. Ein Menü mit
Codehinweisen wird eingeblendet, in dem alle gültigen Attribute des zu bearbeitenden Tags angezeigt werden.
Entsprechend können Sie ein Menü mit Codehinweisen mit einer Liste der gültigen Tag-Namen anzeigen, wenn Sie
das Eingeben oder Bearbeiten eines Tag-Namens im Quick Tag Editor kurz unterbrechen.
Note: Die Einstellungen für die Codehinweise im Quick Tag Editor werden über die üblichen Einstellungen für die
Codehinweise gesteuert. Weitere Informationen hierzu finden Sie unter “Einstellungen für Codehinweise festlegen” on
page 332.
More Help topics
“Überblick über den Quick Tag Editor” on page 358
Menü mit Codehinweisen verwenden
1 Führen Sie einen der folgenden Schritte aus:
• Beginnen Sie damit, einen Tag- oder Attributnamen einzugeben. Die Auswahl im Menü mit Codehinweisen
springt zum ersten Element, das mit den von Ihnen eingegebenen Buchstaben beginnt.
• Wählen Sie ein Element mit der Pfeil-nach-oben- bzw. Pfeil-nach-unten-Taste aus.
• Verwenden Sie den Rollbalken, um ein Element zu finden.
2 Drücken Sie die Eingabetaste, um das ausgewählte Element einzufügen, oder doppelklicken Sie auf ein Element,
das Sie einfügen möchten.
3 Möchten Sie das Menü mit Codehinweisen schließen, ohne ein Element einzufügen, drücken Sie die Esc-Taste oder
setzen Sie einfach die Eingabe fort.
Menü mit Codehinweisen deaktivieren oder Einblendverzögerung ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) oder „Dreamweaver“ > „Voreinstellungen“
(Macintosh) aus und klicken Sie dann auf „Codehinweise“.
Das Dialogfeld „Voreinstellungen“ für Codehinweise wird angezeigt.
2 Wenn Sie das Menü für Codehinweise deaktivieren möchten, deaktivieren Sie die Option „Code-Hinweise
aktivieren“.
3 Wenn Sie die Wartezeit ändern möchten, nach der das Menü eingeblendet wird, stellen Sie den Schieberegler
„Verzögerung“ entsprechend ein und klicken Sie auf „OK“.
Code mit dem Tag-Selektor bearbeiten
Mit dem Tag-Selektor können Sie Tags auswählen, bearbeiten oder entfernen, ohne die Entwurfsansicht zu verlassen.
Der Tag-Selektor befindet sich in der Statusleiste unten im Dokumentfenster und zeigt eine Reihe von Tags wie folgt an:
361
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Tags bearbeiten oder löschen
1 Klicken Sie in das Dokument.
Die Tags, die an der Einfügemarke in Frage kommen, werden im Tag-Selektor angezeigt.
2 Klicken Sie im Tag-Selektor mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf
ein Tag.
3 Um ein Tag zu bearbeiten, wählen Sie im Menü die Option „Tag bearbeiten“. Nehmen Sie die gewünschten
Änderungen im Quick Tag Editor vor. Weitere Informationen finden Sie unter “Code mit dem Quick Tag Editor
bearbeiten” on page 358.
4 Um ein Tag zu löschen, wählen Sie im Menü die Option „Tag entfernen“.
Objekt auswählen, das einem Tag entspricht
1 Klicken Sie in das Dokument.
Die Tags, die an der Einfügemarke in Frage kommen, werden im Tag-Selektor angezeigt.
2 Klicken Sie im Tag-Selektor auf ein Tag.
Das durch das Tag dargestellte Objekt wird auf der Seite ausgewählt.
Mit dieser Technik können Sie einzelne Tabellenzeilen (
tr-Tags) oder Zellen (td-Tags) auswählen.
Skripts in der Entwurfsansicht schreiben und bearbeiten
Sowohl in der Codeansicht als auch in der Entwurfsansicht können Sie folgendermaßen mit clientseitigen JavaScript-
und VBScript-Skripts arbeiten:
• Schreiben Sie für Ihre Seite ein JavaScript- oder VBScript-Skript, ohne die Entwurfsansicht zu verlassen.
• Erstellen Sie in Ihrem Dokument einen Hyperlink zu einer externen Skriptdatei, ohne die Entwurfsansicht zu
verlassen.
• Bearbeiten Sie ein Skript, ohne die Entwurfsansicht zu verlassen.
Wählen Sie zunächst „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“, damit Skriptmarkierungen auf
der Seite angezeigt werden.
Clientseitige Skripts schreiben
1 Setzen Sie die Einfügemarke an die Stelle, an der Sie das Skript einfügen möchten.
2 Wählen Sie „Einfügen“ > „HTML“ > „Skriptobjekte“ > „Skript“.
3 Wählen Sie die gewünschte Skriptsprache im Popupmenü „Sprache“ aus.
Wenn Sie mit JavaScript arbeiten, jedoch nicht genau wissen, mit welcher Version, wählen Sie „JavaScript“ anstelle
von „JavaScript1.1“ oder „JavaScript1.2“.
4 Geben oder fügen Sie den Skriptcode im Feld „Inhalt“ ein.
Das
script-Tag am Anfang und Schluss brauchen Sie nicht einzugeben.
5 Geben oder kopieren Sie HTML-Code in das Feld „Kein Skript“ ein. In Browsern, die die gewählte Skriptsprache
nicht unterstützen, wird das Skript nicht ausgeführt und stattdessen dieser Code angezeigt.
6 Klicken Sie auf „OK“.
362
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Hyperlinks zu externen Skriptdateien erstellen
1 Setzen Sie die Einfügemarke an die Stelle, an der Sie das Skript einfügen möchten.
2 Wählen Sie „Einfügen“ > „HTML“ > „Skriptobjekte“ > „Skript“.
3 Klicken Sie auf „OK“, ohne etwas im Feld „Inhalt“ einzugeben.
4 Wählen Sie die Skriptmarkierung in der Entwurfsansicht des Dokumentfensters aus.
5 Klicken Sie im Eigenschafteninspektor auf das Ordnersymbol und wählen Sie eine externe Skriptdatei aus oder
geben Sie im Feld „Quelle“ den Dateinamen ein.
Skripts bearbeiten
1 Wählen Sie die Skriptmarkierung aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Bearbeiten“.
Das Skript wird im Dialogfeld „Skripteigenschaften“ angezeigt.
Wenn Sie einen Hyperlink zu einer externen Skriptdatei erstellt haben, wird die Datei in der Codeansicht geöffnet, wo
Sie die gewünschten Änderungen vornehmen können.
Note: Wenn sich zwischen den beiden script-Tags Code befindet, wird das Dialogfeld „Skripteigenschaften“ geöffnet, auch
wenn außerdem ein Hyperlink zu einer externen Skriptdatei vorhanden ist.
3 Geben Sie im Feld „Sprache“ entweder JavaScript oder VBScript als Sprache des Skripts an.
4 Geben Sie im Popupmenü „Typ“ die Art des Skripts an, „Client-seitig“ oder „Server“.
5 (Optional:) Geben Sie im Feld „Quelle“ eine externe Skriptdatei an, auf die über einen Hyperlink verwiesen wird.
Klicken Sie auf das Ordnersymbol oder auf die Schaltfläche „Durchsuchen“, um eine Datei auszuwählen, oder
geben Sie den Pfad ein.
6 Bearbeiten Sie das Skript und klicken Sie auf „OK“.
Serverseitige ASP-Skripts in der Entwurfsansicht bearbeiten
Der Eigenschafteninspektor für ASP-Skripts dient zum Überprüfen und Ändern von serverseitigen ASP-Skripts in der
Entwurfsansicht.
1 Wählen Sie in der Entwurfsansicht das Symbol für das Serversprachen-Tag aus.
2 Klicken Sie im Eigenschafteninspektor für ASP-Skripts auf die Schaltfläche „Bearbeiten“.
3 Bearbeiten Sie das serverseitige ASP-Skript und klicken Sie auf „OK“.
Skripts auf der Seite mit dem Eigenschafteninspektor bearbeiten
1 Wählen Sie im Eigenschafteninspektor im Popupmenü „Sprache“ die gewünschte Skriptsprache aus oder geben Sie
im Feld „Sprache“ den Namen einer Sprache ein.
Note: Wenn Sie mit JavaScript arbeiten, jedoch nicht genau wissen, mit welcher Version, wählen Sie „JavaScript“ anstelle
von „JavaScript1.1“ oder „JavaScript1.2“.
2 Geben Sie im Popupmenü „Typ“ die Art des Skripts an, „Client-seitig“ oder „Server“.
3 (Optional:) Geben Sie im Feld „Quelle“ eine externe Skriptdatei an, auf die über einen Hyperlink verwiesen wird.
Klicken Sie auf das Ordnersymbol , um die Datei auszuwählen, oder geben Sie den Pfad ein.
4 Klicken Sie auf „Bearbeiten“, um die gewünschten Änderungen am Skript vorzunehmen.
363
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
More Help topics
“Skripts in der Entwurfsansicht schreiben und bearbeiten” on page 361
Verwenden von JavaScript-Verhalten
Über die Registerkarte „Verhalten“ im Tag-Inspektor können Sie Seitenelementen schnell und einfach JavaScript-
Verhalten (clientseitig) hinzufügen. Weitere Informationen finden Sie unter “Anwenden integrierter JavaScript-
Verhalten” on page 379.
Mit Head-Inhalt für Seiten arbeiten
Seiten enthalten Elemente, die die Informationen auf der Seite beschreiben und von Suchmaschinen verwendet
werden. Sie können die Eigenschaften von
head-Elementen festlegen, um zu steuern, wie die Seiten identifiziert
werden.
Head-Inhalt anzeigen und bearbeiten
Die Elemente im head-Bereich eines Dokuments können Sie über das Menü „Ansicht“, in der Codeansicht des
Dokumentfensters oder im Codeinspektor anzeigen.
Elemente im head-Bereich eines Dokuments anzeigen
❖ Wählen Sie „Ansicht“ > „Head-Inhalt“. Für jedes Element des head-Inhalts wird in der Entwurfsansicht am oberen
Rand des Dokumentfensters eine Markierung angezeigt.
Note: Wenn Ihr Dokumentfenster so eingestellt ist, dass es nur die Codeansicht zeigt, kann die Option „Ansicht“ >
„Head-Inhalt“ nicht aktiviert werden.
Elemente in den head-Bereich eines Dokuments einfügen
1 Wählen Sie im Untermenü „Einfügen“ > „HTML“ > „Head-Tags“ die gewünschte Option aus.
2 Geben Sie im daraufhin angezeigten Dialogfeld oder im Eigenschafteninspektor entsprechende Optionen für das
Element ein.
Elemente im head-Bereich eines Dokuments bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Klicken Sie auf eines der Symbole im head-Bereich, um es auszuwählen.
3 Legen Sie die gewünschten Eigenschaften des Elements im Eigenschafteninspektor fest oder modifizieren Sie sie.
Meta-Eigenschaften für die Seite festlegen
Ein meta-Tag ist ein head-Element, das Informationen über die aktuelle Seite aufzeichnet, z. B. Zeichenkodierung,
Autor, Copyright oder Schlüsselwörter. Diese Tags können auch dazu verwendet werden, um Informationen wie
Ablaufdatum, Aktualisierungsintervall und POWDER-Bewertung für die Seite an den Server zu übermitteln.
(POWDER, kurz für „Protocol for Web Description Resources“ – Protokoll zur Beschreibung von Webressourcen,
stellt eine Methode zur Bewertung von Webseiten dar, ähnlich der Bewertung von Filmen.)
meta-Tags hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Meta“.
364
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Geben Sie die Eigenschaften im angezeigten Dialogfeld an.
Vorhandene meta-Tags bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Meta-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Geben Sie im Eigenschafteninspektor die gewünschten Eigenschaften an.
meta-Tag-Eigenschaften
❖ Legen Sie dabei folgende meta-Tag-Eigenschaften fest:
Attribut gibt an, ob das meta-Tag beschreibende Informationen über die Seite (name) oder HTTP-Header-
Informationen enthält (
http-equiv).
Wert gibt die Art der Information an, die Sie mit diesem Tag bereitstellen. Einige Werte, wie description, keywords
und
refresh, sind bereits recht genau definiert (und haben jeweils eigene Eigenschafteninspektoren in
Dreamweaver), aber Sie können praktisch jeden beliebigen Wert angeben (z. B.
erstelldatum, dokumentID oder
niveau).
Inhalt enthält die eigentliche Information. Wenn Sie als „Wert“ z. B. niveau angegeben haben, können Sie für
„Inhalt“
anfaenger, fortgeschritten oder experte angeben.
Seitentitel festlegen
Beim Titel ist nur eine Eigenschaft möglich: der Titel der Seite. Der Titel wird in der Titelleiste des Dokumentfensters
in Dreamweaver angezeigt sowie später in der Titelleiste der meisten Browser. Außerdem wird er in der Symbolleiste
des Dokumentfensters angezeigt.
Titel im Dokumentfenster angeben
❖ Geben Sie den Titel in der Symbolleiste des Dokumentfensters im Textfeld „Titel“ ein.
Titel im Head-Inhalt angeben
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Titel-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Geben Sie im Eigenschafteninspektor den gewünschten Seitentitel an.
Schlüsselwörter für die Seite angeben
Viele Suchmaschinen-Robots (Programme, die automatisch das Web nach Informationen durchsuchen, die in den
Index von Suchmaschinen aufgenommen werden sollen) lesen den Inhalt des
meta-Tags „keywords“
(Schlüsselwörter) und nehmen die Seiten anhand dieser Informationen in ihre Datenbanken auf. Da einige
Suchmaschinen nur eine begrenzte Anzahl von Schlüsselwörtern berücksichtigen bzw. alle Schlüsselwörter
ignorieren, wenn Sie diese Anzahl überschreiten, empfiehlt es sich, nur einige wenige sorgsam ausgewählte
Schlüsselwörter zu verwenden.
meta-Tag „Keywords“ (Schlüsselwörter) hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Schlüsselwörter“.
2 Geben Sie im angezeigten Dialogfeld die durch Kommata getrennten Schlüsselwörter ein.
365
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
meta-Tag „Keywords“ (Schlüsselwörter) bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Schlüsselwörter-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Im Eigenschafteninspektor können Sie die Schlüsselwörter anzeigen, ändern oder löschen. Außerdem können Sie
hier weitere durch Kommata getrennte Schlüsselwörter hinzufügen.
Beschreibungen für die Seite angeben
Viele Suchmaschinen-Robots (Programme, die automatisch das Web nach Informationen durchsuchen, die in den
Index von Suchmaschinen aufgenommen werden sollen) lesen den Inhalt des
meta-Tags „description“
(Beschreibung). Manche Suchmaschinen verwenden diese Informationen zur Aufnahme der Seiten in ihre
Datenbanken, manche zeigen diese Informationen aber auch auf ihren Suchergebnisseiten an (anstelle der ersten
Zeilen eines Dokuments). Einige Suchmaschinen können nur eine begrenzte Anzahl von Zeichen aufnehmen. Es
empfiehlt sich deshalb, die Beschreibung auf wenige Wörter zu begrenzen (z. B. auf
Metzgerei mit Partyservice
in Musterstadt, Musterland oder Professionelles Webdesign zu günstigen Preisen für Kunden
weltweit).
meta-Tag „description“ (Beschreibung) hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Beschreibung“.
2 Geben Sie beschreibenden Text im Feld „Beschreibung“ ein.
meta-Tag „description“ (Beschreibung) bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Beschreibung-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Im Eigenschafteninspektor können Sie die Beschreibung anzeigen, ändern oder löschen.
Aktualisierungseigenschaften für die Seite festlegen
Über das refresh-Element (Aktualisieren) können Sie festlegen, dass der Browser die angezeigte Seite nach Ablauf
einer bestimmten Zeit automatisch aktualisieren soll, indem er die Seite neu lädt oder eine andere Seite aufruft. Dieses
Element wird häufig dazu verwendet, den Besucher automatisch zu einer anderen URL umzuleiten, wobei oftmals
zunächst darauf hingewiesen wird, dass sich die URL geändert hat.
meta-Tag „refresh“ (Aktualisieren) hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Aktualisieren“.
2 Legen Sie im angezeigten Dialogfeld die meta-Tag-Eigenschaften der Aktualisierung fest.
meta-Tag „refresh“ (Aktualisieren) bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Aktualisieren-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Legen Sie im Eigenschafteninspektor die Eigenschaften des Aktualisieren-meta-Tags fest.
366
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Eigenschaften des meta-Tags „refresh“ (Aktualisierung) festlegen
❖ Legen Sie dabei folgende Eigenschaften für das Aktualisieren-meta-Tag fest:
Verzögerung gibt an, wie viele Sekunden der Browser warten soll, bis er die Seite aktualisiert. Damit der Browser die
Seite unmittelbar nach dem Laden aktualisiert, geben Sie in diesem Feld 0 ein.
Aktion bzw. URL gibt an, ob der Browser nach der angegebenen Verzögerung eine andere URL aufrufen oder die
aktuelle Seite aktualisieren soll. Wenn eine andere URL aufgerufen (und nicht die aktuelle Seite aktualisiert) werden
soll, klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie die zu ladende Seite aus.
URL-Basiseigenschaften der Seite festlegen
Verwenden Sie das base-Element (Basis) zum Festlegen der Basis-URL, auf die alle dokumentrelativen Pfade auf der
Seite bezogen sein sollen.
meta-Tag „base“ hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Basis“.
2 Legen Sie im angezeigten Dialogfeld die meta-Tag-Eigenschaften der Basis fest.
meta-Tag „base“ bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Basis-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Legen Sie im Eigenschafteninspektor die Eigenschaften des meta-Tag „base“ fest.
Eigenschaften des meta-Tags „base“ angeben
❖ Legen Sie dabei folgende Eigenschaften für das meta-Tag „base“ fest:
Href ist die Basis-URL. Klicken Sie auf die Schaltfläche „Durchsuchen“, um eine Datei zu suchen und auszuwählen,
oder geben Sie in das Feld einen Pfad ein.
Ziel bestimmt den Frame oder das Fenster, in dem alle verknüpften Dokumente geöffnet werden sollen. Wählen Sie
einen der Frames im aktuellen Frameset oder einen der folgenden für diesen Zweck reservierten Namen aus:
• _blank lädt das verknüpfte Dokument in ein neues, unbenanntes Browserfenster.
• _parent lädt das verknüpfte Dokument in das übergeordnete Frameset oder das Fenster des Frames, der den
Hyperlink enthält. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, entspricht dieses Ziel dem
Ziel
_top. Das verknüpfte Dokument wird in das ganze Browserfenster geladen.
• _self lädt das verknüpfte Dokument in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Standardziel, also müssen Sie es normalerweise nicht angeben.
• _top lädt das verknüpfte Dokument in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Hyperlinkeigenschaften der Seite festlegen
Über das link-Tag definieren Sie eine Beziehung zwischen dem aktuellen Dokument und einer anderen Datei.
Note: Das
link-Tag im head-Bereich ist nicht zu verwechseln mit einem HTML-Hyperlink im body-Bereich zu
verwechseln, der Dokumente miteinander verknüpft.
meta-Tag „link“ (Hyperlink) hinzufügen
1 Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Hyperlink“.
367
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Legen Sie im angezeigten Dialogfeld die meta-Tag-Eigenschaften des Hyperlinks fest.
meta-Tag „link“ (Hyperlink) bearbeiten
1 Wählen Sie „Ansicht“ > „Head-Inhalt“ aus.
2 Wählen Sie die Hyperlink-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird.
3 Legen Sie im Eigenschafteninspektor die Eigenschaften des Hyperlink-meta-Tags fest.
Eigenschaften des meta-Tags „link“ (Hyperlink) angeben
❖ Legen Sie dabei folgende meta-Tag-Eigenschaften fest:
Href ist die URL der Datei, auf die der Hyperlink verweist. Klicken Sie auf die Schaltfläche „Durchsuchen“, um eine
Datei zu suchen und auszuwählen, oder geben Sie in das Feld einen Pfad ein. Beachten Sie, dass dieses Attribut keine
Datei angibt, zu der Sie im üblichen HTML-Sinne eine Verknüpfung herstellen. Die in einem link-Element
festgelegten Beziehungen sind komplexer.
ID ist ein eindeutiger Bezeichner für den Hyperlink.
Titel beschreibt die Beziehung. Dieses Attribut hat eine spezielle Bedeutung für verknüpfte Stylesheets. Nähere
Informationen hierzu finden Sie im Abschnitt „External Style Sheets“ der HTML-Spezifikation 4.0 auf der Website des
World Wide Web Consortium unter www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel bestimmt die Beziehung zwischen dem aktuellen Dokument und dem im Textfeld „Href“ angegebenen
Dokument. Mögliche Werte sind
Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary,
Copyright, Chapter, Section, Subsection, Appendix, Help und Bookmark. Wenn Sie mehrere Beziehungen
festlegen möchten, fügen Sie ein Leerzeichen zwischen den einzelnen Werten ein.
Rev legt eine umgekehrte Beziehung (das Gegenteil von „Rel“) zwischen dem aktuellen Dokument und dem im
Textfeld „Href“ angegebenen Dokument fest. Die möglichen Werte sind hierbei dieselben wie bei „Rel“.
Mit Server-Side Includes arbeiten
Server-Side Includes
Mit Dreamweaver können Sie Server-Side Includes in Ihre Seiten einbauen, Includes bearbeiten und Seiten mit
Includes in der Vorschau anzeigen.
Ein Server-Side Include ist eine Datei, die der Server in Ihr Dokument integriert, wenn ein Browser das Dokument
vom Server abruft.
Wenn der Browser eines Besuchers das Dokument abruft, das die Include-Anweisung enthält, verarbeitet Ihr Server
die Include-Anweisung und erstellt ein neues Dokument, bei dem die Include-Anweisung durch den Inhalt der
eingeschlossenen Datei ersetzt wird. Anschließend sendet der Server dieses neue Dokument an den Browser des
Besuchers. Wenn Sie ein lokales Dokument direkt in einem Browser öffnen, ist aber kein Server vorhanden, der die
Include-Anweisungen in diesem Dokument verarbeiten könnte. Der Browser öffnet somit das Dokument, ohne diese
Anweisungen zu verarbeiten, und die einzuschließende Datei wird im Browser nicht angezeigt. Ohne Dreamweaver
ist es daher nicht einfach, lokale Dateien so anzuzeigen, wie sie für Besucher aussehen, wenn die Dateien auf dem
Server liegen.
368
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Mit Dreamweaver können Sie Dokumente in einer Vorschau genau so anzeigen, wie sie später auf dem Server
angezeigt werden, sowohl in der Entwurfsansicht als auch bei Verwendung der Funktion „Vorschau im Browser“.
Dazu müssen Sie jedoch sicherstellen, dass Sie eine Vorschau der Datei anzeigen, die die Include-Datei als temporäre
Datei enthält. (Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus und klicken Sie auf die Kategorie „Vorschau in
Browser“. Stellen Sie dann sicher, dass die Option „Vorschau mit temporärer Datei“ aktiviert ist.)
Note: Wenn Sie einen Testserver (z. B. Apache oder Microsoft IIS) für die Vorschau der Dateien auf dem lokalen
Laufwerk verwenden, ist die Vorschau mit temporärer Datei nicht erforderlich, da die notwendige Verarbeitung durch
den Server erfolgt.
Wenn Sie in ein Dokument ein Server-Side Include einfügen, wird in das aktuelle Dokument lediglich ein Verweis auf
eine externe Datei eingefügt und nicht der Inhalt der angegebenen Datei. Die angegebene Datei sollte nur die von
Ihnen vorgesehenen Inhalte enthalten. Das heißt, die Include-Datei darf keine
head-Tags, body-Tags oder html-Tags
(gemeint ist nur das Tag
<html>; HTML-Formatierungstags wie p-Tags, div-Tags usw. sind zulässig) enthalten.
Wenn die Datei diese Tags enthält, treten bei den Tags im Ursprungsdokument Probleme auf und die Seite wird in
Dreamweaver nicht ordnungsgemäß angezeigt.
Sie können die eingeschlossene Datei allerdings nicht direkt in einem Dokument bearbeiten. Wenn Sie den Inhalt
eines Server-Side Includes bearbeiten möchten, müssen Sie die eingeschlossene Datei direkt bearbeiten. Änderungen
an der externen Datei werden automatisch in allen Dokumenten wirksam, die diese Datei enthalten.
Es gibt zwei Arten von Server-Side Includes: „Virtuell“ und „Datei“. Dreamweaver fügt standardmäßig Include-
Dateien vom Typ „Datei“ ein. Sie können jedoch im Eigenschafteninspektor auch den für den verwendeten Webserver
geeigneten Typ auswählen:
• Wenn Sie einen Apache-Webserver verwenden, wählen Sie „Virtuell“. In Apache funktioniert „Virtuell“ in allen,
„Datei“ hingegen nur in einigen Fällen.
• Wenn Sie einen Microsoft IIS-Server verwenden, wählen Sie „Datei“. („Virtuell“ funktioniert mit IIS nur unter
bestimmten Umständen.)
Note: Leider können Sie mit IIS nur dann Dateien in einen dem aktuellen Ordner übergeordneten Ordner
einschließen, wenn auf dem Server eine spezielle Software installiert wurde. Wenn Sie eine Datei aus einem
übergeordneten Ordner in der Ordnerhierarchie eines IIS-Servers einschließen müssen, fragen Sie den
Systemadministrator, ob die hierzu benötigte Software installiert ist.
• Verwenden Sie andere Servertypen oder ist Ihnen der Servertyp nicht bekannt, fragen Sie den Systemadministrator
nach der richtigen Option.
Manche Server sind so konfiguriert, dass sie alle Dateien auf Server-Side Includes hin untersuchen. Andere Server
untersuchen dagegen nur Dateien mit einer bestimmten Erweiterung, wie .shtml, .shtm oder .inc. Sollte ein Server-
Side Include bei Ihnen nicht funktionieren, erkundigen Sie sich bei Ihrem Administrator, ob die Datei mit dem
Include eine bestimmte Erweiterung haben muss. (Lautet der Dateiname beispielsweise „canoe.html“, müssen Sie
ihn möglicherweise in „canoe.shtml“ ändern.) Sollen die Dateien die Erweiterungen .html oder .htm beibehalten,
lassen Sie den Server vom Systemadministrator so konfigurieren, dass alle Dateien (und nicht nur Dateien mit einer
bestimmten Erweiterung) auf Server-Side Includes überprüft werden. Für das Durchsuchen einer Datei auf Server-
Side Includes wird zusätzliche Zeit benötigt, sodass Seiten, die der Server durchsucht, etwas langsamer bereitgestellt
werden als andere Seiten. Einige Systemadministratoren vermeiden daher, das Durchsuchen aller Dateien
einzurichten.
Server-Side Includes einfügen
In Dreamweaver können Sie Server-Side Includes in Ihre Seiten einfügen.
369
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Server-Side Include einfügen
1 Wählen Sie „Einfügen“ > „Server-Side Include“.
2 Wählen Sie im angezeigten Dialogfeld eine Datei aus.
Standardmäßig wird der Include-Typ „Datei“ eingefügt.
3 Um den Include-Typ zu ändern, wählen Sie das Server-Side Include im Dokumentfenster aus und ändern Sie den
Typ wie folgt im Eigenschafteninspektor („Fenster“ > „Eigenschaften“):
• Wenn Sie einen Apache-Webserver verwenden, wählen Sie „Virtuell“. In Apache funktioniert „Virtuell“ in allen,
„Datei“ hingegen nur in einigen Fällen.
• Wenn Sie einen Microsoft IIS-Server verwenden, wählen Sie „Datei“. („Virtuell“ funktioniert mit IIS nur unter
bestimmten Umständen.)
Note: Leider können Sie mit IIS nur dann Dateien in einen dem aktuellen Ordner übergeordneten Ordner einschließen,
wenn auf dem Server eine spezielle Software installiert wurde. Wenn Sie eine Datei aus einem übergeordneten Ordner in
der Ordnerhierarchie eines IIS-Servers einschließen möchten, fragen Sie den Systemadministrator, ob die hierzu
benötigte Software installiert ist.
• Verwenden Sie andere Servertypen oder ist Ihnen der Servertyp nicht bekannt, fragen Sie den Systemadministrator
nach der richtigen Option.
Einzufügende Datei ändern
1 Wählen Sie im Dokumentfenster das Server-Side Include aus.
2 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“).
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf das Ordnersymbol, wechseln Sie in den entsprechenden Ordner und wählen Sie eine neue
einzufügende Datei aus.
• Geben Sie im Feld den Pfad und den Dateinamen der neu einzufügenden Datei ein.
Inhalt von Server-Side Includes bearbeiten
Mit Dreamweaver können Sie Server-Side Includes bearbeiten. Wenn Sie den mit der eingeschlossenen Datei
verknüpften Inhalt bearbeiten möchten, müssen Sie die Datei öffnen.
1 Wählen Sie das Server-Side Include in der Entwurfsansicht oder der Codeansicht aus und klicken Sie im
Eigenschafteninspektor auf „Bearbeiten“.
Die eingeschlossene Datei wird in einem neuen Dokumentfenster geöffnet.
2 Bearbeiten Sie die Datei und speichern Sie sie anschließend.
Die Änderungen werden sofort im aktuellen Dokument wiedergegeben sowie in allen Dokumenten, die Sie
anschließend öffnen und die diese Datei enthalten.
3 Laden Sie, falls notwendig, die Include-Datei auf die Remote-Site hoch.
370
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Verwalten von Tag-Bibliotheken
Dreamweaver-Tag-Bibliotheken
Eine Tag-Bibliothek in Dreamweaver ist eine Sammlung von Tags einer bestimmten Art. Sie enthält auch
Informationen dazu, wie die Tags von Dreamweaver formatiert werden sollen. Tag-Bibliotheken bieten die
Informationen zu Tags, die in Dreamweaver für Codehinweise und Zielbrowserprüfungen, für die Tag-Auswahl und
für andere Kodierungsfunktionen verwendet werden. Mit dem Tag-Bibliothek-Editor können Sie Tag-Bibliotheken,
Tags, Attribute und Attributwerte hinzufügen und löschen, Eigenschaften für eine Tag-Bibliothek festlegen,
einschließlich des Formats (zur leichteren Identifizierung im Code) sowie Tags und Attribute bearbeiten.
More Help topics
“Benutzerdefinierte Tags in Dreamweaver importieren” on page 373
“Festlegen von Codeeinstellungen” on page 324
Tag-Bibliothek-Editor öffnen und schließen
1 Wählen Sie „Bearbeiten“ > „Tag-Bibliotheken“, um den Tag-Bibliothek-Editor zu öffnen.
Das Dialogfeld „Tag-Bibliothek-Editor“ wird angezeigt. (Die Anzeige der Optionen in diesem Dialogfeld hängt vom
jeweils ausgewählten Tag ab.)
2 Zum Schließen des Tag-Bibliothek-Editors führen Sie einen der folgenden Schritte aus:
• Um Änderungen zu speichern, klicken Sie auf „OK“.
• Um den Tag-Bibliothek-Editor zu schließen, ohne Änderungen zu speichern, klicken Sie auf „Abbrechen“.
Note: Wenn Sie auf „Abbrechen“ klicken, werden alle Änderungen verworfen, die Sie im Tag-Bibliothek-Editor
vorgenommen haben. Falls Sie ein Tag oder eine Tag-Bibliothek gelöscht haben, wird das betreffende Element
wiederhergestellt.
Bibliotheken, Tags und Attribute hinzufügen
Mit dem Tag-Bibliothek-Editor können Sie den Tag-Bibliotheken von Dreamweaver weitere Tag-Bibliotheken, Tags
und Attribute hinzufügen.
More Help topics
“Festlegen von Codeeinstellungen” on page 324
“Benutzerdefinierte Tags in Dreamweaver importieren” on page 373
Tag-Bibliotheken hinzufügen
1 Klicken Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) auf die Plusschaltfläche (+) und wählen
Sie „Neue Tag-Bibliothek“.
2 Geben Sie im Feld „Bibliotheksname“ einen Namen ein (z. B. Verschiedene Tags) und klicken Sie auf „OK“.
Tag-Bibliotheken Tags hinzufügen
1 Klicken Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) auf die Plusschaltfläche (+) und wählen
Sie „Neue Tags“ aus.
371
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Wählen Sie im Popupmenü „Tag-Bibliothek“ eine Tag-Bibliothek aus.
3 Geben Sie den Namen des neuen Tags ein. Wenn Sie mehrere Tags hinzufügen möchten, trennen Sie die einzelnen
Tag-Namen durch ein Komma und ein Leerzeichen (z. B.
cfgraph, cfgraphdata).
4 Wenn die neuen Tags entsprechende Schluss-Tags haben (</...>), aktivieren Sie die Option „Passende Schluss-
Tags“.
5 Klicken Sie auf „OK“.
Tag-Attribute hinzufügen
1 Klicken Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) auf die Plusschaltfläche (+) und wählen
Sie „Neue Attribute“ aus.
2 Wählen Sie im Popupmenü „Tag-Bibliothek“ eine Tag-Bibliothek aus.
3 Wählen Sie im Popupmenü „Tag“ ein Tag aus.
4 Geben Sie den Namen des neuen Attributs ein. Wenn Sie mehrere Attribute hinzufügen möchten, trennen Sie die
einzelnen Attributnamen durch ein Komma und ein Leerzeichen (z. B.
width, height).
5 Klicken Sie auf „OK“.
Bibliotheken, Tags und Attribute bearbeiten
Mit dem Tag-Bibliothek-Editor können Sie die Eigenschaften einer Tag-Bibliothek festlegen sowie Tags und Attribute
in einer Bibliothek bearbeiten.
More Help topics
“Festlegen von Codeeinstellungen” on page 324
Eigenschaften für eine Tag-Bibliothek festlegen
1 Wählen Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) in der Liste „Tags“ eine Tag-Bibliothek
(kein Tag) aus.
Note: Die Eigenschaften für Tag-Bibliotheken werden nur angezeigt, wenn eine Tag-Bibliothek ausgewählt wurde. Tag-
Bibliotheken werden durch die Ordner der obersten Ebene in der Liste „Tags“ dargestellt. Beispielsweise repräsentiert der
Ordner „HTML-Tags“ eine Tag-Bibliothek und der Ordner „abbr“ im Ordner „HTML-Tags“ ein Tag.
2
Wählen Sie in der Liste „Verwendet in“ alle Dokumenttypen aus, bei denen die Tag-Bibliothek verwendet werden soll.
Mit den hier ausgewählten Dokumenttypen legen Sie fest, welche Dokumenttypen Codehinweise für die angegebene
Tag-Bibliothek bieten. Wird beispielsweise für eine bestimmte Tag-Bibliothek die Option „HTML“ nicht ausgewählt,
werden in HTML-Dateien keine Codehinweise für diese Tag-Bibliothek angezeigt.
3 Optional: Geben Sie im Feld „Tag-Präfix“ das Präfix für die Tags ein.
Note: Anhand des Präfixes können Sie ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek erkennen. Bei
einigen Tag-Bibliotheken werden keine Präfixe verwendet.
4 Klicken Sie auf „OK“.
Tags in einer Tag-Bibliothek bearbeiten
1 Erweitern Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) in der Liste „Tags“ eine Tag-
Bibliothek und wählen Sie ein Tag aus.
372
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Wählen Sie unter „Tag-Format“ die gewünschten Optionen:
Zeilenumbrüche legt fest, wo Dreamweaver bei einem Tag Zeilenumbrüche einfügen soll.
Inhalt legt fest, wie Dreamweaver den Inhalt eines Tags einfügt, d. h., ob Regeln für Zeilenumbrüche, Formatierung
und Einzüge auf den Inhalt angewendet werden sollen.
Buchstabenart legt fest, ob ein bestimmtes Tag in Groß- oder Kleinbuchstaben geschrieben werden soll. Sie haben die
Wahl zwischen „Standard“, „Kleinbuchstaben“, „Großbuchstaben“ und „Gemischte Groß- und Kleinschreibung“.
Wenn Sie „Gemischte Groß- und Kleinschreibung“ wählen, wird das Dialogfeld „Gemischte Groß- und
Kleinschreibung des Tag-Namens“ angezeigt. Geben Sie das Tag in der Schreibweise ein, die in Dreamweaver beim
Einfügen des Tags verwendet werden soll (z. B.
getProperty) und klicken Sie auf „OK“.
Standardeinstellung festlegen legt die Standardschreibweise für alle Tags fest. Wählen Sie im Dialogfeld
„Standardschreibweise für Tag-Namen“ die Option <GROSSBUCHSTABEN> oder <kleinbuchstaben> und klicken
Sie auf „OK“.
Im Zweifelsfall sollten Sie Kleinbuchstaben als Standardschreibweise wählen. Dadurch ist die Kompatibilität mit dem
XML- und dem XHTML-Standard gewährleistet.
Tag-Attribute bearbeiten
1 Erweitern Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) in der Liste „Tags“ eine Tag-
Bibliothek. Erweitern Sie dann ein Tag und wählen Sie ein Tag-Attribut aus.
2 Wählen Sie im Popupmenü „Attribut-Schreibweise“ die Option „Standard“, „Kleinbuchstaben“,
„Großbuchstaben“ oder „Gemischte Groß- und Kleinschreibung“ aus.
Wenn Sie „Gemischte Groß- und Kleinschreibung“ wählen, wird das Dialogfeld „Attributname in Groß- und
Kleinschreibung“ angezeigt. Geben Sie das Attribut in der Schreibweise ein, die in Dreamweaver beim Einfügen des
Tags verwendet werden soll (z. B.
onClick) und klicken Sie auf „OK“.
Klicken Sie auf den Hyperlink „Als Standard festlegen“, um die Standardschreibweise für alle Attributnamen
festzulegen.
3 Wählen Sie im Popupmenü „Attribut-Typ“ den gewünschten Typ des Attributs.
Wenn Sie „Nummeriert“ wählen, geben Sie anschließend im Feld „Werte“ alle Werte ein, die für das Attribut zulässig
sein sollen. Trennen Sie die Werte durch Kommas und fügen Sie keine Leerzeichen ein. Beispielsweise werden die
aufgezählten Werte des
showborder-Attributs des cfchart-Tags als yes,no aufgeführt.
Bibliotheken, Tags und Attribute löschen
1 Wählen Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) in der Liste „Tags“ eine Tag-Bibliothek,
ein Tag oder ein Attribut aus.
2 Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–).
3 Klicken Sie auf „OK“, um das Element permanent zu löschen.
Das Element wird aus dem Feld „Tags“ entfernt.
4 Klicken Sie auf „OK“, um den Tag-Bibliothek-Editor zu schließen und den Löschvorgang zu beenden.
More Help topics
“Festlegen von Codeeinstellungen” on page 324
373
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
Benutzerdefinierte Tags in Dreamweaver importieren
Informationen zum Importieren benutzerdefinierter Tags in Dreamweaver
Bei Bedarf können Sie benutzerdefinierte Tags in Dreamweaver importieren, sodass sie zu einem festen Bestandteil
Ihrer Arbeitsumgebung werden. Wenn Sie dann beispielsweise in der Codeansicht beginnen, ein importiertes
benutzerdefiniertes Tag einzugeben, wird ein Menü mit Codehinweisen angezeigt, in dem die Attribute für dieses Tag
zur Auswahl stehen.
Tags aus XML-Dateien importieren
Sie können Tags aus einer XML-DTD-Datei (DTD = Document Type Definition) oder einem Schema importieren.
1 Öffnen Sie den Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“).
2 Klicken Sie auf die Plusschaltfläche (+) und wählen Sie „DTDSchema“ > „XML-DTD- oder Schema-Datei
importieren“ aus.
3 Geben Sie den Dateinamen oder die URL der DTD- oder Schemadatei ein.
4 Geben Sie das Präfix ein, das bei den Tags verwendet werden soll.
Note: Anhand des Präfixes können Sie ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek erkennen. Bei
einigen Tag-Bibliotheken werden keine Präfixe verwendet.
5 Klicken Sie auf „OK“.
Benutzerdefinierte ASP.NET-Tags importieren
Bei Bedarf können Sie benutzerdefinierte ASP.NET-Tags in Dreamweaver importieren.
Vergewissern Sie sich jedoch zuvor, dass das gewünschte Tag auf dem Testserver installiert ist, der im Dialogfeld „Site-
Definition“ definiert wurde (siehe “Testserver einrichten” on page 50). Kompilierte Tags (DLL-Dateien) müssen sich
im Ordner „/bin“ im Stammverzeichnis der Site befinden. Nicht kompilierte Tags (ASCX-Dateien) können sich in
einem beliebigen virtuellen Verzeichnis oder Unterverzeichnis auf dem Server befinden. Weitere Informationen
hierzu finden Sie in der Microsoft ASP.NET-Dokumentation.
1 Öffnen Sie in Dreamweaver eine ASP.NET-Seite.
2 Öffnen Sie den Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“).
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), wählen Sie eine der folgenden Optionen aus und klicken
Sie auf „OK“:
• Wenn Sie alle benutzerdefinierten ASP.NET-Tags vom Anwendungsserver importieren möchten, wählen Sie
„ASPNet“ > „Alle benutzerdefinierten ASPNet-Tags importieren“.
• Wenn Sie nur bestimmte benutzerdefinierte Tags vom Anwendungsserver importieren möchten, wählen Sie
„ASPNet“ > „Ausgewählte benutzerdefinierte ASPNet-Tags importieren“ aus. Klicken Sie bei gedrückter Strg-
Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die gewünschten Tags in der Liste.
JSP-Tags aus einer Datei oder von einem Server importieren (web.xml)
JSP-Tag-Bibliotheken können aus vielen verschiedenen Dateitypen oder von einem JSP-Server in Dreamweaver
importiert werden.
1 Öffnen Sie in Dreamweaver eine JSP-Seite.
374
VERWENDEN VON DREAMWEAVER
Mit Seitencode arbeiten
Last updated 10.4.2012
2 Öffnen Sie den Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“).
3 Klicken Sie auf die Plusschaltfläche (+) und wählen Sie „JSP“ > „Name der zu importierenden Datei (*.tld, *.jar,
*.zip)“.
4 Klicken Sie auf die Schaltfläche „Durchsuchen“ oder geben Sie den Namen der Datei ein, die die Tag-Bibliothek
enthält.
5 Geben Sie einen URI zur Identifizierung der Tag-Bibliothek ein.
Der URI (Uniform Resource Identifier) besteht oftmals aus der URL der Organisation, die die Tag-Bibliothek
verwaltet. Die URL dient hierbei nicht zum Anzeigen der Website der Organisation, sondern lediglich als Kennung
der Tag-Bibliothek.
6 (Optional) Geben Sie das Präfix ein, das bei den Tags verwendet werden soll. Einige Tag-Bibliotheken verwenden
ein Präfix, um ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek zu identifizieren.
7 Klicken Sie auf „OK“.
JRun-Tags importieren
Wenn Sie Adobe® JRun™ verwenden, können Sie JRun-Tags in Dreamweaver importieren.
1 Öffnen Sie in Dreamweaver eine JSP-Seite.
2 Öffnen Sie den Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“).
3 Klicken Sie auf die Plusschaltfläche (+) und wählen Sie „JSP“ > „JRUN-Server-Tags aus Ordner importieren“.
4 Geben Sie den Namen des Ordners ein, der die JRun-Tags enthält.
5 Geben Sie einen URI zur Identifizierung der Tag-Bibliothek ein.
Der URI (Uniform Resource Identifier) besteht oftmals aus der URL der Organisation, die die Tag-Bibliothek
verwaltet. Die URL dient hierbei nicht zum Anzeigen der Website der Organisation, sondern lediglich als Kennung
der Tag-Bibliothek.
6 (Optional) Geben Sie das Präfix ein, das bei den Tags verwendet werden soll. Einige Tag-Bibliotheken verwenden
ein Präfix, um ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek zu identifizieren.
7 Klicken Sie auf „OK“.
375
Last updated 10.4.2012
Chapter 12: Hinzufügen von JavaScript-
Verhalten
Verwenden von JavaScript-Verhalten (allgemeine
Anweisungen)
JavaScript-Verhalten
Mit Adobe® Dreamweaver® CS5-Verhalten wird JavaScript-Code in Dokumente eingefügt, damit Besucher Webseiten
auf unterschiedliche Weise ändern oder bestimmte Aufgaben starten können. Ein Verhalten stellt eine Kombination
eines Ereignisses mit einer durch dieses Ereignis ausgelösten Aktion dar. Im Bedienfeld „Verhalten“ können Sie einer
Seite ein Verhalten hinzufügen, indem Sie eine Aktion angeben und anschließend die Ereignisse angeben, die diese
Aktion auslösen.
Note: Verhaltenscode ist clientseitiger JavaScript-Code, d. h., er wird in Browsern ausgeführt und nicht auf Servern.
Ereignisse sind von Browsern generierte Meldungen, die angeben, dass ein Besucher der Seite einen bestimmten
Vorgang durchgeführt hat. Wenn ein Besucher beispielsweise den Mauszeiger auf einen Hyperlink setzt, generiert der
Browser für diesen Hyperlink ein
onMouseOver-Ereignis. Anschließend überprüft der Browser, ob in diesem Fall ein
bestimmter (auf der angezeigten Seite angegebener) JavaScript-Code ausgeführt werden muss. Für die verschiedenen
Seitenelemente sind unterschiedliche Ereignisse definiert. Bei den meisten Browsern sind beispielsweise die Ereignisse
onMouseOver und onClick Hyperlinks zugeordnet, während das Ereignis onLoad Bildern und dem body-Abschnitt
des Dokuments zugeordnet ist.
Eine Aktion besteht aus zuvor geschriebenem JavaScript-Code, über den eine Aufgabe ausgeführt wird, z. B. Öffnen
eines Browserfensters, Anzeigen oder Ausblenden eines AP-Elements, Wiedergeben von Audiodateien oder Anhalten
eines Adobe Shockwave-Films. Die zum Lieferumfang von Dreamweaver gehörenden Aktionen bieten eine maximale
browserübergreifende Kompatibilität.
Nachdem Sie für ein Seitenelement ein Verhalten definiert haben, ruft das Verhalten die einem Ereignis zugeordnete
Aktion (den JavaScript-Code) auf, wenn das Ereignis für dieses Element eintritt. (Die Ereignisse zum Auslösen von
Aktionen sind je nach Browser verschieden.) Wenn Sie beispielsweise die Aktion „Popup-Meldung“ mit einem
Hyperlink verknüpfen und festlegen, dass sie durch das Ereignis
onMouseOver ausgelöst wird, wird die Meldung
angezeigt, sobald der Mauszeiger auf diesen Hyperlink gesetzt wird.
Ein einzelnes Ereignis kann mehrere verschiedene Aktionen auslösen. Sie können festlegen, in welcher Reihenfolge
diese Aktionen ausgeführt werden.
Dreamweaver verfügt über etwa zwei Dutzend Verhaltensaktionen. Weitere Aktionen finden Sie auf der Exchange-
Website unter www.adobe.com/go/dreamweaver_exchange_de sowie auf den Websites von Drittanbietern. Wenn Sie
gute Kenntnisse in JavaScript haben, können Sie auch benutzerdefinierte Aktionen schreiben.
Note: Die Begriffe Verhalten und Aktion sind Dreamweaver-spezifisch und keine HTML-Begriffe. Aus Sicht des Browsers
ist eine Aktion ganz normaler JavaScript-Code.
Überblick über das Bedienfeld „Verhalten“
Im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) können Sie für Seitenelemente (bzw. Tags) ein Verhalten
definieren und Parameter der zuvor definierten Verhalten ändern.
376
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Verhalten, die dem gegenwärtig ausgewählten Seitenelement bereits zugewiesen wurden, sind in der Verhaltenliste
(dem Hauptbereich des Bedienfelds) in alphabetischer Reihenfolge nach Ereignissen sortiert aufgeführt. Wenn für ein
Ereignis mehrere Aktionen aufgeführt sind, werden diese in der Reihenfolge der Auflistung ausgeführt. Wenn die
Verhaltenliste keinen Eintrag enthält, wurde für das aktuelle ausgewählte Element kein Verhalten definiert.
Das Bedienfeld „Verhalten“ enthält die folgenden Optionen:
Festgelegte Ereignisse zeigen Zeigt nur die mit dem aktuellen Dokument verbundenen Ereignisse an. Ereignisse sind
in client- und serverseitige Kategorien unterteilt. Die Ereignisse der einzelnen Kategorien sind in einer ausblendbaren
Liste aufgeführt. „Festgelegte Ereignisse anzeigen“ ist die Standardansicht.
Alle Ereignisse zeigen Zeigt alle Ereignisse für eine bestimmte Kategorie in alphabetischer Reihenfolge an.
Verhalten hinzufügen (+) Zeigt ein Menü mit Aktionen an, die mit dem aktuellen ausgewählten Element verbunden
werden können. Wenn Sie in dieser Liste eine Aktion auswählen, wird ein Dialogfeld angezeigt, in dem Sie Parameter
für die Aktion angeben können. Wenn alle Aktionen abgeblendet sind, können vom ausgewählten Element keine
Ereignisse generiert werden.
Ereignis entfernen (–) Entfernt das ausgewählte Ereignis samt Aktion aus der Verhaltenliste.
Pfeil-nach-oben und Pfeil-nach-unten Verschieben die ausgewählte Aktion in der Verhaltenliste für ein bestimmtes
Ereignis nach oben oder nach unten. Die Reihenfolge der Aktionen kann nur für ein bestimmtes Ereignis geändert
werden. Beispielsweise können Sie die Reihenfolge ändern, in der verschiedene Aktionen für das
onLoad-Ereignis
auftreten. Alle
onLoad-Aktionen bleiben aber in der Verhaltenliste. Bei Aktionen, die in der Liste nicht nach oben oder
unten verschoben werden können, sind die Pfeilschaltflächen deaktiviert.
Ereignisse Zeigt ein Popupmenü mit allen Ereignissen an, die die Aktion auslösen können. Das Popupmenü wird nur
angezeigt, wenn ein Ereignis ausgewählt ist. (Dieses Menü wird angezeigt, wenn Sie auf die Pfeilschaltfläche neben
dem Namen des ausgewählten Ereignisses klicken.) Je nach dem ausgewählten Objekt werden verschiedene Ereignisse
angezeigt. Wenn die erwarteten Ereignisse nicht angezeigt werden, überprüfen Sie, ob das richtige Seitenelement oder
Tag ausgewählt ist. (Verwenden Sie zum Auswählen eines bestimmten Tags den Tag-Selektor in der linken unteren
Ecke des Dokumentfensters.)
Note: In Klammern stehende Ereignisnamen sind nur für Hyperlinks verfügbar. Wenn Sie einen dieser Ereignisnamen
auswählen, wird dem ausgewählten Seitenelement automatisch ein Null-Hyperlink hinzugefügt und das Verhalten wird
diesem Hyperlink zugeordnet (und nicht dem Element selbst). Im HTML-Code wird ein Null-Hyperlink wie folgt
angegeben: href="javascript:;"
Ereignisse
Jeder Browser verfügt über eine Gruppe von Ereignissen, die Sie den im Menü „Aktionen (+)“ des Bedienfelds
„Verhalten“ aufgeführten Aktionen zuordnen können. Wenn ein Besucher einer Webseite bestimmte Vorgänge auf
der Seite durchführt und beispielsweise auf ein Bild klickt, generiert der Browser Ereignisse. Mit diesen Ereignissen
können JavaScript-Funktionen aufgerufen werden, die eine Aktion ausführen. Dreamweaver beinhaltet zahlreiche
gängige Aktionen, die mit diesen Ereignissen ausgelöst werden können.
Die Namen und Beschreibungen der Ereignisse der einzelnen Browser finden Sie im Dreamweaver Support Center
unter www.adobe.com/go/dreamweaver_support_de.
377
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Je nach ausgewähltem Objekt werden im Menü „Ereignisse“ unterschiedliche Ereignisse angezeigt. Wenn Sie
herausfinden möchten, welche Ereignisse ein bestimmter Browser für ein bestimmtes Seitenelement unterstützt,
können Sie das Seitenelement in ein Dokument einfügen und ein Verhalten definieren. Überprüfen Sie dann im
Bedienfeld „Verhalten“ das Menü „Ereignisse“. (Ereignisse werden standardmäßig aus der HTML 4.01-Ereignisliste
abgerufen und von den meisten modernen Browsern unterstützt.) Ereignisse sind möglicherweise abgeblendet
(hellgrau angezeigt), wenn die jeweiligen Objekte noch nicht auf der Seite vorhanden sind oder wenn das ausgewählte
Objekt keine Ereignisse empfangen kann. Wenn die erwarteten Ereignisse nicht angezeigt werden, stellen Sie sicher,
dass das richtige Objekt ausgewählt ist.
Wenn Sie für ein Bild ein Verhalten definieren, werden manche Ereignisse (wie
onMouseOver) in Klammern
angezeigt. Diese Ereignisse stehen nur für Hyperlinks zur Verfügung. Wenn Sie eines dieser Ereignisse auswählen,
setzt Dreamweaver die Bildreferenz zwischen
<a>-Tags, um einen Null-Hyperlink zu definieren. Der Null-Hyperlink
wird im Eigenschafteninspektor im Textfeld „Hyperlink“ durch
javascript:; angegeben. Sie können den Wert des
Null-Hyperlinks ändern und so einen richtigen Hyperlink zu einer anderen Seite erstellen. Wenn Sie den JavaScript-
Hyperlink löschen, ohne ihn durch einen anderen Hyperlink zu ersetzen, wird das Verhalten entfernt.
Angaben zur Verwendung eines bestimmten Ereignisses in einem bestimmten Browser finden Sie, indem Sie das
entsprechende Ereignis in den Dateien des Ordners „Dreamweaver/Configuration/Behaviors/Events“ suchen.
Verhalten definieren
Sie können für ein ganzes Dokument (d. h. für das <body>-Tag), Hyperlinks, Bilder, Formularelemente oder eine
Reihe weiterer HTML-Elemente Verhalten definieren.
Die für ein bestimmtes Element unterstützten Ereignisse hängen vom ausgewählten Zielbrowser ab.
Sie können für jedes Ereignis mehrere Aktionen festlegen. Aktionen werden in der Reihenfolge ausgeführt, in der sie
in der Spalte „Aktionen“ des Bedienfelds „Verhalten“ aufgeführt sind.
1 Wählen Sie ein Element auf der Seite aus, z. B. ein Bild oder einen Hyperlink.
Soll ein Verhalten für eine ganze Seite definiert werden, klicken Sie im Tag-Selektor unten links im Dokumentfenster
auf das Tag
<body>.
2 Wählen Sie „Fenster“ > „Verhalten“ aus.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie eine Aktion im Menü „Verhalten
hinzufügen“ aus.
Aktionen, die in diesem Menü abgeblendet sind, können nicht ausgewählt werden. Wenn sie abgeblendet sind, fehlt
im aktuellen Dokument möglicherweise ein erforderliches Objekt. Die Aktion „Shockwave oder SWF steuern“ ist
beispielsweise abgeblendet, wenn das Dokument keine Shockwave- oder SWF-Dateien enthält.
Wenn Sie eine Aktion auswählen, wird ein Dialogfeld mit Parametern und Anweisungen für die Aktion angezeigt.
4 Geben Sie Parameter für die Aktion ein und klicken Sie auf „OK“.
Alle Aktionen, die in Dreamweaver zur Verfügung stehen, können in modernen Browsern eingesetzt werden. Einige
Aktionen funktionieren nicht in älteren Browsern, aber sie verursachen keine Fehler.
Note: Zielelemente müssen eine eindeutige ID aufweisen. Wenn Sie z. B. einem Bild das Verhalten „Bild austauschen“
zuweisen möchten, muss das Bild eine ID haben. Wenn für das Element keine ID festgelegt wurde, wird eine solche ID
automatisch von Dreamweaver erstellt.
378
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
5 Das Standardereignis, das die Aktion auslöst, wird in der Spalte „Ereignisse“ angezeigt. Wenn es sich hierbei nicht
um das gewünschte auslösende Ereignis handelt, wählen Sie im Popupmenü „Ereignisse“ ein anderes Ereignis aus.
(Um das Menü „Ereignisse“ zu öffnen, wählen Sie im Bedienfeld „Verhalten“ ein Ereignis oder eine Aktion aus und
klicken Sie dann zwischen dem Namen des Ereignisses und dem Namen der Aktion auf den nach unten zeigenden
schwarzen Pfeil.)
Verhalten ändern oder löschen
Nach dem Definieren eines Verhaltens können Sie das Ereignis ändern, das die Aktion auslöst, Aktionen hinzufügen
oder entfernen und die Parameter der Aktionen ändern.
1 Wählen Sie ein Objekt aus, für das ein Verhalten definiert ist.
2 Wählen Sie „Fenster“ > „Verhalten“ aus.
3 Nehmen Sie die gewünschten Änderungen vor:
• Um die Parameter einer Aktion zu bearbeiten, doppelklicken Sie auf den entsprechenden Namen oder wählen Sie
die Aktion aus. Drücken Sie dann die Eingabetaste (Windows) bzw. Return (Macintosh). Ändern Sie anschließend
im Dialogfeld die Parameter und klicken Sie auf „OK“.
• Um die Reihenfolge der Aktionen für ein bestimmtes Ereignis zu ändern, wählen Sie das Verhalten aus und klicken
Sie auf den Pfeil nach oben oder unten. Sie können zudem die Aktion markieren und ausschneiden und dann an
der gewünschten Position zwischen den anderen Aktionen einfügen.
• Um ein Verhalten zu löschen, wählen Sie es aus und klicken Sie auf die Schaltfläche mit dem Minuszeichen (–) oder
drücken Sie die Entf-Taste.
Verhalten aktualisieren
1 Wählen Sie ein Element aus, für das ein Verhalten definiert ist.
2 Wählen Sie „Fenster“ > „Verhalten“ aus und doppelklicken Sie auf das Verhalten.
3 Nehmen Sie im Dialogfeld des Verhaltens die gewünschten Änderungen vor und klicken Sie auf „OK“.
Daraufhin werden alle Vorkommen des Verhaltens auf der entsprechenden Seite aktualisiert. Wenn dieses Verhalten
für andere Seiten der Site definiert ist, müssen Sie es auf jeder Seite einzeln aktualisieren.
Verhalten von Drittanbietern herunterladen und installieren
Auf der Exchange-Website für Dreamweaver (www.adobe.com/go/dreamweaver_exchange_de) sind viele
Erweiterungen verfügbar.
1
Wählen Sie „Fenster“ > „Verhalten“ und dann im Menü „Verhalten hinzufügen“ die Option „Weitere Verhalten“ aus.
Die Exchange-Website wird im primären Browser geöffnet.
2 Suchen Sie nach neuen Paketen.
3 Laden Sie das gewünschte Erweiterungspaket herunter und installieren Sie es.
Weitere Informationen finden Sie unter “Erweiterungen in Dreamweaver hinzufügen und verwalten” on page 38.
379
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Anwenden integrierter JavaScript-Verhalten
Integrierte Verhalten verwenden
Die im Lieferumfang von Dreamweaver enthaltenen Verhalten sind für die Verwendung in modernen Browsern
geeignet. In älteren Browsern schlagen diese Verhalten ohne Fehlermeldung fehl.
Note: Die Dreamweaver-Aktionen wurden sehr sorgfältig erstellt, damit sie in möglichst vielen Browsern verwendet
werden können. Wenn Sie Code manuell aus einer Dreamweaver-Aktion entfernen oder durch benutzerdefinierten Code
ersetzen, wird die browserübergreifende Kompatibilität möglicherweise eingeschränkt.
Bei der Konzeption der Dreamweaver-Aktionen wurde zwar eine maximale browserübergreifende Kompatibilität
angestrebt, aber JavaScript wird von manchen Browsern nicht unterstützt und von vielen Internetbenutzern
deaktiviert. Um optimale plattformübergreifende Ergebnisse zu erzielen, sollten Sie in
<noscript> eingeschlossene
alternative Inhalte bereitstellen, damit Benutzer ohne JavaScript-Unterstützung die Site dennoch besuchen können.
Verhalten „JavaScript aufrufen“ definieren
Mit dem Verhalten „JavaScript aufrufen“ wird beim Eintreten eines Ereignisses eine benutzerdefinierte Funktion oder
JavaScript-Codezeile ausgeführt. (Sie können das Skript selbst erstellen oder Code verwenden, der aus diversen
kostenlos verfügbaren JavaScript-Bibliotheken im Internet stammt.)
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„JavaScript aufrufen“ aus.
2 Geben Sie den genauen auszuführenden JavaScript-Code oder den Namen einer Funktion ein.
Wenn Sie beispielsweise eine Zurück-Schaltfläche erstellen möchten, geben Sie Folgendes ein:
if (history.length > 0){history.back()}. Wenn Sie den Code in eine Funktion integriert haben, geben Sie
nur den Funktionsnamen ein (beispielsweise
hGoBack()).
3 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Eigenschaft ändern“ definieren
Mit dem Verhalten „Eigenschaft ändern“ können Sie den Wert einer Objekteigenschaft ändern (z. B. die
Hintergrundfarbe eines div oder die Aktion eines Formulars).
Note: Verwenden Sie dieses Verhalten nur, wenn Sie sich sehr gut mit HTML und JavaScript auskennen.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Eigenschaft ändern“ aus.
2 Wählen Sie im Menü „Elementtyp“ einen Elementtyp aus, um alle bekannten Elemente dieses Typs anzuzeigen.
3 Wählen Sie im Menü „Element-ID“ ein Element aus.
4 Wählen Sie im Menü „Eigenschaft“ eine Eigenschaft aus oder geben Sie im Feld den Namen der Eigenschaft ein.
5 Geben Sie den neuen Wert für die Eigenschaft in das Feld „Neuer Wert“ ein.
6 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Browser überprüfen“ definieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
380
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Verhalten „Plug-In überprüfen“ definieren
Mit dem Verhalten „Plug-In überprüfen“ können Sie Besucher zu unterschiedlichen Seiten umleiten, je nachdem, ob
das angegebene Plug-In installiert ist. Sie können beispielsweise festlegen, dass Besucher, die Shockwave verwenden,
auf eine bestimmte Seite umgeleitet werden, und Besucher, die das Programm nicht verwenden, auf eine andere Seite.
Note: Bestimmte Plug-Ins können in Internet Explorer nicht mit JavaScript ermittelt werden. Sie können jedoch Flash
oder Director auswählen, damit der Seite VBScript-Code hinzugefügt wird, mit dem diese Plug-Ins in Internet Explorer
unter Windows ermittelt werden können. Mit Internet Explorer für Mac OS ist die Plug-In-Erkennung nicht möglich.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Plug-In überprüfen“ aus.
2 Wählen Sie im Menü „Plug-In“ ein Plug-In aus oder klicken Sie auf „Eingeben“ und geben Sie im angrenzenden
Feld den genauen Namen des Plug-Ins ein.
Sie müssen für das Plug-In genau den Namen verwenden, der in Netscape Navigator auf der Registerkarte „Über Plug-
Ins“ in Fettformatierung angegeben ist. (Wählen Sie unter Windows den Navigator-Befehl „Hilfe“ > „Über Plug-Ins“
und auf Macintosh-Systemen im Menü „Apple“ die Option „Über Plug-Ins“ aus.)
3 Geben Sie im Feld „Wenn gefunden, gehe zu URL“ eine URL für Besucher an, die über das Plug-In verfügen.
Wenn Sie eine Remote-URL eingeben, müssen Sie zusätzlich zur Adresse auch das Präfix http:// angeben. Wenn Sie
das Feld leer lassen, bleiben Besucher auf derselben Seite.
4 Geben Sie im Feld „Sonst gehe zu URL“ eine alternative URL für Besucher an, die nicht über das Plug-In verfügen.
Wenn Sie das Feld leer lassen, bleiben Besucher auf derselben Seite.
5 Legen Sie fest, welche Seite angezeigt werden soll, wenn eine Plug-In-Erkennung nicht möglich ist. Wenn die Plug-
Ins nicht ermittelt werden können, werden Besucher in der Standardeinstellung zu der URL umgeleitet, die im Feld
„Sonst gehe zu URL“ angegeben ist. Wenn die Besucher stattdessen zu der ersten im Feld „Wenn gefunden, gehe
zu URL“ angegebenen URL umgeleitet werden sollen, aktivieren Sie die Option „Immer zum ersten URL wechseln,
wenn keine Erkennung möglich“. Wenn diese Option aktiviert ist, wird davon ausgegangen, dass das Plug-In
vorhanden ist, es sei denn, im Browser wird explizit angegeben, dass das Plug-In nicht vorhanden ist. Sie sollten
diese Option in der Regel dann auswählen, wenn der Inhalt des Plug-Ins integraler Bestandteil der Seite ist. Lassen
Sie sie andernfalls deaktiviert.
Note: Diese Option gilt nur für Internet Explorer. Netscape Navigator kann Plug-Ins immer ermitteln.
6 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Shockwave oder SWF steuern“ definieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Verhalten „AP-Element ziehen“ definieren
Mit dem Verhalten „AP-Element ziehen“ kann der Besucher ein absolut positioniertes Element (AP-Element) ziehen.
Dieses Verhalten eignet sich zum Erstellen von Puzzles, Schiebereglern und anderen beweglichen Elementen der
Benutzeroberfläche.
Sie können unter anderem Folgendes festlegen: die Richtung, in die der Besucher das AP-Element ziehen kann
(horizontal, vertikal oder in eine andere Richtung); ein Ziel, zu dem der Besucher das AP-Element ziehen soll; ob das
AP-Element am Ziel ausgerichtet werden soll, wenn es sich innerhalb einer bestimmten Pixelzahl vom Ziel befindet;
was geschehen soll, wenn sich das AP-Element am Ziel befindet.
381
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Das Verhalten „AP-Element ziehen“ muss aufgerufen werden, bevor der Besucher das AP-Element ziehen kann. Es
empfiehlt sich daher, „AP-Element ziehen“ an das
body-Objekt anzufügen (mit dem onLoad-Ereignis).
1 Wählen Sie „Einfügen“ > „Layoutobjekte“ > „AP Div“ aus oder klicken Sie im Bedienfeld „Einfügen“ auf die
Schaltfläche „AP Div zeichnen“ und zeichnen Sie dann in der Entwurfsansicht des Dokumentfensters ein AP-Div.
2 Klicken Sie im Tag-Selektor unten links im Dokumentfenster auf <body>.
3 Wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option „AP-Element ziehen“ aus.
Wenn „AP-Element ziehen“ nicht verfügbar ist, ist wahrscheinlich ein AP-Element ausgewählt.
4 Wählen Sie im Popupmenü „AP-Element“ das AP-Element aus.
5 Wählen Sie im Popupmenü „Bewegung“ entweder „Beschränkt“ oder „Unbeschränkt“ aus.
Eine unbeschränkte Bewegung eignet sich für Puzzles und andere Drag & Drop-Spiele. Wählen Sie für Schieberegler
und bewegliche Objekte wie Schubladen, Vorhänge und Jalousien eine beschränkte Bewegung aus.
6 Wenn Sie eine beschränkte Bewegung auswählen, geben Sie Werte in den Feldern „O“, „U“, „L“ und „R“ ein (in
Pixel).
Die Werte sind relativ zur Anfangsposition des AP-Elements. Wenn Sie die Bewegung auf einen rechteckigen Bereich
beschränken möchten, geben Sie in allen vier Feldern einen positiven Wert ein. Um nur eine vertikale Bewegung
zuzulassen, geben Sie in den Feldern „O“ und „U“ einen positiven Wert und in den Feldern „L“ und „R“ den Wert „0“
ein. Um nur eine horizontale Bewegung zuzulassen, geben Sie in den Feldern „L“ und „R“ einen positiven Wert und
in den Feldern „O“ und „U“ den Wert „0“ ein.
7 Geben Sie in den Feldern „Links“ und „Oben“ die Werte für das Ablageziel ein (in Pixel).
Beim Ablageziel handelt es sich um die Stelle, an die der Besucher das AP-Element ziehen soll. Ein AP-Element
befindet sich am Ablageziel, wenn seine linke und obere Koordinate mit den Werten in den Feldern „Links“ und
„Oben“ übereinstimmt. Die Werte sind relativ zur oberen linken Ecke des Browserfensters. Klicken Sie auf „Aktuelle
Pos. abrufen“, damit die aktuelle Position des AP-Elements automatisch in die Felder eingetragen wird.
8 Geben Sie im Feld „Einrasten, falls innerhalb von“ einen Wert (in Pixel) ein, um festzulegen, wie nahe der Besucher
das AP-Element an das Ablageziel ziehen muss, damit das AP-Element am Ziel ausgerichtet wird.
Wenn Sie höhere Werte eingeben, kann der Besucher das Ablageziel leichter finden.
9 Bei einfachen Puzzle- und Hintergrundbearbeitungen müssen keine weiteren Schritte ausgeführt werden. Wenn
Sie auf die Registerkarte „Erweitert“ klicken, können Sie den Ziehpunkt für das AP-Element definieren, die
Bewegung des AP-Elements beim Ziehen verfolgen und festlegen, dass eine Aktion ausgelöst wird, wenn das AP-
Element abgelegt wird.
10 Sie können festlegen, dass der Besucher auf einen bestimmten Bereich des AP-Elements klicken muss, damit das
AP-Element gezogen werden kann. Wählen Sie dazu im Menü „Ziehgriff“ die Option „Bereich im Element“ aus
und geben Sie die linke und obere Koordinate sowie die Breite und Höhe des Ziehpunkts in den entsprechenden
Feldern ein.
Diese Option ist nützlich, wenn das Bild im AP-Element ein Element enthält, das sich zum Ziehen eignet,
beispielsweise eine Titelleiste oder der Griff einer Schublade. Legen Sie diese Option nicht fest, wenn Sie wünschen,
dass ein Besucher auf eine beliebige Stelle im AP-Element klicken kann, um dieses Element zu ziehen.
11 Wählen Sie unter „Beim Ziehen“ die gewünschten Optionen aus:
• Aktivieren Sie „Element nach vorn bringen, dann“, wenn das AP-Element beim Ziehen an die erste Position
innerhalb der Stapelreihenfolge verschoben werden soll. Wenn Sie diese Option aktivieren, geben Sie im
Popupmenü an, ob das AP-Element im Vordergrund bleiben oder an seine ursprüngliche Position in der
Stapelreihenfolge zurückgesetzt werden soll.
382
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
• Geben Sie JavaScript-Code oder einen Funktionsnamen (z. B. monitorAPelement()) im Feld „JavaScript
aufrufen“ ein, damit der Code oder die Funktion beim Ziehen des AP-Elements wiederholt ausgeführt wird. Sie
können beispielsweise eine Funktion schreiben, die die Koordinaten des AP-Elements verfolgt und in einem
Textfeld Hinweise anzeigt, wie z. B. „Sie kommen näher“ oder „Sie sind weit vom Ablageziel entfernt“.
12 Geben Sie JavaScript-Code oder einen Funktionsnamen (z. B. evaluateAPelementPos()) im zweiten Feld
„JavaScript aufrufen“ ein, damit der Code oder die Funktion beim Ablegen des AP-Elements ausgeführt wird.
Aktivieren Sie „Nur wenn eingerastet“, wenn der JavaScript-Code nur ausgeführt werden soll, wenn sich das AP-
Element am Ablageziel befindet.
13 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Informationen über das ziehbare AP-Element zusammenstellen
Wenn Sie einem Objekt das Verhalten „AP-Element ziehen“ zuweisen, fügt Dreamweaver die Funktion
MM_dragLayer() in den head-Bereich des Dokuments ein. (Bei dieser Funktion wird die alte Benennungskonvention
für AP-Elemente [d. h. „Ebene“] übernommen, damit Ebenen, die aus früheren Dreamweaver-Versionen stammen,
weiterhin bearbeitet werden können.) Diese Funktion registriert das AP-Element als ziehbar und definiert außerdem
für jedes ziehbare AP-Element die drei Eigenschaften
MM_LEFTRIGHT, MM_UPDOWN und MM_SNAPPED. Anhand dieser
Eigenschaften können Sie in Ihren JavaScript-Funktionen die relative horizontale und vertikale Position des AP-
Elements ermitteln und zudem feststellen, ob sich das AP-Element am Ablageziel befindet.
Note: Die hier bereitgestellten Informationen richten sich nur an erfahrene JavaScript-Programmierer.
Zum Beispiel zeigt die folgende Funktion den Wert der
MM_UPDOWN-Eigenschaft (die aktuelle vertikale Position des
AP-Elements) in einem Formularfeld mit der Bezeichnung
curPosField an. (Formularfelder eignen sich zum
Anzeigen fortlaufend aktualisierter Informationen, da sie dynamisch sind, d. h., Sie können ihren Inhalt ändern,
nachdem die Seite geladen wurde.)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
Die Werte von MM_UPDOWN oder MM_LEFTRIGHT können nicht nur in einem Formularfeld angezeigt werden, sondern
auch anderweitig verwendet werden. Sie können beispielsweise eine Funktion schreiben, die abhängig davon, wie nahe
der Wert am Ablagebereich ist, eine entsprechende Meldung im Formularfeld anzeigt. Sie können zudem eine andere
Funktion aufrufen, um je nach Wert ein AP-Element ein- oder auszublenden.
Die Eigenschaft
MM_SNAPPED enthält nützliche Informationen für den Fall, dass eine Seite mehrere AP-Elemente
enthält, die sich alle am Ablageziel befinden müssen, bevor der Besucher zur nächsten Seite oder zur nächsten Aufgabe
übergehen kann. Sie können beispielsweise eine Funktion schreiben, mit der gezählt wird, wie viele AP-Elemente für
MM_SNAPPED den Wert true haben, und diese Funktion jedes Mal aufrufen, wenn ein AP-Element abgelegt wird.
Wenn so viele AP-Elemente ausgerichtet sind, dass der angegebene Zählwert erreicht ist, können Sie den Besucher auf
die nächste Seite weiterleiten oder eine Meldung mit Glückwünschen einblenden.
Verhalten „Gehe zu URL“ definieren
Mit dem Verhalten „Gehe zu URL“ wird eine neue Seite im aktuellen Fenster oder im angegebenen Frame geöffnet.
Mit diesem Verhalten kann der Inhalt von mehreren Frames mit einem Mausklick geändert werden.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Gehe zu URL“ aus.
2 Wählen Sie in der Liste „Öffnen in“ ein Ziel für die URL aus.
383
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
In der Liste „Öffnen in“ sind automatisch alle Frames im aktuellen Frameset sowie das Hauptfenster aufgeführt. Wenn
keine Frames vorhanden sind, ist nur das Hauptfenster aufgeführt.
Note: Dieses Verhalten kann zu unerwarteten Ergebnissen führen, wenn ein Frame den Titel „top“, „blank“, „self“ oder
„parent“ hat. In Browsern werden diese Namen manchmal mit den Namen reservierter Ziele verwechselt.
3 Klicken Sie auf „Durchsuchen“, um ein zu öffnendes Dokument auszuwählen, oder geben Sie im Feld „URL“ den
Pfad und Dateinamen des Dokuments ein.
4 Wiederholen Sie die Schritte 2 und 3, um weitere Dokumente in anderen Frames zu öffnen.
5 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Sprungmenü“ definieren
Wenn Sie ein Sprungmenü über „Einfügen“ > „Formular“ > „Sprungmenü“ erstellen, wird in Dreamweaver ein
Menüobjekt erstellt und mit dem Verhalten „Sprungmenü“ (oder „Sprungmenü Gehe zu“) verbunden. In der Regel
ist es nicht erforderlich, das Verhalten „Sprungmenü“ für ein Objekt manuell zu definieren.
Ein vorhandenes Sprungmenü können Sie mit einer der beiden folgenden Methoden bearbeiten:
• Sie können Menüelemente bearbeiten und neu anordnen, die aufzurufenden Dateien und das Fenster ändern, in
dem diese Dateien geöffnet werden, indem Sie im Bedienfeld „Verhalten“ auf ein vorhandenes Sprungmenü-
Verhalten doppelklicken.
• Sie können die Elemente im Menü wie in anderen Menüs bearbeiten, indem Sie das Menü auswählen und im
Eigenschafteninspektor auf die Schaltfläche „Listenwerte“ klicken.
1 Erstellen Sie ein Sprungmenü, falls noch keins in Ihrem Dokument vorhanden ist.
2 Markieren Sie das Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Sprungmenü“ aus.
3 Nehmen Sie im Dialogfeld „Sprungmenü“ die gewünschten Änderungen vor und klicken Sie dann auf „OK“.
More Help topics
“Sprungmenüs” on page 304
“Dynamisches HTML-Formularmenü einfügen oder ändern” on page 723
Verhalten „Sprungmenü Gehe zu“ definieren
Das Verhalten „Sprungmenü Gehe zu“ ist mit dem Verhalten „Sprungmenü“ eng verknüpft. Mit „Sprungmenü Gehe
zu“ können Sie eine Schaltfläche „Gehe zu“ mit einem Sprungmenü verbinden. (Zur Verwendung dieses Verhaltens
muss im Dokument bereits ein Sprungmenü vorhanden sein.) Durch Klicken auf die Schaltfläche „Gehe zu“ wird der
im Sprungmenü ausgewählte Hyperlink geöffnet. Bei einem Sprungmenü wird die Schaltfläche „Gehe zu“ in der Regel
nicht benötigt. Durch Auswählen eines Elements in einem Sprungmenü wird normalerweise ohne weitere
Benutzereingriffe eine URL geladen. Wenn der Besucher jedoch ein Element auswählt, das im Sprungmenü bereits
ausgewählt ist, erfolgt kein Sprung. Im Allgemeinen spielt dies zwar keine Rolle. Wenn das Sprungmenü jedoch in
einem Frame angezeigt wird und die Sprungmenüelemente Verknüpfungen zu Seiten in anderen Frames enthalten,
ist die Schaltfläche „Gehe zu“ häufig nützlich, damit ein im Sprungmenü bereits ausgewähltes Element erneut
ausgewählt werden kann.
384
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Note: Wenn die Schaltfläche „Gehe zu“ mit einem Sprungmenü verwendet wird, gelangt der Benutzer ausschließlich über
diese Schaltfläche zu der URL des im Menü ausgewählten Eintrags. Wenn ein Benutzer im Sprungmenü ein
Menüelement auswählt, wird er nicht mehr automatisch auf eine andere Seite oder in einen anderen Frame umgeleitet.
1 Wählen Sie ein Objekt für die Schaltfläche „Gehe zu“ (in der Regel ein Schaltflächenbild) und dann im Menü
„Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option „Sprungmenü Gehe zu“ aus.
2 Wählen Sie im Menü „Wählen Sie ein Sprungmenü aus“ das Menü aus, das durch die Schaltfläche „Gehe zu“
aktiviert werden soll, und klicken Sie auf „OK“.
Verhalten „Browserfenster öffnen“ definieren
Mit dem Verhalten „Browserfenster öffnen“ können Sie eine Seite in einem neuen Fenster öffnen. Sie können die
Eigenschaften des neuen Fensters festlegen, einschließlich des Namens, der Größe und der Attribute (ob die Größe
des Fensters geändert werden kann, ob es eine Menüleiste hat usw.). Mit diesem Verhalten können Sie beispielsweise
ein großes Bild in einem separaten Fenster öffnen, wenn auf ein Miniaturbild geklickt wird, und die Größe des neuen
Fensters exakt an das Bild anpassen.
Wenn Sie keine Attribute für das Fenster angeben, wird es in der gleichen Größe und mit den gleichen Attributen wie
das Fenster geöffnet, über das es geöffnet wurde. Wenn Sie dagegen Attribute für das Fenster angeben, werden
automatisch alle Attribute deaktiviert, die nicht explizit aktiviert sind. Wenn Sie keine Attribute für das Fenster
festlegen, wird es beispielsweise mit einer Größe von 1024 x 768 Pixel, einer Navigationsleiste (mit den Schaltflächen
„Zurück“, „Weiter“, „Home“ und „Aktualisieren“), einer Standortleiste (mit der URL), einer Statusleiste (ganz unten,
für Statusmeldungen) und einer Menüleiste (mit den Menüs „Datei“, „Bearbeiten“, „Ansicht“ und anderen Menüs)
geöffnet. Wenn Sie die Fenstergröße ausdrücklich auf 640 x 480 Pixel setzen und keine weiteren Attribute festlegen,
wird das Fenster mit einer Größe von 640 x 480 Pixel, jedoch ohne Symbolleisten geöffnet.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Browserfenster öffnen“ aus.
2 Klicken Sie auf „Durchsuchen“, um eine Datei auszuwählen, oder geben Sie die anzuzeigende URL ein.
3 Legen Sie die Optionen für die Fensterbreite und -höhe (in Pixel) sowie für die verschiedenen Symbolleisten,
Bildlaufleisten, Ziehpunkte zur Größenänderung usw. fest. Weisen Sie dem Fenster einen Namen zu (ohne
Leerzeichen oder Sonderzeichen), wenn Sie mit Hyperlinks darauf verweisen oder es mit JavaScript steuern
möchten.
4 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Sound abspielen“ definieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Verhalten „Popup-Meldung“ definieren
Mit dem Verhalten „Popup-Meldung“ wird ein JavaScript-Warndialogfeld mit einer Meldung angezeigt, die Sie
festlegen können. JavaScript-Warndialogfelder verfügen nur über eine Schaltfläche („OK“), daher eignet sich dieses
Verhalten nicht dazu, Benutzern eine Auswahl anzubieten, sondern lediglich dazu, Informationen bereitzustellen.
Sie können in den Text alle gültigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrücke von
JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten möchten, schließen Sie ihn in geschweiften
Klammern (
{}) ein. Wenn Sie geschweifte Klammern anzeigen möchten, stellen Sie ihnen einen umgekehrten
Schrägstrich (
\{) voran.
Beispiel
385
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
The URL for this page is {window.location}, and today is {new Date()}.
Note: Die Darstellung der Warnmeldung wird im Browser gesteuert. Wenn Sie Optionen zur Darstellung festlegen
möchten, können Sie das Verhalten „Browserfenster öffnen“ verwenden.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Popup-Meldung“ aus.
2 Geben Sie die Meldung im Feld „Meldung“ ein.
3 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Bilder vorausladen“ definieren
Mit dem Verhalten „Bilder vorausladen“ wird die Zeit bis zur Anzeige verkürzt, indem Bilder zwischengespeichert
werden, die beim ersten Anzeigen der Seite nicht sichtbar sind (z. B. Bilder, die mit Verhalten oder Skripts in die Seite
gesetzt werden).
Note: Mit dem Verhalten „Bild austauschen“ werden alle markierten Bilder automatisch vorgeladen, wenn Sie im
Dialogfeld „Bild austauschen“ die Option „Bilder vorausladen“ aktivieren. Deshalb müssen Sie beim Verwenden von
„Bild austauschen“ das Verhalten „Bilder vorausladen“ nicht manuell hinzufügen.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Bilder vorausladen“ aus.
2 Klicken Sie auf „Durchsuchen“, um eine Bilddatei auszuwählen, oder geben Sie den Pfad und den Dateinamen
eines Bilds im Feld „Bildquelldatei“ ein.
3 Klicken Sie oben im Dialogfeld auf die Schaltfläche mit dem Pluszeichen (+), um das Bild zur Liste „Bilder
vorausladen“ hinzuzufügen.
4 Wiederholen Sie die Schritte 2 und 3 für alle weiteren Bilder, die Sie auf der aktuellen Seite vorausladen möchten.
5 Wenn Sie ein Bild aus der Liste „Bilder vorausladen“ entfernen möchten, wählen Sie es aus und klicken Sie auf die
Schaltfläche mit dem Minuszeichen (–).
6 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Navigationsleistenbild festlegen“ definieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Verhalten „Text vom Frame einstellen“ definieren
Mit dem Verhalten „Text vom Frame einstellen“ können Sie den Text eines Frames dynamisch festlegen. Dabei
werden Inhalt und Formatierung des Frames durch den angegebenen Inhalt ersetzt. Beim Inhalt kann es sich um
beliebigen gültigen HTML-Quellcode handeln. Verwenden Sie dieses Verhalten, um Informationen dynamisch
anzuzeigen.
Durch das Verhalten „Text vom Frame einstellen“ wird die Formatierung eines Frames ersetzt. Sie können aber
trotzdem dafür sorgen, dass die Attribute für Seitenhintergrund und Textfarbe nicht geändert werden, indem Sie die
Option „Hintergrundfarbe beibehalten“ aktivieren.
Sie können in den Text alle gültigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrücke von
JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten möchten, schließen Sie ihn in geschweiften
Klammern (
{}) ein. Wenn Sie geschweifte Klammern anzeigen möchten, stellen Sie ihnen einen umgekehrten
Schrägstrich (
\{) voran.
386
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Beispiel
The URL for this page is {window.location}, and today is {new Date()}.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Text einstellen“ > „Text vom Frame einstellen“ aus.
2 Wählen Sie im Dialogfeld „Text vom Frame einstellen“ im Menü „Frame“ den Ziel-Frame aus.
3 Klicken Sie auf die Schaltfläche „Aktuelle HTML abrufen“, um dem aktuellen Inhalt des body-Abschnitts des Ziel-
Frames zu kopieren.
4 Geben Sie im Feld „Neue HTML“ eine Meldung ein.
5 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
More Help topics
“Frames und Framesets erstellen” on page 213
Verhalten „Container-Text festlegen“ definieren
Durch das Verhalten „Container-Text festlegen“ werden der Inhalt und die Formatierung eines vorhandenen
Containers (d. h. eines Elements, das Text oder andere Elemente aufnehmen kann) auf einer Seite durch den von
Ihnen angegebenen Inhalt ersetzt. Beim Inhalt kann es sich um beliebigen gültigen HTML-Quellcode handeln.
Sie können in den Text alle gültigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrücke von
JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten möchten, schließen Sie ihn in geschweiften
Klammern (
{}) ein. Wenn Sie geschweifte Klammern anzeigen möchten, stellen Sie ihnen einen umgekehrten
Schrägstrich (
\{) voran.
Beispiel
The URL for this page is {window.location}, and today is {new Date()}.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ den Befehl
„Text einstellen“ > „Container-Text festlegen“ aus.
2 Wählen Sie im Dialogfeld „Container-Text festlegen“ im Menü „Container“ das Zielelement aus.
3 Geben Sie im Feld „Neue HTML“ den neuen Text oder eine neue HTML ein.
4 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
More Help topics
“AP Div einfügen” on page 177
Verhalten „Statusleistentext festlegen“ definieren
Mit dem Verhalten „Statusleistentext festlegen“ wird in der Statusleiste links unten im Browserfenster eine Meldung
angezeigt. Sie können mit diesem Verhalten in der Statusleiste beispielsweise eine Beschreibung des Ziels eines
Hyperlinks angeben, anstatt die zugehörige URL anzuzeigen. Bedenken Sie jedoch, dass Besucher die Meldungen in
der Statusleiste oft übersehen (und dass nicht alle Browser Änderungen des Texts in der Statusleiste vollständig
unterstützen). Wichtige Meldungen sollten daher besser als Popupmeldung oder als Text in einem AP-Element
angezeigt werden.
387
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Note: Wenn Sie das Verhalten „Statusleistentext festlegen“ in Dreamweaver verwenden, ist nicht gewährleistet, dass sich
der Statusleistentext in einem Browser tatsächlich ändert. Die Änderung von Statusleistentext ist in einigen Browsern nur
möglich, wenn Sie spezifische Anpassungen vornehmen. In Firefox müssen Sie beispielsweise eine Erweitert-Option
ändern, die die Änderung des Statusleistentexts durch JavaScript zulässt. Weitere Informationen finden Sie in der
Dokumentation zu Ihrem Browser.
Sie können in den Text alle gültigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrücke von
JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten möchten, schließen Sie ihn in geschweiften
Klammern (
{}) ein. Wenn Sie geschweifte Klammern anzeigen möchten, stellen Sie ihnen einen umgekehrten
Schrägstrich (
\{) voran.
Beispiel
The URL for this page is {window.location}, and today is {new Date()}.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Text einstellen“ > „Statusleistentext festlegen“ aus.
2 Geben Sie im Dialogfeld „Statusleistentext festlegen“ im Feld „Meldung“ die gewünschte Meldung ein.
Wählen Sie eine möglichst kurze Meldung. Wenn die Meldung für die Statusleiste zu lang ist, wird sie abgeschnitten.
3 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Text von Textfeld einstellen“ definieren
Durch das Verhalten „Text von Textfeld einstellen“ wird der Inhalt eines Textfelds in einem Formular durch den
angegebenen Inhalt ersetzt.
Sie können in den Text alle gültigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrücke von
JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten möchten, schließen Sie ihn in geschweiften
Klammern (
{}) ein. Wenn Sie geschweifte Klammern anzeigen möchten, stellen Sie ihnen einen umgekehrten
Schrägstrich (
\{) voran.
Beispiel
The URL for this page is {window.location}, and today is {new Date()}.
Benannte Textfelder erstellen
1 Wählen Sie „Einfügen“ > „Formular“ > „Textfeld“.
Wenn Sie in Dreamweaver aufgefordert werden, ein „form“-Tag hinzuzufügen, klicken Sie auf „Ja“.
2 Geben Sie im Eigenschafteninspektor einen Namen für das Textfeld ein. Achten Sie darauf, dass der Name auf der
Seite nur einmal vorkommt (verwenden Sie nicht den gleichen Namen für mehrere Elemente auf der gleichen Seite,
selbst wenn sich diese Elemente in unterschiedlichen Formularen befinden).
„Text von Textfeld einstellen“ definieren
1 Markieren Sie ein Textfeld und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die
Option „Text einstellen“ > „Text von Textfeld einstellen“ aus.
2 Wählen Sie das Zieltextfeld im Menü „Textfeld“ aus und geben Sie den neuen Text ein.
3 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
388
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Verhalten „Elemente ein-/ausblenden“ definieren
Mit dem Verhalten „Elemente ein-/ausblenden“ werden ein oder mehrere Seitenelemente ein- oder ausgeblendet oder
die Standardsichtbarkeit von Seitenelementen wird wiederhergestellt. Dieses Verhalten eignet sich zum Anzeigen von
Informationen, während der Benutzer mit der Seite interagiert. Wenn der Benutzer den Mauszeiger über das Bild
einer Pflanze bewegt, können Sie beispielsweise ein Seitenelement mit Informationen zur Blütezeit, zu den
erforderlichen Umgebungsbedingungen und Lichtverhältnissen, zur maximalen Größe usw. einblenden. Von diesem
Verhalten wird das betreffende Element lediglich ein- oder ausgeblendet. Wenn ein Element ausgeblendet wird, wird
es nicht von der Seite entfernt.
1 Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option
„Elemente ein-/ausblenden“ aus.
Wenn „Elemente ein-/ausblenden“ nicht verfügbar ist, ist wahrscheinlich ein AP-Element ausgewählt. Da AP-
Elemente in keinem der beiden 4.0-Browser Ereignisse zulassen, müssen Sie ein anderes Objekt auswählen, z. B. das
<body>-Tag oder ein Hyperlink-Tag (<a>).
2 Wählen Sie in der Liste „Elemente“ das gewünschte Element aus und klicken Sie auf „Einblenden“, „Ausblenden“
oder „Standard“ (zum Wiederherstellen der Standardsichtbarkeit).
3 Wiederholen Sie Schritt 2 für alle weiteren Elemente, deren Sichtbarkeit Sie ändern möchten. (Sie können die
Sichtbarkeit mehrerer Elemente mit einem einzelnen Verhalten ändern.)
4 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Popupmenü anzeigen“ definieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Elemente in Popupmenüs hinzufügen, entfernen und neu anordnen
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Popupmenüs formatieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Position von Popupmenüs in einem Dokument festlegen
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Popupmenüs ändern
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Verhalten „Bild austauschen“ definieren
Mit dem Verhalten „Bild austauschen“ wird ein Bild durch ein anderes ersetzt, indem das src-Attribut des <img>-
Tags geändert wird. Verwenden Sie dieses Verhalten, um Schaltflächen-Rollovers und sonstige Bildeffekte zu erstellen.
(Sie können auch mehrere Bilder gleichzeitig austauschen.) Durch das Einfügen eines Rollover-Bilds wird der Seite
automatisch das Verhalten „Bild austauschen“ hinzugefügt.
389
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
Note: Da von diesem Verhalten nur das src-Attribut beinflusst wird, sollten Sie für den Ersetzungsvorgang ein Bild mit
denselben Abmessungen (Höhe und Breite) wie das Original verwenden. Andernfalls wird das ausgetauschte Bild
verkleinert oder vergrößert, damit es den Abmessungen des ursprünglichen Bilds entspricht.
Mit dem Verhalten „Bildaustausch wiederherstellen“ werden für die letzte Gruppe ausgetauschter Bilder die
vorherigen Quelldateien wiederhergestellt. Dieses Verhalten wird immer automatisch hinzugefügt, wenn Sie für ein
Objekt das Verhalten „Bild austauschen“ definieren. Wenn unter „Bild austauschen“ die Option „Wiederherstellen“
aktiviert ist, müssen Sie dieses Verhalten normalerweise nicht manuell auswählen.
1 Wählen Sie „Einfügen“ > „Bild“ aus oder klicken Sie im Bedienfeld „Einfügen“ auf die Schaltfläche „Bild“, um ein
Bild einzufügen.
2 Geben Sie im Eigenschafteninspektor im Textfeld ganz links einen Namen für das Bild ein.
Bildern muss nicht zwingend ein Name zugewiesen werden. Sie werden automatisch benannt, wenn Sie das Verhalten
für ein Objekt definieren. Sie können die Bilder im Dialogfeld „Bild austauschen“ jedoch einfacher identifizieren,
wenn Sie zuvor alle Bilder benannt haben.
3 Wiederholen Sie die Schritte 1 und 2, um weitere Bilder einzufügen.
4 Markieren Sie ein Objekt (in der Regel das auszutauschende Bild) und wählen Sie im Menü „Verhalten hinzufügen“
des Bedienfelds „Verhalten“ die Option „Bild austauschen“ aus.
5 Wählen Sie in der Liste „Bilder“ das Bild aus, dessen Quelle Sie ändern möchten.
6 Klicken Sie auf „Durchsuchen“, um die neue Bilddatei auszuwählen, oder geben Sie den Pfad und Dateinamen des
neuen Bilds im Feld „Quelle einstellen auf“ ein.
7 Wiederholen Sie die Schritte 5 und 6 für alle weiteren Bilder, die geändert werden sollen. Verwenden Sie das gleiche
Verhalten „Bild austauschen“ für alle Bilder, die gleichzeitig geändert werden sollen. Andernfalls können nicht alle
Bilder mit dem entsprechenden Verhalten „Bildaustausch wiederherstellen“ wiederhergestellt werden.
8 Aktivieren Sie die Option „Bilder vorausladen“, damit die neuen Bilder beim Laden der Seite zwischengespeichert
werden.
Damit werden die beim Herunterladen verursachten Verzögerungen verhindert, wenn die Bilder angezeigt werden
sollen.
9 Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
Verhalten „Formular überprüfen“ definieren
Mit dem Verhalten „Formular überprüfen“ wird der Inhalt der angegebenen Textfelder geprüft, um sicherzustellen,
dass der Benutzer den richtigen Datentyp eingegeben hat. Fügen Sie dieses Verhalten mit dem Ereignis
onBlur an
individuelle Formularfelder an, um die Felder zu überprüfen, während der Benutzer das Formular ausfüllt. Sie können
die Aktion auch mit dem Ereignis
onSubmit an das Formular anfügen, um mehrere Felder gleichzeitig auszuwerten,
wenn der Benutzer auf die Schaltfläche „Senden“ klickt. Wenn Sie dieses Verhalten für ein Formular definieren, wird
verhindert, dass das Formular mit ungültigen Daten gesendet wird.
1 Wählen Sie „Einfügen“ > „Formular“ aus oder klicken Sie im Bedienfeld „Einfügen“ auf die Schaltfläche
„Formular“, um ein Formular einzufügen.
2 Wählen Sie „Einfügen“ > „Formular“ > „Textfeld“ aus oder klicken Sie im Bedienfeld „Einfügen“ auf die
Schaltfläche „Textfeld“, um ein Textfeld einzufügen.
Wiederholen Sie diesen Schritt, um weitere Textfelder einzufügen.
390
VERWENDEN VON DREAMWEAVER
Hinzufügen von JavaScript-Verhalten
Last updated 10.4.2012
3 Wählen Sie eine Überprüfungsmethode aus:
• Um einzelne Felder zu überprüfen, während der Benutzer das Formular ausfüllt, wählen Sie ein Textfeld und dann
„Fenster“ > „Verhalten“ aus.
• Um mehrere Felder zu überprüfen, wenn der Benutzer das Formular sendet, klicken Sie im Tag-Selektor in der
linken unteren Ecke des Dokumentfensters auf das
<form>-Tag. Wählen Sie dann „Fenster“ > „Verhalten“ aus.
4 Wählen Sie im Menü „Verhalten hinzufügen“ die Option „Formular überprüfen“ aus.
5 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie beim Überprüfen einzelner Felder in der Liste „Felder“ das gleiche Feld aus, das Sie im
Dokumentfenster ausgewählt haben.
• Wenn Sie mehrere Felder überprüfen, wählen Sie in der Liste „Felder“ ein Textfeld aus.
6 Aktivieren Sie die Option „Erforderlich“, wenn das Feld Daten enthalten muss.
7 Wählen Sie unter „Akzeptieren“ eine der folgenden Optionen aus:
Alles Überprüft, ob das erforderliche Feld Daten enthält. Es kann sich um beliebige Datentypen handeln.
E-Mail-Adresse Überprüft, ob das Feld das Zeichen „@“ enthält.
Zahl Überprüft, ob das Feld nur Zahlenwerte enthält.
Zahl zwischen Überprüft, ob das Feld eine Zahl in einem bestimmten Bereich enthält.
8 Wenn Sie mehrere Felder überprüfen möchten, wiederholen Sie die Schritte 6 und 7 für alle weiteren zu
überprüfenden Felder.
9 Klicken Sie auf „OK“.
Falls Sie mehrere Felder überprüfen, wenn der Benutzer das Formular sendet, wird das Ereignis
onSubmit
automatisch im Menü „Ereignisse“ angezeigt.
10 Wenn Sie einzelne Felder überprüfen, stellen Sie sicher, dass als Standardereignis onBlur oder onChange festgelegt
ist. Wählen Sie andernfalls eines dieser Ereignisse aus.
Beide Ereignisse lösen das Verhalten „Formular überprüfen“ aus, wenn der Benutzer den Mauszeiger vom Feld
wegbewegt. Sie unterscheiden sich jedoch folgendermaßen:
onBlur tritt unabhängig davon auf, ob der Benutzer Text
in das Feld eingegeben hat. Dagegen tritt
onChange nur dann auf, wenn der Benutzer den Feldinhalt geändert hat. Bei
erforderlichen Feldern sollte das Ereignis
onBlur verwendet werden.
391
Last updated 10.4.2012
Chapter 13: Mit anderen Anwendungen
arbeiten
Anwendungsübergreifende Integration
Integration in Photoshop, Flash und Fireworks
Photoshop, Fireworks und Flash sind leistungsstarke Webentwicklungs-Tools zum Erstellen und Verwalten von
Grafiken und SWF-Dateien. Dreamweaver lässt sich nahtlos mit diesen Tools integrieren und vereinfacht so den
Arbeitsablauf beim Webdesign.
Note: Es ist ferner eine Teilintegration mit einigen anderen Anwendungen gegeben. Beispielsweise können Sie eine
InDesign-Datei in das XHTML-Format exportieren und in Dreamweaver weiterbearbeiten. Ein Tutorial zu diesem
Arbeitsablauf finden Sie unter www.adobe.com/go/vid0202_de.
Bilder und mit Adobe Flash erstellte Inhalte (SWF- und FLV-Dateien) können ganz einfach in ein Dreamweaver-
Dokument eingefügt werden. Außerdem können Sie Bilder oder SWF-Dateien nach dem Einfügen in ein
Dreamweaver-Dokument im ursprünglichen Editor bearbeiten.
Note: Die Zusammenarbeit zwischen Dreamweaver und diesen Adobe-Anwendungen ist nur möglich, wenn diese
Anwendungen auf Ihrem Computer installiert sind.
Die Produktintegration erfolgt bei Fireworks und Flash durch die Roundtrip-Bearbeitung. Durch die Roundtrip-
Bearbeitung wird sichergestellt, dass Code-Aktualisierungen korrekt zwischen Dreamweaver und den anderen
Anwendungen übertragen werden (um beispielsweise Rollover-Verhalten oder Hyperlinks zu anderen Dateien
beizubehalten).
Die Produktintegration von Dreamweaver basiert zudem auf Design Notes. Design Notes sind kleine Dateien, die es
Dreamweaver ermöglichen, das entsprechende Quelldokument einer exportierten Bild- oder SWF-Datei zu ermitteln.
Wenn Sie Dateien aus Fireworks, Flash oder Photoshop direkt in eine mit Dreamweaver definierte Site exportieren,
werden automatisch zusammen mit der webfähigen Datei (GIF, JPEG, PNG oder SWF) auch Design Notes mit
Verweisen auf die ursprüngliche PSD-Datei, PNG-Datei oder Flash-Authoringdatei (FLA) in die Site exportiert.
Design Notes enthalten nicht nur Informationen über Speicherorte, sondern auch weitere Einzelheiten zu exportierten
Dateien. Wenn Sie beispielsweise eine Fireworks-Tabelle exportieren, schreibt Fireworks für jede exportierte Bilddatei
in der Tabelle eine Design Note. Falls die exportierte Datei Hotspots oder Rollovers enthält, enthalten die Design Notes
Informationen über die zugehörigen Skripts.
Während des Exportvorgangs wird in dem Ordner, in dem auch das exportierte Element gespeichert wird, der Ordner
„_notes“ erstellt. Dieser Ordner enthält die Design Notes, die von Dreamweaver für die Integration in Photoshop,
Flash oder Fireworks benötigt werden.
Note: Wenn Sie mit Design Notes arbeiten möchten, müssen Sie sicherstellen, dass sie nicht für Ihre Dreamweaver-Site
deaktiviert sind. Design Notes sind standardmäßig aktiviert. Doch selbst wenn sie deaktiviert sind, erstellt Dreamweaver
eine Design Note, wenn Sie eine Photoshop-Bilddatei einfügen. Auf diese Weise wird der Speicherort der PSD-Quelldatei
gespeichert.
Ein Tutorial zur Integration von Dreamweaver und Fireworks finden Sie unter www.adobe.com/go/vid0188_de.
Ein Tutorial zur Integration von Dreamweaver und Photoshop finden Sie unter
www.adobe.com/go/lrvid4043_dw_de.
392
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
More Help topics
“Design Notes” on page 113
“Design Notes für eine Site aktivieren und deaktivieren” on page 113
Tutorial zu Dreamweaver InDesign
Fireworks und Dreamweaver verwenden
Fireworks-Bilder einfügen
Zahlreiche Änderungen an Dateien werden von Dreamweaver und Fireworks gleichermaßen erkannt und verwendet.
Dazu gehören beispielsweise Änderungen an Hyperlinks, Imagemaps, Tabellensegmenten usw. Durch die
Kombination der beiden Anwendungen entsteht ein reibungsloser Arbeitsablauf für die Bearbeitung, Optimierung
und Platzierung von Webgrafikdateien in HTML-Seiten.
Sie können den Befehl „Einfügen“ > „Bild“ verwenden, um eine aus Fireworks exportierte Grafik direkt in ein
Dreamweaver-Dokument einzufügen, oder Sie können von einem Dreamweaver-Bildplatzhalter ausgehend eine neue
Fireworks-Grafik erstellen.
1 Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der das Bild angezeigt werden soll.
Führen Sie dann einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Bild“ aus.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bild“ oder ziehen Sie die
Schaltfläche in das Dokument.
2 Wählen Sie die gewünschte, aus Fireworks exportierte Datei und klicken Sie auf „OK“ (Windows) bzw. „Öffnen“
(Macintosh).
Note: Wenn sich die Fireworks-Datei nicht in der aktuellen Dreamweaver-Site befindet, werden Sie in einer Meldung
gefragt, ob Sie die Datei in den Stammordner kopieren möchten. Klicken Sie auf „Ja“.
More Help topics
“Integration in Photoshop, Flash und Fireworks” on page 391
Fireworks-Bilder oder Fireworks-Tabellen aus Dreamweaver bearbeiten
Wenn Sie ein Bild oder ein Bildsegment öffnen und bearbeiten, das aus einer Fireworks-Tabelle stammt, startet
Dreamweaver Fireworks. In Fireworks wird dann die PNG-Datei geöffnet, aus der das Bild bzw. die Tabelle exportiert
wurde.
Note: Dabei wird vorausgesetzt, dass Fireworks als primärer externer Bildeditor für PNG-Dateien festgelegt wurde.
Fireworks wird oft auch als Standardeditor für JPEG- und GIF-Dateien definiert. Für diese Dateitypen können Sie
allerdings auch Photoshop als Standardeditor festlegen.
Wenn das Bild einer Fireworks-Tabelle angehört, können Sie die gesamte Fireworks-Tabelle zur Bearbeitung öffnen,
vorausgesetzt, der HTML-Code enthält den Kommentar
<!--fw table-->. Wurde die PNG-Quelldatei mit der
Dreamweaver-Einstellung „HTML und Bilder“ aus Fireworks in eine Dreamweaver-Site exportiert, wird der
Fireworks-Tabellenkommentar automatisch in den HTML-Code eingefügt.
1
Öffnen Sie in Dreamweaver den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), falls er noch nicht geöffnet ist.
393
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
2 Wählen Sie das Bild oder das Bildsegment aus, indem Sie darauf klicken.
Wenn Sie ein aus Fireworks exportiertes Bild auswählen, erkennt der Eigenschafteninspektor die Auswahl als
Fireworks-Bild oder -Tabelle und zeigt den Namen der PNG-Quelldatei an.
3 Führen Sie einen der folgenden Schritte aus, um Fireworks für die Bearbeitung zu starten:
• Klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.
• Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und doppelklicken Sie auf das
ausgewählte Bild.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das ausgewählte
Bild und wählen Sie aus dem Kontextmenü „Mit Fireworks bearbeiten“ aus.
Note: Falls Fireworks die PNG-Quelldatei nicht finden kann, werden Sie aufgefordert, sie manuell zu suchen. Wenn Sie
mit der Fireworks-Quelldatei arbeiten, werden die Änderungen sowohl in der Quelldatei als auch in der exportierten
Datei gespeichert. Andernfalls wird nur die exportierte Datei aktualisiert.
4 Bearbeiten Sie die PNG-Datei in Fireworks und klicken Sie auf „Fertig“.
Fireworks speichert die Änderungen in der PNG-Datei und exportiert das aktualisierte Bild (oder HTML und Bilder).
Sie kehren dann zu Dreamweaver zurück. Das aktualisierte Bild bzw. die aktualisierte Tabelle wird in Dreamweaver
angezeigt.
Ein Tutorial zur Integration von Dreamweaver und Fireworks finden Sie unter www.adobe.com/go/vid0188_de.
More Help topics
“Mit externen Bildeditoren arbeiten” on page 265
Tutorial zu Dreamweaver Fireworks
Fireworks-Bilder von Dreamweaver aus optimieren
Mithilfe von Dreamweaver können Sie schnell kleinere Änderungen an Fireworks-Bildern und -Animationen
vornehmen. So können Sie in Dreamweaver die Optimierungs- und Animationseinstellungen sowie die Größe und
den Bereich eines exportierten Bilds ändern.
1 Wählen Sie in Dreamweaver das gewünschte Bild aus und führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Befehl“ > „Bild optimieren“ aus.
• Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Bildeinstellungen bearbeiten“.
2 Nehmen Sie im Dialogfeld „Bildvorschau“ die gewünschten Änderungen vor:
• Um die Optimierungseinstellungen zu bearbeiten, klicken Sie auf die Registerkarte „Optionen“.
• Um Größe und Bereich des exportierten Bildes zu bearbeiten, klicken Sie auf die Registerkarte „Datei“.
3 Klicken Sie abschließend auf „OK“.
More Help topics
“Optionen des Dialogfelds „Bildvorschau“ festlegen” on page 404
Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden
Sie können ein Platzhalterbild in einem Dreamweaver-Dokument erstellen und dann Fireworks starten und eine
Grafik oder eine Fireworks-Tabelle erstellen, um den Platzhalter zu ersetzen.
394
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Wenn Sie anhand eines Bild-Platzhalters ein neues Bild erstellen möchten, müssen sowohl Dreamweaver als auch
Fireworks in Ihrem System installiert sein.
1 Vergewissern Sie sich, dass Fireworks bereits als Bildeditor für PNG-Dateien festgelegt wurde.
2 Wählen Sie im Dokumentfenster den Bild-Platzhalter aus, indem Sie darauf klicken.
3 Starten Sie Fireworks im Modus „Bearbeiten in Dreamweaver“, indem Sie einen der folgenden Schritte ausführen:
• Klicken Sie im Eigenschafteninspektor auf „Erstellen“.
• Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und doppelklicken Sie dann auf
den Bild-Platzhalter.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf den Bild-
Platzhalter und wählen Sie anschließend „Bild in Fireworks erstellen“.
4 Entwerfen Sie das Bild mit den gewünschten Fireworks-Optionen.
Fireworks erkennt folgende Bild-Platzhaltereinstellungen, die Sie möglicherweise bei der Arbeit mit dem Bild-
Platzhalter in Dreamweaver festgelegt haben: die Bildgröße, die mit der Größe der Fireworks-Arbeitsfläche in
Beziehung steht, die Bild-ID, die in Fireworks als Standarddokumentname der erstellten Quelldatei und Exportdatei
verwendet wird, sowie die Textausrichtung. Fireworks erkennt außerdem Hyperlinks und bestimmte Verhalten (z. B.
„Bild austauschen“, „Popupmenü“ und „Text definieren“), die Sie dem Bild-Platzhalter beim Arbeiten in
Dreamweaver hinzugefügt haben.
Note: Die Hyperlinks, die Sie einem Bild-Platzhalter hinzugefügt haben, sind in Fireworks zwar nicht sichtbar, werden
aber trotzdem beibehalten. Wenn Sie in Fireworks einen Hotspot zeichnen und einen Hyperlink hinzufügen, wird der
Hyperlink, den Sie dem Bild-Platzhalter in Dreamweaver hinzugefügt haben, nicht gelöscht. Wenn Sie jedoch in
Fireworks im neuen Bild ein Segment erstellen, wird der Hyperlink im Dreamweaver-Dokument beim Ersetzen des Bild-
Platzhalters gelöscht.
Die folgenden Einstellungen für Bild-Platzhalter werden von Fireworks nicht erkannt: Bildausrichtung, Farbe, V-
Abstand und H-Abstand sowie Maps. Sie sind im Eigenschafteninspektor für Bild-Platzhalter deaktiviert.
5 Wenn Sie fertig sind, klicken Sie auf „Fertig“, um die Speicheraufforderung anzuzeigen.
6 Wählen Sie im Feld „Speichern in“ den Ordner aus, den Sie als lokalen Site-Ordner für Dreamweaver definiert
haben.
Wenn Sie den Bild-Platzhalter beim Einfügen in das Dreamweaver-Dokument benannt haben, trägt Fireworks diesen
Namen in das Feld „Dateiname“ ein. Sie können den Namen ändern.
7 Klicken Sie auf „Speichern“, um die PNG-Datei zu speichern.
Das Dialogfeld „Exportieren“ wird eingeblendet. Mit diesem Dialogfeld können Sie das Bild als GIF- oder JPEG-Datei
exportieren. Bei segmentierten Bildern werden Sie aufgefordert, sie als HTML- und Bilddatei zu exportieren.
8 Wählen Sie unter „Speichern in“ den lokalen Site-Ordner von Dreamweaver aus.
Im Feld „Name“ wird automatisch der Name angezeigt, den Sie für die PNG-Datei verwendet haben. Sie können den
Namen ändern.
9 Typ „Speichern unter“: Wählen Sie im Bereich „Dateityp“ den gewünschten Dateityp für den Export aus, wie
beispielsweise „Nur Bilder“ oder „HTML und Bilder“.
10 Klicken Sie auf „Speichern“, um die exportierte Datei zu speichern.
Die Datei wird gespeichert und Sie kehren zu Dreamweaver zurück. Der Bild-Platzhalter im Dreamweaver-Dokument
wird durch die exportierte Datei oder Fireworks-Tabelle ersetzt.
395
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Fireworks-Popupmenüs
Mit Fireworks können Sie schnell und einfach CSS-basierte Popupmenüs erstellen.
Abgesehen davon, dass sich die mit Fireworks erstellten Popupmenüs einfach erweitern und schnell herunterladen
lassen, bieten sie darüber hinaus folgende Vorteile:
• Die Menüelemente können von Suchmaschinen indiziert werden.
• Die Menüelemente können von Bildschirmlesegeräten gelesen werden, sodass Ihre Seiten wesentlich zugänglicher sind.
• Der von Fireworks erzeugte Code ist mit Standards konform und kann überprüft werden.
Sie können Fireworks-Popupmenüs mit Dreamweaver oder Fireworks, aber nicht mit beiden Programmen
gleichzeitig bearbeiten. In Dreamweaver vorgenommene Änderungen bleiben in Fireworks nicht erhalten.
Fireworks-Popupmenüs in Dreamweaver bearbeiten
In Fireworks 8 oder höher können Sie ein Popupmenü erstellen und anschließend mit Dreamweaver oder Fireworks
(durch Roundtrip-Bearbeitung), nicht jedoch mit beiden Programmen bearbeiten. Wenn Sie Ihre Menüs zuerst in
Dreamweaver und dann in Fireworks bearbeiten, gehen die vorherigen Bearbeitungsvorgänge mit Ausnahme von
Textinhalten verloren.
Wenn Sie Menüs lieber in Dreamweaver bearbeiten, können Sie das Popupmenü in Fireworks erstellen und
anschließend sämtliche Anpassungen in Dreamweaver durchführen.
Wenn Sie Menüs lieber in Fireworks bearbeiten, können Sie in Dreamweaver die Roundtrip-Bearbeitung verwenden.
Sie sollten die Menüs jedoch nicht direkt in Dreamweaver bearbeiten.
1 Wählen Sie die Fireworks-Tabelle, die das Popupmenü enthält, in Dreamweaver aus und klicken Sie im
Eigenschafteninspektor auf „Bearbeiten“.
Die PNG-Quelldatei wird in Fireworks geöffnet.
2 Bearbeiten Sie das Menü in Fireworks mit dem Popupmenü-Editor und klicken Sie in der Fireworks-Symbolleiste
auf „Fertig“.
Fireworks sendet das bearbeitete Popupmenü zurück an Dreamweaver.
Wenn Sie ein Popupmenü in Fireworks MX 2004 oder früher erstellt haben, können Sie es in Dreamweaver im
Dialogfeld „Popupmenü anzeigen“ bearbeiten, das über das Bedienfeld „Verhalten“ aufgerufen wird.
In Fireworks MX 2004 oder früher erstellte Popupmenüs bearbeiten
1 Wählen Sie in Dreamweaver den Hotspot oder das Bild aus, der bzw. das das Popupmenü auslöst.
2 Doppelklicken Sie in der Aktionsliste des Bedienfelds „Verhalten“ (Umschalt+F3) auf „Popupmenü anzeigen“.
3 Nehmen Sie im Dialogfeld „Popupmenü anzeigen“ die gewünschten Änderungen vor und klicken Sie auf „OK“.
More Help topics
“Verhalten „Popupmenü anzeigen“ definieren” on page 388
396
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Voreinstellungen zum Öffnen und Bearbeiten von Fireworks-Quelldateien
festlegen
Wenn Sie Fireworks zum Bearbeiten von Bildern verwenden, werden die Bilder in den Webseiten in der Regel von
Fireworks aus einer PNG-Quelldatei exportiert. Wenn Sie eine Bilddatei in Dreamweaver öffnen, um sie zu bearbeiten,
öffnet Fireworks automatisch die PNG-Quelldatei und fordert Sie auf, den Speicherort der PNG-Datei zu bestimmen,
wenn sie nicht gefunden wird. Nach Wunsch können Sie in Fireworks Voreinstellungen vornehmen, die veranlassen,
dass Dreamweaver das eingefügte Bild öffnet. Sie können sich auch bei jedem Öffnen eines Bildes in Dreamweaver von
Fireworks die Option zur Verwendung der eingefügten Bilddatei oder der Fireworks-Quelldatei geben lassen.
Note: Dreamweaver erkennt die Fireworks-Voreinstellungen zum Öffnen und Bearbeiten nur in bestimmten Fällen. Im
konkreten Fall müssen Sie ein Bild öffnen und optimieren, das nicht zu einer Fireworks-Tabelle gehört und das einen
korrekten Design Notes-Pfad zu einer PNG-Quelldatei enthält.
1 Wählen Sie in Fireworks „Bearbeiten“ > „Voreinstellungen“ bzw. „Fireworks“ > „Voreinstellungen“ (Macintosh)
und klicken Sie dann auf die Registerkarte „Starten und bearbeiten“ (Windows) bzw. wählen Sie im Popupmenü
die Option „Starten und bearbeiten“ (Macintosh).
2 Wählen Sie die Optionen, die gelten sollen, wenn Sie in externen Anwendungen platzierte Fireworks-Bilder
bearbeiten oder optimieren:
Immer PNG-Quelldatei verwenden bewirkt, dass die Fireworks-PNG-Datei automatisch geöffnet wird, die in der
Design Note als Quelldatei des platzierten Bildes angegeben ist. Änderungen werden an der PNG-Quelldatei und am
zugehörigen platzierten Bild vorgenommen.
PNG-Quelldatei nie verwenden bewirkt, dass das platzierte Fireworks-Bild automatisch geöffnet wird, unabhängig
davon, ob eine PNG-Quelldatei vorhanden ist. Änderungen werden nur am platzierten Bild vorgenommen.
Beim Start fragen zeigt eine Meldung an, in der Sie gefragt werden, ob die PNG-Quelldatei geöffnet werden soll. Sie
haben hier auch die Möglichkeit, globale Voreinstellungen zum Öffnen und Bearbeiten festzulegen.
Fireworks-HTML-Code in ein Dreamweaver-Dokument einfügen
Mit dem Fireworks-Befehl „Exportieren“ können Sie optimierte Bilder und HTML-Dateien exportieren und in einem
Ordner des Site-Ordners von Dreamweaver speichern. Anschließend können Sie die Datei in Dreamweaver einfügen.
In Fireworks erstellter HTML-Code kann mit allen zugehörigen Bildern, Segmenten und JavaScript-Codeabschnitten
in ein Dreamweaver-Dokument eingefügt werden.
1 Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der Sie den Fireworks-HTML-Code
einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Fireworks-HTML“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie
im Popupmenü die Option „Fireworks-HTML einfügen“ aus.
3 Klicken Sie auf „Durchsuchen“ und wählen Sie eine Fireworks-HTML-Datei aus.
4 Wenn Sie die Datei nicht anderweitig verwenden möchten, aktivieren Sie die Option „Datei nach Einfügen
löschen“. Die Aktivierung dieser Option hat keine Auswirkungen auf die mit der HTML-Datei verknüpfte PNG-
Quelldatei.
Note: Wenn sich die HTML-Datei auf einem Netzlaufwerk befindet, wird sie nicht in den Papierkorb verschoben,
sondern endgültig gelöscht.
397
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
5 Klicken Sie auf „OK“, um den HTML-Code mit allen zugehörigen Bildern, Segmenten und JavaScript-
Codeabschnitten in das Dreamweaver-Dokument einzufügen.
Fireworks-HTML-Code in Dreamweaver einfügen
Sie können in Fireworks erstellte Bilder und Tabellen rasch in Dreamweaver platzieren, indem Sie den Fireworks-
HTML-Code kopieren und dann direkt in ein Dreamweaver-Dokument einfügen.
Fireworks-HTML-Code kopieren und in Dreamweaver einfügen
1 Wählen Sie in Fireworks „Bearbeiten“ > „HTML-Code kopieren“.
2 Ein Assistent führt Sie durch die zum Exportieren des HTML-Codes und der Bilder erforderlichen Einstellungen.
Wenn Sie zur Eingabe eines Zielordners für die exportierten Bilder aufgefordert werden, geben Sie den
Dreamweaver-Site-Ordner an.
Der Assistent exportiert die Bilder in den angegebenen Zielordner und kopiert den HTML-Code in die
Zwischenablage.
3 Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der Sie den HTML-Code einfügen
möchten. Wählen Sie dann „Bearbeiten“ > „Fireworks-HTML einfügen“ aus.
Der gesamte HTML- und JavaScript-Code, der zu den exportierten Fireworks-Dateien gehört, wird in das
Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
Fireworks-HTML-Code exportieren und in Dreamweaver einfügen
1 Wählen Sie in Fireworks „Datei“ > „Exportieren“.
2 Geben Sie den Dreamweaver-Site-Ordner als Zielordner für die exportierten Bilder an.
3 Wählen Sie im Popupmenü „Exportieren“ die Option „HTML und Bilder“.
4 Wählen Sie im Popupmenü „HTML“ die Option „In Zwischenablage kopieren“ und klicken Sie dann auf
„Exportieren“.
5 Setzen Sie die Einfügemarke im Dreamweaver-Dokument an die Stelle, an der der exportierte HTML-Code
eingefügt werden soll. Wählen Sie dann „Bearbeiten“ > „Fireworks-HTML Einfügen“.
Der gesamte HTML- und JavaScript-Code, der zu den exportierten Fireworks-Dateien gehört, wird in das
Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
In Dreamweaver platzierten Fireworks-HTML-Code aktualisieren
Der Fireworks-Befehl „Datei“ > „HTML aktualisieren“ kann als Alternative zum Verfahren „Starten und bearbeiten“
verwendet werden, um in Dreamweaver platzierte Fireworks-Dateien zu aktualisieren. Mit „HTML aktualisieren“
können Sie eine PNG-Quellbilddatei in Fireworks bearbeiten und dann die HTML-Codeabschnitte und Bilddateien,
die exportiert und in ein Dreamweaver-Dokument platziert wurden, automatisch aktualisieren. Mit diesem Befehl
können Dreamweaver-Dateien sogar dann aktualisiert werden, wenn Dreamweaver nicht ausgeführt wird.
1 Öffnen Sie die PNG-Quelldatei in Fireworks und führen Sie die gewünschten Änderungen durch.
2 Wählen Sie „Datei“ > „Speichern“.
3 Wählen Sie in Fireworks „Datei“ > „HTML aktualisieren“.
4 Wählen Sie die Dreamweaver-Datei, die den zu aktualisierenden HTML-Code enthält, und klicken Sie auf
„Öffnen“.
398
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
5 Wählen Sie den Ordner aus, in dem Sie die aktualisierten Bilddateien ablegen möchten, und klicken Sie auf
„Auswählen“ (Windows) bzw. „Wählen“ (Macintosh).
Daraufhin aktualisiert Fireworks den HTML- und JavaScript-Code im Dreamweaver-Dokument. Außerdem
exportiert Fireworks die zum HTML-Code gehörigen aktualisierten Bilder und platziert sie in den angegebenen
Zielordner.
Wenn Fireworks keinen passenden HTML-Code für die Aktualisierung finden kann, haben Sie die Möglichkeit, neuen
HTML-Code in das Dreamweaver-Dokument einzufügen. Der JavaScript-Abschnitt des neuen Codes wird am
Dokumentanfang platziert, die HTML-Tabelle oder der Hyperlink zum Bild am Dokumentende.
Webfotoalben erstellen
Die Funktion „Webfotoalbum erstellen“ ist ab Dreamweaver CS5 veraltet.
Photoshop und Dreamweaver verwenden
Photoshop-Integration
In Dreamweaver können Sie Photoshop-Bilddateien im PSD-Format in Webseiten einfügen und Dreamweaver
wandelt sie dann in webfähige Bilder (im GIF-, JPEG- und PNG-Format) um. Bei diesem Vorgang fügt Dreamweaver
das Bild als Smart Objekt ein und behält eine Live-Verbindung mit der ursprünglichen PSD-Datei bei.
In Dreamweaver können Sie zudem ein Photoshop-Bild mit mehreren Ebenen oder Segmenten ganz oder teilweise in
eine Webseite einfügen. Beim Kopieren und Einfügen von Bildern aus Photoshop wird jedoch die Live-Verbindung
mit der ursprünglichen Datei nicht beibehalten. Um ein Bild zu aktualisieren, nehmen Sie die gewünschten
Änderungen in Photoshop vor und kopieren und fügen Sie das Bild dann erneut ein.
Note: Wenn Sie diese Integrationsfunktion häufig verwenden, empfiehlt es sich, die Photoshop-Dateien in der
Dreamweaver-Site zu speichern, um leichter auf sie zugreifen zu können. In diesem Fall sollten Sie für die entsprechenden
Dateien unbedingt das Cloaking aktivieren, um die Bereitstellung der ursprünglichen Elemente sowie unnötige
Übertragungen der Bilder zwischen der lokalen Site und dem Remote-Server zu vermeiden.
Ein Tutorial zum Smart Objekt-Workflow in Photoshop und Dreamweaver finden Sie unter
www.adobe.com/go/lrvid4043_dw_de.
Wissenswertes zum Workflow für Smart-Objekte und für
Photoshop/Dreamweaver
Es gibt zwei Haupt-Workflows für das Arbeiten mit Photoshop-Dateien in Dreamweaver: den Kopieren/Einfügen-
Workflow und den Smart-Objekte-Workflow.
Kopieren/Einfügen-Workflow
Mit dem Kopieren/Einfügen-Workflow können Sie Slices und Ebenen in einer Photoshop-Datei auswählen und diese
dann in Dreamweaver als webfertige Bilder einfügen. Wenn Sie den Inhalt zu einem späteren Zeitpunkt aktualisieren
möchten, müssen Sie allerdings die Photoshop-Originaldatei öffnen, Ihre Änderungen vornehmen, das Slice bzw. die
Ebene erneut in die Zwischenablage kopieren und dann das aktualisierte Slice bzw. die aktualisierte Ebene in
Dreamweaver einfügen. Dieser Workflow wird nur empfohlen, wenn Sie einen Teil einer Photoshop-Datei
(beispielsweise einen Teil einer Design-Komposition) als Bild auf einer Webseite einfügen möchten.
399
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Smart-Objekte-Workflow
Wenn Sie mit vollständigen Photoshop-Dateien arbeiten, wird der Smart-Objekte-Workflow empfohlen. In
Dreamweaver ist ein Smart-Objekt ein auf einer Webseite platziertes Bildelement, das weiterhin mit der Photoshop-
Originaldatei (PSD) verknüpft ist. In der Entwurfsansicht von Dreamweaver ist ein Smart-Objekt mit einem Symbol
in der linken oberen Ecke des Bilds gekennzeichnet.
Smart-Objekt
Wenn das Webbild (also das Bild auf der Dreamweaver-Seite) nicht mit der Photoshop-Originaldatei übereinstimmt,
erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde, und zeigt einen der Smart-Objekt-Symbolpfeile in
Rot an. Wenn Sie in der Entwurfsansicht das Webbild auswählen und im Eigenschafteninspektor auf die Schaltfläche
„Von Original aktualisieren“ klicken, wird das Bild automatisch aktualisiert, um die von Ihnen an der Photoshop-
Originaldatei vorgenommenen Änderungen zu reflektieren.
Wenn Sie den Smart-Objekte-Workflow verwenden, brauchen Sie Photoshop zum Aktualisieren eines Webbilds nicht
zu öffnen. Darüber hinaus sind alle Aktualisierungen, die Sie an Smart-Objekten in Dreamweaver vornehmen, nicht
destruktiv. Das bedeutet, dass Sie Änderungen an der Webversion des Bilds auf Ihrer Seite vornehmen können und
die Photoshop-Originaldatei hierbei intakt bleibt.
Sie können ein Smart-Objekt auch aktualisieren, ohne das Webbild in der Entwurfsansicht auszuwählen. Über das
Elementebedienfeld lassen sich alle Smart-Objekte (auch Bilder, die sich im Dokumentfenster eventuell nicht
auswählen lassen, z. B. CSS-Hintergrundbilder) aktualisieren.
Bildoptimierungseinstellungen
Für den Kopieren/Einfügen- und den Smart-Objekte-Workflow können Sie im Dialogfeld „Bildvorschau“
Optimierungseinstellungen festlegen. In diesem Dialogfeld können Optionen wie Dateiformat, Bildqualität usw.
festgelegt werden. Wenn Sie ein Slice oder eine Ebene zum ersten Mal kopieren oder eine Photoshop-Datei zum ersten
Mal als Smart-Objekt einfügen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen
können.
400
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Wenn Sie eine Aktualisierung eines bestimmten Slice bzw. einer bestimmten Ebene kopieren und einfügen, wendet
Dreamweaver die ursprünglichen Einstellungen an und erstellt das Webbild anhand dieser Einstellungen neu. Ebenso
verwendet Dreamweaver bei der Aktualisierung eines Smart-Objekts über den Eigenschafteninspektor dieselben
Einstellungen, die Sie beim erstmaligen Einfügen des Bilds verwendet haben. Sie können die Einstellungen eines Bilds
jederzeit ändern, indem Sie in der Entwurfsansicht das Webbild auswählen und dann im Eigenschafteninspektor auf
die Schaltfläche „Bildeinstellungen bearbeiten“ klicken.
Speichern von Photoshop-Dateien
Wenn Sie ein Webbild eingefügt haben und die Photoshop-Originaldatei nicht in Ihrer Dreamweaver-Site gespeichert
haben, erkennt Dreamweaver den Pfad zur Originaldatei als absoluten lokalen Dateipfad. (Dies gilt sowohl für den
Kopieren/Einfügen- als auch für den Smart-Objekte-Workflow.) Wenn beispielsweise der Pfad zu Ihrer
Dreamweaver-Site „C:\Sites\meineSite“ lautet und die Photoshop-Datei unter „C:\Bilder\Photoshop“ abgespeichert
ist, erkennt Dreamweaver die Originaldatei nicht als Teil der Site „meineSite“. Dies führt zu Problemen, wenn Sie die
Photoshop-Datei für andere Team-Mitglieder freigeben möchten, da Dreamweaver die Datei lediglich als auf einer
bestimmten lokalen Festplatte verfügbar erkennt.
Wenn Sie die Photoshop-Datei jedoch in Ihrer Site speichern, richtet Dreamweaver einen Site-relativen Pfad zur Datei
ein. Alle Benutzer, die Zugriff auf die Site haben, können den richtigen Pfad zur Datei aufbauen, vorausgesetzt, Sie
haben auch die Originaldatei für sie zum Herunterladen bereitgestellt.
Einen Videolehrgang zum Smart-Objekte-Workflow in Photoshop und Dreamweaver finden Sie unter
www.adobe.com/go/lrvid4043_dw_de.
Smart Objekte erstellen
Beim Einfügen eines Photoshop-Bilds (PSD-Datei) in eine Webseite wird in Dreamweaver ein Smart Objekt erstellt.
Ein Smart Objekt ist ein webfähiges Bild mit einer Live-Verbindung zum ursprünglichen Photoshop-Bild. Wenn Sie
das ursprüngliche Bild in Photoshop aktualisieren, haben Sie die Möglichkeit, das Bild mit einem Mausklick auch in
Dreamweaver zu aktualisieren.
1 Setzen Sie die Einfügemarke in Dreamweaver (Entwurfs- oder Codeansicht) an die Stelle auf der Seite, an der das
Bild eingefügt werden soll.
2 Wählen Sie „Einfügen“ > „Bild“ aus.
Sie können die PSD-Datei zudem aus dem Bedienfeld „Dateien“ auf die Seite ziehen, wenn die Photoshop-Dateien in
der Website gespeichert sind. In diesem Fall können Sie den nächsten Schritt überspringen.
3 Wählen Sie im Dialogfeld „Bildquelle auswählen“ die Photoshop-Bilddatei im PSD-Format aus, indem Sie auf die
Schaltfläche „Durchsuchen“ klicken und zu der Datei navigieren.
4 Passen Sie die Optimierungseinstellungen in dem angezeigten Dialogfeld „Bildvorschau“ nach Bedarf an und
klicken Sie auf „OK“.
5 Speichern Sie die webfähige Bilddatei in einem Verzeichnis im Stammordner der Website.
Dreamweaver erstellt das Smart Objekt entsprechend den ausgewählten Optimierungseinstellungen und fügt eine
webfähige Version des Bilds auf der Seite ein. Mit dem Smart Objekt besteht eine Live-Verbindung zum
ursprünglichen Bild und Sie werden informiert, wenn die beiden Bilder nicht mehr synchron sind.
401
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Note: Wenn Sie zu einem späteren Zeitpunkt die Optimierungseinstellungen für ein Bild in Ihren Seiten ändern möchten,
wählen Sie das Bild aus und klicken im Eigenschafteninspektor auf die Schaltfläche „Bildeinstellungen bearbeiten“. Im
Dialogfeld „Bildvorschau“ können Sie dann die gewünschten Änderungen an dem Bild vornehmen. Änderungen im
Dialogfeld „Bildvorschau“ werden angewendet, ohne dass negative Auswirkungen auf die Originaldatei entstehen. Die
ursprüngliche Photoshop-Datei wird in Dreamweaver niemals geändert. Stattdessen wird das Webbild immer anhand
der Originaldaten neu erstellt.
Ein Video-Tutorial zur Verwendung von Photoshop-Smart Objekten finden Sie unter
www.adobe.com/go/lrvid4043_dw_de.
Smart Objekte aktualisieren
Wenn Sie die Photoshop-Datei ändern, mit der das Smart Objekt verknüpft ist, werden Sie in Dreamweaver
benachrichtigt, dass das webfähige Bild nicht mehr mit dem Original synchron ist. Smart Objekte werden in
Dreamweaver durch ein Symbol in der oberen linken Ecke des Bilds gekennzeichnet. Wenn das webfähige Bild in
Dreamweaver mit der ursprünglichen Photoshop-Datei synchron ist, sind beide Pfeile in diesem Symbol grün. Wenn
das webfähige Bild nicht mit der ursprünglichen Photoshop-Datei synchron ist, wird einer der Pfeile rot dargestellt.
❖ Um ein Smart Objekt mit dem aktuellen Inhalt der ursprünglichen Photoshop-Datei zu aktualisieren, wählen Sie
das Smart Objekt im Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltfläche „Von
Original aktualisieren“.
Note: Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Mehrere Smart Objekte aktualisieren
Im Bedienfeld „Elemente“ können Sie mehrere Smart Objekte gleichzeitig aktualisieren. Darüber hinaus können Sie
im Bedienfeld „Elemente“ Smart Objekte anzeigen, die im Dokumentfenster möglicherweise nicht ausgewählt werden
können (z. B. CSS-Hintergrundbilder).
1 Klicken Sie im Bedienfeld „Dateien“ auf die Registerkarte „Elemente“, um die Elemente der Site anzuzeigen.
2 Achten Sie darauf, dass die Bildansicht ausgewählt ist. Klicken Sie andernfalls auf die Schaltfläche „Bilder“.
3 Wählen Sie im Bedienfeld „Elemente“ die einzelnen Bildelemente aus. Wenn Sie ein Smart Objekt auswählen, wird
in der oberen linken Ecke des Bilds das Smart Objekt-Symbol angezeigt. Bei normalen Bildern wird dieses Symbol
nicht angezeigt.
4 Klicken Sie bei jedem Smart Objekt, das Sie aktualisieren möchten, mit der rechten Maustaste auf den
entsprechenden Dateinamen und wählen Sie „Von Original aktualisieren“ aus. Sie können beim Klicken auch die
Strg-Taste gedrückt halten, um mehrere Dateinamen auszuwählen und die entsprechenden Bilder gleichzeitig zu
aktualisieren.
Note: Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Größe von Smart Objekten ändern
Sie können die Größe eines Smart Objekts wie bei jedem anderen Bild im Dokumentfenster ändern.
1 Wählen Sie das Smart Objekt im Dokumentfenster aus und ändern Sie durch Ziehen der Größenänderungsgriffe
die Größe des Bilds. Sie können das Verhältnis von Breite und Höhe beibehalten, indem Sie beim Ziehen die
Umschalttaste gedrückt halten.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“.
402
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Beim Aktualisieren des Smart Objekts wird das Webbild entsprechend dem aktuellen Inhalt der ursprünglichen Datei
und den ursprünglichen Optimierungseinstellungen ohne negative Auswirkungen auf das Originalbild mit der neuen
Größe dargestellt.
Ursprüngliche Photoshop-Datei von Smart Objekten bearbeiten
Nach dem Erstellen eines Smart Objekts in Ihrer Dreamweaver-Seite können Sie die ursprüngliche PSD-Datei in
Photoshop bearbeiten. Nachdem Sie die Änderungen in Photoshop vorgenommen haben, können Sie auf einfache
Weise das Webbild in Dreamweaver aktualisieren.
Note: Dazu muss Photoshop als primärer externer Bildeditor festgelegt sein.
1 Wählen Sie das Smart Objekt im Dokumentfenster aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Bearbeiten“.
3 Nehmen Sie die Änderungen in Photoshop vor und speichern Sie die neue PSD-Datei.
4 Wählen Sie in Dreamweaver erneut das Smart Objekt aus und klicken Sie auf die Schaltfläche „Von Original
aktualisieren“.
Note: Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver
zurücksetzen. Smart Objekte werden in Dreamweaver nur entsprechend den Inhalten der ursprünglichen Photoshop-
Datei und nicht entsprechend ihrer Größe aktualisiert. Um die Größe eines Webbilds mit der Größe der ursprünglichen
Photoshop-Datei zu synchronisieren, klicken Sie mit der rechten Maustaste auf das Bild und wählen „Größe auf Original
zurücksetzen“ aus.
Smart Objekt-Statuswerte
In der folgenden Tabelle sind die verschiedenen Statuswerte von Smart Objekten aufgeführt.
Smart Objekt-Status Beschreibung Empfohlene Aktion
Bilder sind synchronisiert Das Webbild ist mit den aktuellen Inhalten der ursprünglichen
Photoshop-Datei synchronisiert. Die Attribute für Breite und
Höhe im HTML-Code entsprechen den Abmessungen des
Webbilds.
Keine.
Originalelement wurde
geändert
Die ursprüngliche Photoshop-Datei wurde nach dem Erstellen
des Webbilds in Dreamweaver geändert.
Über die Schaltfläche „Von Original
aktualisieren“ im Eigenschafteninspektor
können Sie die beiden Bilder
synchronisieren.
Abmessungen des
Webbilds weichen von der
ausgewählten HTML-Breite
und -Höhe ab
Die Attribute für Breite und Höhe im HTML-Code unterscheiden
sich von den Abmessungen für Breite und Höhe des Webbilds,
das in Dreamweaver beim Einfügen erstellt wurde. Wenn die
Abmessungen des Webbilds kleiner sind als die ausgewählten
Werte für die Breite und Höhe im HTML-Code, wird das Webbild
möglicherweise verpixelt angezeigt.
Über die Schaltfläche „Von Original
aktualisieren“ im Eigenschafteninspektor
können Sie das Webbild aus der
ursprünglichen Photoshop-Datei neu
erstellen. Beim Neuerstellen des Bilds in
Dreamweaver werden die aktuell
festgelegten Abmessungen für Breite und
Höhe verwendet.
Abmessungen des
Originalelements sind zu
klein für die ausgewählte
HTML-Breite und -Höhe
Die Attribute für Breite und Höhe im HTML-Code sind größer als
die Abmessungen für Breite und Höhe der ursprünglichen
Photoshop-Datei. Das Webbild wird möglicherweise verpixelt
dargestellt.
Erstellen Sie keine Webbilder, deren
Abmessungen größer sind als die
Abmessungen der ursprünglichen
Photoshop-Datei.
Originalelement wurde
nicht gefunden
Die im Textfeld „Original“ des Eigenschafteninspektors
angegebene ursprüngliche Photoshop-Datei kann in
Dreamweaver nicht gefunden werden.
Korrigieren Sie den Dateipfad im Textfeld
„Original“ des Eigenschafteninspektors
oder verschieben Sie die Photoshop-Datei
in den derzeit angegebenen Speicherort.
403
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Photoshop-Auswahl kopieren und einfügen
Sie können ein Photoshop-Bild ganz oder teilweise kopieren und das ausgewählte Segment als webfähiges Bild in Ihre
Dreamweaver-Seite einfügen. Sie können eine oder mehrere Ebenen eines ausgewählten Bildbereichs oder lediglich
ein Bildsegment kopieren. Dabei wird in Dreamweaver jedoch kein Smart Objekt erstellt.
Note: Obwohl die Funktion „Von Original aktualisieren“ für eingefügte Bilder nicht verfügbar ist, können Sie die
ursprüngliche Photoshop-Datei öffnen und bearbeiten, indem Sie das eingefügte Bild auswählen und im
Eigenschafteninspektor auf die Schaltfläche „Bearbeiten“ klicken.
1 Führen Sie in Photoshop einen der folgenden Schritte aus:
• Kopieren Sie eine einzelne Ebene ganz oder teilweise, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu
kopierenden Bereich und dann „Bearbeiten“ > „Kopieren“ auswählen. Auf diese Weise wird nur die aktive Ebene
des ausgewählten Bereichs in die Zwischenablage kopiert. Falls in dem Bild ebenenbasierte Effekte enthalten sind,
werden diese nicht kopiert.
• Kopieren und reduzieren Sie mehrere Ebenen, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu
kopierenden Bereich und dann „Bearbeiten“ > „Auf eine Ebene reduziert kopieren“ auswählen. Dadurch werden
alle aktiven und niedrigeren Ebenen des ausgewählen Bereichs auf eine Ebene reduziert und in die Zwischenablage
kopiert. Falls mit manchen dieser Ebenen ebenenbasierte Effekte verknüpft sind, werden diese ebenfalls kopiert.
• Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment und
dann „Bearbeiten“ > „Kopieren“ auswählen. Dadurch werden alle aktiven und darunter liegenden Ebenen des
Bildsegments auf eine Ebene reduziert und in die Zwischenablage kopiert.
Über „Auswählen“ > „Alles auswählen“ können Sie schnell ein gesamtes Bild zum Kopieren auswählen.
2 Setzen Sie die Einfügemarke in Dreamweaver (Entwurfs- oder Codeansicht) an die Stelle auf Ihrer Seite, an der das
Bild eingefügt werden soll.
3 Wählen Sie „Bearbeiten“ > „Einfügen“ aus.
4 Nehmen Sie im Dialogfeld „Bildvorschau“ die gewünschten Änderungen an den Optimierungseinstellungen vor
und klicken Sie auf „OK“.
5 Speichern Sie die webfähige Bilddatei in einem Verzeichnis im Stammordner der Website.
Dreamweaver definiert das Bild gemäß Ihren Optimierungseinstellungen und platziert eine webfähige Version des
Bildes in Ihrer Seite. Informationen zu dem Bild wie z. B. der Speicherort der ursprünglichen PSD-Quelldatei werden
in einer Design Note gespeichert, unabhängig davon, ob Sie Design Notes für Ihre Site aktiviert haben. Die Design
Note ermöglicht es Ihnen, aus Dreamweaver zu Ihrer ursprünglichen Photoshop-Datei zurückzukehren, um diese zu
bearbeiten.
Ein Tutorial zum Kopieren und Einfügen zwischen unterschiedlichen Anwendungen einschließlich Dreamweaver
und Photoshop finden Sie unter www.adobe.com/go/vid0193_de.
Eingefügte Bilder bearbeiten
Nach dem Einfügen von Photoshop-Bildern in Ihre Dreamweaver-Seiten können Sie die ursprüngliche PSD-Datei in
Photoshop bearbeiten. Wenn Sie Bilder kopieren und einfügen, wird empfohlen, dass Sie Bearbeitungen immer an der
ursprünglichen PSD-Datei (und nicht am webfähigen Bild selbst) vornehmen und diese dann erneut einfügen, sodass
keine unterschiedlichen Versionen desselben Bilds vorhanden sind.
404
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Note: Stellen Sie sicher, dass Photoshop für den zu bearbeitenden Dateityp als primärer externer Bildeditor festgelegt ist.
1 Wählen Sie in Dreamweaver ein webfähiges Bild aus, das ursprünglich in Photoshop erstellt worden ist, und führen
Sie eine der folgenden Aktionen aus:
• Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Bearbeiten“.
• Drücken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf die Datei.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf ein Bild, wählen
Sie im Kontextmenü die Option „Original bearbeiten mit“ aus und klicken Sie dann auf „Photoshop“.
Note: Dabei wird vorausgesetzt, dass Photoshop als primärer externer Bildeditor für PNG-Dateien festgelegt wurde. Sie
sollten auch in Erwägung ziehen, Photoshop als Standardeditor für JPEG-, GIF- und PNG-Dateien festzulegen.
2 Bearbeiten Sie die Datei in Photoshop.
3 Wechseln Sie wieder zu Dreamweaver und fügen Sie das aktualisierte Bild oder die aktualisierte Auswahl in die
Seite ein.
Wenn Sie das Bild zu einem anderen Zeitpunkt erneut optimieren möchten, wählen Sie das Bild aus und klicken im
Eigenschafteninspektor auf die Schaltfläche „Bildeinstellungen bearbeiten“.
Optionen des Dialogfelds „Bildvorschau“ festlegen
Optionen des Dialogfelds „Bildvorschau“
Beim Erstellen eines Smart Objekts oder Einfügen einer Auswahl aus Photoshop wird in Dreamweaver das Dialogfeld
„Bildvorschau“ angezeigt. (Dieses Dialogfeld wird auch bei anderen Bildern angezeigt, wenn Sie ein bestimmtes Bild
auswählen und im Eigenschafteninspektor auf die Schaltfläche „Bildeinstellungen bearbeiten“ klicken.) In diesem
Dialogfeld können Sie Einstellungen für webfähige Bilder mit einer geeigneten Kombination aus Farbe,
Komprimierung und Bildqualität definieren und als Vorschau anzeigen.
Ein webfähiges Bild kann von allen aktuellen Webbrowsern angezeigt werden und sieht immer gleich aus, unabhängig
davon, welches System oder welchen Browser der Betrachter verwendet. Wenn Sie ein Photoshop-Bild einfügen,
können Sie im Dialogfeld „Bildvorschau“ die verschiedenen Einstellungen für die optimale Webdarstellung festlegen.
Im Allgemeinen wirken sich die Einstellungen entweder auf die Qualität oder auf die Dateigröße nachteilig aus.
405
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Dialogfeld „Bildvorschau“
A: Registerkarte „Optionen“ B: Registerkarte „Datei“ C: Bedienfeld „Vorschau“
Note: Die ausgewählten Einstellungen wirken sich nur auf die exportierte Version der Bilddatei aus. Die ursprüngliche
Photoshop-Datei im PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie geändert.
Das Dialogfeld „Bildvorschau“ besteht aus drei Abschnitten:
• Auf der Registerkarte „Optionen“ können Sie das zu verwendende Dateiformat definieren und Voreinstellungen
festlegen, beispielsweise die Farbe.
• Auf der Registerkarte „Datei“ können Sie den Skalierungsfaktor und die Größe der Zieldatei des Bilds festlegen.
• Im Bedienfeld „Vorschau“ wird eine Version des Bilds mit den aktuellen Einstellungen angezeigt.
Auf der Registerkarte „Optionen“ stehen zahlreiche Optionen zur Verfügung, die sich je nach dem ausgewählten
Dateiformat unterscheiden. Im Popupmenü „Gespeicherte Einstellungen“ stehen mehrere Gruppen von GIF- und
JPEG-Bildoptionen zur Auswahl.
JPEG-Bildoptionen
Sie können ein JPEG-Bild optimieren, indem Sie Komprimierungs- und Glättungsoptionen festlegen. Sie können
seine Farbpalette nicht bearbeiten.
Qualität Mit dem Schieberegler können Sie die Qualität des Bildes verbessern oder reduzieren. Eine bessere Qualität
spiegelt sich in einer größeren Datei wider.
406
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Glättung Gestattet Ihnen, die Glättung nach Bedarf zu erhöhen. Unter Umständen erfordern Bilder mit ein
geringeren Qualität einen höheren Wert.
Progressive Browseranzeige Zeigt zunächst ein Bild mit geringer Auflösung an. Während des Downloads wird die
Auflösung jedoch fortlaufend erhöht. Ist standardmäßig nicht ausgewählt.
Farbränder scharfzeichnen Erzeugt eine höhere Bildqualität.
Matt Legt den Hintergrund des Bilds fest. Sie können die Transparenz eines PNG-Bildes mit 32 bpc (Bits pro Kanal)
beibehalten, indem Sie auf das Transparenzsymbol im Dialogfeld „Matt“ klicken. „Matt“ dient auch dem Glätten von
Objekten mit abgerundeten Konturen, die sich direkt über der Arbeitsfläche befinden: Dabei wird die Farbe dem
Zielhintergrund angepasst.
Nicht verwendete Farben entfernen Reduziert die Dateigröße durch Entfernen von Farben, die im Bild nicht
enthalten sind.
Für Dateigröße optimieren Legt die Bildgröße in KB fest. Bei 8-bpc-Bildern versucht der Assistent, die gewünschte
Dateigröße durch Anpassung der Farbanzahl oder durch Rastern (Dithering) zu erzielen.
GIF- und PNG-Bildoptionen
Auf der Registerkarte „Optionen“ können Sie einen Transparenzwert für einzelne Farben in GIF- und PNG 8-Bildern
festlegen, damit der Hintergrund der Webseite durch Bereiche mit solchen Farben hindurch sichtbar ist. Diesen Effekt
können Sie durch Anpassen der Farbpalette auf der linken Seite der Registerkarte „Optionen“ erzielen. PNG-Bilder im
32-bpc-Format (PNG 32) verfügen automatisch über Tranzparenz, auch wenn im Bedienfeld „Optimieren“ keine
Transparenz-Option für PNGs im 32-bpc-Format angezeigt wird.
Palette Ist standardmäßig auf „Adaptiv“ gesetzt. Wählen Sie im Popupmenü eine der gespeicherten
Farbpaletteneinstellungen aus, wenn Sie eine Gruppe vordefinierter Optionen verwenden möchten.
Verlust Ist standardmäßig auf „0“ eingestellt. Kann nicht auf PNG-Bilder angewendet werden.
Rastern Erzeugt in der aktuellen Farbpalette nicht enthaltene Farben durch Mischen ähnlichfarbiger Pixel. Die
Funktion „Rastern“ (Dithering) ist besonders beim Exportieren von Bildern mit komplexen Mischungen oder
Farbverläufen bzw. beim Exportieren von Fotografien in ein 8-bpc-Grafikformat wie GIF nützlich. Ist standardmäßig
nicht ausgewählt.
Note: Durch Rastern kann die Dateigröße erheblich zunehmen.
Liste mit der Anzahl der Farben Ist standardmäßig auf „256“ eingestellt. Die Anzahl der Farben ist vom aktuellen
Verhalten der Farbpalette abhängig. Die Palette „Web 216“ enthält beispielsweise nur 216 Farben.
Farbpalette Die angezeigten Farben variieren je nach ausgewähltem Palettenverhalten und maximaler Farbanzahl.
Palettenwerkzeuge Klicken Sie auf ein beliebiges Pixel in der Palette und dann auf diese Symbole, um eine Farbe zu
ändern, hinzuzufügen oder zu löschen bzw. transparent oder websicher zu machen oder zu sperren.
Transparenzfarbsymbole auswählen Mit diesen Schaltflächen können Sie eine Palettenfarbe auswählen, hinzufügen
oder entfernen. Wenn Sie die Option „Transparenzfarbe auswählen“ aktivieren, können Sie beispielsweise auf jedes
Pixel in der Palette oder auf einen Farbpunkt im Bedienfeld „Vorschau“ klicken. Die entsprechende Farbe wird
dadurch transparent.
Transparenz-Popupmenü Legt Index-, Alpha- oder keine Transparenz fest. Ein grau-weißes Schachbrettmuster im
Dokument zeigt eine Vorschau der transparenten Bereiche. Um anzuzeigen, wie sich die ausgewählten Einstellungen
407
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
auf das Bild auswirken, wählen Sie in der Bildvorschau die zwei- oder viergeteilte Ansicht aus und klicken dann auf
ein anderes Bild als das Original.
• Indextransparenz Verwenden Sie die Indextransparenz, wenn Sie GIF-Bilder exportieren, die transparente
Bereiche enthalten. Mit Indextransparenz legen Sie fest, dass bestimmte Farben beim Exportieren transparent sind.
Die Indextransparenz schaltet Pixel mit bestimmten Farbwerten ein oder aus.
• Alphatransparenz Verwenden Sie die Alphatransparenz, wenn Sie PNG-Bilder im 8-bpc-Format exportieren, die
transparente Bereiche enthalten. Alphatransparenz gestattet abgestufte Transparenz und halbundurchsichtige Pixel.
Matt Legt den Hintergrund des Bilds fest. Sie können die Transparenz eines PNG-Bildes im 32-bpc-Format
beibehalten, indem Sie auf das Transparenzsymbol im Dialogfeld „Matt“ klicken. „Matt“ dient auch dem Glätten von
Objekten mit abgerundeten Konturen, die sich direkt über der Arbeitsfläche befinden: Dabei wird die Farbe dem
Zielhintergrund angepasst.
Nicht verwendete Farben entfernen Reduziert die Dateigröße durch Entfernen von Farben, die im Bild nicht
enthalten sind.
Browseranzeige mit Zeilensprung Zeigt zunächst ein Bild mit Zeilensprung mit geringer Auflösung an. Während des
Downloads wird die Auflösung jedoch fortlaufend bis zum höchsten Wert gesteigert. Ist standardmäßig nicht
ausgewählt.
Für Dateigröße optimieren Ermöglicht die Angabe der Bildgröße in Kilobyte. Bei 8-bpc-Bildern versucht der
Assistent, die gewünschte Dateigröße durch Anpassung der Farbanzahl oder durch Rastern (Dithering) zu erzielen.
Gespeicherte Einstellungen
Dreamweaver bietet Ihnen mehrere umkomplizierte Optionseinstellungen. Je nach den ausgewählten gespeicherten
Einstellungen, können die oben beschriebenen dateityp-spezifischen Bildoptionen variieren.
GIF-Web 216 Macht alle Farben websicher. Die Farbpalette enthält bis zu 216 Farben.
GIF-WebSnap 256 Wandelt eine nicht websichere Farbe in die ähnlichste websichere Farbe um. Die Farbpalette
enthält bis zu 256 Farben.
GIF-WebSnap 128 Wandelt eine nicht websichere Farbe in die ähnlichste websichere Farbe um. Die Farbpalette
enthält bis zu 128 Farben.
GIF Adaptiv 256 Ist eine Farbpalette, die nur die in der Grafik tatsächlich verwendeten Farben enthält. Die Farbpalette
enthält bis zu 256 Farben.
JPEG - Höhere Qualität Setzt „Qualität“ auf den Wert 80 und „Glätten“ auf den Wert 0, wodurch die Grafik qualitativ
hochwertig, die Datei jedoch auch größer wird.
JPEG - Kleinere Datei Setzt die „Qualität“ auf den Wert 60 und „Glätten“ auf den Wert 2, wodurch die Grafik nur halb
so groß ist wie bei einer JPEG-Datei höherer Qualität, wenn auch auf Kosten der Qualität.
Optional: Optionen für die Bildgröße oder den Exportbereich auf der Registerkarte „Datei“
ändern
1 Wählen Sie die Registerkarte „Datei“.
2 Verkleinern oder vergrößern Sie das Bild, indem Sie eine der folgenden Aktionen ausführen:
• Geben Sie einen Skalierungsprozentsatz an.
• Geben Sie absolute Pixelwerte für Breite oder Höhe ein.
3 Wählen Sie „Beschränken“, um die ursprünglichen Proportionen des Bildes beizubehalten, während Sie es neu
skalieren.
408
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
4 Ändern Sie die Form des platzierten Bildes, indem Sie die Option „Bereich exportieren“ wählen und eine der
folgenden Aktionen ausführen:
• Ziehen Sie den gepunkteten Rahmen nach Bedarf um das Vorschaubild. Sie können das Bild innerhalb des
Rahmens ziehen, um versteckte Bereiche sichtbar zu machen.
• Geben Sie Pixelkoordinaten für die Ränder des Bildes ein.
Optional: Vorschau von Bildern im Bedienfeld „Vorschau“ anzeigen und Bildparameter
festlegen
1 Wählen Sie im Dialogfeld „Bildvorschau“ die Option „Vorschau“ aus, um das Bild mit den ausgewählten
Einstellungen anzuzeigen. Wenn die Leistung beeinträchtigt ist, sollten Sie diese Option deaktivieren.
2 Wählen Sie im Popupmenü „Gespeicherte Einstellungen“ eine der gespeicherten Farbpaletteneinstellungen aus,
wenn Sie eine Gruppe vordefinierter Optionen verwenden möchten.
3 Wenn das Bild größer als der Vorschaubereich ist, können Sie es mit dem Auswahlwerkzeug im Fenster
verschieben, um unterschiedliche Ausschnitte anzuzeigen.
4 Mit dem Zuschneidewerkzeug können Sie das Bild verkleinern. Unter Umständen müssen Sie zuerst auszoomen,
um das ganze Bild zu sehen.
5 Wählen Sie einen Wert im Zoom-Popupmenü aus, um die Ansicht des Vorschaubildes zu vergrößern oder zu
verkleinern. Sie können die Ansicht zudem durch Auswahl des Zoomwerkzeugs und Klicken vergrößern oder
durch Klicken bei gedrückter Alt-Taste (Windows) bzw. bei gedrückter Wahltaste (Macintosh) verkleinern.
6 Sie können zwei oder vier unterschiedliche Optimierungen in der Vorschau anzeigen, indem Sie unten im
Vorschaubedienfeld auf die zwei- bzw. viergeteilte Schaltfläche klicken und unterschiedliche Farbpaletten für jedes
Feld auswählen.
Note: Bei Photoshop-Bildern sind die Animationssteuerelemente im Dialogfeld „Bildvorschau“ deaktiviert.
Flash und Dreamweaver verwenden
Bearbeiten einer SWF-Datei aus Dreamweaver in Flash
Wenn Sie sowohl Flash als auch Dreamweaver installiert haben, können Sie eine SWF-Datei in einem Dreamweaver-
Dokument auswählen und sie mit Flash bearbeiten. Flash bearbeitet die SWF-Datei nicht direkt; es bearbeitet vielmehr
das Quelldokument (FLA-Datei) und exportiert dann die SWF-Datei erneut.
1 Öffnen Sie in Dreamweaver den Eigenschafteninspektor („Fenster“ > „Eigenschaften“).
2 Führen Sie im Dreamweaver-Dokument einen der folgenden Schritte aus:
• Klicken Sie auf den Platzhalter für die SWF-Datei und anschließend im Eigenschafteninspektor auf „Bearbeiten“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac OS) auf den Platzhalter für
die SWF-Datei und wählen Sie aus dem Kontextmenü die Option „Bearbeiten mit Flash“ aus.
Dreamweaver wechselt zu Flash und Flash versucht, die Flash-Authoringdatei (.FLA) für die ausgewählte SWF-Datei
zu finden. Wenn Flash die Flash-Authoringdatei nicht finden kann, werden Sie aufgefordert, sie manuell zu suchen.
Note: Wenn die FLA- oder SWF-Datei gesperrt ist, checken Sie die Datei in Dreamweaver aus.
3 Bearbeiten Sie die FLA-Datei in Flash. Im Flash-Dokumentfenster wird angezeigt, dass Sie gerade eine Datei aus
Dreamweaver bearbeiten.
4 Klicken Sie auf „Fertig“, wenn Sie alle gewünschten Änderungen vorgenommen haben.
409
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Flash aktualisiert die FLA-Datei und exportiert sie dann erneut als SWF-Datei. Anschließend wird Flash geschlossen
und die Anwendung wechselt wieder zum Dreamweaver-Dokument zurück.
Note: Wenn Sie die SWF-Datei aktualisieren möchten und Flash geöffnet bleiben soll, wählen Sie in Flash „Datei“ >
„Aktualisieren für Dreamweaver“.
5 Sie können die aktualisierte Datei im Dokument anzeigen, indem Sie im Dreamweaver-Eigenschafteninspektor auf
„Abspielen“ klicken. Wenn Sie eine Vorschau der Seite in einem Browserfenster anzeigen möchten, drücken Sie die
Taste F12.
Mit Adobe Bridge arbeiten und Dreamweaver
verwenden
Informationen zu Adobe Bridge
Dreamweaver bietet eine nahtlose Integration mit Adobe Bridge, dem plattformübergreifenden Dateibrowser, der
Bestandteil der Komponenten von Adobe Creative Suite 5 ist. Mit Adobe Bridge können Sie die Elemente
durchsuchen, finden und strukturieren, die Sie zum Erstellen von Druck-, Web-, Video- und mobilen Inhalten
benötigen. Sie können Adobe Bridge aus jeder beliebigen Creative Suite-Komponente heraus starten (außer
Acrobat 9) und damit sowohl auf Adobe-Elemente als auch auf Elemente anderer Hersteller zugreifen.
Adobe Bridge bietet Ihnen folgende Möglichkeiten:
• Suchen, Sortieren, Verarbeiten und Anzeigen einer Vorschau von Dateien, ohne die jeweilige Creative Suite-
Anwendung zu öffnen. Außerdem können Sie Metadaten für Dateien bearbeiten und über Adobe Bridge Dateien
in Ihren Dokumenten, Projekten und Kompositionen platzieren.
• Importieren und Bearbeiten von Fotos auf der Speicherkarte einer Digitalkamera, Gruppieren von thematisch
zusammenhängenden Fotos in Stapeln sowie Öffnen und Bearbeiten von Kamera-Rohdatendateien, ohne
Photoshop zu starten
• Ausführen automatisierter Aufgaben, z. B. von Stapelbefehlen
• Synchronisieren von Farbeinstellungen sämtlicher Creative Suite-Komponenten mit Farbmanagement
More Help topics
Creative Suite 5 - Bridge
Adobe Bridge von Dreamweaver aus starten
Sie können Adobe Bridge von Dreamweaver aus starten, um Ihre Dateien anzuzeigen, bevor Sie sie in Ihr Seitenlayout
platzieren oder ziehen.
❖ Sie haben mehrere Möglichkeiten, Adobe Bridge zu starten:
• Wählen Sie „Datei“ > „Bridge durchsuchen“.
• Klicken Sie in der Standardsymbolleiste auf die Schaltfläche „Bridge durchsuchen“.
• Drücken Sie auf der Tastatur den Kurzbefehl für „Bridge durchsuchen“: Strg+Alt+O (Windows) bzw.
Befehl+Wahl+O (Macintosh).
Adobe Bridge wird im Modus „File Browser“ geöffnet und zeigt den Inhalt des zuletzt in Dreamweaver geöffneten
Ordners an. Wenn Adobe Bridge bereits geöffnet war, wird es das aktive Fenster.
410
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Note: Adobe Bridge wird nur bei der Installation von Creative Suite CS5 mit Dreamweaver CS5 installiert; bei der
Einzelversion von Dreamweaver CS5 dagegen nicht. Adobe Bridge war jedoch Bestandteil bei früheren Installationen von
Dreamweaver CS3 oder CS4. Wenn Adobe Bridge daher weiterhin installiert ist, kann Dreamweaver CS5 darauf
zugreifen und das Programm verwenden.
Dateien aus Adobe Bridge in Dreamweaver platzieren
Sie können Dateien in Dreamweaver-Seiten platzieren, indem Sie sie dort einfügen oder aus Adobe Bridge in Ihre Seite
ziehen. Das Dreamweaver-Dokument, in das die Datei eingefügt werden soll, muss geöffnet sein und sich in der
Entwurfsansicht befinden, damit diese Funktion benutzt werden kann.
Sie können zwar die meisten Dateitypen in Ihre Seiten einfügen, die Abwicklung durch Dreamweaver ist jedoch jeweils
verschieden:
• Wenn Sie ein webfähiges Bild (JPEG, GIF oder PNG) einfügen, dann fügt Dreamweaver die Bilddateien direkt in
Ihre Seite ein und speichert eine Kopie im Standardbildordner Ihrer Website.
• Beim Einfügen einer Photoshop-Datei im PSD-Format müssen Sie zunächst die Optimierungseinstellungen der
Datei festlegen, damit die Datei in Dreamweaver in der Seite platziert werden kann.
• Wenn Sie eine Nicht-Bild-Datei einfügen, beispielsweise eine MP3- oder PDF-Datei bzw. einen unbekannten
Dateityp, dann fügt Dreamweaver einen Hyperlink zur Quelldatei ein.
• Wenn Sie eine HTML-Datei einfügen, dann fügt Dreamweaver einen Hyperlink zur Quelldatei ein.
• Nur in Windows: Wenn auf Ihrem Rechner Microsoft Office installiert ist und Sie eine Microsoft Word- oder
Excel-Datei einfügen, müssen Sie angeben, ob die Datei selbst oder ein Hyperlink zur Quelldatei eingefügt werden
soll. Wenn Sie die Datei einfügen möchten, können Sie angeben, wie viel von der Formatierung der Datei erhalten
bleiben soll.
More Help topics
“Smart Objekte erstellen” on page 400
“Photoshop und Dreamweaver verwenden” on page 398
Adobe Bridge-Dateien auf einer Seite platzieren
1 Setzen Sie die Einfügemarke in Dreamweaver (Entwurfsansicht) an die Stelle auf Ihrer Seite, an der die Datei
eingefügt werden soll.
2 Wählen Sie in Adobe Bridge erst die Datei und dann „Datei“ > „Platzieren“ > „In Dreamweaver“ aus.
3 Wenn sich die Datei nicht im Stammordner Ihrer Site befindet, werden Sie aufgefordert, sie dorthin zu kopieren.
4 Wenn Sie unter „Bearbeiten“ > „Voreinstellungen“ > „Eingabehilfen“ das Anzeigen der Attribute beim Einfügen
von Bildern aktiviert haben, wird das Dialogfeld „Eingabehilfen-Attribute für Image-Tag“ eingeblendet, wenn Sie
webfähige Bilder (beispielsweise JPEG- oder GIF-Dateien) einfügen.
Note: Wenn sich die Einfügemarke in der Codeansicht befindet, wird Adobe Bridge wie gewöhnlich gestartet, die Datei
kann jedoch nicht platziert werden. Sie können Dateien nur in der Entwurfsansicht platzieren.
Dateien aus Bridge auf eine Seite ziehen
1 Setzen Sie die Einfügemarke in Dreamweaver (Entwurfsansicht) an die Stelle auf Ihrer Seite, an der das Bild
eingefügt werden soll.
2 Starten Sie Adobe Bridge, sofern das Programm noch nicht gestartet wurde.
411
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
3 Wählen Sie in Adobe Bridge eine oder mehrere Dateien aus und ziehen Sie sie in Ihre Dreamweaver-Seite.
4 Falls sich eine der Dateien nicht im Stammordner Ihrer Site befindet, werden Sie aufgefordert, sie dorthin zu
kopieren.
5 Wenn Sie in „Bearbeiten“ > „Voreinstellungen“ > „Eingabehilfen“ das Anzeigen der Attribute beim Einfügen
aktiviert haben, wird das Dialogfeld „Eingabehilfen-Attribute für Image-Tag“ eingeblendet, wenn Sie webfähige
Bilder (beispielsweise JPEG- oder GIF-Dateien) einfügen.
Note: Wenn sich die Einfügemarke in der Codeansicht befindet, wird Adobe Bridge wie gewöhnlich gestartet, die Datei
kann jedoch nicht platziert werden. Sie können Dateien nur in der Entwurfsansicht platzieren.
Dreamweaver von Adobe Bridge aus starten
❖ Wählen Sie eine Datei in Adobe Bridge aus und führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Datei“ > „Öffnen mit“ > „Adobe Dreamweaver“.
• Klicken Sie mit der rechten Maustaste (unter Mac OS bei gedrückter Ctrl-Taste) und wählen Sie dann im
Kontextmenü „Öffnen mit“ > „Adobe Dreamweaver“.
Note: Wenn Dreamweaver bereits gestartet wurde, wird das Programm durch diese Aktion aktiviert. Wenn
Dreamweaver noch nicht geöffnet ist, wird es von Adobe Bridge unter Umgehung des Begrüßungsbildschirms gestartet.
Mit Device Central arbeiten und Dreamweaver
verwenden
Adobe Device Central mit Dreamweaver verwenden
Mit Device Central können Dreamweaver-Web-Designer und -Entwickler in einer Vorschau sehen, wie
Dreamweaver-Dateien auf verschiedenen mobilen Geräten aussehen werden. Device Central verwendet die Small-
Screen Rendering™-Funktion von Opera, damit sich Designer und Entwickler eine Vorstellung davon machen
können, wie ihre Website auf einem kleinen Bildschirm aussehen wird. Zudem können Designer und Entwickler
damit auch testen, ob ihr CSS ordnungsgemäß funktioniert.
Beispielsweise hat ein Web-Entwickler einen Kunden, der eine Website für Mobiltelefone verfügbar machen möchte.
Der Web-Entwickler kann mit Dreamweaver die vorläufigen Seiten erstellen und anschließend mit Device Central
testen, wie diese Seiten auf unterschiedlichen Geräten angezeigt werden.
More Help topics
Adobe Device Central-Hilfe
Vorschau auf mobile Inhalte mit Adobe Device Central und Dreamweaver
Verwenden Sie Device Central mit integrierter Small-Screen Rendering-Funktion von Opera, um eine Vorschau von
mit Dreamweaver erstellten Seiten auf unterschiedlichen mobilen Geräten anzuzeigen. Auf unterschiedlichen Geräte
sind unterschiedliche Browser installiert, die Vorschau vermittelt jedoch eine gute Vorstellung dessen, wie der Inhalt
auf einem bestimmten Gerät aussehen und funktionieren wird.
1 Starten Sie Dreamweaver.
2 Öffnen Sie eine Datei.
412
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
3 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Datei“ > „Vorschau im Browser“ > „Device Central“.
• Klicken Sie auf der Symbolleiste des Dokumentfensters auf die Schaltfläche „Vorschau/Debuggen im
Browser“ , halten Sie die Maustaste gedrückt und wählen Sie „Vorschau in Device Central“.
Die Datei wird auf der Registerkarte „Device Central Emulator“ angezeigt. Zum Fortfahren des Tests doppelklicken
Sie in der Liste „Gerätegruppen“ oder „Verfügbare Geräte“ auf den Namen eines anderen Geräts.
Tipps zum Erstellen von Webinhalt für mobile Geräte mit Dreamweaver
Device Central ermöglicht mit der Small Screen Rendering-Funktion von Opera eine Vorschau für in Dreamweaver
erstellte Websites. Anhand dieser Vorschau können Sie sich vorstellen, wie die Website auf einem mobilen Gerät
aussehen wird.
Note: Die Small Screen Rendering-Funktion von Opera kann auf allen einzelnen, emulierten Geräten vorinstalliert sein.
Device Central liefert bloß eine Vorschau dessen, wie der Inhalt aussähe, wenn die Small Screen Rendering-Funktion von
Opera installiert wäre.
Mithilfe der folgenden Tipps können Sie sicherstellen, dass mit Dreamweaver erstellten Websites auf mobilen Geräten
gut angezeigt werden.
• Wenn Sie Adobe® Spry Framework für die Inhaltsentwicklung verwenden, fügen Sie Ihren Seiten die folgende
HTML-Zeile hinzu, damit sie in Device Central CSS rendern und JavaScript™ ordnungsgemäß ausführen können:
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
• Die Small Screen Rendering-Funktion von Opera unterstützt keine Frames, Popups, Unterstreichungen,
Durchstreichungen, Überstreichungen, blinkenden Objekte oder Laufschrift. Vermeiden Sie diese Elemente nach
Möglichkeit.
• Halten Sie Websites für mobile Geräte simpel. Verwenden Sie insbesondere ein Minimum an Schriftarten,
Schriftgrößen und Farben.
• Verkleinern der Bildgröße und Reduzieren der Anzahl erforderlicher Farben steigern die Chance, dass das Bild wie
gewünscht angezeigt wird. Verwenden Sie CSS oder HTML, um eine exakte Höhe und Breite für jedes Bild
festzulegen. Stellen Sie für alle Bilder Alt-Text zur Verfügung.
Note: Die Website von Opera Software liefert weitere hilfreiche Informationen zur Optimierung von Websites für mobile
Geräte.
Weitere Tipps und Techniken zum Erstellen von Inhalten für Mobiltelefone und mobile Geräte finden Sie unter
www.adobe.com/go/learn_cs_mobilewiki_de.
413
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Mit ConnectNow arbeiten und Dreamweaver
verwenden
Arbeiten mit ConnectNow
Mit Adobe® ConnectNow steht Ihnen ein geschützter, persönlicher Online-Meetingraum zur Verfügung, in dem Sie
via Web in Echtzeit mit anderen konferieren und zusammenarbeiten können. ConnectNow bietet Ihnen die
Möglichkeit, den auf Ihrem Bildschirm angezeigten Inhalt zu präsentieren und zu kommentieren. Sie können
außerdem Chat-Nachrichten versenden und über die integrierte Audiofunktion kommunizieren. Auch das Senden
von Live-Videos, das Freigeben von Dateien zur gemeinsamen Nutzung, das Aufzeichnen von Notizen zur Konferenz
und das Zugreifen auf die Computer anderer Teilnehmer ist möglich.
Der Zugang zu ConnectNow erfolgt direkt von der Benutzeroberfläche der Anwendung aus.
1 Wählen Sie „Datei“ > „Meinen Bildschirm freigeben“.
2 Geben Sie im Dialogfeld Bei Adobe CS Live anmelden Ihre E-Mail-Adresse sowie das zugehörige Kennwort ein und
klicken Sie dann auf Anmelden. Wenn Sie keine Adobe-ID haben, klicken Sie auf die Schaltfläche „Erstellen einer
Adobe-ID“.
3 Wenn Sie den auf Ihrem Bildschirm angezeigten Inhalt präsentieren möchten, klicken Sie in der Mitte des
ConnectNow-Anwendungsfensters auf die Schaltfläche Eigenen Bildschirm freigeben.
Eine umfassende Anleitung zum Gebrauch von ConnectNow finden Sie in der Adobe ConnectNow-Hilfe.
Einen Videolehrgang über die Verwendung von ConnectNow finden Sie hier: Using ConnectNow to share your
screen (7:12). (Dieser Lehrgang wird in Dreamweaver präsentiert.)
AIR-Erweiterung für Dreamweaver
Mit der Adobe® AIR®-Erweiterung für Dreamweaver® können Sie webbasierte Anwendungen in
Desktopanwendungen umwandeln. Benutzer können die entsprechende Anwendung dann auf ihrem PC und in
bestimmten Fällen auch ohne Internetverbindung ausführen.
Die Erweiterung kann ab Dreamweaver CS3 eingesetzt werden. Sie ist nicht mit Dreamweaver 8 kompatibel.
Note: Adobe InContext Editing wird von Adobe AIR nicht unterstützt. Wenn Sie mithilfe der AIR-Erweiterung für
Dreamweaver eine Anwendung exportieren, die InContext Editing-Bereiche enthält, können die InContext Editing-
Funktionen nicht ausgeführt werden.
AIR-Erweiterung für Dreamweaver installieren
Mit der AIR-Erweiterung für Dreamweaver können Sie problemlos funktionsreiche Internetanwendungen für den
Desktop erstellen. So verfügen Sie zum Beispiel über eine Gruppe von Webseiten, die zum Anzeigen von XML-Daten
miteinander interagieren. Mit der Adobe AIR-Erweiterung für Dreamweaver können Sie diese Gruppe von Seiten zu
einem Paket in Form einer kleinen Anwendung zusammenfassen, die auf dem Computer eines Benutzers installiert
werden kann. Wenn der Benutzer die Anwendung auf seinem Desktop ausführt, wird sie geladen und die Website in
einem eigenen Anwendungsfenster unabhängig vom Browser angezeigt. Dann kann der Benutzer die Website ohne
Internetverbindung lokal auf dem Computer durchsuchen.
414
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Dynamische Seiten wie Adobe® ColdFusion®- und PHP-Seiten können nicht in Adobe AIR ausgeführt werden. Die
Laufzeitumgebung ist nur mit HTML und JavaScript kompatibel. Sie können in Ihren Seiten jedoch JavaScript
verwenden, um beliebige im Internet bereitgestellte Webdienste mit Ajax-Methoden wie XMLHTTPRequest oder mit
Adobe AIR-spezifischen APIs aufzurufen. Dies umfasst auch durch ColdFusion oder PHP erzeugte Webdienste.
Systemanforderungen
Zum Verwenden der Adobe AIR-Erweiterung für Dreamweaver muss die folgende Software installiert und korrekt
konfiguriert sein:
• Dreamweaver CS3 oder neuer
• Adobe® Extension Manager CS3 oder neuer
• Java JRE, ab Version 1.4 (wird zum Erstellen der Adobe AIR-Datei benötigt) Die Java-JRE ist unter
http://java.sun.com/ verfügbar.
Die genannten Anforderungen sind nur zum Erstellen und zur Vorschau von Adobe AIR-Anwendungen in
Dreamweaver erforderlich. Um Adobe AIR-Anwendungen auf dem Desktop installieren und ausführen zu
können, müssen Sie auf dem Computer Adobe AIR installieren. Die Laufzeitumgebung können Sie unter
www.adobe.com/go/air_de herunterladen.
Adobe AIR-Erweiterung für Dreamweaver installieren
1 Laden Sie die Adobe AIR-Erweiterung für Dreamweaver von der folgenden Website herunter:
http://www.adobe.com/products/air/tools/ajax/.
2 Doppelklicken Sie im Windows-Explorer (Windows) bzw. im Finder (Macintosh) auf die Datei mit der
Erweiterung „.mxp“.
3 Befolgen Sie die Anweisungen auf dem Bildschirm, um die Erweiterung zu installieren.
4 Starten Sie anschließend Dreamweaver neu.
Weitere Informationen zum Einsatz der Adobe AIR-Erweiterung für Dreamweaver finden Sie im Abschnitt zum
Verwenden der Adobe AIR-Erweiterung für Dreamweaver.
AIR-Anwendungen in Dreamweaver erstellen
Wählen Sie zum Erstellen einer HTML-basierten AIR-Anwendung in Dreamweaver eine vorhandene Site aus, um sie
in ein AIR-Anwendungspaket umzuwandeln.
1 Vergewissern Sie sich, dass die in das Anwendungspaket zu integrierenden Webseiten sich innerhalb einer
vorhandenen Dreamweaver-Site befinden.
2 Öffnen Sie in Dreamweaver die Startseite der im Anwendungspaket zusammenzufassenden Gruppe von Seiten.
3 Wählen Sie „Site“ > „AIR-Anwendungseinstellungen“ aus.
4 Füllen Sie das Dialogfeld „AIR-Anwendungs- und Installationseinstellungen“ aus und klicken Sie dann auf „AIR-
Datei erstellen“.
Weitere Informationen finden Sie bei den nachstehend aufgeführten Dialogfeldoptionen.
Wenn Sie zum ersten Mal eine Adobe AIR-Datei erstellen, wird im entsprechenden Stammordner der Site die Datei
„application.xml“ angelegt. Diese Datei dient als Manifestdatei, in der verschiedene Eigenschaften der Anwendung
festgelegt sind.
415
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Im Folgenden werden die Optionen des Dialogfelds „AIR-Anwendungs- und Installationseinstellungen“
beschrieben:
Dateiname der Anwendung Dies ist der Dateiname der Programmdatei der Anwendung. In der
Standardeinstellung wird als Dateiname der Name der Dreamweaver-Site verwendet. Sie können den Namen bei
Bedarf ändern. Er darf jedoch nur aus Zeichen bestehen, die für Datei- und Ordnernamen zulässig sind. (Das heißt,
er darf nur Zeichen des ASCII-Zeichensatzes enthalten und darf nicht mit einem Punkt enden.) Diese Einstellung
ist erforderlich.
Name der Anwendung Dies ist der Name, der beim Installieren der Anwendung in den Installationsdialogfeldern
angezeigt wird. Auch hier wird standardmäßig der Name der Dreamweaver-Site vorgegeben. Für diesen Wert gibt
es keine Einschränkungen hinsichtlich des Zeichensatzes und seine Angabe ist nicht zwingend erforderlich.
ID der Anwendung Kennzeichnet die Anwendung mit einer eindeutigen ID. Sie können die Standard-ID bei
Bedarf ändern. Verwenden Sie in der ID keine Leerzeichen oder Sonderzeichen. Die einzig gültigen Zeichen sind 0
bis 9, a bis z, A bis Z, . (Punkt) und - (Bindestrich). Diese Einstellung ist erforderlich.
Version Legt für die Anwendung eine Versionsnummer fest. Diese Einstellung ist erforderlich.
Anfangsinhalt Legt die Startseite der Anwendung fest. Klicken Sie auf die Schaltfläche „Durchsuchen“, um zur
gewünschten Startseite zu wechseln und sie auszuwählen. Die ausgewählte Datei muss sich innerhalb des
Stammordners der Site befinden. Diese Einstellung ist erforderlich.
Beschreibung Hier können Sie eine Beschreibung der Anwendung angeben, die beim Installieren der Anwendung
angezeigt wird.
Copyright jjj Hier können Sie einen Urheberrechtsvermerk eintragen, der im Info-Bereich von Adobe AIR-
Anwendungen angezeigt wird, die auf Macintosh-Systemen installiert sind. Bei unter Windows installierten
Anwendungen werden diese Informationen nicht verwendet.
Fensterstil Legt den zu verwendenden Fensterstil (sogenanntes „Chrome“) fest, wenn der Benutzer die
Anwendung auf seinem Computer ausführt. Mit dem System-Fensterstil wird die Anwendung mit dem
Standardwert für Fensterstile des entsprechenden Betriebssystems dargestellt. Mit dem benutzerdefinierten
undurchsichtigen Fensterstil wird der System-Standardfensterstil entfernt und Sie können für die Anwendung
einen eigenen Fensterstil erstellen. (Den benutzerdefinierten Fensterstil erstellen Sie direkt im HTML-
Seitenpaket.) Der benutzerdefinierte transparente Fensterstil entspricht dem undurchsichtigen Fensterstil, fügt an
den Seitenrändern jedoch Tranzparenzeigenschaften hinzu. Dies ermöglicht Anwendungsfenster, die eine andere
als die Rechteckform haben.
Fenstergröße Gibt die Abmessungen des Anwendungsfensters beim Öffnen an.
Symbol Hier können Sie benutzerdefinierte Bilder als Anwendungssymbole auswählen. (Als Standardbilder
werden die mit der Adobe AIR-Erweiterung gelieferten Bilder verwendet.) Klicken Sie zum Verwenden
benutzerdefinierter Bilder auf die Schaltfläche „Symbolbilder auswählen“. Klicken Sie im daraufhin angezeigten
Dialogfeld „Symbolbilder“ für jede Symbolgröße auf das entsprechende Ordnersymbol und wählen Sie die
gewünschte Symboldatei aus. In AIR werden als Dateien für Anwendungssymbolbilder nur PNG-Dateien
unterstützt.
Note: Ausgewählte benutzerdefinierte Bilder müssen sich auf der Anwendungswebsite befinden und mit einem
relativen Pfad zum Stammordner der Website angegeben werden.
Verknüpfte Dateitypen Hier können Sie einer Anwendung bestimmte Dateitypen zuordnen. Weitere
Informationen finden Sie im folgenden Abschnitt.
Anwendungs-Updates Diese Einstellung legt fest, ob das Adobe AIR-Anwendungsinstallationsprogramm oder die
Anwendung selbst gegebenenfalls notwendige Aktualisierungen einer Adobe AIR-Anwendung durchführt.
Standardmäßig ist das Kontrollkästchen in der Standardeinstellung aktiviert. In diesem Fall werden
416
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Aktualisierungen vom Adobe AIR-Anwendungsinstallationsprogramm durchgeführt. Wenn die Anwendung
gegebenenfalls notwendige Aktualisierungen selbst durchführen soll, deaktivieren Sie dieses Kontrollkästchen.
Beachten Sie hierbei jedoch, dass Sie dann eine Anwendung programmieren müssen, die Aktualisierungen
durchführen kann.
Enthaltene Dateien Gibt an, welche Dateien und Ordner in die Anwendung aufgenommen werden sollen. Sie
können HTML- und CSS-Dateien, Bilddateien und JavaScript-Bibliotheksdateien hinzufügen. Klicken Sie auf die
Schaltfläche mit dem Plussymbol (+), um Dateien hinzuzufügen, und auf die Schaltfläche mit dem Ordnersymbol,
um Ordner hinzuzufügen. Bestimmte Dateien wie „_mmServerScripts“, „_notes“ usw. sollten nicht hinzugefügt
werden. Um eine Datei oder einen Ordner aus der Liste zu löschen, wählen Sie die Datei oder den Ordner aus und
klicken Sie auf die Schaltfläche mit dem Minussymbol (-).
Digitale Signatur Klicken Sie auf „Festlegen“, um die Anwendung mit einer digitalen Signatur zu versehen. Diese
Einstellung ist erforderlich. Weitere Informationen finden Sie im folgenden Abschnitt.
Programmmenüordner Gibt ein Unterverzeichnis im Windows-Startmenü an, in dem die
Anwendungsverknüpfung angelegt wird. (Gilt nicht für Macintosh.)
Ziel Gibt den Speicherort für das Installationsprogramm der neuen Anwendung (.air-Datei) an. Der
standardmäßige Speicherort ist der Stammordner der Website. Klicken Sie auf die Schaltfläche „Durchsuchen“, um
einen anderen Speicherort auszuwählen. Der Standarddateiname ist der Name der Site, ergänzt um die .air-
Dateierweiterung. Diese Einstellung ist erforderlich.
Es folgt ein Beispiel für dieses Dialogfeld mit einigen einfachen Einstellungen:
417
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Anwendungen mit digitalen Zertifikaten signieren
Eine digitale Signatur bietet die Sicherheit, dass der Code einer Anwendung seit seiner Erstellung durch den
Softwareautor nicht geändert oder beschädigt wurde. Alle Adobe AIR-Anwendungen erfordern eine digitale Signatur
und können andernfalls nicht installiert werden. Sie können die Anwendung mit einem käuflich erworbenen digitalen
Zertifikat signieren, ein eigenes Zertifikat erstellen oder eine Adobe AIR-Datei (eine Adobe AIR-
Zwischenformatdatei) erstellen, die zu einem späteren Zeitpunkt signiert wird.
1 Klicken Sie im Dialogfeld „AIR-Anwendungs- und Installationseinstellungen“ auf die Schaltfläche „Festlegen“
neben der Option „Digitale Signatur“.
2 Wählen Sie im Dialogfeld „Digitale Signatur“ eine der folgenden Möglichkeiten:
• Wenn Sie eine Anwendung mit einem vorab erworbenen digitalen Zertifikat signieren möchten, klicken Sie auf
die Schaltfläche „Durchsuchen“, wählen Sie das Zertifikat aus, geben Sie das entsprechende Kennwort ein und
klicken Sie auf „OK“.
• Wenn Sie ein eigenes, selbst signiertes digitales Zertifikat erstellen möchten, klicken Sie auf „Erstellen“ und
geben Sie im Dialogfeld die erforderlichen Informationen ein. Die Option für den Zertifikatstyp bezieht sich auf
die Sicherheitsstufe: 1024-RSA verwendet einen 1024-Bit-Schlüssel (geringere Sicherheit), während 2048-RSA
einen 2048-Bit-Schlüssel (höhere Sicherheit) verwendet. Klicken Sie abschließend auf „OK“. Geben Sie im
Dialogfeld „Digitale Signatur“ das entsprechende Kennwort ein und klicken Sie auf „OK“.
• Wählen Sie die Option „AIRI-Paket vorbereiten, das später signiert wird“ aus und klicken Sie auf „OK“. Mit
dieser Option können Sie eine AIRI-Anwendung (AIR Intermediate) ohne digitale Signatur erstellen. Benutzer
können die Anwendung jedoch erst installieren, wenn Sie eine digitale Signatur hinzufügen.
Informationen zu Zeitstempeln
Wenn Sie eine Adobe AIR-Anwendung mit einem digitalen Zertifikat signieren, ruft das Paket-Tool vom Server
vertrauenswürdige Zeitstempelinformationen ab, um unabhängig verifizierbare Angaben für Datum und Uhrzeit
beim Signieren zu erhalten. Der empfangene Zeitstempel wird in die AIR-Datei integriert. Solange das
Signierungszertifikat zum Zeitpunkt der Signatur gültig war, kann die AIR-Anwendung später auch dann installiert
werden, wenn das Zertifikat inzwischen abgelaufen ist. Wenn jedoch kein Zeitstempel abgerufen werden konnte, kann
die AIR-Datei nicht mehr installiert werden, falls das Zertifikat abläuft oder zurückgezogen wird.
In der Standardeinstellung wird von der Adobe AIR-Erweiterung für Dreamweaver beim Erstellen der Adobe AIR-
Anwendung ein Zeitstempel abgerufen. Sie können dies jedoch deaktivieren, indem Sie im Dialogfeld „Digitale
Signatur“ die Option „Zeitstempel“ deaktivieren. (Gegebenenfalls ist dies notwendig, wenn kein Zeitstempel-Dienst
verfügbar ist.) Adobe empfiehlt, dass alle öffentlich zugänglich gemachten AIR-Dateien einen Zeitstempel enthalten.
Die vom AIR-Pakettool standardmäßig verwendete Zeitstempel-Vertrauensstelle ist Geotrust. Weitere Informationen
zu Zeitstempeln und digitalen Zertifikaten finden Sie unter Digitales Signieren von AIR-Dateien.
Zugeordnete AIR-Dateitypen bearbeiten
Sie können Ihrer Adobe AIR-Anwendung unterschiedliche Dateitypen zuordnen. Wenn Sie z. B. festlegen möchten,
dass Dateitypen mit der Erweiterung „.avf“ beim Doppelklicken in Adobe AIR geöffnet werden, können Sie die
Erweiterung „.avf“ der Liste zugeordneter Dateitypen hinzufügen.
1 Klicken Sie im Dialogfeld „AIR-Anwendungs- und Installationseinstellungen“ auf die Schaltfläche „Liste
bearbeiten“ neben der Option „Verknüpfte Dateitypen“.
418
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
2 Führen Sie im Dialogfeld „Verknüpfte Dateitypen“ einen der folgenden Schritte aus:
• Wählen Sie einen Dateityp aus und klicken Sie auf die Schaltfläche mit dem Minussymbol (-), um den Dateityp
zu entfernen.
• Klicken Sie auf die Schaltfläche mit dem Plussymbol (+), um einen Dateityp hinzuzufügen.
Wenn Sie auf das Plussymbol klicken, um einen Dateityp hinzuzufügen, wird das Dialogfeld
„Dateitypeinstellungen“ angezeigt. Tragen Sie im Dialogfeld die gewünschten Angaben ein und klicken Sie zum
Schließen auf „OK“.
Es folgt eine Liste der Dialogfeldoptionen:
Spry-QuickInfo Gibt den Namen des Dateityps an, der in der Liste der verknüpften Dateitypen angezeigt wird.
Die Angabe dieses Werts ist zwingend erforderlich. Der Name darf nur Buchstaben und Ziffern des ASCII-
Zeichensatzes (a-z, A-Z, 0-9) und Punkte (.) enthalten (Beispiel: adobe.VideoFile). Das erste Zeichen des
Namens muss ein Buchstabe sein. Die maximal zulässige Länge beträgt 38 Zeichen.
Erweiterung Gibt die Erweiterung des Dateityps an. Tragen Sie diesen Wert ohne führenden Punkt ein. Die
Angabe dieses Werts ist zwingend erforderlich. Die Erweiterung darf nur Buchstaben und Ziffern des ASCII-
Zeichensatzes (a-z, A-Z, 0-9) enthalten. Die maximal zulässige Länge beträgt 38 Zeichen.
Beschreibung Hier können Sie optional eine Beschreibung des Dateityps eingeben.
Inhaltstyp Gibt den MIME-Typ oder den Medientyp der Datei an (z. B. „text/html“, „image/gif“ usw.).
Speicherorte für Symboldateien Hier können Sie für den verknüpften Dateityp benutzerdefinierte Bilder
auswählen. (Als Standardbilder werden die mit der Adobe AIR-Erweiterung gelieferten Bilder verwendet.)
Einstellungen für AIR-Anwendungen bearbeiten
Sie können die Einstellungen für Ihre Adobe AIR-Anwendung jederzeit bearbeiten.
❖ Wählen Sie „Site“ > „AIR-Anwendungseinstellungen“ aus und nehmen Sie die gewünschten Änderungen vor.
Webseitenvorschau in einer AIR-Anwendung anzeigen
Sie können in Dreamweaver die Vorschau einer HTML-Seite anzeigen, wie sie in einer Adobe AIR-Anwendung
dargestellt wird. Dies ist hilfreich, wenn Sie das Erscheinungsbild einer Webseite in der Anwendung überprüfen
möchten, ohne zuvor die gesamte Anwendung erstellen zu müssen.
❖ Klicken Sie auf der Dokumentsymbolleiste auf die Schaltfläche „Vorschau/Debug im Browser“ und wählen Sie die
Option „Vorschau in AIR“ aus.
Sie können auch Strg+Umschalt+F12 (Windows) oder Befehl+Umschalt+F12 (Macintosh) drücken.
AIR-Codehinweise und -Codefarben verwenden
Die Adobe AIR-Erweiterung für Dreamweaver erweitert die Codeansicht von Dreamweaver auch um Codehinweise
und farbliche Code-Hervorhebungen für Adobe AIR-Sprachelemente.
❖ Öffnen Sie eine HTML- oder JavaScript-Datei in der Codeansicht und geben Sie Adobe AIR-Programmcode ein.
419
VERWENDEN VON DREAMWEAVER
Mit anderen Anwendungen arbeiten
Last updated 10.4.2012
Note: Das Anzeigen von Codehinweisen funktioniert nur innerhalb von <script>-Tags oder in .js-Dateien.
Weitere Informationen zu den Adobe AIR-Sprachelementen finden Sie in der Entwicklerdokumentation im
restlichen Teil dieses Handbuchs.
Anzeigen der Adobe AIR-Dokumentation
Durch die Adobe AIR-Erweiterung wird Dreamweaver um einen Eintrag im Menü „Hilfe“ ergänzt, mit dem Sie auf
die Dokumentation zum Entwickeln von AIR-Anwendungen mit HTML und Ajax zugreifen können.
❖ Wählen Sie „Hilfe“ > „Adobe AIR-Hilfe“.
420
Last updated 10.4.2012
Chapter 14: Vorlagen erstellen und
verwalten
Dreamweaver-Vorlagen
Grundlegendes zu Dreamweaver-Vorlagen
Eine Vorlage ist ein spezieller Dokumenttyp für die Erstellung eines „festen“ Seitenlayouts. Sie können dann auf dieser
Vorlage basierende Dokumente erstellen, wobei das Layout der Vorlage übernommen wird. Bei der Erstellung einer
Vorlage legen Sie „bearbeitbare“ Inhalte fest, d. h. Inhalte, die die Benutzer in einem auf der Vorlage basierenden
Dokument bearbeiten können. Mithilfe von Vorlagen kann der Autor einer Vorlage festlegen, welche Seitenelemente
von Benutzern der Vorlage, beispielsweise von Programmierern, Grafikern und anderen Webentwicklern, bearbeitet
werden können. Es gibt mehrere Arten von Vorlagenbereichen, die der Autor der Vorlage in ein Dokument
aufnehmen kann.
Note: Mithilfe von Vorlagen können Sie einen großen Designbereich kontrollieren und komplette Layouts wieder
verwenden. Wenn Sie individuelle Designelemente, wie Copyright-Informationen einer Website oder ein Logo, wieder
verwenden möchten, erstellen Sie Bibliothekselemente.
Die Verwendung von Vorlagen ermöglicht die Aktualisierung mehrerer Seiten in einem Arbeitsgang. Ein Dokument,
das auf der Basis einer Vorlage erstellt wurde, bleibt mit dieser Vorlage verknüpft (es sei denn, Sie lösen die
Verbindung). Sie können eine Vorlage ändern und sofort das Design aller Dokumente aktualisieren, die auf dieser
Vorlage basieren.
Note: Vorlagen in Dreamweaver unterscheiden sich von Vorlagen in einigen anderen Produkten der Adobe Creative
Suite insofern, dass Seitenbereiche von -Vorlagen standardmäßig festgelegt sind (d. h. nicht bearbeitbar
sind).Dreamweaver
More Help topics
“Verwalten von Elementen und Bibliotheken” on page 120
“Erstellen von Dreamweaver-Vorlagen” on page 428
Arten von Vorlagenbereichen
Wenn Sie ein Dokument als Vorlage speichern, sind die meisten Bereiche des Dokuments gesperrt. Als Autor der
Vorlage legen Sie fest, welche Bereiche eines auf einer Vorlage basierenden Dokuments bearbeitbar sind, indem Sie in
die Vorlage bearbeitbare Bereiche oder bearbeitbare Parameter einfügen.
Beim Erstellen der Vorlage können Sie Änderungen an bearbeitbaren und gesperrten Bereichen vornehmen. In
Dokumenten, die auf der Vorlage basieren, kann der Benutzer der Vorlage jedoch nur die bearbeitbaren Bereiche
ändern; gesperrte Bereiche können nicht modifiziert werden.
Es werden vier Arten von Vorlagenbereichen unterschieden:
Ein bearbeitbarer Bereich ist ein nicht gesperrter Bereich in einem auf einer Vorlage basierenden Dokument, der von
den Benutzern der Vorlage bearbeitet werden kann. Der Autor der Vorlage kann jeden beliebigen Bereich der Vorlage
als bearbeitbaren Bereich definieren. Vorlagen sollten mindestens einen bearbeitbaren Bereich enthalten, um von
Nutzen zu sein; andernfalls können die Seiten, die auf der Vorlage basieren, nicht bearbeitet werden.
421
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Ein sich wiederholender Bereich ist ein Bereich des Dokumentlayouts, der so eingestellt ist, dass die Vorlagenbenutzer
in einem auf der Vorlage basierenden Dokument Kopien des wiederholenden Bereichs einfügen und löschen können.
Sie können beispielsweise eine Tabellenzeile als wiederholenden Bereich einstellen. Wiederholende Bereiche sind
bearbeitbar, sodass die Vorlagenbenutzer den Inhalt im wiederholenden Element bearbeiten können, während das
Design selbst vom Autor der Vorlage festgelegt ist.
Sie können in eine Vorlage zwei Arten wiederholender Bereiche einfügen, und zwar „Wiederholender Bereich“ und
„Wiederholende Tabelle“.
Ein optionaler Bereich ist ein Bereich in einer Vorlage mit Inhalten – etwa Texte oder Bilder –, die im Dokument
angezeigt oder nicht angezeigt werden können. Auf einer Seite, die auf einer Vorlage basiert, legt normalerweise der
Benutzer der Vorlage fest, ob der Inhalt angezeigt wird.
Ein bearbeitbares Tag-Attribut ermöglicht die Freigabe eines Tag-Attributs in einer Vorlage, sodass das Attribut in
einer Seite, die auf der Vorlage basiert, bearbeitet werden kann. Sie können beispielsweise festlegen, welches Bild im
Dokument angezeigt wird, und gleichzeitig die Wahl der Ausrichtung (linksbündig, rechtsbündig oder zentriert) dem
Benutzer der Vorlage überlassen.
More Help topics
“Inhalte in vorlagenbasierten Dokumenten bearbeiten” on page 450
“Erstellen bearbeitbarer Bereiche in Vorlagen” on page 431
“Erstellen wiederholender Bereiche in Vorlagen” on page 433
“Verwenden optionaler Bereiche in Vorlagen” on page 436
“Definieren bearbeitbare Tag-Attribute in Vorlagen” on page 438
Hyperlinks in Vorlagen
Wenn Sie eine Vorlagendatei erstellen, indem Sie eine vorhandene Seite als Vorlage speichern, werden die neue
Vorlage im Vorlagenordner sowie vorhandene Hyperlinks in der Datei aktualisiert, sodass ihre dokumentrelativen
Pfade stimmen. Wenn Sie später ein Dokument erstellen, das auf der Vorlage basiert, und das neue Dokument
speichern, werden alle dokumentrelativen Hyperlinks wiederum aktualisiert, sodass sie sich weiterhin auf die
korrekten Dateien beziehen.
Wenn Sie allerdings in eine Vorlagendatei einen neuen dokumentrelativen Hyperlink einfügen und den Pfad im
Eigenschafteninspektor in das Hyperlinktextfeld eingeben, können sich durch Schreibfehler leicht fehlerhafte
Pfadangaben ergeben. Der korrekte Pfad in einer Vorlagendatei ist der Pfad vom Vorlagenordner zum verknüpften
Dokument und nicht der Pfad vom Ordner des auf der Vorlage basierenden Dokuments zum verknüpften Dokument.
Sie können sicherstellen, dass für Hyperlinks in Vorlagen die korrekten Pfade verwendet werden, indem Sie beim
Erstellen der Hyperlinks entweder das Ordnersymbol oder das Dateizeigersymbol im Eigenschafteninspektor
verwenden.
Voreinstellung für Hyperlinkaktualisierungen in Dreamweaver 8.01
Vor Dreamweaver 8 (also in Dreamweaver MX 2004 und in früheren Versionen) hat Dreamweaver Hyperlinks zu
Dateien im Vorlagenordner nicht aktualisiert. (Wenn sich im Vorlagenordner z. B. eine Datei mit dem Namen
„main.css“ befindet und die Vorlagendatei den Hyperlink href="main.css" enthält, wird dieser Hyperlink beim
Erstellen einer auf einer Vorlage basierenden Seite in Dreamweaver nicht aktualisiert.)
422
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Manche Benutzer haben die Art und Weise, wie Dreamweaver Hyperlinks zu Dateien im Vorlagenordner behandelte,
zu ihrem Vorteil genutzt, denn sie verwendeten diese Inkonsistenz absichtlich dazu, Hyperlinks zu erstellen, die nicht
aktualisiert werden sollten. Angenommen, Sie arbeiten mit Dreamweaver MX 2004 und haben eine Site mit
unterschiedlichen Ordnern für verschiedene Anwendungen – Dreamweaver Flash und Photoshop. Jeder
Produktordner enthält eine vorlagenbasierte index.html-Seite und, auf derselben Ebene, eine eigene Version der Datei
main.css. Wenn die Vorlagendatei den dokumentbezogenen Hyperlink href="main.css" (Hyperlink zu einer Version
der Datei „main.css“ im Vorlagenordner) enthält und Sie festlegen möchten, dass Ihre vorlagenbasierten index.html-
Seiten diesen Hyperlink ebenfalls genau wie angegeben enthalten, können Sie die vorlagenbasierten index.html-Seiten
erstellen, ohne dass diese Hyperlinks in Dreamweaver aktualisiert werden. Wenn Dreamweaver MX 2004 die
vorlagenbasierten index.html-Seiten erstellt, verweisen die (nicht aktualisierten) href="main.css"-Hyperlinks auf die
„main.css“-Dateien, die sich in den Dreamweaver-, Flash- und Photoshop-Ordnern befinden, und nicht auf die
„main.css“-Datei im Vorlagenordner.
In Dreamweaver 8 jedoch ist dieses Verhalten geändert worden, sodass beim Erstellen von Seiten, die auf Vorlagen
basieren, alle dokumentrelativen Hyperlinks aktualisiert werden, und zwar ungeachtet des offensichtlichen
Speicherorts der verknüpften Dateien. In diesem Szenario untersucht Dreamweaver den Hyperlink in der
Vorlagendatei (href="main.css") und erstellt einen Hyperlink in der vorlagenbasierten Seite, der relativ zum
Speicherort des neuen Dokuments ist. Wenn Sie beispielsweise ein vorlagenbasiertes Dokument eine Ebene über dem
Vorlagenordner erstellen, schreibt Dreamweaver den Hyperlink im neuen Dokument in der Form
href="Templates/main.css". Diese Aktualisierung in Dreamweaver 8 machte Hyperlinks in Seiten von Designern
unbrauchbar, die die zuvor in Dreamweaver übliche Praxis zu ihrem Vorteil nutzen wollten (nämlich Hyperlinks zu
Dateien im Vorlagenordner nicht zu aktualisieren).
Dreamweaver 8.01 wurde um eine Voreinstellung erweitert, die es Ihnen erlaubt, das Verhalten, relative Hyperlinks
zu aktualisieren, an- und abzuschalten. (Diese spezielle Voreinstellung gilt nur für Hyperlinks zu Dateien im
Vorlagenordner und nicht generell für alle Hyperlinks.) Das Standardverhalten ist, diese Hyperlinks nicht zu
aktualisieren (wie in Dreamweaver MX 2004 und den Vorgängerversionen). Wenn Sie es jedoch vorziehen, dass
Dreamweaver beim Erstellen vorlagenbasierender Seiten diese Art von Hyperlinks aktualisiert, können Sie diese
Voreinstellung deaktivieren. (Dies würde jedoch nur Sinn ergeben, wenn Sie beispielsweise eine CSS-Seite (Cascading
Stylesheets) wie „main.css“ im Vorlagenordner gespeichert haben und ein vorlagenbasiertes Dokument den Hyperlink
href="Templates/main.css" enthalten soll. Von dieser Vorgehensweise wird jedoch abgeraten, da im Vorlagenordner
nur Dreamweaver-Vorlagendateien (DWT-Dateien) abgelegt werden sollten.)
Damit in Dreamweaver dokumentrelative Pfade zu Dateien, die keine Vorlagen sind, im Ordner „Templates“
aktualisiert werden, wählen Sie im Dialogfeld „Site-Definition“ (unter „Erweiterte Einstellungen“) die Kategorie
„Vorlagen“ aus und deaktivieren Sie die Option „Relative Dokumentpfade nicht umschreiben“.
Weitere Informationen finden Sie in der Dreamweaver-TechNote auf der Adobe-Website unter
www.adobe.com/go/f55d8739_de.
More Help topics
“Hyperlinks zu Dokumenten mit dem Dateizeigersymbol erstellen” on page 298
“Dokumentrelative Pfade” on page 295
423
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Serverskripts in Vorlagen und vorlagenbasierten Dokumenten
Einige Serverskripts werden ganz am Anfang oder Ende des Dokuments eingefügt (vor dem Tag <html> bzw. hinter
dem Tag
</html>). Solche Skripts erfordern eine besondere Behandlung in Vorlagen und in Dokumenten, die auf
Vorlagen basieren. Wenn Sie Änderungen an Skriptcode vornehmen, der sich vor dem Tag
<html> oder hinter dem
Tag
</html> in einer Vorlage befindet, werden diese Änderungen normalerweise nicht in Dokumente kopiert, die auf
der Vorlage basieren. Dies kann zu Serverfehlern führen, wenn andere Serverskripts, die sich im Hauptteil der Vorlage
befinden, von den nicht kopierten Skripts abhängig sind. Daher erscheint eine Warnmeldung, wenn Sie Skripts
ändern, die sich innerhalb einer Vorlage vor dem Tag
<html> oder hinter dem Tag </html> befinden.
Sie können das Problem vermeiden, indem Sie den folgenden Code in den
head-Abschnitt der Vorlage einfügen:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
Wenn sich dieser Code in einer Vorlage befindet, werden Änderungen an Skripts, die sich vor dem Tag <html> oder
hinter dem Tag
</html> befinden, in die Dokumente kopiert, die auf der entsprechenden Vorlage basieren. Allerdings
können diese Skripts in den Dokumenten, die auf der Vorlage basieren, nicht mehr bearbeitet werden. Sie müssen sich
also entscheiden, ob Sie diese Skripts in der Vorlage oder in den auf der Vorlage basierenden Dokumenten bearbeiten
möchten; beide Möglichkeiten gleichzeitig stehen nicht zur Verfügung.
Vorlagenparameter
Mit Vorlagenparametern können Werte angegeben werden, die den Inhalt von Dokumenten steuern, welche auf einer
Vorlage basieren. Verwenden Sie Vorlagenparameter für optionale Bereiche oder bearbeitbare Tag-Attribute oder
legen Sie die Werte fest, die an ein angefügtes Dokument übergeben werden sollen. Für jeden Parameter definieren Sie
einen Namen, einen Datentyp und einen Standardwert. Jeder Parameter muss einen eindeutigen Namen haben, wobei
zwischen Groß- und Kleinschreibung unterschieden wird. Sie müssen einen der folgenden fünf erlaubten Datentypen
besitzen: Text, Boolean, Farbe, URL oder Zahl.
Vorlagenparameter werden an das Dokument als Instanzparameter übergeben. In den meisten Fällen kann der
Benutzer der Vorlage den Standardwert des Parameters bearbeiten und somit das Dokument, das auf der Vorlage
basiert, anpassen. In anderen Fällen kann der Autor der Vorlage deren Inhalt basierend auf dem Wert eines
Vorlagenausdrucks festlegen.
More Help topics
“Verwenden optionaler Bereiche in Vorlagen” on page 436
“Definieren bearbeitbare Tag-Attribute in Vorlagen” on page 438
Vorlagenausdrücke
Vorlagenausdrücke sind Anweisungen, die einen Wert berechnen oder auswerten.
Sie können einen Ausdruck verwenden, um einen Wert zu speichern und in einem Dokument anzuzeigen. Ausdrücke
können einfach oder komplex sein: Sie können den einfachen Wert eines Parameters enthalten, wie beispielsweise
@@(Param)@@, jedoch auch eine Berechnung von Werten, mit denen beispielsweise die Hintergrundfarbe von
Tabellenzeilen geändert wird, wie
@@((_index & 1) ? red : blue)@@.
Sie können auch Vorlagenausdrücke mit einer oder mehreren If-Bedingung(en) definieren. Ein Ausdruck in einer
bedingten Anweisung wird von Dreamweaver entweder als
true (wahr) oder false (falsch) ausgewertet. Wenn die
Bedingung wahr ist, wird der optionale Bereich im auf der Vorlage basierten Dokument angezeigt; wenn sie unwahr
ist, wird der Bereich nicht angezeigt.
424
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Sie können Ausdrücke in der Codeansicht oder im Dialogfeld „Optionaler Bereich“ definieren, wenn Sie einen
optionalen Bereich einfügen.
In der Codeansicht können Vorlagenausdrücke auf zwei Arten definiert werden. Verwenden Sie den Kommentar
<!-
- TemplateExpr expr="Ihr Ausdruck"--> oder @@(Ihr Ausdruck)@@. Wenn Sie den Ausdruck in den
Vorlagencode einfügen, wird in der Entwurfsansicht eine Ausdrucksmarkierung angezeigt. Beim Anwenden der
Vorlage wertet Dreamweaver den Ausdruck aus und zeigt den Wert im Dokument an, das auf der Vorlage basiert.
More Help topics
“Verwendete Sprache für Vorlagenausdrücke” on page 424
“Mehrfache If-Bedingung in Vorlagencodes” on page 425
Verwendete Sprache für Vorlagenausdrücke
Die für Vorlagenausdrücke verwendete Sprache ist ein kleiner Teilsatz von JavaScript. Sie verwendet dieselbe Syntax
und dieselben Regeln für Rangfolgen wie JavaScript. Verwenden Sie JavaScript-Operatoren, um Ausdrücke wie den
folgenden zu erstellen:
@@(firstName+lastName)@@
Folgende Funktionen und Operatoren werden unterstützt:
• Numerische Literale, String-Literale (Anführungszeichen in der Syntax erforderlich), Boolesche Literale (true und
false)
• Variable Bezüge (siehe die Liste definierter Variablen weiter unten in diesem Abschnitt)
• Feldbezüge (der „Punkt-Operator“)
• Unäre Operatoren: +, -, ~, !
• Binäre Operatoren: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
• Bedingungsoperatoren: ?:
• Klammern: ()
Folgende Datentypen werden unterstützt: Boolean, 64-Bit-Fließkomma (IEEE), String und Object. In
Dreamweaver-Vorlagen werden die JavaScript-Datentypen „null“ und „undefined“ nicht unterstützt. Darüber
hinaus ist es in Vorlagen nicht möglich, Skalar-Datentypen implizit in Objekte zu konvertieren; daher würde der
Ausdruck
"abc".length zu einem Fehler führen und nicht den Wert 3 zurückgeben.
Die einzigen verfügbaren Objekte sind die durch das Ausdrucksobjektmodell definierten. Folgende Variablen sind
definiert:
_document Enthält die Vorlagendaten der Dokumentebene und für jeden Parameter in der Vorlage ein Feld.
_repeat Ist nur für Ausdrücke definiert, die sich innerhalb eines wiederholenden Bereichs befinden. Zeigt
integrierte Informationen über den Bereich an.
_index Numerischer Index des aktuellen Eintrags (der Index beginnt bei 0).
_numRows Gesamtzahl der Einträge in diesem wiederholenden Bereich.
_isFirst Wahr, wenn der aktuelle Eintrag der erste Eintrag in seinem wiederholenden Bereich ist.
_isLast Wahr, wenn der aktuelle Eintrag der letzte Eintrag in seinem wiederholenden Bereich ist.
_prevRecord Das _repeat-Objekt des vorherigen Eintrags. Der Zugriff auf diese Eigenschaft im ersten Eintrag des
Bereichs führt zu einem Fehler.
425
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
_nextRecord Das _repeat-Objekt des nächsten Eintrags. Der Zugriff auf diese Eigenschaft im letzten Eintrag des
Bereichs führt zu einem Fehler.
_parent In einem verschachtelten wiederholenden Bereich wird hierdurch das _repeat-Objekt für den
umschließenden (äußeren) wiederholenden Bereich angegeben. Der Aufruf dieser Eigenschaft außerhalb eines
verschachtelten wiederholenden Bereichs führt zu einem Fehler.
Bei der Auswertung des Ausdrucks sind alle Felder der Objekte „_document“ und „_repeat“ implizit verfügbar. Sie
können beispielsweise
title anstelle von _document.title eingeben, um Zugriff auf den title-Parameter des
Dokuments zu erhalten.
Wenn ein Konflikt der Feldnamen auftreten sollte, haben die Felder des „_repeat“-Objekts Vorrang vor den
Feldern des „_document“-Objekts. Daher benötigen Sie wahrscheinlich keine expliziten Bezüge auf „_document“
oder „_repeat“, es sei denn, „_document“ ist innerhalb eines repeat-Bereichs zur Bezugnahme auf
Dokumentparameter erforderlich, die in wiederholenden Bereichsparametern versteckt sind.
Bei der Verwendung verschachtelter wiederholender Bereiche sind nur die Felder der innersten wiederholenden
Bereiche implizit verfügbar. Die äußeren Bereiche müssen über „_parent“ explizit aufgerufen werden.
Mehrfache If-Bedingung in Vorlagencodes
Sie können Vorlagenausdrücke mit einer oder mehreren If-Bedingung(en) definieren. Dieses Beispiel zeigt, wie ein
Parameter namens „Dept“ definiert, ein Anfangswert festgelegt und eine mehrfache If-Bedingung erstellt wird, um zu
ermitteln, welches Logo angezeigt werden soll.
Dies ist ein Beispiel für einen Code, den Sie in den
head-Abschnitt der Vorlage eingeben können:
<!-- TemplateParam name="Dept" type="number" value="1" -->
Die folgende bedingte Anweisung prüft den Wert, der dem Parameter Dept zugewiesen wird. Wenn die Bedingung
wahr ist oder zutrifft, wird das entsprechende Bild angezeigt.
<!-- TemplateBeginMultipleIf -->
<!-- checks value of Dept and shows appropriate image-->
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!--
TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!--
TemplateEndIfClause-->
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!--
TemplateEndIfClause -->
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!--
TemplateEndIfClause -->
<!-- TemplateEndMultipleIf -->
Wenn Sie ein auf einer Vorlage basierendes Dokument erstellen, werden die Vorlagenparameter automatisch an das
Dokument übergeben. Der Benutzer der Vorlage legt fest, welches Bild angezeigt wird.
More Help topics
“Vorlageneigenschaften ändern” on page 451
426
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Vorlagen und vorlagenbasierte Dokumente erkennen
Vorlagen in der Entwurfsansicht erkennen
In der Entwurfsansicht werden bearbeitbare Bereiche des Dokumentfensters durch rechteckige Rahmen in einer
voreingestellten Markierungsfarbe angezeigt. Links oben in jedem Bereich wird der Name des Bereichs angezeigt.
Sie können eine Vorlagendatei an der Titelleiste im Dokumentfenster erkennen. Die Titelleiste einer Vorlagendatei
enthält die Bezeichnung <<Vorlage>> und trägt die Dateierweiterung „.dwt“.
Vorlagen in der Codeansicht erkennen
In der Codeansicht sind bearbeitbare Inhaltsbereiche durch die folgenden Kommentare im HTML-Code
gekennzeichnet:
<!-- TemplateBeginEditable> und <!-- TemplateEndEditable -->
Mit den Farbeinstellungen können Sie Ihr eigenes Farbschema festlegen, sodass Vorlagenbereiche bei der Anzeige
eines Dokuments in der Codeansicht leicht zu unterscheiden sind.
Der gesamte Inhalt zwischen diesen beiden Kommentaren kann in den Dokumenten, die auf der Vorlage basieren,
bearbeitet werden. Der HTML-Quellcode für einen bearbeitbaren Bereich sieht daher möglicherweise so aus:
427
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- TemplateBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- TemplateEndEditable -->
</table>
Note: Vermeiden Sie bei der Bearbeitung von Vorlagencode in der Codeansicht jegliche Änderungen der
vorlagenbezogenen Kommentar-Tags, auf die Dreamweaver bei der Verarbeitung von Vorlagen angewiesen ist.
More Help topics
“Code-Farbeinstellungen für Vorlagen anpassen” on page 455
Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen
Bei einem auf einer Vorlage basierenden Dokument werden bearbeitbare Bereiche in der Entwurfsansicht des
Dokumentfensters durch rechteckige Rahmen in einer voreingestellten Markierungsfarbe angezeigt. In der linken
oberen Ecke eines jeden Bereichs wird der Name des Bereichs angezeigt.
Nicht nur die bearbeitbaren Bereiche, sondern die gesamte Seite ist durch einen andersfarbigen Rahmen markiert.
Rechts oben im Fenster ist der Name der Vorlage angegeben, auf der das Dokument basiert. Dieser markierte Rahmen
soll Sie daran erinnern, dass das Dokument auf einer Vorlage basiert und dass Sie nur den Inhalt der bearbeitbaren
Bereiche ändern können.
428
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
More Help topics
“Markierungseinstellungen für Vorlagenbereiche festlegen” on page 455
Vorlagenbasierte Dokumente in der Codeansicht erkennen
In der Codeansicht werden bearbeitbare Bereiche eines auf einer Vorlage basierenden Dokuments in einer anderen
Farbe als Code in nicht bearbeitbaren Bereichen angezeigt. Sie können nur Änderungen des Codes in
bearbeitbarenBereichen bzw. von bearbeitbaren Parametern vornehmen, in gesperrten Bereichen können Sie jedoch
keine Eingaben vornehmen.
Der bearbeitbare Inhalt ist durch die folgenden Dreamweaver-Kommentare im HTML-Code zu erkennen:
<!-- InstanceBeginEditable> und <!-- InstanceEndEditable -->
Der gesamte Inhalt zwischen diesen beiden Kommentaren kann in den Dokumenten, die auf der Vorlage basieren,
bearbeitet werden. Der HTML-Quellcode für einen bearbeitbaren Bereich sieht daher möglicherweise so aus:
<body bgcolor="#FFFFFF" leftmargin="0">
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#333366">
<td>Name</td>
<td><font color="#FFFFFF">Address</font></td>
<td><font color="#FFFFFF">Telephone Number</font></td>
</tr>
<!-- InstanceBeginEditable name="LocationList" -->
<tr>
<td>Enter name</td>
<td>Enter Address</td>
<td>Enter Telephone</td>
</tr>
<!-- InstanceEndEditable -->
</table>
</body>
Standardmäßig wird der nicht bearbeitbare Text grau dargestellt, doch Sie können im Dialogfeld „Voreinstellungen“
eine andere Farbe für die bearbeitbaren und nicht bearbeitbaren Bereiche festlegen.
More Help topics
“Code-Farbeinstellungen für Vorlagen anpassen” on page 455
Erstellen von Dreamweaver-Vorlagen
Grundsätzliches zum Erstellen von Dreamweaver-Vorlagen
Sie können eine Vorlage aus einem vorhandenen Dokument (beispielsweise aus einem Dokument im Format HTML,
Adobe ColdFusion oder Microsoft Active Server Pages) oder aus einem neuen Dokument erstellen.
Sobald Sie eine Vorlage erstellt haben, können Sie Bereiche einfügen und Einstellungen für Codefarbe und
Markierungsfarbe der Bereiche festlegen.
Sie können zusätzliche Informationen zu einer Vorlage, beispielsweise über den Autor, über die letzte Änderung oder
über den Grund für bestimmte Layoutentscheidungen in einer Design Notes-Datei für die Vorlage speichern. Die
Dokumente, die auf Grundlage der Vorlage erstellt werden, erhalten nicht die Design Notes der Vorlage.
429
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Note: Vorlagen in Adobe Dreamweaver unterscheiden sich von Vorlagen in einigen anderen Produkten der Adobe Creative
Suite insofern, als Seitenbereiche von Dreamweaver-Vorlagen standardmäßig festgelegt (d. h. nicht bearbeitbar) sind.
Ein Tutorial zur Erstellung von Vorlagen finden Sie unter www.adobe.com/go/vid0157_de.
Ein Tutorial zur Verwendung von Vorlagen finden Sie unter www.adobe.com/go/vid0158_de.
More Help topics
“Arten von Vorlagenbereichen” on page 420
“Voreinstellungen für Vorlagenbereiche” on page 455
“Design Notes mit Dateien verknüpfen” on page 114
Tutorial zur Erstellung von Vorlagen
Tutorial zur Verwendung von Vorlagen
Vorlagen aus vorhandenen Dokumenten erstellen
Sie können Vorlagen aus vorhandenen Dokumenten erstellen.
1 Öffnen Sie das Dokument, das Sie als Vorlage speichern möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Datei“ > „Als Vorlage speichern“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Vorlage erstellen“ aus.
Note: Wenn Sie die Option „Diese Warnung nicht mehr anzeigen“ nicht deaktiviert haben, wird in einer Warnmeldung
angezeigt, dass das zu speichernde Dokument keine bearbeitbaren Bereiche enthält. Klicken Sie auf „OK“, um das
Dokument als Vorlage zu speichern, oder auf „Abbrechen“, um das Dialogfeld zu schließen, ohne eine Vorlage zu
erstellen.
3 Wählen Sie eine Site im Popupmenü „Site“ aus, um die Vorlage darin zu speichern, und geben Sie im Feld
„Speichern unter“ einen eindeutigen Namen für die Vorlage ein.
4 Klicken Sie auf „Speichern“. Dreamweaver speichert die Vorlagendatei mit der Dateinamenerweiterung .dwt im
Ordner „Vorlagen“ im lokalen Stammordner der Site. Wenn der Ordner „Vorlagen“ in der Site noch nicht
vorhanden ist, wird er von Dreamweaver automatisch erstellt, sobald Sie eine neue Vorlage speichern.
Note: Speichern Sie Vorlagen nicht außerhalb des Ordners „Vorlagen“ und legen Sie keine anderen Dateien in diesem
Ordner ab. Der Ordner muss im lokalen Stammverzeichnis bleiben und darf nicht verschoben werden. Andernfalls
entstehen fehlerhafte Pfadangaben in den Vorlagen.
More Help topics
“Leere Vorlagen erstellen” on page 69
“Dokumente öffnen und erstellen” on page 66
Vorlagen mithilfe des Bedienfelds „Elemente“ erstellen
1
Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) auf der linken Seite die Kategorie „Vorlagen“ aus.
2 Klicken Sie unten im Bedienfeld „Elemente“ auf die Schaltfläche „Neue Vorlage“ .
Daraufhin wird eine neue, unbenannte Vorlage in die Vorlagenliste des Bedienfelds eingefügt.
430
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
3 Geben Sie einen Namen für die Vorlage ein, während sie noch ausgewählt ist. Drücken Sie die Eingabetaste
(Windows) bzw. Return (Macintosh).
Dreamweaver erstellt eine leere Vorlage im Bedienfeld „Elemente“ und im Ordner „Vorlagen“.
Vorlagen für Contribute-Sites
Mit Dreamweaver können Sie Vorlagen erstellen, die Adobe® Contribute®-Benutzer beim Erstellen neuer Seiten
unterstützen und gleichzeitig ein einheitliches Erscheinungsbild Ihrer Site gewährleisten. Außerdem können Sie das
Layout mehrerer Seiten gleichzeitig aktualisieren.
Wenn Sie eine Vorlage erstellen und zum Server hochladen, wird diese für alle mit Ihrer Site verbundenen Contribute-
Benutzer verfügbar, die eine Verbindung zu Ihrer Site herstellen, soweit Sie keine Einschränkungen für die
Vorlagennutzung für bestimmte Contribute-Rollen festgelegt haben. Wenn Sie Einschränkungen für die
Vorlagennutzung festgelegt haben, müssen Sie eventuell über die Liste der Vorlagen bestimmen, welche Vorlagen ein
Contribute-Benutzer verwenden kann. Weitere Informationen finden Sie unter Adobe Contribute verwalten.
Note: Stellen Sie sicher, dass es sich beim in der Site-Definition eines jeden Contribute-Benutzers definierten Site-
Stammordner um den gleichen handelt wie den in Ihrer Site-Definition in Dreamweaver angegebenen. Wenn der Site-
Stammordner eines Benutzers nicht mit Ihrem übereinstimmt, kann dieser Benutzer keine Vorlagen verwenden.
Zusätzlich zu Dreamweaver-Vorlagen können Sie mit den Tools der Contribute-Verwaltung auch „Nicht-
Dreamweaver-Vorlagen” erstellen. Eine „Nicht-Dreamweaver-Vorlage” ist eine bestehende Seite, mit der Contribute-
Benutzer neue Seiten erstellen können. Die Seite ähnelt einer Dreamweaver-Vorlage, die auf ihr basierenden Seiten
werden aber nicht aktualisiert, wenn Sie die Vorlage verändern. Außerdem können Seiten, die keine Dreamweaver-
Vorlagen sind, keine Dreamweaver-Vorlagenelemente wie bearbeitbare, gesperrte, sich wiederholende oder optionale
Bereiche enthalten.
Wenn ein Contribute-Benutzer ein neues Dokument innerhalb einer Site mit Dreamweaver-Vorlagen erstellt, listet
Contribute die verfügbaren Vorlagen (sowohl Dreamweaver-Vorlagen als auch Nicht-Dreamweaver-Vorlagen) im
Dialogfeld „Neue Seite“ auf.
431
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Um Seiten auf Ihrer Site einzubinden, die außer Latin 1 noch andere Kodierungen verwenden, müssen Sie vielleicht
Vorlagen (entweder Dreamweaver- oder Nicht-Dreamweaver) erstellen. Mit Contribute können die Benutzer Seiten
mit beliebigen Kodierungen bearbeiten. Erstellt ein Contribute-Benutzer allerdings eine neue leere Seite, wird dafür
die Kodierung Latin 1 verwendet. Contribute-Benutzer können Seiten mit einer anderen Kodierung erstellen, indem
sie eine Kopie einer bestehenden Seite anfertigen, die eine andere Kodierung verwendet, oder eine Vorlage mit einer
anderen Kodierung verwenden. Wenn es in der Site keine Seiten oder Vorlagen gibt, die eine andere Kodierung
verwenden, müssen Sie zuerst eine Seite oder Vorlage in Dreamweaver erstellen, die eine andere Kodierung
verwendet.
Vorlagen für Contribute-Sites erstellen
1 Wählen Sie „Site“ > „Sites verwalten“.
2 Wählen Sie eine Site aus und klicken Sie auf „Bearbeiten“.
3 Wählen Sie im Dialogfeld „Site-Definition“ die Kategorie „Contribute“ aus.
4 Aktivieren Sie nun die Contribute-Kompatibilität, wenn dies noch nicht geschehen ist.
Wählen Sie die Option „Contribute-Kompatibilität aktivieren“ und geben Sie eine Stammordner-URL ein.
5 Klicken Sie auf „Site in Contribute verwalten“.
6 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf „OK“.
7 Wählen Sie in der Kategorie für Benutzer und Rollen eine Rolle aus und klicken Sie auf die Schaltfläche zum
Bearbeiten der Rolleneinstellungen.
8 Wählen Sie die Kategorie „Neue Seiten“ und fügen Sie bestehende Seiten zur Liste unter der Option „Eine neue
Seite durch Kopieren einer Seite aus dieser Liste erstellen“ hinzu.
Weitere Informationen finden Sie unter Contribute verwalten.
9 Klicken Sie zweimal auf „OK“, um die Dialogfelder zu schließen.
More Help topics
“Eine Site für die Verwendung von Contribute vorbereiten” on page 61
Erstellen bearbeitbarer Bereiche in Vorlagen
Einfügen eines bearbeitbaren Bereichs
Bearbeitbare Vorlagenbereiche steuern, welche Bereiche einer vorlagenbasierten Seite vom Benutzer bearbeitet
werden können. Bevor Sie bearbeitbare Bereiche in das Dokument einfügen, speichern Sie es als Vorlage.
Note: Wenn Sie einen bearbeitbaren Bereich in ein Dokument und nicht in eine Vorlage einfügen, werden Sie in einer
Warnmeldung darauf hingewiesen, dass das Dokument automatisch als Vorlage gespeichert wird.
Sie können einen bearbeitbaren Bereich überall auf Ihrer Seite platzieren. Wenn Sie jedoch eine Tabelle oder ein
absolut positioniertes Element (AP-Element) bearbeitbar machen, sollten Sie folgende Punkte beachten:
• Sie können eine ganze Tabelle oder eine einzelne Tabellenzelle, nicht jedoch mehrere Zellen gleichzeitig als einen
einzelnen bearbeitbaren Bereich markieren. Wenn ein <td>-Tag ausgewählt ist, umfasst der bearbeitbare Bereich
die Region um die Zelle, andernfalls gehört nur der Zelleninhalt zum bearbeitbaren Bereich.
432
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
• AP-Elemente und AP-Elementinhalt sind separate Elemente. Wenn Sie ein AP-Element als bearbeitbar definieren,
können Sie sowohl die Position des AP-Elements als auch dessen Inhalt ändern. Wenn Sie dagegen den Inhalt eines
AP-Elements bearbeitbar machen, können Sie nur den Inhalt des AP-Elements ändern, nicht seine Position.
1 Führen Sie im Dokumentfenster einen der folgenden Schritte aus, um den Bereich auszuwählen:
• Wählen Sie den Text oder Inhalt aus, den Sie als bearbeitbaren Bereich definieren möchten.
• Setzen Sie die Einfügemarke an die Stelle, an der Sie einen bearbeitbaren Bereich einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus, um einen bearbeitbaren Bereich einzufügen:
• Wählen Sie „Einfügen“ > „Vorlagenobjekte“ > „Bearbeitbarer Bereich“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Vorlagen“ > „Neuer bearbeitbarer Bereich“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Bearbeitbarer Bereich“ aus.
3 Geben Sie im Feld „Name“ einen eindeutigen Namen für den Bereich ein. (Innerhalb einer Vorlage kann dieser
Name dann nicht für weitere bearbeitbare Bereiche verwendet werden.)
Note: Geben Sie im Feld „Name“ keine Sonderzeichen ein.
4 Klicken Sie auf „OK“. Der bearbeitbare Bereich ist in der Vorlage durch einen rechteckigen Rahmen
hervorgehoben, wobei die in den Voreinstellungen festgelegte Markierungsfarbe verwendet wird. In der linken
oberen Ecke des Bereichs wird dessen Name angezeigt. Wenn Sie einen leeren bearbeitbaren Bereich in das
Dokument eingefügt haben, wird auch der Bereichsname innerhalb des Bereichs angezeigt.
More Help topics
“Erstellen von Dreamweaver-Vorlagen” on page 428
“Markierungseinstellungen für Vorlagenbereiche festlegen” on page 455
Bearbeitbare Bereiche auswählen
Sie können Vorlagenbereiche im Vorlagendokument und in Dokumenten, die auf einer Vorlage basieren, problemlos
erkennen und auswählen.
Bearbeitbaren Bereich im Dokumentfenster auswählen
❖ Klicken Sie in die linke obere Ecke des bearbeitbaren Bereichs.
Bearbeitbaren Bereich im Dokument suchen und auswählen
❖ Wählen Sie „Modifizieren“ > „Vorlagen“ und wählen Sie anschließend den Namen des Bereichs in der Liste am
unteren Rand des Untermenüs aus.
Note: Bearbeitbare Bereiche innerhalb eines wiederholenden Bereichs werden im Menü nicht aufgeführt. Sie müssen
diese Bereiche anhand der mit Registern versehenen Ränder im Dokumentfenster selbst finden.
Der bearbeitbare Bereich wird im Dokument ausgewählt.
433
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Bearbeitbare Bereiche entfernen
Wenn Sie in einer Vorlagendatei einen Bereich als bearbeitbar markiert haben und nun wieder sperren (d. h. in auf
Vorlagen basierenden Dokumenten nicht bearbeitbar machen) möchten, verwenden Sie den Befehl „Vorlagen-
Markup löschen“.
1 Klicken Sie in die linke obere Ecke des bearbeitbaren Bereichs, um diesen auszuwählen.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Vorlagen“ > „Vorlagen-Markup löschen“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Vorlagen“ > „Vorlagen-Markup löschen“.
Der Bereich kann nicht mehr bearbeitet werden.
Die Namen bearbeitbarer Bereiche ändern
Nachdem Sie einen bearbeitbaren Bereich eingefügt haben, können Sie dessen Namen auch nachträglich ändern.
1 Klicken Sie in Ecke links oben im bearbeitbaren Bereich, um diesen auszuwählen.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) einen neuen Namen ein.
3 Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Erstellen wiederholender Bereiche in Vorlagen
Wiederholende Bereiche in Vorlagen
Wiederholende Bereiche sind Abschnitte innerhalb einer Vorlage, die in einer auf der Vorlage basierenden Seite
mehrmals dupliziert werden können. Zwar werden wiederholende Bereiche typischerweise bei Tabellen verwendet,
doch können Sie einen wiederholenden Bereich auch für andere Seitenelemente definieren.
Mithilfe von wiederholenden Bereichen können Sie das Layout von Bereichen steuern, die auf einer Seite wiederholt
verwendet werden sollen (beispielsweise für Katalogartikel oder für das Layout von Beschreibungen), oder Sie können
eine Zeile für Daten (beispielsweise für Produktlisten) wiederholen.
Es stehen zwei Vorlagenobjekte für wiederholende Bereiche zur Auswahl: „Wiederholender Bereich“ und
„Wiederholende Tabelle“.
More Help topics
“Arten von Vorlagenbereichen” on page 420
Wiederholende Bereiche in Vorlagen erstellen
Mithilfe von wiederholenden Bereichen können Benutzer von Vorlagen einen bestimmten Bereich in einer Vorlage so
oft wie gewünscht duplizieren. Wiederholende Bereiche sind nicht unbedingt auch bearbeitbare Bereiche.
434
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Wenn der Inhalt eines wiederholenden Bereichs bearbeitbar sein soll (wenn Sie dem Benutzer beispielsweise die
Eingabe von Text in eine Tabellenzelle ermöglichen möchten), müssen Sie in den wiederholenden Bereich einen
bearbeitbaren Bereich einfügen.
1 Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
• Wählen Sie den Text oder Inhalt aus, den Sie als wiederholenden Bereich definieren möchten.
• Klicken Sie auf das Dokument, in das Sie einen wiederholenden Bereich einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Vorlagenobjekte“ > „Wiederholender Bereich“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Vorlagen“ > „Neuer wiederholender Bereich“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Wiederholender Bereich“ aus.
3 Geben Sie im Feld „Name“ einen eindeutigen Namen für den Vorlagenbereich ein. (Innerhalb einer Vorlage kann
der Name dann nicht für mehrere Wiederholende Bereiche verwendet werden.)
Note: Bei der Eingabe des Namens für einen Bereich dürfen keine Sonderzeichen verwendet werden.
4 Klicken Sie auf „OK“.
More Help topics
“Einfügen eines bearbeitbaren Bereichs” on page 431
Wiederholende Tabellen einfügen
Sie können eine wiederholende Tabelle verwenden, um einen bearbeitbaren Bereich (in einem Tabellenformat) mit
wiederholenden Zeilen zu erstellen. Sie können die Tabellenattribute definieren und festlegen, welche Zellen der
Tabelle bearbeitbar sein sollen.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle des Dokuments, an der Sie die wiederholende
Tabelle einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Vorlagenobjekte“ > „Wiederholende Tabelle“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Wiederholende Tabelle“ aus.
3 Legen Sie die folgenden Optionen fest und klicken Sie auf „OK“:
Zeilen legt die Anzahl der Zeilen in der Tabelle fest.
Spalten legt die Anzahl der Spalten in der Tabelle fest.
Zellauffüllung legt den Abstand zwischen dem Zellinhalt und den Zellrändern in Pixel fest.
Zellabstand legt den Abstand zwischen aneinander grenzen Tabellenzellen in Pixel fest.
Wenn Sie für Zellabstand und Zellauffüllung nicht ausdrücklich Werte zuweisen, wird eine Tabelle in den meisten
Browsern mit einer Zellauffüllung von 1 Pixel und einem Zellabstand von 2 Pixeln angezeigt. Legen Sie für
„Zellauffüllung“ und „Zellabstand“ den Wert „0“ fest, wenn die Tabelle im Browser ohne Zellauffüllung und Zellabstand
angezeigt werden soll.
Breite gibt die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers an.
435
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Rahmen gibt die Breite der Tabellenränder in Pixel an.
Wenn Sie für den Rahmen nicht ausdrücklich einen Wert zuweisen, wird die Tabelle in den meisten Browsern mit
einem Rahmen von 1 Pixel angezeigt. Legen Sie für „Rahmen“ den Wert „0“ fest, wenn die Tabelle im Browser ohne
Rahmen angezeigt werden soll. Wenn für „Rahmen“ der Wert „0“ festgelegt ist und die Zell- und Tabellenränder
angezeigt werden sollen, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Tabellenrahmen“ aus.
Tabellenzeilen wiederholen legt fest, welche Zeilen der Tabelle in den wiederholenden Bereich aufgenommen werden
sollen.
Anfang bei Zeile legt die Zeilennummer der ersten Zeile fest, die in den wiederholenden Bereich aufgenommen
werden soll.
Ende bei Zeile
legt die Zeilennummer der letzten Zeile fest, die in den wiederholenden Bereich aufgenommen werden soll.
Bereichsname definiert einen eindeutigen Namen für den wiederholenden Bereich.
Abwechselnde Hintergrundfarben in einer wiederholenden Tabelle festlegen
Nachdem Sie eine wiederholende Tabelle in eine Vorlage eingefügt haben, können Sie sie so anpassen, dass für die
einzelnen Tabellenzeilen abwechselnde Hintergrundfarben verwendet werden.
1 Wählen Sie im Dokumentfenster eine Zeile in der wiederholenden Tabelle aus.
2 Klicken Sie in der Dokumentsymbolleiste auf „Codeansicht anzeigen“ oder „Code- und Entwurfsansicht anzeigen“,
sodass Sie Zugriff auf den HTML-Code der gewünschten Tabellenzeile erhalten.
3 Bearbeiten Sie das <tr>-Tag in der Codeansicht, sodass es den folgenden Code enthält:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
Sie können die Hexadezimalwerte #FFFFFF und #CCCCCC durch andere Farbwerte ersetzen.
4 Speichern Sie die Vorlage.
Durch den folgenden Code wird eine Tabelle mit abwechselnden Hintergrundfarben für die Tabellenzeilen erstellt:
<table width="75%" border="1" cellspacing="0" cellpadding="0">
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>
<!-- TemplateBeginRepeat name="contacts" -->
<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">
<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->
</td>
<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->
</td>
</tr>
<!-- TemplateEndRepeat -->
</table>
436
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Verwenden optionaler Bereiche in Vorlagen
Optionale Bereiche in Vorlagen
Ein optionaler Bereich ist ein Bereich innerhalb einer Vorlage, der vom Benutzer so eingestellt werden kann, dass er
in Dokumenten, die auf der Vorlage basieren, entweder angezeigt oder ausgeblendet wird. Verwenden Sie einen
optionalen Bereich, wenn Sie bestimmte Bedingungen festlegen möchten, unter denen der Inhalt in einem Dokument
angezeigt werden soll.
Wenn Sie einen optionalen Bereich einfügen, können Sie entweder spezifische Werte für einen Vorlagenparameter
festlegen oder bedingte Anweisungen (If...else-Anweisungen) für Vorlagenbereiche definieren. Verwenden Sie
einfache true/false-Operationen oder definieren Sie komplexe bedingte Anweisungen und Ausdrücke. Bei Bedarf
können Sie später den optionalen Bereich verändern. Auf der Grundlage der von Ihnen definierten Bedingungen
können die Benutzer der Vorlage die Parameter in den von ihnen erstellten Dokumenten bearbeiten und dadurch
festlegen, ob der optionale Bereich angezeigt wird.
Sie können mehrere optionale Bereiche mit einem benannten Parameter verknüpfen. In Dokumenten, die auf der
Vorlage basieren, werden beide Bereiche als Einheit angezeigt oder ausgeblendet. Sie können beispielsweise für
Produkte, die gerade im Sonderangebot sind, ein Bild namens „Angebot“ und einen Preisnachlass-Textbereich
anzeigen.
More Help topics
“Vorlageneigenschaften ändern” on page 451
“Arten von Vorlagenbereichen” on page 420
Optionale Bereiche einfügen
Mithilfe eines optionalen Bereichs können Sie steuern, welcher Inhalt in einem auf einer Vorlage basierenden
Dokument angezeigt wird. Es werden zwei Arten von optionalen Bereichen unterschieden:
• Nicht bearbeitbare optionale Bereiche, die es Benutzern der Vorlage ermöglichen, speziell markierte Bereiche ein-
und auszublenden, ohne dass sie den Inhalt bearbeiten können.
Der Registerreiter eines optionalen Bereichs wird vom Wort if eingeleitet. Je nach der in der Vorlage eingestellten
Bedingung können die Benutzer der Vorlage definieren, welcher Bereich in den von ihnen erstellten Seiten sichtbar ist.
• Bearbeitbare optionale Bereiche, die es Benutzern der Vorlage ermöglichen, festzulegen, ob der Bereich ein- oder
ausgeblendet ist, und den Inhalt in diesem Bereich zu bearbeiten.
Wenn der optionale Bereich beispielsweise ein Bild oder Text enthält, kann der Benutzer der Vorlage festlegen, ob der
Inhalt angezeigt wird, und kann auf Wunsch auch Änderungen am Inhalt vornehmen. Bearbeitbare Bereiche werden
durch eine bedingte Anweisung gesteuert.
More Help topics
“Vorlageneigenschaften ändern” on page 451
Nicht bearbeitbare optionale Bereiche einfügen
1 Wählen Sie im Dokumentfenster das Element aus, das Sie als optionalen Bereich festlegen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Vorlagenobjekte“ > „Optionaler Bereich“.
437
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf den
ausgewählten Inhalt und wählen Sie „Vorlagen“ > „Neuer optionaler Bereich“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Optionaler Bereich“ aus.
3 Geben Sie für den optionalen Bereich einen Namen ein, klicken Sie auf die Registerkarte „Erweitert“, wenn Sie
Werte für den optionalen Bereich festlegen möchten, und klicken Sie dann auf „OK“.
Bearbeitbare optionale Bereiche einfügen
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie den optionalen Bereich einfügen
möchten.
Sie können eine Auswahl nicht um ein Objekt legen, um einen bearbeitbaren optionalen Bereich zu erstellen. Fügen
Sie den Bereich ein und fügen Sie dann Inhalt in den Bereich ein.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „Vorlagenobjekte“ > „Bearbeitbarer optionaler Bereich“.
• Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Vorlagen“ und wählen
Sie dann im Popupmenü die Option „Bearbeitbarer optionaler Bereich“ aus.
3 Geben Sie für den optionalen Bereich einen Namen ein, klicken Sie auf die Registerkarte „Erweitert“, wenn Sie
Werte für den optionalen Bereich festlegen möchten, und klicken Sie auf „OK“.
Werte für optionale Bereiche festlegen
Sie können die Einstellungen eines optionalen Bereichs bearbeiten, nachdem Sie den Bereich in eine Vorlage eingefügt
haben. Sie können beispielsweise ändern, ob der Inhalt standardmäßig angezeigt wird, einen optionalen Bereich mit
einem Parameter versehen oder einen Vorlagenausdruck modifizieren.
Erstellen Sie Vorlagenparameter und definieren Sie bedingte Anweisungen (If...else-Anweisungen) für
Vorlagenbereiche. Sie können einfache true/false-Operationen verwenden oder komplexe bedingte Anweisungen und
Ausdrücke erstellen.
Auf der Registerkarte „Erweitert“ können Sie mehrere optionale Bereiche mit einem benannten Parameter
verknüpfen. In Dokumenten, die auf der Vorlage basieren, werden beide Bereiche als Einheit angezeigt oder
ausgeblendet. Sie können beispielsweise für Produkte, die gerade im Sonderangebot sind, ein Bild namens „Angebot“
und einen Preisnachlass-Textbereich anzeigen.
Darüber hinaus können Sie mithilfe der Registerkarte „Erweitert“ einen Vorlagenausdruck erstellen, der einen Wert
für den optionalen Bereich auswertet und diesen Bereich je nach Wert entweder anzeigt oder ausblendet.
1 Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
• Klicken Sie in der Entwurfsansicht auf den Registerreiter des optionalen Bereichs, den Sie ändern möchten.
• Setzen Sie in der Entwurfsansicht die Einfügemarke in den Vorlagenbereich. Links unten in der Statusleiste des
Dokumentfensters befindet sich der Tag-Selektor. Wählen Sie dort das Vorlagen-Tag
<mmtemplate:if> aus.
• Klicken Sie in der Codeansicht auf das Kommentar-Tag des zu modifizierenden Vorlagenbereichs.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf „Bearbeiten“.
3 Geben Sie auf der Registerkarte „Grundlagen“ im Feld „Name“ einen Namen für den Parameter ein.
4 Aktivieren Sie die Option „Standardmäßig anzeigen“, wenn der ausgewählte Bereich im Dokument angezeigt
werden soll. Deaktivieren Sie die Option, um den Bereich standardmäßig nicht anzuzeigen.
438
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Note: Wenn Sie den Wert des Parameters ändern möchten, können Sie auch in der Codeansicht im head-Abschnitt des
Dokuments den Parameter suchen und dort einen anderen booleschen Wert eingeben.
5 Optional: Klicken Sie auf die Registerkarte „Erweitert“ und legen Sie die folgenden Optionen fest:
• Wenn Sie die Parameter optionaler Bereiche verknüpfen möchten, aktivieren Sie die Option „Parameter
verwenden“. Wählen Sie anschließend im Popupmenü die bestehenden Parameter aus, die mit dem ausgewählten
Inhalt verknüpft werden sollen.
• Wenn Sie Vorlagenausdrücke erstellen möchten, um die Anzeige eines optionalen Bereichs zu steuern, aktivieren
Sie die Option „Geben Sie einen Ausdruck ein“ und geben Sie anschließend den Ausdruck im Feld ein.
Note: Dreamweaver setzt den eingegebenen Text in Anführungszeichen.
6 Klicken Sie auf „OK“.
Wenn Sie das Vorlagenobjekt „Optionaler Bereich“ verwenden, fügt Dreamweaver Vorlagenkommentare in den Code
ein. Der Vorlagenparameter wird im
head-Abschnitt wie im folgenden Beispiel definiert:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
An der Stelle, an der Sie den optionalen Bereich einfügen, wird Code eingefügt, der in etwa dem folgenden ähnelt:
<!-- TemplateBeginIf cond="departmentImage" -->
<p><img src="/images/airfare_on.gif" width="85" height="22"> </p>
<!-- TemplateEndIf -->
Im vorlagebasierten Dokument können Sie auf Vorlagenparameter zugreifen und diese bearbeiten.
More Help topics
“Vorlageneigenschaften ändern” on page 451
“Vorlagenausdrücke” on page 423
Definieren bearbeitbare Tag-Attribute in Vorlagen
Bearbeitbare Tag-Attribute in Vorlagen festlegen
Sie können den Benutzern der Vorlage erlauben, bestimmte Tag-Attribute in einem vorlagebasierten Dokument zu
ändern.
Sie können beispielsweise eine Hintergrundfarbe im Vorlagendokument festlegen, es jedoch den Benutzern der
Vorlage freistellen, eine andere Hintergrundfarbe für die von Ihnen erstellten Dokumente zu wählen. Benutzer
können nur die Attribute aktualisieren, die Sie als bearbeitbar definieren.
Sie können auch mehrere bearbeitbare Attribute in einer Seite festlegen, sodass Benutzer der Vorlage die Attribute in
vorlagebasierten Dokumenten ändern können. Folgende Datentypen werden unterstützt: Text, Boolean
(
true/false), Farbe und URL.
Beim Erstellen eines bearbeitbaren Tag-Attributs wird ein Vorlagenparameter in den Code eingefügt. Im
Vorlagendokument wird ein Anfangswert für das Attribut festgelegt; wenn ein Dokument auf der Grundlage der
Vorlage erstellt wird, wird der Parameter übernommen. Der Benutzer der Vorlage kann dann den Parameter im
vorlagebasierten Dokument bearbeiten.
439
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Note: Wenn Sie ein bearbeitbares Attribut mit einem Stylesheet verknüpfen, lassen sich die Attribute des Stylesheets in
der Vorlagendatei nicht mehr anzeigen und bearbeiten.
1 Wählen Sie im Dokumentfenster ein Element aus, für das Sie ein bearbeitbares Tag-Attribut festlegen möchten.
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Attribut editierbar machen“.
3 Tragen Sie in das Feld „Attribut“ einen Namen ein oder wählen Sie wie folgt ein Attribut aus der Liste aus:
• Wenn das Attribut, das Sie bearbeitbar machen möchten, im Popupmenü „Attribut“ aufgeführt wird, wählen Sie
es aus.
• Wenn das Attribut, das Sie bearbeitbar machen möchten, im Popupmenü „Attribut“ nicht aufgeführt wird, klicken
Sie auf „Hinzufügen“, geben Sie dann im angezeigten Dialogfeld den Namen des Attributs ein und klicken Sie auf
„OK“.
4 Achten Sie darauf, dass die Option „Attribut bearbeitbar machen“ aktiviert ist.
5 Geben Sie im Feld „Beschriftung“ einen eindeutigen Namen für das Attribut ein.
Um ein spezifisches bearbeitbares Tag-Attribut zu einem späteren Zeitpunkt problemlos wieder finden zu können,
sollten Sie eine Beschriftung eingeben, die das Element und das Attribut aussagekräftig beschreibt. Sie können
beispielsweise ein Bild, dessen Quelle bearbeitbar ist, „LogoQuelle“ nennen, oder die bearbeitbare Hintergrundfarbe eines
body-Tags mit der Beschriftung „bodyHGFarbe“ versehen.
6 Wählen Sie im Popupmenü „Typ“ den Typ des Wertes aus, der für dieses Attribut zulässig ist, indem Sie eine der
folgenden Optionen wählen:
• Wenn Sie dem Benutzer die Eingabe eines Textwerts für das Attribut ermöglichen möchten, wählen Sie „Text“. Sie
können beispielsweise Text mit dem
align-Attribut verwenden. Der Benutzer kann dann den Wert des Attributs
auf left, right oder center einstellen.
• Wenn Sie einen Hyperlink in ein Element einfügen möchten (beispielsweise den Dateipfad zu einem Bild), wählen
Sie „URL“. Diese Einstellung aktualisiert automatisch den in einem Hyperlink verwendeten Pfad. Wenn der
Benutzer das Bild in einen neuen Ordner verschiebt, wird das Dialogfeld „Hyperlinks aktualisieren“ eingeblendet.
• Wenn Sie den Farbwähler für die Auswahl eines Wertes verfügbar machen möchten, wählen Sie „Farbe“.
• Wenn Sie einem Benutzer auf der Seite die Auswahl eines Wahrheitswerts „wahr“ oder „falsch“ ermöglichen
möchten, wählen Sie „Wahr/Falsch“ aus.
• Wenn Sie dem Benutzer der Vorlage die Eingabe eines numerischen Wertes ermöglichen möchten, damit er ein
Attribut aktualisieren kann (um beispielsweise die Höhe oder Breite eines Bildes zu ändern), wählen Sie „Zahl“.
7 Im Feld „Standard“ wird der Wert des ausgewählten Tag-Attributs in der Vorlage angezeigt. Geben Sie in diesem
Feld einen neuen Wert ein, wenn Sie für auf Vorlagen basierende Dokumente einen anderen Anfangswert für den
Parameter festlegen möchten.
8 Optional: Wenn Sie ein weiteres Attribut eines ausgewählten Tags ändern möchten, wählen Sie das Attribut aus
und legen Sie die Optionen für dieses Attribut fest.
9 Klicken Sie auf „OK“.
More Help topics
“Vorlageneigenschaften ändern” on page 451
440
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Bearbeitbare Tag-Attribute als nicht bearbeitbar markieren
Ein zuvor als bearbeitbar markiertes Tag kann als nicht bearbeitbar markiert werden.
1 Klicken Sie im Vorlagendokument auf das Element, das mit dem bearbeitbaren Attribut verbunden ist, oder
wählen Sie das Tag mit dem Tag-Selektor aus.
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Attribut editierbar machen“.
3 Wählen Sie im Popupmenü „Attribute“ das gewünschte Attribut aus.
4 Deaktivieren Sie die Option „Attribut bearbeitbar machen“ und klicken Sie auf „OK“.
5 Aktualisieren Sie die Dokumente, die auf dieser Vorlage basieren.
Verschachtelte Vorlagen erstellen
Verschachtelte Vorlagen
Unter einer verschachtelten Vorlage wird eine Vorlage verstanden, bei der das Design und die bearbeitbaren Bereiche
auf einer anderen Vorlage basieren. Verschachtelte Vorlagen sind nützlich, wenn Sie den Inhalt von Seiten in einer
Site steuern möchten, die viele gemeinsamen Designelemente verwenden, jedoch gewisse Unterschiede von Seite zu
Seite aufweisen. Die Basisvorlage kann beispielsweise die gröberen Designbereiche enthalten und mehreren Autoren
von inhaltlichen Beiträgen zur Verfügung stehen. Mit der verschachtelten Vorlage dagegen können die bearbeitbaren
Bereiche der Seiten in einem spezifischen Teil einer Site weiter definiert werden.
Die bearbeitbaren Bereiche einer Basisvorlage werden an die verschachtelte Vorlage übertragen und bleiben in den aus
der verschachtelten Vorlage erstellten Seiten bearbeitbar, sofern keine neuen Vorlagenbereiche in diese Bereiche
eingefügt werden.
Änderungen an einer Basisvorlage werden in Vorlagen, die auf der Basisvorlage basieren, sowie in allen Dokumenten,
die auf der Haupt- und den verschachtelten Vorlagen basieren, automatisch aktualisiert.
441
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Im folgenden Beispiel beinhaltet die Vorlage trioHome drei bearbeitbare Bereiche: Body, NavBar und Footer.
442
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Zum Erstellen einer verschachtelten Vorlage wurde ein neues Dokument auf Basis der Vorlage erstellt, das Dokument
anschließend als Vorlage gespeichert und die Vorlage TrioNested genannt. Der verschachtelten Vorlage wurden im
bearbeitbaren Bereich
Body zwei bearbeitbare Bereiche hinzugefügt.
Wenn Sie innerhalb eines bearbeitbaren Bereichs, der an eine verschachtelte Vorlage übertragen wird, einen neuen
bearbeitbaren Bereich hinzufügen, wird der Markierungsrahmen des bearbeitbaren Bereichs in orange dargestellt.
Außerhalb eines bearbeitbaren Bereichs hinzugefügte Inhalte (beispielsweise die Grafik in
editableColumn) sind in
Dokumenten, die auf der verschachtelten Vorlage basieren, nicht mehr bearbeitbar. Die blau markierten
bearbeitbaren Bereiche, die entweder in der verschachtelten Vorlage hinzugefügt oder von der Basisvorlage
übernommen wurden, bleiben in Dokumenten, die auf der verschachtelten Vorlage basieren, weiterhin bearbeitbar.
Vorlagenbereiche ohne bearbeitbare Bereiche werden in die auf der Vorlage basierenden Dokumente als bearbeitbare
Bereiche übernommen.
More Help topics
Verschachtelte Vorlagen
Verschachtelte Vorlage erstellen
Mithilfe von verschachtelten Vorlagen können Sie Variationen einer Basisvorlage erstellen. Sie können mehrere
Vorlagen verschachteln, um zunehmend spezifischere Layouts zu definieren.
443
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Standardmäßig werden alle bearbeitbaren Vorlagenbereiche aus der Basisvorlage über die verschachtelte Vorlage an
das Dokument, das auf der verschachtelten Vorlage basiert, übergeben. Wenn Sie daher in einer Basisvorlage einen
bearbeitbaren Bereich definieren und anschließend eine verschachtelte Vorlage erstellen, wird der bearbeitbare
Bereich in die Dokumente übernommen, die auf der verschachtelten Vorlage basieren, soweit Sie in diesen Bereich der
verschachtelten Vorlage keine neue Vorlagenbereiche eingefügt haben.
Note: Sie können ein Vorlagen-Markup in einen bearbeitbaren Bereich einfügen, sodass dieser Bereich nicht übergeben
wird und in Dokumenten bearbeitet werden kann, die auf dieser verschachtelten Vorlage basieren. Diese Bereiche haben
einen orangefarbigen Rahmen anstelle eines blauen.
1 Erstellen Sie ein Dokument basierend auf der Vorlage, die Sie für die verschachtelte Vorlage verwenden möchten.
Tun Sie dazu Folgendes:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in der Kategorie
„Vorlagen“ des Bedienfelds „Elemente“ auf die Vorlage, auf deren Basis Sie ein neues Dokument erstellen möchten.
Wählen Sie dann im Kontextmenü die Option „Neu von Vorlage“.
• Wählen Sie „Datei“ > „Neu“. Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Seite aus Vorlage“ und
dann die Site, in der sich die gewünschte Vorlage befindet. Doppelklicken Sie dann in der Vorlagenliste auf die
Vorlage, um ein neues Dokument zu erstellen.
2 Wählen Sie „Datei“ > „Als Vorlage speichern“, um das neue Dokument als verschachtelte Vorlage zu speichern:
3 Geben Sie im Feld „Speichern unter“ einen Namen ein und klicken Sie auf „OK“.
More Help topics
“Serverskripts in Vorlagen und vorlagenbasierten Dokumenten” on page 423
Verhindern, dass bearbeitbarere Bereiche an verschachtelte Vorlagen
übertragen werden
In verschachtelten Vorlagen haben übernommene bearbeitbare Bereiche einen blauen Rahmen. Sie können ein
Vorlagen-Markup in einen bearbeitbaren Bereich einfügen, sodass dieser Bereich nicht übergeben wird und in
Dokumenten bearbeitet werden kann, die auf dieser verschachtelten Vorlage basieren. Diese Bereiche haben einen
orangefarbigen Rahmen anstelle eines blauen.
1 Suchen Sie in der Codeansicht den bearbeitbaren Bereich, der nicht übertragen werden soll.
Bearbeitbare Bereiche sind durch Kommentar-Tags der Vorlage definiert.
2 Fügen Sie dem Code des bearbeitbaren Bereichs folgenden Code hinzu:
@@("")@@
Dieser Vorlagencode kann an beliebiger Stelle innerhalb der <!-- InstanceBeginEditable --><!--
InstanceEndEditable -->-Tags positioniert werden, die den bearbeitbaren Bereich einschließen. Beispiel:
<!-- InstanceBeginEditable name="EditRegion1" -->
<p>@@("")@@ Editable 1 </p>
<!-- InstanceEndEditable -->
444
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Vorlagen bearbeiten, aktualisieren oder löschen
Vorlagen bearbeiten und aktualisieren
Wenn Sie eine Vorlage bearbeiten und anschließend speichern, werden alle mit der Vorlage verknüpften Dokumente
aktualisiert. Bei Bedarf können Sie auch auf Vorlagen basierende Dokumente oder die gesamte Site manuell
aktualisieren.
Note: Sie können eine Vorlage für eine Contribute-Site nur mit Dreamweaver bearbeiten. Es ist nicht möglich, Vorlagen
in Contribute zu bearbeiten.
Verwenden Sie die Kategorie „Vorlagen“ des Bedienfelds „Elemente“, um vorhandene Vorlagen zu verwalten und
Vorlagendateien umzubenennen oder zu löschen.
Sie können mit diesem Bedienfeld folgende Aufgaben hinsichtlich der Vorlagenverwaltung ausführen:
• Vorlagen erstellen
• Vorlagen bearbeiten und aktualisieren
• Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen
Zwar überprüft Dreamweaver die Vorlagensyntax, wenn Sie eine Vorlage speichern, dennoch empfiehlt es, sich die
Vorlagensyntax manuell zu überprüfen, während Sie eine Vorlage bearbeiten.
More Help topics
“Erstellen von Dreamweaver-Vorlagen” on page 428
“Vorlagensyntax überprüfen” on page 454
“Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen” on page 449
Vorlagen für die Bearbeitung öffnen
Sie können eine Vorlagendatei direkt für die Bearbeitung öffnen. Sie können auch ein Dokument, das auf einer
Vorlage basiert, öffnen und die angefügte Vorlage zur Bearbeitung öffnen.
Wenn Sie eine Vorlage ändern, werden Sie von Dreamweaver aufgefordert, die Dokumente zu aktualisieren, die auf
der Vorlage basieren.
Note: Sie können bei Bedarf die Dokumente auch manuell mit Änderungen der Vorlage aktualisieren.
More Help topics
“Vorlagensyntax überprüfen” on page 454
Vorlagendateien öffnen und bearbeiten
1
Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) auf der linken Seite die Kategorie „Vorlagen“ aus.
Im Bedienfeld „Elemente“ werden alle für Ihre Site verfügbaren Vorlagen aufgeführt sowie eine Vorschau der
ausgewählten Vorlage angezeigt.
2 Führen Sie in der Liste der verfügbaren Vorlagen einen der folgenden Schritte aus:
• Doppelklicken Sie auf den Namen der Vorlage, die Sie bearbeiten möchten.
• Wählen Sie die zu bearbeitende Vorlage aus und klicken Sie unten im Bedienfeld „Elemente“ auf die Schaltfläche
„Bearbeiten“ .
445
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
3 Ändern Sie den Inhalt der Vorlage.
Um die Seiteneigenschaften der Vorlage zu ändern, wählen Sie „Modifizieren“ > „Seiteneigenschaften“. (Dokumente,
die auf einer Vorlage basieren, übernehmen die Seiteneigenschaften der Vorlage.)
4 Speichern Sie die Vorlage. Dreamweaver fordert Sie auf, die auf der Vorlage basierenden Seiten zu aktualisieren.
5 Klicken Sie auf „Aktualisieren“, um alle auf der geänderten Vorlage basierenden Dokumente zu aktualisieren.
Klicken Sie auf „Nicht aktualisieren“, wenn die auf der modifizierten Vorlage basierenden Dokumente nicht
aktualisiert werden sollen.
Dreamweaver zeigt ein Protokoll an, aus dem hervorgeht, welche Dateien aktualisiert wurden.
An ein Dokument angefügte Vorlage öffnen und ändern
1 Öffnen Sie das auf der Vorlage basierende Dokument im Dokumentfenster.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Modifizieren“ > „Vorlagen“ > „Angefügte Vorlage öffnen“.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Vorlagen“ > „Angefügte Vorlage öffnen“.
3 Ändern Sie den Inhalt der Vorlage.
Um die Seiteneigenschaften der Vorlage zu ändern, wählen Sie „Modifizieren“ > „Seiteneigenschaften“. (Dokumente,
die auf einer Vorlage basieren, übernehmen die Seiteneigenschaften der Vorlage.)
4 Speichern Sie die Vorlage. Dreamweaver fordert Sie auf, die auf der Vorlage basierenden Seiten zu aktualisieren.
5 Klicken Sie auf „Aktualisieren“, um alle auf der geänderten Vorlage basierenden Dokumente zu aktualisieren.
Klicken Sie auf „Nicht aktualisieren“, wenn die auf der modifizierten Vorlage basierenden Dokumente nicht
aktualisiert werden sollen.
Dreamweaver zeigt ein Protokoll an, aus dem hervorgeht, welche Dateien aktualisiert wurden.
Vorlagen umbenennen
1
Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) auf der linken Seite die Kategorie „Vorlagen“ aus.
2 Klicken Sie auf den Namen der Vorlage, um sie auszuwählen.
3
Klicken Sie erneut auf den Namen, sodass der Text ausgewählt werden kann, und geben Sie einen neuen Namen ein.
Dieses Verfahren zum Umbenennen entspricht dem Umbenennen einer Datei im Windows-Explorer (Windows) bzw.
im Finder (Macintosh). Ebenso wie im Windows-Explorer bzw. im Finder müssen Sie zwischen den beiden Mausklicks
kurz warten. Doppelklicken Sie nicht auf den Namen, da hierdurch die Vorlage zum Bearbeiten geöffnet wird.
4 Klicken Sie auf einen anderen Bereich im Bedienfeld „Elemente“ oder drücken Sie die Eingabetaste (Windows)
bzw. Return (Macintosh), um die Änderung zu übernehmen.
Sie werden jetzt gefragt, ob Sie die Dokumente aktualisieren möchten, die auf dieser Vorlage basieren.
5 Klicken Sie auf „Aktualisieren“, um alle Dokumente zu aktualisieren, die auf dieser Vorlage basieren. Klicken Sie
auf „Nicht aktualisieren“, wenn Sie keines der auf dieser Vorlage beruhenden Dokumente aktualisieren möchten.
More Help topics
“Erstellen von Dreamweaver-Vorlagen” on page 428
“Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen” on page 449
446
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Vorlagenbeschreibungen ändern
Die Vorlagenbeschreibung wird im Dialogfeld „Neues Dokument“ angezeigt, wenn Sie aus einer vorhandenen
Vorlage eine Seite erstellen.
1 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Beschreibung“ aus.
2 Bearbeiten Sie im Dialogfeld „Vorlagenbeschreibung“ den Beschreibungstext und klicken Sie auf „OK“.
More Help topics
“Erstellen von Dreamweaver-Vorlagen” on page 428
Vorlagenbasierte Dokumente manuell aktualisieren
Wenn Sie eine Vorlage verändern, fordert Dreamweaver Sie auf, die auf der Vorlage basierenden Dokumente zu
aktualisieren. Bei Bedarf können Sie jedoch das aktuelle Dokument oder die gesamte Site auch manuell aktualisieren.
Das manuelle Aktualisieren von Dokumenten, die auf Vorlagen basieren, hat die gleiche Wirkung, als wenn Sie die
Vorlage neu anwenden.
Vorlagenänderungen dem aktuellen vorlagebasierten Dokument zuweisen
1 Öffnen Sie das Dokument im Dokumentfenster.
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Aktuelle Seite aktualisieren“.
Dreamweaver aktualisiert das Dokument mit allen Vorlagenänderungen.
Gesamte Site oder alle Dokumente, die eine bestimmte Vorlage verwenden, aktualisieren
Sie können alle Seiten einer Site oder nur die Seiten für eine bestimmte Vorlage aktualisieren.
1 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Seiten aktualisieren“.
2 Öffnen Sie das Popupmenü „Suchen in“ und gehen Sie vor wie folgt:
• Um alle Dateien einer Site entsprechend den angefügten Vorlagen zu aktualisieren, wählen Sie „Gesamte Site“ und
anschließend im daneben liegenden Popupmenü den Namen der Vorlage aus.
• Um Dateien für eine bestimmte Vorlage zu aktualisieren, wählen Sie „Dateien mit...“ aus und wählen Sie
anschließend im daneben angezeigten Popupmenü den Namen der Vorlage aus.
3 Achten Sie darauf, dass im Bereich „Aktualisieren“ die Option „Vorlagen“ aktiviert ist.
4 Wenn Sie ein Protokoll der Dateien, die von Dreamweaver aktualisiert werden, anzeigen möchten, aktivieren Sie
die Option „Protokoll zeigen“. Andernfalls lassen Sie sie deaktiviert.
5 Klicken Sie auf „Starten“, um die Dateien entsprechend den Angaben zu aktualisieren. Wenn Sie die Option
„Protokoll zeigen“ ausgewählt haben, liefert Dreamweaver Informationen zu den Dateien, die aktualisiert werden.
Die erfolgreiche Aktualisierung wird ebenfalls gemeldet.
6 Klicken Sie auf „Schließen“.
Vorlagen in einer Contribute-Site aktualisieren
Contribute-Benutzer können an Dreamweaver-Vorlagen keine Änderungen vornehmen. Sie können mit
Dreamweaver jedoch Vorlagen für eine Contribute-Site ändern.
447
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Folgende Punkte sollten Sie sich merken, wenn Sie Vorlagen in einer Contribute-Site aktualisieren:
• Contribute ruft neue und geänderte Vorlagen nur beim Programmstart von der Site ab und wenn ein Contribute-
Benutzer die Verbindungsinformationen ändert. Wenn Sie Änderungen an einer Vorlage vornehmen, während ein
Contribute-Benutzer eine auf dieser Vorlage basierende Datei bearbeitet, sind die Änderungen an der Vorlage für
den Benutzer erst nach einem Neustart von Contribute sichtbar.
• Wenn Sie einen bearbeitbaren Bereich aus einer Vorlage entfernen, kann das für einen Contribute-Benutzer, der
eine auf dieser Vorlage basierende Seite bearbeitet, verwirrend sein und er weiß nicht, was mit dem Inhalt aus
diesem bearbeitbaren Bereich passieren soll.
Um eine Vorlage auf einer Contribute-Site zu aktualisieren, führen Sie folgende Schritte aus.
1 Öffnen Sie die Contribute-Vorlage in Dreamweaver, bearbeiten und speichern Sie sie. Anweisungen dazu finden
Sie unter “Vorlagen für die Bearbeitung öffnen” on page 444.
2 Informieren Sie alle Contribute-Benutzer, die gerade mit der Site arbeiten, darüber, dass sie Contribute neu starten
müssen.
Vorlagendateien löschen
1
Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) auf der linken Seite die Kategorie „Vorlagen“ aus.
2 Klicken Sie auf den Namen der Vorlage, um sie auszuwählen.
3 Klicken Sie unten im Bedienfeld auf die Schaltfläche „Löschen“ und bestätigen Sie anschließend, dass die
Vorlage gelöscht werden soll.
Important: Eine gelöschte Vorlagendatei kann nicht wiederhergestellt werden. Die Vorlagendatei wird aus Ihrer Site
gelöscht.
Dokumente, die mit einer gelöschten Vorlage erstellt worden sind, werden nicht von der Vorlage gelöst. Sie behalten
die Struktur und die bearbeitbaren Bereiche so bei, wie sie in der gelöschten Vorlagendatei vorgelegen haben. Sie
können ein solches Dokument in eine normale HTML-Datei ohne bearbeitbare oder gesperrte Bereiche umwandeln.
More Help topics
“Dokument von einer Vorlage lösen” on page 450
“Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen” on page 449
“Erstellen von Dreamweaver-Vorlagen” on page 428
Vorlageninhalte exportieren und importieren
XML-Inhalte in Vorlagen
Die Daten in einem vorlagenbasierten Dokument können in Form von Name-Wert-Paaren beschrieben werden. Jedes
Paar besteht aus dem Namen eines bearbeitbaren Bereichs und dem Inhalt dieses Bereichs.
Sie können die Name-Wert-Paare in eine XML-Datei exportieren, sodass Sie auch außerhalb von Dreamweaver
(beispielsweise in einem XML-Editor, einem Texteditor oder einer Datenbankanwendung) mit den Daten arbeiten
können. Wenn Sie umgekehrt über ein entsprechend strukturiertes XML-Dokument verfügen, können Sie die Daten
daraus in ein auf einer Dreamweaver-Vorlage basierendes Dokument importieren.
448
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Bearbeitbare Bereiche von Dokumenten als XML-Code exportieren
1 Öffnen Sie ein mit einer Vorlage erstelltes Dokument, das bearbeitbare Bereiche enthält.
2 Wählen Sie „Datei“ > „Exportieren“ > „Vorlagendaten als XML“.
3 Wählen Sie unter „Schreibweise“ eine der folgenden Optionen aus:
• Wenn das Dokument wiederholende Bereiche oder Vorlagenparameter enthält, wählen Sie „Dreamweaver
Standard-XML-Tags verwenden“.
• Bei Vorlagen, die keine wiederholenden Bereiche oder Vorlagenparameter enthalten, wählen Sie „Namen
bearbeitbarer Bereiche als XML-Tags verwenden“.
4 Klicken Sie auf „OK“.
5 Wählen Sie im eingeblendeten Dialogfeld einen Ordner aus, geben Sie einen Namen für die XML-Datei ein und
klicken Sie auf „Speichern“.
Mit dem Material aus den Parametern und bearbeitbaren Bereichen des Dokuments, einschließlich der bearbeitbaren
Bereiche innerhalb von wiederholenden oder optionalen Bereichen, wird eine XML-Datei erzeugt. Diese XML-Datei
enthält den Namen der ursprünglichen Vorlage sowie den Namen und Inhalt jedes Vorlagenbereichs.
Note: Der Inhalt nicht bearbeitbarer Bereiche wird nicht in die XML-Datei exportiert.
XML-Inhalte importieren
1 Wählen Sie „Datei“ > „Importieren“ > „XML als Vorlage“.
2 Wählen Sie die XML-Datei aus und klicken Sie auf „Öffnen“.
Dreamweaver erstellt ein neues Dokument basierend auf der in der XML-Datei angegebenen Vorlage. Dabei wird der
Inhalt der einzelnen bearbeitbaren Bereiche in diesem Dokument unter Verwendung der Daten in der XML-Datei
aufgefüllt. Das resultierende Dokument wird in einem neuen Dokumentfenster angezeigt.
Beachten Sie, dass der Import fehlschlagen kann, wenn die XML-Datei nicht genau so konfiguriert ist, wie es
Dreamweaver erwartet. Um eine XML-Datei mit der richtigen Struktur zu erhalten, können Sie eine XML-
Musterdatei aus Dreamweaver exportieren. Kopieren Sie die Daten anschließend aus der ursprünglichen XML-Datei in
die exportierte XML-Datei. Das Ergebnis ist eine XML-Datei mit der richtigen Struktur, die auch die richtigen Daten
enthält und importiert werden kann.
Site ohne Vorlagen-Markup exportieren
Sie können vorlagenbasierte Dokumente in eine andere Site exportieren, ohne das Vorlagen-Markup einzufügen.
1 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Ohne Markup exportieren“.
2 Geben Sie im Feld „Ordner“ den Pfad zu dem Ordner ein, in den Sie die Datei exportieren möchten, oder klicken
Sie auf „Durchsuchen“ und wählen Sie dann den Ordner aus.
Note: Sie müssen einen Ordner außerhalb der aktuellen Site auswählen.
3 Wenn Sie eine XML-Version des exportierten, auf der Vorlage basierenden Dokuments speichern möchten,
wählen Sie „Vorlagendatendateien beibehalten“.
4 Wenn Sie nur die zuvor exportierten Dateien aktualisieren möchten, wählen Sie „Nur geänderte Dateien
extrahieren“ und klicken Sie auf „OK“.
449
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Vorlagen auf vorhandene Dokumente anwenden oder
aus Dokumenten entfernen
Vorlagen auf vorhandene Dokumente anwenden
Wenn Sie eine Vorlage auf ein Dokument anwenden, das bereit einen Inhalt hat, versucht Dreamweaver, den
vorhandenen Inhalt an einen Bereich in der Vorlage anzupassen. Wenn Sie eine überarbeitete Version einer Ihrer
Vorlagen anwenden, besteht eine gute Chance, dass die Namen übereinstimmen.
Wenn Sie eine Vorlage auf ein Dokument anwenden, auf das noch keine Vorlage angewendet wurde, stehen keine
bearbeitbaren Bereiche für den Vergleich zur Verfügung und eine fehlende Übereinstimmung tritt auf. Dreamweaver
protokolliert diese fehlenden Übereinstimmungen, damit Sie wählen können, an welche(n) Bereich(e) Sie den
aktuellen Inhalt der Seite übertragen möchten. Sie können den nicht übereinstimmenden Inhalt jedoch auch löschen.
Sie können mithilfe des Bedienfelds „Elemente“ oder vom Dokumentfenster aus eine Vorlage auf ein vorhandenes
Dokument anwenden. Bei Bedarf ist es auch möglich, die Anwendung einer Vorlage wieder rückgängig zu machen.
Important: Wenn Sie eine Vorlage auf ein vorhandenes Dokument anwenden, wird der Inhalt des Dokuments durch die
Bausteine der Vorlage ersetzt. Erstellen Sie auf jeden Fall immer eine Sicherungskopie des Seiteninhalts, bevor Sie eine
Vorlage auf den Inhalt anwenden.
Vorlagen mithilfe des Bedienfensters „Elemente“ auf ein vorhandenes Dokument
anwenden
1 Öffnen Sie das Dokument, auf das die Vorlage angewendet werden soll.
2
Wählen Sie im Bedienfeld „Elemente“ („Fenster“ > „Elemente“) auf der linken Seite die Kategorie „Vorlagen“ aus.
3 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie die Vorlage, die Sie anwenden möchten, aus dem Bedienfeld „Elemente“ auf das Dokumentfenster.
• Wählen Sie die Vorlage aus, die Sie anwenden möchten. Klicken Sie unten im Bedienfeld „Elemente“ auf die
Schaltfläche „Anwenden“.
Wenn das Dokument Inhalte enthält, die keinem Vorlagenbereich automatisch zugeordnet werden können, wird das
Dialogfeld „Inkonsistente Bereichsnamen“ eingeblendet.
4 Wählen Sie ein Ziel für den Inhalt, indem Sie das Popupmenü „Inhalt in neuen Bereich verschieben“ öffnen und
wie folgt verfahren:
• Wählen Sie einen Bereich in der neuen Vorlage aus, um den vorhandenen Inhalt dorthin zu verlagern.
• Wählen Sie „Nirgends“, um den Inhalt aus dem Dokument zu löschen.
5 Wenn Sie sämtliche nicht zuweisbaren Inhalte in den ausgewählten Bereich verschieben möchten, klicken Sie auf
„Für alle verwenden“.
6 Klicken Sie auf „OK“, um die Vorlage anzuwenden, oder klicken Sie auf „Abbrechen“, wenn Sie die Vorlage dem
Dokument nicht zuweisen möchten.
Important: Wenn Sie eine Vorlage auf ein vorhandenes Dokument anwenden, wird der Inhalt des Dokuments durch die
Bausteine der Vorlage ersetzt. Erstellen Sie auf jeden Fall immer eine Sicherungskopie des Seiteninhalts, bevor Sie eine
Vorlage auf den Inhalt anwenden.
Vorlagen mithilfe des Dokumentfensters auf vorhandene Dokumente anwenden
1 Öffnen Sie das Dokument, auf das die Vorlage angewendet werden soll.
450
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Vorlage auf Seite anwenden“.
Das Dialogfeld „Vorlage auswählen“ wird eingeblendet.
3 Wählen Sie eine Vorlage aus der Liste aus und klicken Sie auf „Auswählen“.
Wenn das Dokument Inhalte enthält, die keinem Vorlagenbereich automatisch zugeordnet werden können, wird das
Dialogfeld „Inkonsistente Bereichsnamen“ eingeblendet.
4 Wählen Sie ein Ziel für den Inhalt, indem Sie das Popupmenü „Inhalt in neuen Bereich verschieben“ öffnen und
wie folgt verfahren:
• Wählen Sie einen Bereich in der neuen Vorlage aus, um den vorhandenen Inhalt dorthin zu verlagern.
• Wählen Sie „Nirgends“, um den Inhalt aus dem Dokument zu löschen.
5 Wenn Sie sämtliche nicht zuweisbaren Inhalte in den ausgewählten Bereich verschieben möchten, klicken Sie auf
„Für alle verwenden“.
6 Klicken Sie auf „OK“, um die Vorlage anzuwenden, oder klicken Sie auf „Abbrechen“, wenn Sie die Vorlage dem
Dokument nicht zuweisen möchten.
Important: Wenn Sie eine Vorlage auf ein vorhandenes Dokument anwenden, wird der Inhalt des Dokuments durch die
Bausteine der Vorlage ersetzt. Erstellen Sie auf jeden Fall immer eine Sicherungskopie des Seiteninhalts, bevor Sie eine
Vorlage auf den Inhalt anwenden.
Anwendung einer Vorlage wieder rückgängig machen
❖ Wählen Sie „Bearbeiten“ > „Rückgängig Vorlage hinzufügen“.
Das Dokument wird in den Zustand vor dem Anwenden der Vorlage zurückgesetzt.
Dokument von einer Vorlage lösen
Wenn Sie Änderungen an den gesperrten Bereichen eines Dokuments, das auf einer Vorlage basiert, vornehmen
möchten, müssen Sie zunächst das Dokument von der Vorlage lösen. Wenn das Dokument gelöst ist, wird das gesamte
Dokument bearbeitbar.
Note: Sie können eine Vorlagendatei (.dwt) nicht einfach als HTML-Datei (.html) speichern, um sie in eine normale
Datei umzuwandeln. Bei dieser Vorgehensweise wird der Vorlagencode des gesamten Dokuments nicht gelöscht. Wenn
Sie eine Vorlagendatei in eine normale Datei umwandeln möchten, können Sie sie als normale HTML-Datei speichern,
müssen anschließlich jedoch den Vorlagencode in der Codeansicht manuell vollständig löschen.
1 Öffnen Sie das Dokument, das Sie von der Vorlage lösen möchten, auf der es basiert.
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Von Vorlage lösen“.
Das Dokument wird von der Vorlage gelöst und sämtlicher HTML-Code, der sich auf Vorlagen bezieht, wird gelöscht.
Inhalte in vorlagenbasierten Dokumenten bearbeiten
Inhalte in Dokumenten bearbeiten, die auf Vorlagen basieren
Dreamweaver-Vorlagen legen für Dokumente, die auf Vorlagen basieren, Bereiche fest, die bearbeitbar oder nicht
bearbeitbar (gesperrt) sind.
451
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
In Seiten, die auf Vorlagen basieren, können Benutzer der Vorlage nur Inhalte in bearbeitbaren Bereichen bearbeiten.
Bearbeitbare Bereiche lassen sich leicht identifizieren und für die Bearbeitung auswählen. Vorlagenbenutzer können
den Inhalt in gesperrten Bereichen nicht bearbeiten.
Note: Wenn Sie versuchen, in einem Dokument, das auf einer Vorlage basiert, einen gesperrten Bereich zu bearbeiten
(und die Markierung deaktiviert ist), ändert sich die Form des Mauszeigers, um anzuzeigen, dass Sie nicht in einen
gesperrten Bereich klicken können.
Vorlagenbenutzer können in einem wiederholenden Bereich eines Dokuments, das auf einer Vorlage basiert, auch
Eigenschaften ändern und Einträge bearbeiten.
More Help topics
“Seiten basierend auf einer vorhandenen Vorlage erstellen” on page 70
“Dreamweaver-Vorlagen” on page 420
“Bearbeitbare Bereiche auswählen” on page 432
Vorlageneigenschaften ändern
Wenn der Autor einer Vorlage in einer Vorlage Parameter erstellt, werden für die auf der Vorlage basierenden
Dokumente automatisch diese Parameter sowie deren Anfangswerte übernommen. Der Benutzer der Vorlage kann
bearbeitbare Tag-Attribute und andere Vorlagenparameter (beispielsweise die Einstellungen für optionale Bereiche)
aktualisieren.
More Help topics
“Vorlagenparameter” on page 423
“Verwenden optionaler Bereiche in Vorlagen” on page 436
“Definieren bearbeitbare Tag-Attribute in Vorlagen” on page 438
Bearbeitbare Tag-Attribute ändern
1 Öffnen Sie das auf der Vorlage basierende Dokument.
2 Wählen Sie „Modifizieren“ > „Vorlageneigenschaften“.
Das Dialogfeld „Vorlageneigenschaften“ wird geöffnet und zeigt eine Liste der verfügbaren Eigenschaften an. Das
Dialogfeld zeigt optionale Bereiche und bearbeitbare Tag-Attribute an.
3 Wählen Sie in der Liste „Name“ eine Eigenschaft aus.
Der untere Teil des Dialogfelds wird aktualisiert und zeigt nun die Beschriftung der ausgewählten Eigenschaft und den
ihr zugewiesenen Wert an.
4 Bearbeiten Sie den Wert im Feld rechts neben der Eigenschaftenbeschriftung, um die Eigenschaft im Dokument zu
modifizieren.
Note: Der Feldname und die aktualisierbaren Werte werden in der Vorlage definiert. Es können nur die in der Liste
„Name“ aufgeführten Attribute in dem auf einer Vorlage basierenden Dokument bearbeitet werden.
5 Aktivieren Sie die Option „Zulassen, dass verschachtelte Vorlagen diese Eigenschaft steuern“, um die bearbeitbare
Eigenschaft an die Dokumente zu übergeben, die auf dieser verschachtelten Vorlage basieren.
Vorlagenparameter für optionale Bereiche modifizieren
1 Öffnen Sie das auf der Vorlage basierende Dokument.
452
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
2 Wählen Sie „Modifizieren“ > „Vorlageneigenschaften“.
Das Dialogfeld „Vorlageneigenschaften“ wird geöffnet und zeigt eine Liste der verfügbaren Eigenschaften an. Das
Dialogfeld zeigt optionale Bereiche und bearbeitbare Tag-Attribute an.
3 Wählen Sie in der Liste „Name“ eine Eigenschaft aus.
Das Dialogfeld wird aktualisiert und zeigt nun die Beschriftung der ausgewählten Eigenschaft und den ihr
zugewiesenen Wert an.
4 Aktivieren Sie die Option „Anzeigen“, um den optionalen Bereich im Dokument anzuzeigen, oder deaktivieren Sie
sie, wenn der optionale Bereich nicht angezeigt werden soll.
Note: Der Feldname und die Standardwerte werden in der Vorlage definiert.
5 Aktivieren Sie die Option „Zulassen, dass verschachtelte Vorlagen diese Eigenschaft steuern“, um die bearbeitbare
Eigenschaft an die Dokumente zu übergeben, die auf dieser verschachtelten Vorlage basieren.
Einträge für wiederholende Bereiche hinzufügen, entfernen und ihre
Reihenfolge ändern
Mit den Steuerelementen für wiederholende Bereiche können Sie Einträge hinzufügen und entfernen sowie die
Reihenfolge der Einträge in vorlagebasierten Dokumenten ändern. Wenn Sie einen Eintrag für einen wiederholenden
Bereich hinzufügen, wird eine Kopie des gesamten wiederholenden Bereichs hinzugefügt. Wenn Sie den Inhalt in den
wiederholenden Bereichen aktualisieren möchten, muss der wiederholende Bereich in der ursprünglichen Vorlage
einen bearbeitbaren Bereich enthalten.
More Help topics
“Erstellen wiederholender Bereiche in Vorlagen” on page 433
Wiederholende Bereiche hinzufügen, entfernen und ihre Reihenfolge ändern
1 Öffnen Sie das auf der Vorlage basierende Dokument.
2 Setzen Sie die Einfügemarke in den wiederholenden Bereich, um ihn auszuwählen.
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf das Plussymbol (+), um einen wiederholenden Bereich unterhalb des derzeit ausgewählten Eintrags
hinzuzufügen.
• Klicken Sie auf das Minussymbol (-), um den ausgewählten Eintrag des wiederholenden Bereichs zu entfernen.
• Klicken Sie auf die Schaltfläche mit dem Abwärtspfeil, um den ausgewählten Eintrag um eine Position nach unten
zu verschieben.
• Klicken Sie auf die Schaltfläche mit dem Aufwärtspfeil, um den ausgewählten Eintrag um eine Position nach oben
zu verschieben.
453
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Note: Sie können auch „Modifizieren“ > „Vorlagen“ wählen und unten im Untermenü eine der Optionen für
wiederholende Einträge auswählen. Mit diesem Menü können Sie einen neuen wiederholenden Eintrag einfügen oder die
Position des ausgewählten Eintrags ändern.
Einträge ausschneiden, kopieren und löschen
1 Öffnen Sie das auf der Vorlage basierende Dokument.
2 Setzen Sie die Einfügemarke in den wiederholenden Bereich, um ihn auszuwählen.
3 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Bearbeiten“ > „Wiederholende Einträge“ > „Wiederholenden Eintrag ausschneiden“, um einen
wiederholenden Eintrag auszuschneiden.
• Wählen Sie „Bearbeiten“ > „Wiederholende Einträge“ > „Wiederholenden Eintrag kopieren“, um einen
wiederholenden Eintrag zu kopieren.
• Wählen Sie „Bearbeiten“ > „Wiederholende Einträge“ > „Wiederholenden Eintrag löschen“, um einen
wiederholenden Eintrag zu entfernen.
• Wählen Sie „Bearbeiten“ > „Einfügen“, um einen wiederholenden Eintrag einzufügen.
Note: Beim Einfügen wird ein neuer Eintrag hinzugefügt; vorhandene Einträge werden durch den neuen Eintrag nicht
ersetzt.
Vorlagensyntax
Allgemeine Syntaxregeln
Dreamweaver verwendet HTML-Kommentar-Tags zur Festlegung von Bereichen in Vorlagen und vorlagenbasierten
Dokumenten. Auf Vorlagen basierende Dokumente sind daher weiterhin gültige HTML-Dateien. Wenn Sie ein
Vorlagenobjekt einfügen, werden Vorlagen-Tags in den Code eingefügt.
Die allgemeinen Syntaxregeln sind wie folgt:
• Leere Bereiche können durch eine beliebige Anzahl von Leerstellen, Tabulatorzeichen oder Neue-Zeile-Zeichen
ersetzt werden. Leere Bereiche müssen verwendet werden; nur ganz am Anfang oder Ende eines Kommentars sind
sie nicht erforderlich.
• Attribute können in beliebiger Reihenfolge angegeben werden. Bei Vorlagenparametern können Sie beispielsweise
den Typ vor dem Namen angeben.
• Im Namen von Kommentaren und Attributen wird zwischen Groß- und Kleinschreibung unterschieden.
• Alle Attribute sind in Anführungszeichen zu setzen. Hierbei können normale Anführungszeichen oder
Hochkommas verwendet werden.
Vorlagen-Tags
Dreamweaver verwendet die folgenden Vorlagen-Tags:
454
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="..." type="..." value="..." -->
<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->
<!-- TemplateBeginIf cond="..." -->
<!-- TemplateEndIf -->
<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->
<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->
<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->
<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->
<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->
<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)
<!-- TemplatePassthroughExpr expr="..." -->
<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->
Instanz-Tags
Dreamweaver verwendet die folgenden Instanz-Tags:
<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
<!-- InstanceEnd -->
<!-- InstanceBeginEditable name="..." -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="..." type="..." value="..." passthrough="..." -->
<!-- InstanceBeginRepeat name="..." -->
<!-- InstanceEndRepeat -->
<!-- InstanceBeginRepeatEntry -->
<!-- InstanceEndRepeatEntry -->
Vorlagensyntax überprüfen
Dreamweaver überprüft die Vorlagensyntax, wenn Sie eine Vorlage speichern. Sie können die Vorlagensyntax jedoch
auch manuell, vor dem Speichern der Vorlage, überprüfen. Wenn Sie beispielsweise einen Vorlagenparameter oder
Ausdruck in der Codeansicht manuell hinzufügen, können Sie prüfen, ob der Code die korrekte Syntax verwendet.
1 Öffnen Sie das Dokument, das Sie überprüfen möchten, im Dokumentfenster.
2 Wählen Sie „Modifizieren“ > „Vorlagen“ > „Vorlagensyntax überprüfen“.
Eine Fehlermeldung wird eingeblendet, wenn die Syntax nicht korrekt ist. Die Fehlermeldung enthält eine
Beschreibung des Fehlers und einen Verweis auf die spezifische Zeile im HTML-Code, in der sich der Fehler befindet.
More Help topics
“Vorlagen und vorlagenbasierte Dokumente erkennen” on page 426
“Vorlagenausdrücke” on page 423
455
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Voreinstellungen für Vorlagenbereiche
Code-Farbeinstellungen für Vorlagen anpassen
Mit den Farbeinstellungen können Sie die Darstellung des Texts, der Hintergrundfarbe und der Stilattribute des Texts
in der Codeansicht wählen. Sie können Ihr eigenes Farbschema festlegen, sodass Sie beim Anzeigen eines Dokuments
in der Codeansicht die einzelnen Vorlagenbereiche auf den ersten Blick unterscheiden können.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Farbe für Code“.
3 Wählen Sie aus der Liste den Dokumenttyp „HTML“ und klicken Sie auf die Schaltfläche „Farbschema bearbeiten“.
4 Wählen Sie aus der Liste „Stile für“ die Option „Template tags“ aus.
5 Führen Sie folgende Schritte aus, um Attribute für die Farbe, die Hintergrundfarbe und den Stil von Text in der
Codeansicht festzulegen:
• Wenn Sie die Textfarbe ändern möchten, geben Sie im Feld „Textfarbe“ den Hexadezimalwert der Farbe ein, die
Sie dem ausgewählten Text zuweisen möchten, oder wählen Sie die gewünschte Textfarbe mit dem Farbwähler aus.
Führen Sie dasselbe im Feld „Hintergrund“ durch, wenn Sie die Hintergrundfarbe des ausgewählten Texts ändern
bzw. eine Hintergrundfarbe hinzufügen möchten.
• Um Schriftauszeichnungen für den ausgewählten Code festzulegen, klicken Sie auf die Schaltflächen B (Fett), I
(Kursiv) oder U (Unterstrichen).
6 Klicken Sie auf „OK“.
Note: Um globale Änderungen vorzunehmen, können Sie die Quelldatei bearbeiten, in der Ihre Voreinstellungen
gespeichert werden. Unter Windows XP befindet sich diese unter „C:\Dokumente und
Einstellungen\%Benutzername%\Anwendungsdaten\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml
“. Unter Windows Vista befindet sich diese unter „C:\Benutzer\%Benutzername%\Application
Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
Markierungseinstellungen für Vorlagenbereiche festlegen
Anhand der Voreinstellungen für die Markierungsfarbe können Sie in Dreamweaver die Markierungsfarben des
Rahmens anpassen, der die bearbeitbaren und gesperrten Bereiche einer Vorlage in der Entwurfsansicht umgibt. Die
Farbe für bearbeitbare Bereiche wird in der Vorlage sowie in den auf der Vorlage basierenden Dokumenten angezeigt.
More Help topics
“Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen” on page 427
“Vorlagen in der Entwurfsansicht erkennen” on page 426
Markierungsfarben für Vorlagen ändern
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie in der Liste links die Kategorie „Markierung“.
3 Klicken Sie in das Farbfeld für „Bearbeitbare Bereiche“, „Verschachtelt, editierbar“ oder „Gesperrte Bereiche“ und
wählen Sie mit dem Farbwähler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert der
Markierungsfarbe in das Feld ein).
456
VERWENDEN VON DREAMWEAVER
Vorlagen erstellen und verwalten
Last updated 10.4.2012
Weitere Informationen zur Verwendung des Farbwählers finden Sie unter “Farbauswahl verwenden” on page 235.
4 Optional: Wiederholen Sie diesen Vorgang bei Bedarf für andere Arten von Vorlagenbereichen.
5 Klicken Sie auf das Kontrollkästchen in der Spalte „Anzeigen“, um die Anzeige von Farben im Dokumentfenster
zu aktivieren bzw. zu deaktivieren.
Note: Für verschachtelte Bereiche in der Spalte „Anzeigen“ kein Kontrollkästchen verfügbar, da deren Anzeige über die
Option „Bearbeitbare Bereiche“ festgelegt wird.
6 Klicken Sie auf „OK“.
Markierungsfarben im Dokumentfenster anzeigen
❖ Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
Markierungsfarben werden nur im Dokumentfenster angezeigt, wenn „Ansicht“ > „Visuelle Hilfsmittel“ >
„Unsichtbare Elemente“ markiert ist und in den Markierungseinstellungen die entsprechenden Optionen aktiviert sind.
Note: Wenn unsichtbare Elemente angezeigt werden, Markierungsfarben jedoch nicht, wählen Sie „Bearbeiten“ >
„Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und anschließend die Kategorie
„Hervorheben“ aus. Vergewissern Sie sich, dass in der Spalte „Anzeigen“ das Kontrollkästchen neben der zutreffenden
Markierungsfarbe aktiviert ist. Achten Sie zudem darauf, dass die gewählte Farbe gegenüber der Hintergrundfarbe der
Seite sichtbar ist.
457
Last updated 10.4.2012
Chapter 15: Spry-Seiten visuell erstellen
Das Spry-Framework ist eine JavaScript-Bibliothek, mit der Webdesigner Webseiten erstellen können, die eine
höherwertige Benutzererfahrung bieten. Mit Spry können Sie HTML, CSS und einen geringen Anteil an JavaScript
XML-Daten in Ihre HTML-Dokumente integrieren, Widgets wie z. B. Akkordeons und Menüleisten erstellen und
Seitenelemente mit verschiedenen Effekten anreichern. Das Spry-Framework bietet ein einfaches und
benutzerfreundliches Markup für Anwender mit grundlegenden Kenntnissen in HTML, CSS und JavaScript.
Es ist allerdings primär für Webdesign-Profis bzw. erfahrene Amateur-Webdesigner gedacht. Als vollständiges
Webanwendungs-Framework für die Webentwicklung auf Unternehmensebene ist es nicht geeignet (kann aber
zusammen mit anderen auf Unternehmensebene erstellten Seiten verwendet werden).
Spry-Framework
Das Spry-Framework ist eine JavaScript-Bibliothek, mit der Webdesigner Webseiten erstellen können, die eine
höherwertige Benutzererfahrung bieten. Mit Spry können Sie HTML, CSS und einen geringen Anteil an JavaScript
XML-Daten in Ihre HTML-Dokumente integrieren, Widgets wie z. B. Akkordeons und Menüleisten erstellen und
Seitenelemente mit verschiedenen Effekten anreichern. Das Spry-Framework bietet ein benutzerfreundliches Markup,
das auch für Anwender mit grundlegenden Kenntnissen in HTML, CSS und JavaScript geeignet ist.
Es ist allerdings primär für Webdesign-Profis bzw. erfahrene Amateur-Webdesigner gedacht. Als vollständiges
Webanwendungs-Framework für die Webentwicklung auf Unternehmensebene ist es nicht geeignet (kann aber
zusammen mit anderen auf Unternehmensebene erstellten Seiten verwendet werden).
Weitere Informationen zum Spry-Framework finden Sie unter www.adobe.com/go/learn_dw_spryframework_de.
More Help topics
Spry-Entwicklerhandbuch
Arbeiten mit Spry-Widgets (allgemeine Anweisungen)
Spry-Widgets
Bei einem Spry-Widget handelt es sich um ein interaktives Seitenelement, das dem Anwender ein höherwertigeres
Erlebnis durch Benutzerinteraktion bietet. Es besteht aus folgenden Elementen:
Widget-Struktur Ein HTML-Codeblock zur Definition der strukturellen Zusammensetzung des Widgets.
Widget-Verhalten JavaScript zur Steuerung des Widget-Verhaltens bei Benutzeraktionen.
Widget-Stil CSS zur Bestimmung des Erscheinungsbilds.
Das Spry-Framework unterstützt einen Satz wiederverwendbarer, in standardmäßigem HTML, CSS und JavaScript
geschriebener Widgets. Diese Widgets lassen sich kinderleicht einfügen (der Code ist einfaches HTML und CSS) und
mit eigenem Stil anpassen. Die Verhalten im Framework beinhalten Funktionen, mit denen Benutzer Seiteninhalte ein-
bzw. ausblenden, das Erscheinungsbild (wie die Farbe) ändern oder mit Menüs interagieren können und vieles mehr.
458
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Alle Widgets im Spry-Framework sind mit eindeutigen CSS- und JavaScript-Dateien verknüpft. Die CSS-Datei enthält
alles Notwendige für den Widget-Stil, während die JavaScript-Datei ihre Funktionalität bestimmt. Wenn Sie ein
Widget über die Dreamweaver Benutzeroberfläche einfügen, verknüpft Dreamweaver diese Dateien automatisch mit
Ihrer Seite. Ihr Widget erhält dadurch Funktionalität und Stil.
Die mit einem Widget verknüpften CSS- und JavaScript-Dateien werden nach dem Widget benannt. So wissen Sie
immer, welche Dateien zu welchem Widget gehören (So heißen die mit dem Akkordeon-Widget verknüpften Dateien
folgerichtig „SpryAccordion.css“ und „SpryAccordion.js“). Wenn Sie ein Widget in eine gespeicherte Seite einfügen,
erstellt Dreamweaver einen Ordner mit Namen „SpryAssets“ auf Ihrer Site, in dem die dazugehörigen JavaScript- und
CSS-Dateien gespeichert werden.
More Help topics
“Grundlegendes zu Cascading Stylesheets” on page 134
Spry-Widgets - Ressourcen und Tutorials
Die folgenden Online-Ressourcen enthalten weiterführende Informationen zum Anpassen von Spry-Widgets.
Spry widget samples (Beispiele für Spry-Widgets)
Customizing Spry Menu Bars in Dreamweaver (Spry-Menüleisten in Dreamweaver anpassen)
Spry Validation widgets (Spry-Überprüfungs-Widgets) - Video-Tutorial
Spry-Widget einfügen
❖ Wählen Sie „Einfügen“ > „Spry“ und dann das einzufügende Widget aus.
Bei diesem Vorgang fügt Dreamweaver beim Speichern der Seite automatisch die benötigten Spry JavaScript- und
CSS-Dateien hinzu.
Note: Sie können Spry-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Spry-Widget auswählen
1 Zeigen Sie mit dem Mauszeiger auf das Widget. Daraufhin wird sein blau gestrichelter Rahmen angezeigt.
2 Klicken Sie oben links auf das Widget-Register.
Spry-Widget bearbeiten
❖ Wählen Sie das zu bearbeitende Widget aus und nehmen Sie Ihre Änderungen im Eigenschafteninspektor
(„Fenster“ > „Eigenschaften“) vor.
Genaue Informationen zum Bearbeiten bestimmter Widgets finden Sie im jeweiligen Abschnitt.
Stil eines Spry-Widgets festlegen
❖ Suchen Sie nach der CSS-Datei Ihres Widgets im Ordner „SpryAssets“ für Ihre Site und bearbeiten Sie sie nach
Ihren Vorstellungen.
Genaue Informationen zum Stil bestimmter Widgets finden Sie im jeweiligen Abschnitt.
Sie können das Format eines Widgets auch anpassen, indem Sie ihn über das Bedienfeld „CSS“ bearbeiten, genau so,
wie Sie das für andere Seitenelemente tun würden.
459
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Weitere Widgets
Neben den mit Dreamweaver installierten Spry-Widgets sind viele weitere Web-Widgets verfügbar. Adobe Exchange
bietet Web-Widgets, die von anderen kreativen Profis entwickelt wurden.
❖
Wählen Sie im Menü „Dreamweaver erweitern“ der Anwendungsleiste die Option „Web-Widgets suchen“ aus.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung von Web-Widgets
finden Sie unter www.adobe.com/go/dw10widgets_de.
Standardordner für Spry-Elemente ändern
Wenn Sie ein Spry-Widget, einen Datensatz oder einen Effekt in eine gespeicherte Seite einfügen, erstellt
Dreamweaver auf Ihrer Site einen Ordner mit dem Namen „SpryAssets“, in dem die dazugehörigen JavaScript- und
CSS-Dateien gespeichert werden. Sie können diesen Standardspeicherort für Spry-Elemente ändern, wenn Sie ihn an
anderer Stelle bevorzugen.
1 Wählen Sie „Sites“ > „Sites verwalten“ aus.
2 Wählen Sie im Dialogfeld „Sites verwalten“ die gewünschte Site aus und klicken Sie dann auf „Bearbeiten“.
3 Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie
„Spry“ aus.
4 Geben Sie den Pfad des Ordners an, in dem Sie die Spry-Elemente speichern möchten, und klicken Sie dann auf
„OK“. Sie können diesen Ordner auch mithilfe des Ordnersymbols suchen.
More Help topics
“Arbeiten mit Dreamweaver-Sites” on page 40
Arbeiten mit dem Spry-Akkordeon-Widget
Akkordeon-Widget
Ein Akkordeon-Widget besteht aus einem Satz reduzierbarer Paletten, die umfangreiche Inhalte auf kleinstem Raum
aufnehmen können. Der Seitenbesucher blendet die im Akkordeon gespeicherten Inhalte durch Klicken auf die
Titelleisten der Paletten ein bzw. aus. Die Paletten eines Akkordeons lassen sich durch Klickaktionen entsprechend
erweitern bzw. reduzieren. Allerdings kann in einem Akkordeon jeweils nur ein Inhaltsfenster angezeigt werden. Im
folgenden Beispiel ist ein Akkordeon-Widget dargestellt, dessen erste Palette erweitert ist:
460
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
A: Titelleiste der Akkordeonpalette B: Inhaltsfenster der Akkordeonpalette C: Akkordeonpalette (geöffnet)
Das Standard-HTML für das Akkordeon-Widget besteht aus einem äußeren div-Tag mit allen Paletten, einem div-
Tag für jede Palette sowie einem Header-
div- und einem Inhalts-div innerhalb des Tags für jede Palette. Ein
Akkordeon-Widget kann eine beliebige Anzahl an einzelnen Paletten enthalten. Der HTML-Code für das Akkordeon-
Widget enthält außerdem
script-Tags im Kopf des Dokuments und unterhalb des HTML-Markups für das
Akkordeon.
Eine ausführliche Erläuterung der Funktionsweise von Akkordeon-Widgets, einschließlich der vollständigen Code-
Struktur, finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_de.
Ein Tutorial zum Verwenden des Akkordeon-Widgets finden Sie unter www.adobe.com/go/vid0167_de.
Akkordeon-Widget einfügen und bearbeiten
Akkordeon-Widget einfügen
❖ Wählen Sie „Einfügen“ > „Spry“ > „Spry-Akkordeon“.
Note: Sie können Akkordeon-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Bedienfeld zu einem Akkordeon-Widget hinzufügen
1 Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche zum Hinzufügen von
Paletten (+).
3 Optional: Ändern Sie den Namen, indem Sie in der Entwurfsansicht den Titel auswählen und bearbeiten.
Bedienfeld aus einem Akkordeon-Widget löschen
1 Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
2 Wählen Sie im Bedienfeldmenü des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) den Namen der zu
löschenden Palette aus und klicken Sie auf das Minussymbol (-).
Bedienfeld zum Bearbeiten öffnen
❖ Führen Sie einen der folgenden Schritte aus:
• Deuten Sie mit dem Mauszeiger auf die Titelleiste der jeweiligen Palette, um es in der Entwurfsansicht zu öffnen.
Klicken Sie dann auf das Augensymbol, das rechts im Register angezeigt wird.
A
B
C
461
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
• Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus und klicken Sie dann im Bedienfeldmenü des
Eigenschafteninspektors („Fenster“ > „Eigenschaften“) auf den Namen der zu bearbeitenden Palette.
Reihenfolge der Bedienfelder ändern
1 Wählen Sie ein Akkordeon-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen der zu verschiebenden
Akkordeonpalette aus.
3 Klicken Sie auf den Rechts- bzw. Linkspfeil, um die Palette nach oben oder unten zu verschieben.
Akkordeon-Widget anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Akkordeon-Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Der Stil des Akkordeons lässt sich über die CSS-
Regeln für das Akkordeon-Widget individuell anpassen.
Eine Kurzanleitung zum Ändern der Farben des Akkordeon-Widgets finden Sie im Artikel von David Powers Quick
guide to styling Spry tabbed panels, accordions, and collapsible panels (Kurzanleitung zum Ändern des Stils von Spry-
Widgets wie Paletten mit Registerkarten, Akkordeons und reduzierbare Paletten).
Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryAccordion.css“. Jedes
Mal, wenn Sie in Akkordeon-Widget erstellen, speichert Dreamweaver die Datei „SpryAccordion.css“ im Ordner
„SpryAssets“ Ihrer Site. Diese Datei enthält außerdem kommentierte Informationen zu verschiedenen Stilen für das
jeweilige Widget und bietet damit eine nützliche Informationsquelle.
Sie können die Regeln für das Akkordeon-Widget entweder schnell und einfach in der CSS-Datei oder mit dem
Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das
Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Textstil für Akkordeon-Widgets
Sie können den Textstil eines Akkordeon-Widgets bearbeiten, indem Sie Eigenschaften für den gesamten Widget-
Container bzw. die der Widget-Komponenten einzeln konfigurieren.
❖ Um den Textstil eines Akkordeon-Widgets zu bearbeiten, suchen Sie in folgender Tabelle die richtige CSS-Regel
und fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:
Zu ändernder Text Dazugehörige CSS-Regel Beispiel für hinzuzufügende
Eigenschaften/Werte
Text im gesamten Akkordeon (inklusive
Tittelleiste und Inhaltsfenster)
.Accordion or .AccordionPanel
font: Arial; font-size:medium;
Nur der Text in der Titelleiste der
Akkordeonpalette
.AccordionPanelTab
font: Arial; font-size:medium;
Nur der Text im Inhaltsfenster der
Akkordeonpalette
.AccordionPanelContent
font: Arial; font-size:medium;
462
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Hintergrundfarben für Akkordeon-Widget ändern
❖ Um die Hintergrundfarben verschiedener Bereiche eines Akkordeon-Widgets zu ändern, suchen Sie in folgender
Tabelle die richtige CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben
hinzu:
Breite eines Akkordeons beschränken
Akkordeon-Widgets passen sich standardmäßig dem verfügbaren Raum an. Sie können die Breite eines Akkordeon-
Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Akkordeon-Container anpassen.
1 Suchen Sie nach der CSS-Regel „.Accordion“ in der Datei „SpryAccordion.css“. Diese Regel definiert die
Eigenschaften für das Haupt-Containerlement des Akkordeon-Widgets.
Sie können die Regel auch suchen, indem Sie das Akkordeon-Widget auswählen und das Bedienfeld „CSS-Stile“
(„Fenster“ > „CSS-Stile“) anzeigen. Dazu muss sich das Bedienfeld im Modus „Aktuell“ befinden.
2 Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
Arbeiten mit dem Spry-Menüleisten-Widget
Menüleisten-Widget
Ein Menüleisten-Widget besteht aus einem Satz Navigationsschaltflächen, mit denen Untermenüs angezeigt werden,
wenn ein Besucher mit dem Mauszeiger auf eine der Schaltflächen zeigt. Mit Menüleisten können Sie große Mengen
an Navigationsdaten auf kleinstem Raum anzeigen. Außerdem erhalten die Besucher dadurch einen Einblick in die
Inhalte, ohne die ganze Site erkunden zu müssen.
Mit Dreamweaver können Sie zwei Typen von Menüleisten-Widgets einfügen, nämlich vertikale und horizontale. Das
folgende Beispiel zeigt ein horizontales Menüleisten-Widget, dessen drittes Menüelement erweitert ist:
Zu ändernder Widget-Bereich Dazugehörige CSS-Regel Beispiel für hinzuzufügende/zu ändernde
Eigenschaften/Werte
Hintergrundfarbe der Titelleisten der
Akkordeonpaletten
.AccordionPanelTab
background-color: #CCCCCC (dies ist der
Standardwert)
Hintergrundfarbe der Inhaltsfenster des
Akkordeons
.AccordionPanelContent
background-color: #CCCCCC
Hintergrundfarbe der geöffneten
Akkordeonpalette
.AccordionPanelOpen
.AccordionPanelTab
background-color: #EEEEEE (dies ist der
Standardwert)
Hintergrundfarbe der Hover-Palettenregister
.AccordionPanelTabHover
color: #555555 (dies ist der Standardwert)
Hintergrundfarbe des geöffneten Hover-
Palettenregisters
.AccordionPanelOpen
.AccordionPanelTabHover
color: #555555 (dies ist der Standardwert)
463
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Menüleisten-Widget (besteht aus den Tags <ul>, <li> und <a>)
A: Das Menüelement hat ein Untermenü B: Das Untermenüelement hat ein weiteres Untermenü
Das HTML für das Menüleisten-Widget besteht aus einem äußeren ul-Tag mit je einem li-Tag für die Menüelemente
der obersten Ebene. Diese Menüelemente (
li-Tags) verfügen ihrerseits über ul- und li-Tags zur Definition ihrer
jeweiligen Untermenüs. Diese wiederum können ebenfalls Untermenüs enthalten. Menüs und Untermenüs der
obersten Ebene können eine beliebige Anzahl an Untermenüs aufweisen.
Eine ausführliche Erläuterung der Funktionsweise von Menüleisten-Widgets, einschließlich der vollständigen Code-
Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprymenubar_de.
Ein Tutorial zum Erstellen von Spry-Menüleisten finden Sie unter www.adobe.com/go/vid0168_de.
More Help topics
Tutorial zu Spry-Menüleisten
Menüleisten-Widget einfügen und bearbeiten
Menüleisten-Widget einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Menüleiste“.
2 Wählen Sie „Horizontal“ oder „Vertikal“ und klicken Sie dann auf „OK“.
Note: Sie können Menüleisten-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Note: Das Spry-Menüleisten-Widget verwendet DHTML-Ebenen zur Anzeige von HTML-Bereichen über anderen
Regionen. Bei Seiten mit in Adobe Flash erstellten Inhalten können Probleme auftreten, da SWF-Dateien immer über
allen anderen DHTML-Ebenen und damit möglicherweise auch über den Untermenüs angezeigt werden. Sie können
dieses Problem umgehen, indem Sie als Parameter der SWF-Datei
wmode="transparent" angeben. Wählen Sie dazu
einfach die SWF-Datei im Dokumentfenster aus und setzen Sie im Eigenschafteninspektor die Option
wmode auf
transparent. Weitere Informationen finden Sie unter www.adobe.com/go/15523_de.
Menüs und Untermenüs hinzufügen oder löschen
Mit dem Eigenschafteninspektor („Fenster“ > „Eigenschaften“) können Sie Menüelemente zum Menüleisten-Widget
hinzufügen bzw. daraus entfernen.
Hauptmenü-Element hinzufügen
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Klicken Sie im Eigenschafteninspektor auf das Plussymbol (+) über der ersten Spalte.
3 Optional: Benennen Sie das neue Menüelement um, indem Sie den Standardtext im Dokumentfenster bzw. dem
Textfeld des Eigenschafteninspektors ändern.
A B
464
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Untermenüelemente hinzufügen
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor den Namen des Haupt-Menüelements aus, dem Sie ein Untermenü
hinzufügen möchten.
3 Klicken Sie auf das Plussymbol (+) über der zweiten Spalte.
4 Optional: Benennen Sie das neue Untermenüelement um, indem Sie den Standardtext im Dokumentfenster bzw.
dem Textfeld des Eigenschafteninspektors ändern.
Um einem Untermenü ein Untermenü hinzuzufügen, wählen Sie den Namen aus und klicken im
Eigenschafteninspektor auf das Plussymbol (+) über der dritten Spalte.
Note: Dreamweaver unterstützt in der Entwurfsansicht lediglich zwei Ebenen von Untermenüs. In der Codeansicht
können Sie allerdings so viele Untermenüs hinzufügen, wie Sie möchten.
Elemente aus Haupt- oder Untermenüs löschen
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor den Namen des zu löschenden Haupt- oder Untermenüelements aus und
klicken Sie auf das Minussymbol (-).
Reihenfolge der Menüelemente ändern
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des neu anzuordnenden
Menüelements aus.
3 Klicken Sie auf den Nach-oben- bzw. Nach-unten-Pfeil, um das Menü nach oben oder unten zu verschieben.
Text eines Menüelements ändern
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des Menüelements aus, dessen
Text Sie ändern möchten.
3 Nehmen Sie Ihre Änderungen im Textfeld vor.
Menüelement verlinken
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des Menüelements aus, das Sie
verlinken möchten.
3 Geben Sie den Link in das entsprechende Textfeld ein oder klicken Sie auf das Ordnersymbol, um eine Datei
auszuwählen.
QuickInfo für ein Menüelement erstellen
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des Menüelements aus, für das
Sie ein QuickInfo erstellen möchten.
3 Geben Sie den Text für das QuickInfo ins Textfeld „Titel“ ein.
465
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Menüelementen das Attribut „target“ zuweisen
Das Zielattribut gibt an, wo verlinkte Seiten geöffnet werden. Wenn Sie beispielsweise ein solches Attribut einem
Menüelement zuweisen, wird beim Anklicken des Links die verlinkte Seite in einem neuen Browserfenster geöffnet.
Wenn Sie mit Framesets arbeiten, können Sie zudem den Namen des Frames angeben, in dem die verlinkte Seite
geöffnet werden soll.
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des Menüelements aus, dem Sie
ein Zielattribut zuweisen möchten.
3 Wählen Sie eines der vier Attribute aus dem Feld „Ziel“:
_blank öffnet die verlinkte Seite in einem neuen Browserfenster.
_self lädt die verlinkte Seite im gleichen Browserfenster. Dies ist die Standardoption. Befindet sich die Seite in einem
Frame oder Frameset, wird die Seite innerhalb dieses Frames geladen.
_parent lädt das verlinkte Dokument in das übergeordnete Frameset des Dokuments.
_top lädt die verlinkte Seite in das oberste Fenster des Framesets.
Stile deaktivieren
Sie können die Stilfunktion eines Menüleisten-Widgets deaktivieren, damit seine HTML-Struktur in der
Entwurfsansicht besser zu sehen ist. In diesem Fall werden Menüleistenelemente auf der Seite als Liste mit
Aufzählungspunkten und nicht als Menüelemente mit Stilen angezeigt.
1 Wählen Sie ein Menüleisten-Widget im Dokumentfenster aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf „Stile deaktivieren“.
Ausrichtung von Menüleisten-Widgets ändern
Sie können die Ausrichtung von Menüleisten-Widgets von horizontal in vertikal und umgekehrt ändern. Sie müssen
dazu lediglich den HTML-Code für die Menüleiste ändern und sicherstellen, dass Sie die korrekte CSS-Datei im
Ordner „SpryAssets“ ausgewählt haben.
Im folgenden Beispiel wird die Ausrichtung eines Menüleisten-Widgets von horizontal in vertikal geändert.
1 Öffnen Sie in Dreamweaver die Seite mit dem horizontalen Menüleisten-Widget.
2
Fügen Sie ein vertikales Menüleisten-Widget („Einfügen“ > „Spry“ > „Spry-Menüleiste“) ein und speichern Sie die
Seite. Damit stellen Sie sicher, dass für Ihre Seite die korrekte CSS-Datei für eine vertikale Menüleiste eingefügt wird.
Note: Ihre Site verfügt bereits über ein vertikales Menüleisten-Widget, weshalb Sie kein weiteres mehr einfügen müssen.
So müssen Sie lediglich die Datei „SpryMenuBarVertical.css“ mit der Seite verknüpfen. Klicken Sie dazu im Bedienfeld
„CSS-Stile“ („Fenster“ > „CSS-Stile“) auf die Schaltfläche „Stylesheet anfügen“.
3 Löschen Sie die vertikale Menüleiste.
4 Suchen Sie in der Codeansicht („Ansicht“ > „Code“) die Klasse „MenuBarHorizontal“ und ändern Sie sie in
„MenuBarVertical“. Die Klasse „MenuBarHorizontal“ ist im Container
ul-Tag für die Menüleiste (<ul
id="MenuBar1" class="MenuBarHorizontal">) definiert.
5 Suchen Sie jetzt nach dem Menüleistenkonstruktor:
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
6 Entfernen Sie die Vorausladeoption imgDown (nebst Komma) aus dem Konstruktor:
466
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
Note: Wenn Sie von einer vertikalen in eine horizontale Menüleiste konvertieren, fügen Sie die Vorausladeoption
imgDown nebst Komma hinzu.
7 Optional: Wenn Ihre Seite keine weiteren horizontalen Menüleisten-Widgets enthält, löschen Sie den Link zur
Datei „MenuBarHorizontal.css“ im Dokumentkopf.
8 Speichern Sie die Seite.
Menüleisten-Widget anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Menüleisten-Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für Menüleisten-
Widgets ändern und ihren Stil individuell anpassen.
Alle CSS-Regeln in den nachfolgenden Themen beziehen sich auf die Standardregeln der Datei
„SpryMenuBarHorizontal.css“ bzw. „SpryMenuBarVertical.css“ (je nach Auswahl). Jedes Mal, wenn Sie ein Spry-
Menüleisten-Widget erstellen, speichert Dreamweaver diese CSS-Dateien im Ordner „SpryAssets“ Ihrer Site. Diese
Dateien enthalten außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das jeweilige Widget.
Sie können die Regeln für das Menüleisten-Widget entweder schnell und einfach in der CSS-Datei oder mit dem
Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das
Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Textstil eines Menüelements ändern
Die mit dem <a>-Tag verknüpfte CSS-Datei enthält Informationen zu Textstilen. Außerdem sind an dieses Tag
verschiedene relevante Textstilklassen angehängt, die sich auf unterschiedliche Menüzustände beziehen.
❖ Um den Textstil eines Menüelements zu ändern, suchen Sie in folgender Tabelle die jeweilige CSS-Datei und
ändern Sie dann den Standardwert:
Zu ändernder Stil CSS-Regel für eine vertikale bzw.
horizontale Menüleiste
Dazugehörige Eigenschaften und
Standardwerte
Standardtext
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
color: #333; text-decoration: none;
Textfarbe beim Zeigen mit der Maus
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
color: #FFF;
Textfarbe im Fokus
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
color: #FFF;
Farbe des Menüleistenelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
color: #FFF;
Farbe des Untermenüelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
color: #FFF;
467
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Hintergrundfarbe eines Menüelements ändern
Die mit dem <a>-Tag verknüpfte CSS-Datei enthält Informationen zur Hintergrundfarbe eines Menüelements.
Außerdem sind an dieses Tag verschiedene relevante Hintergrundfarben-Klassenwerte angehängt, die sich auf
unterschiedliche Menüzustände beziehen.
❖ Um die Hintergrundfarbe eines Menüelements zu ändern, suchen Sie in folgender Tabelle die jeweilige CSS-Datei
und ändern Sie dann den Standardwert:
Größe der Menüelemente ändern
Sie ändern die Abmessungen der Menüelemente, indem Sie die Breiteneigenschaften ihrer li- und ul-Tags anpassen.
1 Suchen Sie nach der Regel ul.MenuBarVertical li bzw. ul.MenuBarHorizontal li.
2 Ändern Sie die Eigenschaft „Breite“ auf den gewünschten Wert (oder ändern Sie die Eigenschaft in auto, um eine
feste Breite zu entfernen, und fügen Sie der Regel die Eigenschaft/den Wert
white-space: nowrap; hinzu).
3 Suchen Sie nach der Regel ul.MenuBarVertical ul bzw. ul.MenuBarHorizontal ul:
4 Ändern Sie die Eigenschaft „Breite“ in den gewünschten Wert (oder ändern Sie die Eigenschaft in auto, um eine
feste Breite zu entfernen).
5 Suchen Sie nach der Regel ul.MenuBarVertical ul li bzw. ul.MenuBarHorizontal ul li:
6 Fügen Sie Folgendes in die Regel ein: float: none; und background-color: transparent;.
7 Löschen Sie die Eigenschaft/den Wert von width: 8.2em;.
Untermenüs positionieren
Die Position der Untermenüs in der Spry-Menüleiste wird mittels der Randoption in den ul-Tags der Untermenüs
gesteuert.
1 Suchen Sie nach der Regel ul.MenuBarVertical ul bzw. ul.MenuBarHorizontal ul:
2 Ändern Sie die Standardwerte für margin: -5% 0 0 95%; in die gewünschten Werte.
Zu ändernde Farbe CSS-Regel für eine vertikale bzw.
horizontale Menüleiste
Dazugehörige Eigenschaften und
Standardwerte
Standardhintergrund
ul.MenuBarVertical a,
ul.MenuBarHorizontal a
background-color: #EEE;
Hintergrundfarbe beim Zeigen mit der Maus
ul.MenuBarVertical a:hover,
ul.MenuBarHorizontal a:hover
background-color: #33C;
Hintergrundfarbe im Fokus
ul.MenuBarVertical a:focus,
ul.MenuBarHorizontal a:focus
background-color: #33C;
Farbe des Menüleistenelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemHover,
ul.MenuBarHorizontal
a.MenuBarItemHover
background-color: #33C;
Farbe des Untermenüelements beim Zeigen
mit der Maus
ul.MenuBarVertical
a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover
background-color: #33C;
468
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Arbeiten mit dem Spry-Widget „Reduzierbare Palette“
Widget „Reduzierbare Palette“
Beim Widget „Reduzierbare Palette“ handelt es sich um eine Palette, mit der sich Inhalte auf kleinstem Raum
speichern lassen. Der Seitenbesucher blendet die in der reduzierbaren Palette gespeicherten Inhalte durch Klicken auf
den Widget-Titel ein bzw. aus. Das folgende Beispiel zeigt eine reduzierbare Palette im erweiterten bzw. reduzierten
Zustand:
A: Erweitert B: Reduziert
Der HTML-Code für Widgets vom Typ „Reduzierbare Palette“ besteht aus einem äußeren div-Tag mit dem div-Tag
des Inhalts und dem
div-Tag des Titelcontainers. Es enthält außerdem Skript-Tags im Kopf des Dokuments und
unterhalb des HTML-Markups der reduzierbaren Palette.
Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Reduzierbare Palette“, einschließlich der
vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycollapsiblepanel_de.
Widgets vom Typ „Reduzierbare Palette“ einfügen und bearbeiten
Widgets vom Typ „Reduzierbare Palette einfügen“
❖ Wählen Sie „Einfügen“ > „Spry“ > „Spry Reduzierbare Palette“.
Note: Sie können Widgets vom Typ „Reduzierbare Palette“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“
hinzufügen.
Reduzierbare Palette in der Entwurfsansicht öffnen oder schließen
❖ Führen Sie einen der folgenden Schritte aus:
• Deuten Sie mit dem Mauszeiger auf den Titel der Palette, um sie in der Entwurfsansicht zu öffnen. Klicken Sie dann
auf das Augensymbol, das rechts im Titel angezeigt wird.
• Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus und dann im Popupmenü
„Anzeige“ des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) die Option „Geöffnet“ bzw. „Geschlossen“.
Standardstatus des Widgets „Reduzierbare Palette“ festlegen
Sie können den Standardstatus („Geöffnet“ bzw. „Geschlossen“) des Widgets „Reduzierbare Palette“ für das Laden der
Webseite in einem Browser festlegen.
1 Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Menü „Standardstatus“ die Option
„Geöffnet“ bzw. „Geschlossen“ aus.
AB
469
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Animation für das Widget „Reduzierbare Palette“ aktivieren oder deaktivieren
Wenn Sie die Animation für ein Widget vom Typ „Reduzierbare Palette“ aktivieren, wird die Palette per
Standardeinstellung langsam geöffnet bzw. geschlossen, wenn ein Site-Besucher auf ihr Register klickt. Ist die
Animation deaktiviert, wird die reduzierbare Palette abrupt geöffnet bzw. geschlossen.
1 Wählen Sie ein Widget vom Typ „Reduzierbare Palette“ im Dokumentfenster aus.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Animation
aktivieren“.
Widget „Reduzierbare Palette“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesen Widgets vornehmen,
benutzerdefinierte Formatierungsaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für
Reduzierbare-Paletten-Widgets ändern und ihren Stil individuell anpassen.
Eine Kurzanleitung zum Ändern der Farben des Reduzierbare-Paletten-Widgets finden Sie im Artikel von David
Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Kurzanleitung zum Ändern des
Stils von Spry-Widgets wie Paletten mit Registerkarten, Akkordeons und reduzierbare Paletten.
Eine erweiterte Liste mit Formatierungsaufgaben finden Sie unter
www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryCollapsiblePanel.css“.
Jedes Mal, wenn Sie ein Widget vom Typ „Reduzierbare Palette“ erstellen, speichert Dreamweaver die Datei
„SpryCollapsiblePanel.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte
Informationen zu verschiedenen Stilen für das jeweilige Widget.
Sie können die Regeln für diese Widgets entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Textstil für das Widget „Reduzierbare Palette“
Sie können den Textstil eines Widgets vom Typ „Reduzierbare Palette“ bearbeiten, indem Sie Eigenschaften für den
gesamten Widget-Container oder die Eigenschaften der Widget-Komponenten einzeln konfigurieren.
❖ Um das Textformat solcher Widgets zu bearbeiten, suchen Sie in folgender Tabelle die richtige CSS-Regel und
fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:
Zu ändernder Stil Dazugehörige CSS-Regel Beispiel für hinzuzufügende/zu ändernde
Eigenschaften/Werte
Text in der gesamten reduzierbaren Palette
.CollapsiblePanel
font: Arial; font-size:medium;
Nur Text im Palettenregister
.CollapsiblePanelTab
font: bold 0.7em sans-serif (dies ist der Standardwert)
Nur Text im Inhaltsfenster
.CollapsiblePanelContent
font: Arial; font-size:medium;
470
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Hintergrundfarben für das Widget „Reduzierbare Palette“ ändern
❖ Um die Hintergrundfarben verschiedener Bereiche solcher Widgets zu ändern, suchen Sie in folgender Tabelle
nach der richtigen CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben
hinzu:
Breite einer reduzierbaren Palette beschränken
Widgets vom Typ „Reduzierbare Palette“ passen sich standardmäßig dem verfügbaren Raum an. Sie können die Breite
eines solchen Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Container der
reduzierbaren Palette anpassen.
1 Suchen Sie nach der CSS-Regel „.CollapsiblePanel“ in der Datei „SpryCollapsible Panel.css“. Diese Regel definiert
die Eigenschaften für das Haupt-Containerelement des Widgets „Reduzierbare Palette“.
Sie können die Regel auch suchen, indem Sie das Widget auswählen und das Bedienfeld „CSS-Stile“ („Fenster“ >
„CSS-Stile“) anzeigen. Dazu muss sich das Bedienfeld im Modus „Aktuell“ befinden.
2 Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
Arbeiten mit Spry-Widget „Paletten mit Registerkarten“
Widget „Paletten mit Registerkarten“
Beim Widget „Paletten mit Registerkarten“ handelt es sich um einen Satz Paletten, mit denen sich Inhalte auf
kleinstem Raum speichern lassen. Der Seitenbesucher blendet die in den Paletten mit Registerkarten gespeicherten
Inhalte durch Klicken auf das Register der gewünschten Palette ein bzw. aus. Die Paletten des Widgets lassen sich
durch Klickaktionen des Besuchers entsprechend erweitern bzw. reduzieren. Beim Widget „Paletten mit
Registerkarten“ kann nur jeweils ein Inhaltsfenster auf einmal geöffnet sein. Das folgende Beispiel zeigt eine Widget
vom Typ „Paletten mit Registerkarten“, dessen dritte Palette geöffnet ist:
A: Titel B: Inhalt C: Widget „Paletten mit Registerkarten“ D: Palette mit Registerkarten
Zu ändernde Farbe Dazugehörige CSS-Regel Beispiel für hinzuzufügende/zu
ändernde Eigenschaften/Werte
Hintergrundfarbe des Palettenregisters
.CollapsiblePanelTab
background-color: #DDD (dies ist der
Standardwert)
Hintergrundfarbe des Inhaltsfensters
.CollapsiblePanelContent
background-color: #DDD;
Hintergrundfarbe des Registers bei
geöffneter Palette
.CollapsiblePanelOpen
.CollapsiblePanelTab
background-color: #EEE (dies ist der
Standardwert)
Hintergrundfarbe des geöffneten
Palettenregisters beim Zeigen mit der Maus
.CollapsiblePanelTabHover,
.CollapsiblePanelOpen
.CollapsiblePanelTabHover
background-color: #CCC (dies ist der
Standardwert)
AB
C
D
471
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Der HTML-Code für dieses Widget besteht aus einem äußeren div-Tag mit allen Paletten, einer Liste der Register,
einem
div-Tag für die Inhaltsfenster sowie einem div-Tag für jedes einzelne Inhaltsfenster. Der HTML-Code für
dieses Widget enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des
Widgets.
Eine ausführliche Erläuterung zur Funktionsweise von Widgets vom Typ „Paletten mit Registerkarten“, einschließlich
der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytabbedpanels_de.
Widgets vom Typ „Paletten mit Registerkarten“ einfügen und bearbeiten
Widget „Paletten mit Registerkarten“ einfügen
❖ Wählen Sie „Einfügen“ > „Spry“ > „Spry Paletten mit Registerkarten“.
Note: Sie können Widgets vom Typ „Paletten mit Registerkarten“ auch über die Kategorie „Spry“ im Bedienfeld
„Einfügen“ hinzufügen.
Palette zum Widget „Paletten mit Registerkarten“ hinzufügen
1 Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche zum Hinzufügen von
Paletten (+).
3 Optional: Ändern Sie den Registernamen, indem Sie ihn in der Entwurfsansicht auswählen und bearbeiten.
Bedienfeld aus dem Widget „Paletten mit Registerkarten“ löschen
1 Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
2 Wählen Sie im Bedienfeldmenü des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) den Namen der zu
löschenden Palette aus und klicken Sie auf das Minussymbol (-).
Bedienfeld zum Bearbeiten öffnen
❖ Führen Sie einen der folgenden Schritte aus:
• Deuten Sie mit dem Mauszeiger auf das Register der jeweiligen Palette, um es in der Entwurfsansicht zu öffnen.
Klicken Sie dann auf das Augensymbol, das rechts im Register angezeigt wird.
• Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus und klicken Sie dann im
Bedienfeldmenü des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) auf den Namen der zu bearbeitenden
Palette.
Reihenfolge der Bedienfelder ändern
1 Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Namen des zu verschiebenden Widgets.
3 Klicken Sie auf den Rechts- bzw. Linkspfeil, um die Palette nach oben oder unten zu verschieben.
Standardmäßig geöffnetes Bedienfeld festlegen
Sie können dasjenige Widget Paletten mit Registerkarten auswählen, das beim Öffnen der Seite in einem Browser
angezeigt wird.
1 Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
472
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Popupmenü „Standardpalette“ die Palette
aus, die standardmäßig geöffnet werden soll.
Widget „Paletten mit Registerkarten“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Regeln für Paletten-mit
Registerkarten-Widgets ändern und ihren Stil individuell anpassen.
Eine Kurzanleitung zum Ändern der Farben des Paletten-mit Registerkarten-Widgets finden Sie im Artikel von David
Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Kurzanleitung zum Ändern des
Stils von Spry-Widgets wie Paletten mit Registerkarten, Akkordeons und reduzierbare Paletten.
Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprytabbedpanels_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryTabbedPanels.css“.
Jedes Mal, wenn Sie ein Widget vom Typ „Paletten mit Registerkarten“ erstellen, speichert Dreamweaver die Datei
„SpryTabbedPanels.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte
Informationen zu verschiedenen Stilen für das jeweilige Widget.
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Textstil für das Widget „Paletten mit Registerkarten“
Sie können den Textstil eines Widgets vom Typ „Paletten mit Registerkarten“ bearbeiten, indem Sie Eigenschaften für
den gesamten Widget-Container oder die Eigenschaften der Widget-Komponenten einzeln konfigurieren.
❖ Um den Textstil eines solchen Widgets zu bearbeiten, suchen Sie in folgender Tabelle nach der richtigen CSS-Regel
und fügen Sie Ihre eigenen Eigenschaften und Werte hinzu:
Hintergrundfarben des Widgets „Paletten mit Registerkarten“ ändern
❖ Um die Hintergrundfarben verschiedener Bereiche dieses Widgets zu ändern, suchen Sie in folgender Tabelle nach
der richtigen CSS-Regel und fügen Sie Ihre eigenen Eigenschaften und Werte für die Hintergrundfarben hinzu:
Zu ändernder Text Dazugehörige CSS-Regel Beispiel für hinzuzufügende
Eigenschaften/Werte
Text im gesamten Widget
.TabbedPanels
font: Arial; font-size:medium;
Nur Text in Palettenregistern
.TabbedPanelsTabGroup or
.TabbedPanelsTab
font: Arial; font-size:medium;
Nur Text in den Inhaltsfenstern
.TabbedPanelsContentGroup or
.TabbedPanelsContent
font: Arial; font-size:medium;
473
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Breite von Paletten mit Registerkarten beschränken
Widgets vom Typ „Paletten mit Registerkarten“ passen sich standardmäßig dem verfügbaren Raum an. Sie können die
Breite eines solchen Widgets allerdings einschränken, indem Sie die entsprechende Eigenschaft im Container
anpassen.
1 Suchen Sie nach der CSS-Regel „.TabbedPanels“ in der Datei „SpryTabbedPanels.css“. Diese Regel definiert die
Eigenschaften für das Haupt-Containerelement des Widgets Paletten mit Registerkarten.
Sie können die Regel auch suchen, indem Sie das Widget auswählen und das Bedienfeld „CSS-Stile“ („Fenster“ >
„CSS-Stile“) anzeigen. Dazu muss sich das Bedienfeld im Modus „Aktuell“ befinden.
2 Fügen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
Arbeiten mit dem Spry-QuickInfo-Widget
QuickInfo-Widget
Das Spry-QuickInfo-Widget zeigt Zusatzinformationen an, wenn ein Benutzer den Mauszeiger über bestimmte
Elemente einer Webseite hält. Die Zusatzinformationen werden wieder ausgeblendet, wenn sich der Mauszeiger nicht
mehr über dem Element befindet. Sie können für QuickInfo-Einblendungen auch festlegen, dass sie länger angezeigt
werden, damit Benutzer mit QuickInfo-Inhalten interagieren können.
QuickInfo-Widgets bestehen aus den folgenden drei Komponenten:
• QuickInfo-Container. Diese Komponente enthält die Meldung oder die Inhalte, die angezeigt werden sollen, wenn
der Benutzer die QuickInfo aktiviert.
• Seitenelemente, mit denen die QuickInfo aktiviert wird.
• Konstruktor-Skript. Dabei handelt es sich um JavaScript-Code, mit dem Spry angewiesen wird, die QuickInfo-
Funktionalität zu erstellen.
Wenn Sie ein QuickInfo-Widget einfügen, wird in Dreamweaver mithilfe von
div-Tags ein QuickInfo-Container
angelegt und das Auslöserelement (das die QuickInfo aktivierende Seitenelement) in
span-Tags eingeschlossen. Diese
Tags werden in Dreamweaver standardmäßig verwendet. Als Tags für die QuickInfo und den Auslöser können jedoch
beliebige Tags verwendet werden, solange sie sich innerhalb des body-Tags der Seite befinden.
Beachten Sie beim Verwenden des QuickInfo-Widgets die folgenden Punkte:
• Eine geöffnete QuickInfo wird geschlossen, bevor die nächste QuickInfo geöffnet wird.
• Eine QuickInfo wird angezeigt, solange der Benutzer den Mauszeiger über den Auslösebereich hält.
Zu ändernde Farbe Dazugehörige CSS-Regel Beispiel für hinzuzufügende/zu ändernde
Eigenschaften/Werte
Hintergrundfarbe der Palettenregister
.TabbedPanelsTabGroup or
.TabbedPanelsTab
background-color: #DDD (dies ist der
Standardwert)
Hintergrundfarbe der Inhaltsfenster
.Tabbed PanelsContentGroup or
.TabbedPanelsContent
background-color: #EEE (dies ist der
Standardwert)
Hintergrundfarbe des ausgewählten
Registers
.TabbedPanelsTabSelected
background-color: #EEE (dies ist der
Standardwert)
Hintergrundfarbe der Palettenregister beim
Zeigen mit der Maus
.TabbedPanelsTabHover
background-color: #CCC (dies ist der
Standardwert)
474
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
• Es bestehen keine Einschränkungen hinsichtlich der Art der Tags, die als Auslöser oder für QuickInfo-Inhalte
verwendet werden können. (Es empfiehlt sich jedoch immer die Verwendung von Codeblockelementen, um
mögliche Darstellungsprobleme mit unterschiedlichen Browsern zu vermeiden.)
• Standardmäßig wird die QuickInfo je 20 Pixel rechts und unterhalb des Mauszeigers angezeigt. Über die Optionen
für den horizontalen und vertikalen Offset im Eigenschafteninspektor können Sie eine benutzerdefinierte
Einblendposition festlegen.
• Derzeit besteht keine Möglichkeit, eine QuickInfo anzuzeigen, wenn eine Seite im Browser geladen wird.
Das QuickInfo-Widget erfordert sehr wenig CSS-Code. Spry verwendet JavaScript zum Anzeigen, Ausblenden und
Positionieren der QuickInfo. Alle weiteren Formatierungen der QuickInfo können je nach Bedarf mit herkömmlichen
CSS-Techniken umgesetzt werden. Mit der einzigen Regel in der CSS-Standarddatei wird ein Problem mit Internet
Explorer 6 umgangen, damit QuickInfos über Formularelementen oder Flash-Objekten angezeigt werden.
Eine ausführliche Erläuterung zur Funktionsweise von Spry-QuickInfo-Widgets, einschließlich der vollständigen
Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytooltip_de.
Ein Video-Tutorial zur Verwendung von Spry-QuickInfo-Widgets finden Sie unter
www.adobe.com/go/lrvid4046_dw_de.
QuickInfo-Widgets einfügen
❖ Wählen Sie „Einfügen“ > „Spry“ > „Spry-QuickInfo“ aus.
Note: Sie können QuickInfo-Widgets auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Dadurch werden ein neues QuickInfo-Widget mit einem Container für den QuickInfo-Inhalt sowie ein Platzhaltersatz
als QuickInfo-Auslöser eingefügt.
Sie können zudem ein bereits auf der Seite vorhandenes Element (z. B. ein Bild) markieren und dann die QuickInfo
einfügen. In diesem Fall fungiert das markierte Element als neuer QuickInfo-Auslöser. Sie müssen ein vollständiges
Tag-Element markieren (z. B. ein
img-Tag oder ein p-Tag), damit diesem in Dreamweaver gegebenenfalls eine ID
zugewiesen werden kann, falls noch keine vorhanden ist.
Optionen für QuickInfo-Widgets bearbeiten
Sie können Optionen festlegen, um das Verhalten des QuickInfo-Widgets anzupassen.
1 Halten Sie den Mauszeiger über den QuickInfo-Inhalt auf der Seite oder setzen Sie die Einfügemarke in den Inhalt.
2 Klicken Sie auf die blaue Registerkarte des QuickInfo-Widgets, um es auszuwählen.
3 Legen Sie nach Bedarf die Optionen im Eigenschafteninspektor des QuickInfo-Widgets fest.
Spry-QuickInfo Der Name des QuickInfo-Containers. Der Container enthält den QuickInfo-Inhalt. Standardmäßig
wird in Dreamweaver ein
div-Tag als Container verwendet.
Auslöser Das Seitenelement, mit dem die QuickInfo aktiviert wird. Standardmäßig wird in Dreamweaver als Auslöser
ein Platzhaltersatz eingefügt, der in
span-Tags eingeschlossen ist. Es kann jedoch jedes Seitenelement mit einer
eindeutigen ID verwendet werden.
Dem Mauszeiger folgen Wenn dieses Kontrollkästchen aktiviert ist, folgt die QuickInfo der Bewegung des
Mauszeigers, solange dieser sich über dem Auslöserelement befindet.
Beim Herausbewegen des Mauszeigers ausblenden Wenn dieses Kontrollkästchen aktiviert ist, bleibt die QuickInfo
geöffnet, solange der Mauszeiger darauf zeigt (selbst wenn dieser das Auslöserelement verlässt). Dies ist hilfreich,
wenn sich Hyperlinks oder andere interaktive Elemente innerhalb der QuickInfo befinden. Wenn das
475
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Kontrollkästchen nicht aktiviert ist, wird das QuickInfo-Element geschlossen, sobald der Mauszeiger den
Auslösebereich verlässt.
Horizontaler Offset Legt die horizontale Position der QuickInfo relativ zum Mauszeiger fest. Der Offsetwert wird in
Pixel angegeben und der Standardwert beträgt 20 Pixel.
Vertikaler Offset Legt die vertikale Position der QuickInfo relativ zum Mauszeiger fest. Der Offsetwert wird in Pixel
angegeben und der Standardwert beträgt 20 Pixel.
Einblendverzögerung Die Verzögerungsdauer in Millisekunden, bevor die QuickInfo nach dem Auslösen angezeigt
wird. Der Standardwert ist 0.
Ausblendverzögerung Die Verzögerungsdauer in Millisekunden, bevor die QuickInfo nach dem Verlassen des
Auslöserelements ausgeblendet wird. Der Standardwert ist 0.
Effekt Der Effekttyp, der beim Einblenden der QuickInfo verwendet werden soll. „Jalousie“ simuliert eine sich
öffnende oder schließende Fensterjalousie, die das Element anzeigt oder verbirgt. Mit „Ausblenden“ wird die
QuickInfo allmählich ein- oder ausgeblendet. Der Standardwert ist „Kein“.
Arbeiten mit dem Spry-Widget „Überprüfung -
Optionsschaltergruppe“
Widget „Überprüfung - Optionsschaltergruppe“
Das Widget Überprüfung - Optionsschaltergruppe ist eine Gruppe von Optionsschaltflächen mit
Überprüfungsunterstützung bei der Auswahl. Das Widget erzwingt die Auswahl eines der Optionsschalter der
Gruppe.
Im folgenden Beispiel ist ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ mit verschiedenen
Zustandswerten dargestellt.
A: Fehlermeldungen des Widgets „Überprüfung - Optionsschaltergruppe“ B: Widgetgruppe „Überprüfung - Optionsschaltergruppe“
Das Widget „Überprüfung - Optionsschaltergruppe“ hat neben dem Anfangszustand drei weitere mögliche Zustände:
„Gültig“, „Ungültig“ und „Erforderlich“. Sie können die Eigenschaften für diese Zustandswerte ändern, indem Sie je
nach gewünschtem Überprüfungsergebnis die entsprechende CSS-Datei („SpryValidationRadio.css“) bearbeiten. Mit
einem Widget vom Typ „Überprüfung - Optionsschaltergruppe“ können Eingabedaten zu unterschiedlichen
Zeitpunkten überprüft werden, z. B. wenn der Benutzer auf eine Stelle außerhalb des Widgets klickt, Optionen
auswählt oder das Formular sendet.
Anfangszustand Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Zustand „Gültig“ Der Benutzer trifft eine Auswahl. Das Formular kann danach gesendet werden.
B
A
Wählen Sie einen gültigen Wert aus.
Nehmen Sie eine Auswahl vor.
476
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Erforderlich-Zustand Der Benutzer hat eine erforderliche Option nicht aktiviert.
Zustand „Ungültig“ Der Benutzer hat eine Optionsschaltfläche ausgewählt, deren Wert nicht zulässig ist.
Wenn ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ durch eine Benutzeraktion in einen dieser
Zustände wechselt, wendet die Programmlogik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den
HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular sendet, jedoch keine Optionen
aktiviert hat, wendet Spry eine Klasse auf das Widget an, durch die die Fehlermeldung „Nehmen Sie eine Auswahl vor“
angezeigt wird. Die Regeln für Stil und Anzeigezustände von Fehlermeldungen sind in der Datei
„SpryValidationRadio.css“ abgelegt, die dem Widget zugeordnet ist.
Der HTML-Standardcode für das normalerweise in einem Formular verwendete Widget „Überprüfung -
Optionsschaltergruppe“ besteht aus einem
span-Container-Tag, das das input type="radio"-Tag der
Optionsschaltergruppe umgibt. Der HTML-Code für das Widget „Überprüfung - Optionsschaltergruppe“ enthält
außerdem
script-Tags im Kopf des Dokuments und nach dem HTML-Code des Widgets.
Eine ausführlichere Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Optionsschaltergruppe“
(einschließlich der vollständigen Code-Struktur) finden Sie unter www.adobe.com/go/learn_dw_spryradio_de.
Widget „Überprüfung - Optionsschaltergruppe“ einfügen und bearbeiten
Widget „Überprüfung - Optionsschaltergruppe“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Optionsschaltergruppe“ aus.
2 Geben Sie im Feld „Spry-Optionsschaltergruppe“ einen Namen für die Optionsschaltergruppe ein.
3 Fügen Sie der Gruppe Optionsschaltflächen hinzu oder entfernen Sie Optionsschaltflächen, indem Sie auf die
Schaltfläche „+“ oder „-“ klicken.
4 Klicken Sie in der Spalte „Beschriftung“ auf den Namen jeder Optionsschaltfläche, um den jeweiligen Namen
bearbeiten zu können, und weisen Sie jeder Optionsschaltfläche einen eindeutigen Namen zu.
5 Klicken Sie in der Spalte „Wert“ auf den jeweiligen Wert, um diesen bearbeiten zu können, und weisen Sie jeder
Optionsschaltfläche einen eindeutigen Wert zu.
6 (Optional) Klicken Sie auf eine Optionsschaltfläche oder den entsprechenden Wert, um eine bestimmte Zeile
auszuwählen, und dann auf den Pfeil nach oben oder unten, um die Optionsschaltfläche jeweils eine Zeile nach
oben bzw. nach unten zu verschieben.
7 Wählen Sie einen Layouttyp für die Optionsschaltergruppe aus.
Zeilenumbrüche Platziert jede Optionsschaltfläche mithilfe von Zeilenumbrüchen (br-Tags) auf einer separaten
Zeile.
Tabelle Platziert jede Optionsschaltfläche mithilfe von Tabellenzeilen (tr-Tags) auf einer separaten Zeile.
8 Klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ auch über die Kategorie „Spry“ im Bedienfeld
„Einfügen“ hinzufügen.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf
die entsprechende blaue Registerkarte klicken.
477
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb der Optionsschaltergruppe klickt.
Ändern Überprüfung erfolgt bei der Benutzerauswahl.
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf
die entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wählen Sie beispielsweise „Anfänglich“, um das Widget in seinem
Ursprungszustand anzuzeigen.
Zustand „Erforderlich“ von Optionsschaltflächen ändern
Bei Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ muss der Benutzer standardmäßig eine Auswahl
treffen, bevor das Formular gesendet werden kann. Sie können die Auswahl jedoch auch als optional konfigurieren.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf
die entsprechende blaue Registerkarte klicken.
2 Deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) das Kontrollkästchen „Erforderlich“.
Leeren oder ungültigen Wert festlegen
Sie können einen Wert angeben, der als leer oder ungültig erkannt wird, wenn der Benutzer eine mit diesem Wert
verknüpfte Optionsschaltfläche auswählt. Wenn der Benutzer eine Optionsschaltfläche mit einem leeren Wert
auswählt, gibt der Browser die Fehlermeldung „Nehmen Sie eine Auswahl vor“ aus. Wenn der Benutzer eine
Optionsschaltfläche mit einem ungültigen Wert auswählt, gibt der Browser folgende Fehlermeldung aus: „Wählen Sie
einen gültigen Wert aus“.
Widget „Überprüfung - Optionsschaltergruppe“ mit Optionsschaltfläche für leeren Wert
1 Wählen Sie im Widget „Überprüfung - Optionsschaltergruppe“ die Optionsschaltfläche aus, die für leere oder
ungültige Werte verwendet werden soll. Wenn Sie für das Widget leere oder ungültige Werte angeben, müssen
zugehörige Optionsschaltflächen vorhanden sein, denen diese Werte zugeordnet sind.
2 Weisen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) der Optionsschaltfläche den Status
„Aktiviert“ zu. Geben Sie zum Erstellen einer Optionsschaltfläche mit einem leeren Wert im Textfeld „Aktivierter
Wert“ die Zeichenfolge Kein ein. Geben Sie zum Erstellen einer Optionsschaltfläche mit einem ungültigen Wert
im Textfeld „Aktivierter Wert“ die Zeichenfolge Ungültig ein.
3 Wählen Sie das gesamte Widget „Überprüfung - Optionsschaltergruppe“ aus, indem Sie auf die blaue Registerkarte
des Widgets klicken.
Nehmen Sie eine Auswahl vor.
478
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
4 Legen Sie im Eigenschafteninspektor Werte für „Leerer Wert“ und „Ungültiger Wert“ fest. Geben Sie zum Erstellen
eines Widgets, das für leere Werte die Fehlermeldung „Nehmen Sie eine Auswahl vor“ anzeigt, im Textfeld „Leerer
Wert“ die Zeichenfolge Kein ein. Geben Sie zum Erstellen eines Widgets, das für ungültige Werte die
Fehlermeldung „Wählen Sie einen gültigen Wert aus“ anzeigt, im Textfeld „Ungültiger Wert“ die Zeichenfolge
Ungültig ein.
Beachten Sie, dass sowohl für die entsprechende Optionsschaltfläche als auch für das Widget „Überprüfung -
Optionsschaltergruppe“ die leeren und ungültigen Werte zugewiesen sein müssen, damit die Fehlermeldungen
ordnungsgemäß angezeigt werden.
Widget „Überprüfung - Optionsschaltergruppe“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem Widget vom Typ „Überprüfung -
Optionsschaltergruppe“ vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den
CSS-Code für das Widget „Überprüfung - Optionsschaltergruppe“ ändern, um den gewünschten Stil zu erhalten. Eine
erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryradio_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationRadio.css“.
Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Optionsschaltergruppe“ erstellen, speichert Dreamweaver
die Datei „SpryValidationRadio.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche
kommentierte Informationen zu verschiedenen Stilen für das Widget.
Sie können die CSS-Regeln für das Widget „Überprüfung - Optionsschaltergruppe“ entweder schnell und einfach in
der zugehörigen CSS-Datei oder im Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei
Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets
zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Stil für Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ zuweisen (allgemeine
Anweisungen)
1 Öffnen Sie die Datei „SpryValidationRadio.css“.
2 Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die
Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Optionsschaltergruppe“ ändern
möchten, bearbeiten Sie die Regel
radioRequiredState in der Datei „SpryValidationRadio.css“.
3 Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei „SpryValidationRadio.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck bestimmter
Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
Textstil von Fehlermeldungen für das Widget „Überprüfung - Optionsschaltergruppe“
zuweisen
Fehlermeldungen für das Widget „Überprüfung - Optionsschaltergruppe“ werden standardmäßig mit einem 1 Pixel
breiten roten durchgehenden Rahmen um den Text angezeigt.
❖ Um den Textstil für Fehlermeldungen eines Widgets vom Typ „Überprüfung - Optionsschaltergruppe“ zu
bearbeiten, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die
Standardeigenschaften oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu.
479
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Arbeiten mit dem Spry-Widget „Überprüfung -
Textfeld“
Widget „Überprüfung - Textfeld“
Mit einem Spry-Widget vom Typ „Überprüfung - Textfeld“ werden Gültig- bzw. Ungültig-Zustände bei der Eingabe
von Text durch den Site-Besucher angezeigt. So können Sie beispielsweise ein solches Widget zu einem Formular
hinzufügen, in dem die Besucher ihre E-Mail-Adressen eingeben müssen. Wenn dabei das @-Symbol und ein Punkt
der Adresse nicht angegeben wird, gibt das Widget eine Meldung über eine ungültige Benutzereingabe aus.
Das folgende Beispiel zeigt das Widget „Überprüfung - Textfeld“ in verschiedenen Zuständen:
A: Textfeld-Widget mit aktivierter Eingabehilfe B: Textfeld-Widget, gültiger Zustand C: Textfeld-Widget, ungültiger Zustand D: Textfeld-
Widget, erforderlicher Zustand
Das Widget „Überprüfung - Textfeld“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie
können die Eigenschaften für diese Zustände, je nach dem gewünschten Überprüfungsergebnis, mit dem
Eigenschafteninspektor anpassen. Mit einem Widget Überprüfung - Textfeld lassen sich unterschiedliche Aspekte
überprüfen, z. B. wenn der Besucher außerhalb des Widgets klickt, bei der Eingabe von Text oder beim Abschicken
des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurücksetzt.
Zustand „Fokus“ Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.
Zustand „Gültig“ Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular
abgeschickt werden kann.
Zustand „Ungültig“ Der Widget-Zustand, in dem der Besucher Text in einem ungültigen Format eingegeben hat.
(Zum Beispiel die Jahresangabe 06 anstatt 2006).
Erforderlich-Zustand
Der Widget-Zustand, in dem der Besucher nicht den erforderlichen Text in ein Feld eingegeben hat.
Zustand „Zeichen min.“ Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl in ein
Textfeld eingegeben hat.
Text für Stilerstellung Dazugehörige CSS-Regel Zu ändernde dazugehörige Regeln
Text der Fehlermeldung
.radioRequiredState
.radioRequiredMsg,
.radioInvalidState
.radioInvalidMsg
color: #CC3333; border: 1px solid #CC3333;
A
B
C
D
Es muss ein Wert angegeben werden
Ungültiges Format
480
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Zeichen max.-Zustand Der Widget-Zustand, in dem der Besucher mehr Zeichen als die Höchstanzahl in ein Textfeld
eingegeben hat.
Mindestwert-Zustand Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die unter dem
Mindestwert des Textfelds liegt. (gilt für Überprüfungen von Ganzzahlen, reellen Zahlen und Daten)
Höchstwert-Zustand Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die über dem Höchstwert
des Textfelds liegt. (gilt für Überprüfungen von Ganzzahlen, reellen Zahlen und Daten)
Wenn ein Widget „Überprüfung - Textfeld“ durch eine Benutzeraktion in einen dieser Zustände versetzt wird, wendet
die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an.
Wenn der Benutzer beispielsweise ein Formular abschickt, aber nicht alle Pflichtfelder ausgefüllt hat, wendet Spry eine
Klasse auf das Widget an, die zur Anzeige der Meldung „Es muss ein Wert angegeben werden“ führt. Die Regeln für
Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier „SpryValidationTextField.css“,
enthalten.
Das Standard-HTML für das Widget „Überprüfung - Textfeld“, normalerweise in einem Formular, enthält ein
<span>-Container-Tag, das das <input>-Tag des Textfelds umgibt. Das HTML für das Widget „Überprüfung -
Textfeld“ enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung zur Funktionsweise von Widgets vom Typ „Überprüfung - Textfeld“, einschließlich der
vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextfield_de.
Widget „Überprüfung - Textfeld“ einfügen und bearbeiten
Widget „Überprüfung - Textfeld“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Textfeld“.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Textfeld“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“
hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Typ und Format für Überprüfung festlegen
Für das Widget „Überprüfung - Textfeld“ können Sie verschiedene Überprüfungstypen festlegen. So können Sie
beispielsweise eine Überprüfung für Kreditkarten einfügen, wenn das Textfeld die Eingabe einer Kreditkartennummer
erfordert.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2
Wählen Sie im Menü „Typ“ des Eigenschafteninspektors („Fenster“ > „Eigenschaften“) einen Überprüfungstyp aus.
3 Wählen Sie ggf. eine Formatierungsoption aus dem Popupmenü „Format“.
Bei den meisten Überprüfungstypen wird für das Textfeld die Standard-Formatoption eingestellt. Wenn Sie
beispielsweise den Überprüfungstyp „Ganzzahl“ auf ein Textfeld anwenden, erfolgt die Überprüfung erst bei der
Eingabe von Zahlen. Bei manchen Überprüfungstypen können Sie allerdings ein Format für das Textfeld wählen. In
der folgenden Tabelle sind die über den Eigenschafteninspektor verfügbare Überprüfungstypen und Formate
aufgelistet:
481
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.
Ändern Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Überprüfungstyp Format
Keine. Kein bestimmtes Format erforderlich.
Ganzzahl Das Textfeld akzeptiert nur Zahlen.
E-Mail-Adresse Das Textfeld akzeptiert E-Mail-Adressen mit dem @-Symbol und einem Punkt (.), dem mindestens
ein Buchstabe vorausgehen bzw. folgen muss.
Datum Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des
Eigenschafteninspektors.
Uhrzeit Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des
Eigenschafteninspektors. („tt“ steht für das 12- und „t“ für das 24-Std.-Format)
Kreditkarte Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des
Eigenschafteninspektors. Sie können entweder alle Kreditkarten zulassen oder eine bestimmte Art
von Kreditkarten (MasterCard, Visa usw.) vorschreiben. Das Textfeld erlaubt bei
Kreditkartennummern keine Leerschritte (z. B. 4321 3456 4567 4567).
PLZ Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des
Eigenschafteninspektors.
Telefonnummer Es können Telefonnummern im Format (000) 000-0000 (USA und Kanada) oder in
benutzerdefinierten Formaten eingegeben werden. Wenn Sie die Option „Benutzerdefiniertes
Muster“ auswählen, geben Sie im Textfeld „Muster“ ein Format ein, z. B. 000.00(00).
US-Sozialversicherungsnummer Im Textfeld können Sozialversicherungsnummern im Format 000-00-0000 eingegeben werden.
Wenn Sie ein anderes Format verwenden möchten, wählen Sie den Überprüfungstyp
„Benutzerdefiniert“ aus und geben Sie das gewünschte Format ein. Bei der Überprüfung des
Formatmusters werden nur ASCII-Zeichen unterstützt.
Währung Es werden Währungen im Format 1,000,000.00 oder 1.000.000,00 akzeptiert.
Reelle Zahl/Exponentialschreibweise Zur Überprüfung verschiedener Zahlentypen: Ganzzahlen (z. B. 1); Fließwerte (z. B. 12.123) und
Fließwerte aus der Exponentialschreibweise (z. B. 1.212e+12, 1.221e-12 wobei e als 10er-Potenz
verwendet wird).
IP-Adresse Die Formate können variieren. Treffen Sie ein Auswahl aus dem Menü „Format“ des
Eigenschafteninspektors.
URL Es werden URLs im Format http://xxx.xxx.xxx oder ftp://xxx.xxx.xxx akzeptiert.
Benutzerdefiniert ermöglicht die Angabe eines benutzerdefinierten Überprüfungstyps und -formats. Geben Sie im
Eigenschafteninspektor das Formatmuster (ggf. mit Eingabehinweis) ein. Bei der Überprüfung des
Formatmusters werden nur ASCII-Zeichen unterstützt.
482
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Minimale und maximale Zeichenanzahl festlegen
Diese Option ist lediglich für die Überprüfungstypen „Keine“, „Ganzzahl“, „E-Mail-Adresse“ und „URL“ verfügbar.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Zeichen min.“ bzw.
„Zeichen max.“ ein. Wenn Sie beispielsweise unter „Zeichen min.“ eine 3 eingeben, erfolgt nur dann eine
Überprüfung, wenn der Benutzer drei oder mehr Zeichen eingibt.
Minimal- und Maximalwerte festlegen
Diese Option ist lediglich für die Überprüfungstypen „Ganzzahl“, „Uhrzeit“, „Währung“ und „Reelle
Zahl/Exponentialschreibweise“ verfügbar.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Mindestwert“ bzw.
„Höchstwert“ ein. Wenn Sie beispielsweise im Feld „Mindestwert“ eine 3 eingeben, erfolgt nur dann eine
Überprüfung, wenn der Benutzer die Zahl 3 oder einen höheren Wert (4, 5, 6 usw.) eingibt.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen
möchten, wählen Sie die Option „Gültig“.
Erforderlichen Status eines Textfelds ändern
Alle Widgets vom Typ „Überprüfung - Textfeld“, die Sie mit Dreamweaver eingeben, erfordern bei der
Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können das Ausfüllen von Textfeldern allerdings auch
als optional konfigurieren.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das
Kontrollkästchen „Erforderlich“.
Tipps für Textfelder erstellen
Da es sehr viele Formattypen für Textfelder gibt, sollte man dem Benutzer vielleicht einen Tipp geben, welches Format
er eingeben muss. So können in ein Textfeld mit dem Überprüfungstyp „Telefonnummer“ beispielsweise nur
Telefonnummern im Format (000) 000-0000 eingegeben werden. Sie können dieses Zahlenbeispiel als Tipp eingeben,
damit das Textfeld beim Laden der Seite in den Browser das korrekte Format anzeigt.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Textfeld „Tipp“ einen Tipp ein.
Ungültige Zeichen sperren
Sie können verhindern, dass Benutzer ungültige Zeichen in ein Widget vom Typ „Überprüfung - Textfeld“ eingeben.
Wenn Sie diese Option beispielsweise für ein Widget mit dem Überprüfungstyp „Ganzzahl“ auswählen, können nur
ganze Zahlen eingegeben werden.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textfeld“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Muster erzwingen“ aus.
483
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Widget „Überprüfung - Textfeld“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an einem solchen Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können die CSS-Datei für das Widget ändern,
um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter
www.adobe.com/go/learn_dw_sprytextfield_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei
„SpryValidationTextField.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Textfeld“ erstellen, speichert
Dreamweaver die Datei „SpryValidationTextField.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält
außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Fehlermeldungs-Textstil für das Widget „Überprüfung - Textfeld“
Fehlermeldungen für das Widget „Überprüfung - Textfeld“ werden in Rot mit einem 1 Pixel breiten Rahmen um den
Text angezeigt.
❖ Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die
entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte
Eigenschaften und Werte für den Textstil hinzu:
Hintergrundfarben des Widgets „Überprüfung - Textfeld“ ändern
❖ Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Textfeld“ zu ändern, suchen Sie in folgender
Tabelle die richtige CSS-Datei und ändern Sie die Standardwerte:
Zu ändernder Text Dazugehörige CSS-Regel Zu ändernde dazugehörige
Regeln
Text der Fehlermeldung
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState
.textfieldInvalidFormatMsg, .textfieldMinValueState
.textfieldMinValueMsg, .textfieldMaxValueState
.textfieldMaxValueMsg, .textfieldMinCharsState
.textfieldMinCharsMsg, .textfieldMaxCharsState
.textfieldMaxCharsMsg
color: #CC3333; border: 1px solid
#CC3333;
484
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Arbeiten mit dem Spry-Widget „Überprüfung -
Textbereich“
Widget „Überprüfung - Textbereich“
Mit dem Spry-Widget vom Typ „Überprüfung - Textbereich“ werden gültige bzw. ungültige Zustände bei der Eingabe
von Sätzen durch den Site-Besucher angezeigt. Wenn der Textbereich als erforderliches Feld definiert wurde und der
Benutzer keinen Text eingibt, zeigt das Widget eine Meldung mit der Aufforderung zur Texteingabe an.
Das folgende Beispiel zeigt das Widget „Überprüfung - Textbereich“ in verschiedenen Zuständen:
A: Zähler für die restlichen Zeichen B: Textbereich-Widget im Fokus, Zeichen max.-Zustand C: Textbereich-Widget im Fokus, gültiger
Zustand D: Textbereich-Widget, erforderlicher Zustand E: Zähler für die eingegebenen Zeichen
Zu ändernde Farbe Dazugehörige CSS-Regel Zu ändernde dazugehörige
Eigenschaft
Hintergrundfarbe des Widgets
im Gültig-Zustand
.textfieldValidState input,
input.textfieldValidState
background-color: #B8F5B1;
Hintergrundfarbe des Widgets
im Ungültig-Zustand
input.textfieldRequiredState,
.textfieldRequiredState input,
input.textfieldInvalidFormatState,
.textfieldInvalidFormatState input,
input.textfieldMinValueState,
.textfieldMinValueState input,
input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState,
.textfieldMinCharsState input,
input.textfieldMaxCharsState,
.textfieldMaxCharsState input
background-color: #FF9F9F;
Hintergrundfarbe des Widgets
im Fokus
.textfieldFocusState input,
input.textfieldFocusState
background-color: #FFFFCC;
A
E
B
C
D
Die maximal zulässige Zeichenanzahl wurde überschritten
Es muss ein Wert angegeben werden
485
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Das Widget „Überprüfung - Textbereich“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie
können die Eigenschaften für diese Zustände, je nach gewünschtem Überprüfungstyp, mit dem
Eigenschafteninspektor anpassen. Mit diesem Widget lassen sich unterschiedliche Aspekte überprüfen, z. B. wenn der
Besucher außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurücksetzt.
Zustand „Fokus“ Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.
Zustand „Gültig“ Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular
abgeschickt werden kann.
Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher keinen Text eingegeben hat.
Zustand „Zeichen min.“ Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl im
Textbereich eingegeben hat.
Zeichen max.-Zustand Der Widget-Zustand, in dem der Benutzer im Textbereich mehr Zeichen als die Höchstanzahl
zulässiger Zeichen eingegeben hat.
Wenn ein Widget „Überprüfung - Textbereich“ durch eine Benutzeraktion in einen dieser Zustände versetzt wird,
wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des
Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keinen Text im Textbereich eingegeben
hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Es muss ein Wert angegeben werden“
führt. Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier
„SpryValidationTextArea.css“, enthalten.
Das Standard-HTML für das Widget „Überprüfung - Textbereich“, normalerweise in einem Formular, enthält ein
<span>-Container-Tag, das das <textarea>-Tag des Textbereichs umgibt. Das HTML für das Widget enthält
außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Textbereich“, einschließlich
der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextarea_de.
Widget „Überprüfung - Textbereich“ einfügen und bearbeiten
Widget „Überprüfung - Textbereich“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Textbereich“.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Textbereich“ auch über die Kategorie „Spry“ im Bedienfeld
„Einfügen“ hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
486
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) unter „Überprüfen bei“ die Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.
Ändern Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Minimale und maximale Zeichenanzahl festlegen
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) eine Zahl ins Feld „Zeichen min.“ bzw.
„Zeichen max.“ ein. Wenn Sie beispielsweise im Feld „Zeichen min.“ 20 eingeben, erfolgt nur dann eine
Überprüfung, wenn der Benutzer 20 oder mehr Zeichen im Textbereich eingibt.
Zeichenzähler hinzufügen
Sie können einen Zeichenzähler hinzufügen, damit der Benutzer weiß, wie viele Zeichen er bereits eingegeben hat bzw.
wie viele er noch eingeben muss. Ein solcher Zähler wird standardmäßig neben der rechten unteren Ecke des Widgets
angezeigt.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Zeichenanzahl“ oder
„Verbleibende Zeichen“ aus.
Note: Die Option „Verbleibende Zeichen“ ist nur verfügbar, wenn Sie bereits eine maximale Anzahl Zeichen festgelegt
haben.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen
möchten, wählen Sie die Option „Gültig“.
Erforderlichen Status eines Textbereichs ändern
Alle Widgets vom Typ „Überprüfung - Textbereich“, die Sie mit Dreamweaver eingeben, erfordern bei der
Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können die Überprüfung von Textbereichen allerdings
auch als optional konfigurieren
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das
Kontrollkästchen „Erforderlich“.
Tipps für Textbereiche erstellen
Sie können einen Tipp zum Textbereich hinzufügen (zum Beispiel: „Beschreibung hier eingaben“), damit der Benutzer
weiß, welche Informationen er eingeben muss. Der Tipp wird dann beim Laden der Seite in einen Browser im
Textbereich angezeigt.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Textfeld „Tipp“ einen Tipp ein.
487
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Zusätzliche Zeichen blockieren
Sie können verhindern, dass Benutzer mehr als die maximale erlaubte Anzahl an Zeichen in ein Widget vom Typ
„Überprüfung - Textbereich“ eingeben. Wenn Sie diese Option beispielsweise für ein Widget mit einer maximalen
Zeichenanzahl von 20 auswählen, kann der Benutzer auch nur so viele Zeichen in den Textbereich eingeben.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Textbereich“ im Dokumentfenster aus.
2
Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Zusätzliche Zeichen blockieren“ aus.
Widget „Überprüfung - Textbereich“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Datei für das
Widget ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit Stilaufgaben finden Sie unter
www.adobe.com/go/learn_dw_sprytextarea_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei
„SpryValidationTextArea.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Textbereich“ erstellen,
speichert Dreamweaver die Datei „SpryValidationTextArea.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei
enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Fehlermeldungs-Textstil für das Widget „Überprüfung - Textbereich“
Fehlermeldungen für das Widget „Überprüfung - Textbereich“ werden in Rot mit einem 1 Pixel breiten Rahmen um
den Text angezeigt.
❖ Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die
entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte
Eigenschaften und Werte für den Textstil hinzu:
Hintergrundfarben des Widgets „Überprüfung - Textbereich“ ändern
❖ Um die Hintergrundfarben eines solchen Widgets zu ändern, suchen Sie in folgender Tabelle nach der richtigen
CSS-Datei und ändern Sie die Standardwerte:
Zu ändernder Text Dazugehörige CSS-Regel Zu ändernde dazugehörige Regeln
Text der Fehlermeldung
.textareaRequiredState
.textareaRequiredMsg,
.textareaMinCharsState
.textareaMinCharsMsg,
.textareaMaxCharsState
.textareaMaxCharsMsg
color: #CC3333; border: 1px solid #CC3333;
488
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Arbeiten mit dem Spry-Widget „Überprüfung -
Auswahl“
Widget „Überprüfung - Auswahl“
Ein Widget vom Typ „Überprüfung - Auswahl“ ist ein Dropdown-Menü, mit dem nach einer Benutzeraktion gültige
bzw. ungültige Zustände angezeigt werden. So können Sie beispielsweise in ein solches Widget eine Liste von
Zuständen einfügen, die in verschiedene Bereiche gruppiert und durch horizontale Linien getrennt sind. Wenn der
Benutzer unabsichtlich anstatt eines Zustands eine Trennlinie auswählt, zeigt das Widget eine Meldung über die
ungültige Auswahl an.
Das folgende Beispiel zeigt ein erweitertes bzw. reduziertes Widget vom Typ „Überprüfung - Auswahl“ in
verschiedenen Zuständen an:
A: Widget „Überprüfung – Auswahl“ B: Auswahlwidget, gültiger Zustand C: Auswahlwidget, erforderlicher Zustand D: Auswahlwidget,
ungültiger Zustand
Das Widget „Überprüfung - Auswahl“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich usw.). Sie
können die Eigenschaften für diese Zustände, je nach gewünschtem Überprüfungstyp, mit dem
Eigenschafteninspektor anpassen. Mit einem Widget vom Typ „Überprüfung - Auswahl“ können verschiedene
Aspekte überprüft werden, z. B. ob der Benutzer auf eine Stelle außerhalb des Widgets klickt, Optionen auswählt oder
das Formular sendet.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurücksetzt.
Zustand „Fokus“ Der Widget-Zustand, in dem der Benutzer das Widget angeklickt hat.
Zu ändernde Hintergrundfarbe Dazugehörige CSS-Regel Zu ändernde dazugehörige
Eigenschaft
Hintergrundfarbe des Widgets im Gültig-Zustand
.textareaValidState textarea,
textarea.textareaValidState
background-color: #B8F5B1;
Hintergrundfarbe des Widgets im Ungültig-
Zustand
textarea.textareaRequiredState,
.textareaRequiredState textarea,
textarea.textareaMinCharsState,
.textareaMinCharsState textarea,
textarea.textareaMaxCharsState,
.textareaMaxCharsState textarea
background-color: #FF9F9F;
Hintergrundfarbe des Widgets im Fokus
.textareaFocusState textarea,
textarea.textareaFocusState
background-color: #FFFFCC;
A
B
C
D
Wählen Sie ein Element aus
Wählen Sie einen gültigen Staat aus
489
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Zustand „Gültig“ Der Widget-Zustand, in dem der Besucher ein gültiges Element ausgewählt hat und das Formular
abgeschickt werden kann.
Zustand „Ungültig“ Der Widget-Zustand, in dem der Besucher ein ungültiges Element ausgewählt hat.
Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher kein gültiges Element ausgewählt hat.
Wenn ein Widget vom Typ „Überprüfung - Anzeige“ durch eine Benutzeraktion in einen dieser Zustände versetzt
wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des
Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber kein Element aus dem Menü gewählt hat,
wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Wählen Sie ein Element aus“ führt. Die
Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier
„SpryValidationSelect.css“, enthalten.
Das Standard-HTML für das Widget „Überprüfung - Auswahl“, normalerweise in einem Formular, enthält ein
<span>-Container-Tag, das das <select>-Tag des Textbereichs umgibt. Das HTML für das Widget „Überprüfung -
Auswahl“ enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Auswahl“, einschließlich der
vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_spryselect_de.
Widget „Überprüfung - Auswahl“ einfügen und bearbeiten
Widget „Überprüfung - Auswahl“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Auswahl“.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
3 Fügen Sie in der Codeansicht Options-Tags mit Menüelementen und -werten hinzu. Dreamweaver führt diese
Aktion nicht automatisch durch. Weitere Informationen finden Sie im vorausgegangenen Thema.
Note: Sie können Widgets vom Typ „Überprüfung - Auswahl“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“
hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Widgets klickt.
Ändern Überprüfung erfolgt bei der Benutzerauswahl.
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
490
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen
möchten, wählen Sie die Option „Gültig“.
Leere Werte verbieten oder zulassen
Für alle mit Dreamweaver eingefügten Widgets vom Typ „Überprüfung - Auswahl“ gilt, dass der Benutzer
Menüelemente auswählen muss, die bei der Veröffentlichung des Widgets einen zugeordneten Wert aufweisen. Sie
können diese Option allerdings auch deaktivieren.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz im
Bereich „Nicht zulassen“ die Option „Leerer Wert“.
Ungültigen Wert festlegen
Sie können einen Wert angeben, der als ungültig ausgegeben wird, wenn der Benutzer ein damit verknüpftes
Menüelement auswählt. Wenn Sie also beispielsweise -1 als ungültigen Wert definieren und diesen Wert einem
Options-Tag zuweisen, dann gibt das Widget eine Fehlermeldung zurück, sobald ein Benutzer dieses Menüelement
auswählt.
<option value="-1"> ------------------- </option>
1 Wählen Sie ein Widget vom Typ „Überprüfung - Auswahl“ im Dokumentfenster aus.
2 Geben Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) im Feld „Ungültiger Wert“ einen ungültigen
Wert ein.
Widget „Überprüfung - Auswahl“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an diesem Widget vornehmen,
benutzerdefinierte Stilaufgaben werden allerdings nicht unterstützt. Sie können allerdings die CSS-Datei für das
Widget ändern, um den gewünschten Stil zu erhalten.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei „SpryValidationSelect.css“.
Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Auswahl“ erstellen, speichert Dreamweaver die Datei
„SpryValidationSelect.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche kommentierte
Informationen zu verschiedenen Stilen für das Widget.
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Fehlermeldungs-Textstil für das Widget „Überprüfung - Auswahl“
Fehlermeldungen für das Widget „Überprüfung - Auswahl“ werden in Rot mit einem 1 Pixel breiten Rahmen um den
Text angezeigt.
❖ Um den Textstil für Fehlermeldungen des Widgets zu ändern, suchen Sie in der folgenden Tabelle die
entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie benutzerdefinierte
Eigenschaften und Werte für den Textstil hinzu:
491
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Hintergrundfarben des Widgets „Überprüfung - Auswahl“ ändern
❖ Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Auswahl“ zu ändern, suchen Sie in folgender
Tabelle die richtige CSS-Datei und ändern Sie die Standardwerte:
Arbeiten mit dem Spry-Widget „Überprüfung -
Kontrollkästchen“
Widget „Überprüfung - Kontrollkästchen“
Beim Widget vom Typ „Überprüfung - Kontrollkästchen“ handelt es sich um ein einzelnes bzw. eine Gruppe von
Kontrollkästchen in einem HTML-Formular, mit dem/denen bei Auswahl/Nichtauswahl eines Kontrollkästchen
gültige bzw. ungültige Zustände angezeigt werden. So können Sie beispielsweise ein solches Widget zu einem
Formular hinzufügen, in dem der Benutzer drei Optionen auswählen muss. Werden nicht alle Optionen ausgewählt,
gibt das Widget eine entsprechende Fehlermeldung zurück.
Das folgende Beispiel zeigt das Widget „Überprüfung - Kontrollkästchen“ in verschiedenen Zuständen:
A: Widgetgruppe „Überprüfung - Kontrollkästchen“, Auswahl min.-Zustand B: Widget „Überprüfung - Kontrollkästchen“, erforderlicher
Zustand
Text für Stilerstellung Dazugehörige CSS-Regel Zu ändernde dazugehörige Regeln
Text der Fehlermeldung
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg
color: #CC3333; border: 1px solid #CC3333;
Zu ändernde Hintergrundfarbe Dazugehörige CSS-Regel Zu ändernde dazugehörige
Eigenschaft
Hintergrundfarbe des Widgets im Gültig-
Zustand
.selectValidState select,
select.selectValidState
background-color: #B8F5B1;
Hintergrundfarbe des Widgets im Ungültig-
Zustand
select.selectRequiredState,
.selectRequiredState select,
select.selectInvalidState,
.selectInvalidState select
background-color: #FF9F9F;
Hintergrundfarbe des Widgets im Fokus
.selectFocusState select,
select.selectFocusState
background-color: #FFFFCC;
A
B
Die Auswahl ist zu klein
Nehmen Sie eine Auswahl vor
492
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Das Widget „Überprüfung - Kontrollkästchen“ beinhaltet mehrere Zustände (z. B. Gültig, Ungültig, Erforderlich
usw.). Sie können die Eigenschaften für diese Zustände, je nach gewünschtem Überprüfungstyp, mit dem
Eigenschafteninspektor anpassen. Mit einem Widget Überprüfung - Kontrollkästchen lassen sich unterschiedliche
Aspekte überprüfen, z. B. wenn der Besucher außerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken
des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurücksetzt.
Zustand „Gültig“ Der Widget-Zustand, in dem der Besucher eine oder mehrere Optionen korrekt ausgewählt hat und
das Formular abgeschickt werden kann.
Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher keine gültige Option ausgewählt hat.
Auswahl min.-Zustand Der Widget-Zustand, in dem der Benutzer weniger als die erforderliche Anzahl
Kontrollkästchen ausgewählt hat.
Auswahl max.-Zustand Der Widget-Zustand, in dem der Benutzer mehr als die maximal zulässige Anzahl von
Kontrollkästchen ausgewählt hat.
Wenn ein Widget vom Typ „Überprüfung - Kontrollkästchen“ durch eine Benutzeraktion in einen dieser Zustände
versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-
Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keine Optionen ausgewählt
hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung „Nehmen Sie eine Auswahl vor“ führt.
Die Regeln für Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel für das Widget, hier
„SpryValidationCheckbox.css“, enthalten.
Das Standard-HTML für das Widget „Überprüfung - Kontrollkästchen“, normalerweise in einem Formular, enthält
ein <span>-Container-Tag, das das <input type="checkbox">-Tag des Textbereichs umgibt. Das HTML für dieses
Widget enthält außerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets.
Eine ausführliche Erläuterung der Funktionsweise von Widgets vom Typ „Überprüfung - Kontrollkästchen“,
einschließlich der vollständigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycheckbox_de.
Widget „Überprüfung - Kontrollkästchen“ einfügen und bearbeiten
Widgets vom Typ „Überprüfung - Kontrollkästchen“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Kontrollkästchen“.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Kontrollkästchen“ auch über die Kategorie „Spry“ im Bedienfeld
„Einfügen“ hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann eine Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
493
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Kontrollkästchens klickt.
Ändern Überprüfung erfolgt bei der Benutzerauswahl.
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Minimalen und maximalen Auswahlbereich festlegen
Widgets vom Typ „Überprüfung - Kontrollkästchen“ sind standardmäßig auf die Option „Erforderlich“ eingestellt.
Bei Einfügen von Kontrollkästchen auf Ihrer Seite können Sie allerdings einen minimalen bzw. maximalen
Auswahlbereich festlegen. Wenn sich beispielsweise sechs Kontrollkästchen innerhalb des <span>-Tags eines
einzelnen Widgets vom Typ „Überprüfung - Kontrollkästchen“ befinden und Sie sicherstellen möchten, dass der
Benutzer mindestens drei davon auswählt, können Sie diese Einstellung für das gesamte Widget vornehmen.
1 Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Auswahlbereich (mehrere)“ aus.
3 Geben Sie einen Mindest- bzw. Höchstwert an Kontrollkästchen an, den der Benutzer auswählen muss.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ im Dokumentfenster aus.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wählen Sie beispielsweise „Anfänglich“, um das Widget in seinem
Ursprungszustand anzuzeigen.
Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ anpassen
Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ werden in Rot mit einem 1 Pixel breiten Rahmen
um den Text angezeigt. Sie können die CSS-Datei für das Widget ändern, um den gewünschten Stil zu erhalten. Eine
erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprycheckbox_custom_de.
1 Öffnen Sie die Datei „SpryValidationCheckbox.css“.
Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ erstellen, speichert Dreamweaver die
Datei „SpryValidationCheckbox.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält außerdem nützliche
kommentierte Informationen zu verschiedenen Stilen für das Widget.
2 Suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften
oder fügen Sie benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu:
Sie können die Regeln für dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld „CSS-
Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus „Aktuell“, das Auffinden der
CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Text für Stilerstellung Dazugehörige CSS-Regel Zu ändernde dazugehörige Regeln
Text der Fehlermeldung
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState
.checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState
.checkboxMaxSelectionsMsg
color: #CC3333; border: 1px solid #CC3333;
494
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Arbeiten mit dem Spry-Widget „Überprüfung -
Kennwort“
Widget „Überprüfung - Kennwort“
Das Spry-Widget „Überprüfung - Kennwort“ ist ein Kennworttextfeld, mit dem Sie Kennwortregeln (wie Anzahl und
Typ der zu verwendenden Zeichen) anwenden können. Das Widget gibt in Abhängigkeit von der Benutzereingabe
Warn- oder Fehlermeldungen aus.
Note: Sie sollten mit Spry-Überprüfungswidgets vertraut sein, bevor Sie das Kennwortwidget verwenden. Wenn dies noch
nicht der Fall ist, lesen Sie, bevor Sie fortfahren, die Informationen unter “Arbeiten mit dem Spry-Widget „Überprüfung
- Textfeld“” on page 479 oder eine andere Übersicht über das Überprüfungs-Widget. Dieser Überblick enthält nicht alle
Grundkonzepte von Überprüfungswidgets.
Im folgenden Beispiel ist ein Widget vom Typ „Überprüfung - Kennwort“ in verschiedenen Zuständen dargestellt:
A: Kennwortwidget, Zustand für Mindestanzahl von Zeichen B: Kennwortwidget, Zustand für Höchstanzahl von Zeichen C: Kennwortwidget,
Zustand „Erforderlich“
Das Widget „Überprüfung - Kennwort“ beinhaltet mehrere Zustände (z. B. „Gültig“, „Ungültig“, „Zeichen min.“
usw.). Sie können die Eigenschaften für diese Zustandswerte ändern, indem Sie je nach gewünschtem
Überprüfungsergebnis die entsprechende CSS-Datei („SpryValidationPassword.css“) bearbeiten. Mit einem Widget
vom Typ „Überprüfung - Kennwort“ können Eingabedaten zu unterschiedlichen Zeitpunkten überprüft werden, z. B.
wenn der Besucher der Website auf eine Stelle außerhalb des Textfelds klickt, Text eingibt oder das Formular sendet.
Anfangszustand Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Zustand „Fokus“ Der Benutzer setzt die Einfügemarke in das Widget.
Zustand „Gültig“ Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden.
Zustand „Ungültige Stärke“ Der Benutzer gibt im Feld Text ein, der nicht den Kriterien für die Kennwortstärke
entspricht. (Wenn Sie beispielsweise festgelegt haben, dass ein Kennwort mindestens zwei Großbuchstaben enthalten
muss und das eingegebene Kennwort keinen oder nur einen Großbuchstaben enthält.)
Erforderlich-Zustand Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein.
Zustand „Zeichen min.“ Der Benutzer gibt im Textfeld für das Kennwort weniger Zeichen als die erforderliche
Mindestanzahl ein.
Zeichen max.-Zustand
Der Benutzer gibt im Textfeld für das Kennwort mehr Zeichen als die zulässige Höchstanzahl ein.
A
B
C
Mindestanzahl an Zeichen nicht erreicht.
Mindestanzahl an Zeichen nicht erreicht.
Höchstanzahl an Zeichen überschritten.
Wert erforderlich.
495
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Eine ausführliche Erläuterung der Funktionsweise von Widgets des Typs „Überprüfung - Kennwort“ sowie zusätzliche
Informationen zur Widget-Struktur finden Sie unter www.adobe.com/go/learn_dw_sprypassword_de.
More Help topics
Beispiele für Widgets vom Typ „Überprüfung - Kennwort“
Widget „Überprüfung - Kennwort“ einfügen und bearbeiten
Widget „Überprüfung - Kennwort“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Kennwort“ aus.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Kennwort“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“
hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Zustand „Erforderlich“ eines Widgets vom Typ „Überprüfung - Kennwort“ ändern
Alle Widgets vom Typ „Überprüfung - Kennwort“, die Sie mit Dreamweaver einfügen, erfordern bei der
Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können das Ausfüllen von Textfeldern für Kennwörter
jedoch auch als optional konfigurieren.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das
Kontrollkästchen „Erforderlich“.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen
möchten, wählen Sie die Option „Gültig“.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Kennwort“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds für das Kennwort klickt.
Ändern Überprüfung erfolgt, wenn der Benutzer Text im Textfeld für das Kennwort ändert.
496
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Kennwortstärke festlegen
Kennwortstärke bezeichnet den Grad, in dem Kombinationen bestimmter Zeichen den Anforderungen an ein im
Textfeld eingegebenes Kennwort entsprechen. Wenn Sie beispielsweise ein Formular erstellt haben, in dem Benutzer
ein Kennwort festlegen, empfiehlt es sich unter Umständen den Benutzern vorzuschreiben, im Kennwort eine
bestimmte Anzahl von Großbuchstaben, Sonderzeichen usw. zu verwenden.
Note: Standardmäßig sind für das Kennwortwidget keine der verfügbaren Optionen festgelegt.
1 Klicken Sie auf die blaue Registerkarte des Widgets „Überprüfung - Kennwort“, um es auszuwählen.
2 Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschten Optionen fest. Die jeweilige
Anzahl, die Sie in den entsprechenden Optionsfeldern eingeben, stellt die für das Widget erforderliche Anzahl von
Zeichen dar, damit die Überprüfung erfolgreich ist. Wenn Sie z. B. im Feld „Zeichen min.“ den Wert „8“ eingeben,
ist die Überprüfung nur erfolgreich, wenn im Textfeld für das Kennwort mindestens acht Zeichen eingegeben
werden.
Zeichen min./Zeichen max. Gibt die Mindest- und Höchstanzahl von Zeichen an, die für eine erfolgreiche
Gültigkeitsprüfung des Kennworts erforderlich sind.
Buchstaben min./Buchstaben max. Gibt die Mindest- und Höchstanzahl von Buchstaben (a, b, c usw.) an, die für eine
erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Zahlen min./Zahlen max. Gibt die Mindest- und Höchstanzahl von Ziffern (1, 2, 3 usw.) an, die für eine erfolgreiche
Gültigkeitsprüfung des Kennworts erforderlich sind.
Großbuchstaben min./Großbuchstaben max. Gibt die Mindest- und Höchstanzahl von Großbuchstaben (A, B, C
usw.) an, die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Sonderzeichen min./Sonderzeichen max. Gibt die Mindest- und Höchstanzahl von Sonderzeichen (!, @, # usw.) an,
die für eine erfolgreiche Gültigkeitsprüfung des Kennworts erforderlich sind.
Wenn Sie eine der oben aufgeführten Optionen leer lassen, überprüft das Widget nicht auf dieses Kriterium. Wenn Sie
z. B. die Optionen für die Höchst- und Mindestanzahl von Ziffern leer lassen, überprüft das Widget nicht auf Ziffern
im Kennwort.
Widget „Überprüfung - Kennwort“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an dem Widget „Überprüfung - Kennwort“
vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den CSS-Code für das
Widget „Überprüfung - Kennwort“ ändern, um den gewünschten Stil zu erhalten. Eine ausführliche Liste mit
Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprypassword_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei
„SpryValidationPassword.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Kennwort“ erstellen,
speichert Dreamweaver die Datei „SpryValidationPassword.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei
enthält außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Sie können die CSS-Regeln für das Widget „Überprüfung - Kennwort“ entweder schnell und einfach in der
zugehörigen CSS-Datei oder im Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei
Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets
zugewiesenen sind.
497
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Stil für Widgets vom Typ „Überprüfung - Kennwort“ zuweisen (allgemeine Anweisungen)
1 Öffnen Sie die Datei „SpryValidationPassword.css“.
2 Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die
Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Kennwort“ ändern möchten,
bearbeiten Sie die Regel
input.passwordRequiredState in der Datei „SpryValidationPassword.css“.
3 Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei „SpryValidationPassword.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck
bestimmter Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
Textstil von Fehlermeldungen für das Widget „Überprüfung - Kennwort“ zuweisen
Fehlermeldungen für das Widget „Überprüfung - Kennwort“ werden standardmäßig mit einem 1 Pixel breiten roten
durchgehenden Rahmen um den Text angezeigt.
❖ Um den Textstil für Fehlermeldungen des Widgets „Überprüfung - Kennwort“ zu ändern, suchen Sie in der
folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie
benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu.
Hintergrundfarben des Widgets „Überprüfung - Kennwort“ ändern
❖ Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Kennwort“ zu ändern, suchen Sie in der
folgenden Tabelle die entsprechende CSS-Regel und ändern Sie die Standardfarbwerte.
Zu ändernder Text Dazugehörige CSS-Regel Zu ändernde dazugehörige
Regeln
Text der Fehlermeldung
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState
.passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg
color: #CC3333; border: 1px solid
#CC3333;
Zu ändernde Farbe Dazugehörige CSS-Regel Zu ändernde dazugehörige
Eigenschaft
Hintergrundfarbe des
Widgets im Gültig-Zustand
.passwordValidState input,
input.passwordValidState
background-color: #B8F5B1;
Hintergrundfarbe des
Widgets im Ungültig-
Zustand
input.passwordRequiredState,
.passwordRequiredState input,
input.passwordInvalidStrengthState,
.passwordInvalidStrengthState input,
input.passwordMinCharsState,
.passwordMinCharsState input,
input.passwordCustomState,
.passwordCustomState input,
input.passwordMaxCharsState,
.passwordMaxCharsState input
background-color: #FF9F9F;
Hintergrundfarbe des
Widgets im Fokus
.passwordFocusState input,
input.passwordFocusState
background-color: #FFFFCC;
498
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Arbeiten mit dem Spry-Widget „Überprüfung -
Bestätigung“
Widget „Überprüfung - Bestätigung“
Das Widget „Überprüfung - Bestätigung“ ist ein Textfeld oder ein Kennwort-Formularfeld, das die Zustandswerte
„Gültig“ oder „Ungültig“ anzeigt, abhängig davon, ob ein Benutzer einen Wert eingibt, der exakt mit dem in einem
anderen Feld im selben Formular eingegebenen Wert übereinstimmt. Beispielsweise können Sie einem Formular ein
Widget vom Typ „Überprüfung - Bestätigung“ hinzufügen, in dem Benutzer ein zuvor in einem anderen Feld
eingegebenes Kennwort ein zweites Mal eingeben müssen. Wenn die zweite Kennworteingabe nicht exakt mit der
ersten übereinstimmt, zeigt das Widget eine entsprechende Fehlermeldung an.
Sie können ein Widget vom Typ „Überprüfung - Bestätigung“ auch zusammen mit einem Widget vom Typ
„Überprüfung - Textfeld“ einsetzen, um E-Mail-Adressen zu überprüfen.
Note: Sie sollten mit Spry-Überprüfungswidgets vertraut sein, bevor Sie das Bestätigungswidget verwenden. Wenn dies
noch nicht der Fall ist, lesen Sie, bevor Sie fortfahren, die Informationen unter “Arbeiten mit dem Spry-Widget
„Überprüfung - Textfeld“” on page 479 oder eine andere Übersicht über das Überprüfungs-Widget. Dieser Überblick
enthält nicht alle Grundkonzepte von Überprüfungswidgets.
In der folgenden Abbildung ist eine typische Verwendung eines Bestätigungswidgets dargestellt:
A: Kennwortfeld oder Spry-Widget „Überprüfung - Kennwort“ B: Bestätigungswidget
Das Widget „Überprüfung - Bestätigung“ beinhaltet mehrere Zustände (z. B. „Gültig“, „Ungültig“, „Erforderlich“
usw.). Sie können die Eigenschaften für diese Zustandswerte ändern, indem Sie je nach gewünschtem
Überprüfungsergebnis die entsprechende CSS-Datei („SpryValidationConfirm.css“) bearbeiten. Mit einem Widget
vom Typ „Überprüfung - Bestätigung“ können Eingabedaten zu unterschiedlichen Zeitpunkten überprüft werden,
z. B. wenn der Besucher der Website auf eine Stelle außerhalb des Textfelds klickt, Text eingibt oder das Formular
sendet.
Anfangszustand Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Zustand „Fokus“ Der Benutzer setzt die Einfügemarke in das Widget.
Zustand „Gültig“ Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden.
Zustand „Ungültig“ Der Benutzer gibt Text ein, der nicht mit dem in das vorherige Textfeld, in das Widget
„Überprüfung - Textfeld“ oder das Widget „Überprüfung - Bestätigung“ eingegebenen Text übereinstimmt.
Erforderlich-Zustand Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein.
Eine ausführliche Erläuterung der Funktionsweise von Widgets des Typs „Überprüfung - Bestätigung“ sowie
zusätzliche Informationen zur Widget-Struktur finden Sie unter www.adobe.com/go/learn_dw_spryconfirm_de.
More Help topics
Beispiele für Widgets vom Typ „Überprüfung - Bestätigung“
B
A
499
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Widget „Überprüfung - Bestätigung“ einfügen und bearbeiten
Widget „Überprüfung - Bestätigung“ einfügen
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Überprüfung - Bestätigung“ aus.
2 Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Note: Sie können Widgets vom Typ „Überprüfung - Bestätigung“ auch über die Kategorie „Spry“ im Bedienfeld
„Einfügen“ hinzufügen.
More Help topics
“Barrierefreie HTML-Formulare erstellen” on page 727
Zustand „Erforderlich“ eines Widgets vom Typ „Überprüfung - Bestätigung“ ändern
Alle Widgets vom Typ „Überprüfung - Bestätigung“, die Sie mit Dreamweaver einfügen, erfordern bei der
Veröffentlichung auf einer Webseite eine Benutzereingabe. Sie können das Ausfüllen von Bestätigungstextfeldern
jedoch auch als optional konfigurieren.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Bestätigung“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) je nach Präferenz das
Kontrollkästchen „Erforderlich“.
Textfeld zum Vergleich angeben
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Bestätigung“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) das Textfeld aus, mit dem der Feldinhalt
verglichen werden soll, indem Sie im Popupmenü „Überprüfen auf“ ein Textfeld auswählen. Im Popupmenü
werden alle Textfelder angezeigt, denen eine eindeutige ID zugewiesen ist.
Widgetstatus in der Entwurfsansicht anzeigen
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Bestätigung“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) den Zustand aus, den Sie im Popupmenü
„Zustandsvorschau“ anzeigen möchten. Wenn Sie beispielsweise das Widget in seinem gültigen Zustand anzeigen
möchten, wählen Sie die Option „Gültig“.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer außerhalb des Widgets klickt, bei der
Texteingabe oder beim Abschicken des Formulars.
1 Wählen Sie im Dokumentfenster ein Widget vom Typ „Überprüfung - Bestätigung“ aus, indem Sie auf die
entsprechende blaue Registerkarte klicken.
2 Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschte Option für den
Überprüfungszeitpunkt aus. Sie können entweder alle Optionen oder nur die Übermittlung auswählen.
OnBlur Überprüfung erfolgt, wenn der Benutzer außerhalb des Bestätigungstextfelds klickt.
Ändern Überprüfung erfolgt, wenn der Benutzer Text im Bestätigungstextfeld ändert.
500
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
OnSubmit Überprüfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option „onSubmit“ ist
standardmäßig ausgewählt und kann nicht deaktiviert werden.
Widget „Überprüfung - Bestätigung“ anpassen
Sie können mit dem Eigenschafteninspektor zwar einfache Änderungen an dem Widget „Überprüfung - Bestätigung“
vornehmen, benutzerdefinierte Stilaufgaben werden jedoch nicht unterstützt. Sie können den CSS-Code für das
Widget „Überprüfung - Bestätigung“ ändern, um den gewünschten Stil zu erhalten. Eine erweiterte Liste mit
Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryconfirm_custom_de.
Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei
„SpryValidationConfirm.css“. Jedes Mal, wenn Sie ein Widget vom Typ „Überprüfung - Bestätigung“ erstellen,
speichert Dreamweaver die Datei „SpryValidationConfirm.css“ im Ordner „SpryAssets“ Ihrer Site. Diese Datei enthält
außerdem nützliche kommentierte Informationen zu verschiedenen Stilen für das Widget.
Sie können die CSS-Regeln für das Widget „Überprüfung - Bestätigung“ entweder schnell und einfach in der
zugehörigen CSS-Datei oder im Bedienfeld „CSS-Stile“ bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei
Verwendung des Modus „Aktuell“, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets
zugewiesenen sind.
More Help topics
“Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“” on page 139
Stil für Widgets vom Typ „Überprüfung - Bestätigung“ zuweisen (allgemeine Anweisungen)
1 Öffnen Sie die Datei „SpryValidationConfirm.css“.
2 Suchen Sie die CSS-Regel für den zu ändernden Bereich des Widgets. Wenn Sie beispielsweise die
Hintergrundfarbe für den Zustand „Erforderlich“ des Widgets „Überprüfung - Bestätigung“ ändern möchten,
bearbeiten Sie die Regel
input.confirmRequiredState in der Datei „SpryValidationConfirm.css“.
3 Nehmen Sie die gewünschten Änderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei „SpryValidationConfirm.css“ enthält ausführliche Kommentare, in denen der Code und der Zweck
bestimmter Regeln erläutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
Textstil von Fehlermeldungen für das Widget „Überprüfung - Bestätigung“ zuweisen
Fehlermeldungen für das Widget „Überprüfung - Bestätigung“ werden standardmäßig mit einem 1 Pixel breiten roten
durchgehenden Rahmen um den Text angezeigt.
❖ Um den Textstil für Fehlermeldungen des Widgets „Überprüfung - Bestätigung“ zu ändern, suchen Sie in der
folgenden Tabelle die entsprechende CSS-Regel und ändern Sie dann die Standardeigenschaften oder fügen Sie
benutzerdefinierte Eigenschaften und Werte für den Textstil hinzu.
Hintergrundfarben des Widgets „Überprüfung - Bestätigung“ ändern
❖ Um die Hintergrundfarben eines Widgets vom Typ „Überprüfung - Bestätigung“ zu ändern, suchen Sie in der
folgenden Tabelle die entsprechende CSS-Regel und ändern Sie die Standardwerte für die Hintergrundfarbe.
Zu ändernder Text Dazugehörige CSS-Regel Zu ändernde dazugehörige
Regeln
Text der Fehlermeldung
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg
color: #CC3333; border: 1px solid
#CC3333;
501
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Daten mit Spry anzeigen
Spry-Datensätze
Bei einem Spry-Datensatz handelt es sich im Grunde um ein JavaScript-Objekt, das eine von Ihnen festgelegte
Zusammenstellung von Daten enthält. In Dreamweaver können Sie solch ein Objekt problemlos erstellen und Daten
aus einer Datenquelle (beispielsweise aus einer XML- oder HTML-Datei) in das Objekt laden. Der entstehende
Datensatz ist ein Feld von Daten in Form einer Standardtabelle mit Zeilen und Spalten. Wenn Sie einen Spry-
Datensatz mit Dreamweaver erstellen, können Sie auch festlegen, wie die Daten auf einer Webseite angezeigt werden
sollen.
Sie können sich einen Datensatz als virtuellen Behälter vorstellen, dessen Struktur aus Zeilen und Spalten besteht. Er
existiert als ein JavaScript-Objekt, dessen Informationen nur sichtbar sind, wenn Sie genau angeben, wie diese auf der
Webseite angezeigt werden sollen. Sie können alle Daten in diesem Behälter anzeigen oder auch nur ausgewählte Teile.
Umfassende Informationen zur Funktionsweise von Spry-Datensätzen finden Sie unter
www.adobe.com/go/learn_dw_sdg_sprydataset_de.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die Verwendung von Spry-Datensätzen
finden Sie unter www.adobe.com/go/dw10datasets_de.
Ein Video-Tutorial zur Verwendung von Spry-Datensätzen finden Sie unter www.adobe.com/go/lrvid4047_dw_de.
Spry-Datensätze erstellen
Spry-HTML-Datensätze erstellen
1 Wenn Sie nur einen Datensatz erstellen, müssen Sie sich keine Gedanken über die Position der Einfügemarke
machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfügen möchten, stellen Sie sicher, dass
sich die Einfügemarke an der Position befindet, an der das Layout auf der Seite eingefügt werden soll.
2 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Datensatz“ aus.
3 Führen Sie im Dialogfeld „Datenquelle angeben“ die folgenden Schritte aus:
• Wählen Sie im Popupmenü „Datentyp auswählen“ die Option „HTML“ aus. (Diese Option ist standardmäßig
ausgewählt.)
• Legen Sie einen Namen für den neuen Datensatz fest. Der Standardname für den ersten erstellten Datensatz ist
„ds1“. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer
Ziffer beginnen.
Zu ändernde Farbe Dazugehörige CSS-Regel Zu ändernde dazugehörige
Eigenschaft
Hintergrundfarbe des
Widgets im Gültig-Zustand
.confirmValidState input,
input.confirmValidState
background-color: #B8F5B1;
Hintergrundfarbe des
Widgets im Ungültig-
Zustand
input.confirmRequiredState,
.confirmRequiredState input,
input.confirmInvalidState,
.confirmInvalidState input
background-color: #FF9F9F;
Hintergrundfarbe des
Widgets im Fokus
.confirmFocusState input,
input.confirmFocusState
background-color: #FFFFCC;
502
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
• Geben Sie die HTML-Elemente der Datenquelle an, die Dreamweaver erkennen soll. Wenn Sie die Daten
beispielsweise innerhalb eines
div-Tags angeordnet haben und Dreamweaver anstelle von Tabellen div-Tags
erkennen soll, wählen Sie aus dem Popupmenü „Ermitteln“ die Option „DIVs“ aus. Mit der Option
„Benutzerdefiniert“ können Sie beliebige Tagnamen eingeben, die erkannt werden sollen.
• Geben Sie den Pfad zur Datei mit der HTML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine
lokale Datei der Site (z. B. „data/html_data.html“) als auch als absolute URL auf einer (per HTTP oder HTTPS)
verfügbaren Webseite angegeben werden. Sie können auf die Schaltfläche „Durchsuchen“ klicken, um zu einer
lokalen Datei zu wechseln und diese dann auszuwählen.
Dreamweaver stellt die HTML-Datenquelle im Dialogfeldbereich „Datenauswahl“ dar und zeigt Markierungen
für die Elemente an, die als Container für den Datensatz verwendet werden können. Dem zu verwendenden
Element muss bereits eine eindeutige ID zugeordnet sein. Wenn dies nicht der Fall ist, wird in Dreamweaver
eine Fehlermeldung angezeigt, und Sie müssen erneut die Datenquellendatei öffnen und eine eindeutige ID
zuweisen. Darüber hinaus dürfen in der Datenquellendatei auswählbare Elemente nicht in Spry-Bereichen
abgelegt sein oder andere Datenverweise enthalten.
Alternativ können Sie auch einen „Entwurfsphasen-Feed“ als Datenquelle angeben. Weitere Informationen
hierzu finden Sie unter “Entwurfsphasen-Feeds verwenden” on page 510.
• Wählen Sie das für den Datencontainer gewünschte Element aus, indem Sie auf einen der gelben Pfeile klicken,
die im Dialogfeldbereich „Datenauswahl“ angezeigt werden, oder indem Sie aus dem Popupmenü
„Datencontainer“ eine ID auswählen.
Auswahl des Elements für den Datencontainer des HTML-Datensatzes
Bei umfangreichen Dateien können Sie auf den Pfeil zum Aus- und Einblenden unterhalb des
Dialogfeldbereichs „Datenauswahl“ klicken, damit mehr Daten angezeigt werden.
503
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Nachdem Sie das Containerelement für den Datensatz ausgewählt haben, wird im Dialogfeldbereich
„Datenvorschau“ eine Vorschau des Datensatzes angezeigt.
• Optional: Aktivieren Sie das Kontrollkästchen „Erweiterte Datenauswahl“, wenn Sie für den Datensatz CSS-
Datenselektoren angeben möchten. Wenn Sie beispielsweise im Textfeld „Zeilenselektoren“ den Wert .product
und im Textfeld „Spaltenselektoren“ den Wert .boximage angegeben haben, enthält der Datensatz nur die
Zeilen, denen die Klasse „.product“ zugewiesen ist, und nur die Spalten, denen die Klasse „.boximage“
zugewiesen ist.
Wenn Sie in eins der Textfelder mehrere Selektoren eingeben möchten, trennen Sie diese mit einem Komma.
Weitere Informationen finden Sie unter “Spry-Datensatzselektoren” on page 510.
• Wenn Sie im Dialogfeld „Datenquelle angeben“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um
direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Datenoptionen
festlegen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“
(„Fenster“ > „Bindungen“) zur Verfügung.
4 Führen Sie im Dialogfeld „Datenoptionen festlegen“ die folgenden Schritte aus:
• Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmenü
„Typ“ einen Spaltentyp auswählen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthält,
markieren Sie diese Spalte und wählen Sie im Popupmenü „Typ“ den Spaltentyp Zahl aus. Diese Option ist nur
von Bedeutung, wenn der Benutzer die Möglichkeit haben soll, die Daten nach dieser Spalte zu sortieren.
Sie können eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im
Popupmenü „Spaltenname“ auswählen oder sie mit den Pfeilen nach links und rechts in der linken oberen Ecke
des Dialogfelds anwählen.
• Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmenü „Spalte sortieren“ die
Spalte auswählen, nach der sortiert werden soll. Nach dem Auswählen der entsprechenden Spalte können Sie
festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.
• Optional (nur Tabellen): Deaktivieren Sie das Kontrollkästchen „Erste Zeile als Kopfzeile verwenden“, wenn Sie
anstelle der in der HTML-Datenquelle angegebenen Spaltennamen generische Spaltennamen (d. h. „column0“,
„column1“, „column2“ usw.) verwenden möchten.
Note: Wenn Sie für das Containerelement des Datensatzes keine Tabelle ausgewählt haben, sind diese und die
nächste Option nicht verfügbar. Dreamweaver verwendet automatisch als Spaltennamen von nicht auf Tabellen
beruhenden Datensätzen die Werte „column0“, „column1“, „column2“ usw.
• Optional (nur Tabellen): Aktivieren Sie das Kontrollkästchen „Spalten als Zeilen verwenden“, um die
horizontale und vertikale Ausrichtung der Daten im Datensatz umzukehren. Wenn Sie dieses Kontrollkästchen
aktivieren, werden Spalten als Zeilen verwendet.
• Optional: Aktivieren Sie das Kontrollkästchen „Doppelte Zeilen herausfiltern“, um doppelte Datenzeilen aus
dem Datensatz auszuschließen.
• Optional: Aktivieren Sie das Kontrollkästchen „Datencache deaktivieren“, wenn Sie stets Zugriff auf die
aktuellsten Daten im Datensatz wünschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren
Sie das Kontrollkästchen „Daten automatisch aktualisieren“ und geben Sie das Aktualisierungsintervall in
Millisekunden ein.
• Wenn Sie im Dialogfeld „Datenoptionen festlegen“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“,
um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld
„Einfügeoptionen auswählen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld
„Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.
504
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
5 Führen Sie im Dialogfeld „Einfügeoptionen auswählen“ einen der folgenden Schritte aus:
• Wählen Sie ein Layout für den neuen Datensatz aus und legen Sie die gewünschten Einrichtungsoptionen fest.
Weitere Informationen hierzu finden Sie unter “Datensatzlayout auswählen” on page 506.
• Wählen Sie die Option „Kein HTML einfügen“ aus. Wenn Sie diese Option auswählen, wird der Datensatz in
Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefügt. Der Datensatz steht im
Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung und Sie können einzelne Daten manuell aus
dem Datensatz auf die Seite ziehen.
6 Klicken Sie auf „Fertig“.
Der Datensatz wird von Dreamweaver erstellt. Wenn Sie eine Layoutoption ausgewählt haben, werden auf der Seite
das Layout und Platzhalter für die Daten angezeigt. In der Codeansicht ist zu erkennen, dass Dreamweaver den
Headerinformationen Verweise auf die Dateien „SpryData.js“ und „SpryHTMLDataSet.js“ hinzugefügt hat. Diese
Dateien sind wichtige Elemente von Spry, die für das Funktionieren der Seite erforderlich sind. Achten Sie darauf,
den entsprechenden Code nicht aus der Seite zu entfernen, sonst ist der Datensatz nicht funktionsfähig. Beim
Hochladen der Seite auf einen Server müssen auch diese Dateien als abhängige Dateien hochgeladen werden.
Spry-XML-Datensätze erstellen
1 Wenn Sie nur einen Datensatz erstellen, müssen Sie sich keine Gedanken über die Position der Einfügemarke
machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfügen möchten, stellen Sie sicher, dass
sich die Einfügemarke an der Position befindet, an der das Layout auf der Seite eingefügt werden soll.
2 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Datensatz“ aus.
3 Führen Sie im Dialogfeld „Datenquelle angeben“ die folgenden Schritte aus:
• Wählen Sie im Popupmenü „Datentyp auswählen“ die Option „XML“ aus.
• Legen Sie einen Namen für den neuen Datensatz fest. Der Standardname für den ersten erstellten Datensatz ist
„ds1“. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer
Ziffer beginnen.
• Geben Sie den Pfad zur Datei mit der XML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine
lokale Datei der Site (z. B. „datafiles/data.xml“) als auch als absolute URL auf einer (per HTTP oder HTTPS)
verfügbaren Webseite angegeben werden. Sie können auf die Schaltfläche „Durchsuchen“ klicken, um zu einer
lokalen Datei zu wechseln und diese dann auszuwählen.
Dreamweaver stellt die XML-Datenquelle im Dialogfeldbereich „Zeilenelement“ dar. Dabei wird die XML-
Struktur der zur Auswahl verfügbaren Datenelemente angezeigt. Wiederholende Elemente sind mit einem
Plussymbol (+) gekennzeichnet und untergeordnete Elemente sind eingerückt.
Alternativ können Sie auch einen „Entwurfsphasen-Feed“ als Datenquelle angeben. Weitere Informationen
hierzu finden Sie unter “Entwurfsphasen-Feeds verwenden” on page 510.
• Wählen Sie das Element aus, das die anzuzeigenden Daten enthält. Dabei handelt es sich in der Regel um ein
sich wiederholendes Element wie „<menu_item>“ mit mehreren untergeordneten Elementen wie „<item>“,
„<link>“, „<description>“ usw.
505
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Auswahl eines wiederholenden Elements für den XML-Datensatz
Nachdem Sie das Containerelement für den Datensatz ausgewählt haben, wird im Dialogfeldbereich
„Datenvorschau“ eine Vorschau des Datensatzes angezeigt. Das Textfeld „XPath“ zeigt einen Ausdruck, der die
Position des gewählten Knotens in der XML-Quelldatei angibt.
Note: XPath (XML Path Language) ist eine Syntax zum Adressieren bestimmter Bereiche eines XML-Dokuments.
Normalerweise wird XPath – ähnlich wie SQL für Datenbanken – als Abfragesprache für XML-Daten eingesetzt.
Weitere Informationen zu XPath enthalten die XPath-Spezifikationen in der W3C-Website unter
www.w3.org/TR/xpath.
• Wenn Sie im Dialogfeld „Datenquelle angeben“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“, um
direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld „Datenoptionen
festlegen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld „Bindungen“
(„Fenster“ > „Bindungen“) zur Verfügung.
4 Führen Sie im Dialogfeld „Datenoptionen festlegen“ die folgenden Schritte aus:
• Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmenü
„Typ“ einen Spaltentyp auswählen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthält,
markieren Sie diese Spalte und wählen Sie im Popupmenü „Typ“ den Spaltentyp Zahl aus. Diese Option ist nur
von Bedeutung, wenn der Benutzer die Möglichkeit haben soll, die Daten nach dieser Spalte zu sortieren.
Sie können eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im
Popupmenü „Spaltenname“ auswählen oder sie mit den Pfeilen nach links und rechts in der linken oberen Ecke
des Dialogfelds anwählen.
• Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmenü „Spalte sortieren“ die
Spalte auswählen, nach der sortiert werden soll. Nach dem Auswählen der entsprechenden Spalte können Sie
festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.
506
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
• Optional: Aktivieren Sie das Kontrollkästchen „Doppelte Zeilen herausfiltern“, um doppelte Datenzeilen aus
dem Datensatz auszuschließen.
• Optional: Aktivieren Sie das Kontrollkästchen „Datencache deaktivieren“, wenn Sie stets Zugriff auf die
aktuellsten Daten im Datensatz wünschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren
Sie das Kontrollkästchen „Daten automatisch aktualisieren“ und geben Sie das Aktualisierungsintervall in
Millisekunden ein.
• Wenn Sie im Dialogfeld „Datenoptionen festlegen“ alle Eingaben vorgenommen haben, klicken Sie auf „Fertig“,
um direkt im Anschluss den Datensatz zu erstellen, oder auf „Weiter“, um mit dem Dialogfeld
„Einfügeoptionen auswählen“ fortzufahren. Wenn Sie auf „Fertig“ klicken, steht der Datensatz im Bedienfeld
„Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung.
5 Führen Sie im Dialogfeld „Einfügeoptionen auswählen“ einen der folgenden Schritte aus:
• Wählen Sie ein Layout für den neuen Datensatz aus und legen Sie die gewünschten Einrichtungsoptionen fest.
Weitere Informationen hierzu finden Sie unter “Datensatzlayout auswählen” on page 506.
• Wählen Sie die Option „Kein HTML einfügen“ aus. Wenn Sie diese Option auswählen, wird der Datensatz in
Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefügt. Der Datensatz steht im
Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur Verfügung und Sie können einzelne Daten manuell aus
dem Datensatz auf die Seite ziehen.
6 Klicken Sie auf „Fertig“.
Der Datensatz wird von Dreamweaver erstellt. Wenn Sie eine Layoutoption ausgewählt haben, werden auf der Seite
das Layout und Platzhalter für die Daten angezeigt. In der Codeansicht ist zu erkennen, dass Dreamweaver den
Headerinformationen Verweise auf die Dateien „xpath.js“ und „SpryData.js“ hinzugefügt hat. Diese Dateien sind
wichtige Elemente von Spry, die für das Funktionieren der Seite erforderlich sind. Achten Sie darauf, den
entsprechenden Code nicht aus der Seite zu entfernen, sonst ist der Datensatz nicht funktionsfähig. Beim
Hochladen der Seite auf einen Server müssen auch diese Dateien als abhängige Dateien hochgeladen werden.
Datensatzlayout auswählen
Im Dialogfeld „Einfügeoptionen auswählen“ können Sie unterschiedliche Optionen für die Anzeige der
Datensatzdaten auf der Seite auswählen. Daten können in einer dynamischen Spry-Tabelle, einem Master-
/Detaillayout, einem Layout mit gestapelten Containern (einspaltig) oder als Layout gestapelter Container mit
Spotlight-Bereich (zweispaltig) dargestellt werden. Das Dialogfeld „Einfügeoptionen auswählen“ enthält
Miniaturansichten der jeweiligen Layouts.
Layout mit dynamischer Tabelle
Wählen Sie die Option „Tabelle einfügen“ aus, wenn die Daten in einer dynamischen Spry-Tabelle angezeigt werden
sollen. Spry-Tabellen ermöglichen dynamische Spaltensortierung und weitere interaktive Verhalten.
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Tabelle einfügen“
zu öffnen, und führen Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich „Spalten“ die Spalten für Ihre Tabelle wie folgt an:
• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus der Tabelle zu
löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um der Tabelle neue
Spalten hinzuzufügen.
• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Wenn Sie eine Spalte nach oben verschieben, bewegen Sie sie in der angezeigten Tabelle nach links,
im anderen Fall nach rechts.
507
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Damit eine Spalte sortiert werden kann, wählen Sie sie im Dialogfeldbereich „Spalten“ aus und aktivieren Sie dann
das Kontrollkästchen „Spalte beim Klicken auf Überschrift sortieren“. Standardmäßig sind alle Spalten sortierbar.
Wenn das Sortieren einer Spalte nicht möglich sein soll, wählen Sie den Spaltennamen im Dialogfeldbereich
„Spalten“ aus und deaktivieren Sie dann das Kontrollkästchen „Spalte beim Klicken auf Überschrift sortieren“.
3 Wenn CSS-Stile mit Ihrer Seite als angehängtes Stylesheet oder als Gruppe einzelner Stile in der HTML-Seite
verknüpft sind, können Sie eine CSS-Klasse für eine oder mehrere der folgenden Optionen anwenden:
Ungerade-Zeilen-Klasse Ändert die Darstellung der Zeilen mit ungerader Zeilennumber in der dynamischen
Tabelle in Abhängigkeit vom ausgewählten Klassenstil.
Gerade-Zeilen-Klasse Ändert die Darstellung der Zeilen mit gerader Zeilennumber in der dynamischen Tabelle in
Abhängigkeit vom ausgewählten Klassenstil.
Hover-Klasse Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil,
wenn der Mauszeiger darüber bewegt wird.
Auswahl-Klasse Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil,
wenn Sie darauf klicken.
Note: Die Reihenfolge der Klassen für ungerade und gerade Zeilen sowie Hover und Auswahl in Ihrem Stylesheet ist
von entscheidender Bedeutung. Die Regeln müssen in genau dieser Reihenfolge (ungerade, gerade, Hover und
Auswahl) angegeben sein. Wenn sich die Regel für die Hover-Klasse im Stylesheet unterhalb der Regel für die
Auswahl-Klasse befindet, wird kein Hover-Effekt dargestellt, bis der Benutzer den Mauszeiger über eine andere Zeile
hält. Wenn sich die Regeln für die Hover- und Auswahl-Klasse im Stylesheet oberhalb der Regeln für ungerade und
gerade Zeilen befinden, funktionieren die Effekte für ungerade und gerade Zeilen überhaupt nicht. Sie können Regeln
im Bedienfeld „CSS“ mit der Maus ziehen und verschieben, um sie korrekt anzuordnen, oder Sie können den CSS-
Code direkt bearbeiten.
4 Wenn die zu erstellende Tabelle eine dynamische Spry-Mastertabelle werden soll, aktivieren Sie das
Kontrollkästchen „Detailbereiche beim Klicken auf Zeile aktualisieren“. Weitere Informationen finden Sie unter
“Dynamische Spry-Mastertabellen und Aktualisierung von Detailbereichen” on page 510.
5 Klicken Sie auf „OK“, um das Dialogfeld zu schließen, und klicken Sie dann im Dialogfeld „Einfügeoptionen
auswählen“ auf „Fertig“.
Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass die Tabelle nun mit einer Kopfzeile und einer Zeile
mit Datenverweisen angezeigt wird. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({})
eingeschlossen.
Master-/Detaillayout
Wählen Sie die Option „Master-/Detaillayout einfügen“ aus, wenn Sie die Daten in einem Master-/Detaillayout
anzeigen möchten. Bei einem Master-/Detaillayout werden durch Klicken auf ein Element im Masterbereich (links)
die Informationen im Detailbereich (rechts) aktualisiert. Der Masterbereich enthält üblicherweise eine lange Liste mit
Namen, z. B. eine Liste verfügbarer Produkte. Wenn der Benutzer auf einen der Produktnamen klickt, werden im
Detailbereich ausführlichere Informationen über das ausgewählte Produkt angezeigt.
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Master-
/Detaillayout einfügen“ zu öffnen, und führen Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich „Masterspalten“ den Inhalt des Masterbereichs wie folgt an:
• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem
Masterbereich zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um dem
Masterbereich neue Spalten hinzuzufügen. Standardmäßig wird in Dreamweaver der Masterbereich mit Daten
aus der ersten Spalte des Datensatzes gefüllt.
508
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Masterspalten“ nach oben oder unten
wird die Anordnung der Datendarstellung im Masterbereich der Seite festgelegt.
2 Wiederholen Sie die oben aufgeführten Schritte für den Dialogfeldbereich „Detailspalten“. Standardmäßig wird in
Dreamweaver der Detailbereich mit allen Daten gefüllt, die nicht im Masterbereich angezeigt werden (d. h. alle
Spalten des Datensatzes außer der ersten).
3 Optional: Legen Sie für Daten im Detailbereich unterschiedliche Containertypen fest. Markieren Sie dazu den
Namen einer Detailspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu verwendenden Container
aus. Sie können zwischen den Tags
DIV, P, SPAN oder H1-H6 auswählen.
4 Klicken Sie auf „OK“, um das Dialogfeld zu schließen, und klicken Sie dann im Dialogfeld „Einfügeoptionen
auswählen“ auf „Fertig“.
Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Master- und Detailbereiche angezeigt
werden und mit den von Ihnen ausgewählten Datenverweisen gefüllt sind. Die Datenverweise sind hervorgehoben
und in geschweifte Klammern ({}) eingeschlossen.
Layout mit gestapelten Containern
Wählen Sie die Option „Gestapelte Container einfügen“ aus, wenn Sie die Daten auf der Seite in einer sich
wiederholenden Containerstruktur anzeigen möchten. Wenn sich im Datensatz beispielsweise 4 Datenspalten
befinden, kann jeder Container alle vier Spalten enthalten und die Containerstruktur wiederholt sich für jede
Datensatzzeile.
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Gestapelte
Container einfügen“ zu öffnen, und führen Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich „Spalten“ den Inhalt der gestapelten Container wie folgt an:
• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus den gestapelten
Containern zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um den
Containern neue Spalten hinzuzufügen. Standardmäßig werden in Dreamweaver gestapelte Container mit
Daten aus jeder Spalte des Datensatzes gefüllt.
• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Spalten“ nach oben oder unten wird die
Anordnung der Datendarstellung für die gestapelten Container auf der Seite festgelegt.
2 Optional: Legen Sie für Daten in den gestapelten Containern unterschiedliche Containertypen fest. Markieren Sie
dazu den Namen einer Datensatzspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu
verwendenden Container aus. Sie können zwischen den Tags
DIV, P, SPAN oder H1-H6 auswählen.
3 Klicken Sie auf „OK“, um das Dialogfeld zu schließen, und klicken Sie dann im Dialogfeld „Einfügeoptionen
auswählen“ auf „Fertig“.
Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Container angezeigt werden und mit den
von Ihnen ausgewählten Datenverweisen gefüllt sind. Die Datenverweise sind hervorgehoben und in geschweifte
Klammern ({}) eingeschlossen.
Layout mit gestapelten Containern mit Spotlight-Bereich
Wählen Sie die Option „Gestapelte Container mit Spotlight-Bereich einfügen“ aus, wenn Sie die Daten auf der Seite in
einer sich wiederholenden Containerstruktur mit einem Spotlight-Bereich für jeden Container anzeigen möchten. Der
Spotlight-Bereich enthält in der Regel ein Bild. Das Layout mit Spotlight-Bereich ähnelt dem Layout mit gestapelten
Containern. Der Unterschied besteht darin, dass die Datenanzeige beim Layout mit Spotlight-Bereich in zwei
getrennte Spalten (innerhalb desselben Containers) unterteilt ist.
509
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Klicken Sie nach der Auswahl dieser Option auf die Schaltfläche „Einrichten“, um das Dialogfeld „Spotlight-Bereich-
Layout einfügen“ zu öffnen, und führen Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich „Spotlight-Spalten“ den Inhalt des Spotlight-Bereichs wie folgt an:
• Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem Spotlight-
Bereich zu löschen. Klicken Sie auf das Plussymbol (+) und wählen Sie einen Spaltennamen aus, um dem
Spotlight-Bereich neue Spalten hinzuzufügen. Standardmäßig wird in Dreamweaver der Spotlight-Bereich mit
Daten aus der ersten Spalte des Datensatzes gefüllt.
• Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich „Spotlight-Spalten“ nach oben oder
unten wird die Anordnung der Datendarstellung im Spotlight-Bereich der Seite festgelegt.
2 Optional: Legen Sie für Daten im Spotlight-Bereich unterschiedliche Containertypen fest. Markieren Sie dazu den
Namen einer Datensatzspalte und wählen Sie im Popupmenü „Containertyp“ den dafür zu verwendenden
Container aus. Sie können zwischen den Tags
DIV, P, SPAN oder H1-H6 auswählen.
3 Wiederholen Sie die oben aufgeführten Schritte für den Dialogfeldbereich „Gestapelte Spalten“. Standardmäßig
werden in Dreamweaver die gestapelten Spalten mit allen Daten gefüllt, die nicht im Spotlight-Bereich angezeigt
werden (d. h. alle Spalten des Datensatzes außer der ersten).
4 Klicken Sie auf „OK“, um das Dialogfeld zu schließen, und klicken Sie dann im Dialogfeld „Einfügeoptionen
auswählen“ auf „Fertig“.
Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Spotlight-Bereiche und daneben die
gestapelten Containern angezeigt werden und mit den von Ihnen ausgewählten Datenverweisen gefüllt sind. Die
Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen.
Kein HTML einfügen
Wählen Sie diese Option aus, wenn Sie einen Datensatz erstellen möchten, Dreamweaver jedoch kein HTML-Layout
für den Datensatz einfügen soll. Der Datensatz steht im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) zur
Verfügung und Sie können einzelne Daten des Datensatzes manuell auf die Seite ziehen.
Auch wenn Sie einen Datensatz zuerst ohne Einfügen von Layout-Code erstellen, können Sie später jederzeit eins der
verfügbaren Layouts einfügen. Doppelklicken Sie dazu im Bedienfeld „Bindungen“ auf den Namen des Datensatzes,
navigieren Sie durch die angezeigten Dialogfelder bis zum Dialogfeld „Einfügeoptionen auswählen“, wählen Sie das
gewünschte Layout aus und klicken Sie auf „Fertig“.
Note: Sie können auch den Namen des Datensatzes aus dem Bedienfeld „Bindungen“ an den gewünschten Einfügepunkt
auf der Webseite ziehen. Dabei öffnet sich das Dialogfeld „Einfügeoptionen auswählen“. Nehmen Sie die gewünschte
Layoutauswahl vor und klicken Sie auf „Fertig“.
Datensätze bearbeiten
Nachdem Sie einen Spry-Datensatz erstellt haben, können Sie ihn jederzeit bearbeiten.
❖ Doppelklicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf den Namen des Datensatzes und
nehmen Sie die gewünschten Änderungen vor.
Note: Wenn Sie einen Datensatz bearbeiten und im Dialogfeld „Einfügeoptionen auswählen“ ein neues Layout
auswählen, ersetzt Dreamweaver nicht das Layout auf der Seite sondern fügt stattdessen ein neues Layout ein.
510
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Entwurfsphasen-Feeds verwenden
Wenn Sie mit in der Entwicklung befindlichen Daten arbeiten, kann sich der Einsatz eines Entwurfsphasen-Feeds als
nützlich erweisen. Wenn beispielsweise der Server-Entwickler die Datenbank für Ihre XML-Datendatei noch nicht
fertig gestellt hat, können Sie Ihre Seite unabhängig vom Entwicklungsstand mit einer Testversion der Datei erstellen.
Wenn Sie einen Entwurfsphasen-Feed verwenden, füllt Dreamweaver nur Ihre Arbeitsumgebung mit Daten aus
diesem Feed. Im Seitencode vorhandene Verweise auf die Datenquelle verweisen weiter auf die tatsächlich zu
verwendende Datenquelle.
1 Beginnen Sie mit dem Erstellen eines Spry-Datensatzes (entsprechende Anweisungen finden Sie in den
vorangegangenen Abschnitten).
2 Klicken Sie im Dialogfeld „Datenquelle angeben“ auf den Hyperlink „Entwurfsphasen-Feed“.
3 Klicken Sie auf die Schaltfläche „Durchsuchen“, um den Entwurfsphasen-Feed zu suchen, und klicken Sie dann auf
„OK“.
Spry-Datensatzselektoren
Wenn Sie einen Spry-Datensatz mit Dreamweaver erstellen, werden standardmäßig alle Daten im ausgewählten
Container eingefügt. Sie können diese Auswahl durch die Verwendung von CSS-Datenselektoren verfeinern. Mit CSS-
Datenselektoren ist es möglich, nur Teile der Daten einer Datenquelle aufzunehmen, indem Sie CSS-Regeln angeben,
die bestimmten Daten zugeordnet sind. Wenn Sie beispielsweise im Textfeld „Zeilenselektoren“ des Dialogfelds
„Datenquelle angeben“ den Wert .product angeben, erstellt Dreamweaver einen Datensatz, der nur die Zeilen enthält,
denen die Klasse „.product“ zugewiesen ist.
Sie müssen im Dialogfeld „Datenquelle angeben“ das Kontrollkästchen „Erweiterte Datenauswahl“ aktivieren, damit
auf die Datenselektor-Textfelder zugegriffen werden kann. Wenn Sie Datenselektoren eingeben und dann das
Kontrollkästchen deaktivieren, bleibt der in die Textfelder eingegebene Inhalt zwar erhalten, wird jedoch nicht mehr
zum Filtern des Datensatzes verwendet.
Dynamische Spry-Mastertabellen und Aktualisierung von Detailbereichen
Mit der häufigste Verwendungszweck von Spry-Datensätzen ist die Erstellung einer oder mehrerer HTML-Tabellen,
die auf Benutzeraktionen hin andere Seitendaten dynamisch aktualisieren. Wenn ein Benutzer beispielsweise ein
Produkt aus einer Liste von Produkten in einer Tabelle auswählt, ist es möglich, dass sofort Daten an anderer Stelle auf
der Seite mit Detailinformationen zum ausgewählten Produkt aktualisiert werden. Mit Spry ist für diese
Aktualisierungen kein erneuter Seitenaufbau erforderlich.
Diese separaten Seitenbereiche werden als Master- und Detail-Bereiche bezeichnet. Normalerweise werden in einem
Bereich der Seite (Masterbereich) eine Liste kategorisierter Elemente (z. B. eine Produktliste) und in einem anderen
Seitenbereich (Detailbereich) ausführlichere Informationen zum ausgewählten Eintrag angezeigt.
Für jeden Datensatz wird die jeweils aktuelle Zeile vermerkt. Standardmäßig ist als aktuelle Zeile zuerst die erste
Datenzeile des Datensatzes festgelegt. Wenn ein Benutzer eine unterschiedliche Auswahl im Masterbereich vornimmt
(z. B. in der Liste unterschiedlicher Produkte), bedeutet dies, dass von Spry die aktuelle Zeile des Datensatzes geändert
wird. Da der Detailbereich vom Masterbereich abhängt, führen alle durch Benutzerinteraktionen auftretenden
Änderungen am Masterbereich (z. B. die Auswahl anderer Produkte) zu Änderungen der im Detailbereich
angezeigten Daten.
511
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
In Dreamweaver werden Master-/Detaillayouts automatisch erstellt, sodass alle Zuordnungen zwischen Master- und
Detailbereich korrekt eingerichtet sind. Wenn Sie jedoch selbst eine dynamische Mastertabelle erstellen möchten,
besteht die Möglichkeit, sie für die spätere Zuordnung zu einem Detailbereich vorzubereiten. Wenn Sie (im Dialogfeld
„Tabelle einfügen“) das Kontrollkästchen „Detailbereiche beim Klicken auf Zeile aktualisieren“ aktivieren, fügt
Dreamweaver innerhalb des Tags für die sich wiederholende Zeile der dynamischen Tabelle ein Tag
spry:setrow ein.
Mit diesem Attribut wird die Tabelle als Mastertabelle vorbereitet, mit der die aktuelle Zeile des Datensatzes in
Abhängigkeit von Benutzerinteraktionen mit der Tabelle neu festgelegt werden kann.
Weitere Informationen zum manuellen Erstellen von Master- und Detailbereichen finden Sie im Spry-
Entwicklerhandbuch unter www.adobe.com/go/learn_dw_sdg_masterdetail_de.
Spry-Bereiche erstellen
Für das Spry-Framework werden zwei Bereichstypen verwendet. Einer davon ist der Spry-Bereich, der Datenobjekte
wie Tabellen und Wiederholungslisten umschließt, der andere ist der Spry-Detailbereich, der zusammen mit
Mastertabellenobjekten verwendet wird und die dynamische Aktualisierung von Daten auf einer Dreamweaver Seite
ermöglicht.
Alle Spry-Datenobjekte müssen in einem Spry-Bereich eingeschlossen sein. (Wenn Sie noch keinen Spry-Bereich
erstellt haben und ein Spry-Datenobjekt zu einer Seite hinzufügen wollen, werden Sie von Dreamweaver aufgefordert,
zunächst einen Spry-Bereich zu erstellen.) Spry-Bereiche befinden sich standardmäßig in HTML-
<div>-Containern.
Sie können Sie vor dem Erstellen von Tabellen hinzufügen, automatisch beim Einfügen von Tabellen oder
Wiederholungslisten erstellen oder bestehende Tabellen oder Wiederholungslistenobjekte darin einschließen.
Beim Hinzufügen von Detailbereichen beginnen Sie normalerweise mit dem Mastertabellenobjekt und aktivieren
dann das Kontrollkästchen „Detailbereiche beim Klicken auf Zeile aktualisieren“ (siehe “Layout mit dynamischer
Tabelle” on page 506). Der einzige Wert, der für einen Detailbereich typisch ist, ist die Option „Typ“ im Dialogfeld
„Spry-Bereich einfügen“.
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Bereich“.
Sie können auch in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Spry-Bereich“ klicken.
2 Für den Objektcontainer wählen Sie die Option „<DIV>“ oder „<SPAN>“. Standardmäßig wird ein <div>-
Container verwendet.
3 Wählen Sie eine der folgenden Optionen aus:
• Um einen Spry-Bereich zu erstellen, wählen Sie unter „Typ“ die Option „Bereich“.
• Um einen Spry-Detailbereich zu erstellen, wählen Sie die Option „Detailbereich“. Das sollten Sie nur tun, wenn Sie
dynamische Daten binden wollen, die bei sich verändernden Daten in einem anderen Spry-Bereich aktualisiert
werden.
Important: Detailbereiche müssen in einem anderen <div> als dem des Mastertabellenbereichs eingefügt werden. Um
den Einfügepunkt präzise zu setzen, empfiehlt es sich, in die Codeansicht zu wechseln.
4 Wählen Sie Ihren Spry-Datensatz aus dem Menü aus.
5 Wenn Sie den definierten Bereich für ein Objekt erstellen bzw. ändern möchten, wählen Sie zunächst das Objekt
und dann Folgendes aus:
Auswahl umbrechen Umschließt das Objekt mit einem neuen Bereich.
Auswahl ersetzen Ersetzt den aktuellen Bereich eines Objekts.
512
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
6 Wenn Sie auf „OK“ klicken, fügt Dreamweaver einen Bereichsplatzhalter mit dem Text „Inhalt für Spry-Bereich
hier einfügen“ in Ihre Seite ein. Sie können diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle
oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld „Bindungen“ („Fenster“ >
„Bindungen“) ersetzen.
Im Bedienfeld „Bindungen“ werden die verfügbaren Daten des Datensatzes angezeigt.
Note: Das Bedienfeld „Bindungen“ beinhaltet einige integrierte Spry-Elemente, darunter auch „ds_RowID“,
„ds_CurrentRowID“ und „ds_RowCount“. Anhand dieser Elemente kann in Spry die Zeile ermittelt werden, auf die der
Benutzer geklickt hat, um dann die dynamischen Detailbereiche aktualisieren zu können.
7 Klicken Sie dazu in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche für das entsprechende
Spry-Datenobjekt.
8 Um den Platzhaltertext mit dynamischen Daten zu ersetzen, wählen Sie eine der folgenden Möglichkeiten:
• Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld „Bindungen“ über den ausgewählten Text.
• Geben Sie in der Codeansicht den Code für ein oder mehrere Elemente ein. Verwenden Sie folgendes Format:
{dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer
Datei nur einen Datensatz oder Datenelemente aus dem für Ihren Bereich verwendeten Satz benutzen, können Sie
den Namen des Datensatzes weglassen und dafür
{category} oder {desc} schreiben.
Welche Methode Sie für die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende
Zeilen zu Ihrem HTML-Code hinzugefügt:
<div spry:region="ds1">{name}{category}</div>
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Spry-Wiederholungsbereiche erstellen
Sie können Wiederholungsbereiche zur Anzeige Ihrer Daten hinzufügen. Bei einem Wiederholungsbereich handelt es
sich um eine einfache Datenstruktur, die Sie beliebig für die Anzeige Ihrer Daten formatieren können. So können Sie
beispielsweise mithilfe eines Wiederholungsbereichs mehrere Fotominiaturansichten nacheinander in einem
Seitenlayoutobjekt (z. B. in einem AP-
div-Element) anzeigen.
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Wiederholung“.
Sie können auch in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Spry-Wiederholung“
klicken.
2 Für den Objektcontainer wählen Sie je nach gewünschtem Tag-Typ die Option „<DIV>“ oder „<SPAN>“.
Standardmäßig wird ein <div>-Container verwendet.
3 Wählen Sie die Option „Wiederholen“ (Standard) oder „Untergeordnete Elemente wiederholen“.
513
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Um flexibel zu bleiben, wählen Sie die Option „Untergeordnete Elemente wiederholen“. Dadurch wird die
Datenüberprüfung in jeder Listenzeile auf der untergrordneten Ebene durchgeführt. Angenommen, Sie haben eine
<ul>-Liste und die Daten werden auf <li>-Ebene eingecheckt. Wenn Sie die Option „Wiederholen“ wählen, werden die
Daten auf der <ul>-Ebene eingecheckt. Die Option „Untergeordnete Elemente wiederholen“ kann sich als besonders
nützlich erweisen, wenn Sie in Ihrem Code bedingte Ausdrücke verwenden.
4 Wählen Sie Ihren Spry-Datensatz aus dem Menü.
5 Wenn bereits ein Text oder Element ausgewählt ist, können Sie ihn/es umschließen oder ersetzen.
6 Klicken Sie auf „OK“, um einen Wiederholungsbereich auf Ihrer Seite anzuzeigen.
Note: Alle Spry-Datenobjekte müssen sich in entsprechenden Bereichen befinden, um sicherzustellen, dass Sie vor dem
Einfügen eines wiederholenden Bereichs einen Spry-Bereich auf der Seite erstellt haben.
7 Wenn Sie auf „OK“ klicken, fügt Dreamweaver einen Bereichsplatzhalter mit dem Text „Inhalt für Spry-Bereich
hier einfügen“ in Ihre Seite ein. Sie können diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle
oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld „Bindungen“ („Fenster“ >
„Bindungen“) ersetzen.
Im Bedienfeld „Bindungen“ werden die verfügbaren Daten des Datensatzes angezeigt.
Note: Das Bedienfeld „Bindungen“ beinhaltet einige integrierte Spry-Elemente, darunter auch „ds_RowID“,
„ds_CurrentRowID“ und „ds_RowCount“. Anhand dieser Elemente kann in Spry die Zeile ermittelt werden, auf die der
Benutzer geklickt hat, um dann die dynamischen Detailbereiche aktualisieren zu können.
8 Klicken Sie dazu in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche für das entsprechende
Spry-Datenobjekt.
9 Um den Platzhaltertext mit einem oder mehreren dynamischen Datensätzen zu ersetzen, wählen Sie eine der
folgenden Möglichkeiten:
• Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld „Bindungen“ über den ausgewählten Text.
• Geben Sie in der Codeansicht den Code für ein oder mehrere Elemente ein. Verwenden Sie folgendes Format:
{dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer
Datei nur einen Datensatz oder Datenelemente aus dem für Ihren Bereich verwendeten Satz benutzen, können Sie
den Namen des Datensatzes weglassen und dafür
{category} oder {desc} schreiben.
Welche Methode Sie für die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende
Codezeilen zu Ihrem HTML-Code hinzugefügt:
<div spry:region="ds1">{name}{category}</div>
<div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
514
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Spry-Wiederholungslistenbereiche erstellen
Sie können Wiederholungslisten zur Anzeige Ihrer Daten als geordnete oder ungeordnete (mit Aufzählungszeichen)
Listen, Definitionslisten oder Dropdown-Listen hinzufügen.
1 Wählen Sie „Einfügen“ > „Spry“ > „Spry-Wiederholungsliste“.
Sie können auch in der Kategorie „Spry“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Spry-Wiederholungsliste“
klicken.
2 Wählen Sie das Container-Tag aus, das Sie verwenden wollen: UL, OL, DL oder SELECT. Die anderen Optionen
variieren je nach ausgewähltem Container. Wenn Sie „SELECT“ wählen, müssen Sie folgende Felder definieren:
• Spalte anzeigen: Dieser Seiteninhalt wird dem Benutzer im Browser angezeigt.
• Wertespalte Dies ist der an den Background-Server gesendete Wert.
So können Sie beispielsweise eine Liste der US-Bundesstaaten erstellen und dem Benutzer Namen wie „Alabama“ und
„Alaska“ anzeigen. An den Server wird allerdings „AL“ bzw. „AK“ gesendet. Oder Sie verwenden „SELECT“ als
Navigationsleiste und zeigen dem Benutzer Produktnamen wie „Adobe Dreamweaver“ und „Adobe Acrobat“ an,
senden aber URLs wie „support/products/dreamweaver.html“ und „support/products/acrobat.html“ an den Server.
3 Wählen Sie Ihren Spry-Datensatz aus dem Menü aus.
4 Wählen Sie die anzuzeigenden Spalten.
5 Klicken Sie auf „OK“, um eine Wiederholungsliste auf Ihrer Seite anzuzeigen. In der Codeansicht sehen Sie, dass
<ul>-, <ol>-, <dl>-HTML- oder FORM-Auswahl-Tags in Ihre Datei eingefügt wurden.
Note: Wenn noch kein Bereich vorhanden ist und Sie eine Wiederholungsliste hinzufügen wollen, werden Sie von
Dreamweaver aufgefordert, zunächst einen Bereich zu erstellen. Alle Spry-Datenobjekte müssen in Bereichen enthalten
sein.
Spry-Effekte hinzufügen
Spry-Effekte
Spry-Effekte sind optische Verbesserungen, die Sie mithilfe von JavaScript auf praktisch alle Elemente einer HTML-
Seite anwenden können. Solche Effekte werden oft zum Hervorheben von Informationen, Erstellen von animierten
Übergängen oder temporäre Änderungen des Erscheinungsbilds eines Seitenelements verwendet. Sie können Effekte
auf HTML-Elemente anwenden, ohne spezielle zusätzliche Tags zu benötigen.
Note: Um einen Effekt auf ein Element anwenden zu können, muss dieses ausgewählt sein oder eine ID besitzen. Wenn
Sie beispielsweise ein nicht ausgewähltes
div-Tag markieren möchten, muss dieses einen gültigen ID-Wert besitzen.
Wenn das Element nicht schon eines besitzt, müssen Sie eines zum HTML-Code hinzufügen.
Effekte können die Transparenz, Skalierung, Position oder Stil, z. B. die Hintergrundfarbe, eines Elements
beeinflussen. Durch die Kombination zweier oder mehrerer Effekte lassen sich interessante optische Effekte erzielen.
Da diese Effekte auf Spry basieren, wird beim Klicken auf ein Objekt, auf das ein Effekt angewendet wurde, nur das
Objekt und nicht die gesamte HTML-Seite aktualisiert.
Spry verfügt über folgende Effekte:
Einblenden/Ausblenden Blendet Elemente ein oder aus.
Markieren Ändert die Hintergrundfarbe eines Elements.
515
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Jalousie Simuliert eine Fensterjalousie, die das Element beim Öffnen bzw. Schließen verbirgt oder zeigt.
Schieben Verschiebt das Element nach oben bzw. unten.
Vergrößern/Verkleinern Vergrößert bzw. verkleinert das Element.
Schütteln Simuliert das Schütteln eines Elements von links nach rechts.
Quetschen Lässt das Element an der oberen linken Seitenecke verschwinden.
Important: Wenn Sie Effekte verwenden, werden mehrere Zeilen Code zu Ihrer Datei in der Codeansicht hinzugefügt.
Eine Zeile steht für die Datei „SpryEffects.js“, die für das Hinzufügen von Effekten erforderlich ist. Wenn Sie diese Zeile
entfernen, können die Effekte nicht funktionieren.
Einen umfassenden Überblick über die Effekte des Spry-Frameworks finden Sie unter
www.adobe.com/go/learn_dw_spryeffects_de.
Ein-/Ausblendeffekte anwenden
Note: Sie können diesen Effekt mit allen HTML-Elementen außer applet, body, iframe, object, tr, tbody und th
verwenden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
„Effekte“ > „Einblenden/Ausblenden“ aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
4 Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
5 Wählen Sie den anzuwendenden Effekt aus, also „Einblenden“ oder „Ausblenden“.
6 Legen Sie im Feld „Ausblenden von“ den Prozentsatz für die Transparenz fest, den der Effekt bei seiner Aktivierung
haben soll.
7 Im Feld „Ausblenden bis“ bestimmen Sie den Prozentsatz für die Transparenz, auf den ausgeblendet werden soll.
8 Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken ein-
bzw. ausgeblendet wird.
Jalousieeffekte anwenden
Note: Diesen Effekt können Sie nur mit den HTML-Elementen address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p,
ol, ul, li, applet, center, dir, menu oder pre verwenden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
„Effekte“ > „Jalousie“ aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
4 Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
5 Wählen Sie den anzuwendenden Effekt aus, also „Jalousie nach oben“ oder „Jalousie nach unten“.
6 Legen Sie mit der Option „Jalousie nach oben von“ bzw. „Jalousie nach unten von“ den Startpunkt der Jalousie in
Prozent bzw. Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
516
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
7 Legen Sie mit der Option „Jalousie nach oben bis“ oder „Jalousie nach unten bis“ den Endpunkt der Jalousie in
Prozent oder Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
8 Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also die Jalousie bei wiederholtem
Klicken auf-/zugezogen wird.
Vergrößern/Verkleinern-Effekte anwenden
Note: Diesen Effekt können Sie mit den HTML-Elementen address, dd, div, dl, dt, form, p, ol, ul, applet, center,
dir, menu und pre verwenden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
„Effekte“ > „Vergrößern/Verkleinern“ aus.
3 Wählen Sie im Popupmenü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde,
wählen Sie „<Aktuelle Auswahl>“ aus.
4 Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
5 Wählen Sie den anzuwendenden Effekt aus, also „Vergrößern“ bzw. „Verkleinern“.
6 Legen Sie im Feld „Vergrößern von“ oder „Verkleinern von“ die Größe des Elements am Anfang des Effekts fest.
Zur Auswahl stehen Prozent und Pixel.
7 Legen Sie im Feld „Vergrößern auf“ oder „Verkleinern auf“ die Größe des Elements am Ende des Effekts fest. Zur
Auswahl stehen Prozent und Pixel.
8 Wenn Sie für eine der Optionen den Pixelwert auswählen, wird ein Feld mit den Optionen „breit“ bzw. „hoch“
angezeigt. Je nach der gewählten Option wird das Element proportional verkleinert bzw. vergrößert.
9 Entscheiden Sie, ob Sie das Element zur oberen linken Ecke oder zur Mitte der Seite hin vergrößern bzw.
verkleinern möchten.
10 Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken
verkleinert bzw. vergrößert wird.
Hervorhebungseffekte anwenden
Note: Dieser Effekt kann mit allen HTML-Elementen außer applet, body, frame, frameset oder noframes verwendet
werden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
„Effekte“ > „Hervorheben“ aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
4 Legen Sie im Feld „Effektdauer“ die Dauer des Effekts in Millisekunden fest
5 Wählen Sie die Farbe, mit der die Hervorhebung beginnen soll.
6 Wählen Sie die Farbe, mit der die Hervorhebung enden soll. Die Farbdarstellung währt nur für den unter
„Effektdauer“ gewählten Zeitraum.
7 Wählen Sie die Farbe des Elements nach dem Ende der Hervorhebung aus.
8 Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also dass bei wiederholtem
Klicken durch die Hervorhebungsfarben gewechselt wird.
517
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
Schütteleffekte anwenden
Note: Diesen Effekt können Sie mit den HTML-Elementen address, blockquote, dd, div, dl, dt, fieldset, form, h1,
h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre und table verwenden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
die Option „Effekte“ > „Schütteln“ aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
Verschiebungseffekte anwenden
Damit Verschiebungseffekte korrekt ausgeführt werden können, muss das Zielelement in einem Container-Tag mit
einer eindeutigen ID eingeschlossen sein. Bei dem Container-Tag, in den das Zielelement eingeschlossen ist, muss es
sich um ein
blockquote-, dd-, form-, div- oder center-Tag handeln.
Beim Tag für das Zielelement muss es sich um eines der folgenden Tags handeln:
blockquote, dd, div, form, center,
table, span, input, textarea, select oder image.
1 Optional: Wählen Sie das Container-Tag des Inhalts aus, auf den der Effekt angewendet werden soll.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
die Option „Effekte“ > „Schieben“ aus.
3 Wählen Sie im Menü des Zielelements die ID des Container-Tags aus. Wenn das Container-Tag bereits ausgewählt
wurde, wählen Sie „<Aktuelle Auswahl>“ aus.
4 Legen Sie im Feld „Effektdauer“ die Zeitverzögerung in Millisekunden für den Effektstart fest.
5 Wählen Sie den anzuwendenden Effekt aus, also „Nach oben schieben“ oder „Nach unten schieben“.
6 Legen Sie im Feld „Nach oben schieben von“ den Startpunkt der Verschiebung in Prozent oder Pixel fest.
7
Legen Sie im Feld „Nach oben schieben bis“ den Endpunkt der Verschiebung in Prozent oder Pixel (positiver Wert) fest.
8 Wählen Sie die Option „Effekt umkehren“, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken
nach oben bzw. unten verschoben werden soll.
Quetscheffekte anwenden
Note: Diesen Effekt können Sie nur mit den HTML-Elementen address, dd, div, dl, dt, form, img, p, ol, ul, applet,
center, dir, menu und pre verwenden.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
die Option „Effekte“ > „Quetschen“ aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
Zusätzliche Effekte hinzufügen
Sie können mehrere Effektverhalten auf ein und dasselbe Element anwenden, was zu interessanten Resultaten führen
kann.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
518
VERWENDEN VON DREAMWEAVER
Spry-Seiten visuell erstellen
Last updated 10.4.2012
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Plussymbol (+) und wählen Sie im Menü
„Effekte“ den gewünschten Effekt aus.
3 Wählen Sie im Menü „Zielelement“ die ID des Elements aus. Wenn bereits ein Element ausgewählt wurde, wählen
Sie „<Aktuelle Auswahl>“ aus.
Effekte löschen
Sie können ein oder mehrere Effektverhalten aus einem Element entfernen.
1 Optional: Wählen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden möchten.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf den Effekt, den Sie aus der Liste der Verhalten
entfernen möchten.
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf die Schaltfläche mit dem QuickInfo „Ereignis entfernen“ (-) oberhalb der Effektliste.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie
„Verhalten löschen“.
519
Last updated 10.4.2012
Chapter 16: Webseiten für mehrere
Bildschirme und Geräte entwerfen
Erstellen von Medienabfragen (ab Version CS 5.5)
Mithilfe von Medienabfragen können Sie basierend auf den gemeldeten Eigenschaften eines Geräts CSS-Dateien
angeben. Der Browser auf einem Gerät prüft die Medienabfrage und zeigt die Webseite unter Verwendung der
entsprechenden CSS-Datei an.
Mit der folgenden Medienabfrage wird beispielsweise die Datei phone.css für Geräte angegeben, deren Anzeige eine
Breite von 300 bis 320 Pixel aufweist.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width:
300px) and (max-width: 320px)">
Ausführliche Informationen zu Medienabfragen finden Sie in Don Booths Artikel im Adobe Developer Center
www.adobe.com/go/learn_dw_medquery_don_de.
W3C-Informationen zu Medienabfragen finden Sie unter www.w3.org/TR/css3-mediaqueries/.
Erstellen von Medienabfragen
In Dreamweaver können Sie eine Datei für die siteübergreifende Medienabfrage oder eine dokumentspezifische
Medienabfrage erstellen.
Datei für siteübergreifende Medienabfrage Gibt Anzeigeeinstellungen für alle Seiten in Ihrer Site an, die die Datei
enthalten.
Die Datei für die siteübergreifende Medienabfrage dient als zentrales Repository für alle Medienabfragen in Ihrer Site.
Nach dem Erstellen dieser Datei müssen Sie auf den Seiten in Ihrer Site, die zur Anzeige die Medienabfrage in der Datei
verwenden müssen, eine Verknüpfung zu der Datei erstellen.
Dokumentspezifische Medienabfrage Die Medienabfrage wird direkt in das Dokument eingefügt und die Seite wird
entsprechend der eingefügten Medienabfrage angezeigt.
1 Erstellen Sie eine Webseite.
2 Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.
3 Führen Sie einen der folgenden Schritte aus:
• Um eine siteübergreifende Medienabfragedatei zu erstellen, aktivieren Sie die Option „Datei für
siteübergreifende Medienabfragen“.
• Um eine dokumentspezifische Medienabfrage zu erstellen, aktivieren Sie die Option „Dieses Dokument“.
4 Bei einer siteübergreifenden Medienabfrage führen Sie die folgenden Schritte aus:
a Klicken Sie auf „Festlegen“.
b Wählen Sie „Neue Datei erstellen“ aus.
c Geben Sie einen Namen für die Datei ein und klicken Sie auf „OK“.
5 Möglicherweise melden einige Geräte nicht die tatsächliche Breite. Stellen Sie sicher, dass die Option „Geräte
anweisen, die tatsächliche Breite zu melden“ aktiviert ist, damit Geräte auch die tatsächliche Breite melden.
520
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Bei Aktivierung dieser Option wird der folgende Code in die Datei eingefügt.
<meta name="viewport" content="width=device-width">
6 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf das Symbol mit dem Pluszeichen („+“), um die Eigenschaften für die Datei für die
Medienabfrage festzulegen.
• Klicken Sie auf „Standardvorgaben“, wenn Sie mit den Standardvorgaben beginnen möchten.
7 Markieren Sie Zeilen in der Tabelle und bearbeiten Sie die Eigenschaften mithilfe der Optionen unter
„Eigenschaften“.
Beschreibung Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise
Mobiltelefon, TV, Tablet usw.
„Min. Breite“ und „Max. Breite“ Die CSS-Datei wird für Geräte verwendet, deren gemeldete Breite im Bereich der
angegebenen Werte liegt.
Note: Geben Sie entweder für „Min. Breite“ oder für „Max. Breite“ keinen Wert ein, wenn Sie für ein Gerät keinen
bestimmten Bereich festlegen möchten. Für gewöhnlich wird z. B. bei Mobiltelefonen mit einer Breite von maximal
320 Pixel im Feld „Min. Breite“ keine Eingabe vorgenommen.
CSS-Datei Wählen Sie „Vorhandene CSS-Datei verwenden“ aus und wechseln Sie zur CSS-Datei für das Gerät.
Wenn Sie eine CSS-Datei angeben möchten, die noch erstellt werden muss, wählen Sie „Neue Datei erstellen“ aus.
Geben Sie den Namen der CSS-Datei ein. Die Datei wird dann nach dem Klicken auf „OK“ erstellt.
8 Klicken Sie auf „OK“.
9 Bei einer siteübergreifenden Medienabfrage wird eine neue Datei erstellt. Speichern Sie sie.
Siteübergreifende Medienabfrage: Stellen Sie bei vorhandenen Seiten sicher, dass Sie die Datei für die Medienabfrage
in allen Seiten in das <head>-Tag einfügen.
Beispiel für eine Verknüpfung mit einer Medienabfrage, wobei „mediaquery_adobedotcom.css“ die Datei für die
siteübergreifende Medienabfrage für die Website „www.adobe.com“ ist:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Vorhandene Datei für die Medienabfrage verwenden
1 Erstellen Sie eine Webseite oder öffnen Sie eine vorhandene Webseite.
2 Wählen Sie „Modifizieren“ > „Medienabfragen“ aus.
3 Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.
4 Klicken Sie auf „Festlegen“.
5 Wählen Sie „Vorhandene CSS-Datei verwenden“ aus, wenn Sie bereits eine CSS-Datei mit der Medienabfrage
erstellt haben.
6 Wechseln Sie durch Klicken auf das Symbol zum Durchsuchen zu der Datei und geben Sie sie an. Klicken Sie auf
„OK“.
7 Wählen Sie „Datei für siteübergreifende Medienabfrage“ aus.
8 Stellen Sie sicher, dass die Option „Geräte anweisen, die tatsächliche Breite zu melden“ aktiviert ist, damit Geräte
auch die tatsächliche Breite melden. Bei Aktivierung dieser Option wird der folgende Code in die Datei eingefügt.
<meta name="viewport" content="width=device-width">
521
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
9 Klicken Sie auf „OK“.
Andere Datei für die siteübergreifende Medienabfrage auswählen
Führen Sie die folgenden Schritte aus, um die Datei für die siteübergreifende Medienabfrage zu ändern, die Sie im
Dialogfeld „Medienabfragen“ festgelegt haben.
1 Wählen Sie „Site“ > „Sites verwalten“ aus.
2 Wählen Sie im Dialogfeld „Sites verwalten“ Ihre Site aus.
3 Klicken Sie auf „Bearbeiten“. Das Dialogfeld „Site-Definition“ wird angezeigt.
4 Wählen Sie im linken Fensterbereich unter „Erweiterte Einstellungen“ die Option „Lokale Info“ aus.
5 Klicken Sie im rechten Fensterbereich unter „Datei für siteübergreifende Medienabfrage“ auf „Durchsuchen“, um
die CSS-Datei für die Medienabfrage auszuwählen.
Note: Die Änderung der Datei für die siteübergreifende Medienabfrage hat keine Auswirkungen auf Dokumente, die
mit einer anderen oder früheren Datei für die siteübergreifende Medienabfrage verknüpft sind.
6 Klicken Sie auf „Speichern“.
Webseiten basierend auf Medienabfragen anzeigen
Die in einer Medienabfrage angegebenen Abmessungen werden in den Optionen für die Schaltfläche „Multi-Screen“
bzw. für die Fenstergröße angezeigt. Wenn Sie im Menü eine Abmessung auswählen, werden die folgenden
Änderungen angezeigt:
• Die Anzeigegröße ändert sich entsprechend den angegebenen Abmessungen. Die Frame-Größe des Dokuments
bleibt unverändert.
• Die in der Medienabfrage angegebene CSS-Datei wird zum Anzeigen der Seite verwendet.
Ändern der Seitenausrichtung für mobile Geräte (ab
Version CS5.5)
Bei den meisten modernen Mobilgeräten ändert sich die Ausrichtung einer Seite, je nachdem, wie das Gerät gehalten
wird. Wenn der Benutzer das Mobilgerät hochkant hält, wird die Seite im Hochformat angezeigt. Wenn der Benutzer
das Gerät auf die Querseite dreht, wird die Anzeige der Seite automatisch angepasst und im Querformat angezeigt.
In Dreamweaver sind die Optionen zum Anzeigen einer Seite im Hoch- oder Querformat sowohl in der Live-Ansicht
als auch in der Entwurfsansicht verfügbar. Durch Verwenden dieser Optionen können Sie testen, wie die Darstellung
der Seite an diese Einstellungen angepasst wird. Sie können dann bei Bedarf die CSS-Datei ändern, sodass die Seite wie
vorgesehen in beiden Ausrichtungen angezeigt wird.
❖ Wählen Sie „Ansicht“ > „Fenstergröße“ > „Ausrichtung Querformat“ oder „Ausrichtung Hochformat“ aus.
522
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Erstellen von Webanwendungen für mobile Geräte
(CS5.5)
Erstellen von Webanwendungen für mobile Geräte (CS5.5)
Durch die Unterstützung von jQuery Mobile in Dreamweaver können Sie in kurzer Zeit eine Webanwendung
entwickeln, die auf den meisten Mobilgeräten funktioniert und sich jeweils an die Größe des Geräts anpasst.
More Help topics
http://jquerymobile.com/demos/1.0a3/
Erstellen einer Webanwendung mit jQuery Mobile
1. Öffnen einer jQuery Mobile-Starterseite oder Erstellen einer HTML5-Seite
Mithilfe der jQuery Mobile-Starterseiten in Dreamweaver können Sie eigene Anwendungen erstellen. Sie können die
Webanwendungsentwicklung auch mit einer neuen HTML5-Seite beginnen.
Die jQuery Mobile-Starterseiten bieten HTML-, CSS-, JavaScript- und Bilddateien an, die Sie bei der Entwicklung
Ihrer ersten Anwendung unterstützen. Sie können CSS- und JavaScript-Dateien verwenden, die zusammen mit
Dreamweaver installiert worden sind, oder Dateien von einem CDN oder von Ihrem eigenen Server.
Note: In der Codeansicht zeigen die Tags
<link> und <script src>, wo die verknüpften Dateien liegen.
2. Einfügen von jQuery Mobile-Komponenten aus dem Bedienfeld „Einfügen“
Sie können jQuery Mobile-Komponenten aus dem Bedienfeld „Einfügen“ in die HTML-Seite einfügen. Die jQuery
Mobile-CSS- und -JavaScript-Dateien definieren den Stil und das Verhalten der Komponenten.
CDNs und lokale jQuery Mobile-Dateien
CDNs
Ein CDN (Content Delivery Network) ist ein Computer-Netzwerk, das Kopien von Daten enthält, die an
verschiedenen Stellen im Netzwerk hinterlegt worden sind. Wenn Sie eine Webanwendung mit einer URL zu einem
CDN erstellen, werden für diese Anwendung die in der URL angegebenen CSS- und JavaScript-Dateien verwendet.
Standardmäßig verwendet Dreamweaver das jQuery Mobile-CDN.
Sie können aber auch URLs zu CDNs anderer Sites wie Microsoft oder Google verwenden. In der Codeansicht können
Sie die Serveradresse der in den Tags
<link> und <script src> angegebenen CSS- und JavaScript-Dateien ändern.
Die vom CDN heruntergeladenen Dateien sind schreibgeschützt.
More Help topics
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
Lokale jQuery Mobile-Dateien
Beim Installieren von Dreamweaver werden die jQuery Mobile-Dateien auf Ihren Computer kopiert. Wenn Sie sich
für die (lokale) jQuery Mobile-Starterseite entscheiden, wird eine HTML-Seite geöffnet, die mit lokalen CSS-,
JavaScript- und Bilddateien verknüpft ist.
523
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Starterseiten für jQuery Mobile
Dreamweaver bietet folgende jQuery Mobile-Starterseiten für die Anwendungsentwicklung an.
jQuery Mobile (CDN) Verwenden Sie diese Starterseite, wenn die jQuery Mobile-Bibliothek auf einem CDN liegt.
jQuery Mobile (lokal) Verwenden Sie diese Starterseite, wenn die Elemente lokal gespeichert sind oder die
Anwendung auch ohne Internet-Verbindung funktionieren soll.
jQuery Mobile (PhoneGap) Verwenden Sie diese Starterseite, wenn die Webanwendung bei der Bereitstellung als
mobile Anwendung auf Funktionen von Mobilgeräten zurückgreift. Weitere Informationen finden Sie unter
“Verpacken von Webanwendungen” on page 524.
Erstellen von Anwendungen für mobile Geräte mithilfe von Starterseiten
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie eine der folgenden Befehlsfolgen:
• „Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (CDN)“.
• „Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (lokal)“.
3 Klicken Sie auf „Erstellen“.
Aktivieren Sie für die erstellte Seite die Option „Hyperlinks fortlaufend aufrufen“ (mit „Ansicht“ > „Live-Ansicht-
Optionen“) und aktivieren Sie die Live-Ansicht (mit „Ansicht“ > „Live-Ansicht“). Verwenden Sie die
Navigationskomponenten, um die Funktionalität der Anwendung zu testen.
Verwenden Sie die Optionen im Popupmenü „Multi-Screen“, um zu sehen, wie der Entwurf auf Geräten mit
unterschiedlich großem Display angezeigt wird. Deaktivieren die Live-Ansicht, so dass Sie wieder in der
Entwurfsansicht arbeiten können.
4 Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery
Mobile“ aus. Im Bedienfeld werden Komponenten angezeigt, die Sie in eine Webanwendung einfügen können.
5 Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie
im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie
die Komponenten mithilfe der jeweiligen Optionen an.
6 (jQuery Mobile - lokal.) Beim Speichern der HTML-Datei werden die jQuery Mobile-Dateien, einschließlich der
Bilddateien, in einen Ordner im HTML-Verzeichnis kopiert.
Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in
der Live-Ansicht angewendet.
More Help topics
http://en.wikipedia.org/wiki/Content_delivery_network
http://docs.jquery.com/Downloading_jQuery
Erstellen von Webanwendungen für mobile Geräte aus einer neuen Seite
Die Komponente „Seite“ ist der Container für alle anderen jQuery Mobile-Komponenten. Fügen Sie daher zuerst die
Komponente „Seite“ ein, bevor Sie weitere Komponenten in die Seite einsetzen.
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie „Leere Seite“ > „HTML“.
524
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Einige der jQuery Mobile-Komponenten verwenden HTML5-spezifische Attribute. Um sicherzustellen, dass bei
der Überprüfung die HTML5-Regeln eingehalten werden, wählen Sie aus dem Popupmenü „DocType“den
Dokumententyp „HTML 5“ aus.
3 Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery
Mobile“ aus. Im Bedienfeld werden die jQuery Mobile-Komponenten angezeigt.
4 Ziehen Sie vom Bedienfeld „Einfügen“ die Komponente „Seite“ in die Entwurfsansicht.
5 Wählen Sie im Dialogfeld „jQuery Mobile-Dateien“ einen Verknüpfungstyp aus:
Remote (CDN) Wenn die jQuery Mobile-Dateien auf einem Remote-CDN-Server liegen, können Sie die
Verbindung mit dieser Option herstellen. Wenn Sie keine eigene Site mit den jQuery Mobile-Dateien eingerichtet
haben, sollten Sie hier die Standardoptionen für jQuery-Site übernehmen. Sie können auch andere CDN Server
verwenden.
Lokal Es werden die in Dreamweaver verfügbaren Dateien angezeigt. Um einen anderen Ordner anzugeben,
klicken Sie auf „Durchsuchen“ und wählen den Pfad zu dem Ordner mit den jQuery Mobile-Dateien aus.
Die CSS- und JavaScript-Dateien werden in einen temporären lokalen Ordner kopiert, bis Sie die HTML-Datei auf
Ihrem Computer speichern. Nach dem Speichern der HTML-Datei werden die zugehörigen jQuery Mobile- und
Bilddateien in einen Ordner im Stammverzeichnis der Site kopiert.
6 Legen Sie die Eigenschaften der Komponente „Seite“ fest.
7 Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie
im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie
die Komponenten mithilfe der jeweiligen Optionen an.
Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in
der Live-Ansicht angewendet.
Verwenden eigener Dateien und Ordner
Sie können auch eigene CSS- und JS-Dateien für Ihre Anwendung erstellen. Ihre Dateien müssen auf jeden Fall die
Namen jquery.mobile.js, jquery.mobile.css und jquery.js erhalten.
Wenn Sie eigene Ordner verwenden, führen Sie die folgenden Schritte aus:
1 Laden Sie die unkomprimierte Version der jQuery 1.5-Kernbibliothek von der Site
http://docs.jquery.com/Downloading_jQuery#Download_jQuery herunter.
2 Speichern Sie die Datei in dem Kernordner, der auch die anderen Ressourcen enthält.
Verpacken von Webanwendungen
WICHTIGE ÄNDERUNG BEIM ARBEITSABLAUF FÜR DAS VERPACKEN VON WEBANWENDUNGEN
Bitte beachten Sie, dass seit März 2012 der Arbeitsablauf in Dreamweaver zur Integration von PhoneGap geändert
worden ist. Adobe empfiehlt dringend, dass alle CS5.5-Benutzer die PhoneGap Build-Erweiterung für Dreamweaver
CS5.5 herunterladen, welche die aktuelle, nachfolgend beschriebene Funktionalität zur Anwendungsverpackung
ersetzt.
525
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Verpacken von Webanwendungen als native mobile Anwendungen (CS 5.5)
Durch die Unterstützung von jQuery Mobile und PhoneGap in Dreamweaver können Sie Webanwendungen für die
Bereitstellung auf Android™- und iOS-gestützten Geräten erstellen. Dreamweaver verwendet PhoneGap-SDKs, um
das Paket zu erstellen (eine
.apk-Datei für Android/.xcodeproj für iPhone/iPad)
Nachdem Sie eine mobile Anwendung in Dreamweaver verpackt haben, können Sie sie in einem Geräteemulator
anzeigen oder in Ihrem eigenen Gerät bereitstellen.
Important: Die mobile Anwendung, die Sie mit Dreamweaver verpacken, dient nur dem Zweck der Fehlersuche. Die
Anwendung wird auf dem Android- bzw. iOS-Emulator ausgeführt, oder während der Übertragung auf Ihrem eigenen
mobilen Gerät, aber Sie können die korrigierten mobilen Anwendungen nicht zu den Apple- und Android-Stores
hochladen. Damit Sie iOS- oder Android-Anwendungen hochladen können, müssen Sie sie zusätzlich außerhalb von
Dreamweaver signieren. Weitere Informationen zum Hochladen von Anwendungen zu den Apple- und Android-Stores
finden Sie in der Android-Dokumentation oder im „Program User Guide“ auf dem Apple iOS Provisioning Portal.
(Damit Sie auf das Apple iOS Provisioning Portal zugreifen können, müssen Sie sich beim Apple Developer Program
registrieren [kostenlos] und sich beim iOS Developer Program einschreiben [Jahresgebühr].)
More Help topics
http://www.phonegap.com/about
http://jquerymobile.com/demos/1.0a2/
http://docs.phonegap.com/
Erstellen von Webanwendungen mithilfe der Starterseite
Um die Webanwendung zu erstellen, können Sie eine der Starterseiten verwenden. Wenn Ihre Webanwendung bei
der Bereitstellung als mobile Anwendung auf Funktionen von Mobilgeräten zurückgreift, sollten Sie jedoch die Seite
„jQuery Mobile (PhoneGap)“ verwenden.
Die Starterseite „jQuery Mobile (PhoneGap)“ enthält zusätzlich zu den anderen jQuery Mobile-Dateien die Datei
„phonegap.js“. Die Datei „phonegap.js“ enthält die für die Arbeit mit den nativen, mobilen Leistungsmerkmalen (wie
GPS, Beschleunigungsmesser, Kamera usw.) erforderlichen APIs.
1 Wählen Sie „Datei“ > „Neu“.
2 Wählen Sie „Seite aus Beispiel“ > „Mobile Starter“ > „jQuery Mobile (PhoneGap)“.
3 Klicken Sie auf „Erstellen“.
4 Wählen Sie im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) im Popupmenü links oben die Option „jQuery
Mobile“ aus. Im Bedienfeld werden Komponenten angezeigt, die Sie in eine Webanwendung einfügen können.
5 Platzieren Sie in der Entwurfsansicht den Cursor dort, wo die Komponente eingefügt werden soll, und klicken Sie
im Bedienfeld „Einfügen“ auf die entsprechende Komponente. Falls ein Dialogfeld eingeblendet wird, passen Sie
die Komponenten mithilfe der jeweiligen Optionen an.
Note: Um die Datei „PhoneGap.js“ zu bearbeiten, konfigurieren Sie das Anwendungs-Framework und die
Anwendungseinstellungen. Weitere Informationen finden Sie in den Themen über das Erstellen von
Anwendungspaketen.
Zeigen Sie eine Vorschau der Seite an, indem Sie die Live-Ansicht aktivieren. Einige der CSS-Klassen werden nur in
der Live-Ansicht angewendet.
Systemanforderungen für das Verpacken von Anwendungen
Damit Sie eine Anwendung verpacken können, muss Ihr System den nachfolgenden Anforderungen entsprechen.
526
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
MAC OS - iOS
• Mac OS X Snow Leopard, ab Version 10.6.x
• Xcode 3.2.x mit dem iOS SDK (Installationsanweisungen siehe unten.)
MAC OS - Android
• Mac OS X, ab Version 10.5.8 (nur x86)
• Android SDK (Installationsanweisungen siehe unten.)
Windows - iOS
• Das iOS ist nur für Anwender mit einem Apple-Computer verfügbar
Windows - Android
• Windows XP (32 Bit), Vista (32 oder 64 Bit) oder Windows 7 (32 oder 64 Bit)
• Android SDK (Installationsanweisungen siehe unten.)
Erstellen von Anwendungspaketen (Windows)
Erläuterungen zum Erstellen einer Webanwendung samt Beispieldateien erhalten Sie in diesem Tutorial im
Dreamweaver Developer Center.
1 Öffnen Sie die Webanwendung, die Sie in eine mobile Anwendung konvertieren möchten. Ihre Webanwendung
muss in Dreamweaver als Site eingerichtet sein und weniger als 25 MB umfassen.
Note: Achten Sie darauf, dass die Anwendung nur HTML5-, CSS- und JavaScript-Dateien enthält.
2 Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungs-Framework konfigurieren“.
3 Klicken Sie auf „Einfache Installation“, um das Android SDK zu installieren.
Note: Ist die einfache Installation nicht erfolgreich, lesen Sie bitte die TechNote 90408.
4 Wählen Sie den Pfad zu dem Ordner aus, in dem die SDK-Dateien installiert werden sollen, und klicken Sie auf
„OK“. Wenn die Installation abgeschlossen ist, klicken Sie auf „Speichern“.
5 Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungseinstellungen“.
6 Geben Sie als Bundle-ID einen Namen für das Paket ein und beachten Sie dabei die Anweisungen im Dialogfeld.
7 Geben Sie einen Anwendungsnamen und den Namen des Verfassers ein, also der Person, die die Anwendung
entwickelt hat.
8 Optional können Sie noch folgende Angaben vornehmen:
a Wählen Sie als Anwendungssymbol-PNG die PNG-Datei aus, die als Symbol für die Anwendung verwendet
werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um, wenn Sie das nicht bereits
selbst gemacht haben.
b Geben Sie einen Zielpfad für das Paket an.
c Um die neuesten SDK-Komponenten von Google herunterzuladen, klicken Sie auf „AVDs verwalten“.
Verwenden Sie das Dialogfeld „Android SDK and AVD Manager“, um das Android SDK zu aktualisieren.
Weitere Informationen zur Arbeit mit dem Manager finden Sie unter
http://developer.android.com/sdk/adding-components.html.
Note: Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das
Stammverzeichnis der Site kopiert.
527
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
9 Führen Sie einen der folgenden Schritte aus:
• Wenn Sie Ihre Anwendung direkt für ein bestimmtes Gerät bereitstellen, wählen Sie „Site“ > „Mobile-
Anwendungen“ > „Build“. Wählen Sie eine Plattform bzw. ein Gerät für den Build.
• Wenn Sie sehen wollen, wie der Build auf einem Emulator ausschaut, bevor Sie den Build erstellen, wählen Sie
„Site“ > „ Mobile-Anwendungen“ > „Erstellen und emulieren“.
Anwendungspakete erstellen (Mac OS)
Ein Tutorial zum Erstellen einer Webanwendung samt Beispieldateien finden Sie in diesem Artikel im Dreamweaver
Developer Center.
1 Öffnen Sie die Webanwendung, die Sie in eine mobile Anwendung konvertieren möchten. Ihre Webanwendung
muss in Dreamweaver als Site eingerichtet sein und weniger als 25 MB umfassen.
Note: Achten Sie darauf, dass die Anwendung nur HTML5-, CSS- und JavaScript-Dateien enthält.
2 Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungs-Framework konfigurieren“.
3 Installieren Sie je nach Bedarf das SDK für iOS oder Android:
• Klicken Sie auf den Link „Apple iOS Dev Center“, um das xcode- und das iOS-SDK zu installieren.
Standardmäßig wird die Anwendung im Ordner „OS <Versionsnummer>/developer“ installiert.
Melden Sie sich mit Ihrer Apple-ID beim Dev Center an. Die Registrierung ist kostenlos. Erstellen Sie ein Konto,
wenn Sie noch kein registrierter Benutzer sind.
Note: Das SDK-Paket, das Sie vom Apple Dev Center herunterladen, können Sie zu Testzwecken verwenden. Um
Ihre Anwendung jedoch zum Apple Store hochzuladen, müssen Sie sich als Apple-Entwickler registrieren, nachdem
Sie die erforderlichen Gebühren bezahlt haben.
• Klicken Sie auf „Einfache Installation“, um das Android SDK zu installieren.
Note: Ist die einfache Installation nicht erfolgreich, lesen Sie bitte die TechNote 90408.
4 Klicken Sie auf „Speichern“.
5 Wählen Sie „Site“ > „Mobile-Anwendungen“ > „Anwendungseinstellungen“.
6 Geben Sie als Bundle-ID einen Namen für das Paket ein und beachten Sie dabei die Anweisungen im Dialogfeld.
7 Geben Sie einen Anwendungsnamen und den Namen des Verfassers ein, also der Person, die die Anwendung
entwickelt hat.
8 Optional können Sie noch folgende Angaben vornehmen:
• (Android.) Wählen Sie als Anwendungssymbol-PNG die PNG-Datei aus, die als Symbol für die Android-
Anwendung verwendet werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um,
wenn Sie das nicht bereits selbst gemacht haben.
• (Mac® OS 10.6.x.) Wählen Sie als Startbildschirm-PNG die PNG-Datei aus, die als Symbol für die iOS-
Anwendung verwendet werden soll. Dreamweaver ändert die Größe des Symbols in die Standardgröße um,
wenn Sie das nicht bereits selbst gemacht haben.
• (Mac OS 10.6.x.) Wählen Sie die iPhone-/iPod Touch-/iPad-Version aus, für die Sie das Paket erstellen.
• Legen Sie einen anderen Zielpfad für das Paket fest.
Note: Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das
Stammverzeichnis der Site kopiert.
528
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
9 Führen Sie einen der folgenden Schritte aus:
• Wenn Sie Ihre Anwendung direkt für ein bestimmtes Gerät bereitstellen, wählen Sie „Site“ > „Mobile-
Anwendungen“ > „Build“. Wählen Sie eine Plattform bzw. ein Gerät für den Build.
• Wenn Sie sehen wollen, wie der Build auf einem Emulator ausschaut, bevor Sie den Build erstellen, wählen Sie
„Site“ > „Mobile-Anwendungen“ > „Erstellen und emulieren“.
More Help topics
Tutorial über das Verpacken von Webanwendungen
Seitenvorschau mithilfe des Bedienfelds „Multi-Screen-
Vorschau“
Im Bedienfeld „Multi-Screen-Vorschau“ in Dreamweaver wird die aktuell bearbeitete Seite in einer Vorschau so
angezeigt, wie sie auf Geräten dargestellt wird, die verschiedene Bildschirmauflösungen unterstützen.
Wählen Sie „Datei“ > „Multi-Screen-Vorschau“ aus, um das Bedienfeld „Multi-Screen-Vorschau“ zu öffnen.
Die Multi-Screen-Vorschau unterstützt die folgenden Bildschirmtypen:
• Handy (Standardbildschirmgröße: 320 x 300 Pixel)
• Tablet (Standardbildschirmgröße: 768 x 300 Pixel)
• Desktop (Standardbildschirmbreite: 1126 Pixel)
Note: Wenn Sie die Bildschirmgröße anderer Geräte kennen, die Sie verwenden möchten, können Sie verschiedene Stile
für verschiedene Geräte angeben. Sie können beispielsweise die Bildschirmgröße 480 x 272 Pixel für ein Sony PSP-Gerät
festlegen.
Für „Handy“, „Tablet“ und „Desktop“ ist für die Vorschau jeweils die Standardgröße festgelegt. Sie können die
Standardgrößen jedoch ändern, indem Sie im Bedienfeld „Multi-Screen-Vorschau“ auf die Schaltfläche „Viewport-
Größen“ klicken.
Note: Verwenden Sie das Bedienfeld „Multi-Screen-Vorschau“ nicht als Browser. Es ist nicht für die Wiedergabe
dynamischer Medien wie Filme und Audio-Clips vorgesehen.
Viewport-Größen ändern
1 Wählen Sie „Datei“ > „Multi-Screen-Vorschau“ aus, um das Bedienfeld „Multi-Screen-Vorschau“ zu öffnen.
2 Klicken Sie im Bedienfeld „Multi-Screen-Vorschau“ auf „Viewport-Größen“.
3 Geben Sie die Viewport-Größen an und klicken Sie auf „OK“. Geben Sie beispielsweise für ein Sony PSP-Gerät den
Wert „480“ für die Breite und „272“ für die Höhe an.
4 Optional: Sie können die Einstellungen auf die Standardwerte zurücksetzen, indem Sie auf „Auf Standardwerte
zurücksetzen“ klicken.
Medienabfragen hinzufügen
Weitere Informationen finden Sie unter “Erstellen von Medienabfragen (ab Version CS 5.5)” on page 519.
529
VERWENDEN VON DREAMWEAVER
Webseiten für mehrere Bildschirme und Geräte entwerfen
Last updated 10.4.2012
Navigation durch Hyperlinks
Das Bedienfeld „Multi-Screen-Vorschau“ wird nicht automatisch mit der Entwurfsansicht oder Live-Ansicht
synchronisiert. Klicken Sie im Bedienfeld „Multi-Screen-Vorschau“ auf die Schaltfläche „Aktualisieren“, wenn Sie die
Bearbeitung in einer dieser Ansichten durchführen.
Note: Wenn Sie in der Live-Ansicht von der ursprünglichen Datei zu einer anderen Datei navigieren, wird diese Datei
im Bedienfeld „Multi-Screen-Vorschau“ nicht angezeigt, auch dann nicht, wenn Sie auf die Schaltfläche „Aktualisieren“
klicken.
Navigieren zwischen Seiten im Bedienfeld „Multi-Screen-Vorschau“
Navigieren Sie im Bedienfeld „Multi-Screen-Vorschau“ von der ursprünglichen Datei zu einer anderen Datei. Beim
Navigieren im Bedienfeld „Multi-Screen-Vorschau“ werden alle drei Fensterbereiche aktualisiert. Klicken Sie beim
Wechseln zwischen verschiedenen Registerkarten auf oberster Ebene in Dreamweaver im Bedienfeld „Multi-Screen-
Vorschau“ auf die Schaltfläche „Aktualisieren“, um die aktuell ausgewählte Datei darzustellen.
530
Last updated 10.4.2012
Chapter 17: Adobe Online-Dienste
verwenden
Verwenden von Dreamweaver mit Adobe Online-
Diensten
Online-Services von Adobe sind gehostete Webanwendungen, die ähnlich wie herkömmliche Desktopwerkzeuge
funktionieren. Der Vorteil der Online-Services liegt darin, dass sie immer auf dem neuesten Stand sind, da sie ja im
Web gehostet und nicht auf Ihrem Computer gespeichert sind.
Dreamweaver integriert sich direkt in Adobe® BrowserLab und Adobe® Business Catalyst InContext Editing. Die
folgenden Abschnitte der Hilfe enthalten Informationen zum Arbeiten mit diesen Diensten.
Dreamweaver integriert sich auch in die Adobe® CS Live-Online-Dienste (einschließlich BrowserLab). Weitere
Informationen zur Arbeit mit CS Live finden Sie unter Verwenden von Adobe CS Live.
Informationen zum Verwalten der Adobe Online-Dienste finden Sie auf der Adobe-Website unter
www.adobe.com/go/learn_creativeservices_de.
BrowserLab
Mit Adobe BrowserLab können Sie eine Vorschau lokaler Webinhalte innerhalb von Dreamweaver anzeigen, ohne
diese zuvor auf einem öffentlich zugänglichen Server ablegen zu müssen. Sie können eine Vorschau der lokalen
Dreamweaver-Site oder auch der Site von einem Remote- bzw. Testserver anzeigen.
Informationen zur Verwendung des Online-Dienstes BrowserLab, einschließlich Informationen zur Verwendung von
BrowserLab mit Dreamweaver, finden Sie unter www.adobe.com/go/lr_abl_de.
Business Catalyst InContext Editing
Business Catalyst InContext Editing
Adobe Business Catalyst InContext Editing ist eine Bearbeitungskomponente von Adobe Business Catalyst, mit der
Benutzer einfache Inhaltsänderungen innerhalb eines Webbrowsers vornehmen können. Zum Ändern einer Webseite
wechseln Benutzer einfach zur entsprechenden Webseite, melden sich bei InContext Editing an und bearbeiten dann
die Webseite. Die Bearbeitungsoptionen sind einfach und können elegant eingesetzt werden. Es sind keine
Vorkenntnisse in der Verwendung von HTML-Code oder der Bearbeitung von Webseiten erforderlich.
Bevor Sie jedoch Benutzern ermöglichen, Änderungen live im Web vorzunehmen, müssen Sie die HTML-Seiten mit
Dreamweaver für die Bearbeitung freigeben. Dies geschieht, indem Sie auf der Seite Bereiche definieren, die von
Benutzern bearbeitet werden können. Beispielsweise enthält Ihre Seite Nachrichten mit Überschriften und kurzen
Artikeltexten. Sie können diese Inhalte markieren und dann in einen bearbeitbaren InContext Editing-Bereich
umwandeln, sodass Benutzer, die sich bei InContext Editing anmelden, die Überschriften und Texte direkt im Browser
bearbeiten können.
531
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
In dieser Dokumentation erfahren Sie mehr zum Umgang mit bearbeitbaren InContext Editing-Bereichen in
Dreamweaver. Adobe bietet jedoch auch weitere Ressourcen für das Arbeiten mit InContext Editing:
• Eine Dokumentation zum Verwenden von InContext Editing für das Bearbeiten von Seiten in einem Browser
finden Sie unter www.adobe.com/go/learn_dw_incontextediting_browser_de.
• Eine Dokumentation zum Arbeiten mit dem Verwaltungsbedienfeld für InContext Editing finden Sie unter
www.adobe.com/go/learn_dw_incontextediting_administration_guide_de.
Weitere Informationen über Adobe Business Catalyst finden Sie auf der Website www.businesscatalyst.com.
Note: Adobe Business Catalyst InContext Editing wird von Adobe AIR nicht unterstützt. Wenn Sie mithilfe der AIR-
Erweiterung für Dreamweaver eine Anwendung exportieren, die InContext Editing-Bereiche enthält, können die
InContext Editing-Funktionen nicht ausgeführt werden.
Bearbeitbaren InContext Editing-Bereich erstellen
Ein bearbeitbaren InContext Editing-Bereich ist ein Paar von HTML-Tags mit dem Attribut ice:editable im
öffnenden Tag. Der bearbeitbare InContext Editing-Bereich definiert einen Bereich auf der Webseite, den Benutzer
direkt im Browser bearbeiten können.
Note: Wenn Sie einen bearbeitbaren InContext Editing-Bereich in einer Seite einfügen, die auf einer Dreamweaver-
Vorlage basiert, muss sich der neue bearbeitbare InContext Editing-Bereich in einem Bereich befinden, der bereits
bearbeitbar ist.
1 Führen Sie einen der folgenden Schritte aus:
• Markieren Sie ein div-, th- oder td-Tag, das Sie in einen bearbeitbaren Bereich umwandeln möchten.
• Setzen Sie die Einfügemarke an die Stelle, an der Sie einen neuen bearbeitbaren Bereich auf der Seite einfügen
möchten.
• Wählen Sie genau einen bearbeitbaren Bereich in einer Dreamweaver-Vorlage (DWT-Datei) aus.
• Wählen Sie weitere Seiteninhalte aus, die bearbeitbar sein sollen (beispielsweise ein Textblock).
2 Wählen Sie „Einfügen“ > „InContext Editing“ > „Bearbeitbaren Bereich erstellen“ aus.
3 Je nach Ihrer Auswahl stehen Ihnen verschiedene Optionen zur Verfügung.
• Bei Auswahl eines div-, th- oder td-Tags wandelt Dreamweaver das Tag automatisch und ohne weitere Schritte
in einen bearbeitbaren Bereich um.
• Wenn Sie einen neuen, leeren bearbeitbaren Bereich einfügen, führen Sie einen der folgenden Schritte aus:
• Wählen Sie die Option „Neuen bearbeitbaren Bereich an aktueller Einfügemarke einfügen“ aus und klicken
Sie auf „OK“. Dreamweaver fügt in den Code ein
div-Tag mit dem Attribut ice:editable für das öffnende
Tag ein.
• Wählen Sie die Option „Übergeordnetes Tag in einen bearbeitbaren Bereich umwandeln“ aus, wenn
Dreamweaver das übergeordnete Tag der Auswahl in das Containerelement für den Bereich umwandeln soll.
Nur bestimmte HTML-Tags können umgewandelt werden:
div, th und td.
Note: Die zweite Option steht nur zur Verfügung, wenn der übergeordnete Knoten exakt den
Umwandlungskriterien entspricht. Es muss sich beispielsweise um eines der aufgeführten Tags handeln, die
umgewandelt werden können. Darüber hinaus darf das Tag keinen der Fehler hervorrufen, die unter
“InContext Editing-Fehlermeldungen” on page 535 aufgeführt sind.
• Wenn Sie einen bearbeitbaren Bereich der Dreamweaver-Vorlage ausgewählt haben, klicken Sie im Dialogfeld
„Bearbeitbaren Bereich erstellen“ auf „OK“. Der bearbeitbare Bereich der Vorlage wird in Dreamweaver in ein
div-Tag eingeschlossen, das als Container für den neuen bearbeitbaren InContext Editing-Bereich dient.
532
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
• Wenn Sie andere Inhalte markiert haben, die zur Bearbeitung eingerichtet werden sollen, führen Sie einen der
folgenden Schritte aus:
• Wählen Sie die Option „Aktuelle Auswahl in einen DIV-Tag einschließen und dann umwandeln“ aus, wenn
der markierte Inhalt in
div-Tags eingeschlossen und in einen bearbeitbaren Bereich umgewandelt werden
soll. Das
div-Tag, in das Dreamweaver den Inhalt einschließt, dient als Container für den bearbeitbaren
Bereich.
Note: Durch Einfügen von
div-Tags in Seiten ändern sich unter Umständen die Seitendarstellung und die
Effekte der CSS-Regeln. Wenn beispielsweise mit einer CSS-Regel festgelegt wird, dass
div-Tags mit einem roten
Rahmen angezeigt werden, wird die aktuelle Auswahl mit einem roten Rahmen angezeigt, wenn sie in ein
div-
Tag eingeschlossen und umgewandelt wird. Wenn Sie dies vermeiden möchten, können Sie die CSS-Regeln, die
sich auf die aktuelle Auswahl auswirken, neu definieren oder die Umwandlung aufheben („Bearbeiten“ >
„Rückgängig“) und dann ein unterstütztes Tag auswählen und umwandeln, das in Dreamweaver nicht in ein
div-Tag eingeschlossen werden muss.
• Wählen Sie die Option „Übergeordnetes Tag in einen bearbeitbaren Bereich umwandeln“ aus, wenn
Dreamweaver das übergeordnete Tag der Auswahl in das Containerelement für den bearbeitbaren Bereich
umwandeln soll. Nur bestimmte HTML-Tags können umgewandelt werden:
div, th und td.
4 Klicken Sie in der Entwurfsansicht auf die blaue Registerkarte des bearbeitbaren Bereichs, um ihn auszuwählen,
falls dies nocht nicht geschehen ist.
Note: Beachten Sie bei Verwendung einer Dreamweaver-Vorlage unbedingt, dass Sie den bearbeitbaren InContext
Editing-Bereich (den Containerbereich) und nicht den bearbeitbaren Bereich der Dreamweaver-Vorlage auswählen
müssen.
5 Aktivieren oder deaktivieren Sie die gewünschten Optionen im Eigenschafteninspektor des bearbeitbaren Bereichs.
Die ausgewählten Optionen stehen dann Benutzern zur Verfügung, wenn sie den Inhalt des bearbeitbaren Bereichs
in einem Browser bearbeiten. Wenn Sie beispielsweise das Kontrollkästchen „Fett“ aktivieren, können Benutzer für
den Text Fettdruck festlegen. Wenn Sie das Kontrollkästchen „Nummerierte Liste und Aufzählungsliste“
aktivieren, können Benutzer nummerierte Listen und Aufzählungslisten erstellen. Wenn Sie das Kontrollkästchen
„Hyperlink“ aktivieren, können Benutzer Hyperlinks erstellen usw. Zeigen Sie mit dem Mauszeiger auf das
jeweilige Symbol oberhalb der Kontrollkästchen, damit eine QuickInfo zur entsprechenden aktivierbaren Option
angezeigt wird.
6 Speichern Sie die Seite.
Wenn dies das erste Mal ist, dass Sie einer Seite InContext Editing-Funktionalität hinzufügen, informiert Sie
Dreamweaver darüber, dass Ihrer Site Unterstützungsdateien für InContext Editing hinzugefügt werden:
„ice.conf.js“, „ice.js“ und „ide.html“. Stellen Sie sicher, diese Dateien zusammen mit der Seite auf den Server
hochzuladen, sonst steht die InContext Editing-Funktionalität im Webbrowser nicht zur Verfügung.
Wiederholenden InContext Editing-Bereich erstellen
Ein wiederholender InContext Editing-Bereich ist ein Paar von HTML-Tags mit dem Attribut ice:repeating im
öffnenden Tag. Der wiederholende InContext Editing-Bereich definiert einen Bereich auf der Webseite, den Benutzer
beim Bearbeiten im Browser wiederholt einfügen und mit Inhalten füllen können. Wenn beispielsweise eine
Überschrift und ein darauf folgender Textabschnitt vorhanden sind, können Sie diese Elemente in einen
wiederholenden Bereich umwandeln, den Benutzer dann auf der Seite duplizieren können.
533
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
Bearbeitbare wiederholende Bereiche in einem InContext Editing-Browserfenster. Der untere Bereich ist markiert und kann erneut dupliziert,
gelöscht oder nach oben bzw. unten verschoben werden.
Zusätzlich zum Hinzufügen wiederholender Bereiche auf der Grundlage eines Originalbereichs können Sie Benutzern
auch erlauben, Bereiche zu löschen, völlig neue Bereiche (die nicht auf den Inhalten des Originalbereichs basieren)
hinzuzufügen und Bereiche nach oben bzw. unten zu verschieben.
Wenn Sie einen wiederholenden Bereich erstellen, fasst Dreamweaver ihn in einen anderen Container ein, der als
Gruppe wiederholender Bereiche bezeichnet wird. Dieser Container, ein
div-Tag mit dem Attribut
ice:repeatinggroup im öffnenden Tag, dient als Container für alle bearbeitbaren wiederholenden Bereiche, die
Benutzer der Gruppe hinzufügen. Sie können wiederholende Bereiche nicht außerhalb der jeweils zugehörigen
Gruppe wiederholender Bereiche verschieben. Zudem sollten Sie keine Tags für eine Gruppe wiederholender Bereiche
manuell in die Seite einfügen. Dreamweaver fügt diese Tags bei Bedarf automatisch ein.
Note: Beim Erstellen eines wiederholenden Bereichs aus einer Tabellenzeile (
tr-Tag) wird in Dreamweaver das Attribut
für die Gruppe wiederholender Bereiche auf das übergeordnete Tag (z. B. das
table-Tag) angewendet und kein div-Tag
eingefügt.
Wenn Sie eine Seite bearbeiten, die bereits eine Gruppe wiederholender Bereiche enthält und Sie direkt nach der
vorhandenen Gruppe einen wiederholenden Bereich einfügen möchten, wird in Dreamweaver ermittelt, dass dem
Bereich, den Sie einfügen möchten, eine Gruppe wiederholender Bereiche vorangestellt ist. Sie haben dann die
Möglichkeit, den neuen Bereich der bereits vorhandenen Gruppe hinzuzufügen. Sie können festlegen, dass der neue
wiederholende Bereich der vorhandenen Gruppe hinzugefügt wird, oder Sie können eine völlig neue Gruppe
wiederholender Bereiche erstellen.
Note: Wenn Sie einen wiederholenden InContext Editing-Bereich in einer Seite einfügen, die auf einer Dreamweaver-
Vorlage basiert, muss sich der neue wiederholende InContext Editing-Bereich in einem Bereich befinden, der bereits
bearbeitbar ist.
Überschrift 1
Überschrift 2
Überschrift 3
534
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
Um in Dreamweaver einen wiederholenden Bereich zu erstellen, führen Sie die folgenden Schritte aus.
1 Führen Sie einen der folgenden Schritte aus:
• Markieren Sie ein Tag, das Sie in einen wiederholenden Bereich umwandeln möchten. Die Liste der möglichen
Tags ist sehr umfangreich:
a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir,
div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small,
span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul und var.
Note: Nur
div-Tags können gleichzeitig das Attribut für einen bearbeitbaren Bereich und das Attribut für einen
wiederholenden Bereich enthalten.
• Setzen Sie die Einfügemarke an die Stelle, an der Sie einen neuen wiederholenden Bereich auf der Seite einfügen
möchten.
• Wählen Sie genau einen wiederholenden Bereich in einer Dreamweaver-Vorlage (DWT-Datei) aus.
• Wählen Sie weitere Seiteninhalte aus, die wiederholbar sein sollen (beispielsweise eine Überschrift und ein
Textblock).
2 Wählen Sie „Einfügen“ > „InContext Editing“ > „Wiederholenden Bereich erstellen“ aus.
3 Je nach Ihrer Auswahl stehen Ihnen verschiedene Optionen zur Verfügung.
• Bei Auswahl eines Tags, das umgewandelt werden kann, wandelt Dreamweaver das Tag automatisch und ohne
weitere Schritte in einen wiederholenden Bereich um.
• Wenn Sie einen neuen, leeren wiederholenden Bereich einfügen, führen Sie einen der folgenden Schritte aus:
• Wählen Sie die Option „Neuen wiederholenden Bereich an aktueller Einfügemarke einfügen“ aus und
klicken Sie auf „OK“.
• Wählen Sie die Option „Übergeordnetes Tag in einen wiederholenden Bereich umwandeln“ aus, wenn
Dreamweaver das übergeordnete Tag der Auswahl in das Containerelement für den Bereich umwandeln soll.
Nur bestimmte HTML-Tags können umgewandelt werden:
a, abbr, acronym, address, b, big,
blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins,
kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt,
u, ul und var.
Note: Die zweite Option steht nur zur Verfügung, wenn der übergeordnete Knoten exakt den
Umwandlungskriterien entspricht. Es muss sich beispielsweise um eines der aufgeführten Tags handeln, die
umgewandelt werden können. Darüber hinaus darf das Tag keinen der Fehler hervorrufen, die unter
“InContext Editing-Fehlermeldungen” on page 535 aufgeführt sind.
• Wenn Sie einen wiederholenden Bereich der Dreamweaver-Vorlage ausgewählt haben, klicken Sie im
Dialogfeld „Wiederholenden Bereich erstellen“ auf „OK“. Der wiederholende Bereich der Vorlage wird in
Dreamweaver in ein
div-Tag eingeschlossen, das als Container für den neuen wiederholenden InContext
Editing-Bereich dient.
• Wenn Sie andere Inhalte markiert haben, die als wiederholbar eingerichtet werden sollen, führen Sie einen der
folgenden Schritte aus:
• Wählen Sie die Option „Aktuelle Auswahl in einen DIV-Tag einschließen und dann umwandeln“ aus, wenn
der markierte Inhalt in
div-Tags eingeschlossen und in einen wiederholenden Bereich umgewandelt werden
soll. Das
div-Tag, in das Dreamweaver den Inhalt einschließt, dient als Container für den wiederholenden
Bereich.
535
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
• Wählen Sie die Option „Übergeordnetes Tag in einen wiederholenden Bereich umwandeln“ aus, wenn
Dreamweaver das übergeordnete Tag der Auswahl in das Containerelement für den wiederholenden Bereich
umwandeln soll. Nur bestimmte HTML-Tags können umgewandelt werden:
a, abbr, acronym, address, b,
big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr,
tt, u, ul und var.
4 Klicken Sie in der Entwurfsansicht auf die blaue Registerkarte des wiederholenden Bereichs, um ihn auszuwählen,
falls dies nocht nicht geschehen ist. Beachten Sie, dass Dreamweaver dabei die Auswahl der Registerkarte für die
Gruppe wiederholender Bereiche erzwingt. Der Grund hierfür ist, dass sich alle wiederholenden Bereiche innerhalb
einer Gruppe wiederholender Bereiche befinden und Sie Optionen für die gesamte Gruppe festlegen müssen, wenn
Sie die Optionen für einzelne wiederholende Bereiche einstellen möchten.
5 Aktivieren oder deaktivieren Sie die gewünschten Optionen im Eigenschafteninspektor für die Gruppe des
wiederholenden Bereichs. Es sind zwei Optionen verfügbar: „Neu anordnen“ und „Hinzufügen/Entfernen“. Beim
Aktivieren von „Neu anordnen“ können Benutzer beim Bearbeiten im Browser wiederholende Bereiche nach oben
oder unten verschieben. Beim Aktivieren von „Hinzufügen/Entfernen“ können Benutzer beim Bearbeiten im
Browser wiederholende Bereiche hinzufügen oder entfernen. In der Standardeinstellung sind beide Optionen
aktiviert. Mindestens eine dieser Optionen muss immer aktiviert sein.
6 Speichern Sie die Seite.
Wenn dies das erste Mal ist, dass Sie einer Seite InContext Editing-Funktionalität hinzufügen, informiert Sie
Dreamweaver darüber, dass Ihrer Site Unterstützungsdateien für InContext Editing hinzugefügt werden:
„ice.conf.js“, „ice.js“ und „ide.html“. Stellen Sie sicher, diese Dateien zusammen mit der Seite auf den Server
hochzuladen, sonst steht die InContext Editing-Funktionalität im Webbrowser nicht zur Verfügung.
Bereich löschen
Am besten löschen Sie einen Bereich mit dem zugehörigen Eigenschafteninspektor. Durch das Verwenden des
Eigenschafteninspektors für den Bereich wird sichergestellt, dass Sie den gesamten dem Bereich zugeordneten Code
löschen.
1 Markieren Sie einen bearbeitbaren Bereich, einen wiederholenden Bereich oder eine Gruppe wiederholender
Bereiche.
2 Klicken Sie im Eigenschafteninspektor des Bereichs auf die Schaltfläche „Bereich entfernen“.
CSS-Klassen für die Formatierung festlegen
Die Funktion „InContext Editing Verfügbare CSS-Klassen verwalten“ ist ab Dreamweaver CS5 veraltet.
InContext Editing-Fehlermeldungen
InContext Editing kann nicht auf Tags angewendet werden, die Script-Tags oder Blöcke serverseitigen
Codes enthalten.
Wenn Ihre Auswahl serverseitigen Code enthält, kann sie nicht mit Dreamweaver in einen bearbeitbaren oder
wiederholenden Bereich umgewandelt werden. Dies wird durch die Art und Weise verursacht, mit der beim InContext
Editing bearbeitbare Seiten gespeichert werden, wenn der Benutzer im Browser arbeitet. Wenn ein Benutzer die Seite
nach dem Bearbeiten speichert, wird beim InContext Editing serverseitiger Code aus dem Bereich entfernt.
536
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
Die aktuelle Auswahl kann nicht umgewandelt oder in ein DIV-Tag eingeschlossen werden, da der
übergeordnete Knoten kein DIV-Tag als untergeordnetes Tag zulässt.
Wenn die Auswahl, die auf der Seite umgewandelt werden soll, nicht direkt umgewandelt werden kann, muss sie in
div-Tags eingeschlossen werden, die als Container für den neuen bearbeitbaren oder wiederholenden Bereich dienen.
Aus diesem Grund müssen für die übergeordneten Tags der Auswahl, die umgewandelt werden soll,
div-Tags als
untergeordnete Tags zulässig sein. Wenn das übergeordnete Tag des Tags, das Sie umwandeln möchten, keine
div-
Tags als untergeordnete Tags zulässt, kann die Umwandlung in Dreamweaver nicht durchgeführt werden.
Die Auswahl enthält bereits einen bearbeitbaren Bereich oder befindet sich innerhalb eines bearbeitbaren
Bereichs. Verschachtelte bearbeitbare Bereiche sind nicht zulässig.
Wenn sich Ihre Auswahl innerhalb eines bearbeitbaren Bereichs befindet oder es innerhalb der Auswahl einen
bearbeitbaren Bereich gibt, lässt Dreamweaver eine enstprechende Umwandlung nicht zu. Beim InContext Editing
werden keine verschachtelten bearbeitbaren Bereiche unterstützt.
Bearbeitbare Bereiche dürfen keine wiederholenden Bereiche oder Gruppen wiederholender Bereiche
enthalten.
Bearbeitbare InContext Editing-Bereiche dürfen keine weiteren InContext Editing-Funktionen enthalten. Wenn Sie
versuchen, einem bearbeitbaren Bereich einen wiederholenden Bereich oder eine Gruppe wiederholender Bereiche
hinzuzufügen, lässt Dreamweaver die entsprechende Umwandlung nicht zu.
Wiederholende Bereiche dürfen sich nicht innerhalb von bearbeitbaren Bereichen befinden oder Gruppen
wiederholender Bereiche enthalten.
Bearbeitbare InContext Editing-Bereiche dürfen keine weiteren InContext Editing-Funktionen enthalten. Wenn Sie
versuchen, einem bearbeitbaren Bereich einen wiederholenden Bereich oder eine Gruppe wiederholender Bereiche
hinzuzufügen, lässt Dreamweaver die entsprechende Umwandlung nicht zu. Außerdem können Sie in Dreamweaver
keine Elemente in einen bearbeitbaren oder wiederholenden Bereich umwandeln, wenn diese bereits eine Gruppe
wiederholender Bereiche enthalten.
Die Auswahl enthält bereits einen wiederholenden Bereich oder befindet sich innerhalb eines
wiederholenden Bereichs. Verschachtelte wiederholende Bereiche sind nicht zulässig.
Wenn sich Ihre Auswahl innerhalb eines wiederholenden Bereichs befindet oder es innerhalb der Auswahl einen
wiederholenden Bereich gibt, lässt Dreamweaver eine enstprechende Umwandlung nicht zu. Beim InContext Editing
werden keine verschachtelten wiederholenden Bereiche unterstützt.
Die Auswahl darf nur genau eine Dreamweaver-Vorlage für bearbeitbare/wiederholende Bereiche
enthalten oder muss sich innerhalb einer beliebigen Dreamweaver-Vorlage für bearbeitbare Bereiche
befinden.
Beim Verwenden von Dreamweaver-Vorlagendateien (DWT-Dateien) müssen bestimmte Regeln beachtet werden.
Um eine Dreamweaver-Vorlage für bearbeitbare/wiederholende Bereiche in einen bearbeitbaren/wiederholenden
InContext Editing-Bereich umzuwandeln, dürfen Sie auf der Seite nur genau eine Dreamweaver-Vorlage für
bearbeitbare/wiederholende Bereiche auswählen und müssen diese dann umwandeln. Zum Umwandeln einer
weiteren Auswahl auf der Seite (z. B. ein Textblock) muss sich die Auswahl innerhalb einer Dreamweaver-Vorlage für
bearbeitbare Bereiche befinden.
537
VERWENDEN VON DREAMWEAVER
Adobe Online-Dienste verwenden
Last updated 10.4.2012
Nur DIV-Tags kann gleichzeitig Funktionalität für bearbeitbare und für wiederholende Bereiche
zugeordnet werden.
Wenn es sich bei Ihrer Auswahl nicht um ein
div-Tag handelt und bereits ein Attribut für einen wiederholenden
Bereich zugewiesen wurde, lässt Dreamweaver nicht zu, dass Sie dem Tag auch noch das Attribut für einen
bearbeitbaren Bereich zuordnen. Nur
div-Tags kann gleichzeitig das Attribut für einen bearbeitbaren Bereich und das
Attribut für einen wiederholenden Bereich zugewiesen werden.
Dreamweaver hat ein dem wiederholenden Bereich vorangehendes Tag für eine Gruppe wiederholender
Bereiche erkannt.
Alle wiederholenden InContext Editing-Bereiche müssen sich innerhalb einer Gruppe wiederholender Bereiche
befinden. Wenn Sie der Seite einen neuen wiederholenden Bereich hinzufügen, erkennt Dreamweaver, ob sich direkt
davor bereits eine Gruppe wiederholender Bereiche befindet. In diesem Fall bietet Ihnen Dreamweaver die Auswahl,
den neuen wiederholenden Bereich der Gruppe wiederholender Bereiche hinzuzufügen oder eine neue Gruppe
wiederholender Bereiche zu erstellen, die den neuen wiederholenden Bereich enthält.
538
Last updated 10.4.2012
Chapter 18: XML-Daten mit XSLT
anzeigen
XML und XSLT
XML und XSL mit Webseiten verwenden
XML (Extensible Markup Language) ist eine Sprache, die der Strukturierung von Daten dient. Wie bei HTML erfolgt
die Strukturierung bei XML mit Tags. XML-Tags sind aber im Unterschied zu HTML-Tags nicht vordefiniert.
Stattdessen können Sie mit XML eigene Tags definieren, die Ihrer Datenstruktur (bzw. Ihrem Schema) entsprechen.
Tags werden in anderen Tags verschachtelt, um eine Struktur aus über- und untergeordneten Tags zu bilden. Wie die
meisten HTML-Tags bestehen alle Tags in einem XML-Schema aus einem öffnenden und einem schließenden Tag.
Im folgenden Beispiel wird die allgemeine Struktur einer XML-Datei illustriert:
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Adobe Dreamweaver</title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
In diesem Beispiel enthält jedes übergeordnete <book>-Tag drei untergeordnete Tags: <pubdate>, <title> und
<author>. Jedes <book>-Tag ist aber seinerseits ein untergeordnetes Tag des Tags <mybooks>, das im Schema die
nächsthöhere Ebene bildet. Sie können XML-Tags in beliebiger Weise benennen und strukturieren, sofern die
Verschachtelung korrekt vorgenommen und jedem öffnenden ein schließendes Tag zugeordnet wird.
XML-Dokumente enthalten keinerlei Formatierung, sondern dienen einfach als Container für strukturierte Daten.
Sobald ein XML-Schema definiert ist, können Sie XSL (Extensible Stylesheet Language) zum Anzeigen der Daten
nutzen. So wie Sie mit CSS (Cascading Style Sheets) HTML-Daten formatieren können, können Sie mit XSL XML-
Daten formatieren. Sie können Stile, Seitenelemente, Layout usw. in einer XSL-Datei definieren und diese an eine
XML-Datei anhängen, damit die XML-Daten bei der Anzeige in einem Browser entsprechend der Definition in der
XSL-Datei formatiert werden. Inhalt (die XML-Daten) und Präsentation (durch die XSL-Datei definiert) sind
vollständig voneinander getrennt, sodass Sie mehr Kontrolle über die Art der Darstellung von Daten auf einer
Webseite besitzen. In Grunde genommen ist XSL eine Präsentationstechnologie für XML, bei der die Hauptausgabe
eine HTML-Seite darstellt.
539
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
XSLT (Extensible Stylesheet Language Transformations) ist eine Teilmenge von XSL, mit der die Anzeige von XML-
Daten auf einer Webseite gesteuert wird. In Verbindung mit XSL-Stilen werden die Daten in lesbare und formatierte
Informationen in Form von HTML umgewandelt. Mit Dreamweaver können Sie XSLT-Seiten erstellen, um die XSL-
Transformationen unter Verwendung eines Anwendungsservers oder Browsers durchführen zu lassen. Wenn Sie eine
serverseitige XSL-Transformation durchführen, übernimmt der Server die eigentliche Transformation der XML- und
XSL-Daten und zeigt die Ergebnisse auf der Seite an. Bei einer clientseitigen Transformation übernimmt ein Browser
(wie etwa Internet Explorer) die eigentliche Arbeit.
Für welchen Ansatz Sie sich letztendlich entscheiden (serverseitige oder clientseitige Transformationen), hängt von
dem gewünschten Endergebnis, den verfügbaren Technologien, dem Zugriff auf XML-Quelldateien sowie von
weiteren Faktoren ab. Beide Ansätze haben sowohl Vor- als auch Nachteile. Serverseitige Transformationen sind
beispielsweise für alle Browser geeignet, während clientseitige Transformationen auf moderne Browser (Internet
Explorer 6, Netscape 8, Mozilla 1.8 und Firefox 1.0.2) beschränkt sind. Mit serverseitigen Transformationen können
Sie XML-Daten dynamisch von Ihrem eigenen Server oder von einem beliebigen Server im Web anzeigen. Bei
clientseitigen Transformationen müssen Sie dagegen XML-Daten verwenden, die lokal auf Ihrem eigenen Webserver
gespeichert sind. Schließlich müssen Sie die Seiten bei serverseitigen Transformationen auf einem konfigurierten
Anwendungsserver bereitstellen, wohingegen bei clientseitigen Transformationen lediglich der Zugriff auf einen
Webserver erforderlich ist.
Ein Tutorial zu den Grundlagen von XML finden Sie unter www.adobe.com/go/vid0165_de.
More Help topics
XML-Tutorial
Serverseitige XSL-Transformationen
Dreamweaver stellt Methoden zum Erstellen von XSLT-Seiten bereit, die serverseitige XSL-Transformationen
unterstützen. Wenn ein Anwendungsserver die XSL-Transformation durchführt, kann die Datei mit den XML-Daten
auf Ihrem eigenen Server oder an einem beliebigen anderen Ort im Web gespeichert sein. Darüber hinaus können die
konvertierten Daten in einem beliebigen Browser angezeigt werden. Das Bereitstellen von Seiten für serverseitige
Transformationen ist allerdings relativ komplex und setzt den Zugang zu einem Anwendungsserver voraus.
Wenn Sie mit serverseitigen XSL-Transformationen arbeiten, können Sie Dreamweaver dazu verwenden, ganze
XSLT-Seiten zu erstellen, die vollständige HTML-Dokumente generieren oder XSLT-Fragmente, die einen Teil eines
HTML-Dokuments generieren. Eine ganze XSLT-Seite entspricht einer regulären HTML-Seite. Sie enthält ein
<body>-Tag und ein <head>-Tag und erlaubt die Anzeige einer Kombination von HTML- und XML-Daten auf der
Seite. Ein XSLT-Fragment ist eine Codekomponente in einem separaten Dokument und zeigt formatierte XML-Daten
an. Im Unterschied zu einer ganzen XSLT-Seite handelt es sich um eine unabhängige Datei, die kein
<body>- oder
<head>-Tag enthält. Wenn Sie XML-Daten auf einer eigenen Seite anzeigen möchten, müssen Sie eine ganze XSLT-
Seite erstellen und die XML-Daten an diese anbinden. Wenn Sie XML-Daten dagegen in einem bestimmten Abschnitt
einer bestehenden dynamischen Seite anzeigen möchten, z. B. auf einer dynamischen Homepage für ein Sportgeschäft,
bei der auf einer Seite dieser Homepage aus einem RSS-Datenstrom etwa der Spielstand der Champions League
angezeigt werden soll, müssen Sie ein XSLT-Fragment erstellen und auf der dynamischen Seite einen Verweis auf das
XSLT-Fragment einfügen. Das Erstellen von XSLT-Fragmenten und deren Verwendung mit anderen dynamischen
Seiten zum Anzeigen von XML-Daten ist eine gängigere Verfahrensweise.
540
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Beim Erstellen dieser Art von Seiten müssen Sie zunächst das XSLT-Fragment erstellen. Hierbei handelt es sich um
eine separate Datei, die Layout, Formatierung usw. der XML-Daten enthält, die in der dynamischen Seite angezeigt
werden sollen. Nachdem Sie das XSLT-Fragment erstellt haben, fügen Sie einen Verweis auf dieses in Ihre dynamische
Seite ein (z. B. eine PHP- oder ColdFusion-Seite). Der eingefügte Verweis auf das XSLT-Fragment funktioniert
ähnlich wie ein SSI (Server-Side Include). Die formatierten XML-Daten (das Fragment) befinden sich in einer
separaten Datei und in der Entwurfsansicht wird auf der dynamischen Seite ein Platzhalter angezeigt. Wenn ein
Browser die dynamische Seite mit dem Verweis auf das Fragment anfordert, verarbeitet der Server die enthaltene
Anweisung und erstellt ein neues Dokument, in dem anstelle des Platzhalters der formatierte Inhalt angezeigt wird.
1. Der Browser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und übergibt sie an den Anwendungsserver. 3. Der
Anwendungsserver analysiert die Anweisungen auf der Seite und ruft das XSLT-Fragment ab. 4. Der Anwendungsserver führt die
Transformation durch (liest das XSLT-Fragment, ruft die XML-Daten ab und formatiert sie). 5. Der Anwendungsserver fügt das umgewandelte
Fragment in die Seite ein und gibt die Seite wieder an den Webserver zurück. 6. Der Webserver sendet die fertiggestellte Seite an den Browser.
Mit dem Serververhalten „XSL-Transformation“ können Sie einen Verweis auf ein XSLT-Fragment in eine
dynamische Seite einfügen. Wenn Sie den Verweis einfügen, generiert Dreamweaver im Stammordner der Site einen
Ordner namens „includes/MM_XSLTransform/“, in dem sich eine Laufzeitbibliothek befindet. Der
Anwendungsserver verwendet die in dieser Datei definierten Funktionen beim Konvertieren der angegebenen XML-
Daten. Diese Datei ist verantwortlich für das Abrufen der XML-Daten und XSLT-Fragmente, Durchführen der XSL-
Transformation und Ausgeben der Ergebnisse auf einer Webseite.
Die Datei mit dem XSLT-Fragment, die XML-Datei mit den Daten und die generierte Laufzeitbibliotheksdatei müssen
sich auf dem Server befinden, damit die Seite richtig angezeigt wird. Wenn Sie eine Remote-Version einer XML-Datei
als Datenquelle verwenden (z. B. aus einem RSS-Datenstrom), befindet sich diese Datei natürlich an anderer Stelle im
Internet.
Mit Dreamweaver können Sie außerdem ganze XSLT-Seiten für die Verwendung mit serverseitigen Transformationen
erstellen. Eine vollständige XSLT-Seite funktioniert genau wie ein XSLT-Fragment, nur dass beim Einfügen des
Verweises auf die ganze XSLT-Seite mithilfe des Serververhaltens „XSL-Transformation“ der vollständige Inhalt einer
HTML-Seite eingefügt wird. Daher müssen Sie alle HTML-Daten aus der dynamischen Seite (der ColdFusion-, PHP-
oder ASP-Seite, die als Container-Seite fungiert) entfernen, bevor Sie den Verweis einfügen.
Dreamweaver unterstützt XSL-Transformationen für ColdFusion-, ASP- und PHP-Seiten.
Note: Bevor Sie serverseitige Transformationen durchführen können, müssen Sie Ihren Server entsprechend
konfigurieren. Wenden Sie sich an Ihren Serveradministrator, um weitere Informationen zu erhalten.
<HTML>
<code>
</HTML>
<HTML>
<p>data
</HTML>
<xsl:>
</xsl:>
XML
5
2
3
4
6
1
Anwendungs-
server
Webbrowser
WEBSERVER
541
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
More Help topics
“XSL-Transformationen auf dem Server ausführen” on page 545
Clientseitige XSL-Transformationen
XSL-Transformationen können auch ohne Nutzung eines Anwendungsservers vom Client durchgeführt werden. Mit
Dreamweaver können Sie eine ganze XSLT-Seite erstellen, die diese Transformation durchführt. Bei clientseitigen
Transformationen muss jedoch die XML-Datei mit den anzuzeigenden Daten geändert werden. Zudem sind
clientseitige Transformationen nur in modernen Browsern (Internet Explorer 6, Netscape 8, Mozilla 1.8 und Firefox
1.0.2) möglich. Weitere Informationen zu Browsern, die XSL-Transformationen unterstützen, und solchen, die sie
nicht unterstützen, finden Sie online unter www.w3schools.com/xsl/xsl_browsers.asp.
Als Erstes erstellen Sie eine ganze XSLT-Seite und hängen eine XML-Datenquelle an. (Dreamweaver fordert Sie beim
Erstellen der neuen Seite auf, die Datenquelle anzuhängen.) Sie können eine XSLT-Seite von Grund auf neu erstellen
oder eine vorhandene HTML-Seite in eine XSLT-Seite konvertieren. Wenn Sie sich für die zweite Methode
entscheiden, müssen Sie mit dem Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) eine XML-Datenquelle
anhängen.
Nachdem Sie die XSLT-Seite erstellt haben, müssen Sie sie mit der XML-Datei verknüpfen, die die XML-Daten
enthält. Dazu müssen Sie einen Verweis auf die XSLT-Seite in die XML-Datei selbst einfügen (und dabei ähnlich
vorgehen wie beim Einfügen eines Verweises auf ein externes CSS-Stylesheet in den
<head>-Bereich einer HTML-
Seite). Die Besucher der Website müssen die XML-Datei (und nicht die XSLT-Seite) in einem Browser anzeigen.
Wenn Besucher die Seite anzeigen, führt der Browser die XLS-Transformation durch und zeigt die XML-Daten an, die
von der verknüpften XSLT-Seite formatiert werden.
Die Beziehung zwischen den verknüpften XSLT- und XML-Seiten ist konzeptionell gesehen ähnlich, unterscheidet
sich jedoch von dem Modell, bei dem externe CSS-Stylesheets auf HTML-Seiten verwendet werden. Wenn eine
HTML-Seite vorliegt, die Inhalt (z. B. Text) enthält, wird dieser Inhalt mithilfe eines externen Stylesheets formatiert.
Die HTML-Seite bestimmt den Inhalt und der externe CSS-Code, den der Benutzer nie zu Gesicht bekommt,
bestimmt die Präsentation. Bei XSLT und XML ist es umgekehrt. Die XML-Datei (die der Benutzer nie in ihrer
Grundform sieht) bestimmt den Inhalt, während die XSLT-Seite für die Präsentation verantwortlich ist. Die XSLT-
Seite enthält die Tabellen, das Layout, die Grafiken usw., die die Standard-HTML-Daten normalerweise enthalten.
Wenn ein Benutzer die XML-Datei in einem Browser anzeigt, wird der Inhalt von der XSLT-Seite formatiert.
1. Der Browser fordert die XML-Datei an. 2. Der Server antwortet, indem er die XML-Datei an den Browser sendet. 3. Der Browser liest die
XML-Anweisung und ruft die XSLT-Datei ab. 4. Der Server sendet die XSLT-Datei an den Browser. 5. Der Browser wandelt die XML-Daten
um und zeigt sie an.
<XML>
<directive>
XSLT
2
4
3
1
5
Webbrowser WEBSERVER
542
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Wenn Sie Dreamweaver zum Verknüpfen einer XSLT-Seite mit einer XML-Seite verwenden, fügt Dreamweaver den
entsprechenden Code oben in der XML-Seite ein. Wenn Sie die XML-Seite besitzen, die Sie verknüpfen (d. h., wenn
die XML-Datei ausschließlich auf Ihrem Webserver vorhanden ist) müssen Sie den Code, der die beiden Seiten
verknüpft, nur mit Dreamweaver einfügen. Wenn Sie die XML-Datei besitzen, erfolgen die vom Client
durchgeführten XSL-Transformationen vollständig dynamisch. Wenn Sie die Daten in der XML-Datei aktualisieren,
wird daher eine beliebige HTML-Ausgabe, die die verknüpfte XSLT-Seite verwendet, automatisch anhand der neuen
Informationen aktualisiert.
Note: Die für clientseitige Transformationen verwendeten XML- und XSL-Seiten müssen im gleichen Verzeichnis
abgelegt werden. Andernfalls liest der Browser die XML-Datei und sucht nach der XSLT-Seite für die Transformation,
kann aber die von relativen Links in der XSLT-Seite definierten Elemente (Stylesheets, Bilder usw.) nicht finden.
Wenn Sie die XML-Seite, mit der Sie verknüpfen, nicht besitzen (z. B. bei der Verwendung von XML-Daten aus einem
RSS-Datenstrom im Web), ist der Arbeitsablauf ein wenig komplizierter. Um clientseitige Transformationen mit
XML-Daten aus einer externen Quelle vorzunehmen, müssen Sie zunächst die XML-Quelldatei in das Verzeichnis
herunterladen, in dem Ihre XSLT-Seiten abgelegt sind. Wenn sich die XML-Seite in Ihrer lokalen Website befindet,
können Sie mit Dreamweaver den notwendigen Code hinzufügen, durch den sie mit der XSLT-Seite verknüpft wird,
und beide Seiten (die heruntergeladene XML-Datei und die verknüpfte XSLT-Seite) an Ihren Webserver senden.
Wenn der Benutzer die XML-Seite in einem Browser anzeigt, formatiert die XSLT-Seite den Inhalt genau wie im
obigen Beispiel.
Das Durchführen clientseitiger XSL-Transformationen an XML-Daten aus einer externen Quelle hat den Nachteil,
dass die XML-Daten nur teilweise „dynamisch“ sind. Die heruntergeladene und geänderte XML-Datei ist nur ein
„Schnappschuss“ der Datei, die sich woanders im Web befindet. Wenn sich die Original-XML-Datei im Web ändert,
müssen Sie sie erneut herunterladen, mit der XSLT-Seite verknüpfen und auf Ihrem Webserver veröffentlichen. Der
Browser gibt nur die Daten wieder, die er von der XML-Datei auf Ihrem Webserver erhält, nicht die Daten, die in der
Original-XML-Datei enthalten sind.
More Help topics
“XSL-Transformationen auf dem Client ausführen” on page 563
XML-Daten und wiederholte Elemente
Mit einem XSLT-Objekt für wiederholende Bereiche können Sie wiederholende Elemente aus einer XML-Datei in
einer Seite anzeigen. Jeder Bereich, der einen Platzhalter für XML-Daten enthält, kann in einen wiederholenden
Bereich umgewandelt werden. Die am häufigsten verwendeten Bereiche sind jedoch Tabellen, einzelne Tabellenzeilen
oder Gruppen von Tabellenzeilen.
543
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Das folgende Beispiel zeigt, wie ein XSLT-Objekt für wiederholende Bereiche einer Tabellenzeile zugewiesen wird, die
das Menü eines Restaurants enthält. Die Tabellenzeile enthält anfangs drei unterschiedliche Elemente aus dem XML-
Schema: „Item“, „Description“ und „Price“. Wenn ein XSLT-Objekt für wiederholende Bereiche einer Tabellenzeile
zugewiesen und die Seite vom Anwendungsserver oder einem Browser verarbeitet wird, wird die Tabelle wiederholt.
Jede neue Tabellenzeile enthält andere Daten.
Wenn Sie ein XSLT-Objekt für wiederholende Bereiche im Dokumentfenster anwenden, wird der wiederholte Bereich
von einer dünnen, gestrichelten grauen Linie umgeben. Zeigen Sie Ihre Arbeit dagegen in der Browservorschau an
(„Datei“ > „Vorschau in Browser“), wird der graue Umriss ausgeblendet und die Auswahl wird erweitert, damit die
angegebenen wiederholten Elemente in der XML-Datei angezeigt werden (siehe Abbildung oben).
Wenn Sie das XSLT-Objekt für wiederholende Bereiche in die Seite einfügen, wird die Länge des XML-Daten-
Platzhalters im Dokumentfenster verkürzt. Das liegt daran, dass Dreamweaver den XPath (XML-Pfadsprache) für die
XML-Daten-Platzhalter aktualisiert, sodass er einen relativen Pfad des wiederholten Elements darstellt.
Der folgende Code gilt beispielsweise für eine Tabelle mit zwei dynamischen Platzhaltern, der kein XSLT-Objekt für
wiederholende Bereiche zugewiesen wurde:
<table width="500" border="1">
<tr>
<td><xsl:value-of select="rss/channel/item/title"/></td>
</tr>
<tr>
<td><xsl:value-of select="rss/channel/item/description"/></td>
</tr>
</table>
Der folgende Code gilt für die gleiche Tabelle, wenn ihr ein XSLT-Objekt für wiederholende Bereiche zugewiesen
wurde:
544
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
<tr>
<td><xsl:value-of select="description"/></td>
</tr>
</table>
</xsl:for-each>
Im obigen Beispiel hat Dreamweaver den XPath der Elemente, die in den wiederholten Bereich fallen („Title“ und
„Description“) so aktualisiert, dass sie nicht relativ zum vollständigen Dokument sind, sondern zum XPath in den
umschließenden
<xsl:for-each>-Tags.
Dreamweaver generiert auch in anderen Fällen kontextrelative XPath-Ausdrücke. Wenn Sie z. B. einen XML-Daten-
Platzhalter zu einer Tabelle ziehen, der bereits ein XSLT-Objekt für wiederholende Bereiche zugewiesen wurde, zeigt
Dreamweaver einen XPath an, der relativ zu dem von
<xsl:for-each>-Tags umgebenen XPath ist.
More Help topics
“Wiederholte XML-Elemente anzeigen” on page 550
Vorschau der XML-Daten anzeigen
Wenn Sie mit der Funktion „Vorschau in Browser“ („Datei“ > „Vorschau in Browser“) XML-Daten anzeigen, die Sie
in ein XSLT-Fragment oder eine ganze XSLT-Seite eingefügt haben, wird von Fall zu Fall eine andere Engine zum
Durchführen der XSL-Transformation verwendet. Bei dynamischen Seiten mit XSLT-Fragmenten führt immer der
Anwendungsserver die Transformation durch. In anderen Situationen kann die Transformation entweder von
Dreamweaver oder dem Browser vorgenommen werden.
In der folgenden Tabelle sind die bei der Verwendung von „Vorschau in Browser“ möglichen Situationen
zusammengefasst. Außerdem werden die Engines aufgeführt, die die jeweiligen Transformationen übernehmen.
Die folgenden Themen enthalten Anleitungen, mit denen Sie die passenden Vorschaumethoden anhand Ihres Bedarfs
ermitteln können.
Vorschau von Seiten für serverseitige Transformationen anzeigen
Bei serverseitigen Transformationen werden die für den Besucher einer Website sichtbaren Inhalte von Ihrem
Anwendungsserver umgewandelt. Beim Erstellen von XSLT- und dynamischen Seiten, die bei serverseitigen
Transformationen verwendet werden sollen, empfiehlt es sich, eine Vorschau der dynamischen Seite anzuzeigen, die
das XSLT-Fragment enthält und nicht das XSLT-Fragment selbst. In diesem Fall nutzen Sie den Anwendungsserver
und stellen somit sicher, dass die Vorschau mit den Inhalten übereinstimmt, die Website-Besucher sehen können.
Seitentyp, für den eine Vorschau im Browser angezeigt wird Transformation vorgenommen von
Dynamische Seite mit XSLT-Fragment Anwendungsserver
XSLT-Fragment oder ganze XSLT-Seite Dreamweaver
XML-Datei mit Verknüpfung zu einer ganzen XSLT-Seite Browser
545
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Wenn Sie stattdessen eine Vorschau des XSLT-Fragments anzeigen, wird die Transformation von Dreamweaver
ausgeführt, was zu leicht abweichenden Ergebnissen führen kann. Sie können Dreamweaver verwenden, um eine
Vorschau des XSLT-Fragments während seiner Erstellung anzuzeigen. Um beim Darstellen der Daten jedoch ganz
präzise Ergebnisse zu erhalten, müssen Sie mithilfe des Anwendungsservers eine Vorschau der dynamischen Seite
anzeigen, nachdem Sie das XSLT-Fragment eingefügt haben.
Vorschau von Seiten für clientseitige Transformationen anzeigen
Bei clientseitigen Transformationen werden die für den Besucher einer Website sichtbaren Inhalte von Ihrem Browser
umgewandelt. Um dies zu erzielen, müssen Sie einen Hyperlink von der XML-Datei zur XSLT-Seite hinzufügen.
Wenn Sie die XML-Datei in Dreamweaver öffnen und in einem Browser anzeigen, zwingen Sie den Browser, die XML-
Datei zu laden und die Transformation durchzuführen. Damit sehen Sie genau das Gleiche wie ein Website-Besucher.
Diese Methode erschwert jedoch das Debuggen der Seite, da der Browser die XML-Daten umwandelt und die HTML-
Daten intern generiert. Wenn Sie die generierten HTML-Daten mit der Browser-Option zum Anzeigen der Quelle
debuggen, werden nur die ursprünglichen XML-Daten angezeigt, die der Browser erhalten hat, nicht jedoch die
vollständigen HTML-Daten (Tags, Stile usw.), die für die Darstellung der Seite verantwortlich sind. Um beim
Anzeigen des Quellcodes die vollständigen HTML-Daten sehen zu können, müssen Sie stattdessen eine Vorschau der
XSLT-Seite in einem Browser anzeigen.
Vorschau der XSLT-Seiten und -Fragmente anzeigen
Es empfiehlt sich, beim Erstellen von ganzen XSLT-Seiten und von XSLT-Fragmenten eine Vorschau der Arbeit
anzuzeigen, um sicherzustellen, dass die Daten richtig angezeigt werden. Wenn Sie eine ganze XSLT-Seite oder ein
XSLT-Fragment mit der Option „Vorschau in Browser“ anzeigen, führt Dreamweaver die Transformation mittels
einer integrierten Transformations-Engine durch. Diese Methode führt schnell zu einem Ergebnis und erleichtert das
schrittweise Erstellen und Debuggen der Seite. Darüber hinaus gibt sie Ihnen die Möglichkeit, die vollständigen
HTML-Daten (Tags, Stile usw.) anzuzeigen, indem Sie im Browser die Option zum Anzeigen der Quelle auswählen.
Note: Diese Vorschaumethode wird in der Regel eingesetzt, wenn Sie mit dem Erstellen der XSLT-Seiten beginnen, und
zwar unabhängig davon, ob Sie die client- oder serverseitige Transformation der Daten verwenden.
XSL-Transformationen auf dem Server ausführen
Arbeitsablauf beim Durchführen serverseitiger XSL-Transformationen
Sie können XSL-Transformationen auf dem Server ausführen. Informieren Sie sich über server- und clientseitige XSL-
Transformationen und über den Einsatz von XML und XSL mit Webseiten, bevor Sie Seiten erstellen, die XML-Daten
anzeigen.
Note: Bevor Sie serverseitige Transformationen durchführen können, müssen Sie Ihren Server entsprechend
konfigurieren. Wenden Sie sich an Ihren Serveradministrator, um weitere Informationen zu erhalten.
Der allgemeine Arbeitsablauf für die Durchführung serverseitiger XSL-Transformationen ist wie folgt (jeder dieser
Schritte wird in einem anderen Thema beschrieben):
546
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
1. Richten Sie eine Dreamweaver-Site ein.
2. Wählen Sie eine Servertechnologie und richten Sie einen Anwendungsserver ein.
3. Testen Sie den Anwendungsserver.
Erstellen Sie dazu beispielsweise eine Seite, die verarbeitet werden muss, und achten Sie darauf, das der
Anwendungsserver die Seite verarbeitet.
4. Erstellen Sie ein XSLT-Fragment oder eine XSLT-Seite oder konvertieren Sie eine HTML-Seite in eine XSLT-
Seite.
• Erstellen Sie in der Dreamweaver-Site ein XSLT-Fragment oder eine ganze XSLT-Seite.
• Wandeln Sie eine bestehende HTML-Seite in eine ganze XSLT-Seite um.
5. Hängen Sie eine XML-Datenquelle an die Seite an.
6. Zeigen Sie die XML-Daten an, indem Sie die Daten an das XSLT-Fragment oder an die ganze XSLT-Seite
binden.
7. Fügen Sie bei Bedarf ein XSLT-Objekt für wiederholende Bereiche zur Tabelle oder Tabellenzeile hinzu, die
die XML-Daten-Platzhalter enthält.
8. Fügen Sie Verweise ein.
• Um einen Verweis auf das XSLT-Fragment in Ihre dynamische Seite einzufügen, verwenden Sie das
Serververhalten „XSL-Transformation“.
• Um einen Verweis auf die ganze XSLT-Seite in Ihre dynamische Seite einzufügen, löschen Sie den gesamten
HTML-Code aus einer dynamischen Seite und verwenden Sie dann das Serververhalten „XSL-Transformation“.
9. Senden Sie die Seite und das Fragment.
Senden Sie sowohl die dynamische Seite als auch das XSLT-Fragment (bzw. die ganze XSLT-Seite) an den
Anwendungsserver. Wenn Sie eine lokale XML-Datei verwenden, müssen Sie diese ebenfalls an den
Anwendungsserver senden.
10. Zeigen Sie die dynamische Seite in einem Browser an.
Bei diesem Vorgang konvertiert der Anwendungsserver die XML-Daten, fügt sie in die dynamische Seite ein und zeigt
sie im Browser an.
More Help topics
“Arbeiten mit Dreamweaver-Sites” on page 40
“Anwendungsserver auswählen” on page 577
“XML und XSL mit Webseiten verwenden” on page 538
“Clientseitige XSL-Transformationen” on page 541
“Serverseitige XSL-Transformationen” on page 539
547
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
XSLT-Seiten erstellen
Sie können XSLT-Seiten erstellen, mit denen XML-Daten auf Webseiten angezeigt werden. Dabei können Sie
entweder eine vollständige XSLT-Seite erstellen, die ein
<body>- und ein <head>-Tag enthält, oder alternativ ein
XSLT-Fragment. Wenn Sie ein XSLT-Fragment erstellen, wird eine unabhängige Datei ohne body- oder head-Tag
erstellt. Diese Codekomponente wird dann in eine dynamische Seite eingefügt.
Note: Wenn Sie eine bestehende XSLT-Seite als Ausgangspunkt nehmen, müssen Sie eine XML-Datenquelle an diese
anfügen.
1 Wählen Sie „Datei“ > „Neu“.
2 Gehen Sie zur Kategorie „Leere Seite“ des Dialogfelds „Neues Dokument“ und wählen Sie in der Spalte „Seitentyp“
einen der folgenden Seitentypen aus:
• „XSLT (Ganze Seite)“, um eine ganze XSLT-Seite zu erstellen.
• „XSLT (Fragment)“, um ein XSLT-Fragment zu erstellen.
3 Klicken Sie auf „Erstellen“ und führen Sie im Dialogfeld „XML-Quelle suchen“ einen der folgenden Schritte aus:
• Wählen Sie „Lokale Datei anhängen“ aus, klicken Sie auf die Schaltfläche „Durchsuchen“, navigieren Sie zu einer
XML-Datei auf Ihrem Computer und klicken Sie auf „OK“.
• Wählen Sie „Remote-Datei anhängen“ aus, geben Sie die URL einer XML-Datei im Internet ein (z. B. eine Datei
aus einem RSS-Datenstrom) und klicken Sie auf „OK“.
Note: Durch Klicken auf die Schaltfläche „Abbrechen“ wird eine neue XSLT-Seite ohne angefügte XML-Datenquelle
erstellt.
Das Bedienfeld „Bindungen“ wird mit dem Schema Ihrer XML-Datenquelle gefüllt.
In der folgenden Tabelle werden die verschiedenen Elemente im Schema erklärt, die möglicherweise angezeigt
werden:
Element Bedeutung Details
<> Nicht wiederholtes XML-Element
erforderlich
Ein Element, das im übergeordneten Code genau einmal
vorkommt
<>+ Wiederholtes XML-Element Ein Element, das im übergeordneten Code ein- oder
mehrmals vorkommt
<>+ Optionales XML-Element Ein Element, das im übergeordneten Code nicht, einmal
oder mehrmals vorkommt
Elementknoten mit Fettformatierung Aktuelles Kontextelement Normalerweise das wiederholte Element, wenn die
Einfügemarke sich in einem wiederholten Bereich
befindet
@ XML-Attribut
548
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
4 Speichern Sie die neue Seite („Datei“ > „Speichern“) mit der Erweiterung .xsl oder .xslt (.xsl ist die
Standarderweiterung).
HTML-Seiten in XSLT-Seiten konvertieren
Sie können auch vorhandene HTML-Seiten in XSLT-Seiten umwandeln. Wenn beispielsweise ein Entwurf einer
statischen Seite vorliegt, in die Sie XML-Daten einfügen möchten, können Sie die Seite in eine XSLT-Seite umwandeln,
anstatt eine XSLT-Seite beim Erstellen von Grund auf neu zu entwerfen.
1 Öffnen Sie die HTML-Seite, die Sie umwandeln möchten.
2 Wählen Sie „Datei“ > „Konvertieren“ > „XSLT 1.0“.
Eine Kopie der Seite wird im Dokumentfenster geöffnet. Die neue Seite ist ein XSL-Stylesheet, das mit der Erweiterung
„.xsl“ gespeichert wird.
XML-Datenquellen anhängen
Wenn Sie eine bestehende XSLT-Seite als Grundlage verwenden oder beim Erstellen einer neuen XSLT-Seite mit
Dreamweaver keine XML-Datenquelle angehängt haben, müssen Sie mithilfe des Bedienfelds „Bindungen“ eine XML-
Datenquelle anhängen.
1 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf den XML-Hyperlink.
Note: Sie können auch auf den Quellenhyperlink oben rechts im Bedienfeld „Bindungen“ klicken, um eine XML-
Datenquelle hinzuzufügen.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Lokale Datei anhängen“ aus, klicken Sie auf die Schaltfläche „Durchsuchen“, navigieren Sie zu einer
XML-Datei auf Ihrem Computer und klicken Sie auf „OK“.
• Wählen Sie „Remote-Datei anhängen“ aus und geben Sie die URL einer XML-Datei im Internet ein (z. B. eine Datei
aus einem RSS-Datenstrom).
3 Klicken Sie auf „OK“, um das Dialogfeld „XML-Quelle suchen“ zu schließen.
Das Bedienfeld „Bindungen“ wird mit dem Schema Ihrer XML-Datenquelle gefüllt.
XML-Daten in XSLT-Seiten anzeigen
Nachdem Sie eine XSLT-Seite erstellt und eine XML-Datenquelle angehängt haben, können Sie Daten mit der Seite
verbinden. Dazu fügen Sie einen XML-Daten-Platzhalter in Ihre Seite ein und verwenden den XPATH-
Ausdrucksgenerator, um ausgewählte Daten, die auf der Seite angezeigt werden sollen, zu formatieren.
1 Öffnen Sie eine XSLT-Seite mit angehängter XML-Datenquelle.
2 Optional: Wählen Sie „Einfügen“ > „Tabelle“, um eine Tabelle in die Seite einzufügen. Mit einer Tabelle können
Sie XML-Daten leichter verwalten.
549
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Note: In den meisten Fällen werden Sie ein XSLT-Objekt für wiederholende Bereiche verwenden, um wiederholte XML-
Elemente auf einer Seite anzuzeigen. Sie können dann eine einzeilige Tabelle mit mindestens einer Spalte oder eine
zweizeilige Tabelle erstellen, wenn Sie eine Kopfzeile definieren möchten.
3 Wählen Sie im Bedienfeld „Bindungen“ ein XML-Element aus und ziehen Sie es auf der Seite an die Position, an
der die Daten eingefügt werden sollen.
Ein Platzhalter für XML-Daten wird auf der Seite angezeigt. Der Platzhalter wird hervorgehoben und in geschweiften
Klammern dargestellt. Er verwendet die XPath-Syntax (XML-Adressierungssprache), um die hierarchische Struktur
des XML-Schemas zu beschreiben. Wenn Sie z. B. das untergeordnete Element title auf die Seite ziehen und dieses
Element die übergeordneten Elemente rss, channel und item aufweist, lautet die Syntax für den Platzhalter für
dynamische Inhalte {rss/channel/item/title}.
Doppelklicken Sie auf der Seite auf den Platzhalter für die XML-Daten, um den XPATH-Ausdrucksgenerator zu
öffnen. Der XPATH-Ausdrucksgenerator ermöglicht das Formatieren ausgewählter Daten oder das Auswählen
anderer Elemente aus dem XML-Schema.
4 Optional: Weisen Sie den XML-Daten Stile zu, indem Sie einen XML-Daten-Platzhalter auswählen und ihm, wie
anderen Inhalten auch, mithilfe des Eigenschafteninspektors oder des Bedienfelds „CSS-Stile“ Stile zuweisen.
Stattdessen können Sie XSLT-Fragmenten auch mit Entwurfszeit-Stylesheets Stile zuweisen. Jede dieser Methoden
hat sowohl Vor- als auch Nachteile.
5 Zeigen Sie das Ergebnis in der Browservorschau an („Datei“ > „Vorschau in Browser“).
Note: Wenn Sie Ihre Seite in einer Browservorschau anzeigen, führt Dreamweaver eine interne XSL-Transformation
ohne Rückgriff auf einen Anwendungsserver durch.
More Help topics
“Vorschau der XML-Daten anzeigen” on page 544
“Inhalte in Tabellen darstellen” on page 192
550
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Wiederholte XML-Elemente anzeigen
Mit einem XSLT-Objekt des Typs „Bereich wiederholen“ können Sie wiederholte Elemente aus einer XML-Datei auf
einer Webseite anzeigen. Wenn Sie z. B. Artikeltitel und Beschreibungen aus einem Nachrichten-Datenstrom
anzeigen und dieser Nachrichten-Datenstrom 10–20 Artikel enthält, bildet jeder Titel mit der zugehörigen
Beschreibung ein untergeordnetes Element eines wiederholten Elements.
Jeder Bereich in der Entwurfsansicht, der einen Platzhalter für XML-Daten enthält, kann in einen wiederholenden
Bereich umgewandelt werden. Die am häufigsten verwendeten Bereiche sind jedoch Tabellen, einzelne Tabellenzeilen
oder Gruppen von Tabellenzeilen.
1 Wählen Sie in der Entwurfsansicht einen Bereich mit mindestens einem Platzhalter für XML-Daten aus.
Dies kann ein beliebiges Objekt wie etwa eine Tabelle, eine Tabellenzeile oder ein Textabsatz sein.
Sie können den Tag-Selektor links unten im Dokumentfenster verwenden, um einen Bereich auf der Seite präzise
auszuwählen. Handelt es sich bei dem Bereich z. B. um eine Tabelle, klicken Sie auf der Seite in der Tabelle. Klicken
Sie dann im Tag-Selektor auf das <table>-Tag.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie „Einfügen“ > „XSLT-Objekte“ > „Bereich wiederholen“.
• Klicken Sie in der Kategorie „XSLT“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Wiederholender Bereich“.
551
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
3 Wählen Sie das wiederholte, durch ein Pluszeichen gekennzeichnete Element im XPATH-Ausdrucksgenerator aus.
4 Klicken Sie auf „OK“.
Der wiederholte Bereich ist nun im Dokumentfenster von einer dünnen, grauen, gestrichelten Linie umgeben. Wenn
Sie Ihre Arbeit in der Browservorschau anzeigen („Datei“ > „Vorschau in Browser“), verschwindet der graue Umriss
und die Auswahl wird erweitert, damit die angegebenen wiederholten Elemente in der XML-Datei angezeigt werden.
Wenn Sie das XSLT-Objekt für wiederholende Bereiche in die Seite einfügen, wird der XML-Daten-Platzhalter im
Dokumentfenster verkürzt. Das liegt daran, dass Dreamweaver den XPath für die XML-Daten-Platzhalter kürzt,
sodass er einen relativen Pfad des wiederholten Elements darstellt.
More Help topics
“Mithilfe des XPATH-Ausdrucksgenerators Ausdrücke für XML-Daten hinzufügen” on page 559
“XML-Daten und wiederholte Elemente” on page 542
Eigenschaften wiederholender Bereiche (XSL) festlegen
Im Eigenschafteninspektor können Sie einen anderen XML-Knoten auswählen, mit dem ein wiederholter Bereich
erstellt werden soll.
❖ Geben Sie im Feld „Auswählen“ einen neuen Knoten ein, klicken Sie auf das Blitzsymbol und wählen Sie den
Knoten in der daraufhin angezeigten XML-Schemastruktur aus.
XSLT-Objekte vom Typ „Wiederholender Bereich“ bearbeiten
Nachdem Sie ein XSLT-Objekt für wiederholende Bereiche eingefügt haben, können Sie es mit dem
Eigenschafteninspektor bearbeiten.
1 Wählen Sie das Objekt aus, indem Sie auf den grauen Umriss klicken, der den wiederholten Bereich umgibt.
552
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
2 Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf das Symbol neben dem Textfeld
„Auswählen“.
3 Nehmen Sie die gewünschten Änderungen im XPATH-Ausdrucksgenerator vor und klicken Sie auf „OK“.
XSLT-Fragmente in dynamische Seiten einfügen
Nachdem Sie ein XSLT-Fragment erstellt haben, können Sie es mit dem Serververhalten „XSL-Transformation“ in
eine dynamische Webseite einfügen. Wenn Sie das Serververhalten zur Seite hinzufügen und die Seite in einem
Browser anzeigen, führt ein Anwendungsserver eine Transformation durch, um die XML-Daten aus dem
ausgewählten XSLT-Fragment anzuzeigen. Dreamweaver unterstützt XSL-Transformationen für ColdFusion-, ASP-
und PHP-Seiten.
Note: Wenn Sie den Inhalt einer ganzen XSLT-Seite in eine dynamische Seite einfügen möchten, verfahren Sie genau so.
Löschen Sie zunächst den gesamten HTML-Code aus der dynamischen Seite, bevor Sie die vollständige XSLT-Seite
mithilfe des Serververhaltens „XSL-Transformation“ einfügen.
1 Öffnen Sie eine vorhandene ColdFusion-, ASP- oder PHP-Seite.
2
Platzieren Sie die Einfügemarke in der Entwurfsansicht an der Stelle, an der das XSLT-Fragment eingefügt werden soll.
Note: Beim Einfügen von XSLT-Fragmenten sollten Sie immer auf die Schaltfläche „Code- und Entwurfsansicht
anzeigen“ klicken, nachdem Sie die Einfügemarke auf die Seite gesetzt haben, um sicherzustellen, dass sich diese an der
richtigen Stelle befindet. Ist dies nicht der Fall, müssen Sie in der Codeansicht auf eine andere Stelle klicken, um die
Einfügemarke an der gewünschten Position zu platzieren.
3 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), klicken Sie auf die Schaltfläche mit
dem Pluszeichen (+) und wählen Sie „XSL-Transformation“.
4 Klicken Sie im Dialogfeld „XSL-Transformation“ auf die Schaltfläche „Durchsuchen“ und navigieren Sie zu einem
XSLT-Fragment oder einer ganzen XSLT-Seite.
553
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Dreamweaver füllt das nächste Textfeld mit dem Dateipfad oder der URL der XML-Datei, die an das angegebene
Fragment angehängt ist. Sie können die Datei wechseln, indem Sie auf die Schaltfläche „Durchsuchen“ klicken und zu
der gewünschten Datei navigieren.
5 Optional: Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um einen XSLT-Parameter hinzuzufügen.
6 Klicken Sie auf „OK“, um einen Verweis auf das XSLT-Fragment in die Seite einzufügen. Das Fragment kann nicht
bearbeitet werden. Sie können auf das Fragment doppelklicken, um die Quelldatei des Fragments zu bearbeiten.
Im Stammordner der Site wird außerdem ein Ordner namens „includes/MM_XSLTransform/“ angelegt, der eine
Laufzeitbibliotheksdatei enthält. Der Anwendungsserver verwendet die in dieser Datei definierten Funktionen zum
Durchführen der Transformation.
7 Laden Sie die dynamische Seite zum Server hoch („Site“ > „Bereitstellen“) und klicken Sie auf „Ja“, um abhängige
Dateien einzuschließen. Die Datei mit dem XSLT-Fragment, die XML-Datei mit den Daten und die generierte
Laufzeitbibliotheksdatei müssen sich auf dem Server befinden, damit die Seite richtig angezeigt wird. (Wenn Sie
eine Remote-Version einer XML-Datei als Datenquelle verwenden, muss die Datei sich an einer anderen Position
im Internet befinden.)
More Help topics
“XSLT-Seiten erstellen” on page 547
“Serverseitige XSL-Transformationen” on page 539
XSLT-Fragmente aus dynamischen Seiten löschen
Sie können ein XSLT-Fragment aus einer Seite löschen, indem Sie das Serververhalten „XSL-Transformation“ löschen,
das zum Einfügen des Fragments verwendet wurde. Durch Löschen des Serververhaltens wird nur das XSLT-
Fragment gelöscht. Die zugehörigen XML-, XSLT- und Laufzeitbibliotheksdateien bleiben erhalten.
1 Wählen Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) das zu löschende Serververhalten
„XSL-Transformation“ aus.
2 Klicken Sie auf das Minuszeichen (–).
Note: Sie sollten Serververhalten immer auf diese Weise entfernen. Beim manuellen Löschen des generierten Codes wird
das Serververhalten nur teilweise entfernt, auch wenn das Serververhalten nicht mehr im Bedienfeld „Serververhalten“
angezeigt wird.
Serververhalten für XSL-Transformationen bearbeiten
Nachdem Sie ein XSLT-Fragment in eine dynamische Webseite eingefügt haben, können Sie das Serververhalten
„XSL-Transformation“ jederzeit bearbeiten.
1 Doppelklicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf das Serververhalten „XSL-
Transformation“, das Sie bearbeiten möchten.
2 Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf „OK“.
Dynamische Hyperlinks erstellen
Sie können auf Ihrer XSLT-Seite dynamische Links für bestimmte URLs erstellen, zu denen der Benutzer durch
Klicken auf bestimmte Wörter oder Wortgruppen in Ihren XML-Daten gelangt. Vollständige Anweisungen finden Sie
in den Dreamweaver Errata unter www.adobe.com/go/dw_documentation_de.
554
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Stile auf XSLT-Fragmente anwenden
Wenn Sie eine vollständige XSLT-Seite erstellen (d. h. eine XSLT-Seite mit den Tags <body> und <head>), können Sie
XML-Dateien auf der Seite anzeigen und diese wie andere Inhalte mit dem Eigenschafteninspektor oder dem
Bedienfeld „CSS-Stile“ formatieren. Wenn Sie allerdings ein XSLT-Fragment erstellen, das in einer dynamischen Seite
(z. B. in einer ASP-, PHP- oder ColdFusion-Seite) eingefügt werden soll, wird die Darstellung von Stilen im Fragment
und in der dynamischen Seite allerdings wesentlich komplizierter Obwohl Sie ein XSLT-Fragment separat von der
dynamischen Seite bearbeiten, dürfen Sie nicht vergessen, dass es in der dynamischen Seite verwendet werden soll, und
dass sich die Ausgabe des XSLT-Fragments letztendlich irgendwo innerhalb der
<body>-Tags der dynamischen Seite
befindet. Mit diesem Arbeitsablauf vor Augen müssen Sie unbedingt sicherstellen, dass in XSLT-Fragmenten keine
<head>-Elemente (wie Stildefinitionen oder Hyperlinks auf externe Stylesheets) enthalten sind. Ist dies der Fall,
platziert der Anwendungsserver diese Elemente im Hauptteil (also innerhalb der
<body>-Tags) der dynamischen Seite
und erzeugt so ein ungültiges Markup.
Angenommen, Sie möchten ein XSLT-Fragment erstellen, das in eine dynamische Seite eingefügt werden soll, und das
Fragment mit dem gleichen dynamischen Stylesheet wie die dynamische Seite verknüpfen. Wenn Sie dem Fragment
dann das gleiche Stylesheet anhängen, enthält die resultierende HTML-Seite eine doppelte Verknüpfung mit dem
Stylesheet (eine im
<head>-Abschnitt der dynamischen Seite und eine weitere im <body>-Abschnitt der Seite, in der
der Inhalt des XSLT-Fragments angezeigt wird). Anstelle dieser Methode sollten Sie mithilfe von Entwurfszeit-
Stylesheets auf das externe Stylesheet verweisen.
Beim Formatieren von XSLT-Fragmenten sollten Sie den folgenden Arbeitsablauf wählen:
• Als Erstes hängen Sie ein externes Stylesheet an die dynamische Seite an. (Dies ist eine der besten Methoden, um
Stile auf den Inhalt einer beliebigen Webseite anzuwenden.)
• Als Nächstes hängen Sie das gleiche externe Stylesheet als Entwurfszeit-Stylesheet an das XSLT-Fragment an. Wie
der Name vermuten lässt, können Sie nur in der Dreamweaver-Entwurfsansicht mit Entwurfszeit-Stylesheets
arbeiten.
Nachdem Sie die ersten beiden Schritte ausgeführt haben, können Sie anhand des Stylesheets, das Sie bereits an die
dynamische Seite angehängt haben, in Ihrem XSLT-Fragment neue Stile erstellen. Das Resultat ist eine
übersichtlichere HTML-Ausgabe (da der Verweis auf das Stylesheet nur während der Arbeit in Dreamweaver gültig
ist) und das Fragment zeigt die entsprechenden Stile weiterhin in der Entwurfsansicht an. Darüber hinaus werden
alle Stile sowohl auf das Fragment als auch auf die dynamische Seite angewendet, wenn Sie die dynamische Seite in
der Entwurfsansicht oder eine Vorschau dieser in einem Browser anzeigen.
Note: Bei der Anzeige des XSLT-Fragments in einem Browser werden die Stile nicht angezeigt. Sie sollten stattdessen
die dynamische Seite im Browser anzeigen, um das XSLT-Fragment im Kontext dieser anzuzeigen.
More Help topics
“Mit Entwurfszeit-Stylesheets arbeiten” on page 163
Parameter mit XSL-Transformationen verwenden
Sie können Parameter für Ihre XSL-Transformation definieren, wenn Sie das Serververhalten „XSL-Transformation“
einer Webseite hinzufügen. Ein Parameter steuert, wie XML-Daten verarbeitet und angezeigt werden. Sie können z. B.
einen Parameter verwenden, um einen bestimmten Artikel im Nachrichten-Datenstrom zu identifizieren und
aufzulisten. Wenn die Seite in einen Browser geladen wird, wird nur der Artikel angezeigt, den Sie mit dem Parameter
angegeben haben.
555
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
XSLT-Parameter zu einer XSL-Transformation hinzufügen
1 Öffnen Sie das Dialogfeld „XSL-Transformation“. Doppelklicken Sie zu diesem Zweck im Bedienfeld
„Serververhalten“ („Fenster“ > „Serververhalten“) auf ein Serververhalten für die XSL-Transformation oder fügen
Sie ein neues Serververhalten für die XSL-Transformation hinzu.
2 Klicken Sie im Dialogfeld „XSL-Transformation“ auf das Plussymbol (+) neben „XSLT-Parameter“.
3 Geben Sie im Dialogfeld „Parameter hinzufügen“ im Feld „Name“ einen Namen für den Parameter ein. Der Name
darf ausschließlich aus alphanumerischen Zeichen bestehen. Leerzeichen sind nicht zulässig.
4 Führen Sie einen der folgenden Schritte aus:
• Wenn Sie einen statischen Wert verwenden möchten, geben Sie ihn in das Feld „Wert“ ein.
• Um einen dynamischen Wert zu verwenden, klicken Sie auf das entsprechende Symbol neben dem Feld „Wert“,
füllen Sie das Dialogfeld „Dynamische Daten“ aus und klicken Sie auf „OK“. Um weitere Informationen
anzuzeigen, klicken Sie im Dialogfeld „Dynamische Daten“ auf die Schaltfläche „Hilfe“.
5 Geben Sie in das Feld „Standardwert“ den Wert ein, der für den Parameter gelten soll, wenn zur Laufzeit kein Wert
an die Seite übergeben wird.
XSLT-Parameter bearbeiten
1 Öffnen Sie das Dialogfeld „XSL-Transformation“. Doppelklicken Sie zu diesem Zweck im Bedienfeld
„Serververhalten“ („Fenster“ > „Serververhalten“) auf ein Serververhalten für die XSL-Transformation oder fügen
Sie ein neues Serververhalten für die XSL-Transformation hinzu.
2 Wählen Sie einen Parameter in der XSLT-Parameterliste aus.
3 Klicken Sie auf die Schaltfläche „Bearbeiten“.
4 Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf „OK“.
XSLT-Parameter löschen
1 Öffnen Sie das Dialogfeld „XSL-Transformation“. Doppelklicken Sie zu diesem Zweck im Bedienfeld
„Serververhalten“ („Fenster“ > „Serververhalten“) auf ein Serververhalten für die XSL-Transformation oder fügen
Sie ein neues Serververhalten für die XSL-Transformation hinzu.
2 Wählen Sie einen Parameter in der XSLT-Parameterliste aus.
3 Klicken Sie auf das Minuszeichen (–).
556
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Bedingte XSLT-Bereiche erstellen und bearbeiten
Auf einer XSLT-Seite können Sie einfache oder mehrere bedingte Bereiche erstellen. Dazu können Sie entweder in der
Entwurfsansicht eine Auswahl treffen und dieser einen bedingten Bereich zuweisen oder Sie können einen bedingten
Bereich einfach dort ins Dokument einfügen, wo sich die Einfügemarke gerade befindet.
Wenn Sie beispielsweise den Ausdruck „Nicht verfügbar“ neben dem Preis eines Elements anzeigen möchten, wenn
dieses Element nicht verfügbar ist, geben Sie auf der Seite den Text „Nicht verfügbar“ ein, wählen den Ausdruck aus
und weisen dem ausgewählten Text dann einen bedingten Bereich zu. Dreamweaver umgibt die Auswahl mit
<xsl:if>-Tags und zeigt den Text „Nicht verfügbar“ nur dann auf der Seite an, wenn die Daten den Bedingungen des
bedingten Ausdrucks entsprechen.
Bedingten XSLT-Bereich anwenden
Sie können einen einfachen bedingten Ausdruck schreiben, der in Ihre XSLT-Seite eingefügt werden soll. Wenn beim
Öffnen des Dialogfelds „Bedingter Bereich“ Inhalt ausgewählt ist, wird dieser von einem
<xsl:if>-Block umgeben.
Wenn der Inhalt nicht ausgewählt ist, wird der
<xsl:if>-Block an der Einfügemarke in die Seite eingefügt. Es
empfiehlt sich, dieses Dialogfeld für die ersten Schritte zu verwenden und die Ausdrücke dann in der Codeansicht
anzupassen.
Das
<xsl:if>-Element ähnelt der in anderen Sprachen verwendeten if-Anweisung. Es bietet Ihnen eine Möglichkeit,
eine Bedingung zu testen und anhand des Ergebnisses zu handeln. Mit dem
<xsl:if>-Element können Sie einen
Ausdruck auf einen einzelnen Wert hin, true oder false, testen.
1 Wählen Sie „Einfügen“ > „XSLT-Objekte“ > „Bedingter Bereich“ aus oder klicken Sie in der Kategorie „XSLT“ des
Bedienfelds „Einfügen“ auf das Symbol „Bedingter Bereich“.
2
Geben Sie im Dialogfeld „Bedingter Bereich“ den bedingten Ausdruck ein, der für den Bereich verwendet werden soll.
Im folgenden Beispiel soll überprüft werden, ob das @available-Attribut des Knotens den Wert true besitzt.
3 Klicken Sie auf „OK“.
Der folgende Code wird in Ihre XSLT-Seite eingefügt:
<xsl:if test="@available=&apos;true&apos;">
Content goes here
</xsl:if>
Note: Sie müssen String-Werte wie beispielsweise „true“ in Anführungszeichen setzen. Dreamweaver verschlüsselt die
Anführungszeichen (&apos;), damit sie als gültige XHTML-Daten eingegeben werden.
557
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Sie können Knoten nicht nur auf Werte testen, sondern eine beliebige unterstützte XSLT-Funktion in einer beliebigen
bedingten Anweisung verwenden. Die Bedingung wird für den aktuellen Knoten in Ihrer XML-Datei getestet. Im
folgenden Beispiel soll der letzte Knoten in der Ergebnismenge getestet werden:
Weitere Informationen und Beispiele zum Schreiben von bedingten Ausdrücken finden Sie im Abschnitt
<xsl:if>
des Bedienfelds „Referenz“ („Hilfe“ > „Referenz“).
Mehrere bedingte XSLT-Bereiche anwenden
Sie können einen einfachen bedingten Ausdruck schreiben, der in Ihre XSLT-Seite eingefügt werden soll. Wenn beim
Öffnen des Dialogfelds „Bedingter Bereich“ Inhalt ausgewählt ist, wird dieser von einem
<xsl:choose>-Block
umgeben. Wenn Sie keinen Inhalt auswählen, wird der
<xsl:choose>-Block an der Einfügemarke in die Seite
eingefügt. Es empfiehlt sich, dieses Dialogfeld für die ersten Schritte zu verwenden und die Ausdrücke dann in der
Codeansicht anzupassen.
Das
<xsl:choose>-Element ähnelt der in anderen Sprachen verwendeten case-Anweisung. Es bietet Ihnen eine
Möglichkeit, eine Bedingung zu testen und anhand des Ergebnisses zu handeln. Mit dem
<xsl:choose>-Element
können Sie testen, ob mehrere Bedingungen erfüllt sind.
1 Wählen Sie „Einfügen“ > „XSLT-Objekte“ > „Mehrere bedingte Bereiche“ aus oder klicken Sie in der Kategorie
„XSLT“ des Bedienfelds „Einfügen“ auf das Symbol „Mehrere bedingte Bereiche“.
2 Geben Sie die erste Bedingung in das Dialogfeld „Mehrere bedingte Bereiche“ ein.
Im folgenden Beispiel soll überprüft werden, ob das
price-Teilelement des Kontextknotens einen Wert hat, der
kleiner ist als 5.
3 Klicken Sie auf „OK“.
Der folgende Code wird in Ihre XSLT-Seite eingefügt:
558
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
<xsl:choose>
<xsl:when test="price&lt;5">
Content goes here
</xsl:when>
<xsl:otherwise>
Content goes here
</xsl:otherwise>
</xsl:choose>
4 Um eine weitere Bedingung einzufügen, positionieren Sie die Einfügemarke in der Codeansicht zwischen
<xsl:when>-Tagpaaren oder unmittelbar vor dem <xsl:otherwise>-Tag und fügen Sie dann einen bedingten
Bereich ein („Einfügen“ > „XSLT-Objekte“ > „Bedingter Bereich“).
Nachdem Sie die Bedingung eingefügt und auf „OK“ geklickt haben, wird ein weiteres
<xsl:when>-Tag in den
<xsl:choose>-Block eingefügt.
Weitere Informationen und Beispiele zum Schreiben von bedingten Ausdrücken finden Sie im Abschnitt
<xsl:choose> des Bedienfelds „Referenz“ („Hilfe“ > „Referenz“).
Eigenschaften bedingter Bereiche (If) festlegen
Im Eigenschafteninspektor zum Festlegen bedingter Bereiche können Sie die in einem bedingten Bereich in Ihrer XSL-
Seite verwendete Bedingung ändern. Der bedingte Bereich testet die Bedingung und handelt anhand des Ergebnisses.
❖ Geben Sie eine neue Bedingung in das Feld „Testen“ ein und drücken Sie die Eingabetaste.
Eigenschaften bedingter Bereiche (When) festlegen
Im Eigenschafteninspektor zum Festlegen bedingter Bereiche können Sie die in mehreren bedingten Bereichen in
Ihrer XSL-Seite verwendete Bedingung ändern. Die bedingten Bereiche testen die Bedingung und handeln anhand des
Ergebnisses.
❖ Geben Sie eine neue Bedingung in das Feld „Testen“ ein und drücken Sie die Eingabetaste.
XSL-Kommentare einfügen
Sie können einem Dokument XSL-Kommentar-Tags hinzufügen oder eine Auswahl in XSL-Kommentar-Tags setzen.
XSL-Kommentar-Tags in ein Dokument einfügen
❖ Führen Sie einen der folgenden Schritte aus:
• Wählen Sie in der Entwurfsansicht „Einfügen“ > „XSLT-Objekte“ > „XSL-Kommentar“ aus, geben Sie den
Kommentar ein (oder lassen Sie das Feld leer) und klicken Sie auf „OK“.
• Wählen Sie in der Codeansicht „Einfügen“ > „XSLT-Objekte“ > „XSL-Kommentar“ aus.
Sie können auch in der Kategorie „XSLT“ des Bedienfelds „Einfügen“ auf das Symbol „XSL-Kommentar“ klicken.
Auswahl mit XSL-Kommentar-Tags umgeben
1 Wechseln Sie zur Codeansicht („Ansicht“ > „Code“).
2 Wählen Sie den Code aus, den Sie kommentieren möchten.
3 Klicken Sie auf der Kodierungssymbolleiste auf die Schaltfläche „Kommentar anwenden“ und wählen Sie
„<xsl:comment></xsl:comment> Kommentar anwenden“ aus.
559
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Mithilfe des XPATH-Ausdrucksgenerators Ausdrücke für XML-Daten
hinzufügen
XPath (XML Path Language) ist eine Sprache zum Adressieren bestimmter Teile eines XML-Dokuments, die aber
selbst keine XML-Syntax verwendet. Normalerweise wird XPath – ähnlich wie SQL für Datenbanken – als
Abfragesprache für XML-Daten eingesetzt. Weitere Informationen zu XPath enthalten die XPath-Spezifikationen in
der W3C-Website unter www.w3.org/TR/xpath.
Der XPATH-Ausdrucksgenerator ist eine Dreamweaver-Funktion, die es Ihnen erlaubt, einfache XPath-Ausdrücke
für die Identifikation bestimmter Datenknoten und für wiederholende Bereiche zu erstellen. Der Vorteil dieser
Methode gegenüber der Methode, die Werte von der XML-Schemastruktur ins Dokument zu ziehen, besteht darin,
dass Sie den angezeigten Wert formatieren können. Der aktuelle Kontext wird aufgrund der Position der
Einfügemarke innerhalb der XSL-Datei identifiziert, wenn das Dialogfeld „XPATH-Ausdrucksgenerator“ geöffnet
wird. Der aktuelle Kontext wird in der XML-Schemastruktur fett markiert. Wenn Sie Elemente in diesem Dialogfeld
auswählen, werden die richtigen XPath-Anweisungen relativ zum aktuellen Kontext generiert. Dies vereinfacht das
Schreiben der korrekten XPath-Ausdrücke sowohl für neue als auch für fortgeschrittene Benutzer.
Note: Diese Funktion soll Ihnen helfen, einfache XPath-Ausdrücke für die Identifikation eines bestimmten Knotens oder
für wiederholende Bereiche zu erstellen. Es ist nicht möglich, die Ausdrücke hier manuell zu ändern. Wenn Sie komplexe
Ausdrücke erstellen möchten, verwenden Sie den XPATH-Ausdrucksgenerator für die ersten Schritte und passen Sie die
Ausdrücke dann in der Codeansicht oder mit dem Eigenschafteninspektor an.
XPath-Ausdrücke für die Identifikation eines bestimmten Knotens erstellen
1 Doppelklicken Sie auf der Seite auf den Platzhalter für die XML-Daten, um den XPATH-Ausdrucksgenerator zu
öffnen.
2 Wählen Sie im Dialogfeld „XPATH-Ausdrucksgenerator (Dynamischer Text)“ einen beliebigen Knoten in der
XML-Schemastruktur aus.
Der korrekte XPath-Ausdruck zur Identifikation des Knotens wird in das Feld „Ausdruck“ geschrieben.
Note: Wenn Sie einen anderen Knoten in der XML-Schemastruktur auswählen, wird der Ausdruck entsprechend
geändert.
Im folgenden Beispiel soll das Teilelement
price des item-Knotens angezeigt werden:
560
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Mit dieser Auswahl würde der folgende Code in Ihre XSLT-Seite eingefügt:
<xsl:value-of select="price"/>
3 Wählen Sie bei Bedarf eine Formatierungsoption aus dem Popupmenü „Format“. Dieser Schritt ist optional.
Das Formatieren einer Auswahl ist nützlich, wenn der Wert des Knotens eine Zahl zurückgibt. Dreamweaver bietet
eine vordefinierte Liste mit Formatierungsfunktionen. Eine vollständige Liste der verfügbaren
Formatierungsfunktionen und -beispiele finden Sie im Bedienfeld „Referenz“.
Im folgenden Beispiel soll das Teilelement
price als Währung mit zwei Dezimalstellen formatiert werden:
Mit diesen Optionen würde der folgende Code in Ihre XSLT-Seite eingefügt:
<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
4 Klicken Sie auf „OK“.
5 Um den Wert jedes Knotens in der XML-Datei anzuzeigen, wenden Sie einen wiederholten Bereich auf das
Element mit dem dynamischen Text (z. B. eine HTML-Tabellenzeile oder ein Absatz) an.
Weitere Informationen und Beispiele zum Auswählen von Knoten, um einen Wert zurückzugeben, finden Sie im
Abschnitt
<xsl:value-of> des Bedienfelds „Referenz“.
Zu wiederholenden Knoten auswählen
Sie können einen Knoten auswählen, der wiederholt werden soll, und haben die Möglichkeit, die Ergebnisse zu filtern.
Im Dialogfeld „XPATH-Ausdrucksgenerator“ wird der ausgewählte Inhalt von einem
<xsl:for-each>-Block
umgeben. Haben Sie keinen Inhalt ausgewählt, wird der
<xsl:for-each>-Block an der Einfügemarke eingefügt.
1 Doppelklicken Sie auf der Seite auf den Platzhalter für die XML-Daten, um den XPATH-Ausdrucksgenerator zu
öffnen.
2 Wählen Sie im Dialogfeld „XPATH-Ausdrucksgenerator (Bereich wiederholen)“ das Element, das wiederholt
werden soll, in der XML-Schemastruktur aus.
Der korrekte XPath-Ausdruck zur Identifikation des Knotens wird in das Feld „Ausdruck“ geschrieben.
Note: Wiederholte Elemente sind in der XML-Schemastruktur durch ein Plussymbol (+) gekennzeichnet.
561
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Im folgenden Beispiel soll jeder item-Knoten in der XML-Datei wiederholt werden.
Beim Klicken auf „OK“ wird der folgende Code in die XSLT-Seite eingefügt:
<xsl:for-each select="provider/store/items/item">
Content goes here
</xsl:for-each>
In einigen Fällen möchten Sie mit einer Teilmenge der wiederholten Knoten arbeiten, z. B. wenn Sie nur Elemente
wünschen, bei denen ein Attribut einen bestimmten Wert aufweist. In diesem Fall müssen Sie einen Filter erstellen.
Zu wiederholende Daten filtern
Verwenden Sie einen Filter, um sich wiederholende Knoten zu identifizieren, die bestimmte Attribute besitzen.
1 Wählen Sie in der XML-Schemastruktur einen zu wiederholenden Knoten aus.
2 Klicken Sie auf die Erweiterungsschaltfläche von „Filter erstellen“.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um einen leeren Filter zu erstellen.
4 Geben Sie die Filterkriterien in die folgenden Felder ein:
Filtern nach gibt den sich wiederholenden Knoten an, der die Daten enthält, anhand derer Sie filtern möchten. Das
Popupmenü enthält eine Liste von Knotenvorfahren, die relativ zu dem in der XML-Schemastruktur ausgewählten
Knoten sind.
Wo gibt das Attribut oder Teilelement des Knotens „Filtern nach“ an, mit dem die Ergebnisse eingeschränkt werden.
Sie können ein Attribut oder Teilelement aus dem Popupmenü auswählen oder einen eigenen XPath-Ausdruck in
dieses Feld eingeben, um untergeordnete Knoten zu identifizieren, die sich tiefer in der Schemastruktur befinden.
Operator gibt den Vergleichsoperator an, der im Filterausdruck verwendet werden soll.
Wert gibt den Wert an, nach dem der Knoten Filtern nach überprüft werden soll. Geben Sie den Wert ein. Wenn für
die XSLT-Seite dynamische Parameter definiert wurden, können Sie einen Parameter im Popupmenü auswählen.
5 Klicken Sie erneut auf das Plussymbol (+), um einen anderen Filter anzugeben.
Beim Eingeben der Werte und Auswählen von Optionen in den Popupmenüs, ändern sich die XPath-Ausdrücke im
Feld „Ausdruck“.
562
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Im folgenden Beispiel soll die Ergebnismenge auf die item-Knoten beschränkt werden, bei denen das @available-
Attribut den Wert
true hat.
Beim Klicken auf „OK“ wird der folgende Code in die XSLT-Seite eingefügt:
<xsl:for-each select="provider/store/items/item[@available = &apos;true&apos;]">
Content goes here
</xsl:for-each>
Note: Sie müssen String-Werte wie beispielsweise „true“ in Anführungszeichen setzen. Dreamweaver verschlüsselt die
Anführungszeichen (&apos;), damit sie als gültige XHTML-Daten eingegeben werden.
563
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Sie können auch komplexere Filter erstellen, mit denen Sie im Rahmen der Filterkriterien übergeordnete Knoten
angeben können. Im folgenden Beispiel soll die Ergebnismenge auf die
item-Knoten beschränkt werden, bei denen
das
@id-Attribut von store den Wert „1“ hat und der price-Knoten von item größer als 5 ist.
Beim Klicken auf „OK“ wird der folgende Code in die XSLT-Seite eingefügt:
<xsl:for-each select="provider/store[@id = 1]/items/item[price &gt; 5]">
Content goes here
</xsl:for-each>
Weitere Informationen und Beispiele zu wiederholten Bereichen finden Sie im Abschnitt <xsl:for-each> des
Bedienfelds „Referenz“.
XSL-Transformationen auf dem Client ausführen
Arbeitsablauf beim Durchführen clientseitiger XSL-Transformationen
Sie können clientseitige XSL-Transformationen durchführen. Informieren Sie sich über server- und clientseitige XSL-
Transformationen und über den Einsatz von XML und XSL mit Webseiten, bevor Sie Seiten erstellen, die XML-Daten
anzeigen.
Der allgemeine Arbeitsablauf für die Durchführung clientseitiger XSL-Transformationen ist wie folgt (jeder dieser
Schritte wird in einem anderen Thema beschrieben):
1. Richten Sie eine Dreamweaver-Site ein.
2. Erstellen Sie eine XSLT-Seite oder konvertieren Sie eine HTML-Seite in eine XSLT-Seite.
• Erstellen Sie in der Dreamweaver-Site eine vollständige XSLT-Seite.
564
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
• Wandeln Sie eine bestehende HTML-Seite in eine ganze XSLT-Seite um.
3. Hängen Sie an die Seite eine XML-Datenquelle an (falls Sie dies nicht bereits getan haben).
Die angefügte XML-Datei muss sich im gleichen Verzeichnis befinden wie die XSLT-Seite.
4. Binden Sie die XML-Daten an die XSLT-Seite an.
5. Zeigen Sie die XML-Daten an, indem Sie die Daten an das XSLT-Fragment oder an die ganze XSLT-Seite
binden.
6. Fügen Sie bei Bedarf ein XSLT-Objekt für wiederholende Bereiche zur Tabelle oder Tabellenzeile hinzu, die
die XML-Daten-Platzhalter enthält.
7. Hängen Sie die XSLT-Seite an die XML-Seite an.
8. Senden Sie die XML-Seite und die verknüpfte XSLT-Seite an Ihren Webserver.
9. Zeigen Sie die XML-Seite in einem Browser an.
Dabei wandelt der Browser die XML-Daten um, formatiert sie mit der XSLT-Seite und zeigt die formatierte Seite im
Browser an.
More Help topics
“Arbeiten mit Dreamweaver-Sites” on page 40
“Anwendungsserver auswählen” on page 577
“XSLT-Seite mit einer XML-Seite verknüpfen” on page 565
“XML und XSL mit Webseiten verwenden” on page 538
“Clientseitige XSL-Transformationen” on page 541
“Serverseitige XSL-Transformationen” on page 539
Ganze XSLT-Seiten erstellen und Daten anzeigen
Für clientseitige Transformationen müssen Sie eine vollständige XSLT-Seite erstellen. (Diese Art der Transformation
ist nicht mit XSLT-Fragmenten möglich.) Führen Sie diese allgemeinen Schritte aus, um XSLT-Seiten zu erstellen, für
clientseitige Transformationen zu formatieren und XML-Daten einzubinden:
1. Erstellen Sie die XSLT-Seite.
2. Zeigen Sie die Daten in der XSLT-Seite an.
3. Zeigen Sie die wiederholten Elemente in der XSLT-Seite an.
More Help topics
“XSLT-Seiten erstellen” on page 547
“XML-Daten in XSLT-Seiten anzeigen” on page 548
“Wiederholte XML-Elemente anzeigen” on page 550
565
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
XSLT-Seite mit einer XML-Seite verknüpfen
Wenn eine ganze XSLT-Seite mit dynamischen Inhaltsplatzhaltern für die XML-Daten vorliegt, müssen Sie in der
XML-Seite einen Verweis auf die XSLT-Seite einfügen.
Note: Die für clientseitige Transformationen verwendeten XML- und XSL-Seiten müssen im gleichen Verzeichnis
abgelegt werden. Andernfalls liest der Browser die XML-Datei und sucht nach der XSLT-Seite für die Transformation,
kann aber die von relativen Links in der XSLT-Seite definierten Elemente (Stylesheets, Bilder usw.) nicht finden.
1 Öffnen Sie die XML-Datei, die Sie mit der XSLT-Seite verknüpfen möchten.
2 Wählen Sie „Befehle“ > „XSLT-Stylesheet anhängen“.
3 Klicken Sie im eingeblendeten Dialogfeld auf die Schaltfläche „Durchsuchen“, navigieren Sie zur gewünschten
XSLT-Seite, wählen Sie sie aus und klicken Sie auf „OK“.
4 Das Dialogfeld wird geschlossen und der Verweis auf die XSLT-Seite wird oben in das XML-Dokument eingefügt.
Fehlende Zeichenentitäten für XSLT
Fehlende Zeichenentitäten angeben
In XSLT sind einige Zeichen in bestimmten Kontexten nicht zulässig. So können Sie beispielsweise das Zeichen für
„kleiner als“ (<) und das Et-Zeichen (&) nicht in den Text zwischen zwei Tags oder in einem Attributwert verwenden.
Die XSLT-Transformations-Engine meldet einen Fehler, wenn diese Zeichen fälschlicherweise verwendet wurden.
Um das Problem zu lösen, können Sie die Sonderzeichen durch Zeichenentitäten ersetzen.
Eine Zeichenentität ist eine Zeichenfolge, die andere Zeichen repräsentiert. Zeichenentitäten sind entweder benannt
oder nummeriert. Eine benannte Entität beginnt mit einem Et-Zeichen (&), auf das der Name oder Zeichen folgen,
und endet mit einem Semikolon (;).
&lt; stellt beispielsweise die linke spitze Klammer (<) dar. Nummerierte Entitäten
beginnen und enden ebenfalls auf die gleiche Weise, nur wird das Zeichen hier durch ein Hash-Zeichen (#) und eine
Zahl angegeben.
In XSLT gibt es die folgenden fünf vordefinierten Entitäten:
Wenn Sie andere Zeichenentitäten in einer XSL-Datei verwenden, müssen Sie diese im DTD-Abschnitt der XSL-Datei
definieren. Dreamweaver stellt mehrere Definitionen für Standardentitäten bereit, die oben in einer in Dreamweaver
erstellten XSL-Datei angezeigt werden. Diese Standardentitäten decken eine breite Auswahl der gängigsten Zeichen ab.
Wenn Sie die XSL-Datei in einem Browser anzeigen, überprüft Dreamweaver die XSL-Datei auf nicht definierte
Entitäten und informiert Sie darüber, falls eine gefunden wird.
Zeichen Entitätscode
< (kleiner als) &lt;
& (Et-Zeichen) &amp;
> (größer als) &gt;
" (Anführungszeichen) &quot;
‘ (Apostroph) &apos;
566
VERWENDEN VON DREAMWEAVER
XML-Daten mit XSLT anzeigen
Last updated 10.4.2012
Wenn Sie eine Vorschau einer an eine XSLT-Datei angehängten XML-Datei oder einer serverseitigen Seite mit einer
XSLT-Transformation anzeigen, informiert Sie der Server oder Browser (anstelle von Dreamweaver) über die
undefinierte Entität. Im Folgenden sehen Sie ein Beispiel für eine Meldung, die in Internet Explorer angezeigt wird,
wenn Sie eine XML-Datei anfordern, die von einer XSL-Datei mit einer fehlenden Entitätsdefinition transformiert
wurde.
Reference to undefined entity 'auml'. Error processing resource
'http://localhost/testthis/list.xsl'. Line 28, Position 20
<p class=''test''>&auml;</p>
-------------------^
Um den Fehler in Ihrer Seite zu korrigieren, müssen Sie die Entitätsdefinition manuell zur Seite hinzufügen.
Fehlende Entitätsdefinitionen angeben
1 Suchen Sie das fehlende Zeichen auf der Zeichenentitätenreferenz (in englischer Sprache) auf der W3C-Website
unter www.w3.org/TR/REC-html40/sgml/entities.html.
Diese Seite enthält die 252 zulässigen Entitäten in HTML 4 und XHTML 1.0.
Wenn beispielsweise die Zeichenentität Egrave fehlt, suchen Sie auf der W3C-Webseite nach „Egrave“. Dies führt Sie
zu dem folgenden Eintrag:
<!ENTITY Egrave CDATA "&#200;" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
2 Notieren Sie den im Eintrag enthaltenen Namen und Code der Entität.
In diesem Beispiel ist
Egrave der Name der Entität und &#200 ihr Code.
3 Wechseln Sie dann in die Codeansicht und geben Sie oben in Ihrer XSL-Datei (im Anschluss an die DOCTYPE-
Deklaration und die anderen Entitäts-Tags) das folgende Entitäts-Tag ein:
<!ENTITY entityname "entitycode;">
Im vorliegenden Beispiel würden Sie das folgende Entitäts-Tag eingeben:
<!ENTITY Egrave "&#200;">
4 Speichern Sie die Datei.
Wenn Sie die gleichen Zeichenentitäten wiederholt verwenden, empfiehlt es sich, ihre Definitionen permanent in die
XSL-Dateien einzufügen, die von Dreamweaver standardmäßig erstellt werden, wenn Sie „Datei“ >„Neu“ wählen.
Entitätsdefinitionen in die XSL-Dateien einfügen, die Dreamweaver standardmäßig erstellt
1 Suchen Sie die folgende Konfigurationsdatei im Dreamweaver-Anwendungsordner und öffnen Sie sie in einem
beliebigen Texteditor.
„Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml“
2 Suchen Sie die Deklaration „mm_xslt_1“:
<documenttypedeclaration id="mm_xslt_1">
3 Geben Sie die neuen Entitäts-Tags wie folgt in der Liste der Entitäts-Tags ein:
<!ENTITY entityname "entitycode;">
4 Speichern Sie die Datei und starten Sie Dreamweaver neu.
567
Last updated 10.4.2012
Chapter 19: Erstellen dynamischer Sites
vorbereiten
Bevor Sie mit dem Erstellen dynamischer Webseiten beginnen, müssen Sie einige Vorbereitungen treffen. Dazu
gehören die Einrichtung eines Webanwendungsservers und die Einrichtung einer Datenbankverbindung für
ColdFusion-, ASP- und PHP-Anwendungen. Abhängig von der Servertechnologie behandelt
Adobe® Dreamweaver® CS5 Datenbankverbindungen unterschiedlich.
Webanwendungen
Grundlagen zu Webanwendungen
Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgültige
Inhalt einer Seite wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgültige
Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ändern kann, wird eine solche
Seite als dynamische Seite bezeichnet.
Webanwendungen werden gezielt zur Bewältigung verschiedener Herausforderungen und Problemstellungen erstellt.
In diesem Abschnitt werden häufige Verwendungszwecke für Webanwendungen beschrieben. Sie finden hier auch ein
einfaches Beispiel.
Häufige Verwendungszwecke für Webanwendungen
Webanwendungen bieten sowohl Besuchern als auch Entwicklern unter anderem die folgenden Vorteile:
• Besucher können Informationen in inhaltsreichen Websites schnell und einfach finden.
Solche Webanwendungen ermöglichen es den Besuchern, den Inhalt ganz nach Wunsch zu durchsuchen und zu
organisieren sowie durch den Inhalt zu navigieren. Beispiele hierfür sind Firmenintranets, Microsoft MSDN
(www.msdn.microsoft.com) und Amazon.com (www.amazon.com).
• Die von Besuchern der Site eingegebenen Daten können erfasst, gespeichert und analysiert werden.
Früher wurden Daten, die in HTML-Formulare eingegeben wurden, zur Verarbeitung per E-Mail an Mitarbeiter
oder CGI-Anwendungen gesendet. Mit Webanwendungen können Formulardaten direkt in einer Datenbank
gespeichert werden. Zudem können Daten extrahiert und webbasierte Berichte zu Analysezwecken erstellt werden.
Beispiele sind Seiten für Online-Banking oder Online-Bestellungen, Umfragen und Formulare für Kunden-
Feedback.
• Websites, deren Inhalt sich häufig ändert, können schneller aktualisiert werden.
Durch den Einsatz von Webanwendungen müssen Webdesigner den HTML-Code einer Site nicht ständig
aktualisieren. Inhaltsanbieter wie z. B. Nachrichtenredaktionen liefern der Webanwendung Inhalte und die
Webanwendung aktualisiert die Site automatisch. Beispiele sind die Zeitschrift Economist (www.economist.com)
sowie CNN (www.cnn.com).
568
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Beispiel für eine Webanwendung
Julia ist professionelle Webdesignerin mit solider Erfahrung in Dreamweaver. Ihre Aufgabe ist die Verwaltung der
Intranet- und Internet-Sites eines mittelständischen Unternehmens mit 1000 Mitarbeitern. Eines Tages spricht der
Personalsachbearbeiter Chris sie an und bittet sie um Hilfe bei dem folgenden Problem: Die Personalabteilung
verwaltet ein Fitnessprogramm, bei dem die Mitarbeiter für jeden Kilometer Punkte erhalten, den sie zu Fuß gehen,
radeln oder joggen. Alle Mitarbeiter müssen Chris per E-Mail mitteilen, wie viele Kilometer sie jeweils pro Monat
zurückgelegt haben. Am Monatsende bearbeitet Chris alle E-Mails und die Mitarbeiter erhalten als Preis kleinere
Geldbeträge, deren Höhe sich nach der Gesamtzahl ihrer Punkte richtet.
Das Problem ist nun, dass das Fitnessprogramm sich als durchschlagender Erfolg erwiesen hat. Inzwischen nehmen
so viele Mitarbeiter am Programm teil, dass Chris am Monatsende geradezu mit E-Mails überschüttet wird. Chris fragt
Julia, ob eine webgestützte Lösung möglich ist.
Julia empfiehlt eine intranetbasierte Webanwendung, die folgende Aufgaben durchführt:
• Die Mitarbeiter können ihre Kilometeranzahl auf einer Webseite in ein einfaches HTML-Formular eingeben.
• Die Kilometeranzahl der Mitarbeiter wird in einer Datenbank gespeichert.
• Die Fitnesspunkte werden auf Grundlage der Kilometeranzahl berechnet.
• Die Mitarbeiter können ihre monatliche Leistung verfolgen.
• Am Monatsende kann Chris dann mit einem einfachen Mausklick die Gesamtanzahl der Punkte anzeigen.
Julia verwendet Dreamweaver, um die Webanwendung schnell und einfach zu erstellen. Noch vor der
Mittagspause ist sie damit fertig.
Funktionsweise einer Webanwendung
Eine Webanwendung ist eine Sammlung statischer und dynamischer Webseiten. Statische Webseiten ändern sich
nicht, wenn sie von den Besuchern der Site aufgerufen werden. Der Webserver sendet die Seite an den anfordernden
Webbrowser, ohne sie zu ändern. Eine dynamische Webseite wird dagegen vom Server geändert, bevor sie an den
Browser gesendet wird. Wegen dieser Änderungen wird eine solche Seite als dynamisch bezeichnet.
Sie können beispielsweise eine Seite erstellen, auf der Fitnessergebnisse angezeigt werden, wobei bestimmte
Einzelheiten (wie der Name des Mitarbeiters und die Ergebnisse) aber erst festgelegt werden, wenn die Seite von einem
bestimmten Mitarbeiter angefordert wird.
Im nächsten Abschnitt wird die Funktionsweise von Webanwendungen genauer erläutert.
Statische Webseiten verarbeiten
Eine statische Website besteht aus mehreren zusammengehörigen HTML-Seiten und -Dateien, die sich auf einem
Computer befinden, auf dem wiederum ein Webserver ausgeführt wird.
Bei einem Webserver handelt es sich um Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Eine
Seitenanforderung wird generiert, wenn ein Besucher auf einen Hyperlink auf einer Webseite klickt, in einem Browser
ein Lesezeichen wählt oder eine URL im Adresstextfeld des Browsers eingibt.
Der endgültige Inhalt einer statischen Webseite wird vom Designer festgelegt und ändert sich nicht, wenn die Seite
angefordert wird. Beispiel:
569
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
Der gesamte HTML-Code der Seite wird vom Designer geschrieben, bevor die Seite auf dem Server abgelegt wird. Da
der HTML-Code sich nicht mehr ändert, wenn die Seite einmal auf dem Server abgelegt wurde, bezeichnet man eine
solche Seite als statisch.
Note: Genau genommen kann eine „statische“ Seite alles andere als statisch sein. Sie kann beispielsweise durch ein
Rollover-Bild oder einen Flash-Inhalt (eine SWF-Datei) überaus lebendig wirken. In dieser Dokumentation wird eine
Seite jedoch als statisch bezeichnet, wenn sie ohne Änderungen an den Browser gesendet wird.
Wenn eine statische Seite vom Webserver angefordert wird, liest der Server zunächst die Anforderung. Anschließend
sucht er die Seite und sendet sie an den Browser. Dies wird im folgenden Beispiel veranschaulicht:
1. Der Webbrowser fordert eine statische Seite an. 2. Der Webserver sucht die Seite. 3. Der Webserver sendet die Seite an den Browser.
Bei Webanwendungen stehen bestimmte Codezeilen noch nicht fest, wenn die Seite vom Besucher angefordert wird.
Diese Zeilen müssen durch einen bestimmten Mechanismus festgelegt werden, bevor die Seite an den Browser
gesendet werden kann. Dieser Mechanismus wird im folgenden Abschnitt beschrieben.
Dynamische Webseiten verarbeiten
Wenn eine statische Webseite angefordert wird, sendet der Webserver die Seite umgehend und ohne Änderungen an
den Browser. Wenn eine dynamische Seite angefordert wird, ist die Reaktion jedoch anders: Die Seite wird an eine
spezielle Software weitergeleitet, die für die Fertigstellung der Seite zuständig ist. Diese Software wird als
Anwendungsserver bezeichnet.
Der Anwendungsserver liest den Code auf der Seite, stellt die Seite gemäß den Anweisungen im Code fertig und
entfernt dann den Code aus der Seite. Daraus ergibt sich eine statische Seite, die der Anwendungsserver an den
Webserver zurückgibt. Der Webserver sendet die Seite anschließend an den Browser. Die Seite, die beim Browser
eingeht, besteht ausschließlich aus HTML. Im Folgenden wird dieser Vorgang veranschaulicht:
<HTML>
<p>H1
</HTML>
Webbrowser
Webserver
1
2
3
Antwort
Anforderung
570
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
1. Der Webbrowser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und übergibt sie an den Anwendungsserver. 3. Der
Anwendungsserver analysiert die Anweisungen auf der Seite und stellt die Seite fertig. 4. Der Anwendungsserver gibt die fertiggestellte Seite an
den Webserver zurück. 5. Der Webserver sendet die fertiggestellte Seite an den Browser.
Zugriff auf Datenbanken
Anwendungsserver ermöglichen die Arbeit mit serverseitigen Ressourcen, wie z. B. Datenbanken. So kann eine
dynamische Seite den Anwendungsserver beispielsweise anweisen, Daten aus einer Datenbank zu extrahieren und in
den HTML-Code der Seite einzufügen. Weitere Informationen finden Sie unter
www.adobe.com/go/learn_dw_dbguide_de.
Wenn Sie Inhalte in einer Datenbank speichern, können Sie den Entwurf der Website von den Inhalten trennen, die
den Benutzern der Site angezeigt werden sollen. Anstatt einzelne HTML-Dateien für jede Seite zu schreiben, müssen
Sie für die verschiedenen Informationsarten, die präsentiert werden sollen, nur eine einzige Seite – auch Vorlage
genannt – erstellen. Sie können dann Inhalte in eine Datenbank laden und diese anschließend auf der Website
anzeigen lassen, wenn sie von Benutzern abgerufen werden. Sie können so auch Informationen in einer einzelnen
Quelle aktualisieren und diese Änderung dann für die gesamte Website übernehmen, ohne jede Seite manuell
bearbeiten zu müssen. Mit Adobe® Dreamweaver® CS5 können Sie Webformulare erstellen, um Daten in einer
Datenbank einzufügen, zu aktualisieren oder zu löschen.
Die Anweisung, Daten aus einer Datenbank zu extrahieren, wird als Datenbankabfrage bezeichnet. Eine Abfrage
besteht aus Suchkriterien, die in einer Datenbanksprache namens SQL (Structured Query Language) ausgedrückt
werden. Die SQL-Abfrage wird in die serverseitigen Skripts oder Tags der Seite geschrieben.
Anwendungsserver können nicht direkt mit Datenbanken kommunizieren, da sie das spezielle Datenformat der
Datenbanken nicht entziffern können, ähnlich wie auch ein Word-Dokument nicht immer korrekt in Notepad oder
BBEdit angezeigt werden kann. Die Kommunikation zwischen Anwendungsserver und Datenbank ist nur über einen
Datenbanktreiber möglich. Dabei handelt es sich um Software mit der Funktion eines Vermittlers zwischen dem
Anwendungsserver und der Datenbank.
Nachdem der Treiber die Kommunikation aufgebaut hat, wird die Datenbankabfrage ausgeführt und eine
Datensatzgruppe erstellt. Eine Datensatzgruppe ist eine Datenmenge, die aus einer Tabelle bzw. mehreren Tabellen
einer Datenbank extrahiert wird. Die Datensatzgruppe wird wieder an den Anwendungsserver geleitet, der die Daten
in die Seite einfügt.
Das folgende Beispiel zeigt eine einfache, in SQL geschriebene Datenbankabfrage:
Anwendungs-
server
<HTML>
<p>H1
</HTML>
<HTML>
<code>
</HTML>
Webbrowser
Webserver
1
2 3
45
Antwort
Anforderung
571
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
SELECT lastname, firstname, fitpoints
FROM employees
Mit dieser Anweisung wird eine Datensatzgruppe mit drei Spalten erstellt, deren Zeilen den Nachnamen, den
Vornamen und die Fitnesspunkte aller Mitarbeiter enthalten, die in der Datenbank gespeichert sind. Weitere
Informationen finden Sie unter www.adobe.com/go/learn_dw_sqlprimer_de.
Das folgende Beispiel zeigt, wie eine Datenbankabfrage durchgeführt wird und Daten an den Browser zurückgegeben
werden:
1. Der Webbrowser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und übergibt sie an den Anwendungsserver. 3. Der
Anwendungsserver analysiert die Anweisungen auf der Seite. 4. Der Anwendungsserver sendet die Abfrage an den Datenbanktreiber. 5. Der
Treiber führt die Datenbankabfrage aus. 6. Die Datensatzgruppe wird an den Treiber zurückgegeben. 7. Der Treiber übergibt die
Datensatzgruppe an den Anwendungsserver. 8. Der Anwendungsserver fügt Daten in die Seite ein und übergibt die Seite dann an den
Webserver. 9. Der Webserver sendet die fertiggestellte Seite an den Browser.
Mit Ihrer Webanwendung können Sie praktisch jede Datenbank verwenden, sofern auf dem Server der entsprechende
Datenbanktreiber installiert ist.
Wenn Sie kleine, kostengünstige Anwendungen erstellen möchten, können Sie eine Datenbank auf Dateibasis
verwenden, die beispielsweise in Microsoft Access erstellt wurde. Wenn Sie robuste Anwendungen für kritische
Geschäftsabläufe erstellen möchten, können Sie eine Datenbank auf Serverbasis verwenden, die beispielsweise in
Microsoft SQL Server, Oracle 9i oder MySQL erstellt wurde.
Wenn sich Ihre Datenbank nicht auf demselben System wie der Webserver befindet, müssen Sie sicherstellen, dass
zwischen den beiden Systemen eine schnelle Verbindung besteht, damit die Webanwendung zügig und rationell
arbeiten kann.
More Help topics
Einführung in Datenbanken
Anwendungs-
server
<HTML>
<p>data
</HTML>
<HTML>
<code>
</HTML>
Datensatz-
gruppe
Abfrage
Datenbank-
treiber
Webbrowser
WEBSERVER
1
2 3
4
5
6
789
Antwort
Anforderung
Datenbank
572
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Dynamische Seiten erstellen
Das Erstellen dynamischer Seiten geschieht in zwei Schritten: Zunächst muss der HTML-Code geschrieben werden
und dann müssen dem HTML-Code die serverseitigen Skripts oder Tags hinzugefügt werden, um eine dynamische
Seite zu erhalten. Im resultierenden Code ist die Programmiersprache im HTML-Code der Seite eingebettet. Daher
werden diese Sprachen auch als HTML-eingebettete Programmiersprachen bezeichnet. Im folgenden Beispiel wird
CFML (ColdFusion Markup Language) verwendet:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<!--- embedded instructions start here --->
<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>
<!--- embedded instructions end here --->
</body>
</html>
Die eingebetteten Anweisungen auf dieser Seite bewirken die folgenden Aktionen:
1 Eine Variable namens department wird erstellt, der die Zeichenfolge "Sales" zugewiesen wird.
2 Der Wert "Sales" der Variablen wird in den HTML-Code geschrieben.
Der Anwendungsserver gibt die folgende Seite an den Webserver zurück:
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
Der Webserver sendet die Seite an den Browser zurück, in dem sie folgendermaßen angezeigt wird:
About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our Sales page.
Sie wählen eine Skript- oder tagbasierte Sprache entsprechend der auf dem Server vorhandenen Servertechnologie. Im
Folgenden sind die gebräuchlichsten Programmiersprachen für die von Dreamweaver unterstützten
Servertechnologien aufgeführt:
573
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Dreamweaver kann die serverseitigen Skripts oder Tags schreiben, die für funktionsfähige Seiten erforderlich sind. Sie
können sie jedoch auch manuell in der Dreamweaver-Codeumgebung schreiben.
More Help topics
“Anwendungsserver auswählen” on page 577
Terminologie für Webanwendungen
In diesem Abschnitt werden häufig verwendete Begriffe in Bezug auf Webanwendungen erläutert.
Ein Anwendungsserver ist Software, die einen Webserver bei der Verarbeitung von Webseiten unterstützt, die
serverseitige Skripts oder Tags enthalten. Wenn eine solche Seite vom Server angefordert wird, übergibt der Webserver
die Seite zur Verarbeitung an den Anwendungsserver, bevor sie an den Browser gesendet wird. Weitere Informationen
finden Sie unter “Funktionsweise einer Webanwendung” on page 568.
Zu den häufig verwendeten Anwendungsservern gehören ColdFusion und PHP.
Eine Datenbank ist eine in Tabellen gespeicherte Datensammlung. Jede Zeile der Tabelle bildet einen Datensatz und
jede Spalte bildet ein Feld im Datensatz, wie im Folgenden gezeigt:
Ein Datenbanktreiber ist Software mit der Funktion eines Vermittlers zwischen dem Anwendungsserver und der
Datenbank. Die Daten in einer Datenbank werden in einem speziellen Format gespeichert. Mithilfe eines
Datenbanktreibers kann die Webanwendung Daten lesen und bearbeiten, die sonst nicht lesbar sind.
Ein Datenbankmanagementsystem (DBMS oder Datenbanksystem) ist Software, die zur Erstellung und Bearbeitung
von Datenbanken dient. Häufig verwendete Datenbanksysteme sind beispielsweise Microsoft Access, Oracle 9i und
MySQL.
Eine Datenbankabfrage ist ein Vorgang, bei dem eine Datensatzgruppe aus einer Datenbank extrahiert wird. Eine
Abfrage besteht aus Suchkriterien, die in einer Datenbanksprache namens SQL ausgedrückt werden. In der Abfrage
kann beispielsweise vorgegeben werden, dass nur bestimmte Spalten oder Datensätze in die Datensatzgruppe
aufgenommen werden.
Eine dynamische Seite ist eine Webseite, die zur Laufzeit von einem Anwendungsserver angepasst und erst dann an
den Browser gesendet wird.
Servertechnologie Sprache
ColdFusion ColdFusion Markup Language (CFML)
Active Server Pages (ASP) VBScript
JavaScript
PHP PHP
Number LastName FirstName Position Goal
Datensätze
(Zeilen)
Felder (Spalten)
574
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Eine Datensatzgruppe ist eine Datenteilmenge, die aus Tabellen einer Datenbank extrahiert wird, wie im folgenden
Beispiel gezeigt:
Eine relationale Datenbank ist eine Datenbank mit mehreren Tabellen, deren Daten von den Tabellen gemeinsam
verwendet werden. Die folgende Datenbank ist relational, da die Spalte „DepartmentID“ von zwei Tabellen genutzt
wird.
Eine Servertechnologie wird von einem Anwendungsserver verwendet, um dynamische Seiten zur Laufzeit zu
ändern.
Die Dreamweaver-Entwicklungsumgebung unterstützt die folgenden Servertechnologien:
• Adobe® ColdFusion®
• Microsoft Active Server Pages (ASP)
• PHP: Hypertext Preprocessor (PHP)
Mit der Code-Entwicklungsumgebung von Dreamweaver können Sie auch Seiten für beliebige andere
Servertechnologien entwickeln, die nicht in der Liste aufgeführt sind.
Eine statische Seite ist eine Webseite, die zur Laufzeit nicht von einem Anwendungsserver angepasst, sondern
unmittelbar an den Browser gesendet wird. Weitere Informationen finden Sie unter “Statische Webseiten verarbeiten”
on page 568.
Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgültige
Inhalt dieser Seiten wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgültige
Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ändern kann, wird eine solche
Seite als dynamische Seite bezeichnet.
Ein Webserver ist Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Eine Seitenanforderung wird
generiert, wenn der Besucher auf einen Hyperlink auf einer Webseite klickt, in einem Browser ein Lesezeichen wählt
oder eine URL im Adresstextfeld des Browsers eingibt.
Number
Datenbanktabelle
LastName FirstName Position Goals
Datensatzgruppen-Tabelle
LastName FirstName Position
575
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Gängige Webserver sind beispielsweise Microsoft Internet Information Server (IIS) und Apache HTTP Server.
Computer für die Entwicklung von Anwendungen
einrichten
Voraussetzungen für die Erstellung von Webanwendungen
Zum Erstellen von Webanwendungen in Adobe® Dreamweaver® CS5 sind folgende Komponenten erforderlich:
• Ein Webserver
• Ein Anwendungsserver, der mit dem Webserver funktioniert
Note: Im Zusammenhang mit Webanwendungen bezeichnen die Begriffe Webserver und Anwendungsserver Software
und nicht Hardware.
Wenn Sie beabsichtigen, eine Datenbank mit Ihrer Webanwendung zu benutzen, benötigen Sie noch folgende
zusätzliche Software:
• Ein Datenbanksystem
• Einen Datenbanktreiber, der die Datenbank unterstützt
Einige Web-Host-Dienstanbieter erlauben es Ihnen, zum Testen und Bereitstellen von Webanwendungen ihre
Software zu verwenden. In einigen Fällen dürfen Sie die erforderliche Software zu Entwicklungszwecken auf
demselben Computer wie Dreamweaver installieren. Sie können sie jedoch auch auf einem Netzwerkcomputer
installieren (der in der Regel unter Windows 2000 oder Windows XP betrieben wird), sodass alle Entwickler Ihres
Teams an einem Projekt zusammenarbeiten können.
Wenn Sie beabsichtigen, eine Datenbank mit Ihrer Webanwendung zu benutzen, müssen Sie zuerst eine
Verbindung mit der Datenbank herstellen.
More Help topics
“Einrichten einer ColdFusion-Entwicklungsumgebung” on page 578
“Einrichten einer PHP-Entwicklungsumgebung” on page 578
“Einrichten einer ASP-Entwicklungsumgebung” on page 578
Grundlagen zum Webserver
Zum Entwickeln und Testen dynamischer Webseiten benötigen Sie einen funktionsfähigen Webserver. Bei einem
Webserver handelt es sich um Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Webserver werden
manchmal auch als HTTP-Server bezeichnet. Sie können einen Webserver auf einem lokalen Computer installieren
und verwenden.
Macintosh-Benutzer können den bereits auf dem Computer installierten Apache-Webserver verwenden.
Note: Adobe bietet keine technische Unterstützung für Software von anderen Herstellern, wie z. B. für Microsoft Internet
Information Server. Sollten Sie Hilfe zu einem Microsoft-Produkt benötigen, wenden Sie sich an den technischen Support
von Microsoft.
576
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Wenn Sie Webanwendungen mithilfe von Internet Information Server (IIS) entwickeln, entspricht der Standardname
des Webservers dem Namen Ihres Computers. Sie können den Servernamen ändern, indem Sie Ihrem Computer
einen anderen Namen geben. Falls Ihr Computer keinen Namen hat, lautet der Servername „localhost“.
Der Servername entspricht dem Stammordner des Servers, der (bei Windows-Rechnern) normalerweise
„C:\Inetpub\wwwroot“ lautet. Sie können beliebige im Stammordner gespeicherte Webseiten öffnen, indem Sie die
folgende URL in einem Browser eingeben, der auf Ihrem Computer ausgeführt wird:
http://Ihr_Servername/Ihr_Dateiname
Angenommen, der Servername lautet „mer_noire“ und im Stammordner „C:\Inetpub\wwwroot\“ befindet sich eine
Webseite namens „soleil.html“. Sie können diese Seite öffnen, indem Sie in einem Browser auf dem lokalen Computer
die folgende URL eingeben:
http://mer_noire/soleil.html
Note: Verwenden Sie in URLs normale Schrägstriche (/), keine umgekehrten (\\).
Sie können auch Webseiten öffnen, die in einem Unterordner des Stammordners gespeichert sind. Dazu geben Sie den
Pfad des Unterordners in der URL an. Angenommen, die Datei „soleil.html“ befindet sich im Unterordner „gamelan“.
Der Pfad lautet daher:
C:\Inetpub\wwwroot\gamelan\soleil.html
Sie können diese Seite öffnen, indem Sie die folgende URL in einem Browser auf Ihrem Computer eingeben:
http://mer_noire/gamelan/soleil.html
Wenn der Webserver auf Ihrem Computer ausgeführt wird, können Sie den Servernamen durch
localhost ersetzen.
Durch Eingabe der folgenden URLs wird beispielsweise die gleiche Seite in einem Browser geöffnet:
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
Note: Anstelle des Servernamens oder des Worts „localhost“ können Sie auch den Ausdruck „127.0.0.1“ verwenden
(beispielsweise http://127.0.0.1/gamelan/soleil.html).
More Help topics
“Einrichten einer ColdFusion-Entwicklungsumgebung” on page 578
“Einrichten einer PHP-Entwicklungsumgebung” on page 578
“Einrichten einer ASP-Entwicklungsumgebung” on page 578
Webserver auswählen
Für das Entwickeln und Testen von Webanwendungen steht eine Reihe gebräuchlicher Webserver zur Auswahl,
darunter auch Microsoft Internet Information Server (IIS) und Apache HTTP Server.
Wenn Sie keinen Web-Hosting-Dienst verwenden, wählen Sie einen Webserver aus und installieren Sie ihn auf Ihrem
lokalen Computer. Windows- und Macintosh-Benutzer, die ColdFusion-Webanwendungen entwickeln möchten,
können dazu den Webserver verwenden, der in der Entwicklerversion des ColdFusion 8-Anwendungsservers
enthalten ist und der kostenlos installiert und genutzt werden kann.
577
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Andere Windows-Benutzer können einen Webserver auf ihrem lokalen Computer ausführen, indem sie IIS
installieren. Dieser Webserver ist möglicherweise bereits auf Ihrem System installiert. Überprüfen Sie, ob Ihre
Ordnerstruktur den Ordner „C:\Inetpub“ oder „D:\Inetpub“ enthält. Dieser Ordner wird bei der Installation von IIS
erstellt.
Mac OS-Benutzer können den lokalen Apache-Webserver verwenden, der mit dem Betriebssystem installiert wird.
Wenn Sie Informationen zum Installieren und Konfigurieren anderer Webserver benötigen, schlagen Sie in der
Dokumentation des Serveranbieters nach oder wenden Sie sich an Ihren Systemadministrator.
Anwendungsserver auswählen
Bei einem Anwendungsserver handelt es sich um Software, die einem Webserver bei der Verarbeitung dynamischer
Seiten hilft. Bei der Wahl eines Anwendungsservers sind mehrere Faktoren zu berücksichtigen. Dazu gehören unter
anderem Ihr Budget, die zu verwendende Servertechnologie (ColdFusion, ASP oder PHP) und der Typ des
Webservers.
Budget Einige Anbieter verkaufen Highend-Anwendungsserver, die in Anschaffung und Administration kostspielig
sind. Andere Anbieter liefern einfachere und kostengünstigere Lösungen (z. B. ColdFusion). Einige
Anwendungsserver sind in Webserver integriert (z. B. Microsoft IIS), andere können kostenlos im Internet
heruntergeladen werden (z. B. PHP).
Servertechnologie Anwendungsserver verwenden unterschiedliche Technologien. Dreamweaver unterstützt drei
Servertechnologien: ColdFusion, ASP und PHP. In der folgenden Tabelle sind gängige Anwendungsserver für die von
Dreamweaver unterstützten Servertechnologien aufgeführt:
Weitere Informationen zu ColdFusion finden Sie in der ColdFusion-Hilfe, die Sie über das Menü „Hilfe“ aufrufen
können.
Weitere Informationen zu ASP finden Sie auf der Microsoft-Website unter
http://msdn.microsoft.com/library/default.asp?url=/library/de-de/dnanchor/html/activeservpages.asp.
Weitere Informationen zu PHP finden Sie auf der PHP-Website unter www.php.net/.
Datenbank auswählen
Datenbanken können je nach Menge und Komplexität der zu speichernden Daten in vielen Variationen vorliegen. Bei
der Auswahl einer Datenbank sind mehrere Faktoren zu berücksichtigen, darunter beispielsweise Ihr Budget und die
geschätzte Anzahl der Benutzer, die auf die Datenbank zugreifen.
Budget Einige Anbieter vertreiben Highend-Datenbankserver, deren Anschaffung und Verwaltung kostspielig sind.
Andere bieten einfachere und kostengünstigere Lösungen an, z. B. Microsoft Access oder die Open-Source-
Datenbank MySQL.
Benutzer Wenn Sie davon ausgehen, dass sehr viele Benutzer auf die Site zugreifen, sollten Sie eine Datenbank
verwenden, die die geplante Benutzeranzahl der Site unterstützen kann. Bei Websites, die ein höheres Maß an
Flexibilität der Datenmodelle sowie die Unterstützung einer großen Anzahl gleichzeitiger Benutzer erfordern, sollten
Servertechnologie Anwendungsserver
ColdFusion Adobe ColdFusion 8
ASP Microsoft IIS
PHP PHP Server
578
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Sie serverbasierte relationale Datenbanken (meist als RDBMS bezeichnet) wie Microsoft SQL Server und Oracle
verwenden.
Einrichten einer ColdFusion-Entwicklungsumgebung
Ausführliche Anweisungen zum Einrichten einer ColdFusion-Entwicklungsumgebung für Dreamweaver auf einem
Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter
www.adobe.com/devnet/dreamweaver/articles/setup_cf.html.
Sowohl Windows- als auch Macintosh-Benutzer können eine kostenlose voll funktionsfähige Entwicklerversion des
ColdFusion-Anwendungsservers von der Adobe-Website unter www.adobe.com/go/coldfusion_de/ herunterladen
und installieren.
Note: Die Entwicklerversion ist zum nicht kommerziellen Gebrauch gedacht und dient zum Entwickeln und Testen von
Webanwendungen. Sie ist nicht zur geschäftlichen Nutzung lizenziert und unterstützt Anfragen vom lokalen Host sowie
zwei Remote-IP-Adressen. Sie können Ihre Webanwendungen mit dieser Software auf unbegrenzte Zeit entwickeln und
testen. Die Nutzungsdauer der Software ist nicht eingeschränkt. Weitere Informationen finden Sie in der ColdFusion-
Hilfe („Hilfe“ > „ColdFusion-Hilfe“).
Bei der Installation können Sie ColdFusion so konfigurieren, dass der in ColdFusion integrierte Webserver oder ein
anderer im System installierter Webserver verwendet wird. Im Allgemeinen empfiehlt es sich, die
Entwicklungsumgebung auf die Produktionsumgebung abzustimmen. Wenn auf Ihrem Entwicklungscomputer
bereits ein Webserver wie Microsoft IIS vorhanden ist, sollten Sie diesen anstelle des integrierten ColdFusion-
Webservers verwenden.
Einrichten einer PHP-Entwicklungsumgebung
Ausführliche Anweisungen zum Einrichten einer PHP-Entwicklungsumgebung für Dreamweaver auf einem
Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter
www.adobe.com/devnet/dreamweaver/articles/setup_php.html.
Der PHP-Anwendungsserver ist für Windows-, Linux-, UNIX-, HP-UX-, Solaris- und Mac OS X-Systeme erhältlich.
Weitere Informationen zum Anwendungsserver finden Sie in der PHP-Dokumentation, die Sie ebenfalls von der
PHP-Website unter www.php.net/download-docs.php herunterladen können.
Einrichten einer ASP-Entwicklungsumgebung
Ausführliche Anweisungen zum Einrichten einer ASP-Entwicklungsumgebung für Dreamweaver auf einem
Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter
www.adobe.com/devnet/dreamweaver/articles/setup_asp.html.
Zum Ausführen von ASP-Seiten ist ein Anwendungsserver erforderlich, der Microsoft Active Server Pages 2.0
unterstützt. Dazu gehört beispielsweise Microsoft IIS (Internet Information Services), das mit Windows 2000 und
Windows XP Professional bereitgestellt wird. Windows XP Professional-Benutzer können IIS auf ihrem lokalen
Computer installieren und ausführen. Macintosh-Benutzer können einen Web-Hosting-Dienst mit ASP-Angebot
verwenden oder IIS auf einem Remote-Computer installieren.
Stammordner für die Anwendung erstellen
Nachdem Sie sich bei einem Web-Host-Dienstanbieter angemeldet bzw. die Serversoftware selbst eingerichtet haben,
erstellen Sie einen Stammordner für Ihre Webanwendung auf dem Computer, auf dem der Webserver ausgeführt
wird. Abhängig von dem Computer, auf dem der Webserver ausgeführt wird, kann es sich bei dem Stammordner um
einen lokalen oder einen Remote-Ordner handeln.
579
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Der Webserver kann in diesem Ordner bzw. in dessen Unterordnern beliebige Dateien bereitstellen, die über eine
HTTP-Anforderung von einem Webbrowser abgerufen werden. Beispielsweise können auf einem Computer, auf dem
ColdFusion 8 ausgeführt wird, alle Dateien, die sich im Ordner „\ColdFusion8\wwwroot“ oder in einem seiner
Unterordner befinden, für andere Webbrowser bereitgestellt werden.
Hier eine Liste der Standardpfade für Stammordner bei ausgewählten Webservern:
Legen Sie zum Testen des Webservers eine HTML-Testseite im standardmäßigen Stammordner ab und versuchen Sie,
diese Seite zu öffnen, indem Sie die URL der Seite in einem Browser eingeben. Die URL setzt sich aus dem
Domänennamen und dem Dateinamen der HTML-Seite zusammen, wie im folgenden Beispiel gezeigt:
www.beispiel.com/testseite.htm.
Wenn der Webserver auf dem lokalen Computer ausgeführt wird, können Sie anstelle eines Domänennamens
localhost verwenden. Geben Sie eine der folgenden localhost-URLs für Ihren Webserver ein:
Note: Der ColdFusion-Webserver wird standardmäßig über Port 8500 ausgeführt und der Apache-Webserver für
Windows über Port 80.
Wenn die Seite nicht wie erwartet geöffnet wird, prüfen Sie, ob einer der folgenden Fehler vorliegt:
• Der Webserver wurde nicht gestartet. Lesen Sie die Anweisungen zum Starten in der Dokumentation des
Webservers.
• Die Datei hat nicht die Erweiterung .htm oder .html.
• Sie haben im Adressfeld des Browsers den Dateipfad der Seite eingegeben (z. B.
„C:\ColdFusion8\wwwroot\testseite.htm“) und nicht ihre URL (z. B. „http://localhost:8500/testseite.htm“).
• Die URL enthält einen Schreibfehler. Prüfen Sie, ob Ihnen ein Schreibfehler unterlaufen ist, und achten Sie darauf,
dass Sie hinter dem Dateinamen keinen Schrägstrich eingeben (wie bei „http://localhost:8080/testseite.htm/“).
Definieren Sie, nachdem Sie einen Stammordner für Ihre Anwendung erstellt haben, eine Dreamweaver-Site zur
Verwaltung der Dateien.
More Help topics
“Grundlagen zum Webserver” on page 575
“Arbeiten mit Dreamweaver-Sites” on page 40
Webserver Standardmäßiger Stammordner
ColdFusion 8 \ColdFusion8\wwwroot
IIS \Inetpub\wwwroot
Apache (Windows) \apache\htdocs
Apache (Macintosh) Benutzer:[Benutzername]:Sites
Webserver localhost-URL
ColdFusion 8 http://localhost:8500/testseite.htm
IIS http://localhost/testseite.htm
Apache (Windows) http://localhost:80/testseite.htm
Apache (Macintosh) http://localhost/~Benutzername/testseite.htm (wobei „Benutzername“ Ihrem Macintosh-
Benutzernamen entspricht)
580
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Dreamweaver-Site definieren
Nachdem Sie Ihr System für die Entwicklung von Webanwendungen konfiguriert haben, müssen Sie eine
Dreamweaver-Site zur Verwaltung der Dateien definieren.
Vergewissern Sie sich zunächst, dass die folgenden Voraussetzungen erfüllt sind:
• Sie haben Zugriff auf einen Webserver. Der Webserver kann auf einem lokalen Computer, einem Remote-
Computer (z. B. Entwicklungsserver) oder einem von einem Web-Host-Dienstanbieter verwalteten Server
ausgeführt werden.
• In dem System, auf dem der Webserver ausgeführt wird, wurde ein Anwendungsserver installiert und dieser Server
wird ausgeführt.
• Sie haben in dem System, auf dem der Webserver ausgeführt wird, einen Stammordner für die Webanwendung
angelegt.
Das Definieren einer Dreamweaver-Site für eine Webanwendung umfasst drei Einzelschritte:
1. Lokalen Ordner definieren
Der lokale Ordner ist der Ordner, in dem Sie Arbeitskopien der Site-Dateien auf Ihrer Festplatte ablegen. Sie können
für jede von Ihnen neu erstellte Webanwendung einen eigenen lokalen Ordner definieren. Lokale Ordner erleichtern
nicht nur die Dateiverwaltung, sondern auch die Übertragung der Dateien von und zum Webserver.
2. Remote-Ordner definieren
Definieren Sie einen Ordner auf dem Computer, auf dem der Webserver ausgeführt wird, als Remote-Ordner für
Dreamweaver. Bei dem Remote-Ordner handelt es sich um den Ordner, den Sie für Ihre Webanwendung auf dem
Webserver erstellt haben.
3. Testordner definieren
Dreamweaver verwendet diesen Ordner, um während der Bearbeitung dynamische Inhalte zu erstellen und
anzuzeigen sowie Verbindungen zu Datenbanken herzustellen. Als Testserver kann der lokale Computer, ein
Entwicklungsserver, ein Staging-Server oder ein Produktionsserver verwendet werden. Sofern der Server die Art der
von Ihnen entwickelten dynamischen Seiten verarbeiten kann, spielt die Wahl keine Rolle.
Nachdem die Dreamweaver-Site definiert wurde, können Sie mit dem Erstellen der Webanwendung beginnen.
More Help topics
“Arbeiten mit Dreamweaver-Sites” on page 40
Datenbankverbindungen für ColdFusion-Entwickler
Verbindungen mit ColdFusion-Datenbanken herstellen
Beim Entwickeln einer ColdFusion-Webanwendung in Dreamweaver stellen Sie eine Datenbankverbindung her,
indem Sie eine ColdFusion-Datenquelle auswählen, die in Dreamweaver oder in der Verwaltungskonsole des Servers,
dem ColdFusion-Administrator, definiert ist.
Die Herstellung einer Datenbankverbindung setzt voraus, dass Sie eine ColdFusion-Webanwendung eingerichtet
haben. Außerdem müssen Sie auf dem lokalen Computer oder in einem System, auf das Sie Netzwerk- oder FTP-
Zugriff haben, eine Datenbank einrichten.
581
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Achten Sie darauf, dass Dreamweaver den Speicherort der ColdFusion-Datenquellen kennt. Um ColdFusion-
Datenquellen in der Entwurfsphase abrufen zu können, speichert Dreamweaver Skripts in einem Ordner auf dem
Computer, auf dem ColdFusion ausgeführt wird. Diesen Ordner müssen Sie in der Kategorie „Testserver“ des
Dialogfelds „Site-Definition“ angeben.
Als Nächstes müssen Sie in Dreamweaver oder im ColdFusion-Administrator eine ColdFusion-Datenquelle erstellen
(falls noch nicht vorhanden). Mithilfe der eben erstellten ColdFusion-Datenquelle können Sie nun in Dreamweaver
eine Verbindung zur Datenbank herstellen.
ColdFusion-Datenquelle erstellen oder ändern
Die Nutzung von Datenbankinformationen in einer Seite setzt voraus, dass Sie eine ColdFusion-Datenquelle erstellt
haben. Wenn Sie ColdFusion MX 7 oder eine spätere Version ausführen, können Sie die Datenquelle direkt in
Dreamweaver erstellen oder ändern. Wenn Sie ColdFusion MX ausführen, müssen Sie die Datenquelle mit der
Verwaltungskonsole des Servers (ColdFusion MX Administrator) erstellen oder ändern. Sie können ColdFusion MX
Administrator aber weiterhin mit Dreamweaver öffnen.
More Help topics
“Testserver einrichten” on page 50
“ColdFusion-Erweiterungen aktivieren” on page 729
ColdFusion-Datenquelle erstellen oder ändern, wenn ColdFusion MX 7 oder eine spätere
Version ausgeführt wird
1 Stellen Sie sicher, dass für Ihre Site ein Computer als Testserver definiert ist, auf dem ColdFusion MX 7 oder eine
spätere Version ausgeführt wird.
2 Öffnen Sie eine ColdFusion-Seite in Dreamweaver.
3
Klicken Sie zum Erstellen einer neuer Datenquelle im Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“) auf
die Schaltfläche mit dem Pluszeichen (+) und geben Sie die für den Datenbanktreiber relevanten Parameterwerte ein.
Note: Die Schaltfläche mit dem Pluszeichen (+) wird in Dreamweaver nur angezeigt, wenn Sie ColdFusion MX 7 oder
eine spätere Version ausführen.
4 Doppelklicken Sie zum Ändern einer Datenquelle im Bedienfeld „Datenbanken“ auf die Datenbankverbindung
und nehmen Sie die gewünschten Änderungen vor.
Sie können jeden Parameter außer dem Namen der Datenquelle bearbeiten. Weitere Informationen finden Sie in der
Treiberdokumentation des Herstellers oder fragen Sie Ihren Systemadministrator.
ColdFusion-Datenquelle erstellen oder ändern, wenn ColdFusion MX 6.1 oder 6.0
ausgeführt wird
1 Öffnen Sie eine ColdFusion-Seite in Dreamweaver.
2 Klicken Sie im Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“) von Dreamweaver in der Symbolleiste des
Bedienfelds auf das Symbol „Datenquellen ändern“.
3 Melden Sie sich bei ColdFusion MX Administrator an und erstellen oder ändern Sie die Datenquelle.
Die Anleitung dazu finden Sie in der ColdFusion-Hilfe („Hilfe“ > „ColdFusion-Hilfe“).
Zum Erstellen der ColdFusion-Datenquelle müssen Sie bestimmte Parameterwerte angeben. Die Parameterwerte für
Ihren speziellen Datenbanktreiber können Sie der Dokumentation des Treiberherstellers entnehmen oder bei Ihrem
Systemadministrator erfragen.
582
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Nachdem Sie eine ColdFusion-Datenquelle erstellt haben, können Sie sie in Dreamweaver einsetzen.
Datenbankverbindungen in Dreamweaver herstellen
Nachdem Sie eine ColdFusion-Datenquelle erstellt haben, können Sie in Dreamweaver eine Verbindung mit der
Datenbank herstellen.
Öffnen Sie in Dreamweaver eine beliebige ColdFusion-Seite und rufen Sie dann das Bedienfeld „Datenbanken“
(„Fenster“ > „Datenbanken“) auf. Ihre ColdFusion-Datenquellen sollten nun im Bedienfeld angezeigt werden.
Sollte dies nicht der Fall sein, gehen Sie die Checkliste im Bedienfeld durch. Achten Sie darauf, dass Dreamweaver den
Speicherort der ColdFusion-Datenquellen kennt. Geben Sie in der Kategorie „Testserver“ des Dialogfelds „Site-
Definition“ den Stammordner der Site auf dem Computer an, auf dem ColdFusion ausgeführt wird.
More Help topics
“Fehlerbehebung bei Datenbankverbindungen” on page 592
Datenbankverbindungen für ASP-Entwickler
ASP-Datenbankverbindungen
Eine ASP-Anwendung muss über einen ODBC-Treiber (ODBC = Open DataBase Connectivity) oder über einen
OLE DB-Anbieter (OLE DB = Object Linking and Embedding DataBase) mit einer Datenbank verbunden werden.
Der Treiber oder Anbieter dient dabei als „Dolmetscher“, der die Kommunikation zwischen der Webanwendung und
der Datenbank ermöglicht. In der folgenden Tabelle sind einige Treiber aufgeführt, die für Datenbanken von
Microsoft Access, Microsoft SQL Server und Oracle verwendet werden können:
Eine Datenbankverbindung kann über einen DSN (Data Source Name = Datenquellenname) oder über eine
Verbindungszeichenfolge hergestellt werden. Sie müssen eine Verbindungszeichenfolge verwenden, wenn Sie die
Verbindung über einen OLE DB-Anbieter oder einen ODBC-Treiber herstellen, der nicht in einem Windows-System
installiert ist.
Ein DSN ist eine aus einem Wort (z. B. „myConnection“) bestehende Kennung, die auf die Datenbank verweist und
alle Informationen enthält, die für die Verbindung nötig sind. Der DSN wird in Windows definiert. Die Verwendung
eines DSN kommt in Frage, wenn Sie die Verbindung über einen ODBC-Treiber herstellen, der in einem Windows-
System installiert ist.
Eine Verbindungszeichenfolge ist ein manuell kodierter Ausdruck, der als Kennung der Datenbank dient und alle
Informationen enthält, die zum Herstellen der Verbindung nötig sind. Dazu ein Beispiel:
Datenbank Datenbanktreiber
Microsoft Access Microsoft Access-Treiber (ODBC)
Microsoft Jet-Anbieter für Access (OLE DB)
Microsoft SQL Server Microsoft SQL Server-Treiber (ODBC)
Microsoft SQL Server-Anbieter (OLE DB)
Oracle Microsoft Oracle-Treiber (ODBC)
Oracle-Anbieter für OLE DB
583
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Note: Sie können eine Verbindungszeichenfolge auch verwenden, wenn Sie die Verbindung über einen ODBC-Treiber
herstellen, der in einem Windows-System installiert ist. Die Verwendung eines DSN ist hierfür jedoch einfacher.
More Help topics
“Zugriff auf Datenbanken” on page 570
OLE DB-Verbindungen
Die Kommunikation mit Ihrer Datenbank kann über einen OLE >DB-Anbieter erfolgen (OLE DB ist nur unter
Windows NT, Windows 2000 und Windows XP verfügbar). Das Erstellen einer direkten datenbankspezifischen
OLE DB-Verbindung kann die Geschwindigkeit der Verbindung optimieren, da die ODBC-Ebene zwischen der
Webanwendung und der Datenbank wegfällt.
Wenn Sie keinen OLE DB-Anbieter für Ihre Datenbank angeben, verwendet ASP den standardmäßigen OLE DB-
Anbieter für ODBC-Treiber für die Kommunikation mit einem ODBC-Treiber, der seinerseits mit der Datenbank
kommuniziert.
Für verschiedene Datenbanken sind verschiedene OLE DB-Anbieter vorhanden. OLE DB-Anbieter für Microsoft
Access und SQL Server können Sie einrichten, indem Sie die MDAC-Pakete 2.5 und 2.7 (MDAC = Microsoft Data
Access Components) herunterladen und auf dem Windows-Computer installieren, auf dem IIS ausgeführt wird. Sie
können die MDAC-Pakete kostenlos von der Microsoft-Website unter
http://msdn.microsoft.com/data/mdac/downloads/ herunterladen.
Note: Beachten Sie, dass zuerst MDAC 2.5 und dann MDAC 2.7 installiert werden muss.
OLE DB-Anbieter für Oracle-Datenbanken können Sie von der Oracle-Website unter
www.oracle.com/technology/software/tech/windows/ole_db/index.html herunterladen (Registrierung erforderlich).
Eine OLE DB-Verbindung wird in Dreamweaver durch Aufnahme eines
Provider-Parameters in eine
Verbindungszeichenfolge erstellt. Hier sind die Parameter für gängige OLE DB-Anbieter für Access-, SQL Server- und
Oracle-Datenbanken:
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Den Parameterwert Ihres OLE DB-Anbieters können Sie der Dokumentation des entsprechenden Anbieters
entnehmen oder von Ihrem Systemadministrator erfragen.
Verbindungszeichenfolgen
Eine Verbindungszeichenfolge enthält alle Informationen, die die Webanwendung benötigt, um eine Verbindung mit
der Datenbank herzustellen. Dreamweaver fügt diese Zeichenfolge zur späteren Verarbeitung durch den
Anwendungsserver in die serverseitigen Skripts Ihrer Seite ein.
Verbindungszeichenfolgen für Microsoft Access- und SQL Server-Datenbanken bestehen aus einer Kombination der
folgenden Parameter, die jeweils durch Semikola voneinander getrennt werden:
Provider gibt den OLE DB-Anbieter für die Datenbank an. Hier sind die Parameter für gängige OLE DB-Anbieter für
Access-, SQL Server- und Oracle-Datenbanken:
584
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Provider=Microsoft.Jet.OLEDB.4.0;...
Provider=SQLOLEDB;...
Provider=OraOLEDB;...
Den Parameterwert Ihres OLE DB-Anbieters können Sie der Dokumentation des entsprechenden Anbieters
entnehmen oder von Ihrem Systemadministrator erfragen.
Wenn Sie keinen Anbieter-Parameter angeben, wird der standardmäßige OLE DB-Anbieter für ODBC verwendet und
Sie müssen einen geeigneten ODBC-Treiber für Ihre Datenbank angeben.
Treiber legt fest, welcher ODBC-Treiber verwendet werden soll, wenn Sie keinen OLE DB-Anbieter für Ihre
Datenbank angeben.
Server gibt den Server an, auf dem sich die SQL Server-Datenbank befindet, falls Ihre Webanwendung auf einem
anderen Server ausgeführt wird.
Datenbank ist der Name einer SQL Server-Datenbank.
DBQ gibt den Pfad zu einer dateibasierten Datenbank an, z. B. eine Microsoft Access-Datenbank. Hierbei handelt es
sich um den Pfad auf dem Server, der als Host für die Datenbankdatei fungiert.
UID gibt den Benutzernamen an.
PWD gibt das Benutzerkennwort an.
DSN ist der Datenquellenname (falls einer verwendet wird). Je nach der Definition des DSN auf dem Server können
Sie die anderen Parameter der Verbindungszeichenfolge weglassen. So kann zum Beispiel
DSN=Results eine gültige
Verbindungszeichenfolge sein, wenn Sie die anderen Parameter beim Erstellen des DSN definieren.
Verbindungszeichenfolgen für andere Datenbanken dürfen die oben aufgeführten Parameter nicht verwenden bzw.
haben andere Namen oder Verwendungszwecke für die Parameter. Weitere Informationen finden Sie in der
Dokumentation des Datenbankherstellers oder fragen Sie Ihren Systemadministrator.
Hier ist ein Beispiel für eine Verbindungszeichenfolge, mit der eine ODBC-Verbindung mit der Access-Datenbank
„trees.mdb“ hergestellt wird:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Hier ist ein Beispiel für eine Verbindungszeichenfolge, die eine OLE DB-Verbindung mit einer SQL Server-Datenbank
namens „Mothra“ auf dem Server „Gojira“ herstellt:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith;
PWD=orlando8
Verbindungen mit lokalem DSN erstellen
Note: In diesem Abschnitt wird davon ausgegangen, dass Sie eine ASP-Anwendung eingerichtet haben. Außerdem wird
vorausgesetzt, dass auf Ihrem lokalen Computer oder einem System, auf das Sie Netzwerk- oder FTP-Zugriff haben, eine
Datenbank eingerichtet ist.
Sie können eine ODBC-Verbindung zwischen Ihrer Webanwendung und der Datenbank über einen DSN (Data
Source Name = Datenquellenname) herstellen. Der DSN ist ein Name, der sämtliche Parameter speichert, die zur
Herstellung einer Verbindung mit einer spezifischen Datenbank unter Verwendung eines ODBC-Treibers
erforderlich sind.
Da Sie in einem DSN nur einen ODBC-Treiber angeben können, müssen Sie eine Verbindungszeichenfolge
verwenden, wenn Sie einen OLE DB-Anbieter einsetzen möchten.
585
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
In Dreamweaver können Datenbankverbindungen über einen lokal definierten DSN erstellt werden.
1 Definieren Sie einen DSN auf dem Windows-Computer, auf dem Dreamweaver ausgeführt wird.
Anweisungen hierzu finden Sie in den folgenden Artikeln auf der Microsoft-Website:
• Wenn auf dem Computer Windows 2000 ausgeführt wird, lesen Sie Microsoft Knowledge Base-Artikel 300596
unter http://support.microsoft.com/default.aspx?scid=kb;de-de;300596.
• Wenn auf dem Computer Windows XP ausgeführt wird, lesen Sie Microsoft Knowledge Base-Artikel 305599 unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;305599.
2 Öffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“).
3 Klicken Sie im Bedienfeld auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Menü die Option „Data
Source Name (DSN)“.
4 Geben Sie für die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein.
5 Aktivieren Sie „Mithilfe des lokalen DSN“ und wählen Sie dann im Menü „Data Source Name (DSN)“ den
gewünschten DSN aus.
Wenn Sie einen lokalen DSN verwenden möchten, aber noch keinen definiert haben, klicken Sie auf „Definieren“, um
den ODBC-Datenquellen-Administrator von Windows zu öffnen.
6 Füllen Sie die Felder „Benutzername“ und „Kennwort“ aus.
7 Sie können die von Dreamweaver während der Entwurfsphase abgerufenen Datenbankelemente einschränken,
indem Sie auf „Erweitert“ klicken und den Namen eines Schemas oder Katalogs angeben.
Note: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht möglich.
8 Klicken Sie auf „Testen“, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf „OK“. Kommt
keine Verbindung zustande, überprüfen Sie die Verbindungszeichenfolge oder die Einstellungen für den
Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
More Help topics
“Anzeige der Datenbankinformationen in Dreamweaver eingrenzen” on page 601
“Computer für die Entwicklung von Anwendungen einrichten” on page 575
“Fehlerbehebung bei Datenbankverbindungen” on page 592
Verbindungen mit Remote-DSN erstellen
Note: In diesem Abschnitt wird davon ausgegangen, dass Sie eine ASP-Anwendung eingerichtet haben. Außerdem wird
vorausgesetzt, dass auf Ihrem lokalen Computer oder einem System, auf das Sie Netzwerk- oder FTP-Zugriff haben, eine
Datenbank eingerichtet ist.
Note: Dreamweaver kann nur Server-DSNs abrufen, die mit dem Windows ODBC-Datenquellenadministrator erstellt
wurden.
In Dreamweaver können Datenbankverbindung über einen DSN erstellt werden, der auf einem entfernten Computer
definiert ist. Wenn Sie diese Methode wählen, muss der DSN auf dem Windows-Computer definiert werden, auf dem
Ihr Anwendungsserver (in der Regel IIS) ausgeführt wird.
Note: Da Sie in einem DSN nur einen ODBC-Treiber angeben können, müssen Sie eine Verbindungszeichenfolge
verwenden, wenn Sie einen OLE DB-Anbieter einsetzen möchten.
1 Definieren Sie einen DSN auf dem Remote-System, das als Host des Anwendungsservers fungiert.
586
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Anweisungen hierzu finden Sie in den folgenden Artikeln auf der Microsoft-Website:
• Wenn auf dem Remote-Computer Windows 2000 ausgeführt wird, lesen Sie Microsoft Knowledge Base-Artikel
300596 unter http://support.microsoft.com/default.aspx?scid=kb;de-de;300596.
• Wenn auf dem Remote-Computer Windows XP ausgeführt wird, lesen Sie Microsoft Knowledge Base-Artikel
305599 unter http://support.microsoft.com/default.aspx?scid=kb;de-de;305599.
2 Öffnen Sie in Dreamweaver eine ASP-Seite und anschließend das Bedienfeld „Datenbanken“ („Fenster“ >
„Datenbanken“).
3 Klicken Sie im Bedienfeld auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Menü die Option „Data
Source Name (DSN)“.
4 Geben Sie für die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein.
5 Aktivieren Sie „Mithilfe des DSN auf dem Testserver“.
Note: Macintosh-Benutzer können diesen Schritt ignorieren, da alle Datenbankverbindungen über DSNs auf dem
Anwendungsserver erfolgen.
6 Geben Sie den DSN ein oder klicken Sie auf die Schaltfläche „DSN“, um eine Verbindung zum Server herzustellen.
Wählen Sie dann den DSN für die gewünschte Datenbank aus und stellen Sie die übrigen Optionen ein.
7 Füllen Sie die Felder „Benutzername“ und „Kennwort“ aus.
8 Sie können die von Dreamweaver während der Entwurfsphase abgerufenen Datenbankelemente einschränken,
indem Sie auf „Erweitert“ klicken und den Namen eines Schemas oder Katalogs angeben.
Note: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht möglich.
9 Klicken Sie auf „Testen“, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf „OK“. Kommt
keine Verbindung zustande, überprüfen Sie die Verbindungszeichenfolge oder die Einstellungen für den
Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
More Help topics
“Computer für die Entwicklung von Anwendungen einrichten” on page 575
“Anzeige der Datenbankinformationen in Dreamweaver eingrenzen” on page 601
“Fehlerbehebung bei Datenbankverbindungen” on page 592
Verbindungen mit einer Verbindungszeichenfolge erstellen
Sie können die ODBC- oder OLE DB-Verbindung zwischen Ihrer Webanwendung und der Datenbank auch ohne
DSN erstellen. In diesem Fall dient eine Verbindungszeichenfolge zur Herstellung dieser Verbindung.
1 Öffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“).
2 Klicken Sie im Bedienfeld auf die Schaltfläche mit dem Pluszeichen (+), wählen Sie im Menü die Option
„Benutzerdefinierter Verbindungsstring“ aus und klicken Sie auf „OK“.
3 Geben Sie für die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein.
4 Geben Sie eine Verbindungszeichenfolge für die Datenbank ein. Wenn Sie in der Verbindungszeichenfolge keinen
OLE DB-Anbieter angeben (wenn Sie den Parameter
Provider nicht verwenden), verwendet ASP automatisch
den OLE DB-Anbieter für ODBC-Treiber. In diesem Fall müssen Sie einen geeigneten ODBC-Treiber für die
Datenbank angeben.
Wenn Ihre Site von einem ISP gehostet wird und Sie den vollständigen Pfad zur Datenbank nicht kennen, bauen Sie
die Methode
MapPath des ASP-Serverobjekts in Ihre Verbindungszeichenfolge ein.
587
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
5 Falls der in der Verbindungszeichenfolge angegebene Datenbanktreiber nicht auf demselben Computer wie
Dreamweaver installiert ist, aktivieren Sie die Option „Mithilfe des Treibers auf dem Testserver“.
Note: Macintosh-Benutzer können diesen Schritt ignorieren, da alle Datenbankverbindungen den Anwendungsserver
verwenden.
6 Sie können die von Dreamweaver während der Entwurfsphase abgerufenen Datenbankelemente einschränken,
indem Sie auf „Erweitert“ klicken und den Namen eines Schemas oder Katalogs angeben.
Note: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht möglich.
7 Klicken Sie auf „Testen“, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf „OK“. Kommt
keine Verbindung zustande, überprüfen Sie die Verbindungszeichenfolge oder die Einstellungen für den
Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
More Help topics
“Verbindungen mit ColdFusion-Datenbanken herstellen” on page 580
“Anzeige der Datenbankinformationen in Dreamweaver eingrenzen” on page 601
“Fehlerbehebung bei Datenbankverbindungen” on page 592
Verbindungen zu Datenbanken bei einem ISP herstellen
Wenn Sie als ASP-Entwickler mit einem kommerziellen Internetdienstanbieter (ISP) arbeiten, kennen Sie oft nicht
den physischen Pfad der hochzuladenden Dateien. Dies gilt auch für die Datenbankdatei(en).
Sofern der ISP keinen DSN für Sie definiert oder dies nicht rechtzeitig tut, müssen Sie eine andere Möglichkeit finden,
Verbindungen zu Ihren Datenbankdateien herzustellen. Eine Möglichkeit besteht darin, eine DSN-lose Verbindung
zu einer Datenbankdatei zu erstellen. Eine solche Verbindung können Sie jedoch nur definieren, wenn Sie den
physischen Pfad der Datenbankdatei auf dem ISP-Server kennen.
Der physische Pfad einer Datenbankdatei auf einem Server lässt sich mit der Methode
MapPath des ASP-Serverobjekts
ermitteln.
Note: Die in diesem Abschnitt behandelten Techniken gelten nur für dateibasierte Datenbanken, wie etwa für Microsoft
Access-Datenbanken, bei denen die Daten in einer .mdb-Datei gespeichert sind.
Physische und virtuelle Pfade
Nachdem Sie Ihre Dateien mit Dreamweaver auf einen Remote-Server hochgeladen haben, befinden sich die Dateien
in einem Ordner in der lokalen Verzeichnisstruktur des Servers. So könnte etwa auf einem Server mit Microsoft IIS
der Pfad zu Ihrer Homepage folgendermaßen lauten:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Dieser Pfad wird als physischer Pfad zu Ihrer Datei bezeichnet.
Die URL zum Öffnen der Datei hat jedoch nichts mit diesem physischen Pfad zu tun. Sie setzt sich vielmehr aus dem
Namen des Servers bzw. der Domäne sowie einem virtuellen Pfad zusammen, wie in folgendem Beispiel:
www.plutoserve.com/jsmith/index.htm
Der virtuelle Pfad „/jsmith/index.htm“ ersetzt also den physischen Pfad
„c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm“.
588
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Physischen Pfad von Dateien mithilfe des virtuellen Pfads ermitteln
Wenn Sie mit einem ISP arbeiten, kennen Sie nicht immer den physischen Pfad der Dateien, die Sie hochgeladen
haben. ISPs nennen Ihnen normalerweise nur einen FTP-Host, eventuell ein Host-Verzeichnis sowie einen
Anmeldenamen und ein Kennwort. Darüber hinaus legt der ISP eine URL fest, unter der Sie Ihre Seiten im Internet
aufrufen können, z. B. „www.plutoserve.com/jsmith/“.
Aus dieser URL geht der virtuelle Pfad der Datei hervor. Dies ist der Pfad, der in einer URL auf den Server- bzw.
Domänennamen folgt. Wenn Sie den virtuellen Pfad kennen, können Sie anhand der Methode
MapPath den
physischen Pfad der Datei auf dem Server ermitteln.
Die Methode
MapPath verwendet den virtuellen Pfad als Argument und gibt den physischen Pfad und den Namen der
Datei zurück. Die Syntax der Methode lautet folgendermaßen:
Server.MapPath("/virtualpath")
Angenommen, der virtuelle Pfad einer Datei lautet „/jsmith/index.htm“. Der folgende Ausdruck gibt dann den
zugehörigen physischen Pfad zurück:
Server.MapPath("/jsmith/index.htm")
Sie können wie folgt mit der MapPath-Methode experimentieren.
1 Öffnen Sie in Dreamweaver eine ASP-Seite und wechseln Sie zur Codeansicht („Ansicht“ > „Code“).
2 Geben Sie den folgenden Ausdruck in den HTML-Code der Seite ein:
<%Response.Write(stringvariable)%>
3 Bestimmen Sie mit der Methode MapPath einen Wert für das Argument stringvariable.
Beispiel:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Wechseln Sie zur Live-Ansicht („Ansicht“ > „Live-Ansicht“), um die Seite anzuzeigen.
Der physische Pfad der Datei auf dem Anwendungsserver wird auf der Seite angezeigt. Beispiel:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Weitere Informationen zur MapPath-Methode finden Sie in der Online-Dokumentation von Microsoft IIS.
Datenbankverbindungen mit einem virtuellen Pfad herstellen
Um eine DSN-lose Verbindungszeichenfolge zu einer Datenbankdatei einzugeben, die sich auf einem Remote-Server
befindet, müssen Sie den physischen Pfad zu dieser Datei kennen. Eine typische DSN-lose Verbindungszeichenfolge
für eine Microsoft Access-Datenbank lautet beispielsweise folgendermaßen:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Wenn Ihnen der physische Speicherort Ihrer Dateien auf dem Remote-Server nicht bekannt ist, können Sie den
entsprechenden Pfad mithilfe der
MapPath-Methode im Verbindungsstring abrufen.
1 Laden Sie die Datenbankdatei auf den Remote-Server hoch und notieren Sie sich ihren virtuellen Pfad, z. B.
„/jsmith/data/statistics.mdb“.
2 Öffnen Sie in Dreamweaver eine ASP-Seite und anschließend das Bedienfeld „Datenbanken“ („Fenster“ >
„Datenbanken“).
3 Klicken Sie im Bedienfeld auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Menü die Option
„Benutzerdefinierter Verbindungsstring“ aus.
589
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
4 Geben Sie für die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein.
5 Geben Sie die Verbindungszeichenfolge ein und verwenden Sie die Methode MapPath zur Ermittlung des DBQ-
Parameters.
Angenommen, der virtuelle Pfad zu Ihrer Microsoft Access-Datenbank lautet „/jsmith/data/statistics.mdb“. Wenn Sie
VBScript als Skriptsprache verwenden, kann die Verbindungszeichenfolge folgendermaßen aussehen:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath¬
("/jsmith/data/statistics.mdb")
Das Und-Zeichen (&) dient dabei zur Verkettung (Kombination) zweier Zeichenfolgen. Die erste Zeichenfolge steht
in Anführungszeichen, die zweite wird durch den Ausdruck
Server.MapPath zurückgegeben. Durch eine
Kombination der beiden Zeichenfolgen ergibt sich folgende Zeichenfolge:
Driver={Microsoft Access Driver (*.mdb)};
DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
In JavaScript lautet der Ausdruck genauso; allerdings werden die beiden Zeichenfolgen nicht mit einem Und-
Zeichen (&) verkettet, sondern mit einem Pluszeichen (+):
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath¬
("/jsmith/data/statistics.mdb")
6 Aktivieren Sie „Mithilfe des Treibers auf dem Testserver“. Klicken Sie dann auf „Testen“ und anschließend auf
„OK“.
Note: Macintosh-Benutzer können diesen Schritt ignorieren, da alle Datenbankverbindungen den Anwendungsserver
verwenden.
Note: Falls keine Verbindung zustande kommt, überprüfen Sie die Verbindungszeichenfolge oder fragen Sie bei Ihrem
ISP nach, ob der Datenbanktreiber, den Sie in der Verbindungszeichenfolge angegeben haben, tatsächlich auf dem
Remote-Server installiert ist. Vergewissern Sie sich außerdem, dass der ISP über die aktuelle Version des Treibers verfügt.
Eine in Microsoft Access 2000 erstellte Datenbank funktioniert beispielsweise nicht mit dem Microsoft Access-Treiber 3.5.
Sie benötigen mindestens Version 4.0 des Microsoft Access-Treibers.
7 Aktualisieren Sie die Datenbankverbindung der vorhandenen dynamischen Seiten. Öffnen Sie dazu die Seite in
Dreamweaver, doppelklicken Sie im Bedienfeld „Bindungen“ oder „Serververhalten“ auf den Namen der
Datensatzgruppe und wählen Sie im Menü „Verbindung“ die eben erstellte Verbindung aus. Verwenden Sie die
neue Verbindung für jede neue Seite.
Datenbankverbindungen bearbeiten und löschen
Wenn Sie eine Datenbankverbindung erstellen, speichert Dreamweaver die Verbindungsinformationen in einer
Include-Datei im Unterordner „Connections“ des lokalen Stammordners der Site. Sie können die
Verbindungsinformationen in der Datei manuell oder mit den im Folgenden beschriebenen Verfahren bearbeiten und
löschen.
Verbindungen bearbeiten
1 Öffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Verbindung
und wählen Sie im Menü die Option „Verbindung bearbeiten“.
3 Bearbeiten Sie die Verbindungsinformationen und klicken Sie dann auf „OK“.
Dreamweaver aktualisiert die Include-Datei, die ihrerseits alle Seiten der Website aktualisiert, die diese Verbindung
nutzen.
590
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Verbindungen löschen
1 Öffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Verbindung
und wählen Sie im Menü die Option „Verbindung löschen“.
3 Bestätigen Sie im daraufhin eingeblendeten Dialogfeld, dass die Verbindung gelöscht werden soll.
Note: Wenn Sie eine Verbindung gelöscht haben, müssen Sie jede Datensatzgruppe aktualisieren, die noch die alte
Verbindung verwendet. Doppelklicken Sie dazu im Bedienfeld „Bindungen“ auf den Namen der entsprechenden
Datensatzgruppe und wählen Sie eine neue Verbindung aus.
Datenbankverbindungen für PHP-Entwickler
PHP-Datenbankverbindungen
Für die PHP-Entwicklung unterstützt Dreamweaver nur das Datenbanksystem MySQL. Andere Datenbanksysteme,
z. B. Microsoft Access oder Oracle, werden nicht unterstützt. MySQL ist eine Open-Source-Software, die Sie für nicht
kommerzielle Zwecke kostenfrei aus dem Internet herunterladen können. Weitere Informationen finden Sie auf der
MySQL-Website unter http://dev.mysql.com/downloads/.
In diesem Abschnitt wird davon ausgegangen, dass Sie eine PHP-Anwendung eingerichtet haben. Außerdem wird
vorausgesetzt, dass auf Ihrem lokalen Computer oder einem System, auf das Sie Netzwerk- oder FTP-Zugriff haben,
eine MySQL-Datenbank eingerichtet ist.
Sie können die Windows Essentials-Version des MySQL-Datenbankservers zu Entwicklungszwecken herunterladen
und installieren.
More Help topics
“Einrichten einer PHP-Entwicklungsumgebung” on page 578
Datenbankverbindungen herstellen
Wenn Sie im Rahmen der Entwicklung einer PHP-Anwendung in Dreamweaver eine Verbindung zu einer Datenbank
herstellen möchten, müssen Sie über mindestens eine MySQL-Datenbank verfügen und der MySQL-Server muss
ausgeführt werden.
1 Öffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ >
„Datenbanken“).
2 Klicken Sie im Bedienfeld auf die Schaltfläche mit dem Pluszeichen (+), wählen Sie im Menü den Eintrag „MySQL-
Verbindung“ aus und legen Sie die übrigen Optionen des Dialogfelds fest.
• Geben Sie für die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein.
• Geben Sie im Feld „MySQL-Server“ die IP-Adresse oder den Servernamen des Computers an, der als Host für
MySQL fungiert. Wenn MySQL auf demselben Computer wie PHP ausgeführt wird, können Sie
localhost
eingeben.
• Geben Sie Ihren MySQL-Benutzernamen und Ihr Kennwort ein.
• Geben Sie im Feld „Datenbank“ den Namen der Datenbank ein oder klicken Sie auf „Auswählen“ und wählen Sie
die Datenbank aus der Liste der MySQL-Datenbanken. Klicken Sie dann auf „Testen“.
591
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Dreamweaver versucht, eine Verbindung zur Datenbank aufzubauen. Wenn die Verbindung nicht hergestellt werden
kann, überprüfen Sie den Servernamen, Ihr Kennwort und Ihren Benutzernamen. Bleibt auch der nächste Versuch
erfolglos, überprüfen Sie die Einstellungen für den Testordner, den Dreamweaver zur Verarbeitung dynamischer
Seiten verwendet.
In Dreamweaver wird versucht, den Wert für das URL-Präfix in der Kategorie „Testserver“ des Dialogfelds „Site-
Definition“ möglichst genau automatisch einzutragen. In einigen Fällen müssen Sie jedoch das URL-Präfix ändern,
damit die Verbindung hergestellt werden kann. Vergewissern Sie sich, dass das URL-Präfix der um den Dateinamen
(oder die Startseite) verkürzten URL der Anwendung entspricht, die Benutzer zum Öffnen der Webanwendung im
Browser eingeben.
3 Klicken Sie auf „OK“.
Note: Wenn die Fehlermeldung „Client does not support authentication protocol requested. Consider upgrading MySQL
client” beim Testen einer PHP-Datenbankverbindung mit MySQL 4.1 angezeigt wird, lesen Sie “MySQL-Fehler beheben”
on page 597.
Datenbankverbindungen bearbeiten und löschen
Wenn Sie eine Datenbankverbindung erstellen, speichert Dreamweaver die Verbindungsinformationen in einer
Include-Datei im Unterordner „Connections“ des lokalen Stammordners der Site. Sie können die
Verbindungsinformationen in der Datei manuell oder mit den im Folgenden beschriebenen Verfahren bearbeiten und
löschen.
Verbindungen bearbeiten
1 Öffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ >
„Datenbanken“).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Verbindung
und wählen Sie im Menü die Option „Verbindung bearbeiten“.
3 Bearbeiten Sie die Verbindungsinformationen und klicken Sie dann auf „OK“.
Dreamweaver aktualisiert die Include-Datei, die ihrerseits alle Seiten der Website aktualisiert, die diese Verbindung
nutzen.
Verbindungen löschen
1 Öffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld „Datenbanken“ („Fenster“ >
„Datenbanken“).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf die Verbindung
und wählen Sie im Menü die Option „Verbindung löschen“.
3 Bestätigen Sie im daraufhin eingeblendeten Dialogfeld, dass die Verbindung gelöscht werden soll.
Note: Wenn Sie eine Verbindung gelöscht haben, müssen Sie jede Datensatzgruppe aktualisieren, die noch die alte
Verbindung verwendet. Doppelklicken Sie dazu im Bedienfeld „Bindungen“ auf den Namen der entsprechenden
Datensatzgruppe und wählen Sie im Dialogfeld „Datensatzgruppe“ eine neue Verbindung aus.
592
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Fehlerbehebung bei Datenbankverbindungen
Berechtigungsprobleme lösen
Zu den häufigsten Problemen gehören unzureichende Ordner- oder Dateiberechtigungen. Wenn sich Ihre Datenbank
auf einem Computer mit dem Betriebssystem Windows 2000 oder Windows XP befindet und eine Fehlermeldung
angezeigt wird, wenn Sie versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht
anzuzeigen, kann dies auf Berechtigungsprobleme zurückzuführen sein.
Das Windows-Konto, das versucht, auf die Datenbank zuzugreifen, verfügt nicht über die erforderlichen
Berechtigungen. Bei dem Konto kann es sich entweder um das anonyme Windows-Konto handeln (standardmäßig
IUSR_computername) oder um ein spezifisches Benutzerkonto, wenn die Seite für den authentifizierten Zugriff
gesichert wurde.
Sie müssen dem Konto IUSR_computername die korrekten Berechtigungen erteilen, damit der Webserver auf die
Datenbankdatei zugreifen kann. Zudem muss der Ordner, der die Datenbankdatei enthält, bestimmte
Schreibberechtigungen für diese Datenbank haben.
Wenn der Zugriff auf die Seite anonym erfolgen soll, erteilen Sie dem Konto IUSR_computername umfassende
Berechtigungen für den Ordner und die Datenbankdatei. Dies wird weiter unten beschrieben.
Wenn der Pfad der Datenbank ein UNC-Pfad (\\Server\Verzeichnis) ist, müssen Sie zudem sicherstellen, dass die
Freigabeberechtigungen dem Konto IUSR_computername den Vollzugriff gewähren. Dieser Schritt muss auch dann
durchgeführt werden, wenn sich das Verzeichnis auf dem lokalen Webserver befindet.
Wenn Sie die Datenbank von einem anderen Speicherort kopieren, übernimmt sie nicht unbedingt die
Berechtigungen des Zielordners. Gegebenenfalls müssen Sie die Berechtigungen für die Datenbank ändern.
Datenbankdatei-Berechtigungen überprüfen oder ändern (Windows XP)
1 Stellen Sie sicher, dass Sie auf dem Computer über Administratorrechte verfügen.
2 Suchen Sie in Windows Explorer die Datenbankdatei oder den Ordner, der die Datenbank enthält. Klicken Sie mit
der rechten Maustaste auf die Datei oder den Ordner und wählen Sie „Eigenschaften“.
3 Wählen Sie die Registerkarte „Sicherheit“.
Note: Sie brauchen diesen Schritt nur auszuführen, wenn Sie mit einem NTFS-Dateisystem arbeiten. Bei einem FAT-
Dateisystem enthält das Dialogfeld keine Registerkarte namens „Sicherheit“.
4 Wenn das Konto IUSR_computername in der Liste der Gruppen oder Benutzernamen fehlt, klicken Sie auf die
Schaltfläche „Hinzufügen“, um das Konto hinzuzufügen.
5 Klicken Sie im Dialogfeld zum Auswählen von Benutzern oder Gruppen auf die Schaltfläche „Erweitert“.
Das Dialogfeld ändert sich, um weitere Optionen anzuzeigen.
6 Klicken Sie auf „Pfade“ und wählen Sie den Namen des Computers aus.
7 Klicken Sie auf die Suchen-Schaltfläche, um eine Liste der mit dem Computer verbundenen Kontonamen
einzublenden.
8 Wählen Sie das Konto IUSR_computernameund klicken Sie auf „OK“. Klicken Sie dann erneut auf „OK“, um das
Dialogfeld zu schließen.
9 Wählen Sie „Vollzugriff“ aus und klicken Sie auf „OK“, um dem IUSR-Konto volle Berechtigungen zuzuweisen.
593
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Datenbankdatei-Berechtigungen überprüfen oder ändern (Windows 2000)
1 Stellen Sie sicher, dass Sie auf dem Computer über Administratorrechte verfügen.
2 Suchen Sie in Windows Explorer die Datenbankdatei oder den Ordner, der die Datenbank enthält. Klicken Sie mit
der rechten Maustaste auf die Datei oder den Ordner und wählen Sie „Eigenschaften“.
3 Wählen Sie die Registerkarte „Sicherheit“.
Note: Sie brauchen diesen Schritt nur auszuführen, wenn Sie mit einem NTFS-Dateisystem arbeiten. Bei einem FAT-
Dateisystem enthält das Dialogfeld keine Registerkarte namens „Sicherheit“.
4 Wenn das Konto IUSR_computername im Dialogfeld „Dateiberechtigungen“ nicht in der Liste der Windows-
Konten enthalten ist, klicken Sie auf die Schaltfläche „Hinzufügen“, um das Konto hinzuzufügen.
5 Wählen Sie im Dialogfeld zum Auswählen von Benutzern, Computern oder Gruppen unter „Suchen in“ den
Namen des Computers aus, um eine Liste der mit dem Computer verbundenen Kontonamen einzublenden.
6 Wählen Sie das Konto IUSR_computernameund klicken Sie auf „Hinzufügen“.
7 Wählen Sie im Menü „Zugriffsart“ die Option „Vollzugriff“ und klicken Sie auf „OK“, um dem IUSR-Konto volle
Berechtigungen zuzuweisen.
Sie können die Sicherheit erhöhen, indem Sie die Leseberechtigung für den Webordner deaktivieren, der die
Datenbank enthält. Dies bewirkt, dass der Ordner nicht durchsucht werden kann. Die Webseiten können jedoch nach
wie vor auf die Datenbank zugreifen.
Weitere Informationen über das IUSR-Konto und Webserver-Berechtigungen finden Sie in den folgenden TechNotes
im Adobe Support Center:
• Understanding anonymous authentication and the IUSR account unter www.adobe.com/go/authentication_de
• Setting IIS web server permissions unter www.adobe.com/go/server_permissions_de
Microsoft-Fehler beheben
Die nachfolgend aufgeführten Microsoft-Fehlermeldungen werden möglicherweise angezeigt, wenn Sie Internet
Information Server (IIS) mit einem Microsoft-Datenbanksystem wie Access oder SQL Server einsetzen und eine
dynamische Seite vom Server anfordern.
Note: Adobe bietet keine technische Unterstützung für Software von anderen Herstellern wie Microsoft Windows und IIS.
Wenn sich das Problem nicht mit den Informationen in diesem Abschnitt beheben lässt, wenden Sie sich an den
technischen Support von Microsoft oder besuchen Sie die Support-Website von Microsoft unter
http://support.microsoft.com/.
Weitere Informationen über 80004005-Fehler finden Sie unter „INFO: Anleitung zur Behebung von Fehlern des Typs
80004005 bei Active Server Pages und Microsoft Data Access Components“ (Q306518) auf der Microsoft-Website
unter http://support.microsoft.com/default.aspx?scid=kb;de-de;Q306518.
[Reference]80004005 – Data source name not found and no default driver specified
(Datenquellenname nicht gefunden und kein Standardtreiber angegeben)
Dieser Fehler tritt auf, wenn Sie versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht
anzuzeigen. Der genaue Wortlaut der Fehlermeldung richtet sich nach Ihrer Datenbank und Ihrem Webserver.
Weitere Varianten der Fehlermeldung sind unter anderem:
• 80004005 – Driver's SQLSetConnectAttr failed (SQLSetConnectAttr des Treibers fehlgeschlagen)
• 80004005 – General error Unable to open registry key 'DriverId' (Allgemeiner Fehler. Registrierungsschlüssel
'DriverId' kann nicht geöffnet werden)
594
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Im Folgenden werden mögliche Ursachen und Lösungen erläutert:
• Die Seite kann den DSN nicht finden. Stellen Sie sicher, dass sowohl auf dem Webserver als auch auf dem lokalen
Computer ein DSN erstellt wurde.
• Der DSN wurde möglicherweise nicht als System-DSN, sondern als Benutzer-DSN erstellt. Löschen Sie in diesem
Fall den Benutzer-DSN und erstellen Sie stattdessen einen System-DSN.
Note: Wenn Sie den Benutzer-DSN nicht löschen, verursachen die doppelten DSN-Namen einen neuen ODBC-Fehler.
Wenn Sie Microsoft Access verwenden, ist die Datenbankdatei (.mdb) möglicherweise gesperrt. Die Sperre kann
darauf zurückzuführen sein, dass ein anderer DSN auf die Datenbank zugreift. Suchen Sie in Windows Explorer die
Sperrdatei (.ldb). Sie befindet sich im gleichen Ordner wie auch die Datenbankdatei (.mdb). Löschen Sie dann die .ldb-
Datei. Wenn ein anderer DSN auf die gleiche Datenbankdatei verweist, löschen Sie den DSN, um den Fehler in
Zukunft zu vermeiden. Sie müssen den Computer neu starten, nachdem Sie diese Änderungen vorgenommen haben.
[Reference]80004005 – Couldn’t use ‘(unknown)’; file already in use (Verwendung von
„(unbekannt)“ nicht möglich; die Datei wird bereits verwendet)
Dieser Fehler tritt auf, wenn Sie eine Microsoft Access-Datenbank verwenden und versuchen, eine dynamische Seite
in einem Webbrowser oder in der Live-Ansicht anzuzeigen. Eine weitere Variante dieser Fehlermeldung lautet
„80004005 – Microsoft Jet database engine cannot open the file (unknown)“ („Microsoft Jet Datenbank-Engine kann
die Datei (unbekannt) nicht öffnen“).
Der Fehler wird wahrscheinlich durch unzureichende Berechtigungen verursacht. Im Folgenden werden spezifische
Ursachen und Lösungen erläutert:
• Das von Internet Information Server verwendete Konto (normalerweise IUSR) verfügt möglicherweise nicht über
die korrekten Windows-Berechtigungen für eine dateibasierte Datenbank oder für den Ordner, in dem sich die
Datei befindet. Überprüfen Sie im Benutzer-Manager die Berechtigungen des IIS-Kontos (IUSR).
• Möglicherweise sind Sie nicht zum Erstellen oder Löschen temporärer Dateien berechtigt. Überprüfen Sie die
Berechtigungen für die Datei und den Ordner, und stellen Sie sicher, dass Sie zum Erstellen und Löschen
temporärer Dateien berechtigt sind. Temporäre Dateien werden normalerweise im gleichen Ordner erstellt wie
auch die Datenbank. Die Datei kann jedoch auch in anderen Ordnern angelegt werden, wie beispielsweise in
„/Winnt“.
• In Windows 2000 muss der Zeitlimitwert für den Access Datenbank-DSN möglicherweise geändert werden.
Wählen Sie dazu „Start“ > „Einstellungen“ > „Systemsteuerung“ > „Verwaltung“ > „Datenquellen (ODBC)“.
Klicken Sie auf die Registerkarte „System“, markieren Sie den korrekten DSN und klicken Sie dann auf die
Schaltfläche „Konfigurieren“. Klicken Sie auf die Schaltfläche „Optionen“ und ändern Sie den Wert für das Seiten-
Zeitlimit in
5000.
Wenn das Problem dadurch nicht behoben wird, lesen Sie die folgenden Artikel in der Microsoft Knowledge Base:
• PRB: 80004005 „Couldn't Use ‘(unknown)’; File Already in Use“ unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;Q174943.
• PRB: „Microsoft Access 97-Datenbank-Verbindung kann in Active Server Pages nicht ausgeführt werden“ unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;Q253604.
• PRB: Error „Cannot Open File Unknown“ Using Access unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;Q166029.
[Reference]80004005 – Logon Failed() (Anmeldung fehlgeschlagen)
Dieser Fehler tritt auf, wenn Sie Microsoft SQL Server verwenden und versuchen, eine dynamische Seite in einem
Webbrowser oder in der Live-Ansicht anzuzeigen.
595
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Der Fehler wird von SQL Server generiert, wenn das angegebene Anmeldekonto oder das Kennwort nicht erkannt
oder akzeptiert wird (bei Verwendung der Standardsicherheit) oder wenn ein Windows-Konto keinem SQL-Konto
zugeordnet werden kann (bei Verwendung von integrierter Sicherheit).
Im Folgenden werden mögliche Lösungen erläutert:
• Wenn Sie die Standardsicherheit verwenden, sind Kontoname und Kennwort möglicherweise nicht korrekt.
Versuchen Sie es mit dem Konto und Kennwort des Systemadministrators (UID= „sa“, kein Kennwort). Diese
Angaben müssen in der Zeile mit der Verbindungszeichenfolge definiert werden. (DSNs speichern keine
Benutzernamen und Kennwörter.)
• Wenn Sie die integrierte Sicherheit verwenden, überprüfen Sie das Windows-Konto, das die Seite aufruft, und
suchen Sie das zugeordnete SQL-Konto (falls vorhanden).
• SQL-Kontonamen dürfen in SQL Server keinen Unterstrich enthalten. Wenn das Windows-Konto
IUSR_computername manuell einem SQL-Konto mit dem gleichen Namen zugeordnet wurde, führt dies zu einem
Fehler. Ordnen Sie jegliche Konten, deren Namen einen Unterstrich enthalten, einem SQL-Kontonamen ohne
Unterstrich zu.
[Reference]80004005 – Operation must use an updateable query (Operation muss eine
aktualisierbare Abfrage verwenden)
Dieser Fehler tritt auf, wenn ein Ereignis eine Datensatzgruppe aktualisiert oder Daten in eine Datensatzgruppe
einfügt.
Im Folgenden werden mögliche Ursachen und Lösungen erläutert:
• Für den Ordner, der die Datenbank enthält, wurden keine ausreichenden Berechtigungen festgelegt. Die IUSR-
Berechtigungen müssen auf Lesen/Schreiben eingestellt sein.
• Für die Datenbankdatei selbst gelten keine ausreichenden Lese-/Schreibberechtigungen.
• Die Datenbank befindet sich eventuell nicht im Verzeichnis „Inetpub/wwwroot“. Wenn die Datenbank sich nicht
im Verzeichnis „wwwroot“ befindet, können Sie Daten zwar anzeigen und durchsuchen, aber unter Umständen
nicht aktualisieren.
• Die Datensatzgruppe basiert auf einer nicht aktualisierbaren Abfrage. Verknüpfungen sind ein gutes Beispiel für
nicht aktualisierbare Abfragen innerhalb einer Datenbank. Strukturieren Sie Ihre Abfragen so um, dass sie
aktualisiert werden können.
Weitere Informationen über diesen Fehler finden Sie im Artikel „PRB: ASP ‘Error The Query Is Not Updateable’
When You Update Table Record“ in der Microsoft Knowledge Base unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;Q174640.
[Reference]80040e07 – Data type mismatch in criteria expression (Datentyp im
Kriterienausdruck stimmt nicht überein)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten „Datensatz
einfügen“ oder „Datensatz aktualisieren“ enthält, und das Serververhalten versucht, den Wert einer Datum/Uhrzeit-
Spalte in einer Microsoft Access-Datenbank auf eine leere Zeichenfolge ("") einzustellen.
In Microsoft Access gelten für Datentypen strenge Kriterien und die Werte für bestimmte Spalten unterliegen
rigorosen Regeln. Die leere Zeichenfolge in der SQL-Abfrage kann in Access nicht in einer Spalte „Datum/Uhrzeit“
gespeichert werden. Dieses Problem lässt sich derzeit nur umgehen, indem in Access keine Datum/Uhrzeit-Spalten
mit leeren Zeichenfolgen ("") eingefügt oder aktualisiert werden. Auch andere Werte, die nicht dem gültigen
Wertebereich des Datentyps entsprechen, sind zu vermeiden.
596
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
[Reference]80040e10 – Too few parameters (Nicht genügend Parameter)
Dieser Fehler tritt auf, wenn eine in der SQL-Abfrage angegebene Spalte nicht in der Datenbanktabelle vorhanden ist.
Vergleichen Sie die Spaltennamen der Datenbanktabelle mit der SQL-Abfrage. Dieses Problem wird häufig durch
einen Schreibfehler verursacht.
[Reference]80040e10 – COUNT field incorrect (COUNT-Feld ungültig)
Dieser Fehler tritt auf, wenn Sie eine Vorschau einer Seite, die das Serververhalten „Datensatz einfügen“ enthält, in
einem Webbrowser anzeigen und versuchen, damit einen Datensatz in eine Microsoft Access-Datenbank einzufügen.
Möglicherweise versuchen Sie, einen Datensatz in ein Datenbankfeld einzufügen, dessen Name ein Fragezeichen (?)
enthält. Bei einigen Datenbank-Engines, unter anderem auch bei Microsoft Access, ist das Fragezeichen ein
Sonderzeichen. Es sollte daher weder für Namen der Datenbanktabellen noch für Feldnamen verwendet werden.
Öffnen Sie Ihr Datenbanksystem und löschen Sie das Fragezeichen (?) aus den Feldnamen. Aktualisieren Sie dann die
Serververhalten der Seite, die auf dieses Feld verweisen.
[Reference]80040e14 – Syntax error in INSERT INTO statement (Syntaxfehler in Anweisung
INSERT INTO)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten „Datensatz
einfügen“ enthält.
Der Fehler ist in der Regel auf mindestens eines der folgenden Probleme in Bezug auf den Namen eines Feldes, eines
Objekts oder einer Variablen in der Datenbank zurückzuführen:
• Ein reserviertes Wort wird als Name verwendet. Bei den meisten Datenbanken sind bestimmte Wörter reserviert.
So ist beispielsweise „date“ ein reserviertes Wort. Es kann daher nicht als Spaltenname in einer Datenbank
verwendet werden.
• Der Name enthält Sonderzeichen. Zu den Sonderzeichen gehören beispielsweise:
. / * : ! # & - ?
• Der Name enthält ein Leerzeichen.
Dieser Fehler kann auch auftreten, wenn für ein Objekt in der Datenbank eine Eingabemaske definiert wurde und
die eingegebenen Daten nicht der Maske entsprechen.
Sie können das Problem beheben, indem Sie keine reservierten Wörter für die Spaltennamen in der Datenbank
angeben, wie beispielsweise „date“, „name“, „select“, „where“ und „level“. Entfernen Sie auch eventuell vorhandene
Leerzeichen und Sonderzeichen.
Auf den folgenden Webseiten finden Sie Listen der reservierten Wörter für gängige Datenbanksysteme:
• Microsoft Access unter http://support.microsoft.com/default.aspx?scid=kb;de-de;Q209187
• Microsoft SQL Server unter http://msdn.microsoft.com/library/default.asp?url=/library/de-de/tsqlref/ts_ra-
rz_9oj7.asp
• MySQL unter http://dev.mysql.com/doc/mysql/en/reserved-words.html
[Reference]80040e21 – ODBC error on Insert or Update (ODBC-Fehler beim Einfügen oder
Aktualisieren)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten „Datensatz
aktualisieren“ oder „Datensatz einfügen“ enthält. Die Datenbank kann den Einfüge- oder Aktualisierungsvorgang des
Serververhaltens nicht verarbeiten.
597
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Im Folgenden werden mögliche Ursachen und Lösungen erläutert:
• Das Serververhalten versucht, ein Feld für die automatische Nummerierung in der Datenbanktabelle zu
aktualisieren oder einen Datensatz in ein solches Feld einzufügen. Da Felder für die automatische Nummerierung
automatisch vom Datenbanksystem ausgefüllt werden, ist es nicht möglich, extern einen Wert in diese Felder
einzutragen.
• Die Daten, die vom Serververhalten eingefügt oder aktualisiert werden, entsprechen nicht dem Typ des
Datenbankfelds. Beispielsweise wird versucht, ein Datum in ein boolesches Ja-/Nein-Feld, eine Zeichenfolge in ein
numerisches Feld oder eine fehlerhaft formatierte Zeichenfolge in ein Datum/Uhrzeit-Feld einzufügen.
[Reference]800a0bcd – Either BOF or EOF is true (BOF oder EOF ist wahr)
Dieser Fehler tritt auf, wenn Sie versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht
anzuzeigen.
Das Problem entsteht, wenn versucht wird, Daten aus einer leeren Datensatzgruppe auf der Seite anzuzeigen. Sie
können das Problem beheben, indem Sie dem auf der Seite anzuzeigenden dynamischen Inhalt das Serververhalten
„Bereich zeigen“ zuweisen. Gehen Sie dazu folgendermaßen vor:
1 Markieren Sie den dynamischen Inhalt auf der Seite.
2 Klicken Sie im Bedienfeld „Serververhalten“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie „Bereich
zeigen“ > „Bereich zeigen, wenn Datensatzgruppe nicht leer ist“.
3 Wählen Sie die Datensatzgruppe aus, die den dynamischen Inhalt bereitstellt, und klicken Sie auf „OK“.
4 Wiederholen Sie die Schritte 1 bis 3 für alle dynamischen Inhaltselemente auf der Seite.
MySQL-Fehler beheben
Die folgende Fehlermeldung tritt beim Testen einer PHP-Datenbankverbindung mit MySQL 4.1 häufig auf: „Client
does not support authentication protocol requested. Consider upgrading MySQL client.“
Sie müssen möglicherweise zu einer früheren Version von MySQL zurückkehren oder PHP 5 installieren und einige
DLLs (Dynamic Link Libraries) kopieren. Detaillierte Anweisungen finden Sie unter “Einrichten einer PHP-
Entwicklungsumgebung” on page 578.
Verbindungsskripts entfernen
Befehl „Verbindungsskripts entfernen“ verwenden
Mit dem Befehl „Verbindungsskripten entfernen“ können Sie Skripts entfernen, die Dreamweaver für den Zugriff auf
Datenbanken in einem Remote-Ordner ablegt. Diese Skripts werden nur zur Entwurfszeit in Dreamweaver benötigt.
Wenn Sie die Option „Mithilfe des Treibers auf dem Testserver“ oder „Mithilfe des DSN auf dem Testserver“ im
Dialogfeld „Datenbankverbindung“ auswählen, lädt Dreamweaver eine MMHTTPDB-Skriptdatei zum Testserver
hoch. Damit kann Dreamweaver den Remote-Datenbanktreiber via HTTP-Protokoll manipulieren und so die
Datenbankinformationen abrufen, die zum Erstellen der Site in Dreamweaver benötigt werden. Allerdings können
mit dieser Datei die im System definierten Datenquellennamen (DSN) angezeigt werden. Wenn die DSNs und
Datenbanken nicht durch ein Kennwort geschützt sind, können potenzielle Angreifer über dieses Skript SQL-Befehle
in der Datenbank ausführen lassen.
Die MMHTTPDB-Skriptdateien befinden sich im Ordner „_mmServerScripts“, der sich seinerseits im
Stammverzeichnis der Website befindet.
598
VERWENDEN VON DREAMWEAVER
Erstellen dynamischer Sites vorbereiten
Last updated 10.4.2012
Note: Im Dreamweaver-Dateibrowser (Bedienfeld „Dateien“) wird der Ordner „_mmServerScripts“ nicht angezeigt. Sie
können diesen Ordner aber im FTP-Client eines Drittanbieters anzeigen.
In vielen Konfigurationen werden diese Skripts nicht benötigt. Sie werden nicht eingesetzt, wenn Besucher auf Seiten
in Ihrer Website zugreifen, und sollten daher nicht auf einem Produktionsserver abgelegt werden.
Falls Sie die Skriptdatei „MMHTTPDB“ auf einen Produktionsserver hochgeladen haben, sollten Sie sie vom Server
löschen. Der Befehl „Verbindungsskripten entfernen“ entfernt die Skriptdateien automatisch.
599
Last updated 10.4.2012
Chapter 20: Dynamische Seiten erstellen
Sie können dynamische Seiten erstellen, auf denen Informationen angezeigt werden, die aus Quellen für dynamischen
Inhalt stammen (z. B. Datenbanken und Sitzungsvariablen). Adobe® Dreamweaver® CS5 unterstützt die Entwicklung
dynamischer Seiten für ColdFusion-, ASP- und PHP-Servermodelle.
Zudem können Sie mithilfe des auf Ajax basierten Spry-Frameworks dynamische Seiten erstellen, mit denen sich
XML-Daten anzeigen und bearbeiten lassen. Die Verwendung vorgefertigter Spry-Formularelemente ermöglicht das
Erstellen dynamischer Seiten, die keine vollständige Seitenaktualisierung erfordern.
Optimieren des Arbeitsbereichs für visuelle
Entwicklung
Bedienfelder für das Entwickeln von Webanwendungen anzeigen
Wählen Sie im Popupmenü „Kategorie“ des Bedienfelds „Einfügen“ die Kategorie „Daten“ aus, um eine Gruppe von
Schaltflächen anzuzeigen, über die Sie einer Seite dynamische Inhalte und Serververhalten hinzufügen können.
Wie viele und welche Schaltflächen angezeigt werden, hängt jeweils vom Typ des im Dokumentfenster geöffneten
Dokuments ab. Bewegen Sie die Maus auf ein Symbol, um eine QuickInfo mit einer Beschreibung der
Schaltflächenfunktion einzublenden.
Das Bedienfeld „Einfügen“ enthält Schaltflächen, über die Sie der Seite die folgenden Elemente hinzufügen können:
• Datensatzgruppen
• Dynamischen Text oder dynamische Tabellen
• Datensatz-Navigationsleisten
Wenn Sie in die Codeansicht („Ansicht“ > „Code“) wechseln, werden im Bedienfeld „Einfügen“ möglicherweise
weitere Bedienfelder in einer separaten Kategorie angezeigt. Mithilfe dieser Bedienfelder können Sie Code in die
Seite einfügen. Wenn Sie beispielsweise eine ColdFusion-Seite in der Codeansicht anzeigen, wird in der Kategorie
„CFML“ des Bedienfelds „Einfügen“ das Bedienfeld „CFML“ verfügbar.
Die folgenden Bedienfelder bieten Funktionen zum Erstellen dynamischer Seiten:
• Wählen Sie das Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“), wenn Sie für eine Seite Quellen mit
dynamischem Inhalt definieren und den Inhalt der Seite hinzufügen möchten.
• Wählen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), wenn Sie dynamischen Seiten
serverseitige Logikfunktionen hinzufügen möchten.
• Wählen Sie das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“), wenn Sie Datenbanken durchsuchen
oder Datenbankverbindungen erstellen möchten.
• Wählen Sie das Bedienfeld „Komponenten“ („Fenster“ > „Komponenten“) aus, wenn Sie Code für ColdFusion-
Komponenten überprüfen, hinzufügen oder ändern möchten.
Note: Das Bedienfeld „Komponenten“ ist nur aktiviert, wenn Sie eine ColdFusion-Seite öffnen.
Ein Serververhalten ist ein Satz Anweisungen, der zur Entwurfszeit in eine dynamische Seite eingefügt und zur
Laufzeit auf dem Server ausgeführt wird.
600
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Ein Tutorial zum Einrichten des Entwicklungs-Arbeitsbereichs finden Sie unter www.adobe.com/go/vid0144_de.
More Help topics
“Bedienfeld „Bindungen“” on page 610
“Bedienfeld „Serververhalten“” on page 610
“Bedienfeld „Datenbanken“” on page 611
“Bedienfeld „Komponenten“” on page 611
Tutorial zum Entwicklungs-Arbeitsbereich
Datenbanken in Dreamweaver anzeigen
Nachdem eine Verbindung mit der Datenbank hergestellt wurde, können Sie sich die Datenbankstruktur und die in
der Datenbank enthaltenen Daten in Dreamweaver ansehen.
1 Öffnen Sie das Bedienfeld „Datenbanken“ („Fenster“ > „Datenbanken“).
Im Bedienfeld „Datenbanken“ werden sämtliche Datenbanken aufgeführt, für die Sie Verbindungen erstellt haben.
Wenn Sie eine ColdFusion-Site entwickeln, enthält das Bedienfeld eine Liste der Datenbanken, für die im ColdFusion-
Administrator Datenquellen definiert wurden.
Note: Dreamweaver fragt den ColdFusion-Server ab, den Sie für die aktuelle Site definiert haben.
Werden im Bedienfeld keine Datenbanken angezeigt, müssen Sie eine Datenbankverbindung erstellen.
2 Wenn Sie die Tabellen, gespeicherten Prozeduren und Ansichten in der Datenbank anzeigen möchten, klicken Sie
neben einer Verbindung in der Liste auf die Schaltfläche mit dem Pluszeichen (+).
3 Um die Spalten in der Tabelle anzuzeigen, klicken Sie auf einen Tabellennamen.
Die Spaltensymbole kennzeichnen den Datentyp und geben den Primärschlüssel der Tabelle an.
4 Wenn Sie die Daten in einer Tabelle anzeigen möchten, klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf den Tabellennamen in der Liste und wählen im Popupmenü den Befehl
„Daten anzeigen“.
More Help topics
“Einrichten einer ColdFusion-Entwicklungsumgebung” on page 578
“Einrichten einer PHP-Entwicklungsumgebung” on page 578
“Einrichten einer ASP-Entwicklungsumgebung” on page 578
Vorschau dynamischer Seiten in einem Browser
Autoren von Webanwendungen debuggen ihre Seiten häufig, indem sie sie kurz in einem Webbrowser überprüfen.
Sie haben die Möglichkeit, dynamische Seiten schnell in einem Browser anzuzeigen, ohne sie zuerst manuell auf einen
Server hochzuladen (drücken Sie F12).
Um eine Vorschau dynamischer Seiten anzuzeigen, müssen Sie in der Kategorie „Testserver“ des Dialogfelds „Site-
Definition“ alle erforderlichen Einstellungen vornehmen.
601
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Sie können angeben, dass Dreamweaver temporäre Dateien anstelle der Originaldateien verwenden soll. Ist diese
Option aktiviert, führt Dreamweaver eine temporäre Kopie der Seite auf einem Webserver aus, bevor die Seite im
Browser angezeigt wird. (Die temporäre Datei wird anschließend von Dreamweaver vom Server gelöscht.) Wählen Sie
„Bearbeiten“ > „Voreinstellungen“ > „Vorschau im Browser“, um diese Option festzulegen.
Durch den Befehl „Vorschau im Browser“ werden weder verknüpfte Seiten (z. B. Ergebnis- oder Detailseiten) noch
abhängige Dateien (z. B. Bilddateien) oder Server-Side Includes hochgeladen. Wenn Sie eine fehlende Datei hochladen
möchten, wählen Sie „Fenster“ > „Site“, um das Bedienfeld „Site“ zu öffnen. Wählen Sie die Datei unter „Lokaler
Ordner“ aus und klicken Sie in der Symbolleiste auf den blauen, nach oben gerichteten Pfeil, um die Datei in den
Webserver-Ordner zu kopieren.
More Help topics
“Testserver einrichten” on page 50
Anzeige der Datenbankinformationen in Dreamweaver eingrenzen
Wenn Sie sich im Umgang mit großen Datenbanksystemen wie Oracle auskennen, sollten Sie die Anzahl der
Datenbankelemente eingrenzen, die Dreamweaver während der Entwurfsphase abruft und anzeigt. Oracle-
Datenbanken enthalten möglicherweise Elemente, die Dreamweaver während der Entwurfsphase nicht verarbeiten
kann. In diesem Fall können Sie in Oracle ein Schema erstellen und in Dreamweaver anhand dieses Schemas während
der Entwurfsphase unnötige Elemente herausfiltern.
Note: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht möglich.
Auch andere Benutzer können von der Eingrenzung der Daten, die Dreamweaver während der Entwurfsphase abruft,
profitieren. Einige Datenbanken enthalten Dutzende oder Hunderte von Tabellen und möglicherweise möchten Sie
nicht, dass sämtliche Tabellen während der Bearbeitung anzeigt werden. Mithilfe eines Schemas oder Katalogs lässt
sich die Anzahl der Datenbankelemente begrenzen, die während der Entwurfsphase abgerufen werden.
Wenn Sie in Dreamweaver ein Schema oder einen Katalog einsetzen möchten, müssen Sie dieses Schema bzw. den
Katalog zuerst im Datenbanksystem erstellen. Weitere Informationen können Sie der Dokumentation Ihres
Datenbanksystems entnehmen oder von Ihrem Systemadministrator erfragen.
Note: Sie können in Dreamweaver weder Schemata noch Kataloge zuweisen, wenn Sie eine ColdFusion-Anwendung
entwickeln oder Microsoft Access verwenden.
1 Öffnen Sie eine dynamische Seite in Dreamweaver und dann das Bedienfeld „Datenbanken“ („Fenster“ >
Datenbanken“).
• Falls die Datenbankverbindung vorhanden ist, klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrückter Ctrl-Taste (Macintosh) auf die Verbindung in der Liste und wählen Sie im Popupmenü die Option
„Verbindung bearbeiten“.
• Ist keine Verbindung vorhanden, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) oben im Bedienfeld und
erstellen eine Verbindung.
2 Klicken Sie im Dialogfeld für die Verbindung auf „Erweitert“.
3 Geben Sie das Schema oder den Katalog an und klicken Sie auf „OK“.
602
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Einstellungen im Eigenschafteninspektor für gespeicherte ColdFusion-
Prozeduren und ASP-Befehle vornehmen
Ändern Sie die ausgewählte gespeicherte Prozedur. Die verfügbaren Optionen richten sich nach der
Servertechnologie.
❖ Bearbeiten Sie beliebige Optionen. Wenn Sie im Eigenschafteninspektor eine neue Option auswählen, wird die
Seite in Dreamweaver aktualisiert.
More Help topics
“Dynamischen Inhalt bearbeiten” on page 631
Eingabenamen-Optionen
Wenn Dreamweaver auf einen unbekannten Eingabetyp stößt, wird dieser Eigenschafteninspektor angezeigt. Dies
geschieht meist aufgrund eines Tipp- oder Dateneingabefehlers.
Sobald Sie im Eigenschafteninspektor für den Feldtyp einen Wert festlegen, den Dreamweaver erkennt (wenn Sie
beispielsweise den Tippfehler korrigieren), wird der Eigenschafteninspektor aktualisiert und die Eigenschaften des nun
bekannten Feldtyps werden angezeigt. Stellen Sie im Eigenschafteninspektor die folgenden Optionen nach Bedarf ein:
Eingabename weist dem Feld einen Namen zu. Dieses Feld muss ausgefüllt werden. Der Name muss eindeutig sein.
Typ legt den Eingabetyp des Feldes fest. Der Inhalt dieses Feldes reflektiert den Eingabetyp, der gegenwärtig im
HTML-Quellcode angezeigt wird.
Wert legt den Wert des Feldes fest.
Parameter öffnet das Dialogfeld „Parameter“, damit Sie sich die aktuellen Attribute des Feldes ansehen sowie
Attribute hinzufügen und entfernen können.
Dynamische Seiten entwerfen
Dynamische Seiten in Dreamweaver entwerfen
Im Folgenden wird beschrieben, wie Sie eine dynamische Website entwerfen und erstellen.
1 Entwerfen Sie die Seite.
Das grafische Design der Seite ist beim Entwerfen jeder Website – ob statisch oder dynamisch – eine der
wichtigsten Aufgaben. Wenn einer Webseite dynamische Elemente hinzugefügt werden, ist das gewählte Design
für die Benutzerfreundlichkeit der Seite entscheidend. Sie sollten sorgfältig überlegen, wie Benutzer mit einzelnen
Seiten und mit der Website als Ganzes interagieren.
Ein gängiges Verfahren zum Einbauen dynamischen Inhalts in eine Website ist das Erstellen einer Tabelle, die den
Inhalt vorstellt, und das Importieren des dynamischen Inhalts in eine oder mehrere Tabellenzellen. Mit dieser
Methode lassen sich verschiedenartige Informationen in einem strukturierten Format präsentieren.
2 Erstellen Sie eine Quelle für dynamischen Inhalt.
603
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Dynamische Websites müssen die Daten, die auf einer Webseite angezeigt werden sollen, aus einer Inhaltsquelle
extrahieren. Wenn Sie in einer Webseite Inhaltsquellen nutzen möchten, müssen Sie die folgenden Schritte
ausführen:
• Stellen Sie eine Verbindung zu der Quelle des dynamischen Inhalts (z. B. einer Datenbank) und zu dem
Anwendungsserver her, der die Seite verarbeitet. Erstellen Sie die Datenquelle mithilfe des Bedienfelds
„Bindungen“; anschließend können Sie die Datenquelle auswählen und in die Seite einfügen.
• Geben Sie durch Erstellen einer Datensatzgruppe an, welche Informationen der Datenbank angezeigt werden
oder welche Variablen auf der Seite enthalten sein sollen. Sie können die Abfrage auch im Dialogfeld
„Datensatzgruppe“ testen und nach Bedarf anpassen, bevor Sie sie dem Bedienfeld „Bindungen“ hinzufügen.
• Wählen Sie dynamische Inhaltselemente aus und fügen Sie sie in der gewünschten Seite ein.
3 Fügen Sie einer Webseite dynamischen Inhalt hinzu.
Nachdem Sie eine Datensatzgruppe bzw. eine andere Datenquelle definiert und dem Bedienfeld „Bindungen“
hinzugefügt haben, können Sie den dynamischen Inhalt, den die Datensatzgruppe repräsentiert, in die Seite
einfügen. Die menügesteuerte Benutzeroberfläche von Dreamweaver erleichtert das Hinzufügen von dynamischen
Inhaltselementen: Wählen Sie im Bedienfeld „Bindungen“ eine Quelle für dynamischen Inhalt aus und fügen Sie
sie in ein geeignetes Text-, Bild- oder Formularobjekt auf der aktuellen Seite ein.
Wenn Sie ein dynamisches Inhaltselement oder ein anderes Serververhalten in eine Seite einfügen, fügt
Dreamweaver ein serverseitiges Skript in den Quellcode der Seite ein. Dieses Skript weist den Server an, Daten aus
der definierten Datenquelle abzurufen und auf der Webseite anzuzeigen. Sie haben folgende Möglichkeiten,
dynamischen Inhalt auf einer Webseite zu platzieren:
• Sie platzieren ihn an der Einfügemarke in der Code- oder in der Entwurfsansicht.
• Sie ersetzen eine Textzeichenfolge oder einen anderen Platzhalter.
Sie fügen ihn in ein HTML-Attribut ein. Dynamischer Inhalt kann beispielsweise das Attribut „src“ eines Bildes
oder das Attribut „value“ eines Formularfelds definieren.
4 Fügen Sie einer Seite Serververhalten hinzu.
Sie können Webseiten nicht nur dynamischen Inhalt hinzufügen, sondern auch auf einfache Weise komplexe
Anwendungslogik einbauen. Dazu verwenden Sie Serververhalten. Serververhalten sind vom Hersteller definierte
Teile von serverseitigem Code, die Webseiten Anwendungslogik hinzufügen und damit die Interaktion und die
Funktionalität erweitern können.
Mit den Dreamweaver-Serververhalten können Sie einer Website Anwendungslogik hinzufügen, ohne den Code
selbst schreiben zu müssen. Die mit Dreamweaver gelieferten Serververhalten unterstützen die Dokumenttypen
ColdFusion, ASP und PHP. Sie wurden in Hinblick auf Schnelligkeit, Sicherheit und Robustheit verfasst und
getestet. Die integrierten Serververhalten unterstützen plattformübergreifende Webseiten für alle Browser.
Dreamweaver verfügt über eine mausgesteuerte Benutzeroberfläche, die das Anwenden von dynamischem Inhalt
und komplexen Verhalten auf eine Seite so einfach macht wie das Einfügen von Text- und Entwurfselementen. Es
stehen folgende Serververhalten zur Verfügung:
• Datensatzgruppe aus einer bereits vorhandenen Datenbank definieren. Die von Ihnen definierte
Datensatzgruppe wird anschließend im Bedienfeld „Bindungen“ gespeichert.
• Mehrere Datensätze auf einer einzigen Seite anzeigen. Sie wählen eine gesamte Tabelle oder einzelne Zellen bzw.
Zeilen mit dynamischem Inhalt aus und geben die Anzahl der in der jeweiligen Seitenansicht anzuzeigenden
Datensätze an.
604
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
• Dynamische Tabelle erstellen und in eine Seite einfügen sowie die Tabelle mit einer Datensatzgruppe
verknüpfen. Sie können das Erscheinungsbild und den wiederholenden Bereich der Tabelle später mithilfe des
Eigenschafteninspektors und des Serververhaltens „Wiederholender Bereich“ ändern.
• Dynamisches Textobjekt in eine Seite einfügen. Das eingefügte Textobjekt ist ein Element aus einer
vordefinierten Datensatzgruppe, dem Sie ein beliebiges Datenformat zuweisen können.
• Steuerelemente für Datensatznavigation und -status sowie Master-/Detailseiten und Formulare zum
Aktualisieren von Informationen in einer Datenbank erstellen.
• Mehrere Datensätze aus einem Datenbank-Datensatz anzeigen.
• Datensatzgruppen-Navigationslinks erstellen, mit denen Benutzer den nächsten bzw. vorherigen Datensatz
einer Datenbank anzeigen können.
• Einen Datensatzzähler hinzufügen, damit Benutzer die Anzahl der zurückgegebenen Datensätze und die Stelle
verfolgen können, an der sie sich in den zurückgegebenen Ergebnissen befinden.
Sie können die Dreamweaver-Serververhalten auch erweitern, indem Sie eigene Serververhalten verfassen oder von
Drittanbietern verfasste Serververhalten installieren.
5 Testen und debuggen Sie die Seite.
Bevor Sie eine dynamische Seite oder eine gesamte Website verfügbar machen, sollten Sie ihre Funktionalität
testen. Sie sollten auch bedenken, welche Auswirkungen die Funktionalität Ihrer Anwendung auf behinderte
Benutzer haben kann.
More Help topics
“Inhalte in Tabellen darstellen” on page 192
“Bilder hinzufügen und ändern” on page 255
“SWF-Dateien einfügen” on page 274
Überblick über Quellen für dynamischen Inhalt
Quellen für dynamischen Inhalt
Eine Quelle für dynamischen Inhalt ist ein Informationsspeicher, aus dem Sie dynamischen Inhalt abrufen können, der
auf einer Webseite eingesetzt werden soll. Als Quelle für dynamischen Inhalt dienen nicht nur Datenbanken, sondern
auch Werte, die über HTML-Formulare übermittelt werden, in Serverobjekten enthalten sind usw.
Mit Dreamweaver können Sie leicht eine Verbindung zu einer Datenbank herstellen und eine Datensatzgruppe
erstellen, aus der dynamischer Inhalt extrahiert werden soll. Bei einer Datenbankabfrage wird als Ergebnis eine
Datensatzgruppe geliefert. Dabei werden die von Ihnen angeforderten Informationen extrahiert. Sie können diese
Informationen dann auf einer bestimmten Seite anzeigen. Sie definieren die Datensatzgruppe basierend auf den in der
Datenbank enthaltenen Informationen und dem anzuzeigenden Inhalt.
Unterschiedliche Technologieanbieter verwenden möglicherweise unterschiedliche Bezeichnungen für
Datensatzgruppen. In ASP und ColdFusion werden Datensatzgruppen als Abfragen definiert. Wenn Sie andere
Datenquellen verwenden, beispielsweise Benutzereingaben oder Servervariablen, stimmt der in Dreamweaver
definierte Name der Datenquelle mit dem Namen der Datenquelle selbst überein.
605
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Dynamische Websites benötigen eine Datenquelle, aus der die anzuzeigenden dynamischen Inhalte abgerufen werden.
Hierzu können Sie in Dreamweaver Datenbanken, Anforderungsvariablen, URL-Variablen, Servervariablen,
Formularvariablen, gespeicherte Prozeduren und andere Quellen für dynamischen Inhalt verwenden. Je nach Art der
Datenquelle können Sie entweder entsprechend der Anforderung neue Inhalte abrufen oder die Seite so ändern, dass
sie den Wünschen der Besucher entspricht.
Jede Inhaltsquelle, die Sie in Dreamweaver definieren, wird der Liste der Inhaltsquellen im Bedienfeld „Bindungen“
hinzugefügt. Danach können Sie die Inhaltsquelle in die gegenwärtig ausgewählte Seite einfügen.
Datensatzgruppen
Webseiten können nicht direkt auf die in einer Datenbank gespeicherten Daten zugreifen. Stattdessen interagieren sie
mit einer Datensatzgruppe. Eine Datensatzgruppe ist eine Teilmenge der Informationen oder Datensätze, die mithilfe
einer Abfrage aus der Datenbank extrahiert wurden. Eine Datenbankabfrage ist eine Suchanweisung, mit der
bestimmte Informationen in einer Datenbank gesucht und aus ihr extrahiert werden sollen.
Wenn Sie eine Datenbank als Inhaltsquelle für eine dynamische Webseite verwenden, müssen Sie zunächst eine
Datensatzgruppe erstellen, in der die abgerufenen Daten gespeichert werden können. Datensatzgruppen dienen als
Mittler zwischen der Datenbank, in der die Inhalte gespeichert sind, und dem Anwendungsserver, mit dem die Seite
erstellt wird. Datensatzgruppen werden vorübergehend im Arbeitsspeicher des Anwendungsservers gespeichert,
damit die Daten schneller abgerufen werden können. Wenn eine Datensatzgruppe nicht mehr benötigt wird, wird sie
auf dem Server wieder gelöscht.
Eine Abfrage kann eine Datensatzgruppe generieren, die nur bestimmte Spalten, nur bestimmte Datensätze oder nur
bestimmte Spalten und Datensätze enthält. Eine Datensatzgruppe kann auch alle Datensätze und Spalten einer
Datenbanktabelle enthalten. Da eine Anwendung jedoch selten alle Daten einer Datenbank benötigt, sollten Sie die
Datensatzgruppen möglichst klein halten. Eine kleine Datensatzgruppe erfordert weniger Speicher und kann die
Serverleistung verbessern, da der Webserver die Datensatzgruppe vorübergehend im Arbeitsspeicher speichert.
Datenbankabfragen werden in SQL (Structured Query Language) geschrieben, einer einfachen Sprache, über die Sie
Daten in einer Datenbank abrufen, hinzufügen und löschen können. Mit dem in Dreamweaver integrierten SQL-
Builder können Sie einfache Abfragen erstellen, ohne weitere Kenntnisse in SQL zu haben. Grundkenntnisse in dieser
Sprache ermöglichen dagegen das Erstellen komplexerer SQL-Abfragen und somit eine größere Flexibilität beim
Entwerfen dynamischer Seiten.
Bevor Sie eine Datensatzgruppe zur Verwendung in Dreamweaver definieren, müssen Sie zunächst eine Verbindung
zu einer Datenbank erstellen und, falls die Datenbank noch leer ist, die entsprechenden Daten eingeben. Sofern Sie für
Ihre Site noch keine Datenbankverbindung definiert haben, lesen Sie das Kapitel über Datenbankverbindungen der
jeweiligen Servertechnologie, für die Sie Ihre Seiten entwickeln, und folgen Sie dort der Anleitung zum Erstellen einer
Datenbankverbindung.
More Help topics
“Datensatzgruppen ohne manuelle SQL-Eingabe definieren” on page 611
URL- und Formularparameter
URL-Parameter dienen zum Speichern der abgerufenen Informationen, die von Benutzern eingegeben wurden. Zum
Definieren eines URL-Parameters erstellen Sie einen Formular- oder Hypertext-Link, der die Methode
GET zum
Senden von Daten verwendet. Die Informationen werden dann an die URL der anzufordernden Seite angehängt und
an den Server übermittelt. Wenn URL-Variablen verwendet werden, enthält die Abfragezeichenfolge ein oder mehrere
Name/Wert-Paare, die mit den Formularfeldern verknüpft sind. Diese Name/Wert-Paare werden an die URL
angehängt.
606
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Formularparameter dienen zum Speichern von abgerufenen Informationen, die in der HTTP-Anforderung für eine
Webseite enthalten sind. Wenn Sie ein Formular erstellen, das die Methode
POST verwendet, werden die vom
Formular übermittelten Daten an den Server übergeben. Bevor Sie beginnen, müssen Sie zunächst einen
Formularparameter an den Server übergeben.
More Help topics
“URL-Parameter” on page 712
“Formularparameter definieren” on page 619
Sitzungsvariablen
Mit Sitzungsvariablen können Sie Daten während der gesamten Sitzung (d. h. während der gesamten Sitzung eines
Besuchers Ihrer Site) speichern und anzeigen. Der Server erstellt für jeden Besucher ein eigenes Sitzungsobjekt, das
entweder über einen definierten Zeitraum oder bis zum expliziten Ablauf des Objekts beibehalten wird.
Da Sitzungsvariablen die gesamte Sitzung über beibehalten werden und auch nach dem Wechseln der Seite innerhalb
der Website noch vorhanden sind, eignen sie sich hervorragend zum Speichern von Besuchereinstellungen. Mit
Sitzungsvariablen können Sie einen Wert auch in den HTML-Code der Seite einfügen, einer lokalen Variablen
zuweisen oder zur Auswertung eines bedingten Ausdrucks bereitstellen.
Bevor Sie Sitzungsvariablen für eine Seite definieren, müssen Sie sie zunächst im Quellcode erstellen. Nachdem Sie im
Quellcode der Webanwendung eine Sitzungsvariable erstellt haben, können Sie ihren Wert in Dreamweaver abrufen
und in einer Webseite verwenden.
Funktionsweise von Sitzungsvariablen
Sitzungsvariablen speichern Informationen (meist von Benutzern gesendete Formular- oder URL-Parameter) und
stellen sie allen Seiten der Webanwendung für die Dauer des Benutzerbesuchs zur Verfügung. Wenn sich
beispielsweise Benutzer an einem Webportal anmelden, das einen Zugriff auf E-Mail, Börsenkurse, Wetterberichte
und Nachrichten ermöglicht, speichert die Webanwendung die Anmeldeinformationen in einer Sitzungsvariablen, die
den Benutzer auf allen Seiten der Site identifiziert. Somit sehen die Benutzer beim Navigieren durch die Seiten nur die
Arten von Inhalt, die sie selbst ausgewählt haben. Sitzungsvariablen können auch einen Sicherheitsmechanismus
bieten, bei dem die Benutzersitzung beendet wird, wenn das Konto über einen bestimmten Zeitraum inaktiv ist.
Dadurch werden zudem Arbeitsspeicher und Verarbeitungsressourcen des Servers freigegeben, wenn der Benutzer
vergisst, sich von einer Website abzumelden.
Sitzungsvariablen speichern Informationen über die Dauer der Benutzersitzung. Die Sitzung beginnt, wenn der
Benutzer eine Seite in der Anwendung öffnet, und endet, wenn er eine bestimmte Zeit lang keine weitere Seite öffnet
oder die Sitzung explizit beendet (normalerweise durch Klicken auf einen Hyperlink zum Abmelden). Die Sitzung gilt
während ihrer ganzen Dauer allein für den jeweiligen Benutzer. Jeder Benutzer hat seine eigene Sitzung.
In Sitzungsvariablen speichern Sie die Informationen, auf die jede Seite einer Webanwendung zugreifen kann. Diese
Informationen können so verschiedenartig sein wie der Benutzername, die bevorzugte Schriftgröße oder ein Flag, das
anzeigt, ob sich der Benutzer erfolgreich angemeldet hat. Ein weiteres verbreitetes Einsatzgebiet von Sitzungsvariablen
ist das Führen eines laufenden Zählers, z. B. über die Anzahl der bisher richtig beantworteten Fragen in einem Online-
Quiz oder der Produkte, die der Benutzer derzeit in einem Online-Katalog ausgewählt hat.
Sitzungsvariablen können nur verwendet werden, wenn der Browser des Benutzer für die Annahme von Cookies
konfiguriert ist. Der Server erstellt eine Sitzungs-ID-Nummer, die den Benutzer eindeutig identifiziert, wenn die
Sitzung zum ersten Mal gestartet wird, und sendet anschließend ein Cookie mit der ID-Nummer an den Browser des
Benutzers. Wenn der Benutzer eine weitere Seite auf dem Server anfordert, liest der Server das Cookie im Browser, um
den Benutzer zu identifizieren und die Benutzersitzungsvariablen im Arbeitsspeicher des Servers abzurufen.
607
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Informationen mit Sitzungsvariablen sammeln, speichern und abrufen
Bevor Sie eine Sitzungsvariable erstellen können, müssen Sie zunächst die zu speichernden Informationen erfassen
und dann zum Speichern an den Server senden. Sie können mit HTML-Formularen oder URL-Parametern in
Hyperlinks Informationen sammeln und an den Server senden. Sie können die Informationen zudem aus Cookies
auslesen, die auf dem Computer des Benutzers gespeichert sind, aus HTTP-Kopfzeilen, die vom Browser des
Benutzers mit einer Seitenanforderung gesendet werden, oder aus einer Datenbank.
Ein typisches Beispiel für das Speichern von URL-Parametern in Sitzungsvariablen ist ein Produktkatalog, der fest
kodierte, mithilfe eines Hyperlinks erstellte URL-Parameter speichert, um Produktinformationen zurück an den
Server zu senden, auf dem sie in einer Sitzungsvariablen gespeichert werden. Wenn ein Benutzer auf den Hyperlink
klickt, über den Produkte in den Warenkorb gelegt werden, wird die Produkt-ID in einer Sitzungsvariablen
gespeichert, während der Benutzer weiter einkauft. Wenn der Benutzer zur Kassenseite wechselt, wird die in der
Sitzungsvariablen gespeicherte Produkt-ID abgerufen.
Ein typisches Beispiel für eine Seite, die Formularparameter in Sitzungsvariablen speichert, ist eine formularbasierte
Umfrage. Das Formular sendet die ausgewählten Informationen an den Server zurück. Dort wird die Umfrage in einer
Anwendungsseite ausgewertet und die Antworten werden in einer Sitzungsvariablen gespeichert und anschließend an
eine Anwendung übergeben, in der die gesammelten Antworten aller Teilnehmer ausgewertet werden. Die Daten
können auch für die spätere Verwendung in einer Datenbank gespeichert werden.
Nachdem die Informationen an den Server gesendet wurden, speichern Sie sie in Sitzungsvariablen, indem Sie der
durch den URL- bzw. Formularparameter angegebenen Seite den entsprechenden Code für Ihr Servermodell
hinzufügen. Diese „Zielseite“ wird entweder im Attribut
action des HTML-Formulars oder im Attribut href des
Hyperlinks auf der Startseite festgelegt.
Nachdem Sie einen Wert in einer Sitzungsvariablen gespeichert haben, können Sie ihn mit Dreamweaver abrufen und
in einer Webanwendung verwenden. Nachdem Sie eine Sitzungsvariable in Dreamweaver definiert haben, können Sie
ihren Wert in eine Seite einfügen.
Die HTML-Syntax lautet jeweils wie folgt:
<form action="destination.html" method="get" name="myform"> </form>
<param name="href"value="destination.html">
Die Servertechnologie und die Methode, mit der Sie die Informationen beschaffen, bestimmen den Code, mit dem die
Informationen in einer Sitzungsvariablen gespeichert werden. Die Grundsyntax lautet für die jeweilige
Servertechnologie wie folgt:
ColdFusion
<CFSET session.variable_name = value>
ASP
<% Session("variable_name") = value %>
Der Ausdruck value ist gewöhnlich ein Serverausdruck, z. B. Request.Form("lastname"). Wenn Sie beispielsweise
mit dem URL-Parameter
product (oder einem HTML-Formular mit der Methode GET und dem Textfeld product)
Informationen sammeln, speichern die folgenden Anweisungen die Informationen in der Sitzungsvariablen
prodID:
ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
608
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Wenn Sie ein HTML-Formular mit der Methode post und dem Textfeld txtProduct Informationen sammeln,
speichern die folgenden Anweisungen die Informationen in der Sitzungsvariablen:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
Beispiel zu Informationen, die in Sitzungsvariablen gespeichert werden
Sie erstellen eine Site für eine große Zielgruppe von älteren Personen. Fügen Sie in Dreamweaver dem
Begrüßungsbildschirm zwei Hyperlinks hinzu, mit denen die Benutzer die Textgröße der Site anpassen können. Um
eine größere, leicht lesbare Schrift zu erhalten, klickt der Benutzer auf den einen Hyperlink. Um eine normal große
Schrift zu erhalten, klickt er auf den anderen.
Jeder Hyperlink verfügt über den URL-Parameter
fontsize, der die Textvoreinstellung des Benutzers an den Server
sendet, wie im folgenden Adobe ColdFusion®-Beispiel dargestellt:
<a href="resort.cfm?fontsize=large">Larger Text</a><br>
<a href="resort.cfm?fontsize=small">Normal Text</a>
Speichern Sie die Textvoreinstellung des Benutzer in einer Sitzungsvariablen und legen Sie mit ihr die Schriftgröße auf
jeder Seite fest, die der Benutzer anfordert.
Geben Sie im oberen Bereich der Zielseite folgenden Code ein, um eine Sitzung mit dem Bezeichner
font_pref zu
erstellen, die die Benutzervoreinstellung für die Schriftgröße speichert.
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
Wenn der Benutzer auf den Hyperlink klickt, sendet die Seite die Textvoreinstellung des Benutzers in einem URL-
Parameter an die Zielseite. Der Code auf der Zielseite speichert den URL-Parameter in der Sitzungsvariablen
font_pref. Für die Dauer der Benutzersitzung rufen alle Seiten der Anwendung diesen Wert ab und werden in der
ausgewählten Schriftgröße angezeigt.
609
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Einfügen von dynamischem Inhalt in Seiten” on page 627
“Sitzungsvariablen definieren” on page 620
Anwendungsvariablen in ASP und ColdFusion
In ASP und ColdFusion können Anwendungsvariablen verwendet werden, um Informationen zu speichern und
anzuzeigen, die für die Lebensdauer der Anwendung beibehalten werden und von Besucher zu Besucher gelten sollen.
Unter der Lebensdauer einer Anwendung versteht man die Zeitspanne von der ersten Seitenanforderung durch den
ersten Besucher bis zum Beenden des Webservers. (Unter einer Anwendung werden alle Dateien eines virtuellen
Verzeichnisses und seiner Unterverzeichnisse verstanden.)
Da Anwendungsvariablen über die gesamte Lebensdauer der Anwendung beibehalten werden und von Besucher zu
Besucher gültig sind, eignen sie sich hervorragend zum Speichern von Daten, die für alle Besucher gelten (z. B. für
aktuelle Datums- und Uhrzeitangaben). Der Wert der Anwendungsvariablen wird im Code der Anwendung definiert.
ASP-Servervariablen
Sie können die folgenden ASP-Servervariablen als Quellen für dynamischen Inhalt definieren: Request.Cookie,
Request.QueryString, Request.Form, Request.ServerVariables und Request.ClientCertificates.
More Help topics
“Servervariablen definieren” on page 622
ColdFusion-Servervariablen
Sie können die folgenden ColdFusion-Servervariablen definieren:
Client-Variablen verknüpfen Daten mit einem bestimmten Client. Clientvariablen werden verwendet, um den Status
der Anwendung beizubehalten, wenn der Besucher der Site in der Anwendung von einer Seite zur nächsten wechselt.
Der Status kann auch von einer Sitzung zur nächsten gespeichert werden. Unter „Beibehalten des Status“ versteht
man, dass die Informationen von einer Seite (oder einer Sitzung) zur nächsten gespeichert werden. Die Anwendung
„merkt“ sich also den Besucher und seine zuvor getroffene Auswahl.
Cookie-Variablen greifen auf Cookies zu, die vom Browser an den Server übergeben werden.
CGI-Variablen liefern Informationen über den Server, auf dem ColdFusion ausgeführt wird, über den Browser, der
eine Seite anfordert, und über andere Aspekte der Verarbeitungsumgebung.
Servervariablen sind für alle Clients und Anwendungen auf dem Server zugänglich. Sie bleiben erhalten, bis der
Server beendet wird.
Lokale Variablen werden mithilfe der Tags CFSET oder CFPARAM in einer ColdFusion-Seite erstellt.
More Help topics
“Servervariablen definieren” on page 622
610
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Bedienfelder für dynamischen Inhalt
Bedienfeld „Bindungen“
Mit dem Bedienfeld „Bindungen“ können Sie Quellen für dynamischen Inhalt definieren und bearbeiten, dynamische
Inhalte in Seiten einfügen und dynamischem Text Datenformate zuweisen.
Sie können mit diesem Bedienfeld folgende Aufgaben ausführen:
• “Definieren von Quellen für dynamischen Inhalt” on page 611
• “Einfügen von dynamischem Inhalt in Seiten” on page 627
• “Inhaltsquellen bearbeiten oder löschen” on page 626
• “Vordefinierte Datenformate verwenden” on page 641
• “XML-Datenquellen anhängen” on page 548
• “XML-Daten in XSLT-Seiten anzeigen” on page 548
• “URL-Parameter” on page 712
• “Sitzungsvariablen definieren” on page 620
• “Anwendungsvariablen für ASP und ColdFusion definieren” on page 620
• “Servervariablen definieren” on page 622
• “Inhaltsquellen zwischenspeichern” on page 626
• “Datensatzgruppen von einer Seite auf eine andere kopieren” on page 626
• “HTML-Attribute dynamisch gestalten” on page 629
Bedienfeld „Serververhalten“
Mit dem Bedienfeld „Serververhalten“ können Sie einer Seite Dreamweaver-Serververhalten hinzufügen sowie
Serververhalten bearbeiten und erstellen.
Sie können mit diesem Bedienfeld folgende Aufgaben ausführen:
• “Anzeigen von Datenbank-Datensätzen” on page 633
• “Definieren von Quellen für dynamischen Inhalt” on page 611
• “Master- und Detailseiten in einem Durchgang erstellen” on page 663
• “Erstellen von Such- und Ergebnisseiten” on page 665
• “Datensatz-Einfügeseiten erstellen” on page 671
• “Erstellen von Datensatz-Aktualisierungsseiten” on page 675
• “Erstellen von Datensatz-Löschseiten” on page 681
• “Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können” on page 698
• “Erstellen von Registrierungsseiten” on page 693
• “Anmeldeseiten erstellen” on page 696
• “Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können” on page 698
• “Gespeicherte Prozeduren hinzufügen (ColdFusion)” on page 691
• “Dynamischen Inhalt löschen” on page 631
611
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
• “Hinzufügen benutzerdefinierter Serververhalten” on page 644
Bedienfeld „Datenbanken“
Mit dem Bedienfeld „Datenbanken“ können Sie Datenbankverbindungen erstellen, Datenbanken überprüfen und
datenbankbezogenen Code in Ihre Seiten einfügen.
Mit diesem Bedienfeld können Sie Ihre Datenbank anzeigen und eine Verbindung zur Datenbank herstellen:
• “Datenbanken in Dreamweaver anzeigen” on page 600
• “Datenbankverbindungen für ColdFusion-Entwickler” on page 580
• “Datenbankverbindungen für ASP-Entwickler” on page 582
• “Datenbankverbindungen für PHP-Entwickler” on page 590
Bedienfeld „Komponenten“
Mit dem Bedienfeld „Komponenten“ können Sie Komponenten erstellen und überprüfen sowie Komponentencode
in Ihre Seiten einfügen.
Note: Das Bedienfeld funktioniert nicht in der Entwurfsansicht.
Sie können mit diesem Bedienfeld folgende Aufgaben ausführen:
❖ “ColdFusion-Komponenten verwenden” on page 702
Definieren von Quellen für dynamischen Inhalt
Datensatzgruppen ohne manuelle SQL-Eingabe definieren
Sie können eine Datensatzgruppe ohne manuelle Eingabe von SQL-Anweisungen erstellen.
1 Öffnen Sie im Dokumentfenster die Seite, auf der die Datensatzgruppe verwendet werden soll.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie im Bedienfeld „Bindungen“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie
„Datensatzgruppe (Abfrage)“ im Popupmenü aus.
Das einfache Dialogfeld „Datensatzgruppe“ wird angezeigt. Wenn Sie eine ColdFusion-Site erstellen, sieht das
Dialogfeld „Datensatzgruppe“ etwas anders aus. (Wenn stattdessen das erweiterte Dialogfeld „Datensatzgruppe“
angezeigt wird, klicken Sie auf die Schaltfläche „Einfach“, um zum einfachen Dialogfeld umzuschalten.)
4 Füllen Sie das Dialogfeld „Datensatzgruppe“ für Ihren Dokumenttyp aus.
Anweisungen hierzu finden Sie in folgenden Themen:
5 Klicken Sie auf die Schaltfläche „Testen“, um die Abfrage auszuführen und sicherzustellen, dass damit die
gewünschten Informationen abgerufen werden.
Wenn Sie einen Filter definiert haben, der von Benutzern eingegebene Parameter verwendet, geben Sie in das Feld
„Testwert“ einen Wert ein und klicken Sie auf „OK“. Wenn eine Instanz der Datensatzgruppe erfolgreich erstellt
wurde, wird eine Tabelle mit den aus der Datensatzgruppe extrahierten Daten angezeigt.
6 Klicken Sie auf „OK“, um die Datensatzgruppe der Liste der verfügbaren Inhaltsquellen im Bedienfeld
„Bindungen“ hinzuzufügen.
612
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Optionen des einfachen Dialogfelds „Datensatzgruppe“ (PHP, ASP)
1 Geben Sie im Feld „Name“ einen Namen für die Datensatzgruppe ein.
Üblicherweise werden Namen von Datensatzgruppen mit dem Präfix rs versehen, um sie von anderen
Objektnamen im Code zu unterscheiden, wie z. B.
rsPressReleases.
Namen von Datensatzgruppen dürfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen.
Sonderzeichen und Leerzeichen sind nicht zulässig.
2 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung aus.
Wird in der Liste keine Verbindung aufgeführt, klicken Sie auf „Definieren“, um eine Verbindung zu erstellen.
3 Wählen Sie im Popupmenü „Tabelle“ die Datenbanktabelle aus, die die Daten für die Datensatzgruppe liefern soll.
Im Popupmenü werden alle Tabellen der angegebenen Datenbank angezeigt.
4 Um nur einige Spalten der Tabelle in die Datensatzgruppe aufzunehmen, klicken Sie auf „Ausgewählt“. Wählen Sie
dann die gewünschten Spalten aus, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh)
auf die jeweiligen Listeneinträge klicken.
5 Wenn Sie die Anzahl der aus der Tabelle zurückgegebenen Datensätze weiter einschränken möchten, nehmen Sie
im Bereich „Filter“ die folgenden Einstellungen vor:
• Wählen Sie im ersten Popupmenü eine Spalte in der Datenbanktabelle aus, die mit einem von Ihnen definierten
Testwert verglichen werden soll.
• Wählen Sie im zweiten Popupmenü einen bedingten Ausdruck aus, anhand dessen der ausgewählte Wert in
jedem Datensatz mit dem Testwert verglichen werden soll.
• Wählen Sie im dritten Popupmenü die Option „Eingegebener Wert“.
• Geben Sie den Testwert in das Feld ein.
Wenn der festgelegte Wert in einem Datensatz Ihre Filterbedingung erfüllt, wird dieser Datensatz in die
Datensatzgruppe aufgenommen.
6 (Optional) Wenn Sie die Datensätze sortieren möchten, wählen Sie eine Spalte aus, auf der die Sortierung basieren
soll, und geben Sie dann an, ob die Datensätze in aufsteigender (1, 2, 3... bzw. A, B, C...) oder in absteigender
Reihenfolge sortiert werden sollen.
7 Klicken Sie auf „Testen“, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datenquelle zu
erstellen. Klicken Sie dann auf „OK“, um die Datenquelle zu schließen.
Es wird eine Tabelle angezeigt, in der die zurückgegebenen Daten enthalten sind. Jede Zeile enthält einen Datensatz
und jede Spalte entspricht einem Feld in diesem Datensatz.
8 Klicken Sie auf „OK“. Die neu definierte Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt.
Optionen des einfachen Dialogfelds „Datensatzgruppe“ (ColdFusion)
Dieses Dialogfeld dient zum Definieren einer Datensatzgruppe als Quelle dynamischer Inhalte für ColdFusion-
Dokumente, ohne dass eine manuelle Eingabe von SQL-Anweisungen erforderlich ist.
1 Geben Sie im Feld „Name“ einen Namen für die Datensatzgruppe ein.
Üblicherweise werden Namen von Datensatzgruppen mit dem Präfix rs versehen, um sie von anderen
Objektnamen im Code zu unterscheiden. Beispiel:
rsPressReleases
Namen von Datensatzgruppen dürfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen.
Sonderzeichen und Leerzeichen sind nicht zulässig.
613
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
2 Wenn Sie eine Datensatzgruppe für eine ColdFusion-Komponente definieren (d. h. wenn in Dreamweaver gerade
eine CFC-Datei geöffnet ist), wählen Sie eine vorhandene CFC-Funktion im Popupmenü „Funktion“ aus oder
klicken Sie auf „Neue Funktion“, um eine neue Funktion zu erstellen.
Note: Das Popupmenü „Funktion“ ist nur verfügbar, wenn das aktuelle Dokument eine CFC-Datei ist und Sie Zugriff
auf einen Computer haben, auf dem ColdFusion MX 7 oder eine aktuellere Version ausgeführt wird.
Die Datensatzgruppe wird in der Funktion definiert.
3 Wählen Sie im Popupmenü „Datenquelle“ eine Datenquelle aus.
Wenn im Popupmenü keine Datenquelle aufgeführt wird, müssen Sie eine ColdFusion-Datenquelle erstellen.
4 Geben Sie, falls erforderlich, in die Felder „Benutzername“ und „Kennwort“ den Benutzernamen und das
Kennwort für den ColdFusion-Anwendungsserver ein.
Für den Zugriff auf Datenquellen ist in ColdFusion unter Umständen die Eingabe eines Benutzernamens und eines
Kennworts erforderlich. Wenn Sie nicht über diese Zugangsdaten verfügen, wenden Sie sich an den ColdFusion-
Administrator Ihrer Firma.
5 Wählen Sie im Popupmenü „Tabelle“ die Datenbanktabelle aus, die die Daten für die Datensatzgruppe liefern soll.
Im Popupmenü „Tabelle“ werden alle Tabellen der angegebenen Datenbank angezeigt.
6 Um nur einige Spalten der Tabelle in die Datensatzgruppe aufzunehmen, klicken Sie auf „Ausgewählt“. Wählen Sie
dann die gewünschten Spalten aus, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh)
auf die jeweiligen Listeneinträge klicken.
7 Wenn Sie die Anzahl der aus der Tabelle zurückgegebenen Datensätze weiter einschränken möchten, nehmen Sie
im Bereich „Filter“ die folgenden Einstellungen vor:
• Wählen Sie im ersten Popupmenü eine Spalte in der Datenbanktabelle aus, die mit einem von Ihnen definierten
Testwert verglichen werden soll.
• Wählen Sie im zweiten Popupmenü einen bedingten Ausdruck aus, anhand dessen der ausgewählte Wert in
jedem Datensatz mit dem Testwert verglichen werden soll.
• Wählen Sie im dritten Popupmenü die Option „Eingegebener Wert“.
• Geben Sie den Testwert in das Feld ein.
Wenn der festgelegte Wert in einem Datensatz Ihre Filterbedingung erfüllt, wird dieser Datensatz in die
Datensatzgruppe aufgenommen.
8 (Optional) Wenn Sie die Datensätze sortieren möchten, wählen Sie eine Spalte aus, auf der die Sortierung basieren
soll, und geben Sie dann an, ob die Datensätze in aufsteigender (1, 2, 3... bzw. A, B, C...) oder in absteigender
Reihenfolge sortiert werden sollen.
9 Klicken Sie auf „Testen“, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datenquelle zu
erstellen.
Es wird eine Tabelle angezeigt, in der die zurückgegebenen Daten enthalten sind. Jede Zeile enthält einen Datensatz
und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf „OK“, um die Testdatensatzgruppe zu
schließen.
10 Klicken Sie auf „OK“. Die neu definierte ColdFusion-Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt.
614
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren
Sie können im erweiterten Dialogfeld „Datensatzgruppe“ eigene SQL-Anweisungen eingeben oder SQL-Anweisungen
mithilfe der Strukturansicht „Datenbankelemente“ erstellen.
1 Öffnen Sie im Dokumentfenster die Seite, auf der die Datensatzgruppe verwendet werden soll.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie im Bedienfeld „Bindungen“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im
Popupmenü die „Datensatzgruppe (Abfrage)“ aus.
Das erweiterte Dialogfeld „Datensatzgruppe“ wird eingeblendet. Wenn Sie eine ColdFusion-Site erstellen, sieht das
Dialogfeld „Datensatzgruppe“ etwas anders aus. (Wird stattdessen das einfache Dialogfeld „Datensatzgruppe“
angezeigt, können Sie zum erweiterten Dialogfeld wechseln, indem Sie auf die Schaltfläche „Erweitert“ klicken.)
4 Nehmen Sie im erweiterten Dialogfeld „Datensatzgruppe“ die gewünschten Einstellungen vor.
Anweisungen hierzu finden Sie in folgenden Themen:
5 Klicken Sie auf die Schaltfläche „Testen“, um die Abfrage auszuführen und sicherzustellen, dass damit die
gewünschten Informationen abgerufen werden.
Wenn Sie einen Filter definiert haben, der von Benutzern eingegebene Parameter verwendet, wird mit der Schaltfläche
„Testen“ das Dialogfeld „Testwert“ eingeblendet. Geben Sie einen Wert in das Feld „Testwert“ ein und klicken Sie auf
„OK“. Wenn eine Instanz der Datensatzgruppe erfolgreich erstellt wurde, wird eine Tabelle mit den aus der
Datensatzgruppe extrahierten Daten angezeigt.
6 Klicken Sie auf „OK“, um die Datensatzgruppe der Liste der verfügbaren Inhaltsquellen im Bedienfeld
„Bindungen“ hinzuzufügen.
More Help topics
“SQL-Abfragen mithilfe der Strukturansicht „Datenbankelemente“ erstellen” on page 617
“Datenbankverbindungen für ASP-Entwickler” on page 582
“Datenbankverbindungen für PHP-Entwickler” on page 590
“Definieren von Quellen für dynamischen Inhalt” on page 611
“Gespeicherte Prozeduren hinzufügen (ColdFusion)” on page 691
Einführung in SQL
Optionen des erweiterten Dialogfelds „Datensatzgruppe“ (PHP, ASP)
Dieses Dialogfeld dient zum Definieren einer Datensatzgruppe als Quelle für dynamischen Inhalt durch manuelle
Eingabe einer benutzerdefinierten SQL-Anweisung oder durch Erstellen einer SQL-Anweisung mithilfe der
Strukturansicht „Datenbankelemente“.
1 Geben Sie im Feld „Name“ einen Namen für die Datensatzgruppe ein.
Üblicherweise werden Namen von Datensatzgruppen mit dem Präfix rs versehen, um sie von anderen Objektnamen
im Code zu unterscheiden. Beispiel:
rsPressRelease
Namen von Datensatzgruppen dürfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen
und Leerzeichen sind nicht zulässig.
2 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung aus.
615
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
3 Geben Sie eine SQL-Anweisung in den SQL-Textbereich ein oder erstellen Sie mithilfe der Strukturansicht
„Datenbankelemente“ unten im Dialogfeld eine SQL-Anweisung anhand der ausgewählten Datensatzgruppe.
Wenn Sie die SQL-Anweisung mithilfe der Strukturansicht „Datenbankelemente“ erstellen möchten, gehen Sie
folgendermaßen vor:
• Vergewissern Sie sich, dass der SQL-Textbereich leer ist.
• Erweitern Sie die Strukturansicht, bis Sie das gewünschte Datenbankobjekt finden, z. B. eine bestimmte
Tabellenspalte oder eine gespeicherte Prozedur in der Datenbank.
• Wählen Sie das Datenbankobjekt aus und klicken Sie auf eine der Schaltflächen rechts neben der Struktur.
Wenn Sie beispielsweise eine Tabellenspalte auswählen, stehen die Schaltflächen „SELECT“, „WHERE“ und „ORDER
BY“ zur Verfügung. Klicken Sie auf eine der Schaltflächen, um Ihrer SQL-Anweisung den entsprechenden Ausdruck
hinzuzufügen.
Sie können auch eine vordefinierte SQL-Anweisung in einer gespeicherten Prozedur verwenden, indem Sie die
gespeicherte Prozedur in der Strukturansicht „Datenbankelemente“ auswählen und auf die Schaltfläche „Prozedur“
klicken. Die Bereiche „SQL“ und „Variablen“ werden automatisch von Dreamweaver ausgefüllt.
4 Wenn die SQL-Anweisung Variablen enthält, definieren Sie deren Werte im Bereich „Variablen“, indem Sie auf die
Schaltfläche mit dem Plussymbol (+) klicken. Geben Sie dann jeweils den Namen der Variable, den Typ (Ganzzahl,
Text, Datum oder Gleitkommazahl), den Standardwert (den Wert der Variable, wenn kein Laufzeitwert
zurückgegeben wird) und den Laufzeitwert ein.
Note: Bei Verwendung von Variablen in einer SQL-Anweisung in PHP fügt Dreamweaver dem Variablennamen
automatisch ein führendes Dollarzeichen hinzu. Sie selbst dürfen also kein Dollarzeichen angeben (z. B. „colname“ statt
„$colname“).
Wenn die SQL-Anweisung Variablen enthält, muss die Spalte „Standardwert“ des Feldes „Variablen“ gültige
Testwerte enthalten.
Der Laufzeitwert ist normalerweise ein URL- oder Formularparameter, der von einem Benutzer in ein HTML-
Formularfeld eingegeben wird.
URL-Parameter in der Spalte „Laufzeitwert“:
Formularparameter in der Spalte „Laufzeitwert“:
5 Klicken Sie auf „Testen“, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen.
Wenn die SQL-Anweisung Variablen enthält, vergewissern Sie sich zuerst, dass in der Spalte „Standardwert“ des
Feldes „Variablen“ gültige Testwerte angezeigt werden. Klicken Sie dann auf „Testen“.
Servermodell Laufzeitwertausdrücke für URL-Parameter
ASP Request.QueryString("formFieldName")
PHP $_GET['formFieldName']
Servermodell Laufzeitwertausdrücke für Formularparameter
ASP Request.Form("formFieldName")
PHP $_POST['formFieldName']
616
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Kann dies erfolgreich ausgeführt werden, wird eine Tabelle mit den Daten Ihrer Datensatzgruppe angezeigt. Jede Zeile
enthält einen Datensatz und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf „OK“, um die
Datensatzgruppe zu löschen.
6 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf „OK“.
Optionen des erweiterten Dialogfelds „Datensatzgruppe“ (ColdFusion)
Im erweiterten Dialogfeld „Datensatzgruppe“ können Sie benutzerdefinierte SQL-Abfragen eingeben oder über die
Strukturansicht „Datenbankelemente“ durch ein paar Mausklicks eigene SQL-Abfragen erstellen.
1 Geben Sie im Feld „Name“ einen Namen für die Datensatzgruppe ein.
Üblicherweise werden Namen von Datensatzgruppen mit dem Präfix rs versehen, um sie von anderen Objektnamen
im Code zu unterscheiden. Beispiel:
rsPressReleases
Namen von Datensatzgruppen dürfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen
und Leerzeichen sind nicht zulässig.
Wenn Sie eine Datensatzgruppe für eine ColdFusion-Komponente definieren (d. h. wenn in Dreamweaver gerade eine
CFC-Datei geöffnet ist), wählen Sie eine vorhandene CFC-Funktion im Popupmenü „Funktion“ aus oder klicken Sie
auf „Neue Funktion“, um eine neue Funktion zu erstellen.
Note: Das Popupmenü „Funktion“ ist nur verfügbar, wenn das aktuelle Dokument eine CFC-Datei ist und Sie Zugriff
auf einen Computer haben, auf dem ColdFusion MX 7 oder eine aktuellere Version ausgeführt wird.
Die Datensatzgruppe wird in der Funktion definiert.
2 Wählen Sie im Popupmenü „Datenquelle“ eine Datenquelle aus.
Wenn im Popupmenü keine Datenquelle aufgeführt wird, müssen Sie zunächst eine ColdFusion-Datenquelle
erstellen.
3 Geben Sie, falls erforderlich, in die Felder „Benutzername“ und „Kennwort“ den Benutzernamen und das
Kennwort für den ColdFusion-Anwendungsserver ein.
Für den Zugriff auf Datenquellen ist in ColdFusion unter Umständen die Eingabe eines Benutzernamens und eines
Kennworts erforderlich. Wenn Sie nicht über diese Zugangsdaten verfügen, wenden Sie sich an den ColdFusion-
Administrator Ihrer Firma.
4 Geben Sie eine SQL-Anweisung in den SQL-Textbereich ein oder erstellen Sie mithilfe der Strukturansicht
„Datenbankelemente“ unten im Dialogfeld eine SQL-Anweisung anhand der ausgewählten Datensatzgruppe.
5 (Optional) Wenn Sie die SQL-Anweisung mithilfe der Strukturansicht „Datenbankelemente“ erstellen möchten,
gehen Sie folgendermaßen vor:
• Vergewissern Sie sich, dass der SQL-Textbereich leer ist.
• Erweitern Sie anschließend die Struktur der Datenbankelemente, bis Sie zu dem gewünschten Datenbankobjekt
gelangen, z. B. zu einer Spalte in einer Tabelle.
• Wählen Sie das Datenbankobjekt aus und klicken Sie auf eine der Schaltflächen rechts neben der Struktur.
Wenn Sie beispielsweise eine Tabellenspalte auswählen, stehen die Schaltflächen „Select“, „Where“ und „Order by“
zur Verfügung. Klicken Sie auf eine der Schaltflächen, um Ihrer SQL-Anweisung den entsprechenden Ausdruck
hinzuzufügen.
Wenn die SQL-Anweisung Parameter enthält, definieren Sie die entsprechenden Werte im Bereich „Parameter“.
Klicken Sie dazu auf die Schaltfläche mit dem Pluszeichen (+) und geben Sie den Namen sowie den Standardwert des
Parameters (den Wert, den der Parameter annehmen soll, wenn kein Laufzeitwert zurückgegeben wird) ein.
617
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Wenn die SQL-Anweisung Parameter enthält, muss die Spalte „Standardwert“ des Feldes „Parameter“ gültige
Testwerte enthalten.
Mithilfe der „Seitenparameter“ können Sie in Ihren SQL-Anweisungen Standardwerte für Laufzeitwert-Verweise
vorgeben. So wird zum Beispiel bei der folgenden SQL-Anweisung ein Mitarbeiterdatensatz anhand der Kennnummer
des Mitarbeiters ausgewählt. Indem Sie diesem Parameter einen Standardwert zuweisen, stellen Sie sicher, dass immer
ein Laufzeitwert zurückgegeben wird. In diesem Beispiel verweist
formFieldName auf ein Formularfeld, in dem der
Benutzer eine Mitarbeiter-Kennnummer eingibt.
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))
Das Dialogfeld „Seitenparameter hinzufügen“ würde dann etwa folgendes Name/Wert-Paar enthalten:
Der Laufzeitwert ist normalerweise ein URL- oder Formularparameter, der von einem Benutzer in ein HTML-
Formularfeld eingegeben wird.
6 Klicken Sie auf „Testen“, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen.
Wenn die SQL-Anweisung Laufzeitverweise enthält, vergewissern Sie sich zuerst, dass in der Spalte „Standardwert“
des Feldes „Seitenparameter“ gültige Testwerte angezeigt werden. Klicken Sie dann auf „Testen“.
Kann dies erfolgreich ausgeführt werden, wird eine Tabelle mit den Daten Ihrer Datensatzgruppe angezeigt. Jede Zeile
enthält einen Datensatz und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf „OK“, um die
Datensatzgruppe zu löschen.
7 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf „OK“.
Parameter in einer SQL-Anweisung definieren (ColdFusion)
In diesem Dialogfeld können Sie die in einer SQL-Anweisung verwendeten Parameter definieren. Der Standardwert
ist der Wert, der für den Parameter verwendet wird, wenn kein Laufzeitwert zurückgegeben wird.
1 Wählen Sie im Popupmenü „Name“ einen Parameternamen aus.
2 Geben Sie im Feld „Standardparameter“ einen Standardwert für den Parameter ein und klicken Sie auf „OK“.
Parameter in einem SQL-Statement definieren (PHP)
In diesem Dialogfeld können Sie die in einer SQL-Anweisung verwendeten Parameter definieren. Der Standardwert
ist der Wert, der für den Parameter verwendet wird, wenn kein Laufzeitwert zurückgegeben wird.
1 Geben Sie im Feld „Name“ einen Namen für den Parameter ein.
2 Geben Sie im Feld „Standardparameter“ einen Standardwert für den Parameter ein.
3 Geben Sie im Feld „Laufzeitwert“ einen Laufzeitwert für den Parameter ein und klicken Sie auf „OK“.
SQL-Abfragen mithilfe der Strukturansicht „Datenbankelemente“ erstellen
Statt SQL-Anweisungen manuell im SQL-Feld einzugeben, können Sie auch in der Strukturansicht
„Datenbankelemente“ mit ein paar Mausklicks komplexe SQL-Abfragen erstellen. In der Strukturansicht
„Datenbankelemente“ können Sie Datenbankobjekte auswählen und mithilfe der SQL-Ausdrücke SELECT, WHERE
und ORDER BY entsprechend verknüpfen. Nachdem Sie eine SQL-Abfrage erstellt haben, können Sie alle Variablen
im Bereich „Variablen“ des Dialogfelds definieren.
Spry-QuickInfo Standardwerte
Formularfeldname
0001
618
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Anhand der folgenden beiden Beispiele wird erläutert, wie Sie SQL-Anweisungen über die Strukturansicht
„Datenbankelemente“ des erweiterten Dialogfelds „Datensatzgruppe“ erstellen.
Beispiel: Tabellen auswählen
In diesem Beispiel wird der gesamte Inhalt der Tabelle „Employees“ (Mitarbeiter) ausgewählt. Die SQL-Anweisung
zur Definition der Abfrage lautet:
SELECT * FROM Employees
Gehen Sie wie im Folgenden beschrieben vor, um diese Abfrage zu erstellen.
1 Erweitern Sie den Zweig „Tabellen“, sodass alle Tabellen der ausgewählten Datenbank angezeigt werden.
2 Wählen Sie die Tabelle „Employees“ aus.
3 Klicken Sie auf die Schaltfläche „Select“.
4 Klicken Sie auf „OK“, um die Datensatzgruppe dem Bedienfeld „Bindungen“ hinzuzufügen.
Beispiel: Bestimmte Zeilen aus Tabellen auswählen und Ergebnisse ordnen
Im folgenden Beispiel werden zwei Zeilen in der Tabelle „Employees“ (Mitarbeiter) ausgewählt. Anschließend wird
der Tätigkeitstyp anhand einer Variablen ausgewählt, die Sie selbst definieren müssen. Die Ergebnisse werden dann
nach Mitarbeiternamen sortiert.
SELECT emplNo, emplName
FROM Employees
WHERE emplJob = 'varJob'
ORDER BY emplName
1 Erweitern Sie den Zweig „Tabellen“, sodass alle Tabellen der ausgewählten Datenbank angezeigt werden. Erweitern
Sie dann die Tabelle
Employees, sodass die einzelnen Tabellenzeilen zu sehen sind.
2 Stellen Sie die SQL-Anweisung folgendermaßen zusammen:
• Wählen Sie emplNo und klicken Sie auf „SELECT“.
• Wählen Sie emplName und klicken Sie auf „SELECT“.
• Wählen Sie emplJob und klicken Sie auf „WHERE“.
• Wählen Sie emplName und klicken Sie auf „ORDER BY“.
3 Setzen Sie die Einfügemarke im SQL-Textbereich hinter WHERE emplJob und geben Sie ='varJob' ein
(einschließlich Gleichheitszeichen).
4 Definieren Sie die Variable 'varJob', indem Sie im Bereich „Variablen“ auf die Schaltfläche mit dem
Pluszeichen (+) klicken und in die Spalten „Name“, „Standardwert“ und „Laufzeitwert“ folgende Werte eingeben:
varJob, CLERK, Request("job").
5 Klicken Sie auf „OK“, um die Datensatzgruppe dem Bedienfeld „Bindungen“ hinzuzufügen.
URL-Parameter definieren
URL-Parameter dienen zum Speichern der abgerufenen Informationen, die von Benutzern eingegeben wurden. Bevor
Sie beginnen, müssen Sie zunächst einen Formular- oder URL-Parameter an den Server übergeben. Nachdem Sie die
URL-Variable definiert haben, können Sie ihren Wert in der aktuell ausgewählten Seite verwenden.
1 Öffnen Sie im Dokumentfenster die Seite, in der die Variable verwendet werden soll.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
619
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
3 Klicken Sie im Bedienfeld „Bindungen“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im
Popupmenü einen der folgenden Einträge aus:
4 Geben Sie im Dialogfeld „URL-Variable“ den Namen der URL-Variablen in das Feld ein und klicken Sie auf „OK“.
Der Name der URL-Variablen entspricht normalerweise dem Namen des HTML-Formularfelds oder -Objekts, das
zum Einlesen des Werts verwendet wird.
5 Die URL-Variable wird im Bedienfeld „Bindungen“ angezeigt.
More Help topics
“URL- und Formularparameter” on page 605
“Einfügen von dynamischem Inhalt in Seiten” on page 627
“URL-Parameter” on page 712
“ColdFusion-Servervariablen” on page 609
Formularparameter definieren
Formularparameter dienen zum Speichern von abgerufenen Informationen, die in der HTTP-Anforderung für eine
Webseite enthalten sind. Wenn Sie ein Formular erstellen, das die Methode
POST verwendet, werden die vom
Formular übermittelten Daten an den Server übergeben. Bevor Sie beginnen, müssen Sie zunächst einen
Formularparameter an den Server übergeben. Nachdem Sie den Formularparameter als Inhaltsquelle definiert haben,
können Sie seinen Wert in Ihrer Seite verwenden.
1 Öffnen Sie im Dokumentfenster die Seite, in der die Variable verwendet werden soll.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie im Bedienfeld „Bindungen“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im
Popupmenü einen der folgenden Einträge aus:
4 Geben Sie im Dialogfeld „Formularvariable“ den Namen der Formularvariablen ein und klicken Sie auf „OK“. Der
Name der Formularvariablen entspricht normalerweise dem Namen des HTML-Formularfelds oder -Objekts, das
zum Einlesen des Wertes verwendet wird.
Dokumenttypen Menübefehl im Bedienfeld „Bindungen“ für URL-Variable
ASP Anforderungsvariable > Request.QueryString
ColdFusion URL-Variable
PHP URL-Variable
Dokumenttypen Menübefehl im Bedienfeld „Bindungen“ für Formularvariable
ASP Anforderungsvariable > Request.Form
ColdFusion Formularvariable
PHP Formularvariable
620
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Der Formularparameter wird im Bedienfeld „Bindungen“ angezeigt.
More Help topics
“Quellen für dynamischen Inhalt” on page 604
“URL- und Formularparameter” on page 605
“Servervariablen definieren” on page 622
Sitzungsvariablen definieren
Mit Sitzungsvariablen können Sie Daten während der gesamten Sitzung (d. h. während der gesamten Sitzung eines
Besuchers Ihrer Site) speichern und anzeigen. Der Server erstellt für jeden Besucher ein eigenes Sitzungsobjekt, das
entweder über einen definierten Zeitraum oder bis zum expliziten Ablauf des Objekts beibehalten wird.
Bevor Sie Sitzungsvariablen für eine Seite definieren, müssen Sie sie zunächst im Quellcode erstellen. Nachdem Sie im
Quellcode der Webanwendung eine Sitzungsvariable erstellt haben, können Sie ihren Wert in Dreamweaver abrufen
und in einer Webseite verwenden.
1 Erstellen Sie eine Sitzungsvariable im Quellcode und weisen Sie ihr einen Wert zu.
Im folgenden ColdFusion-Beispiel wird eine Sitzung namens
username instanziiert und anschließend wird ihr der
Wert
Cornelius zugewiesen:
<CFSET session.username = Cornelius>
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Popupmenü den Eintrag
„Sitzungsvariable“ aus.
4 Geben Sie den Namen der Variablen ein, den Sie im Quellcode der Anwendung definiert haben. Klicken Sie dann
auf „OK“.
More Help topics
“Verwenden von Formularen zum Sammeln von Benutzerinformationen” on page 710
“Funktionsweise von Sitzungsvariablen” on page 606
“Informationen mit Sitzungsvariablen sammeln, speichern und abrufen” on page 607
Anwendungsvariablen für ASP und ColdFusion definieren
In ASP und ColdFusion können Anwendungsvariablen verwendet werden, um Informationen zu speichern und
anzuzeigen, die für die Lebensdauer der Anwendung beibehalten werden und von Besucher zu Besucher gelten sollen.
Nachdem Sie die Anwendungsvariable definiert haben, können Sie ihren Wert in einer Seite verwenden.
621
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Note: In PHP werden keine Anwendungsvariablenobjekte verwendet.
1 Öffnen Sie ein dynamisches Dokument im Dokumentfenster.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Popupmenü den Eintrag
„Anwendungsvariable“ aus.
4 Geben Sie den Namen der Variablen so ein, wie er im Quellcode der Anwendung definiert wurde. Klicken Sie dann
auf „OK“.
Die Anwendungsvariable wird im Bedienfeld „Bindungen“ unter dem Anwendungssymbol angezeigt.
More Help topics
“Dynamischen Inhalt hinzufügen” on page 627
“Servervariablen definieren” on page 622
Variablen als Datenquelle für eine ColdFusion-Datensatzgruppe verwenden
Wenn Sie im Bedienfeld „Bindungen“ eine Datensatzgruppe für eine Seite definieren, wird von Dreamweaver der
Name der ColdFusion-Datenquelle in das
cfquery-Tag auf der Seite eingetragen. Wenn Sie mehr Flexibilität
wünschen, können Sie den Namen einer Datenquelle auch in einer Variablen speichern und die Variable im Tag
cfquery einsetzen. In Dreamweaver können Sie eine solche Variable anhand einer visuellen Methode in den
Datensatzgruppen definieren.
1 Stellen Sie sicher, dass im Dokumentfenster eine ColdFusion-Seite aktiv ist.
2 Klicken Sie im Bedienfeld „Bindungen“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im
Popupmenü die Option „DSN-Variable“.
Das Dialogfeld „DSN-Variable“ wird eingeblendet.
3 Definieren Sie eine Variable und klicken Sie auf „OK“.
4 Wählen Sie beim Definieren der Datensatzgruppe die Variable als Datenquelle der Datensatzgruppe aus.
Im Dialogfeld „Datensatzgruppe“ wird die Variable zusammen mit den ColdFusion-Datenquellen auf dem Server im
Popupmenü „Datenquelle“ angezeigt.
5 Nehmen Sie im Dialogfeld „Datensatzgruppe“ die gewünschten Einstellungen vor und klicken Sie auf „OK“.
6 Initialisieren Sie die Variable.
622
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Die Variable wird nicht von Dreamweaver initialisiert, d. h., Sie haben die Möglichkeit, die Variable auf die
gewünschte Weise und an der gewünschten Stelle zu initialisieren. Sie können die Variable im Seitencode (vor dem
Tag
cfquery), in einer Include-Datei oder in einer anderen Datei als Sitzungs- oder Anwendungsvariable
initialisieren.
Servervariablen definieren
Servervariablen können als Quellen für dynamischen Inhalt zur Verwendung innerhalb einer Webanwendung
definiert werden. Servervariablen unterscheiden sich je nach Dokumenttyp. Es wird zwischen Formularvariablen,
URL-Variablen, Sitzungsvariablen und Anwendungsvariablen unterschieden.
Zugriff auf Servervariablen haben alle Clients, die auf den Server zugreifen, sowie alle Anwendungen, die auf dem
Server ausgeführt werden. Die Variablen bleiben erhalten, bis der Server beendet wird.
More Help topics
“Einfügen von dynamischem Inhalt in Seiten” on page 627
“URL-Parameter” on page 712
“Parameter von HTML-Formularen” on page 710
“ColdFusion-Servervariablen” on page 609
ColdFusion-Servervariablen definieren
1 Öffnen Sie das Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“). Geben Sie im Dialogfeld „Servervariable“ den
Namen der Servervariablen ein und klicken Sie auf „OK“.
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Popupmenü die Servervariable aus.
3 Geben Sie den Namen der Variablen ein und klicken Sie auf „OK“. Die ColdFusion-Servervariable wird im
Bedienfeld „Bindungen“ angezeigt.
In der folgenden Tabelle sind die integrierten ColdFusion-Servervariablen aufgeführt:
Lokale ColdFusion-Variablen definieren
Bei lokalen Variablen handelt es sich um Variablen, die mit dem Tag CFSET oder CFPARAM in einer ColdFusion-Seite
erstellt werden. Die definierte lokale Variable wird im Bedienfeld „Bindungen“ angezeigt.
❖ Geben Sie im Dialogfeld „Lokale Variable“ den Namen der lokalen Variablen ein und klicken Sie auf „OK“.
Variable Beschreibung
Server.ColdFusion.ProductName ColdFusion-Produktname.
Server.ColdFusion.ProductVersion ColdFusion-Versionsnummer.
Server.ColdFusion.ProductLevel ColdFusion-Edition (Enterprise, Professional).
Server.ColdFusion.SerialNumber Seriennummer der aktuell installierten Version von ColdFusion.
Server.OS.Name Name des Betriebssystems auf dem Server (Windows NT, Windows 2000, Linux).
Server.OS.AdditionalInformation Zusatzinformationen über das installierte Betriebssystem (Service-Packs, Updates).
Server.OS.Version Version des installierten Betriebssystems.
Server.OS.BuildNumber Build-Nummer des installierten Betriebssystems.
623
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
ASP-Servervariablen definieren
Sie können die folgenden ASP-Servervariablen als Quellen für dynamischen Inhalt definieren: Request.Cookie,
Request.QueryString, Request.Form, Request.ServerVariables und Request.ClientCertificates.
1 Öffnen Sie das Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“).
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Popupmenü den Eintrag
„Anforderungsvariable“ aus.
3 Wählen Sie im Dialogfeld „Anforderungsvariable“ eine der folgenden Anforderungssammlungen im Popupmenü
„Typ“ aus:
Die QueryString-Sammlung ruft Informationen ab, die an die URL der übertragenden Seite angehängt wurden. Dies
ist beispielsweise der Fall, wenn die Seite ein HTML-Formular enthält, auf dem die Methode
GET verwendet wird. Die
Abfragezeichenfolge besteht aus einem oder mehreren Name/Wert-Paaren (beispielsweise last=Smith,
first=Winston), die mit einem Fragezeichen an die URL angehängt sind (?). Wenn die Abfragezeichenfolge mehrere
Name/Wert-Paare hat, werden diese mit dem Und-Zeichen (
&) verknüpft.
Die Formular-Sammlung ruft Formularinformationen aus dem Hauptteil einer HTTP-Anforderung ab, die von einem
HTML-Formular mit der Methode
POST gesendet wird.
Die ServerVariables-Sammlung ruft die Werte von vordefinierten Umgebungsvariablen ab. Für die Sammlung stehen
zahlreiche Variablen zur Verfügung, z. B.
CONTENT_LENGTH (Länge des Inhalts, der an die HTTP-Anforderungen
übertragen wird: hiermit kann überprüft werden, ob das Formular leer ist) und
HTTP_USER_AGENT (Informationen
über den Browser des Besuchers).
Mit
Request.ServerVariables("HTTP_USER_AGENT") werden beispielsweise Informationen über den
verwendeten Browser abgerufen. Das Ergebnis
Mozilla/4.07 [en] (WinNT; I) bedeutet beispielsweise, dass
Netscape Navigator 4.07 verwendet wird.
Eine vollständige Liste der ASP-Server-Umgebungsvariablen finden Sie in der Online-Dokumentation, die zusammen
mit dem Microsoft Personal Web Server (PWS) oder Internet Information Server (IIS) installiert wurde.
Die Cookies-Sammlung ruft die Werte der Cookies ab, die in einer HTTP-Anforderung übertragen wurden.
Angenommen, Ihre Seite liest ein Cookie namens „readMe“ im System des Benutzers. Auf dem Server werden die
Werte des Cookies in der Variablen
Request.Cookies("readMe") gespeichert.
Die ClientCertificate-Sammlung ruft die Zertifizierungsfelder aus der vom Browser übertragenen HTTP-Anforderung
ab. Die Zertifizierungsfelder sind nach dem X.509-Standard definiert.
4 Geben Sie an, auf welche Variable der Sammlung Sie zugreifen möchten. Klicken Sie dann auf „OK“.
Wenn Sie beispielsweise auf die Informationen in der Variable
Request.ServerVariables("HTTP_USER_AGENT")
zugreifen möchten, geben Sie das Argument
HTTP_USER_AGENT ein. Wenn Sie auf die Daten in der Variablen
Request.Form("lastname") zugreifen möchten, geben Sie das Argument lastname ein.
Die Anforderungsvariable wird im Bedienfeld „Bindungen“ angezeigt.
PHP-Servervariablen definieren
Servervariablen als Quelle für dynamische Inhalte von PHP-Seiten definieren Die PHP-Servervariablen werden im
Bedienfeld „Bindungen“ angezeigt.
1 Öffnen Sie das Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“).
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie im Popupmenü die Variable aus.
3 Geben Sie im Dialogfeld „Anforderungsvariable“ den Namen der Variablen (z. B. REQUEST_METHOD) ein und
klicken Sie auf „OK“.
624
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Weitere Informationen finden Sie über das Schlüsselwort „$_SERVER“ in der PHP-Dokumentation.
ColdFusion-Clientvariablen definieren
Eine ColdFusion-Clientvariable kann als Quelle dynamischer Inhalte für die Seite definiert werden. Die neu erstellten
ColdFusion-Clientvariablen werden im Bedienfeld „Bindungen“ angezeigt.
❖ Geben Sie im Dialogfeld „Clientvariable“ den Namen der Variablen ein und klicken Sie auf „OK“.
Um beispielsweise auf die Informationen in der ColdFusion-Variable
Client.LastVisit zuzugreifen, geben Sie
LastVisit ein.
Clientvariablen sind Variablen, die im Code zum Verknüpfen von Daten mit einem bestimmten Client erstellt
wurden. Sie werden verwendet, um den Status der Anwendung beizubehalten, wenn der Besucher der Site in der
Anwendung von einer Seite zur nächsten wechselt. Der Status kann auch von einer Sitzung zur nächsten gespeichert
werden.
Clientvariablen sind entweder benutzerdefiniert oder integriert. In der folgenden Tabelle sind die integrierten
ColdFusion-Clientvariablen aufgeführt:
ColdFusion-Cookie-Variablen definieren
Cookie-Variablen werden im Code erstellt und dienen zum Zugriff auf Informationen in Cookies, die von einem
Browser an den Server übergeben werden. Die definierten Cookie-Variablen werden im Bedienfeld „Bindungen“
angezeigt.
❖ Geben Sie im Dialogfeld „Cookie-Variable“ den Namen der Cookie-Variablen ein und klicken Sie auf „OK“.
ColdFusion-CGI-Variablen definieren
Die definierte CGI-Variable wird im Bedienfeld „Bindungen“ angezeigt.
❖ Geben Sie im Dialogfeld „CGI-Variable“ den Namen der Variablen ein und klicken Sie auf „OK“.
Wenn Sie beispielsweise auf die Informationen in der Variable
CGI.HTTP_REFERER zugreifen möchten, geben Sie
HTTP_REFERER ein.
In der folgenden Tabelle sind die gängigsten ColdFusion-CGI-Variablen aufgelistet, die auf dem Server erstellt
werden:
Variable Beschreibung
Client.CFID Automatisch weitergezählte Kennnummer für jeden Client, der eine Verbindung zum Server herstellt.
Client.CFTOKEN Zufallsgenerierte Nummer zur eindeutigen Identifizierung eines bestimmten Clients.
Client.URLToken Kombination aus CFID und CFTOKEN, die zwischen Vorlagen übergeben werden soll, wenn keine Cookies
verwendet werden.
Client.LastVisit Zeichnet den Zeitstempel des letzten Besuchs durch einen Client auf.
Client.HitCount Anzahl der Seitenanforderungen bei einem einzelnen Client (Zählung anhand von CFID und CFTOKEN).
Client.TimeCreated Zeichnet den Zeitstempel der ersten Erstellung von CFID und CFTOKEN für einen bestimmten Client auf.
625
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
In der folgenden Tabelle sind die gängigsten CGI-Variablen aufgelistet, die vom Browser erstellt und an den Server
übergeben werden:
Variable Beschreibung
SERVER_SOFTWARE Name und Version der Informationsserver-Software, die die Anforderung beantwortet (und das
Gateway ausführt). Format: Name/Version.
SERVER_NAME Hostname, DNS-Alias oder IP-Adresse des Servers, wie sie in selbst referenzierenden URLs angegeben
sind.
GATEWAY_INTERFACE Version der CGI-Spezifikation, der der Server entspricht. Format: CGI/Version.
SERVER_PROTOCOL Name und Version des Informationsprotokolls, mit dem die Anforderung eingereicht wurde. Format:
Protokoll/Revision.
SERVER_PORT Nummer des Anschlusses, an den die Anforderung gesendet wurde.
REQUEST_METHOD Methode, mit der die Anforderung durchgeführt wurde. Bei HTTP kann dies „Get“, „Head“, „Post“ usw.
sein.
PATH_INFO Vom Client zusätzlich bereitgestellte Pfadinformationen. Auf Skripts kann über ihren virtuellen Pfad,
gefolgt von zusätzlichen Informationen, zugegriffen werden. Die zusätzlichen Informationen werden
als PATH_INFO gesendet.
PATH_TRANSLATED Der Server liefert eine übersetzte Version von PATH_INFO, bei der alle etwaigen virtuellen
Pfadinformationen in physische umgewandelt werden.
SCRIPT_NAME Ein virtueller Pfad zu dem auszuführenden Skript. Dient zur Selbstreferenzierung von URLs.
QUERY_STRING Die Abfrageinformationen, die in der URL, die auf dieses Skript verweist, auf das Fragezeichen (?)
folgen.
REMOTE_HOST Name des Hosts, der die Anforderung durchführt. Wenn dem Server diese Informationen nicht zur
Verfügung stehen, setzt er statt REMOTE_HOST die Variable REMOTE_ADDR.
REMOTE_ADDR IP-Adresse des Remote-Hosts, der die Anforderung durchführt.
AUTH_TYPE Wenn der Server Benutzerauthentifizierung unterstützt und das Skript geschützt ist, ist dies die
protokollspezifische Methode zur Prüfung der Identität des Benutzers.
REMOTE_USER AUTH_USER Wenn der Server Benutzerauthentifizierung unterstützt und das Skript geschützt ist, ist dies der
Benutzername zur Identifizierung. (Auch als AUTH_USER verfügbar.)
REMOTE_IDENT Wenn der HTTP-Server die RFC 931-Identifizierung unterstützt, wird diese Variable auf den Namen des
Remote-Benutzers gesetzt, der vom Server abgerufen wird. Verwenden Sie diese Variable nur zur
Protokollzwecken.
CONTENT_TYPE Bei Abfragen, an die Informationen angehängt sind (z. B. HTTP POST und PUT), ist dies der Inhaltstyp
der Daten.
CONTENT_LENGTH Die Länge des Inhalts, wie vom Client vorgegeben.
Variable Beschreibung
HTTP_REFERER Das verweisende Dokument. Dies ist das Dokument, das einen Hyperlink zu Formulardaten
verwendet oder diese Daten abgeschickt hat.
HTTP_USER_AGENT Der Browser, über den der Client gerade die Anforderung sendet. Format: Software/Version
Bibliothek/Version.
HTTP_IF_MODIFIED_SINCE Zeitpunkt der letzten Änderung der Seite. Diese Variable wird nach eigenen Kriterien des Browsers
gesendet (normalerweise nachdem der Server den Header LAST_MODIFIED HTTP gesendet hat). Sie
dient zur Nutzung der Zwischenspeicherung seitens des Browsers.
626
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Inhaltsquellen zwischenspeichern
Quellen für dynamischen Inhalt können in einer Design Note zwischengespeichert werden. So können Sie auch dann
an einer Site arbeiten, wenn Sie keinen Zugriff auf die Datenbank oder den Anwendungsserver haben, auf dem die
Quellen für dynamischen Inhalt gespeichert sind. Durch Zwischenspeicherung können Sie auch Zeit bei der
Entwicklung einsparen, da ein wiederholtes Zugreifen über ein Netzwerk auf die Datenbank und den
Anwendungsserver überflüssig wird.
❖ Klicken Sie auf den Pfeil rechts oben im Bedienfeld „Bindungen“ und aktivieren Sie im Popupmenü die Option
„Cache“.
Wenn Sie Änderungen an einer Ihrer Inhaltsquellen vornehmen, sollten Sie den Cache aktualisieren, indem Sie im
Bedienfeld „Bindungen“ rechts oben auf die Schaltfläche „Aktualisieren“ (das Symbol mit dem umlaufenden Pfeil)
klicken. (Erweitern Sie das Bedienfeld, wenn die Schaltfläche nicht angezeigt wird.)
Inhaltsquellen bearbeiten oder löschen
Sie können jede vorhandene Quelle für dynamischen Inhalt, d. h. jede Inhaltsquelle, die im Bedienfeld „Bindungen“
aufgeführt wird, ändern oder löschen.
Wenn Sie eine Inhaltsquelle im Bedienfeld Bindungen bearbeiten oder löschen, wirkt sich dies nicht auf die Instanzen
dieser Inhaltsquelle in der Seite aus. Die Inhaltsquelle wird lediglich als mögliche Inhaltsquelle für die Seite geändert
bzw. gelöscht.
Inhaltsquellen im Bedienfeld „Bindungen“ ändern
1 Doppelklicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf den Namen der Inhaltsquelle, die Sie
bearbeiten möchten.
2 Nehmen Sie die gewünschten Änderungen im angezeigten Dialogfeld vor.
3 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf „OK“.
Inhaltsquellen im Bedienfeld „Bindungen“ löschen
1 Wählen Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) eine Inhaltsquelle in der Liste aus.
2 Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–).
Datensatzgruppen von einer Seite auf eine andere kopieren
Sie können eine Datensatzgruppe innerhalb einer definierten Site von einer Seite auf eine andere kopieren.
1 Wählen Sie die Datensatzgruppe entweder im Bedienfeld „Bindungen“ oder im Bedienfeld „Serververhalten“ aus.
2 Klicken Sie mit der rechten Maustaste auf die Datensatzgruppe und wählen Sie im Popupmenü die Option
„Kopieren“.
3 Öffnen Sie die Seite, auf die Sie die Datensatzgruppe kopieren möchten.
4 Klicken Sie mit der rechten Maustaste auf das Bedienfeld „Bindungen“ oder die Symbolleiste „Serververhalten“ und
wählen Sie im Popupmenü die Option „Einfügen“.
More Help topics
“Quellen für dynamischen Inhalt” on page 604
“Inhaltsquellen bearbeiten oder löschen” on page 626
627
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Einfügen von dynamischem Inhalt in Seiten
Dynamischen Inhalt hinzufügen
Nachdem Sie Quellen für dynamischen Inhalt definiert haben, können Sie der Seite anhand dieser Quellen
dynamischen Inhalt hinzufügen. Bei Inhaltsquellen kann es sich um Spalten einer Datensatzgruppe, über ein HTML-
Formular gesendete Werte sowie Werte aus einem Serverobjekt oder andere Daten handeln.
In Dreamweaver können Sie dynamischen Inhalt praktisch überall auf einer Webseite oder im zugehörigen HTML-
Quellcode einfügen. So können Sie dynamischen Inhalt an der Einfügemarke platzieren, eine Textzeichenfolge
ersetzen oder den Inhalt als HTML-Attribut einfügen. Dynamischer Inhalt kann beispielsweise das Attribut
src eines
Bildes oder das Attribut
value eines Formularfelds definieren.
Wenn Sie einer Seite dynamischen Inhalt hinzufügen möchten, können Sie im Bedienfeld „Bindungen“ eine
Inhaltsquelle auswählen. Dreamweaver fügt ein serverbasiertes Skript in den Code der Seite ein. Mit diesem Skript
wird der Server angewiesen, die Daten von der Inhaltsquelle an den HTML-Code der Seite zu übertragen, wenn die
Seite von einem Browser angefordert wird.
Es gibt häufig mehrere Möglichkeiten, bestimmte Elemente einer Seite dynamisch zu gestalten. Für Bilder können Sie
beispielsweise das Bedienfeld „Bindungen“, den Eigenschafteninspektor oder den Befehl „Bild“ im Menü „Einfügen“
verwenden.
Eine HTML-Seite kann standardmäßig immer nur einen Datensatz anzeigen. Um die anderen Datensätze einer
Datensatzgruppe anzuzeigen, können Sie einen Hyperlink hinzufügen, mit dessen Hilfe Sie die Datensätze
nacheinander durchsehen können. Sie können aber auch einen wiederholenden Bereich erstellen, um mehr als einen
Datensatz auf einer einzigen Seite anzuzeigen.
More Help topics
“Definieren von Quellen für dynamischen Inhalt” on page 611
“Navigationsleiste für Datensatzgruppen erstellen” on page 634
“Mehrere Datensatzgruppen-Ergebnisse anzeigen” on page 637
“Formatierungs- und Seitenlayout-Elemente auf dynamische Daten anwenden” on page 634
“Vordefinierte Datenformate verwenden” on page 641
Dynamischer Text
Dynamischer Text übernimmt alle Formatierungen, die auf den bereits bestehenden Text oder die Einfügemarke
angewendet wurden. Ist für den ausgewählten Text beispielsweise ein CSS-Stil (Cascading Style Sheet) definiert, weist
auch der ihn ersetzende dynamische Text diesen Stil auf. Sie können Textformate für dynamische Inhalte mit den
Textformatierungswerkzeugen von Dreamweaver hinzufügen oder ändern.
Sie können auf dynamischen Text auch Datenformate anwenden. Wenn Sie beispielsweise mit Datumsangaben
arbeiten, können Sie diesen spezielle Formate zuweisen, z. B. für amerikanische Besucher das Format MM/TT/JJ und
für deutsche Besucher das Format TT/MM/JJ.
Texte dynamisch gestalten
Sie können bestehenden Text durch dynamischen Text ersetzen oder dynamischen Text an einer bestimmten
Einfügemarke auf der Seite platzieren.
628
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Datensatzgruppen” on page 605
“Vordefinierte Datenformate verwenden” on page 641
Dynamischen Text hinzufügen
1 Wählen Sie in der Entwurfsansicht Text auf der Seite aus oder klicken Sie auf die Stelle, an der Sie dynamischen
Text hinzufügen möchten.
2 Wählen Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) eine Inhaltsquelle in der Liste aus. Wenn Sie
eine Datensatzgruppe wählen, geben Sie die gewünschte Spalte in der Datensatzgruppe an.
Die Inhaltsquelle muss einfachen Text (ASCII-Text) enthalten. Dazu gehört auch HTML. Falls in der Liste keine
Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, klicken Sie auf die
Schaltfläche mit dem Pluszeichen (+), um eine neue Inhaltsquelle zu definieren.
3 (Optional) Wählen Sie ein Datenformat für den Text aus.
4 Klicken Sie auf „Einfügen“ oder ziehen Sie die Inhaltsquelle mit der Maus auf die Seite.
Ein Platzhalter für dynamische Inhalte wird angezeigt. (Wenn Sie Text auf der Seite ausgewählt haben, ersetzt der
Platzhalter diesen Text.) Beim Platzhalter für den Inhalt einer Datensatzgruppe gilt die folgende Syntax:
{RecordsetName.ColumnName}. RecordsetName ist der Name der Datensatzgruppe und ColumnName der Name der
Spalte, die Sie in der Datensatzgruppe ausgewählt haben.
Manchmal verfälscht die Länge der Platzhalter für dynamischen Text das Seitenlayout im Dokumentfenster. Sie
können dieses Problem lösen, indem Sie leere, geschweifte Klammern als Platzhalter verwenden (siehe folgendes
Thema).
Platzhalter für dynamischen Text anzeigen
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Unsichtbare Elemente“ (Windows) bzw. „Dreamweaver“ >
„Voreinstellungen“ > „Unsichtbare Elemente“ (Macintosh).
2 Wählen Sie im Popupmenü „Dynamischen Text zeigen als“ die Option {} und klicken Sie auf „OK“.
Bilder dynamisch gestalten
Sie haben die Möglichkeit, Bilder auf Ihrer Seite dynamisch zu gestalten. Angenommen, Sie entwerfen eine Seite, um
Gegenstände zu zeigen, die für einen guten Zweck versteigert werden sollen. Jede Seite soll eine Beschreibung und ein
Foto eines Gegenstandes enthalten. Das Layout der Seite bleibt bei allen Gegenständen gleich, nur das Foto (und der
beschreibende Text) soll geändert werden.
1 Öffnen Sie die Seite in der Entwurfsansicht („Ansicht“ > „Entwurf“) und setzen Sie die Einfügemarke an die Stelle
auf der Seite, an der das Bild angezeigt werden soll.
2 Wählen Sie „Einfügen“ > „Bild“ aus.
Nun wird das Dialogfeld „Bildquelle auswählen“ angezeigt.
3 Klicken Sie auf die Option „Datenquellen“ (Windows) bzw. auf die Schaltfläche „Datenquelle“ (Macintosh).
Nun wird eine Liste der Inhaltsquellen angezeigt.
4 Wählen Sie in der Liste eine Inhaltsquelle aus und klicken Sie auf „OK“.
Bei der Inhaltsquelle sollte es sich um eine Datensatzgruppe handeln, welche die Pfade zu den Bilddateien enthält. Je
nach der Dateistruktur Ihrer Site sind die Pfade absolut, dokumentrelativ oder zum Site-Stammordner relativ.
629
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Note: Dreamweaver unterstützt derzeit keine binären Bilddateien, die in Datenbanken gespeichert sind.
Falls in der Liste keine Datensatzgruppen enthalten sind oder die vorhandenen nicht Ihren Bedürfnissen entsprechen,
können Sie eine neue Datensatzgruppe definieren.
More Help topics
“Datensatzgruppen ohne manuelle SQL-Eingabe definieren” on page 611
HTML-Attribute dynamisch gestalten
Sie haben die Möglichkeit, das Erscheinungsbild einer Seite dynamisch zu verändern, indem Sie Daten mit HTML-
Attributen verbinden. So können Sie beispielsweise das Hintergrundbild einer Tabelle verändern, indem Sie das
Attribut
background der Tabelle mit einem Feld in der Datensatzgruppe verbinden.
Das Verbinden von HTML-Attributen kann im Bedienfeld „Bindungen“ oder im Eigenschafteninspektor
vorgenommen werden.
HTML-Attribute mit dem Bedienfeld „Bindungen“ dynamisch gestalten
1 Öffnen Sie das Bedienfeld „Bindungen“, indem Sie „Fenster“ > „Bindungen“ wählen.
2 Vergewissern Sie sich, dass im Bedienfeld „Bindungen“ die Inhaltsquelle aufgelistet wird, die Sie verwenden
möchten.
Die Inhaltsquelle muss Daten enthalten, die für das zu verbindende HTML-Attribut geeignet sind. Falls in der Liste
keine Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, klicken Sie auf die
Schaltfläche mit dem Pluszeichen (+), um eine neue Inhaltsquelle zu definieren.
3 Wählen Sie in der Entwurfsansicht ein HTML-Objekt aus.
Wenn Sie beispielsweise eine HTML-Tabelle auswählen möchten, klicken Sie in die Tabelle und dann auf das Tag
<table> im Tag-Selektor links unten im Dokumentfenster.
4 Wählen Sie im Bedienfeld „Bindungen“ eine Inhaltsquelle in der Liste aus.
5 Wählen Sie im Feld „Verbinden mit“ ein HTML-Attribut im Popupmenü aus.
6 Klicken Sie auf „Verbinden“.
Wenn diese Seite das nächste Mal auf dem Anwendungsserver ausgeführt wird, wird der Wert der Datenquelle dem
HTML-Attribut zugewiesen.
HTML-Attribute mit dem Eigenschafteninspektor dynamisch gestalten
1 Wählen Sie in der Entwurfsansicht ein HTML-Objekt aus und öffnen Sie den Eigenschafteninspektor („Fenster“ >
„Eigenschaften“).
Wenn Sie beispielsweise eine HTML-Tabelle auswählen möchten, klicken Sie in die Tabelle und dann auf das Tag
<table> im Tag-Selektor links unten im Dokumentfenster.
2
Wie Sie eine Quelle für dynamischen Inhalt mit dem HTML-Attribut verbinden, hängt vom jeweiligen Speicherort ab.
• Wenn neben dem zu verbindenden Attribut im Eigenschafteninspektor ein Ordnersymbol angezeigt wird, klicken
Sie auf dieses Symbol. Daraufhin wird ein Dialogfeld zur Dateiauswahl geöffnet. Klicken Sie nun auf
„Datenquellen“, um eine Liste der Datenquellen anzuzeigen.
• Wenn kein Ordnersymbol neben dem zu verbindenden Attribut angezeigt wird, klicken Sie auf die Registerkarte
„Listen“ (die untere der beiden Registerkarten) auf der linken Seite des Eigenschafteninspektors.
Nun wird die Listenansicht des Eigenschafteninspektors angezeigt.
630
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
• Falls das zu verbindende Attribut nicht in der Listenansicht aufgeführt ist, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+). Geben Sie dann den Namen des Attributs ein oder klicken Sie auf die Pfeilschaltfläche, um das
Attribut im Popupmenü auszuwählen.
3 Um den Wert das Attributs dynamisch zu gestalten, klicken Sie zunächst auf das Attribut und dann auf das
Blitzsymbol oder das Ordnersymbol am Ende der Attributzeile.
Wenn Sie auf das Blitzsymbol klicken, wird eine Liste der Datenquellen angezeigt.
Wenn Sie auf das Ordnersymbol klicken, wird ein Dialogfeld zur Dateiauswahl angezeigt. Wählen Sie die Option
„Datenquellen“, um eine Liste der Inhaltsquellen anzuzeigen.
4 Wählen Sie in der Liste eine Inhaltsquelle aus und klicken Sie auf „OK“.
Die Inhaltsquelle muss Daten enthalten, die für das zu verbindende HTML-Attribut geeignet sind. Falls in der Liste
keine Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, können Sie eine
neue Inhaltsquelle definieren.
Wenn diese Seite das nächste Mal auf dem Anwendungsserver ausgeführt wird, wird der Wert der Datenquelle dem
HTML-Attribut zugewiesen.
ActiveX, Flash und andere Objektparameter dynamisch gestalten
Sie können die Parameter für Java-Applets und Plug-Ins sowie für ActiveX-, Flash-, Shockwave-, Director- und
Generator-Objekte dynamisch gestalten.
Vergewissern Sie sich zunächst, dass die Felder Ihrer Datensatzgruppe Daten enthalten, die für die zu verbindenden
Objektparameter geeignet sind.
1 Wählen Sie in der Entwurfsansicht ein Objekt auf der Seite aus und öffnen Sie den Eigenschafteninspektor
(„Fenster“ > „Eigenschaften“).
2 Klicken Sie auf die Schaltfläche „Parameter“.
3 Falls der von Ihnen benötigte Parameter nicht in der Liste aufgeführt ist, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+) und geben Sie in die Spalte „Parameter“ einen Parameternamen ein.
4 Klicken Sie auf die Spalte mit den Parameterwerten und anschließend auf das Blitzsymbol, um einen dynamischen
Wert anzugeben.
Nun wird eine Liste der Datenquellen angezeigt.
5 Wählen Sie in der Liste eine Datenquelle aus und klicken Sie auf „OK“.
Die Datenquelle muss Daten enthalten, die für den zu verbindenden Objektparameter geeignet sind. Falls in der Liste
keine Datenquellen enthalten sind oder die vorhandenen nicht Ihren Bedürfnissen entsprechen, können Sie eine neue
Datenquelle definieren.
More Help topics
“Definieren von Quellen für dynamischen Inhalt” on page 611
631
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Dynamischen Inhalt ändern
Dynamischer Inhalt
Sie können den dynamischen Inhalt Ihrer Seite ändern, indem Sie das Serververhalten bearbeiten, das den Inhalt
bereitstellt. Beispielsweise können Sie das Serververhalten einer Datensatzgruppe so bearbeiten, dass auf einer Seite
mehr Datensätze bereitgestellt werden.
Der dynamische Inhalt einer Seite ist im Bedienfeld „Serververhalten“ aufgelistet. Wenn Sie Ihrer Seite beispielsweise
eine Datensatzgruppe hinzufügen, wird diese Gruppe im Bedienfeld „Serververhalten“ folgendermaßen verzeichnet:
Recordset(myRecordset)
Wenn Sie Ihrer Seite eine weitere Datensatzgruppe hinzufügen, werden die beiden Gruppen im Bedienfeld
„Serververhalten“ folgendermaßen aufgeführt:
Recordset(mySecondRecordset)Recordset(myRecordset)
Dynamischen Inhalt bearbeiten
1 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“).
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um die Serververhalten anzuzeigen. Doppelklicken Sie im
Bedienfeld „Serververhalten“ auf das gewünschte Serververhalten.
Nun wird das Dialogfeld angezeigt, in dem Sie die ursprüngliche Datenquelle definiert haben.
3 Nehmen Sie im Dialogfeld die gewünschten Änderungen vor und klicken Sie auf „OK“.
Dynamischen Inhalt löschen
❖ Nachdem Sie einer Seite dynamischen Inhalt hinzugefügt haben, können Sie diesen Inhalt folgendermaßen
löschen:
• Markieren Sie den dynamischen Inhalt auf der Seite und drücken Sie die Entf-Taste.
• Wählen Sie den dynamischen Inhalt im Bedienfeld „Serververhalten“ aus und klicken Sie auf die Schaltfläche mit
dem Minuszeichen (–).
Note: Durch diesen Vorgang wird das serverseitige Skript aus der Seite entfernt, das den dynamischen Inhalt aus der
Datenbank abruft. Die Daten in der Datenbank werden dadurch nicht gelöscht.
Dynamischen Inhalt testen
Dynamische Inhalte können Sie in der Live-Ansicht in einer Vorschau anzeigen und bearbeiten.
Während der dynamische Inhalt angezeigt wird, können Sie folgende Aufgaben ausführen:
• Das Layout der Seite mit den Seitenentwurfswerkzeugen anpassen
• Dynamischen Inhalt hinzufügen, bearbeiten oder löschen
• Serververhalten hinzufügen, bearbeiten oder löschen
1 Klicken Sie auf die Schaltfläche „Live-Ansicht“, um den dynamischen Inhalt anzuzeigen.
2 Nehmen Sie die gewünschten Änderungen an der Seite vor. Sie müssen zwischen der Live-Ansicht und der
Entwurfs- oder Codeansicht wechseln, um Änderungen vorzunehmen und deren Auswirkungen anzuzeigen.
632
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Parameter von HTML-Formularen” on page 710
“URL-Parameter” on page 712
“Funktionsweise von Sitzungsvariablen” on page 606
Adobe Contribute-Benutzern die Änderung dynamischer Inhalte gestatten
Wenn ein Contribute-Benutzer eine Seite mit dynamischem Inhalt oder unsichtbaren Elementen bearbeitet (z. B.
Skripts oder Kommentare), werden der dynamische Inhalt und die unsichtbaren Elemente von Contribute als gelbe
Markierungen dargestellt. Contribute-Benutzer können diese Markierungen standardmäßig weder auswählen noch
löschen.
Wenn Sie wünschen, dass Contribute-Benutzer dynamischen Inhalt und andere unsichtbare Elemente auf einer Seite
auswählen und löschen können, so können Sie die Einstellungen der Berechtigungsgruppe entsprechend ändern.
Contribute-Benutzer können dynamische Inhalte in der Regel auch dann nicht bearbeiten, wenn Sie ihnen die
Auswahl solcher Inhalte gestatten.
Note: Bei bestimmten Servertechnologien können Sie statischen Text mithilfe eines Server-Tags oder einer Serverfunktion
anzeigen. Wenn Sie wünschen, dass Contribute-Benutzer den statischen Text in einer dynamischen Seite bearbeiten
können, die sich einer solchen Servertechnologie bedient, platzieren Sie den statischen Text außerhalb der Server-Tags.
Weitere Informationen finden Sie unter Adobe Contribute verwalten.
1 Wählen Sie „Site“ > „Site in Contribute verwalten“.
2 Wenn bestimmte Optionen nicht aktiviert sind, die für die Kompatibilität mit Contribute erforderlich sind, werden
Sie in einem Dialogfeld gefragt, ob Sie diese Optionen aktivieren möchten. Klicken Sie auf „OK“, um die Optionen
zu aktivieren und die Kompatibilität mit Contribute herzustellen.
3 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf „OK“.
Das Dialogfeld zur Verwaltung der Website wird angezeigt.
4 Wählen Sie in der Kategorie für Benutzer und Rollen eine Rolle aus und klicken Sie auf die Schaltfläche zum
Bearbeiten der Rolleneinstellungen.
5 Wählen Sie die Bearbeitungskategorie aus und deaktivieren Sie die Option zum Schutz von Skripts und
Formularen.
6 Klicken Sie auf „OK“, um das Dialogfeld zu schließen.
7 Klicken Sie auf „Schließen“, um das Dialogfeld „Website verwalten“ zu schließen.
More Help topics
“Verwalten von Contribute-Sites” on page 58
“Vorlagen für Contribute-Sites erstellen” on page 431
Datensatzgruppen mit dem Eigenschafteninspektor modifizieren
Mit dem Eigenschafteninspektor können Sie eine ausgewählte Datensatzgruppe ändern. Die verfügbaren Optionen
richten sich nach dem Servermodell.
1 Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und wählen Sie im Bedienfeld
„Serververhalten“ („Fenster“ > „Serververhalten“) die gewünschte Datensatzgruppe aus.
633
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
2 Bearbeiten Sie beliebige Optionen. Wenn Sie im Eigenschafteninspektor eine neue Option auswählen, wird die
Seite in Dreamweaver aktualisiert.
More Help topics
“Dynamischen Inhalt bearbeiten” on page 631
Anzeigen von Datenbank-Datensätzen
Datenbank-Datensätze
Bei der Anzeige von Datenbank-Datensätzen werden Daten, die in einer Datenbank oder in einer anderen
Inhaltsquelle gespeichert sind, abgerufen und auf einer Webseite dargestellt. Dreamweaver verfügt über zahlreiche
Methoden zur Anzeige von dynamischen Inhalten. Außerdem enthält das Programm mehrere integrierte
Serververhalten, mit denen die Präsentation von dynamischen Inhalten verbessert wird und die es den Benutzern
ermöglichen, einfacher durch die von der Datenbank zurückgegebenen Daten zu navigieren und die gewünschten
Informationen zu suchen.
Datenbanken und andere Quellen für dynamischen Inhalt bieten eine leistungsstarke und flexible Basis für das
Suchen, Sortieren und Anzeigen großer Datenmengen. Datenbanken eignen sich vor allem dann zum Speichern von
Website-Inhalten, wenn Sie große Datenmengen speichern und dann strukturiert abrufen und anzeigen möchten. Mit
den Tools und integrierten Serververhalten von Dreamweaver können Sie die Daten, die in einer Datenbank
gespeichert sind, auf effiziente Weise abrufen und anzeigen.
Serververhalten und Formatierungselemente
Mit den folgenden Serververhalten und Formatierungselementen von Dreamweaver können Sie die Anzeige
dynamischer Daten verbessern:
Mit Formaten können Sie verschiedene Arten von Zahlen-, Währungs-, Datum/Uhrzeit- und Prozentwerten auf den
dynamischen Text anwenden.
Angenommen, der Preis eines in einer Datensatzgruppe enthaltenen Artikels beträgt 10,989. Sie können angeben, dass
dieser Preis auf der Seite im Format „Euro 10,99“ angezeigt werden soll, indem Sie das Dreamweaver-Format
„Währung - zwei Dezimalstellen“ wählen. Dieses Format bewirkt, dass eine Zahl mit zwei Dezimalstellen angezeigt
wird. Wenn die Zahl mehr als zwei Dezimalstellen hat, wird sie entweder auf- oder abgerundet. Hat die Zahl keine
Dezimalstellen, werden das Dezimaltrennzeichen und zwei Nullen hinzugefügt.
Wiederholender Bereich Mit diesen Serververhalten können Sie mehrere von einer Datenbankabfrage
zurückgegebene Elemente anzeigen. Zudem können Sie festlegen, wie viele Datensätze pro Seite angezeigt werden.
Datensatzgruppen-Navigation Mit diesen Serververhalten können Sie Navigationselemente einfügen, mit denen
Benutzer die nächste bzw. die vorige von der Datensatzgruppe zurückgegebene Datensatzmenge anzeigen können.
Wenn Sie beispielsweise mit dem Serverobjekt „Bereich wiederholen“ festlegen, dass pro Seite 10 Datensätze angezeigt
werden sollen und die Datensatzgruppe 40 Datensätze zurückgibt, können Sie durch jeweils 10 Datensätze navigieren.
Statusleiste für Datensatzgruppe Mit diesen Serververhalten können Sie einen Zähler einfügen, der zeigt, an welcher
Stelle innerhalb einer Datensatzmenge der Benutzer sich befindet, und zwar relativ zur Gesamtanzahl der
zurückgegebenen Datensätze.
Bereich zeigen Mit diesen Serververhalten können Sie wählen, ob Elemente auf der Seite ein- oder ausgeblendet
werden, wobei die Relevanz der derzeit angezeigten Datensätze als Grundlage dient. Wenn beispielsweise der letzte
634
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Datensatz einer Datensatzgruppe angezeigt wird, kann der Hyperlink Weiter ausgeblendet werden, sodass nur der
Hyperlink für die vorigen Datensätze (Zurück) angezeigt wird.
Formatierungs- und Seitenlayout-Elemente auf dynamische Daten anwenden
Zu den leistungsstarken Funktionen von Dreamweaver gehört die Möglichkeit, dynamische Daten innerhalb einer
strukturierten Seite anzuzeigen und mithilfe von HTML und CSS typographische Formatierungen anzuwenden. Um
in Dreamweaver Formate auf dynamische Daten anzuwenden, formatieren Sie die für die dynamischen Daten
vorgesehenen Tabellen und Platzhalter mit den Formatierungstools von Dreamweaver. Wenn die Daten anschließend
aus der Datenquelle eingefügt werden, übernehmen sie automatisch die angegebene Schrift-, Absatz- und
Tabellenformatierung.
Durch das Ergebnis der Datenbank-Datensatzgruppen navigieren
Mit Hyperlinks für die Datensatzgruppen-Navigation können Benutzer von einem Datensatz zum nächsten oder von
einer Datensatzmenge zur nächsten navigieren. Wenn Sie beispielsweise eine Seite erstellt haben, auf der jeweils fünf
Datensätze gleichzeitig angezeigt werden, können Sie die Hyperlinks Nächster oder Vorheriger hinzufügen, mit denen
Besucher der Site die nächsten oder vorherigen fünf Datensätze anzeigen können.
Sie können vier Arten von Hyperlinks zum Navigieren durch Datensatzgruppen erstellen: „Erster“, „Vorheriger“,
„Nächster“ und „Letzter“. Eine Seite kann beliebig viele dieser Hyperlinks enthalten, solange sie sich alle auf dieselbe
Datensatzgruppe beziehen. Es ist nicht möglich, Navigationshyperlinks hinzuzufügen, die sich auf eine zweite
Datensatzgruppe auf derselben Seite beziehen.
Für Hyperlinks für die Datensatzgruppen-Navigation sind die folgenden dynamischen Elemente erforderlich:
• Eine Datensatzgruppe, durch die navigiert werden soll
• Dynamischer Inhalt auf der Seite, um die Datensätze anzuzeigen
• Text oder Bilder auf der Seite, die als Navigationsleiste dienen und auf Mausklicks reagieren
• Eine Gruppe von „Verschieben zu Datensatz“-Serververhalten, die die Navigation durch die Datensatzgruppe
ermöglichen
Die letzten beiden Elemente können Sie entweder mit dem Serverobjekt „Navigationsleiste für Datensatzgruppe“
oder separat mit den Entwurfstools und dem Bedienfeld „Serververhalten“ hinzuzufügen.
Navigationsleiste für Datensatzgruppen erstellen
Mit dem Serververhalten „Navigationsleiste für Datensatzgruppe“ können Sie eine Navigationsleiste für
Datensatzgruppen in einem Schritt erstellen. Das Serververhalten fügt der Seite die folgenden Komponenten hinzu:
• Eine HTML-Tabelle mit Text- oder Bild-Hyperlinks
• Eine Gruppe von „Verschieben zu“-Serververhalten
• Eine Gruppe von „Bereich anzeigen“-Serververhalten
Die Textversion der Navigationsleiste für Datensatzgruppen sieht folgendermaßen aus:
Die Bildversion der Navigationsleiste für Datensatzgruppen sieht folgendermaßen aus:
635
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Bevor Sie die Navigationsleiste auf der Seite platzieren, stellen Sie sicher, dass die Seite über eine Datensatzgruppe
für die Navigation und über ein Seitenlayout zur Anzeige der Datensätze verfügt.
Nachdem Sie die Navigationsleiste auf der Seite platziert haben, können Sie sie mit den Entwurfstools beliebig
anpassen. Sie können auch die Serververhalten „Verschieben zu“ und „Bereich zeigen“ bearbeiten, indem Sie im
Bedienfeld „Serververhalten“ darauf doppelklicken.
Dreamweaver erstellt eine Tabelle mit Text- oder Bildhyperlinks, auf die der Benutzer klicken kann, um durch die
ausgewählte Datensatzgruppe zu navigieren. Bei der Anzeige des ersten Datensatzes der Datensatzgruppe sind die
Hyperlinks Erster und Vorheriger bzw. die entsprechenden Bilder ausgeblendet. Bei der Anzeige des letzten
Datensatzes der Datensatzgruppe sind die Hyperlinks Nächster und Letzter bzw. die entsprechenden Bilder
ausgeblendet.
Sie können das Layout der Navigationsleiste mit den Entwurfstools und dem Bedienfeld „Serververhalten“
anpassen.
1 Setzen Sie in der Entwurfsansicht die Einfügemarke an die Stelle auf der Seite, wo Sie die Navigationsleiste anzeigen
möchten.
2 Öffnen Sie das Dialogfeld „Navigationsleiste für Datensatzgruppe“ („Einfügen“ > „Datenobjekte“ >
„Seitenerstellung für Datensatzgruppe“ > „Navigationsleiste für Datensatzgruppe“).
3 Wählen Sie im Popupmenü „Datensatzgruppe“ die Datensatzgruppe für die Navigation aus.
4 Wählen Sie unter „Anzeigen mit“ das Format für die Anzeige der Navigationshyperlinks auf der Seite aus und
klicken Sie auf „OK“.
Text platziert Textlinks auf der Seite.
Bilder verwendet grafische Bilder als Hyperlinks. Dreamweaver verwendet eigene Bilddateien. Sie können diese Bilder
durch andere Bilddateien ersetzen, nachdem Sie die Navigationsleiste auf der Seite platziert haben.
Benutzerdefinierte Navigationsleisten für Datensatzgruppen erstellen
Mit dem Serverobjekt „Navigationsleiste für Datensatzgruppe“ wird eine relativ einfache Tabelle erstellt. Wenn Sie
komplexere Layout- und Formatierungsstile bevorzugen, können Sie eine eigene Navigationsleiste erstellen.
Gehen Sie beim Erstellen einer eigenen Navigationsleiste für Datensatzgruppen folgendermaßen vor:
• Erstellen Sie Navigationshyperlinks in Text oder Bildern.
• Platzieren Sie die Hyperlinks in der Entwurfsansicht auf der Seite.
• Weisen Sie jedem Navigationshyperlink ein spezifisches Serververhalten zu.
Im folgenden Verfahren wird beschrieben, wie Sie den Navigationshyperlinks ein spezifisches Serververhalten
zuweisen.
Serververhalten für Navigationshyperlinks erstellen und zuweisen
1 Wählen Sie in der Entwurfsansicht die Textzeichenfolge (bzw. das Bild) auf der Seite aus, die Sie als Hyperlink zur
Datensatznavigation verwenden möchten.
2 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) und klicken Sie auf die Schaltfläche
mit dem Pluszeichen (+).
3 Wählen Sie im Popupmenü die Option „Seitenerstellung für Datensatzgruppe“. Wählen Sie dann in der Liste ein
für diesen Hyperlink geeignetes Serververhalten aus.
Wenn die Datensatzgruppe eine große Zahl von Datensätzen enthält, kann das Ausführen des Serververhaltens „Zum
letzten Datensatz verschieben“ längere Zeit in Anspruch nehmen.
636
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
4 Wählen Sie im Popupmenü „Datensatzgruppe“ die Datensatzgruppe, die die gewünschten Datensätze enthält.
Klicken Sie dann auf „OK“.
Das Serververhalten wird dem Navigationshyperlink zugewiesen.
Optionen im Serververhalten-Dialogfeld „Verschieben“ einstellen
Fügen Sie Hyperlinks hinzu, mit deren Hilfe ein Benutzer durch die Datensätze einer Datensatzgruppe navigieren kann.
1 Wenn Sie auf der Seite nichts ausgewählt haben, wählen Sie im Popupmenü einen Hyperlink aus.
2 Wählen Sie die Datensatzgruppe aus, die die gewünschten Datensätze enthält. Klicken Sie dann auf „OK“.
Note: Wenn die Datensatzgruppe eine große Zahl von Datensätzen enthält, kann das Ausführen des Serververhaltens
„Zum letzten Datensatz verschieben“ längere Zeit in Anspruch nehmen.
Arbeitsschritte zum Entwurf von Navigationsleisten
Wenn Sie eine benutzerdefinierte Navigationsleiste erstellen möchten, erstellen Sie zunächst mithilfe der
Seitenentwurfswerkzeuge von Dreamweaver ihr grafisches Erscheinungsbild. Sie brauchen keinen Hyperlink für die
Textzeichenfolge oder das Bild zu erstellen, da Dreamweaver dies für Sie erledigt.
Die Seite, für die Sie die Navigationsleiste erstellen, muss eine Datensatzgruppe enthalten, durch die navigiert werden
soll. Eine einfache Navigationsleiste für Datensatzgruppen, deren Hyperlink-Schaltflächen anhand von Bildern oder
anderen Inhaltselementen erstellt werden, könnte folgendermaßen aussehen:
Nachdem Sie der Seite eine Datensatzgruppe hinzugefügt und eine Navigationsleiste erstellt haben, müssen Sie den
einzelnen Navigationselementen individuelle Serververhalten zuweisen. Eine typische Navigationsleiste für
Datensatzgruppen enthält beispielsweise Navigationselemente für die folgenden Hyperlinks, die bestimmten
Verhalten entsprechen:
More Help topics
“Datensatzgruppen” on page 605
Navigationshyperlink Serververhalten
Zur ersten Seite gehen Zur ersten Seite verschieben
Zur vorherigen Seite gehen Zur vorherigen Seite verschieben
Zur nächsten Seite gehen Zur nächsten Seite verschieben
Zur letzten Seite gehen Zur letzten Seite verschieben
637
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Bereiche auf Grundlage von Datensatzgruppen-Ergebnissen einblenden und
ausblenden
Das Ein- und Ausblenden eines Bereichs kann sich auch danach richten, ob die Datensatzgruppe leer ist. Wenn die
Datensatzgruppe leer ist (weil beispielsweise keine Datensätze gefunden wurden, die den Kriterien der Abfrage
entsprachen), können die Benutzer in einer Meldung darauf hingewiesen werden, dass keine Datensätze
zurückgegeben wurden. Dies ist besonders dann nützlich, wenn Sie Suchseiten erstellen, bei denen die Suchbegriffe
für die Abfrage vom Benutzer eingegeben werden. Sie können auch festlegen, dass eine Fehlermeldung angezeigt wird,
wenn die Verbindung zur Datenbank nicht hergestellt werden konnte oder wenn der Benutzername und das
Kennwort des Benutzers vom Server nicht erkannt wurden.
Folgende Serververhalten „Bereich anzeigen“ stehen zur Verfügung:
• Anzeigen, wenn Datensatzgruppe leer ist
• Anzeigen, wenn Datensatzgruppe nicht leer ist
• Anzeigen, wenn erste Seite
• Anzeigen, wenn nicht erste Seite
• Anzeigen, wenn letzte Seite
• Anzeigen, wenn nicht letzte Seite
1 Wählen Sie in der Entwurfsansicht den Bereich auf der Seite aus, den Sie ein- oder ausblenden möchten.
2 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+).
3 Wählen Sie im Popupmenü die Option „Bereich zeigen“ und wählen Sie eines der Serververhalten in der Liste aus.
Klicken Sie dann auf „OK“.
More Help topics
“Datenbank-Datensätze” on page 633
“Dynamische Tabellen erstellen” on page 638
Mehrere Datensatzgruppen-Ergebnisse anzeigen
Mit dem Serververhalten „Bereich wiederholen“ können Sie mehrere Datensätze aus einer Datensatzgruppe auf einer
Seite anzeigen. Jede Auswahl dynamischer Daten kann in einen wiederholenden Bereich umgewandelt werden. Die
am häufigsten verwendeten Bereiche sind jedoch Tabellen, einzelne Tabellenzeilen oder Gruppen von Tabellenzeilen.
1 Wählen Sie in der Entwurfsansicht einen Bereich aus, der dynamischen Inhalt enthält.
Dies kann ein beliebiges Objekt wie etwa eine Tabelle, eine Tabellenzeile oder ein Textabsatz sein.
Sie können den Tag-Selektor links unten im Dokumentfenster verwenden, um einen Bereich auf der Seite präzise
auszuwählen. Handelt es sich bei dem Bereich z. B. um eine Tabellenzeile, klicken Sie auf der Seite in die Zeile. Klicken
Sie dann auf das ganz rechts stehende Tag
<tr> im Tag-Selektor, um die Tabellenzeile auszuwählen.
2 Wählen Sie „Fenster“ > „Serververhalten“, um das Bedienfeld „Serververhalten“ einzublenden.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie „Bereich wiederholen“.
4 Wählen Sie im Popupmenü die zu verwendende Datensatzgruppe aus.
5 Geben Sie an, wie viele Datensätze pro Seite angezeigt werden sollen. Klicken Sie dann auf „OK“.
Der wiederholende Bereich ist nun im Dokumentfenster von einer dünnen, grauen, gestrichelten Linie umgeben.
638
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Datenbank-Datensätze” on page 633
“Dynamischen Inhalt bearbeiten” on page 631
Wiederholende Bereiche im Eigenschafteninspektor modifizieren
❖ Sie können den ausgewählten wiederholenden Bereich durch Ändern der folgenden Optionen modifizieren:
• Name des wiederholenden Bereichs
• Datensatzgruppe, aus der die Datensätze für den wiederholenden Bereich stammen
• Anzahl der angezeigten Datensätze
Wenn Sie eine neue Option auswählen, aktualisiert Dreamweaver die Seite.
Wiederverwenden von PHP-Datensatzgruppen
Informationen zum Wiederverwenden von PHP-Datensatzgruppen finden Sie im Tutorial von David Powers, How
Do I Reuse a PHP Recordset in More Than One Repeat Region? (Wiederverwenden von PHP-Datensatzgruppen in
mehreren wiederholenden Bereichen).
Dynamische Tabellen erstellen
Das folgende Beispiel veranschaulicht, wie das Serververhalten „Bereich wiederholen“ auf eine Tabellenzeile
angewendet wird. Dabei wird festgelegt, dass pro Seite neun Datensätze angezeigt werden. In der Zeile selbst sind vier
verschiedene Datensätze enthalten: Stadt, Bundesland, Straße und Postleitzahl.
639
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Um eine solche Tabelle anzulegen, müssen Sie eine Tabelle mit dynamischem Inhalt erstellen und dann das
Serververhalten „Bereich wiederholen“ auf die Tabellenzeile anwenden, die den dynamischen Inhalt enthält. Wenn
der Anwendungsserver die Seite verarbeitet, wird die Zeile so oft wiederholt, wie vom Serverobjekt „Bereich
wiederholen“ angegeben. Dabei wird in jede neue Zeile ein anderer Datensatz eingefügt.
1 Führen Sie einen der folgenden Schritte aus, um eine dynamische Tabelle einzufügen:
• Wählen Sie „Einfügen“ > „Anwendungsobjekte“ > „Dynamische Daten“ > „Dynamische Tabelle“, um das
Dialogfeld „Dynamische Tabelle“ einzublenden.
• Klicken Sie in der Kategorie „Daten“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Dynamische Daten“ und
wählen Sie im Popupmenü das Symbol „Dynamische Tabelle“ aus.
2 Wählen Sie im Popupmenü „Datensatzgruppe“ die Datensatzgruppe aus.
3 Geben Sie an, wie viele Datensätze pro Seite angezeigt werden sollen.
4 (Optional) Geben Sie Werte für den Tabellenrahmen, die Zellauffüllung und den Zellabstand ein.
Die Werte, die Sie für den Tabellenrahmen, die Zellauffüllung und den Zellabstand eingeben, werden im Dialogfeld
„Dynamische Tabelle“ gespeichert.
Note: Wenn Sie an einem Projekt arbeiten, für das mehrere dynamische Tabellen mit demselben Erscheinungsbild
erforderlich sind, geben Sie die Werte für das Tabellenlayout ein. Dadurch wird die Entwicklung der Seite zusätzlich
erleichtert. Sie können diese Werte im Eigenschafteninspektor für Tabellen auch nach dem Einfügen der Tabelle noch
ändern.
5 Klicken Sie auf „OK“.
Daraufhin werden eine Tabelle und Platzhalter für den dynamischen Inhalt, der in der zugehörigen Datensatzgruppe
definiert ist, in die Seite eingefügt.
In diesem Beispiel enthält die Datensatzgruppe vier Spalten: AUTHORID, FIRSTNAME, LASTNAME und BIO. Die
Überschriftszeile der Tabelle enthält die Namen der einzelnen Spalten. Sie können die Überschriften durch
Beschreibungen oder entsprechende Bilder ersetzen.
Datensatzzähler erstellen
Mithilfe von Datensatzzählern können Benutzer sich bei der Navigation durch eine Datensatzmenge orientieren. In
der Regel zeigen Datensatzzähler die Gesamtanzahl der zurückgegebenen Datensätze sowie die derzeit angezeigten
Datensätze an. Wenn eine Datensatzgruppe beispielsweise 40 einzelne Datensätze zurückgegeben hat und
8 Datensätze pro Seite angezeigt werden, lautet der Datensatzzähler auf der ersten Seite „Anzeige der Datensätze 1-8
von 40“.
Wenn Sie einen Datensatzzähler für eine Seite erstellen möchten, müssen Sie zunächst eine Datensatzgruppe für die
Seite, ein passendes Seitenlayout für den dynamischen Inhalt und eine Navigationsleiste für Datensatzgruppen
erstellen.
640
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Datensatzgruppen” on page 605
“Navigationsleiste für Datensatzgruppen erstellen” on page 634
“Mehrere Datensatzgruppen-Ergebnisse anzeigen” on page 637
“Dynamische Tabellen erstellen” on page 638
Einfache Datensatzzähler erstellen
Anhand von Datensatzzählern können Besucher herausfinden, wo sie sich, gemessen an der gemeldeten Gesamtzahl
der Datensätze, in einer Reihe von Datensätzen befinden. Daher sind Datensatzzähler nützliche Serververhalten, die
eine Webseite attraktiver machen können.
Einen einfachen Datensatzzähler können Sie mit dem Serverobjekt „Navigationsstatus für Datensatzgruppe“ erstellen.
Mit diesem Serverobjekt wird ein Texteintrag auf der Seite erstellt, der den aktuellen Datensatzstatus angibt. Mit den
Seitenentwurfswerkzeugen von Dreamweaver können Sie den Datensatzzähler an Ihre Anforderungen anpassen.
1 Setzen Sie die Einfügemarke an die Stelle, an der Sie den Datensatzzähler einfügen möchten.
2 Wählen Sie „Einfügen“ > „Anwendungsobjekte“ > „Anzahl der Datensätze anzeigen“ > „Navigationsstatus für
Datensatzgruppe“. Wählen Sie die Datensatzgruppe im Popupmenü „Datensatzgruppe“ aus und klicken Sie auf
„OK“.
Das Serverobjekt „Navigationsstatus für Datensatzgruppe“ fügt einen textbasierten Datensatzzähler ein, der in etwa
folgendermaßen aussieht:
In der Live-Ansicht wird der Zähler ähnlich wie im folgenden Beispiel dargestellt:
Datensatzzähler erstellen und auf der Seite einfügen
❖ Wählen Sie im Dialogfeld „Navigationsstatus für Datensatzgruppe einfügen“ die Datensatzgruppe aus, durch die
die Navigation erfolgen soll, und klicken Sie dann auf „OK“.
Benutzerdefinierte Datensatzzähler erstellen
Mithilfe individueller Datensatzzähler-Verhalten können Sie benutzerdefinierte Datensatzzähler erstellen. Der vom
Serverobjekt „Navigationsstatus für Datensatzgruppe“ eingefügte Datensatzzähler besteht aus einer einfachen,
einzeiligen Tabelle. Benutzerdefinierte Datensatzzähler können jedoch komplexer gestaltet werden. Sie haben
verschiedene Möglichkeiten, die Entwurfselemente kreativ anzuordnen, und Sie können jedem Element ein passendes
Serververhalten zuweisen.
Folgende Serververhalten für Datensatzzähler stehen zur Verfügung:
• Erste Datensatznummer anzeigen
• Letzte Datensatznummer anzeigen
• Datensätze gesamt anzeigen
Wenn Sie einen benutzerdefinierten Datensatzzähler für eine Seite erstellen möchten, müssen Sie zunächst eine
Datensatzgruppe für die Seite, ein passendes Seitenlayout für den dynamischen Inhalt und eine Navigationsleiste für
Datensatzgruppen erstellen.
641
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
In diesem Beispiel wird ein Datensatzzähler erstellt, der ähnlich wie der Beispielzähler im vorigen Abschnitt aussieht.
Die Platzhalter für den Datensatzzähler, die in die Seite eingefügt werden, sind in diesem Beispiel im Schriftstil Sans-
Serif dargestellt. Der in diesem Beispiel erstellte Datensatzzähler sieht folgendermaßen aus:
Anzeige der Datensätze
StartRow bis EndRow von RecordSet.RecordCount.
1 Geben Sie in der Entwurfsansicht den Text für den Zähler auf der Seite ein. Sie können diesen Text frei wählen, z. B.
Displaying records thru of .
2 Setzen Sie die Einfügemarke an das Ende der Textzeichenfolge.
3 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“).
4 Klicken Sie oben links auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie die Option „Anzahl der
Datensätze anzeigen“. Wählen Sie dann im Untermenü die Option „Datensätze gesamt anzeigen“. Das Verhalten
„Datensätze gesamt anzeigen“ wird der Seite hinzugefügt und an der Position der Einfügemarke wird ein
Platzhalter eingefügt. Die Textzeichenfolge sieht nun folgendermaßen aus:
Displaying records thru of {Recordset1.RecordCount}.
5 Setzen Sie die Einfügemarke hinter das Wort records und wählen Sie die Nummer des anzuzeigenden Start-
Datensatzes im Bedienfeld „Serververhalten“ > Plussymbol-Schaltfläche (+) > „Datensatzzähler“ aus. Die
Textzeichenfolge sieht nun folgendermaßen aus:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6 Setzen Sie dann die Einfügemarke zwischen die Wörter through und of und wählen Sie die Nummer des
anzuzeigenden End-Datensatzes im Bedienfeld „Serververhalten“ > Plussymbol-Schaltfläche (+) >
„Datensatzzähler“ aus. Die Textzeichenfolge sieht nun folgendermaßen aus:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
7 Überprüfen Sie, ob der Zähler korrekt funktioniert, indem Sie die Seite in der Live-Ansicht anzeigen. Der Zähler
ähnelt dem folgenden Beispiel:
Displaying records 1 thru 8 of 40.
Wenn die Ergebnisseite einen Navigationshyperlink enthält, mit dem die nächste Datensatzgruppe angezeigt werden
kann, sieht der Zähler folgendermaßen aus, nachdem Sie auf den Navigationshyperlink geklickt haben:
Showing records 9 thru 16 of 40.
Vordefinierte Datenformate verwenden
Zum Lieferumfang von Dreamweaver gehören mehrere vordefinierte Datenformate, die Sie auf dynamische
Datenelemente anwenden können, wie Datenformate für Datum/Uhrzeit, Währungen, Ziffern und Prozente.
Datenformate auf dynamischen Inhalt anwenden
1 Wählen Sie im Dokumentfenster den Platzhalter für dynamische Inhalte aus.
2 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ einzublenden.
3 Klicken Sie in der Spalte „Format“ auf den Abwärtspfeil.
Wenn der Abwärtspfeil nicht sichtbar ist, erweitern Sie das Bedienfeld.
4 Wählen Sie im Popupmenü „Format“ die gewünschte Kategorie für das Datenformat aus.
Achten Sie darauf, dass das Datenformat für die zu formatierenden Daten geeignet ist. Die Währungsformate
funktionieren zum Beispiel nur dann, wenn die dynamischen Daten numerisch sind. Beachten Sie auch, dass die Daten
nur mit jeweils einem Format belegt werden können.
642
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
5 Überprüfen Sie, ob das Format korrekt angewendet wurde, indem Sie die Vorschau der Seite in der Live-Ansicht
anzeigen.
Datenformate anpassen
1 Öffnen Sie eine Seite, die dynamischen Inhalt enthält, in der Entwurfsansicht.
2 Wählen Sie die dynamischen Daten aus, deren Format Sie anpassen möchten.
Das gebundene Datenelement, dessen dynamischen Text Sie ausgewählt haben, wird im Bedienfeld „Bindungen“
(„Fenster“ > „Bindungen“) hervorgehoben. In diesem Bedienfeld werden für das ausgewählte Element zwei Spalten
angezeigt, nämlich „Bindung“ und „Format“. Falls die Spalte „Format“ nicht sichtbar ist, verbreitern Sie das
Bedienfeld „Bindungen“ entsprechend.
3 Klicken Sie im Bedienfeld „Bindungen“ in der Spalte „Format“ auf den Abwärtspfeil, um das Popupmenü der
verfügbaren Datenformate anzuzeigen.
Wenn der Abwärtspfeil nicht sichtbar ist, verbreitern Sie das Bedienfeld entsprechend.
4 Wählen Sie im Popupmenü den Befehl „Formatliste bearbeiten“ aus.
5 Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.
a Wählen Sie in der Liste das Format aus und klicken Sie auf „Bearbeiten“.
b Ändern Sie beliebige der folgenden Parameter in den daraufhin angezeigten Dialogfeldern für Währung, Ziffer
oder Prozent. Klicken Sie dann auf „OK“.
• Legen Sie die Anzahl der Dezimalstellen fest.
• Legen Sie fest, ob bei Dezimalzahlen eine Null vorangestellt werden soll.
• Legen Sie fest, ob für negative Werte ein Minuszeichen oder Klammern verwendet werden sollen.
• Legen Sie fest, ob Ziffern gruppiert werden sollen.
c Um ein Datenformat zu löschen, klicken Sie in der Liste auf das Format und dann auf die Schaltfläche mit dem
Minuszeichen (–).
Datenformate erstellen (nur ASP)
1 Öffnen Sie eine Seite, die dynamischen Inhalt enthält, in der Entwurfsansicht.
2 Wählen Sie die dynamischen Daten aus, für die Sie ein benutzerdefiniertes Format erstellen möchten.
3 Wählen Sie „Fenster“ > „Bindungen“, um das Bedienfeld „Bindungen“ anzuzeigen, und klicken Sie in der Spalte
„Format“ auf den Pfeil nach unten. Wenn der Abwärtspfeil nicht sichtbar ist, erweitern Sie das Bedienfeld.
4 Wählen Sie im Popupmenü den Befehl „Formatliste bearbeiten“.
5 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie einen Formattyp aus.
6 Definieren Sie das Format und klicken Sie auf „OK“.
7 Geben Sie einen Namen für das neue Format in die Spalte „Name“ ein. Klicken Sie auf „OK“.
Note: Obwohl in Dreamweaver nur Datenformate für ASP-Seiten erstellt werden können, ist es für Benutzer von
ColdFusion und PHP möglich, von anderen Entwicklern erstellte Formate herunterzuladen oder Serverformate zu
erstellen und auf Dreamweaver Exchange bereitzustellen. Weitere Informationen zur Serverformat-API finden Sie im
Handbuch „Erweitern von Dreamweaver“ („Hilfe“ > „Erweitern von Dreamweaver“ > „Serverformate“).
643
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Live-Daten anzeigen
Die Funktion für die Live Data-Ansicht ist ab Dreamweaver CS5 veraltet. Sie wurde durch die optimierte Funktion für
die Live-Ansicht ersetzt.
Damit Sie Live-Daten in der Live-Ansicht anzeigen können, müssen Sie folgende Schritte ausführen:
• Definieren Sie einen Ordner zum Verarbeiten dynamischer Seiten (z. B. einen Stammordner auf einem
ColdFusion-Server auf Ihrem Computer oder einem Remote-Computer).
Wenn beim Öffnen der Live-Ansicht eine Fehlermeldung auf der Seite angezeigt wird, überprüfen Sie, ob im
Dialogfeld „Site-Definition“ die richtige Web-URL angegeben ist.
• Kopieren Sie zugehörige Dateien (soweit vorhanden) in den Ordner.
• Geben Sie für die Seite alle Parameter an, die sonst ein Benutzer angeben würde.
Live-Daten für Seiten in der Live-Ansicht bereitstellen
1 Öffnen Sie das Dialogfeld „Live-Ansicht-Einstellungen“ („Ansicht“ > „Live-Ansicht-Optionen“ > „Einstellungen
für HTTP-Anforderungen“).
2 Klicken Sie im Bereich „URL-Anforderung“ auf die Schaltfläche mit dem Pluszeichen (+) und geben Sie einen
Parameter ein, der von Ihrer Seite erwartet wird.
3 Geben Sie für jeden Parameter einen Namen und einen Testwert ein.
4 Wählen Sie im Popupmenü „Methode“ die HTML-Formular-Methode aus, die von Ihrer Seite erwartet wird: POST
oder
GET.
5 Um die Einstellungen für die aktuelle Seite zu speichern, wählen Sie „Einstellungen für dieses Dokument
speichern“ aus und klicken dann auf „OK“.
Note: Die Einstellungen können nur gespeichert werden, wenn „Design Notes“ aktiviert ist („Datei“ > „Design
Notes“).
Fehlerbehebung der Anzeige von Live-Daten in der Live-Ansicht
Probleme beim Anzeigen von Live-Daten in der Live-Ansicht können meist auf fehlende oder falsche Werte im
Dialogfeld „Site-Definition“ („Site“ > „Sites bearbeiten) zurückgeführt werden.
Überprüfen Sie die Einstellungen für den Server, den Sie als Testserver angegeben haben. In der Option, in der im
Dialogfeld „Site-Definition“ ein Serverordner oder ein Stammordner eingegeben werden muss, müssen Sie einen
Ordner angeben, in dem dynamische Seiten verarbeitet werden können. Es folgt ein Beispiel für einen geeigneten
Serverordner, wenn Sie auf Ihrer Festplatte IIS oder PWS ausführen:
C:\Inetpub\wwwroot\myapp\
Vergewissern Sie sich, dass im Feld „Web-URL“ eine URL angegeben ist, die dem Serverordner entspricht (bzw.
zugeordnet) ist. Wenn auf dem lokalen Computer beispielsweise PWS oder IIS ausgeführt wird, müssen die folgenden
Remote-Ordner folgende Web-URLs aufweisen:
Remote-Ordner Web-URL
C:\Inetpub\wwwroot\ http://localhost/
C:\Inetpub\wwwroot\myapp\ http://localhost/myapp/
C:\Inetpub\wwwroot\fs\planes http://localhost/fs/planes
644
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Zwischen Ansichten im Dokumentfenster umschalten” on page 19
“Seitenvorschau in der Live-Ansicht” on page 312
“Vorschau dynamischer Seiten in einem Browser” on page 600
Hinzufügen benutzerdefinierter Serververhalten
Benutzerdefinierte Serververhalten
In Dreamweaver sind mehrere Serververhalten integriert, mit denen Sie einer Site auf einfache Weise dynamische
Funktionen verleihen können. Sie können die Funktionalität von Dreamweaver erweitern, indem Sie neue
Serververhalten erstellen, die Ihren Entwicklungsbedürfnissen entsprechen, oder indem Sie Serververhalten von der
Dreamweaver Exchange-Website herunterladen.
Bevor Sie eigene Serververhalten erstellen, sollten Sie auf der Dreamweaver Exchange-Website nachsehen, ob bereits
jemand ein Serververhalten mit der für Ihre Website gewünschten Funktionalität entwickelt hat. Oft kommt es vor,
dass ein anderer Entwickler ein Serververhalten erstellt und getestet hat, das Ihren Anforderungen entspricht.
Zugriff auf Dreamweaver Exchange
1 In Dreamweaver können Sie folgendermaßen auf Dreamweaver Exchange zugreifen:
• Wählen Sie „Hilfe“ > „Dreamweaver Exchange“.
• Wählen Sie „Fenster“ > „Serververhalten“, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie
„Weitere Verhalten“.
Die Dreamweaver Exchange-Webseite wird im Browser geöffnet.
2 Melden Sie sich mit Ihrer Adobe-ID bei Exchange an. Falls Sie noch keine Dreamweaver Exchange-ID für sich
erstellt haben, befolgen Sie die Anweisungen zum Eröffnen eines Adobe-Kontos.
Serververhalten oder andere Erweiterungen in Dreamweaver installieren
1 Starten Sie den Extension Manager, indem Sie „Befehle“ > „Erweiterungen verwalten“ wählen.
2 Wählen Sie im Extension Manager „Datei“ > „Erweiterung installieren“.
Weitere Informationen finden Sie unter Extension Manager verwenden.
Arbeitsablauf für benutzerdefinierte Serververhalten
Wenn Sie als Webentwickler Erfahrung mit ColdFusion, JavaScript, VBScript oder PHP haben, können Sie
benutzerdefinierte Serververhalten programmieren. Das Erstellen von Serververhalten umfasst folgende
Einzelaufgaben:
• Schreiben Sie einen oder mehrere Codeblöcke, die die erforderliche Aktion durchführen.
• Legen Sie fest, wo der Codeblock in den HTML-Code der Seite eingefügt werden soll.
• Falls das Serververhalten erfordert, dass ein Wert für einen Parameter angegeben wird: Erstellen Sie ein Dialogfeld,
in dem der Webentwickler, der das Verhalten anwendet, aufgefordert wird, einen entsprechenden Wert zu liefern.
• Testen Sie ein Serververhalten, bevor es anderen Personen zur Verfügung gestellt wird.
645
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
More Help topics
“Parameter für das Serververhalten anfordern” on page 652
“Serververhalten testen” on page 655
Serververhalten-Erstellung verwenden
Mit der Serververhalten-Erstellung können Sie die Codeblöcke hinzufügen, die vom Serververhalten in eine Seite
eingefügt werden.
1 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), klicken Sie auf die Schaltfläche mit
dem Pluszeichen (+) und wählen Sie „Neues Serververhalten“.
2 Wählen Sie im Popupmenü „Dokumenttyp“ den Dokumenttyp aus, für den Sie das Serververhalten entwickeln.
3 Geben Sie im Feld „Name“ einen Namen für das Serververhalten ein.
4 (Optional) Wenn Sie ein vorhandenes Serververhalten kopieren und dem Verhalten hinzufügen möchten, an dem
Sie gerade arbeiten, wählen Sie die Option „Vorhandenes Serververhalten kopieren“ aus und dann im Popupmenü
„Zu kopierendes Verhalten“ das gewünschte Serververhalten. Klicken Sie auf „OK“.
Das Dialogfeld „Serververhalten-Erstellung“ wird angezeigt.
5 Um einen neuen Codeblock hinzuzufügen, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), geben Sie
einen Namen für den Codeblock ein und klicken Sie anschließend auf „OK“.
Der von Ihnen eingegebene Name wird in der Serververhalten-Erstellung angezeigt, wobei die entsprechenden Skript-
Tags im Feld „Codeblock“ sichtbar sind.
6
Geben Sie im Feld „Codeblock“ den Laufzeit-Code ein, der zum Implementieren des Serververhaltens erforderlich ist.
Note: Wenn Sie im Feld „Codeblock“ Code eingeben, können Sie für jeden benannten Codeblock (z. B.
myBehavior_block1, myBehavior_block2, myBehavior_blockn usw.) jeweils nur ein Tag oder einen Codeblock
einfügen. Wenn mehrere Tags oder Codeblöcke einzugeben sind, müssen Sie für jedes Tag und jeden Codeblock einen
separaten Codeblock erstellen. Sie können Code auch von anderen Seiten kopieren und einfügen.
7 Setzen Sie die Einfügemarke an die Stelle im Codeblock, an der Sie den Parameter einfügen möchten, oder wählen
Sie eine Zeichenfolge aus, die durch einen Parameter ersetzt werden soll.
8 Klicken Sie auf die Schaltfläche „Parameter in Codeblock einfügen“.
9 Geben Sie im Feld „Parametername“ einen Namen für den Parameter (z. B. Sitzung) ein und klicken Sie auf „OK“.
Der Parameter wird in den Codeblock an der Stelle eingefügt, an der Sie die Einfügemarke vor dem Definieren des
Parameters platziert haben. Wenn Sie eine Zeichenfolge markiert haben, werden alle Fundstellen dieser Zeichenfolge
im Codeblock durch eine Parametermarkierung ersetzt (z. B.
@@Session@@).
10 Wählen Sie im Popupmenü „Code einfügen“ eine Option aus, die angibt, an welcher Stelle die Codeblöcke
eingebettet werden sollen.
11 (Optional) Wenn Sie weitere Informationen zu dem Serververhalten eingeben möchten, klicken Sie auf die
Schaltfläche „Erweitert“.
12 Wenn Sie weitere Codeblöcke erstellen müssen, wiederholen Sie die Schritte 5 bis 11.
13 Wenn das Serververhalten die Eingabe von Parametern erfordert, müssen Sie ein Dialogfeld erstellen, das
Parameter von der Person entgegennimmt, die das Verhalten anwendet. Siehe nachstehender Link.
14 Nachdem Sie alle erforderlichen Arbeitsschritte zum Erstellen des Serververhaltens ausgeführt haben, klicken Sie
auf „OK“.
Das Serververhalten wird im Bedienfeld „Serververhalten“ aufgeführt.
646
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
15 Testen Sie das Serververhalten und vergewissern Sie sich, dass es ordnungsgemäß funktioniert.
More Help topics
“Wiederholen von Codeblöcken mit der Schleifenanweisung” on page 650
“Richtlinien für die Kodierung” on page 654
“Parameter für das Serververhalten anfordern” on page 652
“Hinzufügen benutzerdefinierter Serververhalten” on page 644
Erweiterte Optionen
Nachdem Sie für jeden Codeblock den Quellcode und eine Einfügeposition festgelegt haben, ist das Serververhalten
vollständig definiert. In den meisten Fällen brauchen Sie keine zusätzlichen Informationen anzugeben.
Fortgeschrittene Benutzer können die folgenden Optionen einstellen:
Kennzeichner Hiermit legen Sie fest, ob der Codeblock als Kennzeichner behandelt werden soll.
Standardmäßig ist jeder Codeblock ein Kennzeichner. Wenn Dreamweaver einen Kennzeichner-Codeblock an einer
beliebigen Stelle innerhalb eines Dokuments findet, wird das Verhalten im Bedienfeld „Serververhalten“ aufgelistet.
Mit der Option „Kennzeichner“ geben Sie an, ob der Codeblock als Kennzeichner behandelt werden soll.
Mindestens einer der Codeblöcke eines Serververhaltens muss ein Kennzeichner sein. Ein Codeblock sollte kein
Kennzeichner sein, wenn eine der folgenden Bedingungen erfüllt ist: Derselbe Block wird von einem anderen
Serververhalten verwendet oder der Codeblock ist so einfach, dass er auf der Seite bereits zufällig enthalten sein kann.
Serververhalten-Titel Hiermit legen Sie den Titel des Verhaltens im Bedienfeld „Serververhalten“ fest.
Wenn der Autor der Webseite im Bedienfeld „Serververhalten“ auf die Schaltfläche mit dem Pluszeichen (+) klickt,
wird der Titel des neuen Serververhaltens im Popupmenü angezeigt. Wenn der Autor eine Instanz eines
Serververhaltens auf ein Dokument anwendet, wird das Verhalten in der Liste der angewandten Verhalten im
Bedienfeld „Serververhalten“ angezeigt. Im Feld „Serververhalten-Titel“ legen Sie den Inhalt des Plus-
Popupmenüs (+) und der Liste der angewandten Verhalten fest.
Der in diesem Feld ursprünglich angezeigte Wert ist der Name, den Sie im Dialogfeld „Neues Serververhalten“
angegeben haben. Beim Definieren von Parametern wird der Name automatisch aktualisiert und die Parameter
werden in Klammern nach dem Namen des Serververhaltens angezeigt.
Set Session Variable (@@Name@@, @@Value@@)
Wenn der Benutzer den Standardwert übernimmt, werden alle Angaben, die sich vor den Klammern befinden, im
Plus-Popupmenü (+) angezeigt (z. B. „Set Session Variable“). Der Name und die Parameter werden in der Liste der
angewandten Verhalten angezeigt, z. B. „Set Session Variable ("abcd", "5")“.
Auszuwählender Codeblock Hiermit legen Sie fest, welcher Codeblock ausgewählt wird, wenn das Verhalten im
Bedienfeld „Serververhalten“ ausgewählt wird.
Wenn Sie ein Serververhalten anwenden, wird einer der Codeblöcke innerhalb des Verhaltens als „auszuwählender
Codeblock“ gekennzeichnet. Wenn Sie das Serververhalten anwenden und anschließend das Verhalten im Bedienfeld
„Serververhalten“ auswählen, wird der gekennzeichnete Block im Dokumentfenster ausgewählt. Standardmäßig wählt
Dreamweaver den ersten Codeblock aus, der sich nicht oberhalb des Tags
html befindet. Wenn sich alle Codeblöcke
oberhalb des Tags
html befinden, wird der erste Block ausgewählt. Fortgeschrittene Benutzer können festlegen,
welcher Codeblock ausgewählt wird.
647
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Codeblöcke erstellen
Die Codeblöcke, die Sie in der Serververhalten-Erstellung einrichten, werden in ein Serververhalten integriert, das im
Bedienfeld „Serververhalten“ angezeigt wird. Bei dem Code kann es sich um einen beliebigen Laufzeit-Code für das
angegebene Servermodell handeln. Wenn Sie beispielsweise ColdFusion als Dokumenttyp für Ihr benutzerdefiniertes
Serververhalten wählen, muss der von Ihnen geschriebene Code ein gültiger ColdFusion-Code sein, der auf einem
ColdFusion-Anwendungsserver ausführbar ist.
Sie können die Codeblöcke direkt in der Serververhalten-Erstellung einrichten oder den Code aus anderen Quellen
kopieren und einfügen. Jeder Codeblock, den Sie in der Serververhalten-Erstellung einrichten, muss ein einzelnes Tag
oder ein einzelner Skriptblock sein. Wenn Sie mehrere Tagblöcke einfügen müssen, teilen Sie diese in separate
Codeblöcke auf.
Bedingungen in Codeblöcken
In Dreamweaver können Sie Codeblöcke mit Steueranweisungen entwickeln, die bedingt ausgeführt werden. Die
Serververhalten-Erstellung verwendet die Anweisungen
if, elseif und else und kann Serververhaltensparameter
enthalten. Dadurch können Sie wechselnde Textblöcke basierend auf den OR-Beziehungen der
Serververhaltensparameter eingeben.
Das folgende Beispiel zeigt die Anweisungen
if, elseif und else. Die eckigen Klammern ([ ]) bezeichnen optionalen
Code; das Sternchen (*) bezeichnet null oder mehr Instanzen. Soll ein Teil eines Codeblocks bzw. der gesamte
Codeblock nur dann ausgeführt werden, wenn eine oder mehrere bestimmte Bedingungen erfüllt sind, verwenden Sie
die folgende Syntax:
<@ if (expression1) @>conditional text1[<@ elseif (expression2) @>conditional text2]*[<@ else
@>
conditional text3]<@ endif @>
Als Bedingungsausdruck kann jeder JavaScript-Ausdruck dienen, der mit der JavaScript-Funktion eval()
ausgewertet werden kann. Der Ausdruck kann einen Serververhalten-Parameter enthalten, der durch die Zeichenfolge
„@@“ gekennzeichnet ist. (Die Zeichenfolge „@@“ dient zum Unterscheiden des Parameters von JavaScript-Variablen
und -Schlüsselwörtern.)
Bedingte Anweisungen effektiv verwenden
Wenn Sie die Anweisungen
if, else und elseif im XML-Tag insertText verwenden, wird der Mitgliedertext
vorverarbeitet, um die
if-Anweisungen aufzulösen und zu bestimmen, welcher Text in das Ergebnis aufgenommen
werden soll. Die Anweisungen
if und elseif verwenden als Argument den Ausdruck. Der Bedingungsausdruck ist
der gleiche wie derjenige für JavaScript-Bedingungsausdrücke und kann auch Serververhaltensparameter enthalten.
Mit Anweisungen wie dieser können Sie zwischen alternativen Codeblöcken basierend auf den Werten von bzw. den
Beziehungen zwischen Serververhaltensparametern wählen.
Beispielsweise stammt der nachstehende JSP-Code aus einem Dreamweaver-Serververhalten, das einen bedingten
Codeblock verwendet:
@@rsName@@.close();
<@ if (@@callableName@@ != '') @>
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();<@ else @>
@@rsName@@ = Statement@@rsName@@.executeQuery();
<@ endif @>
@@rsName@@_hasData = @@rsName@@.next();
648
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Der bedingte Codeblock beginnt mit <@ if (@@callableName@@ != '') @> und endet mit <@ endif @>. Wenn
also ein Benutzer bei diesem Code im Dialogfeld Serververhalten für den Parameter
@@callableName@@ einen Wert
eingibt, der Parameterwert von
@@callableName@@ also nicht leer ist oder den Wert „null“ repräsentiert
(
(@@callableName@@ != ''), dann wird der bedingte Codeblock durch die folgende Anweisung ersetzt:
@@callableName@@.execute();
@@rsName@@ = @@callableName@@.getResultSet();
Andernfalls wird der bedingte Codeblock durch diese Anweisung ersetzt:
@@rsName@@ = Statement@@rsName@@.executeQuery();
More Help topics
“Wiederholen von Codeblöcken mit der Schleifenanweisung” on page 650
Codeblöcke positionieren
Beim Erstellen von Codeblöcken mit der Serververhalten-Erstellung müssen Sie festlegen, an welcher Stelle ein
Codeblock im HTML-Code der Seite eingefügt werden soll.
Wenn Sie beispielsweise einen Codeblock oberhalb des öffnenden
<html>-Tags einfügen, müssen Sie anschließend die
Position des Codeblocks relativ zu anderen Tags, Skripts und Serververhalten in diesem Abschnitt des HTML-Codes
der Seite angeben. Häufig werden Verhalten entweder vor oder nach Datensatzgruppenabfragen eingefügt, die sich
möglicherweise ebenfalls im Seitencode vor dem Anfangs-Tag
<html> befinden.
Wenn Sie im Popupmenü „Code einfügen“ eine Positionierungsoption wählen, ändern sich die im Popupmenü
„Relative Position“ verfügbaren Optionen, sodass nur die für den entsprechenden Teil der Seite relevanten Optionen
zur Auswahl stehen. Wenn Sie beispielsweise im Popupmenü „Code einfügen“ die Option „Vor dem Tag
<html>“
gewählt haben, werden im Popupmenü „Relative Position“ nur die Optionen angezeigt, die auf diesen Teil der Seite
zutreffen.
Die folgende Tabelle zeigt die verfügbaren Einfügeoptionen für Codeblock und die jeweils verfügbaren relativen
Positionierungsoptionen:
Optionen für „Code einfügen“ Optionen für „Relative Position“
Vor dem Tag <html>
• Am Anfang der Datei
• Unmittelbar vor den Datensatzgruppen
• Unmittelbar nach den Datensatzgruppen
• Direkt oberhalb des Tags <html>
• Benutzerdefinierte Position
649
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Wenn Sie eine benutzerdefinierte Position festlegen möchten, müssen Sie dem Codeblock eine Gewichtung zuweisen.
Verwenden Sie die Option „Benutzerdefinierte Position“, wenn Sie mehrere Codeblöcke in einer bestimmten
Reihenfolge einfügen müssen. Wenn Sie beispielsweise nach den Codeblöcken, die Datensatzgruppen öffnen, eine
geordnete Reihe von drei Codeblöcken hinzufügen möchten, weisen Sie dem ersten Block die Gewichtung 60, dem
zweiten Block die Gewichtung 65 und dem dritten Block die Gewichtung 70 zu.
Standardmäßig wird mit Dreamweaver allen Datensatz-öffnenden Codeblöcken, die oberhalb des
<html>-Tags
eingefügt werden, eine Gewichtung von 50 zugeordnet. Wenn mehrere Blöcke dieselbe Gewichtung haben, legt
Dreamweaver die Reihenfolge der Blöcke auf Zufallsbasis fest.
More Help topics
“Parameter für das Serververhalten anfordern” on page 652
“Richtlinien für die Kodierung” on page 654
“Benutzerdefinierte Serververhalten” on page 644
“Codeblöcke erstellen” on page 647
“Serververhalten testen” on page 655
Codeblöcke positionieren (allgemeine Anweisungen)
1 Erstellen Sie mit der Serververhalten-Erstellung einen Codeblock.
2 Wählen Sie im Dialogfeld „Serververhalten-Erstellung“ im Popupmenü „Code einfügen“ eine Position aus, an der
der Codeblock eingefügt werden soll.
3 Wählen Sie im Dialogfeld „Serververhalten-Erstellung“ eine Position relativ zu der Position aus, die Sie im
Popupmenü „Code einfügen“ gewählt haben.
4 Wenn der Codeblock fertig ist, klicken Sie auf „OK“.
Das Serververhalten wird im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) aufgeführt. Klicken Sie auf
die Schaltfläche mit dem Pluszeichen (+) um das Serververhalten anzuzeigen.
5 Testen Sie das Serververhalten und vergewissern Sie sich, dass es ordnungsgemäß funktioniert.
Unterhalb des Tags </html>
• Vor dem Ende der Datei
• Vor dem Ende der Datensatzgruppe
• Nach dem Ende der Datensatzgruppe
• Nach dem Tag </html>
• Benutzerdefinierte Position
Relativ zu einem bestimmten Tag Wählen Sie im Popupmenü „Tag“ ein Tag aus und dann eine der Positionierungsoptionen für das
Tag.
Relativ zur Auswahl Vor der Auswahl
Nach der Auswahl
Auswahl ersetzen
Um die Auswahl legen
Optionen für „Code einfügen“ Optionen für „Relative Position“
650
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Codeblöcke relativ zu anderen Tags auf der Seite positionieren
1 Wählen Sie im Popupmenü „Code einfügen“ die Option „Relativ zu einem bestimmten Tag“.
2 Geben Sie im Feld „Tag“ das Tag ein oder wählen Sie im Popupmenü ein Tag aus.
Wenn Sie ein Tag eingeben, lassen Sie die spitzen Klammern (
<>) weg.
3 Geben Sie eine Position relativ zu dem Tag an, indem Sie im Popupmenü „Relative Position“ eine Option wählen.
Codeblöcke relativ zu einem vom Autor der Seite gewählten Tag positionieren
1 Wählen Sie im Popupmenü „Code einfügen“ die Option „Relativ zur Auswahl“.
2 Geben Sie eine Position relativ zur Auswahl an, indem Sie im Popupmenü „Relative Position“ eine Option wählen.
Sie können den Codeblock direkt vor oder direkt nach der Auswahl einfügen. Sie können die Auswahl auch durch
Ihren Codeblock ersetzen oder den Codeblock um die Auswahl legen.
Wenn Sie den Codeblock um die Auswahl legen möchten, darf die Auswahl lediglich aus einem Anfangs-Tag und
einem Schluss-Tag bestehen (ohne Text zwischen den beiden Tags), wie im folgenden Beispiel:
<CFIF Day="Monday"></CFIF>
Fügen Sie den Startteil des Codeblocks vor dem Anfangs-Tag der Auswahl ein und den Schlussteil des Codeblocks
nach dem Schluss-Tag der Auswahl.
Wiederholen von Codeblöcken mit der Schleifenanweisung
Soll ein Teil eines Codeblocks bzw. der gesamte Codeblock mehrmals wiederholt werden, verwenden Sie die folgende
Syntax:
<@ loop (@@param1@@,@@param2@@) @>code block<@ endloop @>
Wenn Sie Serververhalten erstellen, können Sie mithilfe von Schleifenkonstruktionen einen Codeblock eine
bestimmte Anzahl von Malen wiederholen.
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block
<@ endloop @>
Die Schleifenanweisung akzeptiert eine durch Kommas getrennte Liste von Parameter-Arrays als Argumente. In
diesem Fall ermöglichen Parameter-Array-Argumente es dem Benutzer, mehrere Werte für einen Parameter
anzugeben. Der sich wiederholende Text wird n Mal dupliziert, wobei n die Länge der Parameter-Array-Argumente
ist. Falls mehrere Parameter-Array-Argumente angegeben werden, müssen alle Arrays die gleiche Länge besitzen. Bei
der i-ten Auswertung der Schleife, ersetzt das i-te Element des Parameter-Arrays die verknüpften Instanzen im
Codeblock.
Wenn Sie ein Dialogfeld für das Serververhalten erstellen, können Sie dem Dialogfeld ein Steuerelement hinzufügen,
mit dem der Autor der Seite Parameter-Arrays erstellen kann. Dreamweaver enthält ein einfaches Array-
Steuerelement, mit dem Sie Dialogfelder erstellen können. Es lautet „Textfeldliste mit Kommatrennzeichen“ und ist
in der Serververhalten-Erstellung verfügbar. Um komplexere Benutzeroberflächenelemente zu erstellen, lesen Sie in
der API-Dokumentation nach, wie ein Dialogfeld mit einem Steuerelement zum Erstellen von Arrays (z. B. ein
Rastersteuerelement) erstellt wird.
In einer bedingten Anweisung können Sie eine beliebige Anzahl von Bedingungen oder eine Schleifenanweisung
verschachteln. Beispielsweise können Sie festlegen, dass eine Schleife ausgeführt wird, wenn ein Ausdruck wahr ist.
Im folgenden Beispiel wird dargestellt, wie mithilfe solcher sich wiederholender Codeblöcke Serververhalten erstellt
werden können (es handelt sich dabei um ein Beispiel eines ColdFusion-Verhaltens für den Zugriff auf eine
gespeicherte Prozedur):
651
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
<CFSTOREDPROC procedure="AddNewBook"
datasource=#MM_connection_DSN#
username=#MM_connection_USERNAME#
password=#MM_connection_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
In diesem Beispiel kann das Tag CFSTOREDPROC null oder mehr CFPROCPARAM-Tags enthalten. Ohne Unterstützung
der Schleifenanweisung besteht jedoch keine Möglichkeit, die
CFPROCPARAM-Tags in das eingefügte CFSTOREDPROC-
Tag einzubeziehen. Wenn dies als Serververhalten ohne Verwendung der Schleifenanweisung erstellt werden sollte,
müssten Sie dieses Beispiel in die folgenden zwei Mitglieder aufteilen: ein
CFSTOREDPROC-Haupt-Tag und ein
CFPROCPARAM-Tag, dessen Mitgliedertyp mehrfach ist.
Unter Verwendung der Schleifenanweisung können Sie die gleiche Prozedur wie folgt schreiben:
<CFSTOREDPROC procedure="@@procedure@@"
datasource=#MM_@@conn@@_DSN#
username=#MM_@@conn@@_USERNAME#
password=#MM_@@conn@@_PASSWORD#>
<@ loop (@@paramName@@,@@value@@,@@type@@) @>
<CFPROCPARAM type="IN"
dbvarname="@@paramName@@"
value="@@value@@"
cfsqltype="@@type@@">
<@ endloop @>
</CFSTOREDPROC>
Note: Zeilenschaltungen nach „@>“ werden ignoriert.
Angenommen, der Benutzer hat die folgenden Parameterwerte in das Dialogfeld „Serververhalten“ eingegeben:
procedure = "proc1"
conn = "connection1"
paramName = ["@CategoryId", "@Year", "@ISBN"]
value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"]
type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
In diesem Fall würde das Serververhalten den folgenden Laufzeitcode in die Seite einfügen:
<CFSTOREDPROC procedure="proc1"
datasource=#MM_connection1_DSN#
username=#MM_connection1_USERNAME#
password=#MM_connection1_PASSWORD#>
<CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#"
cfsqltype="CF_SQL_INTEGER">
<CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#"
cfsqltype="CF_SQL_VARCHAR">
</CFSTOREDPROC>
Note: Parameter-Arrays dürfen außerhalb einer Schleifenanweisung nur als Teil eines bedingten Anweisungsausdrucks
verwendet werden.
652
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Variablen „_length“ und „ _index“ der Schleifenanweisung verwenden
Die Schleifenanweisung besitzt zwei integrierte Variablen, die Sie für eingebettete
if-Bedingungen verwenden
können. Es handelt sich um die Variablen
_length und _index. Die Variable _length wertet die Länge der von der
Schleifenanweisung verarbeiteten Arrays aus, während die Variable
_index den aktuellen Index der
Schleifenanweisung auswertet. Um sicherzustellen, dass die Variablen nur als Anweisungen und nicht als die
Parameter, erkannt werden, die der Schleife zu übergeben sind, schließen Sie keine von beiden in
@@-Zeichen ein.
Ein Beispiel für den Einsatz integrierter Variablen ist ihre Anwendung auf das Attribut
import der Seitenanweisung.
Bei dem Attribut
import müssen Pakete durch Kommas voneinander getrennt werden. Wenn sich die loop-
Anweisung über das gesamte Attribut
import erstreckt, würden Sie den Attributnamen import= nur bei der ersten
Iteration der Schleife ausgeben (dabei wären die schließenden Anführungszeichen (") enthalten), und kein Komma bei
der letzten Iteration. Mit der integrierten Variablen können Sie dies wie folgt ausdrücken:
<@loop (@@Import@@)@>
<@ if(_index == 0)@>import="
<@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>,
<@ endif @>
<@endloop@>
Parameter für das Serververhalten anfordern
Serververhalten erfordern häufig, dass der Autor der Seite einen Parameterwert angibt. Dieser Wert muss eingefügt
werden, bevor der Code des Serververhaltens in die Seite eingefügt wird.
Sie erstellen das Dialogfeld, indem Sie die Parameter definieren, die der Autor der Webseite dem Code hinzufügen
muss. Anschließend erstellen Sie ein Dialogfeld für das Serververhalten, das den Autor der Seite zur Eingabe eines
Parameterwerts auffordert.
Note: Ein Parameter wird dem Codeblock ohne Ihr Zutun hinzugefügt, wenn Sie angeben, dass der Code relativ zu einem
spezifischen Tag eingefügt werden soll, das der Autor der Webseite angibt (wenn Sie also im Popupmenü „Code einfügen“
die Option „Relativ zu einem bestimmten Tag“ gewählt haben). Der Parameter fügt dem Dialogfeld des Verhaltens ein
Tag-Menü hinzu, aus dem der Autor der Webseite ein Tag wählen kann.
Parameter im Code des Serververhaltens definieren
1 Geben Sie im Code an der Stelle, an der der angegebene Parameterwert eingefügt werden soll, eine
Parametermarkierung ein. Der Parameter hat die folgende Syntax:
@@parameterName@@
2 Schließen Sie die Zeichenfolge formParam in Parameterkennungen (@@) ein:
<% Session("lang_pref") = Request.Form("@@formParam@@"); %>
Angenommen, das Serververhalten enthält den folgenden Codeblock:
<% Session("lang_pref") = Request.Form("Form_Object_Name"); %>
Wenn der Autor der Seite zur Angabe des Werts für Form_Object_Name aufgefordert werden soll, schließen Sie die
Zeichenfolge in Parametermarkierungen (
@@) ein:
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>
Sie können auch die Zeichenfolge markieren und anschließend auf die Schaltfläche „Parameter in Codeblock
einfügen“ klicken. Geben Sie einen Parameternamen ein und klicken Sie auf „OK“. Dreamweaver ersetzt jedes
Vorkommen der hervorgehobenen Zeichenfolge durch den in Parametermarkierungen eingeschlossenen
Parameternamen.
653
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Dreamweaver verwendet die in Parametermarkierungen eingeschlossenen Zeichenfolgen zur Beschriftung der
Steuerelemente in dem von ihm erstellten Dialogfeld (siehe nachfolgendes Verfahren). Im Beispiel oben erstellt
Dreamweaver ein Dialogfeld mit folgender Beschriftung:
Note: Parameternamen im Code von Serververhalten dürfen keine Leerzeichen enthalten. Deshalb können auch die
Beschriftungen des Dialogfelds keine Leerzeichen enthalten. Wenn Sie Leerzeichen in die Beschriftung einfügen möchten,
können Sie den erzeugten HTML-Code bearbeiten.
Dialogfeld für das Serververhalten zur Anforderung des Parameterwerts erstellen
1 Klicken Sie in der Serververhalten-Erstellung auf „Weiter“.
2 Um die Reihenfolge der im Dialogfeld angezeigten Steuerelemente zu ändern, wählen Sie einen Parameter aus und
klicken dann auf den nach oben bzw. nach unten gerichteten Pfeil.
3 Um das Steuerelement eines Parameters zu ändern, wählen Sie zuerst den Parameter und dann in der Spalte
„Anzeigen als“ ein anderes Steuerelement aus.
4 Klicken Sie auf „OK“.
Dreamweaver erzeugt ein Dialogfeld mit einem beschrifteten Steuerelement für jeden von Ihnen definierten
Parameter, den der Autor der Seite angegeben muss.
Dialogfeld anzeigen
❖ Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie dann im Popupmenü das benutzerdefinierte Serververhalten aus.
Erstelltes Dialogfeld für das Serververhalten bearbeiten
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Serververhalten bearbeiten“.
2 Wählen Sie das Serververhalten in der Liste aus und klicken Sie auf „Öffnen“.
3 Klicken Sie auf „Weiter“.
In dem nun eingeblendeten Dialogfeld werden alle vom Autor der Webseite bereitzustellenden Parameter, die Sie im
Code definiert haben, aufgelistet.
4 Um die Reihenfolge der im Dialogfeld angezeigten Steuerelemente zu ändern, wählen Sie einen Parameter aus und
klicken dann auf den nach oben bzw. nach unten gerichteten Pfeil.
5 Um das Steuerelement eines Parameters zu ändern, wählen Sie zuerst den Parameter und dann in der Spalte
„Anzeigen als“ ein anderes Steuerelement aus.
6 Klicken Sie auf „OK“.
654
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Serververhalten bearbeiten und ändern
Alle mit der Serververhalten-Erstellung eingerichteten Serververhalten können bearbeitet werden. Dazu gehören auch
Serververhalten, die Sie von der Dreamweaver Exchange-Website heruntergeladen oder von Drittanbietern bezogen
haben.
Wenn Sie ein Serververhalten auf eine Seite anwenden und anschließend in Dreamweaver bearbeiten, werden die
Instanzen des alten Verhaltens nicht mehr im Bedienfeld „Serververhalten“ angezeigt. Das Bedienfeld
„Serververhalten“ durchsucht die Seite nach Code, der mit dem Code von bekannten Serververhalten übereinstimmt.
Wenn der Code eines Serververhaltens geändert wird, werden die früheren Versionen des Verhaltens auf dieser Seite
von dem Bedienfeld nicht mehr erkannt.
More Help topics
“Serververhalten-Erstellung verwenden” on page 645
“Codeblöcke positionieren” on page 648
Alte und neue Version von Verhalten im Bedienfeld beibehalten
❖ Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+), wählen Sie „Neues Serververhalten“ und erstellen Sie eine Kopie des alten Serververhaltens.
Code eines mit der Serververhalten-Erstellung erstellten Serververhaltens bearbeiten
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Serververhalten bearbeiten“.
Im Dialogfeld „Serververhalten bearbeiten“ werden alle Verhalten für die aktuelle Servertechnologie angezeigt.
2 Wählen Sie das Serververhalten aus und klicken Sie auf „Bearbeiten“.
3 Wählen Sie den entsprechenden Codeblock aus und bearbeiten Sie dann den Code, die Parametermarkierungen
oder die Position des Codeblocks, der bzw. die in die Seiten eingefügt werden soll(en).
4 Wenn der modifizierte Code keine Parameter vom Autor der Webseite enthält, klicken Sie auf „OK“.
Dreamweaver erstellt das Serververhalten ohne Dialogfeld neu. Das neue Serververhalten wird im Plus-
Popupmenü (+) des Bedienfelds „Serververhalten“ angezeigt.
5 Wenn der modifizierte Code Parameter vom Autor der Webseite enthält, klicken Sie auf „Weiter“.
Dreamweaver fragt Sie, ob Sie ein neues Dialogfeld erstellen und das vorhandene Dialogfeld überschreiben möchten.
Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf „OK“.
Dreamweaver speichert alle Änderungen in der EDML-Datei des Serververhaltens.
Richtlinien für die Kodierung
Im Allgemeinen sollte der Code des Serververhaltens kompakt und robust geschrieben werden. Autoren von
Webanwendungen sind bezüglich des Codes, der ihren Seiten hinzugefügt wird, sehr empfindlich. Beachten Sie beim
Schreiben von Code die für die Sprache des Dokumenttyps (ColdFusion, JavaScript, VBScript oder PHP) geltenden
Standards. Wenn Sie Kommentare schreiben, behalten Sie die unterschiedlichen technischen Zielgruppen im Auge,
die den Code verstehen müssen, z. B. Web- und Interaktionsdesigner oder andere Webanwendungsentwickler. Fügen
Sie Kommentare ein, die den Zweck des Codes genau beschreiben, sowie spezielle Anweisungen dafür, wie der Code
in die Seite einzufügen ist.
655
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Beachten Sie beim Erstellen von Serververhalten die folgenden Kodierungsrichtlinien:
Fehlerprüfung Eine wichtige Anforderung. Der Code des Serververhaltens sollte mit Fehlersituationen umgehen
können. Versuchen Sie, alle möglichen Fälle abzudecken. Zum Beispiel: Was geschieht, wenn die Anforderung eines
Parameters nicht erfolgreich ist? Was geschieht, wenn von einer Abfrage keine Datensätze zurückgegeben werden?
Eindeutige Namen Eindeutige Namen tragen dazu bei, dass der Programmcode leicht zu identifizieren ist und keine
Konflikte mit vorhandenem Code auftreten. Wenn Ihre Seite beispielsweise eine Funktion mit dem Namen
hideLayer() und eine globale Variable mit dem Namen ERROR_STRING enthält und das Serververhalten Code mit
denselben Namen einfügt, können Konflikte zwischen Serververhalten und bereits vorhandenem Code auftreten.
Programmcode-Präfixe Sie ermöglichen es, eigene Laufzeitfunktionen und globale Variablen auf einer Seite leicht
wiederzuerkennen. Sie können beispielsweise Ihre Initialen verwenden. Verwenden Sie nicht das Präfix
MM_, da es zur
Verwendung in Dreamweaver reserviert ist. Alle Funktionen und globalen Variablen von Dreamweaver beginnen mit
dem Präfix
MM_, um Konflikte mit benutzerdefiniertem Code zu vermeiden.
var MM_ERROR_STRING = "...";
function MM_hideLayer() {
Gleichartige Codeblöcke Vermeiden Sie gleichartige Codeblöcke, damit Ihr Code dem Programmcode in anderen
Blöcken nicht zu stark ähnelt. Wenn ein Codeblock zu stark mit einem anderen Codeblock auf derselben Seite
übereinstimmt, kann der erste Codeblock vom Bedienfeld „Serververhalten“ fälschlicherweise für eine Instanz des
zweiten Codeblocks (oder umgekehrt) gehalten werden. Eine einfache Lösung für dieses Problem besteht darin, einem
Codeblock einen Kommentar hinzuzufügen, um ihn eindeutig zu machen.
More Help topics
“Benutzerdefinierte Serververhalten” on page 644
“Arbeitsablauf für benutzerdefinierte Serververhalten” on page 644
Serververhalten testen
Dreamweaver Exchange empfiehlt, für jedes von Ihnen erstellte Serververhalten die folgenden Tests durchzuführen:
• Wenden Sie das Verhalten vom Bedienfeld „Serververhalten“ aus an. Wenn das Verhalten ein Dialogfeld hat, geben
Sie in jedes Feld gültige Daten ein und klicken Sie auf „OK“. Stellen Sie sicher, dass beim Anwenden des Verhaltens
keine Fehler auftreten. Vergewissern Sie sich, dass der Laufzeitcode für das Serververhalten im Codeinspektor
angezeigt wird.
• Wenden Sie das Serververhalten erneut an und geben Sie dabei in jedes Feld des Dialogfelds ungültige Daten ein.
Lassen Sie Felder leer oder geben Sie große oder negative Zahlen, ungültige Zeichen (beispielsweise /, ?, :, *) oder
Buchstaben in numerische Felder ein. Sie können Überprüfungsroutinen zur Behandlung ungültiger Daten
schreiben. (Überprüfungsroutinen müssen manuell programmiert werden, was jedoch über den Rahmen dieses
Handbuchs hinausgeht.)
Nachdem Sie das Serververhalten erfolgreich auf die Seite angewandt haben, überprüfen Sie Folgendes:
• Vergewissern Sie sich im Bedienfeld „Serververhalten“, dass der Name des Serververhaltens in der Liste der
Verhalten steht, die der Seite hinzugefügt wurden.
• Vergewissern Sie sich, dass Symbole für serverseitige Skripts auf der Seite angezeigt werden (falls zutreffend). Die
generischen Symbole für serverseitige Skripts sind goldene Schilde. Um die Symbole einzublenden, aktivieren Sie
die Option „Unsichtbare Elemente“ („Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“).
• Vergewissern Sie sich in der Codeansicht („Ansicht“ > „Code“), dass kein ungültiger Code erzeugt wird.
656
VERWENDEN VON DREAMWEAVER
Dynamische Seiten erstellen
Last updated 10.4.2012
Wenn Ihr Serververhalten Code in das Dokument einfügt, um eine Verbindung mit einer Datenbank herzustellen,
sollten Sie außerdem eine Testdatenbank erstellen, um den in das Dokument eingefügten Code zu testen.
Überprüfen Sie die Verbindung, indem Sie Abfragen erstellen, die unterschiedliche Gruppen von Daten und
unterschiedlich große Datengruppen zurückgeben.
Übertragen Sie zum Schluss die Seite an den Server und öffnen Sie sie in einem Browser. Sehen Sie sich den HTML-
Quellcode der Seite an und stellen Sie sicher, dass von den serverseitigen Skripts kein ungültiger HTML-Code
generiert wurde.
657
Last updated 10.4.2012
Chapter 21: Visuelles Entwickeln von
Anwendungen
In Adobe® Dreamweaver® CS5 können Sie mithilfe von Adobe ColdFusion, PHP oder ASP Seiten entwickeln, in denen
Sie die Datensätze einer Datenbank durchsuchen, einfügen, löschen und aktualisieren sowie Master- und
Detailinformationen anzeigen und den Zugriff für bestimmte Benutzer einschränken können.
Master- und Detailseiten entwickeln
Master- und Detailseiten
Master- und Detailseiten sind Sätze von Seiten, die zum Organisieren und Anzeigen von Datensatzdaten dienen. Ihre
Site-Besucher können sich darin sowohl einen Überblick über die vorhandenen Daten verschaffen als auch eine
detaillierte Ansicht zu einzelnen Datensätzen anzeigen. Die Masterseite umfasst eine Liste aller Datensätze sowie
Hyperlinks zu Detailseiten, die zusätzliche Informationen über jeden Datensatz enthalten.
Masterseite
658
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Detailseite
Sie können Master- und Detailseiten erstellen, indem Sie ein Datenobjekt zum Erstellen einer Master- und einer
Detailseite in einem Durchgang einfügen oder indem Sie individualisierte Master- und Detailseiten mithilfe von
Serververhalten erstellen. Wenn Sie Master- und Detailseiten via Serververhalten erstellen, erstellen Sie zunächst eine
Masterseite, in der die Datensätze aufgelistet werden, und fügen Sie dann Hyperlinks zu den Detailseiten ein.
More Help topics
“Such- und Ergebnisseiten” on page 665
Masterseiten erstellen
Bevor Sie beginnen, müssen Sie eine Datenbankverbindung für Ihre Site definieren.
1 Um eine leere Seite zu erstellen, wählen Sie „Datei“ > „Neu“ > „Leere Seite“ aus. Wählen Sie dann einen Seitentyp
aus und klicken Sie auf „Erstellen“. Diese Seite wird als Masterseite verwendet.
2 Definieren Sie eine Datensatzgruppe.
Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+).
Wählen Sie dann die Option „Datensatzgruppe“ und anschließend die gewünschten Optionen aus. Wenn Sie eine
eigene SQL-Anweisung eingeben möchten, klicken Sie auf „Erweitert“.
Sorgen Sie dafür, dass der Datensatz alle Tabellenspalten enthält, die Sie für die Masterseite benötigen. Der Datensatz
muss auch die Datenspalte mit dem eindeutigen Schlüssel für den jeweiligen Datensatz enthalten, also die Datensatz-
ID-Spalte. Im folgenden Beispiel enthält die Spalte „CODE“ Daten, die jeden Datensatz eindeutig kennzeichnen.
659
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Für eine Masterseite ausgewählte Spalten der Datensatzgruppe
In der Regel werden mit der Datensatzgruppe auf der Masterseite nur einige Spalten aus einer Datenbanktabelle
extrahiert, während mit der Datensatzgruppe auf der Detailseite aus der gleichen Tabelle weitere Spalten extrahiert
werden, um die zusätzlichen Detailinformationen bereitzustellen.
Die Datensatzgruppe kann vom Benutzer zur Laufzeit definiert werden. Weitere Informationen finden Sie unter
“Erstellen von Such- und Ergebnisseiten” on page 665.
3 Fügen Sie eine dynamische Tabelle ein, um die Datensätze anzuzeigen.
Setzen Sie die Einfügemarke auf der Seite an die Stelle, an der die dynamische Tabelle erscheinen soll. Wählen Sie
„Einfügen“ > „Datenobjekte“ > „Dynamische Daten“ > „Dynamische Tabelle“, nehmen Sie die gewünschten
Einstellungen vor und klicken Sie auf „OK“.
Wenn Sie die Datensatz-IDs den Benutzern nicht offen legen möchten, können Sie die betreffende Spalte aus der
dynamischen Tabelle löschen. Klicken Sie auf die Seite, um den Fokus auf die Seite zu legen. Verschieben Sie den
Cursor an den oberen Spaltenrand in der dynamischen Tabelle, bis die Spaltenzellen rot umrandet dargestellt werden,
und klicken Sie dann, um die Tabellenspalte auszuwählen. Drücken Sie die Entf-Taste, um die Spalte aus der Tabelle
zu löschen.
More Help topics
“Datensatzgruppen ohne manuelle SQL-Eingabe definieren” on page 611
“Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren” on page 614
“Dynamische Tabellen erstellen” on page 638
Hyperlinks zur Detailseite erstellen
Nachdem Sie die Masterseite erstellt und die Datensatzgruppe hinzugefügt haben, erstellen Sie Hyperlinks, die die
Detailseite öffnen. Anschließend ändern Sie die Hyperlinks so, dass sie die ID des Datensatzes übergeben, den der
Benutzer ausgewählt hat. Anhand dieser ID findet die Detailseite den angeforderten Datensatz in der Datenbank und
zeigt ihn an.
Note: Auf dieselbe Weise erstellen Sie Hyperlinks zu Aktualisierungsseiten. Die Ergebnisseite ist ähnlich wie eine
Masterseite und eine Aktualisierungsseite ist ähnlich wie eine Detailseite.
660
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Erstellen von Datensatz-Aktualisierungsseiten” on page 675
Detailseiten öffnen und die Datensatz-ID übergeben (ColdFusion, PHP)
1 Wählen Sie in der dynamischen Tabelle den Platzhalter für den Text aus, der als Hyperlink dienen soll.
Auf den ausgewählten Platzhalter angewandter Hyperlink.
2 Klicken Sie im Eigenschafteninspektor auf das Ordnersymbol unter dem Feld „Hyperlink“.
3 Klicken Sie auf „Durchsuchen“ und wählen Sie die Detailseite aus. Die Detailseite wird im Eigenschafteninspektor
im Feld „Hyperlink“ angezeigt.
In der dynamischen Tabelle wird der ausgewählte Text als Hyperlink angezeigt. Wenn die Seite auf dem Server
ausgeführt wird, wird der Hyperlink auf den Text in jeder Tabellenzeile angewendet.
4 Wählen Sie in der dynamischen Tabelle auf der Masterseite den Hyperlink aus.
5 (ColdFusion) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der
URL ein:
?recordID=#recordsetName.fieldName#
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck „recordID“ ist der
Name des URL-Parameters. (Sie können einen beliebigen Namen wählen.) Schreiben Sie sich den Namen des URL-
Parameters auf. Sie benötigen ihn später für die Detailseite.
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen
ColdFusion-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurückgibt. Für jede Zeile in der
dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im ColdFusion-Ausdruck
„recordsetName“ durch den Namen Ihrer Datensatzgruppe und „fieldName“ durch den Namen des Felds in der
Datensatzgruppe, das den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer
Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes.
locationDetail.cfm?recordID=#rsLocations.CODE#
Wenn die Seite ausgeführt wird, werden die Werte des Datensatzgruppenfelds „CODE“ in die entsprechenden Zeilen
der dynamischen Tabelle eingefügt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code „CBR“
besitzt, wird in der dynamischen Tabelle in der Zeile „Canberra“ die folgende URL verwendet:
locationDetail.cfm?recordID=CBR
6 (PHP) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der URL ein:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der
Name des URL-Parameters. (Sie können einen beliebigen Namen wählen.) Schreiben Sie sich den Namen des URL-
Parameters auf. Sie benötigen ihn später für die Detailseite.
661
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen
PHP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurückgibt. Für jede Zeile in der
dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im PHP-Ausdruck
recordsetName durch
den Namen Ihrer Datensatzgruppe und
fieldName durch den Namen des Felds in der Datensatzgruppe, die den
jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden
Beispiel besteht das Feld aus eindeutigen Standortcodes.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Wenn die Seite ausgeführt wird, werden die Werte des Datensatzgruppenfelds „CODE“ in die entsprechenden Zeilen
der dynamischen Tabelle eingefügt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code „CBR“
besitzt, wird in der dynamischen Tabelle in der Zeile „Canberra“ die folgende URL verwendet:
locationDetail.php?recordID=CBR
7 Speichern Sie die Seite.
Detailseiten öffnen und die Datensatz-ID übergeben (ASP)
1 Wählen Sie den dynamischen Inhalt aus, der gleichzeitig als Hyperlink verwendet werden soll.
2 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Zu Detailseite wechseln“ aus.
3 Klicken Sie im Feld „Detailseite“ auf „Durchsuchen“ und wählen Sie die Seitendatei aus.
4 Geben Sie an, welchen Wert Sie an die Detailseite übergeben möchten, indem Sie eine Datensatzgruppe und eine
Spalte in den Popupmenüs „Datensatzgruppe“ bzw. „Spalte“ auswählen. In der Regel ist dieser Wert für den
Datensatz spezifisch, beispielsweise die eindeutige Schlüssel-ID des Datensatzes.
5 Gegebenenfalls können an die Detailseite vorhandene Seitenparameter übergeben werden, indem die Optionen
„URL-Parameter“ oder „Formularparameter“ gewählt werden.
6 Klicken Sie auf „OK“.
Ein spezieller Hyperlink umschließt den ausgewählten Text. Wenn der Besucher auf den Hyperlink klickt, übergibt
das Serververhalten „Zu Detailseite wechseln“ einen URL-Parameter, der die Datensatz-ID für die Detailseite enthält.
Lautet der URL-Parameter beispielsweise „id“ und der Name der Detailseite „kundendetails.asp“, kann die URL wie
folgt aussehen, wenn der Besucher auf den Hyperlink klickt:
http://www.meinesite.com/kundendetails.asp?id=43
Mit dem ersten Teil der URL, http://www.meinesite.com/kundendetails.asp, wird die Detailseite geöffnet. Der zweite
Teil, ?id=43, ist der URL-Parameter. Er teilt der Detailseite mit, welcher Datensatz aufzurufen und anzuzeigen ist. Die
Bezeichnung „id“ ist der Name des URL-Parameters und 43 ist dessen Wert. In diesem Beispiel enthält der URL-
Parameter mit dem Wert 43 die ID-Nummer des Datensatzes.
Angeforderten Datensatz abrufen und auf der Detailseite anzeigen
Um den von der Masterseite angeforderten Datensatz anzuzeigen, müssen Sie eine Datensatzgruppe definieren, die
nur einen Datensatz enthält, und die Spalten der Datensatzgruppe mit der Detailseite verbinden.
1 Schalten Sie auf die Detailseite um. Wenn Sie noch nicht über eine Detailseite verfügen, erstellen Sie eine leere Seite
(„Datei“ > „Neu“).
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie im Popupmenü die Option „Datensatzgruppe (Abfrage)“ oder „Datensatz (Abfrage)“.
662
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Das einfache Dialogfeld „Datensatzgruppe“ bzw. „Datensatz“ wird angezeigt. Wird stattdessen das erweiterte
Dialogfeld geöffnet, klicken Sie auf „Einfach“.
3 Benennen Sie die Datensatzgruppe und wählen Sie eine Verbindung und eine Datenquelle aus sowie die
Datenbanktabelle, über die die Daten für Ihre Datensatzgruppe bereitgestellt werden sollen.
4 Wählen Sie im Spaltenbereich die Tabellenspalten, die in die Datensatzgruppe übernommen werden sollen.
Die Datensatzgruppe kann identisch zur Datensatzgruppe auf der Masterseite oder anderslautend sein. In der Regel
hat eine Datensatzgruppe für die Detailseite eine größere Anzahl von Spalten, um mehr Details anzuzeigen.
Wenn die Datensatzgruppen verschieden sind, muss die Datensatzgruppe auf der Detailseite mindestens eine Spalte
aufweisen, die mit dem Datensatz auf der Masterseite übereinstimmt. Die gemeinsame Spalte ist in der Regel die
Datensatz-ID-Spalte, sie kann aber auch das Verknüpfungsfeld verbundener Tabellen sein.
Um nur einige Spalten der Tabelle in die Datensatzgruppe einzubeziehen, klicken Sie auf „Ausgewählt“. Wählen Sie
dann die gewünschten Spalten aus, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf
die jeweiligen Listeneinträge klicken.
5 Füllen Sie den Abschnitt „Filter“ aus, um den Datensatz zu suchen und anzuzeigen, der in dem von der Masterseite
übergebenen URL-Parameter angegeben ist:
• Wählen Sie im ersten Popupmenü im Bereich „Filter“ die Spalte in der Datensatzgruppe aus, deren Werte mit dem
Wert des von der Masterseite übermittelten URL-Parameters übereinstimmen. Wenn der URL-Parameter
beispielsweise eine Datensatz-ID-Nummer übergibt, wählen Sie die Spalte aus, die Datensatz-ID-Nummern
enthält. Im vorangegangenen Beispiel enthält die Spalte „CODE“ der Datensatzgruppe die Werte, die mit dem von
der Masterseite übergebenen URL-Parameter übereinstimmen.
• Wählen Sie im Popupmenü neben dem ersten Menü das Gleichheitszeichen aus (es müsste bereits ausgewählt
sein).
• Wählen Sie im dritten Popupmenü die Option „URL-Parameter“ aus. Die Masterseite übergibt Informationen
mittels eines URL-Parameters an die Detailseite.
• Geben Sie im vierten Textfeld den Namen des URL-Parameters ein, der von der Masterseite übermittelt wird.
6 Klicken Sie auf „OK“. Die Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt.
7 Verbinden Sie die Spalten der Datensatzgruppe mit der Detailseite, indem Sie die Spalten im Bedienfeld
„Bindungen“ („Fenster“ > „Bindungen“) auswählen und auf die Seite ziehen.
Nachdem Sie die Masterseite und die Detailseiten auf den Server geladen haben, können Sie die Masterseite mit einem
Browser öffnen. Wenn Sie auf einen Detail-Hyperlink auf der Masterseite klicken, wird die Detailseite geöffnet, die
genauere Informationen zum ausgewählten Datensatz enthält.
More Help topics
“Testserver einrichten” on page 50
663
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Bestimmte Datensätze abrufen und auf einer Seite anzeigen (ASP)
Sie können ein Serververhalten einfügen, das einen bestimmten Datensatz in einer Datensatzgruppe abruft, sodass Sie
den Datensatz auf der Seite anzeigen können. Das Serververhalten steht nur bei Verwendung des ASP-Servermodells
zur Verfügung.
1 Erstellen Sie eine Seite mit den folgenden Eigenschaften:
• Eine Datensatz-ID, enthalten in einem URL-Parameter, der von einer anderen Seite an die aktuelle Seite
übermittelt wird. Auf der anderen Seite können Sie URL-Parameter mit HTML-Hyperlinks oder einem HTML-
Formular erstellen. Weitere Informationen finden Sie unter “Verwenden von Formularen zum Sammeln von
Benutzerinformationen” on page 710.
• Eine für die aktuelle Seite definierte Datensatzgruppe. Das Serververhalten extrahiert die Datensatzdetails aus
dieser Datensatzgruppe. Anweisungen hierzu finden Sie unter “Datensatzgruppen ohne manuelle SQL-Eingabe
definieren” on page 611 oder “Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren” on page 614.
• Datensatzgruppen-Spalten, die an die Seite gebunden sind. Der betreffende Datensatz muss auf der Seite angezeigt
werden. Weitere Informationen finden Sie unter “Texte dynamisch gestalten” on page 627.
2 Fügen Sie das Serververhalten zum Suchen des im URL-Parameter angegebenen Datensatzes hinzu. Klicken Sie
dazu im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie dann „Seitenerstellung für Datensatzgruppe“ > „Zu bestimmtem Datensatz verschieben“ aus.
3 Wählen Sie im Popupmenü „Verschieben zu Datensatz in“ die Datensatzgruppe aus, die Sie für die Seite festgelegt
haben.
4 Wählen Sie im Popupmenü „In Spalte“ die Spalte aus, die den von der anderen Seite übermittelten Wert enthält.
Wenn die andere Seite beispielsweise eine Datensatz-ID-Nummer übermittelt, wählen Sie die Spalte aus, die
Datensatz-IDs enthält.
5 Geben Sie im Feld „Entspricht URL-Parameter“ den Namen des URL-Parameters ein, der von der anderen Seite
übertragen wird.
Lautet die von der anderen Seite zum Öffnen der Detailseite verwendete URL beispielsweise id=43, geben Sie im Feld
„Entspricht URL-Parameter“ den Namen
id ein.
6 Klicken Sie auf „OK“.
Wird die Seite das nächste Mal von einem Browser angefordert, liest das Serververhalten die Datensatz-ID aus dem
von der anderen Seite übergebenen URL-Parameter und wechselt zu dem angegebenen Datensatz in der
Datensatzgruppe.
Master- und Detailseiten in einem Durchgang erstellen
Bei der Entwicklung von Web-Anwendungen können Sie mit dem Datenobjekt „Master-Detailseitensatz“ Master-
und Detailseiten schnell erstellen.
1 Um eine leere dynamische Seite zu erstellen, wählen Sie „Datei“ > „Neu“ > „Leere Seite“. Wählen ein danach aus
der Liste der Seitentypen eine dynamische Seite aus und klicken Sie dann auf „Erstellen“.
Diese Seite wird als Masterseite verwendet.
2 Definieren Sie einen Datensatz für die Seite.
Vergewissern Sie sich, dass die Datensatzgruppe alle für die Master- und die Detailseiten benötigten Spalten enthält.
In der Regel werden mit der Datensatzgruppe auf der Masterseite nur einige Spalten aus einer Datenbanktabelle
extrahiert, während mit der Datensatzgruppe auf der Detailseite aus der gleichen Tabelle weitere Spalten extrahiert
werden, um die zusätzlichen Detailinformationen bereitzustellen.
664
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
3 Öffnen Sie die Masterseite in der Entwurfsansicht und wählen Sie „Einfügen“ > „Datenobjekte“ > „Master-
Detailseitensatz“.
4 Vergewissern Sie sich, dass im Popupmenü „Datensatzgruppe“ die Datensatzgruppe ausgewählt ist, die die auf der
Masterseite anzuzeigenden Datensätze enthält.
5 Wählen Sie im Bereich „Felder in der Masterseite“ die Spalten der Datensatzgruppe aus, die auf der Masterseite
angezeigt werden sollen.
Standardmäßig werden alle Spalten in der Datensatzgruppe ausgewählt. Enthält Ihre Datensatzgruppe eine Spalte für
einen eindeutigen Schlüssel, z. B.
recordID, wählen Sie diese aus und klicken Sie auf die Schaltfläche mit dem
Minuszeichen (–), damit sie auf der Seite nicht angezeigt wird.
6 Um die Reihenfolge zu ändern, in der die Spalten auf der Masterseite angezeigt werden, wählen Sie eine Spalte in
der Liste aus und klicken Sie auf den nach oben bzw. nach unten gerichteten Pfeil.
Auf der Masterseite werden die Spalten der Datensatzgruppe horizontal in einer Tabelle angeordnet. Durch Klicken
auf den nach oben gerichteten Pfeil wird die Spalte nach links verschoben, durch Klicken auf den nach unten
gerichteten Pfeil nach rechts.
7 Wählen Sie im Popupmenü „Verknüpfen mit Detail von“ die Spalte in der Datensatzgruppe aus, deren angezeigter
Wert auch als Hyperlink auf die Detailseite dient.
Soll beispielsweise jeder Produktname auf der Masterseite einen Hyperlink zur Detailseite haben, wählen Sie die Spalte
der Datensatzgruppe aus, die die Produktnamen enthält.
8 Wählen Sie im Popupmenü „Eindeutigen Schlüssel übergeben“ die Spalte in der Datensatzgruppe aus, deren Werte
die Datensätze kennzeichnen.
In der Regel enthält die ausgewählte Spalte die Datensatz-ID. Dieser Wert wird an die Detailseite übermittelt, um den
vom Besucher ausgewählten Datensatz zu kennzeichnen.
9 Deaktivieren Sie die Option „Numerisch“, wenn die Spalte für den eindeutigen Schlüssel nicht numerisch ist.
Note: Diese Option ist standardmäßig aktiviert, sie wird jedoch nicht für alle Servermodelle angezeigt.
10 Geben Sie an, wie viele Datensätze auf der Masterseite angezeigt werden sollen.
11 Klicken Sie im Feld „Name der Detailseite“ auf „Durchsuchen“ und wählen Sie die von Ihnen erstellte
Detailseitendatei aus, oder geben Sie einen Namen ein und lassen Sie durch das Datenobjekt eine Seitendatei
erstellen.
12 Wählen Sie im Bereich „Felder in der Detailseite“ die auf der Detailseite anzuzeigenden Spalten aus.
Standardmäßig werden alle Spalten in der Datensatzgruppe der Masterseite ausgewählt. Enthält die Datensatzgruppe
eine Spalte für einen eindeutigen Schlüssel, z. B.
recordID, wählen Sie diese aus und klicken Sie auf die Schaltfläche
mit dem Minuszeichen (–), damit sie auf der Detailseite nicht angezeigt wird.
13 Um die Reihenfolge zu ändern, in der die Spalten auf der Detailseite angezeigt werden, wählen Sie eine Spalte in
der Liste aus und klicken auf den nach oben bzw. nach unten gerichteten Pfeil.
Auf der Detailseite werden die Spalten der Datensatzgruppe vertikal in einer Tabelle angeordnet. Durch Klicken auf
den nach oben gerichteten Pfeil wird die Spalte nach oben verschoben, durch Klicken auf den nach unten gerichteten
Pfeil nach unten.
14 Klicken Sie auf „OK“.
Das Datenobjekt erstellt eine Detailseite (soweit Sie nicht bereits selbst eine erstellt haben) und fügt der Master- und
der Detailseite dynamische Inhalte und Serververhalten hinzu.
15 Passen Sie das Layout der Master- und Detailseiten Ihren Anforderungen entsprechend an.
665
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Mit den Seitenentwurfswerkzeugen von Dreamweaver können Sie das Layout der einzelnen Seiten beliebig bearbeiten.
Sie können auch die Serververhalten bearbeiten, indem Sie darauf im Bedienfeld „Serververhalten“ doppelklicken.
Nachdem Sie die Master- und Detailseiten mit dem Datenobjekt erstellt haben, bearbeiten Sie die verschiedenen
Bausteine, die das Datenobjekt in die Seiten einfügt, mit dem Bedienfeld „Serververhalten“ („Fenster“ >
„Serververhalten“).
More Help topics
“Dynamischen Inhalt bearbeiten” on page 631
“Definieren von Quellen für dynamischen Inhalt” on page 611
Erstellen von Such- und Ergebnisseiten
Such- und Ergebnisseiten
In Dreamweaver können Sie Seiten erstellen, mit denen Besucher Ihrer Site eine Datenbank durchsuchen und die
Suchergebnisse anzeigen können.
Um Ihre Webanwendung mit dieser Funktionalität zu erweitern, benötigen Sie in der Regel mindestens zwei spezielle
Seiten. Die erste Seite enthält ein HTML-Formular, in das der Besucher die Suchparameter eingibt. Auch wenn diese
Seite nicht die eigentliche Suche ausführt, wird sie doch als Suchseite bezeichnet.
Die zweite Seite, die Sie benötigen, ist die Ergebnisseite. Sie übernimmt den größten Teil der Verarbeitung. Die
Ergebnisseite übernimmt die folgenden Aufgaben:
• Lesen der über die Suchseite übermittelten Suchparameter
• Herstellen der Verbindung mit der Datenbank und Suchen der Datensätze
• Erstellen einer Datensatzgruppe aus den gefundenen Datensätzen
• Anzeigen des Inhalts der Datensatzgruppe
Gegebenenfalls können Sie auch noch eine Detailseite hinzufügen. Eine Detailseite liefert dem Besucher zusätzliche
Informationen zu einem bestimmten, auf der Ergebnisseite aufgeführten Datensatz.
Wenn Sie nur einen Suchparameter verwenden, können Sie in Dreamweaver Ihre Webanwendung mit
Suchfunktionen ausstatten, ohne dass Sie sich mit SQL-Abfragen und Variablen befassen müssen. Sie entwerfen
dann einfach Ihre Seiten und fügen einige Dialogfelder hinzu. Wenn Sie mehr als einen Suchparameter verwenden,
müssen Sie eine SQL-Anweisung schreiben und dazu mehrere Variablen definieren.
Dreamweaver fügt die SQL-Abfrage in Ihre Seite ein. Wenn die Seite auf dem Server ausgeführt wird, wird jeder
Datensatz in der Datenbanktabelle überprüft. Erfüllt das angegebene Feld in einem Datensatz die SQL-
Abfragebedingung, wird dieser Datensatz in die Datensatzgruppe einbezogen. Die SQL-Abfrage erstellt somit eine
Datensatzgruppe, die nur die Suchergebnisse enthält.
Angenommen, Ihre Außendienstmitarbeiter haben Informationen darüber, bei welchen Kunden in einer
bestimmten Region das Einkommen ein Mindestniveau überschreitet. In einem Formular auf einer Suchseite kann
der Mitarbeiter eine geographische Region und ein Mindesteinkommen angeben. Anschließend kann er durch
Klicken auf die Schaltfläche „Senden“ beide Werte an den Server übermitteln. Auf dem Server werden die Werte in
die SQL-Anweisung der Ergebnisseite übertragen. Diese Anweisung erstellt anschließend eine Datensatzgruppe,
die nur die Kunden aus der angegebenen Region enthält, deren Einkommen über dem angegebenen Niveau liegt.
666
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Definieren von Quellen für dynamischen Inhalt” on page 611
“Erstellen von Such- und Ergebnisseiten” on page 665
Suchseiten erstellen
Im Web enthält eine Suchseite in der Regel Formularfelder, in die der Besucher Suchparameter eingibt. Ihre Suchseite
muss mindestens über ein HTML-Formular mit einer Schaltfläche zum Senden verfügen.
Um ein HTML-Formular in eine Suchseite einzubinden, führen Sie die folgenden Arbeitsschritte aus:
1 Öffnen Sie die Suchseite oder eine neue Seite und wählen Sie „Einfügen“ > „Formular“ > „Formular“.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell müssen Sie die unsichtbaren Elemente aktivieren
(„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“), damit die Formularränder durch schmale rote Linien
angezeigt werden.
2 Wählen Sie im Menü „Einfügen“ den Befehl „Formular“ aus, um Formularobjekte hinzuzufügen, über die die
Besucher ihre Suchparameter eingeben können.
Formularobjekte sind Textfelder, Menüs, Optionen und Optionsschalter. Sie können beliebig viele Formularobjekte
hinzufügen, um dem Besucher bei der Angabe der Suchkriterien eine entsprechende Auswahl zu bieten. Bedenken Sie
jedoch, dass mit zunehmender Anzahl der Suchparameter auf der Suchseite auch die Komplexität der SQL-Anweisung
steigt.
3 Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu („Einfügen“ > „Formular“ > „Schaltfläche“).
4 Optional: Ändern Sie die Beschriftung der Schaltfläche zum Senden. Wählen Sie dazu die Schaltfläche aus, öffnen
Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie im Wertfeld „Beschriftung“ einen
neuen Wert ein.
Anschließend legen Sie für das Formular fest, wohin die Suchparameter gesendet werden, wenn der Besucher auf die
soeben von Ihnen erstellte Schaltfläche klickt.
5 Wählen Sie das Formular aus, indem Sie im Tag-Selektor am unteren Rand des Dokumentfensters das Tag <form>
auswählen, wie in der nachstehenden Abbildung gezeigt:
6 Geben Sie im Eigenschafteninspektor des Formulars im Feld „Aktion“ den Dateinamen der Ergebnisseite ein, die
die Datenbanksuche durchführt.
7 Wählen Sie im Popupmenü „Methode“ eine der folgenden Methoden aus, um festzulegen, wie das Formular Daten
zum Server sendet:
• Bei der Methode GET werden die Formulardaten gesendet, indem sie als Zeichenfolge an die URL angehängt
werden. Da URLs maximal aus 8192 Zeichen bestehen können, können Sie die Methode
GET nur für kurze
Formulare verwenden.
• Bei der Methode POST werden die Formulardaten als Text einer E-Mail gesendet.
• Bei der Methode Standard wird die Standardmethode des jeweiligen Browsers verwendet (üblicherweise GET).
Die Erstellung der Suchseite ist damit abgeschlossen.
667
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Such- und Ergebnisseiten” on page 665
“Erstellen von Webformularen” on page 714
Einfache Suchseiten erstellen
Klickt der Besucher auf die Suchen-Schaltfläche des Formulars, werden die Suchparameter an eine Ergebnisseite auf
dem Server gesendet. Die Ergebnisseite auf dem Server – und nicht die Suchseite auf dem Browser – ist für das Abrufen
der Datensätze aus der Datenbank verantwortlich. Wenn die Suchseite einen einzelnen Suchparameter an den Server
übermittelt, können Sie die Ergebnisseite ohne SQL-Abfragen und -Variablen erstellen. Sie erstellen eine
grundlegende Datensatzgruppe mit einem Filter zum Ausschließen der Datensätze, die den über die Suchseite
gesendeten Suchparametern nicht entsprechen.
Note: Wenn Sie mehrere Suchbedingungen anwenden möchten, müssen Sie die Definition der Datensatzgruppe über das
erweiterte Dialogfeld „Datensatzgruppe“ vornehmen (siehe “Erweiterte Ergebnisseiten erstellen” on page 669).
More Help topics
“Such- und Ergebnisseiten” on page 665
“Suchseiten erstellen” on page 666
“Detailseiten für die Ergebnisseiten erstellen” on page 670
Datensatzgruppen für die Aufnahme der Suchergebnisse erstellen
1 Öffnen Sie Ihre Ergebnisseite im Dokumentfenster.
Wenn Sie noch nicht über eine Ergebnisseite verfügen, erstellen Sie eine leere dynamische Seite („Datei“ > „Neu“ >
„Leere Seite“).
2 Erstellen Sie eine neue Datensatzgruppe, indem Sie das Bedienfeld „Bindungen“ öffnen („Fenster“ > „Bindungen“),
auf die Schaltfläche mit dem Pluszeichen (+) klicken und im Popupmenü die Option „Datensatzgruppe“ wählen.
3 Vergewissern Sie sich, dass das einfache Dialogfeld „Datensatzgruppe“ angezeigt wird.
Wird stattdessen das erweiterte Dialogfeld angezeigt, können Sie zum einfachen Dialogfeld wechseln, indem Sie auf
die Schaltfläche „Einfach“ klicken.
668
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
4 Geben Sie einen Namen für die Datensatzgruppe ein und wählen Sie eine Verbindung aus.
Die Verbindung muss auf die Datenbank verweisen, die die vom Besucher zu durchsuchenden Daten enthält.
5 Wählen Sie im Popupmenü „Tabelle“ die Tabelle aus, die in der Datenbank durchsucht werden soll.
Note: Bei einer Suche mit einem Parameter können Sie nur in einer einzigen Tabelle nach Datensätzen suchen. Um mit
einer Suche mehrere Tabellen zu durchsuchen, müssen Sie im erweiterten Dialogfeld „Datensatzgruppe“ eine SQL-
Abfrage definieren.
6 Um nur einige Spalten der Tabelle in die Datensatzgruppe einzubeziehen, klicken Sie auf „Ausgewählt“. Wählen
Sie dann die gewünschten Spalten aus, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste
(Macintosh) auf die jeweiligen Listeneinträge klicken.
Sie sollten nur die Spalten den mit Informationen auswählen, die Sie auf der Ergebnisseite anzeigen möchten.
Lassen Sie das Dialogfeld „Datensatzgruppe“ geöffnet. Sie benötigen das Dialogfeld noch, um die von der Suchseite
gesendeten Parameter abzurufen und einen Datensatzgruppenfilter zu erstellen, mit dem Datensätze, die den
Parametern nicht entsprechen, ausgeschlossen werden.
Datensatzgruppenfilter erstellen
1 Wählen Sie im ersten Popupmenü im Bereich „Filter“ eine Spalte in der Datenbanktabelle aus, in der nach einer
Übereinstimmung gesucht werden soll.
Ist der von der Suchseite gesendete Wert beispielsweise ein Ortsname, wählen Sie in Ihrer Tabelle die Spalte mit den
Ortsnamen aus.
2 Wählen Sie im Popupmenü neben dem ersten Menü das Gleichheitszeichen aus (es sollte die Standardoption sein).
3 Wählen Sie im dritten Popupmenü den Befehl „Formularvariable“ aus, wenn das Formular auf der Suchseite die
Methode
POST verwendet, bzw. „URL-Parameter“, wenn es die Methode GET verwendet.
Die Seite übergibt die Daten entweder über eine Formularvariable oder einen URL-Parameter an die Ergebnisseite.
4 Geben Sie im vierten Feld den Namen des Formularobjekts ein, das die Suchparameter auf der Suchseite
übernimmt.
Der Name des Objekts dient gleichzeitig als Name der Formularvariablen bzw. des URL-Parameters. Sie erhalten den
Namen, indem Sie auf die Suchseite umschalten und im Formular auf das Formularobjekt klicken, um es auszuwählen.
Überprüfen Sie den Namen des Objekts im Eigenschafteninspektor.
Angenommen, Sie möchten eine Datensatzgruppe erstellen, die nur Reiseangebote für ein bestimmtes Land enthält,
und Ihre Tabelle enthält eine Spalte mit dem Namen
TRIPLOCATION (Reiseziel). Außerdem sei angenommen, dass
das HTML-Formular auf der Suchseite die Methode
GET verwendet, ein Menüobjekt mit dem Namen „Location“
(Ziel) enthält und eine Länderliste anzeigt. Nachfolgend eine Abbildung der Filtereinstellungen in diesem Beispiel:
5 Optional: Klicken Sie auf „Testen“, geben Sie einen Testwert ein und klicken Sie auf „OK“, um eine Verbindung
zur Datenbank herzustellen und ein Exemplar der Datensatzgruppe zu erstellen.
Der Testwert simuliert den Wert, der andernfalls von der Suchseite zurückgegeben worden wäre. Klicken Sie auf
„OK“, um die Testdatensatzgruppe zu schließen.
6 Wenn Sie mit der Datensatzgruppe zufrieden sind, klicken Sie auf „OK“.
669
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Auf der Seite wird ein Serverskript eingefügt, das bei der Ausführung auf dem Server jeden Datensatz in der
Datenbanktabelle überprüft. Erfüllt das angegebene Feld in einem Datensatz die Filterbedingung, wird dieser
Datensatz in die Datensatzgruppe einbezogen. Das Skript erstellt also eine Datensatzgruppe, die nur die
Suchergebnisse enthält.
Der nächste Schritt ist das Anzeigen der Datensatzgruppe auf der Ergebnisseite. Weitere Informationen finden Sie
unter “Suchergebnisse anzeigen” on page 670.
Erweiterte Ergebnisseiten erstellen
Wenn die Suchseite mehr als einen Suchparameter an den Server übermittelt, müssen Sie eine SQL-Abfrage für die
Ergebnisseite schreiben und die Suchparameter in SQL-Variablen definieren.
Note: Wenn Sie nur eine Suchbedingung anwenden möchten, können Sie die Definition der Datensatzgruppe über das
einfache Dialogfeld „Datensatzgruppe“ vornehmen (siehe “Einfache Suchseiten erstellen” on page 667).
1 Öffnen Sie die Ergebnisseite in Dreamweaver und erstellen Sie anschließend eine neue Datensatzgruppe, indem Sie
das Bedienfeld „Bindungen“ öffnen („Fenster“ > „Bindungen“), auf die Schaltfläche mit dem Pluszeichen (+)
klicken und im Popupmenü die Option „Datensatzgruppe“ wählen.
2 Vergewissern Sie sich, dass das erweiterte Dialogfeld „Datensatzgruppe“ angezeigt wird.
Das erweiterte Dialogfeld enthält einen Textbereich zur Eingabe von SQL-Anweisungen. Wird stattdessen das
einfache Dialogfeld angezeigt, können Sie zum erweiterten Dialogfeld wechseln, indem Sie auf die Schaltfläche
„Erweitert“ klicken.
3 Geben Sie einen Namen für die Datensatzgruppe ein und wählen Sie eine Verbindung aus.
Die Verbindung muss auf die Datenbank verweisen, die die vom Besucher zu durchsuchenden Daten enthält.
4 Geben Sie im SQL-Textbereich eine SELECT-Anweisung ein.
Vergewissern Sie sich, dass die Anweisung eine WHERE-Klausel mit Variablen zur Aufnahme der Suchparameter
enthält. Im folgenden Beispiel lauten die Variablennamen
varLastName und varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬
WHERE LASTNAME LIKE 'varLastName' ¬
AND DEPARTMENT LIKE 'varDept'
Um die Eingabe zu vereinfachen, können Sie die Struktur mit den Datenbankelementen im unteren Bereich des
erweiterten Dialogfelds „Datensatz“ verwenden. Eine Anleitung hierzu finden Sie unter “Erweiterte Datensatzgruppen
durch manuelle SQL-Eingabe definieren” on page 614.
Weitere Informationen zur SQL-Syntax finden Sie unter www.adobe.com/go/learn_dw_sqlprimer_de.
5 Weisen Sie den SQL-Variablen die Werte der Suchparameter zu, indem Sie im Bereich „Variablen“ auf die
Schaltfläche mit dem Pluszeichen (+) klicken und den Namen der Variablen, den Standardwert (den Wert, den
eine Variable annehmen soll, wenn kein Laufzeitwert zurückgegeben wird) und den Laufzeitwert (normalerweise
ein Serverobjekt, das einen Wert enthält, der von einem Browser gesendet wird, z. B. eine Anforderungsvariable)
eingeben.
670
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Im folgenden ASP-Beispiel verwendet das HTML-Formular auf der Suchseite die Methode GET und enthält ein
Textfeld mit der Bezeichnung „LastName“ sowie ein weiteres mit der Bezeichnung „Department“:
In ColdFusion lauten die entsprechenden Laufzeitwerte
#LastName# und #Department#. In PHP lauten die
entsprechenden Laufzeitwerte
$_REQUEST["LastName"] und $_REQUEST["Department"].
6 Optional: Klicken Sie auf die Schaltfläche „Testen“, um eine Instanz der Datensatzgruppe unter Verwendung der
Standard-Variablenwerte zu erstellen.
Der Testwert simuliert den Wert, der andernfalls von der Suchseite zurückgegeben worden wäre. Klicken Sie auf
„OK“, um die Testdatensatzgruppe zu schließen.
7 Wenn Sie mit der Datensatzgruppe zufrieden sind, klicken Sie auf „OK“.
Die SQL-Abfrage wird in Ihre Seite eingefügt.
Der nächste Schritt ist das Anzeigen der Datensatzgruppe auf der Ergebnisseite.
Suchergebnisse anzeigen
Nach dem Erstellen einer Datensatzgruppe zur Aufnahme der Suchergebnisse sollten Sie die Informationen auf der
Ergebnisseite anzeigen. Das Anzeigen der Datensätze kann durch einfaches Ziehen der einzelnen Spalten aus dem
Bedienfeld „Bindungen“ auf die Ergebnisseite erfolgen. Sie können Hyperlinks zur Navigation hinzufügen, mit denen
Sie in beiden Richtungen durch die Datensatzgruppe blättern können, oder Sie können einen wiederholten Bereich
erstellen, um mehr als einen Datensatz auf der Seite anzuzeigen. Außerdem können Sie Hyperlinks in eine Detailseite
hinzufügen.
Informationen zu anderen Anzeigemethoden für dynamischen Inhalt auf einer Seite finden Sie unter “Anzeigen von
Datenbank-Datensätzen” on page 633.
1 Setzen Sie die Einfügemarke an die gewünschte Position der dynamischen Tabelle auf der Ergebnisseite und wählen
Sie „Einfügen“ > „Datenobjekte“ > „Dynamische Daten“ > „Dynamische Tabelle“.
2 Füllen Sie das Dialogfeld „Dynamische Tabelle“ aus und wählen Sie den Datensatz aus, den Sie für das Suchergebnis
festgelegt haben.
3 Klicken Sie auf „OK“. Es wird eine dynamische Tabelle in die Ergebnisseite eingefügt, in der die Suchergebnisse
angezeigt werden.
Detailseiten für die Ergebnisseiten erstellen
Ihre Such- und Ergebnisseiten können eine Detailseite einbeziehen, auf der weitere Informationen zu bestimmten
Datensätzen auf der Ergebnisseite angezeigt werden. In diesem Fall dient die Ergebnisseite auch als Masterseite im
Master-Detailseitensatz.
671
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Master- und Detailseiten in einem Durchgang erstellen” on page 663
“Suchseiten erstellen” on page 666
“Einfache Suchseiten erstellen” on page 667
Hyperlinks auf Seiten mit ergänzenden Themen erstellen (ASP)
Sie können einen Hyperlink erstellen, der eine Seite mit ergänzenden Themen aufruft und vorhandene Parameter an
diese Seite übergibt. Das Serververhalten steht nur bei Verwendung des ASP-Servermodells zur Verfügung.
Bevor Sie einer Seite das Serververhalten „Zu Seite mit ergänzenden Themen wechseln“ hinzufügen, vergewissern Sie
sich, dass die Seite tatsächlich Formularparameter oder URL-Parameter von einer anderen Seite erhält. Das
Serververhalten übergibt diese Parameter an eine dritte Seite. So können Sie beispielsweise Suchkriterien von einer
Ergebnisseite an eine andere Seite weitergeben, um zu vermeiden, dass der Besucher sie erneut eingeben muss.
Es ist auch möglich, auf der Seite eine Textzeichenfolge oder Grafik auszuwählen, die als Hyperlink auf die Seite mit
ergänzenden Themen dienen soll. Oder Sie können die Einfügemarke auf die Seite setzen, ohne etwas auszuwählen.
Der Hyperlinktext wird dann automatisch eingefügt.
1 Klicken Sie im Feld „Zu Seite mit ergänzenden Themen wechseln“ auf „Durchsuchen“ und wählen Sie die Datei der
entsprechenden Seite aus.
Wenn die aktuelle Seite Daten an sich selbst sendet, geben Sie den Dateinamen der aktuellen Seite ein.
2 Stammen die zu übergebenden Parameter direkt aus einem HTML-Formular, das die Methode GET verwendet,
oder sind sie in der URL der Seite aufgeführt, wählen Sie die Option „URL-Parameter“.
3 Stammen die zu übergebenden Parameter direkt aus einem HTML-Formular, das die Methode POST verwendet,
wählen Sie die Option „Formularparameter“.
4 Klicken Sie auf „OK“.
Klickt der Besucher auf den neuen Hyperlink, übergibt die Seite die Parameter unter Verwendung einer
Abfragezeichenfolge an die Seite mit den ergänzenden Themen.
More Help topics
“Verwenden von Formularen zum Sammeln von Benutzerinformationen” on page 710
Datensatz-Einfügeseiten erstellen
Datensatz-Einfügeseiten erstellen
Ihre Anwendung kann eine Seite enthalten, mit der Besucher neue Datensätze in eine Datenbank einfügen können.
Eine Einfügeseite besteht aus zwei Bausteinen:
• Einem HTML-Formular, über das Besucher Daten eingeben können
• Einem Serververhalten „Datensatz einfügen“, mit dem die Datenbank aktualisiert wird
Wenn ein Benutzer in einem Formular auf die Schaltfläche zum Senden klickt, fügt das Serververhalten Datensätze
in eine Datenbanktabelle ein.
672
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Mit dem Anwendungsobjekt „Einfügeformular für Datensätze“ können Sie diese Bausteine in einem Arbeitsschritt
hinzufügen. Sie können jedoch auch die Formularwerkzeuge und das Bedienfeld „Serververhalten“ von
Dreamweaver verwenden, um sie separat hinzuzufügen.
Note: Die Einfügeseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. Beispielsweise ist es
nicht möglich, der Einfügeseite das Serververhalten „Datensatz aktualisieren“ oder „Datensatz löschen“
hinzuzufügen.
Einfügeseiten Schritt für Schritt erstellen
Sie können eine Einfügeseite auch mithilfe der Formularwerkzeuge und Serverhalten erstellen.
More Help topics
“Erstellen von Webformularen” on page 714
HTML-Formulare in Einfügeseiten einfügen
1 Erstellen Sie eine neue dynamische Seite („Datei“ > „Neu“ > „Leere Seite“) und entwerfen Sie das Seitenlayout mit
den Dreamweaver-Entwurfswerkzeugen.
2 Fügen Sie ein HTML-Formular hinzu, indem Sie die Einfügemarke an die gewünschte Position setzen und die
Option „Einfügen“ > „Formular“ > „Formular“ wählen.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell müssen Sie die unsichtbaren Elemente aktivieren
(„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“), damit die Formularränder durch schmale rote Linien
angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwählen, öffnen Sie dann den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie
den Namen im Feld „Formularname“ ein.
Es ist nicht erforderlich, die Attribute
action oder method festzulegen, um das Formular anzuweisen, wie und wohin
die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltfläche zum Senden klickt. Diese
Attribute werden vom Serververhalten „Datensatz einfügen“ automatisch festgelegt.
4 Fügen Sie für alle Spalten der Datenbanktabelle, in die Datensätze eingefügt werden sollen, ein Formularobjekt wie
beispielsweise ein Textfeld hinzu („Einfügen“ > „Formular“ > „Textfeld“).
Die Formularobjekte sind für die Dateneingabe vorgesehen. Meistens werden zu diesem Zweck Textfelder verwendet,
Sie können jedoch auch Menüs, Kontrollkästchen und Optionsschalter einfügen.
5 Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu („Einfügen“ > „Formular“ > „Schaltfläche“).
Auf Wunsch können Sie die Beschriftung der Schaltfläche zum Senden ändern. Wählen Sie dazu die Schaltfläche aus,
öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie im Feld „Beschriftung“ einen
neuen Wert ein.
Serververhalten zum Einfügen von Datensätzen in Datenbanktabellen hinzufügen
(ColdFusion)
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Datensatz einfügen“.
2 Wählen Sie im Popupmenü „Werte senden aus“ ein Formular aus.
3 Wählen Sie im Popupmenü „Datenquelle“ eine Verbindung zu der Datenbank aus.
4 Geben Sie Ihren Benutzernamen und Ihr Kennwort ein.
673
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
5
Wählen Sie im Popupmenü „In Tabelle einfügen“ die Datenbanktabelle aus, in die der Datensatz eingefügt werden soll.
6 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefügt werden soll, wählen Sie im Popupmenü „Wert“
das Formularobjekt aus, das den Datensatz einfügt, und wählen Sie dann im Popupmenü „Senden als“ einen
Datentyp für das Formularobjekt aus.
Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text,
numerisch, boolesche Werte).
Wiederholen Sie die Prozedur für jedes Formularobjekt im Formular.
7 Geben Sie im Textfeld „Nach dem Einfügen hierher gehen“ die Seite an, die geöffnet werden soll, nachdem der
Datensatz in die Tabelle eingefügt wurde, oder klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie die
Datei aus.
8 Klicken Sie auf „OK“.
Dreamweaver fügt der Seite ein Serververhalten hinzu, mit dem Besucher Datensätze in eine Datenbanktabelle
einfügen können, indem sie das HTML-Formular ausfüllen und auf die Schaltfläche zum Senden klicken.
Serververhalten zum Einfügen von Datensätzen in Datenbanktabellen hinzufügen (ASP)
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Datensatz einfügen“ aus.
2 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung zur Datenbank aus.
Klicken Sie auf die Schaltfläche „Definieren“, wenn Sie eine Verbindung definieren müssen.
3
Wählen Sie im Popupmenü „In Tabelle einfügen“ die Datenbanktabelle aus, in die der Datensatz eingefügt werden soll.
4 Geben Sie im Textfeld „Nach dem Einfügen hierher gehen“ die Seite an, die geöffnet werden soll, nachdem der
Datensatz in die Tabelle eingefügt wurde, oder klicken Sie auf „Durchsuchen“ und wählen Sie die Datei aus.
5 Wählen Sie im Popupmenü „Werte abrufen aus“ das HTML-Formular aus, das zur Eingabe der Daten verwendet
werden soll.
Dreamweaver wählt automatisch das erste Formular auf Ihrer Seite aus.
6 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefügt werden soll, wählen Sie im Popupmenü „Wert“
das Formularobjekt aus, das den Datensatz einfügt, und wählen Sie dann im Popupmenü „Senden als“ einen
Datentyp für das Formularobjekt aus.
Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text,
numerisch, boolesche Werte).
Wiederholen Sie die Prozedur für jedes Formularobjekt im Formular.
7 Klicken Sie auf „OK“.
Dreamweaver fügt der Seite ein Serververhalten hinzu, mit dem Besucher Datensätze in eine Datenbanktabelle
einfügen können, indem sie das HTML-Formular ausfüllen und auf die Schaltfläche zum Senden klicken.
Wenn Sie das Serververhalten bearbeiten möchten, öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ >
„Serververhalten“). Doppelklicken Sie dann auf das Verhalten „Datensatz einfügen“.
Serververhalten zum Einfügen von Datensätzen in Datenbanktabellen hinzufügen (PHP)
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Datensatz einfügen“.
2 Wählen Sie im Popupmenü „Werte senden aus“ ein Formular aus.
674
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
3 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung zur Datenbank aus.
4
Wählen Sie im Popupmenü „Tabelle einfügen“ die Datenbanktabelle aus, in die der Datensatz eingefügt werden soll.
5 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefügt werden soll, wählen Sie im Popupmenü „Wert“
das Formularobjekt aus, das den Datensatz einfügt, und wählen Sie dann im Popupmenü „Senden als“ einen
Datentyp für das Formularobjekt aus.
Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text,
numerisch, boolesche Werte).
Wiederholen Sie die Prozedur für jedes Formularobjekt im Formular.
6 Geben Sie im Textfeld „Nach dem Einfügen hierher gehen“ die Seite an, die geöffnet werden soll, nachdem der
Datensatz in die Tabelle eingefügt wurde, oder klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie die
Datei aus.
7 Klicken Sie auf „OK“.
Dreamweaver fügt der Seite ein Serververhalten hinzu, mit dem Besucher Datensätze in eine Datenbanktabelle
einfügen können, indem sie das HTML-Formular ausfüllen und auf die Schaltfläche zum Senden klicken.
Einfügeseiten in einem Schritt erstellen
1 Öffnen Sie die Seite in der Entwurfsansicht und wählen Sie „Einfügen“ > „Datenobjekte“ > „Datensatz einfügen“ >
„Assistent 'Einfügeformular für Datensätze'“ aus.
2 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung zur Datenbank aus. Klicken Sie auf die Schaltfläche
„Definieren“, wenn Sie eine Verbindung definieren müssen.
3
Wählen Sie im Popupmenü „In Tabelle einfügen“ die Datenbanktabelle aus, in die der Datensatz eingefügt werden soll.
4 Wenn Sie ColdFusion verwenden, müssen Sie einen Benutzernamen und ein Kennwort eingeben.
5 Geben Sie im Feld „Nach dem Einfügen hierher gehen“ die Seite an, die geöffnet werden soll, nachdem der
Datensatz in die Tabelle eingefügt wurde, oder klicken Sie auf die Schaltfläche „Durchsuchen“ und wählen Sie die
Datei aus.
6 Geben Sie im Bereich „Formularfelder“ an, welche Formularobjekte in das HTML-Formular der Einfügeseite
aufgenommen werden sollen und welche Spalten in der Datenbanktabelle durch die einzelnen Formularobjekte
aktualisiert werden.
Standardmäßig erstellt Dreamweaver ein Formularobjekt für jede Spalte in der Datenbanktabelle. Wenn Ihre
Datenbank automatisch eine eindeutige Schlüssel-ID für jeden neu erstellten Datensatz generiert, entfernen Sie das
Formularobjekt für die Schlüsselspalte, indem Sie es in der Liste auswählen und dann auf die Schaltfläche mit dem
Minuszeichen (–) klicken. Dadurch wird verhindert, dass Besucher einen bereits vorhandenen ID-Wert eingeben.
Sie können auch die Reihenfolge der Formularobjekte im HTML-Formular ändern. Wählen Sie dazu ein
Formularobjekt in der Liste aus und klicken Sie dann rechts im Dialogfeld auf den nach oben bzw. nach unten
gerichteten Pfeil.
7 Geben Sie nun an, wie die einzelnen Dateneingabefelder im HTML-Formular dargestellt werden sollen. Klicken Sie
auf eine Zeile der Tabelle „Formularfelder“ und geben Sie dann die folgenden Informationen in die Felder
unterhalb der Tabelle ein:
• Geben Sie im Feld „Beschriftung“ eine aussagekräftige Beschreibung ein, die neben dem Dateneingabefeld
angezeigt wird. Standardmäßig zeigt Dreamweaver den Namen der Tabellenspalte als Beschriftung an.
675
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
• Wählen Sie im Popupmenü „Anzeigen als“ das Formularobjekt aus, das als Dateneingabefeld dienen soll. Folgende
Optionen stehen zur Auswahl: „Textfeld“, „Textbereich“, „Menü“, „Kontrollkästchen“, „Optionsschaltergruppe“
und „Text“. Wenn es sich um schreibgeschützte Einträge handelt, wählen Sie „Text“. Sie können auch die Optionen
„Feld für Kennwort“, „Dateifeld“ und „Verstecktes Feld“ wählen.
Note: Versteckte Felder werden am Ende des Formulars eingefügt.
• Wählen Sie im Popupmenü „Senden als“ das passende Datenformat für Ihre Datenbanktabelle aus. Wenn
beispielsweise nur numerische Daten in die Tabellenspalte eingegeben werden können, wählen Sie „Numerisch“.
• Legen Sie die Eigenschaften des Formularobjekts fest. Die verfügbaren Optionen richten sich danach, welches
Formularobjekt Sie als Dateneingabefeld auswählen. Für Textfelder, Textbereiche und Text können Sie einen
Anfangswert eingeben. Bei Menüs und Optionsschaltergruppen öffnen Sie ein weiteres Dialogfeld, um die
Eigenschaften festzulegen. Wenn es sich um Kontrollkästchen handelt, wählen Sie die Option „Aktiviert“ oder
„Nicht aktiviert“.
8 Klicken Sie auf „OK“.
Dreamweaver fügt Ihrer Seite nun ein HTML-Formular und das Serververhalten „Datensatz einfügen“ hinzu. Die
Formularobjekte sind in einer einfachen Tabelle angeordnet, die Sie mit den Dreamweaver-Entwurfswerkzeugen
bearbeiten können. (Achten Sie jedoch darauf, dass sich alle Formularobjekte innerhalb der Formularränder
befinden.)
Wenn Sie das Serververhalten bearbeiten möchten, öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ >
„Serververhalten“). Doppelklicken Sie dann auf das Verhalten „Datensatz einfügen“.
Erstellen von Datensatz-Aktualisierungsseiten
Datensatz-Aktualisierungsseiten
Ihre Anwendung kann eine Reihe von Seiten enthalten, mit denen Besucher Ihrer Site vorhandene Datensätze in einer
Datenbanktabelle aktualisieren können. Die Seiten bestehen in der Regel aus einer Suchseite, einer Ergebnisseite und
einer Aktualisierungsseite. Anhand der Such- und der Ergebnisseite können die Besucher Ihrer Site den Datensatz
abrufen und ihn über die Aktualisierungsseite bearbeiten.
Zu aktualisierende Datensätze suchen
Wenn Benutzer einen Datensatz aktualisieren möchten, müssen sie ihn zunächst in der Datenbank suchen. Daher ist
für die Arbeit mit der Aktualisierungsseite auch eine Such- und eine Ergebnisseite erforderlich. Der Benutzer gibt die
Suchkriterien auf der Suchseite ein und wählt den Datensatz auf der Ergebnisseite aus. Wenn er auf der Ergebnisseite
auf den Datensatz klickt, wird die Aktualisierungsseite geöffnet. Sie zeigt den Datensatz in einem HTML-Formular an.
More Help topics
“Erstellen von Such- und Ergebnisseiten” on page 665
Hyperlinks zur Aktualisierungsseite erstellen
Nach dem Erstellen der Such- und der Ergebnisseite legen Sie auf der Ergebnisseite die Hyperlinks an, mit denen die
Aktualisierungsseite geöffnet wird. Anschließend ändern Sie die Hyperlinks so, dass sie die ID des Datensatzes
übergeben, den der Benutzer ausgewählt hat. Anhand dieser ID findet die Aktualisierungsseite den angeforderten
Datensatz in der Datenbank und zeigt ihn an.
676
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Mit dem gleichen Verfahren, mit dem Sie eine Detailseite geöffnet und eine Datensatz-ID übergeben haben, öffnen Sie
auch die Aktualisierungsseite und übergeben ihr eine Datensatz-ID. Weitere Informationen finden Sie im Abschnitt
“Hyperlinks zur Detailseite erstellen” on page 659.
More Help topics
“URL-Parameter” on page 712
Zu aktualisierende Datensätze abrufen
Nachdem die Ergebnisseite eine Datensatz-ID an die Aktualisierungsseite übergeben und damit den zu
aktualisierenden Datensatz identifiziert hat, muss die Aktualisierungsseite den Parameter lesen, den Datensatz aus der
Datenbanktabelle abrufen und diesen vorübergehend in einer Datensatzgruppe speichern.
1 Erstellen Sie in Dreamweaver eine neue PHP-Seite und speichern Sie sie.
Die Seite wird zu Ihrer neuen Aktualisierungsseite.
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie die Option „Datensatzgruppe“.
Wird das erweiterte Dialogfeld geöffnet, klicken Sie auf „Einfach“. Das erweiterte Dialogfeld enthält im Gegensatz zum
einfachen Dialogfeld einen Textbereich zur Eingabe von SQL-Anweisungen.
3 Benennen Sie die Datensatzgruppe und geben Sie über die Popupmenüs „Verbindung“ und „Tabelle“ an, wo sich
die zu aktualisierenden Daten befinden.
4 Klicken Sie auf „Ausgewählt“ und wählen Sie eine Schlüsselspalte (in der Regel die Datensatz-ID-Spalte) sowie die
Spalten aus, die die zu aktualisierenden Daten enthalten.
5 Konfigurieren Sie den Bereich „Filter“ so, dass der Wert Ihrer Schlüsselspalte dem Wert des URL-Parameters
entspricht, der von der Ergebnisseite übermittelt wurde.
Ein solcher Filter erstellt eine Datensatzgruppe, die nur den auf der Ergebnisseite angegebenen Datensatz enthält.
Wenn Ihre Schlüsselspalte beispielsweise Datensatz-ID-Informationen enthält und „PRID“ heißt und die
Ergebnisseite die entsprechenden Datensatz-ID-Informationen in einem URL-Parameter mit dem Namen
id
übermittelt, sollte der Bereich „Filter“ folgendermaßen aussehen:
6 Klicken Sie auf „OK“.
Wenn der Besucher einen Datensatz auf der Ergebnisseite auswählt, generiert die Aktualisierungsseite eine
Datensatzgruppe, die nur den ausgewählten Datensatz enthält.
Aktualisierungsseiten Block für Block fertig stellen
Für eine Aktualisierungsseite sind drei Bausteine erforderlich:
• Eine gefilterte Datensatzgruppe, um den Datensatz aus einer Datenbanktabelle abzurufen
• Ein HTML-Formular, mit dem Besucher die Daten des Datensatzes modifizieren können
• Ein Serververhalten des Typs „Datensatz aktualisieren“, mit dem die Datenbanktabelle aktualisiert wird
Sie können die beiden letzten grundlegenden Bausteine einer Aktualisierungsseite auch separat hinzufügen. Dazu
verwenden Sie die Formularwerkzeuge und das Bedienfeld „Serververhalten“.
677
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Zu aktualisierende Datensätze abrufen” on page 676
“Erstellen von Webformularen” on page 714
HTML-Formulare in Einfügeseiten einfügen
1 Erstellen Sie eine Seite („Datei“ > „Neu“ > „Leere Seite“). Die Seite wird zu Ihrer neuen Aktualisierungsseite.
2 Erstellen Sie das Layout der Seite mit den Dreamweaver-Entwurfswerkzeugen.
3 Fügen Sie ein HTML-Formular hinzu, indem Sie die Einfügemarke an die gewünschte Position setzen und die
Option „Einfügen“ > „Formular“ > „Formular“ wählen.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell müssen Sie die unsichtbaren Elemente aktivieren
(„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“), damit die Formularränder durch schmale rote Linien
angezeigt werden.
4 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwählen, öffnen Sie dann den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie
den Namen im Feld „Formularname“ ein.
Es ist nicht erforderlich, die Attribute
action oder method festzulegen, um das Formular anzuweisen, wie und wohin
die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltfläche zum Senden klickt. Diese
Attribute werden vom Serververhalten „Datensatz aktualisieren“ automatisch festgelegt.
5 Fügen Sie für alle Spalten, die in der Datenbanktabelle aktualisiert werden sollen, ein Formularobjekt wie
beispielsweise ein Textfeld hinzu („Einfügen“ > „Formular“ > „Textfeld“).
Die Formularobjekte sind für die Dateneingabe vorgesehen. Meistens werden zu diesem Zweck Textfelder verwendet,
Sie können jedoch auch Menüs, Kontrollkästchen und Optionsschalter einfügen.
Die Datensatzgruppe, die Sie in einem früheren Schritt definiert haben, sollte eine Spalte für jedes Formularobjekt
enthalten. Eine Ausnahme bildet die Spalte für eindeutige Schlüssel, zu der kein Formularobjekt gehören sollte.
6 Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu („Einfügen“ > „Formular“ > „Schaltfläche“).
Auf Wunsch können Sie die Beschriftung der Schaltfläche zum Senden ändern. Wählen Sie dazu die Schaltfläche aus,
öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie im Feld „Beschriftung“ einen
neuen Wert ein.
Datensätze im Formular anzeigen
1 Stellen Sie sicher, dass Sie eine Datensatzgruppe für den Datensatz definiert haben, der aktualisiert werden soll.
Weitere Informationen finden Sie im Abschnitt “Zu aktualisierende Datensätze abrufen” on page 676.
2 Verbinden Sie jedes Formularobjekt mit Daten aus der Datensatzgruppe, wie in den folgenden Themen
beschrieben:
• “Dynamischen Inhalt in HTML-Textfeldern anzeigen” on page 724
• “HTML-Kontrollkästchen dynamisch im Voraus aktivieren” on page 725
• “HTML-Optionsschalter dynamisch im Voraus aktivieren” on page 725
• “Dynamisches HTML-Formularmenü einfügen oder ändern” on page 723
• “Vorhandene HTML-Formularmenüs dynamisch gestalten” on page 724
678
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Serververhalten für die Aktualisierung von Datenbanktabellen einfügen
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Datensatz aktualisieren“.
Das Dialogfeld „Datensatz aktualisieren“ wird angezeigt.
2 Wählen Sie im Popupmenü „Werte senden aus“ ein Formular aus.
3 Wählen Sie im Popupmenü „Datenquelle“ oder „Verbindung“ eine Verbindung zu der Datenbank aus.
4 Geben Sie bei Bedarf Ihren Benutzernamen und Ihr Kennwort ein.
5 Wählen Sie im Popupmenü „Tabelle aktualisieren“ die Datenbanktabelle mit dem Datensatz aus, den Sie gerade
aktualisieren.
6 (ColdFusion, PHP) Geben Sie eine zu aktualisierende Datenbankspalte an und wählen Sie im Popupmenü „Wert“
das Formularobjekt aus, das den Datensatz aktualisiert. Wählen Sie im Popupmenü „Senden als“ einen Datentyp
für das Formularobjekt aus und wählen Sie die Option „Primärschlüssel“ aus, wenn Sie diese Spalte als
Primärschlüssel kennzeichnen möchten.
Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text,
numerisch, boolesche Werte).
Wiederholen Sie die Prozedur für jedes Formularobjekt im Formular.
7 (ASP) Geben Sie im Popupmenü „Datensatz auswählen in“ die Datensatzgruppe mit dem Datensatz an, der im
HTML-Formular angezeigt wird. Wählen Sie im Popupmenü „Spalte für eindeutigen Schlüssel“ eine
Schlüsselspalte aus (in der Regel die Datensatz-ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden.
Wählen Sie die Option „Numerisch“, wenn der Wert eine Zahl ist. In Schlüsselspalten können meistens nur
numerische Werte, in manchen Fällen jedoch auch Textzeichenfolgen eingegeben werden.
8 Geben Sie im Feld „Nach dem Aktualisieren hierher gehen“ oder „Bei Erfolg hierher gehen“ die Seite an, die
geöffnet werden soll, nachdem der Datensatz in der Tabelle aktualisiert wurde, oder klicken Sie auf die Schaltfläche
„Durchsuchen“ und wählen Sie die Datei aus.
9 (ASP) Geben Sie eine zu aktualisierende Datenbankspalte an und wählen Sie im Popupmenü „Wert“ das
Formularobjekt aus, das den Datensatz aktualisiert. Wählen Sie dann im Popupmenü „Senden als“ einen Datentyp
für das Formularobjekt aus. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der
Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur für jedes
Formularobjekt im Formular.
10 Klicken Sie auf „OK“.
Dreamweaver fügt der Seite ein Serververhalten hinzu, mit dem Besucher Datensätze in einer Datenbanktabelle
aktualisieren können, indem sie die in dem HTML-Formular angezeigten Informationen ändern und auf die
Schaltfläche zum Senden klicken.
Wenn Sie das Serververhalten bearbeiten möchten, öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ >
„Serververhalten“) und doppelklicken auf das Verhalten „Datensatz aktualisieren“.
Aktualisierungsseite in einem Arbeitsgang aktualisieren
Für eine Aktualisierungsseite sind drei Bausteine erforderlich:
• Eine gefilterte Datensatzgruppe, um den Datensatz aus einer Datenbanktabelle abzurufen
• Ein HTML-Formular, mit dem Besucher die Daten des Datensatzes modifizieren können
• Ein Serververhalten des Typs „Datensatz aktualisieren“, mit dem die Datenbanktabelle aktualisiert wird
679
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Mit dem Datenobjekt „Aktualisierungsformular für Datensätze“ können Sie die beiden letzten Bausteine einer
Aktualisierungsseite in einem Arbeitsschritt hinzufügen. Mit diesem Datenobjekt wird der Seite nicht nur ein HTML-
Formular, sondern auch das Serververhalten „Datensatz aktualisieren“ hinzugefügt.
Bevor Sie das Datenobjekt verwenden können, muss Ihre Webanwendung den zu aktualisierenden Datensatz finden
können. Außerdem muss die Aktualisierungsseite diesen Datensatz abrufen können.
Nachdem das Datenobjekt die Bausteine auf der Seite platziert hat, können Sie das Formular mithilfe der
Dreamweaver-Entwurfswerkzeuge beliebig anpassen oder das Serververhalten „Datensatz aktualisieren“ mit dem
Bedienfeld „Serververhalten“ bearbeiten.
Note: Die Aktualisierungsseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. So ist es nicht
möglich, der Aktualisierungsseite das Serververhalten „Datensatz einfügen“ oder „Datensatz löschen“ hinzuzufügen.
1 Öffnen Sie die Seite in der Entwurfsansicht und wählen Sie „Einfügen“ > „Datenobjekte“ > „Datensatz
aktualisieren“ > „Assistent Aktualisierungsformular für Datensätze“ aus.
Das Dialogfeld „Aktualisierungsformular für Datensätze“ wird angezeigt.
2 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung zur Datenbank aus.
Klicken Sie auf die Schaltfläche „Definieren“, wenn Sie eine Verbindung definieren müssen.
3 Wählen Sie im Popupmenü „Zu aktualisierende Tabelle“ die Datenbanktabelle aus, die den zu aktualisierenden
Datensatz enthält.
4 Geben Sie im Popupmenü „Datensatz auswählen aus“ die Datensatzgruppe an, die den Datensatz enthält, der im
HTML-Formular angezeigt wird.
5 Wählen Sie im Popupmenü „Spalte für eindeutigen Schlüssel“ eine Schlüsselspalte aus (in der Regel die Datensatz-
ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden.
Wählen Sie die Option „Numerisch“, wenn der Wert eine Zahl ist. In Schlüsselspalten können meistens nur
numerische Werte, in manchen Fällen jedoch auch Textzeichenfolgen eingegeben werden.
6 Geben Sie im Feld „Nach dem Aktualisieren hierher gehen“ die Seite ein, die geöffnet werden soll, nachdem der
Datensatz in der Tabelle aktualisiert wurde.
7 Geben Sie im Bereich „Formularfelder“ an, welche Spalten in der Datenbanktabelle von den einzelnen
Formularobjekten aktualisiert werden sollen.
Standardmäßig erstellt Dreamweaver ein Formularobjekt für jede Spalte in der Datenbanktabelle. Wenn Ihre
Datenbank automatisch eine eindeutige Schlüssel-ID für jeden neu erstellten Datensatz generiert, entfernen Sie das
Formularobjekt für die Schlüsselspalte, indem Sie es in der Liste auswählen und dann auf die Schaltfläche mit dem
Minuszeichen (–) klicken. Dadurch wird verhindert, dass Besucher einen bereits vorhandenen ID-Wert eingeben.
Sie können auch die Reihenfolge der Formularobjekte im HTML-Formular ändern. Wählen Sie dazu ein
Formularobjekt in der Liste aus und klicken Sie dann rechts im Dialogfeld auf den nach oben bzw. nach unten
gerichteten Pfeil.
8 Geben Sie nun an, wie die einzelnen Dateneingabefelder im HTML-Formular dargestellt werden sollen. Klicken Sie
auf eine Zeile der Tabelle „Formularfelder“ und geben Sie dann die folgenden Informationen in die Felder
unterhalb der Tabelle ein:
• Geben Sie im Feld „Beschriftung“ eine aussagekräftige Beschreibung ein, die neben dem Dateneingabefeld
angezeigt wird. Standardmäßig zeigt Dreamweaver den Namen der Tabellenspalte als Beschriftung an.
680
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
• Wählen Sie im Popupmenü „Anzeigen als“ das Formularobjekt aus, das als Dateneingabefeld dienen soll. Folgende
Optionen stehen zur Auswahl: „Textfeld“, „Textbereich“, „Menü“, „Kontrollkästchen“, „Optionsschaltergruppe“
und „Text“. Wenn es sich um schreibgeschützte Einträge handelt, wählen Sie „Text“. Sie können auch die Optionen
„Feld für Kennwort“, „Dateifeld“ und „Verstecktes Feld“ wählen.
Note: Versteckte Felder werden am Ende des Formulars eingefügt.
• Wählen Sie im Popupmenü „Senden als“ das passende Datenformat für Ihre Datenbanktabelle aus. Wenn
beispielsweise nur numerische Daten in die Tabellenspalte eingegeben werden können, wählen Sie „Numerisch“.
• Legen Sie die Eigenschaften des Formularobjekts fest. Die verfügbaren Optionen richten sich danach, welches
Formularobjekt Sie als Dateneingabefeld auswählen. Für Textfelder, Textbereiche und Text können Sie einen
Anfangswert eingeben. Bei Menüs und Optionsschaltergruppen öffnen Sie ein weiteres Dialogfeld, um die
Eigenschaften festzulegen. Wenn es sich um Kontrollkästchen handelt, wählen Sie die Option „Aktiviert“ oder
„Nicht aktiviert“.
9 Legen Sie die Eigenschaften der anderen Formularobjekte fest, indem Sie unter „Formularfelder“ eine andere Zeile
auswählen und eine Beschriftung sowie unter „Anzeigen als“ und unter „Senden als“ einen Wert eingeben.
Bei Menüs und Optionsschaltergruppen öffnen Sie ein weiteres Dialogfeld, um die Eigenschaften festzulegen. Für
Optionen definieren Sie einen Vergleich zwischen dem Wert des aktuellen Datensatzes für die Option und einem
gegebenen Wert, um zu bestimmen, ob die Option aktiviert oder nicht aktiviert ist, wenn der Datensatz angezeigt wird.
10 Klicken Sie auf „OK“.
Dreamweaver fügt Ihrer Seite nun ein HTML-Formular und das Serververhalten „Datensatz aktualisieren“ hinzu.
Mit dem Datenobjekt wird der Seite nicht nur ein HTML-Formular, sondern auch das Serververhalten „Datensatz
aktualisieren“ hinzugefügt. Die Formularobjekte sind in einer einfachen Tabelle angeordnet, die Sie mit den
Dreamweaver-Entwurfswerkzeugen bearbeiten können. (Achten Sie jedoch darauf, dass sich alle Formularobjekte
innerhalb der Formularränder befinden.)
Wenn Sie das Serververhalten bearbeiten möchten, öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ >
„Serververhalten“). Doppelklicken Sie auf das Verhalten „Datensatz aktualisieren“.
More Help topics
“Zu aktualisierende Datensätze abrufen” on page 676
“Dynamisches HTML-Formularmenü einfügen oder ändern” on page 723
Formularelement-Eigenschaften
Im Dialogfeld „Formularelement-Eigenschaften“ können Sie die Eigenschaften von Formularelementen auf Seiten
festlegen, mit denen Besucher Datensätze in einer Datenbank aktualisieren können.
1 Wählen Sie entweder „Manuell“ oder „Aus Datenbank“, abhängig davon, wie Sie das Formularelement erstellen
möchten.
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um ein Element hinzuzufügen.
3 Geben Sie für das Element eine Beschriftung und einen Wert ein.
4 Soll ein bestimmtes Element ausgewählt sein, wenn die Seite in einem Browser geöffnet oder wenn ein Datensatz
im Formular angezeigt wird, geben Sie im Feld „Wert auswählen, der gleich“ einen Wert ein, der mit dem
Elementwert übereinstimmt.
681
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Sie können einen statischen Wert eingeben oder Sie können auf das Blitzsymbol klicken und dann aus der Liste der
Datenquellen einen dynamischen Wert auswählen. In beiden Fällen muss der angegebene Wert mit einem der
Menüelementwerte übereinstimmen.
Erstellen von Datensatz-Löschseiten
Datensatz-Löschseiten
Ihre Anwendung kann eine Seite enthalten, mit der Besucher vorhandene Datensätze aus einer Datenbank löschen
können. Die Seiten bestehen in der Regel aus einer Suchseite, einer Ergebnisseite und einer Löschseite. Eine Löschseite
ist in der Regel eine Detailseite, die in Kombination mit einer Ergebnisseite eingesetzt wird. Anhand der Such- und
der Ergebnisseite können die Besucher Ihrer Site den Datensatz abrufen und anhand der Löschseite können sie ihn
löschen.
Nachdem Sie die Such- und die Ergebnisseite erstellt haben, fügen Sie Hyperlinks in die Ergebnisseite ein, mit denen
sich die Löschseite öffnen lässt. Anschließend erstellen Sie eine Löschseite, in der die Datensätze angezeigt werden,
sowie eine Schaltfläche zum Senden.
Zu löschende Datensätze suchen
Wenn Besucher einen Datensatz löschen möchten, müssen sie ihn zunächst in der Datenbank suchen. Daher ist für
die Arbeit mit der Löschseite auch eine Such- und eine Ergebnisseite erforderlich. Der Benutzer gibt die Suchkriterien
auf der Suchseite ein und wählt den Datensatz auf der Ergebnisseite aus. Wenn er auf den ersten Datensatz klickt, wird
die Löschseite geöffnet. Sie zeigt den Datensatz im HTML-Format an.
More Help topics
“Erstellen von Such- und Ergebnisseiten” on page 665
Hyperlinks zu Löschseiten erstellen
Nach dem Erstellen der Such- und der Ergebnisseite legen Sie auf der Ergebnisseite die Hyperlinks an, mit denen die
Löschseite geöffnet wird. Anschließend ändern Sie die Hyperlinks so, dass sie die ID des Datensatzes übergeben, den
der Benutzer löschen möchte. Die Löschseite kann anhand dieser ID den Datensatz suchen und anzeigen.
More Help topics
“URL-Parameter” on page 712
Vorgehensweise zum manuellen Erstellen der Hyperlinks
1 Erstellen Sie auf der Ergebnisseite in der Tabelle, die zum Anzeigen der Datensätze dient, eine neue Spalte, indem
Sie in die letzte Tabellenspalte klicken und „Modifizieren“ > „Tabelle“ > „Zeilen oder Spalten einfügen“ wählen.
2 Aktivieren Sie die Optionen „Spalten“ und „Nach aktueller Spalte“ und klicken Sie auf „OK“.
Es wird eine Spalte in die Tabelle eingefügt.
3 Geben Sie in der neuen Tabellenspalte in die Zeile mit den Platzhaltern für dynamische Inhalte die Zeichenfolge
Löschen ein. Achten Sie darauf, dass Sie die Zeichenfolge innerhalb des Wiederholungsbereichs (mit dem
Registerreiter) eingeben.
Sie können auch ein Bild, ein Wort oder ein Symbol zum Löschen einfügen.
682
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
4 Wählen Sie die Zeichenfolge Löschen aus, um sie mit einem Hyperlink zu versehen.
5 Geben Sie im Eigenschafteninspektor die Bestätigungsseite im Feld „Hyperlink“ ein. Sie können einen beliebigen
Dateinamen eingeben.
Klicken Sie auf eine Stelle außerhalb des Felds „Hyperlink“. Die Zeichenfolge
Löschen wird in der Tabelle angezeigt.
In der Live-Ansicht sehen Sie, dass derselbe Text in jeder Tabellenzeile mit dem Hyperlink unterlegt ist.
6 Wählen Sie auf der Ergebnisseite den Hyperlink zum Löschen aus.
7 (ColdFusion) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der
URL ein:
?recordID=#recordsetName.fieldName#
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck „recordID“ ist der
Name des URL-Parameters. (Sie können einen beliebigen Namen wählen.) Schreiben Sie sich den Namen des URL-
Parameters auf. Sie benötigen ihn später für die Löschseite.
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen
ColdFusion-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurückgibt. Für jede Zeile in der
dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im ColdFusion-Ausdruck
recordsetName
durch den Namen Ihrer Datensatzgruppe und
fieldName durch den Namen des Felds in der Datensatzgruppe, die
den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im
folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.cfm?recordID=#rsLocations.CODE#
Wenn die Seite ausgeführt wird, werden die Werte des Datensatzgruppenfelds „CODE“ in die entsprechenden Zeilen
der dynamischen Tabelle eingefügt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code „CBR“
besitzt, wird in der dynamischen Tabelle in der Zeile „Canberra“ die folgende URL verwendet:
confirmDelete.cfm?recordID=CBR
8 (PHP) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der URL ein:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck „recordID“ ist der
Name des URL-Parameters. (Sie können einen beliebigen Namen wählen.) Schreiben Sie sich den Namen des URL-
Parameters auf. Sie benötigen ihn später für die Löschseite.
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen
PHP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurückgibt. Für jede Zeile in der
dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im PHP-Ausdruck
recordsetName durch
den Namen Ihrer Datensatzgruppe und
fieldName durch den Namen des Felds in der Datensatzgruppe, die den
jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden
Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Wenn die Seite ausgeführt wird, werden die Werte des Datensatzgruppenfelds „CODE“ in die entsprechenden Zeilen
der dynamischen Tabelle eingefügt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code „CBR“
besitzt, wird in der dynamischen Tabelle in der Zeile „Canberra“ die folgende URL verwendet:
confirmDelete.php?recordID=CBR
9 (ASP) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der URL ein:
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
683
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck „recordID“ ist der
Name des URL-Parameters. (Sie können einen beliebigen Namen wählen.) Schreiben Sie sich den Namen des URL-
Parameters auf. Sie benötigen ihn später für die Löschseite.
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen
ASP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurückgibt. Für jede Zeile in der
dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im ASP-Ausdruck
recordsetName durch
den Namen Ihrer Datensatzgruppe und
fieldName durch den Namen des Felds in der Datensatzgruppe, das den
jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden
Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
Wenn die Seite ausgeführt wird, werden die Werte des Datensatzgruppenfelds „CODE“ in die entsprechenden Zeilen
der dynamischen Tabelle eingefügt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code „CBR“
besitzt, wird in der dynamischen Tabelle in der Zeile „Canberra“ die folgende URL verwendet:
confirmDelete.asp?recordID=CBR
10 Speichern Sie die Seite.
Vorgehensweise zum visuellen Erstellen der Hyperlinks (nur ASP)
1 Erstellen Sie auf der Ergebnisseite in der Tabelle, die zum Anzeigen der Datensätze dient, eine neue Spalte, indem
Sie in die letzte Tabellenspalte klicken und „Modifizieren“ > „Tabelle“ > „Zeilen oder Spalten einfügen“ wählen.
2 Aktivieren Sie die Optionen „Spalten“ und „Nach aktueller Spalte“ und klicken Sie auf „OK“.
Es wird eine Spalte in die Tabelle eingefügt.
3 Geben Sie in der neuen Tabellenspalte in die Zeile mit den Platzhaltern für dynamische Inhalte die Zeichenfolge
Löschen ein. Achten Sie darauf, dass Sie die Zeichenfolge innerhalb des Wiederholungsbereichs (mit dem
Registerreiter) eingeben.
Sie können auch ein Bild, ein Wort oder ein Symbol zum Löschen einfügen.
4 Wählen Sie die Zeichenfolge Löschen aus, um sie mit einem Hyperlink zu versehen.
5 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Zu Detailseite wechseln“ aus.
6 Klicken Sie im Feld „Detailseite“ auf „Durchsuchen“ und wählen Sie die Löschseite aus.
7 Geben Sie im Feld „URL-Parameter übergeben“ den Namen des Parameters an, beispielsweise „recordID“.
Sie können einen beliebigen Namen angeben. Notieren Sie ihn jedoch, da Sie ihn später auf der Löschseite eingeben
müssen.
8 Geben Sie an, welchen Wert Sie an die Löschseite übergeben möchten, indem Sie in den Popupmenüs
„Datensatzgruppe“ und „Spalte“ eine Datensatzgruppe und eine Spalte auswählen. In der Regel ist dieser Wert für
den Datensatz spezifisch, beispielsweise die eindeutige Schlüssel-ID des Datensatzes.
9 Wählen Sie die Option „URL-Parameter“ aus.
10 Klicken Sie auf „OK“.
Ein spezieller Hyperlink umschließt den ausgewählten Text. Wenn der Benutzer auf den Hyperlink klickt, übergibt
das Serververhalten „Zu Detailseite wechseln“ einen URL-Parameter, der die Datensatz-ID für die angegebene
Löschseite enthält. Wenn der URL-Parameter beispielsweise „recordID“ und der Name der Löschseite
„confirmdelete.asp“ lautet, wird beim Klicken des Benutzers auf den Hyperlink eine URL wie die folgende gebildet:
http://www.meinesite.com/confirmdelete.asp?recordID=43
684
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Mit dem ersten Teil der URL, http://www.meinesite.com/confirmdelete.asp, wird die Löschseite geöffnet. Der zweite
Teil, ?recordID=43, ist der URL-Parameter. Mit diesem Parameter wird der Löschseite mitgeteilt, welcher Datensatz
aufzurufen und anzuzeigen ist. Dabei ist die Bezeichnung „recordID“ der Name und „43“ der Wert des URL-
Parameters. In diesem Beispiel enthält der URL-Parameter mit dem Wert 43 die ID-Nummer des Datensatzes.
Löschseiten erstellen
Nachdem Sie die Seite mit den Datensätzen vervollständigt haben, wechseln Sie zur Löschseite. Die Löschseite zeigt
den Datensatz an und der Benutzer wird gefragt, ob er ihn löschen möchte. Wenn der Benutzer die Löschanweisung
mit der Formularschaltfläche bestätigt, löscht die Webanwendung den Datensatz aus der Datenbank.
Zum Erstellen dieser Seite legen Sie zunächst ein HTML-Formular an. Anschließend rufen Sie den im Formular
anzuzeigenden Datensatz ab, zeigen den Datensatz im Formular an und fügen den Code zum Löschen des Datensatzes
aus der Datenbank hinzu. Um den Datensatz abzurufen und anzuzeigen, definieren Sie eine Datensatzgruppe, die nur
einen Datensatz enthält (den Datensatz, den der Benutzer löschen möchte), und verbinden Sie die Spalten der
Datensatzgruppe mit dem Formular.
Note: Die Löschseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. Beispielsweise ist es nicht
möglich, der Löschseite das Serververhalten „Datensatz aktualisieren“ oder „Datensatz einfügen“ hinzuzufügen.
HTML-Formulare zur Anzeige der Datensätze anzeigen
1 Erstellen Sie eine neue Seite und speichern Sie sie als die Löschseite, die Sie im vorangegangenen Abschnitt
festgelegt haben.
Im letzten Abschnitt haben Sie den Hyperlink „Delete“ erstellt und dabei eine Löschseite angegeben. Verwenden Sie
den dabei verwendeten Namen (z. B. „deleteConfirm.cfm“), wenn Sie die Datei zum ersten Mal speichern.
2 Fügen Sie auf der Seite ein HTML-Formular ein („Einfügen“ > „Formular“ > „Formular“).
3 Fügen Sie dem Formular ein verborgenes Formularfeld hinzu.
Das verborgene Formularfeld wird für die Datensatz-ID benötigt, die der URL-Parameter übergibt. Um ein
verborgenes Feld hinzuzufügen, setzen Sie die Einfügemarke in das Formular und wählen Sie „Einfügen“ >
„Formular“ > „Verstecktes Feld“.
4 Fügen Sie dem Formular eine Schaltfläche hinzu.
Der Besucher klickt auf die Schaltfläche, um das Löschen des angezeigten Datensatzes zu bestätigen. Um eine
Schaltfläche hinzuzufügen, setzen Sie die Einfügemarke in das Formular und wählen Sie „Einfügen“ > „Formular“ >
„Schaltfläche“.
5 Bearbeiten Sie das Layout der Seite nach Belieben und speichern Sie sie.
Zu löschende Datensätze abrufen
1 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie im Popupmenü die Option „Datensatzgruppe (Abfrage)“ aus.
Das einfache Dialogfeld „Datensatzgruppe“ bzw. „Datensatz“ wird angezeigt. Wird stattdessen das erweiterte
Dialogfeld „Datensatzgruppe“ geöffnet, klicken Sie auf „Einfach“.
2 Benennen Sie die Datensatzgruppe und wählen Sie eine ColdFusion-Datenquelle aus sowie die Datenbanktabelle,
die die Datensätze enthält, die von Besuchern gelöscht werden können.
3 Wählen Sie im Spaltenbereich die Tabellenspalten (Datensatzfelder) aus, die auf der Seite angezeigt werden sollen.
685
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Um nur einige Felder des Datensatzes anzuzeigen, klicken Sie auf „Ausgewählt“. Wählen Sie dann die gewünschten
Felder aus, indem Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen
Listeneinträge klicken.
Achten Sie darauf, dass auch das Feld für die Datensatz-ID gewählt werden muss, auch wenn es nicht angezeigt werden soll.
4 Füllen Sie den Abschnitt „Filter“ wie im Folgenden beschrieben aus, um den Datensatz zu suchen und anzuzeigen,
der in dem von der Ergebnisseite übergebenen URL-Parameter angegeben ist:
• Wählen Sie im ersten Popupmenü im Bereich „Filter“ die Spalte in der Datensatzgruppe aus, deren Werte mit dem
Wert des von der Masterseite übermittelten URL-Parameters übereinstimmen. Wenn der URL-Parameter
beispielsweise eine Datensatz-ID-Nummer übergibt, wählen Sie die Spalte aus, die Datensatz-ID-Nummern
enthält. Im vorangegangenen Beispiel enthält die Spalte „CODE“ der Datensatzgruppe die Werte, die mit dem
URL-Parameter übereinstimmen, der von der Seite mit den Lösch-Hyperlinks übergeben wurde.
• Wählen Sie im Popupmenü neben dem ersten Menü das Gleichheitszeichen aus (soweit noch nicht geschehen).
• Wählen Sie im dritten Popupmenü die Option „URL-Parameter“ aus. Die Seite mit den Lösch-Hyperlinks übergibt
Informationen mithilfe eines URL-Parameters an die Löschseite.
• Geben Sie im vierten Textfeld den Namen des URL-Parameters ein, der von der Seite mit den Lösch-Hyperlinks
übermittelt wird.
5 Klicken Sie auf „OK“.
Die Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt.
Zu löschende Datensätze anzeigen
1 Wählen Sie im Bedienfeld „Bindungen“ die Spalten der Datensatzgruppe (Datensatzfelder) aus und ziehen Sie sie
auf die Löschseite.
Achten Sie darauf, dass dieser schreibgeschützte dynamische Inhalt innerhalb der Begrenzungen des Formulars
eingefügt wird. Weitere Informationen zum Einfügen dynamischer Inhalte auf einer Seite finden Sie unter “Texte
dynamisch gestalten” on page 627.
Jetzt müssen Sie die Spalte mit der Datensatz-ID mit dem verborgenen Formularfeld verbinden.
686
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
2 Sorgen Sie dafür, dass die unsichtbaren Elemente aktiviert sind („Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare
Elemente“) und klicken Sie auf das gelbe Schutzschild-Symbol, das für das verborgene Formularfeld steht.
Das verborgene Formularfeld ist ausgewählt.
3 Klicken Sie im Eigenschafteninspektor auf das Blitzsymbol neben dem Feld „Wert“.
4 Wählen Sie im Dialogfeld „Dynamische Daten“ die Datensatz-ID-Spalte in der Datensatzgruppe aus.
Im folgenden Beispiel enthält die Datensatz-ID-Spalte „CODE“ eindeutige Speichercodes.
Ausgewählte Datensatz-ID-Spalte
5 Klicken Sie auf „OK“ und speichern Sie die Seite.
Fertige Löschseite
687
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Code zum Löschen des Datensatzes hinzufügen
Nachdem Sie den ausgewählten Datensatz auf der Löschseite eingeblendet haben, müssen Sie Code in die Seite
einfügen, der den Datensatz aus der Datenbank löscht, wenn der Benutzer durch Klicken auf die entsprechende
Schaltfläche den Löschvorgang bestätigt. Sie können den Code in Dreamweaver schnell und einfach mithilfe des
Serververhaltens „Datensatz löschen“ einfügen.
Vorgehensweise zum Hinzufügen von Serververhalten zum Löschen von Datensätzen
(ColdFusion, PHP)
1 Achten Sie darauf, dass die ColdFusion- oder PHP-Löschseite in Dreamweaver geöffnet ist.
2 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), klicken Sie auf die Schaltfläche mit
dem Pluszeichen (+) und wählen Sie „Datensatz löschen“.
3
Stellen Sie sicher, dass im Feld „Zuerst prüfen, ob Variable definiert ist“ die Option „Primärschlüsselwert“ aktiviert ist.
Sie legen den Primärschlüsselwert später im Dialogfeld fest.
4 Wählen Sie im Popupmenü „Verbindung“ oder „Datenquelle“ (ColdFusion) eine Verbindung zur Datenbank aus,
damit das Serververhalten die Verbindung zur betreffenden Datenbank herstellen kann.
5 Wählen Sie im Popupmenü „Tabelle“ die Datenbanktabelle aus, die die zu löschenden Datensätze enthält.
6 Wählen Sie im Popupmenü „Primärschlüsselspalte“ die Tabellenspalte mit den Datensatz-IDs aus.
Das Serververhalten „Datensatz löschen“ sucht in dieser Spalte nach Übereinstimmungen. Die Spalte müsste dieselbe
Datensatz-ID enthalten wie die Spalte der Datensatzgruppe, mit der Sie das verborgene Formularfeld auf der Seite
verbunden haben.
Wenn die Datensatz-ID numerisch ist, wählen Sie die Option „Numerisch“.
7 (PHP) Wählen Sie im Popupmenü „Primärschlüsselwert“ die Variable auf Ihrer Seite aus, die die Datensatz-ID des
zu löschenden Datensatzes enthält.
Die Variable wird durch das verborgene Formularfeld erstellt. Sie trägt den gleichen Namen wie das Namensattribut
des versteckten Feldes und ist entweder ein Formular- oder ein URL-Parameter, je nach Attribut der
Formularmethode.
8 Geben Sie im Feld „Nach dem Löschen zu URL wechseln“ oder „Bei Erfolg hierher gehen“ die Seite an, die geöffnet
werden soll, nachdem der Datensatz aus der Tabelle gelöscht wurde.
Sie können eine Seite angeben, die eine kurze Erfolgsmeldung für den Benutzer enthält, oder eine Seite, auf der die
restlichen Datensätze aufgeführt sind, damit der Benutzer überprüfen kann, ob der Datensatz gelöscht wurde.
688
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
9 Klicken Sie auf „OK“ und speichern Sie die Eingaben.
Vorgehensweise zum Hinzufügen von Serververhalten zum Löschen von Datensätzen (ASP)
1 Achten Sie darauf, dass die ASP-Löschseite in Dreamweaver geöffnet ist.
2 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), klicken Sie auf die Schaltfläche mit
dem Pluszeichen (+) und wählen Sie „Datensatz löschen“.
3 Wählen Sie im Popupmenü „Verbindung“ eine Verbindung mit der Datenbank aus, damit mit dem
Serververhalten eine Verbindung mit der betreffenden Datenbank hergestellt werden kann.
Klicken Sie auf die Schaltfläche „Definieren“, wenn Sie eine Verbindung definieren müssen.
4 Wählen Sie im Popupmenü „Löschen aus Tabelle“ die Datenbanktabelle aus, die die zu löschenden Datensätze
enthält.
5 Geben Sie im Popupmenü „Datensatz auswählen in“ die Datensatzgruppe an, die die zu löschenden Datensätze
enthält.
6 Wählen Sie im Popupmenü „Spalte für eindeutigen Schlüssel“ eine Schlüsselspalte aus (in der Regel die Datensatz-
ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden.
Wählen Sie die Option „Numerisch“, wenn der Wert eine Zahl ist. In Schlüsselspalten können meistens nur
numerische Werte, in manchen Fällen jedoch auch Textzeichenfolgen eingegeben werden.
7 Geben Sie im Popupmenü „Durch Senden löschen“ das HTML-Formular an, das die Schaltfläche „Senden“ enthält,
mit der der Löschbefehl an den Server gesendet wird.
8 Geben Sie im Feld „Nach dem Löschen zu URL wechseln“ die Seite an, die geöffnet werden soll, nachdem der
Datensatz aus der Datenbanktabelle gelöscht wurde.
Sie können eine Seite angeben, die eine kurze Erfolgsmeldung für den Benutzer enthält, oder eine Seite, auf der die
restlichen Datensätze aufgeführt sind, damit der Benutzer überprüfen kann, ob der Datensatz gelöscht wurde.
9 Klicken Sie auf „OK“ und speichern Sie die Eingaben.
Löschseiten testen
1 Laden Sie die Such-, Ergebnis- und Löschseiten auf den Webserver hoch, öffnen Sie einen Browser und suchen Sie
einen Testdatensatz, der gelöscht werden kann.
Wenn Sie auf der Ergebnisseite auf einen Hyperlink zum Löschen klicken, wird die Löschseite angezeigt.
2 Klicken Sie auf die Schaltfläche „Bestätigen“, um den Datensatz aus der Datenbank zu löschen.
3 Überprüfen Sie, ob der Datensatz gelöscht wurde, indem Sie ihn erneut suchen. Der Datensatz sollte nicht mehr
auf der Ergebnisseite angezeigt werden.
689
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Seiten mit erweiterten Objekten für die
Datenbankverarbeitung erstellen (ColdFusion, ASP)
ASP-Befehlsobjekte
Ein ASP-Befehlsobjekt ist ein Serverobjekt, das eine bestimmte Datenbankoperation ausführt. Das Objekt kann eine
beliebige gültige SQL-Anweisung enthalten, auch eine, die eine Datensatzgruppe zurückgibt oder in einer Datenbank
Datensätze einfügt, aktualisiert oder löscht. Ein Befehlsobjekt kann die Struktur einer Datenbank ändern, wenn die
SQL-Anweisung in einer Tabelle eine Spalte hinzufügt oder löscht. Sie können mit einem Befehlsobjekt auch eine
gespeicherte Prozedur in einer Datenbank ausführen.
Ein Befehlsobjekt kann wiederverwendbar sein, d. h., der Anwendungsserver kann eine einzelne kompilierte Version
des Objekts wiederverwenden, um den Befehl mehrere Male auszuführen. Ein Befehl wird wiederverwendbar, wenn
Sie die Eigenschaft „Prepared“ des Befehlsobjekts auf
true setzen, wie in der folgenden VBScript-Anweisung:
mycommand.Prepared = true
Wenn Sie wissen, dass der Befehl häufiger ausgeführt wird, kann die Verwendung einer einzelnen kompilierten
Version des Objekts die Effizienz von Datenbankoperationen erhöhen.
Note: Prepared-Befehle werden nicht von allen Datenbankherstellern unterstützt. Gehört Ihre Datenbank dazu, wird sie
möglicherweise eine Fehlermeldung ausgeben, wenn Sie diese Eigenschaft auf
true setzen. Möglicherweise wird sogar die
Anforderung, den Befehl vorzubereiten, ignoriert und die Eigenschaft „Prepared“ auf
false gesetzt.
Ein Befehlsobjekt wird von Skripts in einer ASP-Seite erstellt. In Dreamweaver können Sie jedoch Befehlsobjekte auch
erstellen, ohne eine Zeile ASP-Code schreiben zu müssen.
ASP-Befehle zum Ändern von Datenbanken verwenden
Sie können Dreamweaver verwenden, um ASP-Befehlsobjekte zu erstellen, die in einer Datenbank Datensätze
einfügen, aktualisieren oder löschen. Sie definieren für das Befehlsobjekt die SQL-Anweisung oder gespeicherte
Prozedur, die die Datenbankoperation ausführt.
1 Öffnen Sie in Dreamweaver die ASP-Seite, die den Befehl ausführen wird.
2 Öffnen Sie das Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“), klicken Sie auf die Schaltfläche mit
dem Pluszeichen (+) und wählen Sie „Befehl“.
3 Geben Sie einen Namen für den Befehl ein, wählen Sie eine Verbindung zu der Datenbank aus, die die zu
bearbeitenden Datensätze enthält, und wählen Sie die gewünschte Bearbeitungsoperation aus, die der Befehl
ausführen soll – Einfügen, Aktualisieren oder Löschen.
Dreamweaver startet die SQL-Anweisung automatisch, basierend auf dem Typ der von Ihnen gewählten Operation.
Wenn Sie beispielsweise „Einfügen“ auswählen, sieht das Dialogfeld folgendermaßen aus:
4 Vervollständigen Sie die SQL-Anweisung.
690
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Informationen zum Schreiben von SQL-Anweisungen für die Bearbeitung von Datenbanken finden Sie in einem
Handbuch über SQL-Transaktionen.
5 Im Bereich „Variablen“ können Sie eventuelle SQL-Variablen definieren. Geben Sie den Namen und den
Laufzeitwert an. Durch die Angabe von Typ und Größe der einzelnen Variablen werden Injizierungsangriffe
verhindert.
Das nachfolgende Beispiel zeigt eine INSERT-Anweisung, die drei SQL-Variablen enthält. Die Werte dieser Variablen
werden von URL-Parametern bereitgestellt, die – wie in der Spalte „Laufzeitwert“ des Bereichs „Variablen“ definiert
– an die Seite übergeben werden.
Den Wert für die Größe können Sie über das Dreamweaver-Bedienfeld „Datenbank“ abrufen. Suchen Sie Ihre
Datenbank im Bedienfeld „Datenbank“ und erweitern Sie sie. Suchen Sie als Nächstes die Tabelle, mit der Sie gerade
arbeiten, und erweitern Sie auch diese. In der Tabelle sind die Größen Ihrer Felder aufgelistet. Sie finden dort
beispielsweise einen Eintrag wie ADRESSE (WChar 50). In diesem Beispiel bezeichnet 50 die Größe. Sie finden die
Größe auch in Ihrer Datenbankanwendung.
Note: Die Datentypen Numerisch, Boolean und Datum/Uhrzeit verwenden immer die Größe -1.
Die Werte für den Datentyp finden Sie in der folgenden Tabelle aufgelistet:
Weitere Informationen zu Datentyp und Größe von SQL-Variablen finden Sie unter
www.adobe.com/go/4e6b330a_de.
6 Schließen Sie das Dialogfeld.
In der Datenbank verwendeter Typ In Dreamweaver verwendeter
Typ
Größe
Numeric (MS Access, MS SQL Server, MySQL) Double-Gleitkommazahl -1
Boolean, Ja/Nein (MS Access, MS SQL Server, MySQL) Double-Gleitkommazahl -1
Date/Time (MS Access, MS SQL Server, MySQL) DBTimeStamp -1
Alle sonstigen Textfelder, einschließlich der MySQL-Datentypen char,
varchar und longtext
LongVarChar Bitte in der Datenbanktabelle
nachsehen.
Text (MS Access) und nvarchar, nchar (MS SQL Server) VarWChar Bitte in der Datenbanktabelle
nachsehen.
Memo (MS Access), ntext (MS SQL Server) und Felder, die große
Textmengen unterstützen.
LongVarWChar 1073741823
691
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Dreamweaver fügt ASP-Code in Ihre Seite ein, der bei Ausführung auf dem Server einen Befehl erstellt, der in der
Datenbank Datensätze einfügt, aktualisiert oder löscht.
Standardmäßig setzt der Code die Eigenschaft „Prepared“ des Befehlsobjekts auf
true. Dies bewirkt die
Wiederverwendung einer einzelnen kompilierten Version des Objekts durch den Anwendungsserver bei jeder
Ausführung des Befehls. Um diese Einstellung zu ändern, wechseln Sie in die Codeansicht und ändern die Eigenschaft
„Prepared“ in
false.
7 Erstellen Sie eine Seite mit einem HTML-Formular, damit die Besucher Datensatzdaten eingeben können. Fügen
Sie in das HTML-Formular drei Felder (txtCity, txtAddress und txtPhone) und eine Schaltfläche zum Senden ein.
Das Formular verwendet die Methode
GET und sendet die Werte der Textfelder an die Seite, die Ihren Befehl
enthält.
Gespeicherte Prozeduren
Seiten, die Datenbanken verändern, können Sie nicht nur mithilfe von Serververhalten erstellen, sondern auch mit
Verarbeitungsobjekten, z. B. mit gespeicherten Prozeduren oder ASP-Befehlsobjekten.
Eine gespeicherte Prozedur ist ein wiederverwendbares Datenbankelement, das eine bestimmte Datenbankoperation
durchführt. Eine gespeicherte Prozedur enthält SQL-Code, der unter anderem Datensätze einfügen, aktualisieren oder
löschen kann. Gespeicherte Prozeduren können auch die Struktur der Datenbank selbst ändern. Mithilfe einer
gespeicherten Prozedur können Sie beispielsweise eine Tabellenspalte hinzufügen oder sogar eine Tabelle löschen.
Eine gespeicherte Prozedur kann auch eine weitere gespeicherte Prozedur aufrufen, Eingabeparameter verarbeiten
und als Ausgangsparameter diverse Werte an die aufrufende Prozedur zurückgeben.
Eine gespeicherte Prozedur ist wiederverwendbar, d. h., Sie können mit einer einzelnen kompilierten Version der
Prozedur eine Datenbankoperation mehrere Male ausführen. Sobald Sie eine Datenbankoperation häufiger oder in
verschiedenen Anwendungen ausführen möchten, ist eine gespeicherte Prozedur ein geeignetes und effizientes Mittel.
Note: Die Datenbankprogramme MySQL und Microsoft Access unterstützen keine gespeicherten Prozeduren.
Gespeicherte Prozeduren hinzufügen (ColdFusion)
Sie können Datenbanken mithilfe von gespeicherten Prozeduren bearbeiten. Eine gespeicherte Prozedur ist ein
wiederverwendbares Datenbankelement, das eine bestimmte Datenbankoperation durchführt.
Bevor Sie eine gespeicherte Prozedur verwenden, um eine Datenbank zu bearbeiten, müssen Sie sicherstellen, dass die
gespeicherte Prozedur geeigneten SQL-Code enthält. Wie Sie eine gespeicherte Prozedur erstellen und in der
Datenbank speichern, können Sie der Dokumentation zu Ihrer Datenbank entnehmen. Auch ein gutes Transact-SQL-
Handbuch ist hier hilfreich.
1 Öffnen Sie in Dreamweaver die Seite, die die gespeicherte Prozedur ausführen wird.
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie dann die Option „Gespeicherte Prozedur“.
3 Wählen Sie im Popupmenü „Datenquelle“ eine Verbindung zu der Datenbank aus, die die gespeicherte Prozedur
enthält.
4 Geben Sie den Benutzernamen und das Kennwort für die ColdFusion-Datenquelle ein.
5 Wählen Sie im Popupmenü „Prozeduren“ eine gespeicherte Prozedur aus.
Dreamweaver trägt automatisch alle Parameter ein.
6 Wählen Sie einen Parameter aus und klicken Sie dann auf die Schaltfläche „Bearbeiten“, wenn Sie Änderungen
durchführen müssen.
692
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Das Dialogfeld „Gespeicherte Prozedur-Variable bearbeiten“ wird angezeigt. Der Name der Variablen, die Sie
bearbeiten, wird im Feld „Name“ angezeigt.
Note: Sie müssen Testwerte für alle Eingabeparameter von gespeicherte Prozeduren eingeben.
7 Nehmen Sie die erforderlichen Änderungen vor:
• Wählen Sie im Popupmenü eine Richtung aus. Eine gespeicherte Prozedur kann Eingabewerte oder Ausgabewerte
oder Eingabe- und Ausgabewerte aufweisen.
• Wählen Sie im Popupmenü einen SQL-Typ aus. Geben Sie eine Rückgabevariable, einen Laufzeitwert und einen
Testwert ein.
8 Wenn die gespeicherte Prozedur Parameter akzeptiert, klicken Sie auf die Schaltfläche mit dem Pluszeichen (+),
um einen Seitenparameter hinzuzufügen.
Note: Sie müssen für alle Parameter-Rückgabewerte von gespeicherten Prozeduren die entsprechenden Seitenparameter
eingeben. Fügen Sie nur dann Seitenparameter hinzu, wenn die entsprechenden Rückgabewerte vorhanden sind.
Klicken Sie erneut auf die Schaltfläche mit dem Pluszeichen (+), um bei Bedarf einen weiteren Seitenparameter
hinzuzufügen.
9 Um einen Seitenparameter wieder zu löschen, wählen Sie ihn aus und klicken Sie auf die Schaltfläche mit dem
Minuszeichen. Um einen Parameter zu ändern, klicken Sie auf „Bearbeiten“.
10 Aktivieren Sie die Option „Gibt Datensatzgruppe zurück namens“ und geben Sie einen Namen für die
Datensatzgruppe ein, wenn die gespeicherte Prozedur eine Datensatzgruppe zurückgibt. Klicken Sie dann auf die
Schaltfläche „Testen“, um die von der gespeicherten Prozedur zurückgegebene Datensatzgruppe anzuzeigen.
Dreamweaver führt die gespeicherte Prozedur aus und zeigt die Datensatzgruppe an, soweit vorhanden.
Note: Wenn die gespeicherte Prozedur eine Datensatzgruppe zurückgibt und Parameter verarbeitet, müssen Sie im Feld
„Variablen“ in der Spalte „Standardwert“ einen Wert eingeben, um die gespeicherte Prozedur zu testen.
Sie können andere Testwerte verwenden, um andere Datensatzgruppen zu generieren. Um die Testwerte zu ändern,
klicken Sie für Parameter auf die Schaltfläche „Bearbeiten“ und ändern den Testwert. Für Seitenparameter klicken
Sie auf die Schaltfläche „Bearbeiten“ und ändern dann den Standardwert.
11 Aktivieren Sie die Option „Gibt Statuscode zurück namens“ und geben Sie einen Namen für den Statuscode ein,
wenn die gespeicherte Prozedur einen Statuscode-Rückgabewert zurückgibt. Klicken Sie auf „OK“.
Nachdem Sie das Dialogfeld geschlossen haben, fügt Dreamweaver ColdFusion-Code in Ihre Seite ein, der bei
Ausführung auf dem Server eine gespeicherte Prozedur in der Datenbank aufruft. Die gespeicherte Prozedur
wiederum führt eine Datenbankoperation aus, wie beispielsweise das Einfügen eines Datensatzes.
Wenn die gespeicherte Prozedur Parameter verarbeitet, können Sie eine Seite erstellen, die die Parameterwerte erfasst
und an die Seite mit der gespeicherten Prozedur sendet. Sie können beispielsweise eine Seite erstellen, auf der die
Benutzer mithilfe von URL-Parametern oder eines HTML-Formulars Parameterwerte eingeben können.
More Help topics
“Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren” on page 614
Gespeicherte Prozeduren ausführen (ASP)
ASP-Seiten müssen Sie in ein Befehlsobjekt hinzufügen, um eine gespeicherte Prozedur auszuführen. Weitere
Informationen zu Befehlsobjekten finden Sie unter “ASP-Befehlsobjekte” on page 689.
1 Öffnen Sie in Dreamweaver die Seite, die die gespeicherte Prozedur ausführen wird.
693
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie dann die Option „Befehl (gespeicherte Prozedur)“.
Nun wird das Dialogfeld „Befehl“ angezeigt.
3 Geben Sie einen Namen für den Befehl ein, wählen Sie die Verbindung zur Datenbank, die die gespeicherte
Prozedur enthält, und wählen Sie dann im Popupmenü „Typ“ die Option „Gespeicherte Prozedur“.
4 Wählen Sie die gespeicherte Prozedur aus, indem Sie im Feld „Datenbankelemente“ den Zweig „Gespeicherte
Prozeduren“ erweitern, die gespeicherte Prozedur in der Liste auswählen und auf die Schaltfläche „Prozedur“
klicken.
5 Geben Sie erforderliche Parameter in die Tabelle „Variablen“ ein.
Sie müssen keine Parameter für Variablen vom Typ
RETURN_VALUE eingeben.
6 Klicken Sie auf „OK“.
Nachdem Sie das Dialogfeld geschlossen haben, wird der ASP-Code in Ihre Seite eingefügt. Wenn der Code auf dem
Server ausgeführt wird, erstellt er ein Befehlsobjekt, das in der Datenbank eine gespeicherte Prozedur ausführt. Die
gespeicherte Prozedur wiederum führt eine Datenbankoperation aus, wie beispielsweise das Einfügen eines
Datensatzes.
Standardmäßig setzt der Code die Eigenschaft „Prepared“ des Befehlsobjekts auf
true. Dies bewirkt die
Wiederverwendung einer einzelnen kompilierten Version des Objekts durch den Anwendungsserver bei jeder
Ausführung der gespeicherten Prozedur. Wenn Sie wissen, dass der Befehl häufiger ausgeführt wird, kann die
Verwendung einer einzelnen kompilierten Version des Objekts die Effizienz von Datenbankoperationen erhöhen.
Wird der Befehl jedoch nur ein ein- oder zweimal ausgeführt, führt dies eher zu einer Verlangsamung der
Webanwendung, weil das System zur Kompilierung des Befehls zusätzliche Zeit aufwenden muss. Um die Einstellung
zu ändern, wechseln Sie in die Codeansicht und ändern die Eigenschaft „Prepared“ in
false.
Note: Prepared-Befehle werden nicht von allen Datenbankherstellern unterstützt. Ist dies bei Ihrer Datenbank der Fall,
wird möglicherweise eine Fehlermeldung ausgegeben, wenn Sie die Seite ausführen. Wechseln Sie in die Codeansicht und
ändern Sie die Eigenschaft „Prepared“ in
false.
Wenn die gespeicherte Prozedur Parameter verarbeitet, können Sie eine Seite erstellen, die die Parameterwerte erfasst
und an die Seite mit der gespeicherten Prozedur sendet. Sie können beispielsweise eine Seite erstellen, auf der die
Benutzer mithilfe von URL-Parametern oder eines HTML-Formulars Parameterwerte eingeben können.
Erstellen von Registrierungsseiten
Registrierungsseiten
Ihre Webanwendung kann eine Seite enthalten, auf der Benutzer sich registrieren müssen, wenn sie Ihre Site zum
ersten Mal besuchen.
Für eine Registrierungsseite sind die folgenden Bausteine erforderlich:
• Eine Datenbanktabelle, in der Anmeldeinformationen zu den Besuchern gespeichert werden
• Ein HTML-Formular, in dem Besucher einen Benutzernamen und ein Kennwort wählen können
Über das Formular können Sie auch weitere Personendaten von Besuchern anfordern.
• Ein Serververhalten „Datensatz einfügen“, mit dem die Datenbanktabelle der Sitebesucher aktualisiert wird
694
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
• Ein Serververhalten „Neuen Benutzernamen überprüfen“, mit dem sichergestellt wird, dass der eingegebene
Benutzername nicht bereits von einem anderen Besucher verwendet wird
More Help topics
“HTML-Formulare für die Auswahl von Benutzername und Kennwort hinzufügen” on page 694
“Datenbanktabellen der Benutzer aktualisieren” on page 695
“Serververhalten für eindeutige Benutzernamen hinzufügen” on page 695
Anmeldeinformationen über Benutzer speichern
Für Registrierungsseiten ist eine Datenbanktabelle erforderlich, in der die Anmeldeinformationen der Besucher
gespeichert werden.
• Achten Sie darauf, dass die Datenbanktabelle eine Spalte für den Benutzernamen sowie eine Spalte für das
Kennwort enthält. Sollen die angemeldeten Besucher über unterschiedliche Zugriffsrechte verfügen, muss die
Tabelle außerdem eine Spalte für die Zugriffsrechte enthalten.
• Wenn Sie für alle Besucher der Site ein gemeinsames Kennwort festlegen möchten, konfigurieren Sie Ihre
Datenbankanwendung (Microsoft Access, Microsoft SQL Server, Oracle usw.) so, dass das Kennwort
standardmäßig in alle neuen Benutzerdatensätze eingetragen wird. In den meisten Datenbankanwendungen ist es
möglich, eine Spalte für alle neu erstellten Datensätze auf einen Standardwert einzustellen. Legen Sie dazu das
Kennwort als Standardwert fest.
• In der Datenbanktabelle können auch andere wichtige Personendaten über Besucher gespeichert werden.
Im nächsten Schritt bei der Erstellung der Registrierungsseite fügen Sie ein HTML-Formular hinzu, damit Besucher
gegebenenfalls einen Benutzernamen und ein Kennwort wählen können (soweit erforderlich).
More Help topics
“Zugriffsrechte in der Benutzerdatenbank speichern” on page 700
HTML-Formulare für die Auswahl von Benutzername und Kennwort
hinzufügen
Fügen Sie der Registrierungsseite ein HTML-Formular hinzu, damit Besucher gegebenenfalls einen Benutzernamen
und ein Kennwort wählen können.
1 Erstellen Sie eine neue dynamische Seite („Datei“ > „Neu“ > „Leere Seite“) und entwerfen Sie mithilfe der
Dreamweaver-Entwurfswerkzeuge das Layout Ihrer Registrierungsseite.
2 Fügen Sie ein HTML-Formular hinzu, indem Sie die Einfügemarke an die gewünschte Stelle setzen und dann im
Menü „Einfügen“ den Befehl „Formular“ wählen.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell müssen Sie die unsichtbaren Elemente aktivieren
(„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“), damit die Formularränder durch schmale rote Linien
angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwählen, öffnen Sie dann den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie
den Namen im Feld „Formularname“ ein.
695
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Es ist nicht erforderlich, die Attribute action oder method festzulegen, um das Formular anzuweisen, wie und wohin
die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltfläche zum Senden klickt. Diese
Attribute werden vom Serververhalten „Datensatz einfügen“ automatisch festgelegt.
4 Fügen Sie Textfelder hinzu („Einfügen“ > „Formular“ > „Textfeld“), in die Besucher einen Benutzernamen und ein
Kennwort eingeben können.
Sie können dem Formular noch weitere Formularobjekte hinzufügen, in denen zusätzliche Personendaten
aufgezeichnet werden können.
Es empfiehlt sich, neben den einzelnen Formularobjekten Beschriftungen hinzuzufügen (in Form von Text oder
Bildern), um den Zweck der Formularobjekte zu verdeutlichen. Auch sollten Sie die Formularobjekte korrekt
anordnen, indem Sie sie in einer HTML-Tabelle platzieren. Weitere Informationen zu Formularobjekten finden Sie
unter “Erstellen von Webformularen” on page 714.
5 Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu („Einfügen“ > „Formular“ > „Schaltfläche“).
Auf Wunsch können Sie die Beschriftung der Schaltfläche zum Senden ändern. Wählen Sie dazu die Schaltfläche aus,
öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie im Feld „Wert“ eine neue
Beschriftung ein.
Im nächsten Schritt zur Erstellung der Registrierungsseite fügen Sie das Serververhalten „Datensatz einfügen“ hinzu,
mit dem Datensätze in die Benutzertabelle der Datenbank eingefügt werden.
Datenbanktabellen der Benutzer aktualisieren
Sie müssen der Registrierungsseite das Serververhalten „Datensatz einfügen“ hinzufügen, um die Benutzertabelle in
der Datenbank zu aktualisieren.
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Datensatz einfügen“ aus.
Das Dialogfeld „Datensatz einfügen“ wird angezeigt.
2 Füllen Sie dieses Dialogfeld aus. Geben Sie dabei unbedingt die Benutzertabelle in der Datenbank an, in die die
Benutzerdaten eingefügt werden sollen. Klicken Sie auf „OK“.
Schließlich müssen Sie noch sicherstellen, dass der Benutzername noch nicht von einem anderen registrierten
Besucher verwendet wird, um die Erstellung der Registrierungsseite abzuschließen.
More Help topics
“Einfügeseiten Schritt für Schritt erstellen” on page 672
Serververhalten für eindeutige Benutzernamen hinzufügen
Sie können zu einer Benutzerregistrierungsseite ein Serververhalten hinzufügen, das überprüft, ob der Benutzername
eindeutig ist, bevor Sie diesen Benutzer in Ihre Datenbank registrierter Benutzer einfügen.
696
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Wenn der Besucher auf der Registrierungsseite auf die Schaltfläche zum Senden klickt, vergleicht das Serververhalten
den eingegebenen Benutzernamen mit den Benutzernamen, die in der Datenbanktabelle der registrierten Besucher
gespeichert sind. Wenn der Benutzername nicht in der Datenbanktabelle vorhanden ist, führt das Serververhalten den
Vorgang zum Einfügen des Datensatzes auf reguläre Weise durch. Ist der Benutzername dagegen bereits vorhanden,
bricht das Serververhalten den Vorgang zum Einfügen des Datensatzes ab und öffnet eine neue Seite (in der Regel wird
der Besucher auf dieser Seite darauf hingewiesen, dass der Benutzername bereits verwendet wird).
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Benutzeranmeldung“ > „Neuen Benutzernamen
überprüfen“.
2 Wählen Sie im Popupmenü „Feld für Benutzername“ das Formulartextfeld aus, in das die Besucher Ihrer Site einen
Benutzernamen eingeben.
3 Geben Sie im Feld „Wenn bereits vorhanden, hierher gehen“ die Seite an, die geöffnet werden soll, wenn ein
übereinstimmender Benutzername in der Datenbanktabelle gefunden wird, und klicken Sie auf „OK“.
In dieser Seite sollte der Besucher darauf hingewiesen werden, dass der Benutzername bereits vergeben ist. Auch sollte
der Besucher die Möglichkeit erhalten, den Vorgang erneut zu versuchen.
Anmeldeseiten erstellen
Anmeldeseiten
Ihre Webanwendung kann eine Seite enthalten, mit der registrierte Besucher sich bei der Site anmelden können.
Für eine Registrierungsseite sind die folgenden Bausteine erforderlich:
• Eine Datenbanktabelle der registrierten Besucher
• Ein HTML-Formular, in das Besucher einen Benutzernamen und ein Kennwort eingeben können
• Ein Serververhalten „Benutzer anmelden“, mit dem sichergestellt wird, dass die eingegebene Kombination aus
Benutzername und Kennwort gültig ist
Wenn die Anmeldung erfolgreich ist, wird eine Sitzungsvariable für den Besucher erstellt. Diese Variable besteht
aus dem Benutzernamen.
More Help topics
“HTML-Formulare für die Benutzeranmeldung hinzufügen” on page 697
“Benutzernamen und Kennwort überprüfen” on page 697
Datenbanktabellen registrierter Benutzer erstellen
Sie benötigen eine Datenbanktabelle der registrierten Benutzer, damit überprüft werden kann, ob die Angaben zu
Benutzername und Kennwort auf der Anmeldeseite gültig sind.
❖ Erstellen Sie diese Tabelle mithilfe Ihrer Datenbankanwendung und einer Registrierungsseite. Anweisungen hierzu
finden Sie unter dem folgenden Hyperlink zum verwandten Thema.
Fügen Sie als nächsten Schritt beim Erstellen der Anmeldeseite ein HTML-Formular hinzu, mit dem sich Benutzer
anmelden können. Anweisungen hierzu finden Sie im nächsten Thema.
697
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
More Help topics
“Erstellen von Registrierungsseiten” on page 693
HTML-Formulare für die Benutzeranmeldung hinzufügen
Fügen Sie der Seite ein HTML-Formular hinzu, damit Besucher einen Benutzernamen und ein Kennwort eingeben
und sich auf diese Weise anmelden können.
1 Erstellen Sie eine Seite („Datei“ > „Neu“ > „Leere Seite“) und entwerfen Sie mithilfe der Dreamweaver-
Entwurfswerkzeuge das Layout Ihrer Anmeldeseite.
2 Fügen Sie ein HTML-Formular hinzu, indem Sie die Einfügemarke an die gewünschte Stelle setzen und dann im
Menü „Einfügen“ den Befehl „Formular“ auswählen.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell müssen Sie die unsichtbaren Elemente aktivieren
(„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“), damit die Formularränder durch schmale rote Linien
angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwählen, öffnen Sie dann den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie
den Namen im Feld „Formularname“ ein.
Es ist nicht erforderlich, die Attribute
action oder method festzulegen, um das Formular anzuweisen, wie und wohin
die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltfläche zum Senden klickt. Diese
Attribute werden vom Serververhalten „Benutzer anmelden“ automatisch festgelegt.
4 Fügen Sie dem Formular Textfelder für den Benutzernamen und das Kennwort hinzu („Einfügen“ > „Formular“ >
„Textfeld“).
Fügen Sie neben den einzelnen Textfeldern Beschriftungen hinzu (in Form von Text oder Bildern) und ordnen Sie die
Textfelder korrekt an, indem Sie sie in einer HTML-Tabelle platzieren und das Tabellenattribut
border auf 0
einstellen.
5 Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu („Einfügen“ > „Formular“ > „Schaltfläche“).
Auf Wunsch können Sie die Beschriftung der Schaltfläche zum Senden ändern. Wählen Sie dazu die Schaltfläche aus,
öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“) und geben Sie im Feld „Beschriftung“ einen
neuen Wert ein.
Als nächsten Schritt bei der Erstellung der Anmeldeseite fügen Sie das Serververhalten „Benutzer anmelden“ hinzu,
damit überprüft wird, ob der eingegebene Benutzername und das eingegebene Kennwort gültig sind.
Benutzernamen und Kennwort überprüfen
Sie müssen der Anmeldeseite das Serververhalten „Benutzer anmelden“ hinzufügen, um sicherzustellen, dass der
Besucher einen gültigen Benutzername und ein gültiges Kennwort eingibt.
Wenn der Besucher auf der Anmeldeseite auf die Schaltfläche zum Senden klickt, vergleicht das Serververhalten
„Benutzer anmelden“ die vom Besucher eingegebenen Werte mit den Werten, die für registrierte Besucher gespeichert
sind. Stimmen die Werte überein, öffnet das Serververhalten eine Seite (in der Regel der Begrüßungsbildschirm der
Site). Wenn die Werte nicht übereinstimmen, öffnet das Serververhalten eine andere Seite (in der Regel wird der
Besucher auf dieser Seite darauf hingewiesen, dass die Anmeldung nicht erfolgreich war).
1 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Benutzeranmeldung“ > „Benutzer anmelden“.
698
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
2 Geben Sie das Formular und die Formularobjekte an, in die die Besucher der Site ihren Benutzernamen und ihr
Kennwort eingeben.
3 (ColdFusion) Geben Sie bei Bedarf Ihren Benutzernamen und Ihr Kennwort ein.
4 Geben Sie die Datenbanktabelle und die Spalten an, in denen die Benutzernamen und die Kennwörter aller
registrierten Besucher gespeichert werden.
Das Serververhalten vergleicht die Angaben des Besuchers zu Benutzernamen und Kennwort auf der Anmeldeseite
mit den Werten in diesen Spalten.
5 Geben Sie die Seite an, die geöffnet werden soll, wenn die Anmeldung erfolgreich ist.
Dabei handelt es sich in der Regel um den Begrüßungsbildschirm der Site.
6 Geben Sie die Seite an, die geöffnet werden soll, wenn die Anmeldung nicht erfolgreich ist.
Auf dieser Seite wird der Besucher in der Regel darauf hingewiesen, dass die Anmeldung nicht erfolgreich war. Auch
sollte der Besucher die Möglichkeit erhalten, die Anmeldung erneut zu versuchen.
7 Sollen Benutzer, die nach dem Versuch, auf eine zugriffsbeschränkte Seite zuzugreifen, zur Anmeldeseite
weitergeleitet wurden, nach erfolgter Anmeldung wieder zu der zugriffsbeschränkten Seite umgeleitet werden,
wählen Sie die Option „Zum vorherigen URL gehen“.
Wenn ein Besucher versucht, auf Ihre Site zuzugreifen, indem er eine zugriffsbeschränkte Seite ohne vorherige
Anmeldung öffnet, kann die zugriffsbeschränkte Seite den Besucher zur Anmeldeseite weiterleiten. Nachdem sich der
Besucher erfolgreich angemeldet hat, leitet ihn die Anmeldeseite zu der zugriffsbeschränkten Seite um, die ihn zuvor
zur Anmeldeseite weitergeleitet hat.
Wenn Sie auf diesen Seiten das Dialogfeld für das Serververhalten „Zugriff auf Seite beschränken“ ausfüllen, müssen
Sie im Textfeld „Bei verweigertem Zugriff hierher gehen“ Ihre Anmeldeseite angeben.
8 Geben Sie an, ob der Zugriff auf die Seite nur auf Basis des Benutzernamens und des Kennworts erfolgen soll oder
ob dabei auch Berechtigungsebenen berücksichtigt werden sollen, und klicken Sie auf „OK“.
Der Anmeldeseite wird ein Serververhalten hinzugefügt, das überprüft, ob die von einem Besucher eingegebene
Kombination aus Benutzername und Kennwort gültig ist.
More Help topics
“Unberechtigte Benutzer zu einer anderen Seite umleiten” on page 699
“Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können” on page 698
Erstellen von Seiten, auf die nur autorisierte Benutzer
zugreifen können
Geschützte Seiten
Ihre Webanwendung kann eine geschützte Seite enthalten, auf die nur berechtigte Besucher zugreifen können.
Wenn ein Besucher beispielsweise versucht, die Anmeldeseite zu umgehen und dazu die URL der geschützten Seite in
einen Browser eingibt, wird der Besucher zu einer anderen Seite umgeleitet. Ein ähnlicher Fall liegt vor, wenn Sie die
Berechtigungsebene Administrator für eine Seite vorgeben; in diesem Fall können nur Besucher mit
Administratorrechten auf die Seite zugreifen. Wenn ein angemeldeter Besucher versucht, auf die geschützte Seite
zuzugreifen, jedoch nicht über die erforderlichen Zugriffsrechte verfügt, wird er zu einer anderen Seite umgeleitet.
699
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Berechtigungsebenen können auch eingesetzt werden, um neu registrierte Besucher zu überprüfen, bevor Sie ihnen
uneingeschränkten Zugriff auf die Site gewähren. So können Sie beispielsweise festlegen, dass Besucher erst dann auf
die Mitgliedsseiten einer Site zugreifen können, wenn eine entsprechende Zahlung eingegangen ist. Dazu richten Sie
für die Mitgliedsseiten die Autorisierungsebene „Mitglied“ ein und gewähren neu registrierten Besuchern lediglich
Gastzugriffsrechte. Sobald ein Besucher die erforderliche Zahlung geleistet hat, können Sie seine Zugriffsrechte ändern
und ihm die Berechtigung „Mitglied“ gewähren (in der Datenbanktabelle der registrierten Besucher).
Wenn Sie keine Berechtigungsebenen verwenden möchten, können Sie beliebige Seiten Ihrer Site schützen, indem Sie
ihnen das Serververhalten „Zugriff auf Seite beschränken“ hinzufügen. Dieses Serververhalten bewirkt, dass alle nicht
erfolgreich angemeldeten Besucher zu einer anderen Seite umgeleitet werden.
Wenn Sie keine Berechtigungsebenen verwenden möchten, können Sie beliebige Seiten Ihrer Site mit den folgenden
Bausteinen schützen:
• Serververhalten „Zugriff auf Seite beschränken“, mit dem unberechtigte Besucher zu einer anderen Seite umgeleitet
werden
• Zusätzliche Spalte in der Besucher-Datenbanktabelle, um die Zugriffsrechte der einzelnen Besucher zu speichern
Unabhängig davon, ob Sie Berechtigungsebenen verwenden, können Sie der geschützten Seite einen Hyperlink
hinzufügen, mit dem der Besucher sich abmelden kann und durch den eventuell vorhandene Sitzungsvariablen
gelöscht werden.
More Help topics
“Schützen von Ordnern in Anwendungen (ColdFusion)” on page 701
Unberechtigte Benutzer zu einer anderen Seite umleiten
Sie können verhindern, dass unberechtigte Besucher auf eine Seite zugreifen, indem Sie der Seite das Serververhalten
„Zugriff auf Seite beschränken“ hinzufügen. Dieses Serververhalten leitet Besucher in den folgenden Fällen zu einer
anderen Seite um: Wenn der Besucher versucht, die URL der geschützten Seite in einem Browser einzugeben, um die
Anmeldeseite zu umgehen, oder wenn der Besucher sich zwar angemeldet hat, jedoch nicht über die erforderlichen
Zugriffsrechte für die geschützte Seite verfügt, auf die er zugreifen möchte.
Note: Mit dem Serververhalten „Zugriff auf Seite beschränken“ können nur HTML-Seiten geschützt werden, nicht jedoch
andere Ressourcen der Site, wie beispielsweise Bild- oder Audiodateien.
Wenn Sie mehreren Seiten Ihrer Site die gleichen Zugriffsrechte zuweisen möchten, können Sie die Zugriffsrechte
kopieren und in eine andere Seite einfügen.
Unberechtigte Besucher zu einer anderen Seite umleiten
1 Öffnen Sie die Seite, die geschützt werden soll.
2 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie im Popupmenü die Option „Benutzeranmeldung“ > „Zugriff auf Seite
beschränken“.
3 Wählen Sie die Zugriffsebene für die Seite aus. Damit nur Besucher mit bestimmten Zugriffsrechten die Seite
anzeigen können, wählen Sie die Option „Benutzername, Kennwort und Zugriffsebene“ und geben dann die
Berechtigungsebenen für die Seite an.
So können Sie beispielsweise festlegen, dass nur Besucher mit der Administratorberechtigung die Seite anzeigen
können, indem Sie in der Berechtigungsebenenliste die Option „Administrator“ auswählen.
700
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
4 Wenn Sie der Liste Berechtigungsebenen hinzufügen möchten, klicken Sie auf „Definieren“. Geben Sie in der Liste
„Zugriffsebenen definieren“ eine neue Berechtigungsebene ein und klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+). Die neue Berechtigungsebene wird gespeichert, sodass sie auch für andere Seiten verwendet
werden kann.
Vergewissern Sie sich, dass die Zeichenfolge für die Berechtigungsebene genau mit der in Ihrer Benutzerdatenbank
gespeicherten Zeichenfolge übereinstimmt. Enthält die Autorisierungsspalte in Ihrer Datenbank beispielsweise den
Wert
„Administrator", dann müssen Sie auch Administrator und nicht etwa Admin im Feld „Name“ eingeben.
5 Um mehrere Berechtigungsebenen für eine Seite festzulegen, halten Sie die Strg-Taste (Windows) bzw. die
Befehlstaste (Macintosh) gedrückt, wenn Sie in der Liste auf die Berechtigungsebenen klicken.
Sie können beispielsweise festlegen, dass alle Besucher, die über Gast-, Mitglieds- oder Administratorberechtigungen
verfügen, die Seite anzeigen können.
6 Geben Sie die Seite an, die geöffnet werden soll, wenn ein unberechtigter Besucher versucht, auf die geschützte Seite
zuzugreifen.
Achten Sie darauf, dass für diese Seite kein Zugriffsschutz gilt.
7 Klicken Sie auf „OK“.
Zugriffsrechte einer Seite kopieren und in andere Seiten der Site einfügen
1 Öffnen Sie die geschützte Seite und wählen Sie im Bedienfeld „Serververhalten“ (nicht in dem Popupmenü mit dem
Pluszeichen) das Serververhalten „Zugriff auf Seite beschränken“.
2 Klicken Sie auf die Pfeilschaltfläche oben rechts im Bedienfeld und wählen Sie im Popupmenü die Option
„Kopieren“.
Das Serververhalten „Zugriff auf Seite beschränken“ wird in die Zwischenablage kopiert.
3 Öffnen Sie eine andere Seite, die auf die gleiche Weise geschützt werden soll.
4 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Serververhalten“) auf die Pfeilschaltfläche oben rechts
und wählen Sie im Popupmenü die Option „Einfügen“.
5 Wiederholen Sie Schritt 3 und 4 für alle weiteren Seiten, die geschützt werden sollen.
Zugriffsrechte in der Benutzerdatenbank speichern
Dieser Baustein ist nur erforderlich, wenn bestimmte angemeldete Besucher über unterschiedliche Zugriffsrechte
verfügen sollen. Wenn Besucher sich nur anmelden müssen, brauchen Sie keine Zugriffsrechte zu speichern.
1 Um jedoch bestimmten angemeldeten Besuchern besondere Zugriffsrechte zu erteilen, muss Ihre Besucher-
Datenbanktabelle eine Spalte enthalten, in der die Zugriffsrechte der einzelnen Besucher angegeben werden (Gast,
Besucher, Administrator usw.). Es ist Aufgabe des Siteadministrators, die Zugriffsrechte der einzelnen Benutzer in
die Datenbank einzugeben.
In den meisten Datenbankanwendungen ist es möglich, eine Spalte für alle neu erstellten Datensätze auf einen
Standardwert einzustellen. Geben Sie die häufigste Zugriffsberechtigung Ihrer Site (beispielsweise „Gast“) als
Standardwert an und legen Sie die Ausnahmen manuell fest (indem Sie beispielsweise „Gast“ zu „Administrator“
ändern). Der Besucher kann nun auf alle Administratorseiten zugreifen.
2 Stellen Sie sicher, dass alle Besucher in der Datenbank nur über eine Zugriffsberechtigung verfügen, wie
beispielsweise „Gast“ oder „Administrator“, nicht aber über mehrere Berechtigungen, wie „Besucher,
Administrator“. Wenn Sie mehrere Zugriffsrechte für Ihre Seiten festlegen möchten (damit beispielsweise alle
Gäste und Administratoren eine bestimmte Seite anzeigen können), legen Sie diese Berechtigungen nicht auf
Datenbank-, sondern auf Seitenebene fest.
701
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Benutzer abmelden
Wenn ein Besucher sich erfolgreich angemeldet hat, wird eine Sitzungsvariable erstellt, die aus dem Benutzernamen
besteht. Wenn der Besucher die Site wieder verlässt, können Sie das Serververhalten „Benutzer abmelden“ verwenden,
um die Sitzungsvariable zu löschen und den Besucher zu einer anderen Seite umzuleiten (in der Regel zu einer
Abschieds- oder Dankesseite).
Das Serververhalten „Benutzer abmelden“ kann aufgerufen werden, wenn der Besucher auf einen Hyperlink klickt
oder wenn eine bestimmte Seite geladen wird.
Hyperlink für die Abmeldung der Besucher hinzufügen
1 Wählen Sie auf der Seite die Textstelle oder die Grafik aus, die als Hyperlink dienen soll.
2 Klicken Sie im Bedienfeld „Serververhalten“ („Fenster“ > „Verhalten“) auf die Schaltfläche mit dem
Pluszeichen (+) und wählen Sie „Benutzerauthentifizierung“ > „Benutzer abmelden“ aus.
3 Geben Sie die Seite an, die geöffnet werden soll, wenn der Besucher auf den Hyperlink klickt, und klicken Sie auf
„OK“.
Dabei handelt es sich in der Regel um eine Abschieds- oder Dankesseite.
Besucher beim Laden einer bestimmten Seite abmelden
1 Öffnen Sie in Dreamweaver die Seite, die geladen wird.
Dabei handelt es sich in der Regel um eine Abschieds- oder Dankesseite.
2 Klicken Sie im Bedienfeld „Serververhalten“ auf die Schaltfläche mit dem Pluszeichen (+) und wählen Sie
„Benutzerauthentifizierung“ > „Benutzer abmelden“ aus.
3 Wählen Sie die Option „Abmelden, wenn Seite lädt“ und klicken Sie auf „OK“.
Schützen von Ordnern in Anwendungen (ColdFusion)
Ordner und Sites auf dem Server schützen (ColdFusion)
Sie können mit Dreamweaver Ordner in einer ColdFusion-Anwendung mit einem Kennwort schützen. Das gilt auch
für den Stammordner der Anwendung. Wenn ein Besucher Ihrer Site eine Seite in diesem Ordner abrufen will, fordert
ColdFusion den Besucher zur Eingabe von Benutzername und Kennwort auf. ColdFusion speichert den
Benutzernamen und das Kennwort in einer Sitzungsvariablen, damit der Besucher die Werte im Verlauf dieser Sitzung
nicht noch einmal eingeben muss.
Note: Diese Funktion ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder
eine spätere Version ausgeführt wird.
1 Wählen Sie in Dreamweaver „Befehle“ > „ColdFusion-Anmeldeassistent“, während ein ColdFusion-Dokument
geöffnet ist.
2 Führen Sie die Schritte im ColdFusion-Anmeldeassistenten aus.
a Geben Sie den vollständigen Pfadnamen des zu schützenden Ordners an und klicken Sie auf „Weiter“.
b Wählen Sie im nächsten Bildschirm einen der folgenden Authentifizierungstypen aus:
Einfache Authentifizierung Schützt die Anwendung mit einem einzelnen Benutzernamen und einem Kennwort für
alle Benutzer.
702
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Windows NT-Authentifizierung Schützt Ihre Anwendung mit NT-Benutzernamen und -Kennwörtern.
LDAP-Authentifizierung Schützt Ihre Anwendungen mit Benutzernamen und Kennwörtern, die auf einem LDAP-
Server gespeichert sind.
c Legen Sie fest, ob Benutzer sich mit einer ColdFusion-Anmeldeseite oder einem Popupmenü anmelden sollen.
d Geben Sie im nächsten Bildschirm die folgenden Einstellungen an:
• Wenn Sie „Einfache Authentifizierung“ ausgewählt haben, geben Sie den Benutzernamen und das Kennwort für
jeden Benutzer an.
• Wenn Sie „Windows NT-Authentifizierung“ ausgewählt haben, geben Sie die NT-Domäne an, die zu
Überprüfungszwecken herangezogen wird.
• Wenn Sie „LDAP-Authentifizierung“ ausgewählt haben, geben Sie den LDAP-Server an, der zu
Überprüfungszwecken herangezogen wird.
3 Laden Sie die neuen Dateien zur Remote-Site hoch. Die Dateien befinden sich im lokalen Site-Ordner.
More Help topics
“ColdFusion-Erweiterungen aktivieren” on page 729
“Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können” on page 698
“Schützen von Ordnern in Anwendungen (ColdFusion)” on page 701
ColdFusion-Komponenten verwenden
ColdFusion-Komponenten
Mit ColdFusion-Komponentendateien (CFCs) können Sie Anwendungs- und Geschäftslogik in separate,
wiederverwendbare Einheiten einschließen. CFCs bieten auch eine Möglichkeit zur schnellen und einfachen
Erstellung von Webdiensten.
Eine CFC ist eine wiederverwendbare Software-Einheit, die in CFML (ColdFusion Markup Language) geschrieben ist
und die Wiederverwendung und Wartung Ihres Codes erleichtert.
Sie können CFCs in Dreamweaver bearbeiten. Weitere Informationen über CFC-Tags und die CFC-Syntax finden Sie
in der ColdFusion-Dokumentation in der Dreamweaver-Hilfe („Hilfe“ > „ColdFusion verwenden“).
Note: CFCs können nur mit ColdFusion MX oder späteren Versionen eingesetzt werden. CFCs werden in ColdFusion 5
nicht unterstützt.
CFCs sollen Entwicklern eine einfache, aber leistungsstarke Methode bieten, um Elemente ihrer Websites einzuschließen.
Im Allgemeinen werden diese Komponenten für Anwendungs- oder Geschäftslogik empfohlen. Verwenden Sie
benutzerdefinierte Tags für Präsentationselemente wie angepasste Begrüßungen, dynamische Menüs usw.
Wie bei zahlreichen Konstruktionsarten können austauschbare Teile auch für dynamische Sites häufig von großem
Nutzen sein. Beispielsweise kann eine dynamische Site dieselbe Abfrage wiederholt ausführen oder den Gesamtpreis
für die Artikel auf Warenkorb-Seiten berechnen, wobei der Gesamtpreis jedes Mal neu berechnet wird, wenn dem
Warenkorb ein Artikel hinzugefügt wird. Diese Aufgaben können von Komponenten bewältigt werden. Sie können
Komponenten reparieren, verbessern, erweitern und sogar austauschen, ohne dass dies den Rest der Anwendung
wesentlich beeinflusst.
703
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Angenommen, in einem Online-Shop werden die Versandkosten auf Grundlage des Bestellwerts berechnet. Bei einem
Bestellwert von weniger als 20 Euro betragen die Versandkosten 4 Euro. Bei einem Bestellwert zwischen 20 und 40
Euro fallen Versandkosten von 6 Euro an usw. Sie können die Logik für die Berechnung der Versandkosten sowohl in
die Warenkorb-Seite als auch in die Kassen-Seite einfügen. Dadurch würde jedoch eine Mischung von HTML-
Präsentationscode und CFML-Logikcode entstehen. Zudem wäre der Code nur schwer zu verwalten und
wiederzuverwenden.
Hier empfiehlt es sich, eine CFC namens „Preisberechnung“ zu erstellen, die unter anderem eine Funktion mit dem
Namen
Versandkosten enthält. Dieser Funktion wird ein Preis als Argument übergeben und anschließend gibt sie
den Versandkostenbetrag zurück. Wenn das Argument beispielsweise den Wert 32,80 hat, gibt die Funktion 6 zurück.
Sie fügen sowohl in die Warenkorb-Seite als auch in die Kassen-Seite ein besonderes Tag ein, das die Funktion
Versandkosten aufruft. Wenn ein Browser die Seite anfordert, wird die Funktion aufgerufen und der
Versandkostenbetrag wird an die Seite zurückgegeben.
Zu einem späteren Zeitpunkt gibt der Online-Shop ein Sonderangebot bekannt: Kostenloser Versand für alle
Bestellungen über 100 Euro. Sie ändern die Versandkosten nur an einer Stelle, und zwar in der Funktion
Versandkosten der Komponente „Preisberechnung“. Auf allen Seiten, die diese Funktion verwenden, werden nun
die korrekten Versandkosten angezeigt.
Überblick über das Bedienfeld „CF-Komponenten“ (ColdFusion)
Mit dem Bedienfeld „Komponenten“ („Fenster“ >„Komponenten“) können Sie ColdFusion-Komponenten erstellen
und bearbeiten sowie Code in die Seite einfügen, der die Funktion aufruft, wenn die CFM-Seite angefordert wird.
Note: Das Bedienfeld „Komponenten“ steht nur zur Verfügung, wenn Sie eine ColdFusion-Seite in Dreamweaver
anzeigen.
More Help topics
“Webseiten erstellen, die CFCs verwenden” on page 706
CFCs in Dreamweaver erstellen oder löschen
Mit Dreamweaver können Sie CFCs und die zugehörigen Funktionen interaktiv definieren. Dreamweaver erstellt eine
.cfc-Datei und fügt die erforderlichen CFML-Tags automatisch ein.
Note: Je nach Komponente muss ein Teil des Codes möglicherweise manuell fertig gestellt werden.
1 Öffnen Sie eine ColdFusion-Seite in Dreamweaver.
2 Wählen Sie im Bedienfeld „Komponenten“ („Fenster“ > „Komponenten“) im Popupmenü die Option
„Komponenten“ aus.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), füllen Sie das Dialogfeld „Komponente erstellen“ aus und
klicken Sie auf „OK“.
a Geben Sie im Bereich „Komponente“ Details zu der Komponente ein. Es folgt eine unvollständige Liste der
verfügbaren Optionen:
Spry-QuickInfo In diesem Feld legen Sie den Dateinamen der Komponente fest. Der String darf nur alphanumerische
Zeichen und Unterstriche (_) enthalten. Lassen Sie bei der Eingabe des Namens die Dateierweiterung .cfc weg.
Komponentenverzeichnis Hier legen Sie fest, wo die Komponente gespeichert wird. Wählen Sie den Stammordner der
Webanwendung aus (wie z. B. „\Inetpub\wwwroot\meineAnwendung\“) oder einen seiner Unterordner.
704
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
b Um eine oder mehrere Funktionen für die Komponente zu definieren, wählen Sie ganz links in der Liste
„Abschnitt“ die Option „Funktionen“ aus, klicken auf die Schaltfläche mit dem Pluszeichen (+) und geben dann
die Details einer neuen Funktion ein.
Im Feld „Rückgabetyp“ müssen Sie den Typ des Werts angeben, der von der Funktion zurückgegeben wird.
Wenn Sie im Menü „Zugriff“ die Option „remote“ auswählen, steht die Funktion als Webdienst zur Verfügung.
c Um eines oder mehrere Argumente für die Funktion zu definieren, wählen Sie links in der Liste „Abschnitt“ die
Option „Argumente“ aus, wählen Sie im Popupmenü die Funktion aus, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+) und geben Sie dann die Details des neuen Arguments ein.
4 Wenn Sie mit einem Remote-Entwicklungsserver arbeiten, übertragen Sie die CFC-Datei und alle abhängigen
Dateien (wie Include-Dateien oder Dateien, mit denen eine Funktion implementiert wird) an den Remote-Server.
Dadurch wird gewährleistet, dass Dreamweaver-Funktionen wie die Live Data-Ansicht oder die Vorschau im Browser
korrekt funktionieren.
Dreamweaver erstellt eine CFC-Datei und speichert sie im angegebenen Ordner. Die neue Komponente wird auch im
Bedienfeld „Komponenten“ angezeigt, nachdem Sie auf „Aktualisieren“ geklickt haben.
5 Wenn Sie eine Komponente entfernen möchten, müssen Sie die CFC-Datei manuell vom Server löschen.
More Help topics
“Webseiten erstellen, die CFCs verwenden” on page 706
“ColdFusion-Komponenten” on page 702
CFCs in Dreamweaver anzeigen
In Dreamweaverkönnen Sie die im Site-Ordner oder auf dem Server definierten ColdFusion-Komponenten interaktiv
überprüfen. Dreamweaver liest die CFC-Dateien und zeigt relevante Informationen in einer übersichtlichen
Strukturansicht im Bedienfeld „Komponenten“ an.
Dreamweaver sucht diese Komponenten auf Ihrem Testserver (siehe “Datenbankverbindungen in Dreamweaver
herstellen” on page 582). Wenn Sie CFCs erstellen oder vorhandene CFCs ändern, müssen Sie die CFC-Dateien zum
Textserver hochladen, damit sie im Bedienfeld „Komponenten“ richtig angezeigt werden.
Um Komponenten auf einem anderen Server anzuzeigen, ändern Sie die Einstellungen für den Testserver.
Über die CF-Komponenten können Sie folgende Informationen anzeigen:
• Alle auf dem Server definierten ColdFusion-Komponenten auflisten.
• Wenn Sie ColdFusion MX 7 oder eine spätere Version ausführen, können Sie die Liste filtern, damit nur die CFCs
im Site-Ordner angezeigt werden.
• Die Funktionen und Argumente der einzelnen Komponenten untersuchen.
• Die Eigenschaften der Funktionen überprüfen, die Webdienste zur Verfügung stellen.
Um CFCs im Stammordner des Servers mithilfe von Dreamweaver zu überprüfen, während Sie gleichzeitig Ihre Site-
Dateien im Stammordner einer anderen Website verwalten, können Sie zwei Dreamweaver-Sites definieren. Richten
Sie die erste Site so ein, dass Sie auf den Stammordner des Servers verweist, und die zweite so, dass Sie auf den
Stammordner der Website verweist. Mithilfe des Popupmenüs im Bedienfeld „Dateien“ können Sie schnell zwischen den
beiden Sites wechseln.
705
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Um CFCs in Dreamweaver anzuzeigen, führen Sie die folgenden Schritte aus:
1 Öffnen Sie eine ColdFusion-Seite in Dreamweaver.
2 Wählen Sie im Bedienfeld „Komponenten“ („Fenster“ > „Komponenten“) im Popupmenü die Option
„Komponenten“ aus.
3 Klicken Sie im Bedienfeld auf die Schaltfläche „Aktualisieren“, um die Komponenten abzurufen.
Das Komponentenpaket wird auf dem Server angezeigt. Bei einem Komponentenpaket handelt es sich um einen
Ordner, der CFC-Dateien enthält.
Wenn keine vorhandenen Komponentenpakete angezeigt werden, klicken Sie in der Symbolleiste des Bedienfelds auf
die Schaltfläche „Aktualisieren“.
4 Um nur die im Site-Ordner befindlichen CFCs anzuzeigen, klicken Sie in der Symbolleiste des Bedienfelds
„Komponenten“ auf die Schaltfläche „Nur CFCs der aktuellen Site anzeigen“.
Note: Diese Funktion ist nur verfügbar, wenn Sie einen Computer als Testserver für Dreamweaver definiert haben, auf
dem ColdFusion MX 6 oder eine spätere Version ausgeführt wird.
Note: Wenn die aktuelle Site in einem virtuellen Ordner auf dem Remote-Server aufgelistet ist, funktioniert das Filtern
nicht.
5 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) neben einem Paketnamen, um die im Paket enthaltenen
Komponenten anzuzeigen.
• Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) neben einem Komponentennamen, um die Funktionen
dieser Komponente aufzulisten.
• Öffnen Sie den Zweig einer Funktion in der Strukturansicht, um die Argumente sowie die Argumenttypen dieser
Funktion anzuzeigen. So können Sie auch feststellen, ob die Argumente erforderlich oder optional sind.
Neben Funktionen, für die es keine Argumente gibt, wird kein Pluszeichen (+) angezeigt.
• Um rasch Einzelheiten über ein Argument, eine Funktion, eine Komponente oder ein Paket anzuzeigen, wählen
Sie das entsprechende Element in der Strukturansicht aus und klicken Sie dann in der Symbolleiste des Bedienfelds
auf die Schaltfläche „Details abrufen“.
Sie können auch mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Element
klicken und dann im Popupmenü „Details abrufen“ wählen.
Einzelheiten über das Element werden in einem Meldungsfeld angezeigt.
More Help topics
“Testserver einrichten” on page 50
“ColdFusion-Erweiterungen aktivieren” on page 729
“Webseiten erstellen, die CFCs verwenden” on page 706
CFCs in Dreamweaver bearbeiten
In Dreamweaver kann der Code der für Ihre Site definierten ColdFusion-Komponenten auf einheitliche und
problemlose Weise bearbeitet werden. Beispielsweise können Sie beliebige Komponentenfunktion hinzufügen, ändern
oder löschen, ohne Dreamweaver zu verlassen.
Dazu muss Ihre Entwicklungsumgebung folgendermaßen eingerichtet sein:
• ColdFusion muss lokal ausgeführt werden.
706
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
• Im erweiterten Dreamweaver-Dialogfeld „Site-Definition“ muss in der Kategorie „Testserver“ unter „Zugriff“ die
Option „Lokal/Netzwerk“ festgelegt sein.
• Im erweiterten Dialogfeld „Site-Definition“ muss der Pfad des lokalen Stammordners mit dem Pfad des Testserver-
Ordners übereinstimmen (beispielsweise „C:\Inetpub\wwwroot\cf_projects\MeineNeueAnwendung\“). Wählen
Sie „Site“ > „Sites verwalten“, um diese Pfade zu überprüfen und zu ändern.
• Die Komponenten müssen im lokalen Site-Ordner oder in einem seiner Unterordner auf Ihrer Festplatte
gespeichert werden.
Öffnen Sie eine beliebige ColdFusion-Seite in Dreamweaver und zeigen Sie die Komponenten im Bedienfeld
„Komponenten“ an. Um die Komponenten anzuzeigen, öffnen Sie das Bedienfeld „Komponenten“ („Fenster“ >
„Komponenten“), wählen Sie im Popupmenü die Option „CF-Komponenten“ aus und klicken Sie dann im Bedienfeld
auf die Schaltfläche „Aktualisieren“.
Da ColdFusion lokal ausgeführt wird, zeigt Dreamweaver die Komponentenpakete auf Ihrer Festplatte an.
Um eine Komponente zu bearbeiten, führen Sie die folgenden Schritte aus:
1 Öffnen Sie eine beliebige ColdFusion-Seite in Dreamweaver und zeigen Sie die Komponenten im Bedienfeld
„Komponenten“ („Fenster“ > „Komponenten“) an.
2 Wählen Sie im Popupmenü des Bedienfelds die Option „CF-Komponenten“ aus und klicken Sie im Bedienfeld auf
die Schaltfläche „Aktualisieren“.
Da ColdFusion lokal ausgeführt wird, zeigt Dreamweaver die Komponentenpakete auf Ihrer Festplatte an.
Note: Um die CFC-Datensatzgruppe interaktiv zu bearbeiten, doppelklicken Sie im Bedienfeld „Bindungen“ auf die
Datensatzgruppe.
3 Um eine Komponentendatei allgemein zu bearbeiten, öffnen Sie das Paket und doppelklicken in der
Strukturansicht auf den Komponentennamen.
Die Komponentendatei wird in der Codeansicht geöffnet.
4 Um bestimmte Funktionen, Argumente oder Eigenschaften zu bearbeiten, doppelklicken Sie in der Strukturansicht
auf das jeweilige Element.
5 Nehmen Sie die Änderungen in der Codeansicht manuell vor.
6 Speichern Sie die Datei („Datei“ > „Speichern“).
7 Damit neue Funktionen im Bedienfeld „Komponenten“ angezeigt werden, müssen Sie in der Symbolleiste des
Bedienfelds auf die Schaltfläche „Aktualisieren“ klicken.
More Help topics
“CFCs in Dreamweaver anzeigen” on page 704
Webseiten erstellen, die CFCs verwenden
Sie können eine Komponentenfunktion beispielsweise in Ihren Webseiten verwenden, indem Sie Code in die Seite
schreiben, der die Funktion aufruft, wenn die Seite angefordert wird. Dreamweaver kann Sie beim Schreiben dieses
Codes unterstützen.
Note: Informationen zu weiteren Verwendungsmöglichkeiten von Komponenten finden Sie in der ColdFusion-
Dokumentation in der Dreamweaver-Hilfe („Hilfe“ > „ColdFusion verwenden“).
1 Öffnen Sie in Dreamweaver die ColdFusion-Seite, in der die Komponentenfunktion verwendet wird.
2 Wechseln Sie zur Codeansicht („Ansicht“ > „Code“).
707
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
3 Öffnen Sie das Bedienfeld „Komponenten“ („Fenster“ > „Komponenten“) und wählen Sie im Popupmenü die
Option „CF-Komponenten“ aus.
4 Suchen Sie die gewünschte Komponente und fügen Sie sie mit einer der folgenden Methoden ein:
• Ziehen Sie eine Funktion aus der Strukturansicht in die Seite. Code zum Aufrufen der Funktion wird in die Seite
eingefügt.
• Wählen Sie die Funktion im Bedienfeld aus und klicken Sie in der Symbolleiste des Bedienfelds auf die Schaltfläche
„Einfügen“ (die zweite Schaltfläche rechts). Dreamweaver fügt den Code an der Einfügemarke in die Seite ein.
5 Wenn die eingefügte Funktion über Argumente verfügt, stellen Sie den Code für die Argumente manuell fertig.
Weitere Informationen finden Sie in der ColdFusion-Dokumentation in der Dreamweaver-Hilfe („Hilfe“ >
„ColdFusion verwenden“).
6 Speichern Sie die Seite („Datei“ > „Speichern“).
Datensatzgruppen in CFCs definieren
Dreamweaver unterstützt Sie beim Definieren einer Datensatzgruppe (auch als ColdFusion-Abfrage bezeichnet) in
einer ColdFusion-Komponente (CFC). Wenn Sie eine Datensatzgruppe in einer CFC definieren, müssen Sie die
Datensatzgruppe nicht auf jeder Seite definieren, auf der sie benötigt wird. Sie definieren die Datensatzgruppe einmal
in der CFC und nutzen die CFC dann auf verschiedenen Seiten.
Note: Diese Funktion ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder
eine spätere Version ausgeführt wird. Weitere Informationen finden Sie unter “ColdFusion-Erweiterungen aktivieren”
on page 729.
1 Erstellen oder öffnen Sie eine CFC-Datei in Dreamweaver.
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie im Popupmenü die Option „Datensatzgruppe (Abfrage)“.
Das Dialogfeld „Datensatzgruppe“ wird angezeigt. Sie können in der einfachen oder der erweiterten Version des
Dialogfelds „Datensatzgruppe“ arbeiten.
3 Um eine existierende Funktion in der CFC zu verwenden, wählen Sie diese im Popupmenü „Funktionen“ aus und
fahren mit Schritt 5 fort.
Die Datensatzgruppe wird in der Funktion definiert.
4 Um eine neue Funktion in der CFC zu definieren, klicken Sie auf die Schaltfläche „Neue Funktion“, geben einen
Namen für die Funktion in das Dialogfeld ein und klicken dann auf „OK“.
Der String darf nur alphanumerische Zeichen und Unterstriche (_) enthalten.
5 Um eine Datensatzgruppe für die Funktion zu definieren, füllen Sie die Optionen des Dialogfelds
„Datensatzgruppe“ aus.
Die neue Funktion wird in die CFC eingefügt, die den Datensatz definiert.
More Help topics
“CFCs in Dreamweaver erstellen oder löschen” on page 703
CFC-Datensatzgruppen als Quelle für dynamischen Inhalt verwenden
Sie können eine ColdFusion-Komponente (CFC) als Quelle dynamischer Inhalte für Ihre Seiten verwenden, wenn die
Komponente eine Funktion enthält, die eine Datensatzgruppe definiert.
708
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Note: Diese Funktion ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder
eine spätere Version ausgeführt wird. Weitere Informationen finden Sie unter „ColdFusion-Erweiterungen aktivieren“.
1 Öffnen Sie eine ColdFusion-Seite in Dreamweaver.
2 Klicken Sie im Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) auf die Schaltfläche mit dem Pluszeichen (+)
und wählen Sie im Popupmenü die Option „Datensatzgruppe (Abfrage)“.
Das Dialogfeld „Datensatzgruppe“ wird angezeigt. Sie können in der einfachen oder der erweiterten Version des
Dialogfelds „Datensatzgruppe“ arbeiten.
3 Klicken Sie auf die Schaltfläche „CFC-Abfrage“.
4 Füllen Sie das Dialogfeld „CFC-Abfrage“ aus und klicken Sie auf „OK“. Klicken Sie dann noch einmal auf „OK“,
um die CFC-Datensatzgruppe der Liste der verfügbaren Inhaltsquellen im Bedienfeld „Bindungen“ hinzuzufügen.
5 Verwenden Sie das Bedienfeld „Bindungen“, um die Datensatzgruppe an verschiedene Seitenelemente zu binden.
Weitere Informationen finden Sie unter “Einfügen von dynamischem Inhalt in Seiten” on page 627.
Dynamischen Inhalt mithilfe einer CFC definieren
Sie können eine Datensatzgruppe als Quelle für dynamischen Inhalt in Dreamweaver definieren, indem Sie eine CFC
verwenden, die eine Datensatzgruppendefinition enthält.
1 Geben Sie im Feld „Name“ einen Namen für die CFC-Datensatzgruppe ein.
Üblicherweise werden Namen von Datensatzgruppen mit dem Präfix rs versehen, um sie von anderen Objektnamen
im Code zu unterscheiden, wie z. B. rsPressRelease.
Datensatzgruppennamen dürfen nur alphanumerische Zeichen und Unterstriche (_) enthalten. Sonderzeichen und
Leerzeichen sind nicht zulässig.
2 Wählen Sie eines der bereits auf dem Server definierten Pakete aus.
Wenn das Paket nicht im Popupmenü angezeigt wird, können Sie die Liste der Pakete aktualisieren, indem Sie auf die
Schaltfläche „Aktualisieren“ neben dem Popupmenü klicken.
Stellen Sie sicher, dass Sie die CFCs zunächst zum Testserver hochladen. Es werden nur CFCs auf dem Testserver
angezeigt.
3 Wählen Sie eine der im aktuell ausgewählten Paket definierten Komponenten aus.
Wenn das Popupmenü „Komponenten“ keine oder keine der zuvor erstellten Komponenten enthält, müssen Sie die
CFC-Dateien zum Testserver hochladen.
4 Optional: Um eine Komponente zu erstellen, klicken Sie auf die Schaltfläche „Neue Komponente erstellen“.
a Geben Sie im Feld „Name“ einen Namen für die neue CFC ein. Der String darf nur alphanumerische Zeichen und
Unterstriche (_) enthalten.
b Geben Sie in das Feld „Komponentenverzeichnis“ das gewünschte Verzeichnis für die CFC ein oder öffnen Sie den
Ordner über die Dateistruktur.
Note: Der Ordner muss relativ zum Stammordner der Site angegeben werden.
5 Wählen Sie im Popupmenü „Funktionen“ die Funktion aus, die die Datensatzgruppendefinition enthält.
Das Popupmenü „Funktionen“ enthält nur die Funktionen, die in der aktuell ausgewählten Komponente definiert
sind. Wenn in diesem Popupmenü keine Funktion angezeigt wird oder Ihre letzten Änderungen in der Liste nicht
berücksichtigt werden, überprüfen Sie, ob die betreffenden Änderungen gespeichert und zum Server hochgeladen
wurden.
709
VERWENDEN VON DREAMWEAVER
Visuelles Entwickeln von Anwendungen
Last updated 10.4.2012
Note: Die Textfelder „Verbindung“ und „SQL“ sind schreibgeschützt.
6 Geben Sie alle Parameter (Typ, Wert und Standardwert) ein, die als Funktionsargument übergeben werden
müssen, indem Sie auf die Schaltfläche „Bearbeiten“ klicken.
a Geben Sie einen Wert für den aktuellen Parameter ein, indem Sie den Wertetyp im Popupmenü „Wert“ auswählen
und den Wert in das Feld auf der rechten Seite eingeben.
Der Wertetyp kann ein URL-Parameter, eine Formularvariable, ein Cookie, eine Sitzungsvariable, eine
Anwendungsvariable oder ein eingegebener Wert sein.
b Geben Sie im Feld „Standardwert“ einen Standardwert für den Parameter ein.
Wenn kein Laufzeitwert zurückgegeben wird, wird der Standardparameterwert verwendet.
c Klicken Sie auf „OK“.
Sie können die Datenbankverbindung und die SQL-Abfrage für die Datensatzgruppe nicht ändern. Diese Felder sind
immer deaktiviert: Verbindung und SQL-Abfrage werden nur zu Informationszwecken angezeigt.
7 Klicken Sie auf „Testen“, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen.
Wenn die SQL-Anweisung Seitenparameter enthält, muss die Spalte „Standardwert“ des Felds „Parameter“ gültige
Testwerte enthalten, bevor Sie auf „Testen“ klicken.
Wenn die Abfrage erfolgreich ausgeführt wurde, wird eine Tabelle mit der Datensatzgruppe angezeigt. Jede Zeile
enthält einen Datensatz und jede Spalte entspricht einem Feld in diesem Datensatz.
Klicken Sie auf „OK“, um die CFC-Abfrage zu löschen.
8 Klicken Sie auf „OK“.
710
Last updated 10.4.2012
Chapter 22: Formulare erstellen
Wenn ein Besucher in einem Browser Informationen in einem Webformular eingibt und auf die Schaltfläche zum
Senden klickt, werden die Informationen an einen Server gesendet, auf dem sie von einem serverbasierten Skript oder
einer serverbasierten Anwendung verarbeitet werden. Der Server reagiert, indem die verarbeiteten Informationen
zurück an den Benutzer (oder Client) gesendet oder andere Aktionen ausgeführt werden, die auf dem Inhalt des
Formulars basieren.
Mithilfe von Dreamweaver können Sie Formulare erstellen, die Daten an die meisten Anwendungsserver
(einschließlich PHP, ASP und ColdFusion) übermitteln. Wenn Sie ColdFusion verwenden, können Sie Formularen
zudem ColdFusion-spezifische Formularsteuerelemente hinzufügen. Sie können Formulare mit Textfeldern,
Kennwortfeldern, Optionsschaltern, Kontrollkästchen, Popupmenüs, Schaltflächen und anderen Formularobjekten
erstellen. Außerdem können Sie in Dreamweaver Code schreiben, welcher die von den Benutzern eingegebenen Daten
auswertet. Beispielsweise können Sie nachprüfen, ob die vom Benutzer eingegebene E-Mail-Adresse ein „@“-Symbol
oder ein erforderliches Textfeld einen Wert enthält.
Verwenden von Formularen zum Sammeln von
Benutzerinformationen
Allgemeines zum Sammeln von Benutzerinformationen
Mithilfe von Webformularen oder Hypertext-Links können Sie Benutzerinformationen erfassen, diese Informationen
im Arbeitsspeicher des Servers speichern und anhand dieser Daten anschließend eine dynamische Antwort auf die
Eingabe des Benutzers erstellen. Die gängigsten Werkzeuge zum Sammeln von Benutzerinformationen sind HTML-
Formulare und Hypertext-Verknüpfungen (auch Hyperlinks genannt).
HTML-Formulare ermöglichen Ihnen, Informationen von Benutzern zu sammeln und im Arbeitsspeicher des Servers
zu speichern. Ein HTML-Formular kann die Informationen entweder als Formularparameter oder als URL-Parameter
senden.
Hypertext-Verknüpfungen ermöglichen Ihnen, Informationen von Benutzern zu sammeln und im Arbeitsspeicher
des Servers zu speichern. Werte, die übertragen werden sollen, wenn ein Benutzer auf einen Hyperlink klickt, z. B.
Werte einer bestimmten Option, geben Sie an, indem Sie sie an die im Anker-Tag festgelegte URL anhängen. Wenn
ein Benutzer auf den Hyperlink klickt, sendet der Browser die URL und den angehängten Wert an den Server.
Parameter von HTML-Formularen
Formularparameter werden an den Server mithilfe eines HTML-Formulars und der Methode POST oder der Methode
GET gesendet.
Bei Verwendung der Methode
POST werden die Parameter als Teil des Dokument-Headers an den Webserver
übertragen und sind mit Standardmethoden für keinen Benutzer sichtbar oder verfügbar, der die Seite anzeigt. Die
Methode
POST sollte für Werte verwendet werden, die Auswirkungen auf den Inhalt von Datenbanken haben (z. B.
zum Einfügen, Aktualisieren oder Löschen von Datensätzen), oder für per E-Mail gesendete Werte.
Bei der Methode
GET werden Parameter an die angeforderte URL angefügt. Die Parameter sind dabei für jeden
Benutzer sichtbar, der die Seite anzeigt. Die Methode
GET eignet sich für Suchformulare.
711
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
In Dreamweaver können Sie schnell HTML-Formulare entwerfen, die Formularparameter an den Server senden.
Achten Sie genau darauf, welche Methode Sie wählen, um Informationen vom Browser an den Server zu senden.
Formularparameter erhalten die Namen von ihren entsprechenden Formularobjekten. Wenn Ihr Formular
beispielsweise ein Textfeld mit dem Namen
txtLastName enthält, wird der folgende Formularparameter an den
Server gesendet, wenn der Benutzer auf die Schaltfläche zum Senden klickt:
txtLastName=enteredvalue
In den Fällen, in denen eine Webanwendung einen genauen Parameterwert erwartet (z. B. wenn eine Aktion basierend
auf einer von mehreren Optionen durchgeführt wird), steuern Sie die Werte, die ein Benutzer senden kann, mit einem
Optionsfeld-, Kontrollkästchen- oder Listen-/Menüformularobjekt. Auf diese Weise wird verhindert, dass der
Benutzer Informationen falsch eingibt und einen Anwendungsfehler verursacht. Im folgenden Beispiel ist ein
Popupmenüformular mit drei Auswahlmöglichkeiten dargestellt:
Jede Menüoption entspricht einem fest kodiertem Wert, der als Formularparameter an den Server gesendet wird. Im
Dialogfeld „Listenwerte“ im folgenden Beispiel wird jedes Listenelement einem Wert („Add“, „Update“ oder „Delete“)
zugeordnet:
Nachdem ein Formularparameter erstellt wurde, kann Dreamweaver den Wert abrufen und in einer Webanwendung
verwenden. Nachdem Sie den Formularparameter in Dreamweaver definiert haben, können Sie den entsprechenden
Wert in eine Seite einfügen.
More Help topics
“Erstellen von Webformularen” on page 714
“Einfügen von dynamischem Inhalt in Seiten” on page 627
“Zugriff auf Datenbanken” on page 570
712
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
URL-Parameter
Mit URL-Parametern können Sie die vom Benutzer gelieferten Daten vom Browser an den Server senden. Wenn ein
Server eine Anforderung empfängt und der URL der Anforderung Parameter angehängt sind, stellt der Server die
Parameter der angeforderten Seite zur Verfügung, bevor er die Seite an den Browser zurückgibt.
Ein URL-Parameter ist ein an eine URL angehängtes Name-Wert-Paar. Der Parameter beginnt mit einem
Fragezeichen (?) und hat den Aufbau
name=value. Wenn mehrere URL-Parameter vorhanden sind, werden sie jeweils
durch ein Et-Zeichen (&) voneinander getrennt. Im folgenden Beispiel ist ein URL-Parameter mit zwei Name-Wert-
Paaren dargestellt:
http://server/path/document?name1=value1&name2=value2
In diesem Beispielarbeitsablauf handelt es sich bei der Anwendung um einen Online-Shop. Da die Entwickler der Site
eine möglichst breite Zielgruppe erreichen möchten, unterstützt die Site unterschiedliche Währungen. Wenn
Benutzer sich an der Site anmelden, können sie die Währung auswählen, in der die Preise der verfügbaren Artikel
angezeigt werden sollen.
1 Der Browser fordert vom Server die Seite „report.cfm“ an. Die Anforderung enthält den URL-Parameter
Currency="euro". Die Variable Currency="euro" legt fest, dass alle abgerufenen Geldbeträge in Euro angezeigt
werden.
2 Der Server speichert den URL-Parameter vorübergehend im Arbeitsspeicher.
3 Die Seite „report.cfm“ verwendet den Parameter, um die Preise der Artikel in Euro abzurufen. Diese Geldbeträge
können entweder in einer Datenbanktabelle unterschiedlicher Währungen gespeichert oder aus einer einzelnen
Währung umgerechnet werden, die mit dem jeweiligen Artikel verknüpft ist. Dabei kann es sich um jede von der
Anwendung unterstützte Währung handeln.
4 Der Server sendet die Seite „report.cfm“ an den Browser und zeigt den Wert der Artikel in der angeforderten
Währung an. Wenn dieser Benutzer die Sitzung beendet, löscht der Server den Wert des URL-Parameters und gibt
so Serverspeicher für neue Benutzeranforderungen frei.
URL-Parameter werden zudem erstellt, wenn die HTTP-Methode
GET in Verbindung mit einem HTML-Formular
verwendet wird. Die Methode
GET legt fest, dass der Parameterwert beim Absenden des Formulars an die URL-
Anfrage angehängt wird.
Currency="€"
<HTML>
<code>
</HTML>
http://www.mysite.com/
report.cfm?Currency="€"
report.cfm
Webbrowser
WEBSERVER
713
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Zu häufigen Einsatzgebieten von URL-Parametern zählen personalisierte Websites, die auf
Benutzervoreinstellungen beruhen. Beispielsweise können mithilfe eines aus Benutzername und Kennwort
bestehenden URL-Parameters Benutzer authentifiziert und anschließend nur die Informationen angezeigt werden,
die der jeweilige Benutzer abonniert hat. Gängige Beispiele hierfür sind Finanzwebsites, die einzelne Aktienkurse
basierend auf Börsensymbolen anzeigen, die der Benutzer zuvor gewählt hat. Entwickler von Webanwendungen
übergeben mit URL-Parametern häufig Werte an Variablen innerhalb einer Anwendung. Beispielsweise können
Sie Suchbegriffe an SQL-Variablen in einer Webanwendung übergeben, um Suchergebnisse zu erzeugen.
URL-Parameter mithilfe von Hypertext-Verknüpfungen erstellen
Sie erstellen URL-Parameter innerhalb eines HTML-Hyperlinks, indem Sie das Attribut href des HTML-Anker-Tags
verwenden. Sie können die URL-Parameter direkt im Attribut eingeben, indem Sie zur Codeansicht wechseln
(„Ansicht“ > „Code“), oder Sie können die URL-Parameter an das Ende der Hyperlink-URL im Feld „Hyperlink“ des
Eigenschafteninspektors anfügen.
Im nachfolgenden Beispiel erstellen drei Verknüpfungen einen einzigen URL-Parameter (
action) mit drei möglichen
Werten (
Add, Update und Delete). Wenn der Benutzer auf einen Hyperlink klickt, wird ein Parameterwert an den
Server gesendet und die angeforderte Aktion ausgeführt.
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a>
<a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a>
<a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>
Dieselben URL-Parameter können Sie mit dem Eigenschafteninspektor („Fenster“ > „Eigenschaften“) erstellen.
Wählen Sie hierzu den Hyperlink aus und fügen Sie die URL-Parameterwerte an das Ende der Hyperlink-URL im Feld
„Hyperlink“ des Eigenschafteninspektors an.
Nachdem ein URL-Parameter erstellt wurde, kann Dreamweaver den Wert abrufen und in einer Webanwendung
verwenden. Nachdem Sie den URL-Parameter in Dreamweaver definiert haben, können Sie den entsprechenden Wert
in eine Seite einfügen.
More Help topics
“URL- und Formularparameter” on page 605
“Hyperlinks erstellen” on page 296
“Formularparameter definieren” on page 619
“Einfügen von dynamischem Inhalt in Seiten” on page 627
“Zugriff auf Datenbanken” on page 570
714
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Erstellen von Webformularen
Webformulare
Wenn ein Besucher in einem Browser Informationen in einem Webformular eingibt und auf die Schaltfläche zum
Senden klickt, werden die Informationen an einen Server gesendet, auf dem sie von einem serverbasierten Skript oder
einer serverbasierten Anwendung verarbeitet werden. Der Server reagiert, indem die verarbeiteten Informationen
zurück an den Benutzer (oder Client) gesendet oder andere Aktionen ausgeführt werden, die auf dem Inhalt des
Formulars basieren.
Sie können Formulare erstellen, die Daten an die meisten Anwendungsserver (einschließlich PHP, ASP und
ColdFusion) übermitteln. Wenn Sie ColdFusion verwenden, können Sie Formularen zudem ColdFusion-spezifische
Formularsteuerelemente hinzufügen.
Note: Sie können Formulardaten auch direkt an einen E-Mail-Adressaten senden.
More Help topics
“Verwenden von Formularen zum Sammeln von Benutzerinformationen” on page 710
“Erstellen von ColdFusion-Formularen” on page 729
Formularobjekte
Formulareingabetypen werden in Dreamweaver als Formularobjekte bezeichnet. Formularobjekte ermöglichen
Benutzern das Eingeben von Daten. Sie können die folgenden Formularobjekte in ein Formular aufnehmen:
Textfelder akzeptieren beliebige alphanumerische Texteingaben. Der Text kann einzeilig, mehrzeilig oder als
Kennwortfeld angezeigt werden, in welchem der eingegebene Text durch Sternchen oder Punkte ersetzt wird, damit
Außenstehende den Text nicht mitlesen können.
Note: Kennwörter und andere Informationen, die über ein Kennwortfeld an den Server gesendet werden, sind nicht
verschlüsselt. Die übertragenen Daten können abgefangen und als alphanumerischer Text gelesen werden. Aus diesem
Grund sollten Sie Daten, die vertraulich bleiben sollen, immer verschlüsseln.
Versteckte Felder ermöglichen es Ihnen, vom Besucher eingegebene Informationen zu speichern. Hierzu zählen z. B.
der Name, die E-Mail-Adresse und Anzeigepräferenzen. Diese Daten können dann beim nächsten Site-Besuch des
Benutzers verwendet werden.
Schaltflächen führen Aktionen aus, wenn ein Benutzer darauf klickt. Sie können einer Schaltfläche einen
benutzerdefinierten Namen bzw. eine benutzerdefinierte Beschriftung geben oder eine der vordefinierten
715
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Beschriftungen („Senden“ oder „Zurücksetzen“) verwenden. Verwenden Sie zum Senden von Formulardaten an den
Server oder zum Zurücksetzen des Formulars eine Schaltfläche. Sie können auch andere Verarbeitungsaufgaben
zuweisen, die Sie in einem Skript definieren. Beispielsweise kann eine Schaltfläche die Gesamtkosten ausgewählter
Artikel basierend auf zugewiesenen Werten berechnen.
Kontrollkästchen ermöglichen mehrere Antworten innerhalb einer Gruppe von Optionen. Der Benutzer kann so viele
Optionen auswählen, wie zutreffen. Im folgenden Beispiel sind drei Kontrollkästchen aktiviert: „Surfing“, „Mountain
Biking“ und „Rafting“.
Optionsschalter repräsentieren Optionen, die sich gegenseitig ausschließen. Wird eine Schaltfläche innerhalb einer
Optionsschaltergruppe gewählt, werden dadurch alle anderen Schaltflächen in der Gruppe deaktiviert (eine Gruppe
besteht aus zwei oder mehr Schaltflächen gleichen Namens). Im Beispiel unten ist die Option Rafting ausgewählt.
Wenn der Benutzer auf Surfing klickt, wirdRafting automatisch deaktiviert.
Liste/Menü zeigt Optionswerte in einer Liste mit Rollbalken an, in welcher der Besucher mehrere Optionen auswählen
kann. Die Option „Liste“ zeigt die Optionswerte in einem Menü an, in welchem der Benutzer nur eine Auswahl treffen
kann. Verwenden Sie Menüs, wenn Sie nur über einen begrenzten Platz verfügen, jedoch viele Elemente anzeigen
müssen, oder wenn Sie die an den Server zurückgegebenen Werte steuern möchten. Anders als bei Textfeldern, in die
der Benutzer beliebige Zeichenfolgen eingibt, die sogar ungültig sein können, legen Sie die Werte genau fest, die vom
Menü zurückgegeben werden.
Note: Ein Popupmenü in einem HTML-Formular ist nicht mit einem grafischen Popupmenü identisch. Informationen
zum Erstellen, Bearbeiten, Anzeigen und Ausblenden eines grafischen Popupmenüs finden Sie unter dem Hyperlink am
Ende dieses Abschnitts.
Sprungmenüs sind Navigationslisten oder Popupmenüs, die es Ihnen ermöglichen, ein Menü einzufügen, in dem jede
Option einen Hyperlink zu einem Dokument oder einer Datei darstellt.
Dateifelder ermöglichen es Benutzern, Dateien auf ihrem Computer zu suchen und als Formulardaten hochzuladen.
716
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Bildfelder ermöglichen es Ihnen, ein Bild in ein Formular einzufügen. Verwenden Sie Bildfelder, um grafische
Schaltflächen wie „Senden“ oder „Zurücksetzen“ zu erstellen. Wenn Sie zur Ausführung bestimmter Aufgaben (mit
Ausnahme des Absendens von Daten) ein Bild verwenden, muss an das Formularobjekt ein Verhalten angehängt
werden.
More Help topics
“Verhalten „Popupmenü anzeigen“ definieren” on page 388
HTML-Formulare erstellen
1 Öffnen Sie eine Seite und setzen Sie die Einfügemarke an die Stelle, an der das Formular angezeigt werden soll.
2 Wählen Sie „Einfügen“ > „Formular“ aus oder wählen Sie im Bedienfeld „Einfügen“ die Kategorie „Formulare“ aus
und klicken Sie auf das Symbol „Formular“.
In der Entwurfsansicht sind Formulare durch einen rot gepunkteten Rahmen gekennzeichnet. Wenn der Rahmen
nicht sichtbar ist, wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
3 Legen Sie die Eigenschaften des HTML-Formulars im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) fest:
a Klicken Sie im Dokumentfenster auf den Formularrahmen, um das Formular auszuwählen.
b Geben Sie im Feld „Formularname“ einen eindeutigen Namen für das Formular ein.
Wenn Sie ein Formular benennen, können Sie es mit einer Skriptsprache, wie z. B. JavaScript oder VBScript, steuern
oder darauf verweisen. Wenn Sie dem Formular keinen Namen geben, erzeugt Dreamweaver anhand der Syntax
formn einen Namen und erhöht den Wert von n bei jedem der Seite hinzugefügten Formular.
c Geben Sie im Feld „Aktion“ die Seite oder das Skript zur Verarbeitung der Formulardaten an. Geben Sie entweder
den Pfad ein oder klicken Sie auf das Ordnersymbol, um zur gewünschten Seite bzw. zum gewünschten Skript zu
navigieren. Beispiel: processorder.php.
d Legen Sie im Popupmenü „Methode“ die Methode fest, die zum Übertragen der Formulardaten zum Server
verwendet werden soll. Wählen Sie eine der folgenden Optionen:
Standard verwendet zum Senden der Formulardaten an den Server die Standardeinstellung des Browsers. Die
Standardeinstellung ist normalerweise die Methode
GET.
GET hängt den Wert an die URL an, welche die Seite anfordert.
POST bettet die Formulardaten in die HTTP-Anforderung ein.
Verwenden Sie die Methode
GET nicht zum Senden langer Formulare. URLs dürfen maximal 8192 Zeichen lang sein.
Falls die Menge der gesendeten Daten zu groß ist, werden Daten abgeschnitten, wodurch unerwartete oder fehlerhafte
Verarbeitungsergebnisse entstehen.
Dynamische Seiten, die von den Parametern der Methode
GET generiert werden, können mit einem Lesezeichen
versehen werden, da die URL in der Adresszeile des Browsers alle Werte enthält, die zu einem erneuten Aufbau der
Seite benötigt werden. Für Lesezeichen ungeeignet sind dynamische Seiten, die aus den Parametern der Methode
POST
erzeugt werden.
Wenn Sie vertrauliche Benutzernamen und Kennwörter, Kreditkartennummern und andere vertrauliche
Informationen erfassen, mag die Methode
POST sicherer als die Methode GET erscheinen. Allerdings sind die Daten,
die mit der Methode
POST gesendet werden, unverschlüsselt und können von einem Hacker ohne großen Aufwand
mitgelesen werden. Wenn es auf Sicherheit ankommt, sollten Sie unbedingt eine sichere Verbindung zu einem
sicheren Server einsetzen.
717
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
e (Optional) Legen Sie im Popupmenü „Kod.-Typ“ den MIME-Kodierungstyp der Daten fest, die zur Verarbeitung
an den Server gesendet werden.
Die Standardeinstellung für
application/x-www-form-urlencode ist üblicherweise die Methode POST . Wenn Sie
ein Feld zum Übertragen einer Datei erstellen, geben Sie
multipart/form-data als MIME-Typ an.
f (Optional) Geben Sie im Popupmenü „Ziel“ das Fenster an, in welchem die vom aufgerufenen Programm
zurückgegebenen Daten angezeigt werden sollen.
Wenn das angegebene Fenster nicht bereits geöffnet ist, wird ein neues Fenster mit diesem Namen geöffnet. Wählen
Sie einen der folgenden Zielwerte:
_blank öffnet das Zieldokument in einem neuen, unbenannten Fenster.
_parent öffnet das Zieldokument im übergeordneten Fenster des Fensters, in dem das aktuelle Dokument angezeigt
wird.
_self öffnet das Zieldokument in dem Fenster, in welchem das Formular abgeschickt wurde.
_top öffnet das Zieldokument im Hauptteil des aktuellen Fensters. Mit diesem Wert lässt sich sicherstellen, dass das
Zieldokument das gesamte Fenster einnimmt, auch wenn das ursprüngliche Dokument in einem Rahmen angezeigt
wurde.
4 Fügen Sie Formularobjekte auf der Seite ein:
a Setzen Sie die Einfügemarke an die Stelle im Formular, an welcher das Formularobjekt stehen soll.
b Wählen Sie das Objekt unter „Einfügen“ > „Formular“ oder in der Kategorie „Formulare“ des Bedienfelds
„Einfügen“ aus.
c Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus. Weitere Informationen erhalten Sie auch,
wenn Sie im Dialogfeld auf die Hilfeschaltfläche klicken.
Note: Wenn das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ nicht angezeigt wird, befand sich die Einfügemarke
möglicherweise in der Codeansicht, als Sie versucht haben, das Formularobjekt einzufügen. Stellen Sie sicher, dass sich
die Einfügemarke in der Entwurfsansicht befindet, und wiederholen Sie den Vorgang. Weitere Informationen zu diesem
Thema finden Sie im Artikel von David Powers „Creating HTML forms in Dreamweaver“ (in englischer Sprache).
d Legen Sie die Eigenschaften der Objekte fest.
e Geben Sie im Eigenschafteninspektor einen Namen für das Objekt ein.
Alle Objekte des Typs „Textfeld“, „verstecktes Feld“, „Kontrollkästchen“ und „Liste/Menü“ müssen einen eindeutigen
Namen haben, anhand dessen sich diese Objekte im Formular identifizieren lassen. Namen von Formularobjekten
dürfen weder Leerzeichen noch Sonderzeichen enthalten. Alphanumerische Zeichen und der Unterstrich (_) können
in beliebiger Kombination verwendet werden. Die Beschriftung, die Sie dem Objekt zuweisen, ist der Variablenname,
unter welchem der Wert (die eingegebenen Daten) des Feldes gespeichert wird. Dies ist der Wert, der zur Verarbeitung
an den Server gesendet wird.
Note: Alle Optionsschalter einer Gruppe müssen denselben Namen haben.
f Wenn Sie das Textfeld, das Kontrollkästchen oder den Optionsschalter auf der Seite beschriften möchten, klicken
Sie neben dem Objekt und geben Sie die Beschriftung ein.
5 Passen Sie das Layout des Formulars an.
Zur Gestaltung Ihrer Formulare können Sie Zeilenumbrüche, Absatzumbrüche, vorformatierten Text und Tabellen
einsetzen. Sie können ein Formular nicht in ein anderes Formular einfügen (d. h. die Tags dürfen sich nicht
überschneiden). Eine Seite kann aber mehrere Formulare enthalten.
718
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Achten Sie bei der Gestaltung von Formularen darauf, den Formularfeldern eine eindeutige Beschreibung zu geben.
Dann wissen die Besucher, was von ihnen erwartet wird. Geben Sie beispielsweise „Bitte Namen eingeben“ an, wenn
ein Besucher seinen Namen eingeben soll.
Mit Tabellen können Sie Formularobjekten und Feldbeschriftungen eine Struktur verleihen. Achten Sie bei der
Verwendung von Tabellen in Formularen darauf, dass sich alle
table-Tags innerhalb der form-Tags befinden.
Ein Tutorial zum Erstellen von Formularen finden Sie unter www.adobe.com/go/vid0160_de.
Ein Tutorial zum Gestalten von Formularen mit CSS finden Sie unter www.adobe.com/go/vid0161_de.
More Help topics
“Verwenden von Formularen zum Sammeln von Benutzerinformationen” on page 710
“Formularparameter definieren” on page 619
“URL-Parameter definieren” on page 618
“Erstellen von ColdFusion-Formularen” on page 729
“Spry-Seiten visuell erstellen” on page 457
Tutorial „Formulare erstellen“
Tutorial „Formulare gestalten“
Eigenschaften von Textfeldobjekten
Wählen Sie das Textfeldobjekt aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Zeichenbreite gibt an, wie viele Zeichen maximal im Feld angezeigt werden können. Diese Zahl kann niedriger
ausfallen als der Wert für „Zeichen max.“, der angibt, wie viele Zeichen maximal in das Feld eingegeben werden
können. Wenn für die Zeichenbreite beispielsweise 20 (Standardwert) festgelegt ist und ein Benutzer 100 Zeichen
eingibt, sind im Textfeld nur 20 Zeichen sichtbar. Die Zeichen werden vom Feldobjekt erkannt und zur Verarbeitung
an den Server gesendet, auch wenn Sie sie im Feld nicht sehen können.
Zeichen max. legt fest, wie viele Zeichen im Feld für einzeilige Textfelder maximal eingegeben werden können. Mit
der Option „Zeichen max.“ können Sie z. B. Postleitzahlen auf 5 Stellen und Kennwörter auf 10 Zeichen begrenzen.
Wenn Sie das Feld „Zeichen max.“ leer lassen, können Benutzer beliebig viel Text eingeben. Überschreitet der Text die
Zeichenbreite des Feldes, so wird ein Bildlauf durchgeführt. Sobald der Besucher die Höchstzahl an Zeichen
überschreitet, wird ein Warnton ausgegeben.
Anz. Zeilen bestimmt die Höhe des Feldes für mehrzeilige Textfelder. (Diese Option ist verfügbar, wenn die Option
„Mehrzeilig“ gewählt wurde.)
Deaktiviert deaktiviert den Textbereich.
Schreibgeschützt ändert den Textbereich in einen schreibgeschützten Textbereich.
Typ legt fest, ob es sich bei dem Feld um ein einzeiliges oder mehrzeiliges Textfeld oder um ein Kennwortfeld handelt.
• Einzeilig definiert ein input-Tag, dessen type-Attribut auf text eingestellt ist. Die Einstellung für
„Zeichenbreite“ wird dem Attribut
size zugeordnet die Einstellung für „Zeichen max.“ dem Attribut maxlength.
• Mehrere Zeilen definiert ein textarea-Tag. Die Einstellung für „Zeichenbreite“ wird dem Attribut cols
zugeordnet und die Einstellung für „Anz. Zeilen“ dem Attribut
rows.
• Kennwort definiert ein input-Tag, dessen type-Attribut auf password eingestellt ist. Die Einstellungen für
„Zeichenbreite“ und „Zeichen max.“ werden denselben Attributen zugeordnet wie bei einzeiligen Textfeldern. Wenn
719
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
ein Besucher ein Kennworttextfeld ausfüllt, werden die eingegebenen Zeichen in Form von Punkten oder Sternchen
angezeigt, damit andere sie nicht sehen können.
Anfangswert weist den im Feld angezeigten Wert beim ersten Laden des Formulars zu. Beispielsweise können Sie
deutlich machen, dass der Benutzer Informationen im Feld eingeben soll, indem Sie einen Hinweis oder einen
Beispielwert eintragen.
Klasse ermöglicht das Definieren von CSS-Regeln für das Objekt.
Optionen für Schaltflächenobjekte
Schaltflächenname weist der Schaltfläche einen Namen zu. Zwei Namen sind bereits belegt: „Senden“ und
„Zurücksetzen“. Mit „Senden“ wird das Formular angewiesen, die Formulardaten an die verarbeitende Anwendung
bzw. das verarbeitende Skript zu senden. Mit „Zurücksetzen“ werden alle Formularfelder auf ihre Ausgangswerte
zurückgesetzt.
Wert legt den Text fest, der auf der Schaltfläche angezeigt wird.
Aktion legt fest, welcher Vorgang beim Klicken auf die Schaltfläche ausgeführt wird.
• Formular senden
sendet die Formulardaten zur Verarbeitung, wenn der Benutzer auf die Schaltfläche klickt. Die
Daten werden an die Seite oder das Skript gesendet, die bzw. das in der Eigenschaft „Aktion“ des Formulars angegeben ist.
• Formular zurücksetzen löscht den Inhalt des Formulars, wenn der Besucher auf die Schaltfläche klickt.
• Keine ermöglicht es Ihnen, die Aktion anzugeben, die durchgeführt werden soll, wenn der Besucher auf die
Schaltfläche klickt. Sie können zum Beispiel ein JavaScript-Verhalten hinzufügen, das eine weitere Seite öffnet, wenn
der Benutzer auf die Schaltfläche klickt.
Klasse wendet CSS-Regeln auf das Objekt an.
Optionen für Kontrollkästchenobjekte
Aktivierter Wert legt den Wert fest, der an den Server gesendet werden soll, wenn das Kontrollkästchen aktiviert ist.
In einer Umfrage könnten Sie beispielsweise den Wert 4 für eine klare Zustimmung und den Wert 1 für eine eindeutige
Ablehnung festlegen.
Anfangsstatus legt fest, ob das Kontrollkästchen beim Öffnen des Formulars in einem Browser aktiviert ist.
Dynamisch lässt den Anfangsstatus des Kontrollkästchens dynamisch durch den Server bestimmen. Sie können
Kontrollkästchen z. B. zur visuellen Darstellung der Ja/Nein-Informationen verwenden, die in einem Datensatz der
Datenbank enthalten sind. Beim Entwerfen der Seite kennen Sie diese Informationen noch nicht. Zur Laufzeit liest der
Server den Datensatz aus und markiert das Kontrollkästchen, wenn der Wert „Ja“ lautet.
Klasse wendet CSS (Cascading Stylesheets)-Regeln auf das Objekt an.
Optionen für einzelne Optionsschalterobjekte
Aktivierter Wert legt den Wert fest, der an den Server gesendet wird, wenn der Optionsschalter aktiviert ist. So
könnten Sie beispielsweise im Textfeld „Aktivierter Wert“ das Wort
Skifahren eingeben, um darauf hinzuweisen,
dass ein Besucher „Skifahren“ gewählt hat.
Anfangsstatus legt fest, ob der Optionsschalter beim Öffnen des Formulars in einem Browser aktiviert ist.
Dynamisch lässt den Anfangsstatus des Optionsschalters dynamisch durch den Server bestimmen. Sie können
Optionsschalter zum Beispiel zur visuellen Darstellung der Informationen verwenden, die in einem Datensatz der
Datenbank enthalten sind. Beim Entwerfen der Seite kennen Sie diese Informationen noch nicht. Zur Laufzeit liest der
Server den Datensatz aus und aktiviert den Optionsschalter, wenn der Wert mit dem von Ihnen angegebenen Wert
übereinstimmt.
720
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Klasse wendet CSS-Regeln auf das Objekt an.
Menüoptionen
Liste/Menü weist dem Menü einen Namen zu. Der Name muss eindeutig sein.
Typ gibt an, ob das Menü nach unten aufklappt, wenn der Benutzer darauf klickt (Option „Menü“), oder eine
Optionsliste mit Bildlauf angezeigt wird (Option „Liste“). Wählen Sie die Option „Menü“, wenn bei der Anzeige des
Formulars in einem Browser nur eine Option sichtbar sein soll. Um die anderen Optionen anzuzeigen, muss der
Benutzer auf den abwärts gerichteten Pfeil klicken.
Wählen Sie die Option „Liste“, wenn bei der Anzeige des Formulars in einem Browser einige oder alle Optionen
sichtbar sein sollen, damit der Benutzer mehrere Einträge auswählen kann.
Höhe bestimmt die Anzahl der Optionen, die im Menü angezeigt werden (nur bei Typ „Liste“).
Auswahl gibt an, ob der Besucher mehrere Optionen aus der Liste wählen kann (nur bei Typ „Liste“).
Listenwerte öffnet ein Dialogfeld, mit dem Sie einem Formularmenü die Elemente hinzufügen können:
1 Mithilfe der Schaltflächen mit dem Pluszeichen (+) und dem Minuszeichen (–) können Sie Elemente in die Liste
aufnehmen oder daraus entfernen.
2 Geben Sie für jede Menüoption einen Beschriftungstext und einen optionalen Wert ein.
Jedes Element der Liste hat eine Beschriftung bzw. ein Label (der Text, der in der Liste angezeigt wird) und einen
Wert (der Wert, der bei Auswahl des Elements an die verarbeitende Anwendung gesendet wird). Sollte kein Wert
angegeben sein, wird stattdessen das Label an die verarbeitende Anwendung gesendet.
3 Mit den nach oben und nach unten gerichteten Pfeilen können Sie die Elemente der Liste neu anordnen.
Im Menü werden die Optionen in derselben Reihenfolge wie im Dialogfeld „Listenwerte“ aufgeführt. Das erste in
der Liste aufgeführte Element wird ausgewählt, wenn die Seite in einem Browser geladen wird.
Dynamisch gestattet es dem Server, beim ersten Öffnen des Menüs dynamisch ein Element auszuwählen.
Klasse ermöglicht das Definieren von CSS-Regeln für das Objekt.
Zuerst ausgewählt legt die Elemente fest, die in der Liste standardmäßig ausgewählt werden. Klicken Sie in der Liste
auf die Option(en).
Felder für Datei-Uploads einfügen
Sie können ein Feld für Datei-Uploads erstellen, mit dem Benutzer eine Datei (z. B. eine Textverarbeitungs- oder
Grafikdatei) auf ihrem Computer auswählen und an den Server übertragen können. Dateifelder sehen wie Textfelder
aus. Der einzige Unterschied besteht darin, dass Dateifelder zusätzlich die Schaltfläche „Durchsuchen“ enthalten. Die
Benutzer geben den Pfad der zu übertragenden Datei manuell ein oder sie suchen die Datei mithilfe der Schaltfläche
„Durchsuchen“ und wählen sie aus.
Die Verwendung von Feldern für Datei-Uploads setzt voraus, dass Sie über ein serverseitiges Skript oder eine Seite
verfügen, das bzw. die zur Verarbeitung gesendeter Dateien fähig ist. Schlagen Sie in der Dokumentation zur
Servertechnologie nach, die Sie zum Verarbeiten Ihrer Formulardaten verwenden. Wenn Sie beispielsweise PHP
verwenden, lesen Sie den Abschnitt „Handling files uploads“ im PHP-Online-Handbuch unter
http://us2.php.net/features.file-upload.php.
Bei Dateifeldern müssen Sie zum Senden der Dateien vom Browser an den Server die Methode
POST verwenden. Die
Datei wird an die Adresse geschickt, die Sie im Feld „Aktion“ des Formulars angeben.
721
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Note: Fragen Sie Ihren Serveradministrator, ob Uploads anonymer Dateien erlaubt sind, bevor Sie das Dateifeld
verwenden.
1 Fügen Sie ein Formular in die Seite ein („Einfügen“ > „Formular“).
2 Wählen Sie das Formular aus, um seinen Eigenschafteninspektor anzuzeigen.
3 Legen Sie POST als Methode für das Formular fest.
4 Wählen Sie im Popupmenü „Kod.-Typ“ multipart/form-data.
5 Geben Sie im Feld „Aktion“ das serverseitige Skript oder die Seite an, das bzw. die die hochgeladene Datei
verarbeiten kann.
6 Setzen Sie die Einfügemarke in den Formularrahmen und wählen Sie „Einfügen“ > „Formular“ > „Dateifeld“.
7 Stellen Sie im Eigenschafteninspektor die folgenden Optionen nach Bedarf ein:
Dateifeldname legt den Namen des Dateifeldobjekts fest.
Zeichenbreite gibt an, wie viele Zeichen maximal im Feld angezeigt werden können.
Zeichen max. legt fest, wie viele Zeichen das Feld maximal enthalten kann. Falls der Benutzer die Datei über
„Durchsuchen“ auswählt, können Dateiname und Pfad den in „Zeichen max.“ angegebenen Wert überschreiten. Falls
der Benutzer jedoch den Dateinamen und den Pfad manuell eingibt, kann das Feld nur die in „Zeichen max.“
festgelegte Anzahl an Zeichen enthalten.
Bildschaltfläche einfügen
Als Schaltflächensymbole lassen sich auch Bilder verwenden. Wenn Sie zur Ausführung bestimmter Aufgaben (mit
Ausnahme des Absendens von Daten) ein Bild verwenden, muss an das Formularobjekt ein Verhalten angehängt
werden.
1 Setzen Sie im Dokument die Einfügemarke in den Formularrahmen.
2 Wählen Sie „Einfügen“ > „Formular“ > „Bildfeld“.
Nun wird das Dialogfeld „Bildquelle auswählen“ angezeigt.
3 Wählen Sie im Dialogfeld „Bildquelle auswählen“das Bild für die Schaltfläche aus und klicken Sie auf „OK“.
4 Stellen Sie im Eigenschafteninspektor die folgenden Optionen nach Bedarf ein:
Bildfeld weist der Schaltfläche einen Namen zu. Zwei Namen sind bereits belegt: „Senden“ und „Zurücksetzen“. Mit
„Senden“ wird das Formular angewiesen, die Formulardaten an die verarbeitende Anwendung bzw. das verarbeitende
Skript zu senden. Mit „Zurücksetzen“ werden alle Formularfelder auf ihre Ausgangswerte zurückgesetzt.
Quelle gibt das Bild an, das Sie für die Schaltfläche verwenden möchten.
Alt ermöglicht die Eingabe von beschreibendem Text, der angezeigt wird, wenn das Bild nicht in den Browser geladen
werden kann.
Ausrichten stellt das Attribut „align“ des Objekts ein.
Bild bearbeiten startet den Standardeditor für Bilder und öffnet die Bilddatei zur Bearbeitung.
Klasse ermöglicht das Definieren von CSS-Regeln für das Objekt.
5 Sie ein JavaScript-Verhalten an die Schaltfläche anhängen, indem Sie das Bild auswählen und dann das Verhalten
im Bedienfeld „Verhalten“ wählen („Fenster“ > „Verhalten“).
Optionen für das Objekt „Verstecktes Feld“
Verstecktes Feld legt den Namen des Feldes fest.
722
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Wert weist dem Feld einen Wert zu. Dieser Wert wird beim Versenden des Formulars an den Server übergeben.
Gruppe von Optionsschaltern einfügen
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Wählen Sie „Einfügen“ > „Formular“ > „Optionsschaltergruppe“.
3 Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.
a Geben Sie im Feld „Name“ einen Namen für die Optionsschaltergruppe ein.
Wenn Sie angeben, dass die Optionsschalter Parameter zurück an den Server übergeben sollen, werden die Parameter
mit dem Namen verknüpft. Wenn Sie der Gruppe beispielsweise den Namen
myGroup geben und GET als
Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter übergeben, wenn
der Benutzer auf die Schaltfläche zum Senden klickt), wird in der URL der Ausdruck
myGroup="CheckedValue" an
den Server übermittelt.
b Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um der Gruppe einen Optionsschalter hinzuzufügen.
Geben Sie für den neuen Schalter eine Beschriftung und einen aktivierten Wert an.
c Klicken Sie auf den Aufwärts- oder Abwärtspfeil, um die Reihenfolge der Schalter zu ändern.
d Wenn beim Öffnen der Seite in einem Browser ein bestimmter Optionsschalter ausgewählt sein soll, geben Sie den
Wert ein, der dem Optionsschalterwert im Feld „Wert auswählen, der gleich“ entspricht.
Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das
Blitzsymbol klicken und eine Datensatzgruppe auswählen, die mögliche Aktivierungswerte enthält. In beiden Fällen
sollte der angegebene Wert dem aktivierten Wert eines Optionsschalters in der Gruppe entsprechen. Um die
aktivierten Werte der Optionsschalter anzuzeigen, wählen Sie den jeweiligen Optionsschalter aus und öffnen seinen
Eigenschafteninspektor („Fenster“ > „Eigenschaften“).
e Wählen Sie das Format aus, in dem Dreamweaver die Schalter anordnen soll.
Die Schalter können mithilfe von Zeilenumbrüchen oder Tabellen angeordnet werden. Wenn Sie sich für eine Tabelle
entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Optionsschalter links und die
Beschriftungen rechts.
Sie können die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.
Kontrollkästchengruppe einfügen
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Wählen Sie „Einfügen“ > „Formular“ > „Kontrollkästchengruppe“ aus.
3 Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.
a Geben Sie im Feld „Name“ einen Namen für die Kontrollkästchengruppe ein.
Wenn Sie für die Kontrollkästchen festlegen, dass Parameter an den Server zurückgegeben werden, erfolgt eine
Zuordnung der Parameter zum entsprechenden Namen. Wenn Sie beispielsweise die Gruppe
myGroup nennen und
GET als Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter
übergeben, wenn der Benutzer auf die Schaltfläche zum Senden klickt), wird in der URL der Ausdruck
myGroup="CheckedValue" an den Server übermittelt.
b Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um der Gruppe ein Kontrollkästchen hinzuzufügen.
Geben Sie für das neue Kontrollkästchen eine Beschriftung ein und legen Sie fest, ob es aktiviert ist.
c Klicken Sie auf den entsprechenden Pfeil nach oben oder unten, um die Reihenfolge der Kontrollkästchen zu
ändern.
723
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
d Wenn beim Öffnen der Seite in einem Browser ein bestimmtes Kontrollkästchen aktiviert sein soll, geben Sie im
Feld „Wert auswählen, der gleich:“ einen Wert ein, der dem Wert des Kontrollkästchens entspricht.
Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das
Blitzsymbol klicken und eine Datensatzgruppe auswählen, die mögliche Aktivierungswerte enthält. In beiden Fällen
sollte der angegebene Wert dem Aktivierungswert eines Kontrollkästchens in der Gruppe entsprechen. Um die
Aktivierungswerte der Kontrollkästchen anzuzeigen, wählen Sie die einzelnen Kontrollkästchen aus und öffnen Sie
jeweils den entsprechenden Eigenschafteninspektor („Fenster“ > „Eigenschaften“).
e Wählen Sie das Format aus, in dem die Kontrollkästchen in Dreamweaver angeordnet werden sollen.
Die Kontrollkästchen können mithilfe von Zeilenumbrüchen oder Tabellen angeordnet werden. Wenn Sie sich für
eine Tabelle entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Kontrollkästchen links und
die Beschriftungen rechts.
Sie können die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.
Dynamische Formularobjekte
Ein dynamisches Formularobjekt ist ein Formularobjekt, dessen Anfangsstatus durch den Server bei Anforderung der
Seite vom Server bestimmt wird und nicht bereits durch den Ersteller des Formulars. Wenn ein Besucher zum Beispiel
eine PHP-Seite anfordert, die ein Formular mit einem Menü enthält, kann ein PHP-Skript auf der Seite das Menü
automatisch mit Werten versehen, die in einer Datenbank gespeichert sind. Der Server sendet dann die
vervollständigte Seite an den Browser des Besuchers.
Dynamische Formularobjekte können die Verwaltung der Site vereinfachen. Auf vielen Sites stehen den Besuchern
zum Beispiel Menüs mit einer Reihe von Optionen zur Verfügung. Wenn ein Menü dynamisch ist, können Sie
Menüoptionen zentral an einer Stelle hinzufügen, entfernen oder bearbeiten – nämlich in der Datenbanktabelle, in der
die Elemente gespeichert sind – und dadurch alle Instanzen desselben Menüs in der Site aktualisieren.
More Help topics
“Definieren von Quellen für dynamischen Inhalt” on page 611
Dynamisches HTML-Formularmenü einfügen oder ändern
Sie können ein HTML-Formular- oder HTML-Listenmenü mit Einträgen aus einer Datenbank dynamisch ausfüllen
lassen. Bei den meisten Seiten können Sie ein HTML-Menüobjekt verwenden.
Zunächst müssen Sie ein HTML-Formular in eine Seite des Typs ColdFusion, PHP oder ASP einfügen und eine
Datensatzgruppe oder eine andere Quelle mit dynamischem Inhalt für die Seite definieren.
1 Fügen Sie ein Liste/Menü-HTML-Formularobjekt in Ihre Seite ein:
a Klicken Sie in das HTML-Formular auf der Seite („Einfügen“ > „Formular“ > „Formular“).
b Wählen Sie „Einfügen“ > „Formular“ > „Liste/Menü“ aus, um das Formularobjekt einzufügen.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie ein neues oder vorhandenes HTML Liste/Menü-Formularobjekt aus und klicken Sie anschließend im
Eigenschafteninspektor auf die Schaltfläche „Dynamisch“.
• Wählen Sie „Einfügen“ > „Datenobjekte“ > „Dynamische Daten“ > „Dynamische Auswahlliste“ aus.
724
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
3 Nehmen Sie im Dialogfeld „Dynamische(s) Liste/Menü“ die gewünschten Einstellungen vor und klicken Sie auf
„OK“.
a Wählen Sie im Popupmenü „Optionen aus Datensatzgruppe“ die Datensatzgruppe aus, die als Inhaltsquelle dienen
soll. Mit diesem Menü können Sie später auch statische und dynamische Liste/Menü-Elemente bearbeiten.
b Geben Sie im Bereich „Statische Optionen“ ein Standardelement in die Liste bzw. das Menü ein. Mit dieser Option
können Sie auch statische Einträge in einem Liste/Menü-Formularobjekt bearbeiten, nachdem dynamischer Inhalt
hinzugefügt wurde.
c (Optional) Mithilfe der Schaltfläche mit dem Pluszeichen (+) bzw. dem Minuszeichen (–) können Sie Elemente in
die Liste einfügen oder aus der Liste entfernen. Die Elemente werden in derselben Reihenfolge aufgeführt wie im
Dialogfeld „Listenwerte“. Das erste in der Liste aufgeführte Element wird ausgewählt, wenn die Seite in einem
Browser geladen wird. Mit den nach oben und nach unten gerichteten Pfeilen können Sie die Elemente der Liste
neu anordnen.
d Wählen Sie im Popupmenü „Werte“ das Feld aus, das die Werte für die Menüelemente enthält.
e Wählen Sie im Popupmenü „Beschriftungen“ das Feld aus, das die Beschriftungen für die Menüelemente enthält.
f (Optional) Soll ein bestimmtes Menüelement ausgewählt sein, wenn die Seite in einem Browser geöffnet oder ein
Datensatz im Formular angezeigt wird, geben Sie im Feld „Wert auswählen, der gleich“ einen Wert ein, der mit dem
Menüelementwert übereinstimmt.
Sie können einen statischen Wert eingeben oder Sie können neben dem Feld auf das Blitzsymbol klicken und aus der
Liste der Datenquellen einen dynamischen Wert auswählen. In beiden Fällen muss der angegebene Wert mit einem
der Menüelementwerte übereinstimmen.
Vorhandene HTML-Formularmenüs dynamisch gestalten
1 Wählen Sie in der Entwurfsansicht ein Liste/Menü-Formularobjekt aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Dynamisch“.
3 Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“.
Dynamischen Inhalt in HTML-Textfeldern anzeigen
Bei der Anzeige eines Formulars in einem Browser kann dynamischer Inhalt in HTML-Textfeldern angezeigt werden.
Zunächst müssen Sie das Formular in einer Seite des Typs ColdFusion, PHP oder ASP erstellen und eine
Datensatzgruppe oder eine andere Quelle mit dynamischem Inhalt für das Textfeld definieren.
1 Wählen Sie das Textfeld im HTML-Formular auf Ihrer Seite aus.
2 Klicken Sie im Eigenschafteninspektor auf das Blitzsymbol neben dem Feld „Anfangswert“, um das Dialogfeld
„Dynamische Daten“ anzuzeigen.
3 Wählen Sie die Spalte der Datensatzgruppe aus, die einen Wert für das Textfeld liefern soll, und klicken Sie auf
„OK“.
Optionen des Dialogfelds „Dynamisches Textfeld“ festlegen
1 Wählen Sie im Popupmenü „Textfeld“ das dynamisch zu gestaltende Textfeld aus.
2 Klicken Sie auf das Blitzsymbol neben dem Feld „Wert setzen auf“. Wählen Sie in der Liste der Datenquellen eine
Datenquelle aus und klicken Sie auf „OK“.
725
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Die Datenquelle muss Informationen in Textform enthalten. Falls in der Liste keine Datenquellen enthalten sind oder
die vorhandenen Datenquellen nicht Ihren Bedürfnissen entsprechen, klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+), um eine neue Datenquelle zu definieren.
More Help topics
“Definieren von Quellen für dynamischen Inhalt” on page 611
HTML-Kontrollkästchen dynamisch im Voraus aktivieren
Sie können den Server darüber entscheiden lassen, ob ein Kontrollkästchen markiert ist, wenn das Formular in einem
Browser angezeigt wird.
Zunächst müssen Sie das Formular auf einer Seite des Typs ColdFusion, PHP oder ASP erstellen und eine
Datensatzgruppe oder eine andere Quelle mit dynamischem Inhalt für die Kontrollkästchen definieren. Idealerweise
sollte die Inhaltsquelle boolesche Daten enthalten, z. B. Yes/No (ja/nein) oder true/false (wahr/falsch).
1 Wählen Sie ein Kontrollkästchen-Formularobjekt auf Ihrer Seite aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Dynamisch“.
3 Nehmen Sie im Dialogfeld „Dynamisches Kontrollkästchen“ die gewünschten Einstellungen vor und klicken Sie
auf „OK“.
• Klicken Sie neben dem Textfeld „Markieren wenn“ auf die Schaltfläche mit dem Blitzsymbol und wählen Sie das
Feld in der Liste der Datenquellen aus.
Die Datenquelle muss boolesche Daten wie
Ja und Nein bzw. wahr und falssch enthalten. Falls in der Liste keine
Datenquellen enthalten sind oder die vorhandenen Datenquellen nicht Ihren Bedürfnissen entsprechen, klicken Sie
auf die Schaltfläche mit dem Pluszeichen (+), um eine neue Datenquelle zu definieren.
• Geben Sie im Textfeld „Gleich“ den Wert ein, den das Feld haben muss, damit das Kontrollkästchen aktiviert wird.
Soll beispielsweise das Kontrollkästchen aktiviert werden, wenn ein bestimmtes Feld in einem Datensatz den Wert
Ja
hat, geben Sie im Textfeld „Gleich“ den Wert
Ja ein.
Note: Dieser Wert wird auch an den Server zurückgegeben, wenn der Benutzer auf die Senden-Schaltfläche des
Formulars klickt.
HTML-Optionsschalter dynamisch im Voraus aktivieren
Sie haben die Möglichkeit, einen HTML-Optionsschalter dynamisch im Voraus zu aktivieren, wenn ein Datensatz im
HTML-Formular in einem Browser angezeigt wird.
Zunächst müssen Sie das Formular in einer ColdFusion-, PHP- oder ASP-Seite erstellen und mindestens eine Gruppe
von HTML-Optionsschaltern hinzufügen („Einfügen“ > „Formular“ > „Optionsschaltergruppe“). Sie müssen auch
eine Datensatzgruppe oder eine andere Quelle mit dynamischem Inhalt für die Optionsschalter definieren.
Idealerweise sollte die Inhaltsquelle boolesche Daten enthalten, z. B. Yes/No (ja/nein) oder true/false (wahr/falsch).
1 Wählen Sie in der Entwurfsansicht einen Optionsschalter in der Gruppe aus.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Dynamisch“.
3 Nehmen Sie im Dialogfeld „Dynamische Optionsschaltergruppe“ die gewünschten Einstellungen vor und klicken
Sie auf „OK“.
Optionen des Dialogfelds „Dynamische Optionsschaltergruppe“ festlegen
1
Wählen Sie im Popupmenü „Optionsschaltergruppe“ ein Formular und eine Optionsschaltergruppe auf der Seite aus.
726
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Im Feld „Optionsschalterwerte“ werden die Werte aller Optionsschalter der Gruppe aufgeführt.
2 Wählen Sie in der angezeigten Werteliste einen Wert aus, der dynamisch im Voraus aktiviert werden soll. Dieser
Wert wird im Feld „Wert“ angezeigt.
3 Klicken Sie auf das Blitzsymbol neben dem Feld „Wert auswählen, der gleich“ und wählen Sie eine Datensatzgruppe
aus, die mögliche aktivierte Werte für die Optionsschalter der Gruppe enthält.
Die ausgewählte Datensatzgruppe enthält Werte, die den aktivierten Werten der Optionsschalter entsprechen. Um die
aktivierten Werte der Optionsschalter anzuzeigen, wählen Sie den jeweiligen Optionsschalter aus und öffnen Sie
seinen Eigenschafteninspektor („Fenster“ > „Eigenschaften“).
4 Klicken Sie auf „OK“.
Optionen des Dialogfelds „Dynamische Optionsschaltergruppe“ festlegen (ColdFusion)
1 Wählen Sie im Popupmenü „Optionsschaltergruppe“ eine Optionsschaltergruppe und ein Formular aus.
2 Klicken Sie auf das Blitzsymbol neben dem Feld „Wert auswählen, der gleich“.
3 Nehmen Sie im Dialogfeld „Dynamische Daten“ die gewünschten Einstellungen vor und klicken Sie auf „OK“.
a Wählen Sie in der Liste der Datenquellen eine Datenquelle aus.
b (Optional) Wählen Sie ein Datenformat für den Text aus.
c (Optional) Ändern Sie den Code, den Dreamweaver in die Seite einfügt, sodass der dynamische Text angezeigt
wird.
4 Klicken Sie auf „OK“, um das Dialogfeld „Dynamische Optionsschaltergruppe“ zu schließen und den Platzhalter
für dynamischen Inhalt in die Optionsschaltergruppe einzufügen.
HTML-Formulardaten überprüfen
Dreamweaver kann JavaScript-Code einfügen, der den Inhalt von bestimmten Textfeldern prüft, um sicherzustellen,
dass der Benutzer den richtigen Datentyp eingegeben hat.
Sie können Spry-Formular-Widgets verwenden, um Formulare zu erstellen und den Inhalt bestimmter
Formularelemente zu überprüfen. Weitere Informationen finden Sie in der nachstehenden Themenübersicht zu Spry.
Sie können in Dreamweaver außerdem ColdFusion-Formulare erstellen, die den Inhalt bestimmter Felder überprüfen.
Weitere Informationen finden Sie im folgenden Kapitel zu ColdFusion.
1 Erstellen Sie ein HTML-Formular, das mindestens ein Textfeld und eine Senden-Schaltfläche enthält.
Achten Sie darauf, dass jedes Textfeld, das überprüft werden soll, einen eindeutigen Namen hat.
2 Wählen Sie die Senden-Schaltfläche aus.
3 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf die Schaltfläche mit dem Pluszeichen (+) und
wählen Sie in der Liste das Verhalten „Formular überprüfen“ aus.
4 Legen Sie die Überprüfungsregeln für die einzelnen Textfelder fest und klicken Sie auf „OK“.
Sie können zum Beispiel festlegen, dass ein Textfeld, in dem das Alter eines Besuchers eingetragen werden soll, nur
Zahlen annimmt.
Note: Das Verhalten „Formular überprüfen“ ist nur dann verfügbar, wenn in das Dokument ein Textfeld eingefügt
wurde.
727
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
More Help topics
“Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“” on page 479
“Arbeiten mit dem Spry-Widget „Überprüfung - Textbereich“” on page 484
“Arbeiten mit dem Spry-Widget „Überprüfung - Auswahl“” on page 488
“Arbeiten mit dem Spry-Widget „Überprüfung - Kontrollkästchen“” on page 491
“ColdFusion-Formulardaten auswerten” on page 742
JavaScript-Verhalten an HTML-Formularobjekte anhängen
Sie können JavaScript-Verhalten, die in Dreamweaver gespeichert sind, an HTML-Formularobjekte wie Schaltflächen
anhängen.
1 Wählen Sie das HTML-Formularobjekt aus.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf die Schaltfläche mit dem Pluszeichen (+) und
wählen Sie in der Liste ein Verhalten aus.
Benutzerdefinierte Skripts an HTML-Formularschaltflächen anhängen
Einige Formulare führen Formularverarbeitungsvorgänge oder andere Aktionen mit JavaScript oder VBScript auf
dem Client durch, anstatt die Formulardaten zur Verarbeitung an den Server zu schicken. Sie können eine
Formularschaltfläche mit Dreamweaver so konfigurieren, dass sie ein bestimmtes clientseitiges Skript ausführt, wenn
der Benutzer auf die Schaltfläche klickt.
1 Wählen Sie eine Senden-Schaltfläche in einem Formular aus.
2 Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf die Schaltfläche mit dem Pluszeichen (+) und
wählen Sie in der Liste das Verhalten „JavaScript aufrufen“ aus.
3 Geben Sie im Dialogfeld „JavaScript aufrufen“ den Namen der JavaScript-Funktion ein, die beim Klicken auf die
Schaltfläche ausgeführt werden soll. Klicken Sie dann auf „OK“.
Sie können auch den Namen einer noch nicht vorhandenen Funktion eingeben, beispielsweise
processMyForm().
4 Wenn die JavaScript-Funktion im Abschnitt head des Dokuments noch nicht vorhanden ist, fügen Sie sie jetzt
hinzu.
Beispielsweise können Sie im Abschnitt
head die folgende JavaScript-Funktion hinzufügen, die eine Meldung
einblendet, wenn der Benutzer auf die Senden-Schaltfläche klickt:
function processMyForm(){
alert('Thanks for your order!');
}
More Help topics
“Verhalten „JavaScript aufrufen“ definieren” on page 379
Barrierefreie HTML-Formulare erstellen
Wenn Sie ein HTML-Formularobjekt einfügen, können Sie dieses Objekt barrierefrei gestalten. Außerdem haben Sie
die Möglichkeit, die Eingabehilfen-Attribute zu einem späteren Zeitpunkt zu ändern.
728
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Barrierefreie Formularobjekte hinzufügen
1 Aktivieren Sie das Dialogfeld „Eingabehilfen“ für Formularobjekte, wenn Sie zum ersten Mal barrierefreie
Formularobjekte hinzufügen (siehe “Optimieren des Arbeitsbereichs für visuelle Entwicklung” on page 599).
Diesen Schritt müssen Sie nur einmal ausführen.
2 Setzen Sie die Einfügemarke im Dokument an die Stelle, an der das Formularobjekt stehen soll.
3 Wählen Sie „Einfügen“ > „Formular“ und dann das einzufügende Formularobjekt.
Das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ wird eingeblendet.
4 Nehmen Sie im Dialogfeld die gewünschten Einstellungen vor und klicken Sie auf „OK“. Es folgt eine
unvollständige Liste der verfügbaren Optionen:
Note: Das Bildschirmlesegerät liest den Namen, den Sie für das Objekt als Label-Attribut eingeben.
ID weist dem Feld eine ID zu. Dieser Wert kann in JavaScript für Verweise auf das Feld verwendet werden. Er wird
außerdem als Wert für das for-Attribut verwendet, wenn Sie in den Stiloptionen die Option „Label-Tag mit
for-
Attribut anhängen“ wählen.
Umbruch mit Label-Tag bewirkt, dass das Formularobjekt wie folgt in Label-Tags eingeschlossen wird:
<label>
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton1</label>
Label-Tag mit for-Attribut anhängen Mithilfe des for-Attributs wird das Formularelement in Label-Tags
eingeschlossen:
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton">
<label for="radiobutton">RadioButton2</label>
Die Auswahl dieser Option bewirkt, dass der mit einem Kontrollkästchen oder Optionsschalter verbundene Text im
Browser in einem Fokusrechteck angezeigt wird. Der Benutzer kann dann auf eine beliebige Stelle in diesem Text
klicken und muss nicht unbedingt genau auf das Kontrollkästchen oder den Optionsschalter klicken.
Note: Diese Möglichkeit empfiehlt sich als Eingabehilfe. Die Funktionalität kann jedoch je nach Browser variieren.
Kein Label-Tag bewirkt, dass kein Label-Tag verwendet wird:
<input type="radio" name="radiobutton" value="radiobutton">
RadioButton3
Zugriffstaste bewirkt, dass das Formularobjekt im Browser über eine Taste (einen Buchstaben) und die Alt-Taste
(Windows) bzw. Ctrl (Macintosh) ausgewählt werden kann. Wenn Sie beispielsweise
B als Zugriffstaste definieren,
können Macintosh-Benutzer das Formularobjekt im Browser mit Ctrl+B auswählen.
Reihenfolgenposition gibt eine Tabulatorreihenfolge für die Formularobjekte an. Wenn Sie für ein Objekt eine
Reihenfolgenposition festlegen, müssen Sie dies auch bei allen anderen Objekten tun.
Das Festlegen einer Reihenfolge ist sinnvoll, wenn eine Seite weitere Hyperlinks und Formularobjekte enthält. Der
Benutzer gelangt dann in einer bestimmten Reihenfolge mithilfe der Tabulatortaste von einem Element zum nächsten.
5 Klicken Sie auf „Ja“, um ein Formular-Tag einzufügen.
Das Formularobjekt wird im Dokument angezeigt.
Note: Wenn Sie auf „Abbrechen“ klicken, wird das Formularobjekt zwar in das Dokument eingefügt, aber es wird nicht
von Dreamweaver mit Eingabehilfen-Tags oder -Attributen verknüpft.
729
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Eingabehilfen-Werte eines Formularobjekts bearbeiten
1 Wählen Sie das Objekt im Dokumentfenster aus.
2 Führen Sie einen der folgenden Schritte aus:
• Bearbeiten Sie die jeweiligen Attribute in der Codeansicht.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) und wählen Sie dann
„Tag bearbeiten“.
Erstellen von ColdFusion-Formularen
ColdFusion-Formulare
ColdFusion-Formulare enthalten mehrere integrierte Funktionen zum Überprüfen von Formulardaten. So können
Sie beispielsweise überprüfen, ob ein Benutzer ein gültiges Datum eingegeben hat. Einige Formularsteuerelemente
verfügen über zusätzliche Funktionen. Einige Steuerelemente haben keine genaue HTML-Entsprechung, bei anderen
wiederum wird das dynamische Füllen aus Datenquellen direkt unterstützt.
Dreamweaver enthält eine Reihe von Erweiterungen für ColdFusion-Entwickler, die ColdFusion MX 7 oder eine
spätere Version als Entwicklungsserver einsetzen. Zu diesen Erweiterungen gehören zusätzliche Schaltflächen im
Bedienfeld „Einfügen“, Menüelemente und Eigenschafteninspektoren, damit Sie ColdFusion-Formulare schnell
erstellen und die entsprechenden Eigenschaften problemlos festlegen können. Außerdem können Sie Programmcode
generieren, der die von den Benutzern eingegebenen Daten überprüft. Beispielsweise können Sie überprüfen, ob die
vom Benutzer eingegebene E-Mail-Adresse ein @-Symbol oder ob ein erforderliches Textfeld einen Wert eines
bestimmten Typs enthält.
ColdFusion-Erweiterungen aktivieren
Einige dieser Erweiterungen setzen voraus, dass Sie einen Computer mit ColdFusion MX 7 oder einer späteren
Version als Testserver für Dreamweaver definieren. Die Eigenschafteninspektoren für Formularsteuerelemente sind
beispielsweise nur verfügbar, wenn Sie den richtigen Testserver angeben.
Einen Testserver definieren Sie nur einmal. Dreamweaver erkennt dann automatisch die Testserverversion und macht
die Erweiterungen verfügbar, wenn ColdFusion MX 7 erkannt wird.
1 Definieren Sie eine Dreamweaver-Site für Ihr ColdFusion-Projekt, wenn dies noch nicht geschehen ist.
2 Wählen Sie „Site“ > „Sites verwalten“ aus, wählen Sie in der Liste Ihre Site aus und klicken Sie auf „Bearbeiten“.
3 Wählen Sie die Kategorie „Server“ aus und geben Sie einen Computer an, auf dem ColdFusion MX 7 oder eine
spätere Version als Testserver für Ihre Dreamweaver-Site ausgeführt wird. Stellen Sie dabei sicher, dass Sie eine
gültige Web-URL angeben.
4 Öffnen Sie ein ColdFusion-Dokument.
Änderungen des Dreamweaver-Arbeitsbereichs werden erst nach dem Öffnen eines ColdFusion-Dokuments sichtbar.
More Help topics
“Schützen von Ordnern in Anwendungen (ColdFusion)” on page 701
“Arbeiten mit Dreamweaver-Sites” on page 40
“Testserver einrichten” on page 50
730
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
ColdFusion-Formulare erstellen
Mithilfe einer Reihe von Schaltflächen im Bedienfeld „Einfügen“, Menüelementen und Eigenschafteninspektoren
können Sie in Dreamweaver schnell ColdFusion-Formulare erstellen und die entsprechenden Eigenschaften festlegen.
Note: Diese Erweiterungen sind nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Öffnen Sie eine ColdFusion-Seite und setzen Sie die Einfügemarke an die gewünschte Position im ColdFusion-
Formular.
2 Wählen Sie „Einfügen“ > „ColdFusion-Objekte“ > „CFForm“ > „CFForm“ aus oder wählen Sie im Bedienfeld
„Einfügen“ die Kategorie „CFForm“ aus und klicken Sie dann auf das Symbol „CF-Formular“.
Dreamweaver fügt ein leeres ColdFusion-Formular ein. In der Entwurfsansicht wird das Formular durch einen
gepunkteten roten Umriss gekennzeichnet. Vergewissern Sie sich, dass „Ansicht“ > „Visuelle Hilfsmittel“ >
„Unsichtbare Elemente“ ausgewählt ist, falls Sie diesen Rahmen nicht sehen können.
3 Legen Sie mithilfe des Eigenschafteninspektors die folgenden Formulareigenschaften fest. Das Formular muss
dabei auf jeden Fall ausgewählt sein.
CFForm bezeichnet den Namen des Formulars.
Aktion
ermöglicht das Angeben des Namens der zu verarbeitenden ColdFusion-Seite, wenn das Formular gesendet wird.
Methode ermöglicht das Definieren der Methode, mit der der Browser die Formulardaten an den Server sendet:
• POST sendet die Daten mit der HTTP-Methode post. Diese Methode sendet die Daten in einer separaten
Nachricht an den Server.
• GET sendet die Daten mit der HTTP-Methode get. Dabei wird der Inhalt des Formularfelds in den URL-
Abfragestring eingefügt.
Ziel ermöglicht das Ändern des Werts im Attribut „target“ des Tags „cfform“.
Kodierungstyp gibt die Kodierungsmethode zum Übertragen der Formulardaten an.
Note: Der Kodierungstyp bezieht sich nicht auf die Zeichenkodierung. Dieses Attribut gib den Inhaltstyp an, der zum
Senden des Formulars an den Server verwendet wird (wenn der Wert der Methode
post ist). Der Standardwert für dieses
Attribut ist „application/x-www-form-urlencoded“.
Format bestimmt die Art des zu erstellenden Formats:
• HTML generiert ein HTML-Formular und sendet es an den Client. Die untergeordneten Steuerelemente „cfgrid“
und „cftree“ können im Flash- oder im Applet-Format vorliegen.
• Flash generiert ein Flash-Formular und sendet es an den Client. Alle Steuerelemente liegen im Flash-Format vor.
• XML generiert XForms-XML-Code und fügt die Resultate in eine Variable mit dem Namen des ColdFusion-
Formulars ein. Es werden keine Daten an den Client gesendet. Die untergeordneten Steuerelemente „cfgrid“ und
„cftree“ können im Flash- oder im Applet-Format vorliegen.
Stil ermöglicht das Angeben eines Stils für das Formular. Weitere Informationen enthält die ColdFusion-
Dokumentation.
Flash/XML-Skin ermöglicht das Angeben einer Halofarbe zur Gestaltung der Ausgabe. Die Skin bestimmt die Farbe
für hervorgehobene und ausgewählte Elemente.
Daten beibehalten bestimmt, ob die anfänglichen Steuerelementwerte mit gesendeten Werten überschrieben werden
sollen, wenn das Formular an sich selbst sendet (Post).
• Wenn der Wert „false“ ist, werden die in den Tag-Attributen des Steuerelements angegebenen Werte verwendet.
731
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
• Wenn der Wert „true“ ist, werden gesendete Werte verwendet.
Skriptquelle gibt die URL der JavaScript-Datei mit dem Clientcode für das Tag und seine untergeordneten Tags
relativ zum Web-Stammverzeichnis an. Dieses Attribut ist hilfreich, wenn sich die Datei nicht im Standardordner
befindet. Das Attribut muss in einigen Host-Umgebungen und -Konfigurationen angegeben werden, die den Zugriff
auf das Verzeichnis /CFIDE sperren. Der Standardordner wird in ColdFusion-Administrator definiert.
Standardmäßig handelt es sich um „/CFIDE/scripts/cfform.js“.
Archiv gibt die URL der herunterladbaren Java-Klassen für die Applet-Steuerelemente „cfgrid“, „cfslider“ und „cftree“
an. Der Standardordner ist /CFIDE/classes/cfapplets.jar.
Höhe gibt die Höhe des Formulars an.
Breite gibt die Breite des Formulars an.
Tag-Editor für cfform anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht
aufgeführt werden.
4 Fügen Sie ColdFusion-Formularsteuerelemente ein.
Setzen Sie die Einfügemarke an die Stelle im ColdFusion-Formular, an der das ColdFusion-Formularsteuerelement
eingefügt werden soll. Wählen Sie dann das gewünschte Steuerelement im Menü „Einfügen“ („Einfügen“ >
„ColdFusion-Objekte“ > „CFForm“) oder in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ aus.
5 Stellen Sie, falls erforderlich, die Eigenschaften des Steuerelements im Eigenschafteninspektor ein.
Das Steuerelement muss in der Entwurfsansicht ausgewählt sein, damit Sie die Eigenschaften im
Eigenschafteninspektor einstellen können. Um weitere Informationen zu den Eigenschaften anzuzeigen, klicken Sie
auf die Hilfeschaltfläche des Eigenschafteninspektors.
6 Passen Sie das Layout des ColdFusion-Formulars an.
Beim Erstellen eines HTML-Formulars können Sie Zeilenumbrüche, Absatzumbrüche, vorformatierten Text und
Tabellen zur Formatierung einsetzen. Sie können ein ColdFusion-Formular nicht in ein anderes ColdFusion-
Formular einfügen (d.h. die Tags dürfen sich nicht überschneiden). Eine Seite kann aber mehrere ColdFusion-
Formulare enthalten.
Wenn Sie ein Flash-Formular erstellen, können Sie das Layout mit CSS (Cascading Style Sheets)-Stilen steuern.
ColdFusion ignoriert HTML-Code im Formular.
Benennen Sie die ColdFusion-Formularfelder mit beschreibendem Text, damit Benutzer wissen, was sie eingeben
müssen. Verwenden Sie z. B. „Bitte Namen eingeben“, um zur Eingabe eines Namens aufzufordern.
More Help topics
“ColdFusion-Formulardaten auswerten” on page 742
“HTML-Formulare erstellen” on page 716
ColdFusion-Formularsteuerelemente einfügen
Im Bedienfeld „Einfügen“ oder über das Menü „Einfügen“ können Sie ColdFusion-Formularsteuerelemente schnell
in ein ColdFusion-Formular einfügen. Sie erstellen zunächst ein leeres ColdFusion-Formular und fügen dann
Steuerelemente ein.
Note: Diese Erweiterungen sind nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX
7 oder eine spätere Version ausgeführt wird.
1 Setzen Sie in der Entwurfsansicht die Einfügemarke in den Formularrahmen.
732
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
2 Wählen Sie das Steuerelement im Menü „Einfügen“ („Einfügen“ > „ColdFusion-Objekte“ > „CFForm“) oder in der
Kategorie „CFForm“ des Bedienfelds „Einfügen“ aus.
3 Klicken Sie auf der Seite auf das Steuerelement, um es auszuwählen und legen Sie dann im Eigenschafteninspektor
dessen Eigenschaften fest.
Weitere Informationen zu den Eigenschaften bestimmter Steuerelemente finden Sie in den jeweiligen Themen zu
diesen Steuerelementen.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Textfelder einfügen
Sie können ein ColdFusion-Textfeld oder -Kennwortfeld interaktiv in ein Formular einfügen und dann die Optionen
einstellen.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
ColdFusion-Textfelder interaktiv einfügen
1 Setzen Sie in der Entwurfsansicht die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Textfeld“ oder wählen Sie
„Einfügen“ > „ColdFusion-Objekte“ > „CFForm“ > „CFtextfield“ aus.
Ein Textfeld wird im Formular angezeigt.
3 Wählen Sie das Textfeld aus und legen Sie dessen Eigenschaften im Eigenschafteninspektor fest.
4
Wenn Sie das Textfeld auf der Seite beschriften möchten, klicken Sie neben das Textfeld und geben die Beschriftung ein.
Kennwortfelder interaktiv einfügen
1 Wiederholen Sie die Schritte 1 und 2 der vorhergehenden Anleitungen zum Einfügen eines Textfelds.
2 Wählen Sie das eingefügte Textfeld aus, um seine Optionen im Eigenschafteninspektor anzuzeigen.
3 Wählen Sie im Eigenschafteninspektor im Popupmenü „Textmodus“ den Wert des Kennworts aus.
CFTextField-Optionen (ColdFusion)
Um die Optionen eines ColdFusion-Textfelds oder -Kennwortfelds einzustellen, setzen Sie eine der folgenden
Optionen im CFTextField-Eigenschafteninspektor:
CFtextfield stellt das Attribut id des Tags cfinput ein.
Wert ermöglicht die Angabe des Texts, der im Feld angezeigt werden soll, wenn die Seite das erste Mal in einem
Browser geöffnet wird. Die Daten können statisch oder dynamisch sein.
Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld „Wert“. Wählen Sie dann
im Dialogfeld „Dynamische Daten“ eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte übergibt einen
Wert an das Textfeld, wenn Sie das Formular in einem Browser anzeigen.
Textmodus ermöglicht das Umschalten zwischen einem Standardeingabefeld für Text und einem Kennwortfeld. Das
mit diesem Steuerelement geänderte Attribut ist
type.
733
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Schreibgeschützt ermöglicht die Anzeige von Text, der vom Benutzer nicht geändert werden kann.
Max. Länge bestimmt die maximale Anzahl der Zeichen, die in das Textfeld eingegeben werden dürfen.
Maske ermöglicht das Definieren einer Maske für den angeforderten Text. Anhand dieser Eigenschaft können Sie die
Benutzereingabe überprüfen. Das Maskenformat besteht aus den Zeichen A, 9, X und ? .
Note: Im Tag „cfinput type="password"“ wird das Attribut „mask“ ignoriert.
Überprüfen gibt den Überprüfungstyp für das aktuelle Feld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Textfeld.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel.
Größe dient der Angabe der Steuerelementgröße.
Erforderlich gibt an, ob das Textfeld Daten enthalten muss, damit das Formular an den Server gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
Versteckte ColdFusion-Felder einfügen
Sie können versteckte ColdFusion-Felder in Formulare einfügen und ihre Eigenschaften einstellen. In versteckten
Feldern werden Daten gespeichert und gesendet, die nicht vom Benutzer eingegeben werden. Die enthaltenen
Informationen bleiben dem Besucher verborgen.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie in der Entwurfsansicht die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „Verstecktes CF-Feld“.
Eine Markierung wird im ColdFusion-Formular angezeigt. Wenn die Markierung nicht sichtbar ist, wählen Sie
„Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
3
Wählen Sie das versteckte Feld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfhiddenfield ermöglicht die Angabe eines eindeutigen Namens für das versteckte Feld.
Wert ermöglicht die Angabe eines Werts für das versteckte Feld. Die Daten können statisch oder dynamisch sein.
Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld „Wert“. Wählen Sie dann
im Dialogfeld „Dynamische Daten“ eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte übergibt einen
Wert an das Textfeld, wenn Sie das Formular in einem Browser anzeigen.
Überprüfen gibt den Überprüfungstyp für das aktuelle Feld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Steuerelement. Diese Eigenschaft wird zur Laufzeit
vom ColdFusion-Server ignoriert.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
734
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Größe dient der Angabe der Steuerelementgröße. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
Erforderlich
gibt an, ob das versteckte Feld Daten enthalten muss, damit das Formular an den Server gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
ColdFusion-Textbereiche einfügen
Sie können ColdFusion-Textbereiche in Formulare einfügen und ihre Eigenschaften einstellen. Ein Textbereich ist ein
Eingabeelement, das aus mehreren Textzeilen besteht.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Textbereich“.
Im ColdFusion-Formular wird ein Textbereich angezeigt.
3
Wählen Sie den Textbereich auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cftextarea ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Zeichenbreite legt die Anzahl der Zeichen pro Zeile fest.
Anz. Zeilen legt die Anzahl der im Textbereich anzuzeigenden Zeilen fest.
Umbruch bestimmt, wie der vom Benutzer eingegebene Text umbrochen wird.
Erforderlich bestimmt, ob der Benutzer Daten in das Feld eingeben muss (aktiviert) oder nicht (deaktiviert).
Anfangswert ermöglicht die Angabe von Text, der im Textbereich angezeigt werden soll, wenn die Seite in einem
Browser geöffnet wird.
Überprüfen gibt den Überprüfungstyp für das Feld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Steuerelement.
Stil ermöglicht die Angabe eines Stils für das Steuerelement. Weitere Informationen enthält die ColdFusion-
Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
735
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
4 Wenn Sie den Textbereich beschriften möchten, klicken Sie neben das Textfeld und geben Sie die Beschriftung ein.
More Help topics
“ColdFusion-Formulardaten auswerten” on page 742
“ColdFusion-Formularsteuerelemente ändern” on page 741
ColdFusion-Schaltflächen einfügen
Sie können ColdFusion-Schaltflächen in Formulare einfügen und ihre Eigenschaften einstellen. ColdFusion-
Schaltflächen steuern ColdFusion-Formularoperationen. Schaltflächen können zum Senden von ColdFusion-
Formulardaten an den Server oder zum Zurücksetzen des ColdFusion-Formulars verwendet werden. ColdFusion-
Standardschaltflächen sind beispielsweise mit „Zurücksetzen“ oder „Senden“ beschriftet. Sie können auch andere
Aufgaben zuweisen, die in einem Skript definiert wurden. Beispielsweise kann eine Schaltfläche die Gesamtkosten
ausgewählter Artikel basierend auf zugewiesenen Werten berechnen.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Platzieren Sie die Einfügemarke im Rahmen des ColdFusion-Formulars.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Schaltfläche“.
Eine Schaltfläche wird im ColdFusion-Formular angezeigt.
3 Wählen Sie die Schaltfläche auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfbutton ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Aktion gibt den Typ der zu erstellenden Schaltfläche an.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
Die anderen Eigenschaften werden zur Laufzeit vom ColdFusion-Server ignoriert.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
ColdFusion-Auswahlfelder einfügen
Sie können ColdFusion-Kontrollkästchen in Formulare einfügen und ihre Eigenschaften einstellen. Verwenden Sie
Kontrollkästchen, um die Besucher mehrere Optionen in einer Gruppe von Optionen auswählen zu lassen.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Kontrollkästchen“.
Im ColdFusion-Formular wird ein Auswahlfeld angezeigt.
3
Wählen Sie das Auswahlfeld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfcheckbox ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
736
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Aktivierter Wert
gibt den Wert an, der vom Kontrollkästchen zurückgegeben wird, wenn es vom Benutzer aktiviert wird.
Anfangsstatus legt fest, ob das Kontrollkästchen beim Öffnen der Seite in einem Browser aktiviert ist.
Überprüfen gibt den Überprüfungstyp für das Kontrollkästchen an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Kontrollkästchen.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Größe dient der Angabe der Steuerelementgröße. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
Erforderlich
gibt an, ob das Kontrollkästchen aktiviert sein muss, damit das Formular an den Server gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
4 Beschriften Sie das Kontrollkästchen, indem Sie neben dem Kontrollkästchen auf die Seite klicken und den
Beschriftungstext eingeben.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Optionsschalter einfügen
Sie können ColdFusion-Optionsschalter in Formulare einfügen und ihre Eigenschaften einstellen. Wenn der Besucher
aus verschiedenen Optionen eine einzige Auswahl treffen muss, sollten Sie Optionsschalter verwenden.
Optionsschalter werden normalerweise in Gruppen eingesetzt. Alle Optionsschalter einer Gruppe müssen denselben
Namen haben.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Wählen Sie „Einfügen“ > „ColdFusion-Objekte“ > „CFForm“ > „CFradiobutton“ aus.
Ein Optionsschalter wird im ColdFusion-Formular angezeigt.
3 Wählen Sie den Optionsschalter auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden
Optionen ein:
Cfradiobutton ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Aktivierter Wert gibt den Wert an, der vom Optionsschalter bei seiner Aktivierung zurückgegeben wird.
Anfangsstatus legt fest, ob der Optionsschalter beim Öffnen der Seite in einem Browser aktiviert ist.
Überprüfen gibt den Überprüfungstyp für den Optionsschalter an.
737
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Überprüfen bei gibt an, wann der Optionsschalter überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für den Optionsschalter.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Größe dient der Angabe der Steuerelementgröße. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
Erforderlich gibt an, ob der Optionsschalter aktiviert sein muss, wenn das Formular an den Server gesendet wird.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
4 Wenn Sie den Optionsschalter auf der Seite beschriften möchten, klicken Sie neben dem Optionsschalter auf die
Seite und geben Sie die Beschriftung ein.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Auswahlfelder einfügen
Sie können ColdFusion-Auswahlfelder in Formulare einfügen und ihre Eigenschaften einstellen. In einem
Auswahlfeld kann der Benutzer ggf. mehrere Elemente in einer Liste auswählen. Auswahlfelder sind nützlich, wenn
Sie nur über begrenzten Platz verfügen, jedoch viele Elemente anzeigen müssen. Sie sind auch dann sinnvoll, wenn Sie
die Werte kontrollieren möchten, die an den Server zurückgemeldet werden. Anders als bei Textfeldern, in die der
Benutzer beliebige Zeichenfolgen eingibt, die sogar ungültig sein können, legen Sie exakte Werte fest, die von einem
solchen Auswahlmenü zurückgegeben werden.
Sie können zwei Arten von Auswahlfeldern in ein Formular einfügen: Menüs, die nach unten aufklappen, wenn der
Besucher darauf klickt, oder Menüs mit einer bildlauffähigen Liste von Optionen, die der Benutzer auswählen kann.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Auswahl“.
Ein Auswahlfeld wird im ColdFusion-Formular angezeigt.
3
Wählen Sie das Auswahlfeld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
CFSELECT ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Typ ermöglicht die Auswahl zwischen Popupmenü und Liste. Wenn Sie den Typ „Liste“ auswählen, werden die
Optionen „Listenhöhe“ und „Mehrfache Listenauswahl zulassen“ verfügbar.
Listenhöhe ermöglicht die Angabe der Anzahl der in der Liste anzuzeigenden Zeilen. Diese Option ist nur für den Typ
„Liste“ verfügbar.
738
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Mehrfache Listenauswahl zulassen legt fest, ob der Besucher gleichzeitig mehr als eine Option aus der Liste auswählen
kann. Diese Option ist nur für den Typ „Liste“ verfügbar.
Werte bearbeiten öffnet ein Dialogfeld, mit dem Sie Optionen für das Auswahlfeld hinzufügen, bearbeiten oder
entfernen können.
Zuerst ausgewählt gibt an, welche Option standardmäßig ausgewählt ist. Sie können mehr als eine Option auswählen,
wenn Sie die Option „Mehrfache Listenauswahl zulassen“ ausgewählt haben.
Datensatzgruppe gibt den Namen der ColdFusion-Abfrage an, die verwendet werden soll, um die Liste oder das
Menü mit Einträgen zu füllen.
Spalte anzeigen gibt die Datensatzgruppenspalte an, der die Anzeigebeschriftungen für die Listenelemente
entnommen werden. Wird in Verbindung mit der Eigenschaft „Datensatzgruppe“ verwendet.
Wertespalte gibt die Datensatzgruppenspalte an, der die Werte für die einzelnen Listenelemente entnommen werden.
Wird in Verbindung mit der Eigenschaft „Datensatzgruppe“ verwendet.
Flash-Beschriftung ermöglicht die Angabe einer Beschriftung für das Auswahlfeld.
Flash-Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom
ColdFusion-Server ignoriert.
Flash-Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom
ColdFusion-Server ignoriert.
Meldung gibt die Meldung an, die angezeigt werden soll, wenn die Eigenschaft „Erforderlich“ den Wert „Ja“ hat und
der Besucher vor dem Senden des Formulars keine Auswahl vorgenommen hat.
Erforderlich gibt an, ob ein Menüelement ausgewählt werden muss, bevor das Formular an den Server gesendet wird.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Bildfelder einfügen
Sie können ColdFusion-Bildfelder in Formulare einfügen und ihre Optionen einstellen. Mit Bildfeldern können Sie
benutzerdefinierte Schaltflächen erstellen.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Setzen Sie in der Entwurfsansicht die Einfügemarke in den Formularrahmen.
2 Klicken Sie in der Kategorie „CFForm“ des Bedienfelds „Einfügen“ auf das Symbol „CF-Bildfeld“. Durchsuchen Sie
das Dateisystem, um das einzufügende Bild auszuwählen, und klicken Sie auf „OK“. Sie können den Pfad der
Bilddatei auch im Feld „Quelle“ eingeben.
Note: Wenn sich das Bild nicht im Stammordner der Site befindet, sollten Sie Bild in den Stammordner kopieren. Auf
Bilder außerhalb des Stammordners kann nach dem Veröffentlichen der Site möglicherweise nicht mehr zugegriffen
werden.
3 Wählen Sie das Bildfeld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfimagefield ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
739
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Quelle ermöglicht die Angabe der URL des eingefügten Bilds.
Alt ermöglicht die Angabe einer Meldung, die anstelle des Bilds erscheint, wenn sich das Bild nicht anzeigen lässt.
Ausrichten ermöglicht die Angabe einer Ausrichtung für das Bild.
Rahmen ermöglicht die Einstellung der Breite des Bildrahmens.
Bild bearbeiten öffnet das Bild im Standardeditor für Bilder.
Den Standardeditor für Bilder definieren Sie mit „Bearbeiten“ > „Voreinstellungen“ > „Dateitypen/Editoren“.
Ansonsten löst die Schaltfläche „Bild bearbeiten“ keine Aktion aus.
Überprüfen gibt den Überprüfungstyp für das Bildfeld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für den Optionsschalter.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel.
Größe dient der Angabe der Steuerelementgröße. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
Erforderlich
gibt an, ob das Steuerelement Daten enthalten muss, damit das Formular an den Server gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Dateifelder einfügen
Sie können ColdFusion-Dateifelder in Formulare einfügen und ihre Eigenschaften einstellen. Verwenden Sie ein
Dateifeld, damit Benutzer eine Datei (z. B. eine Textverarbeitungs- oder Grafikdatei) auf ihrem Computer auswählen
und zum Server hochladen können. ColdFusion-Dateifelder sehen wie Textfelder aus und unterscheiden sich von
diesen nur dadurch, dass sie die Schaltfläche „Durchsuchen“ enthalten. Die Benutzer geben den Pfad der
hochzuladenden Datei entweder manuell ein oder suchen die Datei mithilfe der Schaltfläche „Durchsuchen“ und
wählen sie aus.
Bei Dateifeldern müssen Sie zum Senden der Dateien vom Browser an den Server die Methode
POST verwenden. Die
Datei wird an die Adresse geschickt, die Sie im Feld „Aktion“ des Formulars angeben. Fragen Sie Ihren
Serveradministrator, ob Dateien anonym hochgeladen werden dürfen, bevor Sie ein Dateifeld im Formular
verwenden.
Dateifelder setzen außerdem voraus, dass „multipart/form“ als Formularkodierung ausgewählt wurde. Dreamweaver
aktiviert diesen Kodierungstyp automatisch, wenn Sie ein Dateifeld-Steuerelement einfügen.
740
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Wählen Sie in der Entwurfsansicht das ColdFusion-Formular aus, um den zugehörigen Eigenschafteninspektor
anzuzeigen.
Um das Formular schnell auszuwählen, klicken Sie auf eine beliebige Stelle im Formularrahmen und anschließend
unten im Dokumentfenster auf das
<cfform>-Tag im Tag-Selektor.
2 Aktivieren Sie im Eigenschafteninspektor die Formularmethode „POST“.
3 Wählen Sie „multipart/form-data“ im Popupmenü „Kod.-Typ“ aus.
4 Setzen Sie die Einfügemarke auf die Stelle im Formularrahmen, an der das Dateifeld angezeigt werden soll.
5 Wählen Sie „Einfügen“ > „ColdFusion-Objekte“ > „CFForm“ > „CFfilefield“ aus.
Ein Dateifeld wird im Dokument angezeigt.
6 Wählen Sie das Dateifeld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cffilefield ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Max. Länge ermöglicht die Eingabe der maximalen Anzahl der Zeichen für den Pfadnamen der Datei.
Überprüfen gibt den Überprüfungstyp für das Feld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Feld.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Größe dient der Angabe der Steuerelementgröße.
Erforderlich ermöglicht die Angabe, ob das Dateifeld Daten enthalten muss, damit das Formular an den Server
gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
More Help topics
“ColdFusion-Formularsteuerelemente ändern” on page 741
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Datumsfelder einfügen
Zwar können ColdFusion-Datumsfelder in Dreamweaver nicht interaktiv eingefügt werden, Sie können aber deren
Eigenschaften interaktiv einstellen. Ein ColdFusion-Datumsfeld ist ein spezielles Textfeld: Benutzer können ein
Datum in einem Popupkalender auswählen und dann in das Textfeld einfügen.
741
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Wählen Sie in der Entwurfsansicht das ColdFusion-Formular aus, um den zugehörigen Eigenschafteninspektor
anzuzeigen.
Um das Formular schnell auszuwählen, klicken Sie auf eine beliebige Stelle im Formularrahmen und anschließend
unten im Dokumentfenster auf das
<cfform>-Tag im Tag-Selektor.
2 Weisen Sie im Eigenschafteninspektor des Formulars der Eigenschaft „Format“ den Wert „Flash“ zu.
Das Datumsfeld-Steuerelement kann nur in ColdFusion-Formularen auf Flash-Basis dargestellt werden.
3 Wechseln Sie zur Codeansicht („Ansicht“ > „Code“) und geben Sie das folgende Tag zwischen dem öffnenden und
dem schließenden CFForm-Tag ein:
<cfinput name="datefield" type="datefield">
4 Wechseln Sie zur Entwurfsansicht, wählen Sie das Datumsfeld auf der Seite aus und stellen Sie im
Eigenschafteninspektor die folgenden Optionen ein:
Cfdatefield ermöglicht die Angabe eines eindeutigen Namens für das Steuerelement.
Wert ermöglicht die Angabe des Datums, das im Feld angezeigt werden soll, wenn die Seite das erste Mal in einem
Browser geöffnet wird. Das Datum kann statisch oder dynamisch sein.
Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld „Wert“. Wählen Sie dann
im Dialogfeld „Dynamische Daten“ eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte übergibt einen
Wert an das Datumsfeld, wenn Sie das Formular in einem Browser anzeigen.
Überprüfen gibt den Überprüfungstyp für das Feld an.
Überprüfen bei gibt an, wann das Feld überprüft wird: „onSubmit“, „onBlur“ oder „onServer“.
Beschriftung ermöglicht die Angabe einer Beschriftung für das Feld.
Muster ermöglicht die Angabe eines regulären JavaScript-Ausdrucks zum Überprüfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrägstriche aus. Weitere Informationen enthält die ColdFusion-Dokumentation.
Höhe ermöglicht die Angabe der Steuerelementhöhe in Pixel.
Breite ermöglicht die Angabe der Steuerelementbreite in Pixel.
Größe dient der Angabe der Steuerelementgröße.
Erforderlich ermöglicht die Angabe, ob das Datumsfeld einen Wert enthalten muss, damit das Formular an den Server
gesendet werden kann.
Tag-Editor anzeigen ermöglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgeführt
werden.
More Help topics
“ColdFusion-Formulardaten auswerten” on page 742
ColdFusion-Formularsteuerelemente ändern
Sie können die Eigenschaften von ColdFusion-Formularsteuerelementen in der Entwurfs- und in der Codeansicht
einstellen.
742
VERWENDEN VON DREAMWEAVER
Formulare erstellen
Last updated 10.4.2012
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Wählen Sie in der Entwurfsansicht das Formularsteuerelement auf der Seite aus oder klicken Sie in der Codeansicht
auf eine beliebige Stelle innerhalb des Steuerelement-Tags.
Im Eigenschafteninspektor werden die Eigenschaften des Formularsteuerelements angezeigt.
2 Ändern Sie die Eigenschaften des Steuerelements im Eigenschafteninspektor.
Um weitere Informationen anzuzeigen, klicken Sie auf die Hilfeschaltfläche des Eigenschafteninspektors.
3 Wenn Sie weitere Eigenschaften festlegen möchten, klicken Sie im Eigenschafteninspektor auf die Schaltfläche
„Tag-Editor anzeigen“ und stellen Sie die Eigenschaften im eingeblendeten Tag-Editor ein.
ColdFusion-Formulardaten auswerten
In Dreamweaver können Sie ColdFusion-Formulare erstellen, die den Inhalt der angegebenen Felder daraufhin
überprüfen, ob der Benutzer den richtigen Datentyp verwendet hat.
Note: Diese Erweiterung ist nur verfügbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7
oder eine spätere Version ausgeführt wird.
1 Erstellen Sie ein ColdFusion-Formular, das mindestens ein Eingabefeld und die Schaltfläche „Senden“ enthält.
Beachten Sie, dass jedes ColdFusion-Feld, das Sie auswerten möchten, einen eindeutigen Namen benötigt.
2 Wählen Sie ein auszuwertendes Feld im Formular aus.
3 Geben Sie im Eigenschafteninspektor an, wie das Feld ausgewertet werden soll.
Im unteren Teil der Eigenschafteninspektoren befinden sich Steuerelemente, mit denen Sie Auswertungsregeln
definieren können. Sie können z. B. festlegen, dass ein Textfeld eine Telefonnummer enthalten soll. Wählen Sie zu
diesem Zweck im Popupmenü „Wert“ des Eigenschafteninspektors den Wert „Telefonnummer“ aus. Sie können den
Auswertungszeitpunkt im Popupmenü „Überprüfen bei“ angeben.
743
Last updated 10.4.2012
Chapter 23: Eingabehilfen
Dreamweaver-Eingabehilfen
Einführung in barrierefreie Inhalte
Der Begriff „Barrierefreiheit“ bezieht sich auf die Möglichkeit, Websites und Webprodukte für Menschen mit
beeinträchtigten Seh- und Hörfähigkeiten sowie mit motorischen und anderen Einschränkungen nutzbar zu machen.
Eingabehilfen bei Softwareprodukten und Websites sind z. B. Bildschirmlesegeräte, Textentsprechungen für Grafiken,
spezielle Tastaturbefehle, eine extra kontrastreiche Bildschirmdarstellung usw. Dreamweaver enthält verschiedene
Tools, die die Verwendung des Programms erleichtern, und verfügt über Funktionen, über die die Erstellung von
barrierefreien Inhalten ermöglicht wird.
Wenn Sie als Dreamweaver-Entwickler Eingabehilfen verwenden möchten, finden Sie in der Anwendung spezielle
Tastaturfunktionen sowie die Unterstützung von Bildschirmlesegeräten und von Eingabehilfen für das
Betriebssystem.
Als Webdesigner können Sie in Dreamweaver barrierefreie Seiten mit einem für Bildschirmlesegeräte lesbaren Inhalt
erstellen, die den gesetzlichen Richtlinien entsprechen. So gibt es beispielsweise Dialoge, in denen Sie beim Einfügen
von Seitenelementen zur Eingabe von Attributen für die Barrierefreiheit aufgefordert werden, wie z. B.
Textentsprechungen für ein Bild. Wenn das Bild anschließend für eine Person mit Sehbehinderung auf einer Seite
angezeigt wird, liest das Bildschirmlesegerät die Beschreibung vor.
Note: Weitere Informationen über zwei bedeutende Initiativen zur Barrierefreiheit finden Sie (in englischer Sprache) auf
der Website der World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) sowie in Paragraph 508
des Federal Rehabilitation Act (www.section508.gov).
Kein Authoring-Programm kann jedoch die Entwicklung von Inhalten automatisieren. Um barrierefreie Websites
gestalten zu können, ist es notwendig, sich mit den Bedienbarkeitserfordernissen auseinander zu setzen und im
Verlauf der Arbeit subjektive Entscheidungen bezüglich der Interaktion von Personen mit körperlichen und
kognitiven Einschränkungen mit Webseiten zu treffen. Die beste Art, die Barrierefreiheit einer Website
sicherzustellen, besteht im bewussten Planen, Entwickeln, Testen und Auswerten der entsprechenden Inhalte.
Bildschirmlesegeräte mit Dreamweaver verwenden
Ein Bildschirmlesegerät liest Texte vor, die auf dem Computerbildschirm angezeigt werden. Außerdem liest es
Informationen, die auf dem Bildschirm nicht als Text zu sehen sind, wie etwa Schaltflächenbeschriftungen oder
Bildbeschreibungen, die bei der Erstellung der Anwendung in Form von speziellen Tags oder Attributen bereitgestellt
werden.
Als Dreamweaver-Webdesigner können Sie auch bei der Gestaltung von Webseiten ein Bildschirmlesegerät
verwenden. Das Bildschirmlesegerät beginnt links oben im Dokumentfenster mit dem Vorlesen.
Dreamweaver unterstützt die Bildschirmlesegeräte JAWS for Windows von Freedom Scientific
(www.freedomscientific.com) und Window-Eyes von GW Micro (www.gwmicro.com).
744
VERWENDEN VON DREAMWEAVER
Eingabehilfen
Last updated 10.4.2012
Unterstützung von Eingabehilfen für das Betriebssystem
Dreamweaver unterstützt Eingabehilfen sowohl für Windows als auch für Macintosh. Auf Macintosh-Computern
legen Sie die visuellen Voreinstellungen beispielsweise im Dialogfeld „Bedienungshilfen“ („Apple“ >
„Systemeinstellungen“) fest. Ihre Einstellungen sind im Dreamweaver-Arbeitsbereich aktiviert.
Zudem wird die spezielle hohe Kontrasteinstellung des Windows-Betriebssystems unterstützt. Diese Einstellung kann
in der Windows-Systemsteuerung aktiviert werden und wirkt sich folgendermaßen auf Dreamweaver aus:
• Dialog- und Bedienfelder werden in den systemweit festgelegten Farben angezeigt. Wenn Sie z. B. die Einstellung
„Weiß auf Schwarz“ auswählen, werden alle Dialog- und Bedienfelder in Dreamweaver mit weißem Vordergrund
und schwarzem Hintergrund angezeigt.
• In der Codeansicht werden die System- und Fenstertextfarben verwendet. Wenn Sie beispielsweise als Systemfarbe
„Weiß auf Schwarz“ auswählen und dann die Textfarben unter „Bearbeiten“ > „Voreinstellungen“ > „Farbe für
Code“ ändern, werden diese Farbeinstellungen in Dreamweaver ignoriert und der Codetext wird mit weißem
Vordergrund und schwarzem Hintergrund angezeigt.
• In der Entwurfsansicht werden die Hintergrund- und Textfarben verwendet, die Sie unter „Modifizieren“ >
„Seiteneigenschaften“ festgelegt haben, sodass die Farben auf den erstellten Seiten wie in einem Browser dargestellt
werden.
Arbeitsbereich für barrierefreies Seitenlayout optimieren
Wenn Sie zugängliche Seiten erstellen möchten, müssen Sie die grafischen Objekte auf Ihrer Seite mit
Zusatzinformationen wie Beschriftungen und Beschreibungen versehen, damit die Objekte für alle Benutzer
zugänglich sind.
Aktivieren Sie dazu das Dialogfeld „Eingabehilfen“ für jedes Objekt, damit Sie in Dreamweaver aufgefordert werden,
Informationen zur Barrierefreiheit einzugeben, wenn Sie Objekte einfügen. Sie können ein Dialogfeld für alle Objekte
der Kategorie „Eingabehilfen“ im Dialogfeld „Voreinstellungen“ aktivieren.
1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“
(Macintosh).
2 Wählen Sie links in der Kategorieliste die Option „Eingabehilfen“ aus, wählen Sie ein Objekt aus, legen Sie die
folgenden Optionen fest und klicken Sie auf „OK“.
Beim Einfügen Attribute anzeigen Wählen Sie die Objekte aus, für die Sie Eingabehilfen-Dialogfelder aktivieren
möchten, z. B. Formularobjekte, Frames, Medien oder Bilder.
Beim Öffnen bleibt das Bedienfeld aktiv Das Bedienfeld bleibt aktiv, sodass es mit dem Bildschirmlesegerät gelesen
werden kann. (Wenn Sie diese Option nicht aktivieren, verbleibt der Fokus beim Öffnen eines Bedienfelds auf der
Entwurfs- oder Codeansicht.)
Externe Wiedergabe Aktivieren Sie diese Option bei Verwendung eines Bildschirmlesegeräts.
Note: Im Dialogfeld „Tabelle einfügen“ werden automatisch Eingabehilfen-Attribute angezeigt, wenn Sie eine neue
Tabelle einfügen.
Dreamweaver-Barrierefreiheitsprüfungsbericht
Der Dreamweaver-Barrierefreiheitsprüfungsbericht ist ab Dreamweaver CS5 veraltet.
745
VERWENDEN VON DREAMWEAVER
Eingabehilfen
Last updated 10.4.2012
In Dreamweaver mit der Tastatur navigieren
Auf die Bedienfelder, Inspektoren, Dialogfelder, Frames und Tabellen von Dreamweaver kann auch nur über die
Tastatur und ohne Zuhilfenahme der Maus zugegriffen werden.
Note: Die Navigation mittels Tabulatortaste und Pfeiltasten wird jedoch nur unter Windows unterstützt.
Navigation in Bedienfeldern
1 Drücken Sie im Dokumentfenster die Tasten Strg+F6, um den Fokus auf ein Bedienfeld zu setzen.
Eine gepunktete Linie um die Titelleiste des Bedienfelds gibt an, dass sich das Bedienfeld im Fokus befindet. Die
Bildschirmlesegeräte lesen die Titelleiste des im Fokus befindlichen Bedienfelds.
2 Drücken Sie Strg+F6 erneut, bis das gewünschte Bedienfeld den Fokus erhält. (Mit Strg+Umschalt+F6 wird in das
vorherige Bedienfeld gewechselt.)
3 Wenn das gewünschte Bedienfeld nicht geöffnet ist, rufen Sie mithilfe der Tastaturbefehle im Menü „Fenster“ das
entsprechende Bedienfeld auf. Drücken Sie dann Strg+F6.
Wenn das gewünschte Bedienfeld bereits geöffnet, jedoch nicht erweitert ist, aktivieren Sie die Titelleiste des
Bedienfelds und drücken Sie dann die Leertaste. Durch erneutes Drücken der Leertaste reduzieren Sie das Bedienfeld
wieder.
4 Durch Drücken der Tabulatortaste gelangen Sie im Bedienfeld von einer Option zur nächsten.
5 Verwenden Sie bei Bedarf die Pfeiltasten:
• Wenn eine Option mehrere Wahlmöglichkeiten aufweist, können Sie diese mit den Pfeiltasten durchgehen. Mit der
Leertaste wählen Sie dann die gewünschte Möglichkeit aus.
• Wenn ein Bereich des Bedienfelds Registerkarten aufweist, über die weitere Bedienfelder geöffnet werden können,
setzen Sie den Fokus auf die geöffnete Registerkarte und öffnen Sie dann die anderen Registerkarten mithilfe der
Taste Pfeil-nach-links oder Pfeil-nach-rechts. Nachdem Sie eine neue Registerkarte geöffnet haben, können Sie mit
der Tabulatortaste durch deren Optionen navigieren.
Im Eigenschafteninspektor navigieren
1 Drücken Sie Strg+F3, um den Eigenschafteninspektor anzuzeigen, wenn dieser nicht angezeigt wird.
2 Drücken Sie Strg+F6 (nur Windows), bis der Fokus auf dem Eigenschafteninspektor liegt.
3 Durch Drücken der Tabulatortaste gelangen Sie im Eigenschafteninspektor von einer Option zur nächsten.
4 Gehen Sie mit den entsprechenden Pfeiltasten die verschiedenen Wahlmöglichkeiten einer Option durch.
5 Drücken Sie Strg+Nach-unten/oben (Windows) bzw. Befehlstaste+Nach-unten/oben (Macintosh), um den
erweiterten Bereich des Eigenschafteninspektors nach Bedarf zu öffnen oder zu schließen, oder setzen Sie den
Fokus rechts unten auf den Erweiterungspfeil und drücken Sie die Leertaste.
Note: Der Tastaturfokus muss sich im Eigenschafteninspektor (und nicht auf dem Bedienfeldtitel) befinden, damit das
Erweitern und Reduzieren funktioniert.
In Dialogfeldern navigieren
1 Durch Drücken der Tabulatortaste gelangen Sie im Dialogfeld von einer Option zur nächsten.
2 Mit den Pfeiltasten können Sie die einzelnen Wahlmöglichkeiten einer Option durchgehen.
3 Weist ein Dialogfeld eine Kategorienliste auf, drücken Sie Strg+Tab, um den Fokus auf die Kategorienliste zu
setzen. Durchlaufen Sie die Liste dann mit den Pfeiltasten nach oben oder unten.
4 Drücken Sie Strg+Tab erneut, um in die Optionen einer Kategorie zu wechseln.
746
VERWENDEN VON DREAMWEAVER
Eingabehilfen
Last updated 10.4.2012
5 Drücken Sie die Eingabetaste, um das Dialogfeld zu schließen.
In Frames navigieren
❖ Wenn Ihr Dokument Frames enthält, können Sie den Fokus mit den Pfeiltasten auf einen bestimmten Frame
setzen.
Frames auswählen
1 Mit Alt+Pfeil-nach-unten setzen Sie die Einfügemarke in das Dokumentfenster.
2 Drücken Sie Alt+Pfeil-nach-oben, um den Frame auszuwählen, der sich gerade im Fokus befindet.
3 Durch wiederholtes Drücken von Alt+Pfeil-nach-oben setzen Sie den Fokus auf das Frameset und – bei
verschachtelten Framesets – schließlich auf das übergeordnete Frameset.
4 Mit Alt+Pfeil-nach-unten setzen Sie den Fokus auf ein untergeordnetes Frameset bzw. auf einen einzelnen Frame
in einem Frameset.
5 Wenn der Fokus auf einem einzelnen Frame liegt, gelangen Sie mit Alt+Pfeil-nach-links bzw. Alt+Pfeil-nach-
rechts zum jeweils nächsten Frame.
In Tabellen navigieren
1 Mit den Pfeiltasten oder mit der Tabulatortaste gelangen Sie von einer Zelle zur nächsten.
Wenn Sie in der äußersten rechten Zelle die Tabulatortaste drücken, wird eine neue Zeile in die Tabelle eingefügt.
2 Zum Auswählen einer Zelle drücken Sie Strg+A (nur in Windows), während sich die Einfügemarke in der Zelle
befindet.
3 Wenn Sie die gesamte Tabelle auswählen möchten, drücken Sie die Tasten Strg+A zweimal, wenn sich die
Einfügemarke in einer Zelle befindet, oder einmal, wenn eine Zelle ausgewählt ist.
4 Wenn Sie eine Tabelle schließen möchten, drücken Sie die Tasten Strg+A dreimal, wenn sich die Einfügemarke in
einer Zelle befindet, zweimal, wenn die Zelle ausgewählt ist, und einmal, wenn die Tabelle ausgewählt ist. Drücken
Sie dann Pfeil-nach-oben, Pfeil-nach-links oder Pfeil-nach-rechts.
… 7 …

Hulp nodig? Stel uw vraag in het forum

Spelregels

Misbruik melden

Gebruikershandleiding.com neemt misbruik van zijn services uitermate serieus. U kunt hieronder aangeven waarom deze vraag ongepast is. Wij controleren de vraag en zonodig wordt deze verwijderd.

Product:

Bijvoorbeeld antisemitische inhoud, racistische inhoud, of materiaal dat gewelddadige fysieke handelingen tot gevolg kan hebben.

Bijvoorbeeld een creditcardnummer, een persoonlijk identificatienummer, of een geheim adres. E-mailadressen en volledige namen worden niet als privégegevens beschouwd.

Spelregels forum

Om tot zinvolle vragen te komen hanteren wij de volgende spelregels:

Belangrijk! Als er een antwoord wordt gegeven op uw vraag, dan is het voor de gever van het antwoord nuttig om te weten als u er wel (of niet) mee geholpen bent! Wij vragen u dus ook te reageren op een antwoord.

Belangrijk! Antwoorden worden ook per e-mail naar abonnees gestuurd. Laat uw emailadres achter op deze site, zodat u op de hoogte blijft. U krijgt dan ook andere vragen en antwoorden te zien.

Abonneren

Abonneer u voor het ontvangen van emails voor uw Adobe DREAMWEAVER CS5 bij:


U ontvangt een email met instructies om u voor één of beide opties in te schrijven.


Ontvang uw handleiding per email

Vul uw emailadres in en ontvang de handleiding van Adobe DREAMWEAVER CS5 in de taal/talen: Duits als bijlage per email.

De handleiding is 19,02 mb groot.

 

U ontvangt de handleiding per email binnen enkele minuten. Als u geen email heeft ontvangen, dan heeft u waarschijnlijk een verkeerd emailadres ingevuld of is uw mailbox te vol. Daarnaast kan het zijn dat uw internetprovider een maximum heeft aan de grootte per email. Omdat hier een handleiding wordt meegestuurd, kan het voorkomen dat de email groter is dan toegestaan bij uw provider.

Stel vragen via chat aan uw handleiding

Stel uw vraag over deze PDF

Andere handleiding(en) van Adobe DREAMWEAVER CS5

Adobe DREAMWEAVER CS5 Gebruiksaanwijzing - Nederlands - 725 pagina's

Adobe DREAMWEAVER CS5 Gebruiksaanwijzing - English - 661 pagina's


Uw handleiding is per email verstuurd. Controleer uw email

Als u niet binnen een kwartier uw email met handleiding ontvangen heeft, kan het zijn dat u een verkeerd emailadres heeft ingevuld of dat uw emailprovider een maximum grootte per email heeft ingesteld die kleiner is dan de grootte van de handleiding.

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

Controleer uw email en volg de aanwijzingen op om uw inschrijving definitief te maken

U heeft geen emailadres opgegeven

Als u de handleiding per email wilt ontvangen, vul dan een geldig emailadres in.

Uw vraag is op deze pagina toegevoegd

Wilt u een email ontvangen bij een antwoord en/of nieuwe vragen? Vul dan hier uw emailadres in.



Info