巧用CSS制作动态导航栏
巧用firework工具以及CSS制作网页动态导航栏
作者：潘彪
摘要：本文介绍了如何使用dreamweaver的CSS样式表以及firework软件来制作一个精美的动态导航栏，并且点击动态导航栏的链接发生链接相应的变化以及跳到相对应的页面的方法，通过一个实例来讲述具体制作方法，总结此方法的优缺点。
关键词：firework 8.0 dreamweaver 8.0、CSS、网页动态导航栏、超级链接。
1、引言：
随着日新月异的网络的发展，一个公司，一个企业如何能够通过网页来宣传的产品，树立自己的形象，制作一个美观而有创意的主页越来越起到了至关重要的作用了，随着现在对网页技术的要求越来越高，一个主页除了有个很漂亮的标题栏之外，有个吸引眼球动态导航栏往往能够让页面达到意想不到的效果。本文通过一个实例来讲解制作一个漂亮的动态导航栏的制作方法。
2、效果功能介绍：
如今流行的动态导航栏通常有如下图1所示：
图1
功能通常如下：当网页显示在首页时候，导航栏的首页链接背景为红色文字蓝色效果其他链接为蓝色背景文字白色效果。当鼠标经过导航栏的每个链接时，链接的颜色变成首页链接效果，点击某个链接后页面切换到相应的页面同时链接也进行相应的切换。
3、制作步骤：
下面我们通过一个具体的实例来讲解这种效果的制作过程：
3.1 背景图片文件的制作与准备：
第一步：打开firework软件；新建一个长度为100像素，高度为35像素的空白文件，背景随意。
第二步：通过矩形工具画一个与背景画布一样大小的矩形（可以为其他形状）；
第三步：填充过渡颜色；通过左边的颜料桶工具选择渐变颜色如图2所示:
图2
通过调节过渡填充的杠杆以及填充过渡方向产生如下图3所示的颜色：
图3 图4
第四步:利用文件菜单的图像预览功能导出为gif格式的图像文件，注意导出时候的高度与宽度与画布一样大小；以同样的方法制作出如图4的黑色gif图片，黑色图片文件名为hei.gif，红色图片文件名为hong.gif。
3.2 通过dreamweaver的CSS样式来制作动态导航栏链接：
第一步：打开dreamweaver8.0软件，在dreamweaver工具的代码区输入以下链接列表的代码：
- 首页
- 我的风采
- 联系我们
第二步：通过dreamweaver工具自带的CSS样式新建样式中选择统一样式 li 样式，设定好高与宽，注意高与宽度和制作好的图像高度与宽度一致，设置左浮动，代码为：
li{
float: left;
height: 35px;
width: 100px;
margin: 0px;
list-style-type: none;
}
第三步：给每个文字在dreamweaver工具属性面板中加链接分别为：shouye.html,fengcai.html,lxwm.html；
第四步：新建CSS样式选择统一样式中的a，设置链接属性为：背景图像选择黑色图片不重复，设置填充高度，计算方式为：li的总高度减去文字大小等于链接上面填充与下面填充之和，显示方式为区块，文本居中；其具体代码为：
a {
font-size: 14px;
text-align: center;
background-image: url(hei.gif);
background-repeat: no-repeat;
color: #FFFF00;
display: block;
padding-top: 10px;
padding-bottom: 11px;
text-decoration: none;
font-weight: bold;
}
第五步：新建样式中选择高级样式a:hover,设置好鼠标经过的状态，改变背景图片为红色图片不重复，文字颜色改变一下，其具体代码为：a:hover {
background-image: url(hong.gif);
background-repeat: no-repeat;
color: #FFFF00;
}
这样，鼠标经过链接便背景图片的动态效果制作完成。
3.3 通过CSS实现点击链接后链接背景变化以及跳转页面：
第一步：回到dreamweaver工具面板的代码区域的CSS代码部分，
在样式部分加入以下特殊样式：样式属性与鼠标经过的属性一样。具体代码为：
li.pan a{
background-image: url(hong.gif);
background-repeat: no-repeat;
color: #FFFF00;
}
第二步：应用此样式到每个列表中，注意：不是应用到a链接标签中，而是应用到li的列表项中。比如主页页面的应用为：
保存页面为shouye.html
第三步：依次类推，改掉页面标题文字，将特殊样式应用到其他页面的相对应的列表链接中并且保存文件名即可，大功告成！预览效果为如图5：
图4 图5
点击我的风采链接跳转到如图5效果的网页。
4、总结
本文介绍了如何使用dreamweaver的CSS样式表以及firework软件来制作一个精美的动态导航栏，并且点击动态导航栏的链接发生链接相应的变化以及跳到相对应的页面的方法，通过这种方法制作的动态导航栏优点：制作步骤简单，网页浏览速度快；不担心浏览器兼容性的问题。缺点：不能想flash制作动态导航栏一样可以形成过程动画。
【参考文献】
1、《网页设计与制作:Dreamweaver CS3+Firework》
作者：杨明
出版社：清华大学出版社
出版日期：2009年10月第一版
2、《精通CSS+DIV网页样式与布局》
作者：曾顺
出版社：人民邮电出版社
出版日期：2007年8月第一版
【作者简介】
第一作者：湖南水利水电职业技术学院经济管理系潘彪老师；
专业方向：网页制作。
详细地址：湖南省长沙县远大二路湖南水利水电职业技术学院经济管理系潘彪老师收
邮政编码：410131
电话：139********