【制作雑記】ドリームウィーバーのテンプレート技

■INDEX

├お人形のページ
├デザインのページ
├イラストのページ
└制作雑記帳


├ライブサン
├サイコロフォース
├人間航空魚雷
└デジめくり


├漫遊写真館
├模型のページ
├食文化のページ
└漫遊番外地

このサイトについて

■武蔵野文化堂制作工房／制作雑記／ドリームウィーバーのテンプレート技

ブログ全盛期の時代にドリームウィーバー（以下ドリウィ）などというウェブサイト構築のためのソフトを使う人がどれだけいるか判らない上に、仮にこのソフトを使う人は多分プロの人が多いと思うので、ここでわざわざ紹介するのも何ですが、もしかしたら役に立つかもしれないので紹介します。

これはドリウィを使う上で結構便利な機能でして、特にページ数がべらぼうに多いサイトを管理している人には打ってつけです。ページ全体の統一感を出すためにひな形を作るのはマストなことですが、その時にテンプレートで大枠を作っておくと良いです。例えば時々模様替えしたいタイトルやヘッダー周りとか、途中でカテゴリーやジャンルが増えたときに変えたいナビの部分とかです。２～３百ページもあったりしたら変更だけで大変…というかやりたくないですよね。これを使えばドロロロッと一撃で終わります。

テンプレートを作りましょう。

新規テンプレートをつくる

まず通常通り新規ファイルを作るのですが、図のようにメニューバーから「新規」を選ぶか、コマンドＮを実行します。

新規テンプレートをつくる2

するとこんなダイアログが出てきます。そして図のように真ん中の段の「HＴMＬテンプレート」を選択して「作成」ボタンを押しましょう。

サイト全体のデザインを作る

これだけ見るといつものページ制作と変わりませんね。では適当に全ページに共通する要素を作り込んでいきます。

しかしこのままでは各ページの編集が出来ない状態になってしまうので、もう一処理します。

サイト全体で共通する部分はそのままにしておいて、各ページごとに作り込みたい部分を図のように選択してアクティブな状態にしておきます。

編集可能領域を作る

上図で選んだテーブルだけを編集可能領域として設定します。メニューバーの「挿入」「テンプレートオブジェクト」「編集可能領域」といった順に選択します。

編集可能領域ダイアログ

すると図のようなダイアログが出てきます。特に名前を付けなくてもよい人はそのまま「ＯＫ」ボタンを押します

編集可能領域を作る2

すると先ほど選択したテーブルの上に変なタグのようなものが付いています。これはブラウザでは表示されませんのでご安心を。この編集可能領域の中は今の時点では作り込みません。テンプレートではあくまでサイト全体に共通させるモノのみを作り込みましょう。それが済んだら「保存」します。

テンプレートを保存する

保存をしようとすると次のダイアログが出てきます。この時点では見えてませんが裏で「Templates」フォルダが勝手に作られてます。現段階ではテンプレートなしになってます。保存先となってますが、これはテンプレートの名前を入れましょう。私は「ＨＩＮＡＧＡＴＡ２」と入れてみました。

テンプレートを確認する

サイトのローカルルートフォルダを見てみましょう。「Templates」フォルダが勝手に作られているはずです。そしてその中に先ほど命名した「ＨＩＮＡＧＡＴＡ２」のドキュメントが入っていればＯＫです。

これでテンプレートが出来ました。一安心です。では続いてそのテンプレートを使って実際のページを作り込んでいきます。

サイトの各ページを作りましょう。

テンプレートから新規作成

最初と同様にファイルメニューから「新規…」を選び「新規ドキュメント」ダイアログを出します。今度は「一般」ではなく「テンプレート」のボタンを押しましょう。すると左のメニューに自分が作っているサイト一覧が出てきます。ひとつだけしか作っていない人は一項目だけです。そして今作っているサイトを選択すると、そのサイトのテンプレートの一覧が表示されます。ひとつしか作ってないですが…。選択した「ＨＩＮＡＧＡＴＡ２」のプレビュー画面が右側に表示されています。そして下の「作成」ボタンを押します。

テンプレートから新規作成

テンプレートから作成する新規ドキュメントの作り方は画面の右側に並んでいるアセットパネルからも作成できます。アセットパネルが表示されていない時は「ウィンドウ」メニューから「アセット」を選びます。アセットパネルの中から任意のテンプレートを選び、左図の赤ワクの中に見えるボタンをクリックします。するとコンテキストメニューが出てくるので「テンプレートから新規作成」を選びます。

テンプレートからページを作る

これは先ほど作ったテンプレートと同じデザインですが今度のはＨＴＭＬのドキュメントになります。しかし通常のものと違う点は編集可能領域しか作り込めないことです。それ以外の部分にマウスを合わせると駐車禁止マークが現れて編集させてくれません。大人しく編集可能領域のみ作り込みましょう。編集可能領域の変更は「Templates」フォルダの中にある先ほど作った「ＨＩＮＡＧＡＴＡ２」でしか実行できません。

テンプレートからページを作る

さて編集可能領域の中をいじってどんどんコンテンツやページを増やしていきましょう。これでテンプレートからの新規ドキュメント作成は終わりです。じっくりサイトを作っていってください。

テンプレート部分の変更。

テンプレートを変更してみる

サイトがある程度できてきたら、試しにちょっとテンプレートを変更してみましょう。この作例では左側のナビゲーションの部分に項目を増やしてみました。そして「保存」すると「テンプレートファイルの更新」ダイアログが現れます。そしてこのテンプレートから制作した五つのファイルが更新されることを知らせてくれます。「更新」ボタンを押すと五つのファイルはテンプレート同様に更新されます。

テンプレートを変更してみる2

更新の進行具合と終了をつげるダイアログが出てきます。「閉じる」ボタンを押します。

確認してみましょう。

更新が終わったらしい五つのファイルをいっぺんに開いてみました。なんとすべてのファイルのナビゲーション部分がテンプレートに合わせて更新されています。例えばヘッダーの部分を後から画像に置き換えたい時も今と同じような更新作業をすると全ページに反映される仕掛けです。

これでテンプレートを使った楽々技の紹介は終わりです。

■武蔵野文化堂制作工房／制作雑記／ドリームウィーバーのテンプレート技

ホームページ、ブログ運営などに納得の1ＧB。しかも低価格。今お勧めのレンタルサーバーです。

Adobe Dreamweaver CS4
ウェブサイトの構築にもっとも強力に役立つアプリケーション。。

Adobe Creative Suite 4
フォトショップやイラストレーター、ドリームウィーバーなど各ジャンルの主要ソフトがすべてバンドル。最強。