《HTML5 CSS3项目开发案例教程》教案 第6课 使用CSS3美化图像和背景.pdf

使用CSS3美化图像和背景第6课

课题使用CSS3美化图像和背景2

课时2课时（90min）

知识技能目标：

（1）掌握使用CSS3美化图像和设置背景的方法

（2）学习CSS3对图文混排的处理流1

教学目标（3）掌握使用CSS3设置渐变的方法

思政育人目标：

通过对CSS3美化图像和背景的学习，培养学生的逻辑思维能力，使学生懂得用技巧解

决问题，以提高工作效率2

教学重点：了解CSS3美化图像、设置背景和渐变的原理

教学重难点

教学难点：使用CSS3设置图像渐变

教学方法讲授法、启发法、问答法、演示法、讨论法、练习法

教学用具电脑、投影仪、多媒体课件、教材

第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→课堂练习（15

min）

教学设计

第2节课：问题导入（4min）→知识讲解（16min）→小组活动（18min）→课堂小

结（5min）→作业布置（2min）

教学过程主要教学内容及步骤设计意图

第一节课

【教师】清点上课人数，记录好考勤培养学生的组

考勤织纪律性，掌握学

（2min）【学生】班干部报请假人员及原因生的出勤情况

【教师】讲解CSS3美化在日常生活中的使用，引出新知识点

在日常生活中，可以经常看到网页中图像的大小、边框、阴影

通过概述知识

等样式，还有一些网页总体颜色的渐变格式，这些样式大部分都是

新知导入点，让学生了解学

用CSS3样式来设计的

（4min）习CSS3语言的

【学生】思考、讨论必要性

【教师】总结学生讨论内容

1

第6课使用CSS3美化图像和背景的基基本本

和其他编程语言不一样的地方，CSS3编程语言最大的优势

8就是对于格式的控制以及美化操作的简洁性

【教师】讲述图像样式和背景样式

图像样式

21．图像大小

使用img/标签的width和height属性可以设置图像大小，但