信息技术教案《第五章 动态网页制作》.doc

信息技术基础教案（高二年级） 备课组成员：狄乐群 管敏强 唐俊仙 陈燕 蒋莉莉 王洁 PAGE PAGE 6 第五章 动态网页制作 5.1认识动态网页 授课题目:§5.1认识动态网页 授课时数: 1学时 课　　型: 新课 教学目标： 知识与技能:了解动态 HTML，能够实现简单的动态 HTML 效果；准确把握静态网页与动态网页的区别，为学生以后自主制作动态网页打下良好的基础。 过程与方法: 通过简单的实例演示，让学生对动态 HTML 概念有比较具体的认识；利用任务驱动法，让学生学会简单的动态 HTML 制作。依据学生前面制作网页的基础，首先给出静态网页的概念，有了静态网页的学习，采用比较法，学生会对动态网页有个粗浅的了解。进而通过实例演示，让学生对动态网页有更深一步的了解，达到准确把握动态网页的概念。 3.情感态度与价值观：利用精彩的实例，激发学生学习动态 HTML 网页的制作兴趣，提高学生的审美情趣。 重 点： 实现简单的动态 HTML 效果; 静态网页与动态网页的区别； 难　　点：掌握动态网页的特性；实现简单的动态 HTML 效果; 静态网页与动态网页的区别；动态网页的生成过程 教学过程 1.教师展示事先做好的简单的动态网页”鼠标指向一图片该图片变成另外一图片”,和一个网页中直接插入一gif动画 请学生们就这两个简单的网页展开讨论。 （1）分析两个网页的共同点及异同点 （2）你看到这第一个网页鼠标指向图片的动，你觉得它是普通意义上的动画吗？ 希望大家踊跃发言，说出自己的观点。 教师总结:并不是网页上所有的”动”的效果都是动态HTML效果. 从而引出动态HTML的概念:指即使在脱离网络环境的情况下,网页下载到浏览器以后仍能够随时变换的HTML.(举例:鼠标移到文本、文本变成其它颜色、鼠标特效、常用的有哪些信誉好的足球投注网站引擎、用户注册、用户登录、在线调查、用户管理、订单管理等等等). 同学们前面都自己利用 FrontPage 制作过自己喜欢的网页，这种网页的文件扩展名是 .htm 或者 .html 。网页上的每一行代码都是同学们预先编写好后，放置到 Web 服务器上的，在发送到客户端的浏览器上不再发生任何变化。这种网页，就称之为静态网页。接下来我们来了解一下静态网页与动态网页的工作原理 静态网页的处理流程，如图 5-1 所示。 动态网页的处理流程如图 5-2 所示。  动态网页和静态网页的相同之处：都是 ASCII 编码文件，都存在着 HTML 代码，都能包含脚本语言代码，都存放在 Web 服务器上，都把用户请求的页面发送到浏览器上。 动态网页和静态网页的区别 是：动态网页的文件扩展名不是 .htm 、 .html，而是以 ．asp 、 ．jsp 、 ．php 、 ．perl 、 .cgi 等形式为文件后缀；动态网页中的某些脚本只能在服务器上运行，而静态网页不能包含在服务器上运行的任何脚本；当 Web 服务器收到用户请求的静态页面后，将把查找结果直接发送到浏览器，而当 Web 服务器收到用户请求的动态页面后，它将先把这个网页传递给一个称为应用服务器扩展的特殊软件进行处理，然后将处理结果传送给浏览器。 2.自己动手制作简单的动态 HTML 师：请同学们从网上找两幅自己喜欢的图片并下载到本地机。然后打开 FrontPage, 先将其中的一幅图片插入，使用 DHTML 效果，利用其中的“鼠标悬停”事件，将第一幅图片交换成第二幅图片。 生：利用网络，在本地机上完成该任务，同时体会动态 HTML 效果 学有余力的同学也可以试一下触发事件中的”网页加载”、”双击”、“单击”等并设置效果类型及效果设置内容。 3．教师总结 同学们，我们本节课主要是了解了动态 HTML 的实现效果，希望同学们通过课堂上讲解的实例，对动态 HTML 有个大致的了解。 教师进一步比较静态网页和动态网页。 （1）程序是否在服务器端运行，是区分动态网页和静态网页的重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如 ASP 、 PHP 、 JSP 、 ASP．NET 、 CGI 等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如 Html 页、 Flash 、 JavaScript 、 VBScript 等等，它们是永远不变的。 （2）这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称