基于響應式Web設計的網頁生成系統研究與實現

臧進進+鄂海紅

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

關鍵詞：移動互聯網；響應式Web設計；可視化編輯；網頁生成器

中圖分類號：TP391

文獻標識碼：A

DOI：10.3969/j.issn.1003-6970.2015.06.008

本文著錄格式：臧進進，鄂海紅，基于響應式Web設計的網頁生成系統研究與實現[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引言

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

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

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

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

1網頁生成系統設計

1.1系統架構設計

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

1.2系統功能設計

1.2.1網頁編輯模塊

本模塊主要以向導式的方式讓用戶“所見即所得”地編輯網頁。編輯模塊主要有兩部分構成，左邊的引導區(qū)域和右邊的編輯區(qū)域。頁面主要由圖片和文字兩類元素組成。用戶點擊元素右上角的“編輯”按鈕，該元素即進入編輯模式。用戶可以修改文字，上傳圖片。當用戶點擊頁面中其他地方時，退出編輯模式，并自動保存用戶所做的最后一次修改。用戶還可以添加和刪除元素。如圖2所示。

1.2.2頁面管理模塊

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

1.2.3用戶管理模塊

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

2關鍵技術

響應式網頁設計，是由EthanMarcotte在2010年提出的名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計[5]。簡單來說就是同一個網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局。實現響應式網頁設計主要用到以下三種技術。

2.1彈性布局

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

2.2媒體查詢

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

2.3液態(tài)圖片

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

3系統實現

3.1利用meta標簽對viewport進行控制

在移動設備中，瀏覽器將一個較大的虛擬窗口映射到移動設備的屏幕上，這個虛擬的窗口即為viewport（默認的viewport寬度為980像素）。當瀏覽器加載一個普通頁面時，會將頁面以980像素的瀏覽器標準進行加載，然后按一定的比例進行縮放以顯示整個網頁內容。縮放后頁面上的所有元素都會縮小，用戶需要對頁面進行手動的放大和平移才能夠進行瀏覽，這樣的頁面用戶體驗很差。在響應式設計當中，由于采用了彈性布局的設計，網頁內容的寬度最大為100%，即屏幕寬度，這就需要阻止移動設備的瀏覽器自動調整頁面大小，使網頁白動檢測設備屏幕的大小，網頁內容白適應。具體實現方式是在頁面的head標簽中添加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設備寬度。

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

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

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

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

3.2設置媒體查詢

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

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

CSS中直接設置：

@mediascreenand（max-width：680px）{

/冰具體的CSS屬性設置*/

}

3.3利用JavaScript實現交互效果

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

4測試

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

5結語

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

參考文獻

[1]中國互聯網絡信息中心（CNNIC）.第35次中國互聯網絡發(fā)展狀況統計報告[R].2015.

[2]阮一峰.白適應網頁設計（ResponsiveWebDesign）[OL].（2012-05-10）[2015-06-17].

[3]

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

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

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

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

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

[8]張蕙.淺談網頁界面設計思路與實現[J].軟件，2013，34（1）：102-103.

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

[10]HAYS.響應式Web設計全流程解析[M].北京：人民郵電出版社，2014：118-119.

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

[12]張幸芝，徐東東，賈菲.基于響應式Web設計的教務系統移動平臺研究與建設[J].軟件，2013，34（6）：5-7.

[13]茍強強，張華.基于腳本指令的移動設備白適應機制研究[J].軟件，2014，35（11）：1-4.

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