Dreamweaver中多种菜单样式实现方法.docVIP

Dreamweaver中多种菜单样式实现方法 　　【摘要】导航菜单是一个网站不可缺少的部分，是指引和方便浏览者访问所需内容的快速通道，它是如何设计和实现的。本文介绍了三种样式的导航菜单以及每种式样的导航菜单的具体实现方法，同时也比较了这几种导航菜单的特点和不同，以及在具体制作导航菜单时的注意之处。 　　【关键词】菜单样式；导航菜单；导航菜单的实现；导航条的实现 　　一、引言 　　凡是浏览过网页的人都知道：导航菜单是一个网站不可缺少的部分，它不仅直观的体现出了这个网站的整体结构，更是指引和方便浏览者访问所需内容的快速通道。故而，网站导航菜单的设计和实现就体现得尤为重要了，良好的网站导航会使网站更易于访问、更加吸引浏览者。导航条的样式和风格是网站样式的一个重要的组成部分，好的导航条可以在确定网站风格的同时，清晰网站的层次。 　　二、导航菜单样式的实现 　　1.普通的导航菜单样式 　　普通的导航菜单样式适合下级链接页面不多，结构也不是很复杂的网站，使用Dreamweaver面板中提供的层或者表格直接编辑链接就可以了。 　　以表格的制作方式为例，我们创建一个水平的导航菜单，插入1行多列的表格（一个菜单项为一列），在每个单元格中输入具体的菜单项或者也可使用自己设计制作图片为菜单，在属性面板中编辑超链接的地址。若我们需要制作侧边菜单栏，可以采用垂直的导航菜单样式，插入多行1列的表格进行编辑，在单元格中添加文字或图片，编辑超链接即可。 　　但是，无论是水平还是垂直导航菜单都有美中不足：编辑过超链接的文字会出现的蓝色的下划线，我们可以通过 之间添加代码来解决： 　　 　　a：link {text-decoration： none；} 　　a：visited {text-decoration： none；} 　　a：hover { text-decoration： none；} 　　a：active { text-decoration： none；} 　　2.带滑块效果的导航菜单样式 　　当鼠标指向导航菜单的某一菜单项时，该菜单项的颜色就会变成与其他菜单项不相同。与上面的菜单样式比较，这种菜单的视觉效果比较好，美观性强、生动活泼、动感性强，吸引人们的注意力。其实现方式有以下有两种： 　　第一种方式：通过翻转图片来实现。 　　（1）设计好的导航菜单的菜单项，再将每个菜单项制作成像素大小一致的图片，将菜单项制作成图片的好处不仅仅是为了方便实现上述的翻转样式，由于图片可以根据自己喜欢的设计风格来选择颜色、背景、字体，所以制作的菜单更为美观。 　　（2）为每个菜单项制作翻转图（鼠标指向菜单项时，想要显示的与其他菜单不同颜色的那张图片），制作时需注意不仅翻转图的像素尺寸大小要与第一步制作的菜单项图片一致，而且为了网站的美观效果尽量颜色有所反差。将每个菜单项图以及它们的翻转图都保存在网站存放图片的目录下。 　　（3）使用表格来布局菜单项，插入1行多列的表格，每个单元格中插入原始的菜单项图片。 　　（4）打开Dreamweaver的行为面板，选中某一菜单项图片，在行为面板张添加行为：交换图像，此时出现对话框，对话框“设定原始档为：”中浏览、选择制作好的该菜单项的翻转图片，并勾选“鼠标滑开时恢复图像”。 　　这时，我们看到行为面板里添加了两个动作：“onMouseOver交换图像”和“onMouseOut恢复交换图像”。每个菜单项都需要如此制作。然后编辑每个导航菜单的菜单项的超链接，由于现在的菜单项都是图片形式的，若直接选中图片编辑超链接，图片周围会出现蓝色的边框，这是我们不想见到的，所以我们一般使用图片属性窗口中的“地图”热点工具，绘制热点来编辑超链接。 　　第二种方式：通过代码来实现。 　　（1）制做导航菜单项背景图以及鼠标指向菜单项时显示的效果背景图，图片像素不用很大，将这两张图片保存在网站存放图片的目录下即可。 　　（2）在 之间添加如下代码： 　　 　　#borderlinks a{text-decoration： none； 　　font-family： “宋体”； 　　font-size： 14px； 　　background-repeat： repeat； 　　font-weight： bold； 　　vertical-align： text-bottom； 　　background-attachment： fixed； 　　width：75px；height：34px} 　　#borderlinks a：hover{font-family： “宋体”； 　　font-size： 14px； 　　font-style： normal； 　　font-weight：