第3章 使用列表与表格布局-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）同步教案

课程名称 第3章 使用列表与表格布局 计划学时 6学时 内容分析 本章介绍了有序列表、无序列表和自定义列表的使用、表格的基本标签、语义化标签、rowspan属性和colspan属性、cellpadding属性和cellspacing属性、以及其他表格属性 教学目标 与 教学要求 【知识目标】 1. 了解有序列表、无序列表和自定义列表的特点 2. 认识表格的基本标签 3. 认识表格的标签属性 【技能目标】 1. 掌握有序列表、无序列表和自定义列表的应用 2. 掌握语义化标签的用法 3. 熟练使用rowspan属性和colspan属性合并行与列 4. 熟练使用cellpadding属性和cellspacing属性控制单元格边距与间距 5. 熟练使用表格标签和属性设计表格 【思政育人目标】 1. 培养学生健康的审美观念 2. 引导学生在学习中健全职业道德的规范。 3. 引导学生创新思维和探索的科学精神。 教学重点 掌握无序列表的使用、掌握表格基本标签 教学难点 实现本章节的2个小节案例 教学方式 课堂讲解配合ppt演示1学时 教 学 过 程 第一学时 （有序列表、无序列表） 一、提出需求，导入学习任务 （1）思考如何创建一个列表和表格。 · 在一个网页中经常能看到列表与表格的应用，网页中漂亮的导航、整齐规范的文章标题列表和图片列表等都是利用列表实现的。 · 表格是由行和列组成的结构化数据集（表格数据），用于呈现数据或统计信息，可以让数据的显示变得十分规整有条理，可读性好。 · 列表与表格的应用可以使图片和文字变得整洁有序，数据也变得“有模有样”，整个网页更加规整。 （2）明确学习方向。 · 了解有序列表、无序列表的特点 · 掌握有序列表、无序列表的使用 二、知识讲解 （一）有序列表 1.定义 有序列表（ordered-list）是有排列顺序的列表，其各个列表项按照一定的顺序排列。 有序列表使用<ol>标签定义，包含一个或多个<li>列表项目，其语法格式如下所示。 <ol> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ol> 2.标签属性 · type · start · reversed 3.演示说明 使用<ol>标签定义一个有序列表。 （二）无序列表 1.定义 无序列表（unordered-listt）各个列表项之间没有顺序级别之分，是并列的。 无序列表使用<ul>标签定义，包含一个或多个<li>列表项目，其语法格式如下所示。 <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ul> 2.type属性 <ul>无序列表标签通常使用type属性修改其显示效果。 · disc · circle · square 3.演示说明 使用<ul>标签定义一个无序列表。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第二学时 （自定义列表、案例讲解） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 了解自定义列表的特点 · 掌握自定义列表的使用 二、知识讲解 （一）自定义列表 1.定义 自定义列表（definition-list）常用于对术语或名词进行解释和描述，列表项的前面没有任何项目符号。 自定义列表使用<dl>标签定义，列表中并列嵌套<dt>标签和<dd>标签，<dt>标签用于定义名词，<dd>标签用于定义名词的解释和描述。一对<dt></dt>里可以对应多对<dd></dd>，即一个名词可有多个解释和描述。自定义列表的语法格式如下所示。 <dl> <dt>名词1</dt> <dd>名词1描述一</dd> <dd>名词1描述二</dd> <dt>名词2</dt> <dd>名词2描述一</dd> <dd>名词2描述二</dd> </dl> 2.演示说明 使用<ol>标签定义一个自定义列表。 （二）案例讲解 讲解新闻列表案例。 三、知识巩固 （1）回顾上课前的学习目标，对本节课知识点进行总结。 （2）使用本章课后作业。 第三学时 （表格） 一、回顾上节课内容 （1）对上节课布置的作业以及学生提出的问题进行答疑解惑。 （2）回顾上节课内容，引出本节课主题。 （3）明确学习方向。 · 认识表格的基本标签 · 认识表格的标签属性 · 掌握语义化标签的使用 二、知识讲解 （一）表格基本标签 1.三个基本标签 <table>标签用于定义一个表格，<tr>标签用于定义表格中的行，可