网页设计与制作教程教学设计 项目六（任务3 设置背景颜色）.docVIP

课程单元教学设计

任课教师：科目：

授课班级：

单元

标题

项目六

任务3设置背景颜色

授课

时间

2021年月日

（第周，周，第节）

授课地点

教学学时

2课时

教学

目标

能力目标：

能使用设置图像圆角、背景颜色的属性设置图片的显示效果；

知识目标：

掌握设置图像圆角、背景颜色的方法

教学

资源

黑板板书、多媒体课件、电脑

教学进程

步骤

教学内容

教师、学生

活动

教学方法

与手段

时间

分配

一、复习提问

1.如何图片加入边框？

教师活动：教师提问

学生活动：回答问题

提问法

5分钟

二、任务发布

课堂案例——如何给图像设置圆角

教师活动：1.发布任务并引导学生思考实习效果需要用到的工具、方法。

学生活动：

1.通过教师讲解，学生积极完成任务。

讲授法、演示法、

练习法

15分钟

三、讲授新课

1.定义圆角图像。CSS3新增了border-radius属性,使用它可以设计圆角样式，该属性用法如下。

border-radius:属性值;

border-radius属性值有四个写法

border-radius:设置一个值;

例如：border-radius:10px;设置的四个圆角半径都是10px

border-radius:设置两个值;

例如:border-radius:10px20px;表示左上角、右下角为10px，右上角、左下角为20px；

border-radius:设置三个值;

例如:border-radius:10px20px30px;表示左上角、右上角和右下角、左下角的圆角半；

（4）border-radius:设置四个值

例如:border-radius:10px20px30px40px;表示左上角、右上角、右下角和左下角的圆角半径依次是10px20px30px40px

2.设置背景颜色。CSS的背景颜色是由background-color属性来实现的，该属性用法如下:

background-color:属性值;在CSS页面的背景颜色通过设置body标记的background-color属性来实现。具体颜色值的设定方法与文字颜色的设定方法一样，可以采用十六进制、RGB各分量和颜色的英文单词。

教师活动：

1.讲解知识要点；

2.演示具体方法；

3.巡堂指导学生操作

学生活动：

1.认真听课做好笔记。

2.完成练习任务

讲授法、演示法、练习法

15分钟

四、任务实施

课堂案例——完成练习

教师活动：

1.演示重点难点；

2.巡堂指导学生操作；

3.发现共性问题并统一指导；

4、指导个别学生解决问题

学生活动：

1.独立完成练习任务；

2.遇到自己解决不了的问题向老师、同学提问，解决遇到的问题。

讲授法、演示法、练习法

30分钟

五、评价反馈

1.各小组组长检查本组成员作业完成情况，并给出成绩。

2.教师检查学生作业并展示优秀作品，总结共性问题。

教师活动：

1.展示优秀作品

2.点评学生作业，总结共性问题。

学生活动：

1.学习其他同学的优秀作品；

2.总结自己完成的情况，

讲授法、小组讨论法

10分钟

总结与作业

复习重点和难点：

1.掌握图片圆角、网页背景颜色属性的用法。

课后作业：完成课后练习

教师活动：1.教师带领学生复习重点及难点

2.布置课后作业

讲授法

5分钟

课后体会