编注：本站原创教程，欢迎转载！转载请注明作者及来源于本站的链接！
今天我们将要学习的是：网页动画 的制作方法。点这里观看效果
准备好了吗？GO…
1.准备工作：
首先在你电脑的D盘下（当然你可以建立在你喜欢的任何位置）建立一个新文件夹，名为：showhidelayer，将所要用到的三张图片：080c.jpg 、080d.jpg、080e.jpg复制到showhidelayer文件夹里。
2.打开DreamWeaver MX 2004，点击 文件/ 新建，如图1。
图1
在弹出的 新建文档 对话框中，在 类别 下选中基本页，在 基本页 中选 HTML，然后点 创建，如图2所示。
图2
3.在打开的画面中，请确认网页是在 设计 编辑状态，如图3。
图3
4.在 布局 菜单下选择 描绘层 按钮，如图4。
图4
5. 在页面中按住鼠标左键拖拽出一个层（Layer1），如图5，调整层至适当位置。
图5
因为我们用的图片尺寸大小为：385*350，所以请在属性面板中设置层的宽=385，高=350，层（Layer1）的具体参数详见图6。
图6
6.用鼠标左键在层内空白处点击一下，然后点击菜单栏上的 插入 按钮，在弹出的菜单中选择 图像，如图7
图7
7.在弹出的 选择图像源文件 对话框中，选择D:\showhidelayer\080c.jpg文件后，点击 确定，如图8。
图8
8.因为我们创建新的网页文件时，还没有保存，所以会弹出如图9所示的对话框，告诉你文件还未保存，请点击 确定 按钮。
图9
接着会弹出另一对话框，如图10，问你是否要将刚才选中的图片文件复制到根文件夹中，因为我们之前未定义站点（以后会发布关于 定义站点 的教程），而且这里我们也用不到，所以请你点 否。
图10
如果你是按上述步骤操作，那么你就可以看到在层里插入了080c.jpg这幅图片，如图11。
图11
9.按相同方法，再做出大小及位置都和层1相同的两个层：层2（Layer2）和层3（Layer3），分别插入图片080d.jpg和080e.jpg。需要注意的是，层2与层3的位置一定要与层1相同，不然在播放动画时会出现图片错位的现象。
在DreamWeaver右边面板中，展开 设计 标签下的层面板，可以看到我们建立好的三个层，如图12。
图12
10.在层面板中，选中层1（Layer1），如图13。
图13
在属性面板中设置其 Z轴（Z） 值为3，如图14。
图14
11.按相同方法，分别设置层2（Layer2）、层3（Layer3）的 Z轴（Z） 值分别为：2和1，
设置好后，在层面板中可以看到各层的 Z轴（Z） 值，如图15。比较一下图12，有没有看出 Z轴（Z） 值设置前后的分别？
图15
12.点击DreamWeaver界面左下角的时间轴标签，如图16，展开时间轴面板。
图16
如果你的DreamWeaver界面里没有显示时间轴标签，那么你可以点击菜单栏的 窗口 按钮，在弹出的菜单中，点选 时间轴，如图17。
图17
13.在层面板中选中层1（Layer1），如图18。
图18
14.按住层左上角的方框，如图19，将层拖到时间轴内，如图20。
图19
图20
按相同方法，将层2（Layer2）和层3（Layer3）分别拖到时间轴内的适当位置，如图21。
图21
15.双击时间轴 B 行第1帧，如图22。
图22
则会打开DreamWeaver界面右边的 标签 / 行为 面板，如图23。
图23
点按 行为 面板上的 
按钮，在弹出的菜单中，选择“显示-隐藏层”，如图24。
图24
在弹出的 显示-隐藏层 对话框中，选中 层“Layer1”，点击 显示 按钮，如图25。
图25
结果如图26所示，然后点击 确定。
图26
回到 行为 面板，可以看到多了一条行为语句，如图27。
图27
同时，在 时间轴 B行的第一帧，也多了一个蓝色的标记，如图28。
图28
16.双击 时间轴上 B 行第15帧，如图29，为该帧设置 显示-隐藏层 行为。
图29
在 显示-隐藏层 对话框中，选中 层“Layer1”，点击 隐藏 按钮，如图30。
图30
选中 层“Layer2”，点击 显示 按钮，结果如图31、32，然后 确定。
图31
图32
17.双击 时间轴 上 B 行第29帧，如图33，为该帧设置 显示-隐藏层 行为。
图33
在 显示-隐藏层 对话框中，设置 层“Layer2” 为隐藏、设置 层“Layer3” 为显示，如图34。
图34
18.双击 时间轴 上 B 行第43帧，如图35，为该帧设置 显示-隐藏层 行为。
图35
在 显示-隐藏层 对话框中，设置层“Layer1”为显示，如图36。
图36
再次点按 行为 面板上的 
按钮，在弹出的菜单中，选择“时间轴 / 转到时间轴帧”，如图37。
图37
在弹出的 “转到时间轴帧” 对话框中，请设置 前往帧 为第 1 帧，如图38。
图38
设置完成后，在 行为 面板上可看到两条行为语句，如图39。
图39
19.在 时间轴 面板上勾选 自动播放 和 循环 两项，如图40。
图40
20.最后，将文件以 showhidelayer.htm的文件名保存在D盘 showhidelayer文件夹下。大功告成！赶快在IE中预览一下你的大作吧！
