基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁生成系統(tǒng)研究與實(shí)現(xiàn)

臧進(jìn)進(jìn)+鄂海紅

摘要：隨著移動互聯(lián)網(wǎng)的興起，越來越多的人開始使用移動設(shè)備訪問各類網(wǎng)站。制作可以適配不同終端的網(wǎng)頁成為了個人和企業(yè)網(wǎng)站設(shè)計(jì)和開發(fā)的關(guān)鍵。本文在論述了響應(yīng)式Web設(shè)計(jì)相關(guān)技術(shù)的基礎(chǔ)上，設(shè)計(jì)并實(shí)現(xiàn)了一套新型網(wǎng)頁生成系統(tǒng)。該系統(tǒng)通過響應(yīng)式Web設(shè)計(jì)的開發(fā)方式，為用戶屏蔽網(wǎng)頁開發(fā)的技術(shù)細(xì)節(jié)，讓用戶能夠以“所見即所得”的方式創(chuàng)建網(wǎng)頁。使用該系統(tǒng)生成的網(wǎng)頁能隨著接入設(shè)備的不同而自行響應(yīng)，動態(tài)地調(diào)整布局結(jié)構(gòu)、交互樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給不同的設(shè)備用戶

關(guān)鍵詞：移動互聯(lián)網(wǎng)；響應(yīng)式Web設(shè)計(jì)；可視化編輯；網(wǎng)頁生成器

中圖分類號：TP391

文獻(xiàn)標(biāo)識碼：A

DOI：10.3969/j.issn.1003-6970.2015.06.008

本文著錄格式：臧進(jìn)進(jìn)，鄂海紅，基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁生成系統(tǒng)研究與實(shí)現(xiàn)[J].軟件，2015，36（6）：37-41

ResearchandImplementationoftheWebPageGenerationSystemBasedonResponsiveWebDesignZANGJin-jin，EHai-hong[Abstract]：WiththeriseofthemobileIntemet，moreandmorepeoplestartusingmobiledevicestoaccessvarioussites.Webpagesthatcanfitdifferentterminalsbecomethekeyforindividualsandenterprisestodesignanddeveloptheweb.Inthispaper，theauthorfirstdiscussestheresponsiveWebdesign-relatedtechnologythendesignsandimplementsanewwebpagegenerationsystem.Thesystemcanshieldthetechnicaldetailsofthedevelopmentofthewebpage，sothatuserscancreatethewebpageinthewayof”whatyouseeiswhatyouget”.ThroughtheuseofresponseWebdesign，thepagesgeneratedthroughthissystemcanautomaticresponse，dynamicadjustmentofthelayoutofthestructure，interactionstyledependingontheaccessdevice.Finally，thesamecontentpresentedindifferentformatsfordifferentdevicesusers.

[Keywords]：MobileInternet；Responsivewebdesign；Visualeditor；Webpagegenerators

0引言

隨著移動設(shè)備的普及和Web技術(shù)的發(fā)展，人們進(jìn)入了移動互聯(lián)網(wǎng)時代。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的統(tǒng)計(jì)數(shù)據(jù)，截至2014年12月，中國手機(jī)網(wǎng)民規(guī)模達(dá)5.57億，較2013年底增加5672萬人。網(wǎng)民中使用手機(jī)上網(wǎng)人群占比由2013年的81.0%提升至85.8%[1]，可見使用手機(jī)等移動設(shè)備瀏覽網(wǎng)頁變得越來越普遍。

當(dāng)前市面上的移動設(shè)備種類較多（如智能手機(jī)、平板電腦等），而且屏幕的分辨率標(biāo)準(zhǔn)也各不相同，未來還會有更多新的移動設(shè)備面世。對于一些實(shí)力比較強(qiáng)的公司，可以針對電腦和移動智能設(shè)備開發(fā)不同版本的網(wǎng)站，但是這種針對不同用戶分別定制的做法耗時費(fèi)力。并且對于多數(shù)網(wǎng)站來說，為每種新設(shè)備及不同的分辨率創(chuàng)建其獨(dú)立的版本是不切實(shí)際的。在這種形勢下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設(shè)備，并確保優(yōu)良的用戶體驗(yàn)，這將是越來越重要的問題[2]。

現(xiàn)有的網(wǎng)頁生成T具大多還是采用傳統(tǒng)的網(wǎng)頁開發(fā)技術(shù)，生成的頁面只適用于電腦端，具體表現(xiàn)在當(dāng)用戶使用不同設(shè)備訪問同一網(wǎng)站時，移動設(shè)備上顯示文字等網(wǎng)頁元素是細(xì)小而緊密，用戶不得不在移動設(shè)備屏幕上不停地滑動，通過放大和縮小頁面來查看網(wǎng)頁內(nèi)容，橫屏豎屏來回切換，頁面中提供交互的視覺元素則需要多次放大才能適合手指操作[3]。并且這些網(wǎng)頁生成T具或是針對專業(yè)網(wǎng)頁設(shè)計(jì)人員的開發(fā)T具，或是外文開發(fā)的，而且有些還是收費(fèi)軟件，使用它們需要支付資金。對于非專業(yè)網(wǎng)頁開發(fā)人員來講，要制作網(wǎng)頁，首先就要花費(fèi)大量的時間去學(xué)習(xí)和實(shí)踐開發(fā)技術(shù)；其次還需要花費(fèi)大量的精力去熟悉開發(fā)環(huán)境[4]。

對于那些想擁有可適配不同終端設(shè)備的網(wǎng)頁，但是又不懂網(wǎng)頁制作技術(shù)的用戶來說，這些T具在功能和技術(shù)的實(shí)現(xiàn)上都還有一定的局限性。本系統(tǒng)運(yùn)用響應(yīng)式設(shè)計(jì)技術(shù)，屏蔽網(wǎng)頁開發(fā)技術(shù)細(xì)節(jié)，使用戶能夠以“所見即所得”的方式快速創(chuàng)建可以適配不同終端的網(wǎng)頁。

1網(wǎng)頁生成系統(tǒng)設(shè)計(jì)

1.1系統(tǒng)架構(gòu)設(shè)計(jì)

網(wǎng)頁生成系統(tǒng)主要由三部分組成：網(wǎng)頁編輯模塊，網(wǎng)頁管理模塊，用戶管理模塊。網(wǎng)頁編輯模塊主要負(fù)責(zé)網(wǎng)頁的可視化編輯和發(fā)布，網(wǎng)頁管理模塊主要是對已生成的網(wǎng)頁進(jìn)行增刪改查，用戶管理模塊主要是用戶的個人賬戶信息管理。整個系統(tǒng)架構(gòu)如圖1所示。

1.2系統(tǒng)功能設(shè)計(jì)

1.2.1網(wǎng)頁編輯模塊

本模塊主要以向?qū)降姆绞阶層脩簟八娂此谩钡鼐庉嬀W(wǎng)頁。編輯模塊主要有兩部分構(gòu)成，左邊的引導(dǎo)區(qū)域和右邊的編輯區(qū)域。頁面主要由圖片和文字兩類元素組成。用戶點(diǎn)擊元素右上角的“編輯”按鈕，該元素即進(jìn)入編輯模式。用戶可以修改文字，上傳圖片。當(dāng)用戶點(diǎn)擊頁面中其他地方時，退出編輯模式，并自動保存用戶所做的最后一次修改。用戶還可以添加和刪除元素。如圖2所示。

1.2.2頁面管理模塊

本模塊主要用于對已創(chuàng)建的頁面進(jìn)行管理。具體包括頁面的修改、預(yù)覽、發(fā)布和刪除。每個頁面都有三種預(yù)覽方式，可分別查看頁面在電腦、平板和手機(jī)上的展現(xiàn)。用戶選擇發(fā)布頁面后，系統(tǒng)會自動生成一個二維碼，用戶通過手機(jī)“掃一掃”分享自己的頁面。如圖3所示。

1.2.3用戶管理模塊

網(wǎng)頁生成系統(tǒng)根據(jù)用戶權(quán)限把用戶分為管理員與普通用戶。管理員可以對系統(tǒng)中所有用戶進(jìn)行管理，除了擁有普通用戶的權(quán)限外，還控制不同用戶對網(wǎng)頁生成系統(tǒng)的使用權(quán)限，可以添加、刪除用戶和修改用戶權(quán)限。普通用戶只可進(jìn)入自己的管理界面，進(jìn)行個人信息管理，即賬號和密碼的管理，用戶可以在這里進(jìn)行賬號修改以及密碼修改和找回。

2關(guān)鍵技術(shù)

響應(yīng)式網(wǎng)頁設(shè)計(jì)，是由EthanMarcotte在2010年提出的名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)[5]。簡單來說就是同一個網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局。實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)主要用到以下三種技術(shù)。

2.1彈性布局

所謂彈性布局就是不對瀏覽器的寬度作任何設(shè)定，即非固定式布局，因而可以適應(yīng)不論是水平式的還是豎直式的終端設(shè)備[6]。將固定寬度（px）換為以“%”為單位的相對寬度，這樣就可以使網(wǎng)頁適用不同分辨率的設(shè)備。同時將各個區(qū)域的位置設(shè)置為浮動，一旦屏幕寬度變小，無法展示多個元素時，可以使一部分元素白動滾動到前面元素的下方，而不會出現(xiàn)水平方向上的溢出，保證頁面相應(yīng)寬度的變化，不會出現(xiàn)橫向的滾動條。

2.2媒體查詢

媒體查詢是響應(yīng)式設(shè)計(jì)的核心，它根據(jù)條件告訴瀏覽器如何為指定寬度的視圖渲染頁面。媒體查詢使我們不僅能針對某些特定的設(shè)備類型，還能夠?qū)Τ尸F(xiàn)設(shè)計(jì)的設(shè)備物理特性進(jìn)行檢驗(yàn)[7，8]。一個MediaQuery語句項(xiàng)由媒體類型和可選的用于檢查媒體特性的條件表達(dá)式組成，通過使用width、height和color這些媒體屬性，可以控制內(nèi)容在不同設(shè)備下的輸m而不需要改變內(nèi)容本身。

2.3液態(tài)圖片

響應(yīng)式Web設(shè)計(jì)的思路中，圖片如何顯示是一個至關(guān)重要的問題。有很多同比縮放圖片的技術(shù)，其中有不少是簡單易行的，如使用CSS的max-width屬性：img{max-width：100%；}。只要沒有另外規(guī)定圖片的具體寬度，頁面上所有的圖片就會以其原始寬度進(jìn)行加載，除非其容器可視部分的寬度小于圖片的原始寬度[8]。上面的代碼確保圖片最大的寬度不會超過瀏覽器窗口或是其容器可視部分的寬度，所以當(dāng)窗口或容器的可視部分開始變窄時，圖片的最大寬度值也會相應(yīng)的減小，圖片本身永遠(yuǎn)不會被容器邊緣隱藏和覆蓋。這種做法就好像把圖片比作液體一樣，能夠白由“流動”，液態(tài)圖片也由此得來。

3系統(tǒng)實(shí)現(xiàn)

3.1利用meta標(biāo)簽對viewport進(jìn)行控制

在移動設(shè)備中，瀏覽器將一個較大的虛擬窗口映射到移動設(shè)備的屏幕上，這個虛擬的窗口即為viewport（默認(rèn)的viewport寬度為980像素）。當(dāng)瀏覽器加載一個普通頁面時，會將頁面以980像素的瀏覽器標(biāo)準(zhǔn)進(jìn)行加載，然后按一定的比例進(jìn)行縮放以顯示整個網(wǎng)頁內(nèi)容?？s放后頁面上的所有元素都會縮小，用戶需要對頁面進(jìn)行手動的放大和平移才能夠進(jìn)行瀏覽，這樣的頁面用戶體驗(yàn)很差。在響應(yīng)式設(shè)計(jì)當(dāng)中，由于采用了彈性布局的設(shè)計(jì)，網(wǎng)頁內(nèi)容的寬度最大為100%，即屏幕寬度，這就需要阻止移動設(shè)備的瀏覽器自動調(diào)整頁面大小，使網(wǎng)頁白動檢測設(shè)備屏幕的大小，網(wǎng)頁內(nèi)容白適應(yīng)。具體實(shí)現(xiàn)方式是在頁面的head標(biāo)簽中添加meta屬性來控制viewport。如

name="viewport"content-”width=device-width，initial-scale-l.0，maxlmum-scale-l.0，minimum-scale-l.0，user-scalable-no">[9]。其中各屬性代表的含義如下：

（1）width=device-width：控制viewport的寬度，可以指定固定的值或特殊的值，如device-width設(shè)備寬度。

（2）initial-scale：設(shè)置頁面的初始縮放值，1.0代表初始化頁面時不要對頁面進(jìn)行任何縮放的操作。

（3）maximum-scale：允許用戶的最大縮放值，1.0代表阻止頁面放大。

（4）minimum-scale：允許用戶的最小縮放值，1.0代表阻止頁面縮小。

（5）user-scalable：是否允許用戶進(jìn)行縮放，值為"no"或"yes"，no代表不允許，yes代表允許。

3.2設(shè)置媒體查詢

通過對媒體查詢（MediaQueries）的設(shè)置，我們可以根據(jù)屏幕寬度、屏幕方向等各個屬性來加載不同場景下不同的CSS文件以渲染頁面的視覺風(fēng)格，從而實(shí)現(xiàn)在不同的設(shè)備上呈現(xiàn)給用戶同樣的Web網(wǎng)頁[10]。具體實(shí)現(xiàn)方式有兩種：

通過link標(biāo)簽設(shè)置：示例代碼代表當(dāng)當(dāng)前屏幕寬度小于680px的時候，加載cssstyle.css文件來渲染頁面。

CSS中直接設(shè)置：

@mediascreenand（max-width：680px）{

/冰具體的CSS屬性設(shè)置*/

}

3.3利用JavaScript實(shí)現(xiàn)交互效果

響應(yīng)式設(shè)計(jì)在針對不同設(shè)備時，有不同的交互功能。例如在電腦端網(wǎng)頁會有頂部導(dǎo)航欄的設(shè)計(jì)，但在移動設(shè)備中，則需要將其轉(zhuǎn)化為具有折疊效果的側(cè)邊欄[11-13]。利用JavaScript技術(shù)，隱藏導(dǎo)航欄，只為用戶提供一個按鈕，當(dāng)用戶點(diǎn)擊時，就會顯示完整導(dǎo)航欄。這樣可以使頁面看起來整潔美觀，節(jié)省了屏幕空間，用戶還可以按需查看想要了解的內(nèi)容。

4測試

對本系統(tǒng)生成的頁面，在多種瀏覽器和不同的移動設(shè)備屏幕中進(jìn)行了測試，實(shí)驗(yàn)證明，具有很好的兼容性。最終部分效果圖如圖4-6所示。

5結(jié)語

響應(yīng)式Web設(shè)計(jì)可以為不同智能終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，隨著Web技術(shù)的不斷進(jìn)步和移動智能設(shè)備的不斷普及，響應(yīng)式Web設(shè)計(jì)將受到越來越多的Web設(shè)計(jì)師的青睞。本系統(tǒng)利用響應(yīng)式Web設(shè)計(jì)技術(shù)，幫助用戶方便快捷的生成可以自動適配不同的終端的頁面，具有很好的實(shí)用性。

參考文獻(xiàn)

[1]中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）.第35次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R].2015.

[2]阮一峰.白適應(yīng)網(wǎng)頁設(shè)計(jì)（ResponsiveWebDesign）[OL].（2012-05-10）[2015-06-17].

[3]

http：//www.ruanyifeng.com/blog/2012/05/responsive_web_design.html.

[4]WOODSS.HTML5觸摸界面設(shè)計(jì)與開發(fā)[M].北京：人民郵電出版社，2014：188-189.

[5]尹航，詹舒波.基于配置文件的web頁面白動生成系統(tǒng)[J].軟件，2014，35（10）：117-121.

[6]MARCOTTEE.Responsivewebdesign.AListApart[J].2010：306.

[7]FRANB。響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].王永強(qiáng)，譯.北京：人民郵電出版社，2013：156-157.

[8]張蕙.淺談網(wǎng)頁界面設(shè)計(jì)思路與實(shí)現(xiàn)[J].軟件，2013，34（1）：102-103.

[9]李強(qiáng).基于HTML5的網(wǎng)頁圍棋游戲的開發(fā)[J]軟件，2013，34（9）：39-40.

[10]HAYS.響應(yīng)式Web設(shè)計(jì)全流程解析[M].北京：人民郵電出版社，2014：118-119.

[11]WROBLEWSKIL，MARCOTTEE.移動優(yōu)先和響應(yīng)式web設(shè)計(jì)[M].北京：人民郵電出版社，2014：205-206.

[12]張幸芝，徐東東，賈菲.基于響應(yīng)式Web設(shè)計(jì)的教務(wù)系統(tǒng)移動平臺研究與建設(shè)[J].軟件，2013，34（6）：5-7.

[13]茍強(qiáng)強(qiáng)，張華.基于腳本指令的移動設(shè)備白適應(yīng)機(jī)制研究[J].軟件，2014，35（11）：1-4.

[14]姜福成.基于網(wǎng)頁平臺的移動文本編輯器的設(shè)計(jì)[J].軟件，2013，34（5）：12-15.