HTMLでハイパーリンクを作成し、外部サイト、同じwebサイト内の別のページ、同じページ内のコンテンツが表示されるようにします。
make-hyperlink_1408x792

始める前に

プロジェクトファイルをダウンロードして保存します。Dreamweaverでcreate-hyperlinks.htmlを開き、「分割」ビューでソースコードを表示します。

「表示/左右に分割」のチェックマークをオフにします。これでコードビューとライブビューが上下に表示され、HTMLが読みやすくなります。

create-hyperlinks.htmlを開く

1. 外部webページにリンクを設定する

<!-- Start Here -->までスクロールし、最初のメニュー項目「ABOUT」を見つけます。

まず、「ABOUT」の前後にアンカータグ(<a></a>)を追加します。次に、<a>開始タグにhref=" "属性を追加します。クォーテーション(" ")内に完全なWeb URL http://www.nasa.govを入力します。

外部webサイトのページにリンクを設定する場合は、別のペインで開く設定にすると、元の自分のサイトを表示したままにすることができます。そのためには、target="_blank"属性を追加します。

HTML

<a href= "http://www.nasa.gov" target="_blank">ABOUT</a>

外部webページにリンクを設定する
外部webページにリンクを設定する

2. 同じwebサイト内の別のページにリンクする

webサイトは複数のページまたはドキュメントで構成される場合が多く、メインメニューなどに設定されているリンクをクリックしてページ間を移動するのが一般的です。この例では、プロジェクトファイルに含まれるgallery.htmlをリンク先とします。

まず、「IMAGES」の前後に<a></a>を追加します。次に、<a>開始タグにhref="と入力して、gallery.htmlに移動し、「開く」をクリックします。

HTML

<a href="gallery.html">IMAGES</a>

同じwebサイト内の別のページにリンクする
同じwebサイト内の別のページにリンクする

3. 同じページ内の別のセクションにリンクする

webサイトのページによってはコンテンツが多く、表示するのにスクロールが必要なことがあります。そのような場合はアンカーリンクを設定すると、クリックしたときに同じページ内の別のセクションに移動できます。アンカーリンクは2段階で設定します。

まず、同じページ内のリンク先となるセクションに固有のidを設定します。練習用のファイルには既にsection2AというIDが定義されています。<div>タグの42行目前後をご確認ください。

次に、ナビゲーションメニューの「ARTICLES」の前後に<a></a>タグを追加します。そして、href=" "属性を追加します。クォーテーション(" ")内に、上記と完全一致するidを入力し、先頭にハッシュタグ(#)を付けます。

HTML

<a href="#section2A">ARTICLES</a>

同じページ内の別のセクションにリンクする
同じページ内の別のセクションにリンクする

「ブラウザーでのプレビュー」をクリックしてブラウザーを選択し、ハイパーリンクをテストしてください。

ファイルを保存してから、変更結果を確認してください。

ブラウザーでのプレビュー
04/24/2018
このページは役に立ちましたか。