Html网页教学比赛-教学设计

《HTML5+CSS3网站设计基础

教程》

教学设计

课程名称：HTML5+CSS3网站设计泰础教程

授课年级：2016年级

授课学期：2016学年第一学期

教师必名：禁禁老界

博学谷一一让IT教学更简单，让IT学习更有效

201年月日

计划

课题名称团队网页设计4课时

课时

选择器是CSS3中一个重要的内容，使用它可以大幅度提高开发人员书写和修改

样式表的效也。实际上，在上一章中已经介绍过一些常用的选择器，这些选择

内容分析

器基本上能够满足Web设计师常规的设计需求。本章将向读者介绍CSS3中新增

的多种选择器,通行本章的学习，读者可以更轻松的梓制网页元素C

•掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元

素添加样式。

•理解关系选择器的用法，能够准确判断元素与元素间的关系。

教学目标•掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。

•掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内

容。

•掌握CSS伪类，会使用CSS伪类实现超链接特效。

教学重点：属性选择器、结构化伪类选择器、伪元素选择器、链接伪类。

重点及措施

措施：通过上机操作加强学习和补充案例进行巩固。

教学难点：结构化伪类选择器、伪元素选择器。

难点及措施

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式采用项目化教学方式，使用PPT分析设计过程。

A本课时内容学习

令分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

在CSS」，通过超链接标记＜a》的伪类可以实现鼠标切换样式的效果，其中

教＜a》的伪类分为很多种，不同的伪类代表的含义不同，那么，哪一种伪类表

学

示鼠标悬浮时，实现样式切换呢？

过

程请小组代表对以上问题发表见解。

教师对上述问题进行解释：

a:hover{CSS样式规则；}表示鼠标经过、悬停时超链接的状态。

令案例讲解

＞案例描述

本章主要介绍了CSS3新增选择器及链接伪类的用法。为了使读者更好地

掌握这些知识点，本号将通过案例的形式分步骤制作一款网页设计软件列表，

2

其默认效果如下图所示。

网页设计软件列表（点击查看）

Photoshop软件illustrator软件Dreamweaver软件Fireworks软件

当鼠标悬浮于导航选项时，该选项的文本颜色发生变化，且添加卜划线效

果，效果如下图所示。

网页设计软件列表（点击查看）

Photoshop软件illustrator软件Dreamweaver软件Fireworks软件

当用鼠标点击导航选项后，会出现该款软件的相关介绍，例如点击第一个

导航选项，效果如下图所示。

网页设计软件列表（点击查看）

Photoshop软件illustrator软件Dreamweaver软件Fireworks软件

叶八。311中一款好到违反广告法的超5级设计神器！给画面来点动感吧.

-Photosh。网卷以像素构成的图像可以有她B进行网片EKEL作.

dPhotoshop有很多功能，在图像.图形、文字、出版等各方面都有涉及.

说制m场景时，MM^ffiSPhotoshop^rWtt.

>案例分析

分析“网页设计软件列表”的构成元素，将其拆解为几个部分，分析各部

分使用了哪些HTML标记及应用了哪些CSS徉式。

>案例实现

教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、

定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。

说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作

讨论，教师巡视，对疑难问题进行解答。

◊阶段小结

>小结

重点：添加文字介绍前的小图片、通过:nhchild（n）选择器设置文字样式。

>答疑

教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识

点给与解释。

◊巩固练习

博学谷一一让IT教学更简单，让IT学习更有效

>巩同本课时知识点

学完知识点后，让学生再制作一次“网页设计软件列表二以此使学生更熟

练地掌握“CSS3新增选择器及链接伪类”等知识点。

>通过“补充案例”加强学习

教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补

充案例对相关知识点进行巩固。

◊布置作业

>完成“补充案例”，通过平台提交给教师，教师下节课进行点评。

>复习本课时的所有知识点和案例，加强巩固。

第七、八课时

（上机测试）

教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相

关知识点的掌握情况。测试完成后将作品通过平台提交给老师。

上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出

错的操作/骤。通过上机测试可以考察同学对“CSS3新增选择器”使用的熟

练程度，以及对“链接伪类”等知识点的掌握程度。

（作品点评）

教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug

的地方，并给与解答。

。布置作业

>完成课后“动手实践”，并扫描二维玛查看答案。

>预习5