Dreamweaver でのリンクおよびナビゲーションと、絶対パス、ドキュメント相対パス、サイトルート相対パスについて説明します。
web サイトドキュメントを保存するための Dreamweaver サイトを設定し、HTML ページを作成した後は、ドキュメントから他のドキュメントへのリンクを作成する必要があります。
Dreamweaver では、ドキュメント、画像、マルチメディアファイル、またはダウンロード可能なソフトウェアへのリンクを作成する方法がいくつか用意されています。見出し、リスト、テーブル、絶対位置指定要素(AP 要素)、またはフレーム内のテキストや画像を含め、ドキュメント内の任意の場所にあるテキストや画像へのリンクを設定できます。
リンクの作成および管理は、様々な方法で行うことができます。 一部の Web デザイナーは、作業中に存在しないページやファイルへのリンクを作成することを好む一方、最初にすべてのファイルとページを作成してからリンクを追加することを好むデザイナーもいます。リンクを管理するもう 1 つの方法は、プレースホルダーページを作成し、すべてのサイトページを完成させる前にリンクを追加してテストすることです。
絶対パス、ドキュメント相対パス、サイトルート相対パス
リンク元のドキュメントとリンク先のドキュメントまたはアセット間のファイルパスを理解することは、リンクの作成において不可欠です。
各 web ページには、Uniform Resource Locator(URL)と呼ばれる固有のアドレスがあります。ただし、ローカルリンク(同じサイト上のあるドキュメントから別のドキュメントへのリンク)を作成する場合、通常はリンク先ドキュメントの完全な URL を指定する必要はありません。代わりに、現在のドキュメントまたはサイトのルートフォルダーからの相対パスを指定します。
リンクパスには、以下の 3 種類があります。
絶対パス(http://www.adobe.com/jp/support/dreamweaver/contents.html など)。
ドキュメント相対パス(dreamweaver/contents.html など)。
サイトルート相対パス(/support/dreamweaver/contents.html など)。
Dreamweaver を使用すると、リンクを作成するためのドキュメントパスの種類を簡単に選択できます。
使用するリンクの種類は、好みに応じて選択できます。サイトルート相対パスでもドキュメント相対パスでも、使用しやすいパスで指定することができます。 リンクを表示する場合は、パスの入力とは対照的に常に正確なパスを入力する必要があります。
絶対パス
絶対パスは、使用するプロトコル(web ページの場合は通常 http://)を含む、リンクされたドキュメントの完全な URL を提供します。例:http://www.adobe.com/support/dreamweaver/contents.html.イメージアセットの場合、完全な URL は、http://www.adobe.com/jp/support/dreamweaver/images/image1.jpg のようになります。
別のサーバー上のドキュメントまたはアセットにリンクするには、絶対パスを使用する必要があります。ローカルリンク(同じサイト内のドキュメント)に絶対パスを使用することもできますが、この方法は推奨されません。サイトを別のドメインに移動すると、ローカルの絶対パスリンクがすべて無効になります。ローカルリンクに相対パスを使用すると、サイト内でファイルを移動する必要がある場合により柔軟性が得られます。
画像を挿入する場合(リンクではない)、リモートサーバー上の画像(つまり、ローカルハードドライブで利用できない画像)への絶対パスを使用できます。
ドキュメント相対パス
ドキュメント相対パスは、通常、ほとんどの web サイトのローカルリンクに最適です。現在のドキュメントとリンクされたドキュメントまたはアセットが同じフォルダー内にあり、一緒に残る可能性が高い場合に特に便利です。現在のドキュメントからリンクされたドキュメントまでのフォルダー階層を通るパスを指定することで、ドキュメント相対パスを使用して別のフォルダー内のドキュメントまたはアセットにリンクすることもできます。
ドキュメント相対パスの基本的な考え方は、現在のドキュメントとリンクされたドキュメントまたはアセットの両方で同じである絶対パスの部分を省略し、異なるパスの部分のみを提供することです。
例えば、以下の構造のサイトがあるとします。
contents.html から hours.html(両方とも同じフォルダー内)にリンクするには、相対パス hours.html を使用します。
contents.html から tips.html(resources サブフォルダー内)にリンクするには、相対パス resources/tips.html を使用します。スラッシュ(/)ごとに、フォルダー階層内を 1 レベル下に移動します。
contents.html から index.html(親フォルダー、contents.html の1レベル上)にリンクするには、相対パス ../index.html を使用します。2 つのドットとスラッシュ(../)で、フォルダー階層内を 1 レベル上に移動します。
contents.html から catalog.html(親フォルダーの異なるサブフォルダー内)にリンクするには、相対パス ../products/catalog.html を使用します。ここで、../ は親フォルダーに移動し、products/ は products サブフォルダーに移動します。
ファイルをグループとして移動する場合(例えば、フォルダー全体を移動して、そのフォルダー内のすべてのファイルが相互の相対パスを保持する場合)、それらのファイル間のドキュメント相対リンクを更新する必要はありません。ただし、ドキュメント相対リンクを含む個々のファイルや、ドキュメント相対リンクの対象となっている個々のファイルを移動する場合は、それらのリンクを更新する必要があります。([ファイル]パネルを使用してファイルを移動または名前変更する場合、Dreamweaver は関連するすべてのリンクを自動的に更新します。)
サイトルート相対パス
サイトルート相対パスは、サイトのルートフォルダーからドキュメントまでのパスを記述します。複数のサーバーを使用する大規模なwebサイトや、複数のサイトをホストする単一のサーバーで作業している場合は、これらのパスを使用することをお勧めします。ただし、この種のパスに慣れていない場合は、ドキュメント相対パスを使用することをお勧めします。
サイトルート相対パスは先頭のフォワードスラッシュで始まり、これはサイトのルートフォルダーを表します。例えば、/support/tips.htmlは、サイトのルートフォルダーのサポートサブフォルダー内のファイル(tips.html)へのサイトルート相対パスです。
サイトルート相対パスは、webサイト内でHTMLファイルを頻繁にフォルダー間で移動する場合に、リンクを指定する最良の方法です。サイトルート相対リンクを含むドキュメントを移動する場合、リンクはドキュメント自体ではなくサイトルートに対して相対的であるため、リンクを変更する必要はありません。例えば、HTMLファイルが依存ファイル(画像など)にサイトルート相対リンクを使用している場合、HTMLファイルを移動しても、その依存ファイルリンクは有効のままです。
ただし、サイトルート相対リンクの対象となるドキュメントを移動または名前変更する場合は、ドキュメント同士の相対的な位置関係が変わっていなくても、それらのリンクを更新する必要があります。例えば、フォルダーを移動する場合、そのフォルダー内のファイルへのすべてのサイトルート相対リンクを更新する必要があります。ファイルパネルでファイルを移動または名前変更すると、Dreamweaver によってすべての相対リンクが自動的に更新されます。