任务6-运用盒模型网页布局

《任务6-运用盒模型网页布局》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、《网页设计与制作》课程教学单元设计单兀6运用盒模型网页布局授课教师：网页设计与制作授课班级：学时：10教学条件实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、实训项目单、授课录像、案例库、教学网站等教学目标设计知识目标：（1）掌握盒子模型的原理；（2）掌握盒子模型的层次与的宽高计算；（3）掌握盒子的bordersmarginnpadding的使用；（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）

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

4、方法实验教学法多媒体教师：辅导交流学生：实践练习知识讲解盒子模型的常用属性：讲授法多媒体教师：讲授知识讲授边框border属性课件演示学生：边听边练学生创建一个新页面进行实践边框border实验教学多媒体教师：辅导交流实践属性法学生：实践练习知识讲解盒子模型的常用属性：讲授法多媒体教师：讲授知识讲授边距属性课件演示学生：边听边练学生实践仓

5、J建一个新页面进行实践padding内边距属性、margin外边距属性。实验教学法多媒体教师：辅导交流学生：实践练习课堂总结盒子模型的原理；盒子模型的常用属性：边距属性、边距属性的使用方法教师讲解多媒体课件演示整理笔记

6、引导创新任务浏览当当网，认识购物页面中盒子模型教师指导多媒体布置作业拓展的使用方法与技巧。学生自学提出要求6.2盒子的CSS3新增属性、类型与转换（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲解CSS3新增属性：圆角边框、图片边框语法：border-radius:半径值1/半径值2;讲授法多媒体教师：讲授知识讲授课件演示学生：边听边练学生创建一个新页而进行实践圆角边框、图实验教学多媒体教师：辅导交流实践片边框的使用方法。法学生：实践练习知识讲授讲解CSS3新增属性：阴影效果box-shadow>阴影效果box-shadow讲授法多媒体课件演

7、示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行实践阴影效果box-shadow阴影效果box-shadow的使用方法。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解元素的类型与转换：元素的类型块级元素、行内元素、行内元素的区别与相互转化讲授法多媒体课件演示教师：讲授知识学生：边听边练学生学生创建一个新页而进行实践元素的实验教学多媒体教师：辅导交流实践类型与转换方法法学生：实践练习课堂（1）CSS3新增属性教师讲解多媒体整理笔记总结（2）元素的类型与转换方法课件演示引导创新任务拓展综合实例：电商产品分类列表展示教师指导学生自学多媒体

8、布置作业提出要求6.3浮动属性、清除属性、溢出处理(学时数：2)主要步骤教学内容教学方法教学手段师生活动知识讲授讲解浮动属性：float语法：float:none

9、left

10、right;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践float属性。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解清除浮动属性Clear语法：clear:left

11、right

12、both;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践clear属性。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解溢

13、出处理overflow：语法：overflow:visible

14、hidden

15、a