基于HTML5+CSS3+JavaScript的旅游攻略網(wǎng)站設(shè)計(jì)

季帥 劉芳

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

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

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

一、需求分析

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

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

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

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

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

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

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

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

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

（一）頁(yè)面整體布局

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

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

（二）頁(yè)頭和頁(yè)腳

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

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

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

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

設(shè)計(jì)網(wǎng)頁(yè)時(shí)，常常需要為網(wǎng)站設(shè)置一個(gè)全局樣式，如背景、邊界、字體、字號(hào)和行高等屬性參數(shù)，這樣，既可以保證不同頁(yè)面有相對(duì)一致的風(fēng)格，也可以保證網(wǎng)頁(yè)在不同瀏覽器中穩(wěn)定的顯示效果[3]。下面為本網(wǎng)站有關(guān)網(wǎng)頁(yè)對(duì)齊、垂直方向滾動(dò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)

（一）首頁(yè)

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

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

（二）注冊(cè)與登錄

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

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

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

（三）旅游攻略

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

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

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

var t2 = 5; //圖片輪播的間隔時(shí)間

var num = 3; //輪播圖個(gè)數(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++;

}

（四）特色活動(dòng)

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

（五）個(gè)人中心

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

五、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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