单元7　实现网页特效

1、单元7实现网页特效操作演练1.2技术提升1.3操作准备1.1考核评价1.4操作准备1.1操作准备1.1操作准备1.1操作准备1.1操作准备7.1操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练1.2操作演练7.2技术提升1.3技术提升1.3技术提升7.3考核评价1.4考核评价7.4 将javascript程序嵌入到HTML代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。 在网页中添加一些恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏性和趣味性。【教学导航】教学目标（1）学会编写简单的j

2、avascript程序，能看懂较复杂的javascript程序，明确其实现的功能和各语句的含义（2）掌握在网页中显示当前日期的实现方法（3）掌握不同时间段显示不同问候语的实现方法（4）掌握动态改变网页中文本字体大小的实现方法（5）掌握滚动网页标题栏中的文字的实现方法（6）掌握鼠标指针指向不同的超级链接时，切换不同图片的实现方法（7）了解在网页中自动切换焦点图片的实现方法（8）了解在网页中自动滚动图片的实现方法（9）了解在网页中自动漂浮图片的实现方法（10）通过对典型javascript程序代码的分析，掌握javascript的基本语法，javascript程序的基本语法格式，能熟练链接外部ja

3、vascript脚本文件等教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议8课时（包含考核评价）【 7.1操作准备】 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元2”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元7”的本地站点。【7.2操作演练】【任务7-1】在网页中显示当前日期和问候语【任务描述】 在网页文档0701.html中的合适位置编写javascript代码实现以下功能： （1）在网页文档0701.html的顶部显示当前日期及星期数，日期格式为：年月日星期。 （2）在网页文档0701.html顶部当前

4、日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语。 （3）关闭网页0701.html时自动弹出对话框。 网页0701.html的浏览效果如图7-1所示。图7-1网页0701.html的浏览效果【任务实施】 1编写javascript代码在网页中显示当前日期 打开网页文档0701.html，在网页头部输入表7-1所示的javascript代码。 在网页0701.html主体部分的合适位置 输入HTML代码 dateweek()，调用自定义函数dateweek()，显示当前日期。 2编写javascript代码在网页中显示问候语 在网页的【代码】视图中，将光标置于显示当前日期的j

5、avascript代码之后，然后输入表7-2所示的javascript代码。 3编写javascript代码实现关闭网页时自动弹出对话框 在网页0701.html的头部的输入表7-3所示的javascript代码。 4分析具有类似功能的javascript代码的作用与含义 表7-4也是显示当前日期的javascript代码，请分析这些代码的作用与含义，应用了哪些javascript知识。【任务7-2】动态改变网页中文本字体大小【任务描述】 在网页文档0702.html中的合适位置编写javascript代码，实现动态改变网页中文本字 体大小的功能。 网页文档0702.html的浏览效果如图7-

6、3所示，单击“大”、“中”或“小”可以动态改变该区域的字体大小，单击“在线打印”会弹出【打印】对话框，单击“关闭”可以关闭该页面。图7-3网页文档0702.html的浏览效果【任务实施】 1编写改变文本字体大小的代码 在网页的【代码】视图中，将光标置于“”之前，然后输入表7-6所示的javascript代码。 2设置超级链接，调用改变字体大小的函数 切换到【设计】视图，在“友情链接”所在的区 块，选中文字“大”，然后在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(16)” 。 调用改变字体大小的函数，如图7-4所示。 调用函数时传递的参数为“16”，即文

7、本的字体大小为“16像素”。【任务7-3】在网页中自动滚动图片【任务描述】 在网页文档0703.html中的合适位置编写javascript代码，实现自右向左的横向滚动图片和自下向上的纵向滚动图片效果。 自右向左横向滚动图片的浏览效果如图7-5所示，图片以一定速度向左滚动，自下向上纵向滚动图片的 游览效果如图7-6所示，图片以一定速度向上滚动。图7-5自右向左横向滚动图片的浏览效果图7-6自下向上纵向滚动图片的游览效果【任务实施】 1实现自右向左的横向滚动图片效果 打开网页文档0703.html，切换到【代码】视图，在与之间分别输入HTML代码和javascript代码，实现自右向左的横向滚动

8、图片功能，代码如表7-7所示。 2实现自下向上的纵向滚动图片效果 在网页文档0703.html中合适位置分别输入HTML代码和javascript代码，实现自下向上的横向滚动图片功能，代码如表7-8所示。【7.3技术提升】【任务7-4】在网页中自动切换焦点图片【任务描述】 在网页文档0704.html中编写javascript代码实 现自动切换焦点图片的功能。 网页中自动切换图片的浏览效果如图7-7所示，每一段时间切换一张图片，类似于幻灯片的功能。图7-7网页中自动切换图片的浏览效果【任务实施】1编写javascript代码 打开网页文档0704.html，切换到【代码】视图，将光标置于“”与

9、“”之 间，然后输入表7-9所示的javascript代码。2分析自动切换图片的javascript代码3自动切换图片代码的应用 （1）自行设置图片地址、图片链接地址和图片标题 （2）自行增加图片的数量【任务7-5】在网页中自动漂浮图片【任务描述】 在网页文档0705.html中编写javascript代码实 现自动漂浮图片的功能。 网页中自动漂浮图片的浏览效果如图7-8所示，可以看出网页中图片在不断的漂浮。图7-8网页中自动漂浮图片的浏览效果 【任务实施】 打开网页文档0705.html，切换到【代码】 视图，将光标置于“”之前，然后输入 表7-10所示的javascript代码，其中函数g

10、etPage Scroll()、getPageSize()和adMove(id)的详细代 码见教材配套光盘对应的文本文件。【7.4考核评价】【考核任务描述】 教材配套光盘中已提供了考核评价项目所需的起点网页文件0706.html、CSS样式表文件07style.css和网页素材，请完成以下操作。 （1）为函数showNowDate()编写代码，显示当前日期和星期几。 （2）为函数showTxt()编写代码，根据不同时间段显示合适的问候语：上午好、中午好、下午好和晚上好。 （3）为函数changeview(x)编写代码，实现鼠标指针指向不同的文字型超链接，能自动切换图片的功能。 （4）完善自动切换焦点图的代码，所需图片的存放路径为“images/image_change”。 （5）为函数titleScroll()编写代码，实现网页标题滚动功能。 本单元的考核任务完成后，网页0706.html的最终浏览效果如图7-9所示。图7-9网页0706.html的最终浏览效果【评价要点】 本单元的考核评价表如表7-12所示。【单元小结】 本单元应用javascript语言编写脚本程序，实现多种网页特效，主要包括在网页中显示当前日期和问候语、动态改变网页中文本字体大小、自动滚动图片、自动切换焦点图片、自动漂浮图片、滚动网页标题等网页特效。考核要点考核内容标准分计分（1）编写代码显示当前日期