教案
序号: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设置表格样式-鼠标悬停
发布任务,学生能够有目标地进行学习
理论讲解
学生操作巩固
该部分为教学难点,帮助学生记忆相关元素名和示例
理论讲解
学生操作巩固
学生操作
练习巩固