In der Live-Ansicht bearbeiten

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.

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.

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.

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

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.

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

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:

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:

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. 

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

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. 

Bearbeitung in der Live-Ansicht deaktivieren

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.