All Articles Dreamweaver
DreamweaverのCS5:リストからナビゲーションメニューの作成
Iain Anderson on Sat, January 7th 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

ベストプラクティスのサイトを構築する際には、可能であればリストを使用して、ナビゲーションメニューを構築する必要があります。意味的に正確なTheyre(メニューはすべての後に、リストである)とCSSはスタイルにそれらが容易になります。ナビゲーションリストがフードの下でどのように機能するかを見てみましょう。病気のコードビューでDreamweaverを使用してであるが、必要に応じてストレート、テキストエディタと一緒に従うことをお気軽に。

手順1 - リストを構築

この部分は簡単です:新しいHTMLファイル、テンプレートなしを作成し、単純にメニューの項目を入力します。各リスト項目を囲むと

このようなもので終わらせる必要があります: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

ただし、我々はCSSを構築することが重要になると何かに各項目のリンクを確​​認したい。ので、このようなものを作成するには、#文字にリンクを追加します。

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

ステップ2 - 外部CSSファイルへのリンク

CSSパネルで、パネル(プラス記号を持つ文書)の下部にある[新規CSSルール]ボタンを押してください。名前とIDのスタイルを作成しnavlistと新規スタイルシートファイルの作成 ​​を選択します。表示されるダイアログで、ファイル名style.css 。試すときでも、外部スタイルシートを使用して、その常にベスト。

我々が次に表示されるダイアログを使って何かを定義する必要がいけないので、単に[OK]を押してください。 Youllは基本的な、空白のスタイル定義とスタイルシートを作成しました。強調表示された言葉のソースコードの隣に、ちょうどあなたのドキュメントの上にstyle.cssをクリックして、それを見る。

ステップ3 - いくつかの基本的なCSSルールを追加する

我々はそれをターゲットにできるように、リストがID navlistを持っていることを指定する必要があります。 HTMLで、追加id=navlistする

今、私たちは、CSSで行く得ることができます。 Youllはおそらく始めるために、背景色、幅、ボーダーおよび余白を調整する、そしてyoullはあなたがCSSセレクタを構築する方法について考えたいと思う。あなたが使用している場合#navlist li 、youllは、ナビゲーションリストのリスト項目にアクセスします。さらに良いことに、ターゲット#navlist li aリスト内のリンクを対象とする。項目がない場合とリストするためにパディングを追加しながら、それらにパディングを追加すると、大きな目標になります。試してみてください。

#navlist {

リストスタイルのタイプ:なし;

マージン:0;

パディング:0;

幅:200pxの;

}

#navlistリー{

マージン:5PX;

}

#navlistのLi A {

背景色:#222;

色:#EEE;

パディング:10pxの;

テキスト装飾:なし;

表示:ブロック;

}


市販

#navlist li

最後に、

ステップ4 - いくつかホバーのCSSルールを追加する

リストは、より反応性にするために、ホバーのルールを追加します。

#navlistのLi A:ホバー{

背景色:#444;

色:#EE2;

}

ステップ5 - アクティブなページのマーキング

その可動クラススタイルでアクティブなページをマークするページのこれらの種類の一般的な、例えばクラスの現在のページ上に配置されている=アクティブ、。しかし、これはメニューのブロックは、ページごとに異なる​​ことを意味します。別のクラスを使用してHTMLで各リンクのタグ付けに、その方が便利、次にbodyタグにページ固有のクラスを追加し、単一のCSSルールでそれらすべてをキャッチ。このような何か:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

マッチングCSS:

#bodypage1。Page1に、#bodypage2。Page2を、#bodypage3が。3ページ、#bodypage4。4ページ、#bodypage5。page5 {

背景色:#555;

色:#EE2;

}

この方法では、あなただけの各ページのbodyタグにクラスを変更する必要があります。こっそり、しかしそれが動作します。

そこに多くの、より多くのトリックがありますが、今はすべて厥。あなたがリストを水平にするため、探索CSSのビデオチュートリアルで見ているかもしれませんが、あなたが必要とするすべてがdisplay: inlineするために適用されるli要素なので、必要に応じていること探る。次回は、よくいくつかのより多くのエキゾチックオプションを見てください。

完成- product.png

Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: