響應(yīng)式網(wǎng)絡(luò)課程設(shè)計(jì)論文

　　1研究背景

　　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，是目前網(wǎng)頁(yè)前端設(shè)計(jì)領(lǐng)域最前沿的話(huà)題．那么，什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，為什么把網(wǎng)頁(yè)設(shè)計(jì)成響應(yīng)式，我們的網(wǎng)絡(luò)課程制作為什么要遵循這一設(shè)計(jì)思路是本文闡述的重點(diǎn)．伴隨著互聯(lián)網(wǎng)高速發(fā)展，各種類(lèi)型的網(wǎng)絡(luò)技術(shù)及應(yīng)用服務(wù)紛紛涌現(xiàn)．從靜態(tài)網(wǎng)站到動(dòng)態(tài)網(wǎng)站，從web1．0到web2．0，日新月異的網(wǎng)絡(luò)技術(shù)和服務(wù)時(shí)刻在刷新我們的眼球．近些年，智能手機(jī)及平板電腦等移動(dòng)設(shè)備快速崛起，基于移動(dòng)終端的互聯(lián)網(wǎng)訪問(wèn)已經(jīng)走入了我們的日常生活，現(xiàn)在移動(dòng)終端的網(wǎng)絡(luò)訪問(wèn)量已超過(guò)基于普通電腦的訪問(wèn)量．因此要求網(wǎng)絡(luò)課程不僅要在普通電腦的大尺寸屏幕上可以為學(xué)習(xí)者提供友好的用戶(hù)界面和學(xué)習(xí)體驗(yàn)，同時(shí)在各種不同分辨率的小尺寸移動(dòng)終端上也應(yīng)提供相對(duì)一致的學(xué)習(xí)體驗(yàn)．

　　2基本技術(shù)方案

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

　　2．1流體式表格

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

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

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

　　2．3css3媒體選擇器

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

　　3深入探討

　　有了流體式表格、液態(tài)圖片、css3媒體選擇器，已經(jīng)基本可以根據(jù)終端設(shè)備的不同屏幕尺寸及分辨率顯示不同的課程頁(yè)面變化，但響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不僅如此，還應(yīng)包含一些其他方面的內(nèi)容，我們列舉出如下的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的主要包含的幾個(gè)方面:(1)響應(yīng)不同終端的屏幕尺寸及分辨率變化．當(dāng)終端的屏幕尺寸及分辨率發(fā)生改變的時(shí)候，根據(jù)設(shè)備情況需要對(duì)頁(yè)面菜單、文字、布局等做出動(dòng)態(tài)調(diào)整，使用戶(hù)仍然能夠獲得友好的使用體驗(yàn);(2)響應(yīng)設(shè)備操作行為變化．如鼠標(biāo)拖拽(iPad上使用JavaScript事件模擬拖拽)，觸摸屏手勢(shì)支持或其它移動(dòng)設(shè)備上特有的輸入方式;(3)網(wǎng)絡(luò)狀況自適應(yīng)．用戶(hù)在慢速網(wǎng)絡(luò)或網(wǎng)絡(luò)延遲較大的情況下可以選擇不下載一些消耗帶寬的資源;(4)其他輔助功能響應(yīng)．根據(jù)不同的終端，調(diào)用程序所需要的傳感器和控制器，如GPS、陀螺儀、電話(huà)、短信等功能;(5)對(duì)使用場(chǎng)景做出響應(yīng)．根據(jù)用戶(hù)身處的不同使用環(huán)境，提供給用戶(hù)不同網(wǎng)頁(yè)體驗(yàn);(6)響應(yīng)用戶(hù)偏好．因?yàn)椴煌�的用�?hù)有著不同的偏好，比如左右手，操作習(xí)慣，反映速度，眼睛辨別能力，色彩喜好，關(guān)注內(nèi)容不同等，網(wǎng)站都可以考慮做出響應(yīng)．上述討論的三個(gè)重要手段，主要是針對(duì)第一條內(nèi)容．針對(duì)第二條內(nèi)容則主要依靠瀏覽器和設(shè)備傳感器的狀態(tài)檢測(cè)，來(lái)實(shí)時(shí)動(dòng)態(tài)調(diào)整課程頁(yè)面表現(xiàn)或運(yùn)行方式，相對(duì)于普通電腦上基于鼠標(biāo)和鍵盤(pán)的人機(jī)交互，觸摸屏技術(shù)為我們帶來(lái)了完全不同的互動(dòng)方式與新的設(shè)計(jì)需求;這兩者又有各自所適用的領(lǐng)域．幸運(yùn)的是，要想讓網(wǎng)站滿(mǎn)足不同設(shè)備的需求，并非一件很難的事，只需要把注意力集中在某些地方．比如:觸屏設(shè)備無(wú)法對(duì)鼠標(biāo)滑過(guò)或指針的一些行為做出響應(yīng)，因?yàn)橛|屏設(shè)備中根本就沒(méi)有鼠標(biāo)指針的設(shè)定，我們用手指點(diǎn)擊屏幕就是單擊，因此設(shè)計(jì)時(shí)不要讓觸屏設(shè)備出現(xiàn)任何依賴(lài)于鼠標(biāo)的狀態(tài)的觸發(fā)模式．而其他幾個(gè)方面則可根據(jù)網(wǎng)絡(luò)課程的實(shí)際情況來(lái)實(shí)現(xiàn)不同的需求，例如:視頻或圖片比較多的課程，就需要對(duì)網(wǎng)絡(luò)狀況進(jìn)行檢測(cè)，以根據(jù)不同的用戶(hù)帶寬顯示不同的視頻或圖片質(zhì)量，以提高用戶(hù)訪問(wèn)速度，提升用戶(hù)體驗(yàn)．而一門(mén)制作優(yōu)良的網(wǎng)絡(luò)課程，如果能根據(jù)不同的用戶(hù)給出不同的用戶(hù)體驗(yàn)，使課程的學(xué)習(xí)更加貼近用戶(hù)的習(xí)慣，那么，這一課程的受歡迎程度肯定會(huì)大大提升．

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

　　從頁(yè)面設(shè)計(jì)到技術(shù)實(shí)現(xiàn)真格過(guò)程來(lái)說(shuō)，設(shè)計(jì)并制作一個(gè)響應(yīng)式網(wǎng)絡(luò)課程，大致可以劃分為以下4個(gè)過(guò)程:(1)網(wǎng)站美工，用戶(hù)界面設(shè)計(jì)師，描繪出頁(yè)面的風(fēng)格和樣式，并確定網(wǎng)頁(yè)在最大分辨率的設(shè)備下應(yīng)顯示的全部?jī)?nèi)容，然后在頁(yè)面尺寸不斷縮小的情況下，如何布局，什么樣的頁(yè)面元素比如文字、圖片、內(nèi)容等需要改變顯示方式進(jìn)行隱藏，縮放或裁剪等，再一一做出調(diào)整;(2)使用相對(duì)單位對(duì)頁(yè)面元素進(jìn)行定位和設(shè)定，設(shè)置長(zhǎng)度、寬度、大小等;(3)針對(duì)不同顯示終端的屏幕尺寸和分辨率使用流體式表格和液體圖片實(shí)現(xiàn)響應(yīng);(4)根據(jù)分辨率變化視情況加入適當(dāng)?shù)拿襟w選擇器來(lái)調(diào)整元素．通過(guò)以上步驟，一個(gè)可以適應(yīng)各種平臺(tái)和終端的響應(yīng)式網(wǎng)絡(luò)課程基本實(shí)現(xiàn)，經(jīng)過(guò)后期的各種優(yōu)化調(diào)整，一個(gè)優(yōu)秀的并保持一致的用戶(hù)體驗(yàn)的網(wǎng)絡(luò)課程就呈現(xiàn)在了各種終端用戶(hù)面前，通過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，大大減低了針對(duì)同一課程開(kāi)發(fā)多個(gè)系統(tǒng)的工作強(qiáng)度，實(shí)現(xiàn)了網(wǎng)絡(luò)課程制作的效率化和通用性．響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn):(1)網(wǎng)站制作的工作量相對(duì)較小，不需要注冊(cè)多個(gè)域名，對(duì)于所有設(shè)備適用;(2)相對(duì)一致的用戶(hù)體驗(yàn)，個(gè)性化的用戶(hù)習(xí)慣響應(yīng)，很貼近用戶(hù)平時(shí)的上網(wǎng)習(xí)慣;(3)可根據(jù)不同的用戶(hù)終端，調(diào)用不同的終端工具，實(shí)現(xiàn)設(shè)備的有效合理利用．

　　5結(jié)語(yǔ)

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

【響應(yīng)式網(wǎng)絡(luò)課程設(shè)計(jì)論文】相關(guān)文章：

網(wǎng)絡(luò)課程設(shè)計(jì)論文04-13

網(wǎng)絡(luò)課程設(shè)計(jì)現(xiàn)狀分析論文11-20

訪談式培訓(xùn)課程設(shè)計(jì)開(kāi)發(fā)論文11-14

網(wǎng)絡(luò)信息編輯實(shí)驗(yàn)課程設(shè)計(jì)論文11-20

課程設(shè)計(jì)論文04-12

討論式教學(xué)法的修養(yǎng)教育課程設(shè)計(jì)論文08-03

課程設(shè)計(jì)論文模板04-10

linux課程設(shè)計(jì)論文04-10

綜合課程設(shè)計(jì)論文04-10