Manualshelf

Operation Manual

Manuals Brands Adobe Manuals Software Dreamweaver CC - 2014
1 2 3 4 5 6 7 8 9 10
Juni 2014
Einige der Links verweisen auf englische Seiten.
Adobe® Dreamweaver® CC-Hilfe

Summary of content (731 pages)

Main Content

Lorem ipsum dolor sit amet, rutrum.

Phasellus tristique purus a venenatis, tristique in, vulputate

H2 level heading

Lorem ipsum dolor sit amet, rutrum, erat nulla fermentum diam,

consectetuer adipiscing elit. Praesent aliquam, augue condimentum adipiscing. Aenean at, odio.

justo convallis luctus sagittis. Etiam leo pede, rhoncus consectetuer adipiscing elit.

  • PAGE 151

    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.

  • PAGE 152

    Main Content

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

    Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.

  • PAGE 153

    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.

  • PAGE 154

    Bedienfeld „CSS Designer“ Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSSStile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können. Bedienfeld „CSS Designer“ Hinweis: Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden.

  • PAGE 155

    Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen: Quellen 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. @Medien 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.

  • PAGE 156

    Hinweis: 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“.

  • PAGE 157

    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.

  • PAGE 158

    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“.

  • PAGE 159

    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.

  • PAGE 160

    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.

  • PAGE 161

    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.

  • PAGE 162

    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.

  • PAGE 163

    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. Hinweis: In der folgenden Tabelle sind die Szenarios aufgeführt, in denen die Live-Hervorhebung nicht verfügbar ist.

  • PAGE 164

    Fließende Rasterlayouts (CC) 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.

  • PAGE 165

    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.

  • PAGE 166

    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.

  • PAGE 167

    Verwenden von jQuery-UI-Widgets in Dreamweaver 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.

  • PAGE 168

    Verwenden von jQuery-Effekten in Dreamweaver 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 Nach oben 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.

  • PAGE 169

    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 . Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 170

    Visuelle Hilfsmittel für das Layout Lineale einrichten Layouthilfslinien einrichten Hilfslinien mit Vorlagen verwenden Layoutraster verwenden Tracing-Bilder verwenden Nach oben 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.

  • PAGE 171

    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.

  • PAGE 172

    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.

  • PAGE 173

    Frames verwenden 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 JavaScrip

  • PAGE 174

    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.

  • PAGE 175

    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.

  • PAGE 176

    richtigen Bereich angezeigt werden. Nach oben 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.

  • PAGE 177

    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.

  • PAGE 178

    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.

  • PAGE 179

    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.

  • PAGE 180

    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.

  • PAGE 181

    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.

  • PAGE 182

    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.

  • PAGE 183

    Inhalte in Tabellen darstellen 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 Spa

  • PAGE 184

    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.

  • PAGE 185

    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“ .

  • PAGE 186

    Hinweis: Wenn der Mauszeiger die Form des Tabellenrastersymbols den Rand einer Zeile oder Spalte klicken). annimmt, können Sie die Tabelle auswählen (sofern Sie nicht auf Klicken Sie in eine Tabellenzelle und wählen Sie dann im Tag-Selektor links unten im Dokumentfenster das

    -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“.

  • PAGE 187

    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“.

  • PAGE 188

    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.

  • PAGE 189

    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“.

  • PAGE 190

    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. Nach oben 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.

  • PAGE 191

    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“ löschen“ . oder „Spaltenbreiten Klicken Sie auf das Kopfzeilenmenü und wählen Sie die Option „Alle Höhen löschen“ oder „Alle Breiten löschen“.

  • PAGE 192

    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.

  • PAGE 193

    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.

  • PAGE 194

    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.

  • PAGE 195

    Anzeigen von Daten mit Spry Spry-Datensätze Spry-Datensätze erstellen Spry-Bereiche erstellen Spry-Wiederholungsbereiche erstellen Spry-Wiederholungslistenbereiche erstellen 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.

  • PAGE 196

    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.

  • PAGE 197

    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.

  • PAGE 198

    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. Hinweis: XPath (XML Path Language) ist eine Syntax zum Adressieren bestimmter Bereiche eines XML-Dokuments.

  • PAGE 199

    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.

  • PAGE 200

    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.

  • PAGE 201

    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.

  • PAGE 202

    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.

  • PAGE 203

    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.

  • PAGE 204

    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.

  • PAGE 205

    Anzeigen von Datenbank-Datensätzen 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-Ergebn

  • PAGE 206

    Durch das Ergebnis der Datenbank-Datensatzgruppen navigieren Nach oben 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.

  • PAGE 207

    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.

  • PAGE 208

    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.

  • PAGE 209

    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.

  • PAGE 210

    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.

  • PAGE 211

    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.

  • PAGE 212

    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.

  • PAGE 213

    Medienabfragen erstellen 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. PAGE 214

    6. Führen Sie einen der folgenden Schritte aus: Klicken Sie auf das Symbol mit dem Pluszeichen („+“), um die Eigenschaften für die Datei für die Medienabfrage festzulegen. Klicken Sie auf „Standardvorgaben“, wenn Sie mit den Standardvorgaben beginnen möchten. 7. Markieren Sie Zeilen in der Tabelle und bearbeiten Sie die Eigenschaften mithilfe der Optionen unter „Eigenschaften“. Beschreibung Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise Mobiltelefon, TV, Tablet usw.

  • PAGE 215

    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.

  • PAGE 216

    Farben Websichere Farben Farbauswahl verwenden Nach oben 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.

  • PAGE 217

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 216

  • PAGE 218

    Spry-Framework 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.

  • PAGE 219

    CSS Designing Pages in Dreamweaver with CSS3 Janine Warner (24. Februar 2011) Lehrgang Dreamweaver CS5: CSS Inspect Geoff Blake (23.

  • PAGE 220

    CSS-Stylesheets in einer Contribute-Site aktualisieren 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.

  • PAGE 221

    Festlegen von CSS-Eigenschaften 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.

  • PAGE 222

    Nach oben 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.

  • PAGE 223

    an, wenn das Tag auf Elemente der Blockebene angewendet wird. Die Eigenschaft „text-indent“ wird von beiden Browsern unterstützt. White-space Legt fest, wie Leerräume innerhalb des Elements gehandhabt werden. Drei Optionen stehen zur Auswahl: Mit der Einstellung „normal“ werden Leerräume entfernt. Mit der Einstellung „pre“ wird der Text so behandelt, als stünde er in pre-Tags (d. h. sämtliche Leerräume wie Leerzeichen, Tabulatoren und Absatzmarken werden berücksichtigt).

  • PAGE 224

    Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Rahmenstil fest. Breite Legt die Breite des Rahmens um ein Element fest. Das width-Attribut wird von beiden Browsern unterstützt. Deaktivieren Sie die Option „Für alle gleich“, wenn Sie die Rahmenbreite für einzelne Seiten des Elements individuell einstellen möchten. Für alle gleich Legt für die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Breite fest.

  • PAGE 225

    Die Option inherit übernimmt die Sichtbarkeitseigenschaft des übergeordneten Elements. Die Option visible zeigt den Inhalt an, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt. Die Option hidden blendet den Inhalt aus, unabhängig davon, welcher Wert für das übergeordnete Objekt gilt. Z-Index Legt die Stapelreihenfolge für den Inhalt fest. Elemente mit höherem Z-Index werden oberhalb von Elementen mit niedrigerem (oder keinem) Z-Index angezeigt.

  • PAGE 226

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 225

  • PAGE 227

    CSS-Link-Eigenschaften für eine ganze Seite festlegen Hinweis: 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.

  • PAGE 228

    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.

  • PAGE 229

    CSS-Überschrifteneigenschaften für eine ganze Seite festlegen Hinweis: 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.

  • PAGE 230

    CSS-Regeln verschieben/exportieren 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.

  • PAGE 231

    Klicken Sie im Bedienfeld „CSS-Stile“ bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die gewünschten Regeln.

  • PAGE 232

    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.

  • PAGE 233

    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).

  • PAGE 234

    Fließende Rasterlayouts (CC) 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.

  • PAGE 235

    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.

  • PAGE 236

    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.

  • PAGE 237

    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“ neben der Eigenschaft „gradient“, um das Dialogfeld für die Definition von Farbverläufen zu öffnen.

  • PAGE 238

    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 Hinweis: 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.

  • PAGE 239

    Hintergrund austauschen Hinweis: 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.

  • PAGE 240

    CSS-Code formatieren 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.

  • PAGE 241

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 240

  • PAGE 242

    Erweiterungen für die CSS3-Unterstützung im Bedienfeld „CSS-Stile“ (CS 5.

  • PAGE 243

    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.

  • PAGE 244

    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.

  • PAGE 245

    CSS-Regeln bearbeiten 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.

  • PAGE 246

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 245

  • PAGE 247

    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.

  • PAGE 248

    Arbeiten mit div-Tags 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.

  • PAGE 249

    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.

  • PAGE 250

    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.

  • PAGE 251

    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.

  • PAGE 252

    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.

  • PAGE 253

    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.

  • PAGE 254

    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.

  • PAGE 255

    Ü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 „APElemente“ können Sie Überlappungen verhindern, die Sichtbarkeit von AP-Elementen ändern, AP-Elemente verschachteln oder stapeln und ein oder mehrere AP-Elemente auswählen.

  • PAGE 256

    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.

  • PAGE 257

    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).

  • PAGE 258

    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“.

  • PAGE 259

    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.

  • PAGE 260

    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.

  • PAGE 261

    Bedienfeld „CSS-Stile“ 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.

  • PAGE 262

    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.

  • PAGE 263

    .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.

  • PAGE 264

    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.

  • PAGE 265

    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.

  • PAGE 266

    Gestalten von Seitenlayouts mit CSS CSS-Seitenlayout Struktur des CSS-Seitenlayouts Seiten mit einem CSS-Layout erstellen Nach oben 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.

  • PAGE 267

    Main Content

    Lorem ipsum dolor sit amet, rutrum.

    Phasellus tristique purus a venenatis, tristique in, vulputate

    H2 level heading

    Lorem ipsum dolor sit amet, rutrum, erat nulla fermentum diam,

    consectetuer adipiscing elit. Praesent aliquam, augue condimentum adipiscing. Aenean at, odio.

    justo convallis luctus sagittis. Etiam leo pede, rhoncus consectetuer adipiscing elit.

  • PAGE 268

    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.

  • PAGE 269

    Main Content

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.

    Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.

  • PAGE 270

    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.

  • PAGE 271

    Bedienfeld „CSS Designer“ Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSSStile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können. Bedienfeld „CSS Designer“ Hinweis: Alle im CSS Designer ausgeführten Aktionen können mit Strg/Befehl+Z rückgängig gemacht und mit Strg/Befehl+Y wiederholt werden.

  • PAGE 272

    Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen: Quellen 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. @Medien 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.

  • PAGE 273

    Hinweis: 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“.

  • PAGE 274

    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.

  • PAGE 275

    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“.

  • PAGE 276

    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.

  • PAGE 277

    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.

  • PAGE 278

    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.

  • PAGE 279

    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.

  • PAGE 280

    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. Hinweis: In der folgenden Tabelle sind die Szenarios aufgeführt, in denen die Live-Hervorhebung nicht verfügbar ist.

  • PAGE 281

    CSS3-Übergangseffekte 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.

  • PAGE 282

    Zeitfunktion Wählen Sie aus den verfügbaren Optionen einen Übergangsstil aus. Endwert 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. Auswählen, wo der Übergang erstellt werden soll Wenn Sie den Stil in das aktuelle Dokument einbetten möchten, wählen Sie „Nur dieses Dokument“.

  • PAGE 283

    Erstellen von CSS-Regeln 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.

  • PAGE 284

    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“. Hinweis: Wenn Sie auf „OK“ klicken, ohne Formatoptionen festgelegt zu haben, wird eine neue leere Regel erstellt.

  • PAGE 285

    Browserübergreifende Probleme bei der CSS-Wiedergabe überprüfen 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 anzei

  • PAGE 286

    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“.

  • PAGE 287

    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 CSSRegeln 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.

  • PAGE 288

    Grundlegendes zu Cascading Stylesheets Cascading Stylesheets CSS-Regeln Cascading Styles Textformatierung und CSS CSS-Kurzschrifteigenschaften Nach oben 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.

  • PAGE 289

    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.

  • PAGE 290

    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.

  • PAGE 291

    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 fontvariant, font-stretch, font-size-adjust und font-style ihre Standardwerte zugeordnet wurden.

  • PAGE 292

    Anwenden, Entfernen oder Umbenennen von CSS-Klassenstilen 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.

  • PAGE 293

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 292

  • PAGE 294

    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.

  • PAGE 295

    Seiteninhalt und Elemente 294

  • PAGE 296

    Verwenden des Bedienfelds „Einfügen“ 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.

  • PAGE 297

    Bedienfeld „Einfügen“ in Dreamweaver CC Nach oben 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.

  • PAGE 298

    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. Hinweis: 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.

  • PAGE 299

    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 Nach oben 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.

  • PAGE 300

    Edge- und Webschriften in die Schriftenliste aufnehmen 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.

  • PAGE 301

    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.

  • PAGE 302

    Arbeiten mit dem Spry-Widget „Überprüfung - Textfeld“ Widget „Überprüfung - Textfeld“ Widget „Überprüfung - Textfeld“ einfügen und bearbeiten Widget „Überprüfung - Textfeld“ anpassen 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. Nach oben Widget „Überprüfung - Textfeld“ Mit einem Spry-Widget vom Typ „Überprüfung - Textfeld“ werden Gültig- bzw.

  • PAGE 303

    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 Nach oben 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“.

  • PAGE 304

    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.

  • PAGE 305

    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.

  • PAGE 306

    Hintergrundfarbe des Widgets, wenn es den Fokus hat .textfieldFocusState input, input.textfieldFocusState Weitere Empfehlungen von Adobe Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 307

    Arbeiten mit dem Spry-Widget „Überprüfung - Textbereich“ Widget „Überprüfung - Textbereich“ Widget „Überprüfung - Textbereich“ einfügen und bearbeiten Widget „Überprüfung - Textbereich“ anpassen 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.

  • PAGE 308

    Widget „Überprüfung - Textbereich“ einfügen und bearbeiten Nach oben 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“. Hinweis: Sie können Widgets vom Typ „Überprüfung - Textbereich“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

  • PAGE 309

    2. Wählen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Zusätzliche Zeichen blockieren“ aus. Nach oben 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.

  • PAGE 310

    Arbeiten mit dem Spry-Widget „Überprüfung - Bestätigung“ Widget „Überprüfung - Bestätigung“ Widget „Überprüfung - Bestätigung“ einfügen und bearbeiten Widget „Überprüfung - Bestätigung“ anpassen 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.

  • PAGE 311

    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.

  • PAGE 312

    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.

  • PAGE 313

    Arbeiten mit dem Spry-Widget „Überprüfung - Kennwort“ Widget „Überprüfung - Kennwort“ Widget „Überprüfung - Kennwort“ einfügen und bearbeiten Widget „Überprüfung - Kennwort“ anpassen 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.

  • PAGE 314

    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.

  • PAGE 315

    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.

  • PAGE 316

    den Fokus hat Weitere Empfehlungen von Adobe Beispiele für Widgets vom Typ „Überprüfung - Kennwort“ Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 317

    Arbeiten mit dem Widget „Spry-Überprüfung - Optionsschaltergruppe“ Widget „Überprüfung - Optionsschaltergruppe“ Widget „Überprüfung - Optionsschaltergruppe“ einfügen und bearbeiten Widget „Überprüfung - Optionsschaltergruppe“ anpassen 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.

  • PAGE 318

    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.

  • PAGE 319

    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.

  • PAGE 320

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 319

  • PAGE 321

    Arbeiten mit dem Spry-Widget „Überprüfung - Auswahlliste“ Widget „Überprüfung - Auswahl“ Widget „Überprüfung - Auswahl“ einfügen und bearbeiten Widget „Überprüfung - Auswahl“ anpassen 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.

  • PAGE 322

    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. Hinweis: Sie können Widgets vom Typ „Überprüfung - Auswahl“ auch über die Kategorie „Spry“ im Bedienfeld „Einfügen“ hinzufügen.

  • PAGE 323

    Text der Fehlermeldung .selectRequiredState .selectRequiredMsg, .selectInvalidState .

  • PAGE 324

    Arbeiten mit dem Widget „Spry-Akkordeon“ Akkordeon-Widget Akkordeon-Widget einfügen und bearbeiten Akkordeon-Widget anpassen 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. Nach oben Akkordeon-Widget Ein Akkordeon-Widget besteht aus einem Satz reduzierbarer Paletten, die umfangreiche Inhalte auf kleinstem Raum aufnehmen können.

  • PAGE 325

    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.

  • PAGE 326

    Hintergrundfarbe der geöffneten Akkordeonpalette Hintergrundfarbe der HoverPalettenregister Hintergrundfarbe des geöffneten HoverPalettenregisters .AccordionPanelOpen .AccordionPanelTab .AccordionPanelTabHover .AccordionPanelOpen .AccordionPanelTabHover background-color: #EEEEEE (dies ist der Standardwert) color: #555555 (dies ist der Standardwert) color: #555555; (dies ist der Standardwert.) Breite eines Akkordeons beschränken Akkordeon-Widgets passen sich standardmäßig dem verfügbaren Raum an.

  • PAGE 327

    Arbeiten mit dem Widget „Spry Reduzierbare Palette“ Widget „Reduzierbare Palette“ Widgets vom Typ „Reduzierbare Palette“ einfügen und bearbeiten Widget „Reduzierbare Palette“ anpassen 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.

  • PAGE 328

    2. Aktivieren bzw. deaktivieren Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die Option „Animation aktivieren“. Nach oben 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.

  • PAGE 329

    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;.

  • PAGE 330

    Arbeiten mit dem Spry-Widget „Überprüfung - Kontrollkästchen“ Widget „Überprüfung - Kontrollkästchen“ Widget „Überprüfung - Kontrollkästchen“ einfügen und bearbeiten Fehlermeldungen für das Widget „Überprüfung - Kontrollkästchen“ anpassen 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.

  • PAGE 331

    2. Füllen Sie das Dialogfeld „Eingabehilfen-Attribute für Input-Tag“ aus und klicken Sie auf „OK“. Hinweis: 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.

  • PAGE 332

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 331

  • PAGE 333

    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“.

  • PAGE 334

    CSS-Link-Eigenschaften für eine ganze Seite festlegen Hinweis: 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.

  • PAGE 335

    CSS-Überschrifteneigenschaften für eine ganze Seite festlegen Hinweis: 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.

  • PAGE 336

    Elemente im Dokumentfenster auswählen und anzeigen 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.

  • PAGE 337

    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.

  • PAGE 338

    337

  • PAGE 339

    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.

  • PAGE 340

    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.

  • PAGE 341

    Erstellen und Verwalten einer Liste mit Favoritenelementen Favoritenelemente verwalten Favoritenelemente hinzufügen oder entfernen Kurznamen für Favoritenelemente erstellen Elemente in Favoritenordnern gruppieren Nach oben Favoritenelemente verwalten Die vollständige Liste aller erkannten Elementlisten kann bei umfangreichen Sites unübersichtlich werden.

  • PAGE 342

    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. Nach oben Kurznamen für Favoritenelemente erstellen Kurznamen (z. B.

  • PAGE 343

    Festlegen von Texteigenschaften im Eigenschafteninspektor 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.

  • PAGE 344

    Regel bearbeiten Öffnet das Dialogfeld „CSS-Regel-Definition“ für die Zielregel. Wenn Sie über das Popupmenü „Zielregel“ die Option „Neue CSS-Regel“ auswählen und auf die Schaltfläche „Regel bearbeiten“ klicken, wird stattdessen das Dialogfeld „Neue CSS-Regel“ zum Eingeben der Regeldefinition geöffnet. CSS-Bedienfeld Öffnet das Bedienfeld „CSS-Stile“ und zeigt Eigenschaften der Zielregel in der aktuellen Ansicht an. Schrift Ändert die Schriftart der Zielregel. Größe Legt die Schriftgröße der Zielregel fest.

  • PAGE 345

    Titel Gibt den QuickInfo-Text für einen Hypertext-Link an. Ziel Dient zum Festlegen des Frames oder Fensters, in dem das verknüpfte Dokument geladen wird: _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster. _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, der den Hyperlink enthält. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze Browserfenster geladen.

  • PAGE 346

    Arbeiten mit Photoshop und Dreamweaver 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 Nach oben Photoshop-Integration In Dreamweaver können Sie Photoshop-B

  • PAGE 347

    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.

  • PAGE 348

    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.

  • PAGE 349

    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“. Hinweis: Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen.

  • PAGE 350

    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.

  • PAGE 351

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 350

  • PAGE 352

    Einfügen von HTML5-Videos (CC) 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).

  • PAGE 353

    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.

  • PAGE 354

    Öffnen und Erstellen von Dokumenten 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.

  • PAGE 355

    XML XML-Dateien (eXtensible Markup Language) haben die Erweiterung .xml. Sie enthalten Daten in einer Rohform, die mithilfe von XSL (eXtensible Stylesheet Language) formatiert werden können. XSL XSL-Dateien (eXtensible Stylesheet Language) haben die Erweiterung .xsl oder .xslt. Sie werden zum Formatieren von XML-Daten verwendet, die auf einer Webseite angezeigt werden sollen.

  • PAGE 356

    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.

  • PAGE 357

    6. Wenn Sie in der Spalte „Layout“ ein CSS-Layout gewählt haben, wählen Sie im zugehörigen Popupmenü den Speicherort für das CSS aus. Zum Head-Bereich hinzufügen Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu. Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknüpft das neue Stylesheet mit der von Ihnen erstellten Seite.

  • PAGE 358

    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 anzuzeigen.

  • PAGE 359

    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“). Nach oben 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.

  • PAGE 360

    Standarderweiterung 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. Standard-Dokumenttyp (DDT) Wählen Sie eine der XHTML-Dokumenttypdefinitionen (DTD) aus, damit neue Seiten XHTML-kompatibel angelegt werden. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmenü „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ auswählen.

  • PAGE 361

    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.

  • PAGE 362

    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.

  • PAGE 363

    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).

  • PAGE 364

    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). Hinweis: Auf Windows-Systemen sollten Sie nun die Datei in Word schließen, um zu verhindern, dass es zu einer Zugriffsverletzung kommt. 2.

  • PAGE 365

    Einfügen von HTML5-Audiodaten (CC) 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 HTML5Element für Audidaten bietet ein Standardverfahren, um Audioinhalte in Webseiten einzubetten.

  • PAGE 366

    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. Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 367

    Vergrößern und Verkleinern der Ansicht 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 e

  • PAGE 368

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 367

  • PAGE 369

    Arbeiten mit Spry-Widgets (allgemeine Anweisungen) 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 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.

  • PAGE 370

    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. Nach oben 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.

  • PAGE 371

    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.

  • PAGE 372

    Arbeiten mit Text 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 Nach oben 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.

  • PAGE 373

    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.

  • PAGE 374

    (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.

  • PAGE 375

    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.

  • PAGE 376

    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“.

  • PAGE 377

    6. (Optional) Wiederholen Sie Punkt 4, um die Suche weiter einzuschränken. Nach oben 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.

  • PAGE 378

    Arbeiten mit dem Spry-QuickInfo-Widget QuickInfo-Widget QuickInfo-Widgets einfügen Optionen für QuickInfo-Widgets bearbeiten 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. Nach oben QuickInfo-Widget Das Spry-QuickInfo-Widget zeigt Zusatzinformationen an, wenn ein Benutzer den Mauszeiger über bestimmte Elemente einer Webseite hält.

  • PAGE 379

    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.

  • PAGE 380

    Arbeiten mit dem Widget „Spry Paletten mit Registerkarten“ Widget „Paletten mit Registerkarten“ Widgets vom Typ „Paletten mit Registerkarten“ einfügen und bearbeiten Widget „Paletten mit Registerkarten“ anpassen 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.

  • PAGE 381

    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.

  • PAGE 382

    Hintergrundfarbe des ausgewählten Registers Hintergrundfarbe der Palettenregister beim Zeigen mit der Maus .TabbedPanelsTabSelected .TabbedPanelsTabHover background-color: #EEE (dies ist der Standardwert) 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.

  • PAGE 383

    Spry-Framework 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.

  • PAGE 384

    Vorlagen 383

  • PAGE 385

    Verwenden optionaler Bereiche in Vorlagen Optionale Bereiche in Vorlagen Optionale Bereiche einfügen Werte für optionale Bereiche festlegen Nach oben 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.

  • PAGE 386

    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“. Nach oben 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.

  • PAGE 387

    Vorlagensyntax Allgemeine Syntaxregeln Vorlagen-Tags Instanz-Tags Vorlagensyntax überprüfen Nach oben 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.

  • PAGE 388

    Nach oben 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.

  • PAGE 389

    Voreinstellungen für Vorlagenbereiche Code-Farbeinstellungen für Vorlagen anpassen Markierungseinstellungen für Vorlagenbereiche festlegen Nach oben 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.

  • PAGE 390

    Farbe gegenüber der Hintergrundfarbe der Seite sichtbar ist.

  • PAGE 391

    Vorlagen und vorlagenbasierte Dokumente erkennen Vorlagen in der Entwurfsansicht erkennen Vorlagen in der Codeansicht erkennen Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen Vorlagenbasierte Dokumente in der Codeansicht erkennen Nach oben 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.

  • PAGE 392

    Hinweis: Vermeiden Sie bei der Bearbeitung von Vorlagencode in der Codeansicht jegliche Änderungen der vorlagenbezogenen KommentarTags, auf die Dreamweaver bei der Verarbeitung von Vorlagen angewiesen ist. Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen Nach oben Bei einem auf einer Vorlage basierenden Dokument werden bearbeitbare Bereiche in der Entwurfsansicht des Dokumentfensters durch rechteckige Rahmen in einer voreingestellten Markierungsfarbe angezeigt.

  • PAGE 393

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 392

  • PAGE 394

    Vorlageninhalte exportieren und importieren XML-Inhalte in Vorlagen Bearbeitbare Bereiche von Dokumenten als XML-Code exportieren XML-Inhalte importieren Site ohne Vorlagen-Markup exportieren Nach oben 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.

  • PAGE 395

    „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“.

  • PAGE 396

    Inhalte in vorlagenbasierten Dokumenten bearbeiten 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 Nach oben Dreamweaver-Vorlagen legen für Dokumente, die auf Vorlagen basieren, Bereiche fest, die bearbeitbar oder nicht bearbeitbar (gesperrt) sind.

  • PAGE 397

    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.

  • PAGE 398

    Vorlagen bearbeiten, aktualisieren oder löschen 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 Nach oben Vorlagen bearbeiten und aktualisieren Wenn Sie eine Vorlage bearbeiten und anschließend speichern, werden alle mit der Vorlage verknüpften Dokumente aktualisiert.

  • PAGE 399

    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.

  • PAGE 400

    haben, liefert Dreamweaver Informationen zu den Dateien, die aktualisiert werden. Die erfolgreiche Aktualisierung wird ebenfalls gemeldet. 6. Klicken Sie auf „Schließen“. Nach oben 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.

  • PAGE 401

    Definieren bearbeitbare Tag-Attribute in Vorlagen Bearbeitbare Tag-Attribute in Vorlagen festlegen Bearbeitbare Tag-Attribute als nicht bearbeitbar markieren Nach oben Bearbeitbare Tag-Attribute in Vorlagen festlegen Sie können den Benutzern der Vorlage erlauben, bestimmte Tag-Attribute in einem vorlagebasierten Dokument zu ändern.

  • PAGE 402

    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.

  • PAGE 403

    Verschachtelte Vorlagen erstellen Verschachtelte Vorlagen Verschachtelte Vorlage erstellen Verhindern, dass bearbeitbarere Bereiche an verschachtelte Vorlagen übertragen werden Nach oben Verschachtelte Vorlagen Unter einer verschachtelten Vorlage wird eine Vorlage verstanden, bei der das Design und die bearbeitbaren Bereiche auf einer anderen Vorlage basieren.

  • PAGE 404

    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.

  • PAGE 405

    @@("")@@ Dieser Vorlagencode kann an beliebiger Stelle innerhalb der -Tags positioniert werden, die den bearbeitbaren Bereich einschließen.

  • PAGE 406

    Erstellen wiederholender Bereiche in Vorlagen Wiederholende Bereiche in Vorlagen Wiederholende Bereiche in Vorlagen erstellen Wiederholende Tabellen einfügen Abwechselnde Hintergrundfarben in einer wiederholenden Tabelle festlegen Nach oben Wiederholende Bereiche in Vorlagen Wiederholende Bereiche sind Abschnitte innerhalb einer Vorlage, die in einer auf der Vorlage basierenden Seite mehrmals dupliziert werden können.

  • PAGE 407

    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.

  • PAGE 408

    Erstellen bearbeitbarer Bereiche in Vorlagen Einfügen eines bearbeitbaren Bereichs Bearbeitbare Bereiche auswählen Bearbeitbare Bereiche entfernen Die Namen bearbeitbarer Bereiche ändern Nach oben 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.

  • PAGE 409

    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“.

  • PAGE 410

    Erstellen von Dreamweaver-Vorlagen 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 Nach oben 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 Dok

  • PAGE 411

    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.

  • PAGE 412

    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.

  • PAGE 413

    Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen Vorlagen auf vorhandene Dokumente anwenden Dokument von einer Vorlage lösen Nach oben 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.

  • PAGE 414

    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.

  • PAGE 415

    Dreamweaver-Vorlagen 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 Nach oben Grundlegendes zu Dreamweaver-Vorlagen Eine Vorlage ist ein spezieller Dokumenttyp für die Erstellung eines „festen“ Seitenlayouts.

  • PAGE 416

    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.

  • PAGE 417

    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.

  • PAGE 418

    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.

  • PAGE 419

    XML 418

  • PAGE 420

    XML und XSLT XML und XSL mit Webseiten verwenden Serverseitige XSL-Transformationen Clientseitige XSL-Transformationen XML-Daten und wiederholte Elemente Vorschau der XML-Daten anzeigen Nach oben 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.

  • PAGE 421

    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.

  • PAGE 422

    an Ihren Serveradministrator, um weitere Informationen zu erhalten. Nach oben 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.

  • PAGE 423

    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.

  • PAGE 424

    • 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 -Tags. Dreamweaver generiert auch in anderen Fällen kontextrelative XPath-Ausdrücke. Wenn Sie z. B.

  • PAGE 425

    Verwandte Hilfethemen XML-Tutorial Rechtliche Hinweise | Online-Datenschutzrichtlinie 424

  • PAGE 426

    XSL-Transformationen auf dem Server ausführen 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

  • PAGE 427

    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 XSLTSeite erstellen, die ein - und ein -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.

  • PAGE 428

    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. Nach oben XML-Datenquellen anhängen Wenn Sie eine bestehende XSLT-Seite als Grundlage verwenden oder beim Erstellen einer neuen XSLT-Seite mit Dreamweaver keine XMLDatenquelle angehängt haben, müssen Sie mithilfe des Bedienfelds „Bindungen“ eine XML-Datenquelle anhängen. 1.

  • PAGE 429

    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}.

  • PAGE 430

    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.

  • PAGE 431

    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.

  • PAGE 432

    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. Nach oben Stile auf XSLT-Fragmente anwenden Wenn Sie eine vollständige XSLT-Seite erstellen (d. h.

  • PAGE 433

    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.

  • PAGE 434

    Content goes here Hinweis: Sie müssen String-Werte wie beispielsweise „true“ in Anführungszeichen setzen. Dreamweaver verschlüsselt die Anführungszeichen ('), 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.

  • PAGE 435

    Weitere Informationen und Beispiele zum Schreiben von bedingten Ausdrücken finden Sie im Abschnitt 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.

  • PAGE 436

    Mit dieser Auswahl würde der folgende Code in Ihre XSLT-Seite eingefügt: 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“.

  • PAGE 437

    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 „XPATHAusdrucksgenerator“ wird der ausgewählte Inhalt von einem -Block umgeben. Haben Sie keinen Inhalt ausgewählt, wird der -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.

  • PAGE 438

    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: Content goes here Hinweis: Sie müssen String-Werte wie beispielsweise „true“ in Anführungszeichen setzen.

  • PAGE 439

    Beim Klicken auf „OK“ wird der folgende Code in die XSLT-Seite eingefügt: Content goes here Weitere Informationen und Beispiele zu wiederholten Bereichen finden Sie im Abschnitt des Bedienfelds „Referenz“.

  • PAGE 440

    XSL-Transformationen auf dem Client ausführen 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 Nach oben Sie können clientseitige XSL-Transformationen durchführen.

  • PAGE 441

    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.

  • PAGE 442

    Fehlende Zeichenentitäten für XSLT Fehlende Zeichenentitäten angeben Nach oben 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 EtZeichen (&) 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.

  • PAGE 443

    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: Im vorliegenden Beispiel würden Sie das folgende Entitäts-Tag eingeben: 4. Speichern Sie die Datei.

  • PAGE 444

    jQuery 443

  • PAGE 445

    Verwenden von jQuery-UI-Widgets in Dreamweaver 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.

  • PAGE 446

    Verwenden von jQuery-Effekten in Dreamweaver 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 Nach oben 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.

  • PAGE 447

    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 . Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 448

    Hyperlinks und Navigation 447

  • PAGE 449

    Fehler in Hyperlinks beheben Fehlerhafte, externe und verwaiste Hyperlinks suchen Fehlerhafte Hyperlinks reparieren Fehlerhafte, externe und verwaiste Hyperlinks suchen Nach oben 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.

  • PAGE 450

    4. Wenn Sie einen Bericht speichern möchten, klicken Sie im Bedienfeld „Hyperlink-Prüfer“ auf die Schaltfläche „Bericht speichern“. Nach oben 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.

  • PAGE 451

    Navigationsleisten Informationen zu Navigationsleisten Nach oben Informationen zu Navigationsleisten Die Funktion „Navigationsleiste“ ist ab Dreamweaver CS5 veraltet. Zum Erstellen von Navigationsleisten wird die Verwendung des Menüleisten-Widgets empfohlen.

  • PAGE 452

    Hyperlinks erstellen 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 Hype

  • PAGE 453

    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.

  • PAGE 454

    7. Geben Sie im Feld „Zugriffstaste“ eine Tastaturtaste (einen Buchstaben) zum Auswählen des Hyperlinks im Browser ein. 8. Klicken Sie auf „OK“. Nach oben Relativen Pfad neuer Hyperlinks festlegen In Dreamweaver werden in der Standardeinstellung Hyperlinks zu anderen Seiten auf der Site mithilfe dokumentrelativer Pfade erstellt.

  • PAGE 455

    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.

  • PAGE 456

    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.

  • PAGE 457

    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).

  • PAGE 458

    Sprungmenüs Informationen zu Sprungmenüs Sprungmenüs einfügen Elemente in Sprungmenüs bearbeiten Fehlersuche bei Sprungmenüs Nach oben Informationen zu Sprungmenüs Ein Sprungmenü ist ein Popupmenü in einem Dokument, mit dem Besuchern der Website Hyperlinks zu Dokumenten oder Dateien angezeigt werden.

  • PAGE 459

    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“.

  • PAGE 460

    Imagemaps Informationen zu Imagemaps Clientseitige Imagemaps einfügen Imagemap-Hotspots ändern Nach oben 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.

  • PAGE 461

    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. Nach oben Imagemap-Hotspots ändern Sie können die in einer Imagemap erstellten Hotspots problemlos bearbeiten. Sie können Hotspot-Bereiche verschieben, Hotspots vergrößern bzw.

  • PAGE 462

    Allgemeines zu Hyperlinks und Navigation Hyperlinks Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade Nach oben 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.

  • PAGE 463

    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.

  • PAGE 464

    Schreiben von Code 463

  • PAGE 465

    Schreiben und Bearbeiten von Code 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 Codefr

  • PAGE 466

    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.

  • PAGE 467

    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.

  • PAGE 468

    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.

  • PAGE 469

    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.

  • PAGE 470

    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.

  • PAGE 471

    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“. Nach oben 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.

  • PAGE 472

    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.

  • PAGE 473

    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.

  • PAGE 474

    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.

  • PAGE 475

    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.

  • PAGE 476

    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). Nach oben 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.

  • PAGE 477

    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. Nach oben 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.

  • PAGE 478

    Mit Server-Side Includes arbeiten Server-Side Includes Server-Side Includes einfügen Inhalt von Server-Side Includes bearbeiten Nach oben 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.

  • PAGE 479

    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“.

  • PAGE 480

    Mit Head-Inhalt für Seiten arbeiten 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.

  • PAGE 481

    (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. Nach oben 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.

  • PAGE 482

    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.

  • PAGE 483

    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 HTMLSinne eine Verknüpfung herstellen.

  • PAGE 484

    Codeumgebung einrichten Programmiererfreundliche Arbeitsbereiche verwenden Anzeigen von Code Anpassen von Tastaturbefehlen Dateien standardmäßig in der Codeansicht öffnen Programmiererfreundliche Arbeitsbereiche verwenden Nach oben 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.

  • PAGE 485

    Wie Sie die an der linken Fensterseite befindliche Code-Symbolleiste verwenden, erfahren Sie unter Code mit der Code-Symbolleiste einfügen. Nach oben Anpassen von Tastaturbefehlen In Dreamweaver können Sie Tastaturbefehle nach Ihren Wünschen definieren.

  • PAGE 486

    Festlegen von Codeeinstellungen Voreinstellungen für Code Erscheinungsbild des Codes festlegen Codeformat ändern Einstellungen für das Umschreiben von Code festlegen Codefarben festlegen Mit externen Editoren arbeiten Nach oben 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).

  • PAGE 487

    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.

  • PAGE 488

    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 Text umgeschrieben in Text. 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.

  • PAGE 489

    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.

  • PAGE 490

    Code optimieren und debuggen 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) Nach oben Optimieren von Code Sie können automatisch leere Tags entfernen, verschachtelte font-Tags kombinieren und unleserlichen oder unübersichtlichen HTML- bzw.

  • PAGE 491

    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.

  • PAGE 492

    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.

  • PAGE 493

    festzulegen. Nach oben 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 XHTMLkompatibel 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“.

  • PAGE 494

    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.

  • PAGE 495

    Verwalten von Tag-Bibliotheken 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 Nach oben 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.

  • PAGE 496

    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.

  • PAGE 497

    Verwandte Hilfethemen Rechtliche Hinweise | Online-Datenschutzrichtlinie 496

  • PAGE 498

    Benutzerdefinierte Tags in Dreamweaver importieren 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.

  • PAGE 499

    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“. Nach oben 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.

  • PAGE 500

    Allgemeine Informationen zum Programmieren in Dreamweaver Unterstützte Sprachen Ungültiger Markup Automatische Codeänderung XHTML-Code Reguläre Ausdrücke Code für Serververhalten Nach oben 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.

  • PAGE 501

    Verfügung, die eine Beurteilung unbekannter Tags erlauben würden. Wenn ein unerkanntes Tag ein anderes Tag überlappt (z. B. text), 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.

  • PAGE 502

    aufweisen: a, applet, form, frame, iframe, img und map. Beispielsweise ist Introduction ungültig. Die korrekte Form lautet das Attribut name von einem Eigenschafteninspektor festgelegt wurde. Dies gilt für den von Dreamweaver erzeugten Code und beim Optimieren von XHTML. Introduction oder Introduction. Bei Attributen mit Werten eines Aufzählungstyps müssen die Werte in Kleinbuchstaben geschrieben werden.

  • PAGE 503

    [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!“.

  • PAGE 504

    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.

  • PAGE 505

    Code in der Entwurfsansicht bearbeiten 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 Skript

  • PAGE 506

    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“.

  • PAGE 507

    aktiv ist. Nach oben 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.

  • PAGE 508

    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.

  • PAGE 509

    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.

  • PAGE 510

    Rechtliche Hinweise | Online-Datenschutzrichtlinie 509

  • PAGE 511

    Code ausblenden Informationen zum Ausblenden von Code Codefragmente aus- und einblenden Ausgeblendete Codefragmente einfügen und verschieben Nach oben 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.

  • PAGE 512

    Alles einblenden Strg+Alt+E Befehl+Alt+E Ausgeblendete Codefragmente einfügen und verschieben Nach oben 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.

  • PAGE 513

    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 DreamweaverTechniken vor, mit denen Sie Webseiten für Mobilgeräte erstellen können, die auf jQuery JavaScript basieren.

  • PAGE 514

    Verpacken von Webanwendungen als native mobile Anwendungen mit PhoneGap Build PhoneGap Build und Dreamweaver PhoneGap Build-Konten erstellen Entwicklungsumgebung einrichten Installieren des PhoneGap Build-Zusatzprogramms Anwendungen für Mobilgeräte mit PhoneGap Build verpacken Nach oben 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.

  • PAGE 515

    Installieren des PhoneGap Build-Zusatzprogramms Nach oben 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.

  • PAGE 516

    Ä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“.

  • PAGE 517

    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.

  • PAGE 518

    Verpacken von Webanwendungen Verpacken von Webanwendungen als native mobile Anwendungen (CS 5.5) Verpacken von Webanwendungen als native mobile Anwendungen (CS 5.5) Nach oben 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/.

  • PAGE 519

    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.

  • PAGE 520

    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.

  • PAGE 521

    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.

  • PAGE 522

    Medienabfragen erstellen 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. PAGE 523

    6. Führen Sie einen der folgenden Schritte aus: Klicken Sie auf das Symbol mit dem Pluszeichen („+“), um die Eigenschaften für die Datei für die Medienabfrage festzulegen. Klicken Sie auf „Standardvorgaben“, wenn Sie mit den Standardvorgaben beginnen möchten. 7. Markieren Sie Zeilen in der Tabelle und bearbeiten Sie die Eigenschaften mithilfe der Optionen unter „Eigenschaften“. Beschreibung Die Beschreibung des Geräts, für das die CSS-Datei verwendet werden muss, beispielsweise Mobiltelefon, TV, Tablet usw.

  • PAGE 524

    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.

  • PAGE 525

    Ä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.

  • PAGE 526

    Erstellen von Webanwendungen für mobile Geräte (CS5.5, CS6) 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.

  • PAGE 527

    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.

  • PAGE 528

    2. Wählen Sie „Leere Seite“ > „HTML“. Einige der jQuery Mobile-Komponenten verwenden HTML5-spezifische Attribute. Um sicherzustellen, dass bei der Überprüfung die HTML5Regeln 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.

  • PAGE 529

    Rechtliche Hinweise | Online-Datenschutzrichtlinien 528

  • PAGE 530

    Vorschau 529

  • PAGE 531

    Anzeigen einer Seitenvorschau Seitenvorschau in Dreamweaver Vorschau von Seiten im Browser Hinweis: 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.

  • PAGE 532

    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.

  • PAGE 533

    vornehmen und die Ergebnisse überprüfen, bevor Sie sie auf dem Testserver ablegen. Wenn diese Option deaktiviert ist, verwendet Dreamweaver die Versionen der zugehörigen Dateien auf dem Testserver. Einstellungen für HTTP-Anforderungen Es wird ein Dialogfeld mit erweiterten Einstellungen angezeigt, in dem Sie Werte zum Anzeigen von Live-Daten eingeben können. Weitere Informationen erhalten Sie auch, wenn Sie im Dialogfeld auf die Hilfeschaltfläche klicken.

  • PAGE 534

    Webanwendungen und Formulare 533

  • PAGE 535

    Live-Daten anzeigen 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.

  • PAGE 536

    535

  • PAGE 537

    Webanwendungen 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 Nach oben Grundlagen zu Webanwendungen Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist.

  • PAGE 538

    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. Nach oben 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.

  • PAGE 539

    einen bestimmten Mechanismus festgelegt werden, bevor die Seite an den Browser gesendet werden kann. Dieser Mechanismus wird im folgenden Abschnitt beschrieben. Nach oben Dynamische Webseiten verarbeiten Wenn eine statische Webseite angefordert wird, sendet der Webserver die Seite umgehend und ohne Änderungen an den Browser.

  • PAGE 540

    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.

  • PAGE 541

    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: Trio Motors Information Page

    About Trio Motors

    Trio Motors is a leading automobile manufacturer.

  • PAGE 542

    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.

  • PAGE 543

    Verwenden von Formularen zum Sammeln von Benutzerinformationen Allgemeines zum Sammeln von Benutzerinformationen Parameter von HTML-Formularen URL-Parameter URL-Parameter mithilfe von Hypertext-Verknüpfungen erstellen Allgemeines zum Sammeln von Benutzerinformationen Nach oben 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 de

  • PAGE 544

    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. Nach oben URL-Parameter Mit URL-Parametern können Sie die vom Benutzer gelieferten Daten vom Browser an den Server senden.

  • PAGE 545

    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.

  • PAGE 546

    ColdFusion-Komponenten verwenden 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.

  • PAGE 547

    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.

  • PAGE 548

    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.

  • PAGE 549

    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.

  • PAGE 550

    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.

  • PAGE 551

    Fehlerbehebung bei Datenbankverbindungen Berechtigungsprobleme lösen Microsoft-Fehler beheben MySQL-Fehler beheben Nach oben Berechtigungsprobleme lösen Zu den häufigsten Problemen gehören unzureichende Ordner- oder Dateiberechtigungen.

  • PAGE 552

    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.

  • PAGE 553

    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.

  • PAGE 554

    Ö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.

  • PAGE 555

    554

  • PAGE 556

    Computer für die Entwicklung von Anwendungen einrichten 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 Nach oben Zum Erstellen von Webanwendungen in Adobe®

  • PAGE 557

    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.

  • PAGE 558

    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 Nach oben 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.

  • PAGE 559

    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.

  • PAGE 560

    Schützen von Ordnern in Anwendungen (ColdFusion) 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) Nach oben Sie können mit Dreamweaver Ordner in einer ColdFusion-Anwendung mit einem Kennwort schützen. Das gilt auch für den Stammordner der Anwendung.

  • PAGE 561

    Verbindungsskripts entfernen Befehl „Verbindungsskripts entfernen“ verwenden Befehl „Verbindungsskripts entfernen“ verwenden Nach oben 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.

  • PAGE 562

    Optimieren des Arbeitsbereichs für visuelle Entwicklung 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 Nach oben Wählen Sie im Popupmenü „Kategorie“ des Bedienfelds „E

  • PAGE 563

    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“. Nach oben Vorschau dynamischer Seiten in einem Browser Autoren von Webanwendungen debuggen ihre Seiten häufig, indem sie sie kurz in einem Webbrowser überprüfen.

  • PAGE 564

    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.

  • PAGE 565

    Überblick über Quellen für dynamischen Inhalt Quellen für dynamischen Inhalt Datensatzgruppen URL- und Formularparameter Sitzungsvariablen Anwendungsvariablen in ASP und ColdFusion ASP-Servervariablen ColdFusion-Servervariablen Nach oben 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.

  • PAGE 566

    URL-Parameter dienen zum Speichern der abgerufenen Informationen, die von Benutzern eingegeben wurden. Zum Definieren eines URLParameters 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.

  • PAGE 567

    Die HTML-Syntax lautet jeweils wie folgt:

    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
  • PAGE 568

    Benutzervoreinstellung für die Schriftgröße speichert. ColdFusion 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.

  • PAGE 569

    Bedienfelder für dynamischen Inhalt Bedienfeld Bedienfeld Bedienfeld Bedienfeld „Bindungen“ „Serververhalten“ „Datenbanken“ „Komponenten“ Nach oben 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.

  • PAGE 570

    Nach oben Bedienfeld „Datenbanken“ Mit dem Bedienfeld „Datenbanken“ können Sie Datenbankverbindungen erstellen, Datenbanken überprüfen und datenbankbezogenen Code in Ihre Seiten einfügen.

  • PAGE 571

    Anzeigen von Datenbank-Datensätzen 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-Ergebn

  • PAGE 572

    Durch das Ergebnis der Datenbank-Datensatzgruppen navigieren Nach oben 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.

  • PAGE 573

    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.

  • PAGE 574

    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.

  • PAGE 575

    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.

  • PAGE 576

    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.

  • PAGE 577

    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.

  • PAGE 578

    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.

  • PAGE 579

    Dynamische Seiten entwerfen Dynamische Seiten in Dreamweaver entwerfen Nach oben 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.

  • PAGE 580

    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.

  • PAGE 581

    Definieren von Quellen für dynamischen Inhalt 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 Inhal

  • PAGE 582

    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.

  • PAGE 583

    10. Klicken Sie auf „OK“. Die neu definierte ColdFusion-Datensatzgruppe wird im Bedienfeld „Bindungen“ angezeigt. Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren Nach oben 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.

  • PAGE 584

    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.

  • PAGE 585

    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.

  • PAGE 586

    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.

  • PAGE 587

    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.

  • PAGE 588

    Variablen als Datenquelle für eine ColdFusion-Datensatzgruppe verwenden Nach oben Wenn Sie im Bedienfeld „Bindungen“ eine Datensatzgruppe für eine Seite definieren, wird von Dreamweaver der Name der ColdFusionDatenquelle 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.

  • PAGE 589

    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.

  • PAGE 590

    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.

  • PAGE 591

    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.

  • PAGE 592

    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.

  • PAGE 593

    Datenbankverbindungen für ASP-Entwickler (CS6) 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 Nach oben 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 D

  • PAGE 594

    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;...

  • PAGE 595

    Da Sie in einem DSN nur einen ODBC-Treiber angeben können, müssen Sie eine Verbindungszeichenfolge verwenden, wenn Sie einen OLE DBAnbieter 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.

  • PAGE 596

    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.

  • PAGE 597

    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.

  • PAGE 598

    erstellte Verbindung aus. Verwenden Sie die neue Verbindung für jede neue Seite. Nach oben 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.

  • PAGE 599

    Datenbankverbindungen für ColdFusion-Entwickler (CS6) Verbindungen mit ColdFusion-Datenbanken herstellen ColdFusion-Datenquelle erstellen oder ändern Datenbankverbindungen in Dreamweaver herstellen Verbindungen mit ColdFusion-Datenbanken herstellen Nach oben Beim Entwickeln einer ColdFusion-Webanwendung in Dreamweaver stellen Sie eine Datenbankverbindung her, indem Sie eine ColdFusionDatenquelle auswählen, die in Dreamweaver oder in der Verwaltungskonsole des Servers, dem ColdFusion-Administrator, defini

  • PAGE 600

    Ö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.

  • PAGE 601

    Datenbankverbindungen für PHP-Entwickler PHP-Datenbankverbindungen Datenbankverbindungen herstellen Datenbankverbindungen bearbeiten und löschen Nach oben 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.

  • PAGE 602

    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.

  • PAGE 603

    Erstellen von Webformularen 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 Benutze

  • PAGE 604

    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.

  • PAGE 605

    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.

  • PAGE 606

    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.

  • PAGE 607

    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.

  • PAGE 608

    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.

  • PAGE 609

    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.

  • PAGE 610

    Vorhandene HTML-Formularmenüs dynamisch gestalten Nach oben 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“. Nach oben Dynamischen Inhalt in HTML-Textfeldern anzeigen Bei der Anzeige eines Formulars in einem Browser kann dynamischer Inhalt in HTML-Textfeldern angezeigt werden.

  • PAGE 611

    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.

  • PAGE 612

    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.

  • PAGE 613

    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.

  • PAGE 614

    Dynamischen Inhalt ändern 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 Nach oben Dynamischer Inhalt Sie können den dynamischen Inhalt Ihrer Seite ändern, indem Sie das Serververhalten bearbeiten, das den Inhalt bereitstellt.

  • PAGE 615

    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.

  • PAGE 616

    Erstellen von Such- und Ergebnisseiten 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) Nach oben Such- und Ergebnisseiten In Dreamweaver können Sie Seiten erstellen, mit denen Besucher Ihrer Site eine Datenbank durchsuchen und die Suchergebnisse anzeigen können.

  • PAGE 617

    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.

  • PAGE 618

    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“.

  • PAGE 619

    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.

  • PAGE 620

    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.

  • PAGE 621

    Seiten mit erweiterten Objekten für die Datenbankverarbeitung erstellen (ColdFusion, ASP) (CS6) ASP-Befehlsobjekte ASP-Befehle zum Ändern von Datenbanken verwenden Gespeicherte Prozeduren Gespeicherte Prozeduren hinzufügen (ColdFusion) (CS6) Gespeicherte Prozeduren ausführen (ASP) (CS6) Nach oben ASP-Befehlsobjekte Ein ASP-Befehlsobjekt ist ein Serverobjekt, das eine bestimmte Datenbankoperation ausführt.

  • PAGE 622

    Das nachfolgende Beispiel zeigt eine INSERT-Anweisung, die drei SQL-Variablen enthält. Die Werte dieser Variablen werden von URLParametern 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.

  • PAGE 623

    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.

  • PAGE 624

    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. Nach oben 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.

  • PAGE 625

    Master- und Detailseiten entwickeln 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 Nach oben Master- und Detailseiten Master- und Detailseiten sind Sätze von Seiten, die zum Organisieren und Anzeigen von Datensatzdaten dienen.

  • PAGE 626

    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.

  • PAGE 627

    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.

  • PAGE 628

    6. (PHP) Fügen Sie im Eigenschafteninspektor im Feld „Hyperlink“ die folgende Zeichenfolge am Ende der URL ein: ?recordID= Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URLParameters. (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.

  • PAGE 629

    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.

  • PAGE 630

    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.

  • PAGE 631

    Erstellen von Registrierungsseiten 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 Nach oben Registrierungsseiten Ihre Webanwendung kann eine Seite enthalten, auf der Benutzer sich registrieren müssen, wenn sie Ihre Site zum ersten Mal besuchen.

  • PAGE 632

    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.

  • PAGE 633

    Datensatz-Einfügeseiten erstellen (CS6) Datensatz-Einfügeseiten erstellen Einfügeseiten Schritt für Schritt erstellen Einfügeseiten in einem Schritt erstellen Nach oben Datensatz-Einfügeseiten erstellen Ihre Anwendung kann eine Seite enthalten, mit der Besucher neue Datensätze in eine Datenbank einfügen können.

  • PAGE 634

    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.

  • PAGE 635

    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.

  • PAGE 636

    Erstellen von Seiten, auf die nur autorisierte Benutzer zugreifen können Geschützte Seiten Unberechtigte Benutzer zu einer anderen Seite umleiten Zugriffsrechte in der Benutzerdatenbank speichern Benutzer abmelden Nach oben Geschützte Seiten Ihre Webanwendung kann eine geschützte Seite enthalten, auf die nur berechtigte Besucher zugreifen können.

  • PAGE 637

    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.

  • PAGE 638

    „Benutzer abmelden“ aus. 3. Wählen Sie die Option „Abmelden, wenn Seite lädt“ und klicken Sie auf „OK“.

  • PAGE 639

    Erstellen von ColdFusion-Formularen 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 ColdFusio

  • PAGE 640

    „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.

  • PAGE 641

    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. Nach oben 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.

  • PAGE 642

    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.

  • PAGE 643

    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.

  • PAGE 644

    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.

  • PAGE 645

    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.

  • PAGE 646

    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.

  • PAGE 647

    Ü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.

  • PAGE 648

    Erstellen von Datensatz-Aktualisierungsseiten (CS6) 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 Nach oben Datensatz-Aktualisierungsseiten Ihre Anwendung kann eine Reihe von Seiten enthalten, mit denen Besucher Ihrer Site vorhandene Datensätze in einer Datenbank

  • PAGE 649

    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.

  • PAGE 650

    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.

  • PAGE 651

    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.

  • PAGE 652

    Anmeldeseiten erstellen Anmeldeseiten Datenbanktabellen registrierter Benutzer erstellen HTML-Formulare für die Benutzeranmeldung hinzufügen Benutzernamen und Kennwort überprüfen Nach oben Anmeldeseiten Ihre Webanwendung kann eine Seite enthalten, mit der registrierte Besucher sich bei der Site anmelden können.

  • PAGE 653

    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.

  • PAGE 654

    Erstellen von Datensatz-Löschseiten 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 Nach oben 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.

  • PAGE 655

    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.

  • PAGE 656

    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“.

  • PAGE 657

    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.

  • PAGE 658

    Ausgewählte Datensatz-ID-Spalte 5. Klicken Sie auf „OK“ und speichern Sie die Seite. Fertige Löschseite Nach oben 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.

  • PAGE 659

    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.

  • PAGE 660

    Verwandte Hilfethemen Rechtliche Hinweise | Online-Datenschutzrichtlinie 659

  • PAGE 661

    Einfügen von dynamischem Inhalt in Seiten Dynamischen Inhalt hinzufügen Dynamischer Text Texte dynamisch gestalten Bilder dynamisch gestalten HTML-Attribute dynamisch gestalten ActiveX, Flash und andere Objektparameter dynamisch gestalten Nach oben 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.

  • PAGE 662

    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“. Nach oben Bilder dynamisch gestalten Sie haben die Möglichkeit, Bilder auf Ihrer Seite dynamisch zu gestalten.

  • PAGE 663

    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 (+).

  • PAGE 664

    Produktübergreifende Arbeitsabläufe 663

  • PAGE 665

    Flash und Dreamweaver verwenden Bearbeiten einer SWF-Datei aus Dreamweaver in Flash Bearbeiten einer SWF-Datei aus Dreamweaver in Flash Nach oben 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.

  • PAGE 666

    Fireworks und Dreamweaver verwenden 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

  • PAGE 667

    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.

  • PAGE 668

    „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. Nach oben Fireworks-Popupmenüs Mit Fireworks können Sie schnell und einfach CSS-basierte Popupmenüs erstellen.

  • PAGE 669

    PNG-Quelldatei nie verwenden bewirkt, dass das platzierte Fireworks-Bild automatisch geöffnet wird, unabhängig davon, ob eine PNGQuelldatei 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.

  • PAGE 670

    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.

  • PAGE 671

    Mit Device Central arbeiten und Dreamweaver verwenden Adobe Device Central mit Dreamweaver verwenden Tipps zum Erstellen von Webinhalt für mobile Geräte mit Dreamweaver Adobe Device Central mit Dreamweaver verwenden Nach oben Mit Device Central können Dreamweaver-Web-Designer und -Entwickler in einer Vorschau sehen, wie Dreamweaver-Dateien auf verschiedenen mobilen Geräten aussehen werden.

  • PAGE 672

    Mit ConnectNow arbeiten und Dreamweaver verwenden Arbeiten mit ConnectNow Nach oben 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.

  • PAGE 673

    Mit Adobe Bridge arbeiten und Dreamweaver verwenden 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 Nach oben 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 i

  • PAGE 674

    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. Nach oben Adobe Bridge-Dateien auf einer Seite platzieren 1.

  • PAGE 675

    Verwenden von Dreamweaver mit Adobe Online-Diensten 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.

  • PAGE 676

    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.

  • PAGE 677

    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.

  • PAGE 678

    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.

  • PAGE 679

    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.

  • PAGE 680

    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.

  • PAGE 681

    Zusatzprogramme 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-EndDatenbanken oder zur Unterstützung beim Schreiben von Skripts für Browser.

  • PAGE 682

    Adobe Creative Cloud-Seite für Zusatzprogramme, „Meine Zusatzprogramme“ Aktivieren der Dateisynchronisation für die Adobe Creative Cloud Nach oben 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 2. Klicken Sie auf , um den Adobe Creative Cloud-Client zu öffnen. und klicken Sie dann auf „Voreinstellungen“.

  • PAGE 683

    Voreinstellungen im Adobe Creative Cloud-Client 3. Legen Sie auf der Registerkarte „Dateien“ die Option „Synchronisieren“ auf „Ein“ fest.

  • PAGE 684

    Dateisynchronisation im Adobe Creative Cloud-Client Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.

  • PAGE 685

    Anwendungsübergreifende Integration Integration in Photoshop, Flash und Fireworks Nach oben 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.

  • PAGE 686

    AIR-Erweiterung für Dreamweaver 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.

  • PAGE 687

    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.

  • PAGE 688

    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.

  • PAGE 689

    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.

  • PAGE 690

    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“.

  • PAGE 691

    Hinzufügen und Ändern von Bildern 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 Nach oben Bilder Es gibt viele verschiedene Arten von Grafikdateiformaten. Auf Webseiten werden jedoch im Allgemeinen nur drei Grafikdateiformate verwendet: GIF, JPEG und PNG.

  • PAGE 692

    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.

  • PAGE 693

    Alt Gibt alternativen Text an, der anstelle des Bildes geladen wird, wenn ein reiner Textbrowser verwendet wird bzw. wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich über dem Bild befindet.

  • PAGE 694

    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.

  • PAGE 695

    Ein Bild-Platzhalter ist kein Bild, das in einem Browser angezeigt wird. Bevor Sie eine Site veröffentlichen, sollten Sie alle verwendeten BildPlatzhalter 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.

  • PAGE 696

    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: Neu auflösen Fügt einer in der Größe geänderten JPEG- oder GIF-Bilddatei Pixel hinzu bzw. entfernt Pixel, um das Erscheinungsbild des Originals weitgehend zu reproduzieren.

  • PAGE 697

    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.

  • PAGE 698

    Hinweis: Die Wirkung eines Rollover-Bildes ist in der Entwurfsansicht nicht sichtbar. Mit externen Bildeditoren arbeiten Nach oben 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.

  • PAGE 699

    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“.

  • PAGE 700

    Arbeiten mit Photoshop und Dreamweaver 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 Nach oben In Dreamweaver können Sie Photoshop-B

  • PAGE 701

    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.

  • PAGE 702

    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.

  • PAGE 703

    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“. Hinweis: Wenn Sie die Größe des Bilds in Photoshop geändert haben, müssen Sie die Größe des Webbilds in Dreamweaver zurücksetzen.

  • PAGE 704

    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.

  • PAGE 705

    Rechtliche Hinweise | Online-Datenschutzrichtlinie

  • PAGE 706

    Dreamweaver-Business Catalyst-Integration 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.

  • PAGE 707

    Business Catalyst-Site importieren Nach oben 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.

  • PAGE 708

    JavaScript

  • PAGE 709

    Verwenden von JavaScript-Verhalten (allgemeine Anweisungen) 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 Nach oben Mit Adobe® Dreamweaver®-Verhalten wird JavaScript-Code in Dokumente eingefügt, damit Besucher Webseiten auf unterschiedliche Weise ändern oder bestimmte Aufgaben starten können.

  • PAGE 710

    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.

  • PAGE 711

    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.

  • PAGE 712

    Anwenden integrierter JavaScript-Verhalten 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 Verhalt

  • PAGE 713

    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.

  • PAGE 714

    und zeichnen Sie dann in der Entwurfsansicht des Dokumentfensters ein AP-Div. 2. Klicken Sie im Tag-Selektor unten links im Dokumentfenster auf . 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.

  • PAGE 715

    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.

  • PAGE 716

    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 Nach oben Mit dem Verhalten „Browserfenster öffnen“ können Sie eine Seite in einem neuen Fenster öffnen.

  • PAGE 717

    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 Nach oben Dieses Verhalten ist ab Dreamweaver CS5 veraltet.

  • PAGE 718

    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.

  • PAGE 719

    Dieses Verhalten ist ab Dreamweaver CS5 veraltet. Elemente in Popupmenüs hinzufügen, entfernen und neu anordnen Nach oben Dieses Verhalten ist ab Dreamweaver CS5 veraltet. Popupmenüs formatieren Nach oben Dieses Verhalten ist ab Dreamweaver CS5 veraltet. Position von Popupmenüs in einem Dokument festlegen Nach oben Dieses Verhalten ist ab Dreamweaver CS5 veraltet. Popupmenüs ändern Nach oben Dieses Verhalten ist ab Dreamweaver CS5 veraltet.

  • PAGE 720

    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

    -Tag. Wählen Sie dann „Fenster“ > „Verhalten“ aus. 4.

  • PAGE 721

    Barrierefreiheit

  • PAGE 722

    Dreamweaver-Eingabehilfen 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 Nach oben Der Begriff „Barrierefreiheit“ bezieht sich auf die Möglichkeit, Websites und Webprodukte für Menschen mit beeinträchtigten Seh- und Hörfähigkeiten sowie

  • PAGE 723

    Arbeitsbereich für barrierefreies Seitenlayout optimieren Nach oben 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.

  • PAGE 724

    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.

  • PAGE 725

    Dreamweaver und die Creative Cloud

  • PAGE 726

    Synchronisieren von Dreamweaver-Einstellungen mit der Creative Cloud 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.

  • PAGE 727

    Sie wechseln von einem Administratorkonto zu einem Standardbenutzerkonto. Erstmalige Synchronisation Nach oben Wenn Sie Dreamweaver auf dem Computer starten, auf dem Sie es zuerst installiert haben, wird das folgende Dialogfeld angezeigt: „Einstellungen jetzt synchronisieren“ Synchronisiert die Einstellungen sofort mit der Cloud. „Einstellungen immer automatisch synchronisieren“ Synchronisiert die Einstellungen automatisch. Weitere Informationen finden Sie unter Automatische Synchronisation.

  • PAGE 728

    „Cloud-Einstellungen“ Ü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. „Lokale Einstellungen“ Ä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.

  • PAGE 729

    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.

  • PAGE 730

    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.

  • PAGE 731

    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 Nach oben 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.