第三讲 ：使用css+div制作一列固定宽度布局页面

学时：2

任务目标

l  了解css的盒子模型

l  掌握CSS的样式分类及命名规范

l  使用css+div制作一列固定宽度布局页面

知识内容

第2.1-2.2节

重  点

使用css+div制作一列固定宽度布局页面

难  点

理解CSS的盒子模型

教学方法

教师：理论与实际操作讲解相结合

学生：预习、课堂学习与课堂练习相结合

师生：教师通过课程引导启发提问、疑难解答、学生练习点评进行互动

学习方法

PPT和知识讲解进行理论学习、播放微课进行案例学习，然后进行案例实操练习、课后习题等练习完成知识学习过程

资源

PPT、电子教材、微课视频、网络课程（http://jx.gdgm.edu.cn/skills/wv/30764673）

教学过程

知识点

基本内容

教学过程

建议时长（分钟）

复习

复习上一节课内容

运行上一讲案例，并强调重点完成复习

2

知识点1：

CSS盒子模型和样式分类

1． CSS盒子模型

通过PPT结合电子教材详细讲解盒子模型及该模型的总占位宽度和高度的计算

5

2．CSS基本语法

通过PPT结合实际操作详细讲解CSS语法的书写规范

3

3．重要属性

通过PPT结合实际操作讲解几种重要属性代表的意义

5

4.CSS样式分类 ---

按选择器类型分类

通过PPT结合实际操作讲解按选择器类型对css样式进行分类，比较各分类的不同点

5

4.CSS样式分类 ---

按样式的定义位置分类

通过PPT结合实际操作讲解外部样式和内容样式的定义，及外部样式的引用

5

知识点2命名规范

1、命名规则 

通过PPT结合实际操作讲解css命名规则

2

2.CSS样式命名参考

通过PPT结合“标准与规范”栏目文章讲解常用的命名参考名称

3

3、文件名参考命名

通过PPT结合“标准与规范”栏目文章讲解CSSL样式文件常用的命名名称

3

知识点3制作一列固定宽度布局页面

制作一列固定宽度布局页面实例

通过PPT结合知识讲解电子教材详细讲解

2

【案例2-1】

通过实操讲解，完成案例教学

15

学生课堂练习

解答学生练习过程中出现的问题

15

教师点评案例2-1练习

对学生练习中出现的问题进行总结点评

5

【案例2-2】

通过实操讲解，完成案例教学

10

学生课堂练习

解答学生练习过程中出现的问题

5

教师点评案例2-2练习

对学生练习中出现的问题进行总结点评

5

课后作业

学生完成课后习题练习

布置课后作业