周明明

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

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

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

1 概述

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

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

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

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

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

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

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

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

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

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

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

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

2.3.1 媒體查詢

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

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

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

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

2.3.2 流式布局

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

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

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

2.3.3 彈性視覺(jué)媒體

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

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

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

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

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

參考文獻(xiàn)：

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

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

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