移動互聯網時代網頁設計與制作課程改革研究

王兆華　王海波

摘要：分析傳統互聯網與移動互聯網環境下對網頁設計與制作技術需求的不同，介紹傳統網頁設計與制作課程的具體內容，說明在移動互聯網時代課程內容改革方案和Web新技術引入的注意事項，以及充分利用移動互聯網的特點開展課程改革的設想，指出伴隨著移動互聯網時代的到來，網頁設計與制作課程新的改革勢在必行。

關鍵詞：移動互聯網；網頁設計與制作；Web新技術

0.引言

互聯網的飛速發展，使得網絡無處不在。如何設計出更優秀的網頁來提高網站的知名度和點擊率是擁有網站的企業、事業單位和個人共同追求的目標。優秀網頁的實現需要先進的網頁設計與制作技術，而網頁設計與制作課程的建設為網頁設計與制作技術的推廣提供了非常好的平臺。目前，網頁設計與制作課程是很多高等院校計算機專業的專業基礎課、非計算機專業的公共必修課和一些軟件培訓機構和高職院校的主干課程之一。這一切都表明網頁設計與制作課程的重要性。因此，提高該課程的課堂教學效果也顯得尤為重要。

隨著2009年1月7日3G牌照的發放，中國移動互聯網由概念走向應用階段。2012年5月10日，由長城會及全球移動互聯網大會組委會聯合主辦的“第四屆2012全球移動互聯網大會（GMIC）”在北京國家會議中心正式召開。大會匯集全球新興行業精英，探討行業熱點并彼此分享觀點，共同推動移動產業向前發展。相比于傳統互聯網，移動互聯網具有更大發展潛力。如何在移動互聯網時代對網頁設計與制作課程的教學進行改革，使其能夠跟上新技術的發展，滿足市場的需求是值得從事該課程教學的教師進行研究的一個課題。筆者圍繞在移動互聯網時代高校非計算機專業公共必修網頁設計與制作課程的改革設想展開論述。

1.傳統互聯網與移動互聯網對網頁設計與制作技術的需求

1.1傳統互聯網的網頁設計與制作技術

互聯網的發展經歷了從Web 1.0到Web 2.0的飛速發展，直到目前的Web 3.0。而網頁設計技術也在不斷地提高。

Web 1.0是互聯網的初期，主要采用HTML做的靜態網頁，功能主要用于宣傳。使用的主要技術是靜態網頁開發技術，比如HTML、DHTML、XML、JavaScript等。靜態網頁的優點是訪問速度快，安全性高，漏洞少；缺點是交互性比較差。當然在Web 1.0時代也陸續引入了動態網頁技術。

Web 2.0是在Web 1.0的基礎上發展起來的。在這個階段，各種動態網頁技術相繼出現，比如ASP、ASENET、JSP、PHP等，這些技術與數據庫結合可以開發出各種動態網站，提高了網站與用戶的交互性。常見的新聞網站、博客、社區網站、電子商務、網上銀行等都是動態網站。動態網站為人們工作和生活所帶來的便利在很多方面都有體現。但是在提供便利的同時也帶來了安全問題，高訪問量也需要網站具有高的負載能力，因此帶動了各種Web架構技術的出現。在Web 2.0時代，Mashup、AjaX、RSS、WiKi、Tag是幾個被提及最多的名詞。

Web 3.0是在Web 1.0、Web 2.0基礎上發展起來的，特別是在SOA、云計算等技術的基礎上發展起來的。Web 3.0雖然還沒有一個特別明確的定義，但是Web 3.0的網站已經相繼出現，比如騰訊Webqq 3.0的推出使得Webqq越來越像一款桌面操作系統。還有很多SNS網站，也逐漸凸現出Web 3.0的特點。

在傳統互聯網時期，網頁瀏覽終端以PC機的瀏覽器為主，Web標準也是遵循各種PC機瀏覽器的顯示標準。只是在新技術不斷出現的情況下，網頁設計技術在不斷地提高和改進，網頁布局技術和網頁視聽效果在迅速地發展和提高。

1.2移動互聯網的網頁設計與制作技術

移動互聯網就是移動Internet，能讓用戶在移動中通過移動設備隨時、隨地訪問Internet，獲取信息，進行商務、娛樂等各種網絡服務。為了提供移動服務，移動互聯網和傳統網絡在終端設備上有很大的改變。移動互聯網因其高便攜性、應用方便和隱私性等特點，越來越受網民的歡迎。2012年中國移動互聯網網民數量預計將達4.51億。現在移動互聯網的流量發展趨勢跟10年前的互聯網基本上如出一轍。“百度移動互聯網發展趨勢報告2012 Q1”預言在未來很長時間內，移動互聯網還將繼續保持強勢的追趕態勢。

移動互聯網時代的技術熱點除了Web 2.0和Web 3.0技術之外，還出現了一些有關網頁設計技術的新的名詞術語，比如HrrML 5、響應式網頁設計、基于用戶體驗的移動互聯網網頁、4大移動平臺（iOS、Android、Windows Phone、Symbian）、混合型應用HybridApp（如掌上百度和淘寶客戶端Android版，走的是Hybrid App的路線）等。有關HTML 5的新觀點也相繼出現，比如HTML 5將改變移動互聯網、HTML 5將成為今后社交游戲開發應用的重要技術平臺以及新的設計技術HTML5與CSS 3結合制作網頁播放器等。所有這些新術語、新觀念、新技術的出現，反映出移動互聯網時代，網頁設計技術在不斷地改變和提高。

2.傳統的網頁設計與制作課程內容

多年以前，隨著計算機網絡技術的發展，互聯網技術對人們的生活和工作的影響日益提高。同時為了更好地學習和推廣互聯網技術，各大高校逐步開展網頁設計與制作課程的建設。縱觀目前高校開設的網頁設計與制作公共必修課程內容基本相同，主要分為以下幾大模塊：

（1）網頁設計與制作基本知識：介紹有關網站、超文本傳輸協議、網頁瀏覽原理、網頁的基本元素等相關基本知識。

（2）網頁制作工具：介紹一種網頁制作工具，大多數會講授Dreamweaver的某個版本。

（3）網頁制作基本技術：主要是HTML語言、網頁布局技術，比如表格、圖層、框架、模板和庫等，網頁表單和JavaScript，以及簡單的CSS技術的介紹。

（4）動態網頁開發技術簡單介紹：介紹一種動態網頁制作技術，比如ASP、PHP或者JSP等，鑒于ASP容易掌握，大多數院校會選擇講解ASP技術，但所講內容都比較基礎。

隨著多年的課程建設和改革，各種教學方法不斷引入到網頁設計與制作課程教學中，比如案例驅動教學、項目教學法、任務驅動等，提高了課程的授課效率，并且取得了一定的效果。很多院校也建立了網頁設計與制作課程的優質示范課，不少精品課程也在網絡上公開。所有這些改革提高了該課程的系統性、規范性和實用性。

隨著互聯網技術提高和移動互聯網技術的逐漸普及，僅限于以上內容已顯陳舊，已經不能滿足計算機互聯網與時俱進的特點。在互聯網時代，學生獲取知識的途徑是多樣的，在授課過程中學生會提出更新的問題，比如手機上的網頁如何開發？一些新的網頁特效如何實現？甚至學生會打開一個網站直接請教老師某個頁面怎么設計實現。這一個個新問題的出現，使得我們的教學內容已不能滿足目前學生追求新知識的需求。因此，網頁設計與制作課程的新的改革勢在必行。

3.移動互聯網時代課程教學內容的改革

3.1教學內容模塊方案設計

內容改革是課程改革的首要環節，首先要確定講什么？什么是必講重點內容，什么是簡單講解內容？什么是選講內容？結合之前改革的成果和目前新的需求，對教學內容模塊可以做必要的調整。如圖l所示是網頁設計與制作課程內容模塊組成圖，顯示了課程內容被劃分為幾大模塊，下面詳細介紹各模塊。

（1）課程主要分為6大模塊：網頁制作基礎知識、網頁制作新技術、網頁開發工具、網頁美化工具、靜態網頁技術、動態網頁技術。其中網頁制作基礎知識是必講內容；網頁制作新技術為學生介紹新技術的發展方向，并且是使學生能與現行市場技術接軌的必備知識；網頁開發工具是設計網頁的必備利器，是必講內容，并且學習過程貫穿課程始終；網頁美化的方法以及美化工具的使用需要簡單介紹，在之前傳統的課程教學中往往忽略了這部分的教學，筆者建議可以增加這部分的內容講解，比如用2個學時介紹一下網頁藝術設計相關的內容，可以考慮視覺設計、色彩設計、文字設計和版面設計等方面，然后介紹美化工具，比如Photoshop或者Firework，使用這些工具可以設計網頁效果圖和切片導出，同時設計一些網頁上的元素（比如按鈕、圖像等），通過這些內容的講解就可以在如何把網頁做得更美觀，更專業方面給學生一個引導；靜態網頁是常見的網頁類型之一，靜態網頁技術是學習動態網頁技術的基礎，也是學生通過學習本課程主要應該掌握的網頁設計技術。

（2）網頁制作技術分為：移動互聯網相關和傳統互聯網相關。分類介紹關鍵的、核心的相關技術，比如HTML 5、響應式網頁設計、基于用戶體驗的移動互聯網網頁等，這部分內容需要結合課程學時安排，如果時間充分則可以詳細展開一些，開闊學生的視野；如果時間緊張則可以簡單提出典型，然后精選一些課下學習資料共享給學生，包括電子文檔，視頻資料和相關學習網站等，引導學生自主學習。

（3）網頁開發工具分為：手機網頁開發工具和PC機網頁開發工具，在介紹專業網頁制作工具Dreamweaver的基礎上，介紹一些和手機網頁開發相關的技術，可以不必詳細介紹。

（4）靜態網頁技術分為：傳統技術和新技術。傳統的靜態網頁設計技術中重點介紹了HTML 4語言、表格布局技術、AP DIV技術、框架、模板和庫等。目前教學把這部分作為重點內容，花費很多學時，講解的非常詳細。但是在目前網頁設計領域，CSS+DIV作為替代表格布局的方法，已經得到了廣泛的應用，很多網頁已經不再使用純表格布局，所以表格布局這部分可以簡單的講解，比如原來要用3個學時，現在可以減到1個學時，其余學時可以展開介紹CSS+DIV技術。HTML 5目前已經成熟，可以在簡單介紹HTML4的基礎之上，詳細介紹HTML 5的特點及應用，這樣與移動互聯網相結合，更有新意。

該課程模塊與以往課程模塊的區別體現在：增加了網頁制作新技術的介紹，增加了手機網頁開發工具，增加了靜態網頁制作新技術。筆者建議新內容增加的方式在初始階段可以采用對傳統內容的補充，首先擇優選擇最典型內容，先簡單引入，之后再詳細展開，逐步過渡到成為課程主體內容的一部分。對動態網頁部分不再追加新技術，根據需要可以自行添加，或者直接選擇學生比較容易接受的新技術來開展動態網頁的教學。

3.2Web新技術的引入

Web新技術的引入是為了適應互聯網時代發展，響應市場需求，滿足學生追求新知識的欲望，提高學生學習的興奮點和主動性，同時能夠在不增加課時的前提下增加新知識，這就需要合理的設計新技術的引入方式。筆者認為，課程改革是一個循序漸進的過程，應堅持以下幾個原則：

（1）保證不影響課程的教學目標，不影響課程的核心教學內容。

（2）適量去掉一些比較陳舊的、目前使用較少的技術的講解，比如表格布局。

（3）新技術的切入點應該選好，最好在課程中能以計算思維的理念來展開課堂教學，這樣才能使學生的思維融入到課程知識的學習中，與實際應用準確相結合。

（4）新技術講解的篇幅要適度，不能因為新技術的篇幅過大，而影響了課程核心內容的講解。可以有選擇的介紹比較重要的新技術，而把學生有能力理解的內容以電子文檔的形式提供，如相關技術網站的網址、相關的文獻，引導學生自學，這樣學生既擴大了視野，也滿足了求知欲。

（5）在需要體現移動互聯網新技術的章節，抓住某一個重點技術合理展開，不要面面俱到。

（6）如果想全面展開，可以把網頁設計課程分成3個階段：網頁設計基礎知識（前期課程）、靜態網頁設計技術、動態網頁設計技術（后續課程）。

（7）鑒于目前響應式網頁技術和HTML 5、CSS 3等新技術的引入，可以在網頁藝術設計上花費一些心思。

（8）最后要和課程的考核內容結合起來，哪些新內容可以作為考核內容，哪些舊知識可以不再考核，這個需要認真地研究。

4.移動互聯網時代教學方法的改革

隨著移動互聯網逐步走進人們的生活，仔細觀察，大部分學生都有一部可以上網的手機。2010年3月，某報記者通過對武漢6所高校進行調查，發現受訪的1000余名大學生中，超過70%學生曾經在上課時間使用手機上網，超過35%學生通過手機網絡聊天。這充分說明了移動互聯網在極大地影響著學生的學習生活。在移動互聯網之前，很多課程都有E learning系統或者數字化學習中心為學生提供便利的學習平臺，但是這些平臺的終端多數使用PC機，并且互動性不是很好，基本上采用教師傳資料和發作業，學生下載資料和提交作業的模式，使用方式比較單一，慢慢地學生僅僅把平臺當作一個教師和學生信息傳遞的小工具，并且局限于使用PC機。

既然移動互聯網已經深入學生生活，教師可以適應移動互聯網的互動教學理念，把移動互聯網平臺融入到課堂內外，體現出“以學生為中心”的教學原則。比如湖南大學的新聞類課程已經嘗試使用移動互聯網在教學中的互動。

網頁設計與制作課程本身就是和互聯網技術相關的課程，可以發揮課程自身的特點，設計適應移動平臺的教學服務系統，使學生通過手機終端就可以訪問教學服務系統資源，同時也能在服務系統上共享新技術，分享學習收獲和技巧，充分發揮學生的創造性，教學相長，共同提高課程的實用性。

5.結語

針對移動互聯網時代對網頁設計技術的需求不斷發生的變化，傳統的網頁設計與制作課程必須響應時代特點，在原有課程改革的基礎上進行新的改革。近幾年筆者已經在該課程的教學中有意識地進行了一些內容的改革和新教學方法的使用，但是一直沒有形成非常規范的課程模塊。在探索的過程中從教學內容方面逐漸形成了新的課程模塊劃分，從教學方法方面提出了一些小建議，供從事該課程教學的教師參考。移動互聯網時代的網頁設計與制作課程的內容設計是核心，講授方法是內容展開的手段。為了更好地開展該課程的課堂教學，筆者希望能夠在該課程中引入計算思維的理念，使學生從該課程的學習中真正獲取實惠，真正與新時代的技術接軌。

參考文獻：

[1]神飛，響應式網頁設計[EB/OL].（2011-11-02）[2012-11-16].http：//www.qianduan.net/responsive-web-design，html.

[2]CCTIME飛象網，后喬布斯時代，HTML5將改變移動互聯網[EB/OL].（2011-09-05）[2012-11-16].http：//www.cctime.com/html/2011-9-5/2011951541185164.htm.

[3]陳小燕，謝強，丁秋林，淺談項目式教學在網頁設計與制作中的應用[J]，電腦學習，2010（1）：77-79.

[4]莫梅鋒，劉瀠檑，論移動互聯網時代新聞類課程的教學互動[J]，現代遠距離教育，2010（4）：38-40.

（見習編輯：劉麗麗）