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

《CSS设置网页背景公开课教案.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、7.2使用CSS设置网页背景教案授课教师：黄光宇时间2015年5月19日星期二第三节班级高一（2）班教学目标一、知识与能力：1、熟练CSS样式表的创建和使用2、知道如何使用CSS来设置网页背景颜色和背景图像二、过程与方法：通过教师教学演示，学生观看和练习，掌握CSS制作简单网页的基本方法。三、情感态度和价值观通过本课的学习，增强学生对制作网页的兴趣和学生对颜色美感的鉴赏。教学重点使用CSS设置网页背景图像教学难点CSS设置背景图像时规则定义的理解和使用教学活动一、观察案例，导入新课欣赏优秀网页，引发学生的思考：网页的设计让你觉得特别的

2、地方是在那一部分？分析网页的背景颜色和背景图片，引出本次课的知识点：利用CSS设置背景颜色和图片。二、新课教学1、网页背景颜色的设置案例1：给百度首页“上色”1）创建CSS规则.aa，选择“背景——background-color——选择颜色”；2）代码分析：网页背景颜色设置和部分HTML元素背景颜色设置.aa{background-color:#CF3;}通过类调用“class=”aa””，在标签内调用颜色设置，从而实现在不同标签内实现背景颜色设置。实现的功能，相当于body{background-c

3、olor:#CF3;}思考：能否在CSS设置下实现网页渐变色？2、网页背景图像的设置案例2：使用百度首页的换肤功能，思考：如何实现给网页“换肤”？新建CSS规则，通过“背景——background-image——浏览”选择背景图片，对应背景图片有包括三种基本属性：1）图像地址图像地址对应于background-image属性，在CSS规则定义面板内单击“浏览”按钮，可以选择所要设置的背景图片，代码如下：.test{background-image:url(images/6.jpg);}2）平铺属性案例3：通过repeat-x（横向平铺

4、），给百度首页设置渐变背景色。平铺属性对应的是CSS规则定义面板内的background-repeat属性，包括有以下几种情况：repeat(重复平铺，默认情况)no-repeat（不重复）repeat-x（横向平铺）repeat-y（纵向向平铺）3）背景图像位置在新建规则中，背景图片的位置调整设置主要在background-position中实现，包括三种情况：background-position(X)background-position(Y)background-position(值)X和Y都可设置值，用于精确放置图片位置。4

5、）背景属性设置合写.title{background-color:#39F;background-image:url(images/8.jpg);background-repeat:no-repeat;background-position:5px10px;}代码合并：background:背景色图像地址位置平铺；background：#39Furl(images/8.jpg)5px10pxno-repeat一、课堂小结本次课通过对百度首页的“换肤”，我们基本掌握了网页背景设置的基本技能：1、设置网页背景颜色；2、设置网页背景图片并对

6、图像的基本属性进行管理。二、课后作业完成课本案例：制作“当当网首页”。教学反思：