季帥 劉芳

摘 要：隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，各行各業(yè)的信息化、智能化水平有了大幅提升。為人們提供緩解工作壓力、陶冶精神情操服務(wù)的旅游業(yè)也進(jìn)入了“互聯(lián)網(wǎng)+”時代。本文基于HTML5、CSS3、JavaScript技術(shù)構(gòu)建旅游攻略平臺，實(shí)現(xiàn)PC端和移動端的無縫銜接，從而方便人們快捷地查找旅游資源并進(jìn)行旅行規(guī)劃。

關(guān)鍵詞：HTML5+CSS3+JavaScript;旅游攻略;網(wǎng)站設(shè)計(jì)

隨著我國社會經(jīng)濟(jì)的不斷發(fā)展，一方面，人們的生活已經(jīng)不再是簡單的解決溫飽問題，越來越多的人在解決生活基本需求的同時，也在追求精神層面的滿足;另一方面，我國的交通也變得更加便捷，加速了旅游業(yè)的發(fā)展，使人們出門旅行變得更方便。但是在日常緊張的工作生活中，人們又往往沒有更多的空閑時間去了解種類和數(shù)量繁多的旅游景點(diǎn)信息。為此，有必要設(shè)計(jì)開發(fā)一款幫助人們方便快捷地查找旅游資源并進(jìn)行旅行規(guī)劃的軟件平臺，這不但能滿足人們?nèi)找娑嘣某鲂行枨?，而且能提升旅游服?wù)的質(zhì)量。

一、需求分析

現(xiàn)階段國內(nèi)具有的類似攜程網(wǎng)之類的旅游網(wǎng)站，雖然能滿足大多數(shù)人的出游需求，但這一類的網(wǎng)站主打旅行購票、以及線路方案的推薦，涉及旅游攻略方面的內(nèi)容并不多，因此，需要實(shí)現(xiàn)一款針對旅游攻略的、能兼顧PC端和移動端的網(wǎng)站，該網(wǎng)站還要能記錄用戶注冊信息及其攻略方案。另外，由于旅游受眾面很廣，既有年輕人，也有中老年人，系統(tǒng)操作水平參差不齊，所以，要求系統(tǒng)功能結(jié)構(gòu)布局合理，界面操作簡潔、易用，用戶通過系統(tǒng)導(dǎo)航即能完成操作[1]。

二、功能設(shè)計(jì)

通過需求分析，可將系統(tǒng)設(shè)計(jì)為首頁、景區(qū)介紹、旅游攻略、特色活動、個人中心五個部分，其功能模塊如圖1所示。

（1）首頁：在用戶進(jìn)入主頁面時會看到主導(dǎo)航欄，其中顯示首頁、景區(qū)介紹、旅游攻略、特色活動等鏈接;而在導(dǎo)航欄下為部分旅游景區(qū)、旅游攻略、旅游活動信息的展示，以及熱門游記，便于用戶對旅游景點(diǎn)有個初步的了解。

（2）景區(qū)：該模塊展示按地區(qū)分類的景區(qū)景點(diǎn)介紹，如景點(diǎn)名稱、類別、圖片、門票價格等具體信息，以及推薦的游玩季節(jié)和天數(shù)，同時還可查看景區(qū)動態(tài)和通知公告。

（3）攻略：涵蓋了海島、古鎮(zhèn)、湖泊、山川、草原等特色景點(diǎn)的介紹，以及與之相關(guān)的旅游項(xiàng)目資訊、旅游路線規(guī)劃、酒店賓館和美食等方面的攻略。

（4）活動：用戶通過該模塊可以了解正在進(jìn)行或往期舉辦的攝影愛好、結(jié)伴同游、自由出行、主題旅游等特色活動，以便于選擇是否要參與。

（5）個人中心：用戶登錄后可以進(jìn)入自己的用戶中心，在這里用戶能夠查看和修改自己的信息，同時還可查看自己選擇或收藏的旅游景點(diǎn)、攻略及其活動。

三、頁面設(shè)計(jì)

（一）頁面整體布局

由功能設(shè)計(jì)可知，本旅游平臺一共包括首頁、景區(qū)介紹、旅游攻略、特色活動、個人中心五大功能模塊，除首頁外的各功能模塊都由若干頁面組成，并可通過首頁鏈接到各模塊主頁面進(jìn)行瀏覽，在子頁面也可以通過鏈接實(shí)現(xiàn)頁面之間的相互跳轉(zhuǎn)[2]。

而在頁面整體布局上，首頁和各模塊主頁面都使用HTML5的布局元素header、article、section、nav、aside、footer元素進(jìn)行頁面結(jié)構(gòu)的合理劃分，并通過CSS3對頁面各部分樣式進(jìn)行設(shè)置，真正實(shí)現(xiàn)頁面結(jié)構(gòu)與表現(xiàn)分離，便于管理與維護(hù)。

（二）頁頭和頁腳

頁頭部分由header元素聲明，由背景圖片和主、次2個導(dǎo)航組成。這里header包括兩個nav元素，第一個nav元素作為主導(dǎo)航，第二個nav元素作為次導(dǎo)航，其中主導(dǎo)航菜單包括：首頁、景區(qū)介紹、旅游攻略、特色活動。

頁腳部分用footer元素聲明，其中包含了4個div元素，在每個div容器中放置了一個無序列表，列表項(xiàng)中內(nèi)容主要是各類旅游網(wǎng)站的鏈接。

另外，整個網(wǎng)站的頁頭導(dǎo)航和頁腳版權(quán)信息與首頁的設(shè)置大體相同，以保持網(wǎng)站設(shè)計(jì)風(fēng)格統(tǒng)一。其樣式的設(shè)置也是借助CSS3進(jìn)行布局。

（三）網(wǎng)站全局樣式

設(shè)計(jì)網(wǎng)頁時，常常需要為網(wǎng)站設(shè)置一個全局樣式，如背景、邊界、字體、字號和行高等屬性參數(shù)，這樣，既可以保證不同頁面有相對一致的風(fēng)格，也可以保證網(wǎng)頁在不同瀏覽器中穩(wěn)定的顯示效果[3]。下面為本網(wǎng)站有關(guān)網(wǎng)頁對齊、垂直方向滾動、背景圖像和HTML5結(jié)構(gòu)元素的全局樣式代碼。

* { margin： 0; padding： 0; }

html { overflow-y： scroll; }

body { text-align： center; }

header article section footer nav aside{

display：block;

}

四、主要模塊的實(shí)現(xiàn)

（一）首頁

頁面包含旅游景區(qū)的展示、旅游攻略信息的展示、旅游活動的展示（以及熱門游記）等功能。著重于旅游信息的及時獲取及攻略信息的展示。其中有許多交互效果：如鼠標(biāo)滑過一級導(dǎo)航的高亮及內(nèi)容切換效果。技術(shù)特點(diǎn)：代碼中通過使用不同的div，區(qū)分不同功能區(qū)域塊，并給不同的div區(qū)域塊添加不同的id來區(qū)分不同的功能點(diǎn)擊事件。

另外，在首頁還提供了用戶登錄/注冊的入口鏈接。點(diǎn)擊注冊鏈接后，會進(jìn)入注冊頁面，對用戶信息進(jìn)行注冊;而

（二）注冊與登錄

（1）注冊：注冊表單頁面要求用戶填寫用戶名、密碼、確認(rèn)密碼、手機(jī)號和郵箱進(jìn)行注冊。提交注冊信息時，如果有必填項(xiàng)未填寫則提示用戶填寫相應(yīng)項(xiàng)，當(dāng)用戶名已存在時提示用戶該用戶名已存在。

（2）登錄：用戶可通過注冊的用戶名和密碼登錄系統(tǒng)。登錄成功后跳轉(zhuǎn)至首頁，并顯示當(dāng)前登錄的用戶名。

注冊和登錄頁面均使用HTML5的表單元素來搭建，并通過定位實(shí)現(xiàn)布局結(jié)構(gòu)，以提高頁面交互效率。

（三）旅游攻略

在首頁點(diǎn)擊攻略鏈接后，會進(jìn)入到攻略頁面。攻略主頁面包括側(cè)邊二級菜單欄（有熱門推薦、旅行游記、旅游問答等欄目），以及按地區(qū)劃分的旅游攻略列表和按月份劃分的旅游攻略列表。其中側(cè)邊二級菜單欄放置在section元素中，section元素是一個具有引導(dǎo)和導(dǎo)航作用的HTML5結(jié)構(gòu)元素。另外，本頁面除提供各景區(qū)的攻略入口鏈接外，著重通過列表標(biāo)簽和選擇器來實(shí)現(xiàn)交互效果，下面對頁面中輪播圖的實(shí)現(xiàn)作一介紹。

輪播圖是現(xiàn)在常用的一種網(wǎng)站內(nèi)容的展現(xiàn)形式，其提供了多張圖片的輪播效果，以造成一定的視覺吸引性。本模塊通過nav元素中放置了3個div容器，每個div容器中又包含了圖片鏈接、標(biāo)題以及切換圖片按鈕。其中，圖片的切換功能由JavaScript定義的行為實(shí)現(xiàn)，初始時顯示第1幅圖片，圖片的輪播使用定時函數(shù)setTimeout（），并通過遞歸調(diào)用change_img（）方法切換圖片。下面是進(jìn)行圖片切換的JavaScript代碼：

var t1 = 0; //打開頁面時等待圖片載入的時間，將其設(shè)置為0，單位為秒

var t2 = 5; //圖片輪播的間隔時間

var num = 3; //輪播圖個數(shù)

var n = 1;//當(dāng)前焦點(diǎn)

var m =null;

t = setTimeout（'change_img（）'， t1*1000）;

function change_img（）{

setFocus（n）;

t = setTimeout（'change_img（）'， t2*1000）;

}

function setFocus（i）{

if（i>num）{n=1;i=1;}

m？document.getElementById（'focusPic'+m）.style.display='none'：'';

document.getElementById（'focusPic'+i）.style.display='block';

m=i;

n++;

}

（四）特色活動

本模塊通過使用三個div元素，分別對應(yīng)快速搜索、滑動Tab和在線咨詢?nèi)齻€版塊的實(shí)現(xiàn)。其中快速搜索可根據(jù)線路名稱、行程目的地、行程天數(shù)、行程起始日期、終止日期查詢各特色旅游活動信息;滑動Tab包含旅游快訊和優(yōu)惠活動兩個選項(xiàng)頁，方便用戶查看和選擇特色旅游活動;而在線咨詢則通過HTML5表單元素實(shí)現(xiàn)實(shí)時旅游咨詢服務(wù)。

（五）個人中心

用戶登錄成功后點(diǎn)擊首頁中的用戶名鏈接，即可跳轉(zhuǎn)到“個人中心”頁面，該頁面分為頁頭、菜單欄、正文和頁腳4個部分。其中頁頭包含網(wǎng)站的Logo和導(dǎo)航欄，菜單欄包含修改密碼、修改聯(lián)系方式、我的攻略、我的收藏4個菜單項(xiàng)，正文部分為相應(yīng)菜單的用戶內(nèi)容，頁腳為版權(quán)聲明。

五、結(jié)束語

本文基于HTML5、CSS3、JavaScript技術(shù)構(gòu)建旅游攻略平臺，不但為人們提供了方便，而且通過HTML5新增屬性元素實(shí)現(xiàn)跨平臺使用，通過CSS3樣式設(shè)置不僅實(shí)現(xiàn)了結(jié)構(gòu)與表現(xiàn)的分離，而且提高了網(wǎng)頁的性能。而使用JavaScript代碼則不僅使得網(wǎng)頁內(nèi)容的呈現(xiàn)更為生動，而且增強(qiáng)了用戶的交互體驗(yàn)。

參考文獻(xiàn)：

[1]陳舟勱.貴州旅游景點(diǎn)智能推薦系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].貴州大學(xué)，2021.

[2]馮秀玲，張楊娟.基于HTML5+Css3+JavaScript的山西旅游平臺搭建[J].中國管理信息化，2021，24（19）：155-157.

[3]劉德山，章增安，孫美喬.HTML5+CSS3 Web前端開發(fā)技術(shù)[M].北京：人民郵電出版社，2017.11.