旅游网站前端的设计与实现

1、云南财经大学学生毕业论文（设计）题目：旅游网站前端的设计与实现院（系）：中华职业学院专业：计算机科学与技术班级：网络12-1学号：201205004650论文作者：孔母指导教师：W指导教师职称：副教授2015年2月本科毕业论文（设计）原创性及知识产权声明云南财经大学本科毕业论文（设计）原创性及知识产权声明本人郑重声明：所呈交的毕业论文（设计）是本人在导师的指导下取得的成果。对本论文（设计）的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。因本毕业论文（设计）引起的法律结果完全由本人承担。本毕业论文（设计）成果归云南财经大学所有。特此声明毕业论文（设计）作者签名：作者专业：计算机科学与技

2、术作者学号：2012050046502016年2月15日摘要在21世纪这个信息高速发达的时代，网络可谓是当今社会最流行、最方便、最快捷的交流媒介，当然这样便捷的媒介也受到越来越多年轻人和很多商业人士的喜爱，随之而来的就是慢慢的融入我们的生活，让很多人通过这个媒介去了解更多的商业信息。众所周知，随着人们生活条件的不断改善，生活品质与追求的不断提升，旅游类的网站也在不断的更新和发展，现今，网站已不再是信息的简单公布与展示，对于人们来讲，已完全脱离了单方面获取的性质，更多的是体现组织机构的风采，性质。所以旅游类的网站对现在的发展已经势在必行。这篇论文主要集中讲述旅游网站的设计与实现，在旅游网站前端的

3、设计中，页面的布局时，我们利用HTML等元素进行定义，然后利用CSS对展示的元素进行定位，最后通过JavaScript实现我们想要的效果和交互。这些内容可能表面看起来很简单，可这里面需要掌握的东西绝对不会少。在进行设计前，我们必须对这些概念弄清楚和弄明白，只有这样在设计的过程中，我们才会感觉得心应手。在设计的过程中，我们首先应该分析并解决实现中的若干技术问题；介绍了个性化页面的背景；了解整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；现在我还没有设计用户注册，用户登录，用户管理，可我会把自己设计的这个旅游网站以一种简单明了的方式向大家展现出旅游的各个方面。并在

4、设计中解决实现中的若干技术问题；努力建立完整的旅游网站，进行测试并分析结果。我做的这个旅游网站具有一目了然的特性，能让本地区的人们了解更多的旅游资料，更能让世界各地的人了解一些地区的明文风景。当然美中不足就是该旅游网站还存在一些问题，如网站的留言系统、用户注册、用户登录没建立等等。这些问题和功能有待于进一步学习和添加。关键词：网站设计HTMLCSSJavaScriptJQueryiiAbstractAbstractIntheeraofthe21stcentury,theinformationhighspeeddevelopment,thenetworkcanbedescribedasisthe

5、mostpopularintoday'ssociety,themostconvenient,themostefficientmediumofcommunication,ofcourse,suchaconvenientmediumhasalsobeenmoreandmoreyoungpeopleandmanybusinesspeople'sfavorite,followedbyisslowlyintoourlives,letalotofpeoplethroughthemediatounderstandmorebusinessinformation.Asisknowntoall,w

6、iththepeople'slivingconditionscontinuetoimprove,thepursuitofqualityoflifeandthecontinuousimprovementof,tourismwebsitealsoinconstantlyupdatinganddevelopment.Today,thesiteisnolongersimplypublishanddisplayofinformation,intermsofthepeople,hasbeencompletelyoutoftheunilateralacquisitionofnature,moreis

7、toreflecttheeleganceoftheorganizationnature.Sotourismwebsiteofdevelopmentnowisimperativeunderthesituation.Thispapermainlyfocusesonthedesignandimplementationofthetourismwebsite,inthedesignofthefrontendofthetourismwebsite,Thelayoutofthepage,weuseHTMLelementsofthedefinition,andthenuseCSStodisplayelemen

8、tstopositioning.Finally,wewanttheeffectandinteractionisrealizedthroughJavaScript.Thesecontentsmaysurfaceappearstobeverysimple,thereisneedtomastersomethingabsolutelyisnotless.Beforedesign,wemustontheseconceptstofigureoutandunderstand.Onlyinthiswayintheprocessofdesign,wewillfeelhandy.Inthedesignproces

9、s,firstofall,weshouldanalyzeandsolvesometechnicalproblemsinimplementationofthe;thepersonalizedpagebackground;understandingentirepersonalizationpageproductionsystemsystemstructureandworkingprinciple;analysisoftheparticularityofthesystemimplementation,theemphasisanddifficulty;nowIhaven'tdesignedus

10、erregistration,userlogin,usermanagement,Iwilltodesignedthetourismsiteinastraightforwardwaytoyoushowallaspectsoftourism.iiiAbstractAndresolvetoachieveanumberoftechnicalissuesinthedesign;tobuildtheoveralltourismwebsite,testingandanalysis.Idothistourismwebsitehasaclearcharacteristic,canletthepeopleofth

11、eregiontounderstandmoretravelinformation,morecanletpeoplearoundtheworldunderstandsomeareasoftheplaintext.Certainlyflyintheointmentisthatthetourismwebsitesalsoexistsomeproblems,suchaswebsitemessagesystem,userregistration,userloginisnotestablished,andsoon.Theseproblemsandfunctionneedstobeaddedtofurthe

12、rstudyand.Keywords:websitedesignCSS,HTML,javascriptandJQueryIV目录本科毕业论文（设计）原创性及知识产权声明I摘要IIAbstractIII一、绪论1（一）引言1（二）旅游网站发展现状11 .我国旅游网站发展概述12 .网站分类23 .网站构建立中存在的问题3（三）选择做旅游网站的目的与意义4二、网站建设的各种语言的介绍5（一）HTML51 .HTML语言介绍52 .HTML的基本结构6（二）DIV+CSS61 .div+css简介62 .div+css样式表简介73 .div+css布局的优点84 .div+css布局方式95 .d

13、iv+css理论才既述10（三）Javascript101 .Javascript简介102 .Javascript加入网页的两种方法11三、开发工具和开发技术简介13（一）理想网页的编制者-Dreamweaver13（二）图像，图像编辑和设计软件-PS图象处理软件14V（三）动画设计软件-flash151 .falsh特性152 .主文件格式15四、需求分析17（一）网站系统分析17（二）功能性需求分类17（三）非功能性需求181 .用户界面需求182 .软硬件环境需求183 .网站质量需求18五、旅游网站的规划与设计20（一）网站功能分析20（二）整体风格设计201 .页面属性设计202

14、.色彩搭配213 .连接效果21六、网站开发过程及实现24（一）首页设计241 .首页顶部设计252 .导航栏和LOG破计263 .首页主要内容设计27（二）其余页面的设计351 .宣宣景点页面设计352 .私人专线页面设计403 .旅游路线页面设计434 .室外桃源页面设计485 .宣威景点页面设计53（三）最终效果图591 .首页效果图59VI2 .宣宣景点效果图593 .私人专线效果图604 .景点选择效果图605 .世外桃源效果图61（四）兼容方案611 .在尽可能多的浏览器测试你的网站612 .编写质量高，容易解释的HTML.623 .指定字符编码624 .使网页易于访问62结论63

15、参考文献64致谢65VII、绪论、绪论（一）引言现在是信息时代，互联网的迅猛发展，技术的不断革新，促进了其他行业的发展，各大行业将进一步融合和渗透。当今时代，生活在如此快的生活节奏中，互联网已经深入到人们的日常生活，包括政治、经济和生活等多方面都离不开互联网的应用，互联网高效的信息获取、发布以及传递机制深受人们青睐，在现今的旅游行业发展中具有重大作用，现在人们为了适应知识经济社会的需要，促进学习与交流。网上交流与合作功能是普遍的，技术管理和资源管理受到关注。随着互联网的发展和普及，越来越多的企业和个人都有自己的网站在互联网上。网站建设已成为企业形象宣传的产品推广，客户沟通最有效的桥梁；个人自我

16、展示，是与世界沟通的重要平台。越来越多的人开始从彼此的认知阶段开始进入自我认同和行动阶段，互联网信息主要是通过网站实现的，获取信息的信息也要在“海洋”中根据一定的检索方式，从网站下载所需的信息。因此网站建设在互联网应用的地位是显而易见的。它是信息化建设的重要手段，在各个行业领域都发挥着重要作用，已引起人们的高度关注。为了更好的合作，更多的与外界沟通和新的信息，以及和他人分享信息，特此建搭建旅游网站。旅游网站近十年在我国逐渐兴起和发展，到目前已初步形成了一个完整的类型，涵盖旅游业的各个方面的在线旅游产业体系，旅游产品的推广和网上销售正影响着越来越多的游客，旅游服务商和旅游管理者。为响应国内迅速发

17、展的旅游业，促进旅游信息化和电子政务的广泛实施，建立高效、可靠的互联网旅游信息管理体系，实现我国旅游业的高速和跨越式的发展。（二）旅游网站发展现状1 .我国旅游网站发展概述第一阶段（1997至2000）:我国于1997年真正开始在实施旅游的互联网建设，并先后成立了旅游资讯网、华夏旅游网这两大在线旅游网站。由于当时技术、绪论水平有限，网站的建设十分简洁，网页都是些静态设计，如景点的图片展示，文字介绍描述等构成。二期（2000至2001）:2000年4月在青旅在线旅游网站上引入了电子商务模式，主要以预定业务为主。预定的服务项目通常都是交通与住宿方面，而其他相关服务项目在网站上暂不支持，仍需游客与相

18、关企业进行直接交易。至此，旅游网站的建设更加完善了，新增了许多信息关联，包括超链接网页和动态图片展示等，且网站分布更加合理。第三阶段（2001至2002）:2001年2月国内兴起了旅游网站建设浪潮，并以网上交易服务为网站的主要业务，其中金旅雅途网就是很好的代表。这个阶段的旅游网站与游客之间建立了良好的互动性，并支持在线服务。游客对网上订票服务表示十分满意认可，不仅快捷而且方便。其中住宿、机票等预订需要银行汇款业务的支撑。第四阶段（2002至）：到2002年4月，我国广东省南海市开发建立的南海营销体系正式投入运营，是国内首个以旅游为目的的营销系统。该旅游网站引入了DM跋术，有了强大的数据库管理的

19、支持，游客可在网站上实现高效的交通、旅游、住宿、购物和娱乐等相关信息的查询，至此，在线旅游的发展已进入成熟阶段，旅游网站的功能也更加健全，使用也更加人性化。未来旅游网站知识内容将变得越来越丰富，栏目将越来越细化，分类将越来越科学、单调、静态的行程表将由灵活的自助游的运行定制，为游客提供个性化的旅游产品，如智能服务将成为旅游网站的重要功能。2 .网站分类对于不同类型旅游网站从不同的角度进行分类，如根据网站的性质不同，中国的旅游网站可以分为以下七类：政府旅游网站，网站（应用服务提供商）、专业旅游网站、旅游企业网站和旅游频道的网站的网页内容，各种旅游咨讯网和本地的旅游网站，个人旅游网站。止匕外，旅游

20、网站还可以根据专业属性、服务类型、提供信息的不同进行分类。戴斌.旅行社经营管理J.旅游教育出版社.2015.（2）:17-19.薛华成.管理信息系统J.清华大学出版社.2010.（6）:22-25.、绪论3 .网站构建立中存在的问题目前，我国旅游网站的数量非常大，现在使用各种搜索引擎的旅游网站已经达到了几万。但大多数旅游网站的建设，以科学的方式，设计的有效性，或服务从服务内容、网站范围、服务功能、不规范，存在很多问题，政府旅游网站为例，对域名的使用是非常混乱的，48砧政府旅游网站没有用的域名，网站的信息提供也各不相同；以专业的旅游网站为例，从网上选取了50个成功的专业旅游网站的评价结果来看，查

21、询酒店和机票是专业的旅游预订网站的主要功能，在专业的旅游网站的选择，100%勺网站都提供这两种功能，但具体功能来看，没有一个旅游网站能提供客房的实时状态，如最近一天的客房销售情况和推广优惠的报价。火车票查询只有45%勺网站能做到，预订火车票网站尚无一家开通，只有一个开放的火车票预订的网站是再见城市网站，但它也仅开通了欧洲火车通票预订。其中支持出租车预定的网站仅有22.8%,能支持同时预定酒店、几篇和出租车票的网站却没有一家，而支持导游和门票预订的网站不到三家。从网站是否支持预订功能上看，在所选择的网站中，都具备在线预订的功能。其中只有22.8%的网站是支持在线支付的。止匕外，具有投诉功能的专业

22、网站也相当少。网站域名和LOG勺设计也是两大重点内容，不仅要体现出网站的内涵，还应让游客看到这些设计后能立马关联到网站相关的产品与服务业务，可以轻松地对网站进行识别和筛选，而且具有鲜明的特征，方便搜索和记忆。这方面做得好的旅游网站有携程旅行、途牛旅游和信天游，8000英里，中文域名的其他旅游景点一目了然，高度个性化。在网页的设计上，要以人性化设计为向导，外观要给人以美的感觉，层次要分明。在满意的外观设计基础上，记住多媒体技术，将好看的3D动画以及Flash嵌入到网页中，三维虚拟展示和MPSAVI格式，并支持音频和视频的下载，加强生动直观的旅游信息显示。止匕外，我们还应该处理首页的打开速度和网页

23、美观化之间的矛盾。如可将图片以较小尺寸在首页上显示，通过点击放大浏览原图。止匕外，网页的整体结构设计要合理。我们应该在页面顶部设置总目录信息网站。在主页中，要充分体现出网站的主体，内容要精炼，可以在少量的查阅次数赵西萍，等.旅游市场营销学M.北京：高等教育出版社，2012.、绪论中让访问者掌握充分的网站信息。并支持内容的定期更新，为游客提供最新的旅游信息。根据旅游地客源的分布情况，网页的设计要注意语言版本的支持。中华上下五千年历史，蕴藏着丰富的旅游资源，吸引着来自世界不同国家的游客。而对于网站而言，是面向世界开放的，全球不同旅游网站都是公开的，因此，旅游网站的竞争也是激烈的。可能是游客和客户旅

24、游网站。目前，国内以简体中文版为主要的旅游网站语种，随着旅游市场的不断发展和扩充，许多国外市场也不断打开，为让网站适应未来市场的发展，其他语言版本也应进行开发，以满足来自不同地区的游客的个性需求。止匕外，还可以为不同的国家分别设置不同的国家、民族外语版块，提供有针对性的相关信息。(三)选择做旅游网站的目的与意义目前，国内大多数旅游管理部门以及旅行社都是采用电子文档和表格的形式来管理旅游相关信息资讯，只有少数的旅游相关机构建立起了旅游网站，这样，很大一部分客户将会因这种落后的管理方式而流失。在这个网络大时代背景下，信息化建设尤为重要。随着旅游业的迅速发展，业务的不断扩充，市场的不断推广，仅靠人工

25、方式来管理庞大的旅游资料信息是费力不讨好的事，而且存在很大信息管理漏洞。因此，为规范旅游信息化管理，加快旅游业的发展，实现旅游资源的高效利用和管理，旅游业的信息化建设才是正确的选择。随着互联网的不断普及，人们都喜欢足不出户的办理一切事务，人们对旅游行业的需要也日益的增加，各旅行社也应运用网络强大以及宣传自己，增强自己的竞争力。而且旅游网站的建立是我个人爱好，我希望自己的技术可以变为一种提高自我的表现，对于为什么选择旅游网站建设的主题，那是因为我个人比较了解，也看到目前这种形式的网站是不多的，而且不是内容不丰富，就是没有自己独特的想法，我不排除有一些好的旅游网站，但的确不是很多，所以我想单独制作

26、自己的旅游网站，希望有更多的人了解旅游的各种景点。萨师娘，王珊.数据库系统概论M.北京.高等教育出版社.2007.page174-178.王兴动，千丽霞，曹明玉.ASP&ASP.NET应用编程J.电子工业出版社.2012.(9):77-81.4、网站建设的各种语言的介绍二、网站建设的各种语言的介绍（一）HTML1.HTML语言介绍HTM层一种超文本结构标记语言，专门用于超文本文档的制作。所谓的HTML文档就是指采用该语言编写的超文本文档，该语言不仅简单易懂，且在多种操作系统平台中能够独立运行。如常用的WindowsUnix等。从1990年开始，HTML语言就被万维网用来表示网页信息和格

27、式设计的运用上，其中包括与Homepage的相关连接信息。我们所浏览的网页的源文件就是一个HTM仪档，通常以.HTML.HTM作为文件的扩展名，是用HTM曲记的ascii文本文件。下面介绍一个HTM及档是如何生成的三种方式：1、直接在文本中编写，也可以通过文本编辑器或HTML勺编辑工具快速编写。2、可以通过重命名或者格式转换工具将其他格式的文件直接转为HTMLC件，非常方便。3、通过Wet®务器的动态实时生成。HTM层一种简单的标记语言，通过一系列的标签来组织文档结构，如段落和超链接等都有相应的标志。文件格式的结构可以通过标记来组织，而文档内容如何显示，按什么排序，这是HTML故不到

28、的。但可以为WebM览器提供默认的建议，在用户浏览时的页面呈现效果由WebM览器自带显示风格以及解析标记的能力来确定。这也是为什么在不同浏览器中显示相同的文档的效果会不一样。HTML勺版本是2.0。它是基于SGMLStandardGeneralizedMarkupLanguage）标准广义置标语言，是用来描述数字文档的结构复杂的规范内容和管理）的一个子集的进化。虽然标准html2.0的下一个版本（也称为HTML+正在开发中，但在标准草案的一些地区已被广泛采用，最好的WebM览器（如冯方方.ASP.NET基础教程M.北京.清华大学出版社.2004:47-515二、网站建设的各种语言的介绍Nets

29、cape等）可以解释html3.0一些新标记，因此在本章中提出的一些新的html3.0标记了被大多数浏览器接受。2.HTML的基本结构<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312”/><title>标题</title></head><body>网页主体部分</body></html>（二）DIV+CSS1.div+css简介CSS®英语Casc

30、adingStyleSheets（层叠样式表）的简称，它是一种计算机语言，用来表现HTM峻XML等文件式样。一般的网站使用的术语，都是标准的DIV+CSSHTMLEXML是统一的WebS计标准，其中网页布局通过DIV+CSS来实现。这种方式与传统HTM啊页有所不同，它能够将W3CJ容和表现分离开来。目前HTML勺最高版本已经更新到HTML5其语言复杂度越来越高，止匕外，XHTM语言可以重写HTMLMW,并运用XM/目关技术实现HTML§言的标准化、规范化，并且大大提升网站的可扩展性，适用于数据自动交换的场景。与使用HTM殴计网页不同的是XHTM不在采用表格进行定位，而是通过DIV+C

31、S骰术来实现定位。且该方式不仅提高了页面开发效率，也是页面布局更加规整，下面介绍DIV+CSS勺相关特征：李占波.基于ASP.NET的We阳序开发.河南科学技术出版社.2008:1-86二、网站建设的各种语言的介绍(1)在W3CB准。微软和其他公司都是W3c勺支持者。这是最重要的，因为它确保您的网站，不会因为未来的网络应用和升级被淘汰。(2)支持浏览器的向后兼容，无论是浏览器大战中，IE7和Firefox的哪一方胜利，你的网站都可以很好的兼容。(3)搜索引擎更友好。与传统的table相比，采用DIV+CSSfc术，搜索引擎收录相比之下会更加友好。(4)调整的样式更为方便。分离的内容和风格，使页

32、面和风格的调整变得更加方便。现在的雅虎、MSN门户网站、网易、新76等国内门户网站，Web2.0的主流网站，采用DIV+CS漂构，更加印证了DIV+CSS1未来的一种趋势。(5)CSS(弋码的简单性是一个很大的优势，对于一个大型网站来讲，可以节省大量带宽，而且众所周知，搜索引擎喜欢比较干净的代码。(6)分离的性能和结构，在一个团队开发中，更容易分工合作以此来减少相互关联性。2 .div+css样式表简介在网页上使用样式表有三种方式：(1)将网页链接到外部样式表。(2)在网页上创建一个嵌入式样式表。(3)将嵌入式样式应用于每一个页面元素。(4)每一种方法都有其优点和缺点。当页面中的全部或部分的页

33、面上在同一站点上应用相同样式时，可以使用外部样式表中的一个或多个外部样式表来定义样式并将它们链接到所有页面，这样就可以保证所有页面的一致性。如果人们决定改变风格，只是在外部样式表中作一次更改，而对于这个更改，会反映在所有的样式表链接页。通常是外部样式表以.CSS做为它的文件扩展名，如Mystyles.css。我们可以在页面中采用嵌入式样式表的方式来定义所需的页面样式。嵌入式样式表是一个层叠样式表，“嵌”在页head卡签字符内。嵌入式样式表的作用范围是同一个页面，跨页面无效。使用层叠样式表将内嵌样式层叠样式表属性应用于页面元素上。二、网站建设的各种语言的介绍如果网页链接到外部样式表，为该页创建的

34、内嵌或嵌入式样式，将扩展或覆盖在外部样式表中的指定属性。3 .div+css布局的优点(1)利于搜索引擎蜘蛛爬行根据总结的经验和教训，DIV+CS甑局有利于蜘蛛的爬行，我们拿HTMIM格布局和DIV+CSS局的页面做对比，明显table字节大于div+css字节，小字节将有利于搜索引擎蜘蛛下载网页的时间，减少页面代码量，可以提高你的网页浏览速度，而且蜘蛛爬行网站的深度也会大大增加。(2)易于修改提高易用性，使用CSS可以结构化HTMLCSS可以很容易地控制页面的布局而且编写简单，编写CSS就像写html代码一样轻松。从网站的总体布局来看，DIV+CS甑局的网站，一般都是将HTMLMW和CSSi

35、：件分离的，DIV+CSS勺特点就是将页面内容和表现形式分离，可以在一个独立的样式文件中进行样式部分的设计，这样就有可能减少未来无效的页面。网站改版相对会比较方便，一般只需要你修改CSW件就可以重新构建一个新的网站。此功能可重复使用和在编程完成中多处使用，而这种特点是table不具备的。您可以同时更新多个网页的风格格式，不用再一页一页地更新了。你可以使用一个CSSX件来控制站点上所有页面风格，只要修改相应的CSSi：件中行，然后在整个站点的所有页面都将被改变。减少页面代码量，可以大大提高网页的浏览速度，在几乎所有的浏览器上都可以使用。在前面提到的，DIV+CSSCSSt件和HTM仪件分开，当用

36、户点击网站，是在同时进行CSS文件和HTMLC件的下载，这样可以提高网页的打开速度，而table是必须以标签开始到结束才能显示网页内容。止匕外，DIV的HTML文件则是边加载边显示网页内容。这样就大大提高了用户体验。谷歌的页面加载速度已经已经包含在排名因素中，虽然这个因素可以影响排名的一小部分，甚至可以忽略不计，但有利于搜索引擎优化，我们为什么不用呢？如果使用DIV+CSSffi版，网页代码精简，使页面的字体变得更漂亮，更容易编排，使页面真正达到赏心悦目的效果。如果你不javascrput大师可以不用写ID,只要会用CLASSI可以。传统的HTMLM面样式通常都比较杂乱无章，垃圾二、网站建设的

37、各种语言的介绍代码较多，且需花费程序员大量的调整时间，在Table布局中通常通过ID来控制样式，且样式与布局代码写在一块，显得层次不分明。而DIV能很好地分离样式与布局，且有较强的重构性。(3)相对表格的嵌套问题说是在一些文章中，搜索引擎一般都不喜欢在上面抓取三层以上的Table嵌套，这一点还没有得到搜索引擎官方的证实。我也不能完全肯定是不是，就目前掌握的情况来看，在分析Table布局的页面遇到多个层次的表格嵌套时，将跳过嵌套的内容或直接放弃整个页面。我们在使用Table布局时，为了达到视觉效果，必须应用多个表格。如果一个嵌套表格中是核心内容，解析时，会跳过这部分而没有抓取页面核心。这个页面就

38、成了一个类似的网页。网站太多类似的网页会影响排名和域名的信任度。(4)搜索排名的影响页面结构简单明了，易于搜索引擎搜索完成网站的优化工作。如果我们在设计时，运用到基于XTHM标准的DIV+CS即局，在完成设计时，要尽可能提高通过W3佥证的通过率。事实证明使用XTHM架构的网站排名状况总体上是很让人满意的。这可能是有争议的，但至少不会有任何坏处。XHTM结构规整，可以快速便捷地搜索页面内容，因此用户的评价也很高。4 .div+css布局方式对于网站的DIV+CS戮计越来越受到人们的关注，从个人网站到企业和门户网站，网页设计师已经将DIV+CSS乍为业界标准。如果使用DIV+CSS勾建和美化网站，

39、那么DIV就是整个网站的骨架，CSS羊式就是网站的着装。其中的内容当然就是血肉。那么如果我们要做一个网站。我们就必须从DIV布局开始。DIV元素是用于HTM仪档内大块(block-level)的内容提供结构和背景的元素，DIV的开始标签和结束标签之间的所有内容，都是用来形成快的，其中包含的元素属性由div标签属性控制，或通过使用样式表格式化这个块，从而进行控制。在业界的各大个人网络、企业网络、门户网基本上都是用DIV+CSS&-布局方式。如：腾讯络，旧M的官方网站，等等。其中，对于旧M的官方网站来说，二、网站建设的各种语言的介绍顶部是导航、下面是JavaScript和底部用UL列举出公

40、司各项服务的连接。从整体布局来看，这是一个单一的栏目，使得页面看起来简洁大方，如今的页面布局主流也从复杂的华丽性变到简单的大方性，相比这两种网页布局，我个人也比较支持后者。5 .div+css理论概述(1)理解CSSt子模型CSSa子模型是什么呢？这可能是很多人在看到这个这个代名词时的第一反应，在网页设计中经常听到一些属性名称：内容(content)、填充(padding)、边框(border)、边界(margin),CSSlfc模型具有上述性质，日常生活中盒子里也具有这些特性，所以称之为盒子模型。在网页设计中内容往往指的是文本、图像和其他元素，也可以是一个小盒子(DIV嵌套)。CSSf比于现

41、实当中的盒子区别在于他有伸展性，里面的东西比盒子本身本身大时，那么盒子也会随之增大，但它不会损坏。与现实的比较，这种模式更比较容易被接受，也更容易得到推广。(2)观念的转变传统的前端设计是以这样的方式进行的：首先考虑好材料，文字等，然后处理。通过HTML弋码生成、最后进行排版；我们现在需要的是考虑好网站内容、结构、风格。经过CSSHE版使代码比较容易理解，各个区与各个块的层次分明。因此，结构是非常重要的。(3)实现结构和性能的分离使用的CSSM,结构和表现分离、代码简单、易于更新和利于优化。相比于把样式写进去和和分离开的区别，更进一步说明结构与表现分离的优点，建立一个单独的CSS文件和页面进行

42、链接将使部分代码更加清晰。（三）Javascript1.Javascript简介一种新的编程语言JavaScript.可以说JavaScript是适应动态网页制作的需要而诞生的，现在越来越广泛地应用于互联网网页。JavaScript是一种10二、网站建设的各种语言的介绍脚本语言，由Netscape公司开发而来，也称之为描述语言。在HTMLM面中使用JavaScript语言，可以实现页面的动态交互。让页面与用户之间进行互动，且是实时动态的交互关系，引入JavaScript为页面增添了不少动态内容，页面变得更加生动，更加人性化。JavaScript语言存在兼容性问题，有的浏览器对JavaScrip

43、t语言的支持不是很好，因此，应选择合适的浏览器进行JavaScript的程序编写。其中浏览器版本在Navigator3.0以上或IE3.0以上对JavaScript的支持都很好。微软通过对JavaScript的改造开发了Jscript,两者差别只在一些细微的地方，大体相同。在网页中引入JavaScript语言，不仅能提升浏览网页的速度，还能是交互能力更强。此外，JavaScript专门用于WetR页的编程中。了解了JavaScript语言的基本信息后，接下来，我们来介绍在网页中引入JavaScript的相关案例和实现方式，分析它是如何提升网页性能的。2.Javascript加入网页的两种方法(

44、1)直接加入HTMLC档这是最常用的方法，大部分含有Javascript的页面都采用这种方法，如：<scriptlanguage="Javascript”><!-document.writeln("这是Javascript!使用直接插入的方法！");/-Javascript结束-></script>在这个例子中，我们可看到一个新的标签：<script>,</script>,而<scriptlanguage="Javascript”>用来告诉浏览器这是用Javascript编写的程序，

45、需要调动相应的解释程序进行解释。HTML勺注释标签<!-和->:用来去掉浏览器所不能识别的Javascript源代码的，这对不支持Javascript语言的浏览器来说是很有用的。Javascript结束：双斜杠表示Javascript的注释部分，即从开始到行尾的字符都被忽略。至于程序中所用到的document,write()函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。另外一点需要注意的是，<script>,</script>的位置并不是固定，可以包含在<head></head>11二、网站建设的各种语言的介绍或<

46、;body>.</body>中的任何地方。(2)引用方式则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：<scriptsrc=urllanguage="Javascript"></script>其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTMLt档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js"，其内容如下：document.writeln("这是Javascript!采用直接插入的方法！”)；

47、在网页中可以这样调用程序：<scriptsrc="Script.js"language="Javascript"></script>。12三、开发工具和开发技术简介三、开发工具和开发技术简介(一)理想网页的编制者-DreamweaverDreamweave诞生于美国的Macromedia公司，是一种强大的网页编辑器，不仅能够进行网页制作，还能对网站进行管理。它是一款可视化的网页设计和开发工具。使用Dreamweaver设计动态网页不受平台和浏览器的限制。据统计，Dreamweaver是用户设计和制作网页的首选工具，因为它具有应用最

48、广、功能最强大的特征。紧接着Dreamweaver8的发布，更坚定了Dreamweaver在该领域的位置。集网页的开发与制作、网站的管理与一体的Dreamweaver具有可视化、多平台支持和跨浏览器功能，是目前网站设计、开发、制作工具的首选。Dreamweaver的功能：(1)灵活的写作方式Dreamweaver的特点是能灵活的编写网页，不仅将世界一流水平的“设计”和“代码”编辑器组合，并在窗口的设计上还细化了源代码，可以帮助用户自定义界面，以满足工作的需要。(2)可视化编辑界面Dreamweaver是一种你看到就是你所所得到的HTM编辑器，可以实现网页元素的插入和生成。在可视化的编辑环境下，

49、大大提升了网页开发的效率，且不存在兼容性问题，制作的网页也符合专业水准，支持内部HTM编辑器以及第三方HTMLS辑器的实时访问。Dreamweaver仅适用于手工编码的用户，且适用于偏向可视化开发的用户，可为两者兼顾，轻松实现网页设计与网站管理工作。(3)CSS可视化设计、CSS佥查工具都能支持CSS(4)跨浏览器动态验证在保存文档时，系统能够对文档的浏览器兼容性进行自动检测，可以准确地知道使用哪种浏览器进行测试。自动检测内容包括页面中是否存在不兼容元素、标签或是CSSg构等。对页面中白标签与CSS羊式进行检查，看其与当前主浏览器是否相适应。13三、开发工具和开发技术简介(5)强大的网站管理功

50、能(6)内置图形编辑引擎(7)Dreamweaverfl勺综合性能Dreamweaver8继承Fireworks,Flash和Shockwave集成的特点，你可以自由的这些网页制作工具之间切换以此来轻松地创建美观实用的网页。(8)丰富的媒体支持能力较强的植入性，可在java、ActiveX、Shockwave和Flash中引入。强大的多媒体功能也是Dreamweaver的一大亮点，在DHTML口CSS的设计中起到了非常好的的作用。网页元素的相关动作与交互都能通过JavaScript与DHTM晤言来实现。此外，Dreamweaver支持动画的制作。(9)较强的扩展能力Dreamweaver

51、74;支持第三方插件，任何人都可以根据自己的需要进行功能扩展，更重要的是，我们还可以发布这些插件。(二)图像，图像编辑和设计软件-PS图象处理软件Adobe公司的PS图象处理软件是一个由Adobe系统的专业图像处理软件。与公司的其他软件一样，适用于MacOS和微软Windows操作系统的PS图象处理软件，同时，公司还发布了Unix操作系统版本。谷歌还通过Wine资助的对PS图象处理软件的Linux版本研究。PS图象处理软件的制作最初是由托马斯诺尔(托马斯诺尔)和约翰诺尔(JohnKnoll兄弟在1987制作的，但直到1990后，该软件才由Adobe公司首次发布。PS图象处理软件最初是为那些昂贵

52、的扫描仪扫描下来的图像服务。PS图象处理软件主要处理以像素(Pixels)所构成的数字图像。使用其广泛的编辑和绘图工具，可以更有效地进行图像编辑。独特的历史纪录浮动窗口和可编辑的图层功能，对各种滤镜的支持，更令使用者能够轻松创造出各种奇幻的效果。目前，Photoshop也正在被更多的用于处理网络图片。PS图象处理软件的后续版本中捆绑了一个独立的软件ImageReady,加强网络形象的PS图象处理软14三、开发工具和开发技术简介件(GIF图像文件)在CS3ImageReady取代Fireworks支持功能。PS图象处理软件CS3让用户更容易升级到新的硬件平台支持苹果英特尔作为内核的系统。在图像处

53、理软件领域中，PS的认可度是最高的，由于其价格昂贵，因此与强大的3DStudioMax一样普及度不是很高。也正因如此，才使得由JascSoftware公司开发的PaintShopPro、GIMP小组开发的GIMP友立信息开发的UleadPhotoImpact大占市场份额。随后Adobe发布了PS图象处理软件PS图象处理软件的简化版，为了争夺市场。虽然它的许多功能是有限的，但继承原有软件，最优秀的功能，价格比PS图象处理软件便宜很多。(三)动画设计软件-flashAdobeFlash,原名MacromediaFlash,简称Flash,前身为FutureSplash是指AdobeFlash专业多

54、媒体制作程序，也就是AdobeFlash播放器。Adobe公司于2005年12月收购了Macromedia公司，因此Flash也成为了Adobe的软件。1.falsh特性：(1)互联网网页中使用的大量矢量动画文件格式。(2)使用矢量图形(VectorGraphics),所产生的影片占用较小的存储空问。(3)使用Flash创建电影有其自身特殊的文件格式(SWF(4)该公司声称，97%勺世界网络浏览器有一个内置的Flash播放器(FlashPlayer)。(5) “富因特网应用”概念由Adobe提出的实现平台。(6) flash6后续的版本纳入面向对象编程概念。与其他语言相比，无论是在数据库，XM

55、LPHPffi其他平台上，都可以进一步结合应用。(7) 从用户体验角度看，是最好的前端技术。2.主文件格式：(1) swf是ShockwaveFlash的缩写，它是一个完整的视频文件，无法编辑。有时会被念做为Swiff或swaif。SW在发布时，可以选择保护的功能。如果没有选择，15三、开发工具和开发技术简介就很容易被别人输入到自己的源文件中使用。但是保护功能还是不能阻挡现存的大量破解软件，很多闪客专门来学习其他人的代码和设计方法。(2) flaFlash的源文件，只能用AdobeFlash打开编辑。16四、需求分析四、需求分析(一)网站系统分析本旅游网站是为以旅游信息发布、旅游资料共享、浏览

56、客户为核心的网站，宗旨是能及时、准确、完整发布游客需要的旅游信息。浏览用户只在浏览器浏览网站信息的用户，同时也对整个网站的用户信息进行需求分析，其主要功能是实现：(1)客户可浏览旅游新闻信息(2)客户可浏览旅游线路信息(3)客户可浏览旅游酒店信息(4)客户可浏览旅游图片信息(5)客户可浏览旅游景点信息(二)功能性需求分类总的来说，我的网站分为五个网站栏目，分别为世界宣言在首页，萱萱景点,专线旅游路线，世外桃源。(1)宣行天下首页首页网页名称是cd-index,首页是浏览者看到网站的第一个页面。首页可以说是一个精华，他总体的概括了该旅游网站的大致内容，突出了主题。(2)宣宣景点宣宣景点的网页名称

57、是cd-page01,它是一级页面，当进入首页之后在导航条上直接选择即可将进入到该页面。宣宣景点这个页面主要介绍了云南宣威各个地方的景点的旅游，其次就是对宣威市的历史沿革河文化进行介绍，让旅游者更了解宣威以及来宣威旅游的意义。(3)私人专线私人专线网页名称是cd-page02,同样是一级页面。进入首页之后在导航条李国辉，汤大权，武德蜂.信息组织与检索J.科学出版社.2013.(5):34-37.17四、需求分析上即可选择该功能。私人准线主要是对我们公司着重推广的地方进行私人订制，给每个人在同一个地方不一样的感受。(4)旅游路线旅游路线网页名称是cd-page03,同样是一级页面。进入首页之后在导航条上即可选择该功能。旅游路线主要可以看看各个景点的图片，并选择你最想去的地方。(5)世外桃源其他资讯网页名称是cd-page04,同样是一级页面。进入首页之后在导航条上即可选择该功能。世外桃源主要是介绍很多不是很大很出名的景点，但这些地方一定会让你找到心灵的归属地。(6)二级页面二级页面主要是对以上四个页面里的链接负责。(三)非功能性需求1 .用户界面需求风格是用户界面的主要要求，首先确定在整个网页标题栏中带着粉色色调，使站点有一个优雅而舒适的氛围，使人能够浏览很长时间，也不会感到视觉疲劳。其次，要求导航清晰简洁。接着导航用了14