CSS设置网页背景公开课教案

2023-05-04 07:02:21 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《CSS设置网页背景公开课教案》，欢迎阅读！
开课,教案,背景,设置,网页
7.2 使用CSS设置网页背景教案

授课教师：黄光宇

时间

2015年5月19日星期二第三节

班级

高一（2）班

一、知识与能力：

1、熟练CSS样式表的创建和使用

2、知道如何使用CSS来设置网页背景颜色和背景图像

教学目标

二、过程与方法：

通过教师教学演示，学生观看和练习，掌握CSS制作简单网页的基本方法。三、情感态度和价值观

通过本课的学习，增强学生对制作网页的兴趣和学生对颜色美感的鉴赏。

教学重点教学难点

使用CSS设置网页背景图像

CSS设置背景图像时规则定义的理解和使用

教学活动

一、观察案例，导入新课

欣赏优秀网页，引发学生的思考：网页的设计让你觉得特别的地方是在那一部分？

分析网页的背景颜色和背景图片，引出本次课的知识点：利用CSS设置背景颜色和图片。

二、新课教学

1、网页背景颜色的设置

案例1：给百度首页“上色”

1）创建CSS规则 .aa ，选择“背景——background-color——选择颜色”； 2）代码分析：网页背景颜色设置和部分HTML元素背景颜色设置 .aa { background-color: #CF3; }

通过类调用“class=”aa””，在标签内调用颜色设置，从而实现在不同标签内实现背景颜色设置。 ”aa”>实现的功能，相当于 body { background-color: #CF3; }

思考：能否在CSS设置下实现网页渐变色？

2、网页背景图像的设置

案例2：使用百度首页的换肤功能，思考：如何实现给网页“换肤”？

新建CSS规则，通过“背景——background-image——浏览”选择背景图片，对应背景图片有包括三种基本属性： 1）图像地址

1 / 2

图像地址对应于background-image属性，在CSS规则定义面板内单击“浏览”按钮，可以选择所要设置的背景图片，代码如下： .test { background-image: url(images/6.jpg); }

2）平铺属性

案例3：通过repeat-x（横向平铺），给百度首页设置渐变背景色。

平铺属性对应的是CSS规则定义面板内的background-repeat属性，包括有以下几种情况： repeat (重复平铺，默认情况) no-repeat（不重复） repeat-x（横向平铺） repeat-y（纵向向平铺） 3）背景图像位置

在新建规则中，背景图片的位置调整设置主要在background-position中实现，包括三种情况：

background-position(X) background-position(Y)

background-position(值) X和Y都可设置值，用于精确放置图片位置。 4）背景属性设置合写 .title { background-color:#39F; background-image: url(images/8.jpg); background-repeat: no-repeat; background-position: 5px 10px; }

代码合并：background: 背景色图像地址位置平铺； background：#39F url(images/8.jpg) 5px 10px no-repeat

三、课堂小结

本次课通过对百度首页的“换肤”，我们基本掌握了网页背景设置的基本技能： 1、设置网页背景颜色；

2、设置网页背景图片并对图像的基本属性进行管理。四、课后作业

完成课本案例：制作“当当网首页”。

教学反思：

2 / 2