《网页设计与制作任务驱动式教程教学课件作者第2版陈承欢电子课件09单元9制作包含特效的网页》由会员分享，可在线阅读，更多相关《网页设计与制作任务驱动式教程教学课件作者第2版陈承欢电子课件09单元9制作包含特效的网页（30页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作 任务驱动式教程,单元9 制作包含特效的网页,教学环节,【教学导航】,【操作准备】,1创建所需的文件夹，拷贝所需的资源 2启动Dreamweaver CS6 3创建本地站点 4应用外部样式 （1）附加外部样式文件 （2）预览网页0901.html,【引导训练】,【任务9-1】制作包含特效的“云南旅游”网页,本单元“引导训练”的任务卡如表9-1所示。,【引导训练】,【任务9-1】制作包含特效的“云南旅游”网页,本单元“引导训练”网页0901.html的最终浏览效果如图9-7所示。,图9-7 网页0901.html的最终浏览效果,【引导训练】,在网页0901.html中文字“云南风光
2、”的右侧显示当前日期及星期数，日期格式及顺序如图9-8所示。,【任务描述】,【任务9-1-1】实现在网页中显示当前日期的特效,图9-8 网页中显示当前日期及星期数的格式,【任务实施】,切换到【代码】视图，将光标置于“云南风光”的右侧，光标位置如图9-9所示。,图9-9 【代码】视图中的光标位置1,【任务实施】,在光标位置输入表9-3所示的JavaScript代码。,表9-3 显示当前日期的JavaScript代码之一,【引导训练】,应用JavaScript的ifelse if语句，在网页0901.html中当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语，具体要求如下：
3、（1）每天上午8点之前（不包含8点）显示“早晨好！”。 （2）每天上午12点之前（包含8点但不包含12点）显示“上午好！”。 （3）每天的12点至14点（包含12点但不包含14点）显示“中午好！”。 （4）每天的14点至17点（包含14点但不包含17点）显示“下午好！”。 （5）每天的17点之后（包含17点）显示“晚上好！”。,【任务描述】,【任务9-1-2】实现在不同时间段显示不同问候语的网页特效,【任务实施】,在网页的【代码】视图中，将光标置于显示当前日期的JavaScript代码之后，即在“”与“”之间，然后输入表9-5所示的JavaScript代码。,表9-5 在不同时间段显示不同问候
4、语的JavaScript代码,【引导训练】,动态改变网页中文本字体大小，满足不同浏览者的需求。编写JavaScript代码，实现动态改变网页中文本字体大小的功能。,【任务描述】,【任务9-1-3】实现动态改变网页中文本字体大小的网页特效,【任务实施】,1编写改变文本字体大小的JavaScript代码 在网页的【代码】视图中，将光标置于“”之前，然后输入表9-7所示的JavaScript代码。,表9-7 动态改变网页中文本字体大小的JavaScript代码,【任务实施】,2设置超级链接，调用改变字体大小的函数 切换到【设计视图】，在“友情链接”所在的区块，选中文字“小”，然后在【属性】面板的“链
5、接”列表框中输入代码“javascript:setFontSize(12)”，调用改变字体大小的函数。调用函数时传递的参数为“12”，即文本的字体大小为“12像素”。 以同样的方法选中文本“中”，在【属性】面板的“链接”列表框中输入代码“javascript:setFontSize(14.9)”；选中文本“大”，在“链接”列表框中输入代码“javascript:setFontSize(16)”。,【引导训练】,当浏览者关闭所浏览的网页时自动弹出一个对话框，给浏览者留下深刻的印象。编写JavaScript代码，实现关闭网页时自动弹出对话框。,【任务描述】,【任务9-1-4】实现关闭网页时自动弹出
6、对话框的特效,【任务实施】,在网页的【代码】视图中，将光标置于“”之前，然后输入表9-8所示的JavaScript代码。,表9-8 关闭网页时自动弹出对话框的JavaScript代码,【引导训练】,为了吸引浏览者注意力，经常在网页标题栏中设置标题文字的滚动效果，以突出网站的主题。编写JavaScript代码，实现滚动网页标题栏中文字的功能。,【任务描述】,【任务9-1-5】实现滚动网页标题栏文字的特效,【任务实施】,在网页的【代码】视图中，将光标置于“”与“”之间，然后输入表9-9所示的JavaScript代码。,表9-9 滚动标题栏文字的JavaScript代码之一,在body标签内已有的代
7、码“”中“body”的后面输入“onLoad=“titleScroll()“;”，结果如下所示。 ,【引导训练】,编写JavaScript代码，实现以下功能。 （1）单击网页中不同的文字型超级链接，打开一个独立的窗口显示对应图片。 （2）鼠标指针指向不同的文字型超级链接，切换不同的图片。,【任务描述】,【任务9-1-6】实现鼠标指针指向不同超级链接切换不同图片的网页特效,【任务实施】,在网页的【代码】视图中，将光标置于“”之前，然后输入表9-12所示的JavaScript代码。,表9-12 自动切换图片的JavaScript代码,【引导训练】,将鼠标置于图片上，转动鼠标滚轮时缩放图片，编写 J
8、avaScript代码实现此功能。,【任务描述】,【任务9-1-7】实现转动鼠标滚轮缩放图片的网页特效,【任务实施】,在网页的【代码】视图中，将光标置于“”之前，然后输入表9-13所示的JavaScript代码。,表9-13 缩入图片的JavaScript代码,【引导训练考核实战】,本单元的“引导训练”考核评价内容如表9-14所示。,表9-14 单元9“引导训练”考核评价表,【同步训练】,【任务描述】,【任务9-2】制作包含特效的“九寨沟旅游”网页,表9-16 单元9“同步训练”任务卡,本单元“同步训练”的任务卡如表9-16所示。,【同步训练】,【任务描述】,【任务9-2】制作包含特效的“九寨
9、沟旅游”网页,本单元“同步训练”同步训练网页的浏览效果如图9-16所示。,图9-17 同步训练网页的浏览效果,【同步训练考核实战】,本单元的“同步训练 ”考核评价内容如表9-22所示。,表9-22 单元9“同步训练 ”考核评价表,【拓展训练】,【任务描述】,【任务9-3】制作包含特效的“公园游”网页,表9-23 单元9“拓展训练”任务卡,本单元“拓展训练”的任务卡如表9-23所示。,【拓展训练考核实战】,本单元的“拓展训练 ”考核评价内容如表9-25所示。,表9-25 单元9“拓展训练 ”考核评价表,【单元小结】,本单元制作了一个包含多种特效的网页，应用JavaScript语言编写脚本程序，可以实现许多网页特效，但网页特效并非是网页中必需的元素，对JavaScript语言只需一般了解即可。通过本单元学习要求基本掌握JavaScript语言的语法、对象和创建网页特效的常见方法。,快乐学习、高效学习,
