王兆華　王海波

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

關鍵詞：移動互聯(lián)網(wǎng)；網(wǎng)頁設計與制作；Web新技術

0.引言

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

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

1.傳統(tǒng)互聯(lián)網(wǎng)與移動互聯(lián)網(wǎng)對網(wǎng)頁設計與制作技術的需求

1.1傳統(tǒng)互聯(lián)網(wǎng)的網(wǎng)頁設計與制作技術

互聯(lián)網(wǎng)的發(fā)展經(jīng)歷了從Web 1.0到Web 2.0的飛速發(fā)展，直到目前的Web 3.0。而網(wǎng)頁設計技術也在不斷地提高。

Web 1.0是互聯(lián)網(wǎng)的初期，主要采用HTML做的靜態(tài)網(wǎng)頁，功能主要用于宣傳。使用的主要技術是靜態(tài)網(wǎng)頁開發(fā)技術，比如HTML、DHTML、XML、JavaScript等。靜態(tài)網(wǎng)頁的優(yōu)點是訪問速度快，安全性高，漏洞少；缺點是交互性比較差。當然在Web 1.0時代也陸續(xù)引入了動態(tài)網(wǎng)頁技術。

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

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

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

1.2移動互聯(lián)網(wǎng)的網(wǎng)頁設計與制作技術

移動互聯(lián)網(wǎng)就是移動Internet，能讓用戶在移動中通過移動設備隨時、隨地訪問Internet，獲取信息，進行商務、娛樂等各種網(wǎng)絡服務。為了提供移動服務，移動互聯(lián)網(wǎng)和傳統(tǒng)網(wǎng)絡在終端設備上有很大的改變。移動互聯(lián)網(wǎng)因其高便攜性、應用方便和隱私性等特點，越來越受網(wǎng)民的歡迎。2012年中國移動互聯(lián)網(wǎng)網(wǎng)民數(shù)量預計將達4.51億?，F(xiàn)在移動互聯(lián)網(wǎng)的流量發(fā)展趨勢跟10年前的互聯(lián)網(wǎng)基本上如出一轍?！鞍俣纫苿踊ヂ?lián)網(wǎng)發(fā)展趨勢報告2012 Q1”預言在未來很長時間內(nèi)，移動互聯(lián)網(wǎng)還將繼續(xù)保持強勢的追趕態(tài)勢。

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

2.傳統(tǒng)的網(wǎng)頁設計與制作課程內(nèi)容

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

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

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

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

（4）動態(tài)網(wǎng)頁開發(fā)技術簡單介紹：介紹一種動態(tài)網(wǎng)頁制作技術，比如ASP、PHP或者JSP等，鑒于ASP容易掌握，大多數(shù)院校會選擇講解ASP技術，但所講內(nèi)容都比較基礎。

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

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

3.移動互聯(lián)網(wǎng)時代課程教學內(nèi)容的改革

3.1教學內(nèi)容模塊方案設計

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

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

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

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

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

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

3.2Web新技術的引入

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

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

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

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

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

（5）在需要體現(xiàn)移動互聯(lián)網(wǎng)新技術的章節(jié)，抓住某一個重點技術合理展開，不要面面俱到。

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

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

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

4.移動互聯(lián)網(wǎng)時代教學方法的改革

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

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

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

5.結語

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

參考文獻：

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

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

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

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

（見習編輯：劉麗麗）