Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Zum Head-Bereich hinzufügen Fügt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite hinzu. Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in ein neues, externes CSS-Stylesheet und verknüpft das neue Stylesheet mit der von Ihnen erstellten Seite. Verknüpfen mit bestehender Datei Ermöglicht die Angabe einer bereits vorhandenen CSS-Datei, die die für das Layout benötigten CSS-Regeln enthält. Diese Option ist besonders praktisch, wenn Sie dasselbe CSS-Layout (d. h.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Arbeiten mit Bootstrap-Dateien Bootstrap ist das am häufigsten verwendete kostenlose HTML-, CSSund JavaScript-Framework zum Entwickeln von responsiven Websites mit Priorisierung von Mobilgeräten. Das Framework enthält responsive CSS- und HTML-Vorlagen für Schaltflächen, Tabellen, Navigation, Bildkarussells und andere Elemente, die Sie auf der Webseite verwenden können.
„Bootstrap umfasst ein fließendes Rastersystem mit einem für Mobilgeräte optimierten Responsive Design, das entsprechend der Geräte- oder Viewport-Größe auf bis zu 12 Spalten skaliert werden kann. Außerdem sind Klassen für benutzerfreundliche Layoutoptionen sowie leistungsstarke Mixins zum Generieren von semantischen Layouts enthalten.“ – Bootstrap-Dokumentation Für den Einstieg in Bootstrap-Dokumente mit Dreamweaver sollten Sie die Bootstrap-Startvorlagen verwenden.
4. Wählen Sie einen Speicherort für das neue Dokument und klicken Sie auf „Speichern“. 5. Wenn Sie aufgefordert werden, die abhängigen Dateien zu kopieren, klicken Sie auf „Kopieren“. Es wird eine HTML-Seite erstellt, die auf der gewählten Vorlage basiert. Sie können die Seite jetzt bearbeiten, indem Sie Komponenten hinzufügen oder löschen und nach Bedarf die Texte oder Elemente ändern.
Bootstrap-Dokumente mit neuen Framework-Dateien erstellen 2. (Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt „CSS anfügen“ auf das Symbol . Das Dialogfeld „Externes Stylesheet anfügen“ wird angezeigt. Geben Sie die gewünschten Einstellungen an, und klicken Sie auf „OK“. 3.
Bootstrap-Dokumente mit vorhandenen Framework-Dateien erstellen 2. (Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt „CSS anfügen“ auf das Symbol . Das Dialogfeld „Externes Stylesheet anfügen“ wird angezeigt. Geben Sie die gewünschten Einstellungen an, und klicken Sie auf „OK“. 3. Mit der Option „Vordefiniertes Layout einbinden“ wird eine grundlegende BootstrapDokumentstruktur bereitgestellt.
Beim Öffnen einer Bootstrap-HTML-Datei in Dreamweaver: Zeilen werden durch graue gestrichelte Linien mit runden Ecken hervorgehoben. Spalten werden durch blaue gestrichelte Linien hervorgehoben. Hervorgehobene Zeilen und Spalten in einem Bootstrap-HTML-Dokument A. Zeile B. Spalte Dreamweaver erkennt die CSS-Dateien, die mit einer Bootstrap-HTML-Datei verknüpft sind, wenn der CSSDateiname „bootstrap“ enthält.
Ausgeblendete Bootstrap-Elemente verwalten Nach oben Bootstrap-Komponenten hinzufügen Mit der Option „Bootstrap-Komponenten“ im Bedienfeld „Einfügen“ werden alle Bootstrap-Komponenten aufgeführt, die Sie der Webseite in Dreamweaver hinzufügen können. Bootstrap-Komponenten im Bedienfeld „Einfügen“ Um eine Komponente hinzuzufügen, ziehen Sie sie aus dem Bedienfeld auf die Webseite. Bevor Sie die Komponente einfügen, beachten Sie auch die visuellen Hilfsmittel, z. B.
Dabei stellt „*“ die aktuelle Bildschirmgröße in Dreamweaver dar. Nach oben Spalten hinzufügen Wählen Sie die gewünschte Spalte aus und klicken Sie dann auf untergeordneten Elemente dupliziert. . Die ausgewählte Spalte wird ohne ihre Allen leeren Spalten wird eine Mindesthöhe von 20 px zugewiesen. Diese Höhe wird jedoch nicht wirklich der Seite hinzugefügt.
Visuelle Medienabfragen Bei Medienabfragen handelt es sich um ein CSS3-Modul, mit dem Sie responsive Websites entwerfen können, indem Sie unterschiedliche Stilregeln für verschiedene Geräte oder Medientypen definieren. Auf Grundlage dieser Regeln werden beim Rendern von Inhalten verschiedene Bedingungen berücksichtigt, z. B. Bildschirmgröße, Browserfenstergröße, Gerätegröße, Ausrichtung und Auflösung. Sie können Medienabfragen mit der Regel @media zu CSS-Dateien hinzufügen.
Visuelle Medienabfragen bestehen aus drei horizontalen Leisten, die jeweils eine Kategorie von Medienabfragen darstellen: Grün: Medienabfragen mit max-width-Bedingungen Blau: Medienabfragen mit min-width- und max-width-Bedingungen Lila: Medienabfragen mit min-width-Bedingungen Hinweis: Die im Bedienfeld „CSS Designer“ aufgeführten Medienabfragen weisen diese Farben als Präfix auf. Jede Kategorie kann aus einer oder mehreren Medienabfragen bestehen.
Nach oben Zwischen Haltepunkten wechseln Wenn Sie die Seite in einer bestimmten Größe anzeigen möchten (Haltepunkt), klicken Sie auf die entsprechende Medienabfrageleiste. Das Dokument rastet am Haltepunkt ein. Alternativ können Sie den Scrubber an den gewünschten Haltepunkt ziehen. Wechseln Sie zu einem Haltepunkt, indem Sie auf die entsprechende Leiste klicken oder den Scrubber ziehen.
1. Ziehen Sie den Scrubber entlang des Lineals an die gewünschte Größe. 2. Klicken Sie auf . Sie werden aufgefordert, auf dem Lineal auf bestimmte Bereiche zu klicken, um die Medienabfrage zu erstellen. 3. Klicken Sie abhängig von der gewünschten Medienabfragebedingung (Minimum oder Maximum) auf den angegebenen Bereich auf dem Lineal. Ziehen Sie zum Abbrechen den Scrubber an eine neue Position. 4.
Responsives Design mithilfe von fließenden Rasterlayouts Das Layout einer Website muss sich an die Abmessungen des Geräts, auf dem sie angezeigt wird, anpassen und entsprechend dieser Abmessungen reagieren (responsives Design). Ein fließendes Rasterlayout bietet eine visuelle Möglichkeit, um unterschiedliche Layouts zu erstellen, die den verschiedenen Geräten entsprechen, auf denen die Website angezeigt wird. Beispielsweise wird Ihre Website auf Desktop-PCs, Tablet-PCs und auf Mobiltelefonen angezeigt.
Festlegen der CSS-Datei, die als CSS-Datei mit fließendem Raster zu öffnen ist Standardmäßig wird das fließende Raster für Mobiltelefone angezeigt. Zudem wird das Bedienfeld „Einfügen“ für fließende Raster eingeblendet. Erstellen Sie Ihr Layout mithilfe der Optionen im Bedienfeld „Einfügen“. Um in die Ansicht zum Entwickeln eines Layouts für andere Geräte zu wechseln, klicken Sie auf das entsprechende Symbol unter der Entwurfsansicht. 6. Speichern Sie die Datei.
3. Wählen Sie eine Klasse aus oder geben Sie einen Wert für die ID ein. Das Klassenmenü zeigt Klassen aus der CSS-Datei an, die Sie beim Erstellen der Seite angegeben haben. 4. Aktivieren Sie das Kontrollkästchen „Als fließendes Element einfügen“. 5. Wenn Sie ein eingefügtes Element auswählen, werden die Optionen zum Ausblenden, Duplizieren oder Löschen des div-Elements angezeigt. Bei Divs, die übereinander gelagert werden, wird die Option zum Ersetzen von Divs angezeigt.
können mithilfe der Schaltfläche „Löschen“ auch zusammen gelöscht werden (Tastaturbefehl: Strg+Entf). Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.
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 Zeilen und Spalten hinzufügen und entfernen Zellen verbinden
Rangfolge der Tabellenformatierung in HTML Wenn Sie Tabellen in der Entwurfsansicht formatieren, können Sie Eigenschaften für die gesamte Tabelle oder für ausgewählte Zeilen, Spalten oder Zellen der Tabelle festlegen. Bei einzelnen Tabellenzellen kann für eine Eigenschaft (beispielsweise Hintergrundfarbe oder Ausrichtung) ein anderer Wert als für die gesamte Tabelle festgelegt werden.
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf „Tabelle“. 2. Legen Sie die Attribute im Dialogfeld „Tabelle“ fest und klicken Sie auf „OK“, um die Tabelle zu erstellen. Zeilen Legt die Anzahl der Tabellenzeilen fest. Spalten Legt die Anzahl der Tabellenspalten fest. Tabellenbreite gibt die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers an. Randstärke gibt die Breite der Tabellenränder in Pixel an.
Sie können Tabellendaten, die in einer anderen Anwendung (z. B. Microsoft Excel) erstellt und in einem Textformat mit Trennzeichen (mit durch Tabulatoren, Kommata, Doppelpunkte oder Semikola getrennten Elementen) gespeichert wurden, in Dreamweaver importieren und als Tabelle formatieren. Sie können zudem Tabellendaten aus Dreamweaver in eine Textdatei exportieren, in der die Inhalte angrenzender Zellen durch ein Trennzeichen getrennt sind.
Tabellen exportieren 1. Setzen Sie die Einfügemarke in eine Zelle der Tabelle. 2. Wählen Sie „Datei“ > „Exportieren“ > „Tabelle“ aus. 3. Legen Sie die folgenden Optionen fest: Trennzeichen Gibt an, welches Trennzeichen zwischen den Elementen in der exportierten Datei verwendet wird. Zeilenumbrüche Legt fest, in welchem Betriebssystem die exportierte Datei geöffnet wird: „Windows“, „Macintosh“ oder „UNIX“. (In den einzelnen Betriebssystemen wird das Ende einer Textzeile unterschiedlich angegeben.) 4.
1. Setzen Sie den Mauszeiger auf den linken Rand einer Zeile oder auf den oberen Rand einer Spalte. 2. Wenn sich der Mauszeiger in einen Auswahlpfeil ändert, klicken Sie, um eine Zeile oder Spalte auszuwählen, oder ziehen Sie den Mauszeiger, um mehrere Zeilen oder Spalten auszuwählen. Einzelne Spalten auswählen 1. Klicken Sie in die entsprechende Spalte. 2. Klicken Sie auf das Spaltenüberschriftmenü und wählen Sie dann „Spalte auswählen“ aus.
Nicht aneinandergrenzende Zellen auswählen Klicken Sie bei gedrückter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die auszuwählenden Zellen, Zeilen oder Spalten. Wenn die entsprechenden Zellen, Zeilen oder Spalten noch nicht ausgewählt sind, werden sie zur Auswahl hinzugefügt. Ist sie bereits ausgewählt, wird sie aus der Auswahl entfernt. Markierungsfarbe für Tabellenelemente ändern 1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac). 2.
Wenn die Ausrichtungsoption „Standard“ ausgewählt ist, wird neben der Tabelle kein anderer Inhalt angezeigt. Wenn eine Tabelle neben anderen Inhalten angezeigt werden soll, wählen Sie die Ausrichtungsoption „Links“ oder „Rechts“ aus. Rahmen gibt die Breite der Tabellenränder in Pixel an. Wenn Sie für Rahmen, Zellabstand und Zellauffüllung nicht ausdrücklich Werte zuweisen, wird in den meisten Browsern für den Rahmen und die Zellauffüllung der Wert „1“ und für den Zellabstand der Wert „2“ festgelegt.
angeben möchten, tragen Sie hinter dem Wert ein Prozentzeichen (%) ein. Lassen Sie das Feld leer (Standardeinstellung), wenn die Spaltenbreite oder -höhe entsprechend dem Zellinhalt sowie der Breite und Höhe der anderen Spalten und Zeilen im Browser festgelegt werden soll. In der Standardeinstellung wird im Browser die Zeilenhöhe und Spaltenbreite anhand des breitesten Bilds oder der längsten Zeile einer Spalte ausgewählt.
A. Tabelle im Standardmodus B. Tabelle im erweiterten Tabellenmodus Hinweis: Nachdem Sie die gewünschten Elemente ausgewählt oder die Einfügemarke positioniert haben, sollten Sie wieder den Standardmodus der Entwurfsansicht auswählen, um dann die Tabelle zu bearbeiten. Bei bestimmten visuellen Arbeitsschritten, beispielsweise beim Ändern der Größe, werden im erweiterten Tabellenmodus nicht die erwarteten Ergebnisse erzielt. In den erweiterten Tabellenmodus wechseln 1.
Hinweis: Wenn Sie Eigenschaften für eine Spalte definieren, ändert Dreamweaver die Attribute des td-Tags für jede einzelne Zelle in der Spalte. Wenn Sie bestimmte Eigenschaften jedoch für eine Zeile festlegen, ändert Dreamweaver die Attribute des trTags und nicht die Attribute aller td-Tags in der Zeile. Wenn Sie allen Zellen einer Zeile dasselbe Format zuweisen, wird durch Anwenden des Formats auf das tr-Tag gewährleistet, dass der HTML-Code optimiert und kürzer ist.
werden. In Dreamweaver wird die Spaltenbreite zusammen mit dem Spaltenüberschriftmenü oben oder unten in den Spalten angezeigt, wenn die Tabelle ausgewählt wird oder sich die Einfügemarke in der Tabelle befindet. Die Spaltenüberschriftmenüs können nach Bedarf aktiviert oder deaktiviert werden. Größe von Tabellen ändern Wählen Sie die Tabelle aus. Wenn Sie sich in der Live-Ansicht befinden, wird beim Auswählen der Tabelle die Elementanzeige angezeigt.
Höhe von Zeilen ändern Ziehen Sie den unteren Rand der entsprechenden Zeile. Spaltenbreiten im Code den sichtbaren Spaltenbreiten anpassen 1. Klicken Sie in eine Zelle. 2. Klicken Sie auf das Kopfzeilenmenü und wählen Sie dann die Option „Alle Breiten angleichen“ aus. In Dreamweaver wird die im Code angegebene Breite an die sichtbare Spaltenbreite angepasst. Alle in einer Tabelle definierten Breiten und Höhen löschen 1. Wählen Sie die Tabelle aus. 2.
1. Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Tabellenbreite“ aus. 2. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in die Tabelle und wählen Sie dann „Tabelle“ > „Tabellenbreite“ aus. Nach oben Zeilen und Spalten hinzufügen und entfernen Sie können Zeilen und Spalten über „Modifizieren“ > „Tabelle“ oder über das Spaltenüberschriftmenü hinzufügen und entfernen.
„Modifizieren“ > „Tabelle“ > „Zeile löschen“ oder „Modifizieren“ > „Tabelle“ > „Spalte löschen“ aus. Wählen Sie eine vollständige Zeile oder Spalte und anschließend „Bearbeiten“ > „Löschen“ aus. Zeilen oder Spalten mit dem Eigenschafteninspektor einfügen oder löschen 1. Wählen Sie die Tabelle aus. 2. Führen Sie im Eigenschafteninspektor einen der folgenden Schritte aus: Wenn Sie Zeilen einfügen oder löschen möchten, erhöhen oder verringern Sie den Wert in „Zeilen“.
angezeigt werden. Der Inhalt der einzelnen Zellen wird in die neue verbundene Zelle verschoben. Für die verbundene Zelle gelten die Eigenschaften der Zelle, die zuerst ausgewählt wurde. Zellen teilen 1. Klicken Sie in die Zelle und führen Sie einen der folgenden Schritte aus: Wählen Sie „Modifizieren“ > „Tabelle“ > „Zelle teilen“. Klicken Sie im erweiterten HTML-Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche „Zelle teilen“ .
In der folgenden Abbildung ist die Auswahl kein Rechteck von Zellen. Die Zellen können deshalb nicht ausgeschnitten oder kopiert werden. 2. Wählen Sie „Bearbeiten“ > „Ausschneiden“ oder „Bearbeiten“ > „Kopieren“. Hinweis: Wenn Sie eine ganze Zeile oder Spalte und „Bearbeiten“ > „Ausschneiden“ ausgewählt haben, wird die ganze Zeile oder Spalte (und nicht nur der Inhalt der Zellen) aus der Tabelle entfernt. Tabellenzellen einfügen 1.
Zeilen oder Spalten mit verbundenen Zellen löschen 1. Wählen Sie die Zeile oder Spalte aus. 2. Wählen Sie „Modifizieren“ > „Tabelle“ > „Zeile löschen“ oder „Modifizieren“ > „Tabelle“ > „Spalte löschen“ aus. Nach oben Tabellen verschachteln Eine verschachtelte Tabelle ist eine Tabelle in einer Zelle einer anderen Tabelle. Sie können eine verschachtelte Tabelle wie jede andere Tabelle formatieren. Die Breite wird jedoch durch die Breite der Zelle begrenzt, in der sich die Tabelle befindet. 1.
thead-Tag finden Sie im Bedienfeld „Referenz“ (wählen Sie dazu „Hilfe“ > „Referenz“). Fußzeilen sortieren Legt fest, dass alle Zeilen im Abschnitt tfoot der Tabelle (soweit vorhanden) nach denselben Kriterien sortiert werden wie die Zeilen des Hauptteils. (Beachten Sie, dass die tfoot-Zeilen im Abschnitt tfoot verbleiben und auch nach der Sortierung am Anfang der Tabelle angezeigt werden.) Weitere Informationen zum tfoot-Tag finden Sie im Bedienfeld „Referenz“ (wählen Sie dazu „Hilfe“ > „Referenz“).
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.
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.
Wenn Sie einen jQuery Effekt anwenden, wird er standardmäßig dem Ereignis „onClick“ zugewiesen. Im Bedienfeld „Verhalten“ können Sie jedoch das auslösende Ereignis für einen Effekt ändern. 1. Wählen Sie das erforderliche Seitenelement aus. 2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Symbol „Festgelegte Ereignisse zeigen“. 3. Klicken Sie auf die Zeile, die dem aktuell angewendeten Effekt entspricht.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie 249
CSS 250
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.
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.
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.
Nach oben CSS-Kurzschrifteigenschaften Die CSS-Eigenschaften ermöglichen die Erstellung von Stilen mithilfe einer abgekürzten Syntax, CSS-Kurzschrift genannt. Mit der CSS-Kurzschrift können Sie die Werte zahlreicher Eigenschaften mit einer einzigen Deklaration bestimmen. Die Eigenschaft font ermöglicht es Ihnen beispielsweise, mit einer einzigen Syntaxzeile die Eigenschaften zu font-style, font-variant, font-weight, font-size, line-height und font-family einzurichten.
Bedienfeld „CSS Designer“ Das Bedienfeld „CSS Designer“ („Fenster“ > „CSS Designer“) stellt einen CSS-Eigenschafteninspektor dar, mit dem Sie auf visuelle Weise CSS-Stile und Dateien erstellen sowie Eigenschaften einschließlich Medienabfragen festlegen können. Video ansehen Den visuellen CSS-Editor in Dreamweaver verwenden (8 Min.) 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.
Tastaturbefehle Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1) Deaktivieren der Live-Hervorhebung Siehe auch Gestalten von Seitenlayouts mit CSS CSS3-Übergangseffekte Das Bedienfeld „CSS Designer“ besteht aus folgenden Bereichen und Optionen: Alle Führt den gesamten CSS-Code, alle Medienabfragen und Selektoren im aktuellen Dokument auf. In diesem Modus wird die Auswahl nicht berücksichtigt.
Videotutorial Using the CSS Designer panel Nach oben Erstellen und Anfügen von Stylesheets 1.
1. Wählen Sie im CSS Designer im Bereich „Quellen“ eine CSS-Quelle aus oder im Bereich „@Medien“ eine Medienabfrage. 2. Klicken Sie im Bereich „Selektoren“ auf . Abhängig von dem im Dokument ausgewählten Element identifiziert der CSS Designer den relevanten Selektor (nach bis zu drei Regeln) und bietet ihn zur Auswahl an.
Wenn ein Selektor keine Stile besitzt, sind „Kopieren“ und „Alle Stile kopieren“ deaktiviert. „Stile einfügen“ ist bei Remote-Sites, die nicht bearbeitet werden können, deaktiviert. „Kopieren“ und „Alle Stile kopieren“ ist jedoch verfügbar. Das Einfügen von Stilen, die zum Teil bereits in einem Selektor vorhanden sind (Überlappung), ist ebenso möglich. Es wird die Gesamtmenge aller Selektoren eingefügt.
Eigenschaft „margin“ (Rand) Eigenschaft „padding“ (Auffüllung) Eigenschaft „position“ (Position) Klicken Sie auf einen Wert und geben Sie den neuen Wert ein. Sollen alle vier Werte gleich sein, können Sie diese gleichzeitig ändern. Dazu klicken Sie zuerst auf das Verbindungssymbol in der Mitte ( ) und legen dann einen der Werte fest. Sie können jederzeit einen der Werte deaktivieren ( ) oder löschen ( ), z. B.
Im Beispiel unten wurde die Rahmenfarbe auf Schwarz gesetzt und dann für den oberen Rahmen in Rot geändert. 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.
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.
Nach oben Anzeigen, welche Seitenelemente mit einem CSS-Selektor verknüpft sind (13.1) Meist ist ein einzelner CSS-Selektor mit mehreren Seitenelementen verknüpft. Beispielsweise kann Text im Hauptinhalt einer Seite, in der Kopfzeile oder in der Fußzeile jeweils mit demselben CSS-Selektor verknüpft sein. Wenn Sie die Eigenschaften des CSS-Selektors bearbeiten, sind alle Elemente, die mit dem Selektor verknüpft sind, betroffen, einschließlich der Elemente, die Sie vielleicht gar nicht ändern wollen.
Entwurf nicht zutreffend nicht zutreffend Live AN (Schaltfläche wird gedrückt) Nein AUS Ja Deaktivieren der Live-Hervorhebung Die Live-Hervorhebung ist standardmäßig aktiviert. Um die Live-Hervorhebung zu deaktivieren, klicken Sie auf die Live-Ansicht-Optionen in der Dokumentsymbolleiste und wählen „Live-Hervorhebung deaktivieren“. Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.
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.
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.
Wenn Sie die Regel in einem Stylesheet ablegen möchten, das bereits mit dem Dokument verknüpft ist, wählen Sie das entsprechende Stylesheet aus. Wenn Sie ein externes Stylesheet erstellen möchten, wählen Sie „Neue Stylesheet-Datei“. Wenn Sie den Stil in das aktuelle Dokument einbetten möchten, wählen Sie „Nur dieses Dokument“. 4. Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Stiloptionen aus, die Sie für die neue CSS-Regel festlegen möchten.
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.
Text-decoration Formatiert den Text unterstrichen, überstrichen oder durchgestrichen bzw. als blinkenden Text. Die Standardeinstellung für normalen Text ist „none“. Die Standardeinstellung für Hyperlinks ist „underline“. Wenn Sie für Hyperlinks die Einstellung „none“ wählen, können Sie die Unterstreichung von Hyperlinks entfernen, indem Sie eine spezielle Klasse definieren. Die Eigenschaft „text-decoration“ wird von beiden Browsern unterstützt.
durchführen, wenn Sie die feste Position gewählt haben. Dieses Attribut wird von Internet Explorer und Mozilla Firefox unterstützt. Background-position (X) und Background-position (Y) Legen die Anfangsposition des Hintergrunds in Relation zum Element fest. Diese Einstellungen können verwendet werden, um ein Hintergrundbild auf der Seite vertikal (Y) und horizontal (X) zu zentrieren.
4. Nachdem Sie die gewünschten Optionen ausgewählt haben, klicken Sie links im Bedienfeld auf eine andere CSS-Kategorie, um weitere Stileigenschaften festzulegen, oder klicken Sie auf „OK“. Nach oben CSS-Boxeigenschaften für CSS-Stile definieren Über die Kategorie „Box“ des Dialogfelds „CSS-Regel-Definition“ können Sie Einstellungen für Tags und Eigenschaften definieren, die sich auf die Anordnung der Elemente auf der Seite auswirken.
2. Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine vorhandene Eigenschaft. 3. Wählen Sie im Dialogfeld „CSS-Regel-Definition“ die Kategorie „Rahmen“ aus und legen Sie die folgenden Stileigenschaften fest. (Wenn eine Eigenschaft für den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.) Typ Bestimmt das Aussehen des Rahmens. Wie der Rahmen tatsächlich dargestellt wird, hängt jedoch vom jeweiligen Browser ab.
Positionierungseigenschaften für CSS-Stile definieren Die Positionierungs-Stileigenschaften legen fest, wie der mit dem ausgewählten CSS-Stil formatierte Inhalt auf der Seite positioniert wird. 1. Öffnen Sie das Bedienfeld „CSS-Stile“ (Umschalt+F11), sofern es noch nicht geöffnet ist. 2. Doppelklicken Sie im oberen Bereich des Bedienfelds „CSS-Stile“ auf eine vorhandene Regel bzw. auf eine vorhandene Eigenschaft. 3.
Als Maßeinheit für Position und Größe wird standardmäßig die Einheit Pixel (px) verwendet. Sie können aber auch die folgenden Maßeinheiten verwenden: Pica (pc), Punkt (pt), Zoll (in), mm, cm, em, ex oder % (Prozentsatz vom Wert des übergeordneten Elements). Zwischen der Abkürzung der Maßeinheit und dem Wert darf kein Leerzeichen stehen: Eine korrekte Eingabe ist zum Beispiel 3 mm. Clip Definiert den sichtbaren Teil des Inhalts.
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie 276
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.
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.
können.
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.
betreffenden Regeln aus und ziehen sie an den gewünschten Ort. Sie können mehrere Regeln auf einmal verschieben, indem Sie bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf mehrere Regeln klicken. Nach oben Mehrere Regeln zum Verschieben auswählen Klicken Sie im Bedienfeld „CSS-Stile“ bei gedrückter Strg-Taste (Windows) bzw. bei gedrückter Befehlstaste (Macintosh) auf die gewünschten Regeln.
Inline-CSS einer CSS-Regel hinzufügen Inline-Stile sind keine empfohlenen Best Practices. Um das CSS ordentlicher und übersichtlicher zu gestalten, können Sie Inline-Stile in 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.
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.
CSS-Stylesheets bearbeiten Ein CSS-Stylesheet kann eine oder mehrere Regeln enthalten. Sie können eine einzelne Regel in einem CSS-Stylesheet über das Bedienfeld „CSS-Stile“ bearbeiten oder das CSS-Stylesheet auch direkt bearbeiten. 1. Wählen Sie im Bedienfeld „CSS-Stile“ („Fenster“ > „CSS-Stile“) den Modus „Alle“ aus. 2. Doppelklicken Sie im Fensterbereich „Alle Regeln“ auf den Namen des gewünschten Stylesheets. 3. Ändern Sie das Stylesheet wie gewünscht im Dokumentfenster und speichern Sie es.
CSS-Code formatieren 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.
Verwandte Hilfethemen Rechtliche Hinweise | Online-Datenschutzrichtlinie 286
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.
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).
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
aus. 3. Markieren Sie bei jedem Browser, der in die Überprüfung einbezogen werden soll, das zugehörige Kontrollkästchen. 4. Wählen Sie für jeden ausgewählten Browser eine Mindestversion für die Überprüfung aus dem entsprechenden Popupmenü. Um beispielsweise festzustellen, ob Probleme mit der CSS-Wiedergabe im Internet Explorer 5.0 (oder höher) und im Netscape Navigator 7.
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.
Arbeiten mit div-Tags div-Tags einfügen und bearbeiten CSS-Layout-Blöcke AP-Elemente verwenden Hinweis: Ab Dreamweaver CC wurde das Bedienfeld „CSS-Stile“ durch den CSS Designer ersetzt. Weitere Informationen finden Sie unter „CSS Designer“ . (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.
Klicken Sie in der Kategorie „Layout“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Div-Tag einfügen“ . 3. Wählen Sie eine der folgenden Optionen: Einfügen Ermöglicht die Auswahl der Position für das div-Tag sowie des Tag-Namens, sofern es sich nicht um ein neues Tag handelt. Klasse Zeigt den Klassenstil an, der dem Tag derzeit zugewiesen ist. Wenn ein Stylesheet angefügt wurde, werden die darin definierten Klassen in der Liste angezeigt.
2. Wählen Sie ggf. „Fenster“ > „CSS-Stile“ aus, um das Bedienfeld „CSS-Stile“ zu öffnen. Die auf das div-Tag angewandten Regeln werden im Bedienfeld angezeigt. 3. Bearbeiten Sie die Regeln nach Bedarf. Einfügemarke in einen Div-Tag setzen, um Inhalt hinzuzufügen Klicken Sie auf eine beliebige Stelle innerhalb des Div-Tags. Platzhaltertext in einem Div-Tag ändern Markieren Sie den Text und überschreiben Sie ihn oder drücken Sie die Entf-Taste.
Hinweis: Damit CSS-Layoutblöcke visuell gerendert werden können, dürfen Sie keine Inline-Elemente (d. h. Elemente, deren Code in einer Textzeile enthalten ist) und auch keine einfachen Blockelemente (z. B. Absätze) enthalten. Dreamweaver bietet eine Auswahl an visuellen Hilfsmitteln zum Anzeigen von CSS-Layoutblöcken. Sie können beim Entwerfen z. B. Konturen, Hintergründe oder das Box-Modell für CSS-Layout-Blöcke aktivieren.
1. Erstellen Sie ein externes CSS-Stylesheet, indem Sie „Datei“ > „Neu“, in der Spalte „Kategorie“ die Option „Einfache Seite“ und in der Spalte „Einfache Seite“ die Option „CSS“ auswählen und auf „Erstellen“ klicken. 2. Erstellen Sie in dem neuen Stylesheet Regeln, die das display:block-Attribut den Seitenelementen zuweisen, die als CSS-Layout-Blöcke angezeigt werden sollen.
(standardmäßig „apDiv1“ für das erste div-Tag, „apDIv2“ für das zweite div-Tag usw.). Sie können das APDiv-Tag später im Bedienfeld „AP-Elemente“ oder im Eigenschafteninspektor nach Bedarf umbenennen. Dreamweaver verwendet ferner eingebettetes CSS im head-Bereich des Dokuments, um das AP-Div-Tag zu positionieren und seine genauen Abmessungen zu bestimmen.
Setzen Sie die Einfügemarke in das Dokumentfenster und wählen Sie dann „Einfügen“ > „Layout-Objekte“ > „AP Div“ aus. Hinweis: Hierbei wird das AP-Div-Tag an der Stelle eingefügt, an der Sie im Dokumentfenster geklickt haben. Die visuelle Darstellung des AP-Div-Tags hat damit Auswirkungen auf andere, es umgebende Seitenelemente (wie z. B. Text). Einfügemarke in ein AP-Div-Tag setzen Klicken Sie auf eine beliebige Stelle innerhalb des AP-Div-Tags.
Sichtbarkeit vom übergeordneten AP-Div-Tag erben. Wenn die Option „Verschachtelung“ aktiviert ist, werden AP-Div-Tags automatisch verschachtelt, wenn Sie ein AP-Div innerhalb eines anderen AP-Div zeichnen. Wenn Sie innerhalb oder über einem anderen AP-DivTag zeichnen, müssen Sie zudem die Option „Überlappungen verhindern“ deaktivieren. Verschachtelte AP-Div-Tags zeichnen 1.
Farbauswahl eine Farbe aus. Hintergrundbild Legt ein Standard-Hintergrundbild fest. Klicken Sie auf „Durchsuchen“, um die Bilddatei auf Ihrem Computer zu suchen. Verschachtelt: Verschachteln, wenn in einem AP-Div erstellt Legt fest, ob ein APDiv-Tag, das von einem Punkt innerhalb eines vorhandenen AP-Div-Tags aus gezeichnet wird, als verschachteltes AP-Div-Tag gilt. Halten Sie die Alt-Taste (Windows) bzw.
Z-Index Legt den Z-Index oder die Stapelreihenfolge des AP-Elements fest. AP-Elemente mit einem höheren Zahlenwert werden in Browsern vor AP-Elemente mit einem niedrigeren Wert angezeigt. Sie können positive und negative Werte eingeben. Statt durch Eingabe spezifischer Z-Index-Werte kann die Stapelreihenfolge von APElementen auch einfacher über das Bedienfeld „AP-Elemente“ geändert werden. Sichtb. Legt fest, ob das AP-Element anfänglich sichtbar ist oder nicht.
Wenn zwei oder mehr AP-Elemente ausgewählt werden, zeigt der Eigenschafteninspektor die Textattribute und eine Teilauswahl der Eigenschaften für AP-Elemente an. So können Sie mehrere AP-Elemente auf einmal bearbeiten. Mehrere AP-Elemente auswählen Halten Sie die Umschalttaste gedrückt, während Sie die AP-Elemente auswählen. Eigenschaften für mehrere AP-Elemente anzeigen und festlegen 1. Mehrere AP-Elemente auswählen. 2.
Klicken Sie auf das Ordnersymbol, um eine Bilddatei zu suchen und auszuwählen. Hg-Farbe Legt eine Hintergrundfarbe für die AP-Elemente fest. Lassen Sie dieses Feld leer, wenn der Hintergrund transparent sein soll. 4. Wenn Sie in einem Textfeld einen Wert eingegeben haben, drücken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Mac), um den Wert zu übernehmen.
Mehrere AP-Elemente auswählen Führen Sie einen der folgenden Schritte aus: Klicken Sie im Bedienfeld „AP-Elemente“ (Fenster > AP-Elemente) bei gedrückter Umschalttaste auf zwei oder mehr AP-Elementnamen. Klicken Sie im Dokumentfenster bei gedrückter Umschalttaste in zwei oder mehr APElemente oder klicken Sie auf die Rahmen der AP-Elemente.
manuell ein- oder ausblenden, um festzustellen, wie die Seite unter verschiedenen Bedingungen aussieht. Hinweis: Das aktuell ausgewählte AP-Element ist immer sichtbar und wird im Vordergrund angezeigt, solange es ausgewählt ist. Sichtbarkeit von AP-Elementen ändern 1. Öffnen Sie das Bedienfeld „AP-Elemente“ mit dem Menübefehl „Fenster“ > „APElemente“. 2. Klicken Sie in die Spalte mit dem Augensymbol, um die Sichtbarkeit eines AP-Elements zu ändern.
Das Ändern der Größe wirkt sich auf die Breite und Höhe eines AP-Elements aus. Dies hat jedoch keinen Einfluss darauf, wie viel vom Inhalt des AP-Elements sichtbar ist. Den sichtbaren Bereich eines AP-Elements können Sie in den Voreinstellungen festlegen. Größe mehrerer AP-Elemente gleichzeitig ändern 1. Wählen Sie in der Entwurfsansicht zwei oder mehr AP-Elemente aus. 2. Führen Sie einen der folgenden Schritte aus: Wählen Sie „Modifizieren“ > „Anordnen“ > „Auf gleiche Breite einstellen“ bzw.
Einige Webdesigner nutzen AP-Elemente bei der Layouterstellung als Ersatz für Tabellen. Mit Dreamweaver kann ein Layout aus AP-Elementen erstellt und anschließend auf Wunsch in Tabellen umgewandelt werden. Das Konvertieren von AP-Elementen in Tabellen ist beispielsweise erforderlich, wenn Sie ältere Browser (vor Version 4.0) unterstützen möchten. Grundsätzlich wird jedoch nachdrücklich davon abgeraten, AP-Elemente in Tabellen umzuwandeln.
1. Wählen Sie „Modifizieren“ > „Konvertieren“ > „Tabellen in AP-Divs“ aus. 2. Legen Sie die folgenden Optionen fest und klicken Sie auf „OK“. AP-Elementüberlappungen verhindern Beschränkt die Position der AP-Elemente, sodass sie sich nicht überlappen, wenn Sie AP-Elemente erstellen, verschieben, vergrößern oder verkleinern. Bedienfeld „AP-Elemente“ einblenden Zeigt das Bedienfeld „AP-Elemente“ an.
Anwenden von Verläufen auf den Hintergrund Verläufe in Webbrowsern rendern Hintergrundbilder und Verläufe austauschen Mithilfe des Bedienfelds „CSS Designer“ können sie Verläufe auf den Hintergrund der Website anwenden. Die Eigenschaft „gradient“ ist in der Hintergrundkategorie verfügbar. Eigenschaft „gradient“ Klicken Sie auf das Symbol neben der Eigenschaft „gradient“, um das Dialogfeld für die Definition von Farbverläufen zu öffnen.
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.
aktiviert sind. Denn standardmäßig aktualisiert Dreamweaver nur Webkit- und Dreamweaver-Live-Ansicht-Code, wenn Sie Verläufe verwenden oder ändern. Das bedeutet, die anderen herstellerspezifischen Syntaxen in Ihrem Code werden dann nicht aktualisiert. Nach oben Hintergrundbilder und Verläufe austauschen Sie können die Reihenfolge der Hintergrundbilder und Verläufe (in der sie im Code erscheinen) mit nur einem Mausklick ändern. Klicken Sie im CSS Designer neben der Eigenschaft url oder gradient auf .
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.
Verzögerung Die Zeit (in Sekunden oder Millisekunden), bevor der Übergangseffekt beginnt. 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“.
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.
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.
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.
1 2 3 4 5 6 7 8 .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.
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.
Stil bearbeiten Öffnet ein Dialogfeld, in dem Sie die Stile im aktuellen Dokument oder in einem externen Stylesheet bearbeiten können. CSS-Regel löschen Entfernt die ausgewählte Regel oder Eigenschaft aus dem Bedienfeld „CSS-Stile“ und entfernt die Formatierung von allen Elementen, auf die sie angewendet wurde. Klassen- oder Kennungen-Eigenschaften, auf die der Stil verweist, werden mit dieser Option jedoch nicht entfernt.
Seiteninhalt und Elemente 320
Festlegen von Seiteneigenschaften CSS-Eigenschaften für Seitenschrift, Hintergrundfarbe und Hintergrundbild festlegen HTML-Seiteneigenschaften festlegen Für jede Seite, die Sie in Dreamweaver erstellen, können Sie im Dialogfeld „Seiteneigenschaften“ („Modifizieren“ > „Seiteneigenschaften“) Layoutund Formatierungseigenschaften definieren.
Wählen Sie „repeat-x“ aus, um das Bild horizontal zu wiederholen. Wählen Sie „repeat-y“ aus, um das Bild vertikal zu wiederholen. „Linker Rand“ und „Rechter Rand“ Definieren Sie die Größe des linken und des rechten Seitenrands. „Oberer Rand“ und „Unterer Rand“ Definieren Sie die Größe der oberen und des unteren Seitenrands.
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.
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.
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“.
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.
Grundlegendes zur Dokumentkodierung Die Dokumentkodierung bestimmt den Zeichensatz, der in einem Dokument verwendet werden soll. Die Dokumentkodierung wird in einem metaTag im head-Abschnitt der Datei angegeben. Dadurch erkennen der Browser und Dreamweaver, wie das Dokument dekodiert werden soll und welche Schriften für die Anzeige des dekodierten Textes zu verwenden sind.
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.
Markierungssymbole für unsichtbare Elemente ein- oder ausblenden Nach oben Wählen Sie „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“. Hinweis: Das Layout einer Seite kann sich durch das Einblenden von unsichtbaren Elementen geringfügig ändern, da andere Elemente möglicherweise um ein paar Pixel verschoben werden. Um das Layout präzise darzustellen, sollten Sie die unsichtbaren Elemente ausblenden.
Rechtliche Hinweise | Online-Datenschutzrichtlinie 330
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.
Rechtliche Hinweise | Online-Datenschutzrichtlinie 332
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
Verwandte Hilfethemen Überblick über die Statusleiste Rechtliche Hinweise | Online-Datenschutzrichtlinie 334
Festlegen der Voreinstellungen für Downloadzeit und -größe Bei der Berechnung der Größe wird von Dreamweaver der gesamte Inhalt der Seite berücksichtigt, einschließlich aller verknüpften Objekte, wie beispielsweise Bilder und Plug-Ins. Dreamweaver berechnet die geschätzte Downloadzeit anhand der Verbindungsgeschwindigkeit, die Sie in den Voreinstellungen für die Statusleiste angegeben haben. Die tatsächliche Downloadzeit kann jedoch variieren und richtet sich nach den allgemeinen Internetbedingungen.
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 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.
Befehl+V (Mac) Inhalte einfügen Strg+Umschalt+V (Windows) Befehl+Umschalt+V (Mac) Nach oben Sonderzeichen einfügen Einige Sonderzeichen werden in HTML durch einen Namen oder eine Zahl dargestellt, die als Entität bezeichnet wird. HTML enthält Entitätsnamen für Zeichen wie beispielsweise das Copyright-Symbol (©), das kaufmännische Und (Ampersand) (&) und das Symbol für eingetragene Marken (®). Jede Entität hat sowohl einen Namen (z. B. —) als auch ein numerisches Äquivalent (z. B.
Voreinstellung für geschützte Leerzeichen festlegen 1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac). 2. Aktivieren Sie in der Kategorie „Allgemein“ die Option „Mehrere aufeinanderfolgende Leerzeichen zulassen“. Nach oben Absatzabstände hinzufügen Dreamweaver verhält sich ähnlich wie viele Textverarbeitungsprogramme: Sie drücken die Eingabetaste (Windows) oder die Return-Taste (Mac), um einen neuen Absatz zu erzeugen.
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 (Mac), um ein weiteres Listenelement zu erstellen. 3. Drücken Sie zweimal die Eingabetaste (Windows) bzw. Return (Mac), um die Liste abzuschließen. Liste aus bereits vorhandenem Text erstellen 1. Wählen Sie die Absätze aus, die in eine Liste umgewandelt werden sollen. 2.
2. Wählen Sie „Formatieren“ > „Liste“ > „Eigenschaften“ aus. 3. Wählen Sie unter „Listenelement“ die gewünschten Optionen: Neuer Stil Legt einen Stil für das ausgewählte Listenelement fest. Die Stile im Popupmenü „Neuer Stil“ richten sich nach der Art der Liste, die im Popupmenü „Listentyp“ angezeigt wird. Wenn beispielsweise im Popupmenü „Listentyp“ die Option „Aufzählungsliste“ angezeigt wird, stehen im Popupmenü „Neuer Stil“ nur Optionen für Aufzählungslisten zur Auswahl.
Sie können mit dieser Option zwar nach bestimmten Tags suchen, aber die Option „Spezifisches Tag“ ist hierfür besser geeignet. Text Dient zur Suche nach bestimmten Textzeichenfolgen im Dokumenttext. Dabei wird HTML-Code ignoriert, der die Zeichenfolge unterbricht. Bei der Suche nach der schwarze Hund würden also die beiden folgenden Textstellen gefunden: der schwarze Hund und der schwarze Hund.
„Weitersuchen“ oder „Alle suchen“. Weitersuchen Springt immer zur nächsten Stelle des gesuchten Textes oder Tags im aktuellen Dokument. Falls es keine weiteren Instanzen des Tags im aktuellen Dokument gibt, fährt Dreamweaver mit dem nächsten Dokument fort, falls Sie in mehreren Dokumenten suchen. Alle suchen Öffnet das Bedienfeld „Suchen“ in der Bedienfeldgruppe „Ergebnisse“.
einzuschränken: Mit Attribut Dient zum Auswählen eines Attributs, das im Tag enthalten sein muss. Sie können einen bestimmten Wert für das Attribut angeben oder [beliebiger Wert] wählen. Ohne Attribut Dient zum Auswählen eines Attributs, das nicht im Tag enthalten sein darf. Wählen Sie diese Option, wenn Sie beispielsweise alle IMG-Tags suchen möchten, die nicht das Attribut ALT enthalten. Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss.
Ohne Attribut Dient zum Auswählen eines Attributs, das nicht im Tag enthalten sein darf. Wählen Sie diese Option, wenn Sie beispielsweise alle IMG-Tags suchen möchten, die nicht das Attribut ALT enthalten. Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss. In heading 1 ist beispielsweise das font-Tag im b-Tag eingeschlossen. Ohne Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag nicht enthalten darf.
2. Klicken Sie auf die Kategorie „Kopieren/Einfügen“. 3. Legen Sie die folgenden Optionen wie gewünscht fest und klicken Sie auf „OK“: Nur Text Ermöglicht das Einfügen von unformatiertem Text. Wenn der Originaltext formatiert ist, werden alle Formatierungen einschließlich der Zeilenumbrüche und Absätze entfernt. Text mit Struktur Ermöglicht das Einfügen von Text unter Beibehaltung seiner Struktur. Einfache Formatierungen gehen jedoch verloren. Sie können z. B.
Arabischer und hebräischer Text Bidirektionaler Textfluss Tag-Editor Schreibrichtung und der Unicode-Bidi-Algorithmus in CSS-Regeln Tabelleneigenschaften div-Eigenschaften In der MENA-Edition (Middle East & North Africa, Naher Osten und Nordafrika) dieser Software stehen neue und verbesserte Funktionen für das Arbeiten mit Arabisch und Hebräisch zur Verfügung. Nach oben Bidirektionaler Textfluss Texte in Nahost-Sprachen werden vorwiegend von rechts nach links (RTL, Right To Left) geschrieben.
Optionen für die Sprache in CSS-Regeln Nach oben Tabelleneigenschaften Der Text in linksläufigen Tabellen ist rechtsbündig und die Spalten sind von rechts nach links angeordnet. Die Griffe für die Größenanpassung befinden sich auf der linken Seite. Beim Drücken der Tabulatortaste wird der Cursor nach links verschoben. Die Richtung einer Tabelle geben Sie im Bedienfeld „Eigenschaften“ an.
Bearbeiten in der Live-Ansicht Für die Live-Ansicht wird eine auf Chrome basierende RenderingEngine verwendet, damit Ihre Inhalte in Dreamweaver wie in Ihren bevorzugten Webbrowsern dargestellt werden. Während der Entwicklung können Sie in die Live-Ansicht umschalten, um schnell eine Vorschau Ihrer Seite anzuzeigen. Und damit Sie nicht ständig zwischen Code- und Entwurfsansicht umschalten müssen, können Sie HTML-Elemente auch direkt in der Live-Ansicht bearbeiten.
Hinweis: In der Live-Ansicht sind im Hauptmenü nur die Optionen verfügbar, die auf das ausgewählte Element angewendet werden können. Nicht anwendbare Optionen werden ausgegraut, wenn das Element ausgewählt wird.
Um ein HTML-Element von einer Klasse oder ID zu lösen, klicken Sie neben der Klasse oder ID auf das „x“. Um die Klasse oder die ID zu ändern, die mit dem HTML-Element verknüpft ist, klicken Sie in das Feld. Eine Liste der verfügbaren Klassen und IDs wird angezeigt. Klicken Sie auf die benötigte Option. Um eine Klasse oder ID hinzuzufügen und sie auf das Objekt anzuwenden, klicken Sie auf „+“ und geben den Namen ein. Um die Änderungen zu speichern, klicken Sie auf „+“ oder drücken die Eingabetaste.
Im Live-Ansicht-Eigenschafteninspektor können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. eines eingefügten Objekts oder von Text, anzeigen und ändern. Der Inhalt des LiveAnsicht-Eigenschafteninspektors hängt vom ausgewählten Element ab. Hinweis: Der Live-Ansicht-Eigenschafteninspektor ist für Seiten mit fließendem Raster nicht verfügbar.
Schnellansicht-Eigenschafteninspektor zum Bearbeiten von Attributen Um die Attribute zu bearbeiten, klicken Sie im Schnellansicht-Eigenschafteninspektor auf das Stapelsymbol. Sie können die Bildquelle ändern sowie andere Attribute wie „title“ oder „alt“ und die Änderungen werden sofort übernommen. Entsprechend können Sie auch die Breite und Höhe des Bildes in der LiveAnsicht anpassen.
Ergebnis, je nach Position der Einfügemarke vor dem Drücken der Eingabetaste, variieren. Die Änderungen ähneln dem, was geschieht, wenn Sie während der Bearbeitung von Text in der Entwurfsansicht die Eingabetaste drücken. Ein orangefarbener Rahmen um das Textelement zeigt an, dass der Bearbeitungsmodus aktiv ist. Die Einfügemarke befindet sich auf der Position, auf der sie sich beim Doppelklicken befand. Um den gesamten Text im Textelement auszuwählen, klicken Sie dreimal auf das Textelement.
Seiten Seiten mit fließendem Raster in der Live-Ansicht ohne Raster Text, der Entitäten enthält Text auszeichnen Sie können die Formatierung von Text und Hyperlink-Text jetzt direkt in der Live-Ansicht ändern. Um die Textformatierungsoptionen anzuzeigen, wählen Sie ein Wort oder einen Ausdruck aus. Direkt über dem ausgewählten Text wird der Schnellansicht-Eigenschafteninspektor mit Formatierungsoptionen eingeblendet.
Live-Hilfslinien über und unter dem Element Links/rechts. Die Hilfslinie wird beim Zeigen auf Inline-Tags wie z. B. oder eingeblendet oder beim Zeigen auf Tags, für die die Eigenschaft „float“ aktiviert wurde. Live-Hilfslinien rechts und links vom Element Wenn Sie kurz warten, bevor Sie das Element ablegen, wird das DOM-Symbol () angezeigt.
Das DOM-Symbol unterstützt Sie beim präzisen Einfügen von Objekten Um Elemente direkt in der Live-Ansicht einzufügen, führen Sie die folgenden Schritte aus: 1. Wechseln Sie in die Live-Ansicht. 2. Klicken Sie im Bedienfeld „Einfügen“ auf das erforderliche Element und ziehen Sie es in das Dokument. Sie können auch einfach auf das gewünschte Element im Bedienfeld „Einfügen“ klicken.
Seitenelemente durchlaufen Mithilfe der Nach-oben- und Nach-unten-Taste können Sie Seitenelemente in der Live-Ansicht durchlaufen. Die Elemente werden dabei in der Reihenfolge der DOM-Struktur des Dokuments angezeigt. Durch die Tastaturnavigation in der Live-Ansicht lassen sich verschachtelte und umschlossenen Elemente leichter aufrufen. Wenn Sie ein Element mithilfe der Nach-oben- oder Nach-unten-Taste auswählen, wird die Elementanzeige für dieses Element geöffnet.
Nach oben Bearbeitung in der Live-Ansicht deaktivieren Wenn Sie die Elementanzeige und den SchnellansichtEigenschafteninspektor in der Live-Ansicht nicht verwenden möchten, können Sie diese Bearbeitungsfunktionen deaktivieren. Tastaturbefehle: (Windows) Strg+Alt+H (Mac) Befehl+Ctrl+H 1. Wechseln Sie zur Live-Ansicht und klicken Sie auf „Live-Ansicht-Optionen“ ( ). 2. Wählen Sie „Live-Ansicht ausblenden“.
DOM-Bedienfeld Das DOM-Bedienfeld enthält eine interaktive HTML-Baumstruktur der statischen und dynamischen Inhalte. Mithilfe dieser Ansicht können Sie Elemente in der Live-Ansicht ihrem HTML-Markup und den im CSS Designer angewendeten Selektoren visuell zuordnen. Sie können Änderungen an der HTML-Struktur auch im DOM-Bedienfeld vornehmen. Diese werden unmittelbar in der Live-Ansicht umgesetzt.
Sie können das DOM-Bedienfeld verschieben und es an einer für Sie praktischen Position auf der Benutzeroberfläche platzieren. Sie können das Bedienfeld auch zusammen mit anderen Bedienfeldern andocken. Nach oben Elementschnellansicht verwenden 1. Öffnen Sie das gewünschte Dokument und öffnen Sie anschließend das DOMBedienfeld, indem Sie „Fenster“ > „DOM“ wählen. 2. Wechseln Sie zur Live-Ansicht und klicken Sie auf das Element, das Sie überprüfen oder bearbeiten möchten.
wählen „Kopieren“. Wenn Sie ein Element mit untergeordneten Elementen kopiert haben, werden die untergeordneten Elemente ebenfalls kopiert. Wiederherstellen: Strg+Y (Windows)/Befehl+Y (Mac) Um ein Element oder einen Knoten einzufügen, klicken Sie auf das Element oder den Knoten, unter dem die kopierten Elemente eingeordnet werden sollen. Klicken Sie dann mit der rechten Maustaste auf das Element oder den Knoten und klicken Sie auf „Einfügen“.
wird B. Referenzelement C. Verschobenes Element Wichtig: Wenn die Seite JavaScript enthält, wird das Kontextmenü im DOM-Bedienfeld für einige Zeit angezeigt und ist danach nicht mehr verfügbar. Um das Kontextmenü zu verwenden, blenden Sie die LiveAnsichten aus („Live-Ansicht-Optionen“ > „Live-Ansicht ausblenden“) und deaktivieren Sie dann JavaScript („Live-Ansicht-Optionen“ > „JavaScript deaktivieren“). Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.
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.
3. Nehmen Sie mithilfe der verschiedenen Optionen des CSS-Eigenschafteninspektors die entsprechenden Änderungen an der Regel vor. Zielregel Die Regel, die Sie im CSS-Eigenschafteninspektor bearbeiten. Wenn ein vorhandener Stil auf den Text angewendet wird und Sie in den Text auf der Seite klicken, wird die Regel für das Textformat angezeigt. Über das Popupmenü „Zielregel“ können Sie darüber hinaus neue CSS-Regeln oder neue Inline-Stile erstellen oder vorhandene Klassen auf ausgewählten Text anwenden.
Führen Sie im Menü „Stil“ einen der folgenden Schritte aus: Wählen Sie den Stil aus, den Sie auf die Auswahl anwenden möchten. Wählen Sie „Kein“, um den derzeit ausgewählten Stil zu entfernen. Wählen Sie „Umbenennen“ aus, um den Stil umzubenennen. Wählen Sie „Stylesheet anfügen“ aus, um das Dialogfeld zu öffnen, in dem Sie der Seite ein externes Stylesheet zuordnen können.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Rechtschreibprüfung für Webseiten durchführen Mit dem Befehl „Rechtschreibprüfung“ können Sie die Rechtschreibung im aktuellen Dokument prüfen. Bei dem Dokument muss es sich um eine Webseite handeln (z. B. um eine HTML-, ColdFusion- oder PHP-Seite). Bei Textdateien oder XML-Dateien kann der Befehl „Rechtschreibprüfung“ nicht ausgeführt werden. Zudem werden bei diesem Befehl HTML-Tags und Attributwerte ignoriert.
Tabellendaten importieren Sie können Tabellendaten in ein Dokument importieren, indem Sie die entsprechenden Dateien (z. B. Microsoft Excel-Dateien oder Datenbankdateien) als Textdateien mit Trennzeichen speichern. Sie können aus Microsoft Word HTML-Dokumenten Tabellendaten importieren und formatieren sowie Text importieren. Darüber hinaus können Sie Text aus Microsoft Excel-Dokumenten in ein Dreamweaver-Dokument einfügen, indem Sie den Inhalt der Excel-Datei in eine Webseite importieren. 1.
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.
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.
HTML-Formatierung verwenden Absätze formatieren Textfarbe ändern Text ausrichten Text einrücken Schriftstile anwenden Obwohl CSS als bevorzugte Methode für die Formatierung von Text eingesetzt werden sollte, können Sie in Dreamweaver Text weiterhin mit HTML formatieren. Nach oben Absätze formatieren Über das Popupmenü „Format“ im HTML-Eigenschafteninspektor oder über „Formatieren“ > „Absatzformat“ können Sie die Standard-Tags für Absätze und Überschriften anwenden. 1.
Absatzes. Nach oben Text einrücken Mit dem Befehl „Einzug“ wird ein Textabsatz mit dem HTML-Tag blockquote versehen, sodass er von beiden Seitenrändern her eingerückt wird. 1. Setzen Sie die Einfügemarke in den einzurückenden Absatz. 2. Wählen Sie „Formatieren“ > „Einzug“ oder „Negativeinzug“ aus bzw. wählen Sie im Kontextmenü „Liste“ > „Einzug“ oder „Negativeinzug“ aus. Hinweis: Sie können auch mehrere Einzüge auf einen Absatz anwenden.
Horizontale Linien verwenden Horizontale Linien erstellen Horizontale Linien ändern Horizontale Linien sind praktisch, um Informationen übersichtlicher auf Ihrer Webseite anzuordnen. Sie können Text und Objekte auf einer Seite mit einer oder mehreren Linien optisch voneinander trennen. Nach oben Horizontale Linien erstellen 1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine horizontale Linie einfügen möchten. 2. Wählen Sie „Einfügen“ > „HTML“ > „Horizontale Linie“.
Schriftkombinationen ändern Schriftkombinationen ändern Der Schriftliste eine neue Kombination hinzufügen Mit dem Befehl „Schriftliste bearbeiten“ können Sie die Schriftkombinationen festlegen, die im Eigenschafteninspektor und unter „Formatieren“ > „Schrift“ angezeigt werden. Über Schriftkombinationen bestimmen Sie, wie der Text einer Webseite in einem Browser dargestellt wird. In Browsern wird der Text in der ersten Schrift der Kombination angezeigt, die auf dem jeweiligen Computer installiert ist.
Aufnehmen von Edge Web Fonts in die Schriftenliste Sie können sowohl Adobe Edge Web Fonts 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.
1. Wählen Sie „Modifizieren“ > „Schriften verwalten“. 2. Klicken Sie im angezeigten Dialogfeld auf die Registerkarte „Lokale Webschriften“. 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.
Datumsangaben einfügen Dreamweaver stellt ein praktisches Datumsobjekt zur Verfügung, mit dem das aktuelle Datum in Ihrem bevorzugten Format (mit oder ohne Uhrzeit) eingefügt werden kann. Darüber hinaus haben Sie die Möglichkeit, das Datum jedes Mal zu aktualisieren, wenn Sie die Datei speichern. Hinweis: Das Datum und die Uhrzeit, die im Dialogfeld „Datum einfügen“ angezeigt werden, sind weder aktuell, noch entsprechen sie dem Datum und der Uhrzeit, die Besucher Ihrer Website sehen.
Verwenden von Elementen Überblick über das Bedienfeld „Elemente“ Elemente in ein Dokument einfügen Anwendung von Farbe auf Text unter Verwendung des Bedienfelds „Elemente“ Bildern oder Text URLs zuordnen Elemente auswählen und bearbeiten Elemente auf anderen Sites wiederverwenden 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.
In beiden Listen sind Elemente einer der folgenden Kategorien zugeordnet: Bilder Farben Bilddateien im GIF-, JPEG- oder PNG-Format. Farben, die in Dokumenten und Stylesheets verwendet werden, darunter Text-, Hintergrund- und Hyperlinkfarben. URLs Externe Hyperlinks in den Dokumenten der aktuellen Site, einschließlich Hyperlinks für FTP, Gopher, HTTP, HTTPS, JavaScript, E-Mail (mailto) und lokale Dateien (file://).
Die Erstellung der Siteliste kann einen Moment dauern, da in Dreamweaver zuerst der Site-Cache gelesen werden muss. Bestimmte Änderungen werden nicht sofort im Bedienfeld „Elemente“ angezeigt. Beim Hinzufügen oder Entfernen eines Elements auf einer Site werden die Änderungen im Bedienfeld „Elemente“ beispielsweise erst angezeigt, wenn Sie die Siteliste aktualisieren, indem Sie auf die Schaltfläche „Siteliste aktualisieren“ klicken. Wenn Sie Elemente außerhalb von Dreamweaver hinzufügen oder entfernen, z. B.
c. Wählen Sie die gewünschte Farbe aus und klicken Sie auf „Anwenden“. 2. Führen Sie in der Live-Ansicht die folgenden Schritte aus: a. Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Farben“ aus. b. Führen Sie einen der folgenden Schritte aus: Klicken Sie mit der rechten Maustaste im Bedienfeld „Elemente“ auf die Farbe und klicken Sie auf „Farbwert kopieren“. Der Farbwert wird in Ihre Zwischenablage kopiert. Jetzt können Sie den Farbwert in CSS Designer kopieren (Strg+v, Befehlstaste+v).
die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt und klicken Sie auf ein ausgewähltes Element, um die Auswahl aufzuheben. Elemente bearbeiten Beim Bearbeiten eines Elements im Bedienfeld „Elemente“ ändert sich das Verhalten je nach Elementart. Bei einigen Elementen, z. B. Bildern, wird automatisch ein externer Editor geöffnet, wenn für die entsprechende Elementart ein Editor festgelegt wurde. Farben und URLs können nur in der Favoritenliste bearbeitet werden.
2. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) in der Siteliste oder Favoritenliste auf eines oder mehrere Elemente, wählen Sie „Zur Site kopieren“ und dann im Untermenü mit allen definierten Sites den Namen der Zielsite aus. Hinweis: In der Favoritenliste können Sie einen Favoritenordner und einzelne Elemente kopieren. Die Elemente werden in die entsprechenden Speicherorte auf der Zielsite kopiert.
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.
Elemente aus der Favoritenliste entfernen 1. Wählen Sie im oberen Bereich des Bedienfelds „Elemente“ die Option „Favoriten“ aus. 2. Wählen Sie in der Favoritenliste ein oder mehrere Elemente (oder einen Ordner) aus. . 3. Klicken Sie auf die Schaltfläche „Aus Favoriten entfernen“ Daraufhin werden die Elemente aus der Favoritenliste, jedoch nicht aus der Siteliste entfernt. Wenn Sie einen Favoritenordner löschen, werden der Ordner und sein gesamter Inhalt entfernt.
Einfügen und Bearbeiten von Bildern Es gibt viele verschiedene Arten von Grafikdateiformaten. Auf Webseiten werden jedoch im Allgemeinen nur drei Grafikdateiformate verwendet: GIF, JPEG und PNG. Die Formate GIF und JPEG werden am umfassendsten unterstützt und können in den meisten Browsern dargestellt werden. Mithilfe der Dreamweaver-Benutzeroberfläche können Sie Bilder ganz einfach einfügen und bearbeiten.
Wählen Sie „Einfügen“ > „Bild“. Ziehen Sie ein Bild aus dem Bedienfeld „Elemente“ („Fenster“ > „Elemente“) an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort. Ziehen Sie ein Bild aus dem Bedienfeld „Dateien“ an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort. Ziehen Sie ein Bild vom Desktop an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort. 2.
3. Stellen Sie die gewünschten Bildoptionen ein. B / H Legen die Breite und Höhe des Bildes in Pixel fest. Dreamweaver aktualisiert diese Felder automatisch und gibt darin die ursprünglichen Maße an, wenn Sie ein Bild in eine Seite einfügen. Wenn Sie für „B“ und „H“ Werte festlegen, die nicht der tatsächlichen Breite und Höhe des Bildes entsprechen, wird das Bild unter Umständen nicht korrekt im Browser angezeigt.
Größe und Form verbessert wird. Helligkeit und Kontrast Scharf stellen Ändert die Helligkeits- und Kontrasteinstellungen eines Bildes. Ändert die Bildschärfe. Eingabehilfen-Attribute für Bilder im Code bearbeiten Wenn Sie Eingabehilfen-Attribute für ein Bild eingefügt haben, können Sie diese Werte im HTML-Code bearbeiten. 1. Wählen Sie im Dokumentfenster ein Bild aus. 2. Führen Sie einen der folgenden Schritte aus: Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht.
3. Wenn Sie die Originalmaße eines in der Größe geänderten Elements wiederherstellen möchten, löschen Sie im Eigenschafteninspektor die Werte in den Feldern „B“ und „H“ oder klicken Sie auf die Schaltfläche „Größe zurücksetzen“. Ursprüngliche Größe eines Bildes wiederherstellen Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Größe zurücksetzen“. Neu auflösen der Bilder nach einer Größenänderung 1. Ändern Sie die Größe des Bildes, wie zuvor beschrieben. 2.
1. Führen Sie im Dokumentfenster einen der folgenden Schritte aus: Doppelklicken Sie auf den Bild-Platzhalter. Klicken Sie auf den Bild-Platzhalter, um ihn auszuwählen, und klicken Sie dann im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf das Ordnersymbol neben dem Textfeld „Quelle“. 2. Wählen Sie im Dialogfeld „Bildquelle“ das Bild aus, durch das Sie den Bild-Platzhalter ersetzen möchten, und klicken Sie dann auf „OK“.
Nach oben Bilder in Dreamweaver bearbeiten Sie können Bilder in Dreamweaver neu auflösen, zuschneiden, optimieren und scharf stellen. Darüber hinaus können Sie die Helligkeit und den Kontrast von Bildern ändern. Bildbearbeitungsfunktionen Dreamweaver enthält allgemeine Bildbearbeitungsfunktionen, mit denen Sie Bilder ändern können, ohne eine externe Bildbearbeitungsanwendung wie Fireworks oder Photoshop verwenden zu müssen.
Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt. 2. Bewegen Sie die Zuschneidegriffe, bis der Begrenzungsrahmen den Bereich des Bildes umrahmt, den Sie beibehalten möchten. 3. Doppelklicken Sie in den Begrenzungsrahmen oder drücken Sie die Eingabetaste, um die Auswahl zuzuschneiden. 4. Ein Dialogfeld informiert Sie darüber, dass die zuzuschneidende Bilddatei auf der Festplatte geändert wird. Klicken Sie auf „OK“.
2. Ziehen Sie an den Schiebereglern für „Helligkeit“ und „Kontrast“, um die Einstellungen anzupassen. Die gültigen Werte liegen im Bereich von -100 bis 100. 3. Klicken Sie auf „OK“. Nach oben Rollover-Bilder erstellen Sie können Rollover-Bilder in eine Seite einfügen. Ein Rollover ist ein Bild, das sich im Browser ändert, wenn Sie den Mauszeiger darüber bewegen.
Während Sie in Dreamweaver arbeiten, können Sie ein ausgewähltes Bild in einem externen Bildeditor öffnen. Wenn Sie nach dem Speichern des Bildes zu Dreamweaver zurückkehren, sind alle vorgenommenen Änderungen im Dokumentfenster zu sehen. Sie können Fireworks als Ihren primären externen Bildeditor einrichten. Sie können auch bestimmen, welche Dateitypen ein Editor öffnen soll, und Sie können mehrere Bildeditoren auswählen.
In der Liste „Erweiterungen“ wird ein Textfeld angezeigt. 3. Geben Sie die Dateinamenerweiterung für den Dateityp ein, bei dem ein Editor gestartet werden soll. 4. Um einen externen Editor für den Dateityp anzugeben, klicken Sie auf die Schaltfläche „Hinzufügen (+)“ oberhalb der Liste „Editoren“. 5. Ein Dialogfeld wird eingeblendet, in dem Sie die Anwendung auswählen können, mit der dieser Bildtyp bearbeitet werden soll. 6.
Hinzufügen von Medienobjekten Medienobjekte einfügen und bearbeiten Externen Editor für Multimedia-Dateien starten Editor in Dreamweaver festlegen Design Notes mit Medienobjekten verwenden Shockwave-Filme einfügen Videos hinzufügen, die keine FLV-Videos sind Plug-Ins einfügen Fehlersuche in Plug-Ins ActiveX-Steuerelemente einfügen Java-Applets einfügen Medien über Verhalten steuern Medienobjekte über Parameter steuern Nach oben Medienobjekte einfügen und bearbeiten Neben SWF- und FLV-Dateien können Sie Q
Reihenfolgenposition festlegen, sollten Sie dies auch bei allen anderen Objekten tun. 5. Klicken Sie auf „OK“, um das Medienobjekt einzufügen. Hinweis: Wenn Sie auf „Abbrechen“ klicken, wird im Dokument ein Medienobjekt-Platzhalter angezeigt, der jedoch von Dreamweaver nicht mit Eingabehilfen-Tags oder -Attributen versehen wird. Zur Angabe einer Quelldatei, der Abmessungen und anderer Parameter und Attribute verwenden Sie den Eigenschafteninspektor des entsprechenden Objekts.
Dateitypen entfernen Wählen Sie den Dateityp in der Liste „Erweiterungen“ aus und klicken Sie auf die Schaltfläche mit dem Minuszeichen (-) über dieser Liste. Hinweis: Das Entfernen eines Dateityps kann nicht wieder rückgängig gemacht werden. Entfernen Sie einen Dateityp also nur, wenn Sie sich absolut sicher sind. Nach oben Design Notes mit Medienobjekten verwenden In Dreamweaver können Sie Medienobjekten genau wie anderen Objekten Design Notes hinzufügen.
Inhalte für Plug-Ins einfügen und Eigenschaften festlegen 1. Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den Inhalt einfügen möchten. Führen Sie anschließend einen der folgenden Schritte aus: Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Medien“ und wählen Sie im Menü das Symbol „Plug-In“ aus. Wählen Sie „Einfügen“ > „Medien“ > „Plug-In“. 2.
ActiveX-Steuerelemente einfügen Sie können ein ActiveX-Steuerelement in die Seite einfügen. ActiveX-Steuerelemente (früher OLE-Steuerelemente genannt) sind Komponenten, die wieder verwendet werden können. Sie sind mit einer Miniaturanwendung vergleichbar und funktionieren in etwa wie ein Browser-Plug-In. Diese Steuerelemente können in Internet Explorer mit Windows verwendet werden, nicht jedoch in Macintosh-Browsern.
2. Wählen Sie eine Datei aus, die ein Java-Applet enthält. Java-Applet-Eigenschaften Der Eigenschafteninspektor zeigt zunächst nur die am häufigsten verwendeten Attribute an. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen. Spry-QuickInfo Legt einen Namen fest, um das Applet bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein. B / H Legen die Breite und Höhe des Applets in Pixel fest.
Rechtliche Hinweise | Online-Datenschutzrichtlinie 403
Hinzufügen von Videos Videos in Webseiten einbetten (HTML5) FLV-Dateien einfügen Nach oben Videos in Webseiten einbetten (HTML5) HTML5 unterstützt Video- und Audio-Tags, über die Benutzer Video- und Audiodateien ohne externe Plug-Ins oder Player in einem Browser wiedergeben können. Dreamweaver unterstützt Codehinweise zum Hinzufügen von Video- und Audio-Tags. Die Videos, die Sie in die Webseite einbetten, werden in der Live-Ansicht in einer Vorschau dargestellt.
nicht die erforderliche Version, jedoch Flash Player ab Version 6.0 r65 verwendet, wird im Browser statt des alternativen Inhalts die ExpressInstallation für Flash Player angezeigt. Wenn der Benutzer die Express-Installation nicht ausführt, wird auf der Seite der alternative Inhalt angezeigt. Weitere Informationen zum Verwenden von Videodateien finden Sie im Video Technology Center unter www.adobe.com/go/flv_devcenter_de. FLV-Dateien einfügen 1. Wählen Sie „Einfügen“ > „Medien“ > „FLV“ aus. 2.
„Skin“ angezeigt. Breite Gibt die Breite der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit Dreamweaver die genaue Breite der FLV-Datei ermitteln kann. Wenn Dreamweaver die Breite nicht ermitteln kann, müssen Sie einen Wert eingeben. Höhe Gibt die Höhe der FLV-Datei in Pixel an. Klicken Sie auf die Schaltfläche „Größe erkennen“, damit Dreamweaver die genaue Höhe der FLV-Datei ermitteln kann. Wenn Dreamweaver die Höhe nicht ermitteln kann, müssen Sie einen Wert eingeben.
4. Klicken Sie erneut auf das Symbol mit dem Auge, um in die Ansicht der SWF- oder FLV-Datei zurückzukehren. Fehlerbehebung für FLV-Dateien In diesem Abschnitt werden einige der häufigsten Gründe für Probleme mit FLV-Dateien erörtert. Anzeigeprobleme aufgrund fehlender zugehöriger Dateien Der von Dreamweaver ab CS4 erzeugte Code benötigt neben der eigentlichen FLV-Datei vier abhängige Dateien: swfobject_modified.js expressInstall.swf FLVPlayer_Progressive.swf Skin-Datei (z. B. Clear_Skin_1.
Hinweis: Der Videotyp kann nicht mit dem Eigenschafteninspektor geändert werden (z. B. von „Progressiver Video-Download“ in „Streaming-Video“). Wenn Sie den Videotyp ändern möchten, löschen Sie die FLV-Komponente und fügen Sie dann über „Einfügen“ > „Medien“ > „FLV“ die geänderte Komponente wieder ein. FLV-Komponenten löschen Wählen Sie den Platzhalter für die FLV-Komponente im Dreamweaver-Dokumentfenster aus und drücken Sie die Entf-Taste.
Einfügen von HTML5-Videos Mit Dreamweaver können Sie HTML5-Videos in Webseiten einfügen. Das HTML5-Element für Videos bietet ein Standardverfahren, um Filme oder Videos in Webseiten einzubetten. Weitere Informationen zum HTML-Element für Videos finden Sie finden Sie im Artikel HTML5 Video auf der Webseite W3schools.com (auf Englisch). Einfügen von HTML5-Videos Video in der Browser-Vorschau testen Videotutorial Einfügen von HTML5-Videos in Dreamweaver Nach oben Einfügen von HTML5-Videos 1.
Poster: Legen Sie den Pfad des Bildes fest, das angezeigt werden soll, bis das Video vollständig heruntergeladen ist bzw. bis der Benutzer auf „Abspielen“ klickt. Die Werte für„Breite“ und „Höhe“ werden automatisch ausgefüllt, wenn Sie das Bild einfügen. Wiederholen: Aktivieren Sie diese Option, wenn das Video immer wieder abgespielt werden sollen, bis der Benutzer das Abspielen des Films abbricht. Stumm: Aktivieren Sie diese Option, wenn der Audioteil des Videos nicht abgespielt werden soll.
SWF-Dateien einfügen FLA-, SWF- und FLV-Dateitypen SWF-Dateien einfügen und in der Vorschau anzeigen FlashPaper-Dokumente einfügen Nach oben FLA-, SWF- und FLV-Dateitypen Vor dem Einfügen der mit Adobe Flash erstellten Inhalte mithilfe von Dreamweaver sollten Sie sich mit den folgenden Dateitypen vertraut machen. FLA-Datei (.fla) Dies ist die Quelldatei für alle Projekte. Sie wird im Flash-Authoring-Tool erstellt. Dieser Dateityp kann nur in Flash geöffnet werden (nicht in Dreamweaver oder in Browsern).
object-Code. Flash Player-Downloadinformationen bearbeiten Beim Einfügen einer SWF-Datei in eine Seite wird in Dreamweaver Code eingefügt, mit dem ermittelt wird, ob der Benutzer die korrekte Version von Flash Player verwendet. Wenn dies nicht der Fall ist, wird alternativer Inhalt angezeigt und der Benutzer aufgefordert, die neueste Version herunterzuladen. Sie können den alternativen Inhalt jederzeit ändern. Dieses Verfahren wird auch bei FLV-Dateien angewendet.
Wählen Sie die Option „window“ aus, damit der wMode-Parameter aus dem Code entfernt und die SWF-Datei über anderen DHTML-Elementen angezeigt wird. Abspielen Gibt den Film im Dokumentfenster wieder. Parameter Öffnet ein Dialogfeld, in dem Sie zusätzliche Parameter eingeben können, die an den Film übergeben werden sollen. Der Film muss für den Erhalt dieser zusätzlichen Parameter konfiguriert worden sein.
Web-Widgets hinzufügen Bei einem Web-Widget handelt es sich um eine Webseitenkomponente aus HTML-, CSS- und JavaScript-Code. Beispiele für Web-Widgets sind Akkordeons, Paletten mit Registerkarten und Kalender. Ihre eigene Auswahl von Web-Widgets in Dreamweaver können Sie mithilfe des Adobe Widget-Browsers festlegen. Der Adobe Widget-Browser ist eine grafische Benutzeroberfläche, über die Sie Widgets durchsuchen, konfigurieren und in einer Vorschau anzeigen können. 1. Wählen Sie „Einfügen“ > „Widget“. 2.
Audiomaterial hinzufügen Audiodateiformate Hyperlinks zu einer Audiodatei Audiodateien einbetten Nach oben Audiodateiformate Sie können Audiodateien in eine Webseite integrieren. Es gibt verschiedene Arten von Audiodateien und -formaten, z. B. .wav, .midi und .mp3.
Beim Einbetten von Audiodateien wird der Sound direkt in die Seite integriert. Die Audiodatei wird allerdings nur wiedergegeben, wenn Besucher der Website das entsprechende Plug-In für die Audiodatei installiert haben. Betten Sie Audiodateien ein, wenn Sie sie als Hintergrundmusik verwenden, die Lautstärke ändern bzw. die Darstellung auf der Seite oder den Anfang und das Ende der Audiodatei festlegen möchten.
Einfügen von HTML5-Audiodaten 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. Weitere Informationen zum HTML-Element für Audidaten finden Sie im Artikel HTML5 Audio auf der Webseite w3schools.com (auf Englisch). Einfügen von HTML5-Audiodaten Audiodaten in der Browser-Vorschau testen Nach oben Einfügen von HTML5-Audiodaten 1.
Das Bedienfeld „Eigenschaften“ für die HTML5-Audiodaten Nach oben 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.
Aufgaben automatisieren Aufgabenautomatisierung Bedienfeld „Verlauf“ verwenden Schritte wiederholen Schritte im Bedienfeld „Verlauf“ auf Objekte anwenden Schritte zwischen Dokumenten kopieren und einfügen Befehle aus Schritten der Verlaufsliste erstellen und verwenden Befehle aufzeichnen und speichern Nach oben Aufgabenautomatisierung Im Bedienfeld „Verlauf“ werden die beim Ausführen von Aufgaben ausgeführten Schritte aufgezeichnet.
Mehrere Schritte gleichzeitig rückgängig machen Ziehen Sie den Schieberegler zu einem Schritt oder klicken Sie entlang der Schiebereglerspur links neben einen Schritt. Der Schieberegler bewegt sich automatisch zu diesem Schritt und die dazwischen liegenden Schritte werden rückgängig gemacht.
Eine Abfolge von Schritten aus dem Bedienfeld „Verlauf“ können Sie auf jedes Objekt im Dokumentfenster anwenden. Wenn Sie mehrere Objekte auswählen und dann Schritte aus dem Bedienfeld „Verlauf“ auf diese Objekte anwenden, werden die Objekte als kombinierte Auswahl betrachtet und in Dreamweaver wird versucht, die Schritte auf diese kombinierte Auswahl anzuwenden. Mehrere Schritte können jedoch jeweils nur auf ein Objekt angewendet werden.
Hinweis: Die Schaltfläche „Schritte kopieren“ im Bedienfeld „Verlauf“ entspricht nicht dem Befehl „Kopieren“ im Menü „Bearbeiten“. Über „Bearbeiten“ > „Kopieren“ können Sie keine Schritte kopieren, obwohl Sie sie über „Bearbeiten“ > „Einfügen“ einfügen. Vorsicht beim Kopieren von Schritten, die den Befehl „Kopieren“ oder „Einfügen“ enthalten: Verwenden Sie „Schritte kopieren“ nicht, wenn einer der Schritte der Befehl „Kopieren“ ist. Diese Schritte lassen sich meist nicht problemlos einfügen.
(Macintosh). Der Mauszeiger ändert seine Form. Dies weist darauf hin, dass eine Aufzeichnung stattfindet. 2. Wenn die Aufzeichnung abgeschlossen ist, wählen Sie „Befehle“ > „Aufzeichnung stoppen“ aus oder drücken Sie Strg+Umschalt+X (Windows) bzw. Befehl+Umschalt+X (Macintosh). Aufgezeichnete Befehle wiederholen Wählen Sie „Befehle“ > „Aufgezeichneten Befehl abspielen“ aus. Aufgezeichnete Befehle speichern 1. Wählen Sie „Befehle“ > „Aufgezeichneten Befehl abspielen“ aus. 2.
Elemente und Bibliotheken Elemente Bibliothekselemente Nach oben Elemente Mithilfe von Adobe® Dreamweaver® können Sie die auf der Site gespeicherten Elemente, z. B. Bilder, Filme, Farben, Skripts und Hyperlinks, verwalten und in der Vorschau anzeigen. Sie können ein Element auch durch Ziehen direkt in einer Seite des aktuellen Dokuments einfügen. Sie können Elemente aus unterschiedlichen Quellen verwenden.
Verwandte Hilfethemen Rechtliche Hinweise | Online-Datenschutzrichtlinie 425
Verwenden von Bibliothekselementen Bibliothekselemente erstellen Bibliothekselemente in Dokumente einfügen Bibliothekselemente bearbeiten und Dokumente aktualisieren Markierung von Bibliothekselementen anpassen Eigenschaften von Bibliothekselementen bearbeiten Bibliothekselemente in einem Dokument bearbeitbar machen Verhalten in einem Bibliothekselement bearbeiten Nach oben Bibliothekselemente erstellen Bibliothekselemente sind Elemente, die auf einer Website wiederverwendet oder häufig aktualisiert werde
Bibliothekselemente bearbeiten und Dokumente aktualisieren Nach oben Wenn Sie ein Bibliothekselement bearbeiten, können Sie alle Dokumente aktualisieren, die dieses Element enthalten. Wenn Sie keine Aktualisierung durchführen möchten, bleiben die Dokumente mit dem Bibliothekselement verknüpft. Sie können sie dann später aktualisieren.
Fehlende oder gelöschte Bibliothekselemente neu erstellen 1. Wählen Sie in einem Ihrer Dokumente eine Instanz des Elements aus. 2. Klicken Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) auf die Schaltfläche „Neu erstellen“. Nach oben Markierung von Bibliothekselementen anpassen Über die Markierungsvoreinstellungen können Sie die Markierungsfarbe für Bibliothekselemente anpassen sowie die Markierung ein- oder ausblenden. Markierungsfarbe für Bibliothekselemente ändern 1.
4. Doppelklicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf die Aktion, die Sie ändern möchten. 5. Nehmen Sie im dann angezeigten Dialogfeld die gewünschten Änderungen vor und klicken Sie auf „OK“. aus. 6. Wählen Sie im Bedienfeld „Elemente“ die Kategorie „Bibliothek“ 7. Notieren Sie den genauen Namen (unter Berücksichtigung der Groß- und Kleinschreibung) des ursprünglichen Bibliothekselements, wählen Sie es aus und klicken Sie dann auf die Schaltfläche „Löschen“. 8.
Hyperlinks und Navigation 430
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.
verknüpfte Dokument bzw. Element identisch ist. Nur der Teil, der sich unterscheidet, wird angegeben. Angenommen, Sie haben eine Site mit folgender Struktur: Wenn Sie einen Hyperlink von „contents.html“ zu „hours.html“ (beide im gleichen Ordner) erstellen möchten, verwenden Sie den relativen Pfad „hours.html“. Wenn Sie einen Hyperlink von „contents.html“ zu „tips.html“ (im Unterordner „resources“) erstellen möchten, verwenden Sie den relativen Pfad „resources/tips.html“.
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
Nach oben Definieren von JavaScript-Verhalten für Hyperlinks Sie können für beliebige Hyperlinks in einem Dokument ein Verhalten definieren. Wenn Sie verknüpfte Elemente in ein Dokument einfügen, können Sie folgende Verhalten verwenden: Statusleistentext festlegen legt den Text einer Meldung fest, die in der Statusleiste unten links im Browserfenster angezeigt wird.
_top lädt das verknüpfte Dokument in das ganze Browserfenster, wodurch alle Frames entfernt werden. Wenn für alle Hyperlinks auf der Seite das gleiche Ziel verwendet werden soll, können Sie dieses Ziel einmal angeben, indem Sie auf „Einfügen“ > „HTML“ > „Head-Tags“ > „Basis“ klicken und anschließend die Zielinformationen auswählen. Weitere Informationen über die Angabe von Zielen für Frames finden Sie unter Frame-Inhalte mit Hilfe von Hyperlinks steuern.
Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze Browserfenster geladen. _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das Standardziel, sodass Sie es normalerweise nicht ausdrücklich angeben müssen. _top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden. 5. Geben Sie im Feld „Reihenfolgenposition“ eine Zahl ein.
Zum Erstellen eines Hyperlinks zu einem benannten Anker sind zwei Schritte erforderlich. Zunächst erstellen Sie einen benannten Anker und anschließend einen Hyperlink zu dem benannten Anker. Hinweis: Benannte Anker können nicht in absolut positionierten Elementen (AP-Elementen) platziert werden. Benannte Anker erstellen 1. Setzen Sie die Einfügemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den benannten Anker erstellen möchten. 2.
Nach oben E-Mail-Verknüpfungen erstellen Wenn Sie auf eine E-Mail-Verknüpfung klicken, wird ein neues Nachrichtenfenster in dem E-Mail-Programm geöffnet, das mit dem Browser des Benutzers verknüpft ist. Im Feld „An“ im Fenster der E-Mail-Nachricht wird die im E-Mail-Hyperlink angegebene Adresse automatisch eingefügt. E-Mail-Verknüpfungen mit dem Befehl „E-Mail-Verknüpfung einfügen“ erstellen 1.
erhalten Besucher der Website zusätzliche Informationen zu einem bestimmten Element, ohne die aktuelle Webseite verlassen zu müssen. Skript-Hyperlinks können darüber hinaus verwendet werden, um Berechnungen, Formularüberprüfungen und andere Verarbeitungsvorgänge durchzuführen, wenn der Besucher auf ein bestimmtes Element klickt. Null-Hyperlinks erstellen 1. Wählen Sie in der Entwurfsansicht des Dokumentfensters eine Textstelle, ein Objekt oder ein Bild aus. 2.
4. Klicken Sie auf „OK“. Cache-Datei für die Site erstellen 1. Wählen Sie „Site“ > „Sites verwalten“. 2. Wählen Sie eine Site aus und klicken Sie dann auf „Bearbeiten“. 3. Erweitern Sie im Dialogfeld „Site-Definition“ die Option „Erweiterte Einrichtungen“ und wählen Sie die Kategorie „Lokale Infos“ aus. 4. Wählen Sie in der Kategorie „Lokale Informationen“ die Option „Cache aktivieren“ aus.
4. Klicken Sie auf „OK“. Dreamweaver aktualisiert alle Dokumente, die einen Hyperlink zu der ausgewählten Datei enthalten, sodass sie auf die neue Datei verweisen. Dazu verwendet es das bereits im Dokument verwendete Pfadformat (war beispielsweise der alte Pfad dokumentrelativ, 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).
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.
Sie im Bedienfeld „Verhalten“ das Verhalten „Sprungmenü“ definieren. 1. Öffnen Sie den Eigenschafteninspektor („Fenster“ > „Eigenschaften“), wenn er noch nicht geöffnet ist. 2. Klicken Sie in der Entwurfsansicht des Dokumentfensters auf das Sprungmenüobjekt, um es auszuwählen. 3. Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Listenwerte“. 4. Nehmen Sie im Dialogfeld „Listenwerte“ die gewünschten Änderungen an den Menüelementen vor und klicken Sie dann auf „OK“.
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.
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.
7. Geben Sie im Feld „Alt“ den alternativen Text ein, der in reinen Textbrowsern oder in Browsern angezeigt wird, bei denen Bilder manuell heruntergeladen werden. In einigen Browsern wird dieser Text als QuickInfo angezeigt, wenn die Besucher der Website den Mauszeiger über den Hotspot bewegen. 8. Wiederholen Sie die Schritte 4 bis 7, um weitere Hotspots in der Imagemap zu definieren. 9.
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.
Hinweis: Wenn Sie den Berichtstyp „Verwaiste Dateien“ auswählen, können Sie verwaiste Dateien direkt im Bedienfeld „Hyperlink-Prüfer“ löschen. Wählen Sie dazu eine Datei in der Liste aus und drücken Sie die Entf-Taste. 4. Wenn Sie einen Bericht speichern möchten, klicken Sie im Bedienfeld „Hyperlink-Prüfer“ auf die Schaltfläche „Bericht speichern“.
jQuery 449
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.
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.
Wenn Sie einen jQuery Effekt anwenden, wird er standardmäßig dem Ereignis „onClick“ zugewiesen. Im Bedienfeld „Verhalten“ können Sie jedoch das auslösende Ereignis für einen Effekt ändern. 1. Wählen Sie das erforderliche Seitenelement aus. 2. Klicken Sie im Bedienfeld „Verhalten“ („Fenster“ > „Verhalten“) auf das Symbol „Festgelegte Ereignisse zeigen“. 3. Klicken Sie auf die Zeile, die dem aktuell angewendeten Effekt entspricht.
Vorschau 453
Webseitenvorschau und -prüfung auf mehreren Geräten Mit Dreamweaver können Sie jetzt ihre produktionsreifen Webseiten auf mehreren Geräten gleichzeitig testen. So können Sie die Darstellung Ihrer Webseite mit unterschiedlichen Formfaktoren prüfen und interaktive Funktionen auf Ihren Seiten testen. Hierzu müssen Sie weder eine mobile App installieren noch eine physische Verbindung der Geräte mit Ihrem Desktop herstellen.
Stellen Sie auf den Geräten sicher, dass JavaScript und Cookies in den Browsereinstellungen aktiviert sind. Nach oben Unterstützte Geräte Alle Android- und iOS-Geräte Nach oben Vorschau von Webseiten auf Geräten 1. Starten Sie auf dem Desktopcomputer Dreamweaver und öffnen Sie die Webseite, die Sie auf Geräten in der Vorschau anzeigen möchten. 2. Klicken Sie in der Dokumentsymbolleiste auf das Symbol „Gerätevorschau“.
4. Auf den Geräten wird ein Anmeldebildschirm angezeigt. Melden Sie sich mit Ihren Adobe ID-Anmeldeinformationen an. Stellen Sie sicher, dass Sie die gleiche Adobe ID verwenden, die Sie auch für Dreamweaver/Creative Cloud verwenden. Anmeldebildschirm auf Geräten 5. Nach einer erfolgreichen Anmeldung werden im Gerätevorschau-Popup die Namen der verbundenen Geräte angezeigt. Zudem wird auf den verbundenen Geräten eine Vorschau der Webseite angezeigt.
Klicken Sie zum Prüfen der Webseite auf einem bestimmten Gerät auf das Symbol „Inspect“ für den betreffenden Gerätenamen im Gerätevorschau-Popup. Der Viewport in Dreamweaver ist so festgelegt, dass er dem Viewport auf dem entsprechenden Gerät entspricht, und Inspect wird auf dem Gerät und in Dreamweaver ausgelöst. Klicken Sie erneut auf das Symbol „Inspect“, um den Inspect-Modus zu beenden.
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.
Änderungen in anderen Bereichen (z. B. im Bedienfeld „CSS-Stile“ oder in der Codeansicht). Sie können zugehörige Dateien (wie CSS-Stylesheets) bearbeiten, während der Fokus in der Live-Ansicht bleibt, indem Sie die zugehörige Datei mithilfe der Symbolleiste „Zugehörige Dateien“ am oberen Rand des Dokuments öffnen. 4. Nachdem Sie Änderungen in der Codeansicht oder in einer zugehörigen Datei vorgenommen haben, können Sie die LiveAnsicht aktualisieren.
Plug-Ins deaktivieren Plug-Ins werden deaktiviert und die Seite erneut so dargestellt, als wären Plug-Ins im Browser nicht aktiviert. Änderungen in Live-Code hervorheben Die Hervorhebung von Änderungen im Live-Code wird deaktiviert oder aktiviert. Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten Sie können neue Registerkarten für Site-Dokumente öffnen, die Sie mithilfe der Symbolleiste „Browser-Navigation“ oder der Funktion „Hyperlink(s) aufrufen“ aufrufen.
Hinweis: In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner relativen Pfad verknüpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter „Bearbeiten“ > „Voreinstellungen“ > „Vorschau in Browser“ die Option „Vorschau mit temporärer Datei“ auswählen. Der Grund hierfür ist, dass Browser im Gegensatz zu Servern Site-Stammordner nicht erkennen können.
Schreiben von Code 462
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.
Dreamweaver ändert keine Tags, die nicht erkannt werden. Dies gilt auch für XML-Tags, denn Dreamweaver stehen keine Kriterien zur Verfügung, die eine Beurteilung unbekannter Tags erlauben würden. Wenn ein unerkanntes Tag ein anderes Tag überlappt (z. B. 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).
Dies betrifft die folgenden Attribute: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly und selected. Hinweis: Wenn ein HTML-Browser HTML 4 nicht unterstützt, kann es sein, dass er diese booleschen Attribute in ihrer vollwertigen Form nicht interpretieren kann. Alle Attributwerte müssen in Anführungszeichen stehen. Setzt Attributwerte bei selbst erzeugtem und optimiertem XHTML-Code in Anführungszeichen.
„Kugel“. ? Das voranstehende Zeichen höchstens 1 Mal (d. h., das voranstehende Zeichen ist optional) bl?au entspricht „blau“ in „tiefblau“ und „bau“ in „vorbauen“, jedoch keiner Zeichenfolge in „schlau“ oder „brauen“. . Ein einziges Zeichen außer Zeilenvorschub .ar entspricht „tar“ und „rar“ im Satz „ein Star ist rar“. x|y Entweder x oder y FF0000|0000FF entspricht „FF0000“ in bgcolor="#FF0000" und „0000FF“ in font color="#0000FF".
\r Zeilenumbruch \s Ein beliebiges, einzelnes, nicht druckbares Zeichen, beispielsweise Leerzeichen, Tabulator, Seitenvorschub oder Zeilenvorschub \sbook entspricht „buchen“ in „jetzt buchen“, jedoch keiner Zeichenfolge in „verbuchen“. \S Ein beliebiges einzelnes, druckbares Zeichen \Sbook entspricht „buchen“ in „verbuchen“, keiner Zeichenfolge in „jetzt buchen“. \t Ein Tabulator \w Ein beliebiges alphanumerisches Zeichen, einschließlich Unterstrich. Entspricht [A-Za-z0-9_].
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.
Ansichtsoptionen dient zur Angabe, wie der Code angezeigt werden soll. Weitere Informationen finden Sie unter Erscheinungsbild des Codes festlegen. 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.
Festlegen von Codeeinstellungen Voreinstellungen für Code Erscheinungsbild des Codes festlegen Codeformat ändern Einstellungen für das Umschreiben von Code festlegen Farbthema für die Codeansicht festlegen Mit externen Editoren arbeiten 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.
Leerzeichen werden z. B. durch einen Punkt repräsentiert, ein doppeltes Steuerzeichen ersetzt Tabulatoren und jeder Zeilenumbruch wird mit einer Absatzmarke gekennzeichnet. Hinweis: Die in Dreamweaver für den Umbruch verwendeten Zeilenwechsel werden nicht durch eine Absatzmarke gekennzeichnet. Ungültigen Code hervorheben. Bewirkt, dass ungültiger HTML-Code in Dreamweaver gelb markiert wird.
Tabulatoren. Aufeinanderfolgende Leerstellen werden beim Einfügen von Code nicht in einen Tabulator umgewandelt. Zeilenumbruch-Typ. Definiert den Typ des Remote-Servers (Windows, Macintosh oder UNIX), der als Host für die Remote-Site dient. Durch die Wahl der korrekten Steuerzeichenfolge für den Zeilenumbruch wird gewährleistet, dass der HTML-Quellcode auf dem Remote-Server richtig angezeigt wird.
White Space Character (Leerraumzeichen) (nur in der japanischen Version). Ermöglicht die Auswahl von oder Zenkaku-Leerzeichen für HTML-Code. Der in dieser Option ausgewählte Leerraum wird für leere Tags verwendet, die entweder beim Erstellen von Tabellen benötigt werden oder in Seiten mit dem Kodierungstyp „Japanisch“, wenn die Option „Mehrere aufeinanderfolgende Leerzeichen zulassen“ aktiviert ist.
ist, wird dadurch nicht verändert. Sonderzeichen nicht kodieren. Verhindert, dass URLs in Dreamweaver so verändert werden, dass nur zulässige Zeichen enthalten sind. Diese Option ist standardmäßig aktiviert. Sonderzeichen in URLs mit &# kodieren. Stellt sicher, dass URLs, die Sie mit Dreamweaver-Werkzeugen wie dem Eigenschafteninspektor eingeben oder bearbeiten, nur zulässige Zeichen enthalten. Sonderzeichen in URLs mit % kodieren.
Vordefinierte Themen für die Codeansicht 4. Wenn Sie das Thema anpassen möchten, führen Sie die folgenden Schritte aus: 1. Um die Hintergrundfarben zu ändern, verwenden Sie die folgenden Optionen: Standardhintergrund. Legt die Farbe des Standardhintergrunds für die Codeansicht und den Codeinspektor fest. Versteckte Zeichen. Legt die Farbe für versteckte Zeichen fest. Live-Code-Hintergrund. Legt die Hintergrundfarbe für die Live-Codeansicht fest. Die Standardfarbe ist gelb. Live-Code-Änderungen.
Vorschaufeld wird mit den neuen Farben und Stilen angezeigt. Ändern des Farbschemas für einen HTML-Dokumententtyp 3. Um für ein Thema wieder die werksseitig eingestellten Standardeinstellungen herzustellen, klicken Sie auf „Standardeinstellungen wiederherstellen“. 5. Klicken Sie auf „Anwenden“, um die Änderungen zu speichern. Mit der Option „Einstellungen synchronisieren“ in „Voreinstellungen“ können Sie die zwischen Ihren Dreamweaver-Instanzen benutzerdefinierten Codethemen beibehalten.
Windows: C:\Programme\Adobe\Adobe Dreamweaver CC 2015\configuration\themes Mac: Applications/Adobe Dreamweaver CC 2015/configuration/themes/ Kopieren Sie z. B. Raven.xml und defaultColorsRaven.xml und benennen Sie die kopierten Dateien MyTheme.xml und defaultColorsMyTheme.xml um. 5. Starten Sie Dreamweaver neu und überprüfen Sie in der Liste der Standardthemen („Voreinstellungen“ > „Farbe für Code“), ob Ihr Thema enthalten ist.
Vorschau von Live-Code Einstellungen für Codehinweise festlegen Dateien standardmäßig in der Codeansicht öffnen Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.
Schreiben und Bearbeiten von Code Codehinweise Site-spezifische Codehinweise Code mit der Code-Symbolleiste einfügen Code im Bedienfeld „Einfügen“ einfügen Code mit Emmet einfügen Tags über die Tag-Auswahl einfügen HTML-Kommentare einfügen Code kopieren und einfügen Vorschau für Bilder und Farben in der Codeansicht Code analysieren Tags mit Tag-Editoren bearbeiten Code über das Kontextmenü „Kodierung“ bearbeiten Serversprachen-Tag mit dem Eigenschafteninspektor bearbeiten Codeblöcke einrücken Zugehörigen Co
Die Funktion für Codehinweise erkennt zudem benutzerdefinierte, nicht integrierte JavaScript-Klassen. Sie können diese benutzerdefinierten Klassen erstellen oder über Bibliotheken von Drittanbietern, z. B. Prototype, hinzufügen. Die Liste der Codehinweise wird ausgeblendet, wenn Sie die Rücktaste (Windows) bzw. die Rückschritttaste (Mac) drücken. Ein Video-Tutorial zu Codehinweisen finden Sie unter www.adobe.com/go/lrvid4048_dw.
Taste. 3. Wenn Sie ein Element aus der Liste einfügen möchten, doppelklicken Sie auf das Element oder wählen Sie es aus und drücken Sie dann die Eingabetaste (Windows) bzw. Return (Mac). Falls ein kürzlich erstellter CSS-Stil nicht in einer Codehinweisliste mit CSS-Stilen erscheint, wählen Sie aus der Liste der Codehinweise die Option „Stil-Liste aktualisieren“. In der Entwurfsansicht wird nach dem Auswählen von „Stil-Liste aktualisieren“ manchmal ungültiger Code angezeigt.
Schaltfläche für Syntaxfehlermeldungen klicken. Einstellungen für Codehinweise festlegen Sie können die Standardvoreinstellungen für Codehinweise ändern. Wenn beispielsweise keine Codehinweise für CSS-Eigenschaftennamen oder Spry angezeigt werden sollen, können Sie sie in den Voreinstellungen für Codehinweise deaktivieren. Sie können darüber hinaus Voreinstellungen für Verzögerungszeiten und schließende Tags festlegen.
ausgewählte Site. Damit die Codehinweise angezeigt werden, muss sich die Seite, die Sie bearbeiten, in der aktuell ausgewählten Site befinden. 1. Wählen Sie „Site“ > „Site-spezifische Code-Hinweise“ aus. Die Funktion „Site-spezifische Code-Hinweise“ analysiert automatisch Ihre Site, um festzustellen, welches CMS-Framework (Content Management System) Sie verwenden. Dreamweaver unterstützt standardmäßig die drei Frameworks Drupal, Joomla und WordPress.
Hinweis: Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben oder zu bestätigen, dass Sie die Struktur mit dem gleichen Namen überschreiben möchten. Die Framework-Standardstrukturen können jedoch nicht überschrieben werden. Site-Strukturen umbenennen Beachten Sie beim Umbenennen der Site-Struktur, dass Sie die Namen der drei FrameworkStandardstrukturen sowie das Wort „benutzerdefiniert“ nicht verwenden können. 1.
Nach oben Code mit der Code-Symbolleiste einfügen 1. Vergewissern Sie sich, dass die Codeansicht aktiviert ist („Ansicht“ > „Code“). 2. Platzieren Sie die Einfügemarke im Code oder wählen Sie einen Codeblock aus. 3. Klicken Sie in der Symbolleiste „Code“ auf eine Schaltfläche oder wählen Sie ein Element in einem Popupmenü der Symbolleiste aus. Um die Funktion der verschiedenen Schaltflächen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltfläche, bis die zugehörige QuickInfo angezeigt wird.
Bei „HTML-Kommentar anwenden“ wird der ausgewählte Code mit den Tags umschlossen. Wenn kein Code ausgewählt ist, wird ein neues Tag geöffnet. „//-Kommentar anwenden“ fügt // am Anfang jeder Zeile des ausgewählten CSSoder JavaScript-Codes hinzu bzw. fügt ein einzelnes //-Tag ein, wenn kein Code ausgewählt ist. „/* */-Kommentar anwenden“ umgibt den ausgewählten CSS- oder JavaScript-Code mit /* und */. „'-Kommentar anwenden“ ist für Visual Basic gedacht.
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.
libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
Nach oben HTML-Kommentare einfügen Ein Kommentar ist Text, den Sie als Beschreibung oder Zusatzinformation in HTML-Code einfügen. Die Kommentare werden lediglich in der Codeansicht angezeigt und sind im Browser nicht sichtbar. Kommentare an der Einfügemarke einfügen Wählen Sie „Einfügen“ > „Kommentar“. In der Codeansicht wird ein Kommentar-Tag eingefügt und die Einfügemarke wird in die Mitte des Tags gesetzt. Geben Sie Ihren Kommentar ein. In der Entwurfsansicht wird das Dialogfeld „Kommentar“ angezeigt.
Bewegen Sie die Maus über eine Bild-URL, um eine Vorschau des Bilds in der Codeansicht anzuzeigen. Die Vorschau ist bei Bildern möglich, auf die wie folgt verwiesen wird: url(); data-uri() src-Attributwert des img-Tags In Dreamweaver können auch Bilder auf Remote-Hosts in der Vorschau angezeigt werden, z. B. 
.
Farbvorschau in der Codeansicht Nach oben Code analysieren Dreamweaver bietet Unterstützung für Linting, ein Verfahren, bei dem Code auf potenzielle Fehler hin überprüft wird. Beim Linting erkannte Fehler und Warnungen werden im Ausgabe-Bedienfeld aufgeführt. Weitere Informationen finden Sie unter Code-Linting. Außerdem wird in Dreamweaver in der Spalte mit den Zeilennummern für die Zeile mit dem Fehler eine kurze Vorschau auf den Fehler angezeigt.
--> umschlossen. Wenn kein Code ausgewählt ist, wird ein neues Tag geöffnet. /* */-Kommentar anwenden umgibt den ausgewählten CSS- oder JavaScript-Code mit /* und */. //-Kommentar anwenden fügt // am Anfang jeder Zeile des ausgewählten CSS- oder JavaScript-Codes hinzu bzw. fügt ein einzelnes //-Tag ein, wenn kein Code ausgewählt ist. '-Kommentar anwenden fügt ein Apostroph am Anfang jeder Visual Basic-Skriptzeile oder, wenn kein Code ausgewählt ist, an der Einfügemarke ein.
Zeilenumbrüche hinzufügen fügt am Ende jeder Zeile der Auswahl ein br-Tag hinzu. In Großschreibung konvertieren konvertiert alle Buchstaben innerhalb der Auswahl (einschließlich Tag- und Attributnamen sowie Werte) in Großbuchstaben. In Kleinschreibung konvertieren konvertiert alle Buchstaben innerhalb der Auswahl (einschließlich Tag- und Attributnamen sowie Werte) in Kleinbuchstaben.
und externen CSS-Regeln, Server-Side Includes, externen JavaScript-Dateien, übergeordneten Vorlagendateien, Bibliotheksdateien und iframe-Quelldateien. Wenn Sie auf einen Hyperlink im CodeNavigator klicken, wird die Datei mit dem entsprechenden Codesegment geöffnet. Die Datei wird im Bereich für zugehörige Dateien angezeigt, wenn dieser aktiviert ist. Wenn der Bereich für zugehörige Dateien nicht aktiviert ist, wird die ausgewählte Datei als gesondertes Dokument im Dokumentfenster geöffnet.
Nach oben Zu JavaScript- oder VBScript-Funktionen navigieren Sie können in der Codeansicht und im Codeinspektor eine Liste aller im Code enthaltenen JavaScript- oder VBScript-Funktionen anzeigen und zu einer beliebigen Funktion springen. 1. Zeigen Sie das Dokument in der Codeansicht („Ansicht“ > „Code“) oder im Codeinspektor („Fenster“ > „Codeinspektor“) an. 2. Führen Sie einen der folgenden Schritte aus: Klicken Sie in der Codeansicht mit der rechten Maustaste (Windows) bzw.
im Body-Bereich und mit globalen Variablen. Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die JavaScript-Unterstützung in Dreamweaver finden Sie unter www.adobe.com/go/dw10javascript_de. Verwenden des JavaScript Extractor: 1. Öffnen Sie eine Seite, die JavaScript-Code enthält (z. B. eine Spry-Seite). 2. Wählen Sie „Befehle“ > „JavaScript externalisieren“ aus. 3. Bearbeiten Sie im Dialogfeld „JavaScript externalisieren“ gegebenenfalls die Standardoptionen.
Codefragmente einfügen 1. Setzen Sie die Einfügemarke an die Stelle, an der Sie das Codefragment einfügen möchten, oder wählen Sie den Code, der von einem Codefragment umgeben werden soll. 2. Doppelklicken Sie im Bedienfeld „Codefragmente“ („Fenster“ > „Codefragmente“) auf das gewünschte Codefragment. Sie können auch mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Mac) auf das Codefragment klicken und dann im Popupmenü den Befehl „Einfügen“ wählen. Codefragmente erstellen 1.
Daraufhin wird eine Liste mit Codefragmenten angezeigt. 3. Wählen Sie ein Codefragment aus und weisen Sie ihm einen Tastaturbefehl zu. Weitere Informationen finden Sie unter Tastaturbefehle anpassen. Codefragmente gemeinsam mit anderen Teammitgliedern nutzen 1. Suchen Sie die Datei zu dem Codefragment, das Sie gemeinsam mit anderen nutzen möchten, im Ordner „Configuration/Snippets“ innerhalb des Anwendungsordners von Dreamweaver. 2.
Wenn Sie mit dem Suchmuster beispielsweise alle img-Tags suchen, die kein Attribut alt enthalten, können Sie der Abfrage den Namen „img_no_alt.dwr“ zuweisen. Hinweis: Gespeicherte Abfragen haben die Dateierweiterung .dwr. Einige gespeicherte Abfragen aus älteren Dreamweaver-Versionen können auch die Erweiterung .dwq aufweisen. Suchmuster aufrufen 1. Wählen Sie „Bearbeiten“ > „Suchen und ersetzen“. 2. Klicken Sie auf das Symbol „Abfrage laden“ (das Ordnersymbol). 3.
2. Wählen Sie „Bearbeiten“ > „Kopieren“ und fügen Sie den Beispielcode in das Dokument in der Codeansicht ein. Informationen im Bedienfeld „Referenz“ anzeigen 1. Wenn Sie Tags, Objekte oder Stile aus einem anderen Buch anzeigen möchten, wählen Sie ein Buch im Popupmenü „Buch“ aus. 2. Um Informationen zu einem bestimmten Element anzuzeigen, wählen Sie dieses (je nach dem ausgewählten Buch) im Popupmenü „Tag“, „Objekt“, „Stil“ oder „CFML“ aus. 3.
Text suchen und ersetzen Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.
Code ausblenden Sie können Codefragmente aus- und einblenden, damit andere Bereiche des Dokuments sichtbar werden, ohne dass Sie die Bildlaufleiste verwenden müssen. Wenn Sie z. B. alle CSS-Regeln im head-Tag anzeigen möchten, die für ein div-Tag weiter unten auf der Seite relevant sind, können Sie den gesamten Code zwischen dem head-Tag und dem div-Tag ausblenden. Anschließend werden beide relevanten Codefragmente gleichzeitig auf dem Bildschirm angezeigt.
Nach oben Ausgeblendete Codefragmente kopieren und verschieben Sie können ausgeblendete Codefragmente kopieren und in demselben Dokument oder in anderen Dokumenten und Anwendungen einfügen. Sie können auch ausgeblendete Codefragmente durch Ziehen in der Codeansicht verschieben. Ausgeblendete Codefragmente kopieren und einfügen 1. Klicken Sie auf das ausgeblendete Codefragment, um es auszuwählen. 2. Wählen Sie „Bearbeiten“ > „Kopieren“. 3.
Code-Linting Einsteigern können ebenso wie erfahrenen Programmierern immer einmal versehentlich oder aufgrund fehlender Informationen Fehler beim Verfassen von Code unterlaufen. Wenn die Darstellung der Webseite oder auch nur eines Teils nicht Ihren Erwartungen entspricht, müssen Sie den Code debuggen, um Syntaxoder Logikfehler zu finden. Das Debuggen kann äußerst mühsam und zeitaufwendig sein, insbesondere bei komplexen Implementierungen.
entsprechenden Konfigurationsdateien bearbeiten: HTML: DW.htmlhintrc CSS: DW.csslintrc JS: DW.jshintrc Führen Sie die folgenden Schritte aus, um auf diese Dateien zuzugreifen und sie zu bearbeiten: 1. Klicken Sie auf „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Mac). 2. Wählen Sie in der Liste „Kategorie“ den Eintrag „Linting“. 3. Klicken Sie im Abschnitt „Regelsatz bearbeiten“ auf den gewünschten Dateityp und klicken Sie auf „Bearbeiten und Änderungen anwenden“.
Das Linting-Symbol in der Statusleiste gibt die Linting-Ergebnisse an: Rot: Das aktuelle Dokument enthält Fehler und Warnungen. Gelb: Das aktuelle Dokument enthält lediglich Warnungen. Grün: Das aktuelle Dokument enthält keine Fehler. Mit dem Linting-Symbol in der Statusleiste können Sie auch das Ausgabe-Bedienfeld öffnen und schließen, wenn das Symbol rot oder gelb ist (aber nicht grün). Die Zeilen, die Fehler oder Warnungen enthalten, sind rot bzw. gelb hervorgehoben.
Optimieren von Code Code optimieren Ü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 Validator-Voreinstellungen festlegen Seiten mit XHTML kompatibel machen Nach oben Code optimieren Sie können automatisch leere Tags entfernen, verschachtelte font-Tags kombinieren und unleserlichen oder unübersichtlichen HTML- bzw. XHTML-Code besser strukturieren.
Entfernen: Spezielles Dreamweaver-Markup entfernt Kommentare, die von Dreamweaver dem Code hinzugefügt werden, damit Dokumente bei der Aktualisierung von Vorlagen und Bibliothekselementen automatisch aktualisiert werden können. Wenn Sie diese Option beim Optimieren von Code in einem Dokument aktivieren, das auf einer Vorlage basiert, wird die Verknüpfung des Dokuments mit der Vorlage getrennt. Weitere Informationen finden Sie unter Dokument von einer Vorlage lösen.
Nach oben Browserkompatibilität überprüfen Mithilfe der Funktionen für die Browserkompatibilitätsprüfung können Sie Kombinationen von HTML und CSS aufspüren, die Browserfehler auslösen können. Darüber hinaus testet diese Funktion den Code Ihrer Dokumente auf sämtliche CSS-Eigenschaften oder -Werte, die von den Zielbrowsern nicht unterstützt werden. Hinweis: Diese Funktion ersetzt die frühere Funktion „Zielbrowser-Prüfung“, bietet aber ebenfalls die entsprechende CSS-Funktionalität.
auswählen. Die Überprüfung von Live-Dokumenten empfiehlt sich vor allem bei dynamischen Seiten mit PHP, JSP usw. Die Option „Live-Dokument überprüfen“ ist nur aktiviert, wenn die URL der zu überprüfenden Seite mit http beginnt. 1. Wählen Sie „Fenster“ > „Ergebnisse“ > „Überprüfung“, um das Bedienfeld „Überprüfung“ zu öffnen. In diesem Bedienfeld werden die Ergebnisse der Überprüfung angezeigt. 2. Klicken Sie auf „Live-Ansicht“. 3. Wählen Sie „Datei“ > „Überprüfen“ > „Live-Dokument überprüfen (W3C)“ aus.
Wenn alle Fehler und Warnungen, einschließlich der ausgeblendeten Fehler und Warnungen angezeigt werden sollen, klicken Sie auf die Schaltfläche „Optionen“. Wählen Sie dann „Alles anzeigen“ aus. Alle ausgeblendeten Fehler und Warnungen, die Sie im Dialogfeld „Voreinstellungen“ gelöscht haben, werden nicht angezeigt. Klicken Sie zum Löschen aller Ergebnisse im Bedienfeld „W3C-Überprüfung“ auf die Schaltfläche „Optionen“. Wählen Sie dann „Ergebnisse löschen“ aus.
(Mac OS X) und wählen Sie die Kategorie „Neues Dokument“. 2. Wählen Sie ein Standarddokument und dann im Popupmenü „Standard-Dokumenttyp (DDT)“ eine der XHTML-DTDs (Dokumenttypdefinitionen) aus. Klicken Sie auf „OK“. Sie können beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie „XHTML 1.0 Transitional“ oder „XHTML 1.0 Strict“ im Popupmenü auswählen. Vorhandene HTML-Dokumente XHTML-kompatibel machen 1.
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
1. Klicken Sie im Eigenschafteninspektor auf die Schaltfläche „Attribute“, um die vorhandenen Tag-Attribute zu bearbeiten oder neue hinzuzufügen. 2. Wenn zwischen dem Anfangs- und dem Schluss-Tag ein Inhalt vorhanden ist, klicken Sie auf die Schaltfläche „Inhalt“, um ihn zu bearbeiten. Die Schaltfläche „Inhalt“ wird nur angezeigt, wenn das ausgewählte Tag kein leeres Tag ist (d. h., wenn sowohl das Anfangsals auch das Schluss-Tag vorhanden ist). 3.
„Tag um Objekt legen“ wird verwendet, um ein neues Tag um die aktuelle Auswahl zu legen. Hinweis: In welchem Modus der Quick Tag Editor geöffnet wird, hängt von der aktuellen Auswahl in der Entwurfsansicht ab. Unabhängig vom Modus müssen Sie bei der Arbeit mit dem Quick Tag Editor die folgenden Arbeitsschritte ausführen: Zuerst öffnen Sie den Editor, anschließend können Sie Tags und Attribute eingeben oder bearbeiten und dann schließen Sie den Editor.
Wenn Sie ein Menü mit Codehinweisen mit einer Liste der gültigen Attribute für ein Tag anzeigen möchten, unterbrechen Sie für einen Moment die Bearbeitung eines Attributnamens im Quick Tag Editor. Ein Menü mit Codehinweisen wird eingeblendet, in dem alle gültigen Attribute des zu bearbeitenden Tags angezeigt werden. Entsprechend können Sie ein Menü mit Codehinweisen mit einer Liste der gültigen Tag-Namen anzeigen, wenn Sie das Eingeben oder Bearbeiten eines Tag-Namens im Quick Tag Editor kurz unterbrechen.
Erstellen Sie in Ihrem Dokument einen Hyperlink zu einer externen Skriptdatei, ohne die Entwurfsansicht zu verlassen. Bearbeiten Sie ein Skript, ohne die Entwurfsansicht zu verlassen. Wählen Sie zunächst „Ansicht“ > „Visuelle Hilfsmittel“ > „Unsichtbare Elemente“, damit Skriptmarkierungen auf der Seite angezeigt werden. Clientseitige Skripts schreiben 1. Setzen Sie die Einfügemarke an die Stelle, an der Sie das Skript einfügen möchten. 2. Wählen Sie „Einfügen“ > „HTML“ > „Skriptobjekte“ > „Skript“. 3.
auf das Ordnersymbol , um die Datei auszuwählen, oder geben Sie den Pfad ein. 4. Klicken Sie auf „Bearbeiten“, um die gewünschten Änderungen am Skript vorzunehmen. Nach oben Verwenden von JavaScript-Verhalten Über die Registerkarte „Verhalten“ im Tag-Inspektor können Sie Seitenelementen schnell und einfach JavaScript-Verhalten (clientseitig) hinzufügen. Weitere Informationen finden Sie unter Anwenden integrierter JavaScript-Verhalten.
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.
Wert gibt die Art der Information an, die Sie mit diesem Tag bereitstellen. Einige Werte, wie description, keywords und refresh, sind bereits recht genau definiert (und haben jeweils eigene Eigenschafteninspektoren in Dreamweaver), aber Sie können praktisch jeden beliebigen Wert angeben (z. B. erstelldatum, dokumentID oder niveau). Inhalt enthält die eigentliche Information. Wenn Sie als „Wert“ z. B. niveau angegeben haben, können Sie für „Inhalt“ anfaenger, fortgeschritten oder experte angeben.
Besucher automatisch zu einer anderen URL umzuleiten, wobei oftmals zunächst darauf hingewiesen wird, dass sich die URL geändert hat. meta-Tag „refresh“ (Aktualisieren) hinzufügen 1. Wählen Sie „Einfügen“ > „HTML“ > „Head-Tags“ > „Aktualisieren“. 2. Legen Sie im angezeigten Dialogfeld die meta-Tag-Eigenschaften der Aktualisierung fest. meta-Tag „refresh“ (Aktualisieren) bearbeiten 1. Wählen Sie „Ansicht“ > „Head-Inhalt“ aus. 2.
1. Wählen Sie „Ansicht“ > „Head-Inhalt“ aus. 2. Wählen Sie die Hyperlink-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird. 3. Legen Sie im Eigenschafteninspektor die Eigenschaften des Hyperlink-meta-Tags fest. Eigenschaften des meta-Tags „link“ (Hyperlink) angeben Legen Sie dabei folgende meta-Tag-Eigenschaften fest: Href ist die URL der Datei, auf die der Hyperlink verweist.
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.
Nach oben Server-Side Includes einfügen In Dreamweaver können Sie Server-Side Includes in Ihre Seiten einfügen. 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.
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.
4. Geben Sie den Namen des neuen Attributs ein. Wenn Sie mehrere Attribute hinzufügen möchten, trennen Sie die einzelnen Attributnamen durch ein Komma und ein Leerzeichen (z. B. width, height). 5. Klicken Sie auf „OK“. 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.
Bibliotheken, Tags und Attribute löschen 1. Wählen Sie im Tag-Bibliothek-Editor („Bearbeiten“ > „Tag-Bibliotheken“) in der Liste „Tags“ eine Tag-Bibliothek, ein Tag oder ein Attribut aus. 2. Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–). 3. Klicken Sie auf „OK“, um das Element permanent zu löschen. Das Element wird aus dem Feld „Tags“ entfernt. 4. Klicken Sie auf „OK“, um den Tag-Bibliothek-Editor zu schließen und den Löschvorgang zu beenden.
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.
Der URI (Uniform Resource Identifier) besteht oftmals aus der URL der Organisation, die die Tag-Bibliothek verwaltet. Die URL dient hierbei nicht zum Anzeigen der Website der Organisation, sondern lediglich als Kennung der Tag-Bibliothek. 6. (Optional) Geben Sie das Präfix ein, das bei den Tags verwendet werden soll. Einige Tag-Bibliotheken verwenden ein Präfix, um ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek zu identifizieren. 7. Klicken Sie auf „OK“.
JavaScript 530
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 Nach oben JavaScript-Verhalten Mit Adobe® Dreamweaver®-Verhalten wird JavaScript-Code in Dokumente eingefügt, damit Besucher Webseiten auf unterschiedliche Weise ändern oder bestimmte Aufgaben starten können.
abgeblendet sind, können vom ausgewählten Element keine Ereignisse generiert werden. Ereignis entfernen (–) Entfernt das ausgewählte Ereignis samt Aktion aus der Verhaltenliste. Pfeil-nach-oben und Pfeil-nach-unten Verschieben die ausgewählte Aktion in der Verhaltenliste für ein bestimmtes Ereignis nach oben oder nach unten. Die Reihenfolge der Aktionen kann nur für ein bestimmtes Ereignis geändert werden.
5. Das Standardereignis, das die Aktion auslöst, wird in der Spalte „Ereignisse“ angezeigt. Wenn es sich hierbei nicht um das gewünschte auslösende Ereignis handelt, wählen Sie im Popupmenü „Ereignisse“ ein anderes Ereignis aus. (Um das Menü „Ereignisse“ zu öffnen, wählen Sie im Bedienfeld „Verhalten“ ein Ereignis oder eine Aktion aus und klicken Sie dann zwischen dem Namen des Ereignisses und dem Namen der Aktion auf den nach unten zeigenden schwarzen Pfeil.
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
0){history.back()}. Wenn Sie den Code in eine Funktion integriert haben, geben Sie nur den Funktionsnamen ein (beispielsweise hGoBack()). 3. Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist. Nach oben Verhalten „Eigenschaft ändern“ definieren Mit dem Verhalten „Eigenschaft ändern“ können Sie den Wert einer Objekteigenschaft ändern (z. B. die Hintergrundfarbe eines div oder die Aktion eines Formulars).
Mit dem Verhalten „AP-Element ziehen“ kann der Besucher ein absolut positioniertes Element (AP-Element) ziehen. Dieses Verhalten eignet sich zum Erstellen von Puzzles, Schiebereglern und anderen beweglichen Elementen der Benutzeroberfläche.
Dokuments ein. (Bei dieser Funktion wird die alte Benennungskonvention für AP-Elemente [d. h. „Ebene“] übernommen, damit Ebenen, die aus früheren Dreamweaver-Versionen stammen, weiterhin bearbeitet werden können.) Diese Funktion registriert das AP-Element als ziehbar und definiert außerdem für jedes ziehbare AP-Element die drei Eigenschaften MM_LEFTRIGHT, MM_UPDOWN und MM_SNAPPED.
Nach oben Verhalten „Sprungmenü Gehe zu“ definieren Das Verhalten „Sprungmenü Gehe zu“ ist mit dem Verhalten „Sprungmenü“ eng verknüpft. Mit „Sprungmenü Gehe zu“ können Sie eine Schaltfläche „Gehe zu“ mit einem Sprungmenü verbinden. (Zur Verwendung dieses Verhaltens muss im Dokument bereits ein Sprungmenü vorhanden sein.) Durch Klicken auf die Schaltfläche „Gehe zu“ wird der im Sprungmenü ausgewählte Hyperlink geöffnet. Bei einem Sprungmenü wird die Schaltfläche „Gehe zu“ in der Regel nicht benötigt.
Meldung“ aus. 2. Geben Sie die Meldung im Feld „Meldung“ ein. 3. Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist. Nach oben Verhalten „Bilder vorausladen“ definieren Mit dem Verhalten „Bilder vorausladen“ wird die Zeit bis zur Anzeige verkürzt, indem Bilder zwischengespeichert werden, die beim ersten Anzeigen der Seite nicht sichtbar sind (z. B. Bilder, die mit Verhalten oder Skripts in die Seite gesetzt werden).
Beispiel 1 The URL for this page is {window.location}, and today is {new Date()}. 1. Markieren Sie ein Objekt und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ den Befehl „Text einstellen“ > „Container-Text festlegen“ aus. 2. Wählen Sie im Dialogfeld „Container-Text festlegen“ im Menü „Container“ das Zielelement aus. 3. Geben Sie im Feld „Neue HTML“ den neuen Text oder eine neue HTML ein. 4. Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
1. Markieren Sie ein Textfeld und wählen Sie im Menü „Verhalten hinzufügen“ des Bedienfelds „Verhalten“ die Option „Text einstellen“ > „Text von Textfeld einstellen“ aus. 2. Wählen Sie das Zieltextfeld im Menü „Textfeld“ aus und geben Sie den neuen Text ein. 3. Klicken Sie auf „OK“ und überprüfen Sie, ob das Standardereignis korrekt ist.
2. Geben Sie im Eigenschafteninspektor im Textfeld ganz links einen Namen für das Bild ein. Bildern muss nicht zwingend ein Name zugewiesen werden. Sie werden automatisch benannt, wenn Sie das Verhalten für ein Objekt definieren. Sie können die Bilder im Dialogfeld „Bild austauschen“ jedoch einfacher identifizieren, wenn Sie zuvor alle Bilder benannt haben. 3. Wiederholen Sie die Schritte 1 und 2, um weitere Bilder einzufügen. 4.
Sie unterscheiden sich jedoch folgendermaßen: onBlur tritt unabhängig davon auf, ob der Benutzer Text in das Feld eingegeben hat. Dagegen tritt onChange nur dann auf, wenn der Benutzer den Feldinhalt geändert hat. Bei erforderlichen Feldern sollte das Ereignis onBlur verwendet werden.
Produktübergreifende Arbeitsabläufe 544
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.
Adobe Creative Cloud-Seite für Zusatzprogramme, „Meine Zusatzprogramme“ Nach oben Aktivieren der Dateisynchronisation für die Adobe Creative Cloud Bevor Sie Zusatzprogramme aus der Adobe Creative Cloud installieren, stellen Sie sicher, dass Sie die Dateisynchronisation über den Adobe Creative Cloud-Client aktiviert haben. 1. Klicken Sie in der Taskleiste auf 2. Klicken Sie auf , um den Adobe Creative Cloud-Client zu öffnen. und klicken Sie dann auf „Voreinstellungen“.
Voreinstellungen im Adobe Creative Cloud-Client 3. Legen Sie auf der Registerkarte „Dateien“ die Option „Synchronisieren“ auf „Ein“ fest.
Dateisynchronisation im Adobe Creative Cloud-Client Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
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.
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
Hinweis: Falls Fireworks die PNG-Quelldatei nicht finden kann, werden Sie aufgefordert, sie manuell zu suchen. Wenn Sie mit der Fireworks-Quelldatei arbeiten, werden die Änderungen sowohl in der Quelldatei als auch in der exportierten Datei gespeichert. Andernfalls wird nur die exportierte Datei aktualisiert. 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).
exportieren. Bei segmentierten Bildern werden Sie aufgefordert, sie als HTML- und Bilddatei zu exportieren. 8. Wählen Sie unter „Speichern in“ den lokalen Site-Ordner von Dreamweaver aus. Im Feld „Name“ wird automatisch der Name angezeigt, den Sie für die PNG-Datei verwendet haben. Sie können den Namen ändern. 9. Typ „Speichern unter“: Wählen Sie im Bereich „Dateityp“ den gewünschten Dateityp für den Export aus, wie beispielsweise „Nur Bilder“ oder „HTML und Bilder“. 10.
1. Wählen Sie in Fireworks „Bearbeiten“ > „Voreinstellungen“ bzw. „Fireworks“ > „Voreinstellungen“ (Macintosh) und klicken Sie dann auf die Registerkarte „Starten und bearbeiten“ (Windows) bzw. wählen Sie im Popupmenü die Option „Starten und bearbeiten“ (Macintosh). 2.
In Dreamweaver platzierten Fireworks-HTML-Code aktualisieren Nach oben Der Fireworks-Befehl „Datei“ > „HTML aktualisieren“ kann als Alternative zum Verfahren „Starten und bearbeiten“ verwendet werden, um in Dreamweaver platzierte Fireworks-Dateien zu aktualisieren. Mit „HTML aktualisieren“ können Sie eine PNG-Quellbilddatei in Fireworks bearbeiten und dann die HTML-Codeabschnitte und Bilddateien, die exportiert und in ein Dreamweaver-Dokument platziert wurden, automatisch aktualisieren.
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.
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
Wenn Sie eine Nicht-Bild-Datei einfügen, beispielsweise eine MP3- oder PDF-Datei bzw. einen unbekannten Dateityp, dann fügt Dreamweaver einen Hyperlink zur Quelldatei ein. Wenn Sie eine HTML-Datei einfügen, dann fügt Dreamweaver einen Hyperlink zur Quelldatei ein. Nur in Windows: Wenn auf Ihrem Rechner Microsoft Office installiert ist und Sie eine Microsoft Word- oder Excel-Datei einfügen, müssen Sie angeben, ob die Datei selbst oder ein Hyperlink zur Quelldatei eingefügt werden soll.
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.
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.
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.
Wählen Sie zum Erstellen einer HTML-basierten AIR-Anwendung in Dreamweaver eine vorhandene Site aus, um sie in ein AIR-Anwendungspaket umzuwandeln. 1. Vergewissern Sie sich, dass die in das Anwendungspaket zu integrierenden Webseiten sich innerhalb einer vorhandenen Dreamweaver-Site befinden. 2. Öffnen Sie in Dreamweaver die Startseite der im Anwendungspaket zusammenzufassenden Gruppe von Seiten. 3. Wählen Sie „Site“ > „AIR-Anwendungseinstellungen“ aus. 4.
und CSS-Dateien, Bilddateien und JavaScript-Bibliotheksdateien hinzufügen. Klicken Sie auf die Schaltfläche mit dem Plussymbol (+), um Dateien hinzuzufügen, und auf die Schaltfläche mit dem Ordnersymbol, um Ordner hinzuzufügen. Bestimmte Dateien wie „_mmServerScripts“, „_notes“ usw. sollten nicht hinzugefügt werden. Um eine Datei oder einen Ordner aus der Liste zu löschen, wählen Sie die Datei oder den Ordner aus und klicken Sie auf die Schaltfläche mit dem Minussymbol (-).
Wählen Sie die Option „AIRI-Paket vorbereiten, das später signiert wird“ aus und klicken Sie auf „OK“. Mit dieser Option können Sie eine AIRI-Anwendung (AIR Intermediate) ohne digitale Signatur erstellen. Benutzer können die Anwendung jedoch erst installieren, wenn Sie eine digitale Signatur hinzufügen.
Nach oben AIR-Codehinweise und -Codefarben verwenden Die Adobe AIR-Erweiterung für Dreamweaver erweitert die Codeansicht von Dreamweaver auch um Codehinweise und farbliche CodeHervorhebungen für Adobe AIR-Sprachelemente. Öffnen Sie eine HTML- oder JavaScript-Datei in der Codeansicht und geben Sie Adobe AIR-Programmcode ein. Hinweis: Das Anzeigen von Codehinweisen funktioniert nur innerhalb von
