教案

序号：6

授课日期

课时数

4

章节名称

任务7链接伪类和CSS样式面板

教学内容

重点

链接伪类、样式面板。

难点

链接伪类的使用。

教学目的与要求

掌握CSS的基础选择器，学会CSS的定义方法。

掌握CSS的引用方式。

理解CSS的优先级，学会编写复合选择器。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题，通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务7链接伪类和CSS样式面板

7.1知识准备）

实操任务目标发布

实战演练——制作散文欣赏网页

图6-SEQ图\*ARABIC\r11散文欣赏网页

实战演练——制作热点新闻列表

图6-SEQ图\*ARABIC2热点新闻列表1

图6-SEQ图\*ARABIC3热点新闻列表2

知识准备

链接伪类

默认的超链接样式：

链接伪类：

定义顺序：遵循“爱恨原则”，即“LoVe-Hate”原则

子任务：链接伪类的使用

图6-SEQ图\*ARABIC4链接伪类的使用

CSS样式面板

图6-SEQ图\*ARABIC5CSS样式面板介绍

第三学时

实战演练——制作散文欣赏网页

案例描述：设计并制作散文欣赏网页，网页效果如下。其中光标图标设置成了“help”样式，锚点链接的四种状态（a:link、a:visited、a:hover、a:active）均设置了不同的样式。

图6-SEQ图\*ARABIC6散文欣赏网页

第四学时

强化训练——制作热点新闻列表

案例描述：设计并制作热点新闻列表，网页效果如下（左）。当鼠标悬停在新闻标题上时，样式效果如图（右）。

图6-SEQ图\*ARABIC7热点新闻列表1

图6-SEQ图\*ARABIC8热点新闻列表2

二、课后实训——制作热点新闻列表

设计并制作“帮助中心”页面，效果如图所示。

图6-SEQ图\*ARABIC9默认效果图6-SEQ图\*ARABIC10鼠标悬停超链接效果图6-SEQ图\*ARABIC11鼠标激活超链接效果

发布任务，学生能够有目标地进行学习

理论讲解

学生操作巩固

学生操作

练习巩固