课题

网页特效的制作

课时

2

教学目标

（1）能说出什么是网页特效，以及如何在网页中应用网页特效代码。

（2）会上网搜索并下载一些网页特效代码，尝试着把它们应用到网页中去。

教学

重难点

重点

运用java script脚本代码制作网页特效的方法。

难点

JavaScript脚本代码的理解。

课前准备

教师

准备

PPT课件，案例，上机环境

学生

准备

熟练掌握Dreamweaver的基本操作

第一环节

创设情景

导入课题

小敏通过行为实现了弹出信息、翻转图像、弹出广告页、可关闭的广告等网页特效，但还有一些网页特效通过行为无法实现，例如，显示日期和时间特效、图片逐渐显示等。设计师阿俊告诉她这些特效需要使用 JavaScript 脚本来实现。

第二环节

新课教学

任务1  认识网页特效

一、 网页特效的概念

网页特效就是网页的特殊效果，是一段编写好的脚本程序，应用它可以让网页变得形式多样，更加吸引人，如弹出窗口、飘浮广告等。

二、 网页特效的分类

常用的网页特效有很多，根据其作用的对象可分为以下几类：文本特效类、图形图像类、鼠标事件类、网页特效类、背景特效类、时间日期类、按钮特效类、状态栏特效类、代码生成类等。

三、 网页特效代码的应用

网页特效代码的应用十分简单，只要根据特效说明，把这些代码复制、粘贴到网页源代码的相应位置中，保存文件，再在浏览器中打开，就能够看到效果了。在网页源代码中插入特效代码有以下两种方式：

（1）在 Dreamweaver 中应用特效代码。用 Dreamweaver 打开要应用特效的网页，切换到“代码”视图，将特效代码插入到指定位置，然后进行相应的调试即可。

（2）直接使用文本编辑器。直接用文本编辑器（如记事本）打开网页文件，将特效代码插入到指定位置，然后进行相应的调试即可。

任务2  制作图片逐渐显现特效

第一步：

把如下代码加入  区域中。

       image1. filters. item（0）. apply（）

       image1. filters. item（0）. transition = 12

       image1. style. visibility = " "

       image1. filters（0）. play（2.0）

第二步：把如下代码加入  区域中。

（Duration=4.0，Transition=23）；">

任务3  制作日期时间特效

第一步：在要添加日期时间特效的网页中添加一个id名称为“shijian”的DIV。

第二步：在网页中添加如下函数代码：

第三步：在标签内添加事件代码：

第四步：保存网页，按F12测试页面。

第三环节

课堂练习

在“贸贸女装”网站“商品详情页”detail.html中制作日期时间特效和图片显示特效。

第四环节

课堂总结

本课学习了网页特效的概念和各类，以及应用java script脚本制作日期时间特效和图片显示特效的方法，同学们可以在实践操作中慢慢体会脚本的运用。

课后反思