Dreamweaverのテンプレート作成でよりサイトを楽に管理しやすく作る方法

Dreamweaverのテンプレート作成機能

皆さん今日もサイト作ってますかー!
サイトを作る際にどのページも共通の部分ってありますよね?
ヘッダーとかフッターとか…固定で置いてあるもの!
それを毎回全ページにコピペして…ってサイト制作をしていませんか?

今回はDreamweaverのテンプレートを使ってそのコピペの作業を無くす方法を紹介します。
ではいってみよう!

下準備

もちろんテンプレートを作成するのでテンプレート元が必要になります。
まずコーディング済みのindex.htmlだけは作成しておいてください。

今回テスト用に簡単なテストサイトを用意しました。

DEMOページへ

では早速Dwのテンプレートを作成していきます。

①まずDreamweaverでindex.htmlを開く。
テンプレート

HTMLとCSSはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="どんぶりシラツキ丼の紹介サイト。美味しいオリジナルどんぶりのレシピを公開。">
<title>Dwテンプレートテスト</title>
<link rel="stylesheet" type="text/css" href="style.css"  />
</head>
<body>
<article>
<section>
<header>
<nav class="menu">
<h1 id="sitetitle">Dwテンプレートテスト</h1>
<ul id="header_menu">
<li class="nav">メニュー01</li>
<li class="nav">メニュー02</li>
<li class="nav">メニュー03</li>
<li class="nav">メニュー04</li>
<li class="nav">メニュー05</li>
<div class="clear"></div>
</ul>
</nav>
</header>
</section>
<section>
<div id="main_contents">
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
</div>
</section>
<footer>
<section> <small>Dwテンプレート</small> </section>
</footer>
</article>
</body>
</html>

②Dwの上のファイルから「テンプレートとして保存」をクリック
テンプレート

サイト名や既存のテンプレートなどが出てきますがスルーしていただいて構いません。
保存名のところをお好きな名前に変更しておくともし1つのサイトで複数のテンプレートを使う際に便利かもしれません。

今回私は「main」という名前にしました。

テンプレート名

③「保存」を押す。
「リンクを更新しますか?」と出てくるので「はい」をクリック

これでtemplateというフォルダがindex.html等がある階層に作成されます。
ファイル

これだけだとすべてが編集できないいわゆる共通のテンプレート領域と認識されてしまうので、編集が可能な範囲を作ります。

④編集できるようにする領域をドラッグで選択する。
編集可能領域

⑤「挿入>テンプレート>編集可能領域」をクリック
編集可能領域

また名前等を聞かれますがそのまま進んでもらっておkです。
するとなぞのコメントアウトで囲われると思います。
そこが編集可能である箇所になります。
改行が消えてしまうので見やすいように調整しましょう。

⑥保存する。
これでテンプレート作成は完了です。
テンプレートを保存して閉じます。

⑦新規作成でまっさらなhtmlファイルを作成
アセット>main(テンプレート名)>適用をクリック
テンプレ

これでテンプレートの内容が新規作成したhtmlにすべて反映されます。

テンプレートで編集できない領域はテンプレートファイルをいじることで一括で変更することができるようになります。
サイト内のリンク変更が必要なヘッダーやフッターなどをテンプレートにしておくと楽に作成・管理ができるのでおすすめです!
是非活用してみてください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする