九寨沟旅游网页设计论文.doc
镇江高专毕业设计（论文）镇 江 高 专ZHENJIANG COLLEGE 毕 业 设 计 (论 文) 九寨沟旅游网页设计Jiuzhaigou tourism webpage designs系 名： 电子信息系 专业班级： 学生姓名： 学 号： 指导教师姓名： 指导教师职称： 副教授 2013年 05月目 录第一章 绪 论 11.1 网页制作背景11.2 网页制作的意义和目标1第二章 开发工具的选用及介绍 22.1 Macromedia Dreamweaver 8的简介22.1.1 Dreamweaver 8 简介 22.1.2 Dreamweaver 8 功能 22.2 Flash 的简单32.3 Photoshop 的简介32.3.1 Adobe Photoshop 的简介 32.3.2 Adobe Photoshop 功能特色 4第三章网页分析与设计53.1 网页整体风格与结构图53.1.1 网页整体风格 53.1.2 结构图63.2 首页的设计与实现 63.3 其它网页页的设计与实现93.3.1 风景名胜与风土人情93.3.2 特色美食 173.3.3 旅游须知与精品路线 243.3.4 联系我们与在线留言 29结论 35致谢 36参考文献 37九寨沟旅游网页设计专业班级： 学生姓名： 指导教师： 职 称：副教授摘要 随着计算机技术,网络技术的迅猛发展,Internet的不断普及，网络在各个领域里发挥了越来越重要的作用。特别是随着近年人民生活水平的不断提高，旅游成为了一个热门话题。一些特色景点已经在网上旅游方面取得了巨大的成就。本文是九寨沟旅游网，就网页的设计与制作进行了研究,主要内容如下：· 对网页的设计背景和整个风格进行了概述。· 使用Dreamweaver + Flash + Photoshop等软件进行介绍。· 对自己设计的网页从设计理念到制作进行详细的分析。· 就网页的实际与制作提出自己的观点及建议。关键词：旅游； 网络； 网页；Dreamweaver Jiuzhaigou tourism webpage designAbstract With the development of computer technology, the rapid development of network technology, the rapid development of Internet, network is playing an increasingly important role in various fields. Especially in recent years with the improvement of peoples living standards, tourism has become a hot topic. Some scenic spots have made great achievements in the aspects of network travel. This is the Jiuzhaigou tourism network, researches the design and making of the webpage, the main contents are as follows:· On the Webpage design background and the overall style is outlined.· To introduce the use of Dreamweaver + Flash + Photoshop software.· To design their own webpage from design concept to make more detailed analysis.· On the webpage practical and put forward their views and suggestions.Key words：Traveling; Network; Webpage; Dreamweaver引 言互联网作为信息双向交流和通讯的工具，已经成为人们青睐的传播媒介，被称之为广播、报纸、电视后的第五种媒体数字媒体。网络可以为带来景点不分地域、不分国别的大量游客，带来无限的商机。对于一个旅游景点来说,建立一个网站是非常有必要的。不仅可以给景点带来了经济效益，也起到了推广和宣传的作用。镇江高专毕业设计（论文）第一章 绪 论1.1 网页制作的背景旅游业，作为世界最大的产业之一，其发展情况常常被视为衡量一个国家经济发达程度的一个重要指标，正在高速的发展。相比传统旅游企业，旅游网站比旅游企业更有优势，旅游网站信息更丰富、经营方式更合理，游客可在网站里收集文字、图片、游记、评论以及目的地的景点、食宿和交通等详尽的信息，还可通过链接和搜索引擎带你漫游相关网站。由于旅游网站可以打破地域的限制，可以最大限度地将各种旅游资源以最经济的方式结合在一起，同时无店铺经营也将有助于降低成本，使消费者得到益处。对于闻名于世的九寨沟风景区来说，慕名而来的游客沉醉于九寨沟如诗如画的自然美景，体验着传承千年的当地文化，因此如何让游客更好的了解九寨沟景区，以最短的时间体验最多的九寨沟特色成为本课题的主旨。1.2 网页制作的意义和目标本网站定位于一个自助休闲旅游为主，文化特色为辅的文化旅游网站。出游前，可以在网上查找目地的攻略和出游路线等相关景点信息；出游归来，可以分享你的建议或意见。建立一个以景点介绍为主的旅游网站，突出景点特色，有美观的界面设计。第二章 开发工具的选用及介绍2.1 Macromedia Dreamweaver 8的简介2.1.1 Macromedia Dreamweaver 8的简介Macromedia Dreamweaver 8 是一款专业的 HTML 编辑器，用于对Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论是喜欢直接编写 HTML 代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为提供帮助良多的工具，丰富的 Web 创作体验。本指南将介绍如何使用 Macromedia Dreamweaver 8，其对象是对该软件的主要特性尚不熟悉的用户。2.1.2 Dreamweaver 8 的功能利用 Dreamweaver 中的可视化编辑功能，可以快速创建 Web 页面而无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在 Macromedia Fireworks 或其它图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，从而优化开发工作流程。Dreamweaver 还提供了其它工具，可以简化向Web 页中添加 Flash 资源的过程。除了可帮助生成 Web 页的拖放功能外，Dreamweaver 还提供了功能全面的编码环境，其中包括代码编辑工具（例如代码颜色、标签完成、“编码”工具栏和代码折叠）；有关层叠样式表 (CSS)、JavaScript、ColdFusion标记语言 (CFML) 和其它语言的语言参考资料。Macromedia 的可自由导入导出 HTML 技术可导入手工编码的 HTML 文档而不会重新设置代码的格式，可以随后用首选的格式设置样式来重新设置代码的格式。Dreamweaver 还使可以使用服务器技术（如 CFML、ASP.NET、ASP、JSP 和 PHP）生成动态的、数据库驱动的 Web 应用程序。如果偏爱使用 XML 数据， Dreamweaver 也提供了相关工具，可帮助轻松创建 XSLT 页、附加 XML 文件并在 Web 页中显示 XML 数据。Dreamweaver 可以完全自定义。可以创建自己的对象和命令，修改快捷键，甚至编写 JavaScript 代码，用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。2.2 Flash的简介Flash是由Macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档，后又被Adobe公司收购。Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用Adobe AcitonScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。Flash Player 是一款能够播放小又快速的多媒体动画，以及交互式的动画、飞行标志和用macromedia flash做出的图像。这个播放器非常小，只需花一点点时间下载，对于在体验网页上的多媒体效果是个很好的开始。Flash也支持高品质的mp3音频流、文字输入字段、交互式接口等等很多东西。这个最新版本可以观看所有的flash格式。若你要观看网页上的多媒体内容，flash player几乎是网络上的标准。为此播放器所制作的动画或图像十分常见。2.3 Photoshop的简介2.3.1 Adobe Photoshop的简介Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。2003年，Adobe将 Adobe Photoshop 8更名为Adobe Photoshop CS。因此，最新版本Adobe Photoshop CS6是Adobe Photoshop中的第13个主要版本。Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件,是Adobe公司旗下最为出名的图像处理软件之一。多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，Photoshop的应用领域很广泛，在图像、图形、文字、视频、出版等各方面都有涉及。 2.3.2 Adobe Photoshop功能特色从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路；该软件提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是该软件中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色偏的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。而各种特效字的制作更是很多美术设计师热衷于该软件的研究的原因。 第三章网页分析与设计3.1 功能分析及结构图3.1.1 网页整体风格九寨沟旅游网整体设计风格明快、简洁。包含了风景名胜、风土人情、特色美食、旅游须知、精品路线、联系我们以及在线留言页面。主页面是一个网站的门面，要特别注重设计和规划。它是用户首先见到的页面，它的好坏直接影响到网站的访问率。为此，作者从以下几个方面对主界面 进行了设计。在色彩搭配上，网站主题是休闲类旅游网站，以一种清闲淡雅的色彩为基调，配以相关的其他色彩，给用户一种美而不艳的美感。在字体选用上，大小适当，尽量使用常用字体，适当的配用艺术字。在网页制作上，采用在框架中嵌入子页，将大表化小，图片压缩，尽量减少页面响应时间。在内容上，主界面内容充实而不繁杂，既体现本站特色，又能满足用户需要。3.1.2 结构图五彩池首页精品路线旅游须知风土人情风景名胜联系我们在线留言五花海珍珠滩芦苇海盆景滩五 绝镜 海图3.1 网页结构图3.2 首页设计与实现首页包含了风景名胜、风土人情、特色美食、旅游须知、精品路线、联系我们以及在线留言页链接。主页能够让人一目了然的知道各个链接页面，链接页面以文字及图片的形式从不同方面展示网页特色。在首页中，标题以九寨沟特色风景有背景,突出九寨沟的自然风景,为九寨沟做宣传打广告。首页中以文字的形式显示出最近的路线、最新活动以及门票价格等内容，还以图文结合的形式介绍九寨沟及特色景点,并通过链接方式链接到特色美食和风土人情,使程序执行的时间达到最短，并且呈现出最大的信息量。让浏览者一打开网站就能以最快的速度浏览到九寨沟的最新信息和特色景点，方便浏览者了解九寨沟。首页效果图如图3.2所示：图3.2 首页首页部分代码如下:CSS样式层<style type="text/css"><!Body Background-color:#ffffcc; #form1 strong font-family:”宋体”;font-size: 14px;#form1 p font-family:”宋体”;font-size: 14px;#form1 p -></style>插入表单及图片并做锚点链接 <table width="1004" height="701" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="5"><form id="form1" name="form1" method="post" action=""> <table width="1004" border="0" cellspacing="0" cellpadding="0"> <tr> <th height="330" scope="col"><img src="images/index_01.gif"width= "1004" height="332" border="0" usemap="#Map4" /> <map name="Map4" id="Map4"> <area shape="rect" coords="836,26,896,46" href="lxwm.html" /> <area shape="rect" coords="745,26,810,50" href="jplx.html" /> <area shape="rect" coords="663,29,732,48" href="lyxz.html" /> <area shape="rect" coords="572,28,638,51" href="tsms1.html" /> <area shape="rect" coords="489,30,551,51" href="ftrq.html" /> <area shape="rect" coords="403,29,472,49" href="fjms.html" /> <area shape="rect" coords="342,27,385,45" href="#" /> </map> <table width="1004" border="0" cellspacing="0" cellpadding="0"> </table></th> </tr></table>表格、图片插入及相关设置<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50"><table width="100" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/index_02.gif" width="736" height="184" border="0" usemap="#Map2" /></td> </tr> <tr> <td height="138"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td width="35%"><img src="images/index_16.gif" width="261" height="165" /></td> <td width="65%" rowspan="2"><img src="images/index_14.gif" width="475" height="358" border="0" usemap="#Map5" /></td> </tr> <tr> <td><img src="images/index_6.gif" width="261" height="193" /></td> </tr> </table></td> </tr></table> <td width="859"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="93%"><img src="images/index_10.gif" width="250" height="227" border="0" usemap="#Map3" /></td> </tr> </table>3.3 其它网页设计与实现3.3.1 风景名胜与风土人情风景名胜是九寨沟信息呈现的一个载体。在这里，旅游可以很方便的浏览到九寨沟的各个著名景点。网页中插入Flash动画，可循环播放九寨沟特色景观，并通过链接的方式链接到镜海、彩林、叠瀑、雪峰、盆景滩、芦苇海、珍珠海等景点的介绍。风景名用效果图如图3.3所示：图3.3 风景名胜主要代码：标题图片的插入及锚点链接<table width="1004" border="0" align="center"><tr> <td><img src="images/2_011.PNG" width="1003" height="244" border="0"usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="343,26,379,47" href="index.html" /> <area shape="rect" coords="407,28,466,47" href="fjms.html" /> <area shape="rect" coords="490,27,552,48" href="ftrq.html" /> <area shape="rect" coords="572,30,633,48" href="tsms1.html" /> <area shape="rect" coords="664,28,727,47" href="lyxz.html" /> <area shape="rect" coords="738,29,802,48" href="jplx.html" /> <area shape="rect" coords="835,29,897,49" href="lxwm.html" /> </map></td></tr></table>水平线的插入<hr width="900" />Flash图片的插入<tr><td width="659" rowspan="13"><div align="center"> <embed src="other/图片效果/jzg.swf" width="643" height="430" hspace="1" vspace="1" quality="high" ></embed></div></td></tr>超级链接<tr><td width="362" height="32">•有着“鱼在天上游，鸟在水中飞"的<a href="jh.html">镜海</a></td></tr><tr><td width="362" height="32">•九寨沟五绝之首的<a href="wj.Html #cl ">彩林</a></td></tr><tr><td height="32">•五绝之一的<a href="wj.html#dp">叠瀑</a></td></tr><tr><td height="32">•水的精灵<a href="wj.html#ch">翠海</a></td></tr><tr><td height="33">•<a href="wj.html#xf">雪峰</a>：英勇的武士</td></tr><tr><td height="32">•千姿百态的<a href="pjt.html">盆景滩</a></td></tr><tr><td height="32">•九寨沟<a href="lwh.html">芦苇海</a></td></tr><tr><td height="32">•九寨沟内最大的海子-长海</td></tr><tr><td height="32">•<a href="zzt.html">珍珠滩</a>： 西游记片头景的拍摄点</td></tr><tr><td height="32">•九寨沟的骄傲-<a href="whh.html">五花</a></td></tr><tr><td height="32">•<a href="whh.html">五花海</a>-神鹿的化身</td></tr><tr><td height="32">•小巧玲珑、明艳夺目的<a href="wcc.html">五彩池</a></td></tr><tr><td height="32"><p>•诺日朗瀑布：九寨沟最宽阔的一道飞瀑</p></td></tr>文字锚点的建立<p class="STYLE7"><a name="cl" id="cl"></a>彩林</p><p class="STYLE7"><a name="dp" id="dp"></a>叠瀑</p><p class="STYLE7"><a name="ch" id="ch"></a>翠海</p><p class="STYLE7"><a name="xf" id="xf"></a>雪峰</p>链接文字锚点<td width="362" height="32">•九寨沟五绝之首的<a href="wj.html# cl">彩林</a> </td><td height="32">•五绝之一的<a href="wj.html#dp">叠瀑</a></td><td height="32">•水的精灵<a href="wj.html#ch">翠海</a></td><td height="33">•<a href="wj.html#xf">雪峰</a>：英勇的武士</td>鼠标经过图像变换<marquee direction="left"><tr><td width="163"> <a href="#" onmouseout= "MM_swapImgRestore()"onmouseover="MM_swapImage('Image8,'','images/2fa62a0c2f21e1c70b7b8242.jpg',1)"><img rc="images/盆景滩.jpg" name="Image8" width="163" height="190" border="0" id="Image8" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImag ('Image9','','images/2fa62a0c2f21e1c70b7b8242.jpg',1)"></a></td><td width="163"><a href="#" onmouseout="MM_swapImgRestore() "onmouseover="MM_swapImage ('Image9','','images/00_13016459051rvh. jpg', 1)"><img src="images/thumb.jpg" name="Image9" width="163" height="190" border="0" id="Image9" /></a></td><td width="163"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/55a628d1967f0d759b502784.jpg',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover= "MM_swapImage('Image12','','images/5a28d1967f0d759b502784.jpg',1)"><img src="images/01300000185581126542145826755.jpg" name= "Image12" width="163" height="190" border="0" id="Image12" /> </a></td><td width="165"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/2010723jg6.jpg',1) "> <img src="images/99334_12690745820WFD.jpg" name="Image11" width= "163" height="190" border="0" id="Image11" /></a></td><td width="165"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/3.jpg',1)"><img src="images/3000012161291757075_950.jpg" name="Image10" width= "163" height="190" border="0" id="Image10" /></a></td><td width="163"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/212_29_386515_7n2hwp.jpg',1)"><img src="images/f1_clip_image001.jpg" name="Image13" width="163" height="190" border="0" id="Image13"/></a></td></tr></marquee>风地人情页，主要功能就是介绍九寨沟的人文风情，特色民俗文化，以文字的方式更方便、直观的展示给浏览者看。在这里，首先为大家介绍的是扎如庙会（麻孜会），藏族艺术。藏族艺术包括：歌舞、劝酒、山歌、竹笛、竹口弦、锅庄以及藏戏。网页通过图片滚动浏览的方式播放当地的有关活动的照片。风土人情效果图如图3.4所示：图3.4 风土人情主要代码：插入表格及文本信息<table width="1004" height="244" border="1" align="center"><tr> <td width="965" height="244"> <img src="images/2_011.PNG" width="1004" height ="244" border="0" usemap="#Map"/></td> </tr></table><p align="center" class="STYLE1">风土人情</p><hr width="900" /><table width="1004" border="0" align="center"><tr> <td width="1004" valign="top"><p align="left" class="STYLE8"><span class="STYLE16"><span class="STYLE17">九寨沟藏族信仰</span></span></p> <p class="STYLE15"> 当地人民信仰本教，这是一种远比藏传佛教更古老的教派，直到今天，在整个阿坝藏族羌族自治州，仍然有约60座本教寺庙。</p> <p class="STYLE15">在九寨沟，也能感受到强烈的宗教氛围：湍急的滩流里，一座座转经轮在水流冲击下，缓缓转动着，那是藏民族永恒的信念会在经幡下磨刀霍霍，立下誓言。现在，这些宗教标志，已经成了藏民族特色的象征，给游客留下深刻印象。</p> <p align="left" class="STYLE8"><span class="STYLE16"> <span class = "STYLE17">扎如庙会 (麻孜会)</span></span></p> <p class="STYLE15"> 扎如寺：从宝镜岩至纳得寨，有一座历史悠久的佛教寺庙每年正月十五日的扎如庙会（又叫“麻孜会”）更是热闹，来的人很多，喇嘛念经，青年人谈情说爱。</p><p align="left" class="STYLE8"><span class="STYLE16"><span class= "STYLE17">藏族艺术</span></span></p> <p class="STYLE15"><strong>歌舞</strong>:中国的藏族是一个能歌善舞的民族，中国的藏乡是歌舞的故乡可以毫不夸张地说，每一位藏族人的人生旅途都有歌声来陪伴，都有舞蹈来相随。</p> <p class="STYLE15"><strong>劝酒</strong>:到九寨沟作客的人们常会遇到劝酒。如果客人过于客气，不喝
