《03单元3旅游景点推介网页设计.docx》由会员分享，可在线阅读，更多相关《03单元3旅游景点推介网页设计.docx（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、单元3旅游景点推荐网页设计单元3旅游景点推荐网页设计游网站的景点推荐网页通常会运用大量图片，以使网页变得更加生动活泼、更加引人入胜。本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与训练，重点讲解HTML5中的图像标签、CSS的背景设置、图像透明度设置等内容。读者应学会在网页中合理地插入图像和应用图片设计景点推荐网页的方法。教学导航 教学目标1熟悉HTML5中的图像标签2熟悉CSS的背景设置和图像透明度设置3学会在网页中合理地插入图像的方法4学会恰当应用图片设计景点推荐网页的方法4 关键字旅游网站景点推荐网页图像标签背景设置图像透明度设置 参考资料（1）HTML5的常用标签及其
2、属性、方法与事件参考附录A（2）CSS的属性参考附录B 教学方法任务驱动法、分组讨论法、探究学习法 课时建议6课时【实例探析】【任务3-1】探析蚂蜂窝的推荐旅游目的地网页【效果展示】蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果如图3-1所示。图3-1蚂蜂窝的推荐旅游目的地网页0301.html的浏览效果蚂蜂窝的推荐旅游目的地网页0301.html从上至下包括4个组成部分，分别为链接图片和标题文字、搜索文本框、选项卡按钮、推荐旅游目的地的图片列表，如图3-1所示。【网页探析】1网页0301.html的HTML代码探析网页0301.html的HTML代码如表3-1所示。网页0301.ht
3、ml主体结构的HTML代码如表3-2所示，该网页主体结构包括4个组成部分，其中第1个部分使用标签实现的，第2个部分使用标签实现的，第3个分部使用标签实现的，第4个部分使用标签实现。2网页0301.html的CSS代码探析网页0301.html通用CSS代码定义如表3-3所示。网页0301.html主体结构的CSS代码如表3-4所示。网页0301.html第1个和第2个组成部分的CSS代码定义如表3-5所示。网页0301.html第3个组成部分的CSS代码定义如表3-6所示。网页0301.html第4个组成部分的CSS代码定义如表3-7所示。【知识疏理】1HTML5中常用的图像标签（1）标签标签
4、用于向网页中嵌入一幅图像。从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。标签创建的是被引用图像的占位空间。 标签有两个必需的属性：src属性和alt属性。（2）标签和标签标签表示一段独立的流内容（图像、图表、照片、代码等），一般表示文档主体流内容中的一个独立单元，figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用figcaption元素可以为figure元素组添加标题。（3）标签标签定义图像映射中的区域（图像映射是指带有可单击区域的图像）。area元素总是嵌套在标签中，标签中的usemap属性与map元素name属性相关联，创建图像与映射之间的
5、联系。2CSS的背景设置（1）CSS背景属性（Background）background-origin属性用于规定背景图片的定位区域，背景图片可以放置于content-box、padding-box或border-box区域。（2）背景色CSS允许应用纯色作为背景，可以使用background-color属性为元素设置背景色，这个属性接受任何合法的颜色值。（3）背景图像CSS也允许使用背景图像创建相当复杂的效果，要把图像放入背景，需要使用background-image属性，background-image属性的默认值是none，表示背景上没有放置任何图像。（4）背景重复如果需要在页面上对背景
6、图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。（5）背景定位可以利用background-position属性改变图像在背景中的位置。 关键字图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right使图像放置在元素内边距区的右上角。根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字（一个对应水平方向，另一个对应垂直方向）。如果只出现一个关键字，则认
7、为另一个关键字是center。 百分数值如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。这一点与关键字类似。background-position的默认值是0% 0%，在功能上相当于top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。 长度值长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。（6）背景关联可以通过background-attachment属性防止这种滚动，通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。background-attachment属性的默认
8、值是scroll，也就是说，在默认的情况下，背景会随文档滚动。3CSS图像透明度通过CSS创建透明图像是很容易的，定义透明效果的CSS3属性是opacity。CSS的opacity属性是W3C CSS推荐标准的一部分。【引导训练】【任务3-2】设计去哪儿旅行网的Touch版旅图网页【任务描述】编写HTML代码和CSS代码，设计如图3-3所示去哪儿旅行网的Touch版旅图网页0302.html。图3-3去哪儿旅行网的Touch版旅图网页0302.html的浏览效果去哪儿旅行网的Touch版旅图网页0302.html的主体结构为上、中、下结构，如图3-3所示。顶部内容包括主页链接按钮、标题文字、L
9、ogo图片和下载链接按钮等多个超链接，中部内容包括多行旅行图片，底部内容包括多个导航超链接和版权信息。网页0302.html顶部结构使用标签实现，中部结构使用标签实现，底部结构使用标签实现。【任务实施】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代码网页03
10、02.html主体结构的HTML代码如表3-10所示。2网页0302.html的局部内容设计（1）网页0302.html的顶部内容设计网页0302.html顶部内容的CSS代码定义如表3-11所示。在网页0302.html顶部代码“”与“”之间编写HTML代码，实现其功能，网页0302.html顶部内容的HTML代码如表3-12所示。（2）网页0302.html的中部内容设计网页0302.html中部内容的CSS代码定义如表3-13所示。在网页0302.html中部代码“”和“”之间编写HTML代码，实现其功能，网页0302.html中部内容的HTML代码如表3-14所示。（3）网页0302.
11、html的底部内容设计网页0302.html底部内容的CSS代码定义如表3-15所示。在网页0302.html底部代码“”和“”之间编写HTML代码，实现其功能，网页0302.html底部内容的HTML代码如表3-16所示。【网页浏览】保存网页0302.html，在浏览器中的浏览效果如图3-3所示。【同步训练】【任务3-3】设计携程旅行网的最佳旅游景区网页【任务描述】编写HTML代码和CSS代码，设计如图3-4所示携程旅行网的最佳旅游景区网页0303.html。图3-4携程旅行网的最佳旅游景区网页0303.html的浏览效果携程旅行网的最佳旅游景区网页0303.html的主体结构为上、下结构，
12、如图3-4所示。顶部内容为标题图片，底部内容为最佳旅游景区的图片和景区简介。网页0303.html顶部结构使用标签实现，底部结构使用标签实现。【任务实施】1网页0303.html的主体结构设计在本地硬盘的文件夹“03旅游景点推荐网页设计0303”中创建网页0303.html。（1）定义网页0303.html通用CSS代码网页0303.html通用CSS代码定义如表3-17所示。（2）定义网页0303.html主体结构的CSS代码网页0303.html主体结构的CSS代码如表3-18所示。（3）编写网页0303.html主体结构的HTML代码网页0303.html主体结构的HTML代码如表3-1
13、9所示。2网页0303.html的局部内容设计（1）网页0303.html的顶部内容设计网页0303.html顶部内容的CSS代码定义见本书提供的电子资源。在网页0303.html顶部代码“”与“”之间编写HTML代码，实现其功能，网页0303.html顶部内容的HTML代码如表3-20所示。（2）网页0303.html的下部内容设计网页0303.html下部内容的CSS代码定义见本书提供的电子资源。在网页0303.html下部代码“”和“”之间编写HTML代码，实现其功能，网页0303.html下部内容的HTML代码如表3-21所示。【网页浏览】保存网页0303.html，在浏览器中的浏览效果如图3-4所示。【拓展训练】【任务3-4】设计路趣网手机版的热点景点推荐网页【任务描述】编写HTML代码和CSS代码，设计如图3-5所示路趣网手机版的热点景点推荐网页0304.html。图3-5路趣网手机版的热点景点推荐网页0304.html的浏览效果【单元小结】本单元通过对旅游网站的旅游目的地推荐网页和景点推荐网页设计的探析与三步训练，重点熟悉了HTML5中的图像标签、CSS的背景设置、图像透明度设置等，学会了在网页中合理地插入图像，学会了恰当应用图片设计景点推荐网页的方法。7