基于HCJB的旅游景點(diǎn)一體化平臺(tái)自適應(yīng)頁面設(shè)計(jì)

梁 弼，肖麗利，劉在歡

(1.四川文理學(xué)院 智能制造學(xué)院，四川 達(dá)州 635000；2.四川文理學(xué)院 科技處，四川 達(dá)州 635000)

0 引 言

隨著智能手機(jī)、平板電腦、無線通信、物聯(lián)網(wǎng)及Internet等技術(shù)的快速發(fā)展，信息化已滲入人類社會(huì)方方面面，旅游業(yè)正朝著信息化、多元化、科學(xué)化、自動(dòng)化方向發(fā)展，尤其是Web技術(shù)及移動(dòng)技術(shù)在旅游業(yè)的應(yīng)用打破了傳統(tǒng)旅游業(yè)的單位性、地域性和國界性，彌補(bǔ)了傳統(tǒng)旅游模式中旅游目的地與游客之間存在的信息不對(duì)稱等缺陷，并成為眾多旅游景點(diǎn)、旅游企業(yè)和旅游管理部門競相采用的方式。據(jù)查閱，有關(guān)旅游景點(diǎn)各種信息平臺(tái)的研發(fā)已成為目前旅游行業(yè)以及軟件行業(yè)的熱門課題[1]。但大部分旅游景點(diǎn)Web平臺(tái)要么適用于PC端，要么適用于移動(dòng)端，很少同時(shí)適應(yīng)兩類不同的硬件設(shè)備及所安裝的軟件系統(tǒng)[2-3]。所以，構(gòu)建一套基于PC端和移動(dòng)端的旅游景點(diǎn)Web平臺(tái)是必要的，其關(guān)鍵任務(wù)在于設(shè)計(jì)出自適應(yīng)的Web前端頁面。

自適應(yīng)Web頁面設(shè)計(jì)是指能使前端網(wǎng)頁自適應(yīng)并正確顯示在不同終端設(shè)備上的一種新網(wǎng)頁設(shè)計(jì)技術(shù)，即讓同一張網(wǎng)頁自動(dòng)適應(yīng)終端不同的屏幕大小，并根據(jù)屏幕長度和寬度自動(dòng)調(diào)整其布局，從而實(shí)現(xiàn)“一次設(shè)計(jì)，普遍適用”的目標(biāo)[4]。通過查閱相關(guān)文獻(xiàn)，發(fā)現(xiàn)目前自適應(yīng)頁面技術(shù)主要有HTML5、CSS3、BootStrap、JavaScript及jQuery等，它們能有效解決網(wǎng)頁跨平臺(tái)跨瀏覽器兼容性、自適應(yīng)性等問題[5-6]。因此，文中通過恰當(dāng)融合目前主流的HTML5+CSS3+jQuery+BootStrap技術(shù)(即HCJB)來設(shè)計(jì)旅游景點(diǎn)一體化Web平臺(tái)的前端頁面，使其既支持不同大小的屏幕尺度又支持主流瀏覽器。并且，為了提高該旅游平臺(tái)網(wǎng)頁的自適應(yīng)度，網(wǎng)頁中元素節(jié)點(diǎn)的寬高均采用百分比(%)，頭部采用固定(fixed)定位，其余元素節(jié)點(diǎn)采用相對(duì)(relative)定位。

1 HCJB相關(guān)技術(shù)簡介

1.1 HTML5

HTML5是目前流行的一種用于創(chuàng)建網(wǎng)頁的超文本標(biāo)記語言，它是開發(fā)Web平臺(tái)的奠基石，具有多種新特征，譬如語義特征、本地存儲(chǔ)特征、設(shè)備兼容特征、連接特征、網(wǎng)頁多媒體特征、三維圖像特征以及即時(shí)更新特征等[7]。并且，HTML5當(dāng)前得到網(wǎng)頁設(shè)計(jì)人員廣泛青睞的主要原因在于它的跨平臺(tái)性非常強(qiáng)，同一個(gè)軟件能兼容當(dāng)前主流的平臺(tái)[8]。譬如開發(fā)一套HTML5的游戲軟件，它可以正確地運(yùn)行在UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至還可以發(fā)放到Google Play上。

1.2 CSS3

CSS是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，不但可以靜態(tài)地修飾網(wǎng)頁而且可以動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化，在網(wǎng)頁制作時(shí)通過使用CSS技術(shù)可以有效地對(duì)頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。目前流行的CSS3是CSS技術(shù)的升級(jí)版本，它正朝著模塊化發(fā)展，這些模塊主要包括盒子模型、語言模塊、列表模塊、多欄布局、背景和邊框、文字特效等。而且，CSS3具有很多新的特征，例如圓角效果、圖形化邊界、塊陰影與文字陰影、漸變效果等[9]。

1.3 jQuery

jQuery是一個(gè)簡潔的JavaScript框架，其設(shè)計(jì)倡導(dǎo)“編寫更少的代碼，實(shí)現(xiàn)更多的功能”。它對(duì)JavaScript常用的功能代碼進(jìn)行封裝，提供了一種更為簡便的JavaScript設(shè)計(jì)模式，并優(yōu)化了HTML文檔操作、動(dòng)畫設(shè)計(jì)以及Ajax異步交互等功能[10]。其核心特性包括：具有獨(dú)特的鏈?zhǔn)秸Z法和短小的多功能接口；具有靈活的CCS選擇器，并可對(duì)CSS選擇器進(jìn)行擴(kuò)充；具有便捷的插件擴(kuò)展機(jī)制等。更為重要的是，jQuery對(duì)主流瀏覽器兼容性好，如IE 8.0+、FF 1.5+、Safari 2.0+、Chrome 9+、Opera 9.0+等。

1.4 Bootstrap

Bootstrap是當(dāng)前流行的一個(gè)前端開源工具包，它基于HTML、CSS、JavaScript等技術(shù)，而且簡潔靈活，這使得Web頁面開發(fā)更加快捷。Bootstrap提供了良好的HTML和CSS規(guī)范，基于Less語言編寫的CSS代碼更易于擴(kuò)展和維護(hù)。它包含了豐富的Web組件，如導(dǎo)航條、下拉菜單、按鈕組及媒體對(duì)象等，通過靈活使用這些組件可以快速搭建一個(gè)漂亮的Web頁面。而且自帶了13個(gè)jQuery插件，這些插件為Bootstrap中的組件賦予了新的活力，主要包括模式對(duì)話框、標(biāo)簽頁、滾動(dòng)條和彈出框等[11]。

2 旅游景點(diǎn)自適應(yīng)頁面結(jié)構(gòu)設(shè)計(jì)

2.1 自適應(yīng)頁面設(shè)計(jì)的核心

旅游景點(diǎn)一體化Web平臺(tái)自適應(yīng)網(wǎng)頁設(shè)計(jì)的核心是CSS3引入的Media Query模塊，其含義是自動(dòng)探測(cè)終端設(shè)備的屏幕寬度，并根據(jù)屏幕寬度來加載對(duì)應(yīng)的CSS文件。它類似于高級(jí)語言中的條件選擇if語句，其作用是告訴瀏覽器根據(jù)不同的視口寬度來渲染網(wǎng)頁[12]。譬如，若屏幕寬度小于400像素，則加載smallScreen.css文件。

media="screen and (max-device-width: 400px)"

href="smallScreen.css"/>

若屏幕寬度在400像素到600像素之間，就加載mediumScreen.css文件。

media="screen and (min-width: 400px) and (max-device-width: 600px)"

href="mediumScreen.css"/>

通過上述設(shè)計(jì)便快捷地實(shí)現(xiàn)了該旅游景點(diǎn)一體化Web平臺(tái)網(wǎng)頁對(duì)終端不同屏幕寬度的自適應(yīng)功能。

2.2 自適應(yīng)網(wǎng)頁寬度設(shè)計(jì)

為了實(shí)現(xiàn)旅游景點(diǎn)一體化Web平臺(tái)網(wǎng)頁的自適應(yīng)能力，首先需要將網(wǎng)頁寬度設(shè)置為自動(dòng)調(diào)整，即在旅游景點(diǎn)網(wǎng)頁源碼的頭部中加入viewport元標(biāo)簽，其代碼為[13]。

其中，viewport是網(wǎng)頁默認(rèn)的寬、高度。該代碼表達(dá)的含義是網(wǎng)頁寬度默認(rèn)等于設(shè)備屏幕寬度，原始縮放比例設(shè)置為1.0，即網(wǎng)頁初始大小占屏幕的100%。由于網(wǎng)頁會(huì)根據(jù)當(dāng)前終端設(shè)備屏幕寬度調(diào)整布局，所以旅游景點(diǎn)一體化Web平臺(tái)的網(wǎng)頁不能使用絕對(duì)寬度來布局，也不能使用具有絕對(duì)寬度的元素。具體來講，CSS代碼不能指定像素寬度(如width：**px;)，只能指定百分比寬度(如width：**%;)，或設(shè)置為自動(dòng)(即width：auto;)，并將所用字體設(shè)置為相對(duì)大小(即font-size:**em;)。

2.3 自適應(yīng)頁面布局設(shè)計(jì)

旅游景點(diǎn)一體化Web平臺(tái)自適應(yīng)頁面盡量采用彈性布局，它的主要思想是給予容器控制內(nèi)部元素高度和寬度的能力。彈性布局的最大優(yōu)點(diǎn)是若寬度太小容納不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，而不會(huì)在水平方向溢出，避免了水平滾動(dòng)條出現(xiàn)，進(jìn)而增強(qiáng)用戶體驗(yàn)性[14]。該平臺(tái)頁面使用flex布局的容器(flex container)，它內(nèi)部的元素自動(dòng)成為flex項(xiàng)目(flex item)。而且任何一個(gè)容器都可以指定為flex布局，例如.box{display:flex;}；同樣，行內(nèi)元素也可以使用flex布局，例如.box{display:inline-flex;}；但Webkit內(nèi)核的瀏覽器則必須加上-webkit前綴，其關(guān)鍵代碼如下：

.box{display:-webkit-flex;display:flex:}

.box{flex-wrap:wrap;}

3 旅游景點(diǎn)自適應(yīng)頁面元素設(shè)計(jì)

3.1 導(dǎo)航條的自適應(yīng)設(shè)計(jì)

導(dǎo)航條是旅游景點(diǎn)一體化Web平臺(tái)網(wǎng)頁設(shè)計(jì)中不可缺少的部分，為了實(shí)現(xiàn)其自適應(yīng)能力，文中采用Bootstrap集成好的導(dǎo)航條樣式，它既能在PC端顯示出完整的導(dǎo)航，也能在較小的移動(dòng)端把導(dǎo)航自動(dòng)收縮起來。當(dāng)用戶點(diǎn)擊時(shí)就會(huì)自動(dòng)展開，這樣便能較好地兼容屏幕大小不同的終端設(shè)備。具體來講，當(dāng)瀏覽器視口的寬度小于@grid-float-breakpoint值時(shí)，導(dǎo)航條內(nèi)部的元素變?yōu)檎郫B排列(即為移動(dòng)設(shè)備展現(xiàn)模式)；當(dāng)瀏覽器視口的寬度大于@grid-float- breakpoint值時(shí)，導(dǎo)航條內(nèi)部的元素變?yōu)樗脚帕?即為非移動(dòng)設(shè)備展現(xiàn)模式)。其核心源代碼如下：

3.2 塊狀內(nèi)容的自適應(yīng)設(shè)計(jì)

該旅游景點(diǎn)一體化Web平臺(tái)自適應(yīng)網(wǎng)頁中部分內(nèi)容采用float流動(dòng)布局，部分內(nèi)容則采用Bootstrap的柵格布局。其中，在旅游資訊頁面采用左右兩部分的設(shè)計(jì)，對(duì)于不是很重要的模塊內(nèi)容讓其在屏幕較大的PC端顯示，而在移動(dòng)端則將div中class設(shè)置為hidden-xs，其含義是讓元素節(jié)點(diǎn)在屏幕寬度很小時(shí)就自動(dòng)隱藏。具體可以參考表1中的參數(shù)設(shè)置[6,15]。

表1 不同大小屏幕的參數(shù)設(shè)置

3.3 內(nèi)容字體的自適應(yīng)設(shè)計(jì)

文字是網(wǎng)頁中的重要元素，其字體效果直接影響著用戶閱讀體驗(yàn)。為了避免旅游景點(diǎn)一體化Web平臺(tái)網(wǎng)頁因設(shè)備屏幕大小不同導(dǎo)致內(nèi)容字體太突兀、界面不美觀，其頁面文字采用CSS3引入的Media Query模塊，對(duì)于不同尺寸的平板設(shè)備媒體查詢關(guān)鍵代碼如下：

媒體查詢-小屏幕(平板，大于等于768 px)

@media (min-width:768px){

.tab-h2{font-size:26px;}

.tab-p{font-size:16px;}

.text h3{font-size:22px;}

.text p{font-size:15px;}

.tab2 .tab2-text{float:left;}

.tab2 .tab2-img{float:right;}}

媒體查詢-小屏幕(平板，大于等于992 px)

@media (min-width:992px){

.tab-h2{font-size:28px;}

.tab-p{font-size:17px;}

.text h3{font-size:24px;}

.text p{font-size:16px;}}

媒體查詢-小屏幕(平板，大于等于1 200 px)

@media (min-width:1200px){

.tab-h2{font-size:30px;}

.tab-p{font-size:18px;}

.text h3{font-size:26px;}

.text p{font-size:18px;}}

3.4 圖片的自適應(yīng)設(shè)計(jì)

除了導(dǎo)航條、文字等網(wǎng)頁元素的自適應(yīng)設(shè)計(jì)外，對(duì)于旅游景點(diǎn)一體化Web平臺(tái)來講旅游景點(diǎn)圖片展示尤為重要。恰當(dāng)靈活的景點(diǎn)圖片展示能有效增強(qiáng)用戶視覺感受，更能吸引用戶親自前往觀賞，因此對(duì)網(wǎng)頁中這些景點(diǎn)圖片的自適應(yīng)設(shè)計(jì)是非常必要的，即針對(duì)不同設(shè)備窗口大小來實(shí)現(xiàn)圖片的自動(dòng)縮放功能，其具體設(shè)計(jì)過程如下：

首先，設(shè)定景點(diǎn)圖片百分比寬高度。

img{width:100%;height:100%;}

其次，通過jQuery獲取屏幕大小，并動(dòng)態(tài)設(shè)置景點(diǎn)圖片的寬高[16]。

$(“img”).css(“height”,$(window).height()*50%);

$(“img”).css(“width”,$(window).width()*50%);

接著，根據(jù)CSS3媒體查詢，為不同寬高的屏幕設(shè)置景點(diǎn)圖片的寬高。

媒體查詢-小屏幕(平板，大于等于768 px)

@media(min-width:768px){

img{width:400px;height:400px} }

媒體查詢-小屏幕(平板，大于等于992 px)

@media(min-width：992px){

img{width:200px;height:200px} }

媒體查詢-小屏幕(平板，大于等于1 200 px)

@media(min-width:1200px){

img{width:100px;height:100px} }

最后，使用Bootstrap的方法為景點(diǎn)圖片添加class為img-responsive。

對(duì)于旅游景點(diǎn)一體化Web平臺(tái)網(wǎng)頁中其他元素的自適應(yīng)設(shè)計(jì)(如音頻、視頻等)可以參考景點(diǎn)圖片自適應(yīng)來類似實(shí)現(xiàn)，而且HTML5提供了更多高質(zhì)量的視頻和音頻流服務(wù)功能，在此就不再論述。

4 旅游景點(diǎn)自適應(yīng)頁面運(yùn)行效果

通過上述內(nèi)容完成了旅游景點(diǎn)自適應(yīng)頁面結(jié)構(gòu)和元素設(shè)計(jì)后，便可得到旅游景點(diǎn)一體化Web平臺(tái)所需的前端頁面，再使用Web后臺(tái)技術(shù)(如SSM框架技術(shù))可實(shí)現(xiàn)該Web平臺(tái)的所有功能[17]。經(jīng)過在線測(cè)試和實(shí)際運(yùn)行證明，所設(shè)計(jì)的前端頁面能自適應(yīng)目前主流的移動(dòng)設(shè)備和PC上的瀏覽器，而且用戶滿意度高，有效提高了該旅游Web平臺(tái)的訪問率，并達(dá)到了預(yù)期目標(biāo)。其中，首頁運(yùn)行效果如圖1和圖2所示。

圖1 PC端運(yùn)行效果

圖2 移動(dòng)端運(yùn)行效果

5 結(jié)束語

自適應(yīng)網(wǎng)頁可以自動(dòng)識(shí)別終端設(shè)備的屏幕寬度并自動(dòng)做出相應(yīng)調(diào)整，使其頁面效果在各類設(shè)備上保持一致，這有效解決了傳統(tǒng)Web系統(tǒng)需要為不同的前端設(shè)備提供不同頁面的問題。文中恰當(dāng)使用組合的HCJB技術(shù)來設(shè)計(jì)和實(shí)現(xiàn)既支持PC端也支持移動(dòng)端的旅游景點(diǎn)一體化Web平臺(tái)頁面，使其在目前主流的各種前端設(shè)備上呈現(xiàn)出用戶體驗(yàn)一致的瀏覽效果。實(shí)踐證明，使用該方法開發(fā)旅游景點(diǎn)一體化Web平臺(tái)自適應(yīng)網(wǎng)頁不僅能解決網(wǎng)頁兼容性、自適應(yīng)等問題，而且能減少開發(fā)工作量、縮短開發(fā)時(shí)間和降低開發(fā)成本，有效節(jié)省了開發(fā)Web系統(tǒng)的人力、物力和財(cái)力，并提高了系統(tǒng)的用戶滿意度。但所設(shè)計(jì)的旅游景點(diǎn)一體化Web平臺(tái)頁面現(xiàn)階段只適合目前主流的前端設(shè)備和瀏覽器，對(duì)于極個(gè)別特殊設(shè)備和瀏覽器其自適應(yīng)能力欠佳，后續(xù)還有待進(jìn)一步研究和完善。