项目6 表格和表单（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 20 年级 授课学期： 20 学年第一学期 教师姓名： 老师 20 年 月 日 课题名称 项目六 表格和表单 计划课时 课时 内容分析 表格与表单是HTML5中的重要标签，利用表格可以对网页进行排版，使网页信息有条理地显示出来，利用表单可以实现与用户交互，实现网上注册、网上登录、网上交易等功能。 教学目标 · 掌握创建表格的标签。 · 掌握表格的CSS样式。 · 掌握创建表单的标签。 · 掌握表单的CSS样式。 重点及措施 教学重点：利用表格布局页面；使用表格标签；正确使用表单 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：正确使用表单 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务6.1表格 6.1.1表格标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 表格的基本标签有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： <table>标签、<tr>标签、<th>标签、<td>标签。 · 知识点讲解 · 讲解实例1 创建表格 （1）教师展示PPT，对实例1进行具体讲解。 通过实例1的代码，可以看出创建表格的基本标签有以下4种。 　　（1）<table>标签： 用于定义一个表格。 　　（2）<tr>标签： 用于定义表格的一行，该标签必须包含在<table>标签中，表格的行数与<tr>标签数量对应。 　　（3）<th>标签： 用于定义表头的单元格，该标签必须包含在<tr>标签中，表头行的单元格数量与<th>标签数量对应。该单元格中的文字自动设为粗体，居中对齐显示。 　　（4）<td>标签： 用于定义表格的普通单元格，该标签必须包含在<tr>标签中，一行的单元格数量与<td>标签数量对应。该单元格中的文字自动设为左对齐显示。 　　在实例1的代码中，<table>标签中用到了border属性，其作用是给表格添加边框，如果去掉该属性，则表格默认情况下无边框。默认情况下，表格的宽度和高度靠其自身的内容来支撑。如果要进一步设置表格的外观样式，可以通过设置表格的相关属性来实现。 （2）学生自主提问，教师对疑难问题进行解答。 6.1.2 <table>标签的属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： <table>标签有哪些属性？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： borderpx设置表格的边框 widthpx设置表格的宽度 heightpx设置表格的高度 alignleft、center、right设置表格的对齐方式 bgcolor预定义的颜色值、#RGB、rgb()设置表格的背景颜色 backgroundURL地址设置表格的背景图像 cellspacing默认为2 px设置单元格与单元格之间的空白间距 cellpadding默认为1 px设置单元格与边框之间的空白间距。 · 知识点讲解 · 讲解<table>标签的属性 （1）教师展示PPT，对<table>标签的属性进行具体讲解。 <table>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例2 使用<table>标签的属性 （1）教师展示PPT，对实例2 使用<table>标签的属性进行具体讲解。 实例2 使用<table>标签的属性 新建网页并创建表格，在<table>标签中使用border属性给表格设置了5 px的边框，使用align属性使表格在浏览器中居中对齐，使用width和height属性设置表格的宽度和高度，使用bgcolor属性设置了背景颜色，使用cellpadding属性设置了3 px的间距，使用cellspacing属性设置了5 px的间距 （2）学生自主提问，教师对疑难问题进行解答。 6.1.3<tr>标签的属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： <tr>标签有哪些属性？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： heightpx设置行的高度 alignleft、center、right 设置一行内容的水平对齐方式 valigntop、middle、bottom 设置一行内容的垂直对齐方式 bgcolor预定义的颜色值、#RGB、rgb() 设置行的背景颜色 backgroundURL地址设置行的背景图像 。 · 知识点讲解 · 讲解<tr>标签的常用属性 （1）教师展示PPT，对<tr>标签的常用属性进行具体讲解。 <tr>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例3 使用<tr>标签 （1）教师展示PPT，对实例3 使用<tr>标签进行具体讲解。 实例3 使用<tr>标签 （2）学生自主提问，教师对疑难问题进行解答。 6.1.4<th>和<td>标签的属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： <th>和<td>标签的常用属性有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： widthpx设置单元格的宽度 heightpx设置单元格的高度 alignleft、center、right设置单元格内容的水平对齐方式 valigntop、middle、bottom设置单元格内容的垂直对齐方式 bgcolor预定义的颜色值、#RGB、rgb()设置单元格的背景颜色 backgroundURL地址设置单元格的背景图像 colspan正整数设置单元格合并的列数 rowspan正整数设置单元格合并的行数。 · 知识点讲解 · 讲解<th>和<td>标签的常用属性 （1）教师展示PPT，对<th>和<td>标签的常用属性进行具体讲解。 <th>和<td>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例4 使用<th>和<td>标签 （1）教师展示PPT，对实例4 使用<th>和<td>标签进行具体讲解。 实例4 使用<th>和<td>标签 （2）学生自主提问，教师对疑难问题进行解答。 6.1.5使用CSS设置表格样式 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 表格样式有哪些设置方式？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 表格样式可以通过表格标签的相关属性进行设置，也可以通过CSS样式来实现，而且通过CSS样式设置表格的样式会更灵活、多样。 · 知识点讲解 · 讲解实例5 使用CSS设置表格样式 （1）教师展示PPT，对实例5 使用CSS设置表格样式进行具体讲解。 实例5 使用CSS设置表格样式 （2）学生自主提问，教师对疑难问题进行解答。 任务6.2表格综合案例——制作教材征订表 · 知识点讲解 · 讲解实例6 制作教材征订表 （1）教师展示PPT，对实例6 制作教材征订表进行具体讲解。 实例6 制作教材征订表 （2）学生自主提问，教师对疑难问题进行解答。 任务6.3表单 6.3.1认识表单 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 表单有什么作用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 表单可以通过网络接收用户数据，例如，注册页面的账户密码输入、网上订货页面等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通对话。 表单是用于实现浏览者与网站之间信息交互的一种网页对象。 · 知识点讲解 · 讲解表单的概念 （1）教师展示PPT，对表单的概念进行具体讲解。 表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理和响应，完成浏览者和网站服务器之间的交互。 表单可以通过网络接收用户数据，例如，注册页面的账户密码输入、网上订货页面等，都是以表单的形式来收集用户信息，并将这些信息传递给后台服务器，实现网页与用户间的沟通对话。 表单是用于实现浏览者与网站之间信息交互的一种网页对象。 （2）学生自主提问，教师对疑难问题进行解答。 6.3.2表单标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 表单标签的常用属性有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： name给定表单名称，以区分同一个页面中的多个表单 action指定处理表单信息的服务器端应用程序 method用于设置表单数据的提交方式，其取值为get或post。 · 知识点讲解 · 讲解表单标签 （1）教师展示PPT，对表单标签进行具体讲解。 表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。可以使用<form>标签在网页中创建表单。<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单。 　　表单的基本语法及格式如下： <form name="表单名称" action="URL地址" method="提交方式"> … </form> <form>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 6.3.3表单的控件标签 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 表单的控件标签有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： <input/>标签、<textarea>标签、<select>标签。 · 知识点讲解 · 讲解<input/>标签 （1）教师展示PPT，对<input/>标签进行具体讲解。 <input/>标签用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等，其基本语法格式如下： <input type=“控件类型”/> <input/>标签为单标签，type属性是基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，<input/>标签还可以定义很多其他的属性 <input/>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解<textarea>标签 （1）教师展示PPT，对<textarea>标签进行具体讲解。 <textarea>标签 当定义<input>标签的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，需要使用<textarea>标签，其基本语法格式如下： <textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 在上面的语法格式中，cols和rows为<textarea>标签的必需属性，其中cols用于定义多行文本输入框每行中的字符数，rows用于定义多行文本输入框显示的行数，它们的取值均为正整数。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解<select>标签 （1）教师展示PPT，对<select>标签进行具体讲解。 <select>标签 <select>标签提供下拉列表选项，供用户进行选择。下拉列表选项通过<select>标签和<option>标签来定义，其基本语法格式如下： <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> <option>标签用于定义下拉菜单中的具体选项，每对<select>标签中至少应包含一对<option>标签。 <select>和<option>标签的常用属性 （2）学生自主提问，教师对疑难问题进行解答。 6.3.4使用CSS设置表单样式 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： css可以控制表单哪些样式？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： CSS可以轻松地控制表单样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 · 知识点讲解 · 讲解使用CSS设置表单样式 （1）教师展示PPT，对使用CSS设置表单样式进行具体讲解。 CSS可以轻松地控制表单样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 　　在使用CSS控制表单样式时，注意以下问题： 　　1）由于<form>是块标签，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。 　　2）<input>控件默认有边框效果，当使用其定义各种按钮时，通常需要清除其边框。 　　3）通常情况下需要对文本框和密码框设置2~3 px的内边距，以使用户输入的内容不会紧贴输入框。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例7 使用CSS设置表单样式 （1）教师展示PPT，对实例7 使用CSS设置表单样式进行具体讲解。 实例7 使用CSS设置表单样式 （2）学生自主提问，教师对疑难问题进行解答。 任务6.4表单综合案例——制作用户信息注册表 · 内容学习 · 知识点讲解 实例8 制作用户信息注册表 步骤1： 创建HTML5文档 　　打开Dreamweaver软件。选择“文件”→“新建”→“空白页”→“创建”命令，创建HTML5文档，注意在“文档类型”下拉列表中选择“HTML5”类型。空白页带有HTML5的相关格式， 步骤2： 添加文本 　　（1）在<body>标签中添加<div>标签，使用ID选择器定义为box，在box中添加<h2>标签，并使用class选择器定义为header。 （2）在box中添加一个表单，表单中数据提交地址为空，数据提交方式为post。 （3）在表单中添加一个表格，并使用class选择器定义为content。 （4）在表格的第一行第一个单元格中输入文本“姓名”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt01。在表格的第二行第一个单元格中输入文本“手机”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt02。 （5）在表格的第三行第一个单元格中输入文本“性别”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加两个单选按钮，并用两个<label>标签显示说明性文字，分别为“男”和“女” （6）在表格的第四行第一个单元格中输入文本“邮箱”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个文本框，值为空，使用class选择器定义为txt03。 （7）在表格的第五行第一个单元格中输入文本“职业”和“*”，它们使用class选择器定义为left，嵌套使用<span>标签控制“*”，并使用class选择器定义为red。在第二个单元格中添加一个下拉列表，并使用class选择器定义为course，下拉列表中的具体内容用<option>控制，分别为教师、公司职员、工程师、自由职业者，设置公司职员为默认选项 （8）在表格的第六行第一个单元格中输入文本“爱好”，并使用class选择器定义为left。在第二个单元格中添加四个复选框，并用<label>标签说明为音乐、上网、足球、下棋 （9）在表格第七行第一个单元格中输入文本“个人简历”，并使用class选择器定义为left。在第二个单元格中添加文本输入控件，设置合理高度和宽度，并使用class选择器定义为message。文本输入控件中显示文本“请输入您的简历” （10）在表格第八行第一个单元格中的&nbsp，表示占位符。在第二个单元格中添加提交按钮和重置按钮 步骤3： 添加CSS样式 　　（1）设置全局样式。在<head>标签中添加<style>标签，body设置字体为宋体，字体大小为12 px，颜色为#515151；重置浏览器的默认样式为自适应；box设置宽度和高度分别为660 px和600 px，边框宽1 px，实线，颜色为#CCC，内边距为20 px，外边距上下位50 px，左右居中 （2）设置标题样式。.header设置文本为居中，字体大小为22 px，颜色为#0b0b0b，内边距为30 px （3）设置单元格和控件的样式。td设置内边距为26 px；td.left设置宽为78 px，文本居右对齐，文本与表单控件间的距离为8 px；.red设置颜色为红色；.txt01和.txt02控件设置宽和高分别为264 px和12 px，边框宽1 px、实线、颜色为#CCC，内边距分别为3 px 3 px 3 px 26 px，字体大小为12 px，颜色为#949494；.txt03控件设置宽和高分别为122 px和12 px，内边距分别为3 px 3 px 3 px 26 px，字体大小为12 px；.course控件设置宽度为184 px；.message控件设置宽和高分别为432 px和164 px，字体大小为 12 px，颜色为#949494，内边距为3 px。设置单元格和控件的样式 步骤4： 保存并浏览 项目小结 本项目主要介绍了使用表格和表单设计网页，具体内容如下。 表格： 介绍了表格标签、<table>标签的属性、<tr>标签的属性、<th>和<td>标签的属性。 表格综合案例： 介绍了教材征订表的制作，重点学习使用CSS内部样式表设置表格各元素格式。 表单： 介绍了表单标签和表单的控件标签。 表单综合案例： 介绍了用户信息注册表的制作，重点学习页面布局。 通过本项目的学习，能够掌握创建表格与表单的基本语法，学会表格标签的使用，熟悉常用的表单控件，熟练运用表格与表单组织页面元素。 实训13 · 实训名称 创建表格 · 实训目标 在网页上创建简单表格 · 实训实施 编写代码，创建学生信息表，表格如下图所示。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.表格标签能够创建表格 2.<table>标签能够使用<table>标签的常用属性 3.<tr>标签能够使用<tr>标签的常用属性 4.<th>和<td>标签能够使用<th>和<td>标签的常用属性 5.教材征订表的页面结构能够使用CSS内部样式表设置表格各元素格式 6.表单标签能够创建表单 7.表单控件能够使用input控件 8.用户信息注册表单的页面结构能够对注册表进行页面布局 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$