Adobe Dreamweaver CC

HTML-Struktur visualisieren und ändern

Die Elementschnellansicht ermöglicht eine Darstellung der HTML-Seitenelemente in Form einer DOM-Baumstruktur, die die Bearbeitung Ihrer Web-Seiten erleichtert. (Versuchen Sie es, 30 Min.)

VonTommi West, Dan Carr

HTML-Struktur visualisieren und ändern

30 Min.

Die Elementschnellansicht von Dreamweaver gibt die HTML-Struktur Ihrer Web-Seiten übersichtlich wieder.  

Vorbereitung

Dateien herunterladen Beispieldateien zum Üben (ZIP, 2 MB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Die interaktive Baumhierarchie der Elementschnellansicht erleichtert die Navigation innerhalb Ihrer Layouts. Die Gliederung der DOM-Struktur wird als Liste dargestellt. Per Klicken, Ziehen und rechten Mausklick lassen sich HTML-Elemente auswählen, neu anordnen, löschen, kopieren, einfügen oder duplizieren.

In diesem Artikel erhalten Sie einen Überblick über die Funktionen der Elementschnellansicht. Anhand der Bearbeitung eines Beispielprojekts lernen Sie diese Schritt für Schritt kennen.

Unser besonderer Dank gilt an dieser Stelle Dan Carr für die Entwicklung des Beispielprojekts für dieses Tutorial. Wie Sie die Beispielseite erstellen, ist im Artikel HTML5- und CSS-Code schneller verfassen ausführlich beschrieben. Im Video 1 demonstriert Dan Carr die Funktionen der Elementschnellansicht. Testen Sie die Funktionen anschließend selbst, indem Sie der Anleitung in diesem Artikel folgen.

Video 1: Anzeige und Definition der HTML-Struktur mithilfe der Elementschnellansicht

Gehen Sie wie folgt vor, um Seitenelemente mithilfe der Elementschnellansicht zu strukturieren:

  1. Starten Sie Dreamweaver CC.
  2. Wählen Sie „Datei“ > „Öffnen“. Navigieren Sie zur Datei „dw_example.html“. Aktivieren Sie die Entwurfs- und Live-Ansicht am oberen Fensterrand (siehe Abbildung 1).
Abbildung 1: Aktivieren Sie die Entwurfs- und Live-Ansicht.
Abbildung 1: Aktivieren Sie die Entwurfs- und Live-Ansicht.

  1. Klicken Sie auf das </>-Symbol unten links im Dokumentfenster, um die Elementschnellansicht zu öffnen (siehe Abbildung 2).
Abbildung 2: Die Elementschnellansicht hebt das ausgewählte Element innerhalb der Liste hervor.
Abbildung 2: Die Elementschnellansicht hebt das ausgewählte Element innerhalb der Liste hervor.

Sie sehen, dass der verknüpfte Text mit der Klasse „.hero-bright“ in der hierarchischen Liste ausgewählt ist. Sehen Sie sich im Arbeitsbereich um. Dasselbe Element ist auch in der Live-Ansicht, im Tag-Selektor und im CSS Designer hervorgehoben. Wenn Sie kurz zur geteilten Ansicht wechseln, können Sie erkennen, dass das entsprechende Element auch in der Code-Ansicht ausgewählt ist.

Egal welche Arbeitsweise Sie bevorzugen und wie Sie ein Element auswählen – die restlichen Ansichten in Dreamweaver werden automatisch mit der aktuellen Auswahl aktualisiert.

Die interaktive Liste erleichtert die Auswahl von Elementen und gewährt einen Überblick über Ihre Web-Seite. Wie Sie in Abbildung 3 sehen, weist das H1-Element drei Unterelemente auf.

  1. Wählen Sie das SPAN-Element mit der Klasse „.hero-bright“ unterhalb des hervorgehobenen A-Elements aus. Die Auswahl wird überall in Dreamweaver und in der Live-Ansicht entsprechend aktualisiert.
  2. Klicken Sie auf das H1-Element, um die Unterelemente auszublenden und den Inhalt zu verbergen.
  3. Erweitern Sie das DIV-Element „#tile7“, und wählen Sie das untergeordnete H2-Element „.action-title“ aus. Klicken Sie mit der rechten Maustaste darauf, und wählen Sie im Kontextmenü die Option „Duplizieren“ (siehe Abbildung 3).
Abbildung 3: Duplizieren Sie das ausgewählte Element, um eine Kopie zu erstellen.
Abbildung 3: Duplizieren Sie das ausgewählte Element, um eine Kopie zu erstellen.

Das duplizierte Element wird direkt unterhalb des Originalelements angezeigt. Der neue H2-Inhalt ist nun markiert und kann per Doppelklick bearbeitet werden (siehe Abbildung 4).

Abbildung 4: Duplizieren Sie ein DOM-Element, bearbeiten Sie den Inhalt, und entfernen oder fügen Sie Stile hinzu, um Ihre Seiten zu aktualisieren.
Abbildung 4: Duplizieren Sie ein DOM-Element, bearbeiten Sie den Inhalt, und entfernen oder fügen Sie Stile hinzu, um Ihre Seiten zu aktualisieren.

Sie können auch ein Element in der Liste kopieren und dann ein anderes Seitenelement auswählen und das kopierte Element einfügen.

  1. Ändern Sie in der Live-Ansicht den duplizierten Text in „Sign up now!“.
  2. Klicken Sie in der Elementschnellansicht erneut auf das DIV-Element „#tile7“, um diesen Abschnitt der Seitenstruktur zu minimieren.

Innerhalb der Elementschnellansicht können Sie Elemente auch per Drag-and-Drop in einen anderen Abschnitt der Seitenstruktur verschieben.

  1. Blenden Sie die Unterelemente des DIV-Elements „#tile1“ ein, und klicken Sie auf das A-Element, um die Details anzuzeigen und das Logo oben links im Raster auszuwählen (siehe Abbildung 5).
Abbildung 5: Wählen Sie ein Unterelement in der DOM-Struktur aus.
Abbildung 5: Wählen Sie ein Unterelement in der DOM-Struktur aus.

  1. Klicken Sie auf das Bild, und ziehen Sie es auf das DIV-Element „#tile8“. Lassen Sie die Maustaste dann los. Das PLAY-Logo wird auf der Web-Seite von links oben nach rechts unten versetzt und verdeckt das vorhandene Hintergrundbild (siehe Abbildung 6).
Abbildung 6: Verschieben Sie Unterelemente in einen anderen Bereich der Web-Seite.
Abbildung 6: Verschieben Sie Unterelemente in einen anderen Bereich der Web-Seite.

Wenn Sie Elemente innerhalb der Elementschnellansicht verschieben, zeigt eine hellgrüne Linie die Position an, wo das Element nach Loslassen der Maustaste platziert wird. Oder Sie bewegen den Cursor über ein Element, um das zu verschiebende Element darin zu verschachteln. Wenn der Cursor über dem gewünschten Bereich ist, lassen Sie die Maustaste los.

Sobald Sie in Dreamweaver die Code-Ansicht aktivieren, sehen Sie, dass Dreamweaver sauberen HTML-Code und CSS-Stile nach neuesten Webstandards generiert hat.

Nächste Schritte

Entdecken Sie weitere zeitsparende Funktionen des neuen Workflows mit der Live-Ansicht. Experimentieren Sie mit der Neustrukturierung von Seitenelementen in der Elementschnellansicht. Fügen Sie neue Selektoren mithilfe der Live-Elementanzeige hinzu. Und legen Sie neue Properties mit CSS Designer fest.

Wie dieses Beispielprojekt entwickelt wurde, lesen Sie im Artikel „Effizienteres Coden in der Code-Ansicht von Dreamweaver CC“.

Weitere Informationen zum Einsatz der Live-Ansicht bei der Weiterentwicklung dieser Web-Seite finden Sie im Artikel Web-Seiten in der neuen Live-Ansicht designen, bearbeiten und überprüfen.

Der Artikel „CSS Designer: Visuelles Designtool in Adobe Dreamweaver CC“ stellt neue Arbeitsweisen mit CSS Designer und der Live-Ansicht vor.

Sehen Sie sich auch die Lernressourcen für Dreamweaver an. Die umfassende Auswahl an Artikeln, Tutorials und Beispielprojekten hilft Ihnen dabei, sich mit den neuen Funktionen von Dreamweaver CC vertraut zu machen.

tommi-west_83x83

Tommi West

Tommi West ist freiberufliche Web-Designerin und Creative Director bei tommiland.com. Bevor sie 2004 ihr eigenes Unternehmen gründete, war sie sechs Jahre lang bei Macromedia als technische Redakteurin und Web Producer tätig. West ist aktive Teilnehmerin des Adobe Community Professional-Programms.


dan-carr_83x83

Dan Carr

Dan Carr hat sich als engagierter Experte für Interaktions-Design, Software-Entwicklung, technische Redaktion und Training einen Namen gemacht. Er blickt auf 15 Jahre Erfahrung in der Zusammenarbeit mit Adobe und anderen Branchenführern zurück. In seinen jüngsten Arbeiten konzentriert sich Carr auf die Entwicklung von Multimedia-Inhalten in HTML5 und JavaScript, Konzepte zu iOS sowie die kontinuierliche Weiterentwicklung von Flash Video und Games.