第3章 CSS3入门_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 12 PAGE 3 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第3章 CSS3入门 计划课时 8课时 内容分析 随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。本章将对CSS3的发展史、浏览器的支持情况以及相关文本样式属性进行详细讲解。 教学目标 了解CSS3的发展历史以及主流浏览器的支持情况。 掌握CSS基础选择器，能够运用CSS选择器定义标记样式。 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。 理解CSS优先级，能够区分复合选择器权重的大小。 重点及措施 教学重点：CSS核心基础、文本样式属性、CSS层叠性与继承性、CSS优先级。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点： CSS层叠性与继承性、CSS优先级。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解CSS概述、CSS3发展历史、CSS3浏览器支持情况） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第二章“HTML5页面元素及属性”的相关知识。 通过上一章的学习，我们知道：HTML5文档的基本格式中，有一个重要的标记——!DOCTYPE标记。请简要描述什么HTML5中的“!DOCTYPE声明”及其用法？ 答案： !DOCTYPE标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下： !doctype html !doctype html 只有在开头处使用!DOCTYPE声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 在网页设计中，运用CSS3技术能够让原有的网站变得趣味盎然，很多站点都为自己的页面添加了各种炫酷的CSS3效果。但是CSS3技术是怎样发展起来的？哪些浏览器能够很好的兼容CSS3呢？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： CSS基础选择器主要包括四种，具体如下： 20世纪90年代初，HTML语言的诞生，各种形式的样式表也随之出现。1994年哈坤·利提出了CSS的最初建议，CSS发展至今出现了4个版本，对它们的具体介绍如下： （1）CSS1 1996年12月W3C发布了第一个有关样式的标准CSS1。这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。 （2）CSS2 1985年5月，CSS2正式推出，这个版本开始使用样式表结构，该版本也是目前正在使用的版本。 （3）CSS2.1 2004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。 （4）CSS3 早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始支持其中的绝大部分特性。 CSS3给我们带来了众多全新的设计体验，但是并不是所有的浏览器都完全支持它。其中，谷歌（Chrome）和Safari浏览器对从CSS3的支持较好。 知识点讲解 讲解“CSS概述” （1）、教师展示PPT对“CSS概念及作用”进行讲解，并打开网页进行效果展示。 （2）、教师讲解CSS在HTML5中的书写位置，并使用代码进行演示。 （3）、教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。 （4）、教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。 （5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“CSS3发展历史” （1）、教师展示PPT对“CSS3发展历史”进行说明，并对比各个版本间的区别与联系。 （2）、教师展示PPT对“CSS3发展历史”进行讲解并通过代码进行演示。 （3）、学生自