HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第10章 设置表格、列表和滚动条样式.doc

PAGE6

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

14

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第10章设置表格、列表和滚动条样式

课外学习任务：

（1）课前：

以小组为单位，讨论设置表格、列表和滚动条样式的相关知识，并以PPT的形式记录下来。

（2）课后：

=1\*GB3①使用CSS中的与表格相关的属性为表格添加样式。

=2\*GB3②使用CSS中的列表属性来设置列表样式（列表符号样式和列表符号的位置样式）。

=3\*GB3③使用CSS中的与滚动条相关的属性来设置滚动条的颜色样式。

教学目标：

知识目标

掌握表格样式的设置。

掌握列表样式的设置。

掌握滚动条样式的设置。

能力目标

能够掌握表格、列表和滚动条的相关属性；

能够通过CSS实现对表格、列表和滚动条样式的添加。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握表格、列表和滚动条样式的使用，理解并应用专业知识。

重点难点及解决方法：

（1）重点：表格和列表样式的设置

解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解表格和列表的相关样式属性，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的学习使用CSS属性实现对表格和列表样式的设置；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：滚动条样式的设置

解决方法：通过示例展示+启发式教学讲解的方式，细致讲解使用滚动条的各种样式属性。帮助学生掌握使用CSS属性设置滚动条样式的方法。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.表格

【合并表格边框】

表格同时存在两种边框：一种是表格的边框，即表格最外面的4个边框；另一种是单元格的边框，每一个单元格都有自己的边框。在默认情况下，这两种边框是分开显示的，但在CSS中border-collapse属性的作用下，可以将这两种边框合并起来。border-collapse属性的语法格式如下。

border-collapse:collapse|separate|inherit

各属性值的含义如下。

collapse：合并两种边框。

separate：两种边框独立，该值为默认值。

inherit：继承父级样式。

【设置表格边框间距】

在CSS中可以使用border-spacing属性来为表格设置边框间距，这一点与HTML中的table元素的cellspacing属性十分类似。border-spacing属性的语法格式如下。

border-spacing:宽度|inherit

各属性的含义如下。

宽度：边框间距的大小，可以为绝对单位值或相对单位值，但不能为负数。

inherit：继承父级样式。

【设置表格标题位置】

在HTML中可以使用caption元素来设置表格的标题，而CSS中的caption-side属性用来设置标题放在表格的什么位置上。caption-side属性的语法格式如下。

caption-side:top|bottom|inherit

各属性值的含义如下。

top：标题位于表格顶部。

bottom：标题位于表格底部。

inherit：继承父级样式。

【设置表格布局】

当单元格中对象的宽度超过单元格定义的宽度且能换行（如文字）时，浏览器会自动在宽度的最大处换行；在不能换行（如图片或一个超长单词时）时，浏览器就会自动调整表格列的宽度，以容纳单元格中的对象。在CSS中的table-layout属性可以设置单元格宽度是否不被改变。table-layout属性的语法格式如下。

table-layou