注册 登录
ICT教育 返回首页

nangua318的个人空间 http://sns.ictedu.net.cn/?25724 [收藏] [复制] [分享] [RSS]

日志

教学设计分享

已有 582 次阅读2010-7-26 18:44 |

第四节 动态网页——基于服务器端的动态网页

一、课程标准中的相关内容

理解动态网页的概念,能解释其工作过程。

二、教学目标

1.知识与技能

通过实例使学生了解动态网页概念。

通过比较使学生了解动态网页相对于静态网页的优势。

通过试验探究使学生理解基于服务器端动态网页的工作过程

2.过程与方法

通过实践,使学生掌握局域网发布动态网站(asp为例)的方法。

能利用动态网页技术对一些网站实例的工作过程作合理解释。

3.情感态度与价值观

消除学生对网页实现技术神秘感,

培养学生探究思考的能力,

三、学生分析

从学习经验来看:由于frontpage菜单功能的有限,要完成一些动态网页技术势必从网页的后台代码入手。这给即使是高一同学的学习对象来说,第一次接触代码还是带来了很大的学习困难,主要表现在难以适应,难以理解。在学本节课之前,学生已经接触了网页的基本html结构、网页中客户端脚本以及层叠样式表的内容,学生初步具备看代码的习惯。

从智力水平来看:高中生的智力水平接近成人高峰状态,思维活跃,思维初步完成从具体到抽象思维为主的过渡,经常会提出问题并理智地思考问题,但时常需直观的、感性经验的支持。

从学习兴趣来看:对于高一学生来说,上网的经历比较丰富,能较多的体验到使用动态网页技术的网站,那么探索这些网站背后的实现机制将是一件非常有意义的活动。

四、教材分析

(一)本节的作用和地位

本节主要是探索动态网页背后的实现机制,是选修模块中对网页制作技术的深入延伸,同时为学生以后网络编程部分打下基础。

(二)本节主要内容

本节内容是选修模块《网络技术应用》的收尾篇,以asp技术为例来,介绍基于服务器端的动态网页工作原理及局域网内发布网站的方法,至于asp实现代码,由于教学对象和课时的限制可作一般性了解。

(三)重点难点分析

动态网页的工作原理属课程标准规定内容,因此是本节课的教学重点,同时这一抽象内容无法直观演示,因此也是本节课的教学难点。

五、教学策略

本节课试图采用实验探究的方法,教师事先设计好显示时间的一个静态(客户端脚本)和一个动态(服务器端脚本)网页,通过分别修改学生机和教师机的电脑时钟实验,观察网页内容变化,并探究现象背后的本质——静态网页客户端运行,基于服务器端的动态网页服务器端运行,让学生自己发现,寻求动态网页的实现机制。并把此作为必须在服务器端发布才能浏览网页的原因,使本节课的教学内容知识体系更完整,逻辑性更强。

六、教师准备

教师准备教师机发布一个网站,内容为“页面一”和“页面二”,分别链接到”page1.htm”和“page2.asp”。对应的源文件如下:page1.htm源文件利用客户端脚本语言javascript实现在网页中显示日期的效果

 

 

 

 

 

 

<html>

<head>

</head>

<body>

今天是

<script language="javascript">

var isnMonth = new Array("1","2","3","4","5","6","7","8","9","10","11","12");

var isnDay = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");

today = new Date () ;

if(document.all){

document.write(isnMonth[today.getMonth()]+today.getDate()+" "+isnDay[today.getDay()]); }

</script>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 


Page2.asp源文件是利用基于ASP技术在网页中显示日期的效果。

<html>

<head>

</head>

<body>

今天是

<%

Response.Write(year(date()) & "" & month(date()) & "" & day(date()) & "" & "星期" & mid("天一二三四五六",weekday(date()),1))

%>

</body>

</html>

 

 

 

 

 


七、教学流程

 

七、教学过程

(一)通过静动态网页比较引出课题。

师:引导学生观看sohu网,内容是一成不变的吗?

生:不是(学生经验的体验)

师:网站通常用不断更新的内容来吸引用户,作为新闻版块更需及时更新。

(呈现sohu网新闻版块区域在一天内的更新情况)

师:你们登陆自己的邮箱,每个人看见页面内容一样吗?

生:不一样(学生经验的体验),看到的是每个帐户所对应邮箱情况。

师:根据你们以前使用frontpage制作的网页的经验,我们现在看到的网页有什么不同?

生:是不断变化的。

师归纳:很好,同学们已经观察到了,我们把内容因人、因地、因时而变化的网页称为动态网页。

师:是用frontpage编辑或直接用html来修改频繁变动的网页内容吗?显然工作量很大。那是如何实现的呢?今天我们就一起来研究实现动态网页技术的工作原理。

[设计意图]:从学生熟知的网页入手,引出课题,并归纳动态网页的特点。学生有感性认识。

 

(二)实验探究——基于服务器动态网页技术的工作原理

1)设疑

师:出示登陆网站的网址,引导学生尝试分别点击“页面一”和“页面二”的链接,让学生观察页面显示内容。

生:均显示相同的“日期”

师:引导学生做“修改自己电脑时钟”的实验,再观察“页面一“和”页面二“的变化。

生:“页面一”指向网页内容随电脑时钟的变化而变化。

“页面二”指向网页内容没有发生任何变化。

师问:同样是显示日期的网页,为什么你们学生机修改电脑时钟时,会产生不同的变化。请同学们思考,可能是什么原因导致?

 

2)探究

生甲:可能是地址栏内的URL显示的文件名的后缀名不一样导致的。

[注:学生已经观察到静态网页和动态网页在文件名上的区别]

生乙:学生通过浏览器“查看源文件”的方式查看了两个网页文件的html文档,

发现page1.html是使用了javascript客户端脚本显示电脑时钟的,但是page2.asp看到的结果是个“静态网页”,所以不发生变化。

[注:学生已经开始通过观察后台html代码,来寻求问题答案,这本是一个很好的思路,但是因为ASP工作原理是把服务器执行的结果直接发送给客户端的,因此学生通过浏览器看到page2.asp的源文件仅仅是客户端收到的一个执行结果。不过教师正好可以通过此锲机继续把问题引到深入。]

 

3)深入,揭示原理

师:肯定学生观察网页源文件的思路,但没有直接评论学生的发言正确与否,而是直接修改了发布网站的教师机的电脑时钟再让学生重新登陆网站,观察page2.asp的结果,并解释出现现象的原因。

生:发现page2.asp显示的结果是刚刚教师机上更改过后的新时钟。

师:为什么没有修改网页的源文件,但两次学生机上显示时间及源文件都发生变更呢?page1.htmlpage2.asp的执行结果分别依赖谁?

生:page1.html的执行结果依赖学生机(客户端),而page2.asp的执行结果依赖于教师机(发布网站的服务器端)

师:呈现教师机上保存的page1.htmlpage2.asp的源文件,并与学生一起归纳动态网页较之静态网页不同的工作原理。

采用不同技术(包括aspphp等)编写的动态网页保存在Web服务器内。

当客户端发出请求时,服务器端把ASP程序运行结果连同html标记、纯文本以及客户端脚本一起发给客户端浏览器。

因此你们刚刚通过自己IE浏览器来查看page2.asp的源文件时,仅仅是服务器端把asp程序执行的结果发送过来,因此表面上看起来是个“静态网页”的假象。

生:恍然大悟!

[设计意图] 通过分别修改学生机和教师机的电脑时钟来观察动态网页的变化的探究活动的设计,较成功的化解了本节课的教学难点,直观的呈现了动态网页技术的工作原理,特别是在服务器端执行的结果发送给客户端,学生对这句话的理解更加深刻。

 

(三)分析实例,发布网站

师:呈现一个留言本的网站文件夹,我们是如何观看到网页效果的呢?可以双击页面吗?

师:演示无效。为什么呢?

生:根据动态网页的工作原理,其无法直接通过浏览器运行,其中的程序需要在服务器端执行。

师演示:基于asp技术的留言本网站,通过IIS中的设置虚拟目录,在局域网内如何发布。

学生练习:在自己机器上发布。

生:思考动态网页较之静态网页的优势,并把结果纪录在留言本内。

[设计意图] 通过造成与静态网页运行不同的认知冲突,再一次加深学生对基于服务器动态网页工作原理的认识,同时也自然的过渡到配置动态网页运行环境的学习

(四)小结

象网页中出现的一些诸如gifflash动画仅仅是给网页添加了动态效果,并不是严格意义上的动态网页,而使用客户端脚本的动态网页实现的功能也是极其有限,只有本节课基于服务器端的动态网页才能实现更大功能,带来更大的方便。技术的发展总是根据人的需求,动态网页技术诞生,一方面,网页内容根据用户的要求和选择而动态改变和响应,使其交互性更强。另一方面,无须手动地更新HTML文档,便会自动生成新的页面,可以大大节省了网页制作者的工作量。因此近阶段,动态网页技术得到了长足的发展,目前主流的动态网页技术有JSP,ASP,PHP。有兴趣的同学,可以课后与我联系,找一些专业书籍看看,你将得到更多网页制作的乐趣。

 

[教后记]

动态网页的工作原理属抽象知识内容,大多呈现“较沉闷”的课堂,可是在本节课内,学生表现出积极的状态,积极的表现,学生的思维力得到了很大的激发,就连教师本人也始料未及,我想有两方面的因素促进了教学效果的提高。

一、  试验探究教学方法的应用

一直期望信息技术课堂能跳出“死操作”的怪圈,一直思考,若干年后,我的信息技术课堂到底能给学生留下些什么,是那些软件的操作吗?不用的东西,很快就会忘记,更何况,进入指数时代的我们,有什么技术能成为“长青树”呢?我想,课堂中附在知识技能载体上的思维和方法才具有长期的生命力。新课程倡导学生探究性学习方式即是一种很好的学习方法,在中小学各个学科中均有所体现,在信息技术课堂中,对于操作技能课型,通常也是让学生自主探究,这样有利于学生获得亲身的体验,有利于培养学生独立发现问题、获得自主发展的能力。但对于理论课型,大家尝试探究性学习形式较少,在本节课内,如果按照教材仅仅呈现图示的方法帮助讲解,似乎有点空,学生还是很茫然,采用实验探究的方法,通过修改学生机和教师机的电脑时钟,观察网页的变化,学生对理论知识的理解更直观也更深刻,同时,试验过程中,改变某个变量,观察现象的变化,思考变化的原因,这些附在知识载体上的学习通法,是不是具有很好的迁移价值,如,在程序设计部分就是调试程序的思想

 

二、  生成性教学资源的有效利用

课堂教学是一个动态的、不断发展的过程,这个过程既有规律可循,又有灵活的生成性和不可预测性。教师、学生在交往互动中时生成的课程资源,就是生成性的教学资源,只要我们注意挖掘,都有可能成为开启学生智慧之门的钥匙。在本节课中,学生的思维得到了极大启发,课堂中生成了许多教师在原先设计中没有预料的情况,学生在探索过程中,通过浏览器查看网页源文件时,发现asp网页的html是“静态”的假象,这正好可以解释另外一个教学难点——服务器端把ASP程序运行结果连同html标记、纯文本以及客户端脚本一起发给客户端浏览器。这些宝贵的学生思维火花的及时捕捉和利用生成为促进学生发展的教学资源,促进了教学的有效开展。课堂出现了无法预约的意外精彩,

 

 

 

 

 

 

 


路过

鸡蛋

鲜花

握手

雷人

评论 (0 个评论)

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册

小黑屋|手机版|Archiver|ICT教育—中小学信息技术教育网 ( 苏ICP备10008215号

GMT+8, 2018-2-24 06:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部