《理解动态HTML》教学设计（二）
作者：马畅
来源：《中国信息技术教育》2013年第01期
        ● 教材分析
        《理解动态HTML》是教育科学出版社出版的高二选修《网络技术应用》第五章的第二小节的第一课时，本课时是在上一节探索过动态HTML效果的基础上，理解、掌握动态HTML的工作过程，主要是客户端脚本语言（JavaScript）的理解和应用。学生对使用JavaScript实现的动态HTML效果都很感兴趣，但是JavaScript的学习要经历一个循序渐进的过程，本节课是理解动态HTML的第一课，是初步认识和体验制作JavaScript的起始篇，因此，学好本课将为后续深入学习动态HTML的其他部分知识打下良好的基础。
        ● 学情分析
        本节课的教学对象是高二学生。在学习本课之前，他们已经学习了用FrontPage制作网页的基本方法，能够制作简单的网页，会使用记事本查看网页的源代码，了解基本的HTML标记
语言。因此，在学习粘贴JavaScript代码前，教师先回顾HTML的基本结构，让学生对HTML有一个基本的认识。
        ● 教学目标
        知识与技能目标：了解动态HTML的三大核心技术；了解什么是客户端脚本语言；能够掌握两种在网页中加入JavaScript代码的方法。
        过程与方法目标：能够出一段HTML中的JavaScript语言；能够修改和添加HTML中的JavaScript语句。
        情感态度与价值观目标：培养自主探究的意识；能够体验到JavaScript的制作乐趣；通过自主学习网站自主学习和探究学习，培养发现问题、解决问题的能力。
        ● 教学重、难点
        重点：了解什么是客户端脚本语言；掌握加入JavaScript代码的方法。
        难点：修改JavaScript代码。
        ● 教学过程
        1.引入新课，技术体验
        （1）学生在上课前打开浏览器用自己的姓名学号登录，开始玩网页上的闯关小游戏。网页闯关游戏需要查看网页的源文件，在代码中查下一个页面的地址提示。教师观察学生玩网页闯关游戏，开始上课后停止游戏，并选择其中一关网页，解释过关的方法：查看网页的源代码到下一个页面的网址，同时复习回顾HTML部分的内容。
        （2）教师打开一个样例网页（如图1），这个样例网页也是课前学生玩的网页游戏中的页面，页面中除了有学生熟悉的HTML代码以外，还加入了一些学生不熟悉的代码，正是这些代码使网页有了一些特殊的功能，能够与浏览者有所交互，从而引出本节课学习的主题：理解动态HTML，这些代码正是动态HTML技术代表之一的JavaScript代码。
        学生玩过刚才网页上简单的游戏，已对这几个网页的功能有所了解，听教师解释这些网页能具有一些小功能的原因，并对学习内容产生兴趣。
        设计意图：通过展示几个生动有趣并具有一定交互性的网页，激发学生兴趣，为后面的简单网页制作源代码
学习做铺垫。
        2.探究与发现
        教师控制课堂导学网站展开活动二，参照打开的页面说明JavaScript是组成动态HTML三大核心技术之一，另外还有两种：DOM文档对象模型以及CSS样式表，本节课不做讨论，并说明本节课学习的重点是JavaScript客户端脚本语言。
        学生听教师讲解动态HTML的相关知识，初步了解三大核心技术各有什么作用。
        设计意图：介绍动态HTML的核心技术构成，使学生对整体的知识架构有所印象，便于明了今天所学的知识在整体知识结构中的地位和作用。
        3.自主探究学习
        （1）教师要求学生打开自主学习页面中的内容，包括“客户端脚本语言”、“什么是JavaScript”、“嵌入使用JavaScript”、“调用JavaScript文件”，并完成页面下方的三组练习：“概念辨析”、“脚本看”、“有何大不同”，将自己的答案写进输入框内提交后，可以看到全班学生所答的内容，以便交流。教师可以点击“晒晒大家的回答”查看全部学生的答案。
        学生自主学习网页中关于客户端脚本语言、JavaScript等相关知识的说明，理解后回答页面下方问题。点击提交按钮将答案提交至服务器。
        （2）教师汇总学生答案并点评，引导全班学生查看所有的回答，对于练习一的选择题，选取难度较大学生错误较多的题目进行讲解，加深学生的概念；练习二的脚本，选取有代表性的学生答案进行点评，鼓励学生解释说明自己的答案，教师再提炼学生的回答以加深印象；练习三是两种使用JavaScript方式的比较，依然选择有代表性的答案，请学生描述自己的理解，教师加以点评和归纳。
        学生观察所有回答的页面，查看别的学生的答案，并思考其他人的回答是否正确。对发言的学生的答案进行补充。
        设计意图：对于本节课理论知识部分的内容，采用学生自主学习的方式，有利于学生根据自身情况掌握学习进度，避免了教师对于较枯燥的理论知识进行过多讲解。自学后有相应的练习题检验学生的自学成果，保证教师对学生的自学情况有所掌控。
        4.总结提炼重、难点
        教师帮助学生提炼知识点（如图2），对比嵌入式使用JavaScript和调用使用JavaScript文件的区别，规范两种语法的写法以及各自的优点，加深学生的印象。
        设计意图：梳理知识，为后面的综合练习提供理论支撑和技术支持。
        5.应用与提升
        教师将课堂导学网站展开至活动三，布置学生完成任务，任务内容为：从导学网站下载网页文件，参考完成稿，对所给的网页文件添加JavaScript代码，使其具备鼠标跟随效果、显示制作人、时间效果，并尝试修改JavaScript脚本中鼠标跟随文字的内容等。
        该任务中鼠标跟随效果使用嵌入JavaScript代码方式，学生查看网页的源文件，到JavaScript代码部分，修改代码中的鼠标跟随文字内容。显示作者和时间效果使用的是外部文件调用方式，学生须到外部文件位置，用记事本打开该JS文件，修改其中的内容。
        6.汇总与展示
        教师点击“作品欣赏”，可以点击每个学生的名字打开该学生所修改的网页作品，点评说
明学生做得好的地方以及不足之处。学生跟随教师观看其他学生的作品，互相交流制作、修改网页的心得体会。
        7.课堂小结、知识回顾
        回顾本节课所学主要知识，鼓励表扬学生所做成果，激发学生继续探索网页制作的兴趣。
        ● 教学反思
        本节课是理解动态HTML的第一课时，教材中提到动态HTML技术的三个方面、客户端脚本语言的概念以及什么是JavaScript等几个方面的内容。考虑到学生的接受能力和网页制作应用中的实际情况，本课时将JavaScript脚本语言作为重点知识讲解，其他方面的知识一带而过。
        在授课过程中，考虑到概念的讲解相对枯燥，较难引起学生的兴趣，考虑再三后采用了学生自主学习的方式完成。教师通过导学网站控制课堂的进程，使学生在教师的控制下循序渐进地学习。为了检验学生自学的成果，教师设计了三种不同类型的练习，分别对概念、认
识代码和两种引用方式的区分加以巩固。通过教师对所有学生回答的点评和交流使学生加深印象，最后再将实际对网页的操作作为课堂练习。练习中也对任务难度进行了分层，从修改代码中的汉字内容到修改外部引用文件的内容，再到学生自己写出JavaScript代码实现弹出警告窗口，这是由易到难的过程，适合不同掌握水平的学生选择完成。经过实际的教学，发现学生在这样的教学方式下能够较好地掌握本节课的重、难点内容。
        同时，在实际的教学后也发现，正是由于教师基本控制了整堂课的进度和节奏，使得课堂的灵活性受到局限，没能满足少部分接受特别快的学生对更深层次知识的探索。另外，由于课堂练习的操作题所用素材是前几节网页制作课上学生自己动手制作的网页作品，较为简单、页面数量也较少，这就对于外部引用JS文件实现网页动态效果的主要优势“一处修改，多处联动、节省大量时间”难以得到体会。若能选取页面更多的实例作为修改素材，可能会使学生更好地理解外部引用文件的这一大优势。
        点 评
        夏老师和马老师在对本章教材深入研究与整体把握的基础上，结合学生的实际情况，利用教学网站和学生自主学习网站，通过组织学生玩游戏、开展闯关竞赛等活动，由浅入深，
让学生直观地了解动态HTML的三大核心技术，知道客户端脚本的概念。他们采取让学生仔细观察、慎密思考、模仿练习、巩固提升等措施，依次掌握如何在网页中出JavaSript脚本、嵌入JavaSript脚本和调用JavaSript脚本文件的方法，了解客户端脚本在DHTML中的作用，从而达成教学目标。总结起来，这两节课主要特点如下。
        1.创设学习情境，激趣导入，唤起学生强烈的求知欲。动态HTML中脚本语言的内容相对比较枯燥，学生不感兴趣，但其效果是有趣的。两位教师所上的课的导入环节都十分精彩，开始就让学生玩游戏、观察有趣的实例，让学生直观地了解动态HTML的魅力，从而激发学生学习本节内容的浓厚兴趣。
        2.恰当处理教材，利用教学网站和学习网站提高课堂教学实效。两位教师对教材中的术语和概念进行了深入的研究，某些知识在教材的基础上有了更进一步的完善与拓展，同时精心选择了学生感兴趣的、多层次、多梯度的JavaSript特效等，利用教学网站和学习网站让学生模仿练习和巩固练习，通过自主探究和分组协作学习新知，大大提高了学习效率。
        3.关注课前预设与学生学习过程，加强对学生的巡视指导。两位教师在课前的教学设计中都充分分析了学生可能出现的问题，并提供处理预案。在课堂教学中，能关注学生的学习
过程，对学生在学习中出现的错误不回避，而是及时地对学生进行有效的指导。
        4.注重对学生交流与评价的指导，评价方式多样化。在作品交流与展示活动中，教师对展示评价的流程作了具体的要求，让学生在展示与评价时有章可循，评价的方式多样化，有利于提高学习评价的有效性。
        但是两位教师所上的课仍然有需要改进的地方，我建议着重改进以下方面。（1）教学目标应更具体、明确、可行、可评测，行为动词选择应更科学，避免与课程目标相混淆。应切实抓住教学重点、难点，重、难点描述时不应过多。（2）教学中注意对所学内容的对比、分析、梳理与归纳总结，培养学生养成良好的学习习惯，将小组协作学习更要落到实处，掌握有效的学习方法，提高学习效率。例如，在整堂课结束前，应留出时间引导学生对所学知识进行梳理、归纳、总结、感悟与提升，让学生将所学知识结构化，并设置新的学习悬念，为下节课学习做好铺垫。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。