HTML5+CSS3移动Web开发实战单元3--旅游景点推荐网页设计.ppt

单元3 旅游景点推荐网页设计
旅游网站的景点推荐网页通常会运用大量图片，使网页变得更加生动活泼，更加引人入胜。
本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与训练，重点学习HTML5中的图像标签、CSS的背景设可以为<figure>元素组添加标题。
（3）<area>标签
<area> 标签定义图像映射中的区域（图像映射是指带有可单击区域的图像）。
<area>元素总是嵌套在<map>标签中，<img>标签中的usemap属性与<map>元素
name属性相关联，创建图像与映射之间的
联系。
<img>中的usemap属性可引用<map>中
的id或name属性（由浏览器决定），所以我
们需要同时向<map>添加id和name两个属性。
2．CSS的背景设置
（1）CSS背景属性
在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。
在CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
可以以像素或百分比规定尺寸，如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
图3-2　背景图片放置位置的示意图
（2）背景色
CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。
（3）背景图像
CSS也允许使用背景图像创建相当复
杂的效果，要把图像放入背景，需要使用background-image属性，background-image
属性的默认值是none，表示背景上没有放
置任何图像。
（4）背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。
属性值repeat导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常做法一样。
repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。
（5）背景定位
① 关键字
图像放置关键字最容易理解，其作用如其名称所表明的。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字（一个对应水平方向，另一个对应垂直方向）。
如果只出现一个关键字，则认为另一个关键字是center。
所以，如果希望每个段落的中部上方出现一个图像。
② 百分数值
百分数值的表现方式更为复杂。
假设希望用百分数值将图像在其元素中居中。
③ 长度值
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。
（6）背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置时，图像就会消失。
3．CSS图像透明度
通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。
CSS的opacity属性是W3C CSS推荐标准的一部分。
（1）创建透明图像
（2）创建透明图像的Hover效果
引导训练
【任务3-2】设计去哪儿旅行网的Touch版旅图网页
【任务描述】
编写HTML代码和CSS代码，设计图3-。
图3-3　去哪儿旅行网的Touch版
去哪儿旅行网的Touch版旅图网页0302. html的主体结构为上、中、下结构，如图3-3所示。
顶部内容包括主页链接按钮、标题文字、Logo图片和下载链接按钮等多个超链接，中部内容包括多行旅行图片，底部内容包括多
个导航超链接和版权信息。
【任务实施】
1．
在本地硬盘的文件夹“03旅游景点推荐网页设计\0302”。
（1）
（2）
（3）
2．
（1）
（2）
（3）
同步训练
【任务3-3】设计携程旅行网的最佳旅游景区网页
【任务描述】
编写HTML代码和CSS代码，设计图3-。
图3-4　携程旅行网的最佳旅游景区网页
携程旅行网的最佳旅游景区网页0303. html的主体结构为上