618541
626
Zoom out
Zoom in
Previous page
1/731
Next page
Juni 2014
Einige der Links verweisen auf englische Seiten.
Adobe® Dreamweaver® CC-Hilfe
Neue Funktionen
1
Überblick über die neuen Funktionen
Dreamweaver CC, Version 2014
Nach oben
Die neue Version von Dreamweaver CC, Version 2014, bietet verschiedene Verbesserungen bei der Live-Ansicht und dem CSS Designer, die das
Erstellen und Aktualisieren von Inhalten für das Web und mobile Geräte erleichtern. Die neue Elementschnellansicht erlaubt die schnelle Anzeige,
Navigation und Bearbeitung des HTML-Codes.
In diesem Artikel werden diese neuen Funktionen und einige weitere Verbesserungen vorgestellt. Außerdem finden Sie hier Links zu weiteren
Hilfe- und Trainingsressourcen.
Neue Funktionen und Änderungen
Elementschnellansicht
Neue Bearbeitungsfunktionen in der Live-Ansicht
Einfügen in die Live-Ansicht
Verbesserungen am CSS Designer
Unterstützung für SFTP-Verbindungen mit Identitätsdatei
Verbesserungen an der Funktion „Rückgängig/Wiederherstellen“
Änderungen an Business Catalyst- und PhoneGap Build-Arbeitsabläufen
Änderungen am Zugriff auf Erweiterungen für Dreamweaver
Änderungen an den Synchronisationseinstellungen
Senden von Bugs/Funktionsanforderungen direkt aus Dreamweaver
Help Center
Änderungen am Menü „Hilfe“
Elementschnellansicht
In der neuen Elementschnellansicht können Sie die Markups in Ihrem Dokument überprüfen. Die Elementschnellansicht besteht aus einer
interaktiven HTML-Baumstruktur mit den aktuellen statischen und dynamischen Inhalten. Die Struktur des statischen Inhalts lässt sich direkt im
HTML-Baum ändern.
Elementschnellansicht
2
Nach oben
Die Elementschnellansicht („Ansicht“ > „Elementschnellansicht“) wurde eingeführt, um den Entwicklungsprozess zu beschleunigen. In früheren
Versionen von Dreamweaver mussten Sie die HTML-Elemente in der Live-Ansicht markieren, dann in die Codeansicht wechseln und die Elemente
dort bearbeiten. Nach der Bearbeitung mussten Sie wieder in die Live-Ansicht wechseln, um eine Vorschau der Änderungen anzuzeigen. In der
Elementschnellansicht können Sie jetzt alle Elemente auf Ihrer Seite in einer einzigen, übersichtlichen Ansicht darstellen und statischen Inhalt
direkt aus dieser Ansicht heraus bearbeiten.
Weitere Informationen finden Sie unter Elementschnellansicht.
Neue Bearbeitungsfunktionen in der Live-Ansicht
Überprüfen und ändern Sie die Eigenschaften der HTML-Elemente direkt in der Live-Ansicht und sehen Sie das Resultat, ohne die Ansicht
aktualisieren zu müssen.
Schnellansicht-Eigenschafteninspektor
Elementanzeige
Live-Textbearbeitung
Live-Ansicht-Eigenschafteninspektor
Schnellansicht-Eigenschafteninspektor
In der Live-Ansicht wird jetzt ein Schnellansicht-Eigenschafteninspektor für HTML-Elemente auf Ihren Seiten angezeigt. Mit dem Schnellansicht-
Eigenschafteninspektor können Sie Attribute und Text des ausgewählten HTML-Elements direkt in der Live-Ansicht bearbeiten.
Schnellansicht-Eigenschafteninspektor zum Bearbeiten von Bildattributen
Schnellansicht-Eigenschafteninspektor zum Formatieren von Text
Weitere Informationen finden Sie unter Schnellansicht-Eigenschafteninspektor.
Elementanzeige
Mit der neuen Elementanzeige können Sie HTML-Elementen direkt in der Live-Ansicht Klassen und IDs zuweisen. Die verfügbaren Klassen und
IDs werden in der Elementanzeige als Hinweise angegeben, damit Sie die benötigte Option ganz einfach auswählen können.
3
Nach oben
Elementanzeige zum Bearbeiten von Klassen und IDs
Weitere Informationen finden Sie unter HTML-Elemente mit Klassen und IDs verknüpfen.
Live-Textbearbeitung
Sie können Text jetzt direkt in der Live-Ansicht bearbeiten und die Änderungen in einer Vorschau anzeigen, ohne zwischen verschiedenen
Ansichten wechseln zu müssen.
Doppelklicken Sie in der Live-Ansicht auf das Textelement, um in den Bearbeitungsmodus zu wechseln. Weitere Informationen finden Sie unter
Text direkt in der Live-Ansicht bearbeiten.
Text direkt in der Live-Ansicht bearbeiten
Live-Ansicht-Eigenschafteninspektor
In der Live-Ansicht steht Ihnen jetzt ein Eigenschafteninspektor zur Verfügung, um schnell Änderungen an der Seite vorzunehmen, ohne zur
Entwurfs- oder Codeansicht wechseln zu müssen.
Weitere Informationen finden Sie unter Live-Ansicht-Eigenschafteninspektor.
Live-Ansicht-Eigenschafteninspektor
Einfügen in die Live-Ansicht
4
Nach oben
In dieser Version können Sie über das Bedienfeld „Einfügen“ HTML-Elemente direkt in der Live-Ansicht hinzufügen. Die Elemente werden in
Echtzeit eingefügt, ohne dass Sie den Modus wechseln müssen. Sie können die Änderungen auch sofort in der Vorschau anzeigen.
Weitere Informationen finden Sie unter Elemente direkt in die Live-Ansicht einfügen.
Mit Drag & Drop aus dem Bedienfeld „Einfügen“ in die Live-Ansicht ziehen
Verbesserungen am CSS Designer
Verbesserte Benutzeroberfläche zur Einstellung von Rahmeneigenschaften
In einem neuen Steuerelement mit mehreren Registerkarten können Sie auf einfache und intuitive Weise die Eigenschaften aller vier Rahmen
festlegen.
Da die Eigenschaften auf fünf Registerkarten aufgeteilt sind, werden weniger Werte auf einmal angezeigt, so dass Sie den Überblick
behalten.
Intuitive und benutzerfreundliche Symbole, die auch Anfänger verstehen.
Zwei Symbole kennzeichnen nicht eingestellte/gelöschte und deaktivierte Eigenschaften.
Eine spezielle Registerkarte für „Alle Seiten“, um die Eigenschaften aller vier Rahmenseiten gleichzeitig einzustellen.
Eine berechneten Zeile weist Sie beim Überprüfen auf die für Sie am besten geeignete Registerkarte hin.
Rahmeneigenschaften vor Dreamweaver CC 2014
5
Rahmeneigenschaften in Dreamweaver CC 2014
Weitere Informationen finden Sie unter Festlegen der Rahmeneigenschaften.
Kopieren und Einfügen von Stilen
Sie können Stile jetzt aus einem Selektor kopieren und in einen anderen einfügen. Sie können alle Stile kopieren oder nur bestimmte
Stilkategorien wie Layout, Text und Rahmen.
Klicken Sie mit der rechten Maustaste auf den Selektor und wählen Sie eine der folgenden Optionen:
Stile mit dem CSS Designer kopieren
Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert.
„Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“ ist jedoch
verfügbar.
Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die
Gesamtmenge aller Selektoren eingefügt.
Kopieren und Einfügen von Stilen funktioniert auch bei unterschiedlichen Verknüpfungen von CSS-Dateien – (Import, Verknüpfung, Inline-
Stile).
Schnellbearbeitungs-Textfelder
Dreamweaver verfügt jetzt über Schnellbearbeitungs-Textfelder, in denen Sie Kurzschriftcodes für Eigenschaften wie Rand, Auffüllung, Rahmen
und Rahmenradius angeben können. Diese Änderung wurde für Benutzer geschaffen, die beim Festlegen von Eigenschaften lieber Code festlegen
als die Maus oder Tastatur zu verwenden.
6
Verbesserungen im Arbeitsablauf für benutzerdefinierte Eigenschaften
Früher mussten Sie im Eigenschaftenfenster des CSS Designers auf „+“ klicken, um andere (oder benutzerdefinierte) Eigenschaften hinzuzufügen.
Nun stehen gleich am Ende der Eigenschaftenliste zwei Textfelder – für den Namen und Wert – zur Verfügung. Direkt in diese Textfelder können
Sie den Namen und Wert einer Eigenschaft eingeben, ohne erst auf „+“ klicken zu müssen.
Um eine weitere Zeile für eine benutzerdefinierte Eigenschaft hinzuzufügen, drücken Sie jeweils die Tabulatortaste.
Der Name der Eigenschaftengruppe „Andere“ wurde in „Benutzerdefiniert“ geändert.
Tastaturbefehle
7
Sie können jetzt mithilfe von Tastaturbefehlen CSS-Selektoren und Eigenschaften hinzufügen oder löschen. Die nachfolgende Tabelle beschreibt,
wie Sie zwischen den Eigenschaftsgruppen im Eigenschaftenfester navigieren.
Mehr/weniger Selektordetails
Ab dieser Version unterstützt Dreamweaver beim Hinzufügen eines Selektors bis zu drei Regelhinweise. Mithilfe der Nach-oben- und Nach-unten-
Taste können Sie mehr oder weniger Details zu einer Regel einblenden.
Mehr/weniger Selektordetails
Bildlauf zur Kategorie
Wenn Sie früher im Eigenschaftenfenster des CSS Designers auf die Kategorie „Hintergrund“ oder „Andere“ geklickt haben, wurden diese
Kategorien zwar ins Fenster „geladen“, aber nicht im oberen Teil des Fensters angezeigt.
Jetzt werden die Kategorien „Hintergrund“ und „Andere“ (bzw. jetzt „Benutzerdefiniert“) oben im Fenster angezeigt, wenn Sie darauf klicken.
Tastaturbefehl Arbeitsablauf
Strg+Alt+[Umschalt =] Fügt einen Selektor hinzu (wenn der Selektorenbereich aktiv ist)
Strg+Alt+S Fügt einen Selektor hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Strg+Alt+[Umschalt =] Fügt eine Eigenschaft hinzu (wenn der Eigenschaftenbereich
aktiv ist)
Strg+Alt+P Fügt eine Eigenschaft hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Auswählen + Löschen Ist ein Selektor ausgewählt, wird dieser gelöscht
Strg+Alt+(BildAuf/BildAb) Wechseln zwischen Bereichen – während Sie sich im
Eigenschaftenfenster befinden
8
Nach oben
Hinweis:
Nach oben
Hinweis:
Nach oben
Unterstützung für SFTP-Verbindungen mit Identitätsdatei
Sie können Verbindungen zu einem SFTP-Server jetzt anhand eines „Identitätsschlüssels“ (mit oder ohne Passphrase) authentifizieren.
Dreamweaver unterstützt nur OpenSSH-Schlüsseldateien.
Weitere Informationen finden Sie unter SFTP-Verbindungen.
Verbesserungen an der Funktion „Rückgängig/Wiederherstellen“
Wenn Sie bisher einen im CSS Designer vorgenommenen Arbeitsschritt rückgängig machen oder wiederherstellen wollten, mussten Sie (in den
zugehörigen Dateien) auf die CSS-Datei klicken und dann den Vorgang rückgängig machen bzw. wiederherstellen.
Mit den neuen Verbesserungen beim Rückgängig machen/Wiederherstellen können Sie einem Vorgang direkt von der Live-Ansicht eines
Dokuments oder vom CSS Designer aus rückgängig machen bzw. wiederholen. Diese Änderungen werden anschließend automatisch in der
entsprechenden CSS-Datei widergespiegelt. Um Sie darüber zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der
betroffenen Datei für einige Zeit (ca. 8 Sekunden lang) hervorgehoben.
Wenn Sie einen Vorgang vom Bedienfeld „CSS Designer“ aus rückgängig machen oder wiederherstellen, wird die Live-Ansicht automatisch
aktualisiert.
Wenn Sie das Dokument anhand des Quellcodes bearbeiten und die Änderungen von der Live-Ansicht aus rückgängig machen, wird die
geteilte Ansicht angezeigt und der zugehörige Quellcode erhält den Fokus.
Alle Rückgängig/Wiederherstellen-Vorgänge werden auf HTML-Datei-Ebene aufgezeichnet. Das heißt, jede manuelle Änderung an einer CSS-
Datei kann von JEDER zugehörigen Datei aus rückgängig gemacht werden. Stellen Sie sich beispielsweise vor, dass die Dateien „style1.css“ und
„style2.css“ zur HTML-Datei „index.html“ gehören. Wenn Sie nun Stile für „.h1“ in „style1.css“ einfügen und dann von „style2.css“ aus die Option
„Rückgängig“ wählen, wird der Stil „.h1“ aus „style1.css“ gelöscht.
Um Änderungen in JavaScript-Dateien rückgängig zu machen/wiederherzustellen, müssen Sie in die entsprechende JS-Datei wechseln
und dann „Rückgängig“/„Wiederherstellen“ wählen.
Änderungen an Business Catalyst- und PhoneGap Build-Arbeitsabläufen
Business Catalyst und PhoneGap Build sind jetzt als Zusatzprogramme zu Dreamweaver verfügbar. Sie müssen zunächst Business Catalyst und
PhoneGap Build als Erweiterungen installieren. Anschließend können Sie diese Dienste wie gewohnt verwenden.
Um die Business Catalyst- und PhoneGap Build-Erweiterungen zu installieren, wählen Sie „Verwalten“ > „Zusatzprogramme durchsuchen“, suchen
nach den Erweiterungen und installieren sie.
9
Nach oben
Nach oben
Siehe auch:
Dreamweaver-Business Catalyst-Integration
Verpacken von Anwendungen für Mobilgeräte mit PhoneGap Build
Änderungen am Zugriff auf Erweiterungen für Dreamweaver
Sie können Dreamweaver-Erweiterungen jetzt über die Adobe Creative Cloud anzeigen und installieren. Erweiterungen werden jetzt als
„Zusatzprogramme“ bezeichnet.
Um in der Adobe Creative Cloud nach Zusatzprogrammen zu suchen, klicken Sie in Dreamweaver auf „Fenster“ > „Zusatzprogramme
durchsuchen“. Die Adobe Creative Cloud-Seite für Zusatzprogramme wird angezeigt.
„Fenster“ > „Erweiterungen“ in Dreamweaver CC 13.0
„Fenster“ > „Zusatzprogramme durchsuchen“ in Dreamweaver CC 2014
Weitere Informationen zum Installieren der Zusatzprogramme finden Sie unter Zusatzprogramme.
Änderungen an den Synchronisationseinstellungen
10
Nach oben
Nach oben
Die Funktion für die Synchronisation von Einstellungen in Dreamweaver ermöglicht es Ihnen, Ihre Einstellungen mit Dreamweaver-Instanzen auf
Ihren Computern und mit der Creative Cloud zu synchronisieren. Dreamweaver CC 2014 erkennt automatisch, wenn Sie die
Synchronisationseinstellungen in der Vorversion von Dreamweaver aktiviert hatten, sodass Sie diese Einstellungen aus der Creative Cloud
importieren können.
Wenn Sie Dreamweaver CC 2014 nach der Installation zum ersten Mal starten, wird das folgende Dialogfeld angezeigt:
Synchronisationseinstellungen importieren
Zum Importieren in der Creative Cloud gespeicherter Einstellungen klicken Sie auf Synchr.einst. importieren.
Hinweis: Diese Option ist später nicht mehr verfügbar.
Wenn Sie die Einstellungen in der aktuellen Dreamweaver-Instanz mit der Creative Cloud synchronisieren möchten, klicken Sie auf Lokal
syn.
Damit die Einstellungen in Zukunft automatisch synchronisiert werden, wählen Sie Einstellungen immer automatisch synchronisieren.
Zum Anzeigen der erweiterten Optionen für die Synchronisationseinstellungen klicken Sie auf Erweitert.
Verwandter Artikel:
Synchronisieren von Dreamweaver-Einstellungen mit der Creative Cloud
Senden von Bugs/Funktionsanforderungen direkt aus Dreamweaver
Sie können jetzt direkt aus Dreamweaver über „Hilfe“ > „Bug senden/Funktionsanforderung“ auf Formulare zugreifen, mit denen Sie Vorschläge
einreichen und Fehler melden können.
„Bug senden/Funktionsanforderung“ im Menü „Hilfe“
Help Center
Lernen Sie im neuen Help Center, wie Sie die neuen Funktionen verwenden und wie Sie häufige Aufgaben in Dreamweaver am besten angehen.
Im Gegensatz zu früheren Versionen können Sie jetzt neue Funktionen und effektive Arbeitsabläufe in Dreamweaver gleich beim ersten Start des
Programms entdecken. Sie können den Kurzüberblick über die neuen Funktionen überspringen oder die integrierten Hilfemeldungen jederzeit
deaktivieren. Bei Bedarf können Sie sie wieder aktivieren.
Übersicht über die neuen Funktionen
Integrierte Meldungen
In-Produkt-Meldungen
Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen
Übersicht über die neuen Funktionen
Dreamweaver enthält jetzt eine Kurzübersicht über neue Funktionen, die zum Lieferumfang der neuesten Version gehört.
11
Zusätzlich zu einer Einführung in die neuen Funktionen führt Sie diese Übersicht auch zu einer Videogalerie,
in der Sie die neuen Funktionen in Aktion erleben können.
Diese Übersicht über die neuen Funktionen können Sie schon beim Start von
Dreamweaver aufrufen. Sie können die Übersicht auch überspringen und
Ihre Arbeit vom Begrüßungsbildschirm aus fortsetzen.
Hinweis: Die Übersicht über die neuen Funktionen wird angezeigt, wenn Sie
Dreamweaver installieren oder aktualisieren oder wenn Sie Voreinstellungen löschen und Dreamweaver neu starten.
Überblick über die neuen Funktionen
Es folgt eine Zusammenfassung dessen, was in der Übersicht über die neuen Funktionen angezeigt wird:
Begrüßungsmeldung. Sie werden zudem aufgefordert anzugeben, ob Sie bereits mit Dreamweaver CC gearbeitet haben, damit die Übersicht
entsprechend angepasst werden kann.
Einführung in die einzelnen Funktionen und eine kurze Beschreibung (sowie die Möglichkeit, die Einführung zu überspringen).
Videogalerie mit Videos, die mit den neuen Funktionen zusammenhängen.
Videogalerie
Am Ende der Übersicht wird die Videogalerie angezeigt. Diese enthält Videos,
die mit den neuen Funktionen zusammenhängen. Wenn Sie Ihre Maus über die Miniaturen halten, wird eine kurze Beschreibung des jeweiligen
Videos eingeblendet.
12
Hinweis:
Videogalerie
Sie können die Übersicht über die neuen Funktionen und die Videogalerie jederzeit von
Dreamweaver heraus aufrufen. Dazu wählen Sie im Menü „Hilfe“ oder auf dem Begrüßungsbildschirm die entsprechende Option.
Integrierte Meldungen
Dreamweaver gibt Ihnen jetzt Tipps, wie Sie Ihre Produktivität steigern können, während Sie an Ihren Projekten arbeiten.
Diese Tipps sollen Ihnen helfen, die Aufgabe, die Sie gerade ausführen, auf effizientere Weise durchzuführen.
Die Tipps erscheinen aufgrund bestimmter „Auslöser“ in Dreamweaver. Wenn Sie beispielsweise auf Tag-Selektoren in einer Ansicht klicken oder
mit der rechten Maustaste auf ein Element klicken, um es zu überprüfen, erscheint ein Tipp zur Arbeit mit der Elementschnellansicht.
Die Elementschnellansicht ist eine brandneue Funktion, mit der Sie HTML-Markup leichter anzeigen und bearbeiten können als mit den anderen
Methoden (den Auslösern).
Wenn Sie einmal gemäß einer Empfehlung gehandelt haben, wird die integrierte Meldung für diesen
Auslöser nicht mehr angezeigt. Die Tipps zu den anderen Auslösern werden jedoch noch angezeigt.
Sie können die Anzeige dieser integrierten Meldungen in den Voreinstellungen deaktivieren. Weitere
Informationen finden Sie unter Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen.
Beispiele für integrierte Meldungen:
Elementschnellansicht
Auslöser:
Klick auf Tag-Selektoren (in allen Ansichten)
Live + Prüfmodus oder Rechtsklick + Auswahl von Überprüfen
Meldung:
13
Hinweis:
Live-Ansicht-Eigenschafteninspektor für Klassen und IDs
Auslöser:
Bearbeiten einer ID im Eigenschafteninspektor der Entwurfsansicht
Meldung:
In-Produkt-Meldungen
Dreamweaver integriert sich nahtlos in viele andere Anwendungen der Creative Cloud und In-Produkt-Meldungen stellen Ihnen solche integrativen
Arbeitsabläufe vor.
Wenn Sie diese
Arbeitsabläufe verwenden, können Sie die Adobe Creative Cloud und ihre Angebote besser nutzen.
In-Produkt-Meldungen werden aufgrund identifizierter „Auslöser“ angezeigt. Wenn Sie beispielsweise
versuchen, CSS-Übergänge zu verwenden, so wird von der In-Produkt-Meldung der Edge Animate-Arbeitsablauf vorgeschlagen.
Eine In-Produkt-Meldung enthält eine kurze Beschreibung des alternativen (oder besseren) Arbeitsablaufs, den Sie in einem bestimmten Szenario
verwenden können.
Sie enthält auch eine Video-Miniaturansicht, auf die Sie klicken können, um ein Video anzuzeigen, das den Arbeitsablauf erläutert.
Die Schaltfläche „Weitere Informationen“ verweist Sie auf einen Artikel/Blog, der weiterführende Informationen enthält.
In-Produkt-Meldungen werden nur einmal angezeigt, wenn der identifizierte Auslöser auftritt.
Sollen die Meldungen wieder angezeigt werden, können Sie sie in den Voreinstellungen
zurücksetzen. Weitere Informationen finden Sie unter Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen.
Beispiele für In-Produkt-Meldungen:
Edge Animate
Auslöser:
Klick auf CSS-Übergang und anschließend Klick auf +
Meldung:
Parfait
Auslöser:
Einfügen eines Bilds > Bearbeiten der Bildeinstellungen
Meldung:
14
Nach oben
Deaktivieren oder Zurücksetzen von integrierten Meldungen und In-Produkt-Meldungen
Wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Eingabehilfen“ und gehen Sie vor wie folgt:
Um die Meldungen zu deaktivieren, deaktivieren Sie das Kontrollkästchen „Integrierte Hilfe anzeigen“.
Wenn Sie die Meldungen wieder aktivieren, werden die zuvor angezeigten Meldungen nicht mehr angezeigt.
Nur die Meldungen, die zuvor noch nicht angezeigt worden sind, werden angezeigt.
Damit auch die zuvor angezeigten Meldungen noch einmal angezeigt werden, klicken Sie auf Zurücksetzen.
Voreinstellung für das Deaktivieren/Zurücksetzen integrierter Meldungen
Änderungen am Menü „Hilfe“
Das Menü „Hilfe“ wurde neu strukturiert, um den schnellen Zugriff auf Übersicht über die neuen Funktionen, die Videogalerie, die Hilfe und
Trainingsressourcen sowie Formulare zum Einreichen von Vorschlägen und Melden von Fehlern zu ermöglichen.
15
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Menü „Hilfe“ bis Dreamweaver CC 2014
Menü „Hilfe“ in Dreamweaver CC 2014
16
Arbeitsbereich und Arbeitsabläufe
17
Arbeitsablauf und Arbeitsbereich in Dreamweaver
Nach oben
Überblick über den Dreamweaver-Arbeitsablauf
Arbeitsbereichlayout
Überblick über Arbeitsbereichselemente
Überblick über das Dokumentfenster
Überblick über die Dokumentsymbolleiste
Überblick über die Standardsymbolleiste
Überblick über die Symbolleiste „Browser-Navigation“
Überblick über die Code-Symbolleiste
Überblick über die Statusleiste
Überblick über den Eigenschafteninspektor
Überblick über das Bedienfeld „Einfügen“
Überblick über das Bedienfeld „Dateien“
CSS Designer
Visuelle Hilfsmittel
Überblick über den Dreamweaver-Arbeitsablauf
Für die Erstellung von Websites stehen verschiedene Methoden zur Verfügung, darunter der nachfolgend angeführte 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. (Weitere Informationen finden Sie unter Dreamweaver-Sites.)
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 und Verwalten von Elementen und Bibliotheken.)
Webseiten-Layout gestalten
Wählen Sie das von Ihnen bevorzugte Layoutverfahren oder verwenden Sie eine Kombination aus Dreamweaver-Layoutoptionen, um Ihr
Seitenlayout zu gestalten. Als Ausgangspunkt können Sie die fließenden Rasterlayouts oder Standardvorlagen von Dreamweaver verwenden. Sie
können aufbauend auf einer Dreamweaver-Vorlage neue Seiten erstellen und deren Layout anschließend automatisch aktualisieren, wenn sich die
Vorlage ändert. Wenn in einem Webbrowser mehrere Elemente gleichzeitig angezeigt werden sollen, können Sie das Dokument-Layout mithilfe
von Frames erstellen. (Weitere Informationen finden Sie unter Erstellen von Seiten mit CSS und Gestalten von Seitenlayouts mit HTML.)
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. Außerdem bietet Dreamweaver Werkzeuge zur Maximierung der
Website-Performance und zum Testen der Kompatibilität von Webseiten mit unterschiedlichen Webbrowsern. (Siehe dazu den Abschnitt Einfügen
von Inhalt in Seiten.)
Seiten durch manuelle Kodierung erstellen
Sie können Webseiten auch selbst kodieren. 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 Arbeiten mit Seitencode.)
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
®
®
18
Nach oben
Nach oben
Hinweis:
Begrüßungsbildschirm
Anwendungsleiste
Dokumentsymbolleiste
Sites vorbereiten.)
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. (Siehe dazu den Abschnitt Erstellen dynamischer Seiten.)
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.)
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.
Dreamweaver-Arbeitsbereich
A. Dokument (Symbolleiste) B. Anwendungsleiste C. Dokumentfenster D. Arbeitsbereichumschalter E. Bedienfeldgruppen F. Bedienfeld
„Dateien“ G. Eigenschafteninspektor H. Tag-Selektor
Überblick über Arbeitsbereichselemente
Der Arbeitsbereich enthält die folgenden Elemente:
Dreamweaver enthält viele weitere Bedienfelder, Inspektoren und Fenster. Die Bedienfelder, Inspektoren und Fenster werden über das
Menü „Fenster“ geöffnet.
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 sich eine Tour durch das Produkt ansehen
oder das Training und die Hilfethemen nutzen.
befindet sich am oberen Rand des Anwendungsfensters und enthält einen Arbeitsbereichumschalter, verschiedene Menüs
(nur unter Windows) und weitere Anwendungssteuerelemente.
enthält Schaltflächen, mit denen Sie verschiedene Ansichten des Dokumentfensters (etwa die Entwurfsansicht oder die
Codeansicht), diverse Ansichtsoptionen und häufig verwendete Vorgänge (z. B. Anzeigen einer Vorschau im Browser) aufrufen können.
19
Standardsymbolleiste
Code-Symbolleiste
Dokumentfenster
Eigenschafteninspektor
Tag-Selektor
Bedienfelder
Bedienfeld „Einfügen“
Bedienfeld „Dateien“
Nach oben
Entwurfsansicht
Codeansicht
Geteilte Codeansicht
Code- und Entwurfsansicht
Live-Ansicht
Live-Codeansicht
Nach oben
wird mit „Ansicht“ > „Symbolleisten“ > „Standard“ angezeigt. Sie 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“.
wird nur in der Codeansicht angezeigt. Sie enthält Schaltflächen für zahlreiche Standardkodieroperationen.
zeigt die Dokumente an, während Sie sie erstellen und bearbeiten.
dient zum Anzeigen und Ändern diverser Eigenschaften eines ausgewählten Seiten- oder Textobjekts. Jedes Objekt
verfügt über spezifische Eigenschaften.
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.
ermöglichen das Überprüfen Ihrer Arbeit und das Durchführen von Änderungen. Beispiele sind das Bedienfeld „Einfügen“, das
Bedienfeld „CSS Designer“ und das Bedienfeld „Dateien“. Sie können ein Bedienfeld erweitern, indem Sie auf den entsprechenden Registerreiter
doppelklicken.
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.
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 anderen Dateien auf Ihrer lokalen Festplatte zugreifen.
Überblick über das Dokumentfenster
Im Dokumentfenster wird das aktuelle Dokument angezeigt. Um zu einem Dokument zu wechseln, klicken Sie auf die entsprechende
Registerkarte.
Folgende Ansichten stehen zur Auswahl:
(„Ansicht“ > „Entwurf“) Eine Entwurfsumgebung für grafisches Seitenlayout, grafisches Bearbeiten und schnelle
Anwendungsentwicklung. In dieser Ansicht kann das Dokument vollständig in Dreamweaver bearbeitet werden und wird grafisch ähnlich der
Darstellung in einem Browser angezeigt.
(„Ansicht“ > „Code“) Eine Umgebung zum manuellen Verfassen und Bearbeiten von HTML-, JavaScript- und sonstigem Code.
(„Ansicht“ > „Codeteilung“) Eine geteilte Version der Codeansicht, in der Sie Bildläufe durchführen können, um gleichzeitig
verschiedene Abschnitte eines Dokuments zu bearbeiten.
(„Ansicht“ > „Code und Entwurf“) Ermöglicht es, sowohl die Codeansicht als auch die Entwurfsansicht eines
Dokuments in einem Fenster anzuzeigen.
(„Ansicht“ > „Live-Ansicht“) Die Live-Ansicht ähnelt der Entwurfsansicht, bietet jedoch eine realistischere Darstellung, wie Ihr
Dokument in einem Browser aussehen wird. Sie können mit dem Dokument genauso wie in einem Browser interagieren. Sie können HTML-
Elemente direkt in der Live-Ansicht bearbeiten und Ihre Änderungen in der gleichen Ansicht sofort in der Vorschau sehen. Weitere Informationen
zur Bearbeitung in der Live-Ansicht finden Sie unter Bearbeiten von HTML-Elementen in der Live-Ansicht.
(„Ansicht“ > „Live-Code“) 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.
Darüber hinaus wird in Dreamweaver 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.
Ü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.
20
Codeansicht anzeigen
Code- und Entwurfsansicht anzeigen
Entwurfsansicht anzeigen
Live-Ansicht
Vorschau/Debug im Browser
Dateiverwaltung
Dokumenttitel
Nach oben
Nach oben
Nach oben
Dokumentsymbolleiste
A. Codeansicht anzeigen B. Code- und Entwurfsansicht anzeigen C. Entwurfsansicht zeigen D. Live-Ansicht E. Vorschau/Debug im Browser F.
Dokumenttitel G. Dateiverwaltung
Dokumentsymbolleiste für Dokumente mit fließendem Rasterlayout
A. Codeansicht anzeigen B. Code- und Entwurfsansicht anzeigen C. Entwurfsansicht zeigen D. Live-Ansicht E. Vorschau/Debug im Browser F.
Dokumenttitel G. Dateiverwaltung H. Fließende Raster ein-/ausblenden
In der Dokumentsymbolleiste werden die folgenden Optionen angezeigt:
zeigt ausschließlich die Codeansicht im Dokumentfenster an.
teilt das Dokumentfenster in einen Codebereich und einen Entwurfsbereich. Wenn Sie diese kombinierte
Ansicht auswählen, wird im Menü „Ansichtsoptionen“ die Option „Entwurfsansicht im Vordergrund“ verfügbar.
zeigt ausschließlich die Entwurfsansicht im Dokumentfenster an.
Hinweis: 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.
Zeigt eine interaktive browserbasierte Ansicht des Dokuments an. Sie können HTML-Elemente in der Live-Ansicht auch bearbeiten.
ermöglicht es Ihnen, das Dokument im Browser als Vorschau anzuzeigen oder zu debuggen. Wählen Sie im
Popupmenü einen Browser aus.
öffnet das Popupmenü „Dateiverwaltung“.
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.
Ü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 „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. Die Live-Ansicht entspricht in ihrer Funktion einem Browser, d. h., auch wenn Sie eine Site außerhalb der
lokalen Site aufrufen (z. B. http://www.adobe.com/de), wird die Seite im Dokumentfenster geladen.
Symbolleiste „Browser-Navigation“
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“.
Überblick über die Code-Symbolleiste
Die Code-Symbolleiste enthält Schaltflächen zum Ausführen zahlreicher Kodieroperationen wie z. B. Reduzieren und Erweitern einer
Codeauswahl, 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.
21
Nach oben
Code-Symbolleiste (CC)
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.
Überblick über die Statusleiste
Die Statusleiste am unteren Rand des Dokumentfensters enthält zusätzliche Informationen zu dem Dokument, das Sie gerade erstellen.
Statusleiste
A. Tag-Selektor B. Mobilgerätgröße C. Tablet-PC-Größe D. Desktopgröße E. Fenstergröße
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.
Mobilgerätgröße
Zeigt eine Vorschau des Dokuments in Mobilgerätgröße an (standardmäßig 480 x 800). Um die Standardgröße zu ändern, klicken Sie im
Popupmenü „Fenstergröße“ auf „Größen bearbeiten“.
Tablet-PC-Größe
Zeigt eine Vorschau des Dokuments in Tablet-PC-Größe an (standardmäßig 768 x 1024). Um die Standardgröße zu ändern, klicken Sie im
Popupmenü „Fenstergröße“ auf „Größen bearbeiten“.
Desktopgröße
Zeigt eine Vorschau des Dokuments in Desktopgröße an (standardmäßig 1000 px Breite). Um die Standardgröße zu ändern, klicken Sie im
Popupmenü „Fenstergröße“ auf „Größen bearbeiten“.
Popupmenü „Fenstergröße“
(In der Codeansicht nicht verfügbar.) Es 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
22
Nach oben
Nach oben
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.
Ü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.).
Eigenschafteninspektor
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.
Ü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 oben in der
Dropdownliste die gewünschte Kategorie auswählen.
Bedienfeld „Einfügen“
Einige Kategorien enthalten Schaltflächen mit Popupmenüs. Wenn Sie eine Option aus einem Popupmenü auswählen, wird diese zur
23
Allgemein
Struktur
Medien
Formular
jQuery Mobile
jQuery-UI
Vorlagen
Favoriten
Nach oben
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:
Ermöglicht das Erstellen und Einfügen häufig verwendeter Elemente wie div-Tags oder Objekte für Bilder und Tabellen.
Ermöglicht das Einfügen von Strukturelementen wie div-Tags, Überschriften, Listen, Absätze, Kopf- und Fußzeilen.
Ermöglicht das Einfügen von Medienelementen wie Edge Animate-Kompositionen, HTML5-Audio und -Video sowie Flash-Audio und -
Video.
Enthält Schaltflächen zum Erstellen von Formularen und zum Einfügen von Formularelementen wie „Suchen“, „Monat“ und „Kennwort“.
Enthält Schaltflächen zum Erstellen von Sites, die jQuery Mobile verwenden.
Ermöglicht das Einfügen von jQuery-UI-Elementen wie Akkordeon, Schieberegler und Schaltflächen.
Ermöglicht das Speichern des Dokuments als Vorlage und das Markieren bestimmter Bereiche als bearbeitbare, optionale,
wiederholende oder bearbeitbare optionale Bereiche.
Ermöglicht das Gruppieren und Anordnen der Schaltflächen des Bedienfelds „Einfügen“, die von Ihnen am häufigsten verwendet
werden.
Überblick über das Bedienfeld „Dateien“
Mit dem Bedienfeld „Dateien“ können Sie die Dateien Ihrer Dreamweaver-Site anzeigen und verwalten.
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 die Remote-
Site), die standardmäßig im reduzierten Bedienfeld angezeigt wird.
Je nach aktiver Ansicht – „Lokal“, „Remote“ oder „Testserver“ – werden die Ordner im Bedienfeld „Dateien“ in unterschiedlichen Farben angezeigt.
Lokale Ansicht
24
Windows
Mac
Remote-Ansicht
Windows
Mac
Testserver-Ansicht
Windows
Mac
Repository-Ansicht
Windows
Mac
25
Nach oben
Quellen
@Medien
Selektoren
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.
CSS Designer
Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-
Stile und -Dateien erstellen sowie Eigenschaften und Medienabfragen festlegen können.
Bedienfeld „CSS Designer“
Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen:
Listet alle CSS-Stylesheets auf, die mit dem Dokument verknüpft sind. In diesem Bereich können Sie eine CSS-Datei an das Dokument
anhängen oder die Stile innerhalb des Dokuments definieren.
Listet alle Medienabfragen der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie kein CSS auswählen, werden in diesem
Bereich alle Medienabfragen des Dokuments angezeigt.
Listet alle Selektoren der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie auch eine Medienabfrage auswählen, wird die
Selektorenliste auf die Selektoren dieser Medienabfrage eingegrenzt. Ist kein CSS und auch keine Medienabfrage ausgewählt, werden hier alle
Selektoren des Dokuments angezeigt.
26
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Eigenschaften
Nach oben
Wenn Sie im Bereich „@Medien“ „GLOBAL“ auswählen, werden alle Selektoren angezeigt, die nicht in einer Medienabfrage der ausgewählten
Quelle enthalten sind.
Zeigt die Eigenschaften an, die Sie für den angegebenen Selektor festlegen können. Weitere Informationen finden Sie unter
Festlegen von Eigenschaften.
Der CSS Designer ist kontextsensitiv. Das bedeutet, dass Sie für den jeweiligen Kontext bzw. für das ausgewählte Seitenelement die zugehörigen
Selektoren und Eigenschaften anzeigen können. Und wenn Sie einen Selektor auswählen, werden in den entsprechenden Bereichen die
zugehörige Quelle und Medienabfrage hervorgehoben.
Weitere Informationen finden Sie unter Bedienfeld „CSS Designer“.
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.
Arbeiten im Dokumentfenster
Live-Ansicht
Allgemeine Informationen zum Programmieren in Dreamweaver
Seitenvorschau in der Live-Ansicht
Festlegen von Codeeinstellungen
Head-Inhalt anzeigen und bearbeiten
Visuelle Hilfsmittel für das Layout
Seitenvorschau in Dreamweaver
Code mit der Code-Symbolleiste einfügen
Fenstergröße und Verbindungsgeschwindigkeit festlegen
Vergrößern und Verkleinern der Ansicht
Dokumentfenster vergrößern oder verkleinern
Festlegen der Voreinstellungen für Downloadzeit und -größe
Fenster und Bedienfelder verwalten
Eigenschafteninspektor verwenden
Verwenden des Bedienfelds „Einfügen“
Mit Dateien im Bedienfeld „Dateien“ arbeiten
Visuelle Hilfsmittel für das Layout
27
Anpassen des Dreamweaver-Arbeitsbereichs
Nach oben
Verwalten von Fenstern und Bedienfeldern
Speichern von und Wechseln zwischen Arbeitsbereichen
Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh)
Farbsymbole aktivieren
Begrüßungsbildschirm ein- bzw. ausblenden
Dreamweaver in Mehrbenutzersystemen anpassen
Allgemeine Voreinstellungen für Dreamweaver festlegen
Voreinstellungen für Dokumentschriften in Dreamweaver festlegen
Dreamweaver-Markierungsfarben anpassen
Wiederherstellen der Standardvoreinstellungen
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
28
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.
Hinweis: 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.
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.
29
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.
Hinweis: 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.
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
30
Nach oben
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.)
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“.
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.
Hinweis: 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
31
Nach oben
Nach oben
Nach oben
Nach oben
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.
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.
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
32
Nach oben
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“.
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.)
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.
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
33
Nach oben
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
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.
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.
Weitere Informationen zum Festlegen einer Standardkodierung für neue Dokumente finden Sie unter Öffnen und Erstellen von Dokumenten.
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“).
Hinweis: 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.
Hinweis: 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.
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.
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.
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.
34
Nach oben
Wiederherstellen der Standardvoreinstellungen
Hinweise zum Wiederherstellen der Dreamweaver-Standardvoreinstellungen finden Sie unter TechNote 83912.
Verwandte Hilfethemen
Arbeitsbereichlayout
Rechtliche Hinweise | Online-Datenschutzrichtlinie
35
Arbeiten im Dokumentfenster
Nach oben
Zwischen Ansichten im Dokumentfenster umschalten
Dokumentfenster überlappend oder nebeneinander anordnen
Dokumentfenster vergrößern oder verkleinern
Fenstergröße und Verbindungsgeschwindigkeit festlegen
Berichte in Dreamweaver
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.)
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.
36
Nach oben
Nach oben
In der Code- und Entwurfsansicht können Sie die Entwurfsansicht im linken Bereich anzeigen („Ansicht“ > „Entwurfsansicht links“).
Dokumentfenster überlappend oder nebeneinander anordnen
Wenn zahlreiche Dokumente gleichzeitig angeordnet sind, können Sie diese überlappend oder nebeneinander anordnen.
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).
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.
Hinweis: (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.
37
Nach oben
Nach oben
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.
Hinweis: Die Verbindungsgeschwindigkeit wird ab Dreamweaver CC nicht mehr unterstützt.
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.
Hinweis: ColdFusion wird ab Dreamweaver CC nicht mehr unterstützt.
Verwandte Hilfethemen
Überblick über das Dokumentfenster
Rechtliche Hinweise | Online-Datenschutzrichtlinie
38
Verwenden von Symbolleisten, Inspektoren und Kontextmenüs
Nach oben
Nach oben
Nach oben
Symbolleisten anzeigen
Eigenschafteninspektor verwenden
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.
Hinweis: 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.
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.
Hinweis: Mit dem Tag-Inspektor können Sie alle mit den Eigenschaften eines Tags verknüpften Attribute anzeigen und bearbeiten.
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.
Hinweis: 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.
2. Wählen Sie im Kontextmenü einen Befehl aus.
39
Verwandte Hilfethemen
Überblick über die Dokumentsymbolleiste
Festlegen von Texteigenschaften im Eigenschafteninspektor
Rechtliche Hinweise | Online-Datenschutzrichtlinie
40
Verwenden des Bedienfelds „Einfügen“
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
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.
Bedienfeld „Einfügen“ ein- und ausblenden
Schaltflächen einer bestimmten Kategorie anzeigen
Popupmenü für eine Schaltfläche anzeigen
Objekte einfügen
Dialogfeld zum Einfügen von Objekten überspringen und leeres Platzhalterobjekt einfügen
Voreinstellungen des Bedienfelds „Einfügen“ ändern
Objekte in der Kategorie „Favoriten“ des Bedienfelds „Einfügen“ hinzufügen, löschen oder verwalten
Objekte mithilfe von Schaltflächen in der Kategorie „Favoriten“ einfügen
Bedienfeld „Einfügen“ als horizontale Einfügeleiste anzeigen
Horizontale Einfügeleiste als Bedienfeldgruppe wiederherstellen
Kategorien der horizontalen Einfügeleiste als Registerkarten anzeigen
Kategorien der horizontalen Einfügeleiste als Menü anzeigen
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
Bedienfeld „Einfügen“ ein- und ausblenden
Wählen Sie „Fenster“ > „Einfügen“ aus.
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.
Popupmenü für eine Schaltfläche anzeigen
Klicken Sie auf den Abwärtspfeil neben dem Schaltflächensymbol.
41
Nach oben
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
Bedienfeld „Einfügen“ in Dreamweaver CC
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 Schaltfläche oder ziehen Sie das Symbol der Schaltfläche in das Dokumentfenster (in der Entwurfs-, Live- oder
Codeansicht).
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.
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“.
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“.
42
Hinweis:
Nach oben
Nach oben
Hinweis:
Nach oben
Nach oben
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.
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 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 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“.
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.
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
43
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Klicken Sie auf das Pfeilsymbol neben dem Kategorienamen am linken Ende der horizontalen Einfügeleiste und wählen Sie dann „Als
Registerkarten anzeigen“ aus.
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.
Adobe empfiehlt auch
Überblick über das Bedienfeld „Einfügen“
44
Bedienfeld „CSS Designer“
Hinweis:
Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-
Stile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können.
Bedienfeld „CSS Designer“
Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden.
Die Änderungen werden automatisch in der Live-Ansicht dargestellt und die entsprechende CSS-Datei wird ebenfalls aktualisiert. Um Sie darüber
zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der betroffenen Datei für einige Zeit (ca. 8 Sekunden lang)
hervorgehoben.
Erstellen und Anfügen von Stylesheets
Definieren von Medienabfragen
Definieren von CSS-Selektoren
Kopieren und Einfügen von Stilen
Festlegen von CSS-Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Festlegen der Rahmeneigenschaften
Deaktivieren oder Löschen von Eigenschaften
Tastaturbefehle
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Deaktivieren der Live-Hervorhebung
Siehe auch
Gestalten von Seitenlayouts mit CSS
CSS3-Übergangseffekte
45
Quellen
@Medien
Selektoren
Eigenschaften
Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen:
Listet alle CSS-Stylesheets auf, die mit dem Dokument verknüpft sind. In diesem Bereich können Sie eine CSS-Datei an das Dokument
anhängen oder die Stile innerhalb des Dokuments definieren.
Listet alle Medienabfragen der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie kein CSS auswählen, werden in diesem
Bereich alle Medienabfragen des Dokuments angezeigt.
Listet alle Selektoren der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie auch eine Medienabfrage auswählen, wird die
Selektorenliste auf die Selektoren dieser Medienabfrage eingegrenzt. Ist kein CSS und auch keine Medienabfrage ausgewählt, werden hier alle
Selektoren des Dokuments angezeigt.
Wenn Sie im Bereich „@Medien“ „GLOBAL“ auswählen, werden alle Selektoren angezeigt, die nicht in einer Medienabfrage der ausgewählten
Quelle enthalten sind.
Zeigt die Eigenschaften an, die Sie für den angegebenen Selektor festlegen können. Weitere Informationen finden Sie unter
Festlegen von Eigenschaften.
Der CSS Designer ist kontextsensitiv. Das bedeutet, dass Sie für den jeweiligen Kontext bzw. für das ausgewählte Seitenelement die zugehörigen
Selektoren und Eigenschaften anzeigen können. Und wenn Sie einen Selektor auswählen, werden in den entsprechenden Bereichen die
zugehörige Quelle und Medienabfrage hervorgehoben.
Videotutorial
Add style to web pages with the CSS Designer panel
CSS Designer mit den Eigenschaften des in der Live-Ansicht ausgewählten Bilds
CSS Designer mit den Eigenschaften der in der Live-Ansicht ausgewählten Überschrift
46
Hinweis:
Nach oben
Nach oben
Hinweis:
Nach oben
Wenn Sie ein Seitenelement auswählen, wird im Bereich „Selektoren“ „COMPUTED“ angezeigt. Klicken Sie auf einen Selektor, um die
zugehörige Quelle, Medienabfrage und die zugehörigen Eigenschaften anzuzeigen.
Um alle Selektoren anzuzeigen, können Sie im Bereich „Quellen“ den Eintrag „ALLE QUELLEN“ auswählen.
Um·Selektoren·anzuzeigen,·die·zu·keiner·Medienabfrage·in·der·ausgewählten·Quelle·gehören,·klicken·Sie·im·Bereich·„@Medien“
auf·„GLOBAL“.
Videotutorial
Using the CSS Designer panel
Erstellen und Anfügen von Stylesheets
1. Klicken Sie im Bedienfeld „CSS Designer“ im Bereich „Quellen“ auf und dann auf eine der folgenden Optionen:
„Neue CSS-Datei erstellen“: Um eine neue CSS-Datei zu erstellen und sie ans Dokument anzuhängen
„Vorhandene CSS-Datei anhängen“: Um eine vorhandene CSS-Datei ans Dokument anzuhängen
„Auf der Seite definieren“: Um ein CSS innerhalb des Dokuments zu definieren
Abhängig von der gewählten Option erscheint entweder das Dialogfeld „Neue CSS-Datei erstellen“ oder das Dialogfeld „Vorhandene CSS-
Datei anhängen“.
2. Klicken Sie auf „Durchsuchen“ um das Dateisystem zu durchsuchen und zu der CSS-Datei zu navigieren, die angehängt werden soll, bzw.,
wenn Sie eine neue CSS-Datei erstellen, um den Pfad anzugeben, in dem die neue Datei gespeichert werden soll.
3. Führen Sie einen der folgenden Schritte aus:
Aktivieren Sie die Option „Verknüpfung“, um das Dreamweaver-Dokument mit der CSS-Datei zu verknüpfen.
Klicken Sie auf „Import“, um die CSS-Datei in das Dokument zu importieren.
4. (Optional) Klicken Sie auf „Bedingte Verwendung“ und definieren Sie die Medienabfrage, die Sie mit der CSS-Datei verknüpfen wollen.
Definieren von Medienabfragen
1. Klicken Sie im „CSS Designer“ im Bereich „Quellen“ auf eine CSS-Quelle.
2. Klicken Sie auf im Bereich @Medien, um eine neue Medienabfrage hinzuzufügen.
Das Dialogfeld „Medienabfrage definieren“ wird angezeigt, in dem die Bedingungen aller von Dreamweaver unterstützten Medienabfragen
aufgelistet sind.
3. Wählen Sie die erforderlichen Bedingungen aus. Ausführliche Informationen zu Medienabfragen finden Sie in diesem Artikel.
Stellen Sie sicher, dass Sie für alle ausgewählten Bedingungen gültige Werte festlegen. Andernfalls werden die entsprechenden
Medienabfragen nicht erfolgreich erstellt.
Bei mehreren Bedingungen werden momentan nur Operationen mit AND-Verknüpfungen unterstützt.
Wenn Sie Medienabfragebedingungen über den Code hinzufügen, werden im Dialogfeld „Medienabfrage definieren“ nur die unterstützten
Bedingungen eingelesen. Das Textfeld „Code“ im selben Dialogfeld zeigt jedoch den gesamten Code an (einschließlich nicht unterstützter
Bedingungen).
Wenn Sie in der Entwurfs- oder Live-Ansicht auf eine Medienabfrage klicken, wird der Viewport dieser Medienabfrage angezeigt. Um·den
vollständigen Viewport·anzuzeigen,·klicken·Sie·im·Bereich·„@Medien“ auf·„GLOBAL“.
Definieren von CSS-Selektoren
1. Wählen Sie im CSS Designer im Bereich „Quellen“ eine CSS-Quelle aus oder im Bereich „@Medien“ eine Medienabfrage.
2. Klicken Sie im Bereich „Selektoren“ auf . Abhängig von dem im Dokument ausgewählten Element identifiziert der CSS Designer den
relevanten Selektor (nach bis zu drei Regeln) und bietet ihn zur Auswahl an.
Sie können einen oder mehrere der folgenden Schritte durchführen:
Verwenden Sie die Nach-oben- und Nach-unten-Taste, um den Detailgrad des vorgeschlagenen Selektors zu erhöhen oder zu
verringern.
47
Nach oben
Hinweis:
Löschen Sie die vorgeschlagene Regel und geben Sie den erforderlichen Selektor ein. Sie müssen den Namen des Selektors
zusammen mit einer Kennzeichnung für den Selektortyp eingeben. Wenn Sie beispielsweise eine ID angeben, setzen Sie vor den
Namen ein „#“.
Um nach einem bestimmten Selektor zu suchen, verwenden Sie das Suchfeld oben im Bereich.
Um einen Selektor umzubenennen, klicken Sie auf den Selektor und geben den erforderlichen Namen ein.
Um die Selektoren anders anzuordnen, ziehen Sie die Selektoren auf die gewünschte Position.
Um einen Selektor von einer Quelle in eine andere zu verschieben, ziehen Sie den Selektor auf die gewünschte Quelle im Bereich
„Quellen“.
Um einen Selektor in der ausgewählten Quelle zu duplizieren, klicken Sie mit der rechten Maustaste auf den Selektor und wählen
„Duplizieren“.
Um einen Selektor zu duplizieren und zur Medienabfrage hinzuzufügen, klicken Sie mit der rechten Maustaste auf den Selektor, wählen
„In die Medienabfrage duplizieren“ und wählen dann die Medienabfrage aus.
Hinweis: Die Option „In die Medienabfrage duplizieren“ ist nur verfügbar, wenn die Quelle des ausgewählten Selektors
Medienabfragen enthält. Sie können einen Selektor aus einer bestimmten Quelle nicht in eine Medienabfrage einer anderen Quelle
kopieren.
Kopieren und Einfügen von Stilen
Sie können Stile jetzt aus einem Selektor kopieren und in einen anderen einfügen. Sie können alle Stile kopieren oder nur bestimmte
Stilkategorien wie Layout, Text und Rahmen.
Klicken Sie mit der rechten Maustaste auf den Selektor und wählen Sie eine der folgenden Optionen aus:
Stile mit dem CSS Designer kopieren
Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert.
„Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“
ist jedoch verfügbar.
Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die
Gesamtmenge
aller Selektoren eingefügt.
Kopieren und Einfügen von Stilen funktioniert auch bei unterschiedlichen Verknüpfungen von CSS-Dateien – (Import, Verknüpfung, Inline-
Stile).
Festlegen von CSS-Eigenschaften
Die Eigenschaften fallen in die folgenden Kategorien und werden oben im Bereich „Eigenschaften“ durch verschiedene Symbole dargestellt:
Layout
Text
Rahmen
Hintergrund
Andere (Liste von „Nur Text“-Eigenschaften, keine Eigenschaften mit visuellen Steuerelementen)
Bevor Sie die Eigenschaften eines CSS-Selektors bearbeiten, sollten Sie mithilfe der umgekehrten Überprüfung feststellen, welche
Elemente mit dem CSS-Selektor verknüpft sind. Dadurch können Sie beurteilen, ob alle Elemente, die bei der umgekehrten Überprüfung
hervorgehoben werden, tatsächlich geändert werden müssen. Weitere Informationen zur umgekehrten Überprüfung finden Sie unter dem
48
Hyperlink.
Aktivieren Sie die Option „Nur verwendete“, wenn nur die festgelegten Eigenschaften angezeigt werden sollen. Um alle Eigenschaften anzuzeigen,
die Sie für einen Selektor definieren können, deaktivieren Sie das Kontrollkästchen „Nur verwendete“.
Alle Eigenschaften
Nur verwendete Eigenschaften
Um eine Eigenschaft wie „width“ oder „border-collapse“ festzulegen, klicken Sie im Bereich „Eigenschaften“ auf die neben der Eigenschaft
angezeigte Option und wählen die erforderliche Option aus dem Popupmenü aus. Weitere Informationen zur Festlegung eines
Verlaufshintergrunds oder visueller Steuerelemente wie Rahmenradius, Auffüllung oder Position erhalten Sie über die folgenden Hyperlinks:
Festlegen von Rändern, Auffüllung und Position
Anwenden von Verläufen auf den Hintergrund
Verwenden flexibler Boxlayouts
Überschriebene Eigenschaften sind durchgestrichen formatiert.
49
Durchgestrichenes Format für überschriebene Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Im Bereich „Eigenschaften“ des CSS Designer können Sie über die visuellen Steuerelemente schnell die Eigenschaften für Ränder („margin),
Auffüllung („padding“) und Position („position“) festlegen. Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungsfeldern
Codekürzel für Ränder und Auffüllung angeben.
Eigenschaft „margin“ (Rand)
Eigenschaft „padding“ (Auffüllung)
Eigenschaft „position“
Klicken Sie auf einen Wert und geben Sie den neuen Wert ein. Sollen alle vier Werte gleich sein, können Sie diese gleichzeitig ändern. Dazu
klicken Sie zuerst auf das Verbindungssymbol in der Mitte ( ) und legen dann einen der Werte fest.
Sie können jederzeit einen der Werte deaktivieren ( ) oder löschen ( ), z. B. den linken Rand, aber die restlichen drei Werte beibehalten, also
den rechten, oberen und unteren Rand.
50
Symbole zum Deaktivieren, Löschen und Verknüpfen (hier für die Ränder)
Festlegen der Rahmeneigenschaften
Die Eigenschaften zur Einstellung des Rahmens sind in logische Registerkarten untergliedert, damit Sie sie schnell anzeigen oder ändern können.
Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungs-Textfeldern Codekürzel für Rahmen und Rahmenradius
angeben.
Um die Rahmeneigenschaften einzustellen, legen Sie zuerst die Eigenschaften in der Registerkarte „Alle Seiten“ fest. Die anderen Registerkarten
werden dann aktiviert und die Eigenschaften in der Registerkarte „Alle Seiten“ werden für einzelne Rahmen widergespiegelt.
Wenn Sie in den einzelnen Registerkarten für den Rahmen eine Eigenschaft ändern, ändert sich der Wert der entsprechenden Eigenschaft in der
Registerkarte „Alle Seiten“ in „nicht definiert“ (der Standardwert).
Im Beispiel unten, wurde die Rahmenfarbe auf Schwarz gesetzt und dann für den oberen Rahmen in Rot geändert.
51
Rahmenfarbe ist für alle Seiten auf Schwarz gesetzt
Der Code, der eingefügt wird, basiert auf der Voreinstellung für Kurzschrift oder Langschrift.
Wie in Versionen vor Dreamweaver CC 2014 sind Steuerelemente zum Löschen und Deaktivieren einzelner Eigenschaften verfügbar. Jetzt können
Sie die Steuerelemente zum Löschen und Deaktivieren jedoch auch auf Gruppenebene der Rahmensteuerelemente verwenden, um diese
Aktionen für alle Eigenschaften auszuführen.
52
Nach oben
Beim Überprüfen erhalten die Registerkarten mit eingestellten Werten den Fokus. Die höchste Priorität erhält die Registerkarte „Alle Seiten“, dann
„Oben“, „Rechts“, „Unten“ und „Links“. Wenn beispielsweise nur der obere Rahmen festgelegt ist, erhält die Registerkarte „Oben“ den Fokus und
die Registerkarte „Alle Seiten“ wird ignoriert, da für die Registerkarte „Alle Seiten“ keine Einstellungen vorgenommen wurden.
Deaktivieren oder Löschen von Eigenschaften
Im Bedienfeld „CSS Designer“ können Sie jede Eigenschaft deaktivieren oder löschen. In der folgenden Abbildung sehen Sie die Symbole zum
Deaktivieren ( ) und Löschen ( ) für die Eigenschaft „width“. Diese Symbole werden sichtbar, wenn Sie die Maus über die Eigenschaft führen.
Eigenschaft deaktivieren/löschen
Tastaturbefehle
Sie können mithilfe von Tastaturbefehlen CSS-Selektoren und Eigenschaften hinzufügen oder löschen. Die nachfolgende Tabelle beschreibt, wie
Sie zwischen den Eigenschaftsgruppen im Eigenschaftenfenster navigieren.
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Meist ist ein einzelner CSS-Selektor mit mehreren Seitenelementen verknüpft. Beispielsweise kann Text im Hauptinhalt einer Seite, in der
Kopfzeile oder in der Fußzeile jeweils mit demselben CSS-Selektor verknüpft sein. Wenn Sie die Eigenschaften des CSS-Selektors bearbeiten,
sind alle Elemente, die mit dem Selektor verknüpft sind, betroffen, einschließlich der Elemente, die Sie vielleicht gar nicht ändern wollen.
Mithilfe der Live-Hervorhebung können Sie anzeigen, welche Elemente mit einem CSS-Selektor verknüpft sind. Wenn Sie nur eines oder nur
einen Teil der Elemente ändern möchten, erstellen Sie am besten einen neuen CSS-Selektor für diese Elemente und bearbeiten dann dessen
Eigenschaften.
Um die Seitenelemente zu identifizieren, die mit einem CSS-Selektor verknüpft sind, halten Sie den Mauszeiger über den Selektor in der Live-
Ansicht (bei ausgeschaltetem Live-Code). Dreamweaver hebt die verknüpften Elemente durch punktierte Linien hervor.
Tastaturbefehl Arbeitsablauf
Strg+Alt+[Umschalt =] Fügt einen Selektor hinzu (wenn der Selektorenbereich aktiv ist)
Strg+Alt+S Fügt einen Selektor hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Strg+Alt+[Umschalt =] Fügt eine Eigenschaft hinzu (wenn der Eigenschaftenbereich
aktiv ist)
Strg+Alt+P Fügt eine Eigenschaft hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Auswählen + Löschen Ist ein Selektor ausgewählt, wird dieser gelöscht
Strg+Alt+(BildAuf/BildAb) Wechseln zwischen Bereichen – während Sie sich im
Eigenschaftenfenster befinden
53
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Um die Hervorhebung für die Elemente anzuzeigen, klicken Sie auf den Selektor. Die Elemente sind jetzt durch einem blauen Rand
hervorgehoben.
Um die blaue Hervorhebung um die Elemente wieder zu entfernen, klicken Sie erneut auf den Selektor.
In der folgenden Tabelle sind die Szenarios aufgeführt, in denen die Live-Hervorhebung nicht verfügbar ist.
Deaktivieren der Live-Hervorhebung
Die Live-Hervorhebung ist standardmäßig aktiviert. Um die Live-Hervorhebung zu deaktivieren, klicken Sie auf die Live-Ansicht-Optionen in der
Dokumentsymbolleiste und wählen „Live-Hervorhebung deaktivieren“.
Modus Live-Code Wird die Live-Hervorhebung angezeigt?
Code nicht zutreffend nicht zutreffend
Entwurf nicht zutreffend nicht zutreffend
Live AN
(Schaltfläche wird gedrückt) Nein
AUS Ja
54
Codeumgebung einrichten
Nach oben
Nach oben
Programmiererfreundliche Arbeitsbereiche verwenden
Anzeigen von Code
Anpassen von Tastaturbefehlen
Dateien standardmäßig in der Codeansicht öffnen
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.
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.
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.
Code-Navigation ermöglicht die schnelle Fortbewegung durch den Code. Weitere Informationen finden Sie unter Zu JavaScript- oder VBScript-
Funktionen navigieren.
Ansichtsoptionen dient zur Angabe, wie der Code angezeigt werden soll. Weitere Informationen finden Sie unter Erscheinungsbild des Codes
festlegen.
55
Nach oben
Nach oben
Wie Sie die an der linken Fensterseite befindliche Code-Symbolleiste verwenden, erfahren Sie unter Code mit der Code-Symbolleiste einfügen.
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
56
Festlegen von Codeeinstellungen
Nach oben
Nach oben
Nach oben
Voreinstellungen für Code
Erscheinungsbild des Codes festlegen
Codeformat ändern
Einstellungen für das Umschreiben von Code festlegen
Codefarben festlegen
Mit externen Editoren arbeiten
Voreinstellungen für Code
Sie können Codeeinstellungen Ihren Anforderungen entsprechend festlegen, z. B. Codeformatierung oder Codeeinfärbung.
Hinweis: Weitere Einstellungen können Sie im Tag-Bibliothek-Editor festlegen (siehe Verwalten von Tag-Bibliotheken).
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.
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.
Hinweis: 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.
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.
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).
57
Nach oben
Hinweis: 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.
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.
Hinweis: 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)“.
Hinweis: 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“).
Hinweis: 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.
Hinweis: 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 Stylesheets) 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.
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).
58
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
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.
Schreibgeschützt-Hintergrund legt die Hintergrundfarbe für schreibgeschützten Text fest.
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.
Externen Editor für einen Dateityp festlegen
59
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“.
Verwandte Hilfethemen
Überblick über die Code-Symbolleiste
Microsoft Word-HTML-Dateien optimieren
Rechtliche Hinweise | Online-Datenschutzrichtlinie
60
Code ausblenden
Nach oben
Nach oben
Informationen zum Ausblenden von Code
Codefragmente aus- und einblenden
Ausgeblendete Codefragmente einfügen und verschieben
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.
Hinweis: Aus Dreamweaver-Vorlagen erstellte Dateien werden mit vollständig eingeblendetem Code angezeigt, auch wenn die Vorlagendatei
(.dwt) ausgeblendete Codefragmente enthält
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.
2. Wählen Sie „Bearbeiten“ > „Code ausblenden“ und wählen Sie eine der Optionen.
Ausgeblendete Codefragmente auswählen
Klicken Sie in der Codeansicht auf das ausgeblendete Codefragment.
Hinweis: 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:
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
61
Nach oben
Alles einblenden Strg+Alt+E Befehl+Alt+E
Ausgeblendete Codefragmente einfügen und verschieben
Sie haben die Möglichkeit, ausgeblendete Codefragmente zu kopieren und einzufügen bzw. durch Ziehen zu verschieben.
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.
Hinweis: Beim Einfügen in andere Anwendungen bleibt das Codefragment nicht ausgeblendet.
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)
Hinweis: Sie können die Auswahl nicht in andere Dokumente ziehen.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
62
Suchen von Dateien anhand von Dateinamen oder Inhalten | Mac OS
(CC)
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Passende Dateien
Passender Text in
Hinweis:
Diese Funktion ist nur für Mac OS verfügbar.
Verwenden Sie die Live-Suche, um Dateien aufgrund des Dateinamens oder eines in den Dateien vorkommenden Texts zu suchen. Es wird die im
Bedienfeld „Dateien“ ausgewählte Site verwendet. Ist dort keine Site ausgewählt, ist die Suchoption nicht verfügbar.
Die Live-Suche verwendet die Spotlight-API im Mac OS. Anpassungen, die Sie auf die Spotlight-Voreinstellungen anwenden, werden auch für die
Live-Suche verwendet. Spotlight zeigt alle Dateien auf Ihrem Computer an, die Ihrer Suchanfrage entsprechen. Die Live-Suche sucht Dateien im
lokalen Stammordner der Site, die im Bedienfeld „Dateien“ ausgewählt ist.
1. Wählen Sie „Bearbeiten“ > „Live-Suche“. Sie können stattdessen auch CMD+UMSCHALT+F drücken. Der Fokus wird auf das Textfeld „Live
Suche“ im Bedienfeld „Dateien“ gesetzt.
2. Geben Sie in dieses Textfeld das Wort oder den Ausdruck ein. Die Ergebnisse werden angezeigt, während Sie Text in das Textfeld
eingeben.
Es werden maximal 10 Dateinamen angezeigt, die Ihren Suchkriterien entsprechen. Wenn mehr als 10 Dateien mit
diesen Kriterien übereinstimmen, wird die Meldung „Mehr als 15 Ergebnisse gefunden“ angezeigt. Verbessern Sie Ihre Suchkriterien, wenn
die gewünschte Datei nicht im Ergebnis enthalten ist.
Es werden maximal 10 Dateien angezeigt, die Text enthalten, der dem eingegebenen Wort oder Ausdruck entspricht.
Für weitere Optionen klicken Sie auf „Alle suchen“. Die Ergebnisse werden im Bedienfeld „Suchen“ angezeigt.
3. Wenn Sie den Mauszeiger über ein Suchergebnis halten, wird eine QuickInfo mit dem zum Site-Stammordner relativen Pfad der Datei
angezeigt. Drücken Sie die Eingabetaste oder klicken Sie auf das Element, um die Datei zu öffnen.
Bei Dateien, die passenden Text enthalten, wird die erste Instanz des Textes hervorgehoben. Drücken Sie CMD+G, um die jeweils nächste
Instanz anzuzeigen.
Um das Bedienfeld mit den Ergebnissen der Live-Suche zu schließen, klicken Sie auf eine Stelle außerhalb des Bedienfelds oder
drücken ESCAPE bzw. ESC.
63
Vergrößern und Verkleinern der Ansicht
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Ansicht einer Seite vergrößern oder verkleinern
Seite nach dem Vergrößern oder Verkleinern der Ansicht bearbeiten
Seite nach dem Vergrößern oder Verkleinern der Ansicht schwenken
Dokumentfenster mit einer Auswahl füllen
Dokumentfenster mit einer ganzen Seite füllen
Dokumentfenster mit der gesamten Breite einer Seite füllen
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.
Hinweis: Die Zoomwerkzeuge sind nur in der Entwurfsansicht verfügbar.
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.
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“.
Verwandte Hilfethemen
Überblick über die Statusleiste
64
Rechtliche Hinweise | Online-Datenschutzrichtlinie
65
Tastaturbefehle
Nach oben
Nach oben
Referenzseiten für den aktuellen Tastaturbefehlssatz erstellen
Tastaturbefehle anpassen
Tastaturbefehle und Nicht-US-Tastaturen
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.
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.
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.
66
Nach oben
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“.
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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
67
Optimieren des Arbeitsbereichs für visuelle Entwicklung
Nach oben
Nach oben
Bedienfelder für das Entwickeln von Webanwendungen anzeigen
Datenbanken in Dreamweaver anzeigen
Vorschau dynamischer Seiten in einem Browser
Anzeige der Datenbankinformationen in Dreamweaver eingrenzen
Einstellungen im Eigenschafteninspektor für gespeicherte ColdFusion-Prozeduren und ASP-Befehle vornehmen
Eingabenamen-Optionen
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.
Hinweis: 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.
Ein Tutorial zum Einrichten des Entwicklungs-Arbeitsbereichs finden Sie unter www.adobe.com/go/vid0144_de.
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.
Hinweis: 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.
68
Nach oben
Nach oben
Nach oben
Nach oben
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“.
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.
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.
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.
Hinweis: 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.
Hinweis: 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“.
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.
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:
69
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.
Verwandte Hilfethemen
Tutorial zum Entwicklungs-Arbeitsbereich
Einrichten eines Testservers
Rechtliche Hinweise | Online-Datenschutzrichtlinie
70
CEF-Integration
Nach oben
In Dreamweaver ist jetzt das Chromium Embedded Framework (CEF) integriert, ein Open-Source-Framework, das auf dem Chromium-Projekt von
Google basiert. Durch diese Integration ist Dreamweaver in der Lage, Funktionen wie das Laden von Ressourcen, die Navigation, Kontextmenüs
oder das Drucken zu steuern und gleichzeitig die im Webbrowser Google Chrome verfügbare Leistung und HTML5-Technologie zu nutzen.
Dreamweaver hat die CEF3-Version integriert, eine Multiprozessimplementierung, die asynchrones Messaging verwendet, um eine Kommunikation
zwischen Dreamweaver und einem oder mehreren Wiedergabeprozessen (Webkit + V8-Engine) zu ermöglichen. CEF3 verwendet die offizielle API
für Chromium-Inhalte und bietet somit eine ähnliche Leistung wie Google Chrome.
Weitere Informationen zu CEF finden Sie in diesem Artikel.
Die CEF-Integration wirkt sich auf folgende Dreamweaver-Funktionen aus:
Bessere Benutzerführung
Verbesserungen beim Rendering
Prüfmodus
Codec
Popupmenüs
Fehlermeldungen
Zoom/Bildlauf
Seiten mit fließendem Raster
Änderungen an der Architektur
Code-Navigator
Navigation
SSL-Zertifikat
Live-Code/Codeansicht
Externe CSS-Dateien
Dynamisch zugehörige Dateien
Live-Ansicht-Optionen
Viewport
Bessere Benutzerführung
Verbesserungen beim Rendering
Die CEF-Integration ermöglicht ein besseres Rendern von Objekten und anderen UI-Elementen in Dreamweaver.
Die folgenden Abbildungen zeigen, wie ein div-Element mit Rahmenradius und sich wiederholendem Verlauf im alten Apollo-Webkit und nach der
CEF-Integration gerendert wird.
div-Element mit Rahmenradius, das im alten Apollo-Webkit gerendert wird. Der Rahmenradius wird nicht angewendet, da diese Eigenschaft nicht
unterstützt wurde.
div-Element mit Rahmenradius, das nach der CEF-Integration in der Live-Ansicht gerendert wird. Der Rahmenradius wird angewendet.
71
Prüfmodus
Der neue Prüfmodus stimmt mit dem von Google Chrome überein. Der Rand („margin“) ist in Gelb hervorgehoben und in die Auffüllung („padding“)
in Lila.
Wenn Sie den Mauszeiger über die Elemente halten, erscheinen horizontale und vertikale Lineale. Je nach Position des Elements werden die
Lineale oberhalb/unterhalb bzw. links/rechts vom Element angezeigt. Die Lineale zeigen den Wert der auf das Element angewendeten
Eigenschaften „margin“, „padding“, „width“ und „border“.
Außerdem wird eine QuickInfo mit den folgenden Informationen eingeblendet:
Name des Elements (z. B. div)
CSS-Klasse oder ID, falls definiert.
Die Abmessung des Elements. Die angezeigte Zahl stellt die Summe aus Breite, Auffüllung und Rahmen („width“, „padding“ und „border“),
die auf das Element angewendet wurden, dar.
Codec
Popupunterstützung
Durch die CEF-Integration kann Dreamweaver jetzt HTML5-Formularelemente wie Monat, Datum und Uhrzeit wiedergeben. Wenn Sie auf diese
Steuerelemente klicken, zeigt Dreamweaver jetzt Popupmenüs an, mithilfe derer Sie die erforderlichen Parameter auswählen können.
Kalenderpopup
Elementauswahlliste für Formulare
Seiten mit fließendem Raster
Wenn die Hilfslinien für fließende Rasterlayouts ausblendet sind, verwendet die Live-Ansicht für die Wiedergabe das CEF-Webkit. Seiten mit
fließendem Raster, für die die Hilfslinien einblendet sind, verwenden für die Wiedergabe weiterhin das alte Apollo-Webkit. Live-Ansicht-Funktionen
wie Navigation (Adressleiste), Prüfmodus und Live-Code sind nur im CEF-Modus verfügbar.
Dokumentsymbolleiste für eine Seite mit aktiviertem fließendem Raster (Apollo-Live-Ansicht)
Video Audio
Theora mp3
h264 wav
ogg Vorbis
ogv pcm-u8
mp4 pcm_s16le
mov pcm_s24le
72
Nach oben
Dokumentsymbolleiste für eine Seite mit deaktiviertem fließendem Raster (CEF-Live-Ansicht)
Fehlerzeichenfolgen
Fehlerzeichenfolgen werden in Dreamweaver jetzt genau so angezeigt wie in Google Chrome.
Fehlermeldungen
Zoom/Bildlauf
Bildlaufleisten funktionieren in der Live-Ansicht anders als in der Entwurfsansicht.
Das Zoom-Verhalten in Dreamweaver wurde durch die CEF-Integration verändert. Früher wurde pro Registerkarte vergrößert bzw. verkleinert und
jetzt in der CEF-Ansicht pro Seite.
Szenario 1: Angenommen, Sie vergrößern eine Seite in der Live-Ansicht auf 300 %. Anschließend öffnen Sie dieselbe Seite aus einer anderen
Registerkarte heraus (indem Sie einem Link folgen). In diesem Fall geschieht Folgendes:
In CEF bleibt die Seite auf 300 % vergrößert
In Apollo (ältere Version), wird die Seite in der Standardgröße von 100 % gerendert.
Szenario 2: Angenommen, Sie verkleinern eine Seite auf einer Registerkarte auf 50 % (Live-Ansicht). Anschließend wechseln Sie auf derselben
Registerkarte zu einer anderen Seite. In diesem Fall geschieht Folgendes:
In CEF werden andere Seiten in der Standardgröße 100 % geöffnet.
In Apollo werden alle Seiten, die von dieser Registerkarte aus angesteuert werden, in einer 50%igen Verkleinerung angezeigt
Änderungen an der Architektur
Code-Navigator
Der Code-Navigator analysiert das Dokument und listet alle Stile auf, die auf das aufgerufene Element anwendbar sind. Zur Wiedergabe des
Inhalts wird das Browsersteuerelement verwendet. Wenn Sie den Mauszeiger über einen der Selektoren halten, werden alle verknüpften CSS-
Eigenschaften als QuickInfo angezeigt. Wenn Sie auf einen Selektor klicken, wird die Einfügemarke auf die entsprechende Stelle im Code gesetzt.
SSL-Zertifikat
Wenn Sie versuchen, eine sichere Site (HTTPS) anzuzeigen, deren Zertifikat nicht anerkannt wird, wird ein Dialogfeld zur Bestätigung des SSL-
Zertifikats angezeigt.
Sichere Verbindung – Bestätigungsdialogfeld
73
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Andere
Die folgenden Funktionen sind von der CEF-Integration betroffen:
Dynamisch zugehörige Dateien
Externe CSS-Dateien
Live-Ansicht und Live-Code-Synchronisation
Navigation
Live-Ansicht-Optionen („Hyperlink aufrufen“, „Hyperlinks fortlaufend aufrufen“, „Testserver als Dokumentenquelle verwenden“, „JavaScript
deaktivieren“, „JavaScript anhalten“)
Viewport
Zielattribut für Hyperlinks
Kontextmenü (die Optionen „Hyperlink aufrufen“ und „Plug-Ins deaktivieren“ wurden aus dem Kontextmenü eines Hyperlinks entfernt)
Hinweis: Durch die CEF-Integration wird beim Entwickeln von Erweiterungen das Tag <mm:browsercontrol> anders verwendet. Weitere
Informationen finden Sie in diesem Artikel.
74
Siteverwaltung
75
Testen der Dreamweaver-Site
Nach oben
Nach oben
Richtlinien zum Testen von Sites
Verwenden von Berichten zum Testen von Sites
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:
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.
Testen Sie die Anzeige der Seiten mit verschiedenen Browsern und Plattformen.
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.
Ü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.
Ü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.
Führen Sie zum Testen und zur Fehlersuche in der ganzen Site mehrere Siteberichte aus.
Sie können die gesamte Site auf Fehler überprüfen, beispielsweise auf unbenannte Dokumente, leere Tags und überflüssige verschachtelte Tags.
Überprüfen Sie den Code, um Tag- oder Syntaxfehler ausfindig zu machen.
Aktualisieren und warten Sie eine Site, auch nachdem sie veröffentlicht wurde.
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
Werkzeuge oder speziell dafür vorgesehene externe Programme verwenden.
Nehmen Sie an den Diskussionsforen teil.
Die Dreamweaver-Diskussionsforen finden Sie auf der Adobe-Website unter www.adobe.com/go/dreamweaver_newsgroup.
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 bei der Veröffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
Verwenden von Berichten zum Testen von Sites
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.
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
76
Hinweis:
Hinweis:
Hinweis:
Ausgecheckt von
Design Notes
Zuletzt bearbeitete
Kombinierbare verschachtelte FONT-Tags
ALT-Text fehlt
Überflüssige verschachtelte Tags
Entfernbare leere Tags
Unbenannte Dokumente
welche Dateien kürzlich geändert wurden. Sie können Design Notes-Berichte noch verfeinern, indem Sie Name-Wert-Parameter festlegen.
Um die Arbeitsablaufberichte ausführen zu können, muss eine Verbindung mit der 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.
Darüber hinaus haben Sie die Möglichkeit, über die Adobe Dreamweaver Exchange Website verschiedene Berichtstypen zu
Dreamweaver hinzuzufügen.
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.
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.
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.
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.
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:
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.
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.
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>.
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.
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
77
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
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.
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.
Weitere Empfehlungen von Adobe
Tutorial „Probleme bei der Veröffentlichung beheben“
78
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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
79
Verwalten von Contribute-Sites
Nach oben
Hinweis:
Nach oben
Verwalten von Contribute-Sites
Site-Struktur und Seitendesign für Contribute-Sites
Dateiübertragung an eine bzw. von einer Contribute-Site
Contribute-Datei- und -Ordnerberechtigungen auf dem Server
Contribute-Sonderdateien
Vorbereiten einer Site für die Verwendung von Contribute
Verwalten von Contribute-Sites in Dreamweaver
Löschen, Verschieben oder Umbenennen von Remote-Dateien in einer Contribute-Site
Zugriff auf Vorlagen ohne Zugriff auf Stammordner für Contribute-Benutzer einrichten
Fehlerbehebung in einer Contribute-Site
Verwalten von Contribute-Sites
Adobe® Contribute® CS4 kombiniert die Funktionen eines Webbrowsers mit denen eines 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.
In diesem Abschnitt wird vorausgesetzt, dass Sie ein Contribute-Administrator sind.
Als Site-Administrator haben Sie die Möglichkeit, Benutzern ohne Administratorberechtigungen das Bearbeiten von Seiten zu gestatten. Dazu
erstellen Sie einen Verbindungsschlüssel und senden ihn an die Benutzer (Informationen hierzu finden Sie in der Contribute-Hilfe). Alternativ
können Sie mithilfe von Dreamweaver eine Verbindung mit einer Contribute-Site einrichten. Sie oder Ihr Site-Designer können dann eine
Verbindung mit der Contribute-Site herstellen und alle in Dreamweaver verfügbaren Bearbeitungsfunktionen nutzen.
Contribute ergänzt den Funktionsumfang Ihrer Website um Contribute Publishing Server (CPS). Diese Suite mit Publishing-Anwendungen und
Werkzeugen zur Benutzerverwaltung ermöglicht die Integration von Contribute mit dem Benutzerverzeichnisdienst Ihrer Organisation (z. B.
Lightweight Directory Access Protocol (LDAP) oder Active Directory). Wenn Sie Ihre Dreamweaver-Site als Contribute-Site einrichten, überprüft
Dreamweaver bei jeder Verbindung mit der Remote-Site die Contribute-Verwaltungseinstellungen. Wenn Dreamweaver ermittelt, das CPS aktiviert
ist, werden einige der Funktionen von CPS in Dreamweaver übernommen, z. B. die Unterstützung für frühere Versionen von Dateien und die
Ereignisprotokollierung.
Sie können mit Dreamweaver eine Verbindung mit einer Contribute-Site herstellen und anschließend Dateien bearbeiten. Die meisten
Dreamweaver-Funktionen können bei einer Contribute-Site in derselben Art und Weise verwendet werden wie bei anderen Sites. Beachten Sie
aber, dass Dreamweaver bei der Verwendung mit einer Contribute-Site bestimmte Dateiverwaltungsvorgänge automatisch ausführt, z. B. das
Speichern mehrerer Revisionen eines Dokuments oder das Protokollieren bestimmter Ereignisse in der CPS-Konsole.
Weitere Informationen hierzu finden Sie in der Contribute-Hilfe.
Site-Struktur und Seitendesign für Contribute-Sites
Damit Contribute-Benutzer Ihre Website bearbeiten können, sollten Sie bei der Strukturierung folgende Punkte beachten:
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 und beschränken Sie komplexe Formatierungen auf ein Minimum.
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-
80
Hinweis:
Nach oben
Nach oben
Nach oben
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“.
Sie müssen „mmhide_“ in der Codeansicht zum Stilnamen hinzufügen. Das Hinzufügen über das CSS-Bedienfeld ist nicht möglich.
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.
Dateiübertragung an eine bzw. von einer Contribute-Site
Contribute verwendet ein System, das dem System zum Ein- und Auschecken von Dreamweaver sehr ähnlich ist. Damit ist sichergestellt, dass
jeweils nur ein Benutzer eine bestimmte Webseite bearbeiten kann. Wenn Sie die Contribute-Kompatibilität in Dreamweaver aktivieren, wird das
System zum Ein- und Auschecken von Dreamweaver automatisch aktiviert.
Verwenden Sie immer die Befehle zum Ein- und Auschecken, wenn Sie Dateien mit Dreamweaver an oder von einer Contribute-Site übertragen.
Wenn Sie stattdessen die Befehle PUT (Bereitstellen) und GET (Abrufen) für die Dateiü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“ eine Sicherungskopie der zuvor eingecheckten
Dateiversion und fügt einer Design Notes-Datei Ihren Benutzernamen und einen Datumsstempel hinzu.
Contribute-Datei- und -Ordnerberechtigungen auf dem Server
In Contribute können Datei- und Ordnerberechtigungen für jede von Ihnen definierte Benutzerrolle verwaltet werden. Contribute bietet 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. In ähnlicher Weise 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 für 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.
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 Anzeige durch Besucher Ihrer Site vorgesehen sind.
Die Datei für gemeinsam genutzte Einstellungen: Diese Datei mit einem komplexen Dateinamen und der Erweiterung „CSI“ befindet sich im
Stammverzeichnis der Site im Ordner „_mm“ 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, die erstellt werden, wenn Benutzer eine Vorschau der Änderungen anzeigen
Temporäre Sperrdateien, die darauf hinweisen, dass eine bestimmte Seite gerade 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.
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
81
Hinweis:
Nach oben
Hinweis:
Hinweis:
werden.
In der Contribute-Hilfe unter „Website-Sicherheit“ finden Sie 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.
Vorbereiten einer Site für die Verwendung von Contribute
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 mit 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 mit Ihrer Remote-Site das WebDAV-Protokoll verwendet wird, können Sie die Contribute-Kompatibilität nicht
aktivieren, da diese Systeme zur Versionskontrolle nicht mit den Systemen zum Ein- und Auschecken von Design Notes kompatibel sind, die
von Dreamweaver für Contribute-Sites verwendet werden.
Wenn Sie eine RDS-Verbindung mit der Remote-Site herstellen, können Sie die Contribute-Kompatibilität zwar aktivieren, müssen aber Ihre
Verbindung anpassen, bevor Sie sie gemeinsam mit anderen Contribute-Benutzern verwenden können.
Wenn Sie Ihren lokalen Computer als Webserver verwenden, müssen Sie die Site über eine FTP- oder Netzwerkverbindung (und nicht über
ein lokales Ordnerverzeichnis) einrichten, damit Sie Ihre Verbindung gemeinsam mit anderen Contribute-Benutzern verwenden können.
Wenn Sie die Contribute-Kompatibilität aktivieren, werden in Dreamweaver automatisch Design Notes (einschließlich der Option „Design Notes für
gemeinsame Nutzung bereitstellen“) und das System zum Ein- und Auschecken aktiviert.
Wenn Contribute Publishing Server (CPS) für die Remote-Site aktiviert wurde, mit der Sie eine Verbindung hergestellt haben, benachrichtigt
Dreamweaver 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.
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.
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
82
Hinweis:
Nach oben
Hinweis:
Hinweis:
Hinweis:
Nach oben
Dreamweaver geändert haben.
6. Prüfen Sie die URL im Textfeld „Stamm-URL der Site“ 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.
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“.
Verwalten von Contribute-Sites in Dreamweaver
Nachdem Sie die Contribute-Kompatibilität aktiviert haben, können Sie Contribute mithilfe von Dreamweaver starten, um Site-
Administrationsaufgaben durchzuführen.
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.
Ein Verbindungsschlüssel ist nicht mit einer aus Dreamweaver exportierten Site-Datei 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“.
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 Administrator-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 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.
Löschen, Verschieben oder Umbenennen von Remote-Dateien in einer Contribute-Site
Das Löschen von Dateien auf dem Remote-Server für Contribute-Sites funktioniert im Prinzip genauso wie das Löschen von Dateien auf dem
Server anderer Dreamweaver-Sites. Wenn Sie jedoch eine Datei auf 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.
83
Nach oben
Nach oben
Hinweis:
Das Umbenennen bzw. Verschieben von Remote-Dateien aus einem Ordner in einen anderen funktioniert auf Contribute-Sites ähnlich wie auf
Dreamweaver-Sites. Bei Contribute-Sites werden auch 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. Relativ zum
Stammordner definierte Site-Links beziehen sich auf den Hauptstammordner des Servers und nicht auf den von Ihnen definierten
Stammordner in Dreamweaver. Contribute-Benutzer können keine relativ zum Stammordner definierten Site-Links erstellen.
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.
Fehlerbehebung in einer Contribute-Site
Manchmal scheint eine Remote-Datei einer Contribute-Site ausgecheckt zu sein, obwohl sie auf dem Computer des Benutzers nicht gesperrt ist.
Sie können die Datei entsperren, damit sie wieder von Benutzern bearbeitet werden kann.
Wenn Sie auf eine Schaltfläche für die Administration von Contribute-Sites klicken, überprüft Dreamweaver die Verbindung mit der Remote-Site
und die von Ihnen angegebene Site-Stamm-URL. Wenn in Dreamweaver keine Verbindung hergestellt werden kann oder wenn die URL ungültig
ist, wird eine Fehlermeldung angezeigt.
Wenn die Administrationstools nicht ordnungsgemäß funktionieren, liegt möglicherweise ein Fehler im Ordner „_mm“ vor.
Dateien in Contribute-Sites entsperren
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“.
Gegebenenfalls wird in einem Dialogfeld 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
84
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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.
Weitere Empfehlungen von Adobe
Importieren und Exportieren von Site-Einstellungen
85
Dateien vom Server abrufen/auf dem Server bereitstellen
Nach oben
Nach oben
Dateiübertragung und abhängige Dateien
Dateiübertragung im Hintergrund
Dateien von einem Remote-Server abrufen
Dateien auf einem Remote-Server bereitstellen
Dateiübertragungen verwalten
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.
Hinweis: 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.
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
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
86
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
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.
Hinweis: 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“.
Hinweis: 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.
Hinweis: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll anzuzeigen.
Dateien auf einem Remote-Server bereitstellen
87
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
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“.
Hinweis: 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.
Hinweis: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll anzuzeigen.
88
Nach oben
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.
Hinweis: 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“.
Hinweis: 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.
Verwandte Hilfethemen
Tutorial „Bereitstellen von Dateien“
Tutorial „Probleme bei der Veröffentlichung beheben“
Rechtliche Hinweise | Online-Datenschutzrichtlinie
89
Dynamische Websites
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Bevor Sie mit dem Erstellen dynamischer Webseiten beginnen, müssen Sie einige Vorbereitungen treffen. Dazu gehören die Einrichtung eines
Webanwendungsservers und einer Datenbankverbindung für ColdFusion-, ASP- und PHP-Anwendungen. Abhängig von der Servertechnologie
behandelt Adobe Dreamweaver Datenbankverbindungen unterschiedlich.
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
90
Dreamweaver-Sites
Nach oben
Nach oben
Was ist eine Dreamweaver-„Site“?
Struktur der lokalen und Remote-Ordner
Eine Adobe® Dreamweaver®-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.
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.
Hinweis: 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.
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.
91
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
92
Testserver einrichten
Nach oben
Hinweis:
Hinweis:
Nach oben
Hinweis:
Das Stammverzeichnis
Testserver einrichten
Web-URL für den Testserver
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).
Testserver einrichten
1. Wählen Sie „Site“ > „Sites verwalten“.
2. Klicken Sie auf „Neue Site“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und klicken Sie auf
das Symbol zum 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“.
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.
Ab Dreamweaver CS5 werden ASP.NET-, ASP JavaScript- und JSP-Serververhalten nicht mehr zusammen mit Dreamweaver
installiert. (Bei Bedarf können Sie die veralteten Server-Verhalten wieder aktivieren, beachten Sie jedoch, dass diese offiziell nicht mehr von
Dreamweaver unterstützt werden.) 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 Sie arbeiten über einen Testserver Daten anzeigen und Verbindungen mit Datenbanken herstellen kann, müssen
Sie eine Web-URL angeben. Über diese Verbindung während der Entwurfsphase zeigt Dreamweaver nützliche Informationen über die Datenbank
an, beispielsweise zu den Tabellen in der Datenbank und den Namen der Spalten in den Tabellen.
Eine Web-URL für einen Testserver setzt sich aus dem Domänennamen und den Unterverzeichnissen bzw. virtuellen Verzeichnissen des
Stammverzeichnisses Ihrer Website zusammen.
Obwohl sich die in Microsoft IIS verwendete Terminologie von Server zu Server unterscheiden kann, liegen den meisten Webservern
dieselben Konzepte zugrunde.
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:
93
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Ein virtuelles Verzeichnis
Localhost
Hinweis:
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.
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/
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:
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/
Anwendungsserver auswählen
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/
94
Importieren und Exportieren von Site-Einstellungen
Nach oben
Hinweis:
Nach oben
Site-Einstellungen exportieren
Site-Einstellungen importieren
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. Weitere Informationen zum Erstellen einer neuen Site in
Dreamweaver finden Sie unter Einrichten einer lokalen Version Ihrer Site.
Exportieren Sie Ihre Site regelmäßig, damit Sie über eine Sicherungskopie verfügen, falls auf der Site ein Problem auftreten sollte.
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 „Exportieren“ (CS5/CS5.5) oder
auf die Schaltfläche „Exportieren“ (ab Version CS6):
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“.
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“.
95
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
2. Klicken Sie auf „Importieren (CS5/CS5.5) oder auf die Schaltfläche „Site importieren“ (ab Version CS6).
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.
Dreamweaver-Sites
Backing up and restoring site definitions
96
Bearbeiten einer vorhandenen Remote-Website
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Hinweis:
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 Einrichten einer lokalen Version Ihrer Site.)
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
Verbindungsaufbau zu einem Remote-Server.)
Achten Sie darauf, dass Sie dabei den richtigen Stammordner für die Remote-Site auswä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.
Dreamweaver-Sites
Editing an existing website (Dreamweaverblog)
97
Herstellen einer Verbindung mit einem Remote-Server
Hinweis:
Nach oben
Ein Remote-Server (häufig auch als Webserver bezeichnet) ist der Computer im Internet, auf dem Sie Ihre Site-Dateien veröffentlichen, sodass
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. Dies kann beispielsweise ein FTP- oder WebDav-Server sein.
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.
Verbindungsmethode festlegen
Erweiterte Server-Optionen festlegen
Verbindung zu einem Remote-Ordner mit Netzwerkzugriff herstellen oder trennen
Verbindung zu einem Remote-Ordner mit FTP-Zugriff herstellen oder trennen
Fehler beim Einrichten des Remote-Ordners beheben
Dreamweaver unterstützt auch Verbindungen zu IPv6-fähigen Servern. Es werden die Verbindungsmethoden FTP, SFTP, WebDAV und
RDS unterstützt. Weitere Informationen finden Sie unter www.ipv6.org/ (auf Englisch) und unter http://de.wikipedia.org/wiki/IPv6 (auf Deutsch).
Weitere Informationen zum Einrichten eines Testservers finden Sie unter Einrichten eines Testservers. Um ein Videotutorial aufzurufen, klicken Sie
here.
Verbindungsmethode festlegen
FTP-Verbindungen
Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver über FTP herstellen.
Hinweis: Business Catalyst unterstützt nur SFTP. Wenn Sie Business Catalyst verwenden, finden Sie weitere Informationen im Abschnitt zu
SFTP-Verbindungen auf dieser Seite.
1. Wählen Sie „Site“ > „Sites verwalten“.
2. Klicken Sie auf „Neue Site“, um eine neue Site einzurichten, oder wählen Sie eine vorhandene Dreamweaver-Site aus und klicken Sie auf
das Symbol zum 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“.
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.
98
Hinweis:
Hinweis:
Registerkarte „Einfach“ der Kategorie „Server“ im Dialogfeld „Site-Definition“
4. Geben Sie im Textfeld „Servername“ einen Namen für den neuen Server an. Sie können einen beliebigen Namen eintragen.
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.
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 beim Speichern der Einstellungen die FTP-Adresse durch einen Doppelpunkt und die neue
Portnummer ergänzt wird (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.
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ührliche Erläuterung dieser Option finden Sie unter Kategorie „Erweiterte Einstellungen“.
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.
99
Hinweis:
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 das Dialogfeld 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 der TechNote kb405912 auf der Adobe-Website unter
www.adobe.com/go/kb405912.
SFTP-Verbindungen
Aktivieren Sie die Option „Secure FTP (SFTP) verwenden“, wenn die Konfiguration Ihres Servers oder Ihrer Firewall die Verwendung von Secure
FTP erfordert. Bei SFTP werden Verbindungen zum Remote-/Testserver mithilfe von Verschlüsselung und Identitätsschlüsseln gesichert.
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.
Sie können Verbindungen mit einem SFTP-Server jetzt anhand eines „Identitätsschlüssels“ (mit oder ohne Passphrase) authentifizieren.
Dreamweaver unterstützt nur OpenSSH-Schlüsseldateien.
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“.
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.
6. Geben Sie die anderen Optionen entsprechend einem der folgenden Szenarien im Dialogfeld an:
Szenario 1: Kein Schlüssel, aber Benutzername und Kennwort
Szenario 2: Schlüssel, für den keine Passphrase erforderlich ist
Szenario 3: Schlüssel, für den eine Passphrase erforderlich ist
Szenario 1
Sie haben keinen Schlüssel und möchten nur mit den Anmeldeinformationen – einer Kombination aus Benutzername und Kennwort eine SFTP-
Verbindung herstellen. In diesem Fall verwenden Sie die Authentifizierungsmethode „Benutzername und Kennwort“.
100
Site-Definition mit SFTP-Verbindung – Benutzername und Kennwort
1. Geben Sie einen aussagekräftigen Namen für den Server ein.
2. Wählen Sie in der Liste neben „Verbinden“ die Option „SFTP“ und geben Sie eine gültige SFTP-Adresse und einen Port ein.
3. Wählen Sie als Authentifizierungsmethode „Benutzername und Kennwort“ und geben Sie Ihren Benutzernamen und Ihr Kennwort ein.
Um die Verbindung zu überprüfen, klicken Sie auf „Testen“.
4. Geben Sie ein gültiges Stammverzeichnis ein.
5. Geben Sie eine gültige Web-URL ein.
6. Klicken Sie auf „Speichern“.
Szenario 2
Sie haben einen Schlüssel, der keine Passphrase verlangt. Außerdem möchten Sie mit einer Kombination aus Benutzername und Identitätsdatei
eine SFTP-Verbindung herstellen. In diesem Fall wird die Authentifizierungsmethode „Private Schlüsseldatei“ verwendet.
101
Hinweis:
Site-Definition mit SFTP-Verbindung – Identitätsdatei
1. Geben Sie einen aussagekräftigen Namen für den Server ein.
2. Wählen Sie in der Liste neben „Verbinden“ die Option „SFTP“ und geben Sie eine gültige SFTP-Adresse und einen Port ein.
3. Wählen Sie als Authentifizierungsmethode „Private Schlüsseldatei“ und geben Sie dann Folgendes an:
Benutzername
Gültige Identitätsdatei
Lassen Sie das Feld „Passphrase“ leer und wählen Sie „Passphrase speichern“.
Dreamweaver unterstützt nur OpenSSH-Schlüsseldateien.
Um die Verbindung zu überprüfen, klicken Sie auf „Testen“.
4. Geben Sie ein gültiges Stammverzeichnis ein.
5. Geben Sie eine gültige Web-URL ein.
6. Klicken Sie auf „Speichern“.
Szenario 3
Sie haben einen Schlüssel, der eine Passphrase benötigt. Außerdem möchten Sie mit der Kombination aus Benutzernamen, Identitätsdatei und
der Passphrase für den Schlüssel eine SFTP-Verbindung herstellen. In diesem Fall wird die Authentifizierungsmethode „Private Schlüsseldatei“
verwendet.
102
Hinweis:
Hinweis:
Hinweis:
Site-Definition mit SFTP-Verbindung – Identitätsdatei und Passphrase
1. Geben Sie einen aussagekräftigen Namen für den Server ein.
2. Wählen Sie in der Liste neben „Verbinden“ die Option „SFTP“ und geben Sie eine gültige SFTP-Adresse und einen Port ein.
3. Wählen Sie als Authentifizierungsmethode „Private Schlüsseldatei“ und geben Sie dann Folgendes an:
Benutzername
Gültige Identitätsdatei
Passphrase für die Identitätsdatei
Dreamweaver unterstützt nur OpenSSH-Schlüsseldateien.
Um die Verbindung zu überprüfen, klicken Sie auf „Testen“.
4. Geben Sie ein gültiges Stammverzeichnis ein.
5. Geben Sie eine gültige Web-URL ein.
6. Klicken Sie auf „Speichern“.
Port 22 ist der Standardport für eingehende SFTP-Verbindungen.
Die übrigen Optionen entsprechen den Einstellungen für FTP-Verbindungen. Weitere Informationen finden Sie im vorangegangenen Abschnitt.
FTPS-Verbindungen
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.
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
103
FTP über SSL/TLS (implizite Verschlüsselung)
FTP über SSL/TLS (explizite Verschlüsselung)
Keine.
Vertrauenswürdig
Nur Befehlskanal verschlüsseln
Nur Benutzername und Kennwort verschlüsseln
„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.
Der Server beendet die Verbindung, wenn die Sicherheitsanforderung nicht empfangen
wird.
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:
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.
Hinweis: Wenn sich die Anmeldeinformationen eines selbstsignierten Zertifikats auf dem Server geändert haben, werden Sie aufgefordert,
die neuen Anmeldeinformationen zu akzeptieren.
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.
Hinweis: 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.
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.
Wählen Sie diese Option aus, wenn Sie lediglich Ihren Benutzernamen und Ihr
Kennwort verschlüsseln möchten.
8. Klicken Sie auf „Speichern“, um das Dialogfeld 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.
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“.
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.
Eine ausführliche Erläuterung dieser Option finden Sie unter Kategorie „Erweiterte Einstellungen“.
104
8. Klicken Sie auf „Speichern“, um das Dialogfeld 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.
Hinweis: 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“.
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ührliche Erläuterung dieser Option finden Sie unter Kategorie „Erweiterte Einstellungen“.
11. Klicken Sie auf „Speichern“, um das Dialogfeld 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.
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“.
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\“.
105
Hinweis:
Nach oben
Nach oben
Nach oben
Nach oben
Geben Sie Ihren RDS-Benutzernamen und das entsprechende Kennwort ein.
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ührliche Erläuterung dieser Option finden Sie unter Kategorie „Erweiterte Einstellungen“.
9. Klicken Sie auf „Speichern“, um das Dialogfeld 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
Microsoft Visual SourceSafe wird seit Dreamweaver CS5 nicht mehr unterstützt.
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“.
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“.
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
finden Sie unter Testserver einrichten.
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 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
106
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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.
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.
Hinweis: 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.
107
Einrichten einer lokalen Version Ihrer Site
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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. Im Dialogfeld „Sites verwalten“ in Dreamweaver
können Sie mehrere Sites einrichten und verwalten.
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 Videotutorial zum Einrichten einer neuen Dreamweaver-Site finden Sie hier.
108
Versionskontrolle und erweiterte Einstellungen
Nach oben
Nach oben
Standard-Bilderordner
Hyperlinks relativ zu
Hinweis:
Web-URL
Kategorie „Versionskontrolle“
Kategorie „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.
Kategorie „Erweiterte Einstellungen“
Lokale Info
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.
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 finden Sie unter Absolute, zum Dokument relative und zum Site-Stammordner relative
Pfade.
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 vorhandener Hyperlinks nicht automatisch angepasst. Die Einstellung wirkt sich nur auf neue
Hyperlinks aus, die Sie grafisch in Dreamweaver erstellen.
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.
Die URL der Website. Die Web-URL dient in Dreamweaver zum Erstellen von site-stamm-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" />
109
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Groß-/Kleinschreibung bei Hyperlinks überprüfen
Cache aktivieren
Ein zum Dokument relativer Hyperlink besitzt eine andere Syntax, nämlich:
<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.
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.
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.
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.
„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.
110
Optionen des Dialogfelds „Sites verwalten“
Hinweis:
Nach oben
Neue Site erstellen
Sites importieren
Neue Business Catalyst-Site erstellen
Business Catalyst-Site importieren
Löschen
Bearbeiten
Optionen des Dialogfelds „Sites verwalten“ (ab CS6)
Optionen des Dialogfelds „Sites verwalten“ (CS5 and CS5.5)
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.
Es ist nicht möglich, im Dialogfeld „Sites verwalten“ eine Verbindung zu einem Remote-Server herzustellen oder Dateien darauf zu
veröffentlichen. Eine Anleitung zum Herstellen einer Verbindung zu einem Remote-Server finden Sie unter Verbindungsaufbau zu einem Remote-
Server. Wenn Sie eine Verbindung zu einer vorhandenen Website herstellen wollen, sollten Sie den Artikel Bearbeiten einer vorhandenen Remote-
Website lesen.
Optionen des Dialogfelds „Sites verwalten“ (ab CS6)
1. Wählen Sie „Site“ > „Sites verwalten“.
Eine Siteliste wird angezeigt. Wenn Sie noch keine Sites erstellt haben, ist die Siteliste leer.
2. Führen Sie einen der folgenden Schritte aus:
Klicken Sie auf die Schaltfläche „Neue Site“, um eine neue Dreamweaver-Site zu erstellen. Geben Sie dann im
Dialogfeld „Site-Definition“ den Namen und Pfad für die neue Site an. Weitere Informationen finden Sie unter Einrichten einer lokalen
Version Ihrer Site.
Klicken Sie auf die Schaltfläche „Site importieren“, um eine Site zu importieren. Weitere Informationen finden Sie unter
Importieren und Exportieren von Site-Einstellungen.
Hinweis: Beim Importieren werden nur Site-Einstellungen eingelesen, die zuvor in Dreamweaver 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 finden Sie unter Einrichten einer lokalen Version Ihrer Site.
Klicken Sie auf die Schaltfläche Neue Business Catalyst-Site“, um eine neue Business Catalyst-
Site zu erstellen. Weitere Informationen finden Sie unter Temporäre Business Catalyst-Site erstellen.
Klicken Sie auf die Schaltfläche „Business Catalyst-Site importieren“, um eine vorhandene Business
Catalyst-Site zu importieren. Weitere Informationen finden Sie unter Business Catalyst-Site importieren.
3. Für vorhandene Sites stehen die folgenden Optionen zur Verfügung:
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 „Löschen“. Diese Aktion kann nicht
rückgängig gemacht bzw. widerrufen werden.
ermöglicht die Bearbeitung von Angaben wie Benutzername, Kennwort und der Serverinformationen einer vorhandenen
Dreamweaver-Site. Wählen Sie in der Siteliste die vorhandene Site aus und klicken Sie auf die Schaltfläche „Bearbeiten“, um Änderungen
111
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Duplizieren
Exportieren
Nach oben
Neue Site
Bearbeiten
Duplizieren
Entfernen
Exportieren//Importieren
an der Site vorzunehmen. (Das Dialogfeld „Site-Definition“ wird geöffnet.) Weitere Informationen zum Bearbeiten der verschiedenen Site-
Optionen erhalten Sie, wenn Sie in den verschiedenen Kategorien des Dialogfelds „Site-Definition“ auf die Schaltfläche „Hilfe“ klicken.
erstellt eine Kopie einer vorhandenen Site. Um eine Site zu duplizieren, wählen Sie 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“.
ermöglicht den Export der Einstellungen der ausgewählten Site als XML-Datei (*.ste). Weitere Informationen finden Sie
unter Importieren und Exportieren von Site-Einstellungen.
Optionen des Dialogfelds „Sites verwalten“ (CS5 und CS5.5)
1. Wählen Sie „Site“ > „Sites verwalten“ und wählen Sie anschließend 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“.
ermöglicht die Erstellung einer neuen Site. Wenn Sie auf die Schaltfläche „Neue Site“ 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 Einrichten einer lokalen
Version Ihrer Site.
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
Verbindungsaufbau zu einem Remote-Server.
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“.
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.
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 Importieren und Exportieren von Site-Einstellungen.
Hinweis: 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
finden Sie unter Einrichten einer lokalen Version Ihrer Site.
Dreamweaver-Sites
112
Dateiverwaltung
113
Testen der Dreamweaver-Site
Nach oben
Nach oben
Richtlinien zum Testen von Sites
Verwenden von Berichten zum Testen von Sites
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:
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.
Testen Sie die Anzeige der Seiten mit verschiedenen Browsern und Plattformen.
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.
Ü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.
Ü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.
Führen Sie zum Testen und zur Fehlersuche in der ganzen Site mehrere Siteberichte aus.
Sie können die gesamte Site auf Fehler überprüfen, beispielsweise auf unbenannte Dokumente, leere Tags und überflüssige verschachtelte Tags.
Überprüfen Sie den Code, um Tag- oder Syntaxfehler ausfindig zu machen.
Aktualisieren und warten Sie eine Site, auch nachdem sie veröffentlicht wurde.
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
Werkzeuge oder speziell dafür vorgesehene externe Programme verwenden.
Nehmen Sie an den Diskussionsforen teil.
Die Dreamweaver-Diskussionsforen finden Sie auf der Adobe-Website unter www.adobe.com/go/dreamweaver_newsgroup.
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 bei der Veröffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
Verwenden von Berichten zum Testen von Sites
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.
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
114
Hinweis:
Hinweis:
Hinweis:
Ausgecheckt von
Design Notes
Zuletzt bearbeitete
Kombinierbare verschachtelte FONT-Tags
ALT-Text fehlt
Überflüssige verschachtelte Tags
Entfernbare leere Tags
Unbenannte Dokumente
welche Dateien kürzlich geändert wurden. Sie können Design Notes-Berichte noch verfeinern, indem Sie Name-Wert-Parameter festlegen.
Um die Arbeitsablaufberichte ausführen zu können, muss eine Verbindung mit der 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.
Darüber hinaus haben Sie die Möglichkeit, über die Adobe Dreamweaver Exchange Website verschiedene Berichtstypen zu
Dreamweaver hinzuzufügen.
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.
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.
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.
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.
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:
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.
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.
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>.
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.
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
115
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
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.
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.
Weitere Empfehlungen von Adobe
Tutorial „Probleme bei der Veröffentlichung beheben“
116
Dateien synchronisieren
Nach oben
Dateien in der lokalen Site und der Remote-Site 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.
Hinweis: Ist die Remote-Site ein FTP-Server (und kein Netzwerkserver), werden die Dateien über FTP synchronisiert.
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.
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“.
Hinweis: 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).
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“.
Hinweis: Bevor Sie die Dateien synchronisieren können, müssen Sie eine Vorschau der Aktionen anzeigen, die Dreamweaver hierzu
ausführt.
117
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
118
Dateiinformationen in Design Notes speichern
Nach oben
Nach oben
Design Notes
Design Notes für eine Site aktivieren und deaktivieren
Design Notes mit Dateien verknüpfen
Mit Design Notes arbeiten
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"
Hinweis: 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.
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.
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.)
Hinweis: 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
119
Nach oben
Nach oben
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.
Hinweis: 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“.
Hinweis: 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.
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“.
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.
Hinweis: 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
6. Klicken Sie auf die Registerkarte „Basis-Info“. Sie sehen, dass der neue Statuswert im Popupmenü „Status“ angezeigt wird.
Hinweis: Als Status kann jeweils nur ein benutzerdefinierter Wert definiert werden. Wenn Sie diese Schritte wiederholen, ersetzt
120
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.
Hinweis: Wenn Sie die Option „Design Notes verwalten“ deaktiviert haben, bevor Sie auf „Entfernen“ klicken, löscht Dreamweaver alle
Design Notes-Dateien der Site.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
121
Frühere Dateiversionen wiederherstellen (Contribute-Benutzer)
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Hinweis:
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.
Contribute muss auf demselben Computer wie Dreamweaver installiert sein.
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“.
Weitere Empfehlungen von Adobe
122
Dateien vom Server abrufen/auf dem Server bereitstellen
Nach oben
Nach oben
Dateiübertragung und abhängige Dateien
Dateiübertragung im Hintergrund
Dateien von einem Remote-Server abrufen
Dateien auf einem Remote-Server bereitstellen
Dateiübertragungen verwalten
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.
Hinweis: 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.
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
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
123
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
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.
Hinweis: 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“.
Hinweis: 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.
Hinweis: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll anzuzeigen.
Dateien auf einem Remote-Server bereitstellen
124
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
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“.
Hinweis: 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.
Hinweis: Klicken Sie im erweiterten Bedienfeld „Dateien“ auf die Schaltfläche „FTP-Protokoll“, um das Protokoll anzuzeigen.
125
Nach oben
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.
Hinweis: 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“.
Hinweis: 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.
Verwandte Hilfethemen
Tutorial „Bereitstellen von Dateien“
Tutorial „Probleme bei der Veröffentlichung beheben“
Rechtliche Hinweise | Online-Datenschutzrichtlinie
126
Verwalten von Dateien und Ordnern
Nach oben
Nach oben
Dateien und Ordner
Bedienfeld „Dateien“ verwenden
Dateien und Ordner anzeigen
Mit Dateien im Bedienfeld „Dateien“ arbeiten
Nach Dateien in der Dreamweaver-Site suchen
Nicht verwendete Dateien identifizieren und löschen
Sites, einen Server und lokale Laufwerke aufrufen
Angezeigte Datei- und Ordnerdetails im erweiterten Bedienfeld „Dateien“ anpassen
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.
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.
Hinweis: 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
Hinweis: 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.
127
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
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.
Bedienfeld „Dateien“ öffnen oder schließen
Wählen Sie „Fenster“ > „Dateien“.
Suchdateien im Dateibedienfeld (nur Mac OS-, Creative Cloud-Benutzer)
Verwenden Sie die Live-Suche, um Dateien aufgrund des Dateinamens oder eines in den Dateien vorkommenden Texts zu suchen. Es wird die im
Bedienfeld „Dateien“ ausgewählte Site verwendet. Ist dort keine Site ausgewählt, ist die Suchoption nicht verfügbar. Weitere Informationen finden
Sie unter Dateien anhand von Dateinamen oder Inhalten suchen.
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 .
Hinweis: 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-
128
Nach oben
Ansicht“, „Testserver“ oder „Repository-Ansicht“ aus.
Hinweis: 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
Hinweis: Eine Remote-Site, einen Testserver oder ein SVN-Repository können Sie erst anzeigen, nachdem Sie sie eingerichtet haben.
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.
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.
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.
129
Nach oben
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).
Hinweis: 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.
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.
Hinweis: 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.
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.
130
Nach oben
Nach oben
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.
Hinweis: 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.
Hinweis: 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“.
Wichtig: 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.
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.
Hinweis: 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.
131
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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
132
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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
[print]Überblick über das Bedienfeld „Dateien“
Rechtliche Hinweise | Online-Datenschutzrichtlinie
133
Ein- und Auschecken von Dateien
Nach oben
Nach oben
Eincheck-/Auschecksystem
Eincheck-/Auschecksystem einrichten
Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken
Dateien mit WebDAV ein- und auschecken
Dateien mithilfe von Subversion (SVN) abrufen und einchecken
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.
Hinweis: 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.
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.
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.
Hinweis: 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.
134
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
Wichtig: 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.
Hinweis: 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.
Hinweis: 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.
Wichtig: 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.
Hinweis: 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.
Wichtig: 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
135
Nach oben
Nach oben
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“.
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.
Hinweis: 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.
Wichtig: 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 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“.
136
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“.
Hinweis: 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.
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“.
Hinweis: 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).
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“ .
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.
Hinweis: 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.
Hinweis: 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-
137
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.
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“.
Hinweis: 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.
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.
Hinweis: 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.
138
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.
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.
Offlinemodus
139
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
140
Dateien auf Unterschiede vergleichen
Nach oben
Lokale und Remote-Dateien vergleichen
Vor dem Bereitstellen von Dateien einen Vergleich durchführen
Beim Synchronisieren von Dateien einen Vergleich durchführen
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.
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.
Tool Auszuwählende Datei
FileMerge /usr/bin/opendiff (oder /Developer/usr/bin/opendiff)
BBEdit /usr/bin/bbdiff
TextWrangler /usr/bin/twdiff
Hinweis: Der Ordner „usr“ ist normalerweise im Finder ausgeblendet. Sie können in Dreamweaver über die Schaltfläche „Durchsuchen“ darauf
zugreifen.
Hinweis: 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“.
Hinweis: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrückter Ctrl-Taste auf die ausgewählten Dateien.
141
Nach oben
Nach oben
Daraufhin wird das Tool für den Dateivergleich gestartet und die beiden Dateien werden verglichen.
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“.
Hinweis: 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“.
Hinweis: 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“.
Hinweis: 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.
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.
142
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).
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
143
Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen
ausschließen (Cloaking)
Nach oben
Nach oben
Site-Cloaking
Site-Cloaking aktivieren und deaktivieren
Cloaking für Site-Dateien und Site-Ordner festlegen und aufheben
Cloaking für bestimmte Dateitypen festlegen und aufheben
Cloaking für alle Dateien und Ordner aufheben
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
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: Ü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.
144
Nach oben
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
145
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“.
Hinweis: Durch diesen Schritt wird auch die Option „Cloaking von Dateien mit Erweiterung“ in der Kategorie „Cloaking“ des Dialogfelds
„Site-Definition“ deaktiviert.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
146
Layout und Entwurf
Dreamweaver CS5: CSS Inspect
Geoff Blake (23. April 2010)
Video-Lehrgang
147
Gestalten von Seitenlayouts mit CSS
Nach oben
Nach oben
CSS-Seitenlayout
Struktur des CSS-Seitenlayouts
Seiten mit einem CSS-Layout erstellen
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-Tag. 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, fügen Sie div-Tags in
die Seite ein, fügen ihren Inhalt ein und positionieren die div-Tags an unterschiedlichen Stellen. Im Gegensatz zu Tabellenzellen, die nur innerhalb
der Zeilen und Spalten einer Tabelle vorkommen dürfen, können div-Tags überall auf einer Webseite platziert werden. Sie können div-Tags
absolut positionieren (durch Angabe von x- und y-Koordinaten) oder relativ positionieren (durch Angabe ihrer Position in Bezug auf den aktuellen
Speicherort). div-Tags lassen sich auch durch Angabe von Floats, Auffüllungen und Rändern positionieren. Gemäß der modernen Webstandards
ist dies die bevorzugte Methode.
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. Dreamweaver erleichtert 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 absolut positionierter Elemente (AP-Elemente) zu erstellen. In Dreamweaver ist ein
AP-Element (absolut positioniertes Element) ein HTML-Seitenelement – also 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.
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-Tag. 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: ein großes
„container“-div-Tag sowie zwei weitere Tags. Innerhalb des Container-Tags befinden sich ein div-Tag für die Randleiste (sidebar) sowie ein div-
Tag für den Hauptinhalt (mainContent).
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>
148
</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 für keinen der div-Tags Stile zugewiesen worden. Wenn keine CSS-Regeln definiert sind, wird jedes div-Tag
samt seinen Inhalten an einer Standardposition auf der Seite platziert. 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.
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 „container“-div-Tag 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 linksbündig ausgerichtet ist. Das Anwenden der Regel auf das
„container“-div-Tag 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 „sidebar“-div-Tag (für die Randleiste) eine Breite von 200 Pixel, einen 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 „sidebar“-div-Tag mit „float: left“. Diese Eigenschaft
schiebt das „sidebar“-div-Tag auf die linke Seite des „container“-div-Tags. Das Anwenden der Regel auf das „sidebar“-div-Tag hat folgende
Auswirkungen:
149
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 „mainContent“-div-Tag ü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 „container“-div-Tags und der linken Seite des „mainContent“-div-Tags sorgt. Außerdem
bewirkt die Regel einen Abstand von 20 Pixel auf der rechten, linken und unteren Seite des „mainContent“-div-Tags. Das Anwenden der Regel auf
das „mainContent“-div-Tag hat folgende Auswirkungen:
Der vollständige Code sieht folgendermaßen aus:
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
<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-->
150
Hinweis:
Nach oben
Hinweis:
Fest
Fließend
Zum Head-Bereich hinzufügen
Neue Datei erstellen
Verknüpfen mit bestehender Datei
<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>
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.
Seiten mit einem CSS-Layout erstellen
In Dreamweaver können Sie eine neue Seite erstellen, die bereits ein CSS-Layout enthält. Dabei 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.
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.
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:
Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die Texteinstellungen des
Besuchers angepasst.
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ü „Dok.typ“ einen Dokumenttyp aus.
6. Wählen Sie einen Speicherort für das CSS des Layouts im Popupmenü „Layout-CSS“ aus.
Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu.
Schreibt die die CSS-Layoutinformationen in ein neues, externes CSS-Stylesheet und verknüpft das neue Stylesheet
mit der von Ihnen erstellten Seite.
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“.
151
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hinweis:
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“.
Wenn Sie die Option „Verknüpfen mit bestehender Datei“ auswä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.
Die bedingten Kommentare im Internet Explorer, die Probleme bei der Wiedergabe in Internet Explorer umgehen helfen, 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.
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.
Erstellen eines Links zu einem externen CSS-Stylesheet
152
Bedienfeld „CSS Designer“
Hinweis:
Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-
Stile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können.
Bedienfeld „CSS Designer“
Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden.
Die Änderungen werden automatisch in der Live-Ansicht dargestellt und die entsprechende CSS-Datei wird ebenfalls aktualisiert. Um Sie darüber
zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der betroffenen Datei für einige Zeit (ca. 8 Sekunden lang)
hervorgehoben.
Erstellen und Anfügen von Stylesheets
Definieren von Medienabfragen
Definieren von CSS-Selektoren
Kopieren und Einfügen von Stilen
Festlegen von CSS-Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Festlegen der Rahmeneigenschaften
Deaktivieren oder Löschen von Eigenschaften
Tastaturbefehle
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Deaktivieren der Live-Hervorhebung
Siehe auch
Gestalten von Seitenlayouts mit CSS
CSS3-Übergangseffekte
153
Quellen
@Medien
Selektoren
Eigenschaften
Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen:
Listet alle CSS-Stylesheets auf, die mit dem Dokument verknüpft sind. In diesem Bereich können Sie eine CSS-Datei an das Dokument
anhängen oder die Stile innerhalb des Dokuments definieren.
Listet alle Medienabfragen der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie kein CSS auswählen, werden in diesem
Bereich alle Medienabfragen des Dokuments angezeigt.
Listet alle Selektoren der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie auch eine Medienabfrage auswählen, wird die
Selektorenliste auf die Selektoren dieser Medienabfrage eingegrenzt. Ist kein CSS und auch keine Medienabfrage ausgewählt, werden hier alle
Selektoren des Dokuments angezeigt.
Wenn Sie im Bereich „@Medien“ „GLOBAL“ auswählen, werden alle Selektoren angezeigt, die nicht in einer Medienabfrage der ausgewählten
Quelle enthalten sind.
Zeigt die Eigenschaften an, die Sie für den angegebenen Selektor festlegen können. Weitere Informationen finden Sie unter
Festlegen von Eigenschaften.
Der CSS Designer ist kontextsensitiv. Das bedeutet, dass Sie für den jeweiligen Kontext bzw. für das ausgewählte Seitenelement die zugehörigen
Selektoren und Eigenschaften anzeigen können. Und wenn Sie einen Selektor auswählen, werden in den entsprechenden Bereichen die
zugehörige Quelle und Medienabfrage hervorgehoben.
Videotutorial
Add style to web pages with the CSS Designer panel
CSS Designer mit den Eigenschaften des in der Live-Ansicht ausgewählten Bilds
CSS Designer mit den Eigenschaften der in der Live-Ansicht ausgewählten Überschrift
154
Hinweis:
Nach oben
Nach oben
Hinweis:
Nach oben
Wenn Sie ein Seitenelement auswählen, wird im Bereich „Selektoren“ „COMPUTED“ angezeigt. Klicken Sie auf einen Selektor, um die
zugehörige Quelle, Medienabfrage und die zugehörigen Eigenschaften anzuzeigen.
Um alle Selektoren anzuzeigen, können Sie im Bereich „Quellen“ den Eintrag „ALLE QUELLEN“ auswählen.
Um·Selektoren·anzuzeigen,·die·zu·keiner·Medienabfrage·in·der·ausgewählten·Quelle·gehören,·klicken·Sie·im·Bereich·„@Medien“
auf·„GLOBAL“.
Videotutorial
Using the CSS Designer panel
Erstellen und Anfügen von Stylesheets
1. Klicken Sie im Bedienfeld „CSS Designer“ im Bereich „Quellen“ auf und dann auf eine der folgenden Optionen:
„Neue CSS-Datei erstellen“: Um eine neue CSS-Datei zu erstellen und sie ans Dokument anzuhängen
„Vorhandene CSS-Datei anhängen“: Um eine vorhandene CSS-Datei ans Dokument anzuhängen
„Auf der Seite definieren“: Um ein CSS innerhalb des Dokuments zu definieren
Abhängig von der gewählten Option erscheint entweder das Dialogfeld „Neue CSS-Datei erstellen“ oder das Dialogfeld „Vorhandene CSS-
Datei anhängen“.
2. Klicken Sie auf „Durchsuchen“ um das Dateisystem zu durchsuchen und zu der CSS-Datei zu navigieren, die angehängt werden soll, bzw.,
wenn Sie eine neue CSS-Datei erstellen, um den Pfad anzugeben, in dem die neue Datei gespeichert werden soll.
3. Führen Sie einen der folgenden Schritte aus:
Aktivieren Sie die Option „Verknüpfung“, um das Dreamweaver-Dokument mit der CSS-Datei zu verknüpfen.
Klicken Sie auf „Import“, um die CSS-Datei in das Dokument zu importieren.
4. (Optional) Klicken Sie auf „Bedingte Verwendung“ und definieren Sie die Medienabfrage, die Sie mit der CSS-Datei verknüpfen wollen.
Definieren von Medienabfragen
1. Klicken Sie im „CSS Designer“ im Bereich „Quellen“ auf eine CSS-Quelle.
2. Klicken Sie auf im Bereich @Medien, um eine neue Medienabfrage hinzuzufügen.
Das Dialogfeld „Medienabfrage definieren“ wird angezeigt, in dem die Bedingungen aller von Dreamweaver unterstützten Medienabfragen
aufgelistet sind.
3. Wählen Sie die erforderlichen Bedingungen aus. Ausführliche Informationen zu Medienabfragen finden Sie in diesem Artikel.
Stellen Sie sicher, dass Sie für alle ausgewählten Bedingungen gültige Werte festlegen. Andernfalls werden die entsprechenden
Medienabfragen nicht erfolgreich erstellt.
Bei mehreren Bedingungen werden momentan nur Operationen mit AND-Verknüpfungen unterstützt.
Wenn Sie Medienabfragebedingungen über den Code hinzufügen, werden im Dialogfeld „Medienabfrage definieren“ nur die unterstützten
Bedingungen eingelesen. Das Textfeld „Code“ im selben Dialogfeld zeigt jedoch den gesamten Code an (einschließlich nicht unterstützter
Bedingungen).
Wenn Sie in der Entwurfs- oder Live-Ansicht auf eine Medienabfrage klicken, wird der Viewport dieser Medienabfrage angezeigt. Um·den
vollständigen Viewport·anzuzeigen,·klicken·Sie·im·Bereich·„@Medien“ auf·„GLOBAL“.
Definieren von CSS-Selektoren
1. Wählen Sie im CSS Designer im Bereich „Quellen“ eine CSS-Quelle aus oder im Bereich „@Medien“ eine Medienabfrage.
2. Klicken Sie im Bereich „Selektoren“ auf . Abhängig von dem im Dokument ausgewählten Element identifiziert der CSS Designer den
relevanten Selektor (nach bis zu drei Regeln) und bietet ihn zur Auswahl an.
Sie können einen oder mehrere der folgenden Schritte durchführen:
Verwenden Sie die Nach-oben- und Nach-unten-Taste, um den Detailgrad des vorgeschlagenen Selektors zu erhöhen oder zu
verringern.
155
Nach oben
Hinweis:
Löschen Sie die vorgeschlagene Regel und geben Sie den erforderlichen Selektor ein. Sie müssen den Namen des Selektors
zusammen mit einer Kennzeichnung für den Selektortyp eingeben. Wenn Sie beispielsweise eine ID angeben, setzen Sie vor den
Namen ein „#“.
Um nach einem bestimmten Selektor zu suchen, verwenden Sie das Suchfeld oben im Bereich.
Um einen Selektor umzubenennen, klicken Sie auf den Selektor und geben den erforderlichen Namen ein.
Um die Selektoren anders anzuordnen, ziehen Sie die Selektoren auf die gewünschte Position.
Um einen Selektor von einer Quelle in eine andere zu verschieben, ziehen Sie den Selektor auf die gewünschte Quelle im Bereich
„Quellen“.
Um einen Selektor in der ausgewählten Quelle zu duplizieren, klicken Sie mit der rechten Maustaste auf den Selektor und wählen
„Duplizieren“.
Um einen Selektor zu duplizieren und zur Medienabfrage hinzuzufügen, klicken Sie mit der rechten Maustaste auf den Selektor, wählen
„In die Medienabfrage duplizieren“ und wählen dann die Medienabfrage aus.
Hinweis: Die Option „In die Medienabfrage duplizieren“ ist nur verfügbar, wenn die Quelle des ausgewählten Selektors
Medienabfragen enthält. Sie können einen Selektor aus einer bestimmten Quelle nicht in eine Medienabfrage einer anderen Quelle
kopieren.
Kopieren und Einfügen von Stilen
Sie können Stile jetzt aus einem Selektor kopieren und in einen anderen einfügen. Sie können alle Stile kopieren oder nur bestimmte
Stilkategorien wie Layout, Text und Rahmen.
Klicken Sie mit der rechten Maustaste auf den Selektor und wählen Sie eine der folgenden Optionen aus:
Stile mit dem CSS Designer kopieren
Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert.
„Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“
ist jedoch verfügbar.
Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die
Gesamtmenge
aller Selektoren eingefügt.
Kopieren und Einfügen von Stilen funktioniert auch bei unterschiedlichen Verknüpfungen von CSS-Dateien – (Import, Verknüpfung, Inline-
Stile).
Festlegen von CSS-Eigenschaften
Die Eigenschaften fallen in die folgenden Kategorien und werden oben im Bereich „Eigenschaften“ durch verschiedene Symbole dargestellt:
Layout
Text
Rahmen
Hintergrund
Andere (Liste von „Nur Text“-Eigenschaften, keine Eigenschaften mit visuellen Steuerelementen)
Bevor Sie die Eigenschaften eines CSS-Selektors bearbeiten, sollten Sie mithilfe der umgekehrten Überprüfung feststellen, welche
Elemente mit dem CSS-Selektor verknüpft sind. Dadurch können Sie beurteilen, ob alle Elemente, die bei der umgekehrten Überprüfung
hervorgehoben werden, tatsächlich geändert werden müssen. Weitere Informationen zur umgekehrten Überprüfung finden Sie unter dem
156
Hyperlink.
Aktivieren Sie die Option „Nur verwendete“, wenn nur die festgelegten Eigenschaften angezeigt werden sollen. Um alle Eigenschaften anzuzeigen,
die Sie für einen Selektor definieren können, deaktivieren Sie das Kontrollkästchen „Nur verwendete“.
Alle Eigenschaften
Nur verwendete Eigenschaften
Um eine Eigenschaft wie „width“ oder „border-collapse“ festzulegen, klicken Sie im Bereich „Eigenschaften“ auf die neben der Eigenschaft
angezeigte Option und wählen die erforderliche Option aus dem Popupmenü aus. Weitere Informationen zur Festlegung eines
Verlaufshintergrunds oder visueller Steuerelemente wie Rahmenradius, Auffüllung oder Position erhalten Sie über die folgenden Hyperlinks:
Festlegen von Rändern, Auffüllung und Position
Anwenden von Verläufen auf den Hintergrund
Verwenden flexibler Boxlayouts
Überschriebene Eigenschaften sind durchgestrichen formatiert.
157
Durchgestrichenes Format für überschriebene Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Im Bereich „Eigenschaften“ des CSS Designer können Sie über die visuellen Steuerelemente schnell die Eigenschaften für Ränder („margin),
Auffüllung („padding“) und Position („position“) festlegen. Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungsfeldern
Codekürzel für Ränder und Auffüllung angeben.
Eigenschaft „margin“ (Rand)
Eigenschaft „padding“ (Auffüllung)
Eigenschaft „position“
Klicken Sie auf einen Wert und geben Sie den neuen Wert ein. Sollen alle vier Werte gleich sein, können Sie diese gleichzeitig ändern. Dazu
klicken Sie zuerst auf das Verbindungssymbol in der Mitte ( ) und legen dann einen der Werte fest.
Sie können jederzeit einen der Werte deaktivieren ( ) oder löschen ( ), z. B. den linken Rand, aber die restlichen drei Werte beibehalten, also
den rechten, oberen und unteren Rand.
158
Symbole zum Deaktivieren, Löschen und Verknüpfen (hier für die Ränder)
Festlegen der Rahmeneigenschaften
Die Eigenschaften zur Einstellung des Rahmens sind in logische Registerkarten untergliedert, damit Sie sie schnell anzeigen oder ändern können.
Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungs-Textfeldern Codekürzel für Rahmen und Rahmenradius
angeben.
Um die Rahmeneigenschaften einzustellen, legen Sie zuerst die Eigenschaften in der Registerkarte „Alle Seiten“ fest. Die anderen Registerkarten
werden dann aktiviert und die Eigenschaften in der Registerkarte „Alle Seiten“ werden für einzelne Rahmen widergespiegelt.
Wenn Sie in den einzelnen Registerkarten für den Rahmen eine Eigenschaft ändern, ändert sich der Wert der entsprechenden Eigenschaft in der
Registerkarte „Alle Seiten“ in „nicht definiert“ (der Standardwert).
Im Beispiel unten, wurde die Rahmenfarbe auf Schwarz gesetzt und dann für den oberen Rahmen in Rot geändert.
159
Rahmenfarbe ist für alle Seiten auf Schwarz gesetzt
Der Code, der eingefügt wird, basiert auf der Voreinstellung für Kurzschrift oder Langschrift.
Wie in Versionen vor Dreamweaver CC 2014 sind Steuerelemente zum Löschen und Deaktivieren einzelner Eigenschaften verfügbar. Jetzt können
Sie die Steuerelemente zum Löschen und Deaktivieren jedoch auch auf Gruppenebene der Rahmensteuerelemente verwenden, um diese
Aktionen für alle Eigenschaften auszuführen.
160
Nach oben
Beim Überprüfen erhalten die Registerkarten mit eingestellten Werten den Fokus. Die höchste Priorität erhält die Registerkarte „Alle Seiten“, dann
„Oben“, „Rechts“, „Unten“ und „Links“. Wenn beispielsweise nur der obere Rahmen festgelegt ist, erhält die Registerkarte „Oben“ den Fokus und
die Registerkarte „Alle Seiten“ wird ignoriert, da für die Registerkarte „Alle Seiten“ keine Einstellungen vorgenommen wurden.
Deaktivieren oder Löschen von Eigenschaften
Im Bedienfeld „CSS Designer“ können Sie jede Eigenschaft deaktivieren oder löschen. In der folgenden Abbildung sehen Sie die Symbole zum
Deaktivieren ( ) und Löschen ( ) für die Eigenschaft „width“. Diese Symbole werden sichtbar, wenn Sie die Maus über die Eigenschaft führen.
Eigenschaft deaktivieren/löschen
Tastaturbefehle
Sie können mithilfe von Tastaturbefehlen CSS-Selektoren und Eigenschaften hinzufügen oder löschen. Die nachfolgende Tabelle beschreibt, wie
Sie zwischen den Eigenschaftsgruppen im Eigenschaftenfenster navigieren.
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Meist ist ein einzelner CSS-Selektor mit mehreren Seitenelementen verknüpft. Beispielsweise kann Text im Hauptinhalt einer Seite, in der
Kopfzeile oder in der Fußzeile jeweils mit demselben CSS-Selektor verknüpft sein. Wenn Sie die Eigenschaften des CSS-Selektors bearbeiten,
sind alle Elemente, die mit dem Selektor verknüpft sind, betroffen, einschließlich der Elemente, die Sie vielleicht gar nicht ändern wollen.
Mithilfe der Live-Hervorhebung können Sie anzeigen, welche Elemente mit einem CSS-Selektor verknüpft sind. Wenn Sie nur eines oder nur
einen Teil der Elemente ändern möchten, erstellen Sie am besten einen neuen CSS-Selektor für diese Elemente und bearbeiten dann dessen
Eigenschaften.
Um die Seitenelemente zu identifizieren, die mit einem CSS-Selektor verknüpft sind, halten Sie den Mauszeiger über den Selektor in der Live-
Ansicht (bei ausgeschaltetem Live-Code). Dreamweaver hebt die verknüpften Elemente durch punktierte Linien hervor.
Tastaturbefehl Arbeitsablauf
Strg+Alt+[Umschalt =] Fügt einen Selektor hinzu (wenn der Selektorenbereich aktiv ist)
Strg+Alt+S Fügt einen Selektor hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Strg+Alt+[Umschalt =] Fügt eine Eigenschaft hinzu (wenn der Eigenschaftenbereich
aktiv ist)
Strg+Alt+P Fügt eine Eigenschaft hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Auswählen + Löschen Ist ein Selektor ausgewählt, wird dieser gelöscht
Strg+Alt+(BildAuf/BildAb) Wechseln zwischen Bereichen – während Sie sich im
Eigenschaftenfenster befinden
161
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Um die Hervorhebung für die Elemente anzuzeigen, klicken Sie auf den Selektor. Die Elemente sind jetzt durch einem blauen Rand
hervorgehoben.
Um die blaue Hervorhebung um die Elemente wieder zu entfernen, klicken Sie erneut auf den Selektor.
In der folgenden Tabelle sind die Szenarios aufgeführt, in denen die Live-Hervorhebung nicht verfügbar ist.
Deaktivieren der Live-Hervorhebung
Die Live-Hervorhebung ist standardmäßig aktiviert. Um die Live-Hervorhebung zu deaktivieren, klicken Sie auf die Live-Ansicht-Optionen in der
Dokumentsymbolleiste und wählen „Live-Hervorhebung deaktivieren“.
Modus Live-Code Wird die Live-Hervorhebung angezeigt?
Code nicht zutreffend nicht zutreffend
Entwurf nicht zutreffend nicht zutreffend
Live AN
(Schaltfläche wird gedrückt) Nein
AUS Ja
162
Fließende Rasterlayouts (CC)
Hinweis:
Nach oben
Nach oben
Nach oben
Verwenden von fließenden Rasterlayouts
Erstellen von fließenden Rasterlayouts
Einfügen von fließenden Rasterelementen
Verschachteln von Elementen
Das Layout einer Website muss sich an die Abmessungen des Geräts, auf dem sie angezeigt wird, anpassen und entsprechend dieser
Abmessungen reagieren. Fließende Rasterlayouts bieten eine visuelle Möglichkeit, um unterschiedliche Layouts zu erstellen, die den Geräten
entsprechen, auf denen die Website angezeigt wird.
Beispielsweise wird Ihre Website auf Desktop-PCs, Tablet-PCs und auf Mobiltelefonen angezeigt. Mithilfe von fließenden Rasterlayouts können
Sie für jedes dieser Geräte ein anderes Layout festlegen. Abhängig davon, ob die Website auf einem Desktop-PC, einem Tablet-PC oder auf
einem Mobiltelefon angezeigt wird, wird das jeweils passende Layout verwendet.
Weitere Informationen: Vergleich von Adaptive Layout und Responsive Layout
Die Dreamweaver 12.2 Creative Cloud-Version enthält viele Verbesserungen für fließende Rasterlayouts, wie etwa die Unterstützung struktureller
HTML 5-Elemente und eine einfache Bearbeitung verschachtelter Elemente. Eine vollständige Liste der Verbesserungen finden Sie hier.
Für Dokumente mit fließendem Rasterlayout ist in Dreamweaver ab Version 13.1 kein Prüfmodus mehr verfügbar.
Verwenden von fließenden Rasterlayouts
In diesem Videotutorial erfahren Sie, wie Sie fließende Rasterlayouts einsetzen: Exploring fluid grid layouts.
Erstellen von fließenden Rasterlayouts
1. Wählen Sie „Datei“ > „Neues fließendes Rasterlayout“.
2. Der Standardwert für die Anzahl der Spalten im Raster wird in der Mitte des Medientyps angezeigt. Um die Anzahl der Spalten für ein Gerät
anzupassen, bearbeiten Sie den Wert nach Bedarf.
3. Um die Breite einer Seite im Verhältnis zur Bildschirmgröße festzulegen, legen Sie den Wert in Prozent fest.
4. Sie können zusätzlich die Breite des Stegs ändern. Der Steg ist der Abstand zwischen zwei Spalten.
5. Legen Sie die CSS-Optionen für die Seite fest.
Wenn Sie auf Erstellen klicken, werden Sie aufgefordert, eine CSS-Datei anzugeben. Folgende Möglichkeiten stehen zur Verfügung:
Erstellen einer neuen CSS-Datei
Öffnen einer vorhandenen CSS-Datei
Festlegen der CSS-Datei, die als CSS-Datei mit fließendem Raster zu öffnen ist
Standardmäßig wird das fließende Raster für Mobiltelefone angezeigt. Zudem wird das „Einfügen“-Bedienfeld für fließende Raster
eingeblendet. Erstellen Sie Ihr Layout mithilfe der Optionen im Bedienfeld „Einfügen“.
Um in die Ansicht zum Entwickeln eines Layouts für andere Geräte zu wechseln, klicken Sie auf das entsprechende Symbol unter der
Entwurfsansicht.
6. Speichern Sie die Datei. Wenn Sie die HTML-Datei speichern, werden Sie aufgefordert, abhängige Dateien wie boilerplate.css und
respond.min.js in einem Ordner auf Ihrem Computer zu speichern. Geben Sie den Pfad an und klicken Sie auf „Kopieren“.
boilerplate.css basiert auf den HTML5-Grundbausteinen. Das ist ein Satz an CSS-Stilen, die sicherstellen, dass Ihre Webseite auf mehreren
Geräten in gleicher Weise wiedergegeben wird. respond.min.js ist eine JavaScript-Bibliothek, die Unterstützung für Medienabfragen in
älteren Versionen des Browsers bietet.
Einfügen von fließenden Rasterelementen
163
Im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) werden die Elemente aufgelistet, die in einem fließenden Rasterlayout verwendet werden
können. Beim Einfügen der Elemente können Sie festlegen, ob Sie als fließende Elemente eingefügt werden sollen.
1. Wählen Sie im Bedienfeld „Einfügen“ die Elemente aus, die Sie einfügen möchten.
2. Wählen Sie in dem Dialogfeld, das angezeigt wird, eine Klasse aus oder geben Sie einen Wert für die ID ein. Das Klassenmenü zeigt
Klassen aus der CSS-Datei an, die Sie beim Erstellen der Seite angegeben haben.
3. Aktivieren Sie das Kontrollkästchen „Als fließendes Element einfügen“.
4. Wenn Sie ein eingefügtes Element auswählen, werden die Optionen zum Ausblenden, Duplizieren, Sperren oder Löschen des Divs
angezeigt. Bei Divs, die übereinander gelagert werden, wird die Option zum Ersetzen von Divs angezeigt.
Fließende Elemente auf einer Seite können mithilfe der linken und rechten Pfeiltaste zyklisch durchlaufen werden. Wählen Sie die
Elementbegrenzung aus und drücken Sie dann die Pfeiltaste.
Option Beschriftung Beschreibung
ADiv ersetzen Ersetzt das gegenwärtig ausgewählte
Element durch das darüber- oder
darunterliegende Element.
B Ausblenden
Blendet das Element aus..
Um ein Element wieder einzublenden,
führen Sie einen der folgenden Schritte
aus:
Um einen ID-Selektor einzublenden
ändern Sie in der in der CSS-Datei die
Eigenschaft „display“.
(display:block)
Um Klassenselektoren einzublenden,
entfernen Sie im Quellcode die
angewendete
Klasse(hide_<Medientyp>).
CEine Zeile nach oben Verschiebt das Objekt um eine Zeile
nach oben.
D Duplizieren Dupliziert das ausgewählte Element.
CSS-Code, der mit dem Element
verknüpft ist, wird ebenfalls dupliziert.
E Löschen
Löscht bei ID-Selektoren sowohl den
HTML- als auch den CSS-Code. Um nur
den HTML-Code zu löschen, drücken
Sie die Entf-Taste.
Bei Klassenselektoren wird nur der
HTML-Code gelöscht.
F Sperren Konvertiert das Element in ein absolut
positioniertes Element.
G Ausrichten
Bei Klassenselektoren fungiert die
Ausrichtungsoption als Schaltfläche, die
einen Rand mit dem Wert Null erzeugt.
Bei ID-Selektoren richtet die
Ausrichtungsoption das Element am
Raster aus.
164
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Verschachteln von Elementen
Um fließende Elemente innerhalb anderer fließender Elemente zu verschachteln, muss sich der Fokus innerhalb des übergeordneten Elements
befinden. Fügen Sie dann das erforderliche untergeordnete Element ein.
Die verschachtelte Duplizierung wird ebenfalls unterstützt. Beim verschachtelten Duplizieren wird der HTML-Code (des ausgewählten Elements)
dupliziert und der entsprechende Fließend-CSS-Code generiert. Absolute Elemente, die innerhalb des ausgewählten Elements enthalten sind,
werden entsprechend platziert. Verschachtelte Elemente können auch mithilfe der Schaltfläche „Duplizieren“ dupliziert werden.
Wenn Sie ein übergeordnetes Element löschen, werden der diesem Element entsprechende CSS-Code, dessen untergeordnete Elemente sowie
der zugehörige HTML-Code gelöscht. Verschachtelte Elemente können mithilfe der Schaltfläche „Löschen“ auch zusammen gelöscht werden
(Tastaturbefehl: Strg+Entf).
165
Verwenden von jQuery-UI-Widgets in Dreamweaver
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Hinweis:
Nach oben
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern,
aber Sie können keine neuen Spry-Widgets hinzufügen.
Widgets sind kleine Webanwendungen, die in Sprachen wie DHTML und JavaScript geschrieben sind und in eine Webseite eingefügt und von der
Webseite heraus ausgeführt werden können. Unter anderem bieten Web-Widgets eine Möglichkeit, Desktop-Erfahrungen auf einer Webseite zu
replizieren.
jQuery-UI-Widgets wie „Accordion“ (Akkordeon), „Tabs“ (Registerkarten), „Datepicker“ (Datumsauswahl), „Slider“ (Regler) und „Autocomplete“
(automatische Vervollständigung) bringen die vom Desktop gewohnte Anwendungserfahrung ins Web.
Das Widget „Tabs" beispielsweise kann verwendet werden, um die Funktionalität von Registerkarten in den Dialogfeldern von Desktop-
Anwendungen zu nachzubilden.
jQuery-Widgets einfügen
Wenn Sie ein jQuery-Widget einfügen, wird Folgendes automatisch in den Code eingefügt:
Verweise auf alle abhängigen Dateien
Ein script-Tag, das die jQuery-API für das Widget enthält. Weitere Widgets werden in dasselbe script-Tag eingefügt.
Weitere Informationen zu jQuery-Widgets finden Sie unter http://jqueryui.com/demos/
Für jQuery-Effekte wird kein externer Verweis zu jquery-1.8.24.min.js eingefügt, da diese Datei automatisch enthalten ist, wenn Sie
einen Effekt hinzufügen.
1. Setzen Sie den Cursor auf die Stelle der Seite, an der Sie das Widget einfügen wollen.
2. Wählen Sie „Einfügen“ > „jQuery UI“ und wählen Sie das Widget aus, das eingefügt werden soll.
Wenn Sie das Bedienfeld „Einfügen“ verwenden, finden Sie die Widgets unter der Kategorie „jQuery UI“.
Wenn Sie ein jQuery-Widget auswählen, werden seine Eigenschaften im Bedienfeld „Eigenschaften“ angezeigt.
Eine Vorschau der jQuery-Widgets können Sie in der Live-Ansicht oder in einem Browser, der jQuery-Widgets unterstützt, anzeigen.
jQuery-Widgets ändern
1. Wählen Sie das Widget aus, das Sie ändern wollen.
2. Ändern Sie im Bedienfeld „Eigenschaften“ die Eigenschaften.
Um beispielsweise für ein Tabs-Widget eine zusätzliche Registerkarte zu definieren, wählen Sie das Widget aus und klicken im Bedienfeld
„Eigenschaften“ auf „+“.
Videotutorial
Verwenden von jQuery-Widgets auf Webseiten in Dreamweaver
166
Verwenden von jQuery-Effekten in Dreamweaver
Nach oben
Nach oben
Spry-Effekte werden in Dreamweaver CC durch jQuery-Effekte ersetzt. Sie können zwar vorhandene Spry-Effekte auf der Seite noch ändern, aber
Sie können keine neuen Spry-Effekte hinzufügen.
jQuery-Effekte hinzufügen
Ereignisbasierte jQuery-Effekte
jQuery-Effekte entfernen
jQuery-Effekte hinzufügen
1. Wählen Sie in der Entwurfs- oder Codeansicht Ihres Dreamweaver-Dokuments das Element aus, auf das Sie einen jQuery Effekt anwenden
wollen.
2. Wählen Sie „Fenster“ > „Verhalten“, um das Bedienfeld „Verhalten“ zu öffnen.
3. Klicken Sie auf , wählen Sie „Effekte“ und dann den gewünschten Effekt.
Ein Bedienfeld mit spezifischen Einstellungen für den ausgewählten Effekt wird angezeigt.
4. Legen Sie die Einstellungen fest, etwa ein anderes Zielelement, auf das der Effekt angewendet werden soll, oder die Dauer des Effekts.
Als Zielelement kann das ursprünglich ausgewählte Element dienen oder auch ein anderes Element auf der Seite. Angenommen, Sie
möchten erreichen, dass beim Klicken auf ein Element A ein Element B ein- oder ausgeblendet wird, dann ist B das Zielelement.
5. Um mehrere jQuery-Effekte hinzuzufügen, wiederholen Sie die obigen Schritte.
Wenn Sie mehrere Effekte auswählen, wendet Dreamweaver die Effekte in der Reihenfolge an, in der sie im Bedienfeld „Verhalten“
angezeigt werden. Um die Reihenfolge der Effekte zu ändern, verwenden Sie die Pfeiltasten oben im Bedienfeld.
Dreamweaver fügt automatisch den entsprechenden Code in das Dokument ein. Wenn Sie beispielsweise den Effekt „fade“ ausgewählt haben,
wird der folgende Code eingefügt:
Verweise auf externe Dateien für abhängige Dateien, die für ein Funktionieren des jQuery-Effekts erforderlich sind:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script
src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
Der folgende Code wird auf das Element im body-Tag angewendet:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
Ein script-Tag wird zusammen mit dem folgenden Code eingefügt:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) {
obj[method](effect, {}, speed); }</script>
Ereignisbasierte jQuery-Effekte
Wenn Sie einen jQuery Effekt anwenden, wird er standardmäßig dem Ereignis „onClick“ zugewiesen. Im Bedienfeld „Verhalten“ können Sie
jedoch das auslösende Ereignis für einen Effekt ändern.
1. Wählen Sie das erforderliche Seitenelement aus.
2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Symbol „Festgelegte Ereignisse zeigen“.
3. Klicken Sie auf die Zeile, die dem aktuell angewendeten Effekt entspricht. Wenn Sie in die linke Spalte klicken, erscheint eine Dropdownliste
mit den verfügbaren Ereignissen.
4. Klicken Sie gegebenenfalls auf den Pfeil für die Dropdownliste und dann auf das erforderliche Ereignis.
167
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
jQuery-Effekte entfernen
1. Wählen Sie das erforderliche Seitenelement aus.
Das Bedienfeld „Verhalten“ listet alle Effekte auf, die auf das ausgewählte Seitenelement angewendet wurden.
2. Klicken Sie auf den zu löschenden Effekt und dann auf .
168
Visuelle Hilfsmittel für das Layout
Nach oben
Nach oben
Lineale einrichten
Layouthilfslinien einrichten
Hilfslinien mit Vorlagen verwenden
Layoutraster verwenden
Tracing-Bilder verwenden
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.
Hinweis: 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.
Hinweis: 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
169
Nach oben
Nach oben
Nach oben
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.
Hinweis: 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.
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.
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.
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.
Hinweis: 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.
170
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
171
Frames verwenden
Nach oben
Funktionsweise von Frames und Framesets
Entscheidung für oder gegen Frames
Verschachtelte Framesets
Framesets im Dokumentfenster verwenden
Frames und Framesets erstellen
Frames und Framesets auswählen
Dokumente in Frames öffnen
Speichern von Frame- und Frameset-Dateien
Eigenschaften und Attribute für Frames anzeigen und festlegen
Frameset-Eigenschaften anzeigen und festlegen
Frame-Inhalte durch Hyperlinks steuern
Inhalte für Browser ohne Frame-Unterstützung erstellen
Verwenden von JavaScript-Verhalten mit Frames
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.
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
172
Nach oben
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.
Hinweis: 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.
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
173
Nach oben
Nach oben
Navigationssteuerelemente statisch in einem Frame anzuzeigen, während sich der Inhalt eines anderen Frames ändern kann), bietet die
Verwendung von Frames durchaus Vorteile.
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.
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
174
Nach oben
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.
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.
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.)
Hinweis: 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).
Hinweis: 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“.
Hinweis: 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
175
Nach oben
Ziehen Sie einen Frame-Rahmen auf eine Stelle außerhalb der Seite oder auf den Rahmen des übergeordneten Frames.
Wenn der zu löschende Frame ein Dokument mit nicht gespeichertem Inhalt enthält, werden Sie von Dreamweaver aufgefordert, das Dokument zu
speichern.
Hinweis: 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.
Hinweis: 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
176
Nach oben
Nach oben
Nach oben
Frame-Rahmen angezeigt werden. Wählen Sie gegebenenfalls „Ansicht“ > „Visuelle Hilfsmittel“ > „Frame-Rahmen“ aus, um sie
einzublenden.)
Hinweis: 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.
Speichern von Frame- und Frameset-Dateien
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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
177
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.
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.
Hinweis: 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.
Hinweis: Das Festlegen der Randbreite und -höhe eines Rahmens entspricht nicht dem Festlegen der Ränder unter „Modifizieren“ >
„Seiteneigenschaften“.
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.
178
Nach oben
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.
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.
Hinweis: 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.
179
Nach oben
Nach oben
Nach oben
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
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
180
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
181
Inhalte in Tabellen darstellen
Nach oben
Nach oben
Nach oben
Tabellen
Rangfolge der Tabellenformatierung in HTML
Tabellenzellen verbinden und teilen
Tabellen und Inhalte einfügen
Tabellendaten importieren und exportieren
Tabellenelemente auswählen
Tabelleneigenschaften festlegen
Eigenschaften für Zellen, Zeilen und Spalten festlegen
Einfache Tabellenbearbeitung im erweiterten Tabellenmodus
Tabellen und Zellen formatieren
Tabellen, Spalten und Zeilen vergrößern oder verkleinern
Größe von Tabellen, Spalten und Zeilen ändern
Zeilen und Spalten hinzufügen und entfernen
Zellen verbinden und teilen
Zellen kopieren, einfügen und löschen
Tabellen verschachteln
Tabellen sortieren
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.
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).
Hinweis: Sie können das Layout von Seiten auch mit CSS-Positionierungsstilen erstellen.
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.
Hinweis: 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
182
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Hinweis: 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.
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.
183
Nach oben
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.
Hinweis: 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.
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.
184
Hinweis: 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.
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.
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.
185
Nach oben
Nach oben
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“.
Hinweis: 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.
BDie Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers.
Hinweis: 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.
Klasse Legt eine CSS-Klasse in der Tabelle fest.
Hinweis: 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
186
Nach oben
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.
Hinweis: 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.)
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.
Hinweis: 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
Hinweis: 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.
187
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: Breite und Höhe einer Zelle können in der Codeansicht auch direkt im HTML-Code geändert werden.
188
Nach oben
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.
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.
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.
Hinweis: 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.
189
Nach oben
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.
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.
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
190
Nach oben
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“.
Hinweis: 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.
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“ .
Hinweis: 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“ .
Hinweis: 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.
191
Nach oben
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.
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.
Hinweis: 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.
Hinweis: 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.
192
Nach oben
Nach oben
Hinweis: 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.
Hinweis: 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“).
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.
Verwandte Hilfethemen
[print]Gestalten von Seitenlayouts mit CSS
Rechtliche Hinweise | Online-Datenschutzrichtlinie
193
Anzeigen von Daten mit Spry
Hinweis:
Nach oben
Nach oben
Spry-Datensätze
Spry-Datensätze erstellen
Spry-Bereiche erstellen
Spry-Wiederholungsbereiche erstellen
Spry-Wiederholungslistenbereiche erstellen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
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 finden Sie unter
Entwurfsphasen-Feeds verwenden.
194
Hinweis:
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.
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.
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.
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
195
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
finden Sie unter Datensatzlayout auswählen.
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 finden Sie unter
Entwurfsphasen-Feeds verwenden.
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.
196
Hinweis:
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.
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 finden Sie in
der XPath-Spezifikation auf der W3C-Webseite 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 links oben im Dialogfeld mithilfe der Links-/Rechtspfeile auszuwä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: 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
finden Sie unter Datensatzlayout auswählen.
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“.
197
Ungerade-Zeilen-Klasse
Gerade-Zeilen-Klasse
Hover-Klasse
Auswahl-Klasse
Hinweis:
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.
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:
Ändert die Darstellung der Zeilen mit ungerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom
ausgewählten Klassenstil.
Ändert die Darstellung der Zeilen mit gerader Zeilennumber in der dynamischen Tabelle in Abhängigkeit vom
ausgewählten Klassenstil.
Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn der Mauszeiger
darüber bewegt wird.
Ändert das Erscheinungsbild einer Tabellenzeile in Abhängigkeit vom ausgewählten Klassenstil, wenn Sie darauf klicken.
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.
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
198
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.
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.
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.
199
Hinweis:
Hinweis:
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“.
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.
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.
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
200
Nach oben
Hinweis:
Auswahl umbrechen
Auswahl ersetzen
Hinweis:
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.
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). 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.
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:
Umschließt das Objekt mit einem neuen Bereich.
Ersetzt den aktuellen Bereich eines Objekts.
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.
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.
201
Nach oben
Hinweis:
Hinweis:
Im Bedienfeld „Bindungen“ werden die verfügbaren Daten des Datensatzes angezeigt.
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“.
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.
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.
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.
202
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Hinweis:
Im Bedienfeld „Bindungen“ werden die verfügbaren Daten des Datensatzes angezeigt.
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>
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.
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.
203
Anzeigen von Datenbank-Datensätzen
Nach oben
Nach oben
Nach oben
Datenbank-Datensätze
Serververhalten und Formatierungselemente
Formatierungs- und Seitenlayout-Elemente auf dynamische Daten anwenden
Durch das Ergebnis der Datenbank-Datensatzgruppen navigieren
Navigationsleiste für Datensatzgruppen erstellen
Benutzerdefinierte Navigationsleisten für Datensatzgruppen erstellen
Arbeitsschritte zum Entwurf von Navigationsleisten
Bereiche auf Grundlage von Datensatzgruppen-Ergebnissen einblenden und ausblenden
Mehrere Datensatzgruppen-Ergebnisse anzeigen
Dynamische Tabellen erstellen
Datensatzzähler erstellen
Vordefinierte Datenformate verwenden
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 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.
204
Nach oben
Nach oben
Nach oben
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:
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:
205
Nach oben
Nach oben
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.
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“.
Hinweis: 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:
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
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:
206
Nach oben
Nach oben
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“.
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.
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.
207
Nach oben
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.
Hinweis: 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“.
208
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.
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.
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}.
209
Nach oben
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.
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“.
210
7. Geben Sie einen Namen für das neue Format in die Spalte „Name“ ein. Klicken Sie auf „OK“.
Hinweis: 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“).
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
211
Medienabfragen erstellen
Nach oben
Durch Medienabfragen können Sie basierend auf den gemeldeten Eigenschaften eines Geräts CSS-Dateien festlegen (reaktionsfähiges Design).
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
Vorhandene Datei für die Medienabfrage verwenden
Andere Datei für die siteübergreifende Medienabfrage auswählen
Webseiten basierend auf Medienabfragen anzeigen
Siehe auch:
Reaktionsfähiges Design mithilfe von fließenden Rasterlayouts
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.
Bei Aktivierung dieser Option wird der folgende Code in die Datei eingefügt.
<meta name="viewport" content="width=device-width">
212
Beschreibung
„Min. Breite“ und „Max. Breite“
Hinweis:
CSS-Datei
Nach oben
Nach oben
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“.
Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise Mobiltelefon, TV, Tablet usw.
Die CSS-Datei wird für Geräte verwendet, deren gemeldete Breite im Bereich der angegebenen Werte
liegt.
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.
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">
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.
213
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Nach oben
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.
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.
214
Farben
Nach oben
Nach oben
Websichere Farben
Farbauswahl verwenden
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.
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“.
Hinweis: 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“ .
215
Rechtliche Hinweise | Online-Datenschutzrichtlinie
216
Spry-Framework
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis: Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
Weitere Empfehlungen von Adobe
Spry-Entwicklerhandbuch
217
CSS
Designing Pages in Dreamweaver with CSS3
Janine Warner (24. Februar 2011)
Lehrgang
Dreamweaver CS5: CSS Inspect
Geoff Blake (23. April 2010)
Video-Lehrgang
218
CSS-Stylesheets in einer Contribute-Site aktualisieren
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis: Ab Dreamweaver CC wurde das Bedienfeld „CSS-Stile“ durch den CSS Designer ersetzt. Weitere Informationen finden Sie unter „CSS
Designer“
.
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.
219
Festlegen von CSS-Eigenschaften
Nach oben
Font-family
Font-size
Font-style
Line-height
Text-decoration
Font-weight
Font-variant
Text-transform
Color
Ab Dreamweaver CC wurde das Bedienfeld „CSS-Stile“ durch den CSS Designer ersetzt. Weitere Informationen finden Sie unter CSS Designer.
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
Hintergrundeigenschaften für CSS-Stile definieren
Blockeigenschaften für CSS-Stile definieren
CSS-Boxeigenschaften für CSS-Stile definieren
Rahmeneigenschaften für CSS-Stile definieren
Listeneigenschaften für CSS-Stile definieren
Positionierungseigenschaften für CSS-Stile definieren
Erweiterungseigenschaften für CSS-Stile definieren
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:
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 an erster Stelle eine
Windows-Schrift an. Die Eigenschaft „font-family“ wird von beiden Browsern unterstützt.
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. Die Eigenschaft „font-size“ wird von beiden Browsern unterstützt.
Legt den Schriftstil fest (Standard, kursiv oder oblique). Die Standardeinstellung lautet „normal“. Die Eigenschaft „font-style“ wird
von beiden Browsern unterstützt.
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. Die Eigenschaft „line-height“ wird von beiden Browsern unterstützt.
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 für Hyperlinks die Einstellung „none“ wählen,
können Sie die Unterstreichung von Hyperlinks entfernen, indem Sie eine spezielle Klasse definieren. Die Eigenschaft „text-decoration“ wird
von beiden Browsern unterstützt.
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. Die Eigenschaft „font-weight“ wird von beiden Browsern unterstützt.
Formatiert den Text als Kapitälchen. Dreamweaver zeigt diese Eigenschaft nicht im Dokumentfenster an. Die Eigenschaft
„font-variant“ wird von Internet Explorer und Mozilla Firefox unterstützt.
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. Die Eigenschaft „text-transform“ wird von beiden Browsern unterstützt.
Bestimmt die Textfarbe. Die Eigenschaft „color“ 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“.
220
Nach oben
Background-color
Hintergrundbild
Background-repeat
Background-attachment
Background-position (X) und Background-position (Y)
Nach oben
Word-spacing
Letter-spacing
Vertical-align
Text-align
Text-indent
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:
Legt die Hintergrundfarbe für das Element fest. Die Eigenschaft „background-color“ wird von beiden Browsern
unterstützt.
Legt das Hintergrundbild für das Element fest. Das Background-image-Attribut wird von beiden Browsern unterstützt.
Legt fest, ob und wie das Hintergrundbild wiederholt werden soll. Die Eigenschaft „background-repeat“ 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.
Hinweis: Mit der Eigenschaft „background-repeat“ können Sie die Definition des body-Tags abwandeln und ein Hintergrundbild definieren,
das nicht mehrmals neben- oder untereinander angezeigt wird.
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 und Mozilla Firefox unterstützt.
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 die
Eigenschaft „background-attachment“ 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.)
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.).
Hinweis: Sie können auch negative Werte eingeben. Allerdings hängt die korrekte Anzeige vom Browser ab. Dreamweaver zeigt diese
Eigenschaft nicht im Dokumentfenster an.
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. Die Eigenschaft „letter-spacing“ wird von Internet Explorer ab Version 4 und von Mozilla Firefox ab Version 1unterstützt.
Bestimmt die vertikale Ausrichtung des Elements, auf das dieses Attribut angewendet wird. Dreamweaver zeigt diese
Eigenschaft nur dann im Dokumentfenster an, wenn es auf das <img>-Tag angewendet wird.
Legt fest, wie Text innerhalb des Elements ausgerichtet wird. Die Eigenschaft „text-align“ wird von beiden Browsern unterstützt.
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 diese Eigenschaft nur dann im Dokumentfenster
221
White-space
Display
Nach oben
Breite, Höhe
Float
Clear
Padding
Für alle gleich
Margin
Für alle gleich
Nach oben
Typ
an, wenn das Tag auf Elemente der Blockebene angewendet wird. Die Eigenschaft „text-indent“ wird von beiden Browsern unterstützt.
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 diese Eigenschaft nicht im Dokumentfenster an. Die
Eigenschaft „white-space“ wird von Mozilla Firefox ab Version 1 und von Internet Explorer ab Version 6 unterstützt.
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“.
CSS-Boxeigenschaften für CSS-Stile 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.)
Legen die Breite und Höhe des Elements fest.
Gibt die Seite an, an der die anderen Elemente das schwebende Element umfließen sollen. Das schwebende Element ist an die
Fließseite geheftet und andere Inhalte umfließen es auf der gegenüberliegenden Seite.
So wird beispielsweise ein Bild, das auf der rechten Seite schwebt, rechts fixiert und Inhalte, die Sie später hinzufügen, umfließen das Bild
links.
Weitere Informationen finden Sie unter http://css-tricks.com/all-about-floats/
(auf Englisch).
Gibt die Seiten eines Elements an, an denen keine anderen fließenden Elemente erlaubt sind.
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.
Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Auffüllung fest.
Bestimmt den Abstand zwischen dem Rand eines Elements (bzw. dem Seitenrand, wenn kein Rand vorhanden ist) und einem
anderen Element fest. Dreamweaver zeigt diese Eigenschaft 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.
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.
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.)
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.
222
Für alle gleich
Breite
Für alle gleich
Color
Für alle gleich
Nach oben
List-style-type
List-style-image
List-style-position
Nach oben
Position
Visibility
Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Rahmenstil fest.
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.
Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Breite fest.
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.
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.)
Legt das Aussehen von Aufzählungspunkten bzw. der Nummerierung fest. Die Eigenschaft „list-style-type“ wird von beiden
Browsern unterstützt.
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.
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.
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:
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.
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:
223
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Z-Index
Überlauf
Placement
Clip
Nach oben
Hinweis:
Page-break-before
Cursor
Filter
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.
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“.)
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.
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 3 mm.
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.
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.)
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.
Ä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. Diese Eigenschaft wird von Internet Explorer ab Version 4.0 sowie von und Mozilla Firefox ab
Version 1 unterstützt.
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 auf „OK“.
224
Rechtliche Hinweise | Online-Datenschutzrichtlinie
225
CSS-Link-Eigenschaften für eine ganze Seite festlegen
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hinweis:
Schriftart für Hyperlinks
Größe
Farbe für Hyperlinks
Besuchte Links
Rollover-Hyperlinks
Aktive Hyperlinks
Unterstreichungsstil
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
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.)
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.
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.
Definiert die standardmäßige Schriftgröße für Hyperlinktext.
Gibt die Farbe an, die Hyperlinktext zugewiesen werden soll.
Gibt die Farbe an, die besuchten Hyperlinks zugewiesen werden soll.
Gibt an, welche Farbe ein Hyperlink annimmt, wenn der Mauszeiger darauf positioniert ist.
Gibt an, welche Farbe ein Hyperlink annimmt, wenn ein Benutzer darauf klickt.
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.
226
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.
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
227
CSS-Überschrifteneigenschaften für eine ganze Seite festlegen
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Schrift für Überschriften
„Überschrift 1“ bis „Überschrift 6“
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
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.
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.
Definieren die Schriftgröße und die Schriftfarbe für bis zu sechs Ebenen von Überschriften-Tags.
228
CSS-Regeln verschieben/exportieren
Nach oben
Nach oben
Nach oben
Nach oben
CSS-Regeln in ein neues Stylesheet verschieben/exportieren
CSS-Regeln in ein vorhandenes Stylesheet verschieben/exportieren
CSS-Regeln durch Ziehen mit der Maus umstellen oder verschieben
Mehrere Regeln zum Verschieben auswählen
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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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“.
Hinweis: 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.
Mehrere Regeln zum Verschieben auswählen
229
Klicken Sie im Bedienfeld „CSS-Stile“ bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die gewünschten
Regeln.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
230
Erstellen eines Links zu einem externen CSS-Stylesheet
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.
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“.
Verwandte Hilfethemen
Auf Dreamweaver-Beispieldateien basierende Seiten erstellen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
231
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.
Hinweis: 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“).
Hinweis: 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.
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.
Hinweis: Wenn Sie auf ein Element klicken, um eine hervorgehobene Auswahl zu sperren, wird der Prüfmodus deaktiviert.
Adobe empfiehlt Haben Sie ein Tutorial, das Sie anderen zur Verfügung stellen wollen?
Dreamweaver CS5 -
CSS Inspect
Scott Fegette,
Dreamweaver Product
Manager
Videotutorial zum CSS-
Prüfmodus
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
232
Fließende Rasterlayouts (CC)
Hinweis:
Nach oben
Nach oben
Nach oben
Verwenden von fließenden Rasterlayouts
Erstellen von fließenden Rasterlayouts
Einfügen von fließenden Rasterelementen
Verschachteln von Elementen
Das Layout einer Website muss sich an die Abmessungen des Geräts, auf dem sie angezeigt wird, anpassen und entsprechend dieser
Abmessungen reagieren. Fließende Rasterlayouts bieten eine visuelle Möglichkeit, um unterschiedliche Layouts zu erstellen, die den Geräten
entsprechen, auf denen die Website angezeigt wird.
Beispielsweise wird Ihre Website auf Desktop-PCs, Tablet-PCs und auf Mobiltelefonen angezeigt. Mithilfe von fließenden Rasterlayouts können
Sie für jedes dieser Geräte ein anderes Layout festlegen. Abhängig davon, ob die Website auf einem Desktop-PC, einem Tablet-PC oder auf
einem Mobiltelefon angezeigt wird, wird das jeweils passende Layout verwendet.
Weitere Informationen: Vergleich von Adaptive Layout und Responsive Layout
Die Dreamweaver 12.2 Creative Cloud-Version enthält viele Verbesserungen für fließende Rasterlayouts, wie etwa die Unterstützung struktureller
HTML 5-Elemente und eine einfache Bearbeitung verschachtelter Elemente. Eine vollständige Liste der Verbesserungen finden Sie hier.
Für Dokumente mit fließendem Rasterlayout ist in Dreamweaver ab Version 13.1 kein Prüfmodus mehr verfügbar.
Verwenden von fließenden Rasterlayouts
In diesem Videotutorial erfahren Sie, wie Sie fließende Rasterlayouts einsetzen: Exploring fluid grid layouts.
Erstellen von fließenden Rasterlayouts
1. Wählen Sie „Datei“ > „Neues fließendes Rasterlayout“.
2. Der Standardwert für die Anzahl der Spalten im Raster wird in der Mitte des Medientyps angezeigt. Um die Anzahl der Spalten für ein Gerät
anzupassen, bearbeiten Sie den Wert nach Bedarf.
3. Um die Breite einer Seite im Verhältnis zur Bildschirmgröße festzulegen, legen Sie den Wert in Prozent fest.
4. Sie können zusätzlich die Breite des Stegs ändern. Der Steg ist der Abstand zwischen zwei Spalten.
5. Legen Sie die CSS-Optionen für die Seite fest.
Wenn Sie auf Erstellen klicken, werden Sie aufgefordert, eine CSS-Datei anzugeben. Folgende Möglichkeiten stehen zur Verfügung:
Erstellen einer neuen CSS-Datei
Öffnen einer vorhandenen CSS-Datei
Festlegen der CSS-Datei, die als CSS-Datei mit fließendem Raster zu öffnen ist
Standardmäßig wird das fließende Raster für Mobiltelefone angezeigt. Zudem wird das „Einfügen“-Bedienfeld für fließende Raster
eingeblendet. Erstellen Sie Ihr Layout mithilfe der Optionen im Bedienfeld „Einfügen“.
Um in die Ansicht zum Entwickeln eines Layouts für andere Geräte zu wechseln, klicken Sie auf das entsprechende Symbol unter der
Entwurfsansicht.
6. Speichern Sie die Datei. Wenn Sie die HTML-Datei speichern, werden Sie aufgefordert, abhängige Dateien wie boilerplate.css und
respond.min.js in einem Ordner auf Ihrem Computer zu speichern. Geben Sie den Pfad an und klicken Sie auf „Kopieren“.
boilerplate.css basiert auf den HTML5-Grundbausteinen. Das ist ein Satz an CSS-Stilen, die sicherstellen, dass Ihre Webseite auf mehreren
Geräten in gleicher Weise wiedergegeben wird. respond.min.js ist eine JavaScript-Bibliothek, die Unterstützung für Medienabfragen in
älteren Versionen des Browsers bietet.
Einfügen von fließenden Rasterelementen
233
Im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) werden die Elemente aufgelistet, die in einem fließenden Rasterlayout verwendet werden
können. Beim Einfügen der Elemente können Sie festlegen, ob Sie als fließende Elemente eingefügt werden sollen.
1. Wählen Sie im Bedienfeld „Einfügen“ die Elemente aus, die Sie einfügen möchten.
2. Wählen Sie in dem Dialogfeld, das angezeigt wird, eine Klasse aus oder geben Sie einen Wert für die ID ein. Das Klassenmenü zeigt
Klassen aus der CSS-Datei an, die Sie beim Erstellen der Seite angegeben haben.
3. Aktivieren Sie das Kontrollkästchen „Als fließendes Element einfügen“.
4. Wenn Sie ein eingefügtes Element auswählen, werden die Optionen zum Ausblenden, Duplizieren, Sperren oder Löschen des Divs
angezeigt. Bei Divs, die übereinander gelagert werden, wird die Option zum Ersetzen von Divs angezeigt.
Fließende Elemente auf einer Seite können mithilfe der linken und rechten Pfeiltaste zyklisch durchlaufen werden. Wählen Sie die
Elementbegrenzung aus und drücken Sie dann die Pfeiltaste.
Option Beschriftung Beschreibung
ADiv ersetzen Ersetzt das gegenwärtig ausgewählte
Element durch das darüber- oder
darunterliegende Element.
B Ausblenden
Blendet das Element aus..
Um ein Element wieder einzublenden,
führen Sie einen der folgenden Schritte
aus:
Um einen ID-Selektor einzublenden
ändern Sie in der in der CSS-Datei die
Eigenschaft „display“.
(display:block)
Um Klassenselektoren einzublenden,
entfernen Sie im Quellcode die
angewendete
Klasse(hide_<Medientyp>).
CEine Zeile nach oben Verschiebt das Objekt um eine Zeile
nach oben.
D Duplizieren Dupliziert das ausgewählte Element.
CSS-Code, der mit dem Element
verknüpft ist, wird ebenfalls dupliziert.
E Löschen
Löscht bei ID-Selektoren sowohl den
HTML- als auch den CSS-Code. Um nur
den HTML-Code zu löschen, drücken
Sie die Entf-Taste.
Bei Klassenselektoren wird nur der
HTML-Code gelöscht.
F Sperren Konvertiert das Element in ein absolut
positioniertes Element.
G Ausrichten
Bei Klassenselektoren fungiert die
Ausrichtungsoption als Schaltfläche, die
einen Rand mit dem Wert Null erzeugt.
Bei ID-Selektoren richtet die
Ausrichtungsoption das Element am
Raster aus.
234
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Verschachteln von Elementen
Um fließende Elemente innerhalb anderer fließender Elemente zu verschachteln, muss sich der Fokus innerhalb des übergeordneten Elements
befinden. Fügen Sie dann das erforderliche untergeordnete Element ein.
Die verschachtelte Duplizierung wird ebenfalls unterstützt. Beim verschachtelten Duplizieren wird der HTML-Code (des ausgewählten Elements)
dupliziert und der entsprechende Fließend-CSS-Code generiert. Absolute Elemente, die innerhalb des ausgewählten Elements enthalten sind,
werden entsprechend platziert. Verschachtelte Elemente können auch mithilfe der Schaltfläche „Duplizieren“ dupliziert werden.
Wenn Sie ein übergeordnetes Element löschen, werden der diesem Element entsprechende CSS-Code, dessen untergeordnete Elemente sowie
der zugehörige HTML-Code gelöscht. Verschachtelte Elemente können mithilfe der Schaltfläche „Löschen“ auch zusammen gelöscht werden
(Tastaturbefehl: Strg+Entf).
235
Anwenden von Verläufen auf den Hintergrund
Verläufe in Webbrowsern rendern
Hintergrundbilder und Verläufe austauschen
Mithilfe des Bedienfelds „CSS Designer“ können sie Verläufe auf den Hintergrund der Website anwenden. Die Eigenschaft „gradient“ ist in der
Hintergrundkategorie verfügbar.
Eigenschaft „gradient“
Klicken Sie auf das Symbol neben der Eigenschaft „gradient“, um das Dialogfeld für die Definition von Farbverläufen zu öffnen. In diesem
Bedienfeld können Sie folgende Aktionen ausführen:
Farben aus unterschiedlichen Farbmodellen auswählen (RGBa, Hexadezimal und HSLa) und anschließend verschiedene Farbkombinationen
als Farbfelder speichern.
Um die neue Farbe auf die Originalfarbe zurückzusetzen, klicken Sie auf die Originalfarbe (K).
Um die Reihenfolge der Farbfelder zu ändern, ziehen Sie die Farbfelder auf die gewünschte Position.
Um ein Farbfeld zu entfernen, ziehen Sie das Farbfeld aus dem Bedienfeld heraus.
Farbunterbrechungsregler einsetzen, um komplexe Verläufe zu erzeugen. Klicken Sie auf eine beliebige Stelle zwischen den beiden
Standardreglern, um einen neuen Farbunterbrechungsregler zu erstellen. Um einen Farbunterbrechungsregler zu entfernen, ziehen Sie den
Farbunterbrechungsregler aus dem Bedienfeld heraus.
Einen Winkel für den linearen Verlauf festlegen.
Ein Muster definieren, das wiederholt wird. Dazu aktivieren Sie die Option „Repeating“.
Verläufe als Farbfelder speichern.
236
Hinweis:
Hinweis:
Nach oben
Hinweis:
Nach oben
Dialogfeld für die Definition von Farbverläufen
A. Farbunterbrechung B. Verlaufsfeld C. Verlaufsfeld hinzufügen D. Linear wiederholen E. Farbmodelle F. Pipette G. Farbregler H.
Helligkeitsregler I. Deckkraftregler J. Farbfeld hinzufügen K. Farbfeld L. Originalfarbe M. Ausgewählte Farbe N. Winkel für linearen Verlauf
Die Pipette ist erst ab der Dreamweaver-Version 13.1 verfügbar.
Betrachten wir einmal den folgenden Code:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00)
100%)
57deg: Der Winkel des linearen Verlaufs
rgba(255, 255, 255, 1.00): Die Farbe für den ersten Farbunterbrechungsregler
0%: Bezeichnet den Farbunterbrechungsregler
Für Farbunterbrechungsregler werden in Dreamweaver nur Prozentwerte unterstützt. Wenn Sie andere Werte wie „px“ oder „em“
angeben, werden sie von Dreamweaver als „null“ interpretiert. Auch unterstützt Dreamweaver keine CSS-Farben. Wenn Sie solche Farben
dennoch im Code angeben, werden sie als „null“ interpretiert.
Verläufe in Webbrowsern rendern
Wenn Sie Verläufe als Hintergrund verwenden, können Sie Dreamweaver so konfigurieren, dass die Verläufe auf verschiedenen Webbrowsern
korrekt wiedergegeben werden. Dreamweaver fügt geeignete Hersteller-Präfixe in den Code ein, wodurch die Webbrowser die Verläufe richtig
anzeigen können.
Zusätzlich zum W3C-Format unterstützt Dreamweaver die folgenden Hersteller-Präfixe:
Webkit
Mozilla
Opera
Dreamweaver-Live-Ansicht (altes Webkit-Format)
Standardmäßig erzeugt Dreamweaver nur Hersteller-Präfixe für das Webkit und die Dreamweaver-Live-Ansicht. Damit weitere Hersteller-Präfixe
erzeugt werden, müssen Sie im Dialogfeld „Voreinstellungen“ („Voreinstellungen“ > „CSS-Stile“) die entsprechenden Optionen aktivieren.
Für Objektschatten werden immer Webkit- und W3C-Präfixe erstellt, auch wenn sie in den Voreinstellungen nicht ausgewählt wurden.
Änderungen an den Verläufen werden auch in den herstellerspezifischen Syntaxen widergespiegelt. Wenn Sie eine vorhandene Datei mit
herstellerspezifischen Syntaxen in Dreamweaver CC öffnen, stellen Sie sicher, dass die erforderlichen Hersteller-Präfixe in den Voreinstellungen
aktiviert sind. Denn standardmäßig aktualisiert Dreamweaver nur Webkit- und Dreamweaver-Live-Ansicht-Code, wenn Sie Verläufe verwenden
oder ändern. Das bedeutet, die anderen herstellerspezifischen Syntaxen in Ihrem Code werden dann nicht aktualisiert.
Hintergrundbilder und Verläufe austauschen
Sie können die Reihenfolge der Hintergrundbilder und Verläufe (in der sie im Code erscheinen) mit nur einem Mausklick ändern.
Klicken Sie im CSS Designer neben der Eigenschaft
url
oder
gradient
auf .
237
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hintergrund austauschen
Dreamweaver CC enthält eine grundlegende Implementierung der Funktion zum Austauschen des Hintergrunds. Bei mehreren Werten
oder Bildern kann es vorkommen, dass der Austausch nicht erwartungsgemäß funktioniert. Oder wenn Sie beispielsweise ein Bild, ein zweites Bild
und dann einen Verlauf auf den Hintergrund angewendet haben, erfolgt der Austausch des Verlaufs in der folgenden Reihenfolge: Verlauf, zweites
Bild, erstes Bild.
238
CSS-Code formatieren
Nach oben
Nach oben
Nach oben
Einstellungen für das Formatieren von CSS-Code festlegen
CSS-Code in einem CSS-Stylesheet manuell formatieren
Eingebetteten CSS-Code manuell 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.
Hinweis: Die Voreinstellungen für die CSS-Codeformatierung gelten nur für CSS-Regeln in externen oder eingebetteten Stylesheets (nicht
jedoch für Inline-Stile).
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“.
Hinweis: 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.
Hinweis: Sie können „Befehle“ > „Quellcodeformatierung anwenden“ auswählen, um das gesamte Dokument entsprechend den
festgelegten Voreinstellungen für die Codeformatierung zu formatieren.
Verwandte Hilfethemen
239
Rechtliche Hinweise | Online-Datenschutzrichtlinie
240
Erweiterungen für die CSS3-Unterstützung im Bedienfeld „CSS-Stile“
(CS 5.5)
Nach oben
Nach oben
Nach oben
Nach oben
CSS3-Eigenschaften mithilfe des Popupbedienfelds anwenden
Mehrere Wertsätze angeben
Eigenschaften in der Kategorieansicht suchen
Kompatibilität mit Browsern sicherstellen
Vorschau der Änderungen in der Live-Ansicht
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.
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.
241
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
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
Verbesserte Unterstützung für CSS3 in DW CS5.5
Unterstützung der Eigenschaften „text-
shadow“, „box-shadow“, „border-radius“ und
„border-image“... Weitere Informationen
http://goo.gl/BpHhu
von Preran Kurnool
http://blogs.adobe.com/pre...
Wirken Sie mit an der
Adobe Community Help
242
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
243
CSS-Regeln bearbeiten
Nach oben
Nach oben
Nach oben
Regeln im Bedienfeld „CSS-Stile“ (Modus „Aktuell“) bearbeiten
Regeln im Bedienfeld „CSS-Stile“ (Modus „Alle“) bearbeiten
Namen von CSS-Selektoren ändern
Bei Bedarf können Sie sowohl interne als auch externe Regeln, die Sie auf ein Dokument angewendet haben, mühelos ändern.
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“.
Hinweis: 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“.
Hinweis: 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).
Verwandte Hilfethemen
Festlegen von Texteigenschaften im Eigenschafteninspektor
244
Rechtliche Hinweise | Online-Datenschutzrichtlinie
245
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
246
Arbeiten mit div-Tags
Nach oben
div-Tags einfügen und bearbeiten
CSS-Layout-Blöcke
AP-Elemente verwenden
(Nur Creative Cloud-Benutzer): Sieben neue semantische Tags sind verfügbar, wenn Sie „Einfügen“ > „Layoutobjekte“ wählen. Die neuen Tags
sind: Article, Aside, HGroup, Navigation, Section, Header und Footer. Weitere Informationen finden Sie unter Semantische HTML5-Elemente aus
dem Bedienfeld „Einfügen“ einfügen.
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.
Hinweis: 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.
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.
Hinweis: In Dreamweaver wird eine Warnmeldung angezeigt, wenn Sie eine ID eingeben, die bereits mit einem anderen Tag in Ihrem
Dokument verknüpft ist.
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.)
Div-Tags bearbeiten
Nachdem Sie ein div-Tag eingefügt haben, können Sie es verändern oder Inhalt hinzufügen.
Hinweis: 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.
247
Nach oben
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.
Platzhaltertext in einem Div-Tag ändern
Markieren Sie den Text und überschreiben Sie ihn oder drücken Sie die Entf-Taste.
Hinweis: 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“.
Hinweis: 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
Hinweis: 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.
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.
248
Nach oben
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“.
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.
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
249
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:
<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.
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.
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.
Hinweis: 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
250
Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ aus und aktivieren Sie die Konturen für AP-Div-Tags oder die CSS-Layout-Konturen.
Hinweis: 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.)
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).
251
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.
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.
Hinweis: 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.
Hinweis: Ü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.
„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.
252
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).
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: Ü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.
253
Ü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.
Hinweis: 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.
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.
254
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.
Hinweis: 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.
Hinweis: 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.
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.
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.
255
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.
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.
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.
Hinweis: 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.
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.
256
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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Seiten mit einem CSS-Layout erstellen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
257
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
258
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.
Hinweis: Ü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.
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.
Verwandte Hilfethemen
Überblick über die Symbolleiste „Stilwiedergabe“
Rechtliche Hinweise | Online-Datenschutzrichtlinie
259
Bedienfeld „CSS-Stile“
Nach oben
Das Bedienfeld „CSS-Stile“ im Modus „Aktuell“
Bedienfeld „CSS-Stile“ im Modus „Alle“
Schaltflächen und Ansichten des Bedienfelds „CSS-Stile“
Bedienfeld „CSS-Stile“ öffnen
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.
260
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“):
261
Nach oben
.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.
Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen während Ihrer Arbeit in einer
Vorschau verfolgen können.
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.
262
Nach oben
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.
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.
263
Nach oben
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.
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
264
Gestalten von Seitenlayouts mit CSS
Nach oben
Nach oben
CSS-Seitenlayout
Struktur des CSS-Seitenlayouts
Seiten mit einem CSS-Layout erstellen
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-Tag. 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, fügen Sie div-Tags in
die Seite ein, fügen ihren Inhalt ein und positionieren die div-Tags an unterschiedlichen Stellen. Im Gegensatz zu Tabellenzellen, die nur innerhalb
der Zeilen und Spalten einer Tabelle vorkommen dürfen, können div-Tags überall auf einer Webseite platziert werden. Sie können div-Tags
absolut positionieren (durch Angabe von x- und y-Koordinaten) oder relativ positionieren (durch Angabe ihrer Position in Bezug auf den aktuellen
Speicherort). div-Tags lassen sich auch durch Angabe von Floats, Auffüllungen und Rändern positionieren. Gemäß der modernen Webstandards
ist dies die bevorzugte Methode.
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. Dreamweaver erleichtert 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 absolut positionierter Elemente (AP-Elemente) zu erstellen. In Dreamweaver ist ein
AP-Element (absolut positioniertes Element) ein HTML-Seitenelement – also 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.
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-Tag. 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: ein großes
„container“-div-Tag sowie zwei weitere Tags. Innerhalb des Container-Tags befinden sich ein div-Tag für die Randleiste (sidebar) sowie ein div-
Tag für den Hauptinhalt (mainContent).
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>
265
</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 für keinen der div-Tags Stile zugewiesen worden. Wenn keine CSS-Regeln definiert sind, wird jedes div-Tag
samt seinen Inhalten an einer Standardposition auf der Seite platziert. 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.
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 „container“-div-Tag 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 linksbündig ausgerichtet ist. Das Anwenden der Regel auf das
„container“-div-Tag 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 „sidebar“-div-Tag (für die Randleiste) eine Breite von 200 Pixel, einen 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 „sidebar“-div-Tag mit „float: left“. Diese Eigenschaft
schiebt das „sidebar“-div-Tag auf die linke Seite des „container“-div-Tags. Das Anwenden der Regel auf das „sidebar“-div-Tag hat folgende
Auswirkungen:
266
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 „mainContent“-div-Tag ü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 „container“-div-Tags und der linken Seite des „mainContent“-div-Tags sorgt. Außerdem
bewirkt die Regel einen Abstand von 20 Pixel auf der rechten, linken und unteren Seite des „mainContent“-div-Tags. Das Anwenden der Regel auf
das „mainContent“-div-Tag hat folgende Auswirkungen:
Der vollständige Code sieht folgendermaßen aus:
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
<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-->
267
Hinweis:
Nach oben
Hinweis:
Fest
Fließend
Zum Head-Bereich hinzufügen
Neue Datei erstellen
Verknüpfen mit bestehender Datei
<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>
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.
Seiten mit einem CSS-Layout erstellen
In Dreamweaver können Sie eine neue Seite erstellen, die bereits ein CSS-Layout enthält. Dabei 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.
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.
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:
Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die Texteinstellungen des
Besuchers angepasst.
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ü „Dok.typ“ einen Dokumenttyp aus.
6. Wählen Sie einen Speicherort für das CSS des Layouts im Popupmenü „Layout-CSS“ aus.
Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu.
Schreibt die die CSS-Layoutinformationen in ein neues, externes CSS-Stylesheet und verknüpft das neue Stylesheet
mit der von Ihnen erstellten Seite.
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“.
268
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hinweis:
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“.
Wenn Sie die Option „Verknüpfen mit bestehender Datei“ auswä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.
Die bedingten Kommentare im Internet Explorer, die Probleme bei der Wiedergabe in Internet Explorer umgehen helfen, 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.
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.
Erstellen eines Links zu einem externen CSS-Stylesheet
269
Bedienfeld „CSS Designer“
Hinweis:
Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-
Stile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können.
Bedienfeld „CSS Designer“
Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden.
Die Änderungen werden automatisch in der Live-Ansicht dargestellt und die entsprechende CSS-Datei wird ebenfalls aktualisiert. Um Sie darüber
zu informieren, dass die zugehörige Datei geändert wurde, wird die Registerkarte der betroffenen Datei für einige Zeit (ca. 8 Sekunden lang)
hervorgehoben.
Erstellen und Anfügen von Stylesheets
Definieren von Medienabfragen
Definieren von CSS-Selektoren
Kopieren und Einfügen von Stilen
Festlegen von CSS-Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Festlegen der Rahmeneigenschaften
Deaktivieren oder Löschen von Eigenschaften
Tastaturbefehle
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Deaktivieren der Live-Hervorhebung
Siehe auch
Gestalten von Seitenlayouts mit CSS
CSS3-Übergangseffekte
270
Quellen
@Medien
Selektoren
Eigenschaften
Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen:
Listet alle CSS-Stylesheets auf, die mit dem Dokument verknüpft sind. In diesem Bereich können Sie eine CSS-Datei an das Dokument
anhängen oder die Stile innerhalb des Dokuments definieren.
Listet alle Medienabfragen der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie kein CSS auswählen, werden in diesem
Bereich alle Medienabfragen des Dokuments angezeigt.
Listet alle Selektoren der Quelle auf, die im Bereich „Quelle“ ausgewählt ist. Wenn Sie auch eine Medienabfrage auswählen, wird die
Selektorenliste auf die Selektoren dieser Medienabfrage eingegrenzt. Ist kein CSS und auch keine Medienabfrage ausgewählt, werden hier alle
Selektoren des Dokuments angezeigt.
Wenn Sie im Bereich „@Medien“ „GLOBAL“ auswählen, werden alle Selektoren angezeigt, die nicht in einer Medienabfrage der ausgewählten
Quelle enthalten sind.
Zeigt die Eigenschaften an, die Sie für den angegebenen Selektor festlegen können. Weitere Informationen finden Sie unter
Festlegen von Eigenschaften.
Der CSS Designer ist kontextsensitiv. Das bedeutet, dass Sie für den jeweiligen Kontext bzw. für das ausgewählte Seitenelement die zugehörigen
Selektoren und Eigenschaften anzeigen können. Und wenn Sie einen Selektor auswählen, werden in den entsprechenden Bereichen die
zugehörige Quelle und Medienabfrage hervorgehoben.
Videotutorial
Add style to web pages with the CSS Designer panel
CSS Designer mit den Eigenschaften des in der Live-Ansicht ausgewählten Bilds
CSS Designer mit den Eigenschaften der in der Live-Ansicht ausgewählten Überschrift
271
Hinweis:
Nach oben
Nach oben
Hinweis:
Nach oben
Wenn Sie ein Seitenelement auswählen, wird im Bereich „Selektoren“ „COMPUTED“ angezeigt. Klicken Sie auf einen Selektor, um die
zugehörige Quelle, Medienabfrage und die zugehörigen Eigenschaften anzuzeigen.
Um alle Selektoren anzuzeigen, können Sie im Bereich „Quellen“ den Eintrag „ALLE QUELLEN“ auswählen.
Um·Selektoren·anzuzeigen,·die·zu·keiner·Medienabfrage·in·der·ausgewählten·Quelle·gehören,·klicken·Sie·im·Bereich·„@Medien“
auf·„GLOBAL“.
Videotutorial
Using the CSS Designer panel
Erstellen und Anfügen von Stylesheets
1. Klicken Sie im Bedienfeld „CSS Designer“ im Bereich „Quellen“ auf und dann auf eine der folgenden Optionen:
„Neue CSS-Datei erstellen“: Um eine neue CSS-Datei zu erstellen und sie ans Dokument anzuhängen
„Vorhandene CSS-Datei anhängen“: Um eine vorhandene CSS-Datei ans Dokument anzuhängen
„Auf der Seite definieren“: Um ein CSS innerhalb des Dokuments zu definieren
Abhängig von der gewählten Option erscheint entweder das Dialogfeld „Neue CSS-Datei erstellen“ oder das Dialogfeld „Vorhandene CSS-
Datei anhängen“.
2. Klicken Sie auf „Durchsuchen“ um das Dateisystem zu durchsuchen und zu der CSS-Datei zu navigieren, die angehängt werden soll, bzw.,
wenn Sie eine neue CSS-Datei erstellen, um den Pfad anzugeben, in dem die neue Datei gespeichert werden soll.
3. Führen Sie einen der folgenden Schritte aus:
Aktivieren Sie die Option „Verknüpfung“, um das Dreamweaver-Dokument mit der CSS-Datei zu verknüpfen.
Klicken Sie auf „Import“, um die CSS-Datei in das Dokument zu importieren.
4. (Optional) Klicken Sie auf „Bedingte Verwendung“ und definieren Sie die Medienabfrage, die Sie mit der CSS-Datei verknüpfen wollen.
Definieren von Medienabfragen
1. Klicken Sie im „CSS Designer“ im Bereich „Quellen“ auf eine CSS-Quelle.
2. Klicken Sie auf im Bereich @Medien, um eine neue Medienabfrage hinzuzufügen.
Das Dialogfeld „Medienabfrage definieren“ wird angezeigt, in dem die Bedingungen aller von Dreamweaver unterstützten Medienabfragen
aufgelistet sind.
3. Wählen Sie die erforderlichen Bedingungen aus. Ausführliche Informationen zu Medienabfragen finden Sie in diesem Artikel.
Stellen Sie sicher, dass Sie für alle ausgewählten Bedingungen gültige Werte festlegen. Andernfalls werden die entsprechenden
Medienabfragen nicht erfolgreich erstellt.
Bei mehreren Bedingungen werden momentan nur Operationen mit AND-Verknüpfungen unterstützt.
Wenn Sie Medienabfragebedingungen über den Code hinzufügen, werden im Dialogfeld „Medienabfrage definieren“ nur die unterstützten
Bedingungen eingelesen. Das Textfeld „Code“ im selben Dialogfeld zeigt jedoch den gesamten Code an (einschließlich nicht unterstützter
Bedingungen).
Wenn Sie in der Entwurfs- oder Live-Ansicht auf eine Medienabfrage klicken, wird der Viewport dieser Medienabfrage angezeigt. Um·den
vollständigen Viewport·anzuzeigen,·klicken·Sie·im·Bereich·„@Medien“ auf·„GLOBAL“.
Definieren von CSS-Selektoren
1. Wählen Sie im CSS Designer im Bereich „Quellen“ eine CSS-Quelle aus oder im Bereich „@Medien“ eine Medienabfrage.
2. Klicken Sie im Bereich „Selektoren“ auf . Abhängig von dem im Dokument ausgewählten Element identifiziert der CSS Designer den
relevanten Selektor (nach bis zu drei Regeln) und bietet ihn zur Auswahl an.
Sie können einen oder mehrere der folgenden Schritte durchführen:
Verwenden Sie die Nach-oben- und Nach-unten-Taste, um den Detailgrad des vorgeschlagenen Selektors zu erhöhen oder zu
verringern.
272
Nach oben
Hinweis:
Löschen Sie die vorgeschlagene Regel und geben Sie den erforderlichen Selektor ein. Sie müssen den Namen des Selektors
zusammen mit einer Kennzeichnung für den Selektortyp eingeben. Wenn Sie beispielsweise eine ID angeben, setzen Sie vor den
Namen ein „#“.
Um nach einem bestimmten Selektor zu suchen, verwenden Sie das Suchfeld oben im Bereich.
Um einen Selektor umzubenennen, klicken Sie auf den Selektor und geben den erforderlichen Namen ein.
Um die Selektoren anders anzuordnen, ziehen Sie die Selektoren auf die gewünschte Position.
Um einen Selektor von einer Quelle in eine andere zu verschieben, ziehen Sie den Selektor auf die gewünschte Quelle im Bereich
„Quellen“.
Um einen Selektor in der ausgewählten Quelle zu duplizieren, klicken Sie mit der rechten Maustaste auf den Selektor und wählen
„Duplizieren“.
Um einen Selektor zu duplizieren und zur Medienabfrage hinzuzufügen, klicken Sie mit der rechten Maustaste auf den Selektor, wählen
„In die Medienabfrage duplizieren“ und wählen dann die Medienabfrage aus.
Hinweis: Die Option „In die Medienabfrage duplizieren“ ist nur verfügbar, wenn die Quelle des ausgewählten Selektors
Medienabfragen enthält. Sie können einen Selektor aus einer bestimmten Quelle nicht in eine Medienabfrage einer anderen Quelle
kopieren.
Kopieren und Einfügen von Stilen
Sie können Stile jetzt aus einem Selektor kopieren und in einen anderen einfügen. Sie können alle Stile kopieren oder nur bestimmte
Stilkategorien wie Layout, Text und Rahmen.
Klicken Sie mit der rechten Maustaste auf den Selektor und wählen Sie eine der folgenden Optionen aus:
Stile mit dem CSS Designer kopieren
Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert.
„Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“
ist jedoch verfügbar.
Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die
Gesamtmenge
aller Selektoren eingefügt.
Kopieren und Einfügen von Stilen funktioniert auch bei unterschiedlichen Verknüpfungen von CSS-Dateien – (Import, Verknüpfung, Inline-
Stile).
Festlegen von CSS-Eigenschaften
Die Eigenschaften fallen in die folgenden Kategorien und werden oben im Bereich „Eigenschaften“ durch verschiedene Symbole dargestellt:
Layout
Text
Rahmen
Hintergrund
Andere (Liste von „Nur Text“-Eigenschaften, keine Eigenschaften mit visuellen Steuerelementen)
Bevor Sie die Eigenschaften eines CSS-Selektors bearbeiten, sollten Sie mithilfe der umgekehrten Überprüfung feststellen, welche
Elemente mit dem CSS-Selektor verknüpft sind. Dadurch können Sie beurteilen, ob alle Elemente, die bei der umgekehrten Überprüfung
hervorgehoben werden, tatsächlich geändert werden müssen. Weitere Informationen zur umgekehrten Überprüfung finden Sie unter dem
273
Hyperlink.
Aktivieren Sie die Option „Nur verwendete“, wenn nur die festgelegten Eigenschaften angezeigt werden sollen. Um alle Eigenschaften anzuzeigen,
die Sie für einen Selektor definieren können, deaktivieren Sie das Kontrollkästchen „Nur verwendete“.
Alle Eigenschaften
Nur verwendete Eigenschaften
Um eine Eigenschaft wie „width“ oder „border-collapse“ festzulegen, klicken Sie im Bereich „Eigenschaften“ auf die neben der Eigenschaft
angezeigte Option und wählen die erforderliche Option aus dem Popupmenü aus. Weitere Informationen zur Festlegung eines
Verlaufshintergrunds oder visueller Steuerelemente wie Rahmenradius, Auffüllung oder Position erhalten Sie über die folgenden Hyperlinks:
Festlegen von Rändern, Auffüllung und Position
Anwenden von Verläufen auf den Hintergrund
Verwenden flexibler Boxlayouts
Überschriebene Eigenschaften sind durchgestrichen formatiert.
274
Durchgestrichenes Format für überschriebene Eigenschaften
Festlegen von Rändern, Auffüllung und Position
Im Bereich „Eigenschaften“ des CSS Designer können Sie über die visuellen Steuerelemente schnell die Eigenschaften für Ränder („margin),
Auffüllung („padding“) und Position („position“) festlegen. Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungsfeldern
Codekürzel für Ränder und Auffüllung angeben.
Eigenschaft „margin“ (Rand)
Eigenschaft „padding“ (Auffüllung)
Eigenschaft „position“
Klicken Sie auf einen Wert und geben Sie den neuen Wert ein. Sollen alle vier Werte gleich sein, können Sie diese gleichzeitig ändern. Dazu
klicken Sie zuerst auf das Verbindungssymbol in der Mitte ( ) und legen dann einen der Werte fest.
Sie können jederzeit einen der Werte deaktivieren ( ) oder löschen ( ), z. B. den linken Rand, aber die restlichen drei Werte beibehalten, also
den rechten, oberen und unteren Rand.
275
Symbole zum Deaktivieren, Löschen und Verknüpfen (hier für die Ränder)
Festlegen der Rahmeneigenschaften
Die Eigenschaften zur Einstellung des Rahmens sind in logische Registerkarten untergliedert, damit Sie sie schnell anzeigen oder ändern können.
Wenn Sie lieber direkt mit Code arbeiten, können Sie in den Schnellbearbeitungs-Textfeldern Codekürzel für Rahmen und Rahmenradius
angeben.
Um die Rahmeneigenschaften einzustellen, legen Sie zuerst die Eigenschaften in der Registerkarte „Alle Seiten“ fest. Die anderen Registerkarten
werden dann aktiviert und die Eigenschaften in der Registerkarte „Alle Seiten“ werden für einzelne Rahmen widergespiegelt.
Wenn Sie in den einzelnen Registerkarten für den Rahmen eine Eigenschaft ändern, ändert sich der Wert der entsprechenden Eigenschaft in der
Registerkarte „Alle Seiten“ in „nicht definiert“ (der Standardwert).
Im Beispiel unten, wurde die Rahmenfarbe auf Schwarz gesetzt und dann für den oberen Rahmen in Rot geändert.
276
Rahmenfarbe ist für alle Seiten auf Schwarz gesetzt
Der Code, der eingefügt wird, basiert auf der Voreinstellung für Kurzschrift oder Langschrift.
Wie in Versionen vor Dreamweaver CC 2014 sind Steuerelemente zum Löschen und Deaktivieren einzelner Eigenschaften verfügbar. Jetzt können
Sie die Steuerelemente zum Löschen und Deaktivieren jedoch auch auf Gruppenebene der Rahmensteuerelemente verwenden, um diese
Aktionen für alle Eigenschaften auszuführen.
277
Nach oben
Beim Überprüfen erhalten die Registerkarten mit eingestellten Werten den Fokus. Die höchste Priorität erhält die Registerkarte „Alle Seiten“, dann
„Oben“, „Rechts“, „Unten“ und „Links“. Wenn beispielsweise nur der obere Rahmen festgelegt ist, erhält die Registerkarte „Oben“ den Fokus und
die Registerkarte „Alle Seiten“ wird ignoriert, da für die Registerkarte „Alle Seiten“ keine Einstellungen vorgenommen wurden.
Deaktivieren oder Löschen von Eigenschaften
Im Bedienfeld „CSS Designer“ können Sie jede Eigenschaft deaktivieren oder löschen. In der folgenden Abbildung sehen Sie die Symbole zum
Deaktivieren ( ) und Löschen ( ) für die Eigenschaft „width“. Diese Symbole werden sichtbar, wenn Sie die Maus über die Eigenschaft führen.
Eigenschaft deaktivieren/löschen
Tastaturbefehle
Sie können mithilfe von Tastaturbefehlen CSS-Selektoren und Eigenschaften hinzufügen oder löschen. Die nachfolgende Tabelle beschreibt, wie
Sie zwischen den Eigenschaftsgruppen im Eigenschaftenfenster navigieren.
Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1).
Meist ist ein einzelner CSS-Selektor mit mehreren Seitenelementen verknüpft. Beispielsweise kann Text im Hauptinhalt einer Seite, in der
Kopfzeile oder in der Fußzeile jeweils mit demselben CSS-Selektor verknüpft sein. Wenn Sie die Eigenschaften des CSS-Selektors bearbeiten,
sind alle Elemente, die mit dem Selektor verknüpft sind, betroffen, einschließlich der Elemente, die Sie vielleicht gar nicht ändern wollen.
Mithilfe der Live-Hervorhebung können Sie anzeigen, welche Elemente mit einem CSS-Selektor verknüpft sind. Wenn Sie nur eines oder nur
einen Teil der Elemente ändern möchten, erstellen Sie am besten einen neuen CSS-Selektor für diese Elemente und bearbeiten dann dessen
Eigenschaften.
Um die Seitenelemente zu identifizieren, die mit einem CSS-Selektor verknüpft sind, halten Sie den Mauszeiger über den Selektor in der Live-
Ansicht (bei ausgeschaltetem Live-Code). Dreamweaver hebt die verknüpften Elemente durch punktierte Linien hervor.
Tastaturbefehl Arbeitsablauf
Strg+Alt+[Umschalt =] Fügt einen Selektor hinzu (wenn der Selektorenbereich aktiv ist)
Strg+Alt+S Fügt einen Selektor hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Strg+Alt+[Umschalt =] Fügt eine Eigenschaft hinzu (wenn der Eigenschaftenbereich
aktiv ist)
Strg+Alt+P Fügt eine Eigenschaft hinzu (wenn irgendeine Stelle in der
Anwendung aktiv ist)
Auswählen + Löschen Ist ein Selektor ausgewählt, wird dieser gelöscht
Strg+Alt+(BildAuf/BildAb) Wechseln zwischen Bereichen – während Sie sich im
Eigenschaftenfenster befinden
278
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Um die Hervorhebung für die Elemente anzuzeigen, klicken Sie auf den Selektor. Die Elemente sind jetzt durch einem blauen Rand
hervorgehoben.
Um die blaue Hervorhebung um die Elemente wieder zu entfernen, klicken Sie erneut auf den Selektor.
In der folgenden Tabelle sind die Szenarios aufgeführt, in denen die Live-Hervorhebung nicht verfügbar ist.
Deaktivieren der Live-Hervorhebung
Die Live-Hervorhebung ist standardmäßig aktiviert. Um die Live-Hervorhebung zu deaktivieren, klicken Sie auf die Live-Ansicht-Optionen in der
Dokumentsymbolleiste und wählen „Live-Hervorhebung deaktivieren“.
Modus Live-Code Wird die Live-Hervorhebung angezeigt?
Code nicht zutreffend nicht zutreffend
Entwurf nicht zutreffend nicht zutreffend
Live AN
(Schaltfläche wird gedrückt) Nein
AUS Ja
279
CSS3-Übergangseffekte
Nach oben
Zielregel
Übergang bei
Verwenden Sie für alle Eigenschaften denselben Übergang.
Verwenden Sie für jede Eigenschaft einen anderen Übergang.
Eigenschaft
Dauer
Verzögerung
Mithilfe des Bedienfelds „CSS-Übergänge“ können Sie CSS3-Übergänge erstellen, bearbeiten und löschen.
Um einen CSS3-Übergang zu erstellen, erstellen Sie eine Übergangsklasse. Dazu legen Sie die Werte für die Übergangseigenschaften des
Elements fest. Wenn Sie ein Element auswählen, bevor Sie eine die Übergangsklasse erstellen, wird die Übergangsklasse automatisch auf das
ausgewählte Element angewendet.
Sie können den erzeugten CSS-Code entweder zum aktuellen Dokument hinzufügen oder eine externe CSS-Datei angeben.
Erstellen und Anwenden von CSS3-Übergangseffekten
1. (Optional) Wählen Sie ein Element aus (Absatz, Überschrift usw.), auf das Sie den Übergang anwenden möchten. Stattdessen können Sie
auch einen Übergang erstellen und ihn später auf ein Element anwenden.
2. Wählen Sie „Fenster“ > „CSS-Übergänge“
3. Klicken Sie auf .
4. Erstellen Sie mithilfe der Optionen im Dialogfeld „Neuer Übergang“ eine Übergangsklasse.
Geben Sie einen Namen für den Selektor ein. Es kann irgendein CSS-Selektor angegeben werden, etwa ein Tag, eine Regel,
eine ID oder ein zusammengesetzter Selektor. Wenn Sie beispielsweise auf alle <hr>-Tags Übergangseffekte anwenden wollen, geben Sie
hr ein.
Wählen Sie einen Status aus, auf den Sie den Übergang anwenden möchten. Soll der Übergang beispielsweise angewendet
werden, wenn die Maus über das Element bewegt wird, verwenden Sie die Option hover.
Aktivieren Sie diese Option, wenn Sie für alle CSS-Eigenschaften dieselbe
Dauer, Verzögerung und Zeitfunktion festlegen möchten, die sich im Verlauf des Übergangs allmählich ändern sollen.
Aktivieren Sie diese Option, wenn Sie für jede CSS-Eigenschaft, die sich
im Verlauf des Übergangs allmählich ändern soll, eine andere Dauer, Verzögerung und Zeitfunktion angeben wollen.
Klicken Sie auf , zu dem Übergang eine CSS-Eigenschaft hinzuzufügen.
Geben Sie für die Dauer des Übergangseffekts einen Wert in Sekunden (S) oder Millisekunden (ms) ein.
Die Zeit (in Sekunden oder Millisekunden), bevor der Übergangseffekt beginnt.
280
Schlüsselwörter: Neue Funktionen, Dreamweaver, HTML5, CSS, Übergänge, Webanwendungen, Webpaket, Effekte, CSS3, Fließende
Rasterlayouts, PhoneGap, Neuerungen, jQuery, Business Catalyst, Webschriften, FTP-Verbesserungen, PSD-Optimierung, Dreamweaver CS 6
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Zeitfunktion
Endwert
Auswählen, wo der Übergang erstellt werden soll
Nach oben
Nach oben
Wählen Sie aus den verfügbaren Optionen einen Übergangsstil aus.
Der endgültige Wert für den Übergangseffekt. Wenn Sie beispielsweise den Schriftgrad am Ende des Übergangseffekts um 40 px
vergrößern möchten, geben Sie für die Schriftgröße 40 px an.
Wenn Sie den Stil in das aktuelle Dokument einbetten möchten, wählen Sie „Nur
dieses Dokument“.
Wenn Sie ein externes Stylesheet für den CSS3-Code erstellen möchten, wählen Sie „Neue Stylesheet-Datei“ aus. Wenn Sie auf „Übergang
erstellen“ klicken, werden Sie aufgefordert, den Pfad anzugeben, in dem die neue CSS-Datei gespeichert werden soll. Nachdem das
Stylesheet erstellt worden ist, wird es in das Menü „Auswählen, wo der Übergang erstellt werden soll“ aufgenommen.
Bearbeiten von CSS3-Übergangseffekten
1. Wählen Sie im Bedienfeld CSS-Übergänge den Übergangseffekt aus, den Sie bearbeiten möchten.
2. Klicken Sie auf .
3. Ändern Sie im Dialogfeld „Übergang bearbeiten“ zuvor eingegebene Werte für den Übergang.
Deaktivieren der CSS-Kurzschrift für Übergänge
1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“.
2. Wählen Sie „CSS-Stile“.
3. Deaktivieren Sie unter „Kurzschrift verwenden für“ die Option „Übergang“.
281
Erstellen von CSS-Regeln
Hinweis:
Hinweis:
Ab Dreamweaver CC wurde das Bedienfeld „CSS-Stile“ durch den CSS Designer ersetzt. Weitere Informationen finden Sie unter Bedienfeld „CSS
Designer“.
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.
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, wird er automatisch hinzugefügt.
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.
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 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 innerhalb von div-Tags aus. Beim Hinzufügen oder
Löschen von Selektoren wird in einem Textbereich genau beschrieben, auf welche Elemente sich die Regel auswirkt.
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“.
282
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Hinweis:
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“.
Wenn Sie auf „OK“ klicken, ohne Formatoptionen festgelegt zu haben, wird eine neue leere Regel erstellt.
283
Browserübergreifende Probleme bei der CSS-Wiedergabe
überprüfen
Nach oben
Nach oben
Nach oben
Nach oben
Browserkompatibilitätsprüfung ausführen
Von einem gefundenen Problem betroffenes Element auswählen
Zum nächsten oder vorherigen identifizierten Problem im Code wechseln
Browser für die Kompatibilitätsprüfung durch Dreamweaver auswählen
Probleme aus der Browserkompatibilitätsprüfung ausschließen
Liste der ignorierten Probleme bearbeiten
Browserkompatibilitätsprüfungs-Bericht speichern
Browserkompatibilitätsprüfungs-Bericht in einem Browser anzeigen
Website „Adobe CSS Advisor“ aufrufen
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.
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.
284
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Verwandte Hilfethemen
CSS Advisor
Rechtliche Hinweise | Online-Datenschutzrichtlinie
285
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
286
Grundlegendes zu Cascading Stylesheets
Nach oben
Nach oben
Cascading Stylesheets
CSS-Regeln
Cascading Styles
Textformatierung und CSS
CSS-Kurzschrifteigenschaften
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.
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:
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.
287
Externe CSS-Stylesheets
Interne (oder eingebettete) CSS-Stylesheets
Inline-Stile
Nach oben
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:
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.
Sammlungen von CSS-Regeln, die sich in einem style-Tag im head-Bereich eines HTML-
Dokuments befinden.
Werden in bestimmten Instanzen von Tags in einem ganzen HTML-Dokument definiert. (Die Verwendung von Inline-Stilen wird nicht
empfohlen.)
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, Mozilla Firefox, Netscape
Navigator, 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 wählen
anschließend im Bedienfeld „Referenz“ im Popupmenü „Buch“ die Option „O’Reilly-CSS-Referenz“´aus.
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
288
Nach oben
Nach oben
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:
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.
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
289
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinien
Hinweis:
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 in Dreamweaver eine mit CSS-Kurzschrift codierte
Webseite ö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.
Ü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.
Using CSS (Tutorial)
Anwenden, Entfernen oder Umbenennen von Klassenstilen
Arbeiten mit Text
Bedienfeld „CSS-Stile“
Tutorial "Styling Text using CSS"
290
Anwenden, Entfernen oder Umbenennen von CSS-Klassenstilen
Nach oben
Nach oben
Nach oben
CSS-Klassenstil anwenden
Klassenstil von einer Auswahl entfernen
Klassenstil 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.
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“.
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.
Verwandte Hilfethemen
[print]Cascading Stylesheets
291
Rechtliche Hinweise | Online-Datenschutzrichtlinie
292
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
293
Seiteninhalt und Elemente
294
Verwenden des Bedienfelds „Einfügen“
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
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.
Bedienfeld „Einfügen“ ein- und ausblenden
Schaltflächen einer bestimmten Kategorie anzeigen
Popupmenü für eine Schaltfläche anzeigen
Objekte einfügen
Dialogfeld zum Einfügen von Objekten überspringen und leeres Platzhalterobjekt einfügen
Voreinstellungen des Bedienfelds „Einfügen“ ändern
Objekte in der Kategorie „Favoriten“ des Bedienfelds „Einfügen“ hinzufügen, löschen oder verwalten
Objekte mithilfe von Schaltflächen in der Kategorie „Favoriten“ einfügen
Bedienfeld „Einfügen“ als horizontale Einfügeleiste anzeigen
Horizontale Einfügeleiste als Bedienfeldgruppe wiederherstellen
Kategorien der horizontalen Einfügeleiste als Registerkarten anzeigen
Kategorien der horizontalen Einfügeleiste als Menü anzeigen
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
Bedienfeld „Einfügen“ ein- und ausblenden
Wählen Sie „Fenster“ > „Einfügen“ aus.
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.
Popupmenü für eine Schaltfläche anzeigen
Klicken Sie auf den Abwärtspfeil neben dem Schaltflächensymbol.
295
Nach oben
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
Bedienfeld „Einfügen“ in Dreamweaver CC
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 Schaltfläche oder ziehen Sie das Symbol der Schaltfläche in das Dokumentfenster (in der Entwurfs-, Live- oder
Codeansicht).
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.
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“.
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“.
296
Hinweis:
Nach oben
Nach oben
Hinweis:
Nach oben
Nach oben
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.
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 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 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“.
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.
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
297
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Klicken Sie auf das Pfeilsymbol neben dem Kategorienamen am linken Ende der horizontalen Einfügeleiste und wählen Sie dann „Als
Registerkarten anzeigen“ aus.
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.
Adobe empfiehlt auch
Überblick über das Bedienfeld „Einfügen“
298
Edge- und Webschriften in die Schriftenliste aufnehmen
Nach oben
Nach oben
Sie können sowohl Adobe Edge- als auch Webschriften in die Schriftenliste in Dreamweaver einbinden. In der Schriftenliste werden zuerst die von
Dreamweaver unterstützten Schriftstapel aufgelistet und dann die Webschriften und die Edge Web Fonts.
Aufnehmen von Adobe Edge Web Fonts in die Schriftenliste
Webschriften in die Schriftenliste aufnehmen
Eigene Schriftenstapel erstellen
Vorschau der eingefügten Schriften anzeigen
script-Tag für Webschriften in mehreren Dateien aktualisieren
script-Tag für Webschriften auf einer Seite aktualisieren
Aufnehmen von Adobe Edge Web Fonts in die Schriftenliste
Sie können in Ihren Webseiten jetzt Adobe Edge-Schriften verwenden. Wenn in einer Seite eine Edge-Schrift verwendet wird, wird ein zusätzliches
script-Tag eingefügt, um auf eine JavaScript-Datei zu verweisen. Diese Datei lädt die Schrift vom Creative Cloud-Server direkt in den Browser-
Cache.
Beim Anzeigen der Seite werden die Schriften vom Creative Cloud-Server heruntergeladen, selbst wenn eine Schrift auf dem Computer des
Benutzers verfügbar ist.
Beispielsweise besitzt ein script-Tag, das nur die Schrift „Abel“ verwendet, das folgende Format:
<!----Das folgende script-Tag lädt eine Schrift vom Adobe Edge-Webschriftenserver herunter, damit sie in der
Webseite verwendet werden kann. Wir empfehlen, dass Sie es nicht abändern. -->
<script>var adobewebfontsappname ="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
1. Wählen Sie „Modifizieren“ > „Schriften verwalten“.
2. Die Registerkarte „Adobe Edge Fonts“ zeigt alle Adobe Edge-Schriften an, die Sie in die Schriftenliste aufnehmen können.
3. Um Schriften in dieser Liste zu finden und in die Schriftenliste einzufügen, führen Sie die folgenden Schritte aus:
Klicken Sie auf die Schrift, die Sie in die Schriftenliste einfügen wollen.
Um eine Schrift wieder zu deaktivieren, klicken Sie erneut auf die Schrift.
Verwenden Sie Filter, um bevorzugte Schriften in die engere Wahl zu ziehen. Um beispielsweise nur Serifenschriften anzuzeigen, klicken
Sie auf .
Sie können verschiedene Filter verwenden. Um beispielsweise nur Serifenschriften anzuzeigen, die sich für Absätze eignen, klicken Sie
auf und dann auf .
Um eine Schrift aufgrund ihres Namens zu suchen, geben Sie den Namen in das Suchfeld ein.
4. Klicken Sie auf , um einen Filter mit allen Schriften zu erstellen, die Sie ausgewählt haben.
5. Klicken Sie auf „Fertig“.
6. Öffnen Sie nun die Schriftenliste von einer beliebigen Stelle in Dreamweaver aus. Beispielsweise über die Schriftenliste im CSS-Abschnitt
des Bedienfelds „Eigenschaften“.
In der Schriftenliste werden zuerst die Dreamweaver-Schriftenstapel und dann die Webschriften aufgeführt. Zeigen Sie den unteren Teil der
Liste an, um die Schriften zu finden, die Sie zuvor ausgewählt haben.
Webschriften in die Schriftenliste aufnehmen
Sie können Webschriften von Ihrem Computer in die Schriftenliste in Dreamweaver einbinden. Die hinzugefügten Schriften werden in allen
Schriftartmenüs in Dreamweaver widergespiegelt. Es werden Schriften vom Typ EOT, WOFF, TTF und SVG unterstützt.
1. Wählen Sie „Modifizieren“ > „Schriften verwalten“.
2. Klicken Sie im angezeigten Dialogfeld auf die Registerkarte „Lokale Webschriften“.
299
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Nach oben
Nach oben
Nach oben
3. Klicken Sie auf die „Durchsuchen“-Schaltfläche, die dem Schrifttyp entspricht, den Sie hinzufügen möchten. Wenn die Schrift beispielsweise
im EOT-Format vorliegt, klicken Sie neben „EOT-Schrift“ auf „Durchsuchen...“.
4. Öffnen Sie auf Ihrem Computer den Ordner, der die Schrift enthält. Wählen Sie die Datei aus und öffnen Sie sie. Wenn der betreffende
Ordner die Schrift auch in anderen Formaten enthält, werden sie automatisch in das Dialogfeld eingefügt. Zudem wird der Name der Schrift
automatisch ins Feld „Schriftname“ eingetragen.
5. Aktivieren Sie die Option, in der Sie bestätigen, dass Sie die Schrift für die Verwendung in der Website lizenziert haben.
6. Klicken Sie auf „Fertig“. Die Liste der Schriften wird unter „Aktuelle Liste der lokalen Webschriften“ angezeigt.
Um eine Webschrift aus der Schriftenliste zu entfernen, wählen Sie sie unter „Aktuelle Liste der lokalen Webschriften“ aus, und klicken
auf „Entfernen“.
Eigene Schriftenstapel erstellen
Ein Schriftenstapel ist eine Liste der Schriften in einer CSS-Schriftfamiliendeklaration. Die Registerkarte „Eigene Schriftenstapel“ im Dialogfeld
„Schriften verwalten“ bedienen Sie folgendermaßen:
Neue Schriftenstapel fügen Sie mithilfe der Schaltfläche „+“ hinzu.
Um vorhandene Schriftenstapel zu bearbeiten, wählen Sie im Feld „Schriftliste“ den Schriftenstapel aus. Mithilfe der Schaltflächen „>>“ und
„<<“ aktualisieren Sie die Liste der ausgewählten Schriften.
Vorhandene Schriftenstapel löschen Sie mit der Schaltfläche-“.
Mithilfe der Pfeilschaltflächen ändern Sie die Reihenfolge, in der die Schriftenstapel aufgelistet sind.
Vorschau der eingefügten Schriften anzeigen
In der Entwurfsansicht ist es nicht möglich, eine Vorschau der Edge- und Webschriften anzuzeigen. Wechseln Sie in die Live-Ansicht oder zeigen
Sie die Seite in einem Browser an, um eine Vorschau der Schriften zu sehen.
script-Tag für Webschriften in mehreren Dateien aktualisieren
Wenn Sie eine Schrift in einer CSS-Datei aktualisieren, die mit mehreren HTML-Dateien verknüpft ist, werden Sie aufgefordert, das script-Tag
auch in den zugehörigen HTML-Dateien zu aktualisieren. Wenn Sie auf „Aktualisieren“ klicken, werden die script-Tags in allen betroffenen HTML-
Dateien aktualisiert.
script-Tag für Webschriften auf einer Seite aktualisieren
Wählen Sie „Befehle“ >„script-Tag für Webschriften bereinigen (aktuelle Seite)“, um alle Webschriften auf der Webseite zu aktualisieren, die nicht
im script-Tag widergespiegelt werden.
300
Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“
Hinweis:
Nach oben
Anfangszustand
Zustand „Fokus“
Zustand „Gültig“
Zustand „Ungültig“
Erforderlich-Zustand
Zustand „Zeichen min.“
Zeichen max.-Zustand
Mindestwert-Zustand
Höchstwert-Zustand
Widget „Überprüfung - Textfeld“
Widget „Überprüfung - Textfeld“ einfügen und bearbeiten
Widget „Überprüfung - Textfeld“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.
Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.
Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann.
Der Widget-Zustand, in dem der Besucher Text in einem ungültigen Format eingegeben hat. (Zum Beispiel die
Jahresangabe 06 anstatt 2006).
Der Widget-Zustand, in dem der Besucher nicht den erforderlichen Text in ein Feld eingegeben hat.
Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl in ein Textfeld eingegeben hat.
Der Widget-Zustand, in dem der Besucher mehr Zeichen als die Höchstanzahl in ein Textfeld eingegeben hat.
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)
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.
301
Nach oben
Hinweis:
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“.
Sie können Widgets vom Typ „Überprüfung - Textfeld“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
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:
Ü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.
302
OnBlur
Ändern
OnSubmit
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.
Festlegen, wann eine Überprüfung erfolgt
Sie können festlegen, wann die Überprüfung erfolgt, z. B. wenn der Benutzer auf eine Stelle 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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.
Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.
Ü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
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
303
Nach oben
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.
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.
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:
Zu ändernder Text Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .textfieldRequiredState
.textfieldRequiredMsg,
.textfieldInvalidFormatState
.textfieldInvalidFormatMsg,
.textfieldMinValueState
.textfieldMinValueMsg,
.textfieldMaxValueState
.textfieldMaxValueMsg,
.textfieldMinCharsState
.textfieldMinCharsMsg,
.textfieldMaxCharsState
.textfieldMaxCharsMsg
color: #CC3333; border: 1px solid
#CC3333;
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 ändernde Farbe Relevante CSS-Regel Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im
gültigen Zustand
.textfieldValidState input,
input.textfieldValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im
ungültigen Zustand
input.textfieldRequiredState,
.textfieldRequiredState input,
input.textfieldInvalidFormatSt
ate,
.textfieldInvalidFormatState
input,
input.textfieldMinValueState,
.textfieldMinValueState input,
input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState,
.textfieldMinCharsState input,
input.textfieldMaxCharsState,
.textfieldMaxCharsState input
background-color: #FF9F9F;
304
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hintergrundfarbe des Widgets, wenn es
den Fokus hat
.textfieldFocusState input,
input.textfieldFocusState background-color: #FFFFCC;
Weitere Empfehlungen von Adobe
305
Arbeiten mit dem Spry-Widget „Überprüfung - Textbereich“
Hinweis:
Nach oben
Anfangszustand
Zustand „Fokus“
Zustand „Gültig“
Erforderlich-Zustand
Zustand „Zeichen min.“
Zeichen max.-Zustand
Widget „Überprüfung - Textbereich“
Widget „Überprüfung - Textbereich“ einfügen und bearbeiten
Widget „Überprüfung - Textbereich“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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
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.
Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.
Der Widget-Zustand, in dem der Besucher im Widget einen Einfügepunkt setzt.
Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann.
Der Widget-Zustand, in dem der Besucher keinen Text eingegeben hat.
Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl im Textbereich eingegeben hat.
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.
306
Nach oben
Hinweis:
OnBlur
Ändern
OnSubmit
Hinweis:
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“.
Sie können Widgets vom Typ „Überprüfung - Textbereich“ 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 auf eine Stelle 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.
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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds klickt.
Überprüfung erfolgt, wenn der Benutzer Text im Feld ändert.
Ü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.
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 einfügen, 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.
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.
307
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
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.
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:
Zu ändernder Text Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .textareaRequiredState
.textareaRequiredMsg,
.textareaMinCharsState
.textareaMinCharsMsg,
.textareaMaxCharsState
.textareaMaxCharsMsg
color: #CC3333; border: 1px solid
#CC3333;
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 ändernde Hintergrundfarbe Relevante CSS-Regel Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im
gültigen Zustand
.textareaValidState textarea,
textarea.textareaValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im
ungültigen Zustand
textarea.textareaRequiredState
, .textareaRequiredState
textarea,
textarea.textareaMinCharsState
, .textareaMinCharsState
textarea,
textarea.textareaMaxCharsState
, .textareaMaxCharsState
textarea
background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es
den Fokus hat
.textareaFocusState textarea,
textarea.textareaFocusState background-color: #FFFFCC;
Weitere Empfehlungen von Adobe
308
Arbeiten mit dem Spry-Widget „Überprüfung - Bestätigung“
Hinweis:
Nach oben
Hinweis:
Anfangszustand
Zustand „Fokus“
Zustand „Gültig“
Zustand „Ungültig“
Erforderlich-Zustand
Nach oben
Hinweis:
Widget „Überprüfung - Bestätigung“
Widget „Überprüfung - Bestätigung“ einfügen und bearbeiten
Widget „Überprüfung - Bestätigung“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
Sie sollten mit Spry-Überprüfungswidgets vertraut sein, bevor Sie das Bestätigungswidget verwenden. Wenn dies noch nicht der Fall ist,
sollten Sie zunächst die Informationen unter Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“ lesen, 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.
Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Der Benutzer setzt die Einfügemarke in das Widget.
Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden.
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.
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.
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“.
Sie können Widgets vom Typ „Überprüfung - Bestätigung“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
Zustand „Erforderlich“ eines Widgets vom Typ „Überprüfung - Bestätigung“ ändern
309
OnBlur
Ändern
OnSubmit
Nach oben
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 auf eine Stelle 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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Bestätigungstextfelds klickt.
Überprüfung erfolgt, wenn der Benutzer Text im Bestätigungstextfeld ändert.
Ü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.
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
310
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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.
Zu ändernder Text Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .confirmRequiredState
.confirmRequiredMsg,
.confirmInvalidState
.confirmInvalidMsg
color: #CC3333; border: 1px solid
#CC3333;
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 ändernde Farbe Relevante CSS-Regel Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im
gültigen Zustand
.confirmValidState input,
input.confirmValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im
ungültigen Zustand
input.confirmRequiredState,
.confirmRequiredState input,
input.confirmInvalidState,
.confirmInvalidState input
background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es
den Fokus hat
.confirmFocusState input,
input.confirmFocusState background-color: #FFFFCC;
Weitere Empfehlungen von Adobe
Beispiele für Widgets vom Typ „Überprüfung - Bestätigung“
311
Arbeiten mit dem Spry-Widget „Überprüfung - Kennwort“
Hinweis:
Nach oben
Hinweis:
Anfangszustand
Zustand „Fokus“
Zustand „Gültig“
Zustand „Ungültige Stärke“
Erforderlich-Zustand
Zustand „Zeichen min.“
Zeichen max.-Zustand
Nach oben
Hinweis:
Widget „Überprüfung - Kennwort“
Widget „Überprüfung - Kennwort“ einfügen und bearbeiten
Widget „Überprüfung - Kennwort“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
Sie sollten mit Spry-Überprüfungswidgets vertraut sein, bevor Sie das Kennwortwidget verwenden. Wenn dies noch nicht der Fall ist,
sollten Sie zunächst die Informationen unter Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“ lesen, 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.
Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Der Benutzer setzt die Einfügemarke in das Widget.
Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden.
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.)
Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein.
Der Benutzer gibt im Textfeld für das Kennwort weniger Zeichen als die erforderliche Mindestanzahl ein.
Der Benutzer gibt im Textfeld für das Kennwort mehr Zeichen als die zulässige Höchstanzahl ein.
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.
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“.
Sie können Widgets vom Typ „Überprüfung - Kennwort“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.
312
OnBlur
Ändern
OnSubmit
Hinweis:
Nach oben
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 auf eine Stelle 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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Textfelds für das Kennwort klickt.
Überprüfung erfolgt, wenn der Benutzer Text im Textfeld für das Kennwort ändert.
Ü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.
Standardmäßig sind für das Kennwortwidget keine der verfügbaren Optionen festgelegt.
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.
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.
Widget „Überprüfung - Kennwort“ anpassen
313
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.
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 dann die Standardeigenschaften oder fügen benutzerdefinierte Eigenschaften und Werte für den
Textstil hinzu.
Zu ändernder Text Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .passwordRequiredState
.passwordRequiredMsg,
.passwordMinCharsState
.passwordMinCharsMsg,
.passwordMaxCharsState
.passwordMaxCharsMsg,
.passwordInvalidStrengthState
.passwordInvalidStrengthMsg,
.passwordCustomState
.passwordCustomMsg
color: #CC3333; border: 1px solid
#CC3333;
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 ändernde Farbe Relevante CSS-Regel Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im
gültigen Zustand
.passwordValidState input,
input.passwordValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im
ungültigen Zustand
input.passwordRequiredState,
.passwordRequiredState input,
input.passwordInvalidStrengthS
tate,
.passwordInvalidStrengthState
input,
input.passwordMinCharsState,
.passwordMinCharsState input,
input.passwordCustomState,
.passwordCustomState input,
input.passwordMaxCharsState,
.passwordMaxCharsState input
background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es .passwordFocusState input,
input.passwordFocusState background-color: #FFFFCC;
314
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
den Fokus hat
Weitere Empfehlungen von Adobe
Beispiele für Widgets vom Typ „Überprüfung - Kennwort“
315
Arbeiten mit dem Widget „Spry-Überprüfung - Optionsschaltergruppe“
Hinweis:
Nach oben
Anfangszustand
Zustand „Gültig“
Erforderlich-Zustand
Zustand „Ungültig“
Nach oben
Widget „Überprüfung - Optionsschaltergruppe“
Widget „Überprüfung - Optionsschaltergruppe“ einfügen und bearbeiten
Widget „Überprüfung - Optionsschaltergruppe“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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, eine
Auswahl vornimmt oder das Formular sendet.
Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurück.
Der Benutzer trifft eine Auswahl. Das Formular kann danach gesendet werden.
Der Benutzer hat eine erforderliche Option nicht aktiviert.
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.
316
Zeilenumbrüche
Tabelle
Hinweis:
OnBlur
Ändern
OnSubmit
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.
Platziert jede Optionsschaltfläche mithilfe von Zeilenumbrüchen (br-Tags) auf einer separaten Zeile.
Platziert jede Optionsschaltfläche mithilfe von Tabellenzeilen (tr-Tags) auf einer separaten Zeile.
8. Klicken Sie auf „OK“.
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 auf eine Stelle außerhalb des Widgets klickt, eine Auswahl
vornimmt oder das Formular sendet.
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“) die gewünschte Option für den Überprüfungszeitpunkt aus. Sie können
entweder alle Optionen oder nur die Übermittlung auswählen.
Überprüfung erfolgt, wenn der Benutzer außerhalb der Optionsschaltergruppe klickt.
Überprüfung erfolgt bei der Benutzerauswahl.
Ü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“.
317
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Nach oben
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.
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.
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 dann die Standardeigenschaften oder fügen benutzerdefinierte Eigenschaften
und Werte für den Textstil hinzu.
Text für Stilerstellung Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .radioRequiredState
.radioRequiredMsg,
.radioInvalidState
.radioInvalidMsg
color: #CC3333; border: 1px solid
#CC3333;
Weitere Empfehlungen von Adobe
318
Rechtliche Hinweise | Online-Datenschutzrichtlinie
319
Arbeiten mit dem Spry-Widget „Überprüfung - Auswahlliste“
Hinweis:
Nach oben
Anfangszustand
Zustand „Fokus“
Zustand „Gültig“
Zustand „Ungültig“
Erforderlich-Zustand
Nach oben
Widget „Überprüfung - Auswahl“
Widget „Überprüfung - Auswahl“ einfügen und bearbeiten
Widget „Überprüfung - Auswahl“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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, eine Auswahl
vornimmt oder das Formular sendet.
Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.
Der Widget-Zustand, in dem der Benutzer das Widget angeklickt hat.
Der Widget-Zustand, in dem der Besucher ein gültiges Element ausgewählt hat und das Formular abgeschickt werden kann.
Der Widget-Zustand, in dem der Besucher ein ungültiges Element ausgewählt hat.
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“.
320
Hinweis:
OnBlur
Ändern
OnSubmit
Nach oben
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.
Sie können Widgets vom Typ „Überprüfung - Auswahl“ 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 auf eine Stelle 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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Widgets klickt.
Überprüfung erfolgt bei der Benutzerauswahl.
Ü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.
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.
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:
Text für Stilerstellung Relevante CSS-Regel Relevante zu ändernde Eigenschaften
321
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Text der Fehlermeldung
.selectRequiredState
.selectRequiredMsg,
.selectInvalidState
.selectInvalidMsg
color: #CC3333; border: 1px solid
#CC3333;
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:
Zu ändernde Hintergrundfarbe Relevante CSS-Regel Relevante zu ändernde Eigenschaft
Hintergrundfarbe des Widgets im
gültigen Zustand
.selectValidState select,
select.selectValidState background-color: #B8F5B1;
Hintergrundfarbe des Widgets im
ungültigen Zustand
select.selectRequiredState,
.selectRequiredState select,
select.selectInvalidState,
.selectInvalidState select
background-color: #FF9F9F;
Hintergrundfarbe des Widgets, wenn es
den Fokus hat
.selectFocusState select,
select.selectFocusState background-color: #FFFFCC;
Weitere Empfehlungen von Adobe
322
Arbeiten mit dem Widget „Spry-Akkordeon“
Hinweis:
Nach oben
Nach oben
Hinweis:
Akkordeon-Widget
Akkordeon-Widget einfügen und bearbeiten
Akkordeon-Widget anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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:
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“.
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
323
Nach oben
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.
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 ein
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.
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 Relevante CSS-Regel Beispiel für hinzuzufügende
Eigenschaften/Werte
Text im gesamten Akkordeon (inklusive
Titelleiste und Inhaltsfenster)
.Accordion oder
.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;
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:
Zu ändernder Widget-Bereich Relevante 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;
324
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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.)
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;.
Weitere Empfehlungen von Adobe
325
Arbeiten mit dem Widget „Spry Reduzierbare Palette“
Hinweis:
Nach oben
Nach oben
Hinweis:
Widget „Reduzierbare Palette“
Widgets vom Typ „Reduzierbare Palette“ einfügen und bearbeiten
Widget „Reduzierbare Palette“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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“.
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.
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.
326
Nach oben
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.
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 Relevante 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;
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:
Zu ändernde Farbe Relevante 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)
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.
327
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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;.
Weitere Empfehlungen von Adobe
328
Arbeiten mit dem Spry-Widget „Überprüfung - Kontrollkästchen“
Hinweis:
Nach oben
Anfangszustand
Zustand „Gültig“
Erforderlich-Zustand
Auswahl min.-Zustand
Auswahl max.-Zustand
Nach oben
Widget „Überprüfung - Kontrollkästchen“
Widget „Überprüfung - Kontrollkästchen“ einfügen und bearbeiten
Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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
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 auf eine Stelle außerhalb des Widgets klickt, eine
Auswahl vornimmt oder das Formular sendet.
Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular zurücksetzt.
Der Widget-Zustand, in dem der Besucher eine oder mehrere Optionen korrekt ausgewählt hat und das Formular abgeschickt
werden kann.
Der Widget-Zustand, in dem der Besucher keine gültige Option ausgewählt hat.
Der Widget-Zustand, in dem der Benutzer weniger als die erforderliche Anzahl Kontrollkästchen ausgewählt hat.
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“.
329
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Hinweis:
OnBlur
Ändern
OnSubmit
Nach oben
2. Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“.
Sie können Widgets vom Typ „Überprüfung - Kontrollkästchen“ 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 auf eine Stelle außerhalb des Widgets klickt, eine Auswahl
vornimmt oder das Formular sendet.
1. Wählen Sie ein Widget vom Typ „Überprüfung - Kontrollkästchen“ 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.
Überprüfung erfolgt, wenn der Benutzer außerhalb des Kontrollkästchens klickt.
Überprüfung erfolgt bei der Benutzerauswahl.
Ü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:
Text für Stilerstellung Relevante CSS-Regel Relevante zu ändernde Eigenschaften
Text der Fehlermeldung .checkboxRequiredState
.checkboxRequiredMsg,
.checkboxMinSelectionsState
.checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState
.checkboxMaxSelectionsMsg
color: #CC3333; border: 1px solid
#CC3333;
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.
Weitere Empfehlungen von Adobe
330
Rechtliche Hinweise | Online-Datenschutzrichtlinie
331
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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
332
CSS-Link-Eigenschaften für eine ganze Seite festlegen
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hinweis:
Schriftart für Hyperlinks
Größe
Farbe für Hyperlinks
Besuchte Links
Rollover-Hyperlinks
Aktive Hyperlinks
Unterstreichungsstil
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
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.)
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.
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.
Definiert die standardmäßige Schriftgröße für Hyperlinktext.
Gibt die Farbe an, die Hyperlinktext zugewiesen werden soll.
Gibt die Farbe an, die besuchten Hyperlinks zugewiesen werden soll.
Gibt an, welche Farbe ein Hyperlink annimmt, wenn der Mauszeiger darauf positioniert ist.
Gibt an, welche Farbe ein Hyperlink annimmt, wenn ein Benutzer darauf klickt.
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.
333
CSS-Überschrifteneigenschaften für eine ganze Seite festlegen
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Schrift für Überschriften
„Überschrift 1“ bis „Überschrift 6“
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
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.
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.
Definieren die Schriftgröße und die Schriftfarbe für bis zu sechs Ebenen von Überschriften-Tags.
334
Elemente im Dokumentfenster auswählen und anzeigen
Nach oben
Nach oben
Nach oben
Elemente auswählen
HTML-Code für ausgewählte Textstellen oder Objekte anzeigen
Markierungssymbole für unsichtbare Elemente ein- oder ausblenden
Voreinstellungen für unsichtbare Elemente festlegen
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.
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
335
Nach oben
Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“.
Hinweis: 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.
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“.
Hinweis: 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 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
336
337
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.
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
338
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
339
Erstellen und Verwalten einer Liste mit Favoritenelementen
Nach oben
Nach oben
Favoritenelemente verwalten
Favoritenelemente hinzufügen oder entfernen
Kurznamen für Favoritenelemente erstellen
Elemente in Favoritenordnern gruppieren
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.
Hinweis: 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.
Hinweis: Für Vorlagen und Bibliothekselemente stehen keine Favoritenlisten zur Verfügung.
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“.
Elemente aus der Favoritenliste entfernen
340
Nach oben
Nach oben
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
341
Festlegen von Texteigenschaften im Eigenschafteninspektor
Hinweis:
Nach oben
Hinweis:
Nach oben
Zielregel
Text formatieren (CSS und HTML)
CSS-Regeln im Eigenschafteninspektor bearbeiten
HTML-Formatierung im Eigenschafteninspektor festlegen
Klassen mit dem HTML-Eigenschafteninspektor umbenennen
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.
Beim Erstellen von CSS-Inline-Stilen wird der Code für Stilattribute von 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 Stylesheets (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.
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.
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.
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.
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.
342
Regel bearbeiten
CSS-Bedienfeld
Schrift
Größe
Textfarbe
Fett
Kursiv
Linksbündig, Zentrieren und Rechtsbündig
Nach oben
Format
ID
Klasse
Fett
Kursiv
Ungeordnete Liste
Geordnete Liste
„Blockzitat“ und „Blockzitat entfernen“
Hyperlink
Ö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.
Öffnet das Bedienfeld „CSS-Stile“ und zeigt Eigenschaften der Zielregel in der aktuellen Ansicht an.
Ändert die Schriftart der Zielregel.
Legt die Schriftgröße der Zielregel fest.
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.
Fügt der Zielregel die bold-Eigenschaft hinzu.
Fügt der Zielregel die italic-Eigenschaft hinzu.
Fügen der Zielregel die entsprechende alignment-Eigenschaft hinzu.
Hinweis: 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.
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:
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.
Weist Ihrer Auswahl eine ID zu. Im Popupmenü „ID“ werden (gegebenenfalls) alle im Dokument deklarierten jedoch nicht verwendeten
IDs angezeigt.
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.
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.
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.
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.
Erstellt anhand des ausgewählten Textes eine nummerierte Liste. Wenn kein Text ausgewählt ist, wird eine neue
nummerierte Liste begonnen.
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.
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.
343
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Titel
Ziel
Nach oben
Gibt den QuickInfo-Text für einen Hypertext-Link an.
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“.
Bedienfeld „CSS-Stile“ öffnen
344
Arbeiten mit Photoshop und Dreamweaver
Nach oben
Hinweis:
Nach oben
Photoshop-Integration
Workflow für Smartobjekte und für Photoshop/Dreamweaver
Smartobjekte erstellen
Smartobjekte aktualisieren
Mehrere Smartobjekte aktualisieren
Größe von Smartobjekten ändern
Ursprüngliche Photoshop-Datei eines Smartobjekts bearbeiten
Smartobjekt-Statuswerte
Photoshop-Auswahl kopieren und einfügen
Eingefügte Bilder bearbeiten
Optionen des Dialogfelds „Bildoptimierung“ einstellen
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 Smartobjekt 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.
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 über die Photoshop-Integration in Dreamweaver, finden Sie unter Integrating Dreamweaver with Photoshop.
Workflow für Smartobjekte 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 Smartobjekte-
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.
Smartobjekte-Workflow
Wenn Sie mit vollständigen Photoshop-Dateien arbeiten, wird der Smartobjekte-Workflow empfohlen. In Dreamweaver ist ein Smartobjekt ein auf
einer Webseite platziertes Bildelement, das weiterhin mit der Photoshop-Originaldatei (PSD) verknüpft ist. In der Entwurfsansicht von
Dreamweaver ist ein Smartobjekt in der linken oberen Ecke des Bilds mit einem Symbol gekennzeichnet.
345
Nach oben
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 Smartobjekte-Workflow verwenden, brauchen Sie zum Aktualisieren eines Webbilds Photoshop nicht zu öffnen. Darüber hinaus
sind alle Aktualisierungen, die Sie an Smartobjekten 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 Smartobjekt auch aktualisieren, ohne das Webbild in der Entwurfsansicht auszuwählen. Über das Elementebedienfeld lassen sich
alle Smartobjekte (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 Smartobjekte-Workflow können Sie im Dialogfeld „Bildoptimierung“ Optimierungseinstellungen festlegen. In
diesem Dialogfeld können Sie das Dateiformat und die Bildqualität festlegen. Wenn Sie ein Slice oder eine Ebene kopieren oder eine Photoshop-
Datei zum ersten Mal als Smartobjekt einfügen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen können.
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 Smartobjekts ü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 das Webbild in der Entwurfsansicht 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 Smartobjekte-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.
Ein Videotutorial über die Roundtrip-Bearbeitung mit Photoshop finden Sie unter Roundtrip editing with Photoshop.
Smartobjekte erstellen
Beim Einfügen eines Photoshop-Bilds (PSD-Datei) in eine Webseite wird in Dreamweaver ein Smartobjekt erstellt. Ein Smartobjekt 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 Ihrer Seite, an der das Bild eingefügt werden
soll.
2. Wählen Sie „Einfügen“ > „Bild“.
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.
346
Hinweis:
Nach oben
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
Hinweis:
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 „Bildoptimierung“ 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 Smartobjekt entsprechend den ausgewählten Optimierungseinstellungen und fügt eine webfähige Version des Bilds auf
der Seite ein. Mit dem Smartobjekt besteht eine Live-Verbindung zum ursprünglichen Bild und Sie werden informiert, wenn die beiden Bilder nicht
mehr synchron sind.
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 „Bildoptimierung“ können Sie dann die
gewünschten Änderungen an dem Bild vornehmen. Änderungen im Dialogfeld „Bildoptimierung“ 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 Videotutorial über die Roundtrip-Bearbeitung mit Photoshop finden Sie unter Roundtrip editing with Photoshop.
Smartobjekte aktualisieren
Wenn Sie die Photoshop-Datei ändern, mit der das Smartobjekt verknüpft ist, werden Sie in Dreamweaver benachrichtigt, dass das webfähige Bild
nicht mehr mit dem Original synchron ist. Smartobjekte 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 Smartobjekt mit dem aktuellen Inhalt der ursprünglichen Photoshop-Datei zu aktualisieren, wählen Sie das Smartobjekt im
Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“.
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Mehrere Smartobjekte aktualisieren
Im Bedienfeld „Elemente“ können Sie mehrere Smartobjekte gleichzeitig aktualisieren. Darüber hinaus können Sie im Bedienfeld „Elemente“
Smartobjekte 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 Smartobjekt auswählen, wird in der oberen linken Ecke
des Bilds das Smartobjekt-Symbol angezeigt. Bei normalen Bildern wird dieses Symbol nicht angezeigt.
4. Klicken Sie bei jedem Smartobjekt, 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.
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Größe von Smartobjekten ändern
Sie können die Größe eines Smartobjekts wie bei jedem anderen Bild im Dokumentfenster ändern.
1. Wählen Sie das Smartobjekt 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“.
Beim Aktualisieren des Smartobjekts 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 eines Smartobjekts bearbeiten
Nach dem Erstellen eines Smartobjekts 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.
Dazu muss Photoshop als primärer externer Bildeditor festgelegt sein.
1. Wählen Sie das Smartobjekt im Dokumentfenster aus.
347
Hinweis:
Nach oben
Nach oben
Hinweis:
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 Smartobjekt aus und klicken Sie auf die Schaltfläche „Von Original aktualisieren“.
Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen.
Smartobjekte 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“.
Smartobjekt-Statuswerte
In der folgenden Tabelle sind die verschiedenen Statuswerte von Smartobjekten aufgeführt.
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 Smartobjekt erstellt.
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
auswählen und dann „Bearbeiten“ > „Kopieren“ wä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
auswählen und dann „Bearbeiten“ > „Auf eine Ebene reduziert kopieren“ wählen. Dadurch werden alle aktiven und niedrigeren Ebenen
des ausgewählten Bereichs auf eine Ebene reduziert und in die Zwischenablage kopiert. Falls mit manchen dieser Ebenen
Smartobjekt-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.
348
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Nach oben
Hinweis:
Hinweis:
Nach oben
Hinweis:
Vorgabe
ebenenbasierte Effekte verknüpft sind, werden diese ebenfalls kopiert.
Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment auswählen und dann
„Bearbeiten“ > „Kopieren“ wä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 ganzes 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“.
4. Nehmen Sie im Dialogfeld „Bildoptimierung“ 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 auf 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.
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.
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“.
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 Sie im Eigenschafteninspektor auf
die Schaltfläche „Bildeinstellungen bearbeiten“.
Optionen des Dialogfelds „Bildoptimierung“ einstellen
Beim Erstellen eines Smartobjekts oder Einfügen einer Auswahl aus Photoshop wird in Dreamweaver das Dialogfeld „Bildoptimierung“ 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. Im Allgemeinen wirken sich die Einstellungen entweder auf die Qualität oder auf die Dateigröße
nachteilig aus.
Die ausgewählten Einstellungen wirken sich nur auf die importierte Version der Bilddatei aus. Die ursprüngliche Photoshop-Datei im
PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie geändert.
Wählen Sie eine Vorgabe aus, die Ihren Anforderungen am meisten entspricht. Die Dateigröße des Bildes wird basierend auf der
gewählten Vorgabe geändert. Eine sofortige Vorschau des Bildes mit der angewendeten Einstellung wird im Hintergrund angezeigt.
Für Bilder, die mit einem hohen Maß an Klarheit angezeigt werden sollen, wählen Sie „PNG24 für Fotos (Detailtreue)“ aus. Wählen Sie „GIF für
Hintergrundbilder (Muster)“ aus, wenn Sie ein Muster einfügen, das als Hintergrund der Seite verwendet werden soll.
Wenn Sie eine Vorgabe auswählen, werden die konfigurierbaren Optionen für die Vorgabe angezeigt. Wenn Sie die Optimierungseinstellungen
weiter anpassen möchten, ändern Sie die Werte für diese Optionen.
349
Rechtliche Hinweise | Online-Datenschutzrichtlinie
350
Einfügen von HTML5-Videos (CC)
Nach oben
Diese Funktion ist nur für Creative Cloud-Mitglieder und Einzelproduktabonnenten verfügbar. Unter Adobe Creative Cloud können Sie der Adobe
Creative Cloud beitreten.
Mit Dreamweaver können Sie HTML5-Videos in Webseiten einfügen.
Das HTML5-Element für Videos bietet ein Standardverfahren, um Filme oder Videos in Webseiten einzubetten.
Weitere Informationen zum HTML-Element für Videos finden Sie finden Sie im Artikel HTML5 Video auf der Webseite W3schools.com (auf
Englisch).
Einfügen von HTML5-Videos
Video in der Browser-Vorschau testen
Videotutorial
Einfügen von HTML5-Videos in Dreamweaver
Einfügen von HTML5-Videos
1. Stellen Sie sicher, dass sich der Cursor an der Position befindet, an der Sie das Video einfügen möchten.
2. Wählen Sie „Einfügen“ >„Medien“ > „HTML5-Video“. Das HTML5-Element für Videos wird an der angegebenen Stelle eingefügt.
3. Legen Sie im Bedienfeld „Eigenschaften“ die Werte für die verschiedenen Optionen fest.
Quelle / Alternative Quelle 1 / Alternative Quelle 2: Geben Sie als Quelle den Pfad der Videodatei an. Sie können auch auf das
Ordnersymbol klicken, um eine Videodatei aus dem lokalen Dateisystem auszuwählen. Die Unterstützung für Videoformate variiert in
verschiedenen Browsern. Wenn das Videoformat im Feld „Quelle“ in einem Browser nicht unterstützt wird, wird das Videoformat im Feld
„Alternative Quelle 1“ bzw. im Feld „Alternative Quelle 2“ verwendet. Der Browser verwendet das erste Format, das er kennt, um das
Video anzuzeigen.
Um Videos schnell in die drei Felder einzufügen, verwenden Sie die Mehrfachauswahl. Wenn Sie für dasselbe Video in einem Ordner
drei verschiedene Videoformate auswählen, wird für das Feld „Quelle“ das erste Format in der Liste verwendet. Die nächsten beiden
Formate in der Liste werden für die Felder „Alternative Quelle 1“ und „Alternative Quelle 2“ verwendet.
In der Tabelle unten ist aufgelistet, welche Browser welche Videoformate unterstützen. Die jeweils neuesten Informationen erhalten Sie unter
HTML5 - Browser Support.
Titel: Geben Sie einen Titel für die Videodatei ein.
Breite (B): Geben Sie die Breite des Videos an (in Pixel).
Höhe (H): Geben Sie die Höhe des Videos an (in Pixel).
Steuerelemente: Legen Sie fest, ob Videosteuerelemente wie „Abspielen“, „Pause“ und „Stumm“ auf der HTML-Seite angezeigt werden
sollen.
Automatisch abspielen: Aktivieren Sie diese Option, wenn die Audiodaten abgespielt werden sollen, sobald sie auf der Webseite geladen
werden.
Poster: Legen Sie den Pfad des Bildes fest, das angezeigt werden soll, bis das Video vollständig heruntergeladen ist bzw. bis der
Benutzer auf „Abspielen“ klickt. Die Werte für„Breite“ und „Höhe“ werden automatisch ausgefüllt, wenn Sie das Bild einfügen.
Wiederholen: Aktivieren Sie diese Option, wenn das Video immer wieder abgespielt werden sollen, bis der Benutzer das Abspielen des
Films abbricht.
Stumm: Aktivieren Sie diese Option, wenn der Audioteil des Videos nicht abgespielt werden soll.
Browser MP4 WebM OGG
Internet Explorer 9 Ja Nein Nein
Firefox 4.0 Nein Ja Ja
Google Chrome 6 Ja Ja Ja
Apple Safari 5 Ja Nein Nein
Opera 10.6 Nein Ja Ja
351
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Flash-Video: Legen Sie für Browser, die HTML5-Video nicht unterstützen, eine SWF-Datei fest.
Reservetext: Geben Sie den Text ein, der in Browsern angezeigt werden soll, die HTML5 nicht unterstützen.
Vorausladen: Legen Sie hier fest, wie das Video geladen werden soll, wenn die Seite geladen wird. Die vorgegebenen Werte
entsprechen den Autorenvoreinstellungen. Wenn Sie „auto“ auswählen, wird beim Seitendownload die gesamte Audiodatei geladen.
Wenn Sie „metadata“ auswählen, werden nur die Metadaten heruntergeladen, nachdem der Seitendownload abgeschlossen ist.
Das Bedienfeld „Eigenschaften“ für HTML5-Videos
Video in der Browser-Vorschau testen
1. Speichern Sie die Webseite.
2. Wählen Sie „Datei“ > „Vorschau in Browser“. Wählen Sie den Browser für die Vorschau des Videos aus.
352
Öffnen und Erstellen von Dokumenten
Nach oben
Nach oben
CSS
GIF
JPEG
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel beschriebenen
Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
Dreamweaver-Dokumente erstellen
Dreamweaver-Dateitypen
Layouts mithilfe einer leeren Seite erstellen
Leere Vorlagen erstellen
Seiten basierend auf einer vorhandenen Vorlage erstellen
Auf Dreamweaver-Beispieldateien basierende Seiten erstellen
Andere Arten von Seiten erstellen
Dokumente speichern und wiederherstellen
Standard-Dokumenttyp und Standardkodierung festlegen
Konvertieren von HTML5 in einen älteren Dokumenttyp
Standarddateierweiterung für neue HTML-Dokumente festlegen
Vorhandene Dokumente öffnen und bearbeiten
Zugehörige Dateien öffnen
Dynamisch zugehörige Dateien öffnen
Microsoft Word-HTML-Dateien optimieren
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. Zum Speichern von HTML-Dateien wird in
Dreamweaver 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 bei der Arbeit in Dreamweaver möglicherweise zum Einsatz kommen:
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-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-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.
353
XML
XSL
Nach oben
Fest
Fließend
Hinweis:
Hinweis:
Zum Head-Bereich hinzufügen
Neue Datei erstellen
Verknüpfen mit bestehender Datei
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.
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.
Layouts mithilfe einer leeren Seite 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. Wählen Sie im Dialogfeld „Neues Dokument“ in der Kategorie „Leere Seite“ in der Spalte „Seitentyp“ den Seitentyp aus, den Sie erstellen
möchten. Wählen sie beispielsweise „HTML“ aus, um eine einfache HTML-Seite zu erstellen.
3. Wenn Sie ein CSS-Layout in Ihre neue Seite integrieren möchten, wählen Sie in der Spalte „Layout“ ein vordefiniertes CSS-Layout aus.
Andernfalls wählen Sie „Kein“ aus. 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:
Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die Texteinstellungen des
Besuchers angepasst.
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.
Ab Dreamweaver CC sind nur HTML5-CSS-Layouts verfügbar.
4. Wählen Sie im Popupmenü „Dok.typ“ einen Dokumenttyp aus. In den meisten Fällen können Sie die Standardauswahl, „XHTML 1.0
Transitional“ bzw. „HTML5“ (Dreamweaver CC), 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.
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).
5. Wenn Sie in der Spalte „Layout“ ein CSS-Layout ausgewählt haben, wählen Sie im Popupmenü „Layout-CSS“ den Speicherort für das CSS
aus.
Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu.
Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknüpft das neue Stylesheet mit
der von Ihnen erstellten Seite.
Ermöglicht die Angabe einer bereits vorhandenen CSS-Datei, die die für das Layout benötigten CSS-
Regeln enthält. Klicken Sie dazu über dem Teilfenster „CSS-Datei anfügen“ auf das Symbol „Stylesheet 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 über dem Teilfenster „CSS-Datei anfügen“ auf das Symbol „Stylesheet 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
354
Hinweis:
Nach oben
Fest
Fließend
Hinweis:
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.
Die Funktion „InContext Editing“ wurde ab Dreamweaver CC entfernt.
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.
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 aus.
Andernfalls wählen Sie „Kein“ aus. 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:
Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Größe des Browserfensters oder die Texteinstellungen des
Besuchers angepasst.
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ü „Dok.typ“ einen Dokumenttyp aus. In den meisten Fällen können Sie die Vorgabe, nämlich „XHTML 1.0
Transitional“, übernehmen.
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.
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).
355
Zum Head-Bereich hinzufügen
Neue Datei erstellen
Verknüpfen mit bestehender Datei
Nach oben
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.
Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu.
Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknüpft das neue Stylesheet mit
der von Ihnen erstellten Seite.
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.
7. (Optional) CSS-Stylesheets können auch einer Seite zugeordnet werden, die unabhängig vom CSS-Layout neu erstellt wird. Klicken Sie
dazu über dem Teilfenster „CSS-Datei anfügen“ auf das Symbol „Stylesheet 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 neue Vorlage automatisch im Site-Ordner „Vorlagen“ mit der Erweiterung „.dwt“
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.
Seiten basierend auf einer vorhandenen Vorlage erstellen
Aus einer vorhandenen Vorlage können Sie ein neues 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 mithilfe des Bedienfelds „Elemente“ ein
neues Dokument aus einer vorhandenen Vorlage.
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.
356
Nach oben
Hinweis:
Nach oben
Hinweis:
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
Zum Lieferumfang von Dreamweaver gehören mehrere professionell entwickelte CSS-Entwurfsdateien und Starterseiten für Anwendungen für
Mobilgeräte. 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.
1. Wählen Sie „Datei“ > „Neu“.
2. Wählen Sie im Dialogfeld „Neues Dokument“ die Kategorie „Seite aus Beispiel“ aus.
In Dreamweaver CC wählen Sie die Kategorie „Startvorlagen“ aus.
3. Wählen Sie in der Spalte „Beispielordner“ den Eintrag „CSS-Stylesheet“ bzw. „Mobile Starter“ aus und anschließend in der Liste rechts eine
Beispieldatei.
Die Option „CSS-Stylesheet“ wurde ab Dreamweaver CC entfernt
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 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 auswählen oder den von Dreamweaver erzeugten Standardordner verwenden,
der auf dem Quellnamen der Beispieldatei basiert.
Siehe auch
Andere Arten von Seiten erstellen
Über die Kategorie „Andere“ im Dialogfeld „Neues Dokument“ können Sie verschiedene Seitentypen erstellen, die Sie in Dreamweaver verwenden
wollen, 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.
Die Kategorie „Andere“ wurde ab Dreamweaver CC entfernt.
357
Nach oben
Hinweis:
Nach oben
Standarddokument
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.
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“.
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“ > „Alle 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
wollen.
2. Klicken Sie auf „Ja“, um die vorherige Version wiederherzustellen, oder auf „Nein“, um die Änderungen beizubehalten.
Wenn Sie ein Dokument speichern und anschließend Dreamweaver beenden, können Sie nach einem Neustart von Dreamweaver
die vorherige Version des Dokuments 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 Kategorienliste 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.
Wählen Sie den Dokumenttyp aus, der künftig für das Erstellen neuer Seiten verwendet werden soll.
358
Standarderweiterung
Standard-Dokumenttyp (DDT)
Standardkodierung
Unicode-Normalisierungsformular
Dialogfeld „Neues Dokument“ mit Strg+N anzeigen
Nach oben
Hinweis:
Nach oben
Legen Sie fest, welche Dateierweiterung (.htm oder .html) für neue HTML-Seiten vorzugsweise verwendet werden
soll.
Hinweis: Für andere Dateitypen ist diese Option deaktiviert.
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.
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.
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.
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.
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.
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.
Die Option „Konvertieren“ wurde ab Dreamweaver CC entfernt.
Standarddateierweiterung für neue HTML-Dokumente festlegen
Sie können festlegen, welche Standarddateierweiterung für HTML-Dokumente die in Dreamweaver erstellt werden, verwendet werden soll. 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 Kategorienliste links auf „Neues Dokument“.
359
Nach oben
Hinweis:
Nach oben
Hinweis:
Hinweis:
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.
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.
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.
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.
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)
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.
360
Nach oben
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.
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 unten im Dokumentfenster 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.
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.
Hinweis: 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
361
Hinweis:
Nach oben
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).
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.
2. Wenn für die Suche nach dynamisch zugehörigen Dateien die Option „Manuell“ (die Standardeinstellung) festgelegt ist, klicken Sie in der
Statusleiste, die im Dokumentfenster über der Seite angezeigt wird, auf den Hyperlink für die Suche.
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“).
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
362
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Hinweis:
Alle Word-spezifischen Markierungen entfernen
CSS optimieren
<font>-Tags optimieren
Ungültig verschachtelte Tags korrigieren
Quellcodeformatierung anwenden
Protokoll nach Abschluss zeigen
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).
Auf Windows-Systemen sollten Sie nun die Datei in Word schließen, um zu verhindern, dass es zu einer Zugriffsverletzung
kommt.
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“.
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).
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.
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.
entfernt HTML-Tags und wandelt den Standardtextkörper in HTML-Text der Größe 2 um.
entfernt die Font-Tags, die Word außerhalb der Absatz- und Überschriften-Tags (Blockebene)
einfügt.
wendet die Formatierungsoptionen für den HTML-Quellcode auf das Dokument an. Diese
Formatierungsoptionen legen Sie in den Voreinstellungen für das HTML-Format und in der Datei SourceFormat.txt fest.
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“.
XHTML-Code
Business Catalyst InContext Editing
Speichern von Frame- und Frameset-Dateien
Grundlegendes zur Dokumentkodierung
Optimieren von Code
Externen Editor für Multimedia-Dateien starten
Mit Dateien im Bedienfeld „Dateien“ arbeiten
Zwischen Ansichten im Dokumentfenster umschalten
Zugehörigen Code anzeigen
Seitenvorschau in Dreamweaver
363
Einfügen von HTML5-Audiodaten (CC)
Nach oben
Nach oben
Diese Funktion ist nur für Creative Cloud-Mitglieder und Einzelproduktabonnenten verfügbar. Unter Adobe Creative Cloud können Sie der Adobe
Creative Cloud beitreten.
Mit Dreamweaver können Sie HTML5-Audiodaten in Webseiten einfügen und die Wiedergabe in der Browser-Vorschau testen. Das HTML5-
Element für Audidaten bietet ein Standardverfahren, um Audioinhalte in Webseiten einzubetten.
Weitere Informationen zum HTML-Element für Audidaten finden Sie im Artikel HTML5 Audio auf der Webseite w3schools.com (auf Englisch).
Einfügen von HTML5-Audiodaten
Audiodaten in der Browser-Vorschau testen
Einfügen von HTML5-Audiodaten
1. Stellen Sie sicher, dass sich der Cursor an der Position befindet, an der Sie die Audiodaten einfügen möchten.
2. Wählen Sie „Einfügen“ > „Medien“ > „HTML5-Audiodatei“. Die Audiodatei wird an der angegebenen Stelle eingefügt.
3. Geben Sie im Bedienfeld „Eigenschaften“ die folgenden Informationen ein:
Quelle / Alternative Quelle 1 / Alternative Quelle 2: Geben Sie als Quelle den Pfad der Audiodatei an. Sie können auch auf das
Ordnersymbol klicken, um eine Audiodatei auf Ihrem Computer auszuwählen. Die Unterstützung für Audioformate variiert in
verschiedenen Browsern. Wenn das Audioformat im Feld „Quelle“ nicht unterstützt wird, wird das Format im Feld „Alternative Quelle 1“
bzw. im Feld „Alternative Quelle 2“ verwendet. Der Browser verwendet das erste Format, das er kennt, um die Audiodaten auszuführen.
Um Videos schnell in die drei Felder einzufügen, verwenden Sie die Mehrfachauswahl. Wenn Sie für dasselbe Video in einem Ordner
drei verschiedene Videoformate auswählen, wird für das Feld „Quelle“ das erste Format in der Liste verwendet. Die nächsten beiden
Formate in der Liste werden für die Felder „Alternative Quelle 1“ und „Alternative Quelle 2“ verwendet.
Titel: Geben Sie einen Titel für die Audiodatei ein.
Reservetext: Geben Sie den Text ein, der in Browsern angezeigt werden soll, die HTML5 nicht unterstützen.
Steuerelemente: Legen Sie fest, ob Audiosteuerelemente wie „Abspielen“, „Pause“ und „Stumm“ auf der HTML-Seite angezeigt werden
sollen.
Auto-Wdg: Aktivieren Sie diese Option, wenn die Audiodaten abgespielt werden sollen, sobald sie auf der Webseite geladen werden.
Audio wiederholen: Aktivieren Sie diese Option, wenn die Audiodaten immer wieder abgespielt werden sollen, bis der Benutzer die
Wiedergabe abbricht.
Stumm: Aktivieren Sie diese Option, wenn die Audiodaten nach dem Download erst mal nicht abgespielt werden sollen.
Vorausladen: Wenn Sie „auto“ auswählen, wird beim Seitendownload die gesamte Audiodatei geladen. Wenn Sie „metadata“ auswählen,
werden nur die Metadaten heruntergeladen, nachdem der Seitendownload abgeschlossen ist.
Das Bedienfeld „Eigenschaften“ für die HTML5-Audiodaten
Browser MP3 WAV OGG
Internet Explorer 9 Ja Nein Nein
Firefox 4.0 Nein Ja Ja
Google Chrome 6 Ja Ja Ja
Apple Safari 5 Ja Ja Nein
Opera 10.6 Nein Ja Ja
364
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Audiodaten in der Browser-Vorschau testen
1. Speichern Sie die Webseite.
2. Wählen Sie „Datei“ > „Vorschau in Browser“. Wählen Sie den Browser für den Test der Audiodaten aus.
365
Vergrößern und Verkleinern der Ansicht
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Ansicht einer Seite vergrößern oder verkleinern
Seite nach dem Vergrößern oder Verkleinern der Ansicht bearbeiten
Seite nach dem Vergrößern oder Verkleinern der Ansicht schwenken
Dokumentfenster mit einer Auswahl füllen
Dokumentfenster mit einer ganzen Seite füllen
Dokumentfenster mit der gesamten Breite einer Seite füllen
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.
Hinweis: Die Zoomwerkzeuge sind nur in der Entwurfsansicht verfügbar.
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.
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“.
Verwandte Hilfethemen
Überblick über die Statusleiste
366
Rechtliche Hinweise | Online-Datenschutzrichtlinie
367
Arbeiten mit Spry-Widgets (allgemeine Anweisungen)
Hinweis:
Nach oben
Widget-Struktur
Widget-Verhalten
Widget-Stil
Nach oben
Nach oben
Hinweis:
Nach oben
Spry-Widgets
Spry-Widgets - Ressourcen und Tutorials
Spry-Widget einfügen
Spry-Widget auswählen
Spry-Widget bearbeiten
Stil eines Spry-Widgets festlegen
Weitere Widgets
Standardordner für Spry-Elemente ändern
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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:
Ein HTML-Codeblock zur Definition der strukturellen Zusammensetzung des Widgets.
JavaScript zur Steuerung des Widget-Verhaltens bei Benutzeraktionen.
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.
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.
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.
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.
368
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Nach oben
Nach oben
Nach oben
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.
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.
Weitere Empfehlungen von Adobe
Grundlegendes zu Cascading Stylesheets
369
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
370
Arbeiten mit Text
Nach oben
Nach oben
Dokumenten Text hinzufügen
Sonderzeichen einfügen
Leerzeichen zwischen Zeichen einfügen
Absatzabstände hinzufügen
Aufzählungslisten und nummerierte Listen erstellen
Text suchen und ersetzen
Abkürzungen und Akronyme definieren
Voreinstellungen für das Kopieren und Einfügen festlegen
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.
Hinweis: 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)
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:
371
Nach oben
Nach oben
Nach oben
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.
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.
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“
372
Nach oben
(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.
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.
Hinweis: Mit den folgenden Befehlen können Sie nach Dateien in einer Site suchen: „Auf lokaler Site lokalisieren“ und „Auf entfernter Site
lokalisieren“.
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.
373
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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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
374
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“.
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.
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.
375
Nach oben
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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.
Verwandte Hilfethemen
Festlegen von CSS-Eigenschaften
Rechtliche Hinweise | Online-Datenschutzrichtlinie
376
Arbeiten mit dem Spry-QuickInfo-Widget
Hinweis:
Nach oben
Nach oben
Hinweis:
QuickInfo-Widget
QuickInfo-Widgets einfügen
Optionen für QuickInfo-Widgets bearbeiten
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
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.
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.
377
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Optionen für QuickInfo-Widgets bearbeiten
Sie können Optionen festlegen, um das Verhalten des QuickInfo-Widgets anzupassen.
Name
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
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“.
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.
378
Arbeiten mit dem Widget „Spry Paletten mit Registerkarten“
Hinweis:
Nach oben
Nach oben
Hinweis:
Widget „Paletten mit Registerkarten“
Widgets vom Typ „Paletten mit Registerkarten“ einfügen und bearbeiten
Widget „Paletten mit Registerkarten“ anpassen
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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
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“.
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
379
Nach oben
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 festlegen, welches Paletten-Widget mit Registerkarten beim Öffnen der Seite in einem Browser angezeigt wird.
1. Wählen Sie ein Widget vom Typ „Paletten mit Registerkarten“ im Dokumentfenster aus.
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 Widgets „Paletten mit Registerkarten“ 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.
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:
Zu ändernder Text Relevante CSS-Regel Beispiel für hinzuzufügende
Eigenschaften/Werte
Text im gesamten Widget .TabbedPanels font: Arial; font-size:medium;
Nur Text in Palettenregistern .TabbedPanelsTabGroup oder
.TabbedPanelsTab font: Arial; font-size:medium;
Nur Text in den Inhaltsfenstern .TabbedPanelsContentGroup oder
.TabbedPanelsContent font: Arial; font-size:medium;
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 ändernde Farbe Relevante CSS-Regel Beispiel für hinzuzufügende/zu
ändernde Eigenschaften/Werte
Hintergrundfarbe der Palettenregister .TabbedPanelsTabGroup oder
.TabbedPanelsTab background-color: #DDD (dies ist der
Standardwert)
Hintergrundfarbe der Inhaltsfenster .Tabbed PanelsContentGroup
oder .TabbedPanelsContent background-color: #EEE (dies ist der
Standardwert)
380
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
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)
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;.
Weitere Empfehlungen von Adobe
381
Spry-Framework
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis: Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite
noch ändern, aber Sie können keine neuen Spry-Widgets hinzufügen.
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.
Weitere Empfehlungen von Adobe
Spry-Entwicklerhandbuch
382
Vorlagen
383
Verwenden optionaler Bereiche in Vorlagen
Nach oben
Nach oben
Optionale Bereiche in Vorlagen
Optionale Bereiche einfügen
Werte für optionale Bereiche festlegen
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.
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.
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“.
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ü
384
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
385
Vorlagensyntax
Nach oben
Nach oben
Nach oben
Allgemeine Syntaxregeln
Vorlagen-Tags
Instanz-Tags
Vorlagensyntax überprüfen
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:
<!-- 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="..." -->
386
Nach oben
<!-- 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
387
Voreinstellungen für Vorlagenbereiche
Nach oben
Nach oben
Code-Farbeinstellungen für Vorlagen anpassen
Markierungseinstellungen für Vorlagenbereiche festlegen
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“.
Hinweis: 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.
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).
Weitere Informationen zur Verwendung des Farbwählers finden Sie unter Farbauswahl verwenden.
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.
Hinweis: 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.
Hinweis: 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
388
Farbe gegenüber der Hintergrundfarbe der Seite sichtbar ist.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
389
Vorlagen und vorlagenbasierte Dokumente erkennen
Nach oben
Nach oben
Vorlagen in der Entwurfsansicht erkennen
Vorlagen in der Codeansicht erkennen
Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen
Vorlagenbasierte Dokumente in der Codeansicht 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:
<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>
390
Nach oben
Nach oben
Hinweis: 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.
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.
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.
Verwandte Hilfethemen
391
Rechtliche Hinweise | Online-Datenschutzrichtlinie
392
Vorlageninhalte exportieren und importieren
Nach oben
Nach oben
Nach oben
Nach oben
XML-Inhalte in Vorlagen
Bearbeitbare Bereiche von Dokumenten als XML-Code exportieren
XML-Inhalte importieren
Site ohne Vorlagen-Markup exportieren
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.
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.
Hinweis: 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.
Hinweis: 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
393
„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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
394
Inhalte in vorlagenbasierten Dokumenten bearbeiten
Nach oben
Nach oben
Nach oben
Inhalte in Dokumenten bearbeiten, die auf Vorlagen basieren
Vorlageneigenschaften ändern
Einträge für wiederholende Bereiche hinzufügen, entfernen und ihre Reihenfolge ändern
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.
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.
Hinweis: 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.
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.
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.
Hinweis: 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.
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.
Hinweis: 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
395
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.
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.
Hinweis: 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.
Hinweis: Beim Einfügen wird ein neuer Eintrag hinzugefügt; vorhandene Einträge werden durch den neuen Eintrag nicht ersetzt.
Verwandte Hilfethemen
Seiten basierend auf einer vorhandenen Vorlage erstellen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
396
Vorlagen bearbeiten, aktualisieren oder löschen
Nach oben
Nach oben
Vorlagen bearbeiten und aktualisieren
Vorlagen für die Bearbeitung öffnen
Vorlagen umbenennen
Vorlagenbeschreibungen ändern
Vorlagenbasierte Dokumente manuell aktualisieren
Vorlagen in einer Contribute-Site aktualisieren
Vorlagendateien 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.
Hinweis: 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.
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.
Hinweis: Sie können bei Bedarf die Dokumente auch manuell mit Änderungen der Vorlage aktualisieren.
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“ .
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:
397
Nach oben
Nach oben
Nach oben
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.
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“.
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
398
Nach oben
Nach oben
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.
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.
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.
Wichtig: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
399
Definieren bearbeitbare Tag-Attribute in Vorlagen
Nach oben
Nach oben
Bearbeitbare Tag-Attribute in Vorlagen festlegen
Bearbeitbare Tag-Attribute als nicht bearbeitbar markieren
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.
Hinweis: 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“.
Bearbeitbare Tag-Attribute als nicht bearbeitbar markieren
400
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
401
Verschachtelte Vorlagen erstellen
Nach oben
Verschachtelte Vorlagen
Verschachtelte Vorlage erstellen
Verhindern, dass bearbeitbarere Bereiche an verschachtelte Vorlagen übertragen werden
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.
Im folgenden Beispiel beinhaltet die Vorlage trioHome drei bearbeitbare Bereiche: Body, NavBar und Footer.
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.
402
Nach oben
Nach oben
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.
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.
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.
Hinweis: 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“.
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:
403
@@("")@@
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 -->
Verwandte Hilfethemen
Verschachtelte Vorlagen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
404
Erstellen wiederholender Bereiche in Vorlagen
Nach oben
Nach oben
Nach oben
Wiederholende Bereiche in Vorlagen
Wiederholende Bereiche in Vorlagen erstellen
Wiederholende Tabellen einfügen
Abwechselnde Hintergrundfarben in einer wiederholenden Tabelle festlegen
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“.
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.
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.)
Hinweis: Bei der Eingabe des Namens für einen Bereich dürfen keine Sonderzeichen verwendet werden.
4. Klicken Sie auf „OK“.
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.
405
Nach oben
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.
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>
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
406
Erstellen bearbeitbarer Bereiche in Vorlagen
Nach oben
Nach oben
Nach oben
Einfügen eines bearbeitbaren Bereichs
Bearbeitbare Bereiche auswählen
Bearbeitbare Bereiche entfernen
Die Namen bearbeitbarer Bereiche ändern
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.
Hinweis: 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.
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.)
Hinweis: 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.
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.
Hinweis: 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.
407
Nach oben
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).
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
408
Erstellen von Dreamweaver-Vorlagen
Nach oben
Nach oben
Nach oben
Grundsätzliches zum Erstellen von Dreamweaver-Vorlagen
Vorlagen aus vorhandenen Dokumenten erstellen
Vorlagen mithilfe des Bedienfelds „Elemente“ erstellen
Vorlagen für Contribute-Sites
Vorlagen für Contribute-Sites erstellen
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.
Hinweis: ColdFusion und ASP werden ab Dreamweaver CC nicht mehr unterstützt.
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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
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.
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“.
409
Nach oben
Nach oben
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.
Hinweis: 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.
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.
410
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.
Verwandte Hilfethemen
Tutorial zur Erstellung von Vorlagen
Tutorial zur Verwendung von Vorlagen
Leere Vorlagen erstellen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
411
Vorlagen auf vorhandene Dokumente anwenden oder aus
Dokumenten entfernen
Nach oben
Vorlagen auf vorhandene Dokumente anwenden
Dokument von einer Vorlage lösen
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.
Wichtig: 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.
Wichtig: 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.
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
412
Nach oben
möchten.
Wichtig: 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.
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
413
Dreamweaver-Vorlagen
Nach oben
Nach oben
Nach oben
Grundlegendes zu Dreamweaver-Vorlagen
Arten von Vorlagenbereichen
Hyperlinks in Vorlagen
Serverskripts in Vorlagen und vorlagenbasierten Dokumenten
Vorlagenparameter
Vorlagenausdrücke
Verwendete Sprache für Vorlagenausdrücke
Mehrfache If-Bedingung in Vorlagencodes
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.
Hinweis: 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.
Hinweis: 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
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.
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.
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
414
Nach oben
Nach oben
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.)
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.
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
415
Nach oben
Nach oben
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.
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.
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.
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.
_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.
416
Nach oben
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
417
XML
418
XML und XSLT
Nach oben
XML und XSL mit Webseiten verwenden
Serverseitige XSL-Transformationen
Clientseitige XSL-Transformationen
XML-Daten und wiederholte Elemente
Vorschau der XML-Daten anzeigen
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 Stylesheets) 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.
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.
419
Nach oben
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.
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.
Hinweis: Bevor Sie serverseitige Transformationen durchführen können, müssen Sie Ihren Server entsprechend konfigurieren. Wenden Sie sich
420
Nach oben
an Ihren Serveradministrator, um weitere Informationen zu erhalten.
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.
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.
Hinweis: 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.
421
Nach oben
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.
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.
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:
<xsl:for-each select="rss/channel/item">
<table width="500" border="1">
422
Nach oben
<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.
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.
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
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. 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.
Hinweis: 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.
423
Verwandte Hilfethemen
XML-Tutorial
Rechtliche Hinweise | Online-Datenschutzrichtlinie
424
XSL-Transformationen auf dem Server ausführen
Nach oben
Arbeitsablauf beim Durchführen serverseitiger XSL-Transformationen
XSLT-Seiten erstellen
HTML-Seiten in XSLT-Seiten konvertieren
XML-Datenquellen anhängen
XML-Daten in XSLT-Seiten anzeigen
Wiederholte XML-Elemente anzeigen
XSLT-Fragmente in dynamische Seiten einfügen
XSLT-Fragmente aus dynamischen Seiten löschen
Serververhalten für XSL-Transformationen bearbeiten
Dynamische Hyperlinks erstellen
Stile auf XSLT-Fragmente anwenden
Parameter mit XSL-Transformationen verwenden
Bedingte XSLT-Bereiche erstellen und bearbeiten
XSL-Kommentare einfügen
Mithilfe des XPATH-Ausdrucksgenerators Ausdrücke für XML-Daten hinzufügen
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.
Hinweis: 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):
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.
425
Nach oben
Nach oben
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.
Hinweis: 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“.
Hinweis: 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
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.
426
Nach oben
Nach oben
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.
Hinweis: 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.
Hinweis: 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.
427
Nach oben
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“).
Hinweis: Wenn Sie Ihre Seite in einer Browservorschau anzeigen, führt Dreamweaver eine interne XSL-Transformation ohne Rückgriff auf
einen Anwendungsserver durch.
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“.
3. Wählen Sie das wiederholte, durch ein Pluszeichen gekennzeichnete Element im XPATH-Ausdrucksgenerator aus.
428
Nach oben
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.
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.
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.
Hinweis: 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.
Hinweis: 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.
429
Nach oben
Nach oben
Nach oben
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.
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.)
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 (–).
Hinweis: 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“.
430
Nach oben
Nach oben
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.
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.
Hinweis: 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.
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.
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.
431
Nach oben
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 (–).
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:
432
<xsl:if test="@available=&apos;true&apos;">
Content goes here
</xsl:if>
Hinweis: 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.
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:
<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.
433
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Hinweis: 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:
434
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“.
435
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.
Hinweis: Wiederholte Elemente sind in der XML-Schemastruktur durch ein Plussymbol (+) gekennzeichnet.
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“.
436
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>
Hinweis: 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.
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.
437
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“.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
438
XSL-Transformationen auf dem Client ausführen
Nach oben
Nach oben
Nach oben
Arbeitsablauf beim Durchführen clientseitiger XSL-Transformationen
Ganze XSLT-Seiten erstellen und Daten anzeigen
XSLT-Seite mit einer XML-Seite verknüpfen
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.
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.
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.
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.
Hinweis: 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“.
439
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
440
Fehlende Zeichenentitäten für XSLT
Nach oben
Fehlende Zeichenentitäten angeben
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:
Zeichen Entitätscode
< (kleiner als) &lt;
& (Et-Zeichen) &amp;
> (größer als) &gt;
" (Anführungszeichen) &quot;
(Apostroph) &apos;
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.
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.
441
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
442
jQuery
443
Verwenden von jQuery-UI-Widgets in Dreamweaver
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Hinweis:
Nach oben
Spry-Widgets werden ab Dreamweaver CC durch jQuery-Widgets ersetzt. Sie können zwar vorhandene Spry-Widgets auf der Seite noch ändern,
aber Sie können keine neuen Spry-Widgets hinzufügen.
Widgets sind kleine Webanwendungen, die in Sprachen wie DHTML und JavaScript geschrieben sind und in eine Webseite eingefügt und von der
Webseite heraus ausgeführt werden können. Unter anderem bieten Web-Widgets eine Möglichkeit, Desktop-Erfahrungen auf einer Webseite zu
replizieren.
jQuery-UI-Widgets wie „Accordion“ (Akkordeon), „Tabs“ (Registerkarten), „Datepicker“ (Datumsauswahl), „Slider“ (Regler) und „Autocomplete“
(automatische Vervollständigung) bringen die vom Desktop gewohnte Anwendungserfahrung ins Web.
Das Widget „Tabs" beispielsweise kann verwendet werden, um die Funktionalität von Registerkarten in den Dialogfeldern von Desktop-
Anwendungen zu nachzubilden.
jQuery-Widgets einfügen
Wenn Sie ein jQuery-Widget einfügen, wird Folgendes automatisch in den Code eingefügt:
Verweise auf alle abhängigen Dateien
Ein script-Tag, das die jQuery-API für das Widget enthält. Weitere Widgets werden in dasselbe script-Tag eingefügt.
Weitere Informationen zu jQuery-Widgets finden Sie unter http://jqueryui.com/demos/
Für jQuery-Effekte wird kein externer Verweis zu jquery-1.8.24.min.js eingefügt, da diese Datei automatisch enthalten ist, wenn Sie
einen Effekt hinzufügen.
1. Setzen Sie den Cursor auf die Stelle der Seite, an der Sie das Widget einfügen wollen.
2. Wählen Sie „Einfügen“ > „jQuery UI“ und wählen Sie das Widget aus, das eingefügt werden soll.
Wenn Sie das Bedienfeld „Einfügen“ verwenden, finden Sie die Widgets unter der Kategorie „jQuery UI“.
Wenn Sie ein jQuery-Widget auswählen, werden seine Eigenschaften im Bedienfeld „Eigenschaften“ angezeigt.
Eine Vorschau der jQuery-Widgets können Sie in der Live-Ansicht oder in einem Browser, der jQuery-Widgets unterstützt, anzeigen.
jQuery-Widgets ändern
1. Wählen Sie das Widget aus, das Sie ändern wollen.
2. Ändern Sie im Bedienfeld „Eigenschaften“ die Eigenschaften.
Um beispielsweise für ein Tabs-Widget eine zusätzliche Registerkarte zu definieren, wählen Sie das Widget aus und klicken im Bedienfeld
„Eigenschaften“ auf „+“.
Videotutorial
Verwenden von jQuery-Widgets auf Webseiten in Dreamweaver
444
Verwenden von jQuery-Effekten in Dreamweaver
Nach oben
Nach oben
Spry-Effekte werden in Dreamweaver CC durch jQuery-Effekte ersetzt. Sie können zwar vorhandene Spry-Effekte auf der Seite noch ändern, aber
Sie können keine neuen Spry-Effekte hinzufügen.
jQuery-Effekte hinzufügen
Ereignisbasierte jQuery-Effekte
jQuery-Effekte entfernen
jQuery-Effekte hinzufügen
1. Wählen Sie in der Entwurfs- oder Codeansicht Ihres Dreamweaver-Dokuments das Element aus, auf das Sie einen jQuery Effekt anwenden
wollen.
2. Wählen Sie „Fenster“ > „Verhalten“, um das Bedienfeld „Verhalten“ zu öffnen.
3. Klicken Sie auf , wählen Sie „Effekte“ und dann den gewünschten Effekt.
Ein Bedienfeld mit spezifischen Einstellungen für den ausgewählten Effekt wird angezeigt.
4. Legen Sie die Einstellungen fest, etwa ein anderes Zielelement, auf das der Effekt angewendet werden soll, oder die Dauer des Effekts.
Als Zielelement kann das ursprünglich ausgewählte Element dienen oder auch ein anderes Element auf der Seite. Angenommen, Sie
möchten erreichen, dass beim Klicken auf ein Element A ein Element B ein- oder ausgeblendet wird, dann ist B das Zielelement.
5. Um mehrere jQuery-Effekte hinzuzufügen, wiederholen Sie die obigen Schritte.
Wenn Sie mehrere Effekte auswählen, wendet Dreamweaver die Effekte in der Reihenfolge an, in der sie im Bedienfeld „Verhalten“
angezeigt werden. Um die Reihenfolge der Effekte zu ändern, verwenden Sie die Pfeiltasten oben im Bedienfeld.
Dreamweaver fügt automatisch den entsprechenden Code in das Dokument ein. Wenn Sie beispielsweise den Effekt „fade“ ausgewählt haben,
wird der folgende Code eingefügt:
Verweise auf externe Dateien für abhängige Dateien, die für ein Funktionieren des jQuery-Effekts erforderlich sind:
<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script
src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
Der folgende Code wird auf das Element im body-Tag angewendet:
<li id="earthFrm" onclick="MM_DW_effectAppearFade($('#earthForms'),'show','fade',1000)"> Earth Forms</li>
Ein script-Tag wird zusammen mit dem folgenden Code eingefügt:
<script type="text/javascript"> function MM_DW_effectAppearFade(obj,method,effect,speed) {
obj[method](effect, {}, speed); }</script>
Ereignisbasierte jQuery-Effekte
Wenn Sie einen jQuery Effekt anwenden, wird er standardmäßig dem Ereignis „onClick“ zugewiesen. Im Bedienfeld „Verhalten“ können Sie
jedoch das auslösende Ereignis für einen Effekt ändern.
1. Wählen Sie das erforderliche Seitenelement aus.
2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Symbol „Festgelegte Ereignisse zeigen“.
3. Klicken Sie auf die Zeile, die dem aktuell angewendeten Effekt entspricht. Wenn Sie in die linke Spalte klicken, erscheint eine Dropdownliste
mit den verfügbaren Ereignissen.
4. Klicken Sie gegebenenfalls auf den Pfeil für die Dropdownliste und dann auf das erforderliche Ereignis.
445
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
jQuery-Effekte entfernen
1. Wählen Sie das erforderliche Seitenelement aus.
Das Bedienfeld „Verhalten“ listet alle Effekte auf, die auf das ausgewählte Seitenelement angewendet wurden.
2. Klicken Sie auf den zu löschenden Effekt und dann auf .
446
Hyperlinks und Navigation
447
Fehler in Hyperlinks beheben
Nach oben
Fehlerhafte, externe und verwaiste Hyperlinks suchen
Fehlerhafte Hyperlinks reparieren
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.
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.
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.
Hinweis: 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.
448
Nach oben
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).
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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
449
Navigationsleisten
Nach oben
Informationen zu Navigationsleisten
Informationen zu Navigationsleisten
Die Funktion „Navigationsleiste“ ist ab Dreamweaver CS5 veraltet.
Zum Erstellen von Navigationsleisten wird die Verwendung des Menüleisten-Widgets empfohlen.
Verwandte Hilfethemen
Arbeiten mit dem Spry-Menüleisten-Widget
Rechtliche Hinweise | Online-Datenschutzrichtlinie
450
Hyperlinks erstellen
Nach oben
Nach oben
Nach oben
Hyperlinks zwischen Dateien und Dokumenten erstellen
Definieren von JavaScript-Verhalten für Hyperlinks
Hyperlinks zu Dokumenten mit dem Eigenschafteninspektor erstellen
Hyperlinks zu Dokumenten mit dem Dateizeigersymbol erstellen
Hyperlinks mit dem Befehl „Hyperlink“ einfügen
Relativen Pfad neuer Hyperlinks festlegen
Hyperlinks zu bestimmten Stellen in einem Dokument erstellen
E-Mail-Verknüpfungen erstellen
Null- und Skript-Hyperlinks erstellen
Hyperlinks automatisch aktualisieren
Hyperlinks für die ganze Site ändern
Hyperlinks in Dreamweaver testen
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
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.
Wichtig: 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.
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.
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.
451
Nach oben
Nach oben
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.)
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.
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“.
Hinweis: 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.
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.
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.
452
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: Wenn der Anker nicht angezeigt wird, können Sie ihn mit „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“ sichtbar
machen.
453
Nach oben
Nach oben
Nach oben
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.
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.
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.)
454
Nach oben
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).
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.
Hinweis: Wenn Sie einen E-Mail-, FTP-, Null- oder Skript-Hyperlink ändern, müssen Sie keine Datei auswählen.
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.
455
Nach oben
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.
Wichtig: 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.
Hinweis: Das verknüpfte Dokument muss sich auf dem lokalen Datenträger befinden.
Verwandte Hilfethemen
Tutorial zur Erstellung von Hyperlinks
Rechtliche Hinweise | Online-Datenschutzrichtlinie
456
Sprungmenüs
Nach oben
Nach oben
Nach oben
Informationen zu Sprungmenüs
Sprungmenüs einfügen
Elemente in Sprungmenüs bearbeiten
Fehlersuche bei 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.
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.
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.
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.
457
Nach oben
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“.
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.
Hinweis: Verwenden Sie im Dialogfeld „Sprungmenü einfügen“ in jedem Sprungmenü nur eine dieser Optionen, da sie sich auf das
gesamte Sprungmenü auswirken.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
458
Imagemaps
Nach oben
Nach oben
Informationen zu Imagemaps
Clientseitige Imagemaps einfügen
Imagemap-Hotspots ändern
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.
Hinweis: 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.
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.
Hinweis: 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.
459
Nach oben
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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
460
Allgemeines zu Hyperlinks und Navigation
Nach oben
Nach oben
Hyperlinks
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade
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.
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.
Hinweis: 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.
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.
Hinweis: 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:
461
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.
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.)
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
462
Schreiben von Code
463
Schreiben und Bearbeiten von Code
Nach oben
Codehinweise
Site-specific code hints
Code mit der Code-Symbolleiste einfügen
Code im Bedienfeld „Einfügen“ einfügen
Tags über die Tag-Auswahl einfügen
HTML-Kommentare einfügen
Code kopieren und einfügen
Tags mit Tag-Editoren bearbeiten
Code über das Kontextmenü „Kodierung“ bearbeiten
Serversprachen-Tag mit dem Eigenschafteninspektor bearbeiten
Codeblöcke einrücken
Zugehörigen Code anzeigen
Zu JavaScript- oder VBScript-Funktionen navigieren
JavaScript extrahieren
Mit Codefragmenten arbeiten
Nach Tags, Attributen oder Text im Code suchen
Suchmuster speichern und aufrufen
Referenzmaterial zu Sprachen verwenden
Code drucken
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)
464
HTML4 und HTML5
jQuery (ab CS5.5)
JavaScript (einschließlich Codehinweise für benutzerdefinierte Klassen)
JSP
PHP MySQL
Spry
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.
Hinweis: 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.
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
465
Nach oben
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.
Site-specific code hints
Dreamweaver CS5 lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code
view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells
Dreamweaver where to look for code hints that are specific to your site.
For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_de.
Create the configuration file
Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver.
By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory.
Hinweis: The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code hints to display,
the page you are working on must reside in the currently selected site.
1. Select Site > Site-Specific Code Hints.
By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re
using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress.
The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures.
Hinweis: You cannot delete or rename the existing default framework structures.
2. In the sub-root text box, specify the sub-root folder where you store your framework’s files. You can click the folder icon next to the text box
to browse to the framework files’ location.
Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and/or files you want to scan are all
displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.
3. Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog
box, you can specify particular file extensions that you want to include.
Hinweis: Specifying particular file extensions speeds up the scanning process.
4. To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the Files window.
Hinweis: If Drupal or Joomla is the selected framework, the Site-Specific Code Hints dialog box displays an additional path to a file within
your Dreamweaver configuration folder. Don’t delete this—it’s required when using these frameworks.
5. To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following:
Select Scan This Folder to include the selected folder in the scan.
Select Recursive to include all files and folders within a selected directory.
466
Nach oben
Click the Extensions button to open the Find Extensions dialog box, where you can specify the file extensions you want included in your
scan for a particular file or folder.
Save site structure
You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.
1. Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.
2. Click the Save Structure button in the upper right-hand corner of the dialog box.
3. Specify a name for your site structure and click Save.
Hinweis: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite
the structure with the same name. You cannot overwrite any of the default framework structures.
Rename site structures
When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word
“custom”.
1. Display the structure that you want to rename.
2. Click the Rename Structure icon button in the upper right-hand corner of the dialog box.
3. Specify a new name for the structure and click Rename.
Hinweis: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite
the structure with the same name. You cannot overwrite any of the default framework structures.
Add files or folders to a site structure
You can add any files or folders that are associated with your framework. After that, you can specify the file extensions of the files you want to
scan. (See the next section.)
1. Click the plus (+) button above the Files window to open the Add File/Folder dialog box.
2. In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to
browse to a file or folder.
3. Click the plus (+) button above the Extensions window to specify the file extensions of files you want to scan.
Hinweis: Specifying particular file extensions speeds up the scanning process.
4. Click Add.
Scan a site for file extensions
Use the Find Extensions dialog box to view and edit file extensions that are included in the site structure.
1. In the Site-Specific Code Hints dialog box, click the Extensions button.
The Find Extensions dialog box lists the current scannable extensions.
2. To add another extension to the list, click the plus (+) button above the Extensions window.
3. To delete an extension from the list, click the minus (-) button.
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 Zugehörigen Code anzeigen.
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
467
Nach oben
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.
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.
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.
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.
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 und Inline-CSS einer CSS-Regel hinzufügen.
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 Sie die XML-Datei bearbeiten, die die
Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch Erweitern von Dreamweaver.
Hinweis: 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“).
468
Nach oben
Nach oben
Nach oben
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.
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.
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“.
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.
469
Nach oben
Nach oben
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“.
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.
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.
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.
Negativeinzug verschiebt die Auswahl nach links.
470
Nach oben
Nach oben
Nach oben
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.
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“.
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.
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“.
Zugehörigen Code anzeigen
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.
471
Nach oben
Nach oben
Hinweis: 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“.
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.
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.
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
472
Nach oben
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.
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.
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.
473
Nach oben
Hinweis: 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).
Hinweis: 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.
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.
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“.
474
Nach oben
Nach oben
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).
Suchmuster speichern und aufrufen
Sie können Suchmuster speichern und später erneut verwenden.
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.
Hinweis: 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.
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
475
Nach oben
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.
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).
Verwandte Hilfethemen
W3C Document Object Model
Tutorial zu Codehinweisen
Überblick über die Code-Symbolleiste
Zugehörige Dateien öffnen
Tutorial zum Code-Navigator
Rechtliche Hinweise | Online-Datenschutzrichtlinie
476
Mit Server-Side Includes arbeiten
Nach oben
Nach oben
Server-Side Includes
Server-Side Includes einfügen
Inhalt von Server-Side Includes bearbeiten
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.
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.)
Hinweis: 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.)
Hinweis: 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.
477
Nach oben
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.)
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
478
Mit Head-Inhalt für Seiten arbeiten
Nach oben
Nach oben
Head-Inhalt anzeigen und bearbeiten
Meta-Eigenschaften für die Seite festlegen
Seitentitel festlegen
Schlüsselwörter für die Seite angeben
Beschreibungen für die Seite angeben
Aktualisierungseigenschaften für die Seite festlegen
URL-Basiseigenschaften der Seite festlegen
Hyperlinkeigenschaften der Seite festlegen
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.
Hinweis: 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“.
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
479
Nach oben
Nach oben
Nach oben
Nach oben
(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.
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.
480
Nach oben
Nach oben
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.
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.
Hinweis: 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“.
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.
481
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
482
Codeumgebung einrichten
Nach oben
Nach oben
Programmiererfreundliche Arbeitsbereiche verwenden
Anzeigen von Code
Anpassen von Tastaturbefehlen
Dateien standardmäßig in der Codeansicht öffnen
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.
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.
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.
Code-Navigation ermöglicht die schnelle Fortbewegung durch den Code. Weitere Informationen finden Sie unter Zu JavaScript- oder VBScript-
Funktionen navigieren.
Ansichtsoptionen dient zur Angabe, wie der Code angezeigt werden soll. Weitere Informationen finden Sie unter Erscheinungsbild des Codes
festlegen.
483
Nach oben
Nach oben
Wie Sie die an der linken Fensterseite befindliche Code-Symbolleiste verwenden, erfahren Sie unter Code mit der Code-Symbolleiste einfügen.
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
484
Festlegen von Codeeinstellungen
Nach oben
Nach oben
Nach oben
Voreinstellungen für Code
Erscheinungsbild des Codes festlegen
Codeformat ändern
Einstellungen für das Umschreiben von Code festlegen
Codefarben festlegen
Mit externen Editoren arbeiten
Voreinstellungen für Code
Sie können Codeeinstellungen Ihren Anforderungen entsprechend festlegen, z. B. Codeformatierung oder Codeeinfärbung.
Hinweis: Weitere Einstellungen können Sie im Tag-Bibliothek-Editor festlegen (siehe Verwalten von Tag-Bibliotheken).
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.
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.
Hinweis: 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.
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.
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).
485
Nach oben
Hinweis: 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.
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.
Hinweis: 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)“.
Hinweis: 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“).
Hinweis: 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.
Hinweis: 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 Stylesheets) 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.
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).
486
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
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.
Schreibgeschützt-Hintergrund legt die Hintergrundfarbe für schreibgeschützten Text fest.
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.
Externen Editor für einen Dateityp festlegen
487
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“.
Verwandte Hilfethemen
Überblick über die Code-Symbolleiste
Microsoft Word-HTML-Dateien optimieren
Rechtliche Hinweise | Online-Datenschutzrichtlinie
488
Code optimieren und debuggen
Nach oben
Nach oben
Optimieren von Code
Überprüfen, ob Tags und Klammern paarweise vorhanden sind
Browserkompatibilität überprüfen
XML-Dokumente überprüfen
Dokumente mit der W3C-Überprüfung überprüfen (CS 5.5)
Validator-Voreinstellungen festlegen
Seiten mit XHTML kompatibel machen
ColdFusion-Debugger verwenden (nur Windows)
Optimieren von Code
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.
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“.
Hinweis: 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.
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).
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.
Ü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
489
Nach oben
Nach oben
Nach oben
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.
Hinweis: Diese Funktion ersetzt die frühere Funktion „Zielbrowser-Prüfung“, bietet aber weiterhin deren CSS-Funktionalität.
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.
Hinweis: 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.
490
Nach oben
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.
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.
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
491
Nach oben
Nach oben
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.
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 Popupmenü „Dok.typ“ 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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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 finden Sie unter Einrichten
eines Testservers.
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.
492
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“.
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“).
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
493
Verwalten von Tag-Bibliotheken
Nach oben
Nach oben
Nach oben
Dreamweaver-Tag-Bibliotheken
Tag-Bibliothek-Editor öffnen und schließen
Bibliotheken, Tags und Attribute hinzufügen
Bibliotheken, Tags und Attribute bearbeiten
Bibliotheken, Tags und Attribute löschen
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.
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“.
Hinweis: 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.
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.
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“.
494
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Hinweis: 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.
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.
495
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
496
Benutzerdefinierte Tags in Dreamweaver importieren
Nach oben
Nach oben
Nach oben
Nach oben
Informationen zum Importieren benutzerdefinierter Tags in Dreamweaver
Tags aus XML-Dateien importieren
Benutzerdefinierte ASP.NET-Tags importieren
JSP-Tags aus einer Datei oder von einem Server importieren (web.xml)
JRun-Tags 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.
Hinweis: 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 Einrichten eines Testservers). 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.
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.
497
Nach oben
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
498
Allgemeine Informationen zum Programmieren in Dreamweaver
Nach oben
Nach oben
Nach oben
Unterstützte Sprachen
Ungültiger Markup
Automatische Codeänderung
XHTML-Code
Reguläre Ausdrücke
Code für Serververhalten
Unterstützte Sprachen
Neben Textbearbeitungsfunktionen bietet Adobe® Dreamweaver® 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.
Hinweis: 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
499
Nach oben
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.
Hinweis: 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:
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 Stellt die Attribute name und id auf den gleichen Wert ein, wenn
500
Nach oben
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>.
das Attribut name von einem Eigenschafteninspektor festgelegt
wurde. Dies gilt für den von Dreamweaver erzeugten Code und
beim Optimieren von XHTML.
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 Attributetype 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.
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).
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“.
501
Nach oben
[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.
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.
Hinweis: 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.
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.
502
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
503
Code in der Entwurfsansicht bearbeiten
Nach oben
Nach oben
Nach oben
Nach oben
Grundlagen zum Bearbeiten von Code in der Entwurfsansicht
Untergeordnete Tags in der Entwurfsansicht auswählen
Code mit dem Eigenschafteninspektor bearbeiten
CFML mit dem Eigenschafteninspektor bearbeiten
Attribute mit dem Tag-Inspektor ändern
Überblick über den Quick Tag Editor
Code mit dem Quick Tag Editor bearbeiten
Menü mit Codehinweisen im Quick Tag Editor verwenden
Code mit dem Tag-Selektor bearbeiten
Skripts in der Entwurfsansicht schreiben und bearbeiten
Skripts auf der Seite mit dem Eigenschafteninspektor bearbeiten
Verwenden von JavaScript-Verhalten
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.
Hinweis: 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.
Hinweis: 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.
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.
504
Nach oben
Nach oben
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).
Wenn Sie den Namen eines Attributs ändern möchten, wählen Sie ihn aus und bearbeiten Sie ihn.
Hinweis: 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.
Ü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.
Hinweis: 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
505
Nach oben
Nach oben
aktiv ist.
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.
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.
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: Die Einstellungen für die Codehinweise im Quick Tag Editor werden über die üblichen Einstellungen für die Codehinweise gesteuert.
506
Nach oben
Nach oben
Weitere Informationen hierzu finden Sie unter Einstellungen für Codehinweise festlegen.
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:
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.
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“.
507
Nach oben
Nach oben
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“.
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.
Hinweis: 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.
Hinweis: 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.
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.
Verwandte Hilfethemen
508
Rechtliche Hinweise | Online-Datenschutzrichtlinie
509
Code ausblenden
Nach oben
Nach oben
Informationen zum Ausblenden von Code
Codefragmente aus- und einblenden
Ausgeblendete Codefragmente einfügen und verschieben
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.
Hinweis: Aus Dreamweaver-Vorlagen erstellte Dateien werden mit vollständig eingeblendetem Code angezeigt, auch wenn die Vorlagendatei
(.dwt) ausgeblendete Codefragmente enthält
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.
2. Wählen Sie „Bearbeiten“ > „Code ausblenden“ und wählen Sie eine der Optionen.
Ausgeblendete Codefragmente auswählen
Klicken Sie in der Codeansicht auf das ausgeblendete Codefragment.
Hinweis: 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:
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
510
Nach oben
Alles einblenden Strg+Alt+E Befehl+Alt+E
Ausgeblendete Codefragmente einfügen und verschieben
Sie haben die Möglichkeit, ausgeblendete Codefragmente zu kopieren und einzufügen bzw. durch Ziehen zu verschieben.
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.
Hinweis: Beim Einfügen in andere Anwendungen bleibt das Codefragment nicht ausgeblendet.
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)
Hinweis: Sie können die Auswahl nicht in andere Dokumente ziehen.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
511
Mobilgeräte und Multiscreen
Building Mobile Pages with Dreamweaver CS5.5
David Karlins (03. August 2011)
Lehrgang
David Karlins, Autor von „Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques“, stellt Ihnen Dreamweaver-
Techniken vor, mit denen Sie Webseiten für Mobilgeräte erstellen können, die auf jQuery JavaScript basieren.
512
Verpacken von Webanwendungen als native mobile Anwendungen
mit PhoneGap Build
Nach oben
Nach oben
Nach oben
PhoneGap Build und Dreamweaver
PhoneGap Build-Konten erstellen
Entwicklungsumgebung einrichten
Installieren des PhoneGap Build-Zusatzprogramms
Anwendungen für Mobilgeräte mit PhoneGap Build verpacken
PhoneGap Build und Dreamweaver
PhoneGap Build ist ein cloud-basierter Service, mit dem Sie Ihre Webanwendungen als native Anwendungen für Mobilgeräte verpacken können.
Die Integration mit Dreamweaver ermöglicht es Ihnen, Ihre Anwendungen in einer Dreamweaver-Site zu erstellen und zu speichern und sie
anschließend zum PhoneGap Build Service hochzuladen.
PhoneGap Build unterstützt das Verpacken nativer Anwendungen für die folgenden Betriebssysteme für Mobilgeräte:
iOS
Android
BlackBerry
webOS
Symbian
Windows 8
Weitere Informationen zum PhoneGap Build Service finden Sie auf der PhoneGap-Website.
Hilfe zur Verwendung des PhoneGap Build Service finden Sie in der PhoneGap Build-Dokumentation.
PhoneGap Build-Konten erstellen
Sie können PhoneGap Build und Dreamweaver nicht ohne ein PhoneGap Build Service-Konto verwenden. Die Konten sind kostenlos und einfach
einzurichten. Um ein solches Konto zu erstellen, besuchen Sie die Website von PhoneGap Build.
Sie müssen das Konto durch eine Bestätigungs-E-Mail prüfen, bevor das Konto aktiviert wird.
Entwicklungsumgebung einrichten
Je nach Art der Anwendungen, die verpackt werden sollen, und je nach Gerät, auf dem Sie den Test durchführen wollen, müssen Sie
verschiedene Einstellungen vornehmen, bevor Sie Ihre Anwendung verpacken können. Sie können alle oder einige oder auch keine der folgenden
Optionen festlegen:
Android SDK. Wenn Sie Android-Anwendungen auf Ihrem lokalen Computer mithilfe eines Android-Emulators testen möchten, müssen Sie das
Android SDK herunterladen und installieren. Anweisungen hierzu finden Sie in der Android-Dokumentation.
Nachdem Sie das Android SDK installiert haben, müssen Sie den Android SDK- und den AVD-Manager starten und die Android-Werkzeuge
auswählen, mit denen Sie auf Ihrem lokalen Computer arbeiten wollen. Dreamweaver verwendet die Informationen, die bei dieser ersten
Einrichtung festgelegt wurden, zum Ausfüllen der Android-Emulator-Einstellungen im Bedienfeld „PhoneGap Build Service“. Weitere Informationen
zum Festlegen dieser Einstellungen finden Sie in der Android-Dokumentation.
WICHTIG: Wenn Sie einen Android-Emulator verwenden möchten, um Ihre Anwendung lokal zu testen, sollten Sie den Emulator vor dem Test so
konfigurieren, wie er unabhängig von Dreamweaver funktionieren soll.
webOS SDK/PDK. Wenn Sie die webOS-Anwendungen auf Ihrem lokalen Computer mithilfe eines webOS-Emulators testen möchten, müssen Sie
das webOS SDK/PDK herunterladen. Entsprechende Anweisungen finden Sie in der webOS-Dokumentation.
QR-Code-Leser (Quick Response Readers). Wenn Sie Ihre verpackte Anwendung einfach auf Ihr Gerät übertragen wollen, benötigen Sie einen
QR-Code-Leser. (Wenn Sie eine Anwendung mithilfe von Dreamweaver verpacken, bekommen Sie einen QR-Code für die Anwendung, der im
Bedienfeld „PhoneGap Build Service“ erscheint, sobald die Anwendung verpackt worden ist.) Eine Reihe unterschiedlicher, kostenloser Code-
Leser sind auf den verschiedenen Marktplätzen im Internet erhältlich. Weitere Informationen hierzu erhalten Sie, wenn Sie bei Google nach „QR-
Code-Leser“ oder „QR Code Reader“ suchen.
513
Nach oben
Nach oben
Hinweis:
Installieren des PhoneGap Build-Zusatzprogramms
Bevor Sie den PhoneGap Build-Dienst in Dreamweaver verwenden können, müssen Sie das PhoneGap Build-Zusatzprogramm installieren.
Zum Installieren des Zusatzprogramms wählen Sie „Fenster“ > „Zusatzprogramme durchsuchen“. Die Adobe Creative Cloud-Seite für
Zusatzprogramme wird angezeigt. Suchen Sie nach dem PhoneGap Build-Zusatzprogramm und folgen Sie den Anweisungen auf dem Bildschirm,
um das Zusatzprogramm zu installieren.
Wichtig: Bevor Sie Zusatzprogramme installieren, stellen Sie sicher, dass Sie die Dateisynchronisation für Ihr Adobe Creative Cloud-Konto
aktiviert haben. Weitere Informationen finden Sie unter Aktivieren der Dateisynchronisation für die Adobe Creative Cloud.
Anwendungen für Mobilgeräte mit PhoneGap Build verpacken
1. Stellen Sie sicher, dass Sie eine Dreamweaver-Site mit einer index.html-Seite erstellt haben (in der Regel die Startseite der Anwendung).
Hinweis: PhoneGap Build unterstützt nur HTML-, CSS- und JavaScipt-Dateien. Ihre Site kann keine Serverseiten wie PHP, CFM oder
andere serverbasierte Seiten enthalten.
2. Wählen Sie „Site“ > „PhoneGap Build Service“ > „PhoneGap Build Service“.
3. Geben Sie Ihre Anmeldedaten ein und melden Sie sich bei PhoneGap Build an. Wenn Sie noch kein PhoneGap Build-Konto erstellt haben,
sollten Sie den Abschnitt PhoneGap Build-Konten erstellen lesen.
4. Lassen Sie „Als neues Projekt erstellen“ aktiviert und klicken Sie auf „Weiter“.
5. (Dreamweaver 12.0.3-Aktualisierung) Geben Sie für das Ziel-Betriebssystem den erforderlichen Schlüssel und das Kennwort ein.
Signaturschlüsselinformationen sind nur für Android, iOS und Blackberry erforderlich.
Wenn Sie nur eine Anwendung erstellen können, kann das daran liegen, dass Sie den PhoneGap Service nicht abonniert haben.
Wenn Sie falsche Informationen eingeben, wird der Build mit einer Fehlermeldung abgebrochen, die angibt, dass Sie einen
falschen Schlüssel oder ein falsches Kennwort eingegeben haben. Wenn Sie keine Informationen eingeben, wird der iOS-Build mit einer
Fehlermeldung abgebrochen, die den fehlenden Signaturschlüssel bemängelt. Android- und Blackberry-Apps werden unter Verwendung von
Debugzertifikaten erstellt.
6. Beachten Sie, dass Dreamweaver im Stammordner Ihrer Site eine ProjectSettings-Datei anlegt. (Möglicherweise müssen Sie das Bedienfeld
„Dateien“ aktualisieren, damit die Datei angezeigt wird.) Diese Datei ist sehr wichtig, da der PhoneGap Build Service sie verwendet, um Ihre
Anwendung zu verfolgen.
Dreamweaver fügt auch eine config.xml-Datei zu Ihrem Sitestamm hinzu. Um diese einfache XML-Datei zu öffnen, doppelklicken Sie darauf.
514
Ändern Sie den Namen der Anwendung, indem Sie den Inhalt dieser Datei bearbeiten. Wenn Sie das nicht machen, haben alle
Anwendungen denselben Standardanwendungsnamen.
Weitere Informationen zum Verwenden der Datei „config.xml“ finden Sie in der PhoneGap Build-Dokumentation.
7. Speichern Sie die bearbeitete config.xml-Datei, schließen Sie sie und klicken Sie im Bedienfeld „PhoneGap Build Service“ auf „Anwendung
neu erstellen“. Während PhoneGap Ihre Anwendung für die verschiedenen Plattformen verpackt, wird nach und nach die Nachricht „Build
Complete“ angezeigt, d. h Ihr Build ist abgeschlossen.
Sobald Ihre Builds abgeschlossen sind, haben Sie mehrere Möglichkeiten. Sie können die Anwendungsdateien auf Ihren Computer
herunterladen, den QR-Code eines Builds einscannen, um die Anwendung auf Ihr Gerät zu übertragen, oder die Anwendung mithilfe des
Emulators zu emulieren (nur Android und webOS).
Anwendungsdateien herunterladen
Um eine Anwendung von PhoneGap Build herunterzuladen, klicken Sie im Bedienfeld „PhoneGap Build Service“ auf die Symbolschaltfläche
„Anwendung herunterladen“ (den nach unten gerichteten Pfeil).
Hinweis: Ohne Signaturschlüssel ist der Download nicht für iOS-Anwendungen verfügbar. Weitere Informationen finden Sie in der PhoneGap
Build-Dokumentation.
Die Namen der heruntergeladenen Anwendungsdateien lauten wie folgt:
iOS: app.ipa
Android: app.apk
BlackBerry: app.jad
webOS: app.ipk
Symbian: app.wgz
QR-Code einscannen, um eine Anwendung auf ein Gerät zu übertragen
Bevor Sie fortfahren können, muss auf Ihrem Gerät ein QR-Code-Leser installiert sein. Weitere Informationen finden Sie unter
Entwicklungsumgebung einrichten.
515
Stichwörter: what's new, dreamweaver, HTML5, CSS, transitions, web application, web package, effects, CSS3, fluid grid layout, Phonegap, new
features, jquery, business catalyst, web fonts, ftp improvements, PSD optimization, dreamweaver cs6
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis: Ohne Signaturschlüssel sind für iOS-Anwendungen keine QR-Codes verfügbar. Weitere Informationen finden Sie in der PhoneGap
Build-Dokumentation.
Hinweis: Ohne Signaturschlüssel sind für iOS-Anwendungen keine QR-Codes verfügbar.
1. Klicken Sie im Bedienfeld „PhoneGap Build Service“ auf den QR-Code für die Anwendung, die Sie herunterladen wollen.
2. Starten Sie den QR-Code-Leser auf dem Mobilgerät und scannen Sie den QR-Code ein.
3. Sobald der Download der Anwendung abgeschlossen ist, können Sie sie direkt auf Ihrem Gerät starten.
4. Zeigen Sie die Build-Liste wieder an, indem Sie auf die Schaltfläche „Zurück zum Build-Bedienfeld“ klicken.
Anwendungen emulieren (nur Android und webOS)
WICHTIG: Sie müssen das Android SDK und/oder das webOS SDK/PDK installiert haben, bevor Sie fortfahren können. Sie müssen außerdem
alle SDK-/AVD-Informationen angegeben haben, die lokal in den SDK-Anwendungen zur Verfügung stehen sollen. Weitere Informationen finden
Sie unter Entwicklungsumgebung einrichten.
Hinweis: Emulatoren können notorisch langsam sein. Es kann etwas dauern, bis der Emulator die Anwendung gestartet und geladen hat.
1. Öffnen Sie das Bedienfeld „Einstellungen für PhoneGap Build“, indem Sie „Site“ > „PhoneGap Build Service“ > „Einstellungen für PhoneGap
Build“ wählen.
2. Geben Sie den Pfad für das Android- und/oder das webOS-SDK an und klicken Sie auf „Speichern“. Durch diese Pfadangaben weiß
Dreamweaver, wo es die Informationen über Ihre Anwendung findet, die es an den (die) Emulator(en) senden muss.
3. Klicken Sie im Bedienfeld „PhoneGap Build Service“ („Site“ > „PhoneGap Build Service“ > „PhoneGap Build Service“) für die Anwendung,
die Sie emulieren möchten, auf die Schaltfläche „Anwendung emulieren (den nach links gerichteten Pfeil).
4. Wenn Sie zuvor aus den SDK-Anwendungen heraus Ihre SDK-/AVD-Informationen angegeben haben, sollte jetzt ein Fenster angezeigt
werden, in dem diese Informationen bereits ausgefüllt sind.
5. Wählen Sie das SDK/AVD aus, das für die Emulation verwendet werden soll, und klicken Sie auf „Starten“.
516
Verpacken von Webanwendungen
Nach oben
Verpacken von Webanwendungen als native mobile Anwendungen (CS 5.5)
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.
Wichtig: 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].)
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.
Hinweis: 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.
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
517
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das Stammverzeichnis
der Site kopiert.
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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“.
518
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.
Hinweis: Wenn Sie in den Anwendungseinstellungen auf „Speichern“ klicken, wird die Datei „phonegap.js“ in das Stammverzeichnis der
Site kopiert.
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“.
Adobe empfiehlt Haben Sie ein Tutorial, das Sie anderen zur Verfügung stellen wollen?
Packaging web
applications as
mobile apps using
Dreamweaver CS5.5
Jon Michael Varese
Tutorial, in dem Schritt für
Schritt erläutert wird, wie
Sie Ihre Webanwendungen
verpacken
Verwandte Hilfethemen
http://www.phonegap.com/about
http://jquerymobile.com/demos/1.0a2/
http://docs.phonegap.com/
Tutorial über das Verpacken von Webanwendungen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
519
Erstellen von Webanwendungen für mobile Geräte (CS5.5)
Verwandte Hilfethemen
http://jquerymobile.com/demos/1.0a3/
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
http://en.wikipedia.org/wiki/Content_delivery_network
http://docs.jquery.com/Downloading_jQuery
Rechtliche Hinweise | Online-Datenschutzrichtlinie
520
Medienabfragen erstellen
Nach oben
Durch Medienabfragen können Sie basierend auf den gemeldeten Eigenschaften eines Geräts CSS-Dateien festlegen (reaktionsfähiges Design).
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
Vorhandene Datei für die Medienabfrage verwenden
Andere Datei für die siteübergreifende Medienabfrage auswählen
Webseiten basierend auf Medienabfragen anzeigen
Siehe auch:
Reaktionsfähiges Design mithilfe von fließenden Rasterlayouts
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.
Bei Aktivierung dieser Option wird der folgende Code in die Datei eingefügt.
<meta name="viewport" content="width=device-width">
521
Beschreibung
„Min. Breite“ und „Max. Breite“
Hinweis:
CSS-Datei
Nach oben
Nach oben
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“.
Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise Mobiltelefon, TV, Tablet usw.
Die CSS-Datei wird für Geräte verwendet, deren gemeldete Breite im Bereich der angegebenen Werte
liegt.
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.
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">
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.
522
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Hinweis:
Nach oben
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.
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.
523
Ä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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
524
Erstellen von Webanwendungen für mobile Geräte (CS5.5, CS6)
Nach oben
Hinweis:
Erstellen einer Webanwendung mit jQuery Mobile
Anwendungen für mobile Geräte mithilfe von Starterseiten erstellen
Erstellen von Webanwendungen für mobile Geräte aus einer neuen Seite
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.
Erstellen einer Webanwendung mit jQuery Mobile
Ö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.
In der Codeansicht zeigen die Tags <link> und <script src>, wo die verknüpften Dateien liegen.
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.
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.
Starterseiten für jQuery Mobile
525
Nach oben
Nach oben
Dreamweaver bietet folgende jQuery Mobile-Starterseiten für die Anwendungsentwicklung an.
jQuery Mobile (CDN) (ab Version CS5.5)
Verwenden Sie diese Starterseite, wenn die jQuery Mobile-Bibliothek auf einem CDN liegt.
jQuery Mobile (Lokal) (ab Version CS5.5)
Verwenden Sie diese Starterseite, wenn die Elemente lokal gespeichert sind oder die Anwendung auch ohne Internet-Verbindung funktionieren
soll.
jQuery Mobile (PhoneGap) (ab Version CS5.5)
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 Webanwendungen als native mobile Anwendungen verpacken (CS5.5).
Anwendungen für mobile Geräte mithilfe von Starterseiten erstellen
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)“.
„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), jQuery Mobile mit Thema (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.
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“.
526
Schlüsselwörter: Neue Funktionen, Dreamweaver, HTML5, CSS, Übergänge, Webanwendungen, Webpaket, Effekte, CSS3, Fließende
Rasterlayouts, PhoneGap, Neuerungen, jQuery, Business Catalyst, Webschriften, FTP-Verbesserungen, PSD-Optimierung, Dreamweaver CS 6
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen von Creative Commons.
Remote (CDN)
Lokal
2. Wählen Sie „Leere Seite“ > „HTML“.
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ü „Dok.typ“den Dokumenttyp „HTML5“ 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:
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.
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.
http://jquerymobile.com/demos/1.0a3/
http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
http://en.wikipedia.org/wiki/Content_delivery_network (auf Englisch) und http://de.wikipedia.org/wiki/Content_Delivery_Network (auf Deutsch, aber nicht so
ausführlich)
http://docs.jquery.com/Downloading_jQuery
527
Rechtliche Hinweise | Online-Datenschutzrichtlinien
528
Vorschau
529
Anzeigen einer Seitenvorschau
Hinweis:
Nach oben
Seitenvorschau in Dreamweaver
Vorschau von Seiten im Browser
Die Benutzeroberfläche wurde ab Dreamweaver CC vereinfacht. Daher kann es vorkommen, dass Sie einige der in diesem Artikel
beschriebenen Optionen ab Dreamweaver CC nicht finden. Weitere Informationen finden Sie in diesem Artikel.
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 gleichzeitig bearbeitbar ist. 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.
Siehe auch:
Bearbeiten in der Live-Ansicht
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.
2. Klicken Sie auf die Schaltfläche „Live-Ansicht“.
3. Optional: Nehmen Sie Änderungen in der Codeansicht, 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 die 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. Nachdem Sie Änderungen in der Codeansicht oder in einer zugehörigen Datei vorgenommen haben, können Sie die Live-Ansicht
aktualisieren. Dazu klicken Sie in der Symbolleiste „Dokument“ auf die Schaltfläche „Aktualisieren“ oder Sie drücken F5.
530
JavaScript anhalten
JavaScript deaktivieren
Plug-Ins deaktivieren
Änderungen in Live-Code hervorheben
Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten
Hyperlink aufrufen
Hyperlinks fortlaufend aufrufen
Remote-Dateien automatisch synchronisieren
Testserver als Dokumentenquelle verwenden
Lokale Dateien für Dokumentverknüpfungen verwenden
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) bzw.
„Dreamweaver“ > „Voreinstellungen“ (Mac OS) und wählen 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.
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.
Von JavaScript beeinflusste Elemente werden in ihrem aktuellen Zustand fixiert.
JavaScript wird deaktiviert und die Seite erneut so dargestellt, als wäre JavaScript im Browser nicht aktiviert.
Plug-Ins werden deaktiviert und die Seite erneut so dargestellt, als wären Plug-Ins im Browser nicht aktiviert.
Die Hervorhebung von Änderungen im Live-Code wird deaktiviert oder aktiviert.
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.
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 sind in der Live-Ansicht permanent aktiv, bis Sie sie wieder deaktivieren oder die Seite schließen.
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.
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.
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
531
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Einstellungen für HTTP-Anforderungen
Nach oben
Hinweis:
Hinweis:
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.
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.
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 anzuzeigen:
Wählen Sie „Datei“ > „Vorschau in Browser“ und wählen Sie anschließend einen der aufgeführten Browser aus.
Wenn keine Browser aufgeführt sind, wählen Sie „Bearbeiten“ > „Voreinstellungen“ bzw. „Dreamweaver“ > „Voreinstellungen
(Mac)“. 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 (Win) bzw. Befehl+F12 (Mac), um die Vorschau des aktuellen Dokuments im Sekundärbrowser anzuzeigen.
2. Klicken Sie auf die Hyperlinks und testen Sie den Inhalt Ihrer Seite.
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 auf 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.
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“.
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.)
Adobe empfiehlt auch
Überblick über die Symbolleiste „Browser-Navigation“
Zugehörige Dateien öffnen
Video-Tutorial zur Live-Ansicht
532
Webanwendungen und Formulare
533
Live-Daten anzeigen
Nach oben
Nach oben
Live-Daten für Seiten in der Live-Ansicht bereitstellen
Fehlerbehebung der Anzeige von Live-Daten in der Live-Ansicht
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“.
Hinweis: 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
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
534
535
Webanwendungen
Nach oben
Nach oben
Nach oben
Grundlagen zu Webanwendungen
Häufige Verwendungszwecke für Webanwendungen
Beispiel für eine Webanwendung
Funktionsweise einer Webanwendung
Statische Webseiten verarbeiten
Dynamische Webseiten verarbeiten
Zugriff auf Datenbanken
Dynamische Seiten erstellen
Terminologie für 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).
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.
536
Nach oben
Nach oben
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:
<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.
Hinweis: 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
537
Nach oben
Nach oben
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:
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® 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:
538
Nach oben
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.
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:
Hinweis: CFML wird ab Dreamweaver CC nicht mehr unterstützt.
<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>
539
Nach oben
</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:
Servertechnologie Sprache
ColdFusion ColdFusion Markup Language (CFML)
Active Server Pages (ASP) VBScript
JavaScript
PHP PHP
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.
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.
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.
540
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.
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.
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.
Gängige Webserver sind beispielsweise Microsoft Internet Information Server (IIS) und Apache HTTP Server.
Verwandte Hilfethemen
Einführung in Datenbanken
Rechtliche Hinweise | Online-Datenschutzrichtlinie
541
Verwenden von Formularen zum Sammeln von
Benutzerinformationen
Nach oben
Nach oben
Allgemeines zum Sammeln von Benutzerinformationen
Parameter von HTML-Formularen
URL-Parameter
URL-Parameter mithilfe von Hypertext-Verknüpfungen erstellen
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.
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:
542
Nach oben
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.
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.
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
543
Nach oben
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
544
ColdFusion-Komponenten verwenden
Nach oben
Nach oben
Nach oben
ColdFusion-Komponenten
Überblick über das Bedienfeld „CF-Komponenten“ (ColdFusion)
CFCs in Dreamweaver erstellen oder löschen
CFCs in Dreamweaver anzeigen
CFCs in Dreamweaver bearbeiten
Webseiten erstellen, die CFCs verwenden
Datensatzgruppen in CFCs definieren
CFC-Datensatzgruppen als Quelle für dynamischen Inhalt verwenden
Dynamischen Inhalt mithilfe einer CFC definieren
Hinweis: ColdFusion wird ab Dreamweaver CC nicht mehr unterstützt.
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“).
Hinweis: 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.
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.
Hinweis: Das Bedienfeld „Komponenten“ steht nur zur Verfügung, wenn Sie eine ColdFusion-Seite in Dreamweaver anzeigen.
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.
545
Nach oben
Hinweis: 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.
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.
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). 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.
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“.
Hinweis: 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.
Hinweis: Wenn die aktuelle Site in einem virtuellen Ordner auf dem Remote-Server aufgelistet ist, funktioniert das Filtern nicht.
546
Nach oben
Nach oben
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.
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.
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.
Hinweis: 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.
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.
Hinweis: 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“).
3. Öffnen Sie das Bedienfeld „Komponenten“ („Fenster“ > „Komponenten“) und wählen Sie im Popupmenü die Option „CF-Komponenten“ aus.
547
Nach oben
Nach oben
Nach oben
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.
Hinweis: 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. 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.
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.
Hinweis: 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.
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
548
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.
Hinweis: 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.
Hinweis: 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“.
Verwandte Hilfethemen
Testserver einrichten
Rechtliche Hinweise | Online-Datenschutzrichtlinie
549
Fehlerbehebung bei Datenbankverbindungen
Nach oben
Berechtigungsprobleme lösen
Microsoft-Fehler beheben
MySQL-Fehler beheben
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“.
Hinweis: 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.
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“.
Hinweis: 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“.
550
Nach oben
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.
Hinweis: 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)
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.
Hinweis: 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:
551
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.
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.
[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.
552
Nach oben
Ö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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
553
554
Computer für die Entwicklung von Anwendungen einrichten
Nach oben
Nach oben
Voraussetzungen für die Erstellung von Webanwendungen
Grundlagen zum Webserver
Webserver auswählen
Anwendungsserver auswählen
Datenbank auswählen
Einrichten einer ColdFusion-Entwicklungsumgebung
Einrichten einer PHP-Entwicklungsumgebung
Einrichten einer ASP-Entwicklungsumgebung
Stammordner für die Anwendung erstellen
Dreamweaver-Site definieren
Voraussetzungen für die Erstellung von Webanwendungen
Zum Erstellen von Webanwendungen in Adobe® Dreamweaver® sind folgende Komponenten erforderlich:
Ein Webserver
Ein Anwendungsserver, der mit dem Webserver funktioniert
Hinweis: 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.
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.
Hinweis: 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.
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
Hinweis: 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:
555
Nach oben
Nach oben
Nach oben
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
Hinweis: 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).
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.
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:
Servertechnologie Anwendungsserver
ColdFusion Adobe ColdFusion 8
ASP Microsoft IIS
PHP PHP Server
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
556
Nach oben
Nach oben
Nach oben
Nach oben
großen Anzahl gleichzeitiger Benutzer erfordern, sollten 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.
Hinweis: 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.
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:
Webserver Standardmäßiger Stammordner
ColdFusion 8 \ColdFusion8\wwwroot
IIS \Inetpub\wwwroot
Apache (Windows) \apache\htdocs
Apache (Macintosh) Benutzer:[Benutzername]:Sites
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
557
Nach oben
eine der folgenden localhost-URLs für Ihren Webserver ein:
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)
Hinweis: 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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
558
Schützen von Ordnern in Anwendungen (ColdFusion)
Nach oben
Ordner und Sites auf dem Server schützen (ColdFusion)
Hinweis: ColdFusion wird ab Dreamweaver CC nicht mehr unterstützt.
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.
Hinweis: 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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
559
Verbindungsskripts entfernen
Nach oben
Befehl „Verbindungsskripts entfernen“ verwenden
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.
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
560
Optimieren des Arbeitsbereichs für visuelle Entwicklung
Nach oben
Nach oben
Bedienfelder für das Entwickeln von Webanwendungen anzeigen
Datenbanken in Dreamweaver anzeigen
Vorschau dynamischer Seiten in einem Browser
Anzeige der Datenbankinformationen in Dreamweaver eingrenzen
Einstellungen im Eigenschafteninspektor für gespeicherte ColdFusion-Prozeduren und ASP-Befehle vornehmen
Eingabenamen-Optionen
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.
Hinweis: 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.
Ein Tutorial zum Einrichten des Entwicklungs-Arbeitsbereichs finden Sie unter www.adobe.com/go/vid0144_de.
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.
Hinweis: 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.
561
Nach oben
Nach oben
Nach oben
Nach oben
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“.
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.
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.
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.
Hinweis: 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.
Hinweis: 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“.
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.
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:
562
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.
Verwandte Hilfethemen
Tutorial zum Entwicklungs-Arbeitsbereich
Einrichten eines Testservers
Rechtliche Hinweise | Online-Datenschutzrichtlinie
563
Überblick über Quellen für dynamischen Inhalt
Nach oben
Nach oben
Nach oben
Quellen für dynamischen Inhalt
Datensatzgruppen
URL- und Formularparameter
Sitzungsvariablen
Anwendungsvariablen in ASP und ColdFusion
ASP-Servervariablen
ColdFusion-Servervariablen
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.
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.
URL- und Formularparameter
564
Nach oben
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.
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.
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.
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.
565
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") %>
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
566
Nach oben
Nach oben
Nach oben
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.
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
567
Bedienfelder für dynamischen Inhalt
Nach oben
Nach oben
Bedienfeld „Bindungen“
Bedienfeld „Serververhalten“
Bedienfeld „Datenbanken“
Bedienfeld „Komponenten“
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
Einfügen von dynamischem Inhalt in Seiten
Inhaltsquellen bearbeiten oder löschen
Vordefinierte Datenformate verwenden
XML-Datenquellen anhängen
XML-Daten in XSLT-Seiten anzeigen
URL-Parameter
Sitzungsvariablen definieren
Anwendungsvariablen für ASP und ColdFusion definieren
Servervariablen definieren
Inhaltsquellen zwischenspeichern
Datensatzgruppen von einer Seite auf eine andere kopieren
HTML-Attribute dynamisch gestalten
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
Definieren von Quellen für dynamischen Inhalt
Master- und Detailseiten in einem Durchgang erstellen
Erstellen von Such- und Ergebnisseiten
Datensatz-Einfügeseiten erstellen (CS6)
Erstellen von Datensatz-Aktualisierungsseiten (CS6)
Erstellen von Datensatz-Löschseiten
Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können
Erstellen von Registrierungsseiten
Anmeldeseiten erstellen
Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können
Gespeicherte Prozeduren hinzufügen (ColdFusion) (CS6)
Dynamischen Inhalt löschen
Hinzufügen benutzerdefinierter Serververhalten
568
Nach oben
Nach oben
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
Datenbankverbindungen für ColdFusion-Entwickler (CS6)
Datenbankverbindungen für ASP-Entwickler (CS6)
Datenbankverbindungen für PHP-Entwickler
Bedienfeld „Komponenten“
Mit dem Bedienfeld „Komponenten“ können Sie Komponenten erstellen und überprüfen sowie Komponentencode in Ihre Seiten einfügen.
Hinweis: Das Bedienfeld funktioniert nicht in der Entwurfsansicht.
Sie können mit diesem Bedienfeld folgende Aufgaben ausführen:
ColdFusion-Komponenten verwenden
Rechtliche Hinweise | Online-Datenschutzrichtlinie
569
Anzeigen von Datenbank-Datensätzen
Nach oben
Nach oben
Nach oben
Datenbank-Datensätze
Serververhalten und Formatierungselemente
Formatierungs- und Seitenlayout-Elemente auf dynamische Daten anwenden
Durch das Ergebnis der Datenbank-Datensatzgruppen navigieren
Navigationsleiste für Datensatzgruppen erstellen
Benutzerdefinierte Navigationsleisten für Datensatzgruppen erstellen
Arbeitsschritte zum Entwurf von Navigationsleisten
Bereiche auf Grundlage von Datensatzgruppen-Ergebnissen einblenden und ausblenden
Mehrere Datensatzgruppen-Ergebnisse anzeigen
Dynamische Tabellen erstellen
Datensatzzähler erstellen
Vordefinierte Datenformate verwenden
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 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.
570
Nach oben
Nach oben
Nach oben
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:
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:
571
Nach oben
Nach oben
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.
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“.
Hinweis: 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:
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
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:
572
Nach oben
Nach oben
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“.
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.
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.
573
Nach oben
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.
Hinweis: 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“.
574
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.
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.
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}.
575
Nach oben
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.
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“.
576
7. Geben Sie einen Namen für das neue Format in die Spalte „Name“ ein. Klicken Sie auf „OK“.
Hinweis: 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“).
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
577
Dynamische Seiten entwerfen
Nach oben
Dynamische Seiten in Dreamweaver 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.
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
578
dynamischem Inhalt aus und geben die Anzahl der in der jeweiligen Seitenansicht anzuzeigenden Datensätze an.
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.
Verwandte Hilfethemen
Hinzufügen und Ändern von Bildern
Rechtliche Hinweise | Online-Datenschutzrichtlinie
579
Definieren von Quellen für dynamischen Inhalt
Nach oben
Datensatzgruppen ohne manuelle SQL-Eingabe definieren
Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren
SQL-Abfragen mithilfe der Strukturansicht „Datenbankelemente“ erstellen
URL-Parameter definieren
Formularparameter definieren
Sitzungsvariablen definieren
Anwendungsvariablen für ASP und ColdFusion definieren
Variablen als Datenquelle für eine ColdFusion-Datensatzgruppe verwenden
Servervariablen definieren
Inhaltsquellen zwischenspeichern
Inhaltsquellen bearbeiten oder löschen
Datensatzgruppen von einer Seite auf eine andere kopieren
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.
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.
580
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.
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.
Hinweis: 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.
581
Nach oben
10. Klicken Sie auf „OK“. Die neu definierte ColdFusion-Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt.
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.
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.
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.
Hinweis: 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“:
Servermodell Laufzeitwertausdrücke für URL-Parameter
582
ASP Request.QueryString("formFieldName")
PHP $_GET['formFieldName']
Formularparameter in der Spalte „Laufzeitwert“:
Servermodell Laufzeitwertausdrücke für Formularparameter
ASP Request.Form("formFieldName")
PHP $_POST['formFieldName']
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“.
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.
Hinweis: 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.
583
Nach oben
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:
Spry-QuickInfo Standardwerte
Formularfeldname 0001
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.
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.
584
Nach oben
Nach oben
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.
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:
Dokumenttypen Menübefehl im Bedienfeld „Bindungen“ für URL-Variable
ASP Anforderungsvariable > Request.QueryString
ColdFusion URL-Variable
PHP URL-Variable
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.
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:
585
Nach oben
Nach oben
Dokumenttypen Menübefehl im Bedienfeld „Bindungen“ für
Formularvariable
ASP Anforderungsvariable > Request.Form
ColdFusion Formularvariable
PHP Formularvariable
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.
Der Formularparameter wird im Bedienfeld „Bindungen“ angezeigt.
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“.
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.
Hinweis: 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.
586
Nach oben
Nach oben
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.
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.
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:
Variable Beschreibung
Server.ColdFusion.ProductName ColdFusion-Produktname.
Server.ColdFusion.ProductVersion ColdFusion-Versionsnummer.
587
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.
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“.
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“.
Weitere Informationen finden Sie über das Schlüsselwort „$_SERVER“ in der PHP-Dokumentation.
588
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:
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.
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
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
589
Nach oben
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.
In der folgenden Tabelle sind die gängigsten CGI-Variablen aufgelistet, die vom Browser erstellt und an den Server übergeben werden:
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.
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.)
590
Nach oben
Nach oben
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“.
Verwandte Hilfethemen
Einführung in SQL
Rechtliche Hinweise | Online-Datenschutzrichtlinie
591
Datenbankverbindungen für ASP-Entwickler (CS6)
Nach oben
Nach oben
ASP-Datenbankverbindungen
OLE DB-Verbindungen
Verbindungszeichenfolgen
Verbindungen mit lokalem DSN erstellen
Verbindungen mit Remote-DSN erstellen
Verbindungen mit einer Verbindungszeichenfolge erstellen
Datenbankverbindungen bearbeiten und löschen
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:
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
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:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg;
UID=wiley;PWD=roadrunner
Hinweis: 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.
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.
Hinweis: Beachten Sie, dass zuerst MDAC 2.5 und dann MDAC 2.7 installiert werden muss.
592
Nach oben
Nach oben
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:
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
Hinweis: 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.
593
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Verbindungen mit Remote-DSN erstellen
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
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“.
Hinweis: 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.
Hinweis: 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.
Verbindungen mit einer Verbindungszeichenfolge erstellen
594
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.
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“.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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“.
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")
595
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.
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“.
Hinweis: Macintosh-Benutzer können diesen Schritt ignorieren, da alle Datenbankverbindungen den Anwendungsserver verwenden.
Hinweis: 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
596
Nach oben
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.
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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
597
Datenbankverbindungen für ColdFusion-Entwickler (CS6)
Nach oben
Nach oben
Nach oben
Verbindungen mit ColdFusion-Datenbanken herstellen
ColdFusion-Datenquelle erstellen oder ändern
Datenbankverbindungen in Dreamweaver herstellen
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.
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.
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.
Hinweis: 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.
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.
598
Ö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.
Verwandte Hilfethemen
Einrichten eines Testservers
Rechtliche Hinweise | Online-Datenschutzrichtlinie
599
Datenbankverbindungen für PHP-Entwickler
Nach oben
Nach oben
Nach oben
PHP-Datenbankverbindungen
Datenbankverbindungen herstellen
Datenbankverbindungen bearbeiten und löschen
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.
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“.
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“.
Hinweis: 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.
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.
600
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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
601
Erstellen von Webformularen
Nach oben
Nach oben
Webformulare
Formularobjekte
HTML-Formulare erstellen
Dynamische Formularobjekte
Dynamisches HTML-Formularmenü einfügen oder ändern
Vorhandene HTML-Formularmenüs dynamisch gestalten
Dynamischen Inhalt in HTML-Textfeldern anzeigen
Optionen des Dialogfelds „Dynamisches Textfeld“ festlegen
HTML-Kontrollkästchen dynamisch im Voraus aktivieren
HTML-Optionsschalter dynamisch im Voraus aktivieren
HTML-Formulardaten überprüfen
JavaScript-Verhalten an HTML-Formularobjekte anhängen
Benutzerdefinierte Skripts an HTML-Formularschaltflächen anhängen
Barrierefreie HTML-Formulare erstellen
Hinweis: Die Unterstützung von HTML-Formularelementen wurde in Dreamweaver Creative Cloud verbessert. Weitere Informationen finden Sie
unter Verbesserte HTML5-Unterstützung für Formularelemente.
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.
Hinweis: Sie können Formulardaten auch direkt an einen E-Mail-Adressaten senden.
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.
Hinweis: 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
602
Nach oben
benutzerdefinierte Beschriftung geben oder eine der vordefinierten 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.
Hinweis: 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.
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.
HTML-Formulare erstellen
(Nur Creative Cloud-Benutzer): Als Teil der HTML5-Unterstützung sind im Bedienfeld „Eigenschaften“ für Formularelemente neue Attribute
hinzugekommen. Darüber hinaus wurden im Formularbereich des Bedienfelds „Einfügen“ vier neue Formularelemente (E-Mail, Suche, Telefon,
URL) eingeführt. Weitere Informationen finden Sie unter Verbesserte HTML5-Unterstützung für Formularelemente | Creative Cloud.
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.
603
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 MethodePOST 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.
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.
Hinweis: 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.
Hinweis: 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.
604
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.
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.
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 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
605
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.
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.
Hinweis: 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.
606
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.
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.
607
Nach oben
Nach oben
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.
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.
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.
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.
608
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
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“.
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.
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.
Hinweis: 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“.
609
Nach oben
Nach oben
Nach oben
Optionen des Dialogfelds „Dynamische Optionsschaltergruppe“ festlegen
1. Wählen Sie im Popupmenü „Optionsschaltergruppe“ ein Formular und eine Optionsschaltergruppe auf der Seite aus.
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.
Hinweis: Das Verhalten „Formular überprüfen“ ist nur dann verfügbar, wenn in das Dokument ein Textfeld eingefügt wurde.
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
610
Nach oben
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!');
}
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.
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).
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:
Hinweis: 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.
Hinweis: 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.
611
Das Formularobjekt wird im Dokument angezeigt.
Hinweis: 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.
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“.
Verwandte Hilfethemen
Tutorial „Formulare erstellen“
Tutorial „Formulare gestalten“
Rechtliche Hinweise | Online-Datenschutzrichtlinie
612
Dynamischen Inhalt ändern
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Dynamischer Inhalt
Dynamischen Inhalt bearbeiten
Dynamischen Inhalt löschen
Dynamischen Inhalt testen
Adobe Contribute-Benutzern die Änderung dynamischer Inhalte gestatten
Datensatzgruppen mit dem Eigenschafteninspektor modifizieren
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 (–).
Hinweis: 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.
613
Nach oben
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.
Hinweis: 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.
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.
2. Bearbeiten Sie beliebige Optionen. Wenn Sie im Eigenschafteninspektor eine neue Option auswählen, wird die Seite in Dreamweaver
aktualisiert.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
614
Erstellen von Such- und Ergebnisseiten
Nach oben
Nach oben
Such- und Ergebnisseiten
Suchseiten erstellen
Einfache Suchseiten erstellen
Erweiterte Ergebnisseiten erstellen
Suchergebnisse anzeigen
Detailseiten für die Ergebnisseiten erstellen
Hyperlinks auf Seiten mit ergänzenden Themen erstellen (ASP)
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.
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“).
615
Nach oben
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.
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.
Hinweis: Wenn Sie mehrere Suchbedingungen anwenden möchten, müssen Sie die Definition der Datensatzgruppe über das erweiterte
Dialogfeld „Datensatzgruppe“ vornehmen (siehe Erweiterte Ergebnisseiten erstellen).
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.
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.
616
Nach oben
5. Wählen Sie im Popupmenü „Tabelle“ die Tabelle aus, die in der Datenbank durchsucht werden soll.
Hinweis: 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“.
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.
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.
Hinweis: 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).
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.
617
Nach oben
Nach oben
Nach oben
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.
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.
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.
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.
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.
618
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
619
Seiten mit erweiterten Objekten für die Datenbankverarbeitung
erstellen (ColdFusion, ASP) (CS6)
Nach oben
Nach oben
ASP-Befehlsobjekte
ASP-Befehle zum Ändern von Datenbanken verwenden
Gespeicherte Prozeduren
Gespeicherte Prozeduren hinzufügen (ColdFusion) (CS6)
Gespeicherte Prozeduren ausführen (ASP) (CS6)
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.
Hinweis: 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.
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.
620
Nach oben
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.
Hinweis: 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:
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
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.
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.
621
Nach oben
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.
Hinweis: Die Datenbankprogramme MySQL und Microsoft Access unterstützen keine gespeicherten Prozeduren.
Gespeicherte Prozeduren hinzufügen (ColdFusion) (CS6)
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.
Das Dialogfeld „Gespeicherte Prozedur-Variable bearbeiten“ wird angezeigt. Der Name der Variablen, die Sie bearbeiten, wird im Feld
„Name“ angezeigt.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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
622
Nach oben
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.
Gespeicherte Prozeduren ausführen (ASP) (CS6)
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.
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 „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.
Hinweis: 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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
623
Master- und Detailseiten entwickeln
Nach oben
Master- und Detailseiten
Masterseiten erstellen
Hyperlinks zur Detailseite erstellen
Angeforderten Datensatz abrufen und auf der Detailseite anzeigen
Bestimmte Datensätze abrufen und auf einer Seite anzeigen (ASP)
Master- und Detailseiten in einem Durchgang erstellen
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
624
Nach oben
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.
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.
Für eine Masterseite ausgewählte Spalten der Datensatzgruppe
625
Nach oben
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.
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.
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.
Hinweis: Auf dieselbe Weise erstellen Sie Hyperlinks zu Aktualisierungsseiten. Die Ergebnisseite ist ähnlich wie eine Masterseite und eine
Aktualisierungsseite ist ähnlich wie eine Detailseite.
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
626
Nach oben
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.
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)“.
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.
627
Nach oben
Nach oben
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.
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.
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 oder Erweiterte Datensatzgruppen
durch manuelle SQL-Eingabe definieren.
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.
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
628
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.
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.
Hinweis: 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.
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“).
Verwandte Hilfethemen
Einrichten eines Testservers
Rechtliche Hinweise | Online-Datenschutzrichtlinie
629
Erstellen von Registrierungsseiten
Nach oben
Nach oben
Nach oben
Registrierungsseiten
Anmeldeinformationen über Benutzer speichern
HTML-Formulare für die Auswahl von Benutzername und Kennwort hinzufügen
Datenbanktabellen der Benutzer aktualisieren
Serververhalten für eindeutige Benutzernamen hinzufügen
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
Ein Serververhalten „Neuen Benutzernamen überprüfen“, mit dem sichergestellt wird, dass der eingegebene Benutzername nicht bereits von
einem anderen Besucher verwendet wird
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).
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.
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.
630
Nach oben
Nach oben
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.
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.
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
631
Datensatz-Einfügeseiten erstellen (CS6)
Nach oben
Nach oben
Datensatz-Einfügeseiten erstellen
Einfügeseiten Schritt für Schritt erstellen
Einfügeseiten in einem Schritt 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.
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.
Hinweis: 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.
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.
5. Wählen Sie im Popupmenü „In Tabelle einfügen“ die Datenbanktabelle aus, in die der Datensatz eingefügt werden soll.
632
Nach oben
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.
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.
633
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.
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.
Hinweis: 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“.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
634
Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen
können
Nach oben
Nach oben
Geschützte Seiten
Unberechtigte Benutzer zu einer anderen Seite umleiten
Zugriffsrechte in der Benutzerdatenbank speichern
Benutzer abmelden
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.
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.
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.
Hinweis: 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.
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.
635
Nach oben
Nach oben
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.
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“ >
636
„Benutzer abmelden“ aus.
3. Wählen Sie die Option „Abmelden, wenn Seite lädt“ und klicken Sie auf „OK“.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
637
Erstellen von ColdFusion-Formularen
Nach oben
Nach oben
Nach oben
ColdFusion-Formulare
ColdFusion-Erweiterungen aktivieren
ColdFusion-Formulare erstellen
ColdFusion-Formularsteuerelemente einfügen
ColdFusion-Textfelder einfügen
Versteckte ColdFusion-Felder einfügen
ColdFusion-Textbereiche einfügen
ColdFusion-Schaltflächen einfügen
ColdFusion-Auswahlfelder einfügen
ColdFusion-Optionsschalter einfügen
ColdFusion-Auswahlfelder einfügen
ColdFusion-Bildfelder einfügen
ColdFusion-Dateifelder einfügen
ColdFusion-Datumsfelder einfügen
ColdFusion-Formularsteuerelemente ändern
ColdFusion-Formulardaten auswerten
Hinweis: ColdFusion wird ab Dreamweaver CC nicht mehr unterstützt.
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.
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.
Hinweis: 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
638
„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.
Hinweis: 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.
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-Stilen (Cascading Stylesheets) steuern. ColdFusion ignoriert HTML-
639
Nach oben
Nach oben
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.
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.
Hinweis: 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.
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.
ColdFusion-Textfelder einfügen
Sie können ein ColdFusion-Textfeld oder -Kennwortfeld interaktiv in ein Formular einfügen und dann die Optionen einstellen.
Hinweis: 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.
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 ? .
Hinweis: 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.
640
Nach oben
Nach oben
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.
Hinweis: 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.
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.
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.
Hinweis: 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“.
641
Nach oben
Nach oben
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.
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.
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.
Hinweis: 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.
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.
Hinweis: 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.
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.
642
Nach oben
Nach oben
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.
Hinweis: 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.
Ü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.
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.
Hinweis: 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.
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
643
Nach oben
Nach oben
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.
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.
Hinweis: 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.
Hinweis: 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.
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.
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
644
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
645
Nach oben
Nach oben
Ü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.
ColdFusion-Formularsteuerelemente ändern
Sie können die Eigenschaften von ColdFusion-Formularsteuerelementen in der Entwurfs- und in der Codeansicht einstellen.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Einrichten eines Testservers
Rechtliche Hinweise | Online-Datenschutzrichtlinie
646
Erstellen von Datensatz-Aktualisierungsseiten (CS6)
Nach oben
Nach oben
Nach oben
Nach oben
Datensatz-Aktualisierungsseiten
Zu aktualisierende Datensätze suchen
Hyperlinks zur Aktualisierungsseite erstellen
Zu aktualisierende Datensätze abrufen
Aktualisierungsseiten Block für Block fertig stellen
Aktualisierungsseite in einem Arbeitsgang aktualisieren
Formularelement-Eigenschaften
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.
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.
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.
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:
647
Nach oben
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“.
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.
2. Verbinden Sie jedes Formularobjekt mit Daten aus der Datensatzgruppe, wie in den folgenden Themen beschrieben:
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.
648
Nach oben
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
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.
Hinweis: 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.
649
Nach oben
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.
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.
Hinweis: 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“.
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
650
Anmeldeseiten erstellen
Nach oben
Nach oben
Nach oben
Anmeldeseiten
Datenbanktabellen registrierter Benutzer erstellen
HTML-Formulare für die Benutzeranmeldung hinzufügen
Benutzernamen und Kennwort überprüfen
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.
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.
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.
651
Nach oben
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“.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
652
Erstellen von Datensatz-Löschseiten
Nach oben
Nach oben
Nach oben
Datensatz-Löschseiten
Zu löschende Datensätze suchen
Hyperlinks zu Löschseiten erstellen
Löschseiten erstellen
Code zum Löschen des Datensatzes hinzufügen
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.
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.
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.
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
653
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)%>
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.
654
Nach oben
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
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.
Hinweis: 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.
Um nur einige Felder des Datensatzes anzuzeigen, klicken Sie auf „Ausgewählt“. Wählen Sie dann die gewünschten Felder aus, indem Sie
655
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.
Jetzt müssen Sie die Spalte mit der Datensatz-ID mit dem verborgenen Formularfeld verbinden.
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.
656
Nach oben
Ausgewählte Datensatz-ID-Spalte
5. Klicken Sie auf „OK“ und speichern Sie die Seite.
Fertige Löschseite
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.
657
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.
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.
658
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
659
Einfügen von dynamischem Inhalt in Seiten
Nach oben
Nach oben
Nach oben
Dynamischen Inhalt hinzufügen
Dynamischer Text
Texte dynamisch gestalten
Bilder dynamisch gestalten
HTML-Attribute dynamisch gestalten
ActiveX, Flash und andere Objektparameter dynamisch gestalten
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.
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.
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).
660
Nach oben
Nach oben
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.
Hinweis: 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.
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
661
Nach oben
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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
662
Produktübergreifende Arbeitsabläufe
663
Flash und Dreamweaver verwenden
Nach oben
Bearbeiten einer SWF-Datei aus Dreamweaver in Flash
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.
Hinweis: 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.
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.
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
664
Fireworks und Dreamweaver verwenden
Nach oben
Nach oben
Fireworks-Bilder einfügen
Fireworks-Bilder oder Fireworks-Tabellen aus Dreamweaver bearbeiten
Fireworks-Bilder von Dreamweaver aus optimieren
Fireworks zum Ändern von Dreamweaver-Bildplatzhaltern verwenden
Fireworks-Popupmenüs
Fireworks-Popupmenüs in Dreamweaver bearbeiten
In Fireworks MX 2004 oder früher erstellte Popupmenüs bearbeiten
Voreinstellungen zum Öffnen und Bearbeiten von Fireworks-Quelldateien festlegen
Fireworks-HTML-Code in ein Dreamweaver-Dokument einfügen
Fireworks-HTML-Code in Dreamweaver einfügen
In Dreamweaver platzierten Fireworks-HTML-Code aktualisieren
Webfotoalben erstellen
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).
Hinweis: 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“.
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.
Hinweis: 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.
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.
Hinweis: 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.
665
Nach oben
Nach oben
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.
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“.
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.
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.
Hinweis: 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
666
Nach oben
Nach oben
Nach oben
Nach oben
„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.
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“.
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.
Hinweis: 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.
667
Nach oben
Nach oben
Nach oben
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.
Hinweis: Wenn sich die HTML-Datei auf einem Netzlaufwerk befindet, wird sie nicht in den Papierkorb verschoben, sondern endgültig
gelöscht.
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“.
668
Nach oben
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“.
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.
Verwandte Hilfethemen
Mit externen Bildeditoren arbeiten
Tutorial zu Dreamweaver Fireworks
Optionen des Dialogfelds „Bildvorschau“ festlegen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
669
Mit Device Central arbeiten und Dreamweaver verwenden
Nach oben
Nach oben
Adobe Device Central mit Dreamweaver verwenden
Tipps zum Erstellen von Webinhalt für mobile Geräte mit Dreamweaver
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.
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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Adobe Device Central-Hilfe
Rechtliche Hinweise | Online-Datenschutzrichtlinie
670
Mit ConnectNow arbeiten und Dreamweaver verwenden
Nach oben
Arbeiten mit ConnectNow
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.)
Rechtliche Hinweise | Online-Datenschutzrichtlinie
671
Mit Adobe Bridge arbeiten und Dreamweaver verwenden
Nach oben
Nach oben
Nach oben
Informationen zu Adobe Bridge
Adobe Bridge von Dreamweaver aus starten
Dateien aus Adobe Bridge in Dreamweaver platzieren
Adobe Bridge-Dateien auf einer Seite platzieren
Dateien aus Bridge auf eine Seite ziehen
Dreamweaver von Adobe Bridge aus starten
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
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.
Hinweis: 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.
672
Nach oben
Nach oben
Nach oben
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.
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.
Hinweis: 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.
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.
Hinweis: 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“.
Hinweis: 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.
Verwandte Hilfethemen
Creative Suite 5 - Bridge
Smart Objekte erstellen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
673
Verwenden von Dreamweaver mit Adobe Online-Diensten
Nach oben
Nach oben
BrowserLab
Business Catalyst InContext Editing
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
Adobe BrowserLab lets you preview local web content from within Dreamweaver, without requiring you to post it to a publicly-accessible server
first. You can preview files from your local Dreamweaver site, or from a remote or testing server.
For information about using the BrowserLab online service, including information about using BrowserLab with Dreamweaver, see
www.adobe.com/go/lr_abl_en.
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.
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.
Hinweis: 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.
Hinweis: 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.
674
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.
Hinweis: 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 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.
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.
Hinweis: 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.
Hinweis: 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.
675
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.
Hinweis: 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.
Hinweis: 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.
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.
Hinweis: 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:
676
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.
Hinweis: 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 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.
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.
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
677
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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
678
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.
Hinweis: 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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
679
Zusatzprogramme
Hinweis:
Nach oben
Bei Zusatzprogrammen handelt es sich um neue Funktionen, die Sie schnell und einfach zu Dreamweaver hinzufügen können. Sie können
zahlreiche Arten von Zusatzprogrammen verwenden, z. B. Zusatzprogramme zum Umformatieren von Tabellen, zum Verbinden mit Back-End-
Datenbanken oder zur Unterstützung beim Schreiben von Skripts für Browser.
Wenn Sie Zusatzprogramme installieren möchten, die alle Benutzer unter einem Mehrbenutzer-Betriebssystem verwenden können,
müssen Sie sich als Administrator (Windows) bzw. als Root-Benutzer (Mac OS X) anmelden. Weitere Informationen zur Verwendung von
Dreamweaver auf Mehrbenutzer-Betriebssystemen finden Sie hier.
Verwenden von Zusatzprogrammen in Dreamweaver
Klicken Sie auf „Fenster“ > „Zusatzprogramme durchsuchen“, um nach Zusatzprogrammen zu suchen und diese zu installieren. Wenn Sie auf
„Zusatzprogramme durchsuchen“ klicken, wird die Adobe Creative Cloud-Seite für Zusatzprogramme angezeigt.
Klicken Sie auf der Adobe Creative Cloud-Seite für Zusatzprogramme auf der linken Seite auf „Dreamweaver“, um Zusatzprogramme für
Dreamweaver anzuzeigen. Sie können auch das Suchfeld auf der rechten Seite verwenden, um nach einem bestimmten Zusatzprogramm zu
suchen.
Adobe Creative Cloud-Seite für Zusatzprogramme
Wichtig: Bevor Sie Zusatzprogramme installieren, stellen Sie sicher, dass Sie die Dateisynchronisation für Ihr Adobe Creative Cloud-Konto
aktiviert haben. Weitere Informationen finden Sie unter Aktivieren der Dateisynchronisation für die Adobe Creative Cloud.
Folgen Sie den Anweisungen auf dem Bildschirm, um das Zusatzprogramm zu installieren.
Zum Anzeigen der von Ihnen installierten oder freigegebenen Zusatzprogramme klicken Sie unter „Meine Zusatzprogramme“ auf „Alle Einkäufe
und freigegebenen Elemente“.
680
Nach oben
Adobe Creative Cloud-Seite für Zusatzprogramme, „Meine Zusatzprogramme“
Aktivieren der Dateisynchronisation für die Adobe Creative Cloud
Bevor Sie Zusatzprogramme aus der Adobe Creative Cloud installieren, stellen Sie sicher, dass Sie die Dateisynchronisation über den Adobe
Creative Cloud-Client aktiviert haben.
1. Klicken Sie in der Taskleiste auf , um den Adobe Creative Cloud-Client zu öffnen.
2. Klicken Sie auf und klicken Sie dann auf „Voreinstellungen“.
681
Voreinstellungen im Adobe Creative Cloud-Client
3. Legen Sie auf der Registerkarte „Dateien“ die Option „Synchronisieren“ auf „Ein“ fest.
682
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Dateisynchronisation im Adobe Creative Cloud-Client
683
Anwendungsübergreifende Integration
Nach oben
Integration in Photoshop, Flash und Fireworks
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.
Hinweis: 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.
Hinweis: 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.
Hinweis: 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.
Verwandte Hilfethemen
Tutorial zu Dreamweaver InDesign
Rechtliche Hinweise | Online-Datenschutzrichtlinie
684
AIR-Erweiterung für Dreamweaver
Nach oben
Nach oben
AIR-Erweiterung für Dreamweaver installieren
AIR-Anwendungen in Dreamweaver erstellen
Anwendungen mit digitalen Zertifikaten signieren
Zugeordnete AIR-Dateitypen bearbeiten
Einstellungen für AIR-Anwendungen bearbeiten
Webseitenvorschau in einer AIR-Anwendung anzeigen
AIR-Codehinweise und -Codefarben verwenden
Anzeigen der Adobe AIR-Dokumentation
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.
Hinweis: 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.
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
685
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.
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 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.
Hinweis: 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 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
686
Nach oben
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:
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
687
Nach oben
Nach oben
Nach oben
Nach oben
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“.
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.
Hinweis: 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.
688
Nach oben
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“.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
689
Hinzufügen und Ändern von Bildern
Nach oben
GIF-Dateien (Graphic Interchange Format)
JPEG (Joint Photographic Experts Group)
Das PNG-Dateiformat (Portable Network Group)
Nach oben
Bilder
Bilder einfügen
Bildgröße visuell ändern
Bild-Platzhalter einfügen
Bild-Platzhalter ersetzen
Eigenschaften für Bild-Platzhalter festlegen
Bilder in Dreamweaver bearbeiten
Rollover-Bilder erstellen
Mit externen Bildeditoren arbeiten
Bilder mit Verhalten versehen
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 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).
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 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, werden Sie
von Dreamweaver gefragt, 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 Adding images.
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).
Wählen Sie „Einfügen“ > „Bild“.
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.
690
Hinweis:
Hinweis:
Hinweis:
B / H
Hinweis:
Quelle
Hyperlink
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
auszuwä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.
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.
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.
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.
Festlegen von Bildeigenschaften
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.
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“.)
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.
Gibt die Quelldatei des Bildes an. Klicken Sie auf das Ordnersymbol, um die Quelldatei auszuwählen, oder geben Sie den Pfad ein.
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.
691
Alt
„Map“ und Hotspot-Tools
Ziel
Bearbeiten
Von Original aktualisieren
Bildeinstellungen bearbeiten
Zuschneiden
Neu auflösen
Helligkeit und Kontrast
Scharf stellen
Nach oben
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.
Damit können Sie eine clientseitige Imagemap beschriften und erstellen.
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.
Startet den Bildeditor, den Sie in den Voreinstellungen für externe Editoren gewählt haben, und öffnet das ausgewählte Bild.
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.
Öffnet das Dialogfeld „Bildvorschau“ und ermöglicht das Optimieren des Bildes.
Dient zum Zuschneiden der Bildgröße, wobei unerwünschte Bereiche aus dem ausgewählten Bild entfernt werden.
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.
Ändert die Helligkeits- und Kontrasteinstellungen eines Bildes.
Ändert die Bildschärfe.
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. drücken Sie die Ctrl-Taste (Macintosh) und wählen Sie dann „Tag bearbeiten“.
Bearbeiten Sie den Wert des Feldes „Alt“ im Eigenschafteninspektor.
Bildgröße 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.
692
Hinweis:
Nach oben
Hinweis:
Nach oben
Größe von Elementen visuell ändern
1. Wählen Sie das Element (beispielsweise ein Bild oder eine SWF-Datei) im Dokumentfenster aus.
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“ .
Neu auflösen der Bilder nach einer Größenänderung
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“ .
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“.
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.
Im HTML-Code wird dabei automatisch ein Bild-Tag mit dem undefinierten Attribut src eingefügt.
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.
Bild-Platzhalter ersetzen
693
Nach oben
B / H
Quelle
Hyperlink
Alt
Erstellen
Von Original aktualisieren
Color
Nach oben
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 dem Textfeld „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“.
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 Ecke rechts unten.
Legen Sie im Eigenschafteninspektor die gewünschten Angaben für Name, Breite, Höhe, Bildquelle, Alternativtext, Ausrichtung und Farbe des
Bild-Platzhalters fest.
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:
Legen die Breite und Höhe des Bild-Platzhalters in Pixel fest.
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.
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.
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.
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.
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.
Legt eine Farbe für den Bild-Platzhalter fest.
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.
Hinweis:
Neu auflösen
Zuschneiden
Helligkeit und Kontrast
Scharf stellen
Hinweis:
Hinweis:
Hinweis:
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“. Sie können beliebige dieser Dreamweaver-Bildbearbeitungsfunktionen auswählen:
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 den 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.
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.
Ä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.
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.
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.
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. Andernfalls wählen Sie „Bearbeiten“ > „Rückgängig
Zuschneiden“, um das Originalbild wiederherzustellen.
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 bearbeiten“ .
Wählen Sie „Modifizieren“ > „Bild“ > „Optimieren“.
2. Nehmen Sie im Dialogfeld „Bildoptimierung“ 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 des Bildes auf die Schaltfläche „Scharf stellen“ .
Hinweis:
Nach oben
Bildname
Originalbild
Rollover-Bild
Rollover-Bild vorausladen
Alternativtext
Wenn angeklickt, gehe zu URL
Hinweis:
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.
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 des Bildes 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.
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“.
Der Name des Rollover-Bildes.
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.
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.
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.
Optional: Eine Beschreibung des Bildes für Benutzer, die einen reinen Textbrowser verwenden.
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.
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.
Hinweis:
Nach oben
Hinweis:
Die Wirkung eines Rollover-Bildes ist in der Entwurfsansicht nicht sichtbar.
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.
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.
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 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“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf
die Kategorie „Dateitypen/Editoren“.
Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
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 Schritt 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“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf
die Kategorie „Dateitypen/Editoren“.
Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
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.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Bilder vorausladen
Bild austauschen
Bildaustausch wiederherstellen
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“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf
die Kategorie „Dateitypen/Editoren“.
Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
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“.
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.
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.)
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.
Arbeiten mit Photoshop und Dreamweaver
Nach oben
Hinweis:
Nach oben
Photoshop-Integration
Workflow für Smartobjekte und für Photoshop/Dreamweaver
Smartobjekte erstellen
Smartobjekte aktualisieren
Mehrere Smartobjekte aktualisieren
Größe von Smartobjekten ändern
Ursprüngliche Photoshop-Datei eines Smartobjekts bearbeiten
Smartobjekt-Statuswerte
Photoshop-Auswahl kopieren und einfügen
Eingefügte Bilder bearbeiten
Optionen des Dialogfelds „Bildoptimierung“ einstellen
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 Smartobjekt 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.
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 über die Photoshop-Integration in Dreamweaver, finden Sie unter Integrating Dreamweaver with Photoshop.
Workflow für Smartobjekte 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 Smartobjekte-
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.
Smartobjekte-Workflow
Wenn Sie mit vollständigen Photoshop-Dateien arbeiten, wird der Smartobjekte-Workflow empfohlen. In Dreamweaver ist ein Smartobjekt ein auf
einer Webseite platziertes Bildelement, das weiterhin mit der Photoshop-Originaldatei (PSD) verknüpft ist. In der Entwurfsansicht von
Dreamweaver ist ein Smartobjekt in der linken oberen Ecke des Bilds mit einem Symbol gekennzeichnet.
Nach oben
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 Smartobjekte-Workflow verwenden, brauchen Sie zum Aktualisieren eines Webbilds Photoshop nicht zu öffnen. Darüber hinaus
sind alle Aktualisierungen, die Sie an Smartobjekten 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 Smartobjekt auch aktualisieren, ohne das Webbild in der Entwurfsansicht auszuwählen. Über das Elementebedienfeld lassen sich
alle Smartobjekte (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 Smartobjekte-Workflow können Sie im Dialogfeld „Bildoptimierung“ Optimierungseinstellungen festlegen. In
diesem Dialogfeld können Sie das Dateiformat und die Bildqualität festlegen. Wenn Sie ein Slice oder eine Ebene kopieren oder eine Photoshop-
Datei zum ersten Mal als Smartobjekt einfügen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen können.
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 Smartobjekts ü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 das Webbild in der Entwurfsansicht 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 Smartobjekte-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.
Ein Videotutorial über die Roundtrip-Bearbeitung mit Photoshop finden Sie unter Roundtrip editing with Photoshop.
Smartobjekte erstellen
Beim Einfügen eines Photoshop-Bilds (PSD-Datei) in eine Webseite wird in Dreamweaver ein Smartobjekt erstellt. Ein Smartobjekt 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 Ihrer Seite, an der das Bild eingefügt werden
soll.
2. Wählen Sie „Einfügen“ > „Bild“.
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.
Hinweis:
Nach oben
Hinweis:
Nach oben
Hinweis:
Nach oben
Nach oben
Hinweis:
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 „Bildoptimierung“ 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 Smartobjekt entsprechend den ausgewählten Optimierungseinstellungen und fügt eine webfähige Version des Bilds auf
der Seite ein. Mit dem Smartobjekt besteht eine Live-Verbindung zum ursprünglichen Bild und Sie werden informiert, wenn die beiden Bilder nicht
mehr synchron sind.
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 „Bildoptimierung“ können Sie dann die
gewünschten Änderungen an dem Bild vornehmen. Änderungen im Dialogfeld „Bildoptimierung“ 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 Videotutorial über die Roundtrip-Bearbeitung mit Photoshop finden Sie unter Roundtrip editing with Photoshop.
Smartobjekte aktualisieren
Wenn Sie die Photoshop-Datei ändern, mit der das Smartobjekt verknüpft ist, werden Sie in Dreamweaver benachrichtigt, dass das webfähige Bild
nicht mehr mit dem Original synchron ist. Smartobjekte 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 Smartobjekt mit dem aktuellen Inhalt der ursprünglichen Photoshop-Datei zu aktualisieren, wählen Sie das Smartobjekt im
Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“.
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Mehrere Smartobjekte aktualisieren
Im Bedienfeld „Elemente“ können Sie mehrere Smartobjekte gleichzeitig aktualisieren. Darüber hinaus können Sie im Bedienfeld „Elemente“
Smartobjekte 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 Smartobjekt auswählen, wird in der oberen linken Ecke
des Bilds das Smartobjekt-Symbol angezeigt. Bei normalen Bildern wird dieses Symbol nicht angezeigt.
4. Klicken Sie bei jedem Smartobjekt, 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.
Für diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
Größe von Smartobjekten ändern
Sie können die Größe eines Smartobjekts wie bei jedem anderen Bild im Dokumentfenster ändern.
1. Wählen Sie das Smartobjekt 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“.
Beim Aktualisieren des Smartobjekts 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 eines Smartobjekts bearbeiten
Nach dem Erstellen eines Smartobjekts 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.
Dazu muss Photoshop als primärer externer Bildeditor festgelegt sein.
1. Wählen Sie das Smartobjekt im Dokumentfenster aus.
Hinweis:
Nach oben
Nach oben
Hinweis:
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 Smartobjekt aus und klicken Sie auf die Schaltfläche „Von Original aktualisieren“.
Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen.
Smartobjekte 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“.
Smartobjekt-Statuswerte
In der folgenden Tabelle sind die verschiedenen Statuswerte von Smartobjekten aufgeführt.
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 Smartobjekt erstellt.
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
auswählen und dann „Bearbeiten“ > „Kopieren“ wä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
auswählen und dann „Bearbeiten“ > „Auf eine Ebene reduziert kopieren“ wählen. Dadurch werden alle aktiven und niedrigeren Ebenen
des ausgewählten Bereichs auf eine Ebene reduziert und in die Zwischenablage kopiert. Falls mit manchen dieser Ebenen
Smartobjekt-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.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Nach oben
Hinweis:
Hinweis:
Nach oben
Hinweis:
Vorgabe
ebenenbasierte Effekte verknüpft sind, werden diese ebenfalls kopiert.
Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment auswählen und dann
„Bearbeiten“ > „Kopieren“ wä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 ganzes 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“.
4. Nehmen Sie im Dialogfeld „Bildoptimierung“ 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 auf 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.
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.
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“.
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 Sie im Eigenschafteninspektor auf
die Schaltfläche „Bildeinstellungen bearbeiten“.
Optionen des Dialogfelds „Bildoptimierung“ einstellen
Beim Erstellen eines Smartobjekts oder Einfügen einer Auswahl aus Photoshop wird in Dreamweaver das Dialogfeld „Bildoptimierung“ 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. Im Allgemeinen wirken sich die Einstellungen entweder auf die Qualität oder auf die Dateigröße
nachteilig aus.
Die ausgewählten Einstellungen wirken sich nur auf die importierte Version der Bilddatei aus. Die ursprüngliche Photoshop-Datei im
PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie geändert.
Wählen Sie eine Vorgabe aus, die Ihren Anforderungen am meisten entspricht. Die Dateigröße des Bildes wird basierend auf der
gewählten Vorgabe geändert. Eine sofortige Vorschau des Bildes mit der angewendeten Einstellung wird im Hintergrund angezeigt.
Für Bilder, die mit einem hohen Maß an Klarheit angezeigt werden sollen, wählen Sie „PNG24 für Fotos (Detailtreue)“ aus. Wählen Sie „GIF für
Hintergrundbilder (Muster)“ aus, wenn Sie ein Muster einfügen, das als Hintergrund der Seite verwendet werden soll.
Wenn Sie eine Vorgabe auswählen, werden die konfigurierbaren Optionen für die Vorgabe angezeigt. Wenn Sie die Optimierungseinstellungen
weiter anpassen möchten, ändern Sie die Werte für diese Optionen.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Dreamweaver-Business Catalyst-Integration
Nach oben
Nach oben
Hinweis:
Hinweis:
Business Catalyst-Zusatzprogramm installieren
Temporäre Business Catalyst-Site erstellen
Business Catalyst-Site importieren
Dateien verwalten
Module, Daten oder Codefragmente einfügen
Eigenschaften von Business Catalyst-Objekten bearbeiten
Business Catalyst ist eine Anwendung für das Erstellen und Verwalten von Online-Geschäften. Mithilfe der vereinheitlichten Plattform und ohne
Back-end-Kodierung können Sie alles erstellen, von Websites bis hin zu leistungsfähigen Onlineshops.
Die Dreamweaver-Integration mit Business Catalyst ermöglicht die Erstellung und Aktualisierung von Business Catalyst-Sites in Dreamweaver.
Nachdem Sie eine Business Catalyst-Site erstellt haben, können Sie eine Verbindung zum Business Catalyst-Server herstellen. Der Server stellt
Ihnen Dateien und Vorlagen bereit, die Sie verwenden können, um die Site zu erstellen.
Business Catalyst-Zusatzprogramm installieren
Bevor Sie eine Business Catalyst-Site in Dreamweaver erstellen oder bearbeiten können, müssen Sie zunächst das Business Catalyst-
Zusatzprogramm installieren.
Zum Installieren des Zusatzprogramms wählen Sie „Fenster“ > „Zusatzprogramme durchsuchen“. Die Adobe Creative Cloud-Seite für
Zusatzprogramme wird angezeigt. Suchen Sie nach dem Business Catalyst-Zusatzprogramm und folgen Sie den Anweisungen auf dem
Bildschirm, um das Zusatzprogramm zu installieren.
Wichtig: Bevor Sie Zusatzprogramme installieren, stellen Sie sicher, dass Sie die Dateisynchronisation für Ihr Adobe Creative Cloud-Konto
aktiviert haben. Weitere Informationen finden Sie unter Aktivieren der Dateisynchronisation für die Adobe Creative Cloud.
Temporäre Business Catalyst-Site erstellen
1. Wählen Sie „Site“ > „Sites verwalten“.
2. Klicken Sie auf „Neue Business Catalyst-Site“.
3. Melden Sie sich mit Ihren Adobe-ID-Anmeldeinformationen an.
4. Geben Sie Ihr Geburtsdatum ein und klicken Sie auf „Aktualisieren“.
5. Geben Sie im Dialogfeld „Temporäre Site erstellen“ die Details für Ihre Site ein und klicken Sie auf „Kostenlose temporäre Site erstellen“.
Nachdem Sie Ihre Site erstellt haben, werden Ihnen die Informationen zu Ihrem Business Catalyst-Konto per E-Mail zugesandt.
Diese E-Mails enthalten Informationen zu Ihrer Site, etwa eine Anleitung über die ersten Schritte, die URL der von Ihnen erstellten Site und
die URL der Verwaltungssite.
6. Wählen Sie auf Ihrem Computer einen Ordner für die lokale Site aus.
Wenn Sie auf „Abbrechen“ klicken, wird der Site zwar in Business Catalyst erstellt, jedoch nicht in Dreamweaver angezeigt. Das
gleiche passiert, wenn beim Erstellen einer Business Catalyst-Site ein Netzwerkproblem auftritt.
7. Geben Sie das Kennwort ein, das Ihrer Adobe-ID zugeordnet ist.
8. Wenn die Dateivorgänge abgeschlossen sind, klicken Sie auf „Fertig“.
9. Wählen Sie „Fenster“ >„Datei“ aus. Die lokale Ansicht der Site, die Sie erstellt haben, wird angezeigt.
10. Wählen Sie im Menü die Option „Remote-Server“.
11. Geben Sie die Adobe-ID ein, die Ihrem Kennwort zugeordnet ist.
Die Dateistruktur auf dem Remote-Server wird angezeigt.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
Nach oben
Nach oben
Nach oben
Business Catalyst-Site importieren
Weitere Informationen zur Migration von Sites, die Sie zuvor mit der Business Catalyst-Erweiterung erstellt haben, finden Sie unter Migrieren von
Business Catalyst-Sites zu Dreamweaver CS6.
1. Wählen Sie „Site“ > „Sites verwalten“.
2. Klicken Sie auf „Business Catalyst-Site importieren“. Die Liste der Business Catalyst-Sites, die Sie mit der Adobe ID erstellt haben, wird
angezeigt.
3. Wählen Sie die Site aus und klicken Sie auf „Site importieren“.
4. Geben Sie für die Site, die Sie importieren möchten, den Dateipfad auf Ihrem Computer an.
5. Geben Sie das Kennwort ein, das Ihrer Adobe-ID zugeordnet ist.
6. Wenn die Dateivorgänge abgeschlossen sind, klicken Sie auf „Fertig“.
Dateien verwalten
Da Business Catalyst auch ein Web-Hosting-Dienst ist, können Sie Dreamweaver zur Verwaltung von lokalen und Remote-Site-Dateien
verwenden. Weitere Informationen finden Sie in den folgenden Themen:
Verwalten von Dateien und Ordnern
Dateien vom Server abrufen/auf dem Server bereitstellen
Ein- und Auschecken von Dateien
Module, Daten oder Codefragmente einfügen
1. Wählen Sie „Fenster“ > „Business Catalyst“, um das Bedienfeld „Business Catalyst“ zu öffnen.
2. Führen Sie einen der folgenden Schritte aus:
Zum Einfügen eines Business Catalyst-Moduls wählen Sie die Registerkarte „Module“.
Um Tags einzufügen, öffnen Sie die Registerkarte „Daten“. Tags werden angezeigt, wenn Sie Dateien bearbeiten, die Tags unterstützen,
wie z. B. die Seite „affiliate.html“ im Ordner „Layouts/Affiliate“.
3. Erweitern Sie das Modul und klicken Sie auf das Modul, das der Datei hinzugefügt werden soll.
4. Geben Sie die erforderlichen Informationen ein und klicken Sie auf „Einfügen“.
5. Wenn die aktuelle Site die neue Rendering-Engine verwendet, wird die Registerkarte „Codefragmente“ angezeigt. Mithilfe der Optionen auf
der Registerkarte „Codefragmente“ können Sie Codefragmente hinzufügen, z. B. wiederholende und bedingte Bereiche,
Kommentarabschnitte und Includes (funktionieren ähnlich wie Server-Side Includes).
6. Klicken Sie auf „Live“, um eine Vorschau der Seite anzuzeigen, wie sie in einem Webbrowser dargestellt würde.
Eigenschaften von Business Catalyst-Objekten bearbeiten
Analog zum Verarbeiten anderer Objekte auf einer Webseite können Sie den Eigenschafteninspektor verwenden, um Eigenschaften von Objekten
in den Business Catalyst-Modulen zu bearbeiten.
Wenn die Optionen zum Bearbeiten von Eigenschaften nicht angezeigt werden, prüfen Sie, ob Sie berechtigt sind, die Datei zu bearbeiten. Bei
manchen Modulen können Sie die Seite nur auf der Online-Admin-Website bearbeiten.
JavaScript
Verwenden von JavaScript-Verhalten (allgemeine Anweisungen)
Nach oben
Nach oben
JavaScript-Verhalten
Überblick über das Bedienfeld „Verhalten“
Ereignisse
Verhalten definieren
Verhalten ändern oder löschen
Verhalten aktualisieren
Verhalten von Drittanbietern herunterladen und installieren
JavaScript-Verhalten
Mit Adobe® Dreamweaver®-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.
Hinweis: 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.
Hinweis: 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.
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.
Nach oben
Nach oben
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.)
Hinweis: 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.
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.
Hinweis: 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.
5. Das Standardereignis, das die Aktion auslöst, wird in der Spalte „Ereignisse“ angezeigt. Wenn es sich hierbei nicht um das gewünschte
Nach oben
Nach oben
Nach oben
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 Arbeiten mit Erweiterungen in Dreamweaver CS6, 12.1 und 12.2.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Anwenden integrierter JavaScript-Verhalten
Nach oben
Nach oben
Nach oben
Integrierte Verhalten verwenden
Verhalten „JavaScript aufrufen“ definieren
Verhalten „Eigenschaft ändern“ definieren
Verhalten „Browser überprüfen“ definieren
Verhalten „Plug-In überprüfen“ definieren
Verhalten „Shockwave oder SWF steuern“ definieren
Verhalten „AP-Element ziehen“ definieren
Informationen über das ziehbare AP-Element zusammenstellen
Verhalten „Gehe zu URL“ definieren
Verhalten „Sprungmenü“ definieren
Verhalten „Sprungmenü Gehe zu“ definieren
Verhalten „Browserfenster öffnen“ definieren
Verhalten „Sound abspielen“ definieren
Verhalten „Popup-Meldung“ definieren
Verhalten „Bilder vorausladen“ definieren
Verhalten „Navigationsleistenbild festlegen“ definieren
Verhalten „Text vom Frame einstellen“ definieren
Verhalten „Container-Text festlegen“ definieren
Verhalten „Statusleistentext festlegen“ definieren
Verhalten „Text von Textfeld einstellen“ definieren
Verhalten „Elemente ein-/ausblenden“ definieren
Verhalten „Popupmenü anzeigen“ definieren
Elemente in Popupmenüs hinzufügen, entfernen und neu anordnen
Popupmenüs formatieren
Position von Popupmenüs in einem Dokument festlegen
Popupmenüs ändern
Verhalten „Bild austauschen“ definieren
Verhalten „Formular überprüfen“ definieren
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.
Hinweis: 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
Nach oben
Nach oben
Nach oben
Nach oben
Mit dem Verhalten „Eigenschaft ändern“ können Sie den Wert einer Objekteigenschaft ändern (z. B. die Hintergrundfarbe eines div oder die Aktion
eines Formulars).
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
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“
Nach oben
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.
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.
Hinweis: 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.)
Nach oben
Nach oben
Nach oben
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.
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.
Hinweis: 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“.
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.
Hinweis: 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.
Nach oben
Nach oben
Nach oben
Nach oben
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
The URL for this page is {window.location}, and today is {new Date()}.
Hinweis: 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).
Hinweis: 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.
Nach oben
Nach oben
Nach oben
Nach oben
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.
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.
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.
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.
Hinweis: 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.
Nach oben
Nach oben
Nach oben
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.
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
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Verwandte Hilfethemen
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Barrierefreiheit
Dreamweaver-Eingabehilfen
Nach oben
Nach oben
Nach oben
Einführung in barrierefreie Inhalte
Bildschirmlesegeräte mit Dreamweaver verwenden
Unterstützung von Eingabehilfen für das Betriebssystem
Arbeitsbereich für barrierefreies Seitenlayout optimieren
Dreamweaver-Barrierefreiheitsprüfungsbericht
In Dreamweaver mit der Tastatur navigieren
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.
Hinweis: 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).
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.
Nach oben
Nach oben
Nach oben
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.
Hinweis: 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.
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.
Hinweis: 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.
Hinweis: 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.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Dreamweaver und die Creative Cloud
Synchronisieren von Dreamweaver-Einstellungen mit der Creative
Cloud
Hinweis:
Erstmalige Synchronisation
Migrieren von Einstellungen zu Dreamweaver CC 2014
Bearbeiten der Voreinstellungen für die Synchronisationseinstellungen
Automatische Synchronisation
Manuelle Synchronisation
Auflösen von Konflikten bei der Synchronisation
Direkter Zugriff auf Ressourcen der Creative Cloud
Mit dem Adobe Creative Cloud-Abonnementkonto können Sie Dreamweaver auf zwei Computern aktivieren. Ein Abonnementkonto ist im
Allgemeinen das Adobe ID-Konto, anhand dessen Sie das Abonnement erworben haben. Die Synchronisation mit der Cloud ist eng an Ihr
Abonnementkonto gebunden.
Anhand der Synchronisationsfunktion der Creative Cloud lassen sich die folgenden Dreamweaver-Einstellungen zwischen den beiden Computern
synchronisieren:
Anwendungsvoreinstellungen:
„Allgemein“: Alle Voreinstellungen außer „Zugehörige Dateien aktivieren“ und „Dynamisch zugehörige Dateien suchen“.
„Farbe für Code“: Alle Voreinstellungen außer „Dokumenttyp“.
Codeformat: Alle Voreinstellungen außer „Tag-Bibliotheken“.
„Codehinweise“: Alle Voreinstellungen außer die über den Hyperlink „Tag-Bibliothek-Editor“ vorgenommenen Änderungen.
„Codeumschreibung“: Alle Voreinstellungen.
„Kopieren/Einfügen“: Alle Voreinstellungen.
„CSS-Stile“: Alle Voreinstellungen
„Dateien vergleichen“: Diese Einstellung wird nur auf Computern mit demselben Betriebssystem synchronisiert.
„Dateitypen“/„Editoren“: „Geänderte Dateien neu laden“ und „Beim Starten speichern“.
„Markierung“: Alle Voreinstellungen
„Neues Dokument“: Alle Voreinstellungen außer „Standard-Dokumenttyp (DTD)“ und „Standardkodierung“.
„Vorschau in Browser“: Nur die Option „Vorschau mit temporärer Datei“ wird synchronisiert.
„Site“: Alle Voreinstellungen außer „<Option> immer zeigen“ <rechts/links>.
„W3C-Überprüfung“: Alle Voreinstellungen mit Ausnahme der Änderungen, die mithilfe von „Verwalten“ vorgenommen werden.
„Fenstergrößen“: Alle Voreinstellungen.
Hinweis: Außer „Dateien vergleichen“ werden alle anderen oben aufgeführten Voreinstellungen zwischen zwei Computern synchronisiert, und
zwar unabhängig vom verwendeten Betriebssystem. Zum Beispiel zwischen Mac und Windows.
„Site-Einstellungen“: Alle Site-Einstellungen (außer Benutzername und Kennwort) werden zwischen zwei Computern mit demselben
Betriebssystem synchronisiert. Benutzername und Kennwort können nicht synchronisiert werden.
Pfad und Name des lokalen Site-Ordners werden synchronisiert, wenn im gleichen Pfad ein Ordner mit demselben Namen vorhanden ist.
Wenn eine Site auf einem Computer nicht vorhanden ist, erstellt Dreamweaver im Standardpfad einen neuen Site-Ordner und alle Pfade sind
relativ zu diesem Ordner. Sie können diesen Pfad jederzeit ändern. Bei allen nachfolgenden Synchronisationen werden nur die Änderungen im
Site-Ordner synchronisiert.
Tastaturbefehle: Tastaturbefehle werden nur zwischen zwei Computern mit demselben Betriebssystem synchronisiert.
Arbeitsbereiche: Arbeitsbereiche werden beim Beenden von Dreamweaver gespeichert und dann mit der Cloud synchronisiert. Wenn Sie
Arbeitsbereichsänderungen synchronisieren möchten ohne Dreamweaver zu beenden (in der aktuellen Sitzung), klicken im Menü
„Arbeitsbereich“ auf „Zustand speichern“ und synchronisieren die Einstellungen dann manuell („Voreinstellungen“ >
„Synchronisationseinstellungen“).
Arbeitsbereiche werden nur zwischen Computern mit demselben Betriebssystem synchronisiert.
Sie können festlegen, dass eine bestimmte Einstellung, beispielsweise „Voreinstellungen“, nicht synchronisiert wird. Dazu deaktivieren
Sie im Dialogfeld „Voreinstellungen“, Registerkarte „Synchronisationseinstellungen“, das entsprechende Kontrollkästchen.
Eine Synchronisation mit der Creative Cloud wird in den folgenden Szenarien nicht unterstützt:
Sie haben eine Volume-Lizenz und sind als anonymer Benutzer angemeldet.
Ihr Computer ist so konfiguriert, dass eine Verbindung mit dem Internet über einen Proxyserver hergestellt wird.
Nach oben
„Einstellungen jetzt synchronisieren“
„Einstellungen immer automatisch synchronisieren“
„Synchronisationseinstellungen deaktivieren“
Hinweis:
Erweitert
Sie wechseln von einem Administratorkonto zu einem Standardbenutzerkonto.
Erstmalige Synchronisation
Wenn Sie Dreamweaver auf dem Computer starten, auf dem Sie es zuerst installiert haben, wird das folgende Dialogfeld angezeigt:
Synchronisiert die Einstellungen sofort mit der Cloud.
Synchronisiert die Einstellungen automatisch. Weitere Informationen finden Sie unter
Automatische Synchronisation.
Deaktiviert die Synchronisation.
Sie können die Synchronisation jederzeit mithilfe des Dialogfelds „Voreinstellungen“ aktivieren.
Öffnet die Synchronisationseinstellungen im Dialogfeld „Voreinstellungen“.
Synchronisationseinstellungen im Dialogfeld „Voreinstellungen“
Auf dem zweiten Computer wird beim Start von Dreamweaver das folgende Dialogfeld angezeigt:
„Cloud-Einstellungen“
„Lokale Einstellungen“
„Einstellungen immer automatisch synchronisieren“
Erweitert
„Cloud-Einstellungen“
„Lokale Einstellungen“
„Cloud-Einstellungen“
„Lokale Einstellungen“
Hinweis:
Nach oben
Nach oben
Übernimmt die Einstellungen aus der Cloud. Die Anwendungsvoreinstellungen auf dem zweiten Computer werden mit
den Einstellungen der Cloud überschrieben. Die Site-Einstellungen in der Cloud werden zu denen des zweiten Computers hinzugefügt.
Änderungen, die an den Voreinstellungen und an den Site-Einstellungen auf dem zweiten Computer vorgenommen
wurden, bleiben erhalten und werden auch in der Cloud übernommen.
Synchronisiert die Einstellungen automatisch. Weitere Informationen finden Sie unter
Automatische Synchronisation.
Öffnet die Synchronisationseinstellungen im Dialogfeld „Voreinstellungen“.
Die folgenden Szenarien helfen Ihnen, den Unterschied zwischen „Cloud-Einstellungen“ und „Lokale Einstellungen“ zu verstehen:
Szenario 1
Sie ändern die Voreinstellungen auf dem ersten Computer und synchronisieren diese Änderungen mit der Cloud. Auf dem zweiten Computer
ändern Sie die Voreinstellungen ebenfalls. Jetzt haben Sie zwei Möglichkeiten:
Wenn Sie auf diese Option klicken, werden die Änderungen an den Voreinstellungen auf dem ersten Computer mit dem
zweiten Computer synchronisiert. Die Änderungen, die Sie auf dem zweiten Computer vorgenommen haben, gehen verloren.
Wenn Sie auf diese Option klicken, bleiben die Änderungen an den Voreinstellungen auf dem zweiten Computer
erhalten und werden zudem mit der Cloud synchronisiert. Wenn Sie das nächste Mal den ersten Computer synchronisieren und „Cloud-
Einstellungen“ wählen, werden diese Änderungen auf dem ersten Computer widergespiegelt.
Szenario 2
Änderungen an den Site-Einstellungen auf dem ersten Computer werden zu den Einstellungen auf dem zweiten
Computer „hinzugefügt“.
Änderungen auf dem zweiten Computer bleiben erhalten und werden mit der Cloud synchronisiert. Wenn Sie das
nächste Mal den ersten Computer synchronisieren und „Cloud-Einstellungen“ wählen, wird die neue Site zu den Einstellungen auf dem ersten
Computer hinzugefügt.
Änderungen in den Voreinstellungen, die Sie vornehmen, während die Synchronisation durchgeführt wird, werden nicht übernommen.
Migrieren von Einstellungen zu Dreamweaver CC 2014
Wenn Sie Dreamweaver-Einstellungen mindestens einmal in der Vorversion mit der Creative Cloud synchronisiert haben, wird beim ersten Start
der neuen Dreamweaver-Version das folgende Dialogfeld angezeigt:
Einstellungen in Dreamweaver CC 2014 importieren
Zum Importieren in der Creative Cloud gespeicherter Einstellungen klicken Sie auf Synchr.einst. importieren.
Hinweis: Diese Option ist später nicht mehr verfügbar.
Wenn Sie die Einstellungen in der aktuellen Dreamweaver-Instanz mit der Creative Cloud synchronisieren möchten, klicken Sie auf Lokal
syn.
Damit die Einstellungen in Zukunft automatisch synchronisiert werden, wählen Sie Einstellungen immer automatisch synchronisieren.
Zum Anzeigen der erweiterten Optionen für die Synchronisationseinstellungen klicken Sie auf Erweitert.
Wenn Sie die Einstellungen nicht mit der vorherigen Dreamweaver-Version mit der Creative Cloud synchronisiert haben, werden die unter
Erstmalige Synchronisation beschriebenen Optionen angezeigt.
Bearbeiten der Voreinstellungen für die Synchronisationseinstellungen
Mithilfe des Dialogfelds „Voreinstellungen“ können Sie festlegen, welche Einstellungen synchronisiert werden sollen und welche Einstellungen für
die Konfliktauflösung gelten. Außerdem können Sie dort die automatische Synchronisation aktivieren oder eine Synchronisation manuell starten.
1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac).
Nach oben
2. Klicken Sie in der Kategorienliste auf „Synchronisationseinstellungen“.
3. Klicken Sie im Abschnitt „Zu synchronisierende Einst.“ auf die Einstellung, die synchronisiert werden soll.
4. Klicken Sie in der Liste „Konfliktauflösung“ auf die Option, für die Auflösung von Konflikten während der Synchronisation gelten soll. Weitere
Informationen finden Sie unter Auflösen von Konflikten bei der Synchronisation.
5. Um die automatische Synchronisation alle 30 Minuten zu aktivieren, klicken sie auf „Automatische Synchronisation aktivieren“.
6. Um die Einstellungen zu einem bestimmten Zeitpunkt zu synchronisieren, klicken Sie auf „Einstellungen jetzt synchronisieren“.
(13.1) (Wenn es in der Cloud Aktualisierungen gibt, die auf Ihren Computer heruntergeladen werden, wird anstelle der Schaltfläche
„Einstellungen jetzt synchr.“ die Schaltfläche „Aktualisierungen anwenden“ angezeigt. Sie können die Aktualisierungen sofort anwenden oder
das Dialogfeld „Voreinstellungen“ schließen und die Aktualisierungen zu einem späteren Zeitpunkt anwenden. Wenn Sie Änderungen an der
Dreamweaver-Instanz auf Ihrem Computer vornehmen, bevor Sie die Aktualisierungen anwenden, kann es zu einem Konflikt kommen, der
gemäß der Einstellungen zur Konfliktauflösung behandelt wird.
7. Klicken Sie auf „Anwenden“, um die Änderungen zu speichern, die Sie an den Synchronisationseinstellungen vorgenommen haben.
8. Klicken Sie auf „Schließen“, um das Dialogfeld „Voreinstellungen“ zu schließen.
Nach oben
Nach oben
Automatische Synchronisation
Sie können die automatische Synchronisation mit einer der folgenden Methoden aktivieren:
Aktivieren Sie die Option „Einstellungen immer automatisch synchronisieren“ im Dialogfeld „Synchronisationseinstellungen“.
Hinweis: Das Dialogfeld „Einstellungen synchronisieren“ wird jeweils nur dann angezeigt, wenn Sie Dreamweaver das erste Mal nach der
Installation ausführen. Für nachfolgende Synchronisierungen verwenden Sie das Dialogfeld „Voreinstellungen“ oder die Benachrichtigung ( ).
Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac) und wählen Sie dann
„Synchronisationseinstellungen“ > „Automatische Synchronisation aktivieren“.
Wenn Sie die automatische Synchronisation aktivieren, prüft Dreamweaver alle 30 Minuten auf Änderungen in der Cloud und synchronisiert
geänderte Einstellungen automatisch.
Manuelle Synchronisation
Klicken Sie auf „Einstellungen jetzt synchronisieren“ im Dialogfeld „Synchronisationseinstellungen“.
Klicken Sie auf „Bearbeiten“ > (Ihre Adobe-ID) > „Einstellungen jetzt synchronisieren“.
Klicken Sie in der Benachrichtigung auf „Einstellungen jetzt synchr.“. Um das Benachrichtigungsdialogfeld zu öffnen, klicken Sie in der
Dokumentsymbolleiste auf .
Die Schaltfläche „Einstellungen jetzt synchronisieren“ vor der Synchronisation
Schaltfläche „Jetzt anwenden“ nach der Synchronisation (nur in Version 13.1)
(13.1) (Sind in der Cloud Aktualisierungen vorhanden, werden sie auf den Computer heruntergeladen. In der Benachrichtigung wird anstelle der
Schaltfläche „Einstellungen jetzt synchr.“ die Schaltfläche „Aktualisierungen anwenden“ angezeigt. Sie können die Aktualisierungen entweder sofort
oder zu einem späteren Zeitpunkt anwenden. Wenn Sie vor dem Anwenden der heruntergeladenen Updates Änderungen an Dreamweaver-
Einstellungen vornahmen, kann ein Konflikt auftreten, den Sie entsprechend Auflösen von Konflikten bei der Synchronisation auflösen.
Wählen Sie „Dreamweaver“ > „Einstellungen jetzt synchronisieren“ (Mac) bzw. „Bearbeiten“ > „Einstellungen jetzt synchronisieren“
(Windows).
Auflösen von Konflikten bei der Synchronisation
Wenn sich die Einstellungen auf den Computern und in der Cloud unterscheiden, werden diese Konflikte aufgrund der Einstellungen für die
Konfliktauflösung im Dialogfeld „Voreinstellungen“ gelöst.
Ist die Konfliktauflösung auf „Gemäß meiner Voreinstellung“ gesetzt, wird bei einem Konflikt das folgende Dialogfeld angezeigt:
Wenn Sie die Option „Meine Voreinstellung speichern“ aktivieren, wird im Dialogfeld „Voreinstellungen“ die von Ihnen gewählte Option („Lokale
Einstellungen“ oder „Cloud-Einstellungen“) ausgewählt.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtliche Hinweise | Online-Datenschutzrichtlinie
Nach oben
WICHTIG: Wenn Sie Esc drücken, um das Dialogfeld „Widersprechende Einstellungen“ zu schließen, werden bei der Synchronisation die lokalen
Einstellungen verwendet.
Direkter Zugriff auf Ressourcen der Creative Cloud
Sie können Dateien auf der Creative Cloud direkt aus Dreamweaver heraus öffnen, auswählen oder speichern. Installieren Sie das
Dienstprogramm „Creative Cloud Connection Preview“ von der Site http://creative.adobe.com/de.
Wenn Sie dieses Dienstprogramm installieren, wird in den Dreamweaver-Dialogfeldern „Öffnen“, „Speichern unter“ und „[...] auswählen“ die Option
„Creative Cloud-Dateien“ verfügbar (wurde in der Abbildung unten hervorgehoben).
626


Need help? Post your question in this forum.

Forumrules


Report abuse

Libble takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.

Product:

For example, Anti-Semitic content, racist content, or material that could result in a violent physical act.

For example, a credit card number, a personal identification number, or an unlisted home address. Note that email addresses and full names are not considered private information.

Forumrules

To achieve meaningful questions, we apply the following rules:

Register

Register getting emails for Adobe Dreamweaver CC - 2014 at:


You will receive an email to register for one or both of the options.


Get your user manual by e-mail

Enter your email address to receive the manual of Adobe Dreamweaver CC - 2014 in the language / languages: German as an attachment in your email.

The manual is 10,87 mb in size.

 

You will receive the manual in your email within minutes. If you have not received an email, then probably have entered the wrong email address or your mailbox is too full. In addition, it may be that your ISP may have a maximum size for emails to receive.

Others manual(s) of Adobe Dreamweaver CC - 2014

Adobe Dreamweaver CC - 2014 User Manual - English - 691 pages

Adobe Dreamweaver CC - 2014 User Manual - Dutch - 718 pages


The manual is sent by email. Check your email

If you have not received an email with the manual within fifteen minutes, it may be that you have a entered a wrong email address or that your ISP has set a maximum size to receive email that is smaller than the size of the manual.

The email address you have provided is not correct.

Please check the email address and correct it.

Your question is posted on this page

Would you like to receive an email when new answers and questions are posted? Please enter your email address.



Info