Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第7讲次 任务8 id选择器、伪选择器和表格样式.docx

教案

序号：7

授课日期

课时数

4

章节名称

任务8id选择器、伪选择器和表格样式

教学内容

重点

id选择器、伪选择器、表格。

难点

伪选择器的使用。

教学目的与要求

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

掌握CSS的引用方式。

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

教学方法

与手段

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

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

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

作业及

思考题

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

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

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务8id选择器、伪选择器和表格样式

8.1id选择器、8.2伪选择器）

实操任务目标发布

实战演练——制作鞋子尺码对照单

图7-SEQ图\*ARABIC\r11鞋子尺码对照单

强化训练——制作婴儿身高体重标准表

图7-SEQ图\*ARABIC2婴儿身高体重标准表

知识准备

id选择器

id属性：用于唯一标识某个标签元素。id属性值不能重复，它在当前文档页面中必须是唯一的。

id选择器：为标有特定id的HTML元素指定特定的样式。

语法格式：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

子任务：

图7-SEQ图\*ARABIC3id选择器的使用

伪选择器

伪类选择器

伪元素选择器

第二学时

（任务8id选择器、伪选择器和表格样式

8.3表格样式）

二、知识准备

新建表格

新建HTML文件，选择“插入?表格”菜单命令，打开“表格”对话框。

图7-SEQ图\*ARABIC4新建表格对话框

子任务：创建一个3行3列表格。

合并单元格

图7-SEQ图\*ARABIC5合并单元格步骤1

图7-SEQ图\*ARABIC6合并单元格步骤2

图7-SEQ图\*ARABIC7合并单元格步骤3

设置对齐方式

图7-SEQ图\*ARABIC8设置对齐方式

第三学时

实战演练——制作鞋子尺码对照单

案例描述：设计并制作鞋子尺码对照单，网页效果如下。

图7-SEQ图\*ARABIC9鞋子尺码对照单

第四学时

强化训练——制作婴儿身高体重标准表

案例描述：设计并制作“婴儿身高体重标准表”页面，网页效果如上图所示。当鼠标移到不同行时，光标所在行会显示粉红背景色，效果如下图所示。

图7-SEQ图\*ARABIC10婴儿身高体重标准表

图7-SEQ图\*ARABIC11婴儿身高体重标准表-鼠标移动时

课后实训

设计并制作表格样式，效果如图所示，鼠标悬停表格内容行时，效果如图右所示。

图7-SEQ图\*ARABIC12设置表格样式

图7-SEQ图\*ARABIC13设置表格样式-鼠标悬停

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

理论讲解

学生操作巩固

该部分为教学难点，帮助学生记忆相关元素名和示例

理论讲解

学生操作巩固

学生操作

练习巩固