[Dreamweaver] テンプレート機能初級編！

公開日： 2014/07/31 : 最終更新日：2014/08/09 Dreamweaver, Web制作 Dreamweaver

まずはベースとなるHTMLを作成しましょう。

Dreamweaverのテンプレートを作るには、ベースのHTMLが必要です。
そのベースのHTMLをテンプレート化します。

では、ベースのHTMLを作っていきましょう！
今回は、とりあえずXHTMLでいきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テンプレート</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<link rel="stylesheet" type="text/css" href="common/css/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/print.css" media="print" />
</head>
<body>
<!-- ヘッダー -->
<div id="wrapper">
 <div id="header">
 <p id="logo"><a href="index.html"><img src="common/images/logo.gif" alt="Hidef.jp" width="105" height="30" /></a></p>
 <div id="headlink">| <a href="#">サイトマップ</a> | <a href="#">お問い合わせ</a> |</div>
 <div id="globalnavi">
 <ul>
 <li>メニュー１</li>
 <li><a href="#">メニュー1</a></li>
 <li><a href="#">メニュー2</a></li>
 <li><a href="#">メニュー3</a></li>
 <li><a href="#">メニュー4</a></li>
 <li><a href="#">メニュー5</a></li>
 </ul>
 </div>
 </div>
 <!-- //ヘッダー -->
 <!-- メインエリア -->
 <div id="contents">
 <div id="historylink">
 <ul>
 <li><a href="#">HOME</a></li>
 <li>現在位置</li>
 </ul>
 </div>
 <div id="main">
 <h1>見出し1</h1>
 <h2>見出し２</h2>
 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
 <div id="subnavi">
 <ul>
 <li><a href="#" class="on">サブメニュー1</a></li>
 <li><a href="#">サブメニュー2</a>
 <ul>
 <li><a href="#">コンテンツ1</a></li>
 <li><a href="#">コンテンツ2</a></li>
 </ul>
 </li>
 <li><a href="#">サブメニュー3</a></li>
 <li><a href="#">サブメニュー4</a></li>
 </ul>
 </div>
 </div>
 <div id="gotop"><a href="#header">このページのトップへ</a></div>
 <!-- //メインエリア -->
 <!-- フッター -->
 <div id="footer">
 <div id="footlink">| <a href="#">このサイトについて</a> | <a href="#">プライバシーポリシー</a> |</div>
 <div id="copyright">Copyright &copy; hidef.jp. All Rights Reserved.</div>
 </div>
 <!-- //フッター -->
</div>
</body>
</html>

ちょっと長いですが、ベースが出来ました。

テンプレート化して、編集領域を決めよう！

まずはテンプレート化

作成した、ベースのHTMLファイルをDreamweaverで開いた状態で、上部メニューの「ファイル > テンプレートとして保存」を選択します。
すると、下記のような小窓が出てきます。

sample

サイト：そのテンプレートを使うプロジェクト
既存のテンプレート：ここは未選択でもいい？（選択したことがないです）
説明：テンプレートの説明なので、わかりやすいように
保存名：テンプレートファイルの名前になります

これらを入力して保存をクリックすると、「リンクを更新しますか？」と出来てますので必ず更新しましょう。
更新しないと、CSSなどがリンク切れを起こしてしまいます。

これで、テンプレート化が出来ました！

まずは<head>内から見ていこう。

テンプレート化されたファイルの<head>辺りは、下記の様に変更されています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>テンプレート</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<link rel="stylesheet" type="text/css" href="../common/css/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="../common/css/print.css" media="print" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

この状態だと、descriptionとkeywordsが、テンプレートとして各ページに適用しても編集出来ない状態になっています。
それを編集できるようにするには、

<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

これの間に入れる必要があります。
変更したソースが下記です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>テンプレート</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../common/css/default.css" media="all" />
<link rel="stylesheet" type="text/css" href="../common/css/print.css" media="print" />
<!-- TemplateBeginEditable name="head" -->
<meta name="description" content="説明文" />
<meta name="keywords" content="キーワード" />
<!-- TemplateEndEditable -->
</head>

これでdescriptionとkeywordsは、各ページで個別に設定出来る様になりました。