第10章-为页面元素添加行为课件.ppt

1、第10章 为页面元素添加行为22022-12-24学习目标学习目标了解行为的基本概念；熟练掌握行为面板的使用；掌握常见行为的使用方法；了解其他行为的使用方法。第10章 为页面元素添加行为32022-12-24目录目录为页面元素添加行为实例 行为的综合应用实例其他行为实例本章小结配套实训练习题第10章 为页面元素添加行为42022-12-24为页面元素添加行为实例为页面元素添加行为实例设计目标页面分析实训引导制作步骤第10章 为页面元素添加行为52022-12-24设计目标设计目标为网站首页设置各种行为，浏览效果如图所示。返回返回第10章 为页面元素添加行为62022-12-24页面分析页面分析

2、在上图所示的网页中，分别设置了以下行为：交换图像 弹出消息框 打开浏览器窗口 调用JavaScript 设置状态栏文本 播放声音 显示弹出式菜单 参见教程P195返回返回第10章 为页面元素添加行为72022-12-24实训引导实训引导1本实例的页面内容取自于第6章制作的主页index6.html。2素材网页“征文启事”ex10_1.htm、插入Flash动画的ex10_4.htm文件由配套光盘webcoursechapter10materials文件夹提供，请将该文件复制到本地站点futurewebpages文件夹下。3本页面用到的2个交换图像文件：img6_7.gif、img6_9.jpg

3、和激活弹出式菜单所使用的“未来都市”图像文件img10_1.jpg由配套光盘webcoursechapter10images文件夹提供（图像尺寸必须相同），在制作页面之前，先将用到的图像文件复制到本地站点futureimages文件夹中。4页面中播放的声音文件存放在配套光盘的webcoursechapter10sound文件夹下，文件名为sud10_1.mid，在制作页面之前，先将用到的声音文件复制到本地站点futuresound文件夹中。5页面效果请参见webcoursechapter10文件夹下的index10.html文件。返回返回第10章 为页面元素添加行为82022-12-24制作步

4、骤制作步骤1.“交换图像”行为。2“弹出信息”行为。3“打开浏览器窗口”行为。4“调用JavaScript”行为。5“设置状态栏文本”行为。6“播放声音”行为。7“显示弹出式菜单”行为。返回返回第10章 为页面元素添加行为92022-12-24交换图像交换图像F 创建交换图像效果。当鼠标移动到图像上时，图像交换为另外一幅，当鼠标移出时，又恢复为原始状态。操作步骤见教程P196。第10章 为页面元素添加行为102022-12-24弹出信息弹出信息F在浏览器载入页面后，弹出消息框，操作步骤见教程P199。第10章 为页面元素添加行为112022-12-24打开浏览器窗口打开浏览器窗口F在打开浏览器

5、窗口的同时，弹出一个新窗口，操作步骤见教程P200。第10章 为页面元素添加行为122022-12-24调用调用JavaScriptF在弹出的新窗口中，单击“关闭窗口”按钮，将当前新窗口关闭，操作步骤见教程P202。第10章 为页面元素添加行为132022-12-24设置状态栏文本设置状态栏文本F当浏览器载入页面后，在状态栏中显示信息，操作步骤见教程P203。第10章 为页面元素添加行为142022-12-24播放声音播放声音F当鼠标单击“畅想未来”图像时，播放音乐，操作步骤见教程P204。第10章 为页面元素添加行为152022-12-24显示弹出式菜单显示弹出式菜单F当鼠标移动到“未来都市

6、”图像上时，显示弹出式菜单，选择菜单中的选项可以链接并打开相应文件；当鼠标移出时，弹出式菜单消失。操作步骤见教程P205。第10章 为页面元素添加行为162022-12-24行为的综合应用实例行为的综合应用实例设计目标页面分析实训引导制作步骤第10章 为页面元素添加行为172022-12-24设计目标设计目标为网页文件设置行为，使得当鼠标移动到某幅图像上时，显示该图像对应的主题文字，当鼠标离开图像上时主题文字消失。浏览效果如图所示。返回返回第10章 为页面元素添加行为182022-12-24页面分析页面分析在上图所示的网页中，分别设置了以下行为：显示-隐藏层设置层文本改变对象属性参见教程P20

7、8返回返回第10章 为页面元素添加行为192022-12-24实训引导实训引导本页面将在第8章制作的ex8_1.htm文件的基础上进行修改。返回返回第10章 为页面元素添加行为202022-12-24制作步骤制作步骤“显示-隐藏层”行为。“设置层文本”行为。“改变属性”行为。返回返回第10章 为页面元素添加行为212022-12-24显示显示-隐藏层隐藏层F创建如下效果，当鼠标移动到某图像上时，显示（黄色）图层“text”；当鼠标移出某图像时，隐藏“text”图层，操作步骤见教程P209。第10章 为页面元素添加行为222022-12-24设置层文本设置层文本 制作一个动态图像说明。要求为一组

8、图像集的每张图像配以文字说明，使所有图像说明在一个图层中显示，随着鼠标在图像间移动，说明文字也动态地随之更换，操作步骤见教程P210。第10章 为页面元素添加行为232022-12-24改变属性改变属性 在设计目标的基础上进行如下扩充：当鼠标移动到某张图像上时，动态地改变文字说明图层的颜色、文字的大小、字体、颜色、倾斜、阴影效果，并为选中图像设置边框线。当鼠标离开该图像时，图像边框线、文字说明图层消失，操作步骤见教程P211。第10章 为页面元素添加行为242022-12-24其他行为实例其他行为实例跳转到URL 控制Shockwave或Flash 用行为控制时间轴 第10章 为页面元素添加行

9、为252022-12-24跳转到跳转到URL 在分割了3个框架的网页中，当鼠标单击框架左下部的“未来都市”超级链接时，使框架的顶部及右下部的内容同时发生变化，当鼠标单击框架左下部的“本站首页”超级链接时，恢复原状，操作步骤见教程P216。第10章 为页面元素添加行为262022-12-24控制控制Shockwave或或Flash 在网页中插入一个Flash动画，载入页面后，单击“播放”按钮，动画开始播放；单击“停止”按钮，动画停止播放。操作步骤见教程P218。第10章 为页面元素添加行为272022-12-24用行为控制时间轴用行为控制时间轴利用行为控制时间轴实现如下效果：当鼠标移到运动的图像上时，该图像就停止运动；当鼠标离开图像时，图像又继续运动。操作步骤见教程P219。第10章 为页面元素添加行为282022-12-24本章小结本章小结 本章主要介绍了行为的基本概念，行为、事件、动作及三者之间的联系及行为的使用方法。在学习本章时，要熟练掌握行为、事件、动作三个基本概念，同时认真理解各种行为的具体用法。第10章 为页面元素添加行为292022-12-24配套实训配套实训 参见教材第221223页，利用提供的素材文件，按要求制作一个游戏网站。第10章 为页面元素添加行为302022-12-24练习题练习题参见教材第224页，完成相应的练习题：填空题单选题思考题