HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx

1、HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局单元3网页图片与背景的美化与布局在网页中恰当地使用图像，能够充分展现网页的主题，吸引浏览者的眼球。图像能美化网页、增强视觉效果，使网页锦上添花。将适当的图像与文字有效地组合，实现图文混排，丰富页面内容，提高网页的美感。【知识预览】1HTML5中常用的图片标签（1）标签标签用于向网页中嵌入一幅图像。标签创建的是被引用图像的占位空间。 标签有两个必需的属性：src属性和alt属性。（2）标签和标签标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，figure元素的内容应该与主内容相关。标

2、签用于定义元素的标题，“figcaption”元素应该被置于“figure”元素的第一个或最后一个子元素的位置。2CSS的背景设置与定位（1）背景色的设置CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。background-color属性用于设置元素的背景颜色，其取值为指定的颜色或transparent，默认值为transparent，即为透明色。可以为网页中的任何元素设置背景颜色，也可以为HTML的标签设置背景颜色。（2）背景图像的设置在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片

3、的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-imagebackground-image属性用于定义对象的背景图像，当背景图像与背景颜色（background-color）同时被定义时，背景图像覆盖于背景颜色之上。其取值可以为none（无背景图像）或者为图像地址，可以使用绝对或相对地址指定背景图像。 background-sizebackground-size属性用于定义背景图像的尺寸，其属性值可以为数值或者auto，也可以是percentage、cover和contain。如果属

4、性值为数值或者auto，用于设置背景图像的高度和宽度，第1个值设置背景图的宽度，第2个值设置背景图的高度，其单位可以为像素（px）或者百分比（%），如果只设置1个值，则第2个值会被设置为auto。如果属性值为percentage，则width和height是针对于背景区域，不是背景图像大小。以父元素的百分比来设置背景图像的宽度和高度，同样第1个值设置宽度，第2个值设置高度。如果只设置1个值，则第2个值会被设置为auto。如果属性值为cover，则把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。如果属性值为contain，则把背景图像扩展至最

5、大尺寸，以使其宽度和高度完全适应内容区域。 background-positionbackground-position属性用于定义对象背景图像的位置，应先定义对象的background-image属性，该属性不受对象的填充属性padding的影响。默认值为0%，即背景图像默认位于对象内容区块的左上角。如果只指定了一个值，该值将用于横坐标，纵坐标默认为50%。如果指定了两个值，第一个值用于横坐标，第二个值用于纵坐标。背景图像的位置由background-position-x和background-position-y两个属性综合确定。background-position-x定位背景图像的横坐

6、标位置，默认值为0%，其取值包括left、center、right和数值。background-position-y定位背景图像的纵坐标位置，默认值为0%，其取值包括top、center、bottom和数值。当背景图像的位置坐标定义为数值时，单位可以取长度单位，也可以为百分比。 background-repeatbackground-repeat属性用于定义对象的背景图像是否重复以及如何平铺，应先定义对象的background-image属性。其取值包括repeat（重复，即背景图像在纵向和横向上都平铺）、no-repeat（不重复）、repeat-x（横向平铺）和repeat-y（纵向平铺）

7、。 background-originbackground-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。图3-2背景图片放置位置的示意图 background-attachmentbackground-attachment属性用于定义背景图像是否随对象内容滚动还是固定位置。其取值包括scroll（背景图像随对象内容滚动）和fixed（背景图像处在固定位置），默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。 backgroundbackground属性是一个复合属性

8、，可以快速定义背景图像，其组成包括background-color、background-image、background-position、background-repeat和background-attachment，默认值为transparent none repeat scroll 0%，如果其单个属性没有显式定义，则取其默认值。3背景定位的方法（1）应用位置关键字图像放置关键字最容易理解，其作用如其名称所表明的。（2）应用百分数值百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中。（3）应用长度值长度值解释的是元素内边距距左上角的偏移，偏移点是图像的左上角。例如，如果

9、设置值为50px 100px，图像的左上角将在元素内边距距左上角向右偏移50像素、向下偏移100像素的位置上。4图像的透明度通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。CSS的opacity属性是W3C CSS推荐标准的一部分。（1）创建透明图像创建透明图像的CSS代码如下：img opacity:0.4; filter:alpha(opacity=40); /* 针对IE8以及更早的版本 */（2）创建透明图像的Hover效果将鼠标指针移动到图片上时，会改变图片的透明度，实现图像透明度的Hover效果。创建透明图像的Hover效果的CSS代码如下：img o

10、pacity:0.4; filter:alpha(opacity=40); /* 针对IE8以及更早的版本 */img:hover opacity:1.0; filter:alpha(opacity=100); /* 针对IE8以及更早的版本 */【验证训练】【任务3-1】验证各种类型的图片与背景属性设置【任务描述】在网页中输入以下HTML标签及文字：针对上述图片验证各种类型的图片属性设置，并设置背景图像。（1）设置多种不同的图片长度和宽度。（2）设置多种不同的图片边框。（3）设置div区域的背景图象，并设置背景图像多种不同的background-repeat、background-size、

11、background-position、background-origin属性值以及margin和padding属性值。【任务实施】（1）创建一个名称为“单元3”的站点，在该站点中创建文件夹“3-1”。（2）在该站点的文件夹“3-1”中创建网页0301.html。（3）在网页0301.html中插入div标签和所需的图片，并设置该图片的alt属性。（4）定义标签的CSS代码。标签的初始CSS定义代码如下所示。img width:300px; height:220px; border: 2px #CCC solid; border-radius: 4px;（5）定义标签的CSS代码。标签的初始定

12、义代码如下所示。div background-image:url(images/travel-bg.png); background-repeat:no-repeat; background-size:100% 100%; background-origin:padding-box; padding:20px; margin:10px;（6）浏览网页0301.html的效果，如图3-3所示。图3-3 网页0301.html的浏览效果（7）然后按照任务描述的要求不断改变各个属性设置，重新浏览其效果。【引导训练】【任务3-2】创建图片为主体的网页0302.html【任务描述】创建网页文档0302.

13、html，在该网页中添加必要的HTML标签、插入图片和输入文字。该网页的浏览效果如图3-4所示，该网页包含1张覆盖整个网页的图片，在该图片上还有文字。图3-4 网页0302.html的浏览效果【任务实施】（1）在站点“单元3”中创建文件夹“3-2”。（2）在文件夹“3-2”中创建网页文档0302.html，切换到【代码视图】，在标签“”的前面编写样式代码，如表3-1所示。（3）在网页文档0302.html中添加所需的标签、插入图片与输入文字，HTML代码如表3-2所示。（7）保存网页文档0302.html，在浏览器Google Chrome中的浏览效果如图3-4所示。【任务3-3】创建多张图片

14、并行排列的网页0303.html【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0303.html，且链接外部样式文件base.css和main.css。（3）在网页0303.html中添加必要的HTML标签和输入文字。（4）浏览网页0303.html的效果，如图3-5所示，该网页包含多张图片。图3-5 网页0303.html的浏览效果【任务实施】（1）创建站点与文件夹在站点“单元3”中创建文件夹“3-3”，在该文件夹中创建子文件夹“CSS”，将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

15、（2）定义网页主体布局结构和美化图片的CSS代码在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构和美化图片的CSS代码如表3-3所示。表3-3中的CSS代码“border-radius: 5px;”实现了圆弧边框的效果。（3）创建网页文档0303.html与链接外部样式表在文件夹“3-3”中创建网页文档0303.html，切换到网页文档0303.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：（4）编写网页主体布局结构的HTML代码网页0303.html主体布局结构的HTML代码如表3-4所示。（5）在网页中插入图片与设置图

16、片属性在网页文档0303.html中插入图片与设置图片属性，HTML代码如表3-5所示。（6）保存与浏览网页保存网页文档0303.html，在浏览器Google Chrome中的浏览效果如图3-5所示。【任务3-4】创建图片和文字的网页0304.html【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0304.html，且链接外部样式文件base.css和main.css。（3）在网页0304.html中添加必要的HTML标签、插入图片和输入文字。（4）浏览网页0304.html的效果，如图3-6所示，该网页包

17、含标题文字、1张图片和正文文字。图3-6 网页0304.html的浏览效果【任务实施】（1）创建文件夹在站点“单元3”中创建文件夹“3-4”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。（2）定义网页主体布局结构的CSS代码在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-6所示。（3）定义美化图片与文字的CSS代码在样式文件main.css中编写样式代码美化图片与文字，其CSS代码如表3-7所示。（4）创建网页文档0304.html与链接外部样式表在文件夹“3-4”中创建网

18、页文档0304.html，切换到网页文档0304.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示： （5）编写网页主体布局结构的HTML代码网页0304.html主体布局结构的HTML代码如表3-8所示。（6）输入HTML标签与文字在网页文档0304.html中输入所需的标签与文字，HTML代码如表3-9所示。（7）保存与浏览网页保存网页文档0304.html，在浏览器Google Chrome中的浏览效果如图3-6所示。【任务3-5】创建带动画效果的相册网页0305.html【任务描述】（1）创建样式文件base.css，在该样式文件中定义标签的属性。（2）创建样

19、式文件main.css，在该样式文件中定义类选择符及其属性。（3）创建网页文档0305.html，且链接外部样式文件base.css和main.css。（4）在网页0305.html中添加必要的HTML标签、插入图片和输入文字。（5）浏览网页0305.html的效果，如图3-7所示，该网页包含标题文字、3张图片及图片标题，当鼠标指针指向图片时会出现动画效果。图3-7 网页0305.html的浏览效果【任务实施】（1）创建文件夹在站点“单元2”中创建文件夹“3-5”，在该文件夹中创建子文件夹“CSS”。（2）定义网页通用CSS代码在文件夹“CSS”中创建样式文件base.css，在该样式文件中编

20、写样式代码，网页通用的CSS代码定义如表3-10所示。（3）定义网页主体布局结构的CSS代码在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-11所示。（4）定义美化图片与文本内容的CSS代码在样式文件main.css中编写样式代码美化图片与文本内容，其CSS代码如表3-12所示。（5）创建网页文档0305.html与链接外部样式表在文件夹“3-5”中创建网页文档0305.html，切换到网页文档0305.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示： （6）编写网页主体布局结构的HTML代码网页0305

21、.html主体布局结构的HTML代码如表3-13所示。（7）输入HTML标签与正文内容在网页文档0305.html中输入所需的标签、输入标题文字、插入图片与输入正文内容，HTML代码如表3-14所示。（8）保存与浏览网页保存网页文档0305.html，在浏览器Google Chrome中的浏览效果如图3-7所示。【任务3-6】创建布局结构较复杂的图片墙网页0306.html【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0306.html，且链接外部样式文件base.css和main.css。（3）在网页030

22、6.html中添加必要的HTML标签和输入文字。（4）浏览网页0306.html的效果，如图3-8所示，该网页包含多张图片，当鼠标指针指向图片时会出现动画效果。图3-8 网页0306.html的浏览效果【任务实施】（1）创建文件夹在站点“单元3”中创建文件夹“3-6”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。（2）定义网页主体布局结构的CSS代码在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表3-15所示。（3）定义美化图片及提示文字的CSS代码在样式文件main.css中

23、编写样式代码美化图片及提示文字，其CSS代码如表3-16所示。（4）创建网页文档0306.html与链接外部样式表在文件夹“3-6”中创建网页文档0306.html，切换到网页文档0306.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示： （5）编写网页主体布局结构的HTML代码网页0306.html主体布局结构的HTML代码如表3-17所示。（6）输入HTML标签与图片在网页文档0306.html中输入所需的标签、插入图片与输入文字，HTML代码如表3-18所示。（7）保存与浏览网页保存网页文档0306.html，在浏览器Google Chrome中的浏览效果如图

24、3-8所示。【同步训练】【任务3-7】创建多列图片展示的网页0307.html【任务描述】（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0307.html，且链接外部样式文件base.css和main.css。（3）在网页0307.html中添加必要的HTML标签和插入多张图片。（4）浏览网页0307.html的效果，如图3-16所示，该网页包含标题文字和多张图片。图3-16 网页0307.html的浏览效果【任务3-8】创建图文混排的网页0308.html【任务描述】（1）创建样式文件base.css和main.css

25、，在该样式文件中定义标签的属性、类选择符及其属性。（2）创建网页文档0308.html，且链接外部样式文件base.css和main.css。（3）在网页0308.html中添加必要的HTML标签、插入图片和输入文字。（4）浏览网页0308.html的效果，如图3-17所示，该网页左侧为1张图片，右侧为文字内容。图3-17 网页0308.html的浏览效果【单元小结】本单元主要探讨图片与背景的美化与布局，熟悉了图片与背景的美化方法，训练了单张图片、多张图片、图文混排、带动画效果的相册、图片墙的布局方法。对HTML中常用的图片标签、背景设置与定位、图像透明度等方面知识进行了全面介绍，同时对利用CSS样式设置图像属性、图文混排布局、全图排版网页的制作、“图片替代文本”效果的实现、利用CSS Sprites原理合成图片、利用CSS样式设置图像的阴影效果和采用不同方法将内容性图像和修饰性图像插入到页面等技术要点进行了详细说明。