Dreamweaver でのテンプレートの使用方法
著者：Eve Cole
更新時間：2009-05-30 18:50:16
Web デザイン ツール Dreamweaver (以下、DW、現在の最高バージョンは 4.02、この記事の例はバージョン 4.0) には非常に強力な機能があります。それはテンプレートです。
では、テンプレートの魅力とは何でしょうか？どのような特徴があるのでしょうか？
テンプレートを使用すると、サイトのすべてのページに表示される要素を強化できます。
テンプレートを利用してWEBページを作成することで、サイト全体のスタイルに統一感を持たせることができます。
テンプレートを変更すれば、各ページを手動で変更することなく、テンプレートが適用されているすべての WEB ページを変更できます。たとえば、著作権を変更する必要がある場合、ページごとに著作権を変更する必要がありますか?何千ページもある場合はどうなるでしょうか?最初は2、3大きくなると思います。しかし、テンプレートを使用すれば、これは問題になりません。
以下は、テンプレートの使用をすぐにマスターするのに役立つ、より包括的な例です。
1.編集ページ
DW を開き、新しいサイトを作成します。これに「Spider Web」という名前を付けます。
内部ページとして新しい空のページを作成し (通常、Web サイトにはホームページが 1 つしかないため、ホームページ用のテンプレートを作成する必要はありません)、body.htm という名前を付けます。
このページを編集し、図 1 に示すように完成させます。
図 1、編集が完了した後の body.htm ページ。点 A に注目してください。これは編集可能領域として使用されます。これについては後述します。
2. テンプレートの生成
編集が完了したら、このページをテンプレートとして保存します (通常の HTML Web ページとしては保存されないことに注意してください)。このコマンドを実行すると、図 2 に示すように、[ファイル] → [テンプレートとして保存] を選択してテンプレートとして保存できます。
図 2、「テンプレートとして保存」ウィンドウ。
図 2 では、B はサイトの選択で、「Spider Web」を選択し、C は保存するテンプレート ファイル名で、本文に入力します。右上隅の「保存」を押して保存します。
このとき、F8 キーを押してサイト (サイト マネージャー) を呼び出すと、Templates フォルダーに body.dwt が表示されます (テンプレート ファイルがある場合、DW は自動的に Templates フォルダーを生成します。dwt はテンプレートの種類です)ファイル）
3. テンプレートを編集する
サイトで body.dwt テンプレート ファイルを開くと、body.htm ページと何も変わらないように見えますが、実際には body.htm に編集可能な領域を追加することはできません。編集可能領域はテンプレート ファイルにのみ追加できます。
誰もが「編集可能領域」についてよりよく理解できるように、最初にこのテンプレートを使用して HTML ファイルを生成します。「ファイル」→「テンプレートから新規作成」をクリックすると、「テンプレートの選択」ウィンドウが表示され、テンプレート内の本文を選択して、上部の「選択」をクリックします。右隅をクリックして新しい HTML ファイルを生成します。この新しいページの名前を body2.htm に変更します。次に、DW を使用して body.htm ファイルと body2.htm ファイルの両方を開いて、違いを比較します。 body2.htm ページの右上隅に「Template:body」という文字が書かれているのがわかります。 (このページは、body.dwt テンプレート ファイルから生成されます) 同時に、body2.htm ファイルは編集できないことに驚くでしょう (body.htm は編集できます)。ちなみに、これは、body.dwtテンプレートファイルに「編集可能領域」が定義されておらず、生成されたページが編集不可能になっているためです。したがって、テンプレート ファイルに編集可能領域を追加する必要があります。編集可能領域を追加する手順は次のとおりです。
1) body.dwt テンプレート ファイルを開き、中央のテーブル (つまり、図 1 の A) を編集できるようにします。ただし、body.htm ではなく body.dwt ファイル内にあるため、ここに編集可能領域を追加します。
2) 表 A にマウス カーソルを置き、マウスを右クリックして、[新しい編集可能領域...] を選択します。[新しい編集可能領域] ウィンドウがポップアップし、この編集可能領域の名前を入力するように求められます (通常は、この編集可能領域の名前を入力するように求められます)。これを編集可能領域マークと呼びます)。 [Region01] に入力し、[OK] をクリックしてこのウィンドウを閉じ、現在の編集可能な領域マークの編集を完了します。このとき、表には図 3 に示すような表示が表示されます。
図 3、[新しい編集可能領域] ウィンドウ。
「Region01」とマークされた編集可能な領域があることに注意してください。
ここまでは編集可能領域を定義しましたが、複数の編集領域がある場合も同様に行うことができます。
※編集可能領域を削除したい場合は、「修正」→「テンプレート」→「編集可能領域を削除」…で新しい編集可能領域を生成することもできます。
4. テンプレートを使用してページを生成する
実際、テンプレートを使用してページを生成する手順は、「ファイル」→「テンプレートから新規作成」を使用することを以前に説明しました。ステップ 3 の関連するステップを参照してください。次に、テンプレートを使用して body3.htm という名前のページを生成します。この時点で、body3.htm ページでは、編集可能な編集可能領域 Region01 を除いて、その他の場所でマウスが制限されていることがわかります。この編集可能エリアに必要なコンテンツを追加します。たとえば、記事を自由に書くことができます。このようにして、テンプレートを使用して、ニーズに応じたページを生成できます。
5. テンプレートのコンテンツを変更し、サイト ファイルを更新します
body.dwt テンプレート ファイルを開き、変更する必要がある領域を変更します。たとえば、ロゴ画像を置き換えたり、編集不可能な領域を変更したり、編集可能な領域を追加または削除したりすることもできます。
以下では、ロゴの変更を使用して、テンプレートがファイルを更新する方法を示しています。
ロゴ画像を別の好みの画像に変更し、完了後に body.dwt ファイルを保存します。このとき、DW はファイルを更新する必要があるかどうかを尋ねるウィンドウを表示し、DW はすべてのページを自動的に更新します。このテンプレートで生成された場合、DW は更新中に [ページの更新] ウィンドウをポップアップ表示し、更新ログが [ページの更新] ウィンドウに表示されます。
※「更新しない」が選択されている場合、DW はテンプレート ファイルを直接保持し、一時的にページを更新しませんが、「修正」→「テンプレート」→「ページの更新…」を選択するだけでページを手動で更新できます。
この時点で、body3.htm などの body.dwt で生成されたページを開きます。ロゴ画像が変更されていることがわかります。
この機能を使用すると、サイトの更新の問題を簡単に解決できることがわかります。この記事ではスペースの問題のため、多くの機能について説明する必要があります。 DW のテンプレート スタイルを十分に活用できるよう、さらに試してください。
DW には、テンプレートと有機的に組み合わせることができるライブラリという機能もあります。これにより、テンプレートをより強力にすることができます。読者の皆様が興味を持っていただければ、この機能を皆さんにプレゼントしたいと思います。
