旅游网站的景点推荐网页通常会运用大量图片，使网页变得更加生动活泼，更加引人入胜。本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与训练，重点学习HTML5中的图像标签、CSS的背景设置、图像透明度设置等，学会在网页中合理地插入图像，学会恰当应用图片设计景点推荐网页。

教学导航

实例探析

【任务3-1】探析蚂蜂窝的推荐旅游目的地网页

【效果展示】 蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果如图3-1所示。
蚂蜂窝的推荐旅游目的地网页0301.html从上至下包括4个组成部分，分别为链接图片和标题文字、搜索文本框、选项卡按钮、推荐旅游目的地的图片列表。

【网页探析】 1．网页0301.html的HTML代码探析
网页0301.html的HTML代码如表3-1所示。

网页0301.html主体结构的HTML代码如表3-2所示，该网页主体结构包括4个组成部分，其中第一部分使用< header>标签实现，第二部分使用< section>标签实现，第三分部使用< nav>标签实现，第四部分使用< section>标签实现。

2．网页0301.html的CSS代码探析
网页0301.html通用CSS代码定义如表3-3所示。

网页0301.html主体结构的CSS代码如表3-4所示。

网页0301.html第一和第二组成部分的CSS代码定义如表3-5所示。

网页0301.html第三组成部分的CSS代码定义如表3-6所示。

知识梳理

HTML和XHTML最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。然而，如果过度使用图像，文档就会变得支离破碎，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。
1．HTML5中常用的图像标签
（1）< img>标签
< img>标签用于向网页中嵌入一幅图像。从技术上讲，< img> 标签并不会在网页中插入图像，而是从网页上链接图像。< img>标签创建的是被引用图像的占位空间。< img> 标签有两个必需的属性：src属性和alt属性。
（2）< figure>标签和< figcaption>标签
< figure>标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，< figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用< figcaption>元素可以为< figure>元素组添加标题。向文档中插入带有标题图像的示例代码如下：

< figcaption>标签用于定义< figure>元素的标题，< figcaption>元素应该被置于< figure>元素的第一个或最后一个子元素的位置。
（3）< area>标签
< area> 标签定义图像映射中的区域（图像映射是指带有可单击区域的图像）。
< area>元素总是嵌套在< map>标签中，< img>标签中的usemap属性与< map>元素name属性相关联，创建图像与映射之间的联系。< img>中的usemap属性可引用< map>中的id或name属性（由浏览器决定），所以我们需要同时向< map>添加id和name两个属性。
带有可单击区域的图像映射的示例代码如下：

2．CSS的背景设置
（1）CSS背景属性
在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域，示意图如图3-2所示。

在content-box中定位背景图片的示例代码如下：

（2）背景色
CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。以下这条规则把元素的背景设置为灰色：
p {background-color: gray;}
如果希望背景色从元素中的文本向外稍有延伸，只需增加一些内边距即可：
p {background-color: gray; padding: 20px;}
可以为所有元素设置背景色，这包括一直到< em>和< a>等行内元素。background-color不能继承，其默认值是transparent。transparent有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
（3）背景图像
CSS也允许使用背景图像创建相当复杂的效果，要把图像放入背景，需要使用background-image属性，background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值，示例代码如下：
body {background-image: url(bg_01.gif);}
大多数背景都应用到< body>元素，不过并不仅限于此。下面的示例代码为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
p.flower {background-image: url(bg_02.gif);}
甚至可以为行内元素设置背景图像，下面的示例代码为一个链接设置了背景图像：
a.radio {background-image: url(bg_03.gif);}
background-image也不能继承，事实上，所有背景属性都不能继承。
（4）背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始，请看下面的示例代码：

为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right和center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如100px或5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
① 关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字（一个对应水平方向，另一个对应垂直方向）。如果只出现一个关键字，则认为另一个关键字是center。所以，如果希望每个段落的中部上方出现一个图像，只需声明如下所示的代码：

② 百分数值
百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中，这很容易，示例代码如下：

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为50% 50%的点（中心点）与元素中描述为50% 50%的点（中心点）对齐。如果图像位于0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果想把一个图像放在水平方向2/3、垂直方向1/3处，其代码如下：

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。这一点与关键字类似。background-position的默认值是0% 0%，在功能上相当于top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。
③ 长度值
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。例如，如果设置值为50px 100px，图像的左上角将在元素内边距区左上角向右50px、向下100px的位置上，对应的代码如下所示：

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中指定的点对齐。
（6）背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置时，图像就会消失。可以通过background-attachment属性防止这种滚动，通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响，对应的代码如下：

background-attachment属性的默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。
3．CSS图像透明度
通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。CSS的opacity属性是W3C CSS推荐标准的一部分。
（1）创建透明图像
创建透明图像的CSS代码如下：

IE9、Firefox、Chrome、Opera和Safari使用属性opacity来设定透明度。opacity属性能够设置的值从0.0～1.0，值越小，越透明。IE8及更早的版本使用滤镜filter:alpha(opacity=x)来设定透明度，x能够取的值从0～100。值越小，越透明。
（2）创建透明图像的Hover效果
将鼠标指针移动到图片上时，会改变图片的透明度，实现图像透明度的Hover效果。
创建透明图像的Hover效果的CSS代码如下：

在这个实例中，当指针移动到图像上时，我们希望图像是不透明的，对应的CSS是opacity=1，IE8及更早的浏览器：filter:alpha(opacity=100)。当鼠标指针移出图像后，图像会再次透明。

引导训练

【任务3-2】设计去哪儿旅行网的Touch版旅图网页

【任务描述】
编写HTML代码和CSS代码，设计图3-3所示去哪儿旅行网的Touch版旅图网页0302.html。

去哪儿旅行网的Touch版旅图网页0302.html的主体结构为上、中、下结构，如图3-3所示。顶部内容包括主页链接按钮、标题文字、Logo图片和下载链接按钮等多个超链接，中部内容包括多行旅行图片，底部内容包括多个导航超链接和版权信息。
网页0302.html顶部结构使用< header>标签实现，中部结构使用< article>标签实现，底部结构使用< footer>标签实现。

【任务实施】
1．网页0302.html的主体结构设计
在本地硬盘的文件夹“03旅游景点推荐网页设计\0302”中创建网页0302.html。
（1）定义网页0302.html通用CSS代码
网页0302.html通用的CSS代码定义如表3-8所示。

（2）定义网页0302.html主体结构的CSS代码
网页0302.html主体结构的CSS代码如表3-9所示。

（3）编写网页0302.html主体结构的HTML代码
网页0302.html主体结构的HTML代码如表3-10所示。

2．网页0302.html的局部内容设计
（1）网页0302.html的顶部内容设计
网页0302.html顶部内容的CSS代码定义如表3-11所示。

在网页0302.html顶部代码“< header>”与“< /header>”之间编写HTML代码，实现其功能，网页0302.html顶部内容的HTML代码如表3-12所示。

（2）网页0302.html的中部内容设计
网页0302.html中部内容的CSS代码定义如表3-13所示。

在网页0302.html中部代码“< article data-role="content" class="content_list ui-content" role="main">”和“< /article>”之间编写HTML代码，实现其功能，网页0302.html中部内容的HTML代码如表3-14所示。

（3）网页0302.html的底部内容设计
网页0302.html底部内容的CSS代码定义如表3-15所示。

在网页0302.html底部代码“< footer id="qunarFooter" class="qn_footer">”和“< /footer>”之间编写HTML代码，实现其功能，网页0302.html底部内容的HTML代码如表3-16所示。

【网页浏览】
保存网页0302.html，在浏览器Google Chrome中的浏览效果如图3-3所示。

同步训练

【任务3-3】设计携程旅行网的最佳旅游景区网页

【任务描述】
编写HTML代码和CSS代码，设计图3-4所示携程旅行网的最佳旅游景区网页0303.html。
携程旅行网的最佳旅游景区网页0303.html的主体结构为上、下结构，如图3-4所示。顶部内容为标题图片，底部内容为最佳旅游景区的图片和景区简介。

网页0303.html顶部结构使用< header>标签实现，底部结构使用