Erfahren Sie, wie Sie Ihre Webseiten in der Live-Ansicht entwerfen, bearbeiten und eine Vorschau dafür anzeigen. 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.

Hinweis:

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.

Ein Element, das in der Live-Ansicht mit einem grauen Rahmen dargestellt wird, kann nicht bearbeitet werden
Ein Element, das in der Live-Ansicht mit einem grauen Rahmen dargestellt wird, kann nicht bearbeitet werden

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.

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.

Die Elementanzeige für das Element
Die Elementanzeige für das Element

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

Hinweis:

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.

Der Schnellansicht-Eigenschafteninspektor, der in der Live-Ansicht direkt über den Seitenelementen angezeigt wird
Der Schnellansicht-Eigenschafteninspektor, der in der Live-Ansicht direkt über den Seitenelementen angezeigt wird

Um den Schnellansicht-Eigenschafteninspektor ein- oder auszublenden, drücken Sie Strg+Alt+H (Windows)/Befehl+Ctrl+H (Mac).

Hinweis:

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.

Schnellansicht-Eigenschafteninspektor für Bilder in Bootstrap-Dokumenten
Schnellansicht-Eigenschafteninspektor für Bilder in Bootstrap-Dokumenten

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

Schnellansicht-Eigenschafteninspektor für Text
Schnellansicht-Eigenschafteninspektor für Text

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

Hinweis:

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

Hinweis:

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. 

Schnellansicht-Eigenschafteninspektor zum Bearbeiten von Attributen
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 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 doppelklicken Sie einfach auf das Textelement. Sie können auch auf das Textelement klicken, um die Elementanzeige zu öffnen, und dann die Eingabetaste drücken.

Hinweis:

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. 

Ein orangefarbener Rahmen um das Textelement zeigt an, dass der Bearbeitungsmodus aktiv ist.
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.

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.

In der folgenden Tabelle ist aufgelistet, welche Szenarien bei der Textbearbeitung in der Live-Ansicht unterstützt und welche nicht unterstützt werden:

Unterstützt Nicht unterstützt
Alle HTML-Elemente, die Text enthalten können

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:

  • Besteht die Browser-Korrektur darin, das fehlerhafte Tag zu schließen, können Sie die Tags vielleicht in der Live-Ansicht bearbeiten.
  • Fügt der Browser beim Rendern ein neues Tag hinzu, können Sie die fehlerhaften oder ungültigen Tags nicht bearbeiten.

 

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
 
Seiten mit fließendem Raster in der Live-Ansicht ohne Raster
 
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.

Schnellansicht-Eigenschafteninspektor zum Formatieren von Text
Schnellansicht-Eigenschafteninspektor zum Formatieren von Text

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.
Live-Hilfslinien über und unter dem Element
Live-Hilfslinien über und unter dem Element

  • 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.
Live-Hilfslinien rechts und links vom Element
Live-Hilfslinien rechts und links vom Element

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:

  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.

    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.

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

Hinweis:

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.

Klicken Sie in der Live-Ansicht auf den Tag-Namen, um in der Codeansicht den gesamten Inhalt des Tags auszuwählen
Klicken Sie in der Live-Ansicht auf den Tag-Namen, um in der Codeansicht den gesamten Inhalt des Tags auszuwählen

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

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

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

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

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

Das Bild erhält zuerst den Fokus
Hier erhält zuerst das Bild den Fokus. Wird die Nach-unten-Taste gedrückt, wird die Textpassage unter dem Bild ausgewählt (siehe die nächste Abbildung).

Der fett ausgezeichnete Text ist ausgewählt
Der fett ausgezeichnete Text ist ausgewählt.

Hier ist die Textpassage ausgewählt
Hier ist die Textpassage ausgewählt. Wenn Sie nun erneut die Nach-unten-Taste drücken, wird das nächste Element in der DOM-Struktur ausgewählt, nämlich der fett ausgezeichnete Text (siehe die nächste Abbildung).


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

Der Selektor mit dem Fokus wird hervorgehoben
Der Selektor mit dem Fokus ist durch einen bernsteinfarbenen Rahmen gekennzeichnet.

Wenn Sie nach dem zuletzt zugewiesenen Selektor noch einmal die Tabulatortaste drücken, wird ein Textfeld zum Hinzufügen eines Selektors eingeblendet. 

Hinweis:

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

  1. Wechseln Sie zur Live-Ansicht und klicken Sie auf „Ansicht“ > „Live-Ansicht-Optionen“.

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie