Adobe Dreamweaver CC 2015 - Manual (Page 60)

53
Workspace and workflow
Last updated 6/3/2015
To remove the blue highlight around the elements, the Selector again.
Note: The following table summarizes the scenarios where Live Highlight is not available.
Disable Live Highlight
Live Highlight is enabled by default. To disable Live Highlight, click Live View options in Document Toolbar and click
Disable Live Highlight.
DOM panel
The DOM panel renders an interactive HTML tree for static and dynamic content. This view helps you visually map
elements in Live View with their HTML markup and the applied selectors in CSS Designer. You can also make edits to
the HTML structure in the DOM panel and see the changes take effect instantly in Live View.
Step-by-step tutorial
How to visualize and visually modify your HTML structure in Dreamweaver (30 min)
To open the DOM panel, select Window > DOM. You can also use the keyboard keys - Ctrl + / (Win); Cmd + / (Mac)
- to open the DOM panel.
When you drag elments to directly insert them in Live View, the icon appears before you drop the element. You can
click this icon to open the DOM panel and insert the element at the appropriate position in the document structure.
For more information, see
Inserting elements directly in Live View .
The DOM panel displays only static elements in Code or Design view, and both static and dynamic elements in Live
view.
In fluid grid documents, the DOM panel only lets you visualize the HTML DOM structure and does not let you edit
the HTML structure.
Note: You can edit only the static content in the DOM panel. Read-only or dynamic elements are shown in a darker shade
of grey.
Mode Live Code Live Highlight displayed?
Code NA NA
Design NA NA
Live ON (button is pressed) No
OFF Yes