Adobe Dreamweaver CC 2015 - Manual (Page 275)

268
Page content and assets
Last updated 6/3/2015
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.
You can undo (Ctrl/Cmd + Z) or redo (Ctrl/Cmd + Y) the operations that you perform in the DOM panel.
Keyboard shortcuts :
• Duplicate - Ctrl + D (Win)/ Cmd + D (Mac)
• Delete - Del or Backspace
• Copy - Ctrl + C (Win)/Cmd + C (Mac)
• Paste - Ctrl + V (Win)/Cmd + V (Mac)
• Undo - Ctrl + Z (Win)/Cmd + Z (Mac)
• Redo - Ctrl + Y (Win)/Cmd + Y (Mac)
Note: Typically, when a page is edited, the Refresh button in the Document toolbar changes to Stop button indicating that
the page is reloading. After the page is reloaded, the Refresh button appears again to indicate that the page has completely
loaded. When you make changes in the DOM panel, the page may take a while to reload even after the Refresh button
appears back again after changing to Stop button.