巧用DreamweaverMX设计导航栏特效(2)

中华网科技 http://tech.china.com 2005-06-15 12:03:56

【进入BBS】【进入聊天室】【 推荐给朋友 】【浏览字号：大 中 小】【关闭窗口】

　　
制作特效

　　在编辑页面中，执行菜单“Insert/Table”命令插入单列表格，行数由导航栏目数目而定，并设置表格宽度为172Pixels。选取该表格，快捷键“Ctrl+F3”打开其属性窗口，更改“Border”参数为“0”、“CellSpace”参数为“1”(如图3)。设置导航标题栏背景图片为“mouseover.gif”，其他各行“Bg”背景色参数为“#CCFFFF”(淡蓝色)、背景图片为“mouseout.gif”，并输入各行导航信息(如图4)。

快捷键“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”。



分别选择导航栏目所在表格行，点击属性面板中的“Quick Tag Editor”按钮，在代码编辑窗口background="a.gif"语句后输入：

　　onmouseout="this.className=‘LeftOff‘"
　　onmouseover="this.className=‘LeftUp‘" vAlign=bottom class="leftoff"

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

首页 上页 | 1 | 2 | 下页 尾页  共 2 页