巧用Dreamweaver MX设计导航栏特效

作者:7star 来源:赛迪网 时间:2009-07-10 13:17:00 

    关于导航栏的设计有很多特效,但你浏览过这样一种导航栏特效吗?当鼠标移到导航栏目上时,导航栏目会被一层“蒙版”所遮盖,而鼠标移开时“蒙版”也随之移开。该特效其实可以在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"

代码输入完,导航栏“蒙版”遮盖特效也就实现了。

标签:Dreamweaver,MX,设计,导航,特效
0
投稿

猜你喜欢

  • Pandas查询数据df.query的使用

    2021-06-09 03:48:47
  • 深入理解python对json的操作总结

    2022-04-08 20:36:01
  • Python列表list常用内建函数实例小结

    2021-08-07 02:17:15
  • Python中scatter散点图及颜色整理大全

    2022-10-06 02:17:51
  • sql ntext数据类型字符替换实现代码

    2011-09-30 11:08:00
  • 表格梳理解析python内置时间模块看完就懂

    2023-10-21 08:10:27
  • Python语法学习之进程池与进程锁详解

    2021-09-01 23:16:17
  • Python中使用SAX解析xml实例

    2022-08-22 01:32:56
  • MySQL数据库表中的约束详解

    2024-01-28 16:39:17
  • MySql带OR关键字的多条件查询语句

    2024-01-21 22:39:25
  • Flask项目的部署的实现步骤

    2023-08-11 17:59:58
  • Mysql将一个表中的某一列数据复制到另一个表中某一列里的方法

    2024-01-14 17:36:29
  • Sql Server 开窗函数Over()的使用实例详解

    2024-01-17 14:34:33
  • 专家教你安装 MySQL的与MySQL GUI Tools

    2012-01-29 17:59:05
  • Python文本终端GUI框架示例详细讲解

    2021-05-19 22:47:12
  • Python中在for循环中嵌套使用if和else语句的技巧

    2022-10-08 17:44:50
  • Django forms表单 select下拉框的传值实例

    2023-04-21 02:23:53
  • 在Django admin中编辑ManyToManyField的实现方法

    2021-03-05 18:03:47
  • dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)

    2024-04-28 09:45:40
  • Python爬虫进阶之Beautiful Soup库详解

    2022-09-13 04:38:50
  • asp之家 网络编程 m.aspxhome.com