HTML5 CSS3网站设计基础教程教案（人邮）第4章 CSS3选择器教学设计.docx

《HTML5 CSS3网站设计基础教程教案（人邮）第4章 CSS3选择器教学设计.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3网站设计基础教程教案（人邮）第4章 CSS3选择器教学设计.docx（15页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、教学课题第四章CSS3选择器专业大 类计算机大类所属课程静态网页设计授课对 象计算机应用技术专业 学生所选教材HTM L 5+CSS3网站设计基础教程授课地 点机房授课时长6课时教学分析内容分析本课程根据计算机应用技术专业人才培养方案，确定该课程 是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生 能够掌握CSS3新增选择的使用方法，并能选择正确的选择器完成网 页效果。学会制作各种企业、门户、电商类网站。“HTML概述”选自HTML5+CSS3网站设计基础教程第四章节 内容，为后面章节的学习打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如 下：1 .知

2、识基础：本课程开设在大一第二学期，大局部学生对程序设 计语言有了一定的了解，具备一定的平面设计基础。2 .能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代 码编写能力。3 .行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象 化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发 比拟感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1 .掌握属性选择器的使 用方法。2 .理解层次选择器的用 法。3 .掌握常用的结构化伪 类选择器。4 .掌握伪元素选择器的 使用1 .能够运用属性选择器 为元素添加样式。2 .能够正确判断元素与 元素间的关系。3 .能够对页面中

3、使用相 同名称的元素设置不同 的样式。4 .能够在元素的前面或 后面插入内容1 .培养学生计算机思维 的能力，帮助学生树立 科学严谨的负责态度。2 .培养学生的团队协作 意识，自主解决问题的 能力。教学重点属性选择器、层次选择器、结构化伪类选择器教学难点结构化伪类选择器、伪元素选择器教学策略教学组织本课以学生的疑问、观点和观察结果为教学契机，采用探究式学完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。预习4.4节【伪元素选择器】。第五课时(讲解:first-letter 和:first-line 选择器、:first-letter 和:first-line 选择器)，复习上节课内容

4、在讲解本节内容前.，抛出以下问题让学生回答，以复习上节课 内容。1、请问:nth-child(n)和:nth-lastchild(n)选择器与:nth-of-type(n)和:nth-last-of-type(n)选择器的区别是什么？答案：这两种选择器的不同之处在于 :nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元 素的特定类型的第n个子元素和倒数第n个子元素。 :nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的 第n个子元素和倒数第n个子元素，与元素类型无关。说明：教师可根据学生对上述问题的回答情况，对以上

5、问题进行 简单讲解或直接进入本课时新内容的学习。本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如何对同种类型的对象前面或者后面加上统一的文字或者图标呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：答案：可以通过:before和:after选择滞在元素之前或者之后插入 内容。令知识点讲解 讲解:first-letter 和:first-line 选择器”(1)、教师 PPT 展示对 “:first-letter和:first-line 选择器”的具 体格式进行讲解。(2)、教师 PPT 展示对:first-letter 和:first-line 选择器”的 用法进

6、行讲解并通过代码进行演示。 讲解”:before选择器和:after选择器”（1） 教师PPT展示对“:before选择器和:after选择器”的 具体格式进行讲解。（2）、教师PPT展示对“:before选择器和:after选择器”的 用法进行讲解并通过代码进行演示。（3）、教师讲解区分”:before选择器和:after选择器”这两 种选择器的区别以及使用时的考前须知。（4）、教师让学生自行尝试，理解:before选择器和:after选 择器”的语法，并能灵活运用。（5）、学生练习，教师巡视，对疑难问题进行解答。令阶段小结小结重点：before选择器和:after选择器。答疑教师询问学生对

7、于知识点还有什么不理解的地方。针对学生不 理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。 以此使学生掌握 :first-letter 和:first-line 选择器、before 选择器和:after选择器”等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学, 可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。预习4.5节【阶段案例一一制作。ffice简介】。 第六课时（讲解制作office简介页面），复习上节课内容在讲解本节内容前，抛出以下问

8、题让学生回答，以复习上节课 内容。1、请问:before选择器和:after选择器的用途是什么？答案： :before选择器、：after选择器均为伪元素选择器，用于在被选元素的内 容前面或后面插入内容，必须配合content属性来指定要插入的具体内 容。说明：教师可根据学生对上述问题的回答情况，对以上问题进行 简单讲解或直接进入本课时新内容的学习。4本课时内容学习令案例讲解案例描述本章主要讲解了 CSS3新增选择器。为了使读者能够更好地认识CSS3新增选择器，本节将通过案例的形式分步骤地制作 office简介页面，默认效果如下列图所示。B OfficeMrrtX +J C 。文件 I C：A

9、J$r$/admin/De$ktop/ttM/P9lSt: CSS3选持3(/第四章：CSS3选择需派Microsoft Office 及产品介tg(1 OfficeE3QQoffiswordoxcdpptA Microsoft OfficMrosoft Office整C1Z公图开发的一看于VSSndcmi建作和办公欧*.Word. (xc4. PowcrPonttC. Microsoft office Word M案例展示效果页面由标题、组件列表及组件介绍三局部组成D offkfWD offkfWx +C 。文件G/Users/admin/Desktop微折/第四盘：CSS3选择器;第四空：

10、CSS3选择善源2 .样式分析仔细观察效果图 组件列表有超链接样式还有锚点跳转效果 组件内容标题基数与偶数行颜色有差异组件介绍文字内容前面都有图片工程符号可以使用CSS3选择器进行样式设置。案例实现教师带着学生分步骤地进行网页制作，通过分析效果图、制作 页面、制作页面链接等步骤完成页面的制作，并指出其中需要 注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组 之间可以协作讨论，教师巡视，对疑难问题进行解答。令阶段小结小结重点：制作。ffice简介页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不 理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生再制

11、作一次“office简介页面”。以此 使学生更熟练地掌握CSS3新增选择器知识点，并能够通过 CSS3新增选择器实现元素的样式设置。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学， 可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。复习本课时的所有知识点和案例，加强巩固。课后教师活动学生活动教学资 源与手 段设计意图教师在职教云平 台布置拓展任 务。根据课中修改意见，继续完 善office简介页面。职教云 平台作 业提交 功能。内化知识，学以致用。教学评价1 .评价构成：线上学习平台记录成绩和线下实践操作成

12、绩构成。2 .评价结果：为了多元化全过程考核评价，学生课堂学习评价表：科学量化学生 各环节学习情况；学习周报：准确呈现学生学习趋势；好友积分排行表：显示与 同学好友学习情况的比照。教学反思教学效果本教学设计采用线上线下的混合教学模式，借助信息化手段，以学生 为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教 学，同时加强专业教育，注重学生全面开展，在教学过程中注重引导 和培养学生的爱岗敬业坚持不懈的职业精神。诊改措施1 .教学过程中引入了职教云平台，平台虽然给予了学生较为中肯的建 议，但还缺乏有效的监督手段。2 .在今后的工作中，将注重对学生的成长性评价，努力为学生的个性 化学习和终

13、身学习提供帮助。教学实施 课前与实施习方式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难 点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布 置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生 为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教 学。同时加强德育渗透，注重学生全面开展，在教学过程中注重引导 和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新 的艺术家精神。教学方法本课程采用探究式教学方法，分为三大任务：一是基础理论局部， 通过学生讲解，教师总结。二是学生提供分析作品，在相互学习中共 同提高，加深印象。三是

14、将专业教育渗透到教学中，实践教学案例的 选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的 专业学习打下良好的基础。教学资源 与手段电子教学资料（如PPT,知识笔记，微课视频）、职教云平台等， 辅助学生自主学习和探究，解决教学重难点，提高学习效率。教师活动学生活动教学资 源与手 段设计意图1 .发布学习资 源，比方：教学 PPT、知识清单 等，下达任务。2 .查看学生提交 职教云平台作 业，根据提交作 业调整教学策 略，确定教学难 点。1.学生领取任务单，借助职 教云微课初步了解属性选 择器、层次选择器、结构化 伪类选择器和伪元素选择 器的使用方法。1.教学资 源： 教 学 PPT、

15、知 识清单、 职教云 微课。2.教学手 段： 职教云 平台作 业提交 功能。1 .学生预习，为课中做 准备，培养学生的自 主学习能力。2 .教师通过作业反应 掌握学生的预习情 况，确定教学难点。课中第一课时（讲解属性选择器），复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第三章 “CSS3入门”的相关知识。1 .上一章“CSS3入门”的学习，我们知道：CSS常用选择器有哪 些？请举例说明？答案：CSS常用选择器有： 通用选择器（*） 标签选择器（元素名称） 类选择器（类名） Id选择器（#）等说明：教师可根据学生对上述问题的回答情况，对以上问题进 行简单讲解或直接进入本课时新内

16、容的学习。工本课时内容学习教学过程教学过程令分组讨论在CSS3中，使用选择器可以将设置的样式应用于元素，如果 需要修改，直接对相应的选择器进行修改即可，非常的方便。在上一章我们学习了 CSS常用选择器，本章在上一章的基础 上，学习CSS3新增选择器。其中“属性选择器”是CSS3新 增选择器种类之一，那么属性选择器又分为哪儿种，分别为 何含义呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：教师对上述问题进行解释：CSS3新增了五种属性选择器，具 体如下所示。属性选择器语法描述EattEatt=value选择具有att属性且属性值等于value字符串的E元 素EattA=value选择具

17、有att属性且属性值包含前缀为value字符串的E元素Eatt$=value选择具有att属性且属性值包含后缀为value字符串 的E元素Eatt*=value选择具有att属性且属性值包含value字符串的E元 索选择具有att属性的E元素令知识点讲解教师播放微课视频学习属性选择器讲解属性选择器”(1)、教师PPT展示对属性选择器”的具体格式进行讲 解。(2)、教师PPT展示对属性选择器”的用法进行讲解 并通过代码进行演示。讲解Eatt=value属性选择器”教师PPT展示对“Eatt=value属性选择器”的具体格 式进行讲解。(2)、教师PPT展示对“Eatt=value属性选择器”的用

18、法进 行讲解并通过代码进行演示。讲解Eatt八=value属性选择器”(1)、教师PPT展示对“EattA=value属性选择器”的具体格 式进行讲解。(2)、教师PPT展示对“EatS=value属性选择器”的用法进 行讲解并通过代码进行演示。讲解Eatt$=value属性选择器”(1)、教师PPT展示对“Eatt$=value属性选择器”的具体格 式进行讲解。(2)、教师PPT展示对“Eatt$=value属性选择器”的用法进 行讲解并通过代码进行演示。讲解Eatt*=value属性选择器”(1)、教师PPT展示对“Eatt*=value属性选择器”的具体格 式进行讲解。(2)、教师PPT

19、展示对“Eatt*=value属性选择器”的用法进 行讲解并通过代码进行演示。(3)、教师通过案例讲解各种属性选择器的不同，通过代码进行比照区分。（4）、学生练习，自主提问，教师巡视并对疑难问题进行解 答。令阶段小结小结重点：属性选择器的用法。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不 理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。 以此使学生更熟练的了解各种属性选择器的使用方法，并能够 选择正确的属性选择器创立样式。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进 行点评。预习4.2节【层次选择器】。第二课时

20、（讲解后代选择器（）和子代选择器（）、兄弟选择器（+、 ）4复习上节课内容属性选择器有哪些？答案：属性选择器有： EattEatt=value EattA=valueEatt$=value Eatt*=value，本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在CSS3中，子代选择器和兄弟选择器有什么不同了？请小组代表对以上问题发表见解，教师对上述问题进行解释：子代选择器可以选择某个元素的子元素兄弟选择器用来选择与某元素之后的兄弟元素令知识点讲解讲解“后代选择器（）”（1）、教师PPT展示对“后代选择器（）”的具体格式进行 讲解。（2）、教师PPT展示对“后代选择器（）”

21、的用法进行讲解 并通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“子代选择器（）”（1）、教师PPT展示对“子代选择器（）”的具体格式进行 讲解。（2）、教师PPT展示对“子代选择器（）”的用法进行讲解 并通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“兄弟选择器（+、）”（1）、教师PPT展示对“兄弟选择器（+、）”的具体格式进 行讲解。（2）、教师PPT展示对“兄弟选择器（+、）”的用法进行讲 解并通过代码进行演示。（3）、教师讲解相临兄弟选择器（+ ）和通用兄弟选择器（） 的不同之处并通过代码进行演示。 临近兄弟选择器选择器使用加号“ +

22、”来链接前后两个选择器。选 择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元 素。 普通兄弟选择器使用“”来链接前后两个选择器。选择器中的两 个元素有同一个父亲，但第二个元素不必紧跟第一个元素。（4）、学生练习，教师巡视，对疑难问题进行解答。令阶段小结小结重点：层次选择器的用法。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不 理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。 以此使学生更熟练的了解层次选择器的使用方法。令布置作业完成“补充案例”，通过平台提交给教师，教帅卜节课进 行点评。预习43节【结构伪类选择器】。

23、第三、四课时（讲解基本结构伪类选择器、与元素位置有关的结构伪类选择 器），复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课 内容。1、通过上节课的学习，我们学习了层次选择器。在层次选择 中，两种兄弟选择器有什么不同了？答案：兄弟选择器分为临近兄弟选择器和普通兄弟选择器临近兄弟选择器选择器使用加号“ + ”来链接前后两个选择 器。选择器中的两个元素有同一个父亲，而且第二个元素必须 紧跟第一个元素。普通兄弟选择器使用“”来链接前后两个选择器。选择 器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个 元素。说明：教师可根据学生对上述问题的回答情况，对以上问题进 行简单讲解或直

24、接进入本课时新内容的学习。1 本课时内容学习小分组讨论对新课进行讲解前，先让学生分组讨论以下问题：1 .在网页中，虫面的美化非常重要,在网页中有一种显不方式， 奇数页和偶数页显示的效果会有一些不同，这种效可以通过结 构伪类选择器来实现。那么，结构伪类选择器都包含哪些呢？ 教师对上述问题进行解释：结构伪类选择器的分类具体如下： ：root选择器用于匹配文档根元素。 ：not选择器用于匹配非指定元素/选择器的每个元素。 :empty选择器用来选择没有子元素或内容为空的元素 :target选择器用于为页面中的某个target元素（该元素的id 被当做页面中的超链接来使用）指定样式。 :only-ch

25、ild选择器用于匹配某个父元素仅有一个子元素的元 素。 ：first-child选择器和:last-child选择器分别用于为父元素中的第 一个或者最后一个子元素设置样式。 :nth-child(n)和:mh-last-chHd(n)选择器用于匹配属于父元素的第 n个子元素和倒数第n个子元素，与元素类型无关。 :nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素 的特定类型的第n个子元素和倒数第n个子元素。令知识点讲解讲解“:root选择器”(1)、教师PPT展示对“:root选择器”的具体格式进行讲解。(2)、教师PPT展示对“:root选择器”的

26、用法进行讲解并通 过代码进行演示。 讲解”:not选择器”(1)、教师PPT展示对:not选择器”的具体格式进行讲解。(2)、教师PPT展示对”:not选择器”的用法进行讲解并通 过代码进行演示。 讲解:empty选择器”(1)、教师PPT展示对“:empty选择器”的具体格式进行讲 解。(2)、教师PPT展示对“:empty选择器”的用法进行讲解并 通过代码进行演示。讲解”:target选择器”(1)、教师PPT展示对“:target选择器”的具体格式进行讲 解。(2)、教师PPT展示对“:target选择器”的用法进行讲解并 通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答

27、 讲解”:onlychild选择器”(1) 教师PPT展示对:only-child选择器”的具体格式进行 讲解。(2)、教师PPT展示对:only-child选择器”的用法进行讲 解并通过代码进行演示。 讲解:first-child 和：lastchild 选择器”(1)、教师PPT展示对:first-child和:山st-child选择器”的 具体格式进行讲解。(2)、教师 PPT 展示对 “:first-child 和：last-child 选择器”的 用法进行讲解并通过代码进行演示。(3)、学生练习，教师巡视，对疑难问题进行解答。 讲解:nth-child(n)和:nth-last-ch

28、ild(n)选择器”(1)、教师 PPT 展示对“:first-child 和：last-child 选择器”的 具体格式进行讲解。(2)、教师 PPT 展示对 :nth-child(n)和:nth-last-child(n)选择 器”的用法进行讲解并通过代码进行演示。(3)、教师让学生自行尝试，理解”:nth-child(n)和:nth-last- child(n)”的语法，并能灵活运用。(4)、学生练习，教师巡视，对疑难问题进行解答。 讲解:nth-of-type(n)和:nth-last-of-type(n)选择器”(1)、教师 PPT 展示对 “:nth-of-type(n)和:nth

29、-last-of-type(n) 选择器”的具体格式进行讲解。(2)、教师 PPT 展示对 “:nth-of-type(n)和:nth-last-of-type(n) 选择器”的用法进行讲解并通过代码进行演示。(3)、教师讲解区分 :nth-of-type(n)和:nth-last-of-type(n)选 择器”与 “:nth-child(n)和:nth-last-child(n)选择器”这两种选 择器的区别。(4)、教师让学生自行尝试，理解:nth-of-type(n)和:nth-last- of-type(n)选择器”的语法，并能灵活运用。(5)、学生练习，教师巡视，对疑难问题进行解答。令

30、阶段小结小结重点:nth-child(n)和:nth-last-child(n)选择器,:nth-of-type(n) 和:nth-last-of-type(n)选择器。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不 理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带着学生对本课时所学知识点进行回顾。 以此使学生掌握:root选择器、：not选择器、：only-child选择 器、:first-child 和:last-child 选择器、：nth-child(n)和:nth-last- child(n)选择器、:nth-of-type(n) :nth-last-of-type(n)选择 器、：empty选择器、：target选择器”等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学, 可以通过补充案例对相关知识点进行巩固。令布置作业