《HTML5+CSS3网站设计基础教程》
教学设计
课程名称： HTML5+CSS3网站设计基础教程
授课年级： 2016年级       
授课学期： 2016学年第一学期
教师姓名：  某某老师       
201  年  月  日
课题名称
团队网页设计
计划课时
4课时
内容分析
选择器是CSS3中一个重要的内容，使用它可以大幅度提高开发人员书写和修改样式表的效率。实际上，在上一章中已经介绍过一些常用的选择器，这些选择器基本上能够满足Web设计师常规的设计需求。本章将向读者介绍CSS3中新增的多种选择器。通过本章的学习，读者可以更轻松的控制网页元素。
教学目标
● 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。
● 理解关系选择器的用法，能够准确判断元素与元素间的关系。
● 掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。
● 掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。
● 掌握CSS伪类，会使用CSS伪类实现超链接特效。
重点及措施
教学重点：属性选择器、结构化伪类选择器、伪元素选择器、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点：结构化伪类选择器、伪元素选择器。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式
采用项目化教学方式，使用PPT分析设计过程。
教
学
过
程
本课时内容学习
✧ 分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在CSS中，通过超链接标记<a>的伪类可以实现鼠标切换样式的效果，其中<a>的伪类分为很多种，不同的伪类代表的含义不同，那么，哪一种伪类表示鼠标悬浮时，实现样式切换呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
a:hover{ CSS样式规则;}表示鼠标经过、悬停时超链接的状态。
✧ 案例讲解
案例描述
本章主要介绍了CSS3新增选择器及链接伪类的用法。为了使读者更好地掌握这些知识点，本节将通过案例的形式分步骤制作一款网页设计软件列表，其默认效果如下图所示。
当鼠标悬浮于导航选项时，该选项的文本颜发生变化，且添加下划线效果，效果如下图所示。
当用鼠标点击导航选项后，会出现该款软件的相关介绍，例如点击第一个导航选项，效果如下图所示。
案例分析
分析“网页设计软件列表”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。
案例实现
教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。
说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。
✧ 阶段小结
小结
重点：添加文字介绍前的小图片、通过:nth-child(n)选择器设置文字样式。
html网页设计css答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
✧ 巩固练习
巩固本课时知识点
学完知识点后，让学生再制作一次“网页设计软件列表”。以此使学生更熟练地掌握“CSS3新增选择器及链接伪类”等知识点。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
✧ 布置作业
完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
复习本课时的所有知识点和案例，加强巩固。
第七、八课时
（上机测试）
教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。
上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出
错的操作步骤。通过上机测试可以考察同学对“CSS3新增选择器”使用的熟练程度，以及对“链接伪类”等知识点的掌握程度。
（作品点评）
教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。
✧ 布置作业
完成课后“动手实践”，并扫描二维码查看答案。
预习5.1节【盒子模型概述】。
预习5.2节【盒子模型相关属性】。
教
学
后
记

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。