网页基础与制作 10

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第6章为网页添加表格和表单计划课时9课时教学引入表格与表单是HTML网页中的重要标签。利用表格可以对网页进行排版，使网页信息有条理地显示出来；而表单的出现则使网页从单向的信息传递发展到能够与用户进行交互对话，实现了网上注册、网上登录、网上交易等多种功能。本章将对表格相关标签、表单相关标签及CSS控制表格与表单的样式进行详细的讲解。教学目标使学生熟悉表格常用的标签，能够说出常用的表格标签及其作用使学生了解表格结构，能够说出表格的划分结构及各个结构的定义标签使学生了解表单，能够说出表单的概念及表单的组成部分使学生熟悉表单常用的标签，能够说出常用的表单标签及其作用使学生掌握表格标签的应用，能够创建表格并添加表格样式使学生理解表单的构成，可以快速创建表单使学生掌握表单相关标签，能够创建具有相应功能的表单控件使学生掌握表单样式的控制，能够美化表单界面教学重点创建表格<td>标签的属性<th>标签创建表单表单属性input控件<input>标签的type属性CSS控制表单样式教学难点创建表单input控件教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（创建表格、<table>标签的属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行统计，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页进行规划。本节课将对表格进行讲解。三、新课讲解知识点1-创建表格教师通过PPT结合实际操作的方式讲解创建表格。表格的作用使用标签创建表格的基本语法格式通过案例演示表格的使用知识点2-<table>标签的属性教师通过PPT结合实际操作的方式讲解<table>标签的属性。border属性cellspacing属性cellpadding属性width属性和height属性align属性bgcolor属性background属性四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（<tr>标签的属性、<td>标签的属性、<th>标签）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课<tr>标签、<td>标签、<th>标签用于对表格中的单元格进行设置。本节课将对<tr>标签的属性、<td>标签的属性、<th>标签进行讲解。三、新课讲解知识点1-<tr>标签的属性教师通过PPT结合实际操作的方式讲解<tr>标签的属性。<tr>标签的作用<tr>标签的常用属性通过案例演示行标签<tr>的常用属性效果知识点2-<td>标签的属性教师通过PPT结合实际操作的方式讲解<td>标签的属性。<td>标签的作用<td>标签的常用属性演示如何使用rowspan属性合并竖直方向的单元格知识点3-<th>标签教师通过PPT结合实际操作的方式讲解<th>标签。<th>标签的作用<th>标签的使用四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（CSS控制表格边框、CSS控制单元格边距、CSS控制单元格宽高）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。另外，CSS中还定义了表格专用属性，以便控制表格样式。本节课将对CSS控制表格样式进行讲解。三、新课讲解知识点1-CSS控制表格边框教师通过PPT结合实际操作的方式讲解CSS控制表格边框。CSS边框样式属性border通过案例演示设置表格边框的具体方法知识点2-CSS控制单元格边距教师通过PPT结合实际操作的方式讲解CSS控制单元格边距。内边距padding和外边距margin样式使用CSS控制表格样式知识点3-CSS控制单元格宽高教师通过PPT结合实际操作的方式讲解CSS控制单元格宽高。宽度width和高度height样式通过案例演示CSS控制单元格宽高四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（表单的构成、创建表单、表单属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课表单可以通过网络接收其他用户数据的平台，如注册页面的账户密码输入、网上订货页等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通。本节课将对表单进行详细讲解。三、新课讲解知识点1-表单的构成教师通过PPT的方式讲解表单的构成。表单控件提示信息表单域知识点2-创建表单教师通过PPT结合实际操作的方式讲解创建表单。<form>标签的作用创建表单的基本语法格式知识点3-表单属性教师通过PPT结合实际操作的方式讲解表单属性。action属性method属性name属性autocomplete属性novalidate属性四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五课时（input控件、<input>标签的type属性）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课学习表单的核心就是学习表单控件，HTML语言提供了一系列的表单控件，用于定义不同的表单功能。本节课将对这些表单控件进行详细讲解。三、新课讲解知识点1-input控件教师通过PPT结合实际操作的方式讲解input控件。input控件的作用input控件的语法格式<input>标签的常用属性知识点2-<input>标签的type属性教师通过PPT结合实际操作的方式讲解<input>标签的type属性。单行输入框<inputtype="text">密码输入框<inputtype="password">单选按钮<inputtype="radio">复选框<inputtype="checkbox">普通按钮<inputtype="button">提交按钮<inputtype="submit">重置按钮<inputtype="reset">图像形式的提交按钮<inputtype="image">隐藏域<inputtype="hidden">文件域<inputtype="file">email类型<inputtype="email">url类型<inputtype="url">tel类型<inputtype="tel">search类型<inputtype="search">color类型<inputtype="color">number类型<inputtype="number">range类型<inputtype="range">Datepickers类型<inputtype="date,month,week…">四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（<input>标签的其他属性、textarea控件）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课<input>标签不仅仅只有type属性，还有autofocus属性、form属性、list属性、multiple等属性。本节课将对<input>标签的其他属性以及textarea控件进行讲解。三、新课讲解知识点1-<input>标签的其他属性教师通过PPT结合实际操作的方式讲解<input>标签的其他属性。autofocus属性form属性list属性multiple属性min、max和step属性pattern属性placeholder属性required属性知识点2-<input>标签的textarea控件教师通过PPT结合实际操作的方式讲解<input>标签的textarea控件。textarea控件的作用textarea控件的语法格式textarea可选属性<textarea>标签的使用方法四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（select控件、datalist控件、CSS控制表单样式）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课select控件用于定义下拉菜单、datalist控件用于定义输入框的选项列表，此外还可以用CSS控制表单样式。本节课将对select控件、datalist控件、CSS控制表单样式进行讲解。三、新课讲解知识点1-select控件教师通过PPT结合实际操作的方式讲解select控件。select控件的作用<select>标签的语法格式<select>和<option>标签的常用属性<optgroup>标签知识点2-datalist控件教师通过PPT结合实际操作的方式讲解datalist控件。datalist控件的作用<datalist>标签的id属性知识点3-CSS控制表单样式教师通过PPT结合实际操作的方式讲解CSS控制表单样式。分析表单样式效果代码实现四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第八课时（阶段案例：制作表单注册页面）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课本章学习了表格和表单的相关知识，以及CSS控制表格与表单的样式。为了使大家更好地运用表格与表单组织页面，本节课将通过一个阶段案例分步骤制作网页中常用的注册界面。三、新课讲解知识点-阶段案例：制作表单注册页面教师通过PPT结合实际操作的方