Manualshelf

Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CC - 2015
61626364656667686970
Table Of Contents
58
Workspace and workflow
Last updated 11/30/2015
You can move around the DOM panel and place it at any convenient location on the user interface. You can also dock
the panel along with other panels.
How to use the DOM panel
1 Open the required document and then open the DOM panel by selecting Window > DOM.
2 Switch to Live view and click the element that you want to inspect or edit.
• The HTML markup of the selected element is highlighted in the DOM panel.
• The applied selector is highlighted in CSS Designer.
• The relevant code is highlighted in the Code view.
• The relevant tag is highlighted (in blue) in Tag Selector.
Alternatively, you can select an HTML element in the DOM panel. When you click any element in the DOM panel:
• Live View scrolls to the corresponding element.
• If Code View is open, the Code View scrolls to the code corresponding to the element.
• CSS Designer (Selectors pane) scrolls to the closest corresponding selector (similar to you clicking the element
in Live View).
• The tag is highlighted in the Tag Selector.
This syncing between different views and CSS Designer lets you visualize the HTML markup and styling associated
with the selected element at a glance.
3 Proceed to edit the element as required (HTML or CSS editing). For information on using the DOM panel to edit
the HTML markup, see
Edit HTML structure using the DOM panel . For information on CSS Designer, see CSS
Designer panel.
Edit HTML structure using the DOM panel
The current selected element on the page is highlighted in the DOM panel. You can navigate to any node or element
using the arrow keys.
• To select an element or a node, click the element or node. To expand or collapse an element or a node, click the
HTML tag or double-click the selector adjacent to the tag.
• To duplicate an element or a node, right-click the element or the node, and click Duplicate. When you duplicate an
element with an ID associated with it, the ID is incremented for the new (duplicate) element.
• To copy an element or a node, right-click the element or the node, and click Copy. If you have copied an element
with children, the child elements are also copied.
• To paste an element or a node, click the element or the node under which you want to nest the copied elements.
Then, right-click the element or the node and click Paste.
• To paste the copied element as a child of a specific element or node, right-click the element or node (parent), and
then click Paste As Child.
• To move or rearrange elements, drag the element to the required location within the DOM panel.
A green line appears to indicate where the dragged element will be positioned. If you drop the element over the element
highlighted in gray (reference element), then the dropped element is positioned as the first child of the reference
element.
• To delete an element or a node, right-click the element or the node, and click Delete.