网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务6 运用盒模型网页布局.docVIP

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院 第 PAGE 6 页 共 NUMPAGES 6 页 《网页设计与制作》课程教学单元设计 单元6 运用盒模型网页布局 授课教师：网页设计与制作 授课班级: 学时：10 教学条件 实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络 教学素材 教材、课件、实训项目单、授课录像、案例库、教学网站等 教学目标设计 知识目标： （1）掌握盒子模型的原理； （2）掌握盒子模型的层次与的宽高计算； （3）掌握盒子的border、margin、padding的使用； （4）掌握盒子的CSS3新增属性； （5）掌握元素的类型与转换； （6）掌握浮动属性、清除属性、溢出处理； （7）掌握元素的定位方式。 能力目标： （1）能正确应用盒子模型布局网页页面； （2）能根据网页页面效果，运用盒子模型与定位技术布局页面。 任务描述 本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。 教学内容 （1）盒子模型的原理； （2）盒子的border、margin、padding的使用； （3）盒子的CSS3新增属性； （4）元素的类型与转换； （5）浮动属性、清除属性、溢出处理； （6）元素的定位方式。 重点： （1）盒子模型的原理； （2）盒子border、margin、padding的使用； （3）盒子的CSS3新增属性； （4）元素的类型与转换； （5）浮动属性、清除属性、溢出处理； （6）元素的定位方式。 难点： （1）盒子的CSS3新增属性； （2）元素的类型与转换； （3）浮动属性、清除属性、溢出处理； （4）元素的定位方式。 任务分析与实现 （1）任务分析； （2）任务实现代码。 教学过程设计 6.1 盒子模型（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 任务描述 本任务就是综合运用盒子模型、浮动、定位等技术实现“门户网站”的banner部分的页面效果。 讲授法 多媒体 教师：分析任务 学生：信息交流 知识讲授 讲解：盒子模型的原理、盒子模型的层次与宽高 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践盒子模型的原理、盒子模型的层次与宽高计算机方法 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解盒子模型的常用属性： 边框border属性 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践边框border属性 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解盒子模型的常用属性： 边距属性 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践padding内边距属性、margin外边距属性。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 盒子模型的原理； 盒子模型的常用属性：边距属性、边距属性的使用方法 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 浏览当当网，认识购物页面中盒子模型的使用方法与技巧。 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 6.2 盒子的CSS3新增属性、类型与转换（学时数：2） 主要步骤 教学内容 教学方法 教学手段 师生活动 知识讲授 讲解 CSS3新增属性：圆角边框、图片边框 语法：border-radius: 半径值1/半径值2; 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 创建一个新页面进行实践圆角边框、图片边框的使用方法。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 CSS3新增属性： 阴影效果box-shadow 、阴影效果box-shadow 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行实践阴影效果box-shadow 、阴影效果box-shadow 的使用方法。 实验教学法 多媒体 教师：辅导交流 学生：实践练习 知识讲授 讲解 元素的类型与转换： 元素的类型块级元素、行内元素、行内元素的区别与相互转化 讲授法 多媒体 课件演示 教师：讲授知识 学生：边听边练 学生实践 学生创建一个新页面进行实践元素的类型与转换方法 实验教学法 多媒体 教师：辅导交流 学生：实践练习 课堂 总结 （1）CSS3新增属性 （2）元素的类型与转换方法 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 综合实例：电商产品分类列表展示 教师指导 学生自学 多媒体 布置作业 提出要求 教学过程设计 6.3 浮动属性、清除属性、溢出处