网页设计与制作实用教程 第2版 国家级精品课程配套教材 教学课件 作者 陈承欢 单元7　实现网页特效.ppt

《网页设计与制作实用教程 第2版 国家级精品课程配套教材 教学课件 作者 陈承欢 单元7　实现网页特效.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏性和趣味性。【教学导航】教

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

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

4、日期及星期数，日期格式为：年－月－日－星期。（2）在网页文档0701.html顶部当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语。（3）关闭网页0701.html时自动弹出对话框。网页0701.html的浏览效果如图7-1所示。图7-1网页0701.html的浏览效果【任务实施】1．编写javascript代码在网页中显示当前日期打开网页文档0701.html，在网页头部输入表7-1所示的javascript代码。在网页0701.html主体部分的合适位置输入HTML代码datewe

5、ek()，调用自定义函数dateweek()，显示当前日期。2．编写javascript代码在网页中显示问候语在网页的【代码】视图中，将光标置于显示当前日期的javascript代码之后，然后输入表7-2所示的javascript代码。3．编写javascript代码实现关闭网页时自动弹出对话框在网页0701.html的头部的输入表7-3所示的javascript代码。4．分析具有类似功能的javascript代码的作用与含义表7-4也是显示当前日期的javascript代码，请分析这些代码的作用与含义，应用了哪些javascript知识。【任

6、务7-2】动态改变网页中文本字体大小【任务描述】在网页文档0702.html中的合适位置编写javascript代码，实现动态改变网页中文本字体大小的功能。网页文档0702.html的浏览效果如图7-3所示，单击“大”、“中”或“小”可以动态改变该区域的字体大小，单击“在线打印”会弹出【打印】对话框，单击“关闭”可以关闭该页面。图7-3网页文档0702.html的浏览效果【任务实施】1．编写改变文本字体大小的代码在网页的【代码】视图中，将光标置于“”之前，然后输入表7-6所示的javascript代码。2．设置超级链接，调用改变字体大小的函数切换到

7、【设计】视图，在“友情链接”所在的区块，选中文字“大”，然后在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(16)”。调用改变字体大小的函数，如图7-4所示。调用函数时传递的参数为“16”，即文本的字体大小为“16像素”。【任务7-3】在网页中自动滚动图片【任务描述】在网页文档0703.html中的合适位置编写javascript代码，实现自右向左的横向滚动图片和自下向上的纵向滚动图片效果。自右向左横向滚动图片的浏览效果如图7-5所示，图片以一定速度向左滚动，自下向上纵向滚动图片的游览效果如图7-6所示，图片以一定速度向上

8、滚动。图7-5自右向左横