Microsoft-expression-web-vertical-navigation
垂直ナビゲーション
この章では、Webサイトに垂直ナビゲーションまたはメニュー項目を追加する方法を学習します。 ステップバイステップで行きましょう。
ステップ1 *-メニュー項目または垂直ナビゲーションを作成するには、メニュー項目のリストを含むindexlファイルの *<div id =“ left-nav”> に次のコードを追加しましょう。
<div id = "left-nav">
<p>Site Navigation</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>- ステップ2 *-トップメニューの簡単な箇条書きリストです。 ハイパーリンクを作成するには、*デザインビュー*または*コードビュー*に移動します。
- ステップ3 *-ハイパーリンクとして使用するアイテムを選択し、Ctrl + Kを押します。
ステップ4 *-ScreenTip…ボタンをクリックします。 必要なテキストを *screentip として入力し、[OK]をクリックします。
ステップ5 *-*表示するテキスト*フィールドに *Home と入力し、indexlファイルを選択してOKをクリックします。
この段階で、私たちのindexlページは次のようになります-
- ステップ6 *-次のコードに示すように、他のメニュー項目のハイパーリンクを追加します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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">
<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"></div>
<div id = "footer"></div>
</div>
</body>
</html>- ステップ7 *-トップナビゲーションのスタイルを設定するには、[スタイルの管理]パネルに移動します。 *＃left-nav *を右クリックして、[スタイルの変更…]を選択します
ステップ8 *-font-sizeフィールドに値0.9を入力し、font-sizeの横にあるドロップダウンリストから *em を選択し、Boxカテゴリに移動します。
- ステップ9 *-「すべてに同じ」パディングを確認し、上部のフィールドに5を入力して[OK]をクリックします。 [スタイルの適用]パネルで、[新しいスタイル…]をクリックします
ステップ10 *-[セレクタ]フィールドに＃left-nav ul *と入力します。 [定義]ドロップダウンから[既存のスタイルシート]を選択し、[リスト]カテゴリで、リストスタイルタイプフィールドから[なし]を選択して[OK]をクリックします。
- ステップ11 *-再度、*スタイルの適用*パネルから、*新しいスタイル*をクリックします。 「すべてに同じ」パディングをオフにします。 下部のフィールドに0.2を入力し、[OK]をクリックします。
ステップ12 *-[セレクタ]フィールドに＃left-nav ul li *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択して、[ボックス]カテゴリに移動します。
- ステップ13 *-[スタイルの適用]パネルに移動し、[新しいスタイル]をクリックします。
ステップ14 *-[セレクタ]フィールドに＃left-nav ul li a *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択し、フォントの色として白を選択します。
- ステップ15 *-背景カテゴリに移動します。 背景色として色を選択します
- ステップ16 *-*ボックス*カテゴリに移動し、パディング値を設定します。
ステップ17 *-*レイアウト*カテゴリに移動します。 [*表示]ドロップダウンから[ブロック]を選択し、[OK]をクリックします。
ステップ18 *-次に、[スタイルの適用]パネルに戻り、[新しいスタイル]をクリックします。 [セレクタ]フィールドに＃left-nav ul li a：hover *と入力し、[定義先]ドロップダウンから既存のスタイルシートを選択します。 フォントの色として黒を選択します。
- ステップ19 *-次に、[背景]カテゴリに移動します。 マウスがメニュー項目の上にあるときにメニューオプションの背景色を選択し、[OK]をクリックします。
- ステップ20 *-外観を確認するには、[ファイル]メニューに移動し、ブラウザで[プレビュー]を選択します。
メニュー項目の上にマウスを置くと、背景とフォントの色が変わります。
