面向多平臺終端的響應(yīng)式網(wǎng)絡(luò)課程設(shè)計

鐘 陽 孫雪峰 孟思安

(1:吉林大學(xué)教育技術(shù)中心，長春 130012;2:吉林大學(xué)軟件學(xué)院，長春 130012)

1 研究背景

響應(yīng)式網(wǎng)頁設(shè)計，是目前網(wǎng)頁前端設(shè)計領(lǐng)域最前沿的話題.那么，什么是響應(yīng)式網(wǎng)頁設(shè)計，為什么把網(wǎng)頁設(shè)計成響應(yīng)式，我們的網(wǎng)絡(luò)課程制作為什么要遵循這一設(shè)計思路是本文闡述的重點.

伴隨著互聯(lián)網(wǎng)高速發(fā)展，各種類型的網(wǎng)絡(luò)技術(shù)及應(yīng)用服務(wù)紛紛涌現(xiàn).從靜態(tài)網(wǎng)站到動態(tài)網(wǎng)站，從web1.0到web2.0，日新月異的網(wǎng)絡(luò)技術(shù)和服務(wù)時刻在刷新我們的眼球.近些年，智能手機及平板電腦等移動設(shè)備快速崛起，基于移動終端的互聯(lián)網(wǎng)訪問已經(jīng)走入了我們的日常生活，現(xiàn)在移動終端的網(wǎng)絡(luò)訪問量已超過基于普通電腦的訪問量.因此要求網(wǎng)絡(luò)課程不僅要在普通電腦的大尺寸屏幕上可以為學(xué)習(xí)者提供友好的用戶界面和學(xué)習(xí)體驗，同時在各種不同分辨率的小尺寸移動終端上也應(yīng)提供相對一致的學(xué)習(xí)體驗［1］.

2 基本技術(shù)方案

顯然，面對這一問題，原有的網(wǎng)絡(luò)課程設(shè)計模式已經(jīng)遠遠不能適應(yīng)這一要求，那么，如何讓網(wǎng)絡(luò)課程也能實現(xiàn)響應(yīng)式設(shè)計，并可以根據(jù)不同的終端設(shè)備給出不同的輸出信息數(shù)據(jù)，我們根據(jù)現(xiàn)有的一些網(wǎng)站開發(fā)的技術(shù)手段和前端頁面的設(shè)計模式，以及根據(jù)實際開發(fā)過程中總結(jié)出的一些實踐方法，一般使用以下手段來實現(xiàn)，比如把固定的數(shù)值包括位置定位、長寬高、大小等變?yōu)橄鄬Φ牧?，這其中主要包括三個主要手段:流體式表格，液態(tài)圖片，媒體選擇器［2］.圖1為根據(jù)不同分辨率顯示不同布局.

圖1 根據(jù)不同分辨率顯示不同布局

2.1 流體式表格

在流體式表格出現(xiàn)之前的頁面設(shè)計，一般會使用固定的網(wǎng)頁寬度設(shè)定，這主要是因為當(dāng)時主流的電腦顯示器的分辨率是基本相同的，固定的寬度可充分的使用顯示器寬度，同時又不會使用戶感覺頁面過滿.但隨著電腦硬件的不斷發(fā)展變化，屏幕尺寸和分辨率越變越大，自適應(yīng)寬度的網(wǎng)頁逐漸問世，這種設(shè)計方式可占據(jù)整個瀏覽器頁面適度的寬度，同時隨著頁面寬度的變化進行重新排列布局.流體式表格的概念就是將網(wǎng)頁頁面進行柵格劃分，使用相對單位代替絕對單位，使用相對單位來設(shè)置頁面元素的位置偏移和大小等變量，這樣可以使整個網(wǎng)頁的布局模式和內(nèi)容大小隨著寬度的變化而改變，從而適應(yīng)不同的顯示需求［3］.同時使用基于div的布局方式，例如要進行經(jīng)典的三列式排布，我們可以將div設(shè)置為左浮動，并且寬度設(shè)置為33%，這樣當(dāng)寬度改變時，這三個div也一直會在自己所在的區(qū)塊里排成三列［4］.因為我們設(shè)定了浮動式布局，段落不會因為頁面的變化而出現(xiàn)重疊或分離的情況.流體式表格保證了網(wǎng)頁能夠響應(yīng)瀏覽器的寬度變化，同時保證不會出現(xiàn)橫向滾動條.

2.2 液態(tài)式圖片

液態(tài)式圖片也可以稱為響應(yīng)式的圖片，這是一個比較抽象的說法，我們可以這樣理解，那就是不僅要保持縮放圖片時保持圖片的寬高比，而且還要在移動終端上適當(dāng)降低圖片的分辨率.這個技術(shù)的實現(xiàn)需要使用網(wǎng)頁腳本檢測當(dāng)前設(shè)備的屏幕分辨率，根據(jù)不同設(shè)備的情況，向網(wǎng)頁中添加特定的web請求信息或標(biāo)記，并將后續(xù)的網(wǎng)頁html頁面代碼、頁內(nèi)圖片、網(wǎng)頁腳本和樣式表等加載請求定向到網(wǎng)站虛擬路徑上.當(dāng)這些請求到達網(wǎng)站的服務(wù)器端時，網(wǎng)絡(luò)服務(wù)器會根據(jù)發(fā)送來的請求信息來決定這些請求所需要網(wǎng)頁中是插入的大尺寸的高分辨率圖片還是小尺寸的低分辨率的圖片，并向請求用戶進行液態(tài)圖片相應(yīng)地反饋輸出.對于小屏幕和低分辨率的移動設(shè)備，大尺寸圖片則不會被用到.使用液態(tài)式圖片可以有效降低移動端的網(wǎng)絡(luò)數(shù)據(jù)流量并提高網(wǎng)頁訪問速度.圖2為液態(tài)式圖片.

圖2 液態(tài)式圖片

2.3 css3媒體選擇器

css中文名是層疊樣式表，目前最新的版本是第三版也就是css3，它能實現(xiàn)網(wǎng)頁內(nèi)容與表現(xiàn)分離的一種技術(shù).流體式表格為我們提供了響應(yīng)式的頁面布局方式，不過在某些較小的屏幕終端上，如果頁面沒有辦法容納四列顯示，只能重新排列成三列或者兩列顯示，那么，該如何響應(yīng)此設(shè)備，我們可以使用css3媒體選擇器技術(shù)解決這個問題.css3兼容之前的css版本所支持的所有媒體類型，例如:screen，print，handheld等，并且css3又添加了很多涉及媒體類型的最新的功能和屬性，包括最大寬度、設(shè)備寬度、屏幕定向，橫屏或豎屏及顏色設(shè)定等.在css3發(fā)布之后出現(xiàn)的新的移動終端，如蘋果或安卓等設(shè)備，都可以相對完整的支持這些新屬性.所以可以通過媒體選擇器為新設(shè)備設(shè)置獨特的樣式，而忽略不支持css3的舊電腦中的老舊的瀏覽器;可以根據(jù)使用預(yù)先設(shè)想的使用目標(biāo)創(chuàng)建多個不同類型的樣式表，以適應(yīng)不同寬度范圍的設(shè)備類型.而目前最高效的解決方案，是將多個類型的選擇器整合到一個css文件中.

3 深入探討

有了流體式表格、液態(tài)圖片、css3媒體選擇器，已經(jīng)基本可以根據(jù)終端設(shè)備的不同屏幕尺寸及分辨率顯示不同的課程頁面變化，但響應(yīng)式網(wǎng)頁設(shè)計不僅如此，還應(yīng)包含一些其他方面的內(nèi)容，我們列舉出如下的響應(yīng)式網(wǎng)頁設(shè)計的主要包含的幾個方面:

(1)響應(yīng)不同終端的屏幕尺寸及分辨率變化. 當(dāng)終端的屏幕尺寸及分辨率發(fā)生改變的時候，根據(jù)設(shè)備情況需要對頁面菜單、文字、布局等做出動態(tài)調(diào)整，使用戶仍然能夠獲得友好的使用體驗;

(2)響應(yīng)設(shè)備操作行為變化. 如鼠標(biāo)拖拽(iPad上使用JavaScript事件模擬拖拽)，觸摸屏手勢支持或其它移動設(shè)備上特有的輸入方式;

(3)網(wǎng)絡(luò)狀況自適應(yīng). 用戶在慢速網(wǎng)絡(luò)或網(wǎng)絡(luò)延遲較大的情況下可以選擇不下載一些消耗帶寬的資源;

(4)其他輔助功能響應(yīng). 根據(jù)不同的終端，調(diào)用程序所需要的傳感器和控制器，如GPS、陀螺儀、電話、短信等功能;

(5)對使用場景做出響應(yīng). 根據(jù)用戶身處的不同使用環(huán)境，提供給用戶不同網(wǎng)頁體驗;

(6)響應(yīng)用戶偏好. 因為不同的用戶有著不同的偏好，比如左右手，操作習(xí)慣，反映速度，眼睛辨別能力，色彩喜好，關(guān)注內(nèi)容不同等，網(wǎng)站都可以考慮做出響應(yīng).

上述討論的三個重要手段，主要是針對第一條內(nèi)容.針對第二條內(nèi)容則主要依靠瀏覽器和設(shè)備傳感器的狀態(tài)檢測，來實時動態(tài)調(diào)整課程頁面表現(xiàn)或運行方式，相對于普通電腦上基于鼠標(biāo)和鍵盤的人機交互，觸摸屏技術(shù)為我們帶來了完全不同的互動方式與新的設(shè)計需求;這兩者又有各自所適用的領(lǐng)域.幸運的是，要想讓網(wǎng)站滿足不同設(shè)備的需求，并非一件很難的事，只需要把注意力集中在某些地方.比如:觸屏設(shè)備無法對鼠標(biāo)滑過或指針的一些行為做出響應(yīng)，因為觸屏設(shè)備中根本就沒有鼠標(biāo)指針的設(shè)定，我們用手指點擊屏幕就是單擊，因此設(shè)計時不要讓觸屏設(shè)備出現(xiàn)任何依賴于鼠標(biāo)的狀態(tài)的觸發(fā)模式.而其他幾個方面則可根據(jù)網(wǎng)絡(luò)課程的實際情況來實現(xiàn)不同的需求，例如:視頻或圖片比較多的課程，就需要對網(wǎng)絡(luò)狀況進行檢測，以根據(jù)不同的用戶帶寬顯示不同的視頻或圖片質(zhì)量，以提高用戶訪問速度，提升用戶體驗.而一門制作優(yōu)良的網(wǎng)絡(luò)課程，如果能根據(jù)不同的用戶給出不同的用戶體驗，使課程的學(xué)習(xí)更加貼近用戶的習(xí)慣，那么，這一課程的受歡迎程度肯定會大大提升.

4 響應(yīng)式網(wǎng)站制作流程

從頁面設(shè)計到技術(shù)實現(xiàn)真格過程來說，設(shè)計并制作一個響應(yīng)式網(wǎng)絡(luò)課程，大致可以劃分為以下4個過程:

(1)網(wǎng)站美工，用戶界面設(shè)計師，描繪出頁面的風(fēng)格和樣式，并確定網(wǎng)頁在最大分辨率的設(shè)備下應(yīng)顯示的全部內(nèi)容，然后在頁面尺寸不斷縮小的情況下，如何布局，什么樣的頁面元素比如文字、圖片、內(nèi)容等需要改變顯示方式進行隱藏，縮放或裁剪等，再一一做出調(diào)整;

(2)使用相對單位對頁面元素進行定位和設(shè)定，設(shè)置長度、寬度、大小等;

(3)針對不同顯示終端的屏幕尺寸和分辨率使用流體式表格和液體圖片實現(xiàn)響應(yīng)(圖3為響應(yīng)式設(shè)計的網(wǎng)站);

(4)根據(jù)分辨率變化視情況加入適當(dāng)?shù)拿襟w選擇器來調(diào)整元素.

通過以上步驟，一個可以適應(yīng)各種平臺和終端的響應(yīng)式網(wǎng)絡(luò)課程基本實現(xiàn)，經(jīng)過后期的各種優(yōu)化調(diào)整，一個優(yōu)秀的并保持一致的用戶體驗的網(wǎng)絡(luò)課程就呈現(xiàn)在了各種終端用戶面前，通過響應(yīng)式網(wǎng)頁設(shè)計，大大減低了針對同一課程開發(fā)多個系統(tǒng)的工作強度，實現(xiàn)了網(wǎng)絡(luò)課程制作的效率化和通用性［5］.

響應(yīng)式網(wǎng)頁設(shè)計的優(yōu)點:

(1)網(wǎng)站制作的工作量相對較小，不需要注冊多個域名，對于所有設(shè)備適用;

(2)相對一致的用戶體驗，個性化的用戶習(xí)慣響應(yīng)，很貼近用戶平時的上網(wǎng)習(xí)慣;

(3)可根據(jù)不同的用戶終端，調(diào)用不同的終端工具，實現(xiàn)設(shè)備的有效合理利用.

圖3 響應(yīng)式設(shè)計的網(wǎng)站

響應(yīng)式網(wǎng)頁設(shè)計缺點:

(1)如果沒有針對移動端視頻和圖片進行優(yōu)化，則會比單獨開發(fā)的移動端網(wǎng)絡(luò)更占用帶寬，對于中央處理器及內(nèi)存都很緊張的移動終端來說，就會多下載許多根本不需要的圖片等資源，而圖像根本沒有針對小屏幕優(yōu)化，這樣會造成響應(yīng)速度明顯遲緩.對此一般采用移動優(yōu)先設(shè)計的方法來設(shè)計網(wǎng)站;

(2)網(wǎng)頁設(shè)計和優(yōu)化的技術(shù)相對比較復(fù)雜，需要專業(yè)人員參與開發(fā)制作，普通教師可能難以獨立完成;

(3)因為響應(yīng)式的網(wǎng)頁設(shè)計需要html5及css3的支持，可能一些老版本的瀏覽器難以完全兼容，目前已有一些替代方案，如html5.js，css3-mediaqueries.js等javascript腳本，在網(wǎng)頁中引入這些腳本，就可使老版本的瀏覽器能夠解析最新的html標(biāo)簽和css選擇器.

5 結(jié)語

通過實際應(yīng)用檢驗，我們制作的響應(yīng)式的網(wǎng)絡(luò)課程在學(xué)生學(xué)習(xí)過程中取得了較好的效果，學(xué)生普遍反應(yīng)課程學(xué)習(xí)更方便、更人性化.相信未來越來越多的網(wǎng)絡(luò)課程會逐漸的開始支持多平臺的響應(yīng)式設(shè)計方案.本文雖然只是探討面向多平臺的響應(yīng)式網(wǎng)絡(luò)課程實現(xiàn)技術(shù)，但也是對各種新技術(shù)、新方法的拋磚引玉，希望通過本文使讀者能夠?qū)W(wǎng)絡(luò)課程的制作技術(shù)產(chǎn)生更多的好的想法和思路.

［1］高 輝，程 罡，余勝泉，楊現(xiàn)民.泛在學(xué)習(xí)資源在移動終端上的自適應(yīng)呈現(xiàn)模型設(shè)計［J］.中國電化教育，2012(4):122-128.

［2］貝 巖.響應(yīng)式Web設(shè)計實現(xiàn)方法研究［J］.渤海大學(xué)學(xué)報(自然科學(xué)版)，2014，35(2):170-172.

［3］劉鳳成.面向移動終端的Web頁面分塊與轉(zhuǎn)換方法的研究與應(yīng)用［D］.長沙:中南大學(xué)，2012.

［4］張樹明.基于響應(yīng)式Web設(shè)計網(wǎng)頁模板的設(shè)計與實現(xiàn)［J］.計算機與現(xiàn)代化，2013(6):125-127.

［5］楊 葉，陳 琳，董啟標(biāo).響應(yīng)式Web移動學(xué)習(xí)資源的技術(shù)實現(xiàn)與設(shè)計研究［J］.現(xiàn)代教育技術(shù).2013，23(6):107-111.