《网页设计与制作》课程教学单元设计 淮安信息职业技术学院
第 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 浮动属性、清除属性、溢出处