Dreamweaverで簡単にアップデート

Web開発者にとって、何ヶ月にもわたる努力が報われ、サイトが無事に公開されるのを見る喜びに勝るものはありません。しかし、ウェブサイトが立ち上がると、日常的なメンテナンス作業やサイトの更新作業に多くの時間を費やすことになります。こうした日々の作業は、創造性に欠け、繰り返し作業ばかりになりがちです。

優れたWeb編集ソフトウェアは、複数ページに表示される要素の作成と更新のプロセスを効率化することで、大規模サイトの維持管理の煩雑さを軽減します。Macromedia Dreamweaverのテンプレートとライブラリを使えば、1つのファイルに変更を加えるだけで、Dreamweaverがサイト上の複数のページに同じ変更を自動的に適用します。

数十ページものコードを手作業で30分ほどかけて作成するような定型的な作業も、わずか数分で完了します。また、複数のファイルにわたる検索・置換機能を備えたテキストベースのWebエディタ（Bare BonesのBBEditなど）とは異なり、Dreamweaverのビジュアルインターフェースでは、HTMLタグに触れることなく複雑な変更を加えることができます。

テンプレートとライブラリの力を最大限に活用していただくために、テンプレートとライブラリの使い方とそれぞれの仕組みについて説明します。（詳しい手順については、「テンプレートを使った自動化」と「ライブラリアイテムを使った自動化」をご覧ください。）

テンプレートへのステップアップ

Dreamweaverのテンプレート機能は、頻繁に使用するレイアウトの作成と更新にかかる時間を大幅に節約できます。汎用的なページレイアウトをベースに複数のWebページを作成できます。ページを変更するには、テンプレートに変更を加えるだけで、Dreamweaverがその変更をテンプレートに基づくすべてのページに反映します。

サイトには複数のテンプレートを設定できます。ニュース記事や従業員のプロフィールページなど、ページのスタイルごとに異なるテンプレートを作成することもできます。

例えば、会社のウェブサイトの全ページにあるナビゲーションメニューに「求人」ボタンを追加したいとします。テンプレートに変更を加えた後、Dreamweaver にサイト全体をスキャンさせ、そのテンプレートに基づいている各ページに新しいボタンを追加します。

図書館を学ぶ

ライブラリアイテムは、サイト上で何度も表示されるコンテンツがあるものの、ページごとに異なる場所に配置される場合、非常に時間節約になります。これは、ライブラリアイテムがページレベルではなく要素レベルで機能するためです。例えば、サイトに4つの異なる広告主の広告バナーを掲載しているとします。各バナーをライブラリアイテムとして保存しておけば、Dreamweaverのライブラリパレットから挿入するだけで、他のページに簡単に追加できます。毎回バナーを作成し直す必要はありません。後でバナーグラフィックを更新する必要がある場合（例えば、新しいグラフィックに差し替えたり、ハイパーリンクのリンク先を変更したりする場合）、元のライブラリアイテムを変更するだけで、Dreamweaverがサイト上のバナーのさまざまなインスタンスを自動的に更新します。

属さないもの

テンプレートとライブラリは、たとえ小規模なサイトであっても、効率性を大幅に向上させてくれるため、導入する価値は十分にあります。テンプレートとライブラリの機能を拡張する方法については、「テンプレートを使った自動化」と「ライブラリアイテムを使った自動化」をご覧ください。

MIKE WOOLDRIDGE は Web デザイナーであり、『Teach Yourself Dreamweaver 3』 (IDG Books Worldwide、2000 年) の著者です。

2000年7月号 119ページ

テンプレートを使った自動化

Dreamweaverのテンプレート機能を使えば、ウェブサイトに頻繁に表示される要素の更新作業をコンピュータに任せることができます。使い始める前に知っておくべき基本事項はほんのわずかです。テンプレートには、編集可能な領域とロックされた領域の2種類があります。ロックされた領域は、ナビゲーションボタンや免責事項など、ページ間で変更されないコンテンツ用です。編集可能な領域は、ページタイトルや本文など、ページ固有の要素用です。デフォルトでは、テンプレートのすべての要素はロックされた状態になっています。個々のページで編集可能な領域を選択するのはあなた次第です。
1. Dreamweaverで他のWebページを作成するのと同じように、テンプレートを作成します。テンプレートは最初から作成することも、既存のWebページから作成することもできます。新しいページをテンプレートとして保存するには、「ファイル」メニューから「テンプレートとして保存」を選択します。テンプレートの領域を編集可能にするには、クリック＆ドラッグで選択し、「変更」＞「テンプレート」＞「選択範囲を編集可能にマーク」を選択します。テンプレートに基づいたWebページでは、編集可能な領域（Dreamweaverで青色でハイライト表示）のみを変更できます。
2. テンプレートに基づいてWebページを作成するには、「ファイル」→「テンプレートから新規作成」を選択します。次に、編集可能な領域に必要な変更（グラフィックやテキストの追加など）を加えます。Dreamweaverでは、編集できない領域（ロックされた領域）が黄色でハイライト表示されるので、編集可能な領域は簡単に確認できます。この従業員ページでは、個人情報と画像のみが編集可能です。
3. Webページ内のロックされた領域を変更する場合は、元のテンプレートファイル（サイトのTemplatesフォルダ内にあります）を開いて変更を加える必要があります。ここでは、メールアドレス用の行を追加し、会社のスローガンを修正し、背景を華やかにしました。
4. 最後に、編集したテンプレートを保存します。保存すると、Dreamweaver がテンプレートに基づいてページを更新するかどうかを尋ねる警告ボックスを表示します。「はい」をクリックすれば完了です。ここに示したウィンドウは、私の更新結果を示しています。Dreamweaver はサイトのファイルのうち 10 個を更新しましたが、私が更新したのはテンプレートの 1 つだけです。

2000年7月号 120ページ

ライブラリアイテムを使った自動化

Dreamweaver では、ライブラリを使用して、何度も使用するテーブルなどのページ要素を保存できます。ページに追加したライブラリアイテムのインスタンスは、ページごとに編集できません。編集したい場合は、サイトのライブラリパレットから元のライブラリアイテムを開く必要があります。Dreamweaverに変更をサイト全体に適用するように指示すると、そのライブラリアイテムのインスタンスを含むすべてのページが更新されます。ウェブページの要素をライブラリアイテムとして保存する利便性と、ページに挿入した後に個別にカスタマイズできる柔軟性の両方が必要になる場合があります。ここでは、その両方を実現する方法を説明します。画像とキャプションを格納するための、汎用的な2セルのテーブルを作成する例を紹介します。
1. まず、ドキュメントウィンドウで2つのセルを持つ表を作成します。サイトのライブラリに保存するには、表を選択し、「変更」→「ライブラリ」→「オブジェクトをライブラリに追加」を選択します。このライブラリ項目は、サイトに画像とキャプションを追加するたびに使用できます。
2. ライブラリパレットには、サイトで利用可能なすべてのライブラリアイテムが表示されます（A）。このライブラリアイテムをページに追加するには、ライブラリパレット（B）でアイテムを選択し、「挿入」をクリックします（C）。テーブルがドキュメントに挿入されます（D）。この時点で、ライブラリ内のアイテムを変更することで、Dreamweaverでドキュメント内のテーブルを変更できます。
3. ライブラリから2セルのテーブルをページに追加した直後は、ライブラリ項目のインスタンスがロックされているため、カスタマイズできません。編集するには、Dreamweaverのプロパティインスペクターで「オリジナルから切り離す」ボタンをクリックして、ライブラリとの関連付けを解除する必要があります。（プロパティインスペクターが閉じている場合は、「ウィンドウ」メニューから「プロパティ」を選択して開きます。）
4. テーブルをライブラリから切り離すと、画像やキャプションを追加してテーブルをカスタマイズできます。ただし、元のライブラリアイテムを変更しても、そのテーブルのインスタンスを変更することはできません。