　　言归正传，废话少说。准备工作如下：

　　1．在dw中新建一个空白文档（或者打开你要添加效果的页面）。

　　2．设置好你自己的css风格。

　　3．在页面上插入一个长500pix的表格（这里说明：插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变，如果你的页面之前没有做相关设置，那么这一部你可能要费点功夫整理一下你的页面结构）。

　　4．将光标置入表格内，点击菜单 [插入——层] 插入一个长500高20的图层，并命名为layer1。

　　5．然后再将光标置入图层layer1，点击菜单 [插入——层] 再插入一个长500高130的图层layer2；并将layer2的属性中左边距和上边距都设置为0，并为它指定一个你喜欢的背景色。

　　6．然后重复步骤5的方法，再插入一个图层layer3，这个图层没什么特殊的用处，在我的这个教程中，我只不过是为了放置几个按钮而已。最后我的开起来如图：

Dreamweaver滑动菜单的制作（图一）

　　TIPS：这里这么做的目的是为了给你要滑动的图层前面加一个挡板，只有当点击的时候图层才从你的这个图层下缓缓的滑动出来。

　　现在开始，才正式进入到我们今天要制作的滑动菜单的制作过程中。
　　1.现在让我们再次重复上面的步骤5，再插入一个图层layer4,设置图层属性为宽500 、150高，刚好是刚才layer2和layer3的高度之和，并将图层layer4调整到另外两个图层下面。如图：

Dreamweaver滑动菜单的制作（图二）

　　然后我们点击图层layer2前面的眼睛让他闭合，这样可以让我们看到它下面的图层layer4.

2.这时，我们点击ALT + F9 打开时间轴面板，DW已经为我们添加了默认的时间轴Timeline1，然后，我们选中我们要滑动的图层layer4，在上面点击右键，选择 [添加到时间轴] 这时我们可以在时间轴面板中看到我们刚刚制定的图层layer4，这说明，我们已经添加成功了！

Dreamweaver滑动菜单的制作（图三）

3.然后我们点击时间轴上的第15桢，将图层layer4的属性面板中的上边距调整为150。到这里，一个能滑动的图层就算做好了，你可以拖动时间轴上面的红色方块慢慢从1走向15，你就可以看到你的这个图层慢慢的从layer2和layer3下面滑动出来！

Dreamweaver滑动菜单的制作（图四）

4.好了，现在我们只需要给这个会滑动的图层layer4设置一个可以激活他的动作就算over了：）这之前，我已经在我添加的layer3上插入了一个表格，并为layer4设置了两个按钮。

Dreamweaver滑动菜单的制作（图五）

　　5.我们先设置激活滑动图层的动作。选择上展开这个按钮，转到行为面板，点击在出来的菜单中选择 [时间轴——播放时间轴] DW会弹出一个窗体，在上面的下拉菜单中选择timeline1。

Dreamweaver滑动菜单的制作（图六）

然后在行为面板中确认事件为onclick

Dreamweaver滑动菜单的制作（图七）

好了，到这里，你可以预览一下，当你点击上展开按钮时，你的图层就会慢慢的从上而下滑动出来！

6.怎么样，看到了吧：）我们再给图层添加上一个简单的关闭动作，就是点击关闭按钮后图层隐藏。选择上关闭按钮，转到行为面板，点击 Dreamweaver滑动菜单的制作（图八）

在出来的菜单中选择 [显示隐藏层] ，在跳出的窗体中选择上layer4，然后点击下面的隐藏按钮，将其设置为隐藏，如图：

[1] [2] 下一页

上一篇:Ultradev教程3.2:创建数据库连接

下一篇:鼠标事件的基础和完美实现

Dreamweaver滑动菜单的制作相关文章：

·Photoshop十余种漂亮照片边框简单制作技巧

·教你如何制作QQ空间FLASH导航条

·Photoshop实例：制作超酷影片画面场景

·用Nero制作音视频光盘

·ajax+php无刷新二级联动下拉菜单(省市联动)源码

·Flash如何制作灯光效果

·制作自己的多媒体毕业纪念册

·Flash制作漂亮的三重卷动相册特效动画

·Dreamweaver MX 2004做ASP程序(4)用户注册系统

·制作网站的步骤和方法

Dreamweaver滑动菜单的制作相关软件：

·暗黑破坏神 2：毁灭之王 1.10S极品属性装备制作器

·家常菜制作集锦(1)

·Dreamweaver 网页设计

·启动光盘制作完全手册（菜鸟先飞图文教材系列）

·家常菜制作集锦(2)

·多种dos启动盘制作全攻略

·Flash MX 动画制作实例教程

·灵豚课件制作工具——课件精灵v1.0 beta

·卡丽来相片VCD制作系统 2003

·Photoshop数码照片制作宝典

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.vipcn.net

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved.	鄂ICP备05000083号Powered by:viphot