《使用HTML和CSS开发Web网站教学资料》第二章 教案.docVIP

课程名: 使用HTML和CSS开发WEB网站 章节名: 第2章 表格与列表 编写 作者：学习 2.掌握表格相关的标签 3.掌握单元格合并 4.理解列表的分类 5.掌握两种列表及列表项目的标签 本章重点 单元格合并与表格布局 本章难点 单元格合并与表格布局 本章重难点 单元格合并与表格布局 授课形式 理论+上机 知识点 内容 案例 本章任务 1.What: 能在网页中显示表格效果 能使用表格布局完成简单的网页效果 Where Why How FAQ Check Connect. 1.生活案例 网站常见表格布局的情况，演示几种 2.演示案例 无 3.教学备注 无 本章目标 1.What: 1.理解表格的结构 2.掌握表格相关的标签 3.掌握单元格合并 4.理解列表的分类 5.掌握两种列表及列表项目的标签Where Why How FAQ Check Connect 1.生活案例 无 2.演示案例 无 3.教学备注 无 预习检查 普通 5分钟 1.What: 提问回答. Where Why How FAQ Q1: 为表格设置( )属性可以控制表格中相邻单元格的间距，设置( )属性可以控制表格中单元格的内容与其边界的间隙。 ? A1: cellspacing Q2: ul/ul标签显示时，它内部的列表项目前面默认显示的符号是(? A2: 实心圆点 6.Check 7.Connect 同学们,都回答得很好,那接下来,我们就来进入今天的课程内容 1.生活案例 无 2.演示案例 无 3.教学备注 3.1只给出答案,可不做讲解. 3.2 若学员回答情况很好,可适当扩展题目,激发学员的学习兴趣和热情. 表格 what: table/table：表格 tr/tr：行 td/td：单元格 th/th：表头(特点：文字加粗，字体居中) caption/caption：表头 表格的常用属性： Border: 设置表格边框的宽度，默认无边框Width: 设置表格的宽度，可用px像素单位，或%百分比Cellsapcing: 设置表格中相邻单元格之间的距离Cellpadding: 设置表格中每个单元格的内容与单元格边界的距离Colspan:合并列 Rowspan：合并行 Align: 单元格内部的内容的水平对齐方式，值可为leftcenter、right、justify，在td/td标签内此属性默认为left，在th/th标签内默认为centerValign: 单元格内部的内容的垂直对齐方式，值可为topmiddle、bottom、baseline，默认为middle How: table tr td排名/td td歌曲/td td歌手/td /tr tr td1/td td灰色的彩虹/td td范玮琪/td /tr tr td2/td td非常完美/td td张韶涵/td /tr tr td3/td td与爱情无关/td td游鸿明/td /tr /table FAQ: Check: 从代码中可以理解，一个完整的表格从table标签开始，结束于/table，要表示表格的一行，应在table/table内部提供tr/tr，而要表示某一行中的一个单元格，则应在tr/tr内部提供td/td。 7.Connect: 生活案例 上网 演示案例 示例一：创建一个三行三列的规则表格(这个示例用于讲解清楚表格的组成) 示例二：在示例一的基础之上进行美化（这个示例用于讲解清楚表格的属性） 示例三：创建几个(根据自己或学生情况而定)不规则表格(这个示例用于讲解清楚rowspan和colspan属性，有些学生的分不清楚跨行跨列的，需要多举几个例子) 教学备注 无 列表 what: 常用的列表有两种： 有序列表，包含一组需要强调先后顺序的项-(ol/ol 无序列表，包含一组不需强调先后顺序的项目-(ul/ul 2.Where: 3.Why: 网页中经常会出现一组逻辑上相关而且级别相同的段落，描述一个事物的不同方面或一件事情的几个步骤。使用列表来组织这些项目，可以使网页的结构更加清晰 How: 有序列表： pXX公司三亚之旅第一天行程/p ol li07:00 之前在新大新广场前集合/li li07:15 乘坐机场大巴前往黄花机场/li li08:30 集体办理登机手续/li li09:15 乘机飞往三亚/li li11:00 抵达三亚机场/li