网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务8 设计表单.docVIP

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院 第 PAGE 4 页 共 NUMPAGES 4 页 《网页设计与制作》课程教学单元设计 单元8 设计表单 授课教师：网页设计与制作 授课班级: 学时：6 教学条件 实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络 教学素材 教材、课件、实训项目单、授课录像、案例库、教学网站等 教学目标设计 知识目标： （1）了解表单基本概念； （2）掌握表单的组成； （3）掌握新增表单input元素的使用方法； （4）掌握HTML5表单元素属性的使用方法； （5）掌握新增的表单元素。 能力目标： （1）能结合根据用户需要选择恰当的表单元素； （2）能根据表单页面效果，设计表单，编写CSS表单的样式；。 任务描述 本任务就是在实现智慧校园门户登录页面的布局与表单设计。 教学内容 （1）表单基本概念； （2）表单的组成； （3）新增表单input元素的使用方法； （4）HTML5表单元素属性的使用方法；； （5）掌握新增的表单元素。 重点： （1）表单基本概念； （2）表单的组成； （3）新增表单input元素的使用方法； （4）HTML5表单元素属性的使用方法； （5）掌握新增的表单元素。 难点： （1）HTML5表单元素属性的使用方法； （2）掌握新增的表单元素。 任务分析与实现 （1）任务分析； （2）任务实现代码。  教学过程设计 8.1 表单与新增的表单元素（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务描述 本任务就是在实现智慧校园门户登录页面的布局与表单设计。 讲授法 多媒体 教师：分析任务 学生：信息交流 知识讲授 讲解：表单的定义与基本组成 表单标签form 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践表单标签form的调用方式 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 表单域相关元素 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践表单域相关元素。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解新增的input输入类型：email、 url域、 number域、 range域、日期数据Date Pickers、 search域、 color域、 tel域 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践新增的input输入类型 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 （1）表单基本概念； （2）表单的组成； （3）新增表单input元素的使用方法； 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 通过网页与手机终端认识不同的表单元素。 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 8.2 form新增属性与新增的input属性（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 知识讲授 讲解 form新增属性： autocomplete属性 novalidate属性 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践 form新增属性。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解新增的input属性： 新增的input属性、 multiple属性、 placeholder属性、 required属性 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行实践新增的input属性 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解新增的表单元素： datalist元素、 keygen元素、 output元素 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行实践新增的表单元素 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 （1）form新增属性 （2）新增的表单元素 （3）新增的表单元素 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 综合实例：用户注册页面的设计 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 8.3 任务实施：智慧校园信息门户的登录页表单设计（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务描述 本任务是采用HTML+CSS的布局方式，结合表单设计的方法设计完成智慧校园信息门户的登录页面。 任务驱动教学法 多媒体 教师：分析任务 学生：信息交流 任务分析 根据学习的HTML+CSS的布局