Adobe Dreamweaver CC 2015 - Manual (Page 273)

266
Page content and assets
Last updated 6/3/2015
Unsupported scenarios
• Dreaweaver template files cannot be edited in Live View.
• Tags that have both static and dynamic content. While you can edit the selectors for such tags, you cannot edit text
in Live View. If you double-click such elements in Live View, a grey border appears around them, indicating that text
editing is not supported.
• Tags that have pseudo selectors applied to them. You may encounter unexpected results when you try to edit such
elements in Live View.
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.