关于导航栏的设计有很多特效，但你浏览过这样一种导航栏特效吗？当鼠标移到导航栏目上时，导航栏目会被一层“蒙版”所遮盖，而鼠标移开时“蒙版”也随之移开。该特效其实可以在dreamweaver mx中设置两个css属性分别控制，当鼠标移到和移开导航栏目时显示背景图片，并设置导航栏表格的鼠标响应事件即能实现。当然背景图片至关重要，需要一张动态的、可长短交替变换的gif图片，可以用fireworks制作该图片。
制作背景效果图
在fireworks中新建一个170×17像素、背景为透明的文档。更改油漆桶填充颜色为淡灰色(#f1f1ef)，选取工具栏“rectangle tool“工具，使用该色将编辑可视区画一个矩形。再次更改油漆桶填充颜色为黄褐色(#ff9900)，以同样的方法在图片最左侧画一个小矩形(如图1)。最后导出gif图片并命名为mouseover.gif，以后用作鼠标移到导航栏目上时显示的背景图片。
图1
在这张做好效果图基础上，制作鼠标移开时的动态gif效果图。执行菜单“windows/frames”命令打开帧控制面板，点击四次面板下部“new frame”按钮添加四帧，添加这四帧作用是：在每一帧上设置由长到短的淡灰色(#f1f1ef)背景层图片以实现动态变换效果。选取第一帧图片中的淡灰色背景层图片，单击帧面板右上角三角形按钮，执行弹出菜单“copy to frame”命令，在“copy to frames”对话框中选择“all frames”确认将淡灰色背景层图片复制到各帧中，当然别忘记也将黄褐色(#ff9900)矩形层图片也复制到各帧中。选取第一帧图片，使用鼠标调整淡灰色背景层图片大小至编辑可视区域右侧1/5处。同理调整2、3、4帧淡灰色背景层图片逐渐变短至消失于左侧黄褐色小矩形中，选取油漆桶填充颜色为深紫色(#003366)，填充黄褐色小矩形为该色。为了使效果更加流畅，双击帧控制面板各帧后时间延迟参数，将其设置为“8”(如图2)。最后导出mouseout.gif动画文件。
图2
制作特效
在编辑页面中，执行菜单“insert/table”命令插入单列表格，行数由导航栏目数目而定，并设置表格宽度为172pixels。选取该表格，快捷键“ctrl+f3”打开其属性窗口，更改“border”参数为“0”、“cellspace”参数为“1”(如图3)。设置导航标题栏背景图片为“mouseover.gif”，其他各行“bg”背景色参数为“#ccffff”(淡蓝色)、背景图片为“mouseout.gif”，并输入各行导航信息(如图4)。
图3
快捷键“shift+f11”打开“css styles”控制面板，点击“new style”按钮，在弹出的“new style”对话框中，分别定义鼠标移开导航栏目时显示“蒙版”撤消背景图片“mouseout.gif”的css控制名称为“out”，鼠标移到导航栏目时显示“蒙版”背景图片“mouseover.gif”的css控制名称为“over”。复选“make custom style”的type类型和“this document onl”的define类型，在“style definition for .”对话框中设置这两个css属性background项“background images”参数为背景图片为“mouseout.gif”和“mouseover.gif”。
图4
分别选择导航栏目所在表格行，点击属性面板中的“quick tag editor”按钮，在代码编辑窗口background="a.gif"语句后输入：
onmouseout="this.classname='leftoff'"
onmouseover="this.classname='leftup'" valign=bottom class="leftoff"
代码输入完，导航栏“蒙版”遮盖特效也就实现了。
