響應式網路課程設計論文
響應式網路課程設計論文
1研究背景
響應式網頁設計，是目前網頁前端設計領域最前沿的話題．那麼，什麼是響應式網頁設計，為什麼把網頁設計成響應式，我們的網路課程製作為什麼要遵循這一設計思路是本文闡述的重點．伴隨著網際網路高速發展，各種型別的網路技術及應用服務紛紛湧現．從靜態網站到動態網站，從web1．0到web2．0，日新月異的網路技術和服務時刻在重新整理我們的眼球．近些年，智慧手機及平板電腦等移動裝置快速崛起，基於移動終端的網際網路訪問已經走入了我們的日常生活，現在移動終端的網路訪問量已超過基於普通電腦的訪問量．因此要求網路課程不僅要在普通電腦的大尺寸螢幕上可以為學習者提供友好的使用者介面和學習體驗，同時在各種不同解析度的小尺寸移動終端上也應提供相對一致的學習體驗．
2基本技術方案
顯然，面對這一問題，原有的網路課程設計模式已經遠遠不能適應這一要求，那麼，如何讓網路課程也能實現響應式設計，並可以根據不同的終端裝置給出不同的輸出資訊資料，我們根據現有的一些網站開發的技術手段和前端頁面的設計模式，以及根據實際開發過程中總結出的一些實踐方法，一般使用以下手段來實現，比如把固定的數值包括位置定位、長寬高、大小等變為相對的量，這其中主要包括三個主要手段:流體式表格，液態圖片，媒體選擇器．
2．1流體式表格
在流體式表格出現之前的頁面設計，一般會使用固定的網頁寬度設定，這主要是因為當時主流的電腦顯示器的解析度是基本相同的，固定的寬度可充分的使用顯示器寬度，同時又不會使使用者感覺頁面過滿．但隨著電腦硬體的不斷髮展變化，螢幕尺寸和解析度越變越大，自適應寬度的網頁逐漸問世，這種設計方式可佔據整個瀏覽器頁面適度的寬度，同時隨著頁面寬度的變化進行重新排列布局．流體式表格的概念就是將網頁頁面進行柵格劃分，使用相對單位代替絕對單位，使用相對單位來設定頁面元素的位置偏移和大小等變數，這樣可以使整個網頁的佈局模式和內容大小隨著寬度的變化而改變，從而適應不同的顯示需求．同時使用基於div的佈局方式，例如要進行經典的三列式排布，我們可以將div設定為左浮動，並且寬度設定為33%，這樣當寬度改變時，這三個div也一直會在自己所在的區塊裡排成三列．因為我們設定了浮動式佈局，段落不會因為頁面的變化而出現重疊或分離的情況．流體式表格保證了網頁能夠響應瀏覽器的寬度變化，同時保證不會出現橫向捲軸．
2．2液態式圖片
液態式圖片也可以稱為響應式的圖片，這是一個比較抽象的說法，我們可以這樣理解，那就是不僅要保持縮放圖片時保持圖片的寬高比，而且還要在移動終端上適當降低圖片的解析度．這個技術的實現需要使用網頁尾本檢測當前裝置的螢幕解析度，根據不同裝置的情況，向網頁中新增特定的web請求資訊或標記，並將後續的網頁html頁面程式碼、頁內圖片、網頁尾本和樣式表等載入請求定向到網站虛擬路徑上．當這些請求到達網站的伺服器端時，網路伺服器會根據傳送來的'請求資訊來決定這些請求所需要網頁中是插入的大尺寸的高解析度圖片還是小尺寸的低解析度的圖片，並向請求使用者進行液態圖片相應地反饋輸出．對於小螢幕和低解析度的移動裝置，大尺寸圖片則不會被用到．使用液態式圖片可以有效降低移動端的網路資料流量並提高網頁訪問速度．
2．3css3媒體選擇器
css中文名是層疊樣式表，目前最新的版本是第三版也就是css3，它能實現網頁內容與表現分離的一種技術．流體式表格為我們提供了響應式的頁面佈局方式，不過在某些較小的螢幕終端上，如果頁面沒有辦法容納四列顯示，只能重新排列成三列或者兩列顯示，那麼，該如何響應此裝置，我們可以使用css3媒體選擇器技術解決這個問題．css3相容之前的css版本所支援的所有媒體型別，例如:screen，print，handheld等，並且css3又添加了很多涉及媒體型別的最新的功能和屬性，包括最大寬度、裝置寬度、螢幕定向，橫屏或豎屏及顏色設定等．在css3釋出之後出現的新的移動終端，如蘋果或安卓等裝置，都可以相對完整的支援這些新屬性．所以可以透過媒體選擇器為新裝置設定獨特的樣式，而忽略不支援css3的舊電腦中的老舊的瀏覽器;可以根據使用預先設想的使用目標建立多個不同型別的樣式表，以適應不同寬度範圍的裝置型別．而目前最高效的解決方案，是將多個型別的選擇器整合到一個css檔案中．
3深入探討
有了流體式表格、液態圖片、css3媒體選擇器，已經基本可以根據終端裝置的不同螢幕尺寸及解析度顯示不同的課程頁面變化，但響應式網頁設計不僅如此，還應包含一些其他方面的內容，我們列舉出如下的響應式網頁設計的主要包含的幾個方面:(1)響應不同終端的螢幕尺寸及解析度變化．當終端的螢幕尺寸及解析度發生改變的時候，根據裝置情況需要對頁面選單、文字、佈局等做出動態調整，使使用者仍然能夠獲得友好的使用體驗;(2)響應裝置操作行為變化．如滑鼠拖拽(iPad上使用JavaScript事件模擬拖拽)，觸控式螢幕手勢支援或其它移動裝置上特有的輸入方式;(3)網路狀況自適應．使用者在慢速網路或網路延遲較大的情況下可以選擇不下載一些消耗頻寬的資源;(4)其他輔助功能響應．根據不同的終端，呼叫程式所需要的感測器和控制器，如GPS、陀螺儀、電話、簡訊等功能;(5)對使用場景做出響應．根據使用者身處的不同使用環境，提供給使用者不同網頁體驗;(6)響應使用者偏好．因為不同的使用者有著不同的偏好，比如左右手，操作習慣，反映速度，眼睛辨別能力，色彩喜好，關注內容不同等，網站都可以考慮做出響應．上述討論的三個重要手段，主要是針對第一條內容．針對第二條內容則主要依靠瀏覽器和裝置感測器的狀態檢測，來實時動態調整課程頁面表現或執行方式，相對於普通電腦上基於滑鼠和鍵盤的人機互動，觸控式螢幕技術為我們帶來了完全不同的互動方式與新的設計需求;這兩者又有各自所適用的領域．幸運的是，要想讓網站滿足不同裝置的需求，並非一件很難的事，只需要把注意力集中在某些地方．比如:觸屏裝置無法對滑鼠滑過或指標的一些行為做出響應，因為觸屏裝置中根本就沒有滑鼠指標的設定，我們用手指點選螢幕就是單擊，因此設計時不要讓觸屏裝置出現任何依賴於滑鼠的狀態的觸發模式．而其他幾個方面則可根據網路課程的實際情況來實現不同的需求，例如:影片或圖片比較多的課程，就需要對網路狀況進行檢測，以根據不同的使用者頻寬顯示不同的影片或圖片質量，以提高使用者訪問速度，提升使用者體驗．而一門製作優良的網路課程，如果能根據不同的使用者給出不同的使用者體驗，使課程的學習更加貼近使用者的習慣，那麼，這一課程的受歡迎程度肯定會大大提升．
4響應式網站製作流程
從頁面設計到技術實現真格過程來說，設計並製作一個響應式網路課程，大致可以劃分為以下4個過程:(1)網站美工，使用者介面設計師，描繪出頁面的風格和樣式，並確定網頁在最大解析度的裝置下應顯示的全部內容，然後在頁面尺寸不斷縮小的情況下，如何佈局，什麼樣的頁面元素比如文字、圖片、內容等需要改變顯示方式進行隱藏，縮放或裁剪等，再一一做出調整;(2)使用相對單位對頁面元素進行定位和設定，設定長度、寬度、大小等;(3)針對不同顯示終端的螢幕尺寸和解析度使用流體式表格和液體圖片實現響應;(4)根據解析度變化視情況加入適當的媒體選擇器來調整元素．透過以上步驟，一個可以適應各種平臺和終端的響應式網路課程基本實現，經過後期的各種最佳化調整，一個優秀的並保持一致的使用者體驗的網路課程就呈現在了各種終端使用者面前，透過響應式網頁設計，大大減低了針對同一課程開發多個系統的工作強度，實現了網路課程製作的效率化和通用性．響應式網頁設計的優點:(1)網站製作的工作量相對較小，不需要註冊多個域名，對於所有裝置適用;(2)相對一致的使用者體驗，個性化的使用者習慣響應，很貼近使用者平時的上網習慣;(3)可根據不同的使用者終端，呼叫不同的終端工具，實現裝置的有效合理利用．
5結語
透過實際應用檢驗，我們製作的響應式的網路課程在學生學習過程中取得了較好的效果，學生普遍反應課程學習更方便、更人性化．相信未來越來越多的網路課程會逐漸的開始支援多平臺的響應式設計方案．本文雖然只是探討面向多平臺的響應式網路課程實現技術，但也是對各種新技術、新方法的拋磚引玉，希望透過本文使讀者能夠對網路課程的製作技術產生更多的好的想法和思路．