Adobe Creative Cloud

October 27, 2015 /Dreamweaver Interface /

Use the DOM Panel to Rearrange HTML Elements

Learn how to use Dreamweaver’s DOM panel to place page content

Many times you may have a good start on a page design, but would like to experiment with reordering some of the page elements. This is very easy to do with the DOM panel and Live view. The DOM panel is an interactive tree representation of the HTML elements that provide the structure for a page. DOM stands for Document Object Model. It is an outline of sorts that begins with the opening html element, then lists each element as it appears in order on the page. The elements are grouped under either the head or the body tag. Elements nested under other elements are called child elements. Elements that contain nested elements are called parent elements. Dragging an element to a different location on the tree moves it to the corresponding location on the page.

What do I need? travel_blog.zip

Step 1 of 5

Define a site and open the home page

Download the travel_blog folder, then extract the files.

Create a new website in Dreamweaver called Travel Blog with your new travel_blog folder set as the local site folder.

Open the file index.html from your travel_blog folder, then change to Live view if necessary. This page was created using the Dreamweaver starter template “Blog post.”

dom 1

Step 2 of 5

Explore the DOM panel

The DOM panel is docked together with the Assets panel on the right side of the workspace in the Default and Design workspaces. It is displayed as a self-standing panel on the right side of the Beginner workspace, and on the left side of the Code workspace. The figures in this tutorial are shown using the Default workspace. If you don’t see the DOM panel, select DOM on the Window menu. You can also use keyboard shortcuts to open the DOM panel: [Control] [/] (Win) and [Command] [/] (Mac).

dom 2

The DOM panel contains a tree-structure representation of an open page’s DOM (Document Object Model) structure. Each HTML tag is represented by a symbol labeled with the tag name, such as bodybody. Nested tags are represented with stacked symbols head. Selecting a closed element expands it, selecting an expanded element collapses it.

dom 3
With the index page open in Live view, select the DOM panel, which is located under the Files panel on the right side of the page. If you don’t see it, select Window on the menu bar, then select DOM.

Select a few page elements to expand them and view the nested elements, or elements placed inside of other elements, then collapse them.

dom 4

Note: You do not see pairs of opening and closing tags in the DOM panel, rather the name of the HTML element. Example: Instead of seeing <html> </html>, you will just see html on the symbol face.

Step 3 of 5

Use the DOM panel to identify and locate page elements

You can copy, paste, paste as child, duplicate, and delete page elements in the DOM panel. To identify which page elements are represented by which symbols in the DOM panel, simple select an element on a page open in Live View and note which element is selected in the DOM panel, and vice versa.

When a page element is selected, either on a page or in the DOM panel, Code View will scroll to the corresponding code for the page element and CSS Designer will scroll to the closest corresponding applied selector.

Select the DOM panel to expand or float it.

Change to Split view, select the header symbol in the DOM panel, then note the selected header on the page, as shown in the figure below. The header symbol in the DOM panel represents the selected header on the page. The code for the header is also selected and the header tag is selected in the Tag Selector. The Tag Selector appears on the left side of the status bar and lists the tags applied to the selected page element.

dom 5

Select the heading Have Camera, Will Travel, then note the h1 element selected in the DOM panel and the insertion point in the heading in Code view.  You can also identify the HTML element by the element name in the Element Display.

dom 6

The Element Display is the blue toolbar above a selected page element. You use it to associate an ID or selector to an HTML element or to open the Quick Property Inspector to edit HTML attributes. The choices offered in the Quick Property Inspector depend on the type of HTML element selected.

Select the Edit the HTML Attributes button menu in the Element Display to open the Quick Property Inspector, then note the formatting choices available for an h1 element. The Add Class/ID button plus is used to assign a class or ID to an element.

dom 7

Step 4 of 5

Use the DOM panel to edit page elements

The DOM panel offers several editing options including Delete, Duplicate, Copy, Paste, and Paste as Child. Use the Copy command to copy an HTML element. Use the Duplicate command to copy an HTML element with an ID so the ID will be applied to the copied element. The Paste command places a copy of a Copied or Duplicated element at the insertion point in the DOM panel. Use the Paste command to insert a copied element into the page structure. Use the Paste as Child command to insert a copied element as a child element under a parent element. To select one of these options, right-click the element you wish to edit, then select the desired edit command.

dom 8

Select the body element bodyto expand it if necessary, then continue expanding elements under the body element until you find the hr element hr.

Right-click the hr element, then select Copy.

dom 9

Continue expanding the body elements until you see the a element a above the footer element footer. This image element represents the link to the Instagram logo, the last in the row of social media logos.

Right-click the a element, then select Paste.

dom 10

The copied horizontal rule is pasted below the row of social media logos, along with the original CSS formatting applied. We can see this because the horizontal rule is the same width as the other horizontal rules on the page, rather than the default width that would stretch the width of the page.

dom 11

Save your work.

Step 5 of 5

Use the DOM panel to rearrange page elements

The most powerful DOM panel feature is the easy way you can drag individual elements up and/or down the tree hierarchy to place them above or below other page elements in Live View. This lets you quickly experiment with page elements to see how they would look in alternative layout designs. To move an element, select it, then drag it into an HTML element, under an HTML element, or above an HTML element.

In the figure below, the h1 element was dragged into the header to move it into the header. Notice how the header, in Live view, has blurred blue edges. When you drag an element over another element in the DOM panel, if the element can be nested inside that element, the target border is highlighted with a blurred blue color. This indicates the position the element will be dropped: in this case, into the header container.

dom 12

In the next figure, the image was moved to the opposite side of the header by dragging the div with the image under the nav element. Moving the div under the nav element in the DOM panel modified the code to instruct the image to display after the navigation bar on the page. Notice the green guides, both in the DOM panel and on the page. These are called Live Guides, guides that show you where the element will be dropped as you move your pointer. The code for the header is also selected in Code view.

dom 13

dom 14

Now let’s practice by moving the lioness image under the three paragraphs of text. We want to move the div with the id “bannerImage” to keep the CSS formatting intact.

Select the div element with the class “bannerImg”.

Drag the div element down the tree until it is right above the hr element, then drop it when you see the green Live Guide.

dom 15

Dragging the banner image tag in the DOM panel below the three p elements moved it on the page below the three paragraphs of text.

dom 16

If you prefer the lioness image above the three paragraphs of text, the shortcut [Control] [Z] (Win) or [Command] [Z] (Mac) will undo an action in the DOM panel.

Practice by moving the blog photo image back to the right side of the header.

Save your work.

Summary

This tutorial introduced the power of the DOM panel. You learned that the DOM panel represents a page’s code as a tree, with page elements represented by symbols with element tags on each symbol face. All page elements are grouped under either the head or body tag.

Next, you learned that elements inside elements are called nested elements. Select a collapsed element to expand it, and select an expanded element to collapse it.

You then learned that the DOM panel can be used for many editing functions that can be applied to page elements such as copy, paste, paste as child, duplicate, and delete. But the most exciting feature of the DOM panel is the ability to quickly move page elements to reorder the way the elements appear on a page.

As you work, it is important to view the work in progress using tools as the Scrubber, the Window size menu, the Visual Media Queries bar, and Device Preview.

Dreamweaver Interface