标签的初始定义代码如下所示。
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.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，在浏览器GoogleChrome中的浏览效果如图3-4所示。
【任务3-3】创建多张图片并行排列的网页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”文件夹中。
（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）在网页中插入图片与设置图片属性
在网页文档0303.html中插入图片与设置图片属性，HTML代码如表3-5所示。
（6）保存与浏览网页
保存网页文档0303.html，在浏览器GoogleChrome中的浏览效果如图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所示，该网页包含标题文字、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”中创建网页文档0304.html，切换到网页文档0304.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：
（5）编写网页主体布局结构的HTML代码
网页0304.html主体布局结构的HTML代码如表3-8所示。
（6）输入HTML标签与文字
在网页文档0304.html中输入所需的标签与文字，HTML代码如表3-9所示。
（7）保存与浏览网页
保存网页文档0304.html，在浏览器GoogleChrome中的浏览效果如图3-6所示。
【任务3-5】创建带动画效果的相册网页0305.html
【任务描述】
（1）创建样式文件base.css，在该样式文件中定义标签的属性。
（2）创建样式文件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，在该样式文件中编写样式代码，网页通用的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.html主体布局结构的HTML代码如表3-13所示。
（7）输入HTML标签与正文内容
在网页文档0305.html中输入所需的标签、输入标题文字、插入图片与输入正文内容，HTML代码如表3-14所示。
（8）保存与浏览网页
保存网页文档0305.html，在浏览器GoogleChrome中的浏览效果如图3-7所示。
【任务3-6】创建布局结构较复杂的图片墙网页0306.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0306.html，且链接外部样式文件base.css和main.css。
（3）在网页0306.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中编写样式代码美化图片及提示文字，其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，在浏览器GoogleChrome中的浏览效果如图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，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0308.html，且链接外部样式文件base.css和main.css。
（3）在网页0308.html中添加必要的HTML标签、插入图片和输入文字。
（4）浏览网页0308.html的效果，如图3-17所示，该网页左侧为1张图片，右侧为文字内容。
图3-17网页0308.html的浏览效果
【单元小结】
本单元主要探讨图片与背景的美化与布局，熟悉了图片与背景的美化方法，训练了单张图片、多张图片、图文混排、带动画效果的相册、图片墙的布局方法。
对HTML中常用的图片标签、背景设置与定位、图像透明度等方面知识进行了全面介绍，同时对利用CSS样式设置图像属性、图文混排布局、全图排版网页的制作、“图片替代文本”效果的实现、利用CSSSprites原理合成图片、利用CSS样式设置图像的阴影效果和采用不同方法将内容性图像和修饰性图像插入到页面等技术要点进行了详细说明。