动态网页制作(精).docxVIP

信息技术基础教案(高二年级)备课组成员：狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 信息技术基础教案(高二年级) 备课组成员：狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 PAGE PAGE # 信息技术基础教案（高二年级）备课组成员：狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 信息技术基础教案（高二年级） 备课组成员：狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 PAGE PAGE # 第五章 动态网页制作 5.1认识动态网页 授课题目：§ 5.1认识动态网页 授课时数：1学时 课 型：新课 教学目标： 知识与技能：了解动态HTML,能够实现简单的动态 HTML效果；准确把握静态网页与动态 网页的区别，为学生以后自主制作动态网页打下良好的基础。 过程与方法：通过简单的实例演示，让学生对动态 HTML概念有比较具体的认识；利用任 务驱动法，让学生学会简单的动态 HTML制作。依据学生前面制作网页的基础，首先给出 静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。 进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。 情感态度与价值观：利用精彩的实例，激发学生学习动态 HTML网页的制作兴趣，提高学生 的审美情趣。 重 点：实现简单的动态 HTML效果；静态网页与动态网页的区别； 难 点：掌握动态网页的特性；实现简单的动态 HTML效果；静态网页与动态网页的区别； 动态网页的生成过程 教学过程 1.教师展示事先做好的简单的动态网页”鼠标指向一图片该图片变成另外一图片” ，和一个网 页中直接插入一 gif动画 请学生们就这两个简单的网页展开讨论。 分析两个网页的共同点及异同点 你看到这第一个网页鼠标指向图片的动，你觉得它是普通意义上的动画吗？ 希望大家踊跃发言，说出自己的观点。 教师总结：并不是网页上所有的”动”的效果都是动态 HTML效果. 从而引出动态HTML的概念：指即使在脱离网络环境的情况下，网页下载到浏览器以后仍能够随 时变换的HTML.(举例：鼠标移到文本、文本变成其它颜色、鼠标特效、常用的搜索引擎、用户 注册、用户登录、在线调查、用户管理、订单管理等等等 ). 同学们前面都自己利用 Fron tPage制作过自己喜欢的网页，这种网页的文件扩展名是 .htm 或者.html。网页上的每一行代码都是同学们预先编写好后，放置到 Web服务器上的，在发 送到客户端的浏览器上不再发生任何变化。这种网页，就称之为静态网页。接下来我们来了解 一下静态网页与动态网页的工作原理 静态网页的处理流程，如图 5-1所示。 心月屁 务 囲1寻rr 5|J门勺!fi 用冉 更怒送亍U i/j 忙亍列罟 flFi 劣器* wobjjbi芳制 o扌龙1於.毎i*-y u 动态网页的处理流程如图 5-2所示。 UT-f ? f ￡ j-i l ■託* ■ I E C? L3 S[JlL rt.T 1 I 9* 1 5 *血册铸；S椅加佛的挣态网负投送到讹求浏室器 4应用烈序服务:S肥处理牯果代迹给昵1服务習 牡小浏地誥诘奉越态网A 牡小浏地誥诘奉越态网A 访求 访求 3应川籾序服得搭执彳丁代貞 脸閱IT务器 JI卜P WebJIU勢黠件找该UI并鴉址给隔川秤序服务器 动态网页和静态网页的相同之处： 都是ASCII编码文件，都存在着HTML代码，都能包含脚 本语言代码，都存放在 Web服务器上，都把用户请求的页面发送到浏览器上。 动态网页和静态网页的区别 是：动态网页的文件扩展名不是 .htm 、.html ，而是 以.asp、 . jsp、 . php、 . perl 、.cgi 等形式为文件后缀；动态网页中的某些脚本 只能在服务器上运行， 而静态网页不能包含在服务器上运行的任何脚本； 当Web服务器收到用 户请求的静态页面后，将把查找结果直接发送到浏览器， 而当Web服务器收到用户请求的动态 页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理 结果传送给浏览器。 2.自己动手制作简单的动态 HTML 师：请同学们从网上找两幅自己喜欢的图片并下载到本地机。然后打开 Fro ntPage, 先将其中 的一幅图片插入，使用DHTML效果，利用其中的“鼠标悬停”事件， 将第一幅图片交换成第二 幅图片。 生：利用网络，在本地机上完成该任务，同时体会动态 HTML效果 学有余力的同学也可以试一下触发事件中的 ”网页加载”、”双击”、“单击”等并设置效果类型及 效果设置内容。 3.教师总结 同学们，我们本节课主要是了解了动态 HTML的实现效果，希望同学们通过课堂上讲解的实例， 对动态HTML有个大致的了解。 教师进一步比较静态网页和动态网页。 程