在线留言 加入收藏 站内搜索

TOP

数字化教案和视频(典型)
2022-11-15 23:12:52 来源: 作者:【 】 浏览:275次 评论:0


课题

网页特效的制作

课时

2

教学目标

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

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

教学

难点

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

难点

JavaScript脚本代码的理解。

课前准备

教师

准备

PPT课件,案例,上机环境

学生

准备

熟练掌握Dreamweaver的基本操作

第一环节

创设情景

导入课题

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

第二环节

新课教学

任务1  认识网页特效

一、 网页特效的概念

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

二、 网页特效的分类

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

三、 网页特效代码的应用

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

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

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

 

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

第一步:

把如下代码加入 <BODY> 区域中。

<SCRIPT FOR=window EVENT=onLoad LANGUAGE=vbscript>

       image1. filters. item(0). apply()

       image1. filters. item(0). transition = 12

       image1. style. visibility = " "

       image1. filters(0). play(2.0)

</SCRIPT>

第二步:把如下代码加入 <BODY> 区域中。

<IMG SRC=" 图片的 URL"  ID="image1"  STYLE="visibility:hidden;FILTER:revealTransDuration=4.0,Transition=23);">

 

任务3  制作日期时间特效

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

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

第三步:在<body>标签内添加事件代码:

第四步:保存网页,按F12测试页面。

 

第三环节

课堂练习

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

第四环节

课堂总结

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

课后反思

 

 

Tags: 责任编辑:刘晓雪
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到QQ空间
分享到: 
上一篇课堂教学 下一篇教学光盘简介及图片

相关栏目

最新文章

图片主题

热门文章

推荐文章

相关文章

广告位