• 陈 俊 选出最美的微笑——“ASP的应用”教学案例
  • 陈 俊 2009-9-9 浏览() 【
  • 南京市第五中学 陈 俊

    摘要:

    本文是使用普通高中信息技术《动态网页》一节内容的教案为例,介绍了动态网页的工作流程。课程以“选出最美的微笑” 模拟投票作为导入来激发学生兴趣,接着以任务驱动法教学,配加学件辅导促进学生自主探究学习,最后围绕“选出最美的微笑” 投票系统,结合图片动画帮助学生理解本节课重难点——动态网页流程,并进行知识点的提升总结和拓展延伸。

    教材采用地图出版社出版的普通高中课程标准实验教科书信息技术·选修3《网络技术应用》第四单元第四节内容《动态网页》。本章节主要内容为动态网页工作流程与网站发布。一方面知识点相对比较枯燥,理论性较强,所以在教学设计上选择学生较为感兴趣的奥运微笑征集活动为主题,利用动态网页技术创设情境,使学生身临其境地在活动中学习,调动了学生的学习积极性。另一方面学生在前面的课程中已经初步掌握了HTML语言的基本应用,在任务驱动模式下,教师准备学件,让学生自主学习,使得整个教学过程更具人文性。

    一、教学目标

    1.知识与技能:

    初步了解动态网页的基本技术及工作原理;理解静态网页、动态网页基本概念及区别;理解ASP网页的工作流程;了解网站发布方式。

    2.过程与方法:

    根据HTML的基本应用,能通过实践自主学习,能够通过比较研究得出静态网页和动态网页的区别。学会网页发布,实践并总结网页发布的特点及意义。

    3.情感态度价值观:

    通过问题的提出、思考、解决,提高学生分析生活和学习中实际问题的能力。利用动态网页的实际应用,激发学生科学探索的热情,形成积极主动地学习和参与信息活动的态度。

    二、教学资源

    1.制作运用ASP代码创设一个模拟投票环境,学生进行投票,导入整个课程,并围绕这个模拟投票环境展开教学。

    2.学生自学的学件,其中包括两个驱动任务,引导学生自主学习。另外利用图片、动画形象地阐述静态网页和动态等网页较难知识点。

    三、教学重点

    动态网页及ASP网页工作流程

    四、教学难点

    静态网页和动态网页区别  网页发布方式

    五、教学过程

    1.创设情景、激发兴趣

    师:2008年北京将举办第二十九届奥运会,北京市市长刘淇提出“微笑是北京最好的名片”,“迎奥运微笑服务行动”也正在开展。作为一个中国公民,请同学们也为奥运出一份力,选出最美的微笑。

    请同学们登陆http://192.168.100.100/asp/index.htm,试一试进行投票。

    生(动手操作,投票):可以投票,为什么看不到结果?

    (设计意图:展示投票模拟环境,引导学生进入课程,并在操作中设置问题,为后面动态网页概念的提出埋下伏笔。利用学生善于网络交流和对美的事物的向往,激发学生学习积极性。同时也增强了学生作为普通公民对公共事业的责任心,培养了集体主义精神,适时渗透了德育教育。)

    2.任务引导、实践操作

    师(引导学生打开学件网址http://192.168.100.100/xj/index.htm):学件可以帮助大家解决不能投票的问题。学件中任务一,提醒大家网页中缺少代码,请用记事本把view.asp打开,在<body>中加入“选出最美的微笑/dm.txt”中的代码,并保存,再试着在本机运行下载文件夹“选出最美的微笑”中index.htm。

    生:仍然看不到结果。

    (设计意图:放手给学生操作,给予学生自己动手的空间,同时设置实践操作有一定的难度,进一步激发学生的求知欲。任务一中“插入代码”的设计意在为后面提出静态网页和动态网页区别奠定基础。)

    师:我们一起来找找问题出在哪里,首先我们想一想刚才这位同学在本机运行的网站,除了自己能看到之外其他同学能不能看到?若想让其他同学在别的电脑上都能看到他修改的网页,该怎样做?请大家仔细观察一下学件的内容,回答我的问题。

    生(根据学件内容理解网页发布的概念:网站的发布就是把在本地硬盘中建好的网站文件通过网络传送到Web服务器上。):我们可以发布网站。

    师(引导学生):很好,那我们怎样进行网页的发布呢?

    生(根据学件理解网页发布的方式):可以进行IIS的设置,来完成网页的发布。

    师:请大家自学IIS的设置,并完成任务二,试着在本机发布投票网站,别名为wx,路径为E:/选出最美的微笑,登陆http://localhost/wx/index.htm,测试修改后的网页能否投票。查看下载文件夹“选出最美的微笑”中index文件的后缀是什么?试着将.htm改为.asp,再次登陆http://localhost/wx/index.asp,测试网页能否投票,看看我们能不能选择我们认为最美的微笑了。

    生(按照学件中图示帮助,认真完成任务二):终于可以投票了。

    (设计意图:教师引导,帮助学生发现问题,并设置任务二帮助学生通过自主学习解决问题,培养学生的探究学习的能力。任务二中最后“修改文件后缀,将.htm改为.asp”的设计不仅引导学生完成任务,更是为后面ASP网页的提出留下铺垫。)

    3.回顾任务、剖析要点

    师:请大家观察第一个任务中要求大家加入的“选出最美的微笑/dm.txt”中的代码,这段代码中含有 “vote”, 请大家在下载的文件夹中找一找,有没有vote,如果有,这是一个什么文件?这段代码与这个文件是什么关系?

    (设计意图:以学生任务驱动下修改的动态网页为对象,加以分析,意图是加深学生对本节课的重点和难点——动态网页的工作流程的理解。以数据库为切入点,将动态网页工作流程细化,弱化了难点,便于学生理解动态网页中代码的作用。)

    生:有,是 “vote.mdb”,是一个数据库文件。是这段代码访问了这个数据库文件。

    师(打开学件“投票工作流程”网页,配合学件中的图示分析投票网页的工作流程):大家看一看,你们是用哪台哪台电脑投票的,又是哪台电脑给你们投票的答案的?

    图1  投票工作流程

    生:我们用的是客户端,是服务器端给我们答案的。

    师:很好,我们投票的整个过程是这样的,大家点击投票,客户端(学生机)首先访问服务器,大家下载的网站在本机上发布,所以服务器就是你们自己的电脑,服务器根据程序代码来访问数据库(“vote”),找到数据库中原来的投票数,进行改写,数据库再向服务器给出新的投票数,服务器根据新的投票数生成新的网页返回给客户机。

    (设计意图:在此将图文结合,分析投票系统工作流程,通过对投票系统这个动态网页个例的剖析,使抽象的概念和实际中的个例相结合,有效突破了学生心理上的畏难情绪,再次加深了学生对网页中代码的印象,有效帮助学生在后面对动态网页流程的理解。)

    师:大家任务一中加的代码是图中1-4中的哪一步?

    生:未加代码的网页只有1、4两步,网页加的代码是2、3步。

    4.展示图例、归纳概念

    师(打开学件,展示静态网页和动态网页图例):我们未加代码的网页和加了代码的网页分别取个名字,叫做:静态网页、动态网页。请大家看看学件中的静态网页和动态网页的概念,并每两人一组讨论一下,静态网页和动态网页的区别。

    图2  静态网页

    图3  动态网页

    生(观察学件中静态网页和动态网页工作流程的图例,并结合动态网页工作的视频归纳小组讨论):动态网页能够根据不同的时间、不同的来访者而显示不同的内容,还可以根据用户的即时操作和即时请求,动态网页的内容发生相应的变化。动态网页中的程序代码最终要将动态网页转变为静态网页。

    师(配合视频文件播放动态网页工作流程):同学们分析得很好。静态网页,就是该网页文件里没有程序代码,只有HTML标记,这种网页文件的后缀为.htm或.html。静态网页一经制成,内容就不会再变化,不管何时何人访问,显示的都是一样的内容。而动态网页的网页文件不仅含有HTML标记,而且含有程序代码,这种网页的后缀一般根据不同的程序设计语言来定。

    (设计思路:紧密结合前面一个环节中对投票网页的分析,归纳出动态网页和静态网页的概念。并通过较为形象的图片和动画,采用小组讨论的探究式学习方式,使学生掌握动态网页和静态网页的区别。)

    5.由面到点、回归主题

    师:大家刚才对投票网页做了修改,请想一想,修改前后的网页分别是什么网页?

    生:修改之前是静态网页,修改之后是动态网页。

    师:很好,其实动态网页和静态网页在客户端看来,完全一样,唯一不同是文件的扩展名不同,我们请同学说说,静态网页和动态网页的后缀分别是什么?

    生(结合任务二修改网页后缀的操作思考):静态网页的后缀是“.htm”, 动态网页的后缀是“.asp”

    (设计意图:通过前后修改网页对比, 在强调动动态网页和静态网页区别的同时,也顺理成章地提出了本节课的另一重点——ASP网页。)

    师(结合学件图例):ASP,Active Server Pages,也称活动服务器页面,是微软公司开发的服务器端脚本环境,通过ASP,我们可以建立动态的、交互的、高效的服务器应用程序,如交互式的动态网页,包括使用HTML表单收集和处理信息,上传与下载。也就是说ASP是动态网页的一种。

    图4  ASP网页流程

    Asp网页的工作流程:

    (1)用户在客户端浏览器的地址栏中请求一个ASP 程序。

    (2)浏览器向ASP服务器发送这个请求,而HTML 是直接处理一个自身的HTML程序,不需要在服务器上运行。

    (3)ASP程序中的服务器端脚本开始运行。

    (4)ASP程序连续地执行这个请求文件中的所有语句,然后生成一个HTML文件。

    (设计意图:该环节看似和前面的动态网页的知识重复,但由于本节知识点较难理解,实际上通过对动态网页中的常见类型——ASP网页工作流程的知识点梳理梳理,强调本节课的重点,加深学生对ASP网页及动态网页的工作流程的理解。)

    6.提升总结、拓展延伸

    师:请大家两人为一小组,把投票网址改同小组的电脑IP,再次投票选出最美的微笑,试试可不可以。

    生(完成操作):可以。

    师(演示一位同学的操作):提问,客户端和服务器端分别是哪台计算机。

    生(回忆动态网页流程图):客户端是本机,服务器端是临桌同学的电脑。

    师:本节课同学们已经理解了动态网页中的asp网页的工作流程,但平时在浏览网站时还会发现还有一些其他后缀的网页,比如以“.php”或“.jsp”为后缀的网页,请大家回去后做一下调查,这些网页是不是动态网页,和我们今天讲的 ASP网页的有什么不同。

    最后,希望同学们在学习了今天的知识后,充分利用动态网页知识,让自己制作的网页真正地动起来。

    (设计意图:课程的结束首先设计了一个练习,通过协作小组进行对话、交流、合作学习,再次巩固本节课所学,使学生在学习中处于主体地位。然后总结课程,给出课后操作及思考,起到“课虽止,思未断”的效果,培养学生知识迁移的能力,进一步提高学生学习信息技术的主动性。)

    六、教学反思

    首先,本节课教学策略是在课前制作模拟的投票系统,课堂上以选出“奥运征集最美的微笑”活动导入整个课程,故意设置障碍,让学生实际动手操作,自主学习,根据学件寻找到谜底。学生动手的同时,教师紧紧围绕活动,引导学生从参与活动的过程中体验和获得动态网页和静态网页等知识要点,避免了将理论性较强生搬硬套给学生。从而进一步促使学生全面、深入地研究与认识ASP网页的应用。

    其次,本节课的教学方法是任务驱动法,教师在设置任务时留下小问题,为后面引导学生理解相关动态网页知识点埋下伏笔。教学环节中,投票工作流程和动态网页的工作流程,任务二中修改文件扩展名和ASP网页概念的提出都做到了首尾呼应,弱化了课程的难点,获得了较好的教学效果。另外课堂上多次展示图片和动画,在学生头脑中形成直观形象,增强了学生对知识点的理解。

    最后,总结一下本节课的不足之处,学生之间又存在个体差异,有部分学生思路不够开阔, 动手能力稍差,很难完成任务驱动中的所有任务,导致其产生挫折感, 积极性不高。在今后的教学中, 教师应该发现并重视这种差异,通过个别辅导和同学间互相帮助等方式关注每个学生,让每个学生都能在自己原有的基础上发展提高。

    参考文献

    [1] 陆黎明 《ASP+Access+Dreamweaver动态网页开发从入门到实践》 机械工业出版社,2007年

    [2] 施良方,崔允淳 《教学理论:课堂教学的原理、策略与研究》华东师范大学出版社,1999年

    附件:课件.rar

       选出最美的微笑(学件).rar

       教学反思.doc

  • 返回顶部】 【关闭】 【打印
  相关文章
  • 暂无相关文章
  • 网友评论
  • 登录 现在有条评论 查看全部评论
  • 标题:
  • 内容:
  • 验证码: