网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（李志云第2版）-教案 模块三 创建表格和表单.doc
模块三创建表格和表单
本模块通过3个案例的实现，介绍表格的创建以及表格样式的定义，表单的创建
以及表单样式的定义，帮助读者达到能在网页上熟练创建表格和表单的目的。
知识目标：
掌握创建表格的各种标记；
掌握合并单元格的方法；
掌握表格的样式定义方法；
掌握创建表单的标记；
掌握表单中各种常用控件的使用；
掌握表单的样式定义方法。
能力目标：
会使用表格标记创建表格；
会使用表单标记和表单控件创建表单；
会使用CSS定义表格和表单样式。
素质目标：
引导学生树立集体主义精神，培养团结协作的能力；
在编写代码中培养精益求精的工匠精神；
提升学生发现美、创造美的能力；
引导学生学会尊重他人，培养良好的沟通和合作能力；
可以引导学生培养创新思维和解决问题的能力。
教案13
案例13手机型号表
计划学时
2学时
知识目标
掌握创建表格的HTML标记
掌握合并单元格的方法
掌握表格的CSS样式控制
能力目标
会使用表格标记创建表格
会使用CSS定义表格
素质目标
引导学生树立集体主义精神，培养团结协作的能力
在编写代码中培养精益求精的工匠精神
提升学生发现美、创造美的能力
教学重点
创建表格的HTML标记
教学难点
表格的CSS样式控制
教学模式
教学做一体化
线上+线下混合式教学
教学活动及主要环节
素质培养
第1学时
(课程前导、案例实现)
I.课程前导：(5分钟)
表格在网页中的作用?(小组为单位讨论，派小组代表分享知识)
(教师总结)表格是HTML网页中的重要元素，利用表格可以有条理地
显示网页内容。早期的网页版面布局时采用表格进行布局，但随着网页
技术的发展，现在的网页排版一般采用HTML5+CSS3布局。但网页上的
一些内容，譬如通信录、学生信息表、课程表采用表格仍然是较好的呈现方式。
II.新课内容：(40分钟)
一、案例描述
创建7行6列的手机型号表，具体效果如图13-1所示。
分组讨论是
以小组为单
位进行学习
和交流，可以
引导学生树
立集体主义
精神，培养团
结协作的能
力。
班工值
要
在编写代码
中培养精益
求精的工匠
精神
图13-1手机型号表
二、案例实现学生同步操作，做学教一体
1.新建项目
在HBuilderX中新建项目：project13,项目存放位置为：E:/网页设计
/源代码，选择模板类型为“空项目”,单击“创建”按钮。
2.在项目中创建网页文件
在project13中新建html文件，文件名：example.html。
3.输入网页代码
根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。
(td6GB/td)
(td)128GB(/td)
(td)andraidc/td)
(/tr)
td)小米RedmiNote9Pros/td
(ta8GD/td)
(td1286B/td
ctd)Androidc/td)(td)发浇级/td)
(/tr)
(/table)
/bady
(tdiRRB8B(/td)
ethsmBBBc/ts-
R2小*于机型号基c/h2
4.定义CSS样式
在head标记内添加内部样式表，样式表代码如下。
atyletypestert/es)
buy,h2
rginta;
dtp=
bordar-tollagieitollsese,/BU
fent-famlly!*?
gridtableth,gridtabletd(/”性元的
barder:1ps
beckgroundt#colort*FFF;
solid4566;/*绝单元的相越/
7f7d7ei/*设算中元格的
)
)
(/sty)m
5.保存文件
在菜单栏中选择“文件”|“保存”命令，或按“Ctrl+S”组合键，即
可保存文件。
6.浏览网页
在HBuilderX中单击工具栏中的“浏览器运行”按钮◎,或按“Ctrl+R”
组合键，使用谷歌浏览器浏览网页。
第2学时
(相关知识点)
一、表格标记(5分钟)
1.table/table
2.tr/tr
3.th/th
4.td/td
二、合并单元格(20分钟)
(教师讲解)通过给单元格标记td或th添加colspan或rowspan属性合并单元格。
学生操作：完成案例13-1实现单元格的合并。
三、定义表格CSS样式(15分钟)
(老师讲解，学生动手操作，实现教学做一体化)
通过CSS样式设置表格的样式创建出各种漂亮美观的表格。四、小结(5分钟)
掌握表格标记的使用，能够对单元格进行合并，利用CSS样式对表格进行控制。
作业1:
课本课后习题与实训
作业2: