基于HTML5的響應(yīng)式展會(huì)信息移動(dòng)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)

范宇超　廖劍強(qiáng)　鄧秀勤　林楚泉

摘 要： 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是針對(duì)不同尺寸移動(dòng)設(shè)備而誕生的技術(shù)，該技術(shù)很好地解決了由于不同尺寸設(shè)備引起的錯(cuò)誤問題。在移動(dòng)設(shè)備成為大眾獲取信息的主要渠道的背景下，結(jié)合展會(huì)信息服務(wù)，應(yīng)用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)展會(huì)信息移動(dòng)平臺(tái)，該平臺(tái)的構(gòu)建為展會(huì)信息的傳播和商家供求信息的發(fā)布提供了一條便利的途徑，對(duì)促進(jìn)中小企業(yè)的發(fā)展具有重大現(xiàn)實(shí)意義。

關(guān)鍵詞： 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)； 移動(dòng)設(shè)備； 展會(huì)信息服務(wù)； 信息平臺(tái)

中圖分類號(hào)：TP315 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2014）03-24-03

0 引言

隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展， 網(wǎng)絡(luò)展會(huì)以其獨(dú)特的優(yōu)勢(shì)表現(xiàn)出越來越強(qiáng)的獨(dú)立性，尤其是對(duì)一些以外貿(mào)客戶為主的展覽來說，網(wǎng)絡(luò)會(huì)展有著無限的潛力[1]。網(wǎng)絡(luò)展會(huì)能為用戶提供更多的信息服務(wù)、匹配服務(wù)以及交易服務(wù)等[2]，并且有影響范圍廣，信息傳播量大的特點(diǎn)，且信息傳遞快捷、成本比較低廉，所以受到越來越多的用戶的親睞[3]。無論是對(duì)于要求低成本、高效率的主辦方，還是對(duì)于需預(yù)期了解目標(biāo)市場(chǎng)以及方便資源整合的參展商，或者是對(duì)于要求方便快捷的采購(gòu)商，網(wǎng)上會(huì)展的出現(xiàn)都很好地解決了傳統(tǒng)實(shí)物會(huì)展因場(chǎng)地、資金等因素出現(xiàn)的問題，從而大大促進(jìn)了會(huì)展行業(yè)的發(fā)展[4]。

雖然網(wǎng)絡(luò)展會(huì)的經(jīng)濟(jì)性給企業(yè)帶來了可觀的經(jīng)濟(jì)利益，對(duì)傳統(tǒng)實(shí)物展會(huì)構(gòu)成了巨大的沖擊，但是由于實(shí)物展會(huì)的獨(dú)特性和網(wǎng)絡(luò)展會(huì)的缺陷，注定了網(wǎng)絡(luò)展會(huì)不可能替代實(shí)物展會(huì)[5]。而在現(xiàn)今信息泛濫的時(shí)代，信息正確的傳播以及高效的獲取才是展會(huì)行業(yè)發(fā)展的重中之重。

人們對(duì)信息的獲取逐漸依賴于日益發(fā)展的網(wǎng)絡(luò)，但對(duì)于不同尺寸的終端，信息的傳播方式有所不同。無論是傳統(tǒng)的大屏幕桌面電腦，還是平板電腦或手機(jī)，可以從中獲取的信息量是相當(dāng)大的，那么人們選擇獲取信息的方式自然就取決于信息獲取的便利程度。這就使得絕大部分人隨身攜帶的手機(jī)自然而然地成為人們獲取信息的首選工具。

有數(shù)據(jù)顯示從2008年到2013年，兩大主流手機(jī)系統(tǒng)Android和ISO全球手機(jī)瀏覽器的使用量分別從1.7%和21.68%上升到30.94%和23.9%（圖1）[6]。這說明使用手機(jī)或平板電腦等移動(dòng)設(shè)備瀏覽器獲取信息已成為主流趨勢(shì)。

圖1 2008年至2013年手機(jī)瀏覽器使用比例

根據(jù)以上的數(shù)據(jù)分析，本文以響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)為基礎(chǔ)，詳細(xì)介紹展會(huì)信息移動(dòng)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD， Responsive Web Design）這個(gè)術(shù)語(yǔ)是由伊?！ゑR科特（Ethan Marcotte）提出的[7]。他在A List Apart發(fā)表了一篇極具創(chuàng)新性的文章，將三種已有的開發(fā)技巧（彈性網(wǎng)格布局、彈性圖片和媒體查詢）整合起來，并命名為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。也稱為流式設(shè)計(jì)、彈性布局、塑料布局、流體設(shè)計(jì)、自適應(yīng)布局、跨設(shè)備設(shè)計(jì)以及彈性設(shè)計(jì)。

這種網(wǎng)頁(yè)設(shè)計(jì)的新方法使用百分比布局創(chuàng)建流動(dòng)的彈性界面，同時(shí)使用媒體查詢來限制元素的變動(dòng)范圍。實(shí)現(xiàn)了針對(duì)任意設(shè)備對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行完美布局的一種實(shí)現(xiàn)機(jī)制[8]。

在移動(dòng)設(shè)備成為大眾獲取信息的主要渠道的背景下，本文主要結(jié)合展會(huì)信息服務(wù)，以響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)為基礎(chǔ)，對(duì)展會(huì)信息移動(dòng)平臺(tái)進(jìn)行設(shè)計(jì)與實(shí)現(xiàn)。

1 網(wǎng)站架構(gòu)與功能

根據(jù)DailyTech的統(tǒng)計(jì)，到2015年，移動(dòng)互聯(lián)網(wǎng)的用戶數(shù)量將會(huì)超過桌面用戶。除了智能手機(jī)之外，使用平板電腦上網(wǎng)的用戶也越來越多[9]。在這種形勢(shì)下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設(shè)備，并確保良好的用戶體驗(yàn)，將會(huì)對(duì)網(wǎng)站的運(yùn)營(yíng)起到很大的推動(dòng)作用。

本文所設(shè)計(jì)的網(wǎng)站通過使用響應(yīng)式的設(shè)計(jì)開發(fā)方式，使網(wǎng)站頁(yè)面隨瀏覽設(shè)備的不同尺寸而自行響應(yīng)，動(dòng)態(tài)地調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將內(nèi)容按照不同的格式呈現(xiàn)給使用不同設(shè)備尺寸的用戶；更好地進(jìn)行代碼重構(gòu)，避免了為各種不同的移動(dòng)終端開發(fā)不同版本頁(yè)面的重復(fù)性工作，節(jié)約了開發(fā)時(shí)間和成本。

圖2 不同尺寸屏幕的兼容方式

響應(yīng)式設(shè)計(jì)其實(shí)就是通過彈性網(wǎng)格布局、彈性圖片和媒體查詢的整合使用，達(dá)到更好地調(diào)整分辨率的問題。（如圖2所示）不同的設(shè)備有著不同的分辨率、清晰度以及屏幕定向方式，怎樣才能做到讓一種設(shè)計(jì)方案兼容所有情況將顯得特別重要。我們的處理方案是讓頁(yè)面盡量彈性化，讓文字、圖片的尺寸可以自動(dòng)調(diào)整，做到無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到平板電腦或手機(jī)上瀏覽，頁(yè)面都會(huì)真正富有彈性。下面是我們?cè)O(shè)計(jì)網(wǎng)站時(shí)使用HTML5和CSS3 Media Queries（層疊樣式表媒介查詢）相關(guān)技術(shù)來實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)的方案。

1.1 CSS3 Media Queries-打造彈性布局結(jié)構(gòu)

實(shí)現(xiàn)自適應(yīng)頁(yè)面設(shè)計(jì)的關(guān)鍵之一是，使用CSS3根據(jù)分辨率寬度的變化來調(diào)整頁(yè)面布局結(jié)構(gòu)。CSS3支持CSS2.1所支持的所有媒體類型，例如screen、print、handheld等，同時(shí)還添加了很多涉及媒體類型的功能屬性，包括max-width（最大寬度）、device-width（設(shè)備寬度）、orientation（屏幕定向，橫屏或豎屏）等?，F(xiàn)在的主流設(shè)備，如iPad或Android相關(guān)設(shè)備，都可以完美地支持這些屬性。

下面的幾個(gè)例子，將展示如何使用CSS3 Media Queries實(shí)現(xiàn)不同的樣式表。

/*瀏覽器或屏幕寬度超過500px時(shí)使用*/

@media screen and （min-width： 500px） {

.myClass {

width： 30%；

float： right；

}

}

/*瀏覽器或屏幕寬度小于500px時(shí)使用 */

@media screen and （max-width： 500px）

{ .otherClass

{ clear： both；

font-size： 1em；

}

}

將上述屬性組合使用，可以用來鎖定某個(gè)屏幕尺寸范圍：

/*瀏覽器窗口或屏幕寬度在800px至1200px之間時(shí)使用 */

@media screen and （min-width： 800px） and （max-width：

1200px） {

.someClass

{ background： #cc0000；

width： 30%；

float： right；

}

}

1.2 JavaScript-提高兼容性

JavaScript也是重要的工具之一，特別是當(dāng)某些舊設(shè)備無法完美支持CSS3的Media Queries時(shí)，JavaScript可以完美實(shí)現(xiàn)兼容。專門的JS庫(kù)（css3-mediaqueries.js）可幫助舊瀏覽器（IE 5+，F(xiàn)irefox 1+，Safari 2等）支持CSS3的Media Queries。對(duì)于那些尚不支持Media Queries的瀏覽器，本文主要是通過在頁(yè)面中調(diào)用css3-mediaqueries.js來解決兼容性問題。

<！--[if lt IE 9]>

<！[endif]-->

下面的代碼演示了怎樣使用簡(jiǎn)單的幾行jQuery代碼來檢測(cè)瀏覽器寬度，并為不同的情況調(diào)用不同的樣式表：

可以看出，借助JavaScript，我們可以實(shí)現(xiàn)更多的變化，從而使我們?cè)O(shè)計(jì)的網(wǎng)頁(yè)更加動(dòng)態(tài)化地實(shí)現(xiàn)兼容性，提高頁(yè)面彈性。

1.3 HTML5-進(jìn)一步渲染頁(yè)面

在HTML5發(fā)布之前，讓表單風(fēng)格與瀏覽器保持一致是很困難的事情，而且更重要的是需要Javascript來驗(yàn)證表單輸入，復(fù)雜的正則表達(dá)式成為了開發(fā)者的一大難題，好消息是HTML5基本上解決了這些常見的問題，讓開發(fā)人員開發(fā)效率迅速提高，縮短開發(fā)周期。HTML5代碼主要用于后臺(tái)登錄、展會(huì)資訊管理，當(dāng)我們要驗(yàn)證帳號(hào)密碼、添加展會(huì)信息到數(shù)據(jù)庫(kù)，或者更改展會(huì)信息時(shí)，表單的使用是不可缺少的。

后臺(tái)登錄界面的顯示，主要利用了placeholder和required兩個(gè)屬性。這兩個(gè)屬性使用起來非常方便，可以實(shí)現(xiàn)豐富的功能。登錄界面通常需要在表單域顯示占位符文字，這時(shí)只需要在input元素加入placeholder屬性，其屬性值就會(huì)默認(rèn)顯示為占位文字，當(dāng)輸入框獲得焦點(diǎn)時(shí)文字就會(huì)自動(dòng)消失，當(dāng)輸入框失去焦點(diǎn)，但又沒有輸入任何值時(shí)，占位符會(huì)再次顯示。Required屬性，顧名思義，表示這個(gè)屬性是必須要賦值的，在input元素里面追加此屬性，則表明該表單域?yàn)楸仨毺顚?。代碼如下：

"請(qǐng)輸入用戶名" required>

僅僅這一行代碼，就可以代替復(fù)雜的JS代碼，簡(jiǎn)潔方便。用chrome瀏覽器測(cè)試如圖3所示。

2 結(jié)束語(yǔ)

本文基于對(duì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的應(yīng)用，通過對(duì)CSS3樣式的設(shè)計(jì)，構(gòu)造了基于不同尺寸屏幕的樣式表，并利用Javascrip技術(shù)解決舊設(shè)備的兼容性問題，HTML5編寫表單也簡(jiǎn)單高效地解決了后臺(tái)登錄以及展會(huì)資訊管理中存在的問題。

圖3 登錄界面測(cè)試

本文通過運(yùn)用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)思想實(shí)現(xiàn)了網(wǎng)頁(yè)模塊在不同尺寸設(shè)備下良好的顯示效果，進(jìn)一步增強(qiáng)了網(wǎng)站的兼容性和互動(dòng)性，很好地體現(xiàn)出響應(yīng)式網(wǎng)站相對(duì)于傳統(tǒng)網(wǎng)頁(yè)的優(yōu)越性。但就現(xiàn)實(shí)來說，傳統(tǒng)網(wǎng)頁(yè)仍占較大比例，響應(yīng)式技術(shù)還沒有被廣泛應(yīng)用，相信在今后移動(dòng)互聯(lián)網(wǎng)浪潮的推動(dòng)下，響應(yīng)式技術(shù)也會(huì)得到迅速發(fā)展與普及。

參考文獻(xiàn)：

[1] 中國(guó)國(guó)際貿(mào)易促進(jìn)委員會(huì)展會(huì)新聞http：//www.ccpit.org/

Contents/Channel_1071/2007/0801/55560/content_55560.htm

[2] 蔡瑞初，趙駿凱，鄧強(qiáng)等.網(wǎng)絡(luò)會(huì)展電子商務(wù)功能分析——以“網(wǎng)上廣

交會(huì)”網(wǎng)站分析為例[J].電腦知識(shí)與技術(shù)，2011.7（24）.

[3] 錢小輪.從“2010上海網(wǎng)上世博會(huì)”看網(wǎng)絡(luò)技術(shù)對(duì)當(dāng)代會(huì)展業(yè)發(fā)展的

積極作用與影響[C].2011中國(guó)會(huì)展經(jīng)濟(jì)研究會(huì)學(xué)術(shù)年會(huì)論文集，2011：160-164

[4] 黃峰，付業(yè)勤.我國(guó)網(wǎng)絡(luò)會(huì)展發(fā)展研究[J].黑河學(xué)刊，2009.5：014

[5] 張鈺.基于Web會(huì)展信息服務(wù)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].北京工業(yè)大學(xué)，

2010.

[6] 數(shù)據(jù)與圖均來自http：//gs.statcounter.com

[7] Marcotte E. Responsive web design[J]. A List Apart，2010：306

[8] Frain B. Responsive web design with HTML5 and CSS3[M].Packt

Publishing Ltd，2012.

[9] http：//www.dailytech.com/