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

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

2、TML5中的图像标签中的图像标签（2）熟悉）熟悉CSS的背景设置和图像透明度设置的背景设置和图像透明度设置（3）学会在网页中合理地插入图像）学会在网页中合理地插入图像（4）学会恰当应用图片设计景点推荐网页的方法）学会恰当应用图片设计景点推荐网页的方法关关 键键 字字旅游网站景点推荐网页图像标签背景设置图像透明度设置旅游网站景点推荐网页图像标签背景设置图像透明度设置参考资料参考资料（1）HTML5的常用标签及其属性、方法与事件参考附录的常用标签及其属性、方法与事件参考附录B（2）CSS的属性参考附录的属性参考附录C（3）CSS的各种选择器的含义和用法参考附录的各种选择器的含义和用法参考附录D教学

3、方法教学方法任务驱动法、分组讨论法、理论实践一体化、探究学习法任务驱动法、分组讨论法、理论实践一体化、探究学习法课时建议课时建议6课时课时实例探析实例探析【任务任务3-1】探析蚂蜂窝的推荐旅游目的地网页探析蚂蜂窝的推荐旅游目的地网页【效果展示效果展示】蚂蜂窝的推荐旅游目的地网页蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果如图的浏览效果如图3-1所示。所示。图图3-13-1蚂蜂窝的推荐旅游目的地网页蚂蜂窝的推荐旅游目的地网页0301.html0301.html的浏览效果的浏览效果 蚂蜂窝的推荐旅游目的地网页蚂蜂窝的推荐旅游目的地网页0301.html从从上至下包括上至下包括4个组成部分

4、，分别为链接图片和个组成部分，分别为链接图片和标题文字、搜索文本框、选项卡按钮、推荐旅标题文字、搜索文本框、选项卡按钮、推荐旅游目的地的图片列表。游目的地的图片列表。【网页探析网页探析】1网页网页0301.html的的HTML代码探析代码探析2网页网页0301.html的的CSS代码探析代码探析知识梳理知识梳理 HTML和和XHTML最引人注目的特最引人注目的特征之一，就是能够在文档的文本中包括征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者

5、作可通过超链接下载的单独文档，或者作为文档的背景。为文档的背景。合理地在文档内容中加入图像（静合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、态的或者具有动画效果的图标、照片、说明、绘画等）时，会使文档变得更加说明、绘画等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接还可以专门使一个图像成为超链接的可视引导图。的可视引导图。然而，如果过度使用图像，文档就然而，如果过度使用图像，文档就会变得支离破碎，而且无法阅读，用户会变得支离破碎，而且无法阅

6、读，用户在下载和查看该页面时，更会增加很多在下载和查看该页面时，更会增加很多不必要的等待时间。不必要的等待时间。1HTML5中常用的图像标签中常用的图像标签（1）标签标签 标签用于向网页中嵌入一幅标签用于向网页中嵌入一幅图像。图像。从技术上讲，从技术上讲，标签并不会在标签并不会在网页中插入图像，而是从网页上链接图网页中插入图像，而是从网页上链接图像。像。标签创建的是被引用图像的标签创建的是被引用图像的占位空间。占位空间。标签有两个必需的属性：标签有两个必需的属性：src属性和属性和alt属性。属性。（2）标签和标签和标签标签 标签表示一段独立的流内容（图标签表示一段独立的流内容（图像、图表、照

7、片、代码等），一般表示文档主像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，体流内容中的一个独立单元，元素的元素的内容应该与主内容相关，但如果被删除，则不内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。应对文档流产生影响。使用使用元素可以为元素可以为元素元素组添加标题。组添加标题。（3）标签标签 标签定义图像映射中的区域（图标签定义图像映射中的区域（图像映射是指带有可单击区域的图像）。像映射是指带有可单击区域的图像）。元素总是嵌套在元素总是嵌套在标签中，标签中，标签中的标签中的usemap属性与属性与元素元素name属性相关联，创建图像与映射之间的属性相关联，创建

8、图像与映射之间的联系。联系。中的中的usemap属性可引用属性可引用中中的的id或或name属性（由浏览器决定），所以我属性（由浏览器决定），所以我们需要同时向们需要同时向添加添加id和和name两个属性。两个属性。2CSS的背景设置的背景设置（1）CSS背景属性背景属性 在在CSS3之前，背景图片的尺寸是由之前，背景图片的尺寸是由图片的实际尺寸决定的。图片的实际尺寸决定的。在在CSS3中，可以规定背景图片的尺中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复寸，这就允许我们在不同的环境中重复使用背景图片。使用背景图片。可以以像素或百分比规定尺寸，如可以以像素或百分比规定尺寸，如果以百

9、分比规定尺寸，那么尺寸相对于果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。父元素的宽度和高度。图图3-2背景图片放置位置的示意图背景图片放置位置的示意图（2）背景色）背景色 CSS允许应用纯色作为背景，可以使允许应用纯色作为背景，可以使用用background-color属性为元素设置背景属性为元素设置背景色，这个属性接受任何合法的颜色值。色，这个属性接受任何合法的颜色值。（3）背景图像）背景图像 CSS也允许使用背景图像创建相当复也允许使用背景图像创建相当复杂的效果，要把图像放入背景，需要使用杂的效果，要把图像放入背景，需要使用background-image属性，属性，backgr

10、ound-image属性的默认值是属性的默认值是none，表示背景上没有放，表示背景上没有放置任何图像。置任何图像。（4）背景重复）背景重复 如果需要在页面上对背景图像进行平如果需要在页面上对背景图像进行平铺，可以使用铺，可以使用background-repeat属性。属性。属性值属性值repeat导致图像在水平、垂直导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常方向上都平铺，就像以往背景图像的通常做法一样。做法一样。repeat-x和和repeat-y分别导致图像只在水分别导致图像只在水平或垂直方向上重复，平或垂直方向上重复，no-repeat则不允许图则不允许图像在任何方向上平铺

11、。像在任何方向上平铺。默认地，背景图像将从一个元素的左上默认地，背景图像将从一个元素的左上角开始。角开始。（5）背景定位）背景定位 关键字关键字 图像放置关键字最容易理解，其作图像放置关键字最容易理解，其作用如其名称所表明的。用如其名称所表明的。根据规范，位置关键字可以按任何根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字顺序出现，只要保证不超过两个关键字（一个对应水平方向，另一个对应垂直（一个对应水平方向，另一个对应垂直方向）。方向）。如果只出现一个关键字，则认为另如果只出现一个关键字，则认为另一个关键字是一个关键字是center。所以，如果希望每个段落的中部上所以，如果希望

12、每个段落的中部上方出现一个图像。方出现一个图像。百分数值百分数值 百分数值的表现方式更为复杂。百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元假设希望用百分数值将图像在其元素中居中。素中居中。长度值长度值 长度值解释的是元素内边距区左上长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。角的偏移，偏移点是图像的左上角。（6）背景关联）背景关联 如果文档比较长，那么当文档向下如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动，当文滚动时，背景图像也会随之滚动，当文档滚动到超过图像的位置时，图像就会档滚动到超过图像的位置时，图像就会消失。消失。3CSS图像透明度图像透明

13、度 通过通过CSS创建透明图像是很容易的，创建透明图像是很容易的，定义透明效果的定义透明效果的CSS3属性是属性是opacity。CSS的的opacity属性是属性是W3C CSS推荐推荐标准的一部分。标准的一部分。（1）创建透明图像）创建透明图像（2）创建透明图像的）创建透明图像的Hover效果效果引导训练引导训练【任务任务3-2】设计去哪儿旅行网的设计去哪儿旅行网的Touch版版旅图网页旅图网页【任务描述任务描述】编写编写HTML代码和代码和CSS代码，设计代码，设计图图3-3所示去哪儿旅行网的所示去哪儿旅行网的Touch版旅图版旅图网页网页0302.html。图图3-3去哪儿旅行网的去哪

14、儿旅行网的Touch版版旅图网页旅图网页0302.html的浏览效果的浏览效果 去哪儿旅行网的去哪儿旅行网的Touch版旅图网页版旅图网页0302.html的主体结构为上、中、下结构，如图的主体结构为上、中、下结构，如图3-3所示。所示。顶部内容包括主页链接按钮、标题文字、顶部内容包括主页链接按钮、标题文字、Logo图片和下载链接按钮等多个超链接，中图片和下载链接按钮等多个超链接，中部内容包括多行旅行图片，底部内容包括多部内容包括多行旅行图片，底部内容包括多个导航超链接和版权信息。个导航超链接和版权信息。【任务实施任务实施】1网页网页0302.html的主体结构设计的主体结构设计 在本地硬盘的

15、文件夹在本地硬盘的文件夹“03旅游景点推旅游景点推荐网页设计荐网页设计0302”中创建网页中创建网页0302.html。（1）定义网页）定义网页0302.html通用通用CSS代码代码（2）定义网页）定义网页0302.html主体结构的主体结构的CSS代码代码（3）编写网页）编写网页0302.html主体结构的主体结构的HTML代码代码2网页网页0302.html的局部内容设计的局部内容设计（1）网页）网页0302.html的顶部内容设计的顶部内容设计（2）网页）网页0302.html的中部内容设计的中部内容设计（3）网页）网页0302.html的底部内容设计的底部内容设计同步训练同步训练【任

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

17、区的图片和景区简介。【任务实施任务实施】1网页网页0303.html的主体结构设计的主体结构设计（1）定义网页）定义网页0303.html通用通用CSS代码代码（2）定义网页）定义网页0303.html主体结构的主体结构的CSS代代码码（3）编写网页）编写网页0303.html主体结构的主体结构的HTML代码代码2网页网页0303.html的局部内容设计的局部内容设计（1）网页）网页0303.html的顶部内容设计的顶部内容设计（2）网页）网页0303.html的下部内容设计的下部内容设计拓展训练拓展训练【任务任务3-4】设计路趣网手机版的热点景点设计路趣网手机版的热点景点推荐网页推荐网页【任

18、务描述任务描述】编写编写HTML代码和代码和CSS代码，设计代码，设计图图3-5所示路趣网手机版的热点景点推荐所示路趣网手机版的热点景点推荐网页网页0304.html。图图3-5路趣网手机版的热点景点路趣网手机版的热点景点推荐网页推荐网页0304.html的浏览效果的浏览效果【操作提示操作提示】（1）网页）网页0304.html的的HTML代码编写提代码编写提示示（2）网页）网页0304.html的的CSS代码定义提示代码定义提示单元小结单元小结 本单元通过对旅游网站的旅游目的本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析地推荐网页和景点推荐网页设计的探析与三步训练，重点熟悉了与三步训练，重点熟悉了HTML5中的图中的图像标签、像标签、CSS的背景设置、图像透明度的背景设置、图像透明度设置等，学会了在网页中合理地插入图设置等，学会了在网页中合理地插入图像，学会了恰当应用图片设计景点推荐像，学会了恰当应用图片设计景点推荐网页的方法。网页的方法。