层+拖动层行为实现在物品在网页上的随意拖动。
四、 实验步骤
内容1的步骤：
1、 新建一个文档，打开“属性面板”，单击“页面属性”按钮，将该网页的背景图像设为“1.jpg”（热带鱼图像）。
注意：该图像的大小为800×600，所以设为背景图像时会呈现平铺的效果。
2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“绘制层”
按钮，在网页的右边绘制一个层layer1。
3、 将光标定位在layer1层内，选择[插入]/[图像]菜单，将图像41.jpg（“海底世界”四个字图像）插入带该层，调整层的大小，使之适应图像的大小。
4、 单击“绘制层”
按钮，在网页的左边绘制一个层layer2；将光标定位在layer2
层内，选择[插入]\\[图像]菜单，将图像37732.gif（“金庸群侠传3”图像）插入该层，调整层的大小，使之适应图像的大小。
5、 选择[窗口]/[时间轴]，调出“时间轴面板”，如图2-8-5所示。
图2-8-5
6、 在文档窗口选中layer2层，将该层拖到时间轴上的第1帧，选择最后一帧，将layer2层拖到网页窗口的右上角，同时将最后一帧的位置拖到第30帧。
7、 此时大家会发现该层的运动路径是条直线，现在我们要将其运动路径改为曲线。在时间轴面板上第15帧的位置单击右键，在弹出的快捷菜单中选择“增加关键帧”。
8、 单击第15帧，选中layer2层，将其拖到网页窗口的底部中间。
9、 勾选时间轴面板上的“自动播放”复选框，会弹出如图2-8-6所示的对话框，说明网页载入时时间轴动画便开始播放，单击“确定”按钮。
图2-8-6
10、 勾选时间轴面板上的“自动播放”复选框，会弹出如图2-8-7所示的对话框，说明该时间轴动画播放时会循环，单击“确定”按钮。
- 37 -
图2-8-7
11、 将“Fps”改为“5”，时间轴面板的最终效果图如图2-8-8所示。
图2-8-8
12、 按【F12】键，预览。
内容2的步骤：
1、 新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“插入表格”
按钮，插入1行3列，宽度“390px”，边框“0”
的表格。
2、 单击每个单元格，打开属性面板，设置单元格宽“130px”，高“30px”。
3、 将光标定位在第一个单元格内，选择[插入]/[布局对象]/[层]，将层layer1插入到该单元格中，同时设置该层宽“130px”，高“30px”。
4、 将光标定位在layer1层，选择[插入]/[图像]，将图像“button-1.gif”插入到layer1层中。
5、 重复步骤3、4，在第二个单元格内插入层layer2，将图像“button-2.gif” 插入到layer2层中。
6、 重复步骤3、4，在第三个单元格内插入层layer3，将图像“button-3.gif” 插入到layer3层中。
7、 将光标定位在layer1层，选择[插入]/[布局对象]/[层]，在layer1层中绘制一个嵌套层layer4。
8、 将光标定位在层layer4中，单击“布局”工具栏中的“插入表格”
按钮，插
入4行1列的表格，在第1个单元格中插入图像“button-11.gif”，第2个单元格中插入图像“button-12.gif”，第3个单元格中插入图像“button-13.gif”，第4个单元格中插入图像“button-14.gif”。
9、 将光标定位在layer2层，选择[插入]/[布局对象]/[层]，在layer2层中绘制一
- 38 -
个嵌套层layer5。
10、 将光标定位在层layer5中，单击“布局”工具栏中的“插入表格”
按钮，插
入2行1列的表格，在第1个单元格中插入图像“button-21.gif”，第2个单元格中插入图像“button-22.gif”。
11、 将光标定位在layer3层，选择[插入]/[布局对象]/[层]，在layer3层中绘制一个嵌套层layer6。
12、 将光标定位在层layer6中，单击“布局”工具栏中的“插入表格”
按钮，插
入3行1列的表格，在第1个单元格中插入图像“button-31.gif”，第2个单元格中插入图像“button-32.gif”， 第3个单元格中插入图像“button-33.gif”，最终效果如图2-8-9所示。
图2-8-9
13、 选择[窗口]/[行为]，打开“行为”面板，如图2-8-10所示。
图2-8-10
14、 选中层图像“button-1.gif”，在“行为”面板中单击“添加行为”按钮，
在弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，如图2-8-11所示，选中层layer4，单击“显示”按钮，再单击“确定”按钮。
- 39 -
图2-8-11
15、回到“行为”面板，将事件改为“onMouseOver”。 16、再单击“添加行为”
按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示
隐藏层”对话框，选中层layer4，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。
17、选中层图像“button-2.gif”，在“行为”面板中单击“添加行为”
按钮，在
弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer5，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。
18、再单击“添加行为”
按钮，在弹出的菜单中选择“显示隐藏层”，打开“显示
隐藏层”对话框，选中层layer5，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。
19、选中层图像“button-3.gif”，在“行为”面板中单击“添加行为”
按钮，在
弹出的菜单中选择“显示隐藏层”，打开“显示隐藏层”对话框，选中层layer6，单击“显示”按钮，再单击“确定”按钮，回到“行为”面板，将事件改为“onMouseOver”。
20、再单击“添加行为”
按钮，在弹出的菜单中选择“显示隐藏层”，打开“显
示隐藏层”对话框，选中层layer6，单击“隐藏”按钮，再单击“确定”按钮，然后回到“行为”面板，将事件改为“onMouseOut”。
21、单击最外面的表格，打开“属性面板”，将“对齐”改为“居中对齐”，然后分别选中layer4，layer5，layer6，打开“属性面板”，将“可见性”改为“hidden”。
22、按【F12】键，预览。
内容3的步骤：
1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，按住【Crtl】键的同时单击“绘制层”
按钮，连续绘制4个层layer1，
layer2，layer3，layer4，放置好4个层的位置。
2、选择层layer2，layer3，layer4，选择[修改]/[排列顺序]/[左对齐]菜单，设置这3层垂直方向对齐。
3、选中层layer1，打开“属性面板”，将“Z轴”改为“5”。
- 40 -
相关推荐：
loading