テンプレートとライブラリを効果的に使う

01 図1:ブラウザで表示される状態を想定して、Fireworksでページデザインをする。スライスオブジェクトにはテキストエリアとして書き出しをすることもできるので便利だ


02 図2:編集可能領域を選択し、「修正」メニュー→「テンプレート」→「選択範囲を編集可能としてマーク...」を実行し、編集可能領域の名前をつけて保存する


03 図3:編集可能領域には自由にデザインできる。それ以外の部分はロックされており、テンプレートでリンクされたボタンはそのまま使用できる


04 図4:テンプレートのデザインを変更したが、編集可能な領域のデザインは前回と同様のままである


05 図5:ページのフッタに年号を入れる場合はけっこう多い。コンテンツが増えてすべてのページの画像を貼り替えるのは大変な作業だ

06 図6:テンプレートを変更すると、サイト内の全データを検索して更新を行う。200ページ近いHTMLファイルもわずか数分で更新作業が完了する

07 図7:実際にページで使用するデータと基データを分けて管理することでさらに効率的な更新が可能
 ウェブサイト構築の仕事はいったん始まってしまうと、更新に次ぐ更新で終わりのない戦いです。グラフィックに関連している部分では、ページのデザインフォーマットなどもコンテンツが追加されるたびにデザインに影響を及ぼし、そのたびに新しいグラフィックを追加しなくてはなりません。また定型のヘッダやフッタなども、デザインリニューアルによって新しいデザインに変更するケースも多いでしょう。Dreamweaverはこのようにあとでデザイン変更が予想される個所をテンプレートやライブラリという機能で登録しておくことによって、サイト内の大量ページを一括更新できます。もちろんグラフィックをFireworksでつくり、オリジナルデータのPNGファイルを整理・保存しておけば、さらに効率的にデザイン更新が可能です。

テンプレートを使ってデザインの一括更新
 Dreamweaverには「テンプレート」という機能があり、サイト内で同じデザインフォーマットでページを作成する際に便利な機能です。テンプレート用のデータを作成する際には、ウェブページを1ページ単位でデザインできるFireworksのスライス機能を使うと便利です(図1)。
 スライスで書き出したHTMLファイルをDreamweaverで開き、ボタンなどによるリンク先を正確に設定し、テンプレートとして保存します。次にページごとに異なるコンテンツを挿入するために編集可能な領域を名前をつけて保存します(図2)。これでテンプレートファイルは完成です。でき上がったテンプレートファイルは「Templates」というフォルダに登録され、サイト内で新しいドキュメントを作成するときは「ファイル」メニュー→「テンプレートから新規作成」を実行します。すでにコンテンツが存在している場合、「テンプレート」パネルからテンプレートを適用します。編集可能な領域にした個所は自由にページごとのデザインが可能です(図3)。
 ページのデザインを変更する場合は、Fireworksで新たにスライス書き出ししたデータをテンプレートに割り当てて、同じ名前で上書き保存すれば、サイト内でテンプレートを割り当てているページが一括更新されます(図4)。

頻繁に使う画像はライブラリに登録しよう
 テンプレートと同様に、サイト内のドキュメントを一括更新できる機能に「ライブラリ」という機能があります。コンテンツごとのタイトルや著作権、企業ロゴなどを記したページのフッタなどはライブラリに登録しておくとたいへん便利です(図5)。
 ライブラリの利用はページ作成時に「ライブラリ」パネルから必要な部品を挿入するだけで利用でき、Fireworksでは部品として作成したグラフィックをライブラリファイルとして直接書き出すこともできます。
 コーナータイトルのデザイン変更や、著作権表示の年号変更などは、オリジナルデータを変更し、ライブラリファイルを上書き保存すれば、サイト内のすべてのHTMLファイルが自動更新され非常に便利です(図6)。サイトで使用するデータとオリジナルのPNGのファイルを整理して保存するように心がけると、さらに効率よくサイトを管理できます(図7)。

● 今回の作例をダウンロードする (988KB)●



(C)2000 MdN Corporation All Rights Reserved.