Microsoft-expression-web-hyperlinks
提供：Dev Guides
Microsoft Expression Web-ハイパーリンク
この章では、Webサイトでハイパーリンクを使用する方法を学習します。 Webを非常に拡張できるものの1つは、Webページが他のWebページにリンクする機能です。 *ハイパーリンク*またはリンクは、ほぼすべてのWebページ内にあります。
ハイパーリンクを使用すると、ユーザーはクリックして別のページ、ページ内の場所、画像、またはインターネット上の別の場所に完全に移動できます。 以下は、ハイパーリンクの重要な機能の一部です-
- Expression Webのハイパーリンクツールとオプションを使用すると、ハイパーリンクを簡単に操作できます。
- Expression Webのハイパーリンクビューとレポートにより、壊れたリンクや誤ったリンクを簡単に見つけて修正することができます。
- ハイパーリンクは、クリックすると新しいドキュメントまたは現在のドキュメント内の場所に移動する単語、単語のグループ、または画像です。
アンカータグ
HTMLでは、アンカータグと呼ばれる <a> タグを使用して、別のドキュメントへのリンクを作成します。 アンカーは、他のhtmlページ、画像、テキストドキュメント、またはpdfファイルを指すことができます。 アンカー <a> タグの基本的なコードは次のとおりです。
<a href = "url">Text to be displayed as link<a>- <a> タグでは、「href」属性を使用してドキュメントへのリンクを指定し、アンカータグの開始と終了の間の単語をハイパーリンクとして表示します。
- Webページのリンク上にカーソルを移動すると、矢印が小さな手に変わります。
- URLは、プロトコル、Webサーバー、およびファイルパスを指定するアドレスです。
- URLには、 absolute と relative の2つのタイプがあります。 *絶対URL *には完全なアドレスが含まれていますが、*相対URL *にはアドレスの1つ以上の部分がありません。 ただし、Webブラウザーは、URLを含むページから欠落している情報を取得します。
例
- 絶対*と*相対URL *の両方を使用する簡単な例を見てみましょう。
ステップ1 *-最初に *indexl ページを開き、 main content セクションに次の行を追加します。
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>以下は indexl ページの完全な実装です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
<style type = "text/css">
#left-nav ul li a:hover {
color: #000000; background-color: #116611;
}
#left-nav ul li a:hover {
color: #000000; background-color: #66FF99;
}
</style>
<link href = "sample.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div id = "container">
<div id = "header"> </div>
<div id = "top-nav">
<ul>
<li><a href = "indexl" title = "Site Home Page">Home</a></li>
<li><a href = "indexl" title = "Menu Item 1.">Menu Item 1</a></li>
<li><a href = "indexl" title = "Menu Item 2.">Menu Item 2</a></li>
<li><a href = "indexl" title = "Menu Item 3.">Menu Item 3</a></li>
</ul>
</div>
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li><a href = "indexl" title = "Site Home Page">Home</a></li>
<li><a href = "indexl" title = "Navigation Item 1.">Navigation Item 1</a></li>
<li><a href = "indexl" title = "Navigation Item 2.">Navigation Item 2</a></li>
<li><a href = "indexl" title = "Navigation Item 3.">Navigation Item 3</a></li>
</ul>
</div>
<div id = "main-content">
<p> Absolute URL Example: </p>
<p> Google </p>
<p> Youtube </p>
<p> Relative URL Example: </p>
<p> Home Page 2 </p>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>- ステップ2 *-Webページを保存すると、メインコンテンツセクションにテキストが表示されます。
- ステップ3 *-デザインビューでGoogleを右クリックし、メニューから[ハイパーリンク]を選択します。[ハイパーリンクの挿入]ダイアログが開きます。
- ステップ4 *-[アドレス]フィールドで、GoogleホームページのURLを指定し、[OK]をクリックします。 同様に、デザインビューでYouTubeを右クリックし、ハイパーリンクを選択します…
- ステップ5 *-[アドレス]フィールドで、YouTubeホームページのURLを指定し、[OK]をクリックします。 ここで、「Home Page 2」を相対的に右クリックして、メニューから「ハイパーリンク…」を選択すると、「ハイパーリンクの挿入」ダイアログが開きます。
- 手順6 *-相対パスの場合は、アドレスフィールドでindex_2lを選択します。これらのファイルは両方とも同じディレクトリにあるため、Expression Webはindexlファイルから残りのパスを取得します。 OKをクリックしてください。
ご覧のとおり、これらの単語には現在下線が引かれており、ハイパーリンクが作成されています。
ステップ7 *-デフォルトのフォントの色は青で、ハイパーリンクのデフォルトのフォントの色も青です。 ハイパーリンクのデフォルトの色を変更するには、ハイパーリンクのいずれかを選択し、 *Format メニューに移動して、* Background…*メニューオプションを選択します。
次のダイアログが表示されます。
- ステップ8 *-ハイパーリンクの色を緑に変更しましょう。
次のスクリーンショットでは、ハイパーリンクの色が緑に変わっていることがわかります。
- ステップ9 *-ブラウザでこのWebページをプレビューします。
Googleリンクをクリックすると、Googleホームページに移動します。
- ステップ10 *-同様に、ホームページに戻ってYouTubeリンクをクリックすると、YouTubeホームページに移動します。 ホームページに戻りましょう。
*Home Page 2* リンクをクリックすると、* index_2.hmtlファイル*が開くことがわかります。
