巧用Dreamweaver MX设计导航栏特效

2015-08-18 14:28:17来源:作者:人点击

 关于导航栏的设计有很多特效,但你浏览过这样一种导航栏特效吗?当鼠标移到导航栏目上时,导航栏目会被一层“蒙版”所遮盖,而鼠标移开时“蒙版”也随之移开。该特效其实可以在Dreamweaver MX中设置两个CSS属性分别控制,当鼠标移到和移开导航栏目时显示背景图片,并设置导航栏表格的鼠标响应事件即能实现。当然背景图片至关重要,需要一张动态的、可长短交替变换的GIF图片,可以用Fireworks制作该图片。

  制作背景效果图

在Fireworks中新建一个170×17像素、背景为透明的文档。更改油漆桶填充颜色为淡灰色(#F1F1EF),选取工具栏“Rectangle Tool“工具,使用该色将编辑可视区画一个矩形。再次更改油漆桶填充颜色为黄褐色(#FF9900),以同样的方法在图片最左侧画一个小矩形(如图1)。最后导出GIF图片并命名为mouseover.gif,以后用作鼠标移到导航栏目上时显示的背景图片。

巧用Dreamweaver MX设计导航栏特效 第七城市

图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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台