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 erheblich erleichtert. (Projekt: 30 Min.)

HTML-Struktur visualisieren und ändern

30 Min.

Die Elementschnellansicht von Dreamweaver gibt die HTML-Struktur Ihrer Web-Seiten in visueller Anordnung wieder.  

Was brauche ich?

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

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. Das Element, das in der Live-Ansicht live ausgewählt ist, ist auch im CSS Designer unter „Selektoren“ 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.

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.

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

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 im 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 dem CSS Designer und der Live-Ansicht vor.

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

Ihre Meinung ist gefragt

Das war schon alles! Damit ist dieses Training abgeschlossen.

 


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.