言归正传,废话少说。准备工作如下:
1. 在dw中新建一个空白文档(或者打开你要添加效果的页面)。
2. 设置好你自己的css风格。
3. 在页面上插入一个长500pix的表格(这里说明:插入表格的目的是为了控制层在不同分辨率下保持相对的位置不变,如果你的页面之前没有做相关设置,那么这一部你可能要费点功夫整理一下你的页面结构)。
4. 将光标置入表格内,点击菜单 [插入——层] 插入一个长500高20的图层,并命名为layer1。
5. 然后再将光标置入图层layer1,点击菜单 [插入——层] 再插入一个长500高130的图层layer2;并将layer2的属性中左边距和上边距都设置为0,并为它指定一个你喜欢的背景色。
6. 然后重复步骤5的方法,再插入一个图层layer3,这个图层没什么特殊的用处,在我的这个教程中,我只不过是为了放置几个按钮而已。最后我的开起来如图:

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

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





6.怎么样,看到了吧:)我们再给图层添加上一个简单的关闭动作,就是点击关闭按钮后图层隐藏。选择上关闭按钮,转到行为面板,点击菜单中选择 [显示隐藏层] ,在跳出的窗体中选择上layer4,然后点击下面的隐藏按钮,将其设置为隐藏,如图:

重复刚才的步骤5,选择上展开按钮,添加动作 [时间轴——转到时间轴桢] ,在跳出的窗体中的下拉菜单选择timeline1,桢数添上1。

8.重复步骤5,选择 [显示隐藏层] ,和刚才步骤6相反,这次我们选择显示,确定后,保证行为面板中显示隐藏图层的时间都是onclick。此刻展开按钮的行为面板如图:

至此,这个效果就算完成了,当然,大家完全可以自我发挥制作出更好的效果来,但是万变不离其宗,只要我们掌握好了时间轴配合动作行为的运用,所有的效果只是操作问题:)