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.

当建立一个最佳实践网站,你应该建立您的导航​​菜单使用列表,如果可能的话。吗更有语义准确(菜单毕竟是一个列表)和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规则“按钮。创建一个名为的编号navlist navlist,并选择“创建一个新的样式表文件。在出现的对话框中,将文件命名为style.css 。它始终是最好的使用外部样式表,即使试验。

我们不需要定义任何使用旁边出现的对话框,所以只需按确定。你会创建一个基本的,空白的样式定义样式表。点击略高于您的文档的style.css,突出显示的文字源代码。

步骤3 - 添加一些基本的CSS规则

我们需要指定该列表编号navlist,使我们可以针对它。在HTML中,添加id=navlist

现在,我们可以得到的CSS。你会可能要调整背景颜色,宽度,边界和利润上手,你会要思考如何构建的CSS选择器。如果您使用#navlist li ,您访问导航列表中的列表项。更妙的是,目标#navlist li a的目标您的名单内的链接。添加填充,以使一个更大的目标,同时加入填充列表项不会。尝试:

#navlist {

列表式类型:无;

保证金:0;

填充:0;

宽度:200像素;

}

#navlist李{

保证金:5px;

}

#navlist李一{

背景颜色:#222;

颜色:#EEE;

填充:10px;

文本装饰:无;

显示:块;

}


#navlist li

最后,

第4步 - 添加一些悬停的CSS规则

为了使列表中更加被动,添加一个悬停规则:

#navlist李答:悬停{

背景颜色:#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第1 A,#bodypage2页第2 Å,bodypage3页第3页第一个,bodypage4页第4页第一个,bodypage5 5页第一个{

背景颜色:#555;

颜色:#EE2;

}

这样,你只需要改变身体上的每一页上标签的类。偷偷摸摸的,但它的作品。

有很多很多的技巧,但多数民众赞成现在所有的。正如你可能已经看到在探索的CSS视频教程,使列表水平,所有你需要的display: inlineli李元素,所以探索,如果你想。下一次,以及在一些特殊的选项。

成品product.png

Comments (0)

You must be logged in to comment. Login Now

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: