摘要： 随着社会科技的发展，国民收入的逐渐提高，使得旅游业迅猛的发展。对于用户来说，得到自己所需的旅游信息是登录旅游网站的目的。本论文主要论述了该网站策划与设计的基本过程，在旅游网站前端的设计中，进行页面的布局设计时，我们使用HTML将元素进行定义，然后利用CSS对元素在页面上进行定位。因为自己知识储备不足的原因部分设计最后并没有实现。旅游网站基于HTML5，以互联网为传播媒介来进行旅发布功能。本网站以云南旅游为主题进行策划设计。本网站包括旅游线路、票务订购、酒店预定、留言反馈模块。同时对旅游网站的建设过程、所用语言软件和设计进行了介绍。

关键词： 网站设计；旅游；信息

The planning and design of the "Yunnan tourism propaganda" website

Abstract: With the development of society, the progress of science and technology and the increase of national income have been improved., tourism has developed rapidly. For users, getting their own travel information is the purpose of logging into a tourist website. This paper mainly discusses the basic process of the planning and design of the website. In the design of the front end of the tourist website, we use the HTML to define the elements in the layout of the page, and then use the CSS to locate the elements on the page. Because of the lack of knowledge, part of the design has not been realized. Tourism website is based on HTML5, which uses the Internet as the media to carry out the function of travel distribution. This website takes Yunnan tourism as the theme to plan and design. This website includes tourist routes, ticketing order, hotel reservation, message feedback module. At the same time, the construction process, the language software and the design of the website are introduced.

Keywords: Website design；Tourism；information

目录

摘要 i

Abstract i

目录 1

1 绪论 1

1.1 引言 1

1.2 我国旅游网站发展过程和进展 1

1.2.1 我国旅游网站发展历史 1

1.2.2 网站分类 2

1.3 选择做旅游网站的目的与意义 2

2 网站建设的介绍 3

2.1 HTML 3

2.2 DIV+CSS 3

2.2.1 p+css概念简介 3

2.2.2 p+css样式表简介 4

2.2.3 p+css布局的优点 4

2.2.4 p+css布局方式 5

2.3 JAVASCRIPT 5

2.4 响应式网页 5

2.4.1 响应式网页的理念 5

2.4.2 响应式网页的历史 6

2.4.3 响应式网站与传统网站对比 6

2.4.4 响应式网站技术 6

2.4.5 响应式网站的高性价比 6

2.4.6 响应式网站的发展趋势 7

2.4.7 响应式网站设计思路 7

2.5 理想网页的编制者---DREAMWEAVER 9

2.5.1 Dreamweaver简介 9

2.5.2 Dreamweaver的功能介绍 10

2.5.3 Dreamweaver的安装 10

2.5.4 Dreamweaver基础界面简介 13

2.6 本章小结 16

3 网站需求分析与网站页面设计 17

3.1 网站系统性分析 17

3.2 网站功能划分 17

3.3 网站的页面整体设计 17

3.4 首页布局 18

3.5 旅游资讯页面布局 18

3.6 票务订购页局 19

3.7 风情介绍页面布局 20

3.8 反馈咨询页面布局 20

3.9 初期JS调用组件设计 21

4 设计实现过程 22

4.1 首页 22

4.1.1 首页设计 22

4.1.2 首页顶部设计 22

4.1.3 主要广告或封面图片设计 23

4.1.4 首页主体部分 24

4.1.5 页脚 27

4.2 旅游资讯页面 28

4.2.1 旅游资讯页面设计 28

4.2.2 旅游资讯页面上半部分设计 28

4.2.3 旅游资讯页面主体部分设计 30

4.2.4 风景景点部分设计 34

4.2.5 页面右侧热门旅游设计 36

4.3 票务订购页面 38

4.3.1 票务订购页面设计 38

4.3.2 票务订购页面上半部分设计 39

4.3.3 机票订购部分设计 41

4.3.4 酒店预订部分设计 46