使用css样式设置背景doc-山东商业职业技术学院教师授课教案

山东商业职业技术学院教师授课教案课程网页制作周次3授课日期课题使用css样式设置背景授课班级教学目的1.使学生掌握设置背景图的基本样式属性2.使学生掌握在样式中设置背景图的平铺方式3.使学生掌握设置背景图位置的样式属性4.使学生掌握设置背景图滚动方式的样式属性5.使学生掌握设置背景色的样式属性6.使学生掌握设置背景的合并样式属性重点样式的基本概念、class类选择符的应用、图片的相对路径难点Class类选择符的定义及引用方式、图片的相对路径授课方法讲授+演示挂图教具多媒体教学主要内容1.背景图的基本样式属性2.在样式中设置背景图的平铺方式3.设置背景图位置的样式属性4.设置背景图滚动方式的样式属性5.设置背景色的样式属性6.设置背景的合并样式属性双基和能力培养课题提问如何在页面中根据自己的需求设置背景图的位置和平铺方式作业用样式设置指定页面中的背景图效果本节教学体会这是第三次讲课了，开始接触到页面美化效果中必须使用的样式的定义了，学生开始发现网页制作课程不像他们预期的那样简单，感觉一小部分同学开始放弃了，在发现这种现象时，我立即想办法去鼓励大家，毕竟什么新知识的学习都不会是一蹴而就的，都需要大家付出很多努力，记住，只要自己放慢讲课速度，让大家能够跟上来，这个问题应该能够得到缓解教案纸一、复习回顾（5分钟）1.文件首部中meta标记的作用2.页面背景图像的设置及背景图的路径问题二、新知识讲解1.问题引入（5分钟）在h2-1.html文件中页面背景效果很差，如何按照我们的需求设置页面背景达到如图所示的效果2.样式的基本概念（15分钟）Class类选择符，名字可任意定义，但不能与html标签同名样式属性，是css样式本身规定的，不能随便定义的样式属性值，与样式属性之间总是使用冒号间隔，在属性值之后要使用分号结束，构成一个样式规则在相应标记中若要使用所定义的class类选择符，必须通过class属性进行引用3.设置背景图片样式（10分钟）设置背景图片样式的规则：background-image:url(图片文件路径及名称）例如：在h2-1-1.html文件中不使用body标签的background属性设置背景图片，使用样式规则设置背景图片为flower.jpg，代码如下：styletype=text/css.backg{background-image:url(flower.jpg);}/style……bodyclass=“backg”4.设置样式背景图片如何重复（10分钟）样式属性：background-repeat取值：repeat：平铺no-repeat：不平铺repeat-x：x方向平铺repeat-y：y方向平铺修改h2-1-1.html，设置背景图片在x方向平铺；设置背景图片在y方向平铺；设置背景图片不平铺5.设置样式背景图片位置（10分钟）样式属性：background-position取值：xy使用带不同单位的数值：可直接设置图像左上角在元素中的坐标使用预定义关键字：可指定背景图像在元素中的对齐方式水平方向值：left、center、right垂直方向值：top、center、bottom两个关键字的顺序任意，若只有一个值则另一个默认center。使用百分比：将百分比同时应用于元素和图像再按该指定点对齐0%0%表示图像左上角与元素的左上角对齐设置h2-1-1.html中背景图片在页面内容右下角位置6.设置背景图片不随滚动条移动（10分钟）正常情况下，背景图片的位置是与页面内容的位置之间有相对固定的关系，即若页面内容滚动，背景图片通常也跟随滚动，设置背景图片是否滚动的样式属性：background-attachment取值：scroll：随滚动条移动fixed：不随滚动条移动（相对于窗口的位置固定）7.背景样式属性的合并应用（5分钟）对于背景样式中的四个样式规则可以合并使用，合并后，样式属性为background，属性值之一必须是背景图片，其他三个取值可以任意选择0~3个，顺序不定，但是要求不同取值之间必须使用空格间隔。8.设置背景图片的相对路径（10分钟）相对路径是指相对于当前文件的路径，即由当前文件如何找到目标文件。采用相对路径是建立两个文件之间的相对关系，可以不受站点和所处服务器位置的影响。相对路径的使用方法：同一目录：输入文件名称即可上一级目录：输入“../目录名/文件名”下一级目录：输入“目录名/文件名”9.设置样式背景颜色（5分钟）样式属性：background-color取值：任意颜色值也可直接使用合并的样式属性名称background，取值为任意颜色值即可三、总结（5分钟）1.样式应用中class类选择符的定义及引用方式2.背景样式应用中的几个样式属性及取值的应用