旅游网站前端的设计与实现.doc
- 文档编号:1928707
- 上传时间:2023-05-02
- 格式:DOC
- 页数:75
- 大小:8.91MB
旅游网站前端的设计与实现.doc
《旅游网站前端的设计与实现.doc》由会员分享,可在线阅读,更多相关《旅游网站前端的设计与实现.doc(75页珍藏版)》请在冰点文库上搜索。
云南财经大学
学生毕业论文(设计)
题目:
旅游网站前端的设计与实现
院(系):
中华职业学院
专业:
计算机科学与技术
班级:
网络12-1
学号:
201205004650
论文作者:
孔丹
指导教师:
邓平
指导教师职称:
副教授
2015年2月
云南财经大学
本科毕业论文(设计)原创性及知识产权声明
本人郑重声明:
所呈交的毕业论文(设计)是本人在导师的指导下取得的成果。
对本论文(设计)的研究做出重要贡献的个人和集体,均已在文中以明确方式标明。
因本毕业论文(设计)引起的法律结果完全由本人承担。
本毕业论文(设计)成果归云南财经大学所有。
特此声明
毕业论文(设计)作者签名:
作者专业:
计算机科学与技术
作者学号:
201205004650
2016年2月15日
III
摘要
在21世纪这个信息高速发达的时代,网络可谓是当今社会最流行、最方便、最快捷的交流媒介,当然这样便捷的媒介也受到越来越多年轻人和很多商业人士的喜爱,随之而来的就是慢慢的融入我们的生活,让很多人通过这个媒介去了解更多的商业信息。
众所周知,随着人们生活条件的不断改善,生活品质与追求的不断提升,旅游类的网站也在不断的更新和发展,现今,网站已不再是信息的简单公布与展示,对于人们来讲,已完全脱离了单方面获取的性质,更多的是体现组织机构的风采,性质。
所以旅游类的网站对现在的发展已经势在必行。
这篇论文主要集中讲述旅游网站的设计与实现,在旅游网站前端的设计中,
页面的布局时,我们利用HTML将元素进行定义,然后利用CSS对展示的元素进行定位,最后通过JavaScript实现我们想要的效果和交互。
这些内容可能表面看起来很简单,可这里面需要掌握的东西绝对不会少。
在进行设计前,我们必须对这些概念弄清楚和弄明白,只有这样在设计的过程中,我们才会感觉得心应手。
在设计的过程中,我们首先应该分析并解决实现中的若干技术问题;介绍了个性化页面的背景;了解整个个性化页面生成系统的系统结构及工作原理;分析了系统实现中的特殊性,难点和重点;现在我还没有设计用户注册,用户登录,用户管理,可我会把自己设计的这个旅游网站以一种简单明了的方式向大家展现出旅游的各个方面。
并在设计中解决实现中的若干技术问题;努力建立完整的旅游网站,进行测试并分析结果。
我做的这个旅游网站具有一目了然的特性,能让本地区的人们了解更多的旅游资料,更能让世界各地的人了解一些地区的明文风景。
当然美中不足就是该旅游网站还存在一些问题,如网站的留言系统、用户注册、用户登录没建立等等。
这些问题和功能有待于进一步学习和添加。
关键词:
网站设计HTMLCSSjavaScriptJQuery
Abstract
Abstract
Intheeraofthe21stcentury,theinformationhighspeeddevelopment,thenetworkcanbedescribedasisthemostpopularintoday'ssociety,themostconvenient,themostefficientmediumofcommunication,ofcourse,suchaconvenientmediumhasalsobeenmoreandmoreyoungpeopleandmanybusinesspeople'sfavorite,followedbyisslowlyintoourlives,letalotofpeoplethroughthemediatounderstandmorebusinessinformation.
Asisknowntoall,withthepeople'slivingconditionscontinuetoimprove,thepursuitofqualityoflifeandthecontinuousimprovementof,tourismwebsitealsoinconstantlyupdatinganddevelopment.Today,thesiteisnolongersimplypublishanddisplayofinformation,intermsofthepeople,hasbeencompletelyoutoftheunilateralacquisitionofnature,moreistoreflecttheeleganceoftheorganizationnature.Sotourismwebsiteofdevelopmentnowisimperativeunderthesituation.
Thispapermainlyfocusesonthedesignandimplementationofthetourismwebsite,inthedesignofthefrontendofthetourismwebsite,
Thelayoutofthepage,weuseHTMLelementsofthedefinition,andthenuseCSStodisplayelementstopositioning.Finally,wewanttheeffectandinteractionisrealizedthroughJavaScript.Thesecontentsmaysurfaceappearstobeverysimple,thereisneedtomastersomethingabsolutelyisnotless.Beforedesign,wemustontheseconceptstofigureoutandunderstand.Onlyinthiswayintheprocessofdesign,wewillfeelhandy.
Inthedesignprocess,firstofall,weshouldanalyzeandsolvesometechnicalproblemsinimplementationofthe;thepersonalizedpagebackground;understandingentirepersonalizationpageproductionsystemsystemstructureandworkingprinciple;analysisoftheparticularityofthesystemimplementation,theemphasisanddifficulty;nowIhaven'tdesigneduserregistration,userlogin,usermanagement,Iwilltodesignedthetourismsiteinastraightforwardwaytoyoushowallaspectsoftourism.Andresolvetoachieveanumberoftechnicalissuesinthedesign;tobuildtheoveralltourismwebsite,testingandanalysis.
Idothistourismwebsitehasaclearcharacteristic,canletthepeopleoftheregiontounderstandmoretravelinformation,morecanletpeoplearoundtheworldunderstandsomeareasoftheplaintext.
Certainlyflyintheointmentisthatthetourismwebsitesalsoexistsomeproblems,suchaswebsitemessagesystem,userregistration,userloginisnotestablished,andsoon.Theseproblemsandfunctionneedstobeaddedtofurtherstudyand.
Keywords:
websitedesignCSS,HTML,javascriptandJQuery
目录
目录
本科毕业论文(设计)原创性及知识产权声明 I
摘要 II
Abstract III
一、绪论 1
(一)引言 1
(二)旅游网站发展现状 1
1.我国旅游网站发展概述 1
2.网站分类 2
3.网站构建立中存在的问题 3
(三)选择做旅游网站的目的与意义 4
二、网站建设的各种语言的介绍 5
(一)HTML 5
1.HTML语言介绍 5
2.HTML的基本结构 6
(二)DIV+CSS 6
1.div+css简介 6
2.div+css样式表简介 7
3.div+css布局的优点 8
4.div+css布局方式 9
5.div+css理论概述 10
(三)Javascript 10
1.Javascript简介 10
2.Javascript加入网页的两种方法 11
三、开发工具和开发技术简介 13
(一)理想网页的编制者---Dreamweaver 13
(二)图像,图像编辑和设计软件---PS图象处理软件 14
(三)动画设计软件---flash 15
1.falsh特性 15
2.主文件格式 15
四、需求分析 17
(一)网站系统分析 17
(二)功能性需求分类 17
(三)非功能性需求 18
1.用户界面需求 18
2.软硬件环境需求 18
3.网站质量需求 18
五、旅游网站的规划与设计 20
(一)网站功能分析 20
(二)整体风格设计 20
1.页面属性设计 20
2.色彩搭配 21
3.连接效果 21
六、网站开发过程及实现 24
(一)首页设计 24
1.首页顶部设计 25
2.导航栏和LOGO设计 26
3.首页主要内容设计 27
(二)其余页面的设计 35
1.宣宣景点页面设计 35
2.私人专线页面设计 40
3.旅游路线页面设计 43
4.室外桃源页面设计 48
5.宣威景点页面设计 53
(三)最终效果图 59
1.首页效果图 59
2.宣宣景点效果图 59
3.私人专线效果图 60
4.景点选择效果图 60
5.世外桃源效果图 61
(四)兼容方案 61
1.在尽可能多的浏览器测试你的网站 61
2.编写质量高,容易解释的HTML 62
3.指定字符编码 62
4.使网页易于访问 62
结论 63
参考文献 65
致谢 66
VI
一、绪论
一、绪论
(一)引言
现在是信息时代,互联网的迅猛发展,技术的不断革新,促进了其他行业的发展,各大行业将进一步融合和渗透。
当今时代,生活在如此快的生活节奏中,互联网已经深入到人们的日常生活,包括政治、经济和生活等多方面都离不开互联网的应用,互联网高效的信息获取、发布以及传递机制深受人们青睐,在现今的旅游行业发展中具有重大作用,现在人们为了适应知识经济社会的需要,促进学习与交流。
网上交流与合作功能是普遍的,技术管理和资源管理受到关注。
随着互联网的发展和普及,越来越多的企业和个人都有自己的网站在互联网上。
网站建设已成为企业形象宣传的产品推广,客户沟通最有效的桥梁;个人自我展示,是与世界沟通的重要平台。
越来越多的人开始从彼此的认知阶段开始进入自我认同和行动阶段,互联网信息主要是通过网站实现的,获取信息的信息也要在“海洋”中根据一定的检索方式,从网站下载所需的信息。
因此网站建设在互联网应用的地位是显而易见的。
它是信息化建设的重要手段,在各个行业领域都发挥着重要作用,已引起人们的高度关注。
为了更好的合作,更多的与外界沟通和新的信息,以及和他人分享信息,特此建搭建旅游网站。
旅游网站近十年在我国逐渐兴起和发展,到目前已初步形成了一个完整的类型,涵盖旅游业的各个方面的在线旅游产业体系,旅游产品的推广和网上销售正影响着越来越多的游客,旅游服务商和旅游管理者。
为响应国内迅速发展的旅游业,促进旅游信息化和电子政务的广泛实施,建立高效、可靠的互联网旅游信息管理体系,实现我国旅游业的高速和跨越式的发展。
(二)旅游网站发展现状
1.我国旅游网站发展概述
第一阶段(1997至2000):
我国于1997年真正开始在实施旅游的互联网建设,并先后成立了旅游资讯网、华夏旅游网这两大在线旅游网站。
由于当时技术水平有限,网站的建设十分简洁,网页都是些静态设计,如景点的图片展示,文字介绍描述等构成。
二期(2000至2001):
2000年4月在青旅在线旅游网站上引入了电子商务模式,主要以预定业务为主。
预定的服务项目通常都是交通与住宿方面,而其他相关服务项目在网站上暂不支持,仍需游客与相关企业进行直接交易。
至此,旅游网站的建设更加完善了,新增了许多信息关联,包括超链接网页和动态图片展示等,且网站分布更加合理。
第三阶段(2001至2002):
2001年2月国内兴起了旅游网站建设浪潮,并以网上交易服务为网站的主要业务,其中金旅雅途网就是很好的代表。
这个阶段的旅游网站与游客之间建立了良好的互动性,并支持在线服务。
游客对网上订票服务表示十分满意认可,不仅快捷而且方便。
戴斌.旅行社经营管理[J].旅游教育出版社.2015.
(2):
17-19.
其中住宿、机票等预订需要银行汇款业务的支撑。
第四阶段(2002至):
到2002年4月,我国广东省南海市开发建立的南海营销体系正式投入运营,是国内首个以旅游为目的的营销系统。
该旅游网站引入了DMS技术,有了强大的数据库管理的支持,游客可在网站上实现高效的交通、旅游、住宿、购物和娱乐等相关信息的查询,至此,在线旅游的发展已进入成熟阶段,旅游网站的功能也更加健全,使用也更加人性化。
薛华成.管理信息系统[J].清华大学出版社.2010.(6):
22-25.
未来旅游网站知识内容将变得越来越丰富,栏目将越来越细化,分类将越来越科学、单调、静态的行程表将由灵活的自助游的运行定制,为游客提供个性化的旅游产品,如智能服务将成为旅游网站的重要功能。
2.网站分类
对于不同类型旅游网站从不同的角度进行分类,如根据网站的性质不同,中国的旅游网站可以分为以下七类:
政府旅游网站,网站(应用服务提供商)、专业旅游网站、旅游企业网站和旅游频道的网站的网页内容,各种旅游咨讯网和本地的旅游网站,个人旅游网站。
此外,旅游网站还可以根据专业属性、服务类型、提供信息的不同进行分类。
3.网站构建立中存在的问题
目前,我国旅游网站的数量非常大,现在使用各种搜索引擎的旅游网站已经达到了几万。
但大多数旅游网站的建设,以科学的方式,设计的有效性,或服务从服务内容、网站范围、服务功能、不规范,存在很多问题,政府旅游网站为例,对域名的使用是非常混乱的,48%省政府旅游网站没有用的域名,网站的信息提供也各不相同;以专业的旅游网站为例,从网上选取了50个成功的专业旅游网站的评价结果来看,查询酒店和机票是专业的旅游预订网站的主要功能,在专业的旅游网站的选择,100%的网站都提供这两种功能,但具体功能来看,没有一个旅游网站能提供客房的实时状态,如最近一天的客房销售情况和推广优惠的报价。
火车票查询只有45%的网站能做到,预订火车票网站尚无一家开通,只有一个开放的火车票预订的网站是再见城市网站,但它也仅开通了欧洲火车通票预订。
其中支持出租车预定的网站仅有22.8%,能支持同时预定酒店、几篇和出租车票的网站却没有一家,而支持导游和门票预订的网站不到三家。
从网站是否支持预订功能上看,在所选择的网站中,都具备在线预订的功能。
其中只有22.8%的网站是支持在线支付的。
此外,具有投诉功能的专业网站也相当少。
网站域名和LOG的设计也是两大重点内容,不仅要体现出网站的内涵,还应让游客看到这些设计后能立马关联到网站相关的产品与服务业务,可以轻松地对网站进行识别和筛选,而且具有鲜明的特征,方便搜索和记忆。
这方面做得好的旅游网站有携程旅行、途牛旅游和信天游,8000英里,中文域名的其他旅游景点一目了然,高度个性化。
赵西萍,等.旅游市场营销学[M].北京:
高等教育出版社,2012.
在网页的设计上,要以人性化设计为向导,外观要给人以美的感觉,层次要分明。
在满意的外观设计基础上,记住多媒体技术,将好看的3D动画以及Flash嵌入到网页中,三维虚拟展示和MPS,AVI格式,并支持音频和视频的下载,加强生动直观的旅游信息显示。
此外,我们还应该处理首页的打开速度和网页美观化之间的矛盾。
如可将图片以较小尺寸在首页上显示,通过点击放大浏览原图。
此外,网页的整体结构设计要合理。
我们应该在页面顶部设置总目录信息网站。
在主页中,要充分体现出网站的主体,内容要精炼,可以在少量的查阅次数中让访问者掌握充分的网站信息。
并支持内容的定期更新,为游客提供最新的旅游信息。
根据旅游地客源的分布情况,网页的设计要注意语言版本的支持。
中华上下五千年历史,蕴藏着丰富的旅游资源,吸引着来自世界不同国家的游客。
而对于网站而言,是面向世界开放的,全球不同旅游网站都是公开的,因此,旅游网站的竞争也是激烈的。
可能是游客和客户旅游网站。
目前,国内以简体中文版为主要的旅游网站语种,随着旅游市场的不断发展和扩充,许多国外市场也不断打开,为让网站适应未来市场的发展,其他语言版本也应进行开发,以满足来自不同地区的游客的个性需求。
此外,还可以为不同的国家分别设置不同的国家、民族外语版块,提供有针对性的相关信息。
(三)选择做旅游网站的目的与意义
目前,国内大多数旅游管理部门以及旅行社都是采用电子文档和表格的形式来管理旅游相关信息资讯,只有少数的旅游相关机构建立起了旅游网站,这样,很大一部分客户将会因这种落后的管理方式而流失。
在这个网络大时代背景下,信息化建设尤为重要。
萨师煊,王珊.数据库系统概论[M].北京.高等教育出版社.2007.page174-178.
随着旅游业的迅速发展,业务的不断扩充,市场的不断推广,仅靠人工方式来管理庞大的旅游资料信息是费力不讨好的事,而且存在很大信息管理漏洞。
王兴动,千丽霞,曹明玉.ASP&ASP.NET应用编程[J].电子工业出版社.2012.(9):
77-81.
因此,为规范旅游信息化管理,加快旅游业的发展,实现旅游资源的高效利用和管理,旅游业的信息化建设才是正确的选择。
随着互联网的不断普及,人们都喜欢足不出户的办理一切事务,人们对旅游行业的需要也日益的增加,各旅行社也应运用网络强大以及宣传自己,增强自己的竞争力。
而且旅游网站的建立是我个人爱好,我希望自己的技术可以变为一种提高自我的表现,对于为什么选择旅游网站建设的主题,那是因为我个人比较了解,也看到目前这种形式的网站是不多的,而且不是内容不丰富,就是没有自己独特的想法,我不排除有一些好的旅游网站,但的确不是很多,所以我想单独制作自己的旅游网站,希望有更多的人了解旅游的各种景点。
66
二、网站建设的各种语言的介绍
二、网站建设的各种语言的介绍
(一)HTML
1.HTML语言介绍
HTML是一种超文本结构标记语言,专门用于超文本文档的制作。
所谓的HTML文档就是指采用该语言编写的超文本文档,该语言不仅简单易懂,且在多种操作系统平台中能够独立运行。
如常用的Windows、Unix等。
从1990年开始,HTML语言就被万维网用来表示网页信息和格式设计的运用上,其中包括与Homepage的相关连接信息。
我们所浏览的网页的源文件就是一个HTML文档,通常以.HTML或.HTM作为文件的扩展名,是用HTML标记的ascii文本文件。
下面介绍一个HTML文档是如何生成的三种方式:
1、直接在文本中编写,也可以通过文本编辑器或HTML的编辑工具快速编写。
2、可以通过重命名或者格式转换工具将其他格式的文件直接转为HTML文件,非常方便。
3、通过Web服务器的动态实时生成。
冯方方.ASP.NET基础教程[M].北京.清华大学出版社.2004:
47-51
HTML是一种简单的标记语言,通过一系列的标签来组织文档结构,如段落和超链接等都有相应的标志。
文件格式的结构可以通过标记来组织,而文档内容如何显示,按什么排序,这是HTML做不到的。
但可以为Web浏览器提供默认的建议,在用户浏览时的页面呈现效果由Web浏览器自带显示风格以及解析标记的能力来确定。
这也是为什么在不同浏览器中显示相同的文档的效果会不一样。
HTML的版本是2.0。
它是基于SGML(StandardGeneralizedMarkupLanguage)标准广义置标语言,是用来描述数字文档的结构复杂的规范内容和管理)的一个子集的进化。
虽然标准html2.0的下一个版本(也称为HTML+)正在开发中,但在标准草案的一些地区已被广泛采用,最好的Web浏览器(如Netscape等)可以解释html3.0一些新标记,因此在本章中提出的一些新的html3.0标记了被大多数浏览器接受。
李占波.基于ASP.NET的Web程序开发.河南科学技术出版社.2008:
1-8
2.HTML的基本结构
网页主体部分
(二)DIV+CSS
1.div+css简介
CSS是英语CascadingStyleSheets(层叠样式表)的简称,它是一种计算机语言,用来表现HTML或XML等文件式样。
一般的网站使用的术语,都是标准的DIV+CSS、HTML或XML,是统一的Web设计标准,其中网页布局通过DIV+CSS来实现。
这种方式与传统HTML网页有所不同,它能够将W3C内容和表现分离开来。
目前HTML的最高版本已经更新到HTML5,其语言复杂度越来越高,此外,XHTML语言可以重写HTML页面,并运用XML相关技术实现HTML语言的标准化、规范化,并且大大提升网站的可扩展性,适用于数据自动交换的场景。
与使用HTML设计
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 旅游 网站 前端 设计 实现