Unterstützt
- Dreamweaver-Benutzerhandbuch
- Einführung
- Dreamweaver und Creative Cloud
- Arbeitsbereiche und Ansichten in Dreamweaver
- Sites einrichten
- Dreamweaver-Sites
- Lokale Version Ihrer Site einrichten
- Verbindung mit einem Publishing Server herstellen
- Testserver einrichten
- Site-Einstellungen importieren und exportieren
- Vorhandene Websites von einem Remote-Server in Ihren lokalen Site-Stammordner kopieren
- Barrierefreie Funktionen in Dreamweaver
- Erweiterte Einstellungen
- Site-Voreinstellungen für die Übertragung von Dateien festlegen
- Proxyserver-Einstellungen in Dreamweaver festlegen
- Dreamweaver-Einstellungen mit Creative Cloud synchronisieren
- Git in Dreamweaver verwenden
- Dateien verwalten
- Dateien öffnen und erstellen
- Dateien und Ordner verwalten
- Dateien vom Server abrufen/auf dem Server bereitstellen
- Dateien einchecken und auschecken
- Dateien synchronisieren
- Dateien auf Unterschiede vergleichen
- Dateien und Ordner in Ihrer Dreamweaver-Site von Operationen ausschließen (Cloaking)
- Design Notes für Dreamweaver-Sites aktivieren
- Potenzielle Gatekeeper-Angriffe verhindern
- Layout und Entwurf
- CSS
- Grundlegendes zu Cascading Stylesheets
- Gestalten von Seitenlayouts mit CSS Designer
- CSS-Präprozessoren in Dreamweaver verwenden
- Voreinstellungen für CSS-Stile in Dreamweaver festlegen
- CSS-Regeln in Dreamweaver verschieben
- Inline-CSS in Dreamweaver in eine CSS-Regel umwandeln
- Mit div-Tags arbeiten
- Verläufe auf den Hintergrund anwenden
- CSS3-Übergangseffekte in Dreamweaver erstellen und bearbeiten
- Code formatieren
- Seiteninhalt und Elemente
- Seiteneigenschaften festlegen
- CSS-Eigenschaften von Überschriften und Links festlegen
- Mit Text arbeiten
- Text, Tags und Attribute suchen und ersetzen
- DOM-Bedienfeld
- In der Live-Ansicht bearbeiten
- In Dreamweaver die Kodierung von Dokumenten festlegen
- Elemente im Dokumentfenster auswählen und anzeigen
- Texteigenschaften im Eigenschafteninspektor festlegen
- Rechtschreibprüfung für Web-Seiten durchführen
- Horizontale Linien in Dreamweaver verwenden
- Schriftkombinationen in Dreamweaver hinzufügen und ändern
- Mit Elementen arbeiten
- Datumsangaben in Dreamweaver einfügen und aktualisieren
- In Dreamweaver Favoritenelemente erstellen und verwalten
- Bilder in Dreamweaver einfügen und bearbeiten
- Medienobjekte hinzufügen
- Videos in Dreamweaver einfügen
- HTML5-Videos einfügen
- SWF-Dateien einfügen
- Audioeffekte hinzufügen
- In Dreamweaver HTML5-Audiodateien einfügen
- Mit Bibliothekselementen arbeiten
- Arabischen und hebräischen Text in Dreamweaver verwenden
- Hyperlinks und Navigation
- jQuery-Widgets und -Effekte
- Websites programmieren
- In Dreamweaver programmieren
- Programmierumgebung in Dreamweaver
- Voreinstellungen für Code festlegen
- Codehervorhebung anpassen
- Code schreiben und bearbeiten
- Codehinweise und Codevervollständigung
- Code aus- und einblenden
- Code mit Codefragmenten wiederverwenden
- Code-Linting
- Code optimieren
- Code in der Entwurfsansicht bearbeiten
- Mit den Head-Inhalten von Seiten arbeiten
- Server-Side Includes in Dreamweaver einfügen
- Tag-Bibliotheken in Dreamweaver verwenden
- Benutzerdefinierte Tags in Dreamweaver importieren
- JavaScript-Verhalten (allgemeine Anweisungen)
- Integrierte JavaScript-Verhalten anwenden
- XML und XSLT
- Server-seitige XSL-Transformationen in Dreamweaver durchführen
- Client-seitige XSL-Transformationen in Dreamweaver durchführen
- Zeichenentitäten für XSLT in Dreamweaver einfügen
- Code formatieren
- Produktübergreifende Arbeitsabläufe
- Erweiterungen für Dreamweaver installieren und verwenden
- In-App-Updates in Dreamweaver
- Microsoft Office-Dokumente in Dreamweaver einfügen (nur Windows)
- Mit Fireworks und Dreamweaver arbeiten
- Mithilfe von Contribute Inhalte in Dreamweaver-Sites bearbeiten
- Dreamweaver-Business Catalyst-Integration
- Personalisierte E-Mail-Kampagnen erstellen
- Vorlagen
- Dreamweaver-Vorlagen
- Vorlagen und vorlagenbasierte Dokumente erkennen
- Dreamweaver-Vorlagen erstellen
- Bearbeitbare Bereiche in Vorlagen erstellen
- Wiederholende Bereiche und Tabellen in Dreamweaver erstellen
- Optionale Bereiche in Vorlagen verwenden
- Bearbeitbare Tag-Attribute in Dreamweaver definieren
- Verschachtelte Vorlagen in Dreamweaver erstellen
- Vorlagen bearbeiten, aktualisieren und löschen
- XML-Inhalte in Dreamweaver exportieren und importieren
- Vorlage auf ein vorhandenes Dokument anwenden oder aus dem Dokument entfernen
- Inhalte in Dreamweaver-Vorlagen bearbeiten
- Syntaxregeln für Vorlagen-Tags in Dreamweaver
- Markierungseinstellungen für Vorlagenbereiche festlegen
- Vorteile von Vorlagen in Dreamweaver
- Mobilgeräte und Multiscreen
- Dynamische Websites, Seiten und Web-Formulare
- Grundlegendes zu Web-Anwendungen
- Computer für die Entwicklung von Anwendungen einrichten
- Fehlerbehebung bei Datenbankverbindungen
- Verbindungsskripts in Dreamweaver entfernen
- Dynamische Seiten entwerfen
- Quellen für dynamischen Inhalt – Überblick
- Quellen für dynamische Inhalte definieren
- Dynamische Inhalte in Seiten einfügen
- Dynamischen Inhalt in Dreamweaver ändern
- Datenbankdatensätze anzeigen
- Live-Daten in Dreamweaver bereitstellen und Fehlerbehebung bei der Anzeige
- Benutzerdefinierte Serververhalten in Dreamweaver hinzufügen
- Formulare mit Dreamweaver erstellen
- Formulare zum Sammeln von Benutzerinformationen verwenden
- ColdFusion-Formulare in Dreamweaver erstellen und aktivieren
- Web-Formulare erstellen
- Verbesserte HTML5-Unterstützung für Formularelemente
- Formularentwicklung mit Dreamweaver
- Visuelles Entwickeln von Anwendungen
- Master- und Detailseiten in Dreamweaver erstellen
- Such- und Ergebnisseiten erstellen
- Datensatz-Einfügeseiten erstellen
- Datensatz-Aktualisierungsseiten in Dreamweaver erstellen
- Datensatz-Löschseiten in Dreamweaver erstellen
- ASP-Befehle zum Ändern von Datenbanken in Dreamweaver verwenden
- Registrierungsseiten erstellen
- Anmeldeseiten erstellen
- Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können
- Ordner in ColdFusion mit Dreamweaver schützen
- ColdFusion-Komponenten in Dreamweaver verwenden
- Websites testen, in der Vorschau anzeigen und veröffentlichen
- Fehlerbehebung
Hier erfahren Sie, wie Sie Ihre Webseiten in der Live-Ansicht entwerfen, bearbeiten und eine Vorschau dafür anzeigen sowie Elemente neu anordnen oder einfügen, Selektoren anwenden, Bildattribute bearbeiten, Text einfügen, bearbeiten und formatieren, ohne in die Codeansicht umzuschalten.
Für die Live-Ansicht wird eine auf Chrome basierende Rendering-Engine 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.
Die Live-Ansicht wird sofort aktualisiert, um die Änderungen auf der Seite anzuzeigen.
Bei der Bearbeitung einer Seite in der Live-Ansicht können Sie die folgenden Komponenten verwenden:
- DOM-Bedienfeld: („Fenster“ > „DOM“) Zeigt die HTML-Struktur des Dokuments an und ermöglicht das Kopieren und Einfügen, Duplizieren, Löschen und Umstrukturieren der Elemente in der Ansicht. Weitere Informationen finden Sie unter DOM-Bedienfeld.
- Elementanzeige: Befindet sich über dem ausgewählten HTML-Element in der Live-Ansicht. In der Elementanzeige können Sie HTML-Elementen Klassen und IDs zuordnen. Weitere Informationen finden Sie unter HTML-Elemente mit Klassen und IDs verknüpfen.
- Schnellansicht-Eigenschafteninspektor: Wird angezeigt, wenn Sie in der Elementanzeige auf das Stapelsymbol klicken oder Text auswählen. Mit dem Schnellansicht-Eigenschafteninspektor können Sie in der Live-Ansicht Bildattribute bearbeiten und Text formatieren. Weitere Informationen finden Sie unter Schnellansicht-Eigenschafteninspektor.
- Live-Ansicht-Eigenschafteninspektor: Befindet sich unter dem Dokumentfenster und erlaubt die Bearbeitung verschiedener HTML- und CSS-Eigenschaften in der Live-Ansicht. Weitere Informationen finden Sie unter Live-Ansicht-Eigenschafteninspektor.
- Bedienfeld „Einfügen“: („Fenster“ > „Einfügen“) Hier können Sie Elemente per Drag & Drop direkt aus dem Bedienfeld in die Live-Ansicht ziehen. Weitere Informationen finden Sie unter Elemente direkt in die Live-Ansicht einfügen.
Wenn auf der Seite dynamische Änderungen ausgeführt werden (aufgrund von Skripts) oder wenn in den Metadaten eine automatische Aktualisierung festgelegt wurde, gehen die Änderungen, die Sie in der Live-Ansicht vornehmen, unter Umständen verloren.
Tipps:
- Wenn in der Live-Ansicht während der Bearbeitung einer Seite keine Inhalte mehr angezeigt werden, deaktivieren Sie die Live-Ansicht und aktivieren sie dann erneut.
- Falls die Änderungen nicht auf der Seite dargestellt werden, klicken Sie in der Live-Ansicht auf die Schaltfläche „Aktualisieren“.
Inhalte, die dynamisch über Datenbanken oder JavaScript gerendert werden, sowie nicht bearbeitbare Bereiche in Vorlagen können nicht in der Live-Ansicht bearbeitet werden. Wenn Sie auf diese Elemente in der Live-Ansicht klicken, werden sie mit einem grauen Rahmen dargestellt, der anzeigt, dass die Elemente nicht bearbeitet werden können.
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.
Elementanzeige
Mit der Elementanzeige können Sie HTML-Elementen direkt in der Live-Ansicht Klassen und IDs zuweisen. Die verfügbaren Klassen und IDs werden in der Elementanzeige als Hinweise angegeben, damit Sie die benötigte Option ganz einfach auswählen können.
Sie können Tabellen auch mit der Elementanzeige formatieren. Weitere Informationen finden Sie unter dem Link.
HTML-Elemente mit Klassen und IDs verknüpfen
Klicken Sie in der Live-Ansicht auf das benötigte Element. Die Elementanzeige wird mit der derzeit zugeordneten Klasse und ID angezeigt.
In der Live-Ansicht können Sie außerdem im DOM-Bedienfeld auf das HTML-Element klicken, um die Elementanzeige für das Element aufzurufen.
- 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 CSS Designer können Sie dann einen Selektor definieren, der diese Klasse oder ID enthält. Weitere Informationen finden Sie unter Seitenlayouts mit CSS Designer gestalten.
Die Position der Elementanzeige für Übergangselemente wird nicht aktualisiert, wenn der Übergang ausgelöst wird. Die Änderungen, die Sie in der Elementanzeige vornehmen, werden jedoch übernommen, auch wenn sie sich nicht an demselben Ort wie das Übergangselement befindet.
Schnellansicht-Eigenschafteninspektor
Schnellansicht-Eigenschafteninspektor für Bilder
Der Schnellansicht-Eigenschafteninspektor wird in der Live-Ansicht direkt über den ausgewählten Elementen angezeigt. Mit diesem Eigenschafteninspektor können Sie in der Live-Ansicht Attribute bearbeiten und Text formatieren.
Um den Schnellansicht-Eigenschafteninspektor ein- oder auszublenden, drücken Sie Strg+Alt+H (Windows)/Befehl+Ctrl+H (Mac).
Das Code-Navigator-Symbol wird in der Live-Ansicht nicht angezeigt, wenn Sie den Schnellansicht-Eigenschafteninspektor verwenden.
Für Bootstrap-Dokumente bietet der Schnellansicht-Eigenschafteninspektor Optionen, mit denen Sie Bilder anpassen können.
- Auf Form beschränken: Klicken Sie hier, um die Ecken von Bildern so anzupassen, dass sie eine bestimmte Form aufweisen, z. B. kreisförmig, mit abgerundeten Ecken oder als Miniaturbild.
- Bild responsiv machen: Klicken Sie hier, um Responsive-Bilder zu erstellen, sodass sie automatisch an verschiedene Bildschirmgrößen angepasst werden.
Schnellansicht-Eigenschafteninspektor für Text
Sie können den Schnellansicht-Eigenschafteninspektor für Text in der Live-Ansicht verwenden, um Text schnell zu formatieren, einzurücken und um Hyperlinks zu erstellen. Der Schnellansicht-Eigenschafteninspektor wird angezeigt, wenn Sie auf das Ordnersymbol für die Textelemente h1-h6, pre oder p klicken.
- Mit der Formatoption können Sie das Elementtag schnell auf eines der folgenden Tags festlegen: h1-h6, p und pre.
- Mit der Verknüpfungsoption können Sie einen Hyperlink für den Text festlegen.
- Mit den Symbolen für fett und kursiv können Sie dem Textelement die Tags <strong> und <em> hinzufügen.
- Die Einzugssymbole helfen Ihnen, Texteinrückungen festzulegen oder zu entfernen. Dazu wird das Tag <blockquote> in den Code eingefügt bzw. entfernt.
In Bootstrap-Dokumenten können Sie mit dem Schnellansicht-Eigenschafteninspektor für Text Textelemente auch ausrichten und transformieren.
- Ausrichten: Hiermit werden Bootstrap-Textelemente linksbündig, zentriert, rechtsbündig oder im Blocksatz ausgerichtet, indem die entsprechenden Klassen angewendet werden.
- Transformieren: Hiermit wird die Groß-/Kleinschreibung eines Elements geändert, indem Klassen für Kleinbuchstaben, Großbuchstaben oder gemischte Groß- und Kleinschreibung angewendet werden.
Live-Ansicht-Eigenschafteninspektor
Beim Live-Ansicht-Eigenschafteninspektor handelt es sich um den herkömmlichen Eigenschafteninspektor unter dem Dokumentfenster.
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 Live-Ansicht-Eigenschafteninspektors hängt vom ausgewählten Element ab.
Der Live-Ansicht-Eigenschafteninspektor ist für Seiten mit fließendem Raster nicht verfügbar.
Um die Hilfe zu einem bestimmten Eigenschafteninspektor anzuzeigen, klicken Sie auf die Schaltfläche „Hilfe“ rechts oben im Eigenschafteninspektor oder wählen Hilfe im Menü Optionen.
Im Folgenden sind die Elemente aufgeführt, die Sie mit dem Live-Ansicht-Eigenschafteninspektor bearbeiten können:
- HTML
- CSS
- Bild
- Tabelle
- Media – nur HTML5-Audio und HTML5-Video
- Anchor
- Formular
- FormButton
- FormTextArea
- FormSubmitButton
- FormRange
- FormRadioButton
- FormList
- FormImage
- FormFile
- FormCheckBox
- FormColor
- FormDate
- FormDateTime
- FormDateTimeLocal
- FormMonth
- FormTime
- FormWeek
- FormNumber
- FormLabel
- FormHidden
- FormGeneric
jQuery UI-bezogene und vorlagenbezogene Eigenschaften können im Live-Ansicht-Eigenschafteninspektor nicht bearbeitet werden.
HTML-Attribute bearbeiten
Mit dem Schnellansicht-Eigenschafteninspektor können Sie HTML-Attribute von Bildern ganz einfach direkt in der Live-Ansicht hinzufügen, bearbeiten oder entfernen.
Der Schnellansicht-Eigenschafteninspektor für Bilder erscheint, wenn Sie auf das Stapelsymbol klicken. Abhängig davon, wo gerade Platz ist, wird der Eigenschafteninspektor rechts, links, über oder unter dem Bild angezeigt. Sie können den Eigenschafteninspektor auf eine beliebige Position verschieben, die Ihnen gerade angenehm ist.
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 Live-Ansicht anpassen.
Die Änderungen, die Sie vornehmen, werden gespeichert, wenn Sie einen der folgenden Schritte ausführen:
- Sie klicken auf eine beliebige Stelle außerhalb des Eigenschafteninspektors
- Sie drücken die Eingabetaste
- Sie drücken die Tabulatortaste, um ein weiteres Attribut im Eigenschafteninspektor zu bearbeiten
- Sie speichern die Datei
Wenn Bilder dynamisch geladen werden, können Sie den Schnellansicht-Eigenschafteninspektor für das Bild verwenden, um die Attribute zu überprüfen, die für das Bild festgelegt sind.
Text direkt in der Live-Ansicht bearbeiten
Sie können Textelemente direkt in der Live-Ansicht bearbeiten. Dazu klicken Sie einfach auf das Textelement. Wenn Sie sich im Elementanzeigemodus befinden, drücken Sie die Eingabetaste, um den Text zu bearbeiten.
Wenn Sie die Eingabetaste drücken, nachdem der Bearbeitungsmodus aktiviert ist, kann das Ergebnis, je nach Position der Einfügemarke vor dem Drücken der Eingabetaste, variieren. Die Änderungen ähneln dem, was geschieht, wenn Sie in der Entwurfsansicht während der Bearbeitung von Text die Eingabetaste drücken.
Ein orangefarbener Rahmen um das Textelement zeigt an, dass der Bearbeitungsmodus aktiv ist.
Die Einfügemarke wird an der Stelle platziert, auf die Sie klicken. Um den gesamten Text im Textelement auszuwählen, klicken Sie dreimal auf das Textelement.
Das Ausschneiden, Kopieren und Einfügen und Rückgängigmachen wird unterstützt, wenn Sie Text in der Live-Ansicht bearbeiten. Text wird ohne Formatierung (als reiner Text) eingefügt.
Dank der Funktion zur automatischen Synchronisation werden alle Änderungen, die in der Live-Ansicht vorgenommen werden, automatisch mit der Codeansicht synchronisiert.
In der folgenden Tabelle ist aufgelistet, welche Szenarien bei der Textbearbeitung in der Live-Ansicht unterstützt und welche nicht unterstützt werden:
|
Nicht unterstützt |
Alle HTML-Elemente, die Text enthalten können, und semantische Tags |
Bearbeiten ungültiger oder fehlerhafter Tags. Wenn der HTML-Code fehlerhafte oder ungültige Tags enthält, richtet sich die Bearbeitung solcher Tags danach, wie diese Tags vom Browser interpretiert werden:
|
Von Vorlagen in der Live-Ansicht abgeleitete HTML-Dateien |
Bearbeiten von jQuery-Seiten |
Strukturelle Tags, die Inline-Elemente enthalten. Diese werden zusammen in einem Bearbeitungsfeld präsentiert. |
Bearbeiten von Tags mit statischem und dynamischem Inhalt. Sie können zwar die Selektoren für solche Tags bearbeiten, der Text kann jedoch nicht direkt in der Live-Ansicht bearbeitet werden. Wenn Sie auf diese Elemente in der Live-Ansicht doppelklicken, werden sie mit einem grauen Rahmen dargestellt, der anzeigt, dass die Textbearbeitung nicht unterstützt wird. |
Statischer Text in dynamischen Seiten |
|
Text, der Entitäten enthält |
|
Text formatieren
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.
Elemente direkt in die Live-Ansicht einfügen
Vom Bedienfeld Einfügen können Sie Elemente direkt an die gewünschte Position im Dokument in der Live-Ansicht ziehen. Visuelle Hilfsmittel in der Live-Ansicht wie Live-Hilfslinien und DOM-Symbole helfen Ihnen dabei, die gezogenen Elemente in Bezug auf das Element, auf das der Mauszeiger zeigt, zu platzieren.
Live-Hilfslinien (in Grün) werden eingeblendet, wenn Sie mit der Maus auf verschiedene Elemente der Seite zeigen, bevor Sie das Element ablegen. Diese Hilfslinien zeigen an, wo genau das Element beim Einfügen einrastet. Die Hilfslinien können über, unter, links oder rechts von dem Element erscheinen, auf das die Maus zeigt.
- Oberhalb/unterhalb: Beim Zeigen auf Elemente oder Tags außer Inline-Tags wird die Hilfslinie ober- oder unterhalb eingeblendet. Wenn Sie mit der Maus auf eine Stelle in der oberen Hälfte des Elements zeigen, wird eine Hilfslinie über dem betreffenden Element angezeigt. Wenn Sie mit der Maus auf eine Stelle in der unteren Hälfte des Elements zeigen, wird die Hilfslinie unter dem betreffenden Element angezeigt.
- Links/rechts: Die Hilfslinie wird beim Zeigen auf Inline-Tags wie z. B. <a> oder <span> eingeblendet oder beim Zeigen auf Tags, für die die Eigenschaft „float“ aktiviert wurde.
Wenn Sie kurz warten, bevor Sie das Element ablegen, wird das DOM-Symbol (</>) angezeigt. Wenn Sie dann mit dem Mauszeiger auf dieses Symbol zeigen, wird das DOM-Bedienfeld geöffnet und Sie können das Element innerhalb der DOM-Struktur des Dokuments ablegen.
Um Elemente direkt in der Live-Ansicht einzufügen, führen Sie die folgenden Schritte aus:
-
Wechseln Sie in die Live-Ansicht.
-
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.
Tipp: Wenn es nicht möglich ist, ein Element aus dem Bedienfeld „Einfügen“ auf die Seite zu ziehen, starten Sie den Computer neu und versuchen es erneut.
-
Legen Sie das Element mithilfe der Hilfslinien über, unter, rechts oder links von einem Element ab. Oder legen Sie das Element an einer bestimmten Position in der Dokumentstruktur ab, indem Sie auf </> klicken und das DOM-Bedienfeld verwenden.
Das Element wird in die Seite eingefügt und dort hervorgehoben.
Auswahlrechteck
Mithilfe des Auswahlrechtecks können Sie einfach einen Textblock auswählen, indem Sie in der Live-Ansicht in das Tag klicken und ziehen. Wenn Sie in älteren Dreamweaver-Versionen (vor der Version 2014.1) in einen Textblock klicken und ziehen, wird das Element als Ganzes verschoben.
Mit dem Auswahlrechteck in der Live-Ansicht können nur Vorgänge ausgeführt werden, die auch vom Browser unterstützt werden.
Auswahl und Verschieben von Elementen per Drag & Drop
In der Live-Ansicht können Sie ein Element verschieben, indem Sie auf den Tag-Namen klicken und es dann an die gewünschte Position ziehen. Wenn Sie auf einen Tag-Namen klicken, wird der Hand-Cursor angezeigt, um darauf hinzuweisen, dass das Tag verschoben werden kann. Sobald Sie beginnen, das Tag zu ziehen, erscheinen Hilfslinien, die Sie bei der genauen Platzierung unterstützen.
Wenn Sie in der Live-Ansicht auf den Tag-Namen klicken, wird in der Codeansicht der gesamte Inhalt des Tags ausgewählt.
Code in der Live-Ansicht prüfen
Mit dem Prüfmodus und der Live-Ansicht können Sie HTML-Elemente und ihre zugeordneten CSS-Stile schnell bestimmen. Wenn die Live-Ansicht aktiviert ist, können Sie mit dem Mauszeiger auf Elemente der Seite zeigen, um für Elemente auf Blockebene CSS-Box-Modell-Attribute einzublenden.
Im Prüfmodus wird eine visuelle Darstellung des Box-Modells angezeigt. Zusätzlich können Sie den CSS Designer verwenden, während Sie in der Live-Ansicht mit der Maus auf Elemente zeigen.
Wenn der CSS Designer im Modus „Aktuell“ geöffnet ist und Sie mit der Maus auf ein Element auf der Seite zeigen, werden die Regeln und Eigenschaften für dieses Element automatisch im CSS Designer angezeigt.
Die Werte in allen anderen Ansichten bzw. Bedienfeldern, die mit diesem Element verbunden sind, werden ebenfalls aktualisiert (z. B. „Codeansicht“, der Tag-Selektor und der Eigenschafteninspektor).
-
Klicken Sie auf „Ansicht“ > „Überprüfen“, während das Dokument im Dokumentfenster geöffnet ist.
Hinweis:Wenn Sie sich noch nicht in der Live-Ansicht befinden, wird diese automatisch mit dem Prüfmodus aktiviert.
-
Zeigen Sie mit der Maus auf Seitenelemente, um das CSS-Box-Modell einzublenden. Im Prüfmodus werden für Rahmen, Ränder, Abstände und Inhalte verschiedene Farben verwendet.
-
Optional: Wenn Sie auf der Tastatur die linke Pfeiltaste drücken, wird das übergeordnete Element des jeweils aktiven Elements hervorgehoben. Wenn Sie die rechte Pfeiltaste drücken, wird das untergeordnete Element wieder hervorgehoben.
-
Optional: Klicken Sie auf ein Element, um die Hervorhebung zu fixieren.
Hinweis:Wenn Sie auf ein Element klicken, um die Hervorhebung zu fixieren, wird der Prüfmodus beendet.
Tastaturnavigation in der Live-Ansicht
Für eine schnellere Bearbeitung können Sie in der Elementanzeige Seitenelemente oder Selektoren mithilfe der Tastatur durchlaufen.
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 können Sie leichter auf verschachtelte und umschlossene Elemente zugreifen.
Wenn Sie ein Element mithilfe der Nach-oben- oder Nach-unten-Taste auswählen, wird die Elementanzeige für dieses Element geöffnet. Dort können Sie zu den Selektoren navigieren oder die Eingabetaste drücken, um den Text direkt in der Live-Ansicht zu bearbeiten.
Selektoren durchlaufen
Wenn Sie in der Elementanzeige die Tabulatortaste drücken, werden die Selektoren durchlaufen. Der Selektor mit dem Fokus ist durch einen bernsteinfarbenen Rahmen gekennzeichnet (siehe Abbildung unten).
Wenn Sie nach dem zuletzt zugewiesenen Selektor noch einmal die Tabulatortaste drücken, wird ein Textfeld zum Hinzufügen eines Selektors eingeblendet.
Mit Strg+[ oder Befehl+[ wählen Sie das übergeordnete Element aus, und mit Strg+] oder Befehl+] wählen Sie das untergeordnete Elemente aus.
Bearbeitung in der Live-Ansicht deaktivieren
Wenn Sie die Elementanzeige und den Schnellansicht-Eigenschafteninspektor in der Live-Ansicht nicht verwenden möchten, können Sie diese Bearbeitungsfunktionen deaktivieren.
Tastaturbefehle:
- (Windows) Strg+Alt+H
- (Mac) Befehl+Ctrl+H
-
Wechseln Sie zur Live-Ansicht und klicken Sie auf „Ansicht“ > „Live-Ansicht-Optionen“.
-
Wählen Sie „Live-Ansicht ausblenden“.
Nicht unterstützte Szenarien
- Dreaweaver-Vorlagendateien können in der Live-Ansicht nicht bearbeitet werden.
- Tags mit statischem und dynamischem Inhalt. Sie können zwar die Selektoren für solche Tags bearbeiten, der Text kann jedoch nicht in der Live-Ansicht bearbeitet werden. Wenn Sie auf diese Elemente in der Live-Ansicht doppelklicken, werden sie mit einem grauen Rahmen dargestellt, der anzeigt, dass die Textbearbeitung nicht unterstützt wird.
- Tags, auf die Pseudoselektoren angewendet wurden. Wenn Sie versuchen, diese Elemente in der Live-Ansicht zu bearbeiten, kann dies zu unerwarteten Ergebnissen führen.
- CSS-Raster werden in der Live-Ansicht nur in Dreamweaver 2019 und höher unterstützt.