网页设计基础 HTML表单 第6章 HTML表单_教学设计.doc

博学谷——让IT教学更简单，让IT学习更有效 PAGE 12 PAGE 1 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称： HTML+CSS+JavaScript网页制作案例教程 授课年级： 2015年级 授课学期： 2015学年第二学期 教师姓名： 某某老师 201 年 月 日 课题名称 第6章 HTML表单 计划课时 6课时 内容分析 表单是HTML网页中的重要元素，利用表单可以使网页从单向的信息传递发展到与用户进行交互对话，并且能够实现网上注册、网上登录、网上交易等多种功能。本章将对表单相关标记以及CSS控制表单样式进行详细讲解。 教学目标 理解表单的构成，可以快速创建表单； 掌握表单相关标记，能够创建具有相应功能的表单控件； 掌握表单样式的控制，能够美化表单界面； 重点及措施 教学重点：认识表单、创建表单、input控件、textarea控件、select控件、CSS控制表单样式。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点： input控件、textarea控件、select控件、CSS控制表单样式。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （制作“用户登录界面”，讲解认识表单、创建表单） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第五章“列表与超链接”的相关知识。 通过上一章的学习，我们知道定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使超链接在点击前、点击后和鼠标悬停时的样式不同。那么，超链接标记<a>伪类有哪4种状态呢？ 答案： 超链接标记<a>伪类的4种状态，具体如下表所示： 超链接标记<a>的伪类 含义 a:link{CSS样式规则; } 未访问时超链接的状态 a:visited{CSS样式规则; } 访问后超链接的状态 a:hover{CSS样式规则; } 鼠标经过、悬停时超链接的状态 a: active{CSS样式规则; } 鼠标点击不动时超链接的状态 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 浏览网页的时候，我们经常需要在表单中的文本框中填写用户名、密码等。其实，HTML表单可以搜集不同类型的用户输入。那么，请同学们讨论下：什么是“表单”，以及表单都有哪些作用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 对于“表单”大家并不陌生，它们在互联网上随处可见，例如注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单相关的标记定义的。简单地说，“表单”是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。 案例描述 一个良好的用户登录界面不仅能够吸引客户，而且可以带来良好的用户体验。用户登录界面通常包括用户名、用户密码及验证码等功能模块。本节将学习表单的相关知识，并通过创建表单来制作一个“用户登录界面”。 知识点讲解 总结知识点 教师和学生一起总结在案例中涉及到的知识点，主要包括“认识表单、创建表单”等。 讲解“认识表单” （1）、教师通过PPT对网页中常见的表单进行展示。 （2）、教师通过PPT对表单的概念及构成进行讲解，并以网页中常见表单的构成元素进行举例。 （3）、教师展示PPT，对构成表单的表单控件、提示信息和表单域进行具体讲解。 （4）、教师对如何创建表单进行讲解，并进行代码演示。 （5）、教师对常用的表单控件进行简单介绍，并进行列表说明。 （6）、学生练习，教师巡视，对疑难问题进行解答。 讲解“创建表单” （1）、教师对“创建表单的基本语法格式”进行讲解，并举例说明。 （2）、教师对“创建表单”的action、method、name等常用属性进行讲解，并通过代码进行演示。 （3）、教师指出“创建表单”时需要注意的问题，并给与解答。 （4）、学生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析 分析“用户登录界面”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 案例实现 教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。 说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结 重点：创建表单。 答疑 教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解