某些 Creative Cloud 应用程序、服务和功能在中国不可用。
内容 （What's Covered）
Dreamweaver で HTML ページをテンプレートとして保存すると、ローカルのルートフォルダのルートレベルにテンプレートフォルダが作成され、.dwt ファイルが生成されます。このファイルは、適用対象となるすべてのページのソースとなります。HTML ページにテンプレートが適用されると ([ファイル] - [テンプレートから新規作成] を選択、 または [修正] - [テンプレート] - [テンプレートをページに適用] を選択)、.dwt ファイル へのサイト相対リンクが作成されます。.dwt ファイルは、サイトのフォルダ構造のルートレベルにある Templates フォルダ内に格納されているため、このサイト相対リンクは常に正しくリンクされています。.dwt ファイルが Templates フォルダ以外の場所に移されたり、Templates フォルダの場所や名前が変更されると、リンクは壊れてしまいます。したがって、.dwt ファイルは、Dreamweaver で作成されたとおり、Templates フォルダ内に必ず保持しておくことが極めて重要です。混乱を避けるため、Templates フォルダには、サイト内のほかのエレメント (イメージソースファイル、HTML ドキュメントなど) を保存しないように普段から注意しておくとよいでしょう。
既存ページがファイルに適用されたり、テンプレートから新規にファイルが作成される と、以下のコードがソースに挿入されます。
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
Dreamweaver で生成される HTML ソースコードを表示するには、コードインスペクタや HTML ソース、コードビューを表示させます。
上記のパスは、新規ページに表示される通常の HTML ソースを上書きするものです。新規ファイルで生成される通常のタグを使用して開始するのではなく、ローカルのルートフォルダの 1 レベル下にある Templates フォルダ内の .dwt ファイルを参照するように指定されます。この .dwt ファイルには、ページの編集可能領域外の情報がすべて含まれます。このパス情報により、ページのプロパティ、レイアウト、およびグラフィックスの情報が含まれるファイルの正しい場所がブラウザから参照されます。 これらの情報は、.dwt ファイルにのみ含まれるコンテンツです。このため、ページの編集可能領域外を変更する場合は、.dwt ファイルに直接変更を加える必要があります。.dwt ファイル自体を開いて変更した場合でも、このテンプレートが適用されているすべてのページのリンクは変更されません。テンプレートが適用されているページ は、テンプレートの新しい情報によって自動的に更新されます。
HTML ページをテンプレートにリンクするパスは、サイトルート相対パスです。「サイトルート相対」と呼ぶのは、ディレクトリ構造のトップレベル (ローカルのルートフォルダ) から始まり、1 レベル下のフォルダ (Templates フォルダ) を経由して、リンク先の .dwt ファイルまでのルートが指定されるためです。Dreamweaver では、Templates フォルダ内のテンプレートを指定するサイトルート相対パスが自動的に生成されます。これは、サイトの構造内にいかなるファイルフォルダが存在しようとも、テンプレートの場所は常に Templates フォルダ内と決まっているためです。詳細については、Site Root Relative - Why? * (TechNote 13129) を参照してください。
ドキュメント相対パスは、2 つのファイルの間のルートを指定するパスです。ファイルフォルダ構造のトップレベル (サイトルート) からではなく、あるファイルの場所から始まって、必要なファイルフォルダ (ディレクトリ) を経由し、リンク先となる別のファイルの場所までのルートが指定されます。ファイル間のドキュメント相対リンクを作成する前に、両方のファイルがローカルのルートフォルダ内に保存されている必要があります。
リモートサーバーにファイルをアップロードする前に、ブラウザを使用してローカルでペ ージをプレビューする場合は、ドキュメント相対パスを使用する必要があります。Dreamweaver とは異なり、Internet Explorer や Netscape ブラウザはローカルのルートフォルダの定義を関知できないため、参照可能となるのは現在表示中のド キュメントに対する相対パスだけとなります。アップロード前にブラウザを使用してローカルでファイルを表示させたいという多くのユーザーの要望に応えるため、 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 ファイル以外のすべてのファイル上にあるドキュメント相対パスは壊れてしまうことになるためです。
次の例では、ドキュメント相対パスが調整される様子を示します。
- テンプレートからグラフィックまでの本来のパスは、次のとおりです。
../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 します。リモートサーバー上の古いバージョンのファイルは、フォルダ内に同じ名前のファイルを置くことによって上書きされます。
ブラウザでサイト相対リンクをプレビューするもう 1 つの方法では、パーソナル web サーバーを使用します。この方法は Windows でのみ可能で、 Dreamweaver で [ファ イル] - [ブラウザでプレビュー] - [ブラウザリストの編集] から [Preview Using Local Sever] を選択します。これにより、パーソナル web サーバーを使用してドキュメントをプレビューできます。
メモ: Macintosh の場合パーソナル web サーバーはシステムレベルで設定されています。詳細については、システムのマニュアルを参照してください。
この文書は、米国 Adobe Systems, Inc. の Understanding paths in Dreamweaver templates (TechNote 13842) をもとに作成されました。
* 英文のみ
この文章はお役に立てましたでしょうか？さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。