Dreamweaver テンプレートのパスについて理解する

Dreamweaver テンプレート
HTML ページがテンプレートとして保存されると、Dreamweaver はローカルルートフォルダーのルートレベルにテンプレートフォルダーを作成し、適用されるすべてのページのソースとなる .dwt ファイルを生成します。HTML ページにテンプレートを適用するたびに（「ファイル／テンプレートから新規作成」 または「修正／テンプレート／テンプレートをページに適用」）、.dwt ファイルへのサイトルート相対リンクが作成されます。 このサイト相対リンクが常に正しくリンクする理由は、サイトのフォルダー構造のルートレベルにあるテンプレートフォルダーに .dwt ファイルが常駐するからです。 .dwt ファイルをテンプレートフォルダーから移動した場合や、テンプレートフォルダーを移動または名前変更した場合は、リンクが壊れてしまいます。 したがって、.dwt ファイルは Dreamweaver が作成したテンプレートフォルダー内に入れておくことが非常に重要です。 混乱を避けるため、テンプレートフォルダーには、サイトの他の要素（イメージソースファイルや HTML ドキュメント）を「保存しない」ようにしてください。

ページはテンプレートファイルにどのようにリンクされますか？
ファイルが既存のページに適用されるか、テンプレートから新規作成されると、以下のコードがソースに挿入されます：

<!-- #BeginTemplate "/Templates/templateName.dwt" -->

Dreamweaver で生成される HTML ソースコードを表示するには、「ウィンドウ／HTML」と選択します。

上記のパスは新規ページに表示される通常の HTML ソースを上書きします。 このパスは、新しいファイルで生成される通常のタグで開始するのでなく、そのページの編集可能領域にない情報をすべて含む .dwt ファイルがローカルルートフォルダーの 1 レベル下の Templates フォルダーに存在すると指定しています。 このパスによって、ブラウザーは、ページのプロパティ、レイアウト、グラフィック（.dwt ファイルにのみ存在する内容すべて）を提供するファイルの正しい場所を参照します。 これが、ページの編集可能領域外での変更は .dwt ファイルに直接行う必要がある理由です。 .dwt ファイル自体を開いて変更した場合、テンプレートが適用されているすべてのページは前と同じ場所のファイルにリンクされます。 テンプレートが適用されているページはすべて、自動的に新しい情報で更新されます。

ドキュメント相対パスとサイトルート相対パスの比較
HTMLページをテンプレートにリンクするパスは、サイトルート相対パスです。これをサイトルート相対と呼ぶ理由は、このパスがディレクトリ構造のトップレベル（ローカルルートフォルダー）から始まり、1 レベル下のフォルダー（Templates フォルダー）を経由して、最終的に .dwt ファイルにリンクするからです。 Dreamweaver は、Templates フォルダ内のテンプレートへのサイトルート相対パスを自動的に生成します。これは、サイト構造内に他のいかなるファイルフォルダが存在しようとも、Dreamweaver がテンプレートの場所を正確に知っているからです。

ドキュメント相対では、あるファイルからもう 1 つのファイルまでの特定のパスを指定します。 このパスは、ファイルフォルダ構造のトップレベル (サイトルート) からではなく、あるファイルから始まり、途中のファイルフォルダ (ディレクトリ) を経由して、もう一方のファイルがある場所で終了するパスです。 ファイル間のドキュメント相対リンクを作成する前に、両方のファイルをローカルルートフォルダーに保存しておく必要があります。

リモートサーバーにファイルをアップロードする前に、ブラウザでページをローカルにプレビューする場合は、ドキュメント相対パスを使用する必要があります。 Internet Explorer や Netscape は、Dreamweaver の場合と異なり、ローカルルートフォルダの定義を理解できないので、それらのブラウザが参照できるのは現在表示中のド キュメントへの相対パスだけとなります。 アップロード前にブラウザを使用してローカルにファイルを表示したいという大半のユーザーの要望に応えるため、 Dreamweaver のデフォルトでは、リンク先ファイルや挿入イメージにドキュメント相対パスが使用されています。 イメージや別の HTMLページへのリンクを挿入する前にファイルを保存していなかった場合は、現在のページの場所について Dreamweaver には参照がないので、以下のようなパスが生成されます。

file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm

-または-

file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm

これらは、ご使用のワークステーションのみに固有なパスなので、リモートサーバーにファイルをアップロードした場合は機能しません。

以下のチャートは、ドキュメント相対パスとサイトルート相対パスの違いを図で説明しています。以下の例では、bio.htmというページに、異なるパス指定を使用してlogo.jpgという画像が挿入されています。

テンプレート内のドキュメント相対パス

.dwtファイルに直接画像やリンクを挿入することは、混乱を招く可能性があります。.dwt ファイルの使用中にドキュメント相対パスのリンクを作成すると、そのリンクはまさに .dwt ファイルに対するドキュメント相対パスとなります。 生成されるパスは、HTML ページまたはイメージソースから .dwt ファイルへのパスとなります。 Dreamweaver では、テンプレートが適用される参照ページの場所がライブで記録されており、現在のページで正しく HTML ファイルが参照されるようにパスが自動的に調整されます。 したがって、.dwt ファイルとテンプレート適用先のページでは HTML ソースのパスが異なりますが、これは Dreamweaver での正しい処理です。 各ページの特定の場所についてパスが自動的に調整されないと、.dwt ファイル以外のすべてのファイル上のドキュメント相対パスが壊れてしまいます。

次の例は、Dreamweaver でドキュメント相対パスが調整される様子を示します。

テンプレートとテンプレートが適用されるページの間では、サイトルート相対パスや絶対パス (http://) を調整する必要がないため、変更はありません。

テンプレートが適用されたページ内のドキュメント相対パス

テンプレートに添付されたページの編集可能領域内に画像やリンクを挿入する作業は、テンプレートに添付されていないページに画像やリンクを挿入する場合とまったく同じです。「ファイル／テンプレートから新規作成」 を実行し、続いて「ファイル／保存」（保存先としてはローカルルートフォルダ内の場所を選択）を実行した後で、他のペ ージやイメージへのリンクを作成する場合は、HTML ページの選択ダイアログボックスまたはイメージソースの選択ダイアログボックスで、デフォルトでドキュメント相対パスが使用されます。 「相対位置」ポップアップメニューから手動で「サイトルート」に変更しない限り、ブラウザでローカルにプレビューする際にイメージとリンクは有効です。

テンプレート内のサイトルート相対パス

テンプレートファイルで他のページへのリンクを作成したり、グラフィックのImage Sourceを参照したりする場合、HTMLファイルの選択およびImage Sourceの選択ダイアログボックスのポップアップメニューでは、ドキュメント相対パスとサイトルート相対パスのどちらかを選択できます。上のチャートで示したように、「サイトルート」 を選択すると、ローカルルートフォルダから選択したファイルへの直接のパスが作成され、このパスは Dreamweaver 上で現在開いている .dwt ファイルに依存しません。 サイトディレクトリ構造の内容をローカルルートフォルダ内で移動する可能性がある場合は、サイトルート相対リンクを使用すると便利です。これは、ファイルの場所が変更されても、リンクは引き続き有効であるためです。

テンプレートとテンプレートが適用されるページの間では、サイトルート相対パスや絶対パス (http://) を調整する必要がないため、変更はありません。 .dwt ファイルまたはテンプレートが適用される HTML ファイルのいずれの場合も、ドキュメントの場所はサイトルート相対パスに影響しません。

テンプレートが適用されたページ内のサイトルート相対パス
サイトが複雑である場合、開発者のチームが協力して作業する場合、またはサイトディレクトリ構造が定期的に改訂される場合は、サイトルート相対リンクを使用することができます。サイト相対リンクの作成では、イメージソースの選択ダイアログボックスと HTML ファイルの選択ダイアログボックスの両方に表示される「相対位置」というテキストの横のポップアップメニューから、「サイトルート」を選択するだけす。

作成されたパスでは、ローカルのルートフォルダから始まり、サブフォルダを経由し て、リンク先のページやイメージまでのルートが指定されます。したがってデベロッパーは、リンクを壊すことなく、サイトディレクトリ構造内の任意のサブフォルダにページやアセットを柔軟に移動させることができます。 例えば、上のチャートで、"logo.jpg" ファイル へのリンクがサイトルート相対リンクであれば、このファイル "images" フォルダから "features" フォルダに移動する場合でも、ブラウザでは問題なくグラフィックが参照されます。 このパスがドキュメント相対リンクである場合は、"logo.jpg" ファイルと "bio.htm" ファイルが両方とも、ドキュメント相対パスが作成されたときに配置されていたフォルダ構造内にある必要があります。 パスが作成された後でどちらかのファイルを移動すると、パスは壊れてしまいます。

上記のように、ブラウザでローカルにプレビューが可能なのは、ドキュメント相対リンクのみです。 サイトルート相対リンクの使用を選択した場合、ブラウザでページを表示するには、次の 2 つの方法しかありません。

最初の方法では、リモートサーバーにファイルをアップロード (PUT) した後、URL ロケータフィ ールドに絶対パスを入力してブラウザでページを参照します。 この方法では、Web での表示と全く同様にページが表示されます。 ページを変更するには、ファイルのローカルコピーを開いて変更を加え、その HTML ページを保存し、FTP サーバーに接続してリモートサーバーに新しいファイルを PUT します。 リモートサーバー上の古いバージョンのファイルは、同じフォルダ内に同じ名前のファイルが配置されると上書きされます。

ブラウザでサイト相対リンクをプレビューする 2 つ目の方法では、パーソナル web サーバーを使用します。 この方法は Windows でのみ可能で、 Dreamweaver で 「ファ イル／ブラウザでプレビュー／ブラウザリストの編集」を使用し、「ローカルサーバーを使用してプレビュー」 を選択します。 これにより、パーソナル web サーバーを使用してドキュメントをプレビューできます。

メモ： Macintosh の場合、パーソナル web サーバーはシステムレベルで設定されています。 詳細については、システムのマニュアルを参照してください。