认识动态网页教材分析及案例

5.1认识动态网页教材分析及案例推荐公布：周霞时间：/12/511:55:54起源：宁夏教研网点击：970讨论：05.1认识动态网页一、教学目标本节主要引导学生发觉并初步探索动态网页概念和常见实现方法，本节分为两个层次和步骤实现：首先经过对现成动态网页效果观赏，激发学生学习兴趣与求知欲，让学生发觉动态网页和静态网页不一样和优势；然后经过对比网页中代码和教师提供代码来进行探究学习。表5－1

教学目标三维描述维度行为目标知识与技能（1）能简单描述动态HTML和动态网页概念和基本含义（2）能举例说出动态网页和静态网页不一样（3）能找到和分辨动态网页代码和HTML标识区分过程与方法（1）能着手复制使用老师提供现成代码（2）能对一些简单代码进行分析，而且能够利用工具或者网络寻找一些动态网页效果代码情感态度与价值观（1）能从情感上激发学生学习动态网页热情（2）能够主动展开探索二、内容描述（一）动态HTML1.动态HTML概念动态HTML是一组技术集合，动态HTML能独立在客户端（浏览者自己计算机上）处理页面元素，改变其版面、内容和位置，并把结果不停提供给网页浏览者，这些操作都是在客户端完成，不需要向服务器请求让服务器来处理。这意味着动态HTMLWeb页面里面含有程序，会对用户操作有响应，使其产生动态效果，从而使网页表示能力愈加丰富，即动态HTML能自动改变，是丰富页面主要伎俩。我们惯用来实现动态HTML技术有客户端标识语言JScript和VBScript、DocumentObjectModel(简称DOM，文件目标模块)，Layers和CascadingStyleSheets(CSS样式表)等。2.动态HTML常见实现方法要实现动态HTML，能够利用很多现有网页制作工具和专业动态效果代码生成软件进行设计，比如FrontPage中工具栏、SothinkTreeMenu等，这种方法优势是实现起来比较简单，对制作者计算机语言知识要求不高。也能够使用网络中下载JavaScript和VBScript编写现成脚原来实现一定动态HTML效果。（二）动态网页1.动态网页技术概念主要是指服务器端脚本程序，服务器端脚本程序解释执行是由服务器端WEB软件完成，它们只有在接收到用户访问请求后才在服务器端生成并传输到用户浏览器中。它主要是指采取CGI（公共网关接口，CommonGatewayInterface）、ASP（动态服务器页面，ActiveserverPages）、JSP（Java服务器页面，JavaServerPages）和PHP（超级文本预处理语言，HypertextPre-Processor）等技术动态生成页面。动态网页技术通常以数据库技术为基础。2．动态网页和静态网页区分动态网页是与静态网页相对应，这里说动态网页，与网页上各种动画、滚动字幕等视觉上“动态效果”没有直接关系，动态网页也能够是纯文字内容，也能够是包含各种动画内容，这些只是网页详细内容表现形式，不论网页是否具备动态效果，采取动态网站技术生成网页都称为动态网页。从网站浏览者角度来看，不论是动态网页还是静态网页，都能够展示基本文字和图片信息，但从网站开发、管理、维护角度来看就有很大差异。二者工作原理区分和各自特点详见表5-2

动态网页和静态网页工作原理图。表5-2

动态网页和静态网页工作原理图。静态网页工作原理动态网页工作原理表5-3

静态网页和动态网页特点静态网页特点动态网页特点和分辨规则静态网页特点简明归纳以下：（1）静态网页每个网页都有一个固定URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；（2）网页内容一经公布到网站服务器上，不论是否有用户访问，每个静态网页内容都是保留在网站服务器上，也就是说，静态网页是实实在在保留在服务器上文件，每个网页都是一个独立文件；（3）静态网页内容相对稳定，所以轻易被搜索引擎检索；（4）静态网页没有数据库支持，在网站制作和维护方面工作量较大，所以当网站信息量很大时完全依靠静态网页制作方式比较困难；（5）静态网页交互性交差，在功效方面有较大限制。

动态网页通常特点简明归纳以下：（1）动态网页以数据库技术为基础，能够大大降低网站维护工作量；（2）采取动态网页技术网站能够实现更多功效，如用户注册、用户登录、在线调查、用户管理、订单管理等等；（3）动态网页实际上并不是独立存在于服务器上网页文件，只有当用户请求时服务器才返回一个完整网页；总来说，动态页面概念制订了以下三条规则：（1）

“交互性”

即网页会依照用户要求和选择而动态改变和响应，将浏览器作为客户端界面，这将是今后WEB发展大事所趋。（2）

“自动更新”

即无须手动地更新HTML文档，便会自动生成新页面，能够大大节约工作量。（3）

“因时因访问者而变”，即当不一样时间、拥有

不一样权限

访问者访问同一网址时会产生不一样页面，使内部资料不致泄漏。

三、重点难点本节重点在于怎样经过有趣实例率领学生进入到动态网页世界当中，能够让学生产生主动探索未知领域兴趣和主动性，尤其是在面对相对复杂代码时不产生畏难心理，所以在控制难度和学习效果取舍上要教师花费更多心力，怎样设计适合大部分学生学习课例是本节最主要部分。本节难点在于设计一个非常适合引入动态网页教学范例，但又不能够让学生感到非常困难和乏味，太难或者太简单都会使这个阶段教学失败。能够借助范例，让学生在对比中进入学习，然后逐步展开，达成寻找发觉——模仿粘贴制作——简单修改不一样层次，这么能够让学生体验到动态网页优势。四、案例推介

让网页动起来——动态HTML\o"name=_ftnref1"[1]骆丽璇广东省佛山市南海区桂城中学一、案例背景信息1.模块、章节：《网络技术应用》（选修3）第五章第一节2.教材版本：广东教育出版社3.年级：高二二、教学设计（一）教学内容分析本课内容主要是动态HTML中JavaScript脚本语言应用。JavaScript代码能够令网页中出现动态效果，这是比较受学生欢迎学习内容。对于普通高中学生，仅需要了解怎样在网页中适当位置加入JavaScript代码即可，无需深入了解JavaScript代码组成以及原理。所以我将本课重点定为：1、掌握加入JavaScript代码方法2、能够在指定位置加入JavaScript代码。（二）教学对象分析

本课教学对象是本校高二学生。在学习本课之前，他们已经学习了用Dreamweaver制作网页基本方法，能够制作简单网页，但不熟悉HTML标识语言。所以在学习粘贴JavaScript代码前，应先讲解HTML基本结构，让学生对HTML有一个基本认识。（三）教学目标分析1.知识与技能掌握：（1）在HTML中加入JavaScript代码方法；（2）能够在指定位置加入JavaScript代码；（3）修改JavaScript代码汉字字属性方法。

综合应用：能够依照网页内容、格调选择适当网页特效。2.过程与方法（1）经过小组合作探究，提升学生自主学习、探究学习及协作学习能力；（2）培养进行学习反思学习习惯。3.情感态度与价值观（1）培养学生与他人合作与交流人际关系；（2）培养学生信息道德素养。（四）教学重点：1.掌握加入JavaScript代码方法；2.能够在指定位置加入JavaScript代码。（五）教学难点：1.修改JavaScript代码汉字字属性方法；2.能够在指定位置加入JavaScript代码。（六）教学策略设计本课是一节经典技术操作教学课，所以充分操作练习是必不可少。怎样让学生能够快速掌握技巧，又不至于因练习难度太大而产生畏难情绪呢？我选择将练习任务细化，安排两个大任务，大任务中又包含分层任务。经过难度逐层深入练习任务，引导学生在“做”中发觉知识、掌握知识。从完成指定代码到自行选择代码，由“点”到“面”引导学生完成知识迁移。1.范例教学：为了让学生尽快掌握在HTML中加入JavaScript代码方法，我首先采取范例教学策略。本课以一个简单鼠标跟随文字特效制作为引入例子，让学生了解制作JavaScript特效基本方法，并要求学生完成一样特效制作。务求从简单任务入手，让学生从成功体验中感受到JavaScript特效有趣之处，激发学生继续深入学习欲望。2.任务驱动、探究合作：为了处理本课教学重、难点，同时培养学生探究学习、合作学习能力，本课安排了两个探究任务。任务一探究任务要求学生以小组为单位共同探究修改JavaScript代码汉字字属性方法。这是本课重、难点，我有针对性地指导学生展开合作探究，学生经过对比、讨论很快能找出方法。任务二要求学生自行选择适合难度代码进行练习。经过明确任务要求以及不一样难度练习资源，让学生能够深入巩固本课新学操作、完成知识迁移，能够依照灵活利用不一样效果JavaScript代码。因为能够选择而且不一样难度练习，也使各个能力层次学生都能有所提升。

三、教学过程描述

（一）教与学过程描述教学步骤教师活动学生活动对学生学习过程观察与考查信息技术应用

创设情境、引入课题(1分钟)1.展示两张网页，要求学生观察对比，找出不一样。2.分析第二张网页，因为其页面有网页特效所以令页面生色不少。引出学习内容：动态HTML。观察两张页面，找出第二张页面到底有什么特效，明确本课学习目标。学生普遍能发觉第二张页面不一样，但未能完全找出全部特效，所以我需关键点出三种特效，为下面知识讲解做铺垫。展示两种网页；用幻灯片展示本课课题

知识铺垫、范例演示（5分钟）1.指出实现动态HTML方法之一：加入JavaScript代码2.解释什么是JavaScript.3.HTML基本结构：展示教学范例网页源文件，分析其HTML标识语言组成。4.演示在网页中加入鼠标跟随文字特效操作过程，并板书总结操作步骤。

结合教学范例，观察HTML基本结构。

观看教师操作演示，了解其详细操作步骤。

用幻灯片展示知识点；

在教学论坛提供幻灯片内容供学生参考；

任务探究

任务探究、合作学习（8分钟）1.提出问题：怎样修改鼠标跟随文字大小、颜色等等相关属性?布置任务一：制作一段鼠标跟随文字效果。（见附件1）2.指导学生完成练习、开展小组学习，引导学生间进行讨论，发觉问题、总结方法。

完成任务一，相邻两位学生为一个学习小组，共同探究在JavaScript代码修改文字属性方法。各自完成不一样修改操作，讨论找出异同，总结方法。学生基本上能够找到修改跟随文字方法，但对怎样修改文字颜色感到迷惑，主要是不知道详细某种颜色应该用哪个数字表示。部分学生能够联络之前所学，找到颜色代码。学生之间有讨论，但不善于总结方法。在教学论坛中提供练习资源下载；用幻灯片展示任务一详细要求学习反馈、练习点评（3分钟）1.邀请其中一个学习小组演示修改文字相关属性操作，引导两位组员总结出修改JavaScript代码方法。2.总结在JavaScript代码修改文字属性方法。

1、同组两位同学合作回答教师问题。

2、观察同学操作演示，听取同学学习小结。负责回答下列问题两位学生是做得比较快两位，能够明确告诉其余同学怎样找到颜色代码，学生们对修改颜色及字体大小这部分比较留心。这是他们普遍感到迷惑之处

知识延伸、分层练习（10分钟）1.布置任务二：学习在网页中加入其余网页特效方法（见附件1）。2.指导学生完成练习。

依照自己水平选择适当难度代码进行练习。再次修改JavaScript代码，找出修改JavaScript代码技巧。大部分学生选择教师提供代码进行练习。许多学生在添加时钟特效时候出现错误，主要是将代码直接粘贴到页面上，或者没有找到指定位置在教学论坛中提供JavaScript代码下载网站链接学习反馈、练习点评（5分钟）1.邀请学生展示自己结果，并介绍操作方法，将学习结果与同学们共同分享。主要介绍两方面：(1)

怎样找到指定位置加入JavaScript代码(2)

如有学生自行在网上找到其余代码，则让该生讲解怎样加入该段代码2.小结练习二：指出学生在练习中轻易出现错误，再次强调怎样找到指定位置加入JavaScript代码。

与同学共享自己学习结果，介绍操作方法。

观察他人作品，学习操作方法。

课堂总结、情感教育（3分钟）

1.回顾本课主要知识点。

2.情感教育：展示毛泽东纪念馆网站，让学生思索在该网站能够加入一些活泼可爱鼠标跟随代码？

指出加入JavaScript代码注意事项：1、依照网站性质，选择适合JavaScript代码2、切忌添加篡改他人浏览器恶意代码

思索教师提出问题：依照网页性质选择恰当代码

学生普遍反感对加恶意代码行为，但没有明确必定应该依照网站性质选择适当代码。

学习反思、结果共享（5分钟）

提出学习反思要求，指导学生完成学习反思及教学调查学生完成教学调查，并回复该贴简单回顾本课学习感受，及粘贴其余精彩JavaScript代码40％学生反应对“找到指定位置粘贴代码”感到困难；

大部分学生回复表示对本课很感兴趣，希望深入学习。约有20位学生粘贴了其余精彩JavaScript代码

在教学论坛中另外公布一张帖子用于学习情况反馈投票，及学生回帖，共享学习结果（二）关键步骤提炼1.引入课题：好开始是成功二分之一，为了能够激发学生学习欲望，我设计了两张内容、排版、美工设计完全一样两张网页，不一样在于第二张网页加了三处网页特效。我首先要求学生观察这两张页面找出不一样，这么很快就能让学生感受到动态HTML

精彩之处，同时也让学生对怎样实现动态HTML感到好奇。2.学习评价实现：本课学习评价主要经过两种方式实现：1、学生练习结果展示。每次任务后，我均安排完成得比很好学生展示他练习结果，同时介绍操作经验。这么，不但能让该学生完成自我学习小结及评价，同时也能让其余学生经过比较找出差距，对自己练习过程、练习结果做一次自我评价。2、经过教学论坛进行教学调查。课前我在教学论坛中发表用于进行教学调查及学习反思帖子，学生能够经过投票方式选出自己还未掌握知识点。经过教学调查，能够让学生对本课学习效果进行一次评价。3、学习反思实现：有效学习反思有利于学生梳理知识体系，为此我在下课前预留5分钟让学生经过回复帖子进行学习反思，主要做三项内容：1、教学调查；2、写出本课学习感受；3、粘贴出精彩JavaScript代码。在帖子中，我明确告诉学生能够从哪些方面思索本课学习感受，这么能够科学地引导学生回顾本课学习过程、评价自己学习行为。40％学生反应对“找到指定位置粘贴代码”感到困难；大部分学生回复表示对本课很感兴趣，希望深入学习。约有20位学生粘贴了其余精彩JavaScript代码。四、教学反思

从整体来说，本课教学目标均能按预期效果实现。我认为本课最大两个两点在于任务设置以及学习反思实现。回顾整个教学过程以及分析教学调查情况，我感觉在练习点评以及个别知识点讲授方面仍需改进。1.任务细化、难度逐层深入、由“点”到“面”。让学生从简单任务入手，使学生感受成功，让成功感促使学生继续学习。用任务驱动学生进行探究，将问题留给学习小组，让学生在“做”中发觉方法，用实践经验帮助学生了解知识、消化知识。将练习资源划分难度，并安排不一样层次任务，让不一样层次学生均能得到提升。2.加入学习反思步骤。下课前预留5分钟，让学生完成教学调查，方便教师及时搜集学生学习情况。同时指导学生进行学习反思，帮助学生梳理本课知识体系，同时方便学生之间共享学习结果。3.练习点评应加入错误操作分析。在教学过程中我发觉有不少学生在粘贴代码时出现重复粘贴或者粘贴到错误位置等等错误操作，这些都是我在课前预计到。练习点评时候我也有重点提及这方面问题，但我仅仅是罗列事实、分析原因，结果部分学生无法了解。假如在分析原因前，能够先展示某种错误操作后详细表现，再来分析原因找出处理方法，这么学生更轻易接收和了解。由此我认为在类似技术操作教学课中，错误操作点评绝不能蜻蜓点水似地带过，帮助学生分析错误找出处理方法与传授正确操作一样主要。这能够一定程度上让学生少走弯路，提升学习效率。4.经过分析教学调查结果，我发觉有40％学生未能掌握“找到指定位置粘贴代码”这个知识点。这并不是本课重点，因为要解释清楚为何要在一些指定位置粘贴JavaScript代码，需要包括很多JavaScript脚本语言知识。所以我认为下一节课能够从“在哪里粘贴JavaScript代码”出发，适当讲解JavaScript脚本语言基础知识，这么既能处理本课教学遗留问题，又能让学生了解更多网页编程内容，激发学生学习欲望，有利于学生利用课余时间主动学习。

附录一：本课练习任务任务一：制作一段鼠标跟随文字效果

1、基本任务：将鼠标跟随效果源代码复制到<head></head>之间。

2、探究任务：以相邻两位同学为一个小组，共同探究修改JavaScript代码方法，并相互交流。

（1）同学甲：找出修改跟随文字方法

（2）同学乙：找出修改跟随文字大小、颜色方法。

（3）比较两个操作异同之处，找出修改JavaScript代码基本方法。

任务二：学习在网页中加入其余网页特效方法（1）基本任务：在练习资源中选择一个适当难度特效加入到网页中，并依照实际需要修改代码

进入时提醒信息

难度：★

浏览器状态栏里欢迎语

难度：★

定义时钟

难度：★★

鼠标跟随飘动文字

难度：★★★（2）提升任务：登陆相关网站选择你喜欢特效加入到网页中，并依照实际需要修改代码附录二：本课学习反思及教学调查1.回顾本课所学知识点，选出你认为还未掌握部分（多项选择）。n

Html基本结构n

在HTML中粘贴JavaScript代码方法n

修改JavaScript代码中显示文字大小、颜色、字体n

找到指定位置粘贴代码n

完全掌握2.跟贴回复你这节课学习感受，你从下面几个问题来考虑。（1）本课对我今后制作网页是否有帮助？（2）在学习过程中，我最感兴趣是什么？（3）我想希望继续学习关于动态HTML哪方面内容？3.将你以为精彩JavaScript代码粘贴到帖子中，与其余同学一起分享。学生反馈情况：【案例点评】评委1点评：教学活动具备趣味性，教学过程循序渐进，教学内容具备一定难度需要学生有一定知识基础。评委2点评：导入能经过对比，激发学生兴趣，教学任务设计有层次，学习评价设计是其亮点，教学反思也较到位。评委3点评：案