第11讲 ：使用css+div制作多列布局页面

学时：2

任务目标

l  理解css样式的浮动属性

l  掌握CSS样式在多列布局页面中的应用

l  使用css+div制作多列布局页面

知识内容

第3.2.3节，上机实训1

重  点

使用css+div制作多列布局页面

难  点

理解CSS的浮动属性

教学方法

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

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

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

学习方法

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

资源

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

教学过程

知识点

基本内容

教学过程

建议时长（分钟）

复习

复习上一节课内容

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

2

知识点：多列布局页面制作、浮动继承

1．【案例3-4】

多列布局页面

通过实际操作完成案例页面布局讲解

15

2．添加导航链接文字和其他内容

通过实际操作讲解导航和网页元素的添加

10

3．运行效果

通过实际操作完成运行页面，查看运行效果

5

学生练习

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

23

教师点评案例3-4练习

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

5

上机实训1操作题提示

操作题1图片素材分析

通过查看素材和效果图分析图片素材

10

操作题1页面结构分析

通过效果图分析页面结构

5

操作题1样式设计

通过实际操作讲解页面制作

15

课后作业

学生完成课后习题练习

布置课后作业