Html网页教学比赛_教学设计.docx

博学谷一一让IT教学更简单，让IT学习更有效HTML5+CSS3网站设计基础教程教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级： 2016年级授课学期：2016学年第一学期教师姓名： 某某老师201年 月 日课题名称计划团队网页设计、中冲.4课时课时内容分析选择器是CSS3中一个重要的内容，使用它可以大幅度提高开发人员书写和修改 样式表的效率。头际上，在上一早中已经介绍过一些常用的选择器，这些选择 器基本上能够满足 Web设计师常规的设计需求。 本章将向读者介绍 CSS3中新增 的多种选择器。通过本章的学习，读者可以更轻松的控制网页兀素。教学目标掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的兀 素添加样式。理解关系选择器的用法，能够准确判断元素与元素间的关系。 掌握常用的结构化伪类选择器，能够为相冋名称的兀素定义不冋样式。 掌握伪兀素选择器的使用，能够在页面中插入所需要的文字或图片内 容。掌握CSS伪类，会使用 CSS伪类实现超链接特效。重点及措施教学重点：属性选择器、结构化伪类选择器、伪元素选择器、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：结构化伪类选择器、伪元素选择器。 措施：通过上机操作加强学习和补充案例进行巩固。教学方式采用项目化教学方式，使用PPT分析设计过程。教 学 过 程J本课时内容学习分组讨论对新课进行讲解前，先让学生 分组讨论以下问题：在CSS中，通过超链接标记a的伪类可以实现鼠标切换样式的效果， 其中 a的伪类分为很多种， 不冋的伪类代表的含义不冋， 那么，哪一种伪类表 示鼠标悬浮时，实现样式切换呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：a:hover CSS样式规则;表示鼠标经过、悬停时超链接的状态。案例讲解? 案例描述本章主要介绍了 CSS3新增选择器及链接伪类的用法。为了使读者更好地掌握这些知识点，本节将通过案例的形式分步骤制作一款网页设计软件列表, 其默认效果如下图所示。网页设计软杵列表（点击誉看）Photoshop 软件 illulrator 软件 Dreamweaver 件 Firfworks-f当鼠标悬浮于导航选项时，该选项的文本颜色发生变化，且添加下划线效 果，效果如下图所示。网页设计软件列書（点击査看）Photosho 口钦忤 illustratorHW Dreamweaver 软件 Fi rework s£I：T当用鼠标点击导航选项后，会出现该款软件的相关介绍，例如点击第一个 导航选项，效果如下图所示。园页设计软件列轰（克击SWPhotostiopST illustrator 牛 DrmmmwfMg 嗽畔 FireworkK?-Photoshop-n到违反广告法的掘S韻设计神器!绘画更来点动琶吧*Photo亜Q 蠹构成的罰害Photoshop推券功豔，衽圉醜 BJ枚 交莪 出版零各方而都有涉;EL?案例分析分析“网页设计软件列表”的构成元素，将其拆解为几个部分，分析各部 分使用了哪些 HTML标记及应用了哪些 CSS样式。?案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、 定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作 讨论，教师巡视，对疑难问题进行解答。阶段小结? 小结重点：添加文字介绍前的小图片、通过：nth-child（n）选择器设置文字样式。? 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习? 巩固本课时知识点学完知识点后，让学生再制作一次“网页设计软件列表”。以此使学生更熟 练地掌握“ CSS3新增选择器及链接伪类”等知识点。? 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的冋学，可以通过补充案例对相关知识点进行巩固。布置作业? 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。? 复习本课时的所有知识点和案例，加强巩固。第七、八课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“ CSS3新增选择器”使用的熟练程度，以及对“链接伪类”等知识点的掌握程度。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。布置作业? 完成课后“动手实践”，并扫描二维码查看答案。? 预习5.1节【盒子模型概述】。? 预习5.2节【盒子模型相关属性】。教 学 后 记3