巧用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"
代码输入完,导航栏“蒙版”遮盖特效也就实现了。
猜你喜欢
- Javascript 中的闭包其实很改语言中很难理解的一部分。感谢 Stuart 提供了那么棒的 PPT,它深入浅出的解释了 Javascr
- 当前记录集不支持更新。这可能是提供程序的限制,也可能是选定锁定类型的限制 问题的解决方法如下:第一:ACC
- MooTools 1.2介绍原文地址:30 Days of Mootools 1.2 Tutorials - Day 1 - Intro t
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装,其中包括很多功能和很多体验。功能越多会被认为越实用,体验越好会被认为越方便。方便
- 登录与注册两个按钮似乎天生就应该是排在一起的,就像很多地方的“确定”与“取消”一样,甚至排在一起的意义远远强于后者。于是长期以来,用户们也形
- 前端时间写了一篇《利用CSS框架进行高效率的站点开发》,有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构,也对不少朋友提出
- 以下的文章主要是对MySQL性能影响关系紧密的五大配置参数的介绍,我前几天在相关网站看见对MySQL性能影响关系紧密的五大配置参数的资料,觉
- 北京时间2月15日据国外媒体报道,美国知名sns网站Facebook全球活跃用户量已突破1.75亿大关。数据显示,全球20%的网民都使用Fa
- 1.INPUT和图片按钮对齐:<form method="post" action="
- 摘要:SELECT 语句可以帮助我们从MySQL中取出数据。SELECT 大概是 SQL 语言中最常用的语句,而且怎样使用它也最为讲究;用它
- 作为一个非设计出生的研究思路偏向的设计师,带着少了设计师自恋和自怜的眼光,我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的,
- HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 W
- 如何用通过Web访问OLAP数据? <% Set Conn=Server.CreateObject(″A
- 想要asp能连接mysql数据库需要安装MySQL ODBC 3.51 驱动 http://www.jb51.net/softs/19910
- 第一种方法: 代码如下:/* 创建链接服务器 */ exec sp_addlinkedserver 'srv_lnk
- 如何用SA-FileUp上传多个文件?表单处理: <%@&nbs
- 我的机器不知为何,安装MySQL的时候,一到配置那一步就无休止的等待,只好结束任务,然而启动MySQL的时候出现1067错误提示
- AJAX初体验之上手篇AJAX是这两年蛮热的东西,我也凑凑热闹,前些天去找了些教程学学,下面就按整个处理过程把自己学的东西写写,不过,因为是
- 用新云还不是很熟,一点点学习中。今天遇到一个文章列表前有小圆点的问题,把去除方法记一下。文章列表前有小圆点有这么几种情况:1、li的默认样式
- 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.va