第4章 CSS3选择器_教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效 博学谷——让IT教学更简单，让IT学习更有效 PAGE 2 PAGE 1 传智播客 《HTML5+CSS3网站设计基础教程》 教学设计 课程名称： HTML5+CSS3网站设计基础教程 授课年级： 2016年级 授课学期： 2016学年第一学期 教师姓名： 某某老师 201 年 月 日 课题名称 第4章 CSS3选择器 计划课时 8课时 内容分析 选择器是CSS3中一个重要的内容，使用它可以大幅度提高开发人员书写和修改样式表的效率。实际上，在上一章中已经介绍过一些常用的选择器，这些选择器基本上能够满足Web设计师常规的设计需求。本章将向读者介绍CSS3中新增的多种选择器。通过本章的学习，读者可以更轻松的控制网页元素。 教学目标 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。 理解关系选择器的用法，能够准确判断元素与元素间的关系。 掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。 掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。 掌握CSS伪类，会使用CSS伪类实现超链接特效。 重点及措施 教学重点：属性选择器、结构化伪类选择器、伪元素选择器、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：结构化伪类选择器、伪元素选择器。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 第一课时 （讲解E[att^=value]属性选择器、E[att$=value]属性选择器、E[att*=value]属性选择器） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第三章“CSS3入门”的相关知识。 通过上一章的学习，我们知道：继承性是CSS的基本特性，但并不是所有的CSS属性都可以继承，请举例说明哪些属性不具有继承性？ 答案： 下面的属性就不具有继承性： 边框属性 外边距属性 内边距属性 背景属性 定位属性 布局属性 元素宽高属性 说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 在CSS3中，提倡使用选择器来将样式与元素绑定起来，这样，在样式表中什么元素与什么样式相匹配变得一目了然，修改起来也方便。其中“属性选择器”是CSS3新增选择器种类之一，那么属性选择器又分为哪几种，分别为何含义呢？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： CSS3新增了三种属性选择器，具体如下所示。 E[att^=value]属性选择器，指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。 E[att$=value]属性选择器，指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。 E[att*=value]属性选择器，指选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串。 知识点讲解 讲解“E[att^=value]属性选择器” （1）、教师展示PPT对“E[att^=value]属性选择器”的具体格式进行讲解。 （2）、教师展示PPT对“E[att^=value]属性选择器”的用法进行讲解并通过代码进行演示。 （3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“E[att$=value]属性选择器” （1）、教师展示PPT对“E[att$=value]属性选择器”的具体格式进行讲解。 （2）、教师展示PPT对“E[att$=value]属性选择器”的用法进行讲解并通过代码进行演示。 （3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“E[att*=value]属性选择器” （1）、教师展示PPT对“E[att*=value]属性选择器”的具体格式进行讲解。 （2）、教师展示PPT对“E[att*=value]属性选择器”的用法进行讲解并通过代码进行演示。 （3）、与前两种属性选择器做对比区分。 （4）、学生练习，教师巡视，对疑难问题进行解答。 阶段小结 小结 重点：属性选择器的用法。 易错点：注意区分各个属性选择器的书写方式及含义。 答疑 教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固本课时知识点 学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地了解“E[att^=value]属性选择器、E[att$=value]属性选择器、E[att*=value]属性选择器”等知识