0%

Designデザインワークショップ

Posted:2019.07.22

Dreamweaverのテンプレート機能でパターンページを量産する

前回に引き続きDreamweaver関連の記事を。Dreamweaverはコーディングを快適にするための機能がたくさん用意されています。その中の一つにテンプレート機能というものがあります。この機能を使うことで、静的なHTMLファイルでも条件分岐で異なるタグを切り出したり、共通エリアを定義できたりと高度なコーディングができるようになります。今回は基本的な部分として「編集可能領域」を定義することで大量のページ物のコーディングを行うときに使えるフローを見ていきたいと思います。

 

1. Dreamweaverのテンプレートファイル(.dwt)を作成

今回はデフォルトで用意されているHTMLのフォーマットを利用します。「スターターテンプレート」からいろんなパターンを選択できます。

Dreamweaverのテンプレート機能でパターンページを量産する

Dreamweaverのテンプレート機能でパターンページを量産する

 

任意の場所にサイトのドキュメントルートを作成し保存します。CSSや画像が読み込まれない場合は一度、Dreamweaverを終了し再度.dwtファイルを開くと読み込まれるようになります。

Dreamweaverのテンプレート機能でパターンページを量産する

 

テンプレート機能で編集する領域を設定していきます。今回はグローバルナビ直下のコンテンツエリアを対象にします。この部分がページごとに編集する箇所で、それ以外の場所は共通エリアとなります。

Dreamweaverのテンプレート機能でパターンページを量産する

 

対象領域を選択した状態で「挿入」→「テンプレート」→「編集可能領域」から選択した部分を編集可能な状態になるよう設定していきます。

Dreamweaverのテンプレート機能でパターンページを量産する

 

編集可能領域にユニークとなるよう名前を設定します。

Dreamweaverのテンプレート機能でパターンページを量産する

 

そうするとHTMLタグ内に下記のようなコメントアウトが追加されます。先ほど選択した部分を囲むように記述されます。

<!-- TemplateBeginEditable name="テンプレート名" -->
 ............
<!-- TemplateEndEditable -->

 

また、デザインビューの部分では設定した編集可能領域の名前が表示され、対象領域が枠で囲まれて表示されます。選択するとわかりやすいですね。

Dreamweaverのテンプレート機能でパターンページを量産する

Dreamweaverのテンプレート機能でパターンページを量産する

 

続いて「ファイル」→「テンプレートとして保存」から、編集可能領域を設定したHTMLをDreamweaverのテンプレートファイルとして保存します。テンプレート名は任意のものを入力します。

Dreamweaverのテンプレート機能でパターンページを量産する

Dreamweaverのテンプレート機能でパターンページを量産する

 

テンプレートはドキュメントルート直下に「Templates」というフォルダが自動的に作成され、その中に先ほど設定したテンプレート名のファイルが保存されます。このテンプレート名の拡張子は「.dwt」になり、Dreamweaverのテンプレートファイルとして機能します。これでパターンページを量産する準備が整いました。

Dreamweaverのテンプレート機能でパターンページを量産する

 

 

2. 作成したテンプレートファイルからページを量産

Dreamweaverの新規作成から「サイトテンプレート」を選択し、作成したDreamweaverのテンプレートファイルを選択します。

Dreamweaverのテンプレート機能でパターンページを量産する

 

テンプレートファイルを元にした新規のHTMLドキュメントが開かれますが、テンプレートで設定した編集可能領域以外のコードがグレーアウトされ、編集できないようにロックされているのが確認できます。デザインビューの方でも確認してみると、表示可能領域以外の要素は選択できないようになっています。

Dreamweaverのテンプレート機能でパターンページを量産する

Dreamweaverのテンプレート機能でパターンページを量産する

 

こうすることで、共通エリアは変更ができなくなるので、コンテンツの内容が異なる部分だけを安全に編集できるようになります。

Dreamweaverのテンプレート機能でパターンページを量産する

 

テンプレートからの編集が終わると、そのまま保存することもできますが不要なテンプレート用のコメントアウトタグが残ってしまいます。ですので「ツール」→「テンプレート」→「マークアップを省略して書き出し」を選択します。書き出し先フォルダーを設定すると、Dreamweaverのテンプレート関連のコメントアウトが全て削除された状態でHTMLが書き出されます。

Dreamweaverのテンプレート機能でパターンページを量産する

Dreamweaverのテンプレート機能でパターンページを量産する

 

ちなみに、「******.html.xml」という名前でテンプレートの編集可能領域部分のみを抜き出したXMLファイルも合わせて書き出されます。XMLファイルの中を見ると表示可能領域はCDATAとしてitem要素として書き出されているのが確認できます。

【******.html.xml】

<?xml version="1.0" encoding="utf-8"?>
<templateItems template="/Templates/*******.dwt" codeOutsideHTMLIsLocked="false">
 <item name="編集可能領域名">
  <![CDATA[
   ............テンプレートの内容
  ]]>
 </item>
 <item name="編集可能領域名">
  <![CDATA[
   ............テンプレートの内容
  ]]>
 </item>
</templateItems>

 

そのほかにも、Dreamweaverのテンプレート内で使える独自タグなども多数存在し、条件分岐やループなども可能となります。また、PHPなどのコードがhtml要素の外側であったり、DOCTYPE宣言の前に入る場合には下記のコードが必要になります。次のようにheadタグ内に記述しておきます。

<head>
 ............
 <!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
</head>

 

このDreamweaverのテンプレート機能をうまく使いこなすことで、PHPやjavascriptの制限を受けずとも、合理的に大量のパターンページ作成が捗るのではないでしょうか。複数人で分担する作業の時なども便利そうですね。ただし、使い慣れるのと操作を覚えるコストはかかりそうですが、、使う機会があれば試してみたいと思います。

 

(参考にさせて頂いたサイト)
テンプレート機能を使ってみよう パート1:「編集可能領域」と「オプション領域」の使い方

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】