効率的に作るコーディングとは?

2008年7月14日(月)
藤田 洋正

テンプレートの作り方

 テンプレートとは、固定のページレイアウト(枠組み)やヘッダー、フッターなどのサイト内の共通部分を複数ページにわたり共有することができる機能です。

 テンプレートは、編集可能な領域と編集不可能な領域(以下、編集可能領域)を設定することができ、複数人でページを量産する際にコピー&ペーストのミスや、誤ってタグを必要なタグを削除してしまうミスを未然に防ぐことが可能です。

 また、サイト全体に関係する大幅なレイアウト変更が生じた場合や、テンプレートを使用していれば、修正作業に必要とする工数を軽減することができます。新規ページの作成についても、固定のページレイアウトを保持したまま、非常に簡単に安全に行うことができます。

 テンプレートの作成方法は、次の手順で作成を行います。

 はじめに、テンプレートとして保存したいHTMLファイルをコーディングします。次に、テンプレートの領域を設定します。テンプレートの領域には、編集可能領域、リピート領域などがあります。

 そして、メニューの「ファイル→テンプレートとして保存」を選択し、「保存名」にテンプレートの名前をつけて「保存」ボタンをクリックします。

 それが、サイトのローカルルートフォルダに「Templates」というフォルダが自動的に作成され、「.dwt」という拡張子で保存されます。テンプレートには、1つ以上の編集可能領域の設定が必要です。

 次に、作成したテンプレートに編集可能領域を設定しましょう。

テンプレートの編集可能領域

 編集可能領域は次の手順で設定をします。

 はじめに、編集可能領域を設定したい個所を選択します。

 次に、3つのいずれかの方法で編集可能領域を挿入します。

 メニューから使用する場合は、「挿入→テンプレートオブジェクト→編集可能領域」を選択します。

 挿入バーを使用する場合は、「挿入」バーの「一般」カテゴリで、「テンプレート」ボタンの矢印をクリックし、「編集可能領域」を選択します。「新規編集可能領域」という名称のウィンドウが表示されますので、任意の名前を入力して「OK」ボタンをクリックしてください。

 コードを直接記述する場合、編集可能領域を設定するためのテンプレートタグを記述します(図3)。

 以上の手順で、テンプレートに編集可能領域を設定することができます。

 また、筆者のブログ(http://blog.creativehope.co.jp/markup/)でも、Dreamweaverのテンプレートについて解説しておりますので、そちらもご覧ください。

 ここまで、Dreamweaverの4つの便利な機能について解説しましたが、どの機能も便利で、簡単に使用することが可能です。Dreamweaverを使いこなせば、マークアップエンジニア(HTMLコーダー)の方の仕事が効率的に進みますので、ぜひお試しください。

 次回は、DreamweaverとMovableTypeを連携して、効率的にページを制作する方法をご紹介します。

株式会社クリエイティブホープ
マークアップエンジニア。埼玉県出身、測量会社で測量士として従事するが、Webサイト制作に興味を持ち、株式会社クリエイティブホープに入社。昼夜を問わずHTML、CSS、ブラウザとの格闘に明け暮れている。マークアップ野郎!!:http://blog.creativehope.co.jp/markup/http://www.creativehope.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています