旅游網站的實現

余萍

[摘 要] 隨著社會的發展，旅游業的發展越來越好。現在人們都會利用節假日、雙休日旅游來釋放自己的壓力，由于目標不確定都會選擇一些旅游網站來制定行程。但是，這些網站頁面太過繁雜，功能也太多不太適合那些想旅游又沒有計劃的人，所以我做了一個比較簡潔的旅游網站，其中有景點介紹、適合當季游玩的地點推薦，也增加了一些團購：可以團購酒店、景點門票以及當地美食。系統主要實現用戶注冊、登錄，購物車、景點酒店搜索等主要功能。在開發過程中，使用JQ語言編寫，數據存儲采用Cookie，整個系統外觀比較美觀大方。

[關 鍵 詞] JQ語言；旅游網站；AJAX

[中圖分類號] TP393 [文獻標志碼] A [文章編號] 2096-0603（2018）07-0228-02

一、引言

（一）研究背景

隨著網絡的飛速發展，旅游行業也越來越熱門，現在市面上有很多的旅游網站。但是這些網站頁面不太適合那些想旅游但是沒有目標的人，這些網站主要是機票酒店訂購以及跟團游比較商業化，并不怎么會有景點介紹，以及當地特色風俗，這些都需要自己上網去查。所以大多數人只能選擇跟團游，但是這樣太過拘束，不適合一些喜歡自由的小情侶、閨蜜、朋友等，所以本人設計了一個比較簡潔的旅游網站，有景點介紹、團購以及一些適合各季節和各類人旅游的城市推薦。

（二）研究的應用前景

該系統是一款旅游網站，用戶可以在上面查看當季適合旅游的城市，上面也有其他用戶上傳的推薦旅游線路，用戶確定旅游城市也可以在該網站團購酒店、當地美食以及景點門票省去了排隊的時間，此網站主要方便旅游的人查看當地的特色景點、民俗風情，省去了自己一個個查找。

二、開發環境及技術支持

（一）H5前端開發環境

HTML5是萬維網的核心語言，它是標準通用標記語言下的一個應用超文本標記語言的第五次重大修改。網頁前端主要是根據UI設計師提供的規劃布局好的設計圖，然后用代碼把它給展示出來再根據用戶的體驗進一步的優化。這主要由HTML、CSS、JQ這三種語言完成。

（二）H5前端開發工具

1.Sublime Text

它是一個復雜的文本編輯器，用于代碼、標記和散文。最主要的是他和其他開發工具相比他的體積比較小所以運行速度比較快。

2.Fireworks

Fireworks是Adobe推出的一款網頁作圖軟件，它簡化了圖形設計的工作難度，所以使網頁設計更加快速，使用它都能輕易地完成大量圖片的完美切割。

3.谷歌瀏覽器

（三）H5前端開發技術

1.JavaScript介紹

JS是一種直譯式腳本語言，一般都被用來為網站添加各種動態功能，來達到用戶所想要的瀏覽效果，它是嵌入到html中來實現自己想要的功能的。

2.CSS介紹

CSS又名層疊樣式表，它是一種用來表現HTML、XML等文件樣式的計算機語言，它可以用來修飾網頁布局算是一種輔助修飾頁面的“工具”。

3.jQuery

jQuery是一個JavaScript函數庫也是一個輕量級的“寫得少，做得多”的JavaScript庫。

三、系統功能需求及可行性分析

（一）技術可行性分析

1.模塊分布

網站最重要最基礎的就是模塊的劃分，如果一個頁面布局不好很可能導致整個頁面癱瘓，所以在前期搭建框架的時候一定要做好這樣為后期做功能的時候省去了很多時間。

2.色彩搭配

色彩主要由紅、綠、藍，也就是RGB產生，由十六進制00 00 00表示，采用相鄰的顏色設計網頁可以使網頁看起來舒服，整個頁面更加和諧統一。因為做的是旅游網站，所以我選擇了綠色，這樣會顯得很有生機，更加貼合主題。

文字部分大多數以灰色、黑色為主，搶購頁面主要以紅色為主更加體現了搶購的主題，選擇的圖片色彩也要和整個頁面顏色搭配，這樣才不會使整個網站顯得突兀。在旅游景點介紹時我采用了文字環繞圖片的方式來進行排版，這樣不會顯得有太多空白。

3.CSS盒模型

CSS盒模型應該都具備內容（content）、填充（pad-ding）、邊框（border）、邊界（margin）這些功能，我們可以用日常生活中的盒子來理解這四個屬性：（1）內容（content）：就是盒子里面裝的東西；（2）填充（padding）：就是怕盒子里裝的貴重的東西損壞而添加的泡沫；（3）邊框（border）：就是紙盒子本身的厚度；（4）邊界（margin）：就是盒子與盒子之間的空隙還有就是大盒子與嵌套在它里面的小盒子之間的空隙。

（二）需求分析原則

本旅游網站主要包括：首頁、目的地、酒店、團購、旅游攻略、名勝古跡等子網頁。制作過程過程如下：

1.首頁分析

首先利用fireworks把首頁logo圖片做出來，在對頁面進行合理的分配布局。

2.其余頁面分析

剩余頁面的設計風格基本和主頁一致，導航欄始終貼在登錄、注冊版塊下面，然后就是各大模塊內容的顯示。

四、系統總體設計

設計該系統的主要目的是為了給用戶一個更好的旅游網站，為了給用戶提供一個更加快捷了解旅游線路的平臺，省去用戶查看的時間，也為用戶提供了更多的選擇，讓用戶了解各城市適合游玩的時間以及當地特色。用戶還可以在網站團購當地酒店和美食，省去了不少開銷。

參考文獻：

[1]Nicholas C.Zakas.JavaScript高級程序設計[M].3版. 人民郵電出版社，2012.

[2]Elizabeth Castro.HTML5與CSS3基礎教程[M].8版.人民郵電出版社，2014.

[3]董慶帥.UI設計師的色彩搭配手冊[M].電子工業出版社，2016.

[4]費里曼.HTML5權威指南[M].人民郵電出版社，2014.

[5]張容銘.Javascript設計模式[M].人民郵電出版社，2015.

[6]曾探.JavaScript設計模式與開發實踐[M].人民郵電出版社，2015.

Implementation of Travel Network

YU Ping

Abstract：With the development of society， tourism is becoming more and more popular. Now people will use holidays， weekend travel to release their pressure， because the target is uncertain， will choose some travel sites to develop itinerary， such as Ctrip， the way cattle and so on. However， these web pages are too busy， too many functions are not suitable for those who want to travel and no plan， so I made a simple comparison of tourism website there are attractions， where seasonal seasons recommended to play， but also increased the number of group purchase group purchase： to hotels， attractions tickets and local delicacy. This system mainly realizes the user registration， login， shopping cart， attractions， hotel search and other main functions. In the development process， the use of JQ language， data storage using Cookie. The overall appearance of the system is beautiful and generous.

Keywords：JQ；Tourism website；AJAX