This extension allows you to display all <div> tags of a document, in the form of a tree. Dreamweaver has its own Layers Panel, but the latter displays only layers in absolute position, which is not very useful, simply because CSS layouts don't use this type of positionning very often.

So this panel displays all div tags with their level of imbrication :

Download mxp

French version

Use

To display the div tags, just click on the top-left button "Refresh".

Don't forget to refresh the panel each time you edit a div : delete, rename, move, etc.

 

• When you see in the Selector column a line "id (class)", it means that there is a <div id="xxx" class="yyy"> in the document.
  In this case, the class selector is always between parenthesis.
  
  
• When you see a dash in the Selector column, it means that there is a div with no id or class attribute : <div>...</div> or <div align="xxx">...</div> .
  
  
• When you select a name in the panel, the corresponding <div> is selected in the document. Useful to navigate quickly in the document.
  
  
• The panel can be used in Code Mode or Design Mode.