《网页设计与制作实用教程电子教案教学建议教学课件作者刘艳丽第10章节为页面元素添加行为课件》由会员分享，可在线阅读，更多相关《网页设计与制作实用教程电子教案教学建议教学课件作者刘艳丽第10章节为页面元素添加行为课件（30页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作实用教程,主编：刘艳丽 副主编：许晞 秦高德 高妍,第10章 为页面元素添加行为,2,2019/6/26,学习目标,了解行为的基本概念； 熟练掌握行为面板的使用； 掌握常见行为的使用方法； 了解其他行为的使用方法。,第10章 为页面元素添加行为,3,2019/6/26,目录,为页面元素添加行为实例 行为的综合应用实例 其他行为实例 本章小结 配套实训 练习题,第10章 为页面元素添加行为,4,2019/6/26,为页面元素添加行为实例,设计目标 页面分析 实训引导 制作步骤,第10章 为页面元素添加行为,5,2019/6/26,设计目标,为网站首页设置各种行为，浏览效果如图所示。
2、,返回,第10章 为页面元素添加行为,6,2019/6/26,页面分析,在上图所示的网页中，分别设置了以下行为： 交换图像 弹出消息框 打开浏览器窗口 调用JavaScript 设置状态栏文本 播放声音 显示弹出式菜单 参见教程P195,返回,第10章 为页面元素添加行为,7,2019/6/26,实训引导,1本实例的页面内容取自于第6章制作的主页index6.html。 2素材网页“征文启事”ex10_1.htm、插入Flash动画的ex10_4.htm文件由配套光盘webcoursechapter10materials文件夹提供，请将该文件复制到本地站点futurewebpages文件夹下。
3、 3本页面用到的2个交换图像文件：img6_7.gif、img6_9.jpg和激活弹出式菜单所使用的“未来都市”图像文件img10_1.jpg由配套光盘webcoursechapter10images文件夹提供（图像尺寸必须相同），在制作页面之前，先将用到的图像文件复制到本地站点futureimages文件夹中。 4页面中播放的声音文件存放在配套光盘的webcoursechapter10sound文件夹下，文件名为sud10_1.mid，在制作页面之前，先将用到的声音文件复制到本地站点futuresound文件夹中。 5页面效果请参见webcoursechapter10文件夹下的index10
4、.html文件。,返回,第10章 为页面元素添加行为,8,2019/6/26,制作步骤,1. “交换图像”行为。 2 “弹出信息”行为。 3 “打开浏览器窗口”行为。 4 “调用JavaScript”行为。 5 “设置状态栏文本”行为。 6 “播放声音”行为。 7 “显示弹出式菜单”行为。,返回,第10章 为页面元素添加行为,9,2019/6/26,交换图像,创建交换图像效果。当鼠标移动到图像上时，图像交换为另外一幅，当鼠标移出时，又恢复为原始状态。操作步骤见教程P196。,第10章 为页面元素添加行为,10,2019/6/26,弹出信息,在浏览器载入页面后，弹出消息框，操作步骤见教程P199
5、。,第10章 为页面元素添加行为,11,2019/6/26,打开浏览器窗口,在打开浏览器窗口的同时，弹出一个新窗口，操作步骤见教程P200。,第10章 为页面元素添加行为,12,2019/6/26,调用JavaScript,在弹出的新窗口中，单击“关闭窗口”按钮，将当前新窗口关闭，操作步骤见教程P202。,第10章 为页面元素添加行为,13,2019/6/26,设置状态栏文本,当浏览器载入页面后，在状态栏中显示信息，操作步骤见教程P203。,第10章 为页面元素添加行为,14,2019/6/26,播放声音,当鼠标单击“畅想未来”图像时，播放音乐，操作步骤见教程P204。,第10章 为页面元素添
6、加行为,15,2019/6/26,显示弹出式菜单,当鼠标移动到“未来都市”图像上时，显示弹出式菜单，选择菜单中的选项可以链接并打开相应文件；当鼠标移出时，弹出式菜单消失。操作步骤见教程P205。,第10章 为页面元素添加行为,16,2019/6/26,行为的综合应用实例,设计目标 页面分析 实训引导 制作步骤,第10章 为页面元素添加行为,17,2019/6/26,设计目标,为网页文件设置行为，使得当鼠标移动到某幅图像上时，显示该图像对应的主题文字，当鼠标离开图像上时主题文字消失。浏览效果如图所示。,返回,第10章 为页面元素添加行为,18,2019/6/26,页面分析,在上图所示的网页中，分
7、别设置了以下行为： 显示-隐藏层 设置层文本 改变对象属性参 见教程P208,返回,第10章 为页面元素添加行为,19,2019/6/26,实训引导,本页面将在第8章制作的ex8_1.htm文件的基础上进行修改。,返回,第10章 为页面元素添加行为,20,2019/6/26,制作步骤,“显示-隐藏层”行为。 “设置层文本”行为。 “改变属性”行为。,返回,第10章 为页面元素添加行为,21,2019/6/26,显示-隐藏层, 创建如下效果，当鼠标移动到某图像上时，显示（黄色）图层“text” ；当鼠标移出某图像时，隐藏“text”图层，操作步骤见教程P209。,第10章 为页面元素添加行为,2
8、2,2019/6/26,设置层文本,制作一个动态图像说明。要求为一组图像集的每张图像配以文字说明，使所有图像说明在一个图层中显示，随着鼠标在图像间移动，说明文字也动态地随之更换，操作步骤见教程P210。,第10章 为页面元素添加行为,23,2019/6/26,改变属性,在设计目标的基础上进行如下扩充：当鼠标移动到某张图像上时，动态地改变文字说明图层的颜色、文字的大小、字体、颜色、倾斜、阴影效果，并为选中图像设置边框线。当鼠标离开该图像时，图像边框线、文字说明图层消失，操作步骤见教程P211。,第10章 为页面元素添加行为,24,2019/6/26,其他行为实例,跳转到URL 控制Shockwa
9、ve或Flash 用行为控制时间轴,第10章 为页面元素添加行为,25,2019/6/26,跳转到URL,在分割了3个框架的网页中，当鼠标单击框架左下部的“未来都市”超级链接时，使框架的顶部及右下部的内容同时发生变化，当鼠标单击框架左下部的“本站首页”超级链接时，恢复原状，操作步骤见教程P216。,第10章 为页面元素添加行为,26,2019/6/26,控制Shockwave或Flash,在网页中插入一个Flash动画，载入页面后，单击“播放”按钮，动画开始播放；单击“停止”按钮，动画停止播放。操作步骤见教程P218。,第10章 为页面元素添加行为,27,2019/6/26,用行为控制时间轴,
10、利用行为控制时间轴实现如下效果：当鼠标移到运动的图像上时，该图像就停止运动；当鼠标离开图像时，图像又继续运动。操作步骤见教程P219。,第10章 为页面元素添加行为,28,2019/6/26,本章小结,本章主要介绍了行为的基本概念，行为、事件、动作及三者之间的联系及行为的使用方法。 在学习本章时，要熟练掌握行为、事件、动作三个基本概念，同时认真理解各种行为的具体用法。,第10章 为页面元素添加行为,29,2019/6/26,配套实训,参见教材第221223页，利用提供的素材文件，按要求制作一个游戏网站。,第10章 为页面元素添加行为,30,2019/6/26,练习题,参见教材第224页，完成相应的练习题： 填空题 单选题 思考题,
