Dreamweaverのテンプレート 〜 2:ネストしたテンプレート 〜

Dreamweaver

Dreamweaver（以下DW）では、テンプレートを基にさらにテンプレートを作る、といったネスト構造を持たせることが可能です。「基本テンプレート → ヘッダフッタを入れたテンプレート → 各ページ」のような作りにしておくと融通が利きそうですね。

今回は、テンプレートをネストした場合に、実際のHTMLがどうなるかを見てみましょう。

なお、エントリのパーマリンクからお越しの皆様へ。現在、はてダではスーパーPRE記法の中にHTMLコメントを入れると何故か表示されない不具合があるようです。日付のページからだとちゃんと表示されるので、ソース内のHTMLコメントが表示されない場合は2008/09/21のページへどうぞ。

■土台のテンプレート（親テンプレート）

まず、前回まとめたこのテンプレートを土台にします。ファイル名は仮にTemplates/base.dwtとします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="dochead" -->
<title></title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="../css/base.css" type="text/css" media="all">
</head>
<body>
<!-- TemplateBeginEditable name="body" -->
<!-- TemplateEndEditable -->
</body>
</html>

head要素内の編集可能領域名を「head」から「dochead」に変更しています。DW8では編集可能領域名に「head」を使うと怪しい挙動、というかどう見てもバグだろという挙動をするので変更しました。これについては、また別エントリで。

■ネストしたテンプレート（子テンプレート）

親テンプレートから新たにドキュメントを開いて、それをまたテンプレートとして保存します。ファイル名は何でもいいんですが、ひとまずTemplates/page.dwtとします。

単純にbase.dwtを開いて、テンプレート保存した場合、page.dwtは以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="dochead" -->
<title></title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="../css/base.css" type="text/css" media="all">
</head>
<body>
<!-- InstanceBeginEditable name="body" --><!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

内容的には、ただのテンプレートを適用した普通のページと何一つ変わりません。

親テンプレートで設定した編集可能領域がフリーダムすぎるので、もう少しテンプレートを固めます。編集可能領域をネストする場合は、InstanceBeginEditable 〜 InstanceEndEditable の中に TemplateBeginEditable 〜 TemplateEndEditable で領域を確保します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="dochead" -->
<title></title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="../css/base.css" type="text/css" media="all">
</head>
<body>
<!-- InstanceBeginEditable name="body" -->
<div id="header">
<!-- TemplateBeginEditable name="header" -->
<!-- TemplateEndEditable -->
</div>

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

<div id="footer">
<!-- TemplateBeginEditable name="footer" -->
<!-- TemplateEndEditable -->
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

こんな感じに、bodyの下にheader, content, footerという3つのブロックを作って、それぞれ編集可能領域を作成しました。これで保存。

■ページ作成

今度は、こうして作ったTemplate/page.dwtから実際のページを作成します。

読み込まれたテンプレートをそのままindex.htmlとして保存すると、以下のようになりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/page.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="dochead" -->
<title></title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/base.css" type="text/css" media="all">
</head>
<body>

<div id="header">
<!-- InstanceBeginEditable name="header" -->
<!-- InstanceEndEditable -->
</div>

<div id="content">
<!-- InstanceBeginEditable name="content" -->
<!-- InstanceEndEditable -->
</div>

<div id="footer">
<!-- InstanceBeginEditable name="footer" -->
<!-- InstanceEndEditable -->
</div>

</body>
<!-- InstanceEnd --></html>

base.dwtとpage.dwtどちらの編集可能領域も同じように InstanceBeginEditable 〜 InstanceEndEditable に展開されました。

このページ上ではbase.dwtの編集可能領域なのか、page.dwtのそれなのかは分からないですね。そもそも、base.dwtの存在自体が見えない。

親テンプレートでは、body要素内全てを編集可能領域としていましたが、その情報は欠落しています。編集可能領域をネストした場合、下の階層の情報のみが引き継がれるようです。

■まとめ

  • 親テンプレートの編集可能領域は、子テンプレート→ページにそのまま引き継がれる
  • 親テンプレートの編集可能領域内に、子テンプレートでさらに編集可能領域を作ると、子テンプレートで設定した編集可能領域だけが編集可能になる
  • ページには直接の親となるテンプレートの情報のみが記録され、ネスト情報は記録されない

■関連エントリ