周明明

摘要：該文針對惠州市技師學(xué)院招生網(wǎng)站手機(jī)客戶體驗不良的問題，探討了響應(yīng)式招生網(wǎng)站的建設(shè)，從網(wǎng)站設(shè)計及網(wǎng)站實現(xiàn)的技術(shù)要點進(jìn)行了闡述。重點介紹了媒體查詢，流式布局，彈性視覺媒體等關(guān)鍵技術(shù)。

關(guān)鍵詞：響應(yīng)式；媒體查詢；流式布局；彈性視覺媒體

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）02-0057-03

1 概述

招生工作對惠州市技師學(xué)院來說，是一項非常關(guān)鍵的工作。近年來惠州市各類中職、中技學(xué)校的招生競爭十分激烈，因此迫切需要做好我院的招生宣傳工作，讓更多的潛在生源能更好的了解我院的招生信息?，F(xiàn)在越來越多的人使用手機(jī)上網(wǎng)，成為訪問互聯(lián)網(wǎng)的最常見終端。學(xué)校招生網(wǎng)站來自移動端的瀏覽量也日益龐大。但是我校的網(wǎng)站建設(shè)比較滯后，只有電腦版網(wǎng)站，手機(jī)端客戶訪問體驗十分不友好。因此迫切需要對我校的招生網(wǎng)站進(jìn)行改進(jìn)，使其在各種移動設(shè)備上都有良好的表現(xiàn)。

比較傳統(tǒng)的解決方法是通過開發(fā)專門的移動版網(wǎng)站來實現(xiàn)，即為不同的設(shè)備提供不同的網(wǎng)頁。然而，近年來移動設(shè)備的種類越來越多，移動版網(wǎng)站不僅要適應(yīng)iPhone、Android等手機(jī)平臺，還需要考慮諸如iPad、Kindle、Galaxy Note 等平板設(shè)備。如果為每種設(shè)備都定制開發(fā)相應(yīng)的移動版網(wǎng)站，一個網(wǎng)站就有多個portal（入口），不僅會大大增加架構(gòu)設(shè)計的復(fù)雜度，也會提高維護(hù)的難度。

最新的技術(shù)是借助響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）來解決此問題。響應(yīng)式網(wǎng)頁設(shè)計（responsive web design，RWD）【1】，由伊?！ゑR科特（Ethan Marcotte）在2010年5月提出。響應(yīng)式網(wǎng)頁設(shè)計能自動識別屏幕寬度、并做出相應(yīng)調(diào)整，實現(xiàn)同一個網(wǎng)站對多種設(shè)備的兼容。這對于我們構(gòu)建適應(yīng)移動設(shè)備的技工學(xué)校招生網(wǎng)站具有重要應(yīng)用價值，既能節(jié)省開發(fā)和維護(hù)成本，又能夠獲得良好表現(xiàn)效果的移動端解決方案。

根據(jù)以上的分析，本文以響應(yīng)式網(wǎng)頁設(shè)計技術(shù)為基礎(chǔ)，詳細(xì)介紹響應(yīng)式技校招生網(wǎng)站的設(shè)計及實現(xiàn)要點。

2 響應(yīng)式技校招生網(wǎng)站設(shè)計

2.1 網(wǎng)站功能分析及美術(shù)設(shè)計

技校招生網(wǎng)站主頁的設(shè)計需要符合職業(yè)技術(shù)學(xué)院的形象塑造，其內(nèi)在設(shè)計需要使代碼和功能可以靈活，適應(yīng)響應(yīng)式設(shè)計的需求。因此前期的站點規(guī)劃非常重要，需要協(xié)調(diào)和兼顧外在和內(nèi)在，前段和后臺的需求。在惠州市技師學(xué)院招生網(wǎng)站主頁規(guī)劃中，在對在校師生及招生部門工作人員進(jìn)行調(diào)查后，最終確定了主頁的內(nèi)容模塊和功能模塊。最終將頁面分為了頭部導(dǎo)航區(qū)，內(nèi)容區(qū)，功能區(qū)，頁腳區(qū)四個主要部分。其中頭部導(dǎo)航區(qū)包含有LOGO、大圖展示、主菜單等；內(nèi)容區(qū)包括招生快訊，報讀優(yōu)勢，招生專業(yè)等；功能區(qū)包括公告欄，快捷導(dǎo)航等，頁腳區(qū)則是簡單的文字。

響應(yīng)式設(shè)計的原則通常是優(yōu)先滿足移動設(shè)備，并在此基礎(chǔ)上確定網(wǎng)頁在電腦等較大屏幕上顯示，這導(dǎo)致設(shè)計稿常常更傾向于移動端，弱化了非移動端用戶的視覺體驗。由于我校招生網(wǎng)站主頁的訪問環(huán)境目前仍然以非移動設(shè)備為主，其形象塑造主要基于電腦版本，在移動設(shè)備上的顯示優(yōu)化更多來源于用戶體驗考慮。因此，在惠州市技師學(xué)院招生網(wǎng)站主頁的設(shè)計過程中采用了電腦版優(yōu)先，兼顧移動設(shè)備的理念【2】?；诳蛻趔w驗，我們的布局不是固定的，布局可以從三列變成兩列，甚至可以調(diào)整成單列。最終的設(shè)計簡稿如圖1，圖2，圖3所示。

2.2 構(gòu)建網(wǎng)頁結(jié)構(gòu)

美術(shù)稿確認(rèn)后，下一步先構(gòu)建相應(yīng)的結(jié)構(gòu)。招生首頁的html結(jié)構(gòu)大致如下：

2.3 自適應(yīng)實現(xiàn)要點

如效果圖所示，網(wǎng)站頁面需適應(yīng)瀏覽設(shè)備的不同尺寸，動態(tài)地調(diào)整布局結(jié)構(gòu)，元素規(guī)格樣式，將內(nèi)容按照不同的格式呈現(xiàn)給不同設(shè)備尺寸的客戶。響應(yīng)式設(shè)計就是通過媒體查詢，流式布局和彈性媒體的整合使用，達(dá)到更好地調(diào)整分辨率的效果。下面就是設(shè)計網(wǎng)站時實現(xiàn)響應(yīng)式的關(guān)鍵技術(shù)【1】【3】。

2.3.1 媒體查詢

媒體查詢可以根據(jù)設(shè)備顯示器的特性為其設(shè)定CSS樣式。先編寫通用版的樣式，然后在該樣式的基礎(chǔ)上擴(kuò)展其他媒體特性下的樣式?，F(xiàn)為平板設(shè)備和手機(jī)增加媒體查詢，實現(xiàn)代碼如下：

代碼中的"media"就是指特定的媒體類型，media 的值可以是屏幕（screen）、打印（print）、支持所有媒體介質(zhì)（all）等。CSS3的媒體查詢還可以獲取設(shè)備的寬和高的值、設(shè)備的手持方向是橫向還是豎向、設(shè)備的分辨率、色彩深度等值。以上的代碼就通過媒體查詢針對視口寬度不大于768像素及不大于480像素的情況，調(diào)整相關(guān)樣式。

iOS和Android瀏覽器都基于 WebKit核心。這兩種瀏覽器以及很多其他瀏覽器（如 Opera Mobile），都支持用 viewport meta元素覆蓋默認(rèn)的畫布縮放設(shè)置。我們需要關(guān)閉此項功能，禁止瀏覽器自動調(diào)整頁面的大小。需要在 HTML的標(biāo)簽中插入一個標(biāo)簽。標(biāo)簽中可以設(shè)置具體的寬度（如像素值）或者縮放比例。

上述代碼告訴瀏覽器頁面的寬度應(yīng)該等于設(shè)備的寬度。

2.3.2 流式布局

為使頁面布局能夠靈活適應(yīng)終端屏幕寬度，招生網(wǎng)站主頁采用流式布局，即將頁面中欄目的寬度單位設(shè)置為相對值，如：

上述代碼的含義為：當(dāng)視口寬度不大于768時，sidebar側(cè)邊欄的浮動屬性取消，寬度變成自動，則公告欄和快速導(dǎo)航欄會自動下沉。能有效避免傳統(tǒng)網(wǎng)頁布局對于大小不同屏幕可能會出現(xiàn)大片留白或者擁擠錯位的問題。

同時本網(wǎng)站中的字體也使用了相對大小，即用em代替了px，使得網(wǎng)頁文字大小可閱讀性加強(qiáng)。

2.3.3 彈性視覺媒體

除了布局和文本，本網(wǎng)站還實現(xiàn)了圖片等媒體的自動縮放。讓圖片等也隨著顯示終端尺寸大小而自動調(diào)整至合適尺寸。實現(xiàn)的方式是在 CSS 中添加如下代碼：img，object { max-width：100%； } 。

2.4 響應(yīng)式招生網(wǎng)站測試

響應(yīng)式網(wǎng)站在制作過程中需不斷在不同分辨率及不同瀏覽器上進(jìn)行測試。響應(yīng)式網(wǎng)站的模擬測試軟件有很多，如ProtoFluid 4，Viewport Resizer，Responsive.IS等。本網(wǎng)站利用Ben Frain開發(fā)的測試小工具”What size is my viewport page”進(jìn)行測試，如圖4，圖5，圖6所示分別為在視口寬度1024、768、480下測試的結(jié)果。

3 結(jié)束語

本文從惠州市技術(shù)學(xué)院招生網(wǎng)站的建設(shè)出發(fā)，講述了響應(yīng)式網(wǎng)站的設(shè)計及實現(xiàn)要點，并最終實現(xiàn)了響應(yīng)式招生網(wǎng)站的創(chuàng)建。為學(xué)院師生及潛在生源在查閱學(xué)院招生信息時提供了更好的使用體驗。比較傳統(tǒng)的移動版網(wǎng)站，響應(yīng)式設(shè)計體現(xiàn)了較低的開發(fā)成本，較快的開發(fā)速度和較強(qiáng)的可拓展性。相信響應(yīng)式技術(shù)必將會得到快速發(fā)展和普及。

參考文獻(xiàn)：

[1] Frain B. 響應(yīng)式Web設(shè)計-HTML5和CSS3實戰(zhàn)[M].王永強(qiáng)，譯.北京：人民郵電出版社，2013：23-72.

[2] 劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計構(gòu)建高效新型門戶網(wǎng)站[J].中國教育信息化，2013（9）：69-74.

[3] 張幸芝.基于響應(yīng)式web設(shè)計的教務(wù)系統(tǒng)移動平臺研究與建設(shè)[J].軟件，2013（06）：5-7.