任务三 制作页面动态效果

1. 第五单元 制作“家乡山水”网页 任务三 制作页面动态效果 任务描述：为“家乡山水”网页添加动态效果。 任务分析：通过为“家乡山水”网页中的热点添加“显示-隐藏层”行为，控制相应层的状态；添加“设置层文本”行为，控制层“Layer8”中显示的文本内容。

2. 任务三 制作页面动态效果 自己动手： 1．为“金华山景区”热点添加“显示-隐藏层”行为 A.为热点添加行为 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。 选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层“Layer2”（“金华山景区”图像所在层）和层“Layer8”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮，如下图所示。 什么叫行为？

3. 任务三 制作页面动态效果 层“Layer2” 和层“Layer8” 为“显示”，其他层全部设置为“隐藏”

4. 任务三 制作页面动态效果 B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”，效果如下图所示： 行为面板介绍。 常用事件有哪些？ 常用行为有哪些？

5. 任务三 制作页面动态效果 至此，为“金华山景区”热点添加了一个行为，此时预览“家乡山水”页面，鼠标移上“金华山景区”热点时，层“Layer2”和“Layer8”显示，其他层都隐藏，右侧显示的是“金华山景区”图像和简介。 2．为“金华山景区”热点添加“设置层文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”→“设置层文本”选项，弹出“设置层文本”对话框，在“层”中选择层“Layer8”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。效果如下图所示：

6. 任务三 制作页面动态效果 选择层“Layer8” 输入对该景区的简单介绍

7. 任务三 制作页面动态效果 B.在“行为”面板的事件栏中，选择“onMouseOver”，按下F12预览页面，效果如下图所示。 左边选中景区，右边显示相应介绍。

8. 任务三 制作页面动态效果 使用以上方法，参照教材表5-1为其他热点设置“显示-隐藏层”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“Layer8”层设置为“显示”，其他层设置为“隐藏”。 使用以上方法，参照教材表5-7为相应热点添加“设置层文本”行为，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。

9. 任务三 制作页面动态效果 任务小结 1．掌握为热点添加“显示-隐藏层”行为。 2．掌握为热点添加“显示层文本”行为。

10. 任务三 制作页面动态效果 举一反三： 　将本单元“举一反三”文件夹中的“pra5-3”文件夹拷贝到D盘根目录，为其中的两个网页“practice5-8.html”、“practice5-9.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。 1．启发思路： 注意选择正确的行为和事件。 2．分组完成任务。