Dreamweaver CC 2015から搭載されている、DOMパネルについてご紹介します。
主にコーディングはDreamweaverのコードビューしか使っていないという人も、その他のテキストエディタを使っているという人も、このパネルを使いこなせると、ページ全体のレイアウト作業がぐっと効率良くなるかもしれません。

DOMパネルには、ページ全体のタグが全て親子関係で表示されます。
子要素を含んでいる場合は、アイコンのタグが重なった表示になっており、アイコンをクリックすると展開されます。

このDOMパネル内では、要素の削除、複製、コピー、ペースト、コンテンツの入れ替え操作が可能です。
これらの操作は、コードビュー上でも行うことはできますが、DOMパネルを使うと、コードの構造を確かめながら、より簡単な操作で、確実に行うことができます。

例えば下記の場合など、シンプルなテキストエディタを使うと、選択したいコンテンツのタグがどこからどこまでなのかを探す必要があり、選択する場所がずれると表示が崩れてしまう等の心配があります。

• 深くネストしてしまった要素を操作する
• 広範囲エリアの大幅な入れ替え
• ある親要素の中にある要素を、別の親要素の中に移動する

DOMパネルを使うとそういったややこしい作業も要らず、パネル上で要素をクリックするだけで容易に選択でき、ページ全体のレイアウト作業が効率的にできるのです。
また、DOMパネルを使ってページを編集すると、改行等も含めたソースの成形も行ってくれるので、早くてきれいなコードを書くことができます。

DOMパネルの使い方

編集したいファイルを開いた後、「ウィンドウ」→「DOM」を選択してDOMパネルを開きます。または、［Ctrl］＋［H］キー（Windows）、［Cmd］＋［H］キー（Mac OS）で開くことができます。

DOMパネルは、ライブビュー、コードビューと同期しているので、DOMパネルで操作したいタグをクリックすると、ライブビュー上、コードビュー上でもフォーカスされ、ページ内のどこにコンテンツがあるのかが確認できます。

コンテンツを複製する場合は、DOMパネル上で複製したいコンテンツのタグを右クリックし、複製を選択します。すると、直下に複製が作成されます。idが設定されていたる場合は、重複しないよう別のidの値を自動的に作成してくれます。コピー＆ペーストした場合も同様です。

バージョンアップしたDreamweaver CC 2015.1 からは、DOMパネルのタグをコピーして、他のドキュメントのDOMパネルにペーストすることも可能になっています。

コンテンツの入れ替えは、コンテンツのタグを移動したい箇所にドラッグ＆ドロップすると容易に行うことが可能です。
誤った文法や構造になるようなタグの移動はできないようになっています。

参考：
イトウ先生のTips note【Dreamweaver CC 2015】DOMパネル