DreamweaverCS6　テンプレートとして保存

サイト内で共通する部分（ヘッダやフッタ、サイドバーなど）を一括して管理、編集することができます。
ファイル毎に個別に編集したい部分は、テンプレートファイル「.dwt」に編集可能領域を設けます。

■メリット
XHTML4.0からHTML5、エンコードなどを変更したい場合、テンプレートを利用していると効果を発揮します。
大きくレイアウトを変更したい場合も変更が可能です。

■デメリット
弱点としては、テンプレートを変更した場合、最新のデータを一度ローカルに持ってきて更新しないと変更されません。
100ページあった場合、全てのファイルを再度サーバーにアップしなおす必要があります。
Wordpressなどは、エリア毎のファイルを読み込んでいるので、個々のファイルを変更すれば全て変わり、
安全に、スムーズに変更できます。
20〜30ページ程度であればDreamweaverでよいと思いますが、
100ページくらいあるサイトは、PHPなどで読み込ませたほうが良いでしょう。

①雛形となるindex.htmlを開きます。
　ファイル⇒テンプレートとして保存
　サイトを選択して、テンプレート名をつけます。

②コンテンツの部分はロックがかかる状態になるので、
　左側のバーの↓をクリックし隠れいてる部分にある、コップからソースが出ているような絵の
　ソースコードのフォーマットを選択します。

③コードを選択します。
　

contentsの下から

の前までの、テンプレート化する領域を選択します。

④右側のパネルから、挿入⇒テンプレート⇒編集可能領域を選択。
　#contents_areaの名前をつけます。

　メニュー部などにコメントが追加されているのが分かります。
　ヘッダー部分にも編集可能な領域が追加されてます。
　---------------------------------------------------------------------------------
　実行結果
　---------------------------------------------------------------------------------

　<div id="contents">
	<!-- TemplateBeginEditable name="contents_area" -->
　<!--contents-->
	<!-- TemplateEndEditable -->
   </div>

　〜その他〜
　表示するか、非表示にするかを選択できる「オプション領域の設定」もあります。。
　
　今回はバナー部に設定します。

　 <h3><img src="../images/lunch.png" width="300" height="180" alt="LUNCH TIME" /></h3>

を選択した状態で、挿入⇒テンプレート⇒lunch_bnr　と名前をつけます。
初期値設定では表示にチェックが入っていることを確認します。

⑤PCサイトを保存。
⑥テンプレートを作成する元になった、index.htmlはまだ適応されていない状態です。
　右のファイルパネルからindex.htmlを開きます。
　修正⇒テンプレートを適用
　適用するテンプレート名を選択して、選択ボタンを押下。

　テンプレートと、index.htmlに差があった場合、テンプレートの内容に書き換えられてしまいます。
　今回は変更はないので、、Document BodyとDocument headを選択して、
　「コンテンツを新しい領域に移動」でなしにします。
　OKをクリックします。

　⇒すると、テンプレート化されて、自由に変更できないグレーの文字に代わります。

⑦意図しないテンプレートや、新しいテンプレートにしたい場合は、
　一度、テンプレートから切り離す必要があります。
　
　編集⇒テンプレートから切り離すにします。

- - - - -

⑧テンプレートファイル（dwh）を開き、
のコンテンツ部分を削除します。

⑨新規⇒テンプレートから作成を選択。

タイトルを変更します。

⑩テンプレートに日付を挿入します。
　メニューバー⇒挿入⇒日付⇒上から6番目の1974-03-07を選択。
　保存時に自動的に更新などができます。

- - - - -

テンプレートで作成したファイルは、
必ずDreamweaverで開いてください。
エディタなどで開くと、編集可能領域以外も変更できてしまうので思わぬ結果となってしまいます。