旅游网站设计正文文档格式.docx
《旅游网站设计正文文档格式.docx》由会员分享，可在线阅读，更多相关《旅游网站设计正文文档格式.docx（19页珍藏版）》请在冰豆网上搜索。
1.1系统开发背景
目前，随着科技的发展，时代的进步。
传统的地图与广告已经远远不能满足人们的信息需求，在当今这个年代，人们更愿意的是从网络获得信息，快速而庞大的信息量是其他途径所不能媲美的，而现代旅游网站的产生必定能给人们带来无限的便捷，它是现代旅游人士所迫切需求的。
自互联网Internet成为一种革命性的大众媒体以来，其发展速度之快令人惊叹。
而作为世界最大朝阳产业的旅游，当它与电子商务这一新兴模式相结合时，其潜藏的商业价值表露无遗。
根据CNN公布的数据，全球旅游电子商务已连续5年以超过350%的速度发展,1999年度全球电子商务销售额突破1400亿美元，其中旅游电子商务销售额突破270亿美元，占全球电子商务销售总额的1/5，占电子商务应用的最大份额；
5年前全球就约有超过17万家旅游企业在网上开展旅游服务，享受过旅游网站服务的超过8500万人次。
随着中国经济的高速发展和国民收入的提高，以与旅游业自身的日渐发展成熟，越来越多的人在旅游时选择了自助旅游的方式。
据2004年中国国内旅游抽样调查，按旅游方式分组，传统的由旅行社组织的出游人数仅占10．4％，而各种形式的自助旅游则已经成为现代旅游业发展的主流趋势。
这样，摒弃了跟团旅游全程导游陪同的高度规范化模式，人们在自主旅游决策过程中对旅游信息的需求也越来越迫切。
与此同时，近10年来网络在中国蓬勃发展，从2001年来网民人数每年增长均在2000万左右，2006年6月已达1．23亿。
各地、各方踊跃投资建设旅游网站以实现旅游产业信息化，网络也成为越来越多旅游者新的信息渠道甚至消费方式。
1.2旅游网站的历史和发展
我国旅游电子商务起步较晚，虽然在这些年取得了一定发展，但是由于电子商务的基础薄弱，各项配套设施和相关法律制度还不健全，主要是在借鉴国外旅游电子商务发展的经验和模式，在摸索中前进，经历了以下几个阶段：
（1）萌芽阶段（1996——1998）:
我国旅游网站的建设最早可以追溯到1996年。
1997年由国旅总社参与投资的华夏旅游网的创办是中国旅游电子商务预订网兴起的引人注目的先声。
此后，各类旅游预订网站如雨后春笋纷纷建立，行业规模逐渐扩大。
（2）起步阶段（1999——2002）:
1999年5月，携程旅行网（简称携程）成立，可以说是这一阶段的一个标志。
携程是一家吸纳海外风险投资组建的旅行服务公司，在当时被称为一个“没有门店的旅行社”，它将信息技术、现代运作管理理念与传统旅游业相结合，打造了具有极强竞争力的服务价值链，形成了全新的服务和业务模式。
这种全新的模式和理念，拓展了旅游电子商务的发展模式，适应了旅游业的发展要求，对旅游业的发展起了巨大的推动作用。
（3）发展阶段（2003——2004）:
该阶段以2003年携程在美国纳斯达克成功上市为标志，当时也是互联网全面复苏的时期。
在这个阶段中，中国旅游电子商务市场还处于探索和摸索的阶段，携程上市客观上加速了我国旅游电子商务市场服务水平的提升。
（4）完善阶段（2005——2008）:
2005年我国第三方支付平台——支付宝的出现，为解决网上支付这一瓶颈问题，提供了非常好的解决方案，更重要的是为消费者建立了网上支付的信心，旅游电子商务也开启在线交易的新纪元，特别是对于机票产品，越来越多的实现了在线支付。
（5）新探索阶段（2009——至今）:
2009年1月，千橡互动以1850万美元收购e龙5,283,202股流通股，占后者总流通股本的23.7%。
千橡互动收购e龙这一事件表明，在中国旅游电子商务市场日益发展的前提下，web2.0应用逐渐在探索与旅游业结合的有效模式，未来在盈利模式方面需要形成具有中国特色的突破点。
1.3鑫鑫旅行网网站概述
主要建立一个完整的旅游网站，突出旅游特点，有美观的界面设计。
各景点相关酒店预订、各个景点路程与旅游方式的设计与查询、对个景点所需费用查询。
有一定数量旅游景点信息可供处理。
网站的信息咨询平台可以成为一个浏览者、客户与旅游网站之间互动的流程、渠道。
系统主要功能：
1.用户功能模块：
实现的主要功能包括新用户注册、老用户登陆。
2.信息检索模块：
该模块主要是方便用户对本站景点和酒店进行相关检索。
3.留言模块：
该模块中用户可以发表自己的看法也可浏览其他用户的留言。
4.酒店预定：
该功能模块主要是客户浏览了相关资料后，可通过本模块的下拉一个预定定单。
将个人信息与预定的酒店填写完整后提交表单。
5.信息浏览：
实现的主要功能包括查看站内公告、点击景点，酒店等的信息。
第2章开发工具与主要开发技术简介
2.1Dreamweaver简介
Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。
它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。
DREAMWEAVER特点：
1、灵活的编写方式
Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。
2、可视化编辑界面
Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。
可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。
无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。
3、功能更多的CSS支持——CSS可视化设计、CSS检查工具
4、动态跨浏览器验证
当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。
动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。
5、强大的WEB站点管理功能
6、内建的图形编辑引擎
7、Dreamweaver的集成特性
Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。
8、丰富的媒体支持能力
可以方便地加入Java、Flash、Shockwave、ActiveX以与其他媒体。
Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。
Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。
9、超强的扩展能力
Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩Dreamweaver的功能，并且可以发布这些插件。
2.2PhotoShop简介
AdobePhotoshop是一个由AdobeSystems出品的专业图像处理软件。
与该公司的其它软件一样，Photoshop适用于MacOS与MicrosoftWindows两个操作系统，同时公司也发布了Unix操作系统上的版本。
Google也正在透过Wine资助Linux版Photoshop的研究。
Photoshop最初是由托马斯·
诺尔（ThomasKnoll）和约翰·
诺尔（JohnKnoll）这对兄弟于1987年制作的，但直到1990年后，这个软件才由Adobe公司首次发布。
Photoshop最初用于处理那些在当时价格不菲的扫描仪扫描下来的图像。
特性：
Photoshop主要处理以像素（Pixels）所构成的数字图像。
利用其广泛的编修与绘图工具，可以更有效的进行图片编辑工作。
独特的历史纪录浮动视窗和可编辑的图层效果功能使用户可以方便的测试效果。
对各种滤镜的支持更令使用者能够轻松创造出各种奇幻的效果。
目前，Photoshop也正在被更多的用于处理网络图片。
Photoshop的几个后续版本中捆绑了一个独立的软件ImageReady，加强了Photoshop对网络图像（主要是GIF图像文件）的支持功能。
而在CS3中ImageReady被Fireworks所代替。
PhotoshopCS3允许用户更容易升级到最新的硬件平台，支持苹果的Intel为内核的系统。
Photoshop被人们认为是最好的图像处理软件，但与著名的3DStudioMax一样，昂贵的价格使其难以普与。
这也令JascSoftware公司的PaintShopPro，GIMP小组的GIMP和友立信息的UleadPhotoImpact占领了相当的市场份额。
为了争夺市场，Adobe发布了一个Photoshop的简易版本PhotoshopElements。
虽然它对很多功能都作了限定，但继承了原软件的多数优秀功能，价格比Photoshop便宜不少。
2.3AdobeFlash简介
AdobeFlash，前称MacromediaFlash，简称Flash，前身FutureSplash，既指AdobeFlashProfessional多媒体创作程序，也指AdobeFlashPlayer。
自从Macromedia公司于2005年12月3日被Adobe公司收购，Flash也就成为了Adobe旗下的软件。
1、flash特性：
（1）被大量应用于因特网网页的矢量动画文件格式。
（2）使用矢量图形（VectorGraphics）的方式，产生出来的影片占用存储空间较小。
（3）使用Flash创作出的影片有自己的特殊文件格式（swf）
（4）该公司声称全世界97%的网络浏览器都内置Flash播放器（FlashPlayer）
（5）是Adobe提出的“富因特网应用”（RIA）概念的实现平台
（6）Flash6之后版本纳入面向对象程序概念。
与其他语言比较，不论是在数据库、XML、PHP等各种平台上，都能更进一步的相互结合应用。
（7）从用户体验的角度，是目前最好的前端技术。
2、主要文件格式：
（1）swf
是ShockwaveFlash的缩写，这是一个完整的影片档，无法被编辑。
有时会被念作“swiff”或“swaif”。
SWF在发布时可以选择保护功能，如果没有选择，很容易被别人输入到他的源文件中使用。
然而保护功能依然阻挡不了为数众多的破解软件，有不少闪客专门以此来学习别人的代码和设计方式。
（2）fla
Flash的源文件，只能用AdobeFlash打开编辑。
2.4HTML语言简介
HTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。
自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。
HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。
生成一个HTML文档主要有以下三种途径：
1、手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2、通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3、由Web服务器（或称HTTP服务器）一方实时动态地生成。
HTML语言是通过利用各种标记（tags）来标识文档的结构以与标识超链（Hyperlink）的信息。
虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格与其对标记的解释能力。
这就是为什么同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是2.0，它是基于SGML（StandardGeneralizedMarkupLanguage）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。
虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。
2.5ASP介绍
ASP是Microsoft公司开发的Web服务器端脚本开发环境，利用它可以生成动态、高效的web应用程序。
ASP为VBScript和javascript等脚本语言提供了一个运行环境，使开发人员可以在HTML代码中使用脚本语言编写程序。
同时，ASP自身也提供了一些很好的命令和内置对象。
ASP内含于IIS3.0和4.0之中,通过ASP我们可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。
ASP所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。
当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。
以下罗列了ActiveServerPages所独具的一些特点：
1、使用VBScript、JavaScript等简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。
2、无须compile编译，容易编写，可在服务器端直接执行。
3、使用普通的文本编辑器，如Windows的记事本，即可进行编辑设计。
4、与浏览器无关（BrowserIndependence）,用户端只要使用可执行HTML码的浏览器，即可浏览ActiveServerPages所设计的网页内容。
ActiveServerPages所使用的脚本语言（VBScript、Jscript）均在WEB服务器端执行，用户端的浏览器不需要能够执行这些脚本语言。
5、ActiveServerPages能与任何ActiveXscripting语言相容。
2.6CSS简介
CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
1.层叠式表的特点：
（1）便于页面的修改。
（2）便于页面风格的统一。
（3）减少网页的体积。
2.采用CSS布局相对于传统的TABLE网页布局而具有的优势：
（1）表现和内容相分离：
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。
这样的页面对搜索引擎更加友好。
（2）提高页面浏览速度：
对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。
浏览器就不用去编译大量冗长的标签。
（3）易于维护和改版：
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
第3章网站开发过程与实现流程
根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：
（1）首页：
提供旅游信息。
（2）精选路线：
提供旅游线路与相关的费用。
（3）酒店预订：
需要用户提供个人信息以备预订酒店。
（4）汽车租车：
提供各种型号的汽车，以方便自驾游的游客使用。
（5）风光相册：
展示的是我们旅游线路地沿途风光。
（6）会员中心：
包括新用户注册、老用户登陆
（7）关于我们：
是对鑫鑫旅行网的简介。
（8）留言板：
该模块主要是方便用户和管理人员进行沟通和交流，用户可以发表自己的看法也可浏览其他用户的留言。
3.2主页设计
主界面是一个网站的门面，如同公司的形象，特别注重设计和规划。
它是用户首先见到的界面，它的好坏直接影响到网站的访问率。
为此，我从以下几个方面对主界面进行了设计。
1、在色彩搭配上，我用一种较明快的色彩为基调，配以相关的其他色彩，给用户一种鲜而不艳的美感。
2、在字体选用上，大小适当，尽量使用常用字体，适当配用艺术字。
3、在网页制作上，采用表格划分区域的手法，方便文字和图片的插入。
4、在内容上，主界面内容充实而不繁杂，既体现本站特色，又能满足用户需要。
5、在用户操作上，简化用户操作，删去那些空洞的环节。
例如，“用户注册”只须填写简单信息即可。
在主页的基础上我把主页中加入了可编辑区域，并另存为了模板。
以后的页面都是在模板的基础上进行制作的。
使用模板功能有助于用户设计出风格一致的网页。
通过模板来创建和更新网页，不仅可以大大提高工作的效率，而且维护网站也会变得更加轻松。
鑫鑫旅行网首页如下图3-1：
图3-1：
鑫鑫旅行网首页
3.3系统功能模块设计
根据需求分析的结果，按照“低耦合、高内聚”的原则，本系统将划分为以下主要功能模块：
用户功能模块；
景点信息浏览功能模块；
酒店预订/酒店信息查询功能模块；
在线留言功能模块。
网站功能模块图如下图3-2：
图3-2：
网站功能模块图
1.用户功能模块
（1）用户注册。
新用户首次访问本站，必须注册。
（2）用户登陆。
已注册用户在访问本站，必须先登陆后访问。
登陆时需输入用户名和密码。
用户注册模块流程图如下图3-3：
图3-3：
用户注册模块流程图
网站会员注册页面如下图3-4：
图3-4：
会员注册页面
2.在线留言模块
为了让旅游部门掌握各方面的反馈信息，本系统设置了留言簿模块。
留言信息包括：
留言的用户、留言时间与留言内容。
（1）浏览留言：
用户登陆后可以查看以前的留言。
（2）发表留言：
用户必须填写好完整的信息后才可以留言，在本模块中我使用了ASP脚本语言，方便提醒用户填写完整信息内容。
在制作留言板模块时，为使整个页面给人一种赏心悦目、条理清晰的感觉，我用到了CSS样式表。
在当前网页设计中的CSS是一个必不可少的插件，它弥补了HTML对网页格式化功能的不足，简化了网页的源代码，避免了重复操作，减轻了工作量。
CSS代码查看附录<
Style.css>
代码
在线留言模块流程图如下图3-5：
图3-5：
用户留言模块流程图
将CSS样式表加到页面中的方法：
1、定义外部样式块对象
你可以在你的HTML文档的<
HTML>
和<
BODY>
标记之间插入一个<
STYLE>
...<
/STYLE>
块对象。
定义方式请参阅样式表语法。
示例如下：
<
html>
head>
title>
文档标题<
/title>
styletype="
text/css"
>
!
--
body{font:
10pt"
Arial"
}
h1{font:
15pt/17pt"
;
font-weight:
bold;
color:
maroon}
h2{font:
13pt/15pt"
blue}
p{font:
10pt/12pt"
black}
-->
/style>
/head>
body>
正文内容
/body>
/html>
请注意，这里将style对象的type属性设置为"
，是允许不支持这类型的浏览器忽略样式表单。
2、内联定义（InlineStyles）
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
pstyle="
color:
sienna;
margin-left:
20px"
Thisisaparagraph<
/p>
3、导入样式（ImportStyles）
与链入外部样式的功能基本相同，只是语法和实现方式上有差别
style>
@importurl（css.css）;
@importurl（"
css.css"
）;
//单引号也可以
@importcss.css;
@import"
以上几种形式都可以。
网站签写留言页面如下图3-6：
图3-6：
签写留言页面
3.酒店预定
该功能模块主要是客户浏览了相关资料后，可通过本模块预定酒店定单。
本模块我也使用了ASP脚本语言，用户必须将个人信息与预定的酒店填写完整后，才能进行预订。
在制作酒店预订模块时我添加了表单，运用了大量的文本区域、下拉列表、单选按钮、按钮等，建立了一个较为详细的酒店预订表。
酒店预定功能流
升级会员 