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 でドキュメント相対パスが調整される様子を示します。

テンプレートからグラフィックまでの元のパス:
../graphics/images/banner.gif
テンプレートが適用されるページの調整されたパス:
../../graphics/images/banner.gif

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

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

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

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

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

テンプレートからグラフィックへの元のパス:
/graphics/images/banner.gif
テンプレートが適用されるページのパス
/graphics/images/banner.gif

テンプレートとテンプレートが適用されるページの間では、サイトルート相対パスや絶対パス (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 サーバーはシステムレベルで設定されています。詳細については、システムのマニュアルを参照してください。

 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー