第7章 表单的应用_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 12 PAGE 2 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第7章 HTML表单 计划课时 8课时 内容分析 表单是HTML网页中的重要元素，它通过收集来自用户的信息，并将信息发送给服务器端程序处理，来实现网上注册，网上登录，网上交易等多种功能。本章将对表单控件和属性以及如何使用CSS控制表单样式进行详细讲解。 教学目标 理解表单的构成，可以快速创建表单； 掌握表单相关标记，能够创建具有相应功能的表单控件； 掌握表单样式的控制，能够美化表单界面； 重点及措施 教学重点：认识表单、表单元素、input元素及属性、其他表单元素、CSS控制表单样式。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：input元素及属性、keygen元素、select控件、CSS控制表单样式。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解表单的构成、创建表单、表单属性） 说明： 将7.1~7.2小节作为一个课时进行讲解。 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第六章“浮动与定位”的相关知识。 1、在上节课中，我们学习了三种清除浮动的方法。其中，使用after伪对象可以清除浮动，但是该方法具有一定的局限性。请大家回顾上节课的知识，分析after伪对象清除浮动的局限性及需要注意哪些事项？ 答案： 使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点： （1）必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。 （2）必须在伪对象中设置content属性，属性值可以为空，如“content: ;”。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 浏览网页的时候，我们经常需要在表单中的文本框中填写用户名、密码等。其实，HTML表单可以搜集不同类型的用户输入。那么，请同学们讨论下：什么是“表单”，以及表单都有哪些作用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 对于“表单”大家并不陌生，它们在互联网上随处可见，例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定义的。简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。 知识点讲解 讲解“表单的构成” （1）、教师通过PPT对网页中常见的表单进行展示。 （2）、教师通过PPT对表单的概念及构成进行讲解，并以网页中常见表单的构成元素进行举例。 （3）、教师展示PPT，对构成表单的表单控件、提示信息和表单域进行具体讲解。 （4）、教师对如何创建表单进行讲解，并进行代码演示。 （5）、教师对常用的表单控件进行简单介绍，并进行列表说明。 （6）、学生练习，教师巡视，对疑难问题进行解答。 讲解“创建表单” （1）、教师对“创建表单的基本语法格式”进行讲解，并举例说明。 （2）、教师指出“创建表单”时需要注意的问题，并给与解答。 （3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“表单属性” （1）、教师和学生互动：在HTML5中，表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。下面将对form标记的相关属性进行讲解。 （2）、教师指出表单属性包括action属性、method属性 、name属性、autocomplete属性及novalidate属性。 （3）、教师分别对action属性、method属性 、name属性、autocomplete属性及novalidate属性及其属性值进行讲解，并使用代码进行演示。 （4）、教师指出使用“表单属性”时需要注意的问题，并给与解答。 （5）、学生练习，教师巡视，对疑难问题进行解答。 阶段小结 小结 重点：创建表单、表单属性。 答疑 教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点 学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生