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.

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.

Select the span element with the .hero-bright class below the highlighted A element and see the focus update throughout Dreamweaver and Live View.

Click the h1 element to collapse the section in the hierarchy and hide its contents.

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.

Update the duplicated text in Live View to: Sign up now!

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.

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

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.

More on this topic

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