Dreamweaverのテンプレート作成方法

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

名古屋のホームページ制作会社花のや
花のやブログ
Dreamweaverのテンプレート作成方法

2014/09/04Web制作HTML

Dreamweaverでhtmlをテンプレート化してみましょう

トップページをコーディングして、下層ページもコーディングして・・・。
あ！！グローバルナビのリンク先間違えてた！！！

なんてことはよくあると思います。
ヘッダー、フッター、サイド、グローバルナビ、全ページ”ほぼ”同じなのに
１つ間違えたら１ページずつ修正していくのなんて大変！時間がもったいない！！！

そこでDreamweaverのテンプレート機能です。
Dreamweaverのテンプレート機能を使えばサイト全体で共通するブロック（ヘッダやサイドバーなど）を1ファイルで一括管理できます！
この機能を使えば、100ページ、300ページ規模のサイトでも、一瞬でサイト全体に修正や追加を反映することができます。

テンプレート機能とは

Dreamweaver では、作成したドキュメントをテンプレート（拡張子.dwt）として保存することができます。
ドキュメントをテンプレートとして保存すると、ドキュメントのほとんどの領域がロックされます。テンプレートの作成者は、テンプレートから作成されたドキュメントのどの領域を編集できるようにするかを、テンプレートに編集可能領域または編集可能パラメーターを挿入することによって指定します。

テンプレートファイルを作る

元にしたいファイルを表示します。
挿入(I)→テンプレートオブジェクト(O)→テンプレートの作成(M)をクリック
test01

「テンプレートとして保存」が出てくるので保存をクリック。
保存名をわかりやすいものにしてもよいと思います。
リンクを更新するかきかれるので、「はい」を押します。

以下のように、開いてるファイル名と、サイドのローカルファイルに「Templates」が出来ていればひとまずテンプレートファイルの完成です。

「編集可能領域」を作る

テンプレートファイルができあがっただけでは、まだ完成とは言えません。
テンプレートを利用したページでは、「編集可能領域」以外はロックされており、誤操作防止にもなります。デザインビューでは編集可能領域外は操作禁止のカーソルで表示され、コードビューでは編集可能領域外のソースコードはグレーで表示されます。

「編集可能領域」とはその名のとおり、ページごとに編集ができる領域となります。
編集したい場所、たとえば<div id=”contents”> </div>を「編集可能」にします。

test04