マニュアルキャンセル

テンプレートおよびテンプレートから作成されたドキュメントの認識

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

Dreamweaver のデザインビューとコードビューでテンプレートとテンプレートから作成したドキュメントを認識する方法について説明します。

デザインビューのテンプレートの認識

デザインビューでは、編集可能領域は、四角いアウトラインに囲まれてドキュメントウィンドウに表示されます。ドキュメントウィンドウの下のペインに領域の名前が表示されます。

ドキュメントウィンドウのタイトルバーを確認することで、テンプレートファイルを識別することができます。ファイルの拡張子は .dwt です。

コードビューのテンプレートの認識

コードビューでは、編集可能なコンテンツ領域は以下のコメントで HTML にマークされます。

注意：

コードカラーリング環境設定を使用して独自のカラースキームを設定しておくことにより、コードビューでドキュメントを表示したときに、テンプレート領域を見分けやすくできます。

これらのコメントの間に記述されているものはすべて、テンプレートから作成されたドキュメントで編集することができます。編集可能領域の HTML ソースコードは、以下のようになります。

<table width="75%"  border="1"  cellspacing="0" cellpadding="0"> 
  <tr bgcolor="#333366"> 
    <td>Name</td> 
    <td><font color="#FFFFFF">Address</font></td> 
    <td><font color="#FFFFFF">Telephone Number</font></td> 
  </tr> 
  <!-- TemplateBeginEditable name="LocationList" --> 
  <tr> 
    <td>Enter name</td> 
    <td>Enter Address</td> 
    <td>Enter Telephone</td> 
  </tr> 
  <!-- TemplateEndEditable --> 
</table>

注意：

コードビューでテンプレートコードを編集する際には、Dreamweaver が依存しているテンプレートに関連するコメントタグを変更しないようにしてください。

デザインビューでのテンプレートから作成されたドキュメントの認識

テンプレートから作成したドキュメントの編集可能領域は、デザインビューでは、四角い点線のアウトラインに囲まれてドキュメントウィンドウに表示されます。ウィンドウの下部に領域の名前が表示されます。

編集可能領域がアウトラインで囲まれるだけでなく、ページ全体も別の色のアウトラインで囲まれ、右上隅のタブにドキュメントの基となったテンプレートの名前が示されます。このハイライト表示されている四角形のアウトラインは、ドキュメントがテンプレートから作成されていること、また編集可能領域の外側にあるコンテンツが変更不可能であることを示します。

コードビューでのテンプレートから作成されたドキュメントの認識

コードビューでは、テンプレートから作成されたドキュメントの編集可能領域は、編集不可能な領域のコードとは異なるカラーで表示されます。変更できるのは、編集可能領域内のコードまたは編集可能パラメーターだけです。Dreamweaver では、ロックされた領域に入力することはできません。

編集可能なコンテンツは、HTML では以下の Dreamweaver コメントでマークされます。

<!‑‑ InstanceBeginEditable> および <!‑‑ InstanceEndEditable ‑‑>

<body bgcolor="#FFFFFF" leftmargin="0"> 
<table width="75%"  border="1"  cellspacing="0" cellpadding="0"> 
  <tr bgcolor="#333366"> 
    <td>Name</td> 
    <td><font color="#FFFFFF">Address</font></td> 
    <td><font color="#FFFFFF">Telephone Number</font></td> 
  </tr> 
  <!-- InstanceBeginEditable name="LocationList" --> 
  <tr> 
    <td>Enter name</td> 
    <td>Enter Address</td> 
    <td>Enter Telephone</td> 
  </tr> 
  <!-- InstanceEndEditable --> 
</table> 
</body>

編集不可能なテキストの初期設定のカラーはグレーですが、編集可能な領域も編集不可能な領域も、環境設定ダイアログボックスで別の色を選択することができます。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る