KC003050000006单元设计任务6运用盒模型网页布局.

1、网页设计与制作课程教学单元设计 淮安信息职业技术学院网页设计与制作课程教学单元设计单元6 运用盒模型网页布局授课教师：网页设计与制作授课班级:学时：10教学条件实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、实训项目单、授课录像、案例库、教学网站等教学目标设计知识目标：（1）掌握盒子模型的原理；（2）掌握盒子模型的层次与的宽高计算；（3）掌握盒子的border、margin、padding的使用；（4）掌握盒子的CSS3新增属性；（5）掌握元素的类型与转换；（6）掌握浮动属性、清除属性、溢出处理；（7）掌握元素的定位方式。能力目标：（1）能正确

2、应用盒子模型布局网页页面；（2）能根据网页页面效果，运用盒子模型与定位技术布局页面。任务描述本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。教学内容（1）盒子模型的原理；（2）盒子的border、margin、padding的使用；（3）盒子的CSS3新增属性；（4）元素的类型与转换；（5）浮动属性、清除属性、溢出处理；（6）元素的定位方式。重点：（1）盒子模型的原理；（2）盒子border、margin、padding的使用；（3）盒子的CSS3新增属性；（4）元素的类型与转换；（5）浮动属性、清除属性、溢出处理；（6）元素的定位方式。难点：（1）盒

3、子的CSS3新增属性；（2）元素的类型与转换；（3）浮动属性、清除属性、溢出处理；（4）元素的定位方式。任务分析与实现（1）任务分析；（2）任务实现代码。教学过程设计6.1 盒子模型（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。讲授法多媒体教师：分析任务学生：信息交流知识讲授讲解：盒子模型的原理、盒子模型的层次与宽高讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践盒子模型的原理、盒子模型的层次与宽高计算机方法实验教学法多媒体教师：辅导交流学生：实践练习知识讲授

4、讲解盒子模型的常用属性：边框border属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践边框border属性实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解盒子模型的常用属性：边距属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践padding内边距属性、margin外边距属性。实验教学法多媒体教师：辅导交流学生：实践练习课堂总结盒子模型的原理；盒子模型的常用属性：边距属性、边距属性的使用方法教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览当当网，认识购物页面中盒子模型的使用方法与技巧。教师指导学生自学多媒体布置作业提

5、出要求教学过程设计6.2 盒子的CSS3新增属性、类型与转换（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解 CSS3新增属性：圆角边框、图片边框语法：border-radius: 半径值1/半径值2;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践圆角边框、图片边框的使用方法。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 CSS3新增属性： 阴影效果box-shadow 、阴影效果box-shadow讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践阴影效果box-shadow 、阴影效果box-sh

6、adow 的使用方法。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 元素的类型与转换：元素的类型块级元素、行内元素、行内元素的区别与相互转化讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践元素的类型与转换方法实验教学法多媒体教师：辅导交流学生：实践练习课堂总结（1）CSS3新增属性（2）元素的类型与转换方法教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：电商产品分类列表展示教师指导学生自学多媒体布置作业提出要求教学过程设计6.3 浮动属性、清除属性、溢出处理（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解 浮动属性：flo

7、at语法：float: none | left | right;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践 float 属性。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 清除浮动属性clear语法：clear: left | right | both;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践 clear属性。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 溢出处理 overflow：语法：overflow: visible | hidden | auto | scroll;讲授法多媒体课件演示教师

8、：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践 overflow实验教学法多媒体教师：辅导交流学生：实践练习课堂总结（1）浮动属性float（2）清除浮动属性clear（3）溢出处理 overflow教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：电商商品展示页面教师指导学生自学多媒体布置作业提出要求教学过程设计6.4 定位方式（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解元素的定位：语法：position: static | relative | absolute | fixed;方式一：静态定位static方式二：相对定位relative讲授法多媒体

9、课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践方式一：静态定位static、方式二：相对定位relative实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解方式三：绝对定位absolute方式四：固定定位fixed讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践 方式三：绝对定位absolute、方式四：固定定位fixed 。实验教学法多媒体教师：辅导交流学生：实践练习项目案例综合实例：数字化教学资源平台网站布局案例演示法多媒体课件演示教师：讲授知识学生：边听边练学生实践自行完成数字化教学资源平台网站布局实验教学法多媒体教师：辅导交

10、流学生：实践练习课堂总结方式一：静态定位static方式二：相对定位relative方式三：绝对定位absolute方式四：固定定位fixed教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：数字化教学资源平台网站布局教师指导学生自学多媒体布置作业提出要求教学过程设计6.5 任务实施：使用盒模型布局网站banner部分（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述在任务5实现banner区域的基础上，综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。任务驱动教学法多媒体教师：分析任务学生：信息交流任务分析综合应用CSS中盒布局的方法与思维进行页面布局。任务驱动教学法多媒体教师：辅助分析学生：交流讨论任务计划小组讨论，将任务分解任务驱动教学法多媒体课件演示教师：辅助分析学生：交流讨论任务实施完成项目要分为以下几步。第一步：编写<banner>区域的HTML结构代码。第二步：编写<banner>区域的CSS代码，通过定位确定3幅图片的位置，通过box-shadow属性设置图片的阴影效果。任务驱动教学法多媒体教师：辅导交流学生：实践练习任务汇报