X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

DreamweaverのCS5:リストからナビゲーションメニューの作成
Google翻訳で翻訳さ

ベストプラクティスのサイトを構築する際には、可能であればリストを使用して、ナビゲーションメニューを構築する必要があります。意味的に正確な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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link