第10讲 ：使用CSS+DIV布局二列页面

学时：2

任务目标

l  了解多列布局的页面结构模型

l  了解容器层和浮动继承性

l  熟练使用CSS+DIV布局二列页面

知识内容

第3.2节

重  点

使用CSS+DIV布局二列页面

难  点

CSS样式的浮动属性

教学方法

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

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

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

学习方法

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

资源

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

教学过程

知识点

基本内容

教学过程

建议时长（分钟）

复习

复习上一节课内容

运行上一节课案例并强调重点完成复习

2

知识1：使用模板新建页面

1．【案例3-2】 使用模板创建带样式的页面

通过PPT结合实际操作详细讲解使用模板创建网页

15

2．网页结构和样式分析

通过PPT结合互联网中网页的结构，通过实际操作详细讲解模板中的CSS样式

10

学生练习

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

13

教师点评案例3-2练习

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

5

知识点2：使用CSS+DIV布局二列页面

1、【案例3-3】使用CSS+DIV布局二列页面 

通过PPT结合实际操作详细讲解二列页面的设计与制作

13

2.布局层内添加网页元素

通过实际操作在页面中添加元素

10

3.页面效果图

运行网页并分析讲解

2

学生练习

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

15

教师点评案例3-3练习

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

5

课后作业

学生完成课后习题练习

布置课后作业