2023年11月19日发(作者：启发式教学法)
云 南 财 经 大 学
学生毕业论文（设计）
题目：旅游网站前端的设计与实现
院（系）： 中华职业学院
专业： 计算机科学与技术
班级： 网络12-1
学号： ************
论文作者：
孔丹
***师：
**
指导教师职称： 副教授
2015 年 2 月
本科毕业论文（设计）原创性及知识产权声明
云南财经大学
本科毕业论文（设计）原创性及知识产权声明
本人郑重声明：所呈交的毕业论文（设计）是本人在导师的指导下取得的成
果。对本论文（设计）的研究做出重要贡献的个人和集体，均已在文中以明确方
式标明。因本毕业论文（设计）引起的法律结果完全由本人承担。
本毕业论文（设计）成果归云南财经大学所有。
特此声明
毕业论文（设计）作者签名：
作者专业：计算机科学与技术
作者学号：2
2016 年 2 月 15 日
I
摘 要
摘 要
在21世纪这个信息高速发达的时代，网络可谓是当今社会最流行、最方便、
最快捷的交流媒介，当然这样便捷的媒介也受到越来越多年轻人和很多商业人士
的喜爱，随之而来的就是慢慢的融入我们的生活，让很多人通过这个媒介去了解
更多的商业信息。
众所周知，随着人们生活条件的不断改善，生活品质与追求的不断提升，旅
游类的网站也在不断的更新和发展，现今，网站已不再是信息的简单公布与展示，
对于人们来讲，已完全脱离了单方面获取的性质，更多的是体现组织机构的风采，
性质。所以旅游类的网站对现在的发展已经势在必行。
这篇论文主要集中讲述旅游网站的设计与实现，在旅游网站前端的设计中，
页面的布局时，我们利用HTML将元素进行定义，然后利用CSS对展示的元素进
行定位，最后通过JavaScript实现我们想要的效果和交互。这些内容可能表面
看起来很简单，可这里面需要掌握的东西绝对不会少。在进行设计前，我们必须
对这些概念弄清楚和弄明白，只有这样在设计的过程中,我们才会感觉得心应手。
在设计的过程中，我们首先应该分析并解决实现中的若干技术问题；介绍了
个性化页面的背景；了解整个个性化页面生成系统的系统结构及工作原理；分析
了系统实现中的特殊性，难点和重点；现在我还没有设计用户注册，用户登录，
用户管理，可我会把自己设计的这个旅游网站以一种简单明了的方式向大家展现
出旅游的各个方面。并在设计中解决实现中的若干技术问题；努力建立完整的旅
游网站，进行测试并分析结果。
我做的这个旅游网站具有一目了然的特性，能让本地区的人们了解更多的旅
游资料，更能让世界各地的人了解一些地区的明文风景。
当然美中不足就是该旅游网站还存在一些问题，如网站的留言系统、用户注
册、用户登录没建立等等。这些问题和功能有待于进一步学习和添加。
关键词：
网站设计 HTML CSS javaScript JQuery
II
Abstract
Abstract
In the era of the 21st century, the information high speed development, the
network can be described as is the most popular in today's society, the most
convenient, the most efficient medium of communication, of cour, such a
convenient medium has also been more and more young people and many business
people's favorite, followed by is slowly into our lives, let a lot of people through the
media to understand more business information.
As is known to all, with the people's living conditions continue to improve, the
pursuit of quality of life and the continuous improvement of, tourism website also in
constantly updating and development. Today, the site is no longer simply publish and
display of information, in terms of the people, has been completely out of the
unilateral acquisition of nature, more is to reflect the elegance of the organization
nature. So tourism website of development now is imperative under the situation.
This paper mainly focus on the design and implementation of the tourism
website, in the design of the front end of the tourism website,
The layout of the page, we u HTML elements of the definition, and then u
CSS to display elements to positioning. Finally, we want the effect and interaction is
realized through JavaScript. The contents may surface appears to be very simple,
there is need to master something absolutely is not less. Before design, we must on
the concepts to figure out and understand. Only in this way in the process of design,
we will feel handy.
In the design process, first of all, we should analyze and solve some technical
problems in implementation of the; the personalized page background; understanding
entire personalization page production system system structure and working principle;
analysis of the particularity of the system implementation, the emphasis and difficulty;
now I haven't designed ur registration, ur login, ur management, I will to
designed the tourism site in a straightforward way to you show all aspects of tourism.
III
Abstract
And resolve to achieve a number of technical issues in the design; to build the overall
tourism website, testing and analysis.
I do this tourism website has a clear characteristic, can let the people of the
region to understand more travel information, more can let people around the world
understand some areas of the plain text.
Certainly fly in the ointment is that the tourism websites also exist some
problems, such as website message system, ur registration, ur login is not
established, and so on. The problems and function needs to be added to further
study and.
Key words: website design CSS, HTML, javascript and JQuery
IV
目 录
目 录
本科毕业论文（设计）原创性及知识产权声明............................ I
摘 要.............................................................. II
. III
一、绪论 ........................................................... 1
（一）引言 ...................................................... 1
（二）旅游网站发展现状 .......................................... 1
1.我国旅游网站发展概述....................................... 1
2.网站分类................................................... 2
3.网站构建立中存在的问题..................................... 3
（三）选择做旅游网站的目的与意义 ................................ 4
二、网站建设的各种语言的介绍 ....................................... 5
（一） HTML ..................................................... 5
语言介绍 .............................................. 5
的基本结构 ............................................ 6
（二） DIV+CSS .................................................. 6
+css简介 ............................................... 6
+css样式表简介 ......................................... 7
+css布局的优点 ......................................... 8
+css布局方式 ........................................... 9
+css理论概述 .......................................... 10
（三）Javascript ............................................... 10
ript简介 ........................................... 10
ript加入网页的两种方法 ............................. 11
三、开发工具和开发技术简介 ........................................ 13
（一）理想网页的编制者---Dreamweaver ........................... 13
（二）图像，图像编辑和设计软件--- PS图象处理软件............... 14
V
目 录
（三）动画设计软件---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
目 录
2.宣宣景点效果图............................................ 59
3.私人专线效果图............................................ 60
4.景点选择效果图............................................ 60
5.世外桃源效果图............................................ 61
（四）兼容方案 ................................................. 61
1.在尽可能多的浏览器测试你的网站............................ 61
2.编写质量高，容易解释的HTML ............................... 62
3.指定字符编码.............................................. 62
4.使网页易于访问............................................ 62
结 论 .......................................................... 63
参考文献 .......................................................... 64
致 谢 .......................................................... 65
VII
一、绪论
一、绪论
（一）引言
现在是信息时代，互联网的迅猛发展，技术的不断革新，促进了其他行业的
发展，各大行业将进一步融合和渗透。当今时代，生活在如此快的生活节奏中，
互联网已经深入到人们的日常生活，包括政治、经济和生活等多方面都离不开互
联网的应用，互联网高效的信息获取、发布以及传递机制深受人们青睐，在现今
的旅游行业发展中具有重大作用，现在人们为了适应知识经济社会的需要，促进
学习与交流。网上交流与合作功能是普遍的，技术管理和资源管理受到关注。随
着互联网的发展和普及，越来越多的企业和个人都有自己的网站在互联网上。网
站建设已成为企业形象宣传的产品推广，客户沟通最有效的桥梁；个人自我展示，
是与世界沟通的重要平台。越来越多的人开始从彼此的认知阶段开始进入自我认
同和行动阶段，互联网信息主要是通过网站实现的，获取信息的信息也要在“海
洋”中根据一定的检索方式，从网站下载所需的信息。因此网站建设在互联网应
用的地位是显而易见的。它是信息化建设的重要手段，在各个行业领域都发挥着
重要作用，已引起人们的高度关注。为了更好的合作，更多的与外界沟通和新的
信息，以及和他人分享信息，特此建搭建旅游网站。
旅游网站近十年在我国逐渐兴起和发展，到目前已初步形成了一个完整的类
型，涵盖旅游业的各个方面的在线旅游产业体系，旅游产品的推广和网上销售正
影响着越来越多的游客，旅游服务商和旅游管理者。为响应国内迅速发展的旅游
业，促进旅游信息化和电子政务的广泛实施，建立高效、可靠的互联网旅游信息
管理体系，实现我国旅游业的高速和跨越式的发展。
（二）旅游网站发展现状
1.我国旅游网站发展概述
第一阶段（1997至2000）：我国于1997年真正开始在实施旅游的互联网建
设，并先后成立了旅游资讯网、华夏旅游网这两大在线旅游网站。由于当时技术
1
一、绪论
水平有限，网站的建设十分简洁，网页都是些静态设计，如景点的图片展示，文
字介绍描述等构成。
二期（2000 至2001）：2000年4月在青旅在线旅游网站上引入了电子商务
模式，主要以预定业务为主。预定的服务项目通常都是交通与住宿方面，而其他
相关服务项目在网站上暂不支持，仍需游客与相关企业进行直接交易。至此，旅
游网站的建设更加完善了，新增了许多信息关联，包括超链接网页和动态图片展
示等，且网站分布更加合理。
第三阶段（2001至2002）：2001年2月国内兴起了旅游网站建设浪潮，并
以网上交易服务为网站的主要业务，其中金旅雅途网就是很好的代表。这个阶段
的旅游网站与游客之间建立了良好的互动性，并支持在线服务。游客对网上订票
服务表示十分满意认可，不仅快捷而且方便。其中住宿、机票等预订需要银行
①
汇款业务的支撑。
第四阶段（2002至）：到2002年4月，我国广东省南海市开发建立的南海
营销体系正式投入运营，是国内首个以旅游为目的的营销系统。该旅游网站引入
了DMS技术，有了强大的数据库管理的支持，游客可在网站上实现高效的交通、
旅游、住宿、购物和娱乐等相关信息的查询，至此，在线旅游的发展已进入成熟
阶段，旅游网站的功能也更加健全，使用也更加人性化。
②
未来旅游网站知识内容将变得越来越丰富，栏目将越来越细化，分类将越来
越科学、单调、静态的行程表将由灵活的自助游的运行定制，为游客提供个性化
的旅游产品，如智能服务将成为旅游网站的重要功能。
2.网站分类
对于不同类型旅游网站从不同的角度进行分类，如根据网站的性质不同，中
国的旅游网站可以分为以下七类：政府旅游网站，网站（应用服务提供商）、专
业旅游网站、旅游企业网站和旅游频道的网站的网页内容，各种旅游咨讯网和本
地的旅游网站，个人旅游网站。此外，旅游网站还可以根据专业属性、服务类型、
提供信息的不同进行分类。
①
戴斌.旅行社经营管理[J].旅游教育出版社.2015.(2):17-19.
②
薛华成.管理信息系统[J].清华大学出版社.2010.(6):22-25.
2
一、绪论
3.网站构建立中存在的问题
目前，我国旅游网站的数量非常大，现在使用各种搜索引擎的旅游网站已经
达到了几万。但大多数旅游网站的建设，以科学的方式，设计的有效性，或服务
从服务内容、网站范围、服务功能、不规范，存在很多问题，政府旅游网站为例，
对域名的使用是非常混乱的，48%省政府旅游网站没有用.的域名，网站
的信息提供也各不相同；以专业的旅游网站为例，从网上选取了50个成功的专
业旅游网站的评价结果来看，查询酒店和机票是专业的旅游预订网站的主要功
能，在专业的旅游网站的选择，100%的网站都提供这两种功能，但具体功能来看，
没有一个旅游网站能提供客房的实时状态，如最近一天的客房销售情况和推广优
惠的报价。火车票查询只有45%的网站能做到，预订火车票网站尚无一家开通，
只有一个开放的火车票预订的网站是再见城市网站，但它也仅开通了欧洲火车通
票预订。其中支持出租车预定的网站仅有22.8%,能支持同时预定酒店、几篇和
出租车票的网站却没有一家，而支持导游和门票预订的网站不到三家。从网站是
否支持预订功能上看，在所选择的网站中，都具备在线预订的功能。其中只有
22.8%的网站是支持在线支付的。此外，具有投诉功能的专业网站也相当少。
网站域名和LOG的设计也是两大重点内容，不仅要体现出网站的内涵，还应
让游客看到这些设计后能立马关联到网站相关的产品与服务业务，可以轻松地对
网站进行识别和筛选，而且具有鲜明的特征，方便搜索和记忆。这方面做得好的
旅游网站有携程旅行、途牛旅游和信天游，8000英里，中文域名的其他旅游景
点一目了然，高度个性化。
③
在网页的设计上， 要以人性化设计为向导，外观要给人以美的感觉，层次
要分明。在满意的外观设计基础上，记住多媒体技术，将好看的3D动画以及Flash
嵌入到网页中，三维虚拟展示和MPS，AVI格式，并支持音频和视频的下载，加
强生动直观的旅游信息显示。此外，我们还应该处理首页的打开速度和网页美观
化之间的矛盾。如可将图片以较小尺寸在首页上显示，通过点击放大浏览原图。
此外，网页的整体结构设计要合理。我们应该在页面顶部设置总目录信息网
站。在主页中，要充分体现出网站的主体，内容要精炼，可以在少量的查阅次数
③
赵西萍，等.旅游市场营销学[M].北京：高等教育出版社，2012.
3
一、绪论
中让访问者掌握充分的网站信息。并支持内容的定期更新，为游客提供最新的旅
游信息。
根据旅游地客源的分布情况，网页的设计要注意语言版本的支持。中华上下
五千年历史，蕴藏着丰富的旅游资源，吸引着来自世界不同国家的游客。而对于
网站而言，是面向世界开放的，全球不同旅游网站都是公开的，因此，旅游网站
的竞争也是激烈的。可能是游客和客户旅游网站。目前，国内以简体中文版为主
要的旅游网站语种，随着旅游市场的不断发展和扩充，许多国外市场也不断打开，
为让网站适应未来市场的发展，其他语言版本也应进行开发，以满足来自不同地
区的游客的个性需求。此外，还可以为不同的国家分别设置不同的国家、民族外
语版块，提供有针对性的相关信息。
（三）选择做旅游网站的目的与意义
目前，国内大多数旅游管理部门以及旅行社都是采用电子文档和表格的形式
来管理旅游相关信息资讯，只有少数的旅游相关机构建立起了旅游网站，这样，
很大一部分客户将会因这种落后的管理方式而流失。在这个网络大时代背景下，
信息化建设尤为重要。随着旅游业的迅速发展，业务的不断扩充，市场的不断
④
推广，仅靠人工方式来管理庞大的旅游资料信息是费力不讨好的事，而且存在很
大信息管理漏洞。因此，为规范旅游信息化管理，加快旅游业的发展，实现旅
⑤
游资源的高效利用和管理，旅游业的信息化建设才是正确的选择。随着互联网的
不断普及，人们都喜欢足不出户的办理一切事务，人们对旅游行业的需要也日益
的增加，各旅行社也应运用网络强大以及宣传自己，增强自己的竞争力。
而且旅游网站的建立是我个人爱好，我希望自己的技术可以变为一种提高自
我的表现，对于为什么选择旅游网站建设的主题，那是因为我个人比较了解，也
看到目前这种形式的网站是不多的，而且不是内容不丰富，就是没有自己独特的
想法，我不排除有一些好的旅游网站，但的确不是很多，所以我想单独制作自己
的旅游网站，希望有更多的人了解旅游的各种景点。
④
萨师煊,王珊.数据库系统概论[M].北京.高等教育出版社.174-178.
王兴动,千丽霞,曹明玉. ASP&应用编程[J].电子工业出版社.2012.(9):77-81.
4
⑤
二、网站建设的各种语言的介绍
二、网站建设的各种语言的介绍
（一） HTML
语言介绍
HTML是一种超文本结构标记语言，专门用于超文本文档的制作。所谓的HTML
文档就是指采用该语言编写的超文本文档，该语言不仅简单易懂，且在多种操作
系统平台中能够独立运行。如常用的Windows、Unix等。从1990年开始，HTML
语言就被万维网用来表示网页信息和格式设计的运用上，其中包括与Homepage
的相关连接信息。
我们所浏览的网页的源文件就是一个HTML文档，通常以.HTML或.HTM作为
文件的扩展名，是用HTML标记的ascii文本文件。下面介绍一个HTML文档是如
何生成的三种方式：
1、直接在文本中编写，也可以通过文本编辑器或HTML的编辑工具快速编写。
2、可以通过重命名或者格式转换工具将其他格式的文件直接转为HTML文
件，非常方便。
3、通过Web服务器的动态实时生成。
⑥
HTML是一种简单的标记语言，通过一系列的标签来组织文档结构，如段落
和超链接等都有相应的标志。文件格式的结构可以通过标记来组织，而文档内容
如何显示，按什么排序，这是HTML做不到的。但可以为Web浏览器提供默认的
建议，在用户浏览时的页面呈现效果由Web浏览器自带显示风格以及解析标记的
能力来确定。这也是为什么在不同浏览器中显示相同的文档的效果会不一样。
HTML的版本是2.0。它是基于SGML（Standard Generalized Markup
Language）标准广义置标语言，是用来描述数字文档的结构复杂的规范内容和管
理）的一个子集的进化。虽然标准html2.0的下一个版本（也称为HTML +）正
在开发中，但在标准草案的一些地区已被广泛采用，最好的Web浏览器（如
⑥
冯方方. 基础教程[M].北京.清华大学出版社.2004:47-51
5
二、网站建设的各种语言的介绍
Netscape等）可以解释html3.0一些新标记，因此在本章中提出的一些新的
html3.0标记了被大多数浏览器接受。
⑦
的基本结构
</span><span style='font-size:18px;color:#000000;font-family:SimSun;'>标题</span><span style='font-size:18px;color:#000000;font-family:SimSun;'>
网页主体部分
（二） DIV+CSS
+css简介
CSS是英语Cascading Style Sheets（层叠样式表）的简称，它是一种计算
机语言，用来表现HTML或 XML 等文件式样。一般的网站使用的术语，都是标准
的DIV+CSS、HTML或XML,是统一的Web设计标准，其中网页布局通过DIV+CSS
来实现。这种方式与传统HTML网页有所不同，它能够将W3C内容和表现分离开
来。目前HTML的最高版本已经更新到HTML5，其语言复杂度越来越高，此外，
XHTML语言可以重写HTML页面，并运用XML相关技术实现HTML语言的标准化、
规范化，并且大大提升网站的可扩展性，适用于数据自动交换的场景。与使用
HTML设计网页不同的是XHTML不在采用表格进行定位，而是通过DIV+CSS技术
来实现定位。且该方式不仅提高了页面开发效率，也是页面布局更加规整，下面
介绍DIV+CSS的相关特征：
⑦
李占波.基于的Web程序开发.河南科学技术出版社.2008:1-8
6
二、网站建设的各种语言的介绍
（1）在W3C标准。微软和其他公司都是W3C的支持者。这是最重要的，因
为它确保您的网站，不会因为未来的网络应用和升级被淘汰。
（2）支持浏览器的向后兼容，无论是浏览器大战中，IE7和Firefox的哪
一方胜利，你的网站都可以很好的兼容。
（3）搜索引擎更友好。与传统的table相比，采用DIV+CSS技术，搜索引
擎收录相比之下会更加友好。
（4）调整的样式更为方便。分离的内容和风格，使页面和风格的调整变得
更加方便。现在的雅虎、MSN、门户网站、网易、新浪等国内门户网站，Web2.0
的主流网站，采用DIV+CSS架构，更加印证了DIV+CSS是未来的一种趋势。
（5）CSS代码的简单性是一个很大的优势，对于一个大型网站来讲，可以
节省大量带宽，而且众所周知，搜索引擎喜欢比较干净的代码。
（6）分离的性能和结构，在一个团队开发中，更容易分工合作以此来减少
相互关联性。
+css样式表简介
在网页上使用样式表有三种方式：
（1）将网页链接到外部样式表。
（2）在网页上创建一个嵌入式样式表。
（3）将嵌入式样式应用于每一个页面元素。
（4）每一种方法都有其优点和缺点。
当页面中的全部或部分的页面上在同一站点上应用相同样式时，可以使用外
部样式表中的一个或多个外部样式表来定义样式并将它们链接到所有页面，这样
就可以保证所有页面的一致性。如果人们决定改变风格，只是在外部样式表中作
一次更改，而对于这个更改，会反映在所有的样式表链接页。通常是外部样式表
以.CSS做为它的文件扩展名，如。
我们可以在页面中采用嵌入式样式表的方式来定义所需的页面样式。嵌入式
样式表是一个层叠样式表，“嵌”在页标签字符内。嵌入式样式表的作用
范围是同一个页面，跨页面无效。
使用层叠样式表将内嵌样式层叠样式表属性应用于页面元素上。
7
二、网站建设的各种语言的介绍
如果网页链接到外部样式表，为该页创建的内嵌或嵌入式样式，将扩展或覆
盖在外部样式表中的指定属性。
+css布局的优点
（1）利于搜索引擎蜘蛛爬行
根据总结的经验和教训，DIV+CSS布局有利于蜘蛛的爬行，我们拿HTML表
格布局和DIV+CSS布局的页面做对比，明显table字节大于div+css字节，小字
节将有利于搜索引擎蜘蛛下载网页的时间，减少页面代码量，可以提高你的网页
浏览速度，而且蜘蛛爬行网站的深度也会大大增加。
（2）易于修改
提高易用性，使用CSS可以结构化HTML，CSS可以很容易地控制页面的布局
而且编写简单，编写CSS就像写html代码一样轻松。从网站的总体布局来看，
DIV+CSS布局的网站，一般都是将HTML页面和CSS文件分离的，DIV+CSS的特点
就是将页面内容和表现形式分离，可以在一个独立的样式文件中进行样式部分的
设计，这样就有可能减少未来无效的页面。网站改版相对会比较方便，一般只需
要你修改CSS文件就可以重新构建一个新的网站。此功能可重复使用和在编程完
成中多处使用，而这种特点是table不具备的。您可以同时更新多个网页的风格
格式，不用再一页一页地更新了。你可以使用一个CSS文件来控制站点上所有页
面风格，只要修改相应的CSS文件中行，然后在整个站点的所有页面都将被改变。
减少页面代码量，可以大大提高网页的浏览速度，在几乎所有的浏览器上都
可以使用。在前面提到的，DIV+CSS是CSS文件和HTML文件分开，当用户点击
网站，是在同时进行CSS文件和HTML文件的下载，这样可以提高网页的打开速
度，而table是必须以标签开始到结束才能显示网页内容。此外，DIV的 HTML
文件则是边加载边显示网页内容。这样就大大提高了用户体验。谷歌的页面加载
速度已经已经包含在排名因素中，虽然这个因素可以影响排名的一小部分，甚至
可以忽略不计，但有利于搜索引擎优化，我们为什么不用呢？
如果使用DIV+CSS排版，网页代码精简，使页面的字体变得更漂亮，更容易
编排，使页面真正达到赏心悦目的效果。如果你不javascrput大师可以不用写
ID，只要会用CLASS就可以。传统的HTML页面样式通常都比较杂乱无章，垃圾
8
二、网站建设的各种语言的介绍
代码较多，且需花费程序员大量的调整时间，在Table布局中通常通过ID来控
制样式，且样式与布局代码写在一块，显得层次不分明。而DIV能很好地分离样
式与布局，且有较强的重构性。
（3）相对表格的嵌套问题
说是在一些文章中，搜索引擎一般都不喜欢在上面抓取三层以上的Table
嵌套，这一点还没有得到搜索引擎官方的证实。我也不能完全肯定是不是，就目
前掌握的情况来看，在分析Table布局的页面遇到多个层次的表格嵌套时，将跳
过嵌套的内容或直接放弃整个页面。我们在使用Table布局时，为了达到视觉效
果，必须应用多个表格。如果一个嵌套表格中是核心内容，解析时，会跳过这部
分而没有抓取页面核心。这个页面就成了一个类似的网页。网站太多类似的网页
会影响排名和域名的信任度。
（4）搜索排名的影响
页面结构简单明了，易于搜索引擎搜索完成网站的优化工作。如果我们在设
计时，运用到基于XTHML标准的DIV+CSS布局，在完成设计时，要尽可能提高通
过W3C验证的通过率。事实证明使用XTHML架构的网站排名状况总体上是很让人
满意的。这可能是有争议的，但至少不会有任何坏处。XHTML结构规整，可以快
速便捷地搜索页面内容，因此用户的评价也很高。
+css布局方式
对于网站的DIV+CSS设计越来越受到人们的关注，从个人网站到企业和门户
网站，网页设计师已经将DIV+CSS作为业界标准。
如果使用DIV+CSS构建和美化网站，那么DIV就是整个网站的骨架，CSS样
式就是网站的着装。其中的内容当然就是血肉。那么如果我们要做一个网站。我
们就必须从DIV布局开始。
DIV元素是用于HTML文档内大块（block-level）的内容提供结构和背景的
元素，DIV的开始标签和结束标签之间的所有内容，都是用来形成快的，其中包
含的元素属性由div标签属性控制，或通过使用样式表格式化这个块，从而进行
控制。
在业界的各大个人网络、企业网络、门户网基本上都是用DIV+CSS这一布局
方式。如：腾讯络，IBM的官方网站，等等。其中，对于IBM的官方网站来说，
9
二、网站建设的各种语言的介绍
顶部是导航、下面是JavaScript和底部用UL列举出公司各项服务的连接。从整
体布局来看，这是一个单一的栏目，使得页面看起来简洁大方，如今的页面布局
主流也从复杂的华丽性变到简单的大方性，相比这两种网页布局，我个人也比较
支持后者。
+css理论概述
（1）理解CSS盒子模型
CSS盒子模型是什么呢？这可能是很多人在看到这个这个代名词时的第一
反应，在网页设计中经常听到一些属性名称：内容(content)、填充(padding)、
边框(border)、边界(margin)，CSS盒模型具有上述性质，日常生活中盒子里也
具有这些特性，所以称之为盒子模型。
在网页设计中内容往往指的是文本、图像和其他元素，也可以是一个小盒子
（DIV嵌套）。CSS相比于现实当中的盒子区别在于他有伸展性，里面的东西比
盒子本身本身大时，那么盒子也会随之增大，但它不会损坏。与现实的比较，这
种模式更比较容易被接受，也更容易得到推广。
（2）观念的转变
传统的前端设计是以这样的方式进行的：首先考虑好材料，文字等，然后处
理。通过HTML代码生成、最后进行排版；我们现在需要的是考虑好网站内容、
结构、风格。经过CSS排版使代码比较容易理解，各个区与各个块的层次分明。
因此，结构是非常重要的。
（3）实现结构和性能的分离
使用的CSS布局，结构和表现分离、代码简单、易于更新和利于优化。相比
于把样式写进去和和分离开的区别，更进一步说明结构与表现分离的优点，建立
一个单独的CSS文件和页面进行链接将使部分代码更加清晰。
（三）Javascript
ript简介
一种新的编程语言——JavaScript.可以说JavaScript是适应动态网页制
作的需要而诞生的，现在越来越广泛地应用于互联网网页。JavaScript是一种
10
二、网站建设的各种语言的介绍
脚本语言，由Netscape公司开发而来，也称之为描述语言。在HTML页面中使用
JavaScript语言，可以实现页面的动态交互。让页面与用户之间进行互动，且
是实时动态的交互关系，引入JavaScript为页面增添了不少动态内容，页面变
得更加生动，更加人性化。JavaScript语言存在兼容性问题，有的浏览器对
JavaScript语言的支持不是很好，因此，应选择合适的浏览器进行JavaScript
的程序编写。其中浏览器版本在Navigator3.0以上或IE3.0以上对JavaScript
的支持都很好。微软通过对JavaScript的改造开发了Jscript，两者差别只在
一些细微的地方，大体相同。在网页中引入JavaScript语言，不仅能提升浏览
网页的速度，还能是交互能力更强。此外，JavaScript专门用于Web网页的编
程中。
了解了JavaScript语言的基本信息后，接下来，我们来介绍在网页中引入
JavaScript的相关案例和实现方式，分析它是如何提升网页性能的。
ript加入网页的两种方法
（1）直接加入HTML文档
这是最常用的方法，大部分含有Javascript的页面都采用这种方法，如：
<script language="Javascript">
</script>
在这个例子中，我们可看到一个新的标签： <script>……</script>，而
<script language="Javascript”> 用来告诉浏览器这是用Javascript编写的
程序，需要调动相应的解释程序进行解释。
HTML的注释标签：用来去掉浏览器所不能识别的Javascript源
代码的，这对不支持 Javascript 语言的浏览器来说是很有用的。
Javascript结束：双斜杠表示 Javascript的注释部分，即从//开始到行尾
的字符都被忽略。 至于程序中所用到的document．write（）函数则表示将括
号中的文字输出到窗口中去， 这在后面将会详细介绍。 另外一点需要注意的是，
<script>……</script>的位置并不是固定，可以包含在......
11
二、网站建设的各种语言的介绍
或.....中的任何地方。
（2）引用方式
则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：
<script src＝url language="Javascript"></script>
其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档
头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果，可
以首先创建一个Javascript源代码文件“”，其内容如下：
n("这是Javascript！采用直接插入的方法！");
在网页中可以这样调用程序：<script src＝""
language="Javascript"></script> 。
12
三、开发工具和开发技术简介
三、开发工具和开发技术简介
（一）理想网页的编制者---Dreamweaver
Dreamweaver诞生于美国的Macromedia公司，是一种强大的网页编辑器，
不仅能够进行网页制作，还能对网站进行管理。它是一款可视化的网页设计和开
发工具。使用Dreamweaver设计动态网页不受平台和浏览器的限制。
据统计，Dreamweaver是用户设计和制作网页的首选工具，因为它具有应用
最广、功能最强大的特征。紧接着Dreamweaver 8的发布，更坚定了Dreamweaver
在该领域的位置。集网页的开发与制作、网站的管理与一体的Dreamweaver，具
有可视化、多平台支持和跨浏览器功能，是目前网站设计、开发、制作工具的首
选。
Dreamweaver的功能：
（1） 灵活的写作方式
Dreamweaver的特点是能灵活的编写网页，不仅将世界一流水平的“设计”
和“代码”编辑器组合，并在窗口的设计上还细化了源代码，可以帮助用户自定
义界面，以满足工作的需要。
（2） 可视化编辑界面
Dreamweaver是一种你看到就是你所所得到的HTML编辑器，可以实现网页
元素的插入和生成。在可视化的编辑环境下，大大提升了网页开发的效率，且不
存在兼容性问题，制作的网页也符合专业水准，支持内部HTML编辑器以及第三
方HTML编辑器的实时访问。Dreamweaver不仅适用于手工编码的用户，且适用
于偏向可视化开发的用户，可为两者兼顾，轻松实现网页设计与网站管理工作。
（3） CSS可视化设计、CSS检查工具都能支持CSS。
（4）跨浏览器动态验证
在保存文档时，系统能够对文档的浏览器兼容性进行自动检测，可以准确地
知道使用哪种浏览器进行测试。自动检测内容包括页面中是否存在不兼容元素、
标签或是CSS结构等。对页面中的标签与CSS样式进行检查，看其与当前主浏览
器是否相适应。
13
三、开发工具和开发技术简介
（5）强大的网站管理功能
（6）内置图形编辑引擎
（7）Dreamweaver的综合性能
Dreamweaver 8继承Fireworks，Flash和Shockwave集成的特点，你可以
自由的这些网页制作工具之间切换以此来轻松地创建美观实用的网页。
（8）丰富的媒体支持能力
较强的植入性，可在java、ActiveX、Shockwave和Flash中引入。强大的
多媒体功能也是Dreamweaver的一大亮点，在DHTML和CSS的设计中起到了非常
好的的作用。网页元素的相关动作与交互都能通过JavaScript与DHTML语言来
实现。此外，Dreamweaver支持动画的制作。
（9）较强的扩展能力
Dreamweaver还支持第三方插件，任何人都可以根据自己的需要进行功能扩
展，更重要的是，我们还可以发布这些插件。
（二）图像，图像编辑和设计软件--- PS图象处理软件
Adobe公司的PS图象处理软件是一个由Adobe系统的专业图像处理软件。
与公司的其他软件一样，适用于Mac OS和微软Windows操作系统的PS图象处理
软件，同时，公司还发布了Unix操作系统版本。谷歌还通过Wine资助的对PS
图象处理软件的Linux版本研究。
PS图象处理软件的制作最初是由托马斯诺尔（托马斯诺尔）和约翰·诺尔
（John Knoll兄弟在1987制作的，但直到1990后，该软件才由Adobe公司首
次发布。PS图象处理软件最初是为那些昂贵的扫描仪扫描下来的图像服务。
PS图象处理软件主要处理以像素（Pixels）所构成的数字图像。使用其广
泛的编辑和绘图工具，可以更有效地进行图像编辑。独特的历史纪录浮动窗口和
可编辑的图层功能，对各种滤镜的支持，更令使用者能够轻松创造出各种奇幻的
效果。目前，Photoshop也正在被更多的用于处理网络图片。PS图象处理软件的
后续版本中捆绑了一个独立的软件ImageReady，加强网络形象的PS图象处理软
14
三、开发工具和开发技术简介
件（GIF图像文件）在CS3 ImageReady取代Fireworks支持功能。PS图象处理
软件CS3让用户更容易升级到新的硬件平台支持苹果英特尔作为内核的系统。
在图像处理软件领域中，PS的认可度是最高的，由于其价格昂贵，因此与
强大的3D Studio Max一样普及度不是很高。也正因如此，才使得由Jasc
Software公司开发的Paint Shop Pro、GIMP小组开发的GIMP、友立信息开发的
Ulead PhotoImpact大占市场份额。随后Adobe发布了PS图象处理软件PS图象
处理软件的简化版，为了争夺市场。虽然它的许多功能是有限的，但继承原有软
件，最优秀的功能，价格比PS图象处理软件便宜很多。
（三）动画设计软件---flash
Adobe Flash，原名Macromedia Flash，简称Flash，前身为FutureSplash
是指Adobe Flash专业多媒体制作程序，也就是Adobe Flash播放器。Adobe公
司于2005年12月收购了Macromedia公司，因此Flash也成为了Adobe的软件。
1. falsh特性：
（1）互联网网页中使用的大量矢量动画文件格式。
（2）使用矢量图形（Vector Graphics），所产生的影片占用较小的存储空
间。
（3）使用Flash创建电影有其自身特殊的文件格式（SWF）
（4）该公司声称，97%的世界网络浏览器有一个内置的Flash播放器（Flash
Player）。
（5）“富因特网应用”概念由Adobe提出的实现平台。
（6）flash6后续的版本纳入面向对象编程概念。与其他语言相比，无论是
在数据库，XML，PHP和其他平台上，都可以进一步结合应用。
（7）从用户体验角度看，是最好的前端技术。
2. 主文件格式：
（1）swf
是Shockwave Flash的缩写，它是一个完整的视频文件，无法编辑。有时会
被念做为Swiff或swaif。SWF在发布时，可以选择保护的功能。如果没有选择，
15
三、开发工具和开发技术简介
就很容易被别人输入到自己的源文件中使用。但是保护功能还是不能阻挡现存的
大量破解软件，很多闪客专门来学习其他人的代码和设计方法。
（2）fla
Flash的源文件，只能用Adobe Flash打开编辑。
16
四、需求分析
四、需求分析
（一）网站系统分析
本旅游网站是为以旅游信息发布、旅游资料共享、浏览客户为核心的网站，
宗旨是能及时、准确、完整发布游客需要的旅游信息。
⑧
浏览用户只在浏览器浏览网
站信息的用户，同时也对整个网站的用户信息进行需求分析，其主要功能是实现：
(1)客户可浏览旅游新闻信息
(2)客户可浏览旅游线路信息
(3)客户可浏览旅游酒店信息
(4)客户可浏览旅游图片信息
(5)客户可浏览旅游景点信息
（二）功能性需求分类
总的来说，我的网站分为五个网站栏目，分别为世界宣言在首页，萱萱景点，
专线旅游路线，世外桃源。
（1）宣行天下首页
首页网页名称是cd-index，首页是浏览者看到网站的第一个页面。首页可
以说是一个精华，他总体的概括了该旅游网站的大致内容，突出了主题。
（2）宣宣景点
宣宣景点的网页名称是cd-page01，它是一级页面，当进入首页之后在导航
条上直接选择即可将进入到该页面。宣宣景点这个页面主要介绍了云南宣威各个
地方的景点的旅游，其次就是对宣威市的历史沿革河文化进行介绍，让旅游者更
了解宣威以及来宣威旅游的意义。
（3）私人专线
私人专线网页名称是cd-page02，同样是一级页面。进入首页之后在导航条
⑧
李国辉,汤大权,武德蜂.信息组织与检索[J].科学出版社.2013.(5):34-37.
17
四、需求分析
上即可选择该功能。私人准线主要是对我们公司着重推广的地方进行私人订制，
给每个人在同一个地方不一样的感受。
（4）旅游路线
旅游路线网页名称是cd-page03，同样是一级页面。进入首页之后在导航条
上即可选择该功能。旅游路线主要可以看看各个景点的图片，并选择你最想去的
地方。
（5）世外桃源
其他资讯网页名称是cd-page04，同样是一级页面。进入首页之后在导航条
上即可选择该功能。世外桃源主要是介绍很多不是很大很出名的景点，但这些地
方一定会让你找到心灵的归属地。
（6）二级页面
二级页面主要是对以上四个页面里的链接负责。
（三）非功能性需求
1. 用户界面需求
风格是用户界面的主要要求，首先确定在整个网页标题栏中带着粉色色调，
使站点有一个优雅而舒适的氛围，使人能够浏览很长时间，也不会感到视觉疲劳。
其次，要求导航清晰简洁。接着导航用了14px宋体，移动鼠标，字体会变成淡
粉色，看起来很舒服。另外，也可以用一些图片做背景图片加以修饰，也可以加
一些图片滚动和图片切换来添加一些动态的效果，从而不显得那么单调，增加一
些生机的气息。
2. 软硬件环境需求
软件需求：操作系统：Windows2007或Windows XP；浏览器：IE 6.0及以
上版本或FireFox 3.0及以上版本。开发工具：Dreamweaver CS6（或记事本）
+Fireworks CC。
硬件需求：要求处理器是Pentien 3以上，并且内存>=512MB和硬盘>=40G。
3. 网站质量需求
正确性：保证站点运行的正确性、无连接错误、图像显示错误等运行时错误。
18
四、需求分析
性能效率：网站设计要合理，代码不冗余，运行速度快。
易用性：以导航栏清晰，合理，简单易用。
清晰性：导航栏是清晰合理的。
可扩展性：兼容性强，用户可以使用浏览器有一个一致的用户体验
可靠性：可信度
19
五、旅游网站的规划与设计
五、旅游网站的规划与设计
（一）网站功能分析
建立企业网站应该有一个明确的网站布局。例如，导航栏要不要？很多人都
说，每个人都在做，这太普通了，没有个性，很难表现出时尚。但导航栏有那么
多的人在使用的原因，是因为它给游客一个明确的布局，方便人们查找信息。从
某个角度说，每个人都在用的东西就说明它确实被大家所接受。要清楚网站做出
来，是给每一个普通用户看。网站还需要经常更新，给人以新意。
技术设计的发展，带来了网页世界的繁荣。特别是在崇尚个性的今天，设计
者们更是将页面设计表示的淋漓尽致。用户高兴地看到这些僵化设计模式正在被
打破，网页设计充满活力。然而，对于网页设计者来说，不是一味追求个人表现，
也必须考虑用户和客户的习惯，在表现本身的风格的同时，在功能上让用户更方
便。
（二）整体风格设计
1.页面属性设计
页面中的整体格式和布局都在中，其中body设计如下:
body {
margin: 0;
padding: 0;页面属性设计
line-height: 1.7em;
font-family: "宋体";
list-style:none；
font-size: 12px;
color: #d1c7ba;
Background-color: #fdb4bb（粉色）;
20
五、旅游网站的规划与设计
}
各个页面的字体为：宋体、大小为12像素，字体颜色#333(浅灰色)。背景
颜色我采用#fdb4bb， #fdb4bb这种背景色它与其他任何颜色的搭配都比较合
适，不显花哨，简洁大方。Body与页面的边距为零。
2.色彩搭配
用户浏览网站是，打开网站映入眼帘的是网站的色彩，用户第一眼关注的并
不是里面丰富的内容和整个页面布局。网站的色彩设计直接影响到用户的视觉体
验，合理的搭配色彩，可以给用户一种舒适的体验，用户在平面设计的网页中会
受到强烈的色彩冲击，因此网站制作的是否成功，在一定程度上取决于色彩的搭
配和运用。
本网站的搭配主打为：白、粉、深粉、三种颜色。白色代表纯洁、纯真、朴
素、神圣、明快。粉色代表优雅、高贵、清新。深粉色代表可爱、感谢、幸运、
端庄，充分代表了一个旅游网站应有的气质和形象。给游客留下深刻的印象。
3.连接效果
对于一个页面不仅要设计其字体和其他风格，还要有链接效果，使页面更加
的生动，中的链接效果如下：
.logo{
background-image: url(images/);
width:900px;
height:80px;
}
.logo a{
color:#97d1ff; text-decoration:none;
text-align:center;
line-height:20px;
background-color:#00317a;
width:60px;
height:20px;
display:block;
}
21
五、旅游网站的规划与设计
.navBar{
width:900px;
height:37px;
background-color:#000;
margin:0 auto;
}
.navBar a{
color:#FFF;
text-decoration:none;
五、旅游网站的规划与设计
background-image:url(images/);
width:898px;
height:48px;
margin-top:10px;
padding-top:12px;
}
.footer a{
text-decoration:none;
六、网站开发过程及实现
六、网站开发过程及实现
（一）首页设计
首页是一个网站的外观，作为公司的形象，特别强调设计和规划。它是用户
首先看到的界面，其质量直接影响到站点的访问程度。因此，我从以下几个方面
对主要界面进行设计。
（1）在色彩搭配上，我用一个比较清新的颜色作基调，用相关的鲜艳色彩，
给用户一个干净灵动的感觉、。
（2） 在字体选择上，适当的大小，尽量使用普通字体，适当配用其他字体。
（3）在内容上，界面的主要内容充实而不繁杂，既体现了网站的特色，又
满足了用户的需求。
在主页的基础上我把主页中加入了可编辑区域，并保存为模板。后页是以模
板为基础的。使用模板功能有助于用户设计风格一致的页面。通过模板来创建和
更新页面，不仅大大提高了网站的工作效率和维护也将变得更加轻松。
云南财经大学首页如下图6-1：
图6-1 界面首页
24
六、网站开发过程及实现
1.首页顶部设计
在登录框的制作中，我设计的比较简单，是由邮箱框、密码框和登录按钮所
构成的，如图6-2：
图6-2
制作这个登录框的代码：
密码
邮箱
@
其中的CSS代码：
.parent{width:1002px; height:867px;
background-image:url(images/);margin:0 auto
}
.English{ width:900px; margin-left:auto; margin-right:auto;
}
.English li{float:right;margin:5px; padding-left:10px;
}
25
六、网站开发过程及实现
就这样Banner就可以制作出来了。
2.导航栏和LOGO设计
导航栏的制作也相对比较简单，我就是将我需要介绍的内容放在导航条里，
然后用了一个黑的背景色，白的文字，颜色分明，使导航条显而易见，如下图
6-3：
图6-3
导航栏的代码：
首页
宣宣景点
私人专线
旅游路线
世外桃源
CSS的代码：
.logo{ background-image: url(images/);width:900px; height:80px;}
.logo li{ list-style-type:none;float:left;padding-right:10px;}
.logo ul{ float:right;margin-top:5px;width:150px}
.logo a{ color:#97d1ff;
text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;wi
dth:60px;height:20px;display:block}
26
六、网站开发过程及实现
.logo a:hover{color:#FFF; text-decoration:underline}
.navBar li{ list-style-type:none;float:left;width:97px;
text-align:center;padding-right:35px}
.navBar{width:900px; height:37px; background-color:#000;margin:0 auto;}
.navBar a{color:#FFF; text-decoration:none;font-size:14px;
font-weight:bold;line-height:37px;display:block}
.navBar a:hover{ background-image:url(images/);width:97px;
height:37px;color:#20acff}
3.首页主要内容设计
中间内容我插入一张旅游的风景图，突出主题，因为只插入一张风景图片，
所以代码比较简单，如图6-4：
导航栏的代码：
CSS的代码：
六、网站开发过程及实现
}
中间的内容，主要是图片加文字介绍了一副海边的景点，加入了一个“阅读
全文”的按钮，可以链接到详细介绍该内容的另一个网页，如图6-5：
图6-5
中间的代码
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>最热风景
/>
只要你有有想去的地方，这就是你的天
地。
水天相接的地
方重合成了一条线，像是尊敬我们这些远道而来的
客人，形成了一个接一个的浪头水是蓝
的，荡起了白色的泡沫....
阅读全文
CSS的代码：
.content{ background-image:url(images/);height:407px;width:878px;
margin-top:10px;padding-top:15px;padding-left:22px}
.left{width:590px;height:390px;float:left;margin-right:10px}
.right{width:260px;height:390px; float:left;}
.leftTop{margin-top:10px;}
.leftTop h3{margin-left:8px;width:578px;height:20px;border-bottom:solid 1px
#2c89c6;font-size:14px;color:#FFF}
.top{height:135px;width:580px}
.top01,.top02{float:left}
.top01{margin-top:8px;margin-left:10px}
.top02{margin-top:15px;margin-left:5px}
.top02 h1{color:#FFF;font-size:14px}
.top02 p{color:#FFF;margin-top:15px;line-height:10px}
中下部分也是以图片加文字突出两个主题——雪景、桥景，文字可供游客选
择想要什么样的雪景和什么样的桥景，在文字前，加了一个四叶草的小图标，也
突出了旅游的主题，如图6-6：
29
六、网站开发过程及实现
图6-6
中间的代码
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>雪景
style="margin-top:8px;margin-left:12px"/>
style="padding-left:30px;margin-top:5px">
只见天地之间白茫茫
的一片,雪花纷...
那雪花洁白如玉,它是
天宫派下的小天将,还是...
大雪纷纷扬扬落下,那
一片雪花在空中舞...
雪让人的感觉只有一
个字——冷.大地一片银...
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>桥景text-decoration:none">
style="margin-top:8px;margin-left:12px;width:257px;height:87px"/>
30
六、网站开发过程及实现
style="padding-left:30px;margin-top:5px">
桥身直跨大河两岸，像
一条飞虹
那是一座拥有高龄的
石拱桥，横 ...
小桥横跨小河两岸，桥
上的石板还略
大桥给我有趣的童年
染上了瑰丽的色彩。
CSS的代码：
.leftBottom{height:210px;width:590px;margin-top:17px}
.leftList,.rightList{float:left}
.leftList h3{margin-left:8px;width:300px;height:20px;border-bottom:solid 1px
#2c89c6;font-size:14px;color:#FFF}
.text01 a{color:#FFF; text-decoration:none;line-height:18px}
.text01 a:hover{ text-decoration:underline}
.text01 li{color:#FFF}
.text01{width:260px;height:75px}
而其中首页的一个特效是图片切换，在这里面加入了许多风景照的切换，是
网页增加了一点生动的信息，如图6-7：
31
六、网站开发过程及实现
图6-7
切换代码：
CSS代码是：
.rightList{width:282px;overflow:hidden}
.rightList h3{margin-left:8px;width:270px;height:20px;border-bottom:solid 1px
#2c89c6;font-size:14px;color:#FFF}
.right{margin-top:10px}
.right h3{width:246px;height:20px;border-bottom:solid 1px
#2c89c6;font-size:14px;color:#FFF}
.mask{margin-top:5px;margin-left:2px;width:248px;height:350px;overflow:hidden;
position:relative}
.rightPic{ width:243px;height:688px; position:absolute;top:0;left:0}
.rightPic li{ list-style-type:none;margin-bottom:3px}
.rightPic img{border:0 none}
4.首页底部设计
页脚是旅游的一些信息介绍，如图6-8：
33
六、网站开发过程及实现
图6-8
页脚的代码
CSS的代码：
.footer{ background-image:url(images/);width:898px;
height:48px;margin-top:10px;padding-top:12px;}
.footer a{ text-decoration:none;color:#97d1ff;}
.footer li{ list-style-type:none;float:left;padding:0 20px;border-right:solid 1px
#97d1ff}
.footer a:hover{ text-decoration:underline}
.last{width:898px; text-align:center;padding-top:8px; color:#97d1ff}
.footer ul{margin-left:230px;}
34
六、网站开发过程及实现
（二）其余页面的设计
1.宣宣景点页面设计
宣宣景点我就介绍了一下宣威简介、历史沿革和宣威文化，在这个网页大家
也能看出，我主要就是介绍我的家乡（宣威），可能加入过多的文字信息，会
让人游客有点视觉疲劳，但如果能真正了解宣威的这些内容，你就会发现宣威
是一个真正值得你来旅游的好地方，如图6-9:
图6-9
宣威简介的代码如下
style="margin-left:5px;
margin-right:5px;
margin-bottom:-3px;"/>
宣威简介
style="margin-top:
35
六、网站开发过程及实现
10px;margin-left:114px"/>
宣威市地处云南省东北部。东与贵州省盘县相邻，南与曲靖市毗邻，西
隔牛栏江与会泽县相望，北与贵州威宁县接壤，距省会昆明市260公里。全市面
积6062平方公里。民族有汉、彝、回、苗。辖榕城、来宾、倘塘、格宜、田坝、
羊尝板桥7镇及17乡。宣威历史悠久。
元至元十三年（1276年）设沾益州，属云南行中书省曲靖路。清雍正五
年（1727年）设宣威州，隶曲靖府。民国初改设宣威县，1954年改名榕峰县，
1958年复设宣威县，现隶属曲靖地区。经国务院批准撤县设市，设宣威市。
宣威地处滇江高原北部，地势东高，西、北低。主要山峰有东山梁子、
白革皮，梁光山梁子、大水塘梁子、石盆梁子等；最高峰马鞍洞梁子，海拔2868
米，最低处腊龙岔河，海拔920米。主要河流有可渡河、格香河、小江。气候特
点，冬温夏凉，年温差小，日温差大。年均降水量986毫米，年均温13.3℃，
一月均温5℃，七月均温19.4℃。属暖温带高原季风气候。 全市工业主要有农
机修造、煤炭、电力、采矿、化工、冶金、化肥、建材、食品加工、烤烟、粮油
加工、酿酒、制药等。
CSS的代码如下
*{padding:0;margin:0;font-size:12px;}
li{ list-style:none;}
body{ background-color:#fdb4bb;}
.parent{width:1002px;
height:867px;
background-image:url(images/);
margin:0 auto;}
.bg{margin:0 auto;width:900px;overflow:hidden}
.English{ width:900px; margin-left:auto; margin-right:auto;}
.English li{float:right;margin:5px; padding-left:10px;}
.logo{ background-image:url(images/);width:900px; height:80px;}
36
六、网站开发过程及实现
.logo li{ list-style-type:none;float:left;padding:0 5px;}
.logo ul{ float:right;margin-top:5px;width:150px}
.logo a{color:#97d1ff;
text-decoration:none;
text-align:center;
line-height:20px;
background-color:#00317a;
width:60px;
height:20px;
六、网站开发过程及实现
color:#20acff;
}
.banner img{width:900px;height:185px;}
.content{height:505px;width:900px;background-color:#FFF;}
.leftBar,.rightBar{float:left}
.leftBar{
background-image:url(images/);
六、网站开发过程及实现
.left a:hover{color:#F39; }
.rightBar{padding-right:40px}
.rightBar h3{
margin-left:8px;
width:692px;
height:25px;
border-bottom:solid 1px #dedede;
font-size:14px;color:#000;
margin-top:33px;
}
.text{float:left}
六、网站开发过程及实现
.footer li{ list-style-type:none;float:left;padding:0 20px;border-right:solid 1px
#97d1ff}
.footer a:hover{ text-decoration:underline}
.last{width:898px; text-align:center;padding-top:8px; color:#97d1ff}
.footer ul{margin-left:230px;}
.rightBar{ position:relative}
2.私人专线页面设计
私人专线我就介绍了一下宣威景点、大理景点、丽江景点和厦门景点，点到
每一个景点都会有相应的文字介绍，主要是对在这里的各个地方的介绍，因为在
这几个景点里都会有好多小景点，而每个风景的介绍会在二级界面里一一介绍，
如图6-10：
图6-10
宣威景点的代码如下：
style="margin-left:5px;margin-right:5px;
margin-bottom:-3px;margin-bottom:-3px;;"/>宣威景点
宣威市地处云南省东北部。东与贵州省
盘县等...
元至元十三年（1276年）设沾益州，
属云南行...
宣威是全省重要煤炭产地之一
宣威市地处云南省东北部。东与贵州
省盘县相邻，
宣威主要名胜及纪念地有：尖角洞
文化遗址、
年均降水量986毫米，年均温
13.3℃，一月均5℃
全市工业主要有农机修造、煤炭、电
力、采矿、化冶金...
41
六、网站开发过程及实现
贵昆铁路纵贯市境，另有田煤、来宾
煤矿、宣威电厂
2015-12-14
2015-10-09
2015-06-08
2015-05-05
2015-12-29
2014-12-19
2014-12-03
2014-09-01
CSS代码：
.content{height:505px;width:900px;background-color:#FFF;}
.leftBar,.rightBar{float:left}
.leftBar{ background-image:url(images/);width:158px;height:
485px;padding-top:20px; position:relative}
.left{padding-left:20px}
.left li{ list-style-type:none;width:114px;height:33px; line-height:33px;
background-image:url(images/); background-position:bottom;
background-repeat:no-repeat;margin-bottom:5px}
.leftBar h1{font-size:14px;margin-left:22px}
.leftBar h3{font-size:10px;font-family:Arial;color:#a2a2a3;margin-left:22px}
.left a{ text-decoration:none;color:#000;font-size:14px;
font-weight:bold;padding-left:3px}
.left a:hover{color:#005bac; }
42
六、网站开发过程及实现
.rightBar{padding-right:40px}
.rightBar h3{margin-left:8px;width:692px;height:25px;border-bottom:solid 1px
#dedede;font-size:14px;color:#000;margin-top:33px;}
.text{float:left}
.date{ float:right;}
.text{padding-left:40px;margin-top:25px;width:346px}
.date{margin-top:25px;width:84px;padding-right:10px}
.text li{ list-style-type:none;line-height:30px;width:340px;
background-image:url(images/); background-repeat:no-repeat;
background-position:left}
.text a{padding-left:10px}
.date li{ list-style-type:none;line-height:30px}
.text a{color:#747373; text-decoration:none}
.text a:hover{ color:#000; text-decoration:underline}
3.旅游路线页面设计
旅游路线我就介绍了一下热门的夏日好风光、省外好风光和宣行论坛等，在
六、网站开发过程及实现
图6-11
“景点选择”代码如下：
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>夏日好风光
田野里，美在那里跳舞！夏天，
田里禾苗绿油油。那翠绿的颜色，明亮地照耀着我们的眼睛，似乎每一片叶子上
都有一个绿精灵在跳舞。
style="width:680px;height:1px"/>
CSS代码如下
*{padding:0;margin:0;font-size:12px;}
li{ list-style:none;}
body{ background-color:#fdb4bb;}
.parent{width:1002px; height:867px;
background-image:url(images/); margin:0 auto}
.bg{margin:0 auto;width:900px;overflow:hidden}
.English{ width:900px; margin-left:auto; margin-right:auto;}
.English li{float:right;margin:5px; padding-left:10px;}
.logo{ background-image:url(images/);width:900px; height:80px;}
.logo li{ list-style-type:none;float:left;padding:0 5px;}
46
六、网站开发过程及实现
.logo ul{ float:right;margin-top:5px;width:150px}
.logo a{ color:#97d1ff;
text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;wi
dth:60px;height:20px;display:block}
六、网站开发过程及实现
.button a{color:#535353; text-decoration:none;line-height:20px;margin-left:5px}
.button a:hover{ text-decoration:underline}
.box01 h3{color:#626262;
font-weight:normal;margin-left:15px;margin-top:15px}
.footer{ background-image:url(images/);width:900px;
height:48px;padding-top:12px;}
.footer a{ text-decoration:none;color:#97d1ff;}
.footer li{ list-style-type:none;float:left;padding:0 20px;border-right:solid 1px
#97d1ff}
.footer a:hover{ text-decoration:underline}
.last{width:898px; text-align:center;padding-top:8px; color:#97d1ff}
.footer ul{margin-left:230px;}
.pic{ position:relative}
.bigPic{ position:absolute;top:89px;left:252px}
六、网站开发过程及实现
代码如下：
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>海景
海边好风光
仰首望上去，
湛蓝的天空下，阳光灿烂地做着背景，勾勒出高山那悬
崖峭壁奇石怪垒的
身...
了解更多
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>美景
那些你不知道的美景
炎炎的太
49
六、网站开发过程及实现
阳，高悬在世界的当空。红的光如火箭般射到地面，地面着
火了，反射出油一般在沸煎的火焰来。蒸腾，窒塞，
酷...
了解更多
style="margin-left:5px;margin-right:5px; margin-bottom:-3px;"/>专题景点
你也许从未见过的美景
秋天已到，
虽然还未在福州感受到这般凉意，但是却不免会思念起
家乡的秋天，这时候我窗前的梧桐树是不是已经穿上金
黄的...
了解更多
选择宣行的理由
50
六、网站开发过程及实现
由此发现，宣行为何值得您加入！
CSS代码如下：
li{ list-style:none;}
body{ background-color:#fdb4bb;}
.parent{width:1002px; height:867px;
background-image:url(images/); margin:0 auto}
.bg{margin:0 auto;width:900px;overflow:hidden}
.English{ width:900px; margin-left:auto; margin-right:auto;}
.English li{float:right;margin:5px; padding-left:10px;}
.logo{ background-image:url(images/);width:900px; height:80px;}
.logo li{ list-style-type:none;float:left;padding:0 5px;}
.logo ul{ float:right;margin-top:5px;width:150px}
.logo a{ color:#97d1ff;
text-decoration:none;text-align:center;line-height:20px;background-color:#00317a;wi
dth:60px;height:20px;display:block}
.logo a:hover{color:#FFF; text-decoration:underline}
.navBar li{ list-style-type:none;float:left;width:97px;
text-align:center;padding-right:35px}
.navBar{width:900px; height:37px; background-color:#000;margin:0 auto;}
.navBar a{color:#FFF; text-decoration:none;font-size:14px;
font-weight:bold;line-height:37px;display:block}
.navBar a:hover{ background-image:url(images/);width:97px;
height:37px;color:#20acff}
.banner img{width:900px;height:185px;}
51
六、网站开发过程及实现
.content{height:505px;width:900px;background-color:#FFF;}
.left{float:left}
.right{float:right}
.picLeft{float:left;margin-left:15px;margin-right:15px}
六、网站开发过程及实现
.footer ul{margin-left:230px;}
.leftLine01{ position:relative}
5.宣威景点页面设计
宣威景点主要就介绍了宣威的各个景点，来宣威旅游的私人专线，可以选择
的路线和来宣威旅游的旅游战略，因为我对我的家乡比较熟悉，所以在这里就做
了比较详细的介绍，在最下方还做了一个比较简单的游客反馈意见的栏目框，如
图6-13：
53
六、网站开发过程及实现
如图6-12
代码如下：
54
六、网站开发过程及实现
宣威景点
私人专线
旅游路线
旅游战略
Css代码如下：
*{margin:0;padding:0;color:#b4b4b4}
a{color:#b4b4b4; text-decoration:none;}
.bigbox{ height:200px;}
.logo{ width:300px; float:left; height:200px; margin-left:100px;
}
.rightbox{ width:900px; float:right;height:200px; margin-right:50px;}
.rightbox p{ float:left; margin-right:30px; font-size:40px; margin-top:70px;
margin-left:35px;}
.rightbox a:hover{ color:pink;}
.header{height:700px;}
57
六、网站开发过程及实现
.footer{background-image:url(images/);height:348px}
.main{width:1008px;margin:0 auto}
.main img{display:block}
.submitContainter{background-image:url(images/);background-repeat:n
六、网站开发过程及实现
（三）最终效果图
1.首页效果图
2.宣宣景点效果图
六、网站开发过程及实现
3.私人专线效果图
4.景点选择效果图
六、网站开发过程及实现
5.世外桃源效果图
（四）兼容方案
用户通常使用一个网络浏览器访问您的网站。各浏览器解译网站代码略有不
同，这意味着你的网站在不同浏览器上的显示效果会有所不同。一般来说，你应
该避免依赖特定的浏览器行为，例如在未指定内容类型或编码的情况下，希望浏
览器可以正确检测到相应的类型的内容或代码。此外，还可以采取以下步骤来保
证网站在不同浏览器上能显示正确。
1.在尽可能多的浏览器测试你的网站
在网站设计完成后，您应通过多个浏览器复查网站的外观和功能，确保您的
创意设计能完美地呈现给所有访问者。在网站开发的早期阶段，你应该进行这种
测试。所有浏览器（或同一浏览器的不同版本）对同一网站上呈现可能会不同。
您可以使用诸如Google Analytics(分析)这样的服务来了解访客最常用的浏览
器访问您的网站。
61
六、网站开发过程及实现
2.编写质量高，容易解释的HTML
即使你写HTML是无效的，部分浏览器不兼容你的网站，网站显示就会有问
题，因此，你的网站可能不是在所有的浏览器（或未来的浏览器）都显示正确。
网页兼容性很重要，若想要自己设计的网页兼容所有浏览器，且显示效果一样，
则网页的开发最好使用HTML+CSS，并在浏览器中频繁测试网页显示效果。正确
有效的HTML是网页正确显示的保证，CSS可以实现样式与内容分离，提高网页
载入的速度，进而呈现给游客。你可以使用验证工具检查自己的网站，如W3
Consortium提供免费的在线HTML 和 CSS验证工具，还可以使用如HTML Tidy
的工具快键清理你的代码。（虽然谷歌强烈推荐有效的HTML的使用，但这并不
⑨
影响谷歌抓取你的网站并将其编入索引的方式。)
3.指定字符编码
为了使浏览器能够呈现在你的页面上的文本，你可以为文档指定相应的编
码。某些浏览器无法识别文档深处的字符集声明，因此，编码的位置最好在文档
(或框架)的顶部。此外，您还应确保您的网络服务器不发送相冲突的 HTTP 标头。
4.使网页易于访问
并不是所有的用户将在浏览器中启用JavaScript。此外，Flash和ActiveX
技术在一些浏览器效果不好（或根本就不适用）。建议您按照flash等其他富媒
体使用指南进行操作，再在这样的纯文本浏览器中测试您的网站。提供针对富媒
体内容和功能的纯文本浏览方式，有助于搜索引擎更方便的抓取你的网站，并将
其编入索引，同时也大大方便了使用屏幕读取器等技术访问您网站的用户。
⑨
MattheMacDonal.管理信息系统[J].电子工业出版社..3（8）:102-108.
62
结论
结 论
在开始本课题的设计之前，本人对各大旅游网站系统进行了分析和研究，不
过只是一些表层的研究，没有进行实际的开发实践。通过这次毕业设计，实现了
旅游网站系统的相关设计和开发。在系统的前台设计中，主要运用了CSS、HTML、
Javascript等网站前台开发技术及使用photoshop图形图像处理软件、
DreamweaverCS5网页制作软件，做网站在于需要一颗坚持不懈和积极向上的心
态，要勇于知难而上，找到问题的解决办法，这是非常重要的。
经过将近六个月的毕业设计，顺利完成旅游网站的设计和实现以及论文的撰
写，在系统的开发中遇到了各种难题，通过查阅相关资料和咨询导师最后都已破
解。不仅提升了处理问题的能力，且对软件开发的过程有了更深的理解与认识。
但由于水平有限加上经验不足，在开始做系统的时候需求分析做的不到位，导致
在后期的系统开发过程中出现许多返工的地方，极大地影响了系统的开发进程。
另一方面，对在系统开发过程中遇到的困难程度认识不够，导致系统开发计划一
变再变，打乱了原来的计划安排，致使在项目编程过程出现了许多不必要的麻烦，
增加了系统开发的难度。
在设计的过程中，我增长了很多知识和见解，进一步熟悉了ASP编程、网页
制作的方法以及网页制作工具的使用，技术上得到了很大的提升，并更正了以前
对网站的错误认识。通过这次项目开发的实践，也使我的动手实践能力得到了极
大的锻炼，同时也使我积累了许多软件开发方面的经验，对软件的开发过程有了
更加深切的体会，认识到了需求分析对于软件开发的重要性。通过对开发过程中
遇到的问题的分析解决，使我分析问题与解决问题的能力得到了提升，这也是我
在本次项目开发中得到的最重要的收获。
在本次的系统设计中还存在着很多的问题，例如界面不够美观，还远达不到
旅游网站要求的界面优美的基本要求；功能不够强大，达不到商业的旅游网站功
能的基本要求等。另外，对网站的制作速度太慢，工具的使用还不熟练，还有待
于改善和提高。
63
参考文献
参考文献
[1] 戴斌.旅行社经营管理[J].旅游教育出版社.2015.(2):17-19.
[2] 薛华成.管理信息系统[J].清华大学出版社.2010.(6):22-25.
[3] 赵西萍，等.旅游市场营销学[M].北京：高等教育出版社，2012.
[4] 萨师煊,王珊.数据库系统概论[M].北京.高等教育出社.
174-178.
[5] 王兴动,千丽霞,曹明玉. ASP&应用编程[J].电子工业出版
社.2012.(9):77-81.
[6] 李占波.基于的Web程序开发.河南科学技术出版社.1-8
[7] 冯方方. 基础教程[M].北京.清华大学出版社.47-51.
[8] 李国辉,汤大权,武德蜂.信息组织与检索[J].科学出版社.2013.(5):34-37.
[9] 王兴动,千丽霞,曹明玉. ASP&应用编程[J].电子工业出版
社.2014.(9):77-81.
[10] 孙继磊，刘亮亮.精通Visual C# 2008语言基础、数据库系统开发、Web
开发.人民邮电出版社.2008年9月.
[11] Roy of reu in educational information systems[J].
Campus-Wide Information .18(3):21-22.
[12]（美）Ron Patton 著 张小松,王钰,曹跃等译.软件测试. —北京：机械工
业出版社.2010.4.
[13] 王水．软件工程[M]．郑州：河南科学技术出版社．2009.
[14] MattheMacDonal.管理信息系统[J].电子工业出版社..3
（8）:102-108.
64
致 谢
致谢
近六个月时间的毕业课题设计是我大学生活中忙碌而又充实一段时光。这里
有治学严谨而又亲切的老师，有互相帮助的同学，更有积极、向上、融洽的学习
生活氛围。短短的时间里，我学到了很多的东西。不仅学到就更多的理论知识，
扩展了知识面，提高了自己的实际操作能力；而且学会了如何去学习新的知识，
学会了面对困难和挑战，学会了团结合作，互助互利。借此论文之际，向所有帮
助、关心、支持我的老师、朋友同学，表达我最真诚的谢意。
首先感谢指导老师。本论文是在邓平老师耐心指导下多次修改完成的。从课
题的选择到项目的最终完成，邓老师都始终给予我细心的指导和不懈的支持，使
我不仅增强了自学的能力和开发软件的能力，而且还对网站的美工方面有了很大
的提高。同时，在邓老师的鼓励和帮助下，最终完成了本次设计的顺利完成。在
此，我对他的耐心指导和帮助表达我最真诚的谢意，感谢邓老师在这几个月来所
付出的努力。
在此，我还要感谢我的同学们。当我在毕业设计过程中遇到问题和困难时，
是他们给我提出许多关键性的意见和建议，使我对整个毕业设计的思路有了总体
的把握，并耐心的帮我解决了许多实际问题，使我获益良多。
同时，感谢四年来传授我知识的老师们，更要感谢我的家人及朋友对我学业
上的支持和鼓励，感谢所有关心、帮助过我的人。
同时感谢我的大学，感谢中华职业学院。
指导教师评语：
签 名：
日 期： 年 月 日
飞快反义词-闭嘴英语
本文word下载地址：旅游网站前端的设计与实现.doc
本文 PDF 下载地址：旅游网站前端的设计与实现.pdf
