Operation Manual

Nach oben
Nach oben
Um ein Element oder einen Knoten auszuwählen, klicken Sie auf
das Element oder den Knoten. Zum Ein- und Ausblenden eines
Elements oder eines Knotens klicken Sie auf das HTML-Tag oder
doppelklicken auf den Selektor neben dem Tag.
Um ein Element oder einen Knoten zu duplizieren, klicken Sie mit
der rechten Maustaste auf das Element oder den Knoten und
wählen „Duplizieren“. Wenn Sie ein Element duplizieren, dem eine
ID zugeordnet ist, wird die ID für das neue Element (Duplikat) um
eins erhöht.
Um ein Element oder einen Knoten zu kopieren, klicken Sie mit
der rechten Maustaste auf das Element oder den Knoten und
Tastaturbefehle:
Duplizieren: Strg+D
(Windows)/Befehl+D (Mac)
Löschen: Entf oder Rücktaste
Kopieren: Strg+C
(Windows)/Befehl+C (Mac)
Einfügen: Strg+V
(Windows)/Befehl+V (Mac)
Rückgängig: Strg+Z
(Windows)/Befehl+Z (Mac)
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.
Elementschnellansicht verwenden
1. Öffnen Sie das gewünschte Dokument und öffnen Sie anschließend das DOM-
Bedienfeld, 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.
Das HTML-Markup des ausgewählten Elements wird im DOM-Bedienfeld
hervorgehoben.
Der angewendete Selektor wird im CSS Designer hervorgehoben.
Der entsprechende Code wird in der Codeansicht hervorgehoben.
Das relevante Tag wird im Tag-Selektor (in blau) hervorgehoben.
Sie können auch ein HTML-Element im DOM-Bedienfeld auswählen. Beim Klicken auf
ein beliebiges Element im DOM-Bedienfeld geschieht Folgendes:
In der Live-Ansicht wird per Bildlauf das entsprechende Element angezeigt.
Wenn die Codeansicht geöffnet ist, wird dort der Code des entsprechenden Elements
angezeigt.
Im CSS Designer (Fenster „Selektoren“) wird der nächste Selektor in der Nähe des
Elements angezeigt (ähnlich wie beim Klicken auf das Element in der Live-Ansicht).
Das Tag wird im Tag-Selektor hervorgehoben.
Durch diese Synchronisierung zwischen den verschiedenen Ansichten und dem
CSS Designer können Sie auf einen Blick das HTML-Markup und den Stil des
ausgewählten Elements visualisieren.
3. Bearbeiten Sie das Element (bzw. den HTML- oder CSS-Code). Weitere Informationen
zum Bearbeiten des HTML-Markups im DOM-Bedienfeld finden Sie unter HTML-Struktur
mit dem DOM-Bedienfeld bearbeiten. Weitere Informationen zum CSS Designer finden
Sie unter Bedienfeld „CSS Designer“.
HTML-Struktur mit dem DOM-Bedienfeld bearbeiten
Das derzeit auf der Seite ausgewählte Element wird im DOM-Bedienfeld hervorgehoben. Mithilfe der
Pfeiltasten können Sie zu jedem beliebigen Knoten oder Element navigieren.
97