今回初めて、Dreamweaver のテンプレート昨日を使ったWEBサイトの運用を試してみました。正直サーバーサイドでテンプレートからコンテンツを生成するCMSやsmartyのほうが好きなのですが、PHPなどが動かせないサーバー環境もあるので使い道はありそうです。

メニューがハイライトされるデザイン

Dreamweaver のテンプレートは、ネスト（階層化）することができて便利です。今回のサイトはグローバルメニューにハイライトがあたるようになっており、該当ページがそのメニューに含まれる場合、色が変わります。

このハイライトは、リストでマークアップしたグローバルメニューの a 要素にクラスを追加することで実現されています。つまり、グローバルメニューのコードは全ページ共通ではなく、ハイライトされる場所によって変わります。

Dreamweaver のテンプレートは条件分岐もできるため、通常はそれで OK になりそうです。しかし、今回のサイトは、サイドメニューがあり、そのサイドメニューにもハイライトがあたるようになっているため、より運用を簡単にするためには、グローバルメニュー = カテゴリ ごとにテンプレートを用意する必要がありました。

ネストされたテンプレート

そこで、コンテンツページに共通する部分を共通化するベーステンプレートと、ベーステンプレートをもとに、グローバルメニューのハイライトと、カテゴリ内で共通するサイドメニューを含む子テンプレートを作成してみました。

作成の方法は、「ファイル」-「新規」-「テンプレートから作成」でベーステンプレートから新規ドキュメントを開きます。その新規ドキュメントをテンプレートとして保存すると、子テンプレートを作ることができます。

 

また、ベーステンプレートの編集可能領域は、ネストされた子テンプレートに引き継がれます。ただし、その編集可能領域に新しいテンプレート領域（各種編集可能領域、編集可能にした属性を含む）を挿入すると、子テンプレート独自の編集可能エリアとなります。

基本テンプレート内の編集可能領域はネストされたテンプレートに継承されます。それらの領域に新しいテンプレート領域が挿入されない限り、ネストされたテンプレートから作成されるページでも、編集可能なまま保持されます。

Adobe Dreamweaver CS4 : ネストされたテンプレートについて

 

テンプレート構成

今回は、以下のような構成で、作成してみました。

その他はまったところ

複数の文字コードは対応していない？

このサイトは、メールフォームのみ shift-JIS 、その他のページが UTF-8 で作成されていました。デザインはメールフォームもコンテンツページも変わらないため、同じテンプレートで作成し、charset の値をDreamweaver の変数に設定して、ページ側で文字コードを設定できるようにしたのですが、見事にすべてのページが shift-JIS に変換されて泣きそうになりました。

そのほかの方法は試していないですが、複数の文字コードはサポートしていない気がします（未確認）。今回は、メールフォームのみテンプレートを使用しない方向で乗り切りました。

ページの作成は「新規ドキュメント」-「テンプレートから作成」で

最初はテンプレートから1ページ作成して、そのファイルをコピーしたりしていましたが、ページ内に必要ないTemplateparam タグやが残ったり、テンプレートプロパティの中に削除した項目が残ったり、よくない雰囲気でした。

おとなしく、「新規ドキュメント」-「テンプレートから作成」で新規ページを開き、そこにコンテンツを流しこむ方法が確実でした。

「編集可能にマークされていないコードに変更を加えました。これらの変更を保持しても、次回のテンプレート適用時にファイルが更新されて、これらの変更は失われます。それまで変更を保持しますか?」

しょっちゅう出る。いまだ原因がわからず。これに関しては、いずれまとめてみたい。