Adobe Dreamweaver CC

How to visualize and visually modify your HTML structure

Use the Element Quick View tool, which provides a DOM tree interface to visualize and modify the HTML structure of your web pages. (Try it, 30 min)

FromTommi West, Dan Carr

Dreamweaver includes a feature called Element Quick View that provides a visual representation of your page’s HTML structure.  

What do I need?

Get files Sample files to practice with (ZIP, 2 MB)

Get PDF Dreamweaver cheat sheet

Element Quick View lets you navigate your page layouts using an interactive hierarchical tree. See the outline of the DOM structure in a list view, and then click, drag, and right-click on items to select, rearrange, delete, copy, paste and duplicate HTML elements.

In this article, you’ll take a tour of the new Element Quick View features. You’ll open an existing sample project to begin editing it.

Special thanks to Dan Carr for developing the sample project provided with this article. For instructions on how to create the page, see How to code HTML5 and CSS faster. Be sure to check out Dan Carr’s video in which he demonstrates using Element Quick View (see Video 1) and then follow the steps in this article to try the features on your own.

Video 1. Use Element Quick View to view your page’s HTML hierarchy and structure the elements on your page.

To use Element Quick View to structure the elements on your page:

  1. Launch Dreamweaver CC.
  2. Choose File > Open and browse to select the dw_example.html file. Enable the Design View and Live View options at the top of the Document window (see Figure 1).
Figure 1. Enable both Live View and Design View

  1. Click the </> icon in the bottom left corner of the Document window to open Element Quick View (see Figure 2).
Figure 2. Element Quick View displays the selected item within a list of page elements

Notice that the linked text with the .hero-bright class is selected in the hierarchy list. As you look around the workspace, the same element is displayed in the Element Live Display in Live View, in the Tag Selector, and in CSS Designer. If you switch temporarily to Split View, you’ll see the corresponding element is also selected in Code View.

However you prefer to work, and whichever way you choose an element, all other parts of the interface update to display your selection.

The interactive list makes it easy to select elements while also providing a top-level view of your page. In Figure 13, the expanded h1 element contains three sub-elements.

  1. Select the span element with the .hero-bright class below the highlighted A element and see the focus update throughout Dreamweaver and Live View.
  2. Click the h1 element to collapse the section in the hierarchy and hide its contents.
  3. Expand the #tile7 div element, and then select the nested h2 .action-title item. Right-click and choose Duplicate from the context menu (see Figure 3).
Figure 3. Duplicate a selected element to make a copy of it

The duplicated element is displayed directly below the original item. The new h2 content is now in focus, ready to be double-clicked and edited (see Figure 4).

Figure 4. Duplicate a DOM element and edit content, and then add/remove styles to update pages

You can also copy an item in the list and then select a different page element and paste it inside.

  1. Update the duplicated text in Live View to: Sign up now!
  2. In the Element Quick View, click the div #tile7 again to collapse the section of the page structure.

You can also reposition items by dragging them within the Element Quick View to move them into a different part of the page structure.

  1. Expand the div #tile 1, and then click the A element inside it to drill down to select the logo image in the top left corner of the grid (see Figure 5).
Figure 5. Select a sub-element in the DOM structure

  1. Click-drag the image element and hover over div #tile8 before releasing the mouse button. The PLAY logo image moves from the top left corner to the bottom right corner of the page, obscuring its existing background image (see Figure 6).
Figure 6. Move sub-elements to a different section of the page

As you move elements within Element Quick View, a bright green line indicates where the element will be placed when you release the mouse (before/after) or hover over an element to nest it inside. Release the mouse while hovering over the area you want to position the element.

And if you return to Dreamweaver and switch to Code View, you’ll see that the code generated by Dreamweaver results in clean HTML and CSS styles that follow the latest web standards.

Where to go from here

Explore the new Live View workflow to see how the new tools speed your production process. Try restructuring page elements in the Element Quick View, adding new selectors with Element Live Displays, and defining new properties in CSS Designer.

To learn how this sample project was developed, read Authoring code more efficiently using Code View in Dreamweaver CC.

To learn how this sample project leveraged Live View to develop this page further, read How to edit and preview web pages with new Live View features.

And to discover new ways to work with CSS designer and Live View, see CSS Designer: A visual design tool in Adobe Dreamweaver CC.

Also visit the Dreamweaver Learn Page to find articles, video tutorials, and sample projects to help you get up to speed quickly with the new features in Dreamweaver CC.

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.

 

tommi-west_83x83

Tommi West

Tommi is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.


dan-carr_83x83

Dan Carr

Dan is an enthusiastic leader in interactive design, software development, technical writing, and training. With over 15 years’ experience collaborating with Adobe and other industry leaders. Dan’s most recent work specializes in rich-media development in HTML5 and JavaScript, explorations in iOS, and continued innovation in Flash video and gaming.