《理解动态HTML》教学设计（二）.docVIP

《理解动态HTML》教学设计（二） 　　● 教材分析 　　《理解动态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方式的比较，依然选择有代表性的答案，请学生描述自己的理解，教师加以点评和归纳。 　　学生观察所有回答的页面，查看别的学生的答案，并思考其他人的回答是否正确。对发言的学生的答案进行补充。 　　设计意图：对于本节课理论知识部分的内容，采用学生自主学习的方式，有利于学生根据自身情况掌握学习进度，避免了教师对于较