讲解元素的定位：
语法：position: static | relative | absolute | fixed;
方式一：静态定位static
方式二：相对定位relative
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践方式一：静态定位static、方式二：相对定位relative
任务描述
本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
教学内容
（1）盒子模型的原理；
（2）盒子的border、margin、padding的使用；
（3）盒子的CSS3新增属性；
（4）元素的类型与转换；
（5）浮动属性、清除属性、溢出处理；
（6）元素的定位方式。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解盒子模型的常用属性：
边距属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践padding内边距属性、margin外边距属性。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
盒子模型的原理；
盒子模型的常用属性：边距属性、边距属性的使用方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解元素的类型与转换：
元素的类型块级元素、行内元素、行内元素的区别与相互转化
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践元素的类型与转换方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
（1）CSS3新增属性
学生：实践练习
课堂
总结
（1）浮动属性float
（2）清除浮动属性clear
（3）溢出处理overflow
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：电商商品展示页面
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.4定位方式（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
知识讲授
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解溢出处理overflow：
语法：overflow: visible | hidden | auto | scroll;
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践overflow
实验教学法
多媒体
教师：辅导交流
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解
方式三：绝对定位absolute
方式四：固定定位fixed
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践方式三：绝对定位absolute、方式四：固定定位fixed。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
《网页设计与制作》课程教学单元设计
单元6运用盒模型网页布局
授课教师：网页设计与制作
授课班级:
学时：10
教学条件
实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络
教学素材
教材、课件、实训项目单、授课录像、案例库、教学网站等
教学目标设计
知识目标：
（1）掌握盒子模型的原理；
（2）掌握盒子模型的层次与的宽高计算；
（3）掌握盒子的border、margin、padding的使用；
（4）掌握盒子的CSS3新增属性；
（5）掌握元素的类型与转换；
（6）掌握浮动属性、清除属性、溢出处理；
（7）掌握元素的定位方式。
能力目标：
（1）能正确应用盒子模型布局网页页面；
（2）能根据网页页面效果，运用盒子模型与定位技术布局页面。
项目案例
综合实例：数字化教学资源平台网站布局
案例演示法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
自行完成数字化教学资源平台网站布局
实验教学法
多媒体
教师：辅导交流
学生：实践练习
课堂
总结
方式一：静态定位static
方式二：相对定位relative
方式三：绝对定位absolute
方式四：固定定位fixed
任务分析与实现
（1）任务分析；
（2）任务实现代码。
教学过程设计
6.1盒子模型（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
任务描述
本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
讲授法
多媒体
教师：分析任务
学生：信息交流
知识讲授
讲解：盒子模型的原理、盒子模型的层次与宽高
重点：
（1）盒子模型的原理；
（2）盒子border、margin、padding的使用；
（3）盒子的CSS3新增属性；
（4）元素的类型与转换；
（5）浮动属性、清除属性、溢出处理；
（6）元素的定位方式。
难点：
（1）盒子的CSS3新增属性；
（2）元素的类型与转换；
（3）浮动属性、清除属性、溢出处理；
（4）元素的定位方式。
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践float属性。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解清除浮动属性clear
语法：clear: left | right | both;
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践clear属性。
任务驱动教学法
多媒体
课件演示
整理笔记
引导创新
任务拓展
页面主体区域的实现、页脚区域的实现。
任务驱动教学法
多媒体
拓展提高
课外实训
运用盒子模型与定位布局企业网站
项目教学法
网络环境
布置作业
提出要求
第二步：编写<banner>区域的CSS代码，通过定位确定3幅图片的位置，通过box-shadow属性设置图片的阴影效果。
任务驱动教学法
多媒体
教师：辅导交流
学生：实践练习
任务汇报
完成任务后，简短的交流
任务驱动教学法
多媒体
课件演示
教师：点评优化
学生：汇报交流
课堂
总结
综合使用HTML5+CSS3实现页面效果。
（2）元素的类型与转换方法
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：电商产品分类列表展示
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.3浮动属性、清除属性、溢出处理（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
知识讲授
讲解浮动属性：float
语法：float: none | left | right;
教师讲解
多媒体
课件演示
整理笔记
引导创新
任务拓展
综合实例：数字化教学资源平台网站布局
教师指导
学生自学
多媒体
布置作业
提出要求
教学过程设计
6.5任务实施：使用盒模型布局网站banner部分（学时数：2）
主要步骤
教学内容
教学方法
教学手段
师生活动
任务描述
在任务5实现banner区域的基础上，综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践盒子模型的原理、盒子模型的层次与宽高计算机方法
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解盒子模型的常用属性：
边框border属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践边框border属性
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
创建一个新页面进行实践圆角边框、图片边框的使用方法。
实验教学法
多媒体
教师：辅导交流
学生：实践练习
知识讲授
讲解CSS3新增属性：阴影效果box-shadow、阴影效果box-shadow
讲授法
多媒体
课件演示
教师：讲授知识
学生：边听边练
学生实践
学生创建一个新页面进行实践阴影效果box-shadow、阴影效果box-shadow的使用方法。
任务驱动教学法
多媒体
教师：分析任务
学生：信息交流
任务分析
综合应用CSS中盒布局的方法与思维进行页面布局。