Web前端开发之网页设计 教案 单元5 CSS3新特性.docx

《Web前端开发之网页设计 教案 单元5 CSS3新特性.docx》由会员分享，可在线阅读，更多相关《Web前端开发之网页设计 教案 单元5 CSS3新特性.docx（7页珍藏版）》请在第一文库网上搜索。

1、Web前端开发之网页设计课程教学单元设计教学单元ECSS3新特性授课教师：授课班级：学时：18教学条件预装Web前端开发工具HBUikier等的计算机；局域网环境；教学广播软件教学素材教材、教学文档、教学课件、案例项目库、教学平台等教学目标设计知识目标：CSS3基本概念CSS3新增选择器CSS3文本新特性(4)CSS3背景和边框新特性CSS3盒模型新特性(6)CSS3动效新特性能力目标：了解CSS3的基本概念。掌握CSS3新增选择器的用法。(3)掌握CSS3新增常用文本属性，会设置多列文本的设置，以及使用自定义字体。(4)掌握CSS3关于背景和边框新增的常用属性，会设置渐变背景色、边框圆角以及

2、边框阴影。了解CSS3盒模型类型的设置，掌握弹性盒布局的使用。(6)了解CSS3动效相关新增属性；能够在网页中应用过渡、变形及动画等动态效果。教学内容CSS3基本概念，常用颜色、长度单位。CSS3新增选择器CSS3新增文本属性、多列文本、自定义字体。(4)CSS3新增背景和边框属性，渐变背景色、边框圆角、边框阴影。CSS3盒模型类型、弹性盒布局。(6)CSS3过渡、变形及动画。重点：CSS3的模块化构成，常用颜色、长度单位。文本溢出的处理。(3)圆角边框的设置。(4)文本阴影、盒阴影的设置。(5)border-box盒类型的使用。难点：多列文本和自定义字体的设置。渐变背景色的设置。弹性盒布局的

3、应用。(4)过渡、变形及动画的应用。任务5-1：了解CSS3基本概念。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入什么是CSS3?教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1) CSS3的发展史(2) CSS3的模块化CSS3的浏览器兼容性CSS3支持的颜色表示CSS3支持的长度单位启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：CSS3中不同颜色设置方法。操作2：CSS3中不同长度单位的使用。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：使用不同颜色设置方法设置段落背景色。

4、实战2：分别使用rem与em长度单位设置字体大小。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结CSS3的基本概念。归纳总结CSS3中不同的颜色表示方法以及长度单位的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业5.1在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业任务5-2：掌握CSS3新增选择器的用法。(4学时)主要步骤教学内容教学方法教学手段

5、师生活动任务引入选择器的作用及CSS2常用选择器教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解(1)CSS3新增属性选择器。CSS3结构伪类选择器。(3)CSS3UI伪类选择器。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用新增属性选择器选择页面元素。操作2：使用结构伪类选择器选择页面元素。操作3：使用UI伪类选择器选择页面元素。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：使用新增属性选择器选择列表项目。实战2：使用结构伪类选择器选择列表项目。实战3：使用UI伪类选择器选择表单元素。动手

6、实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结CSS3新增属性选择器。归纳总结CSS3结构伪类选择器。归纳总结CSS3UI伪类选择器。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业5.2在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务5-3：掌握C6S3文本新特性。(4学时)主要步骤教学内容教学方法教学手段师生活动任务引入回顾CS

7、S2常用文本属性的设置教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解CSS3新增文本相关属性。(2) CSS3设置多列文本。(3) CSS3设置自定义字体。启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：长单词的换行处理。操作2：文本溢出父容器的处理。操作3：text-shadow属性设置文本阴影。操作4：多列文本及自定义字体设置。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：CSS长单词及文本溢出处理。实战2：CSS3设置多列文本及自定义字体。动手实践做中学多媒体系统操作学生：实践操作老师：巡

8、视检查评估讨论(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结CSS3新增文本相关属性的使用。(2)归纳总结CSS3设置多列文本及自定义字体的注意事项。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业5.3在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务5-4：掌握CSS3背景和边框新特性。(4学时)主要步骤教学内容教学方法教学手段师生活动任务引入回顾CSS2背景和边框属性的设置教师讲授

9、启发引入多媒体教师：问题提问学生：问题讨论知识讲解CSS3新增背景相关属性(2) CSS3设置渐变背景色(3) CSS3新增边框相关属性启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：设置背景位置、背景大小以及背景裁切。操作2：设置线性、径向渐变背景色。操作3：设置圆角边框、图片边框以及边框阴影。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：设置不同图片背景效果。实战2：为盒子设置不同渐变背景色。实战3：为盒子设置不同边框阴影。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实

10、战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结CSS3新增背景属性的使用。归纳总结渐变背景色的设置方法。归纳总结圆角边框、图片边框以及边框阴影的设置方法。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业5.4在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务5-5：掌握CSS3盒模型新特性。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入什么是盒模型？教师讲授启发引入多媒体教师：问题提问学生：问题讨

11、论知识讲解(1)盒模型box-sizing属性弹性盒布局弹性容器及弹性子元素启发讲解讨论归纳多媒体课件演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用box-sizing属性设置盒模型。操作2：弹性容器的设置。操作3：弹性子元素的设置。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1不同盒模型设置效果的对比。实战2：使用弹性盒布局安排页面元素。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教

12、师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结(1)归纳总结不同盒模型的区别。归纳总结弹性容器的常见设置。归纳总结弹性子元素的常见设置。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后5.5在线练习作业作业练习在线练习平台老师：布置作业提出要求学生：完成作业教学过程设计任务5-6：掌握C6S3动效新特性。(2学时)主要步骤教学内容教学方法教学手段师生活动任务引入通过CSS3实现网页动态效果的优势教师讲授启发引入多媒体教师：问题提问学生：问题讨论知识讲解CSS3过渡效果的实现原理。CSS3变形效果的实现原理。(3)CSS3动画效果的实现原理。启发讲解讨论归纳多媒体课件

13、演示教师：知识讲解学生：记录笔记师生互动交流示范操作操作1：使用transition属性设置过渡效果。操作2：使用IranSfornI属性设置过渡效果。操作3：使用keyframes规则创建动画，使用animation属性调用动画。问题引导操作演示分析归纳多媒体系统演示老师：操作演示学生：观摩思考老师：归纳总结实战训练实战1：为盒子增加过渡的变化效果。实战1：为盒子应用2D和3D变形。实战2：使用CSS3制作“飞行的小鸟”动画。动手实践做中学多媒体系统操作学生：实践操作老师：巡视检查评估讨论(1)展示学生实战任务完成的效果。评估讨论实战任务完成的正确性。评估讨论实战任务完成的规范性；(4)记载学生实战认为完成的考核结果。教师启发讨论归纳分数激励实训项目单学生：演示交流老师：点评激励课堂总结归纳总结CSS3新增属性选择器的使用。归纳总结CSS3结构伪类选择器的使用。归纳总结CSS3UI伪类选择器的使用。教师讲解多媒体课件演示学生：整理笔记老师：引导创新课后作业5.6在线练习作业练习在线练习平台老师：布置作业提出要求学生：完成作业