基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第7讲次 任务8 id选择器、伪选择器和表格样式.docx
文件大小:963.08 KB
总页数:9 页
更新时间:2025-05-27
总字数:约1.36千字
文档摘要

教案

序号: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设置表格样式-鼠标悬停

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

理论讲解

学生操作巩固

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

理论讲解

学生操作巩固

学生操作

练习巩固