Microsoft-expression-web-horizontal-navigation
水平ナビゲーション
この章では、水平ナビゲーションまたは*メニュー項目*をWebサイトに追加する方法を学習します。
ステップ1 *-メニュー項目または水平ナビゲーションを作成するには、メニュー項目のリストを含むindexlファイルの *<div id =“ top-nav”> に次のコードを追加しましょう。
<div id = "top-nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>- ステップ2 *-トップメニュー用のシンプルな箇条書きリストです。 ハイパーリンクを作成するには、*デザインビュー*または*コードビュー*に移動します。
- ステップ3 *-ハイパーリンクとして使用するアイテムを選択し、Ctrl + Kを押します。
- ステップ4 *-ScreenTip…ボタンをクリックします。
- ステップ5 *-画面のヒントとして必要なテキストを入力し、[OK]をクリックします。
ステップ6 *-*表示するテキスト*フィールドに *Home と入力し、indexlファイルを選択してOKをクリックします。
- ステップ7 *-同様に、次のコードに示すように、他のメニュー項目のハイパーリンクを追加します。
<!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"></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"> </div>
<div id = "main-content"> </div>
<div id = "footer"> </div>
</div>
</body>
</html>- ステップ8 *-トップナビゲーションのスタイルを設定するには、[スタイルの管理]パネルに移動します。
ステップ9 *-“＃top-nav” *を右クリックして、スタイルの変更を選択します。 「境界線」カテゴリを選択し、幅を細いに変更します。
- ステップ10 *-[ボックス]カテゴリを選択し、[すべてに同じ]の埋め込みをオフにして、上部と下部のフィールドに10を入力します。
- ステップ11 *-*位置*カテゴリに移動します。
- ステップ12 *-*高さ*フィールドから50を削除し、[OK]をクリックします。 [スタイルの適用]パネルで、[新しいスタイル…]をクリックします
ステップ13 *-[セレクタ]フィールドに＃top-nav ul *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択します。 [ブロック]カテゴリで、[テスト位置合わせ]フィールドから中央を選択し、[リスト]カテゴリに移動します。
ステップ14 *- *list-style-type フィールドから none を選択し、OKをクリックします。
ステップ15 *-[スタイルの適用]パネルで、[新しいスタイル]をクリックします。[セレクタ]フィールドに＃top-nav ul li *と入力します。 次に、「定義」ドロップダウンから既存のスタイルシートを選択し、「レイアウト」カテゴリに移動します。
- ステップ16 *-*表示*フィールドから*インライン*を選択し、OKをクリックします。
ステップ17 *-[スタイルの適用]パネルに移動し、[新しいスタイル]をクリックします。セレクタフィールドに＃top-nav ul li a *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択し、フォントの色として白を選択します。
- ステップ18 *-*背景*カテゴリーに移動します。
- ステップ19 *-背景色として*緑*を選択し、*ボックスカテゴリ*に移動します。
- ステップ20 *-*パディング値*を設定し、[OK]をクリックします。
ステップ21 *-[スタイルの適用]パネルに戻り、[新しいスタイル]をクリックします。 [セレクタ]フィールドに＃topnav ul li a：hover *と入力し、[定義先]ドロップダウンから既存のスタイルシートを選択し、*フォントの色*として*黒*を選択します。
- ステップ22 *-*背景カテゴリ*に移動します。
- ステップ23 *-マウスがメニュー項目の上にあるときにメニューオプションの背景色を選択し、[境界線]カテゴリに移動します。
- ステップ24 *-境界線のスタイル、幅、色を選択し、[OK]をクリックします。 外観を確認するには、[ファイル]メニューに移動し、[ブラウザーでプレビュー]を選択します。
メニュー項目の上にマウスを置くと、背景とフォントの色が変わります。
