リンクの設定方法

まず最初に、リンクを設定するHTMLファイルを開いてください。メモ帳やワードパッドといったテキストエディタでファイルを編集することができますが、Adobe DreamweaverNotepad++を使用することをおすすめします。

デザインモード

Adobe Dreamweaverではブラウザで実際に表示される画面を見ながらHTMLファイルの編集ができます。 左上のデザインボタンをクリックしてデザインモードに変更してください。

dreamweaver-design-mode-1

[プロパティ]パネルを有効にする必要があります。 下の画像のようにプロパティが出ていないようであれば、メニューのウィンドウ→プロパティを選択すると画面の下部に[プロパティ]パネルが表示されるはずです。

dreamweaver-design-mode-2

リンクの設定をしたいテキストをドラッグで選択し、プロパティパネルリンクフィールドの中にリンク先を入力してください。

dreamweaver-design-mode-3

上の画像ではリンク先として仮の#を入力していますが、実際にはサーバー上またはウェブサイトのリンク先を示すURLに置き換えてください。

また、ターゲットでは同じウィンドウでリンク先を表示させるのかまたは新しいウィンドウを開くのかといった指定も可能です。

HTMLモード

コード·モードでHTMLファイルで作業している場合、次の方法でリンクを割り当てることができます。

1. リンクを追加したいテキストの前にカーソルを持っていきます

2. 次のリンクタグを追加します<a href=”#”>

3. テキストの後に次の終了タグを追加します</a>

4. #の部分にサーバー上またはウェブサイトのリンク先を示すURLを置き換えてください。

例:

<a href="pdf/readme.pdf">link text</a>

上記のコードは、“テンプレート:ヘルプページ” というテキストにWebサイトの “http://info.template-help.com“がリンクされています。

リンクパス-相対パスと絶対パス

サーバー上でリンクの設定をするには相対パスと絶対パスという2つの方法があります。

相対パスは、サーバー上のファイルへのリンクを設定する場合にのみ使用できます。

例として、PDFファイルを以下のような場所に作成したとします。

  • pdf
  • readme.pdf
  • index.html

PDFファイルはindex.htmlと同じ階層にあり、readme.pdfのPDFファイルはPDFフォルダ内に保存されています。

相対パス

上記の構造でPSD内の文書へリンクさせる場合は次のようになります

<a href=”pdf/readme.pdf”>link text</a>

この場合のリンクの指定は、htmlファイルから見たリンク先のpdfファイルの位置を示しています。ファイルパスの詳細については、下記の表で確認ください。

サーバーパス… 意味するもの…
<a href=”readme.pdf”> readme.pdfは、htmlと同じ階層に位置しています。
<a href=”pdf/readme.pdf”> readme.pdfは、htmlと同じ階層のPDFというフォルダ内にあります。
<a href=”pdf/new/readme.pdf”> readme.pdfはhtmlと同じ階層のPDFフォルダ内のnewフォルダというフォルダ内にあります。
<a href=”../readme.pdf”> readme.pdfは、現在のディレクトリから1つ上の階層のフォルダに位置しています。例えばhtmlが何かのフォルダに格納されていて、そのフォルダとreadme.pdfが同じ階層だった場合です。
<a href=”../pdf/readme.pdf”> readme.pdfが格納されたPDFフォルダとhtmlが入ったフォルダが同じ階層に位置している場合です。htmlからreadmeファイルを見た場合、1つ階層をあがってPDFフォルダ内のファイルを指していることになります。

絶対パス

絶対パスではドメイン名で始まるサーバ上のファイルの位置を示しています。例えば上記のPDFファイル内にreadme.pdfファイルが存在する場合、以下のようになります。

<a href="http://your_domain_name/pdf/readme.pdf" class="aga aga_3">link_text</a>

ウェブサイトへのリンクを割り当てる場合は、以下のようなコードになります。

<a href="http://info.template-help.com" class="aga aga_4">link_text</a>

上記のURLはあくまでも仮のものですので、お客様がリンクさせたいウェブサイトのURLとhttp://info.template-help.comを置き換えることを忘れないでください。


Comments are closed.