摘 要：為了適應市場對“網(wǎng)頁設(shè)計制作人員”的崗位需求和網(wǎng)頁設(shè)計成果向《Web應用程序設(shè)計》課程的過渡，針對目前《網(wǎng)頁設(shè)計與制作》課程存在的問題，對《網(wǎng)頁設(shè)計與制作》課程的教學目標、教學內(nèi)容、教學方法等多個方面進行了改革與實踐。

關(guān)鍵詞：網(wǎng)頁設(shè)計與制作；Web應用程序設(shè)計；課程改革

作者簡介：張慧（1979-），女，湖北黃岡人，講師，碩士，計算機軟件與理論，復雜系統(tǒng)建模。

[中圖分類號]：G633.67 [文獻標識碼]：A

[文章編號]：1002-2139（2013）-20--01

1、引言

《網(wǎng)頁設(shè)計與制作》課程是《Web應用程序設(shè)計》課程的先修課程，為Web應用程序的頁面布局和界面設(shè)計打基礎(chǔ)。為了適應市場對“網(wǎng)頁設(shè)計制作人員”的崗位需求和為了實現(xiàn)網(wǎng)頁設(shè)計到Web應用程序設(shè)計的過渡，有必要對現(xiàn)有的《網(wǎng)頁設(shè)計與制作》課程進行改革，使學生能適應“網(wǎng)頁設(shè)計制作人員”的崗位需求并能將《網(wǎng)頁設(shè)計與制作》課程里學習的實踐成果能直接應用于基于.net或JSP的Web應用程序設(shè)計。

2、《網(wǎng)頁設(shè)計與制作》課程現(xiàn)狀及存在問題

筆者所在學校的計算機科學與技術(shù)、軟件工程、網(wǎng)絡工程三個專業(yè)都開設(shè)了《網(wǎng)頁設(shè)計與制作》課程。傳統(tǒng)的網(wǎng)頁設(shè)計與制作課程主要基于網(wǎng)頁三劍客Dreamweaver、Fireworks、Flash制作出精美的網(wǎng)頁。這些網(wǎng)頁內(nèi)容豐富多彩，結(jié)構(gòu)復雜，能滿足靜態(tài)網(wǎng)頁的頁面需要，但這些網(wǎng)頁不能直接應用于基于.net或JSP的Web應用程序開發(fā)中，不能滿足動態(tài)網(wǎng)頁的頁面需求。Web應用程序開發(fā)，是通過后臺數(shù)據(jù)庫與Web服務器的信息交換，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務?！禬eb應用程序設(shè)計》課程有兩種主流的開發(fā)技術(shù)：.net與JSP。在《Web應用程序設(shè)計》課程中，主要講解.net技術(shù)與JSP技術(shù)，而不講解頁面設(shè)計，需要學生將《網(wǎng)頁設(shè)計與制作》課程學習到的網(wǎng)頁設(shè)計知識融合到Web應用程序設(shè)計中來，使動態(tài)頁面既有數(shù)據(jù)庫的內(nèi)容，又界面美觀。而學生在傳統(tǒng)的《網(wǎng)頁設(shè)計與制作》課程里學習的頁面知識不能直接應用于Web應用程序設(shè)計。有必要對《網(wǎng)頁設(shè)計與制作》課程進行教學改革，增加CSS，Div，Javascript，AJAX等內(nèi)容，以完成學生向Web應用程序設(shè)計的過渡。

3、教學改革措施

3.1課程定位與目標

《網(wǎng)頁設(shè)計與制作》課程的實踐性較強，是網(wǎng)絡工程專業(yè)的核心課程，是計算機科學與技術(shù)、軟件工程專業(yè)的選修課。本課程以計算機導論、計算機程序設(shè)計語言為先修課程，以培養(yǎng)學生實際動手能力為目標，使學生具備網(wǎng)頁素材搜集、網(wǎng)頁元素制作、網(wǎng)站布局和規(guī)劃、腳本代碼編寫、網(wǎng)站發(fā)布、網(wǎng)絡建設(shè)管理與維護等知識與技能，并培養(yǎng)學生團隊協(xié)作能力、溝通能力、分析問題能力、解決問題能力，同時也為后續(xù)課程《Web應用程序設(shè)計》的學習奠定基礎(chǔ)和實現(xiàn)向Web應用程序開發(fā)的順利過渡。

課程目標包括：①理解網(wǎng)站的工作原理，學會構(gòu)建網(wǎng)站；②熟練掌握Photoshop、Fireworks、Flash等軟件處理網(wǎng)頁素材；③熟練使用CSS、Div進行網(wǎng)頁設(shè)計；④掌握網(wǎng)頁腳本語言的使用方法；⑤培養(yǎng)學生做出具有一定水準的網(wǎng)頁（包括Javascript，CSS+Div）。

3.2優(yōu)化教學內(nèi)容

以往《網(wǎng)頁設(shè)計與制作》的教學內(nèi)容大多是按網(wǎng)頁三劍客展開，而以向Web應用程序設(shè)計的過渡為導向的課程改革需要將《網(wǎng)頁設(shè)計與制作》課程內(nèi)容與Web應用程序開發(fā)的動態(tài)頁面要求相結(jié)合，滿足日后的Web應用程序設(shè)計要求。

教學內(nèi)容主要包括：①網(wǎng)頁圖片處理；②網(wǎng)頁動畫制作；③基于HTML+CSS+Div+Javascript網(wǎng)頁設(shè)計。

借助Dreamweaver進行可視化頁面設(shè)計轉(zhuǎn)向純代碼的編寫，全部靠手工編寫代碼來設(shè)計網(wǎng)頁頁面。

3.3教學方法改革

教學方法由傳統(tǒng)的演示法向多樣式教學方法發(fā)展，主要有以下4種：

啟發(fā)式-模仿法：初學時需要大量瀏覽一些優(yōu)秀網(wǎng)站案例。通過欣賞國內(nèi)外優(yōu)秀網(wǎng)站，讓學生在外觀視覺的享受中感受網(wǎng)頁設(shè)計領(lǐng)域的奇妙，培養(yǎng)學習興趣。并選中幾個案例，進行一步一步地模仿設(shè)計。

任務驅(qū)動法：每個學習案例都布置了學習任務，課程體系結(jié)構(gòu)以任務為主線，貫穿整個學習過程。教師在課堂講解理論知識后，布置學習任務，學生自己動手獨立完成學習任務，將理論與實踐相結(jié)合，使理論知識得以實踐。

項目教學法：將實際的網(wǎng)站設(shè)計項目直接在課堂再現(xiàn)，以項目為驅(qū)動，帶動各知識點，讓學生邊學邊練。讓學生了解網(wǎng)站開發(fā)的流程，也促進各知識點的應用，快速吸收所學

內(nèi)容。

3.5學生設(shè)計成果能向《Web應用程序設(shè)計》課程過渡

《網(wǎng)頁設(shè)計與制作》課程是《Web應用程序設(shè)計》的先修課程，學生通過《網(wǎng)頁設(shè)計與制作》課程的學習，設(shè)計出的網(wǎng)頁成果要能直接移植或方便的移植到Web應用程序設(shè)計中來，而不能出現(xiàn)設(shè)計出的網(wǎng)頁成果與《Web應用程序設(shè)計》無關(guān)，與后續(xù)課程脫節(jié)。

方法：（1）利用Dreamweaver等網(wǎng)頁編輯軟件，純手工編寫代碼，保存為后綴名為html或htm的文件，通過不同的瀏覽器測試頁面的預覽效果。日后通過修改文件后綴名來適應.net開發(fā)或JSP開發(fā)，實現(xiàn)向Web應用程序設(shè)計的移植。

對于基于.net的Web應用程序，在 Visual Studio環(huán)境下進行網(wǎng)頁設(shè)計，實現(xiàn)網(wǎng)頁設(shè)計向基于.net的Web應用程序的直接移植；對于基于JSP開發(fā)的Web應用程序，在Eclipse環(huán)境下進行網(wǎng)頁設(shè)計，實現(xiàn)網(wǎng)頁設(shè)計向基于JSP的Web應用程序的直接移植。

4、結(jié)語

通過《網(wǎng)頁設(shè)計與制作》課程教學改革與實踐，課程結(jié)課后學生都能夠獨立完成基于HTML+CSS+Div+Javascript的小型網(wǎng)站網(wǎng)頁的設(shè)計，且這些網(wǎng)頁要能直接移植或方便的移植到Web應用程序設(shè)計中，實現(xiàn)向Web應用程序設(shè)計的完美過渡。通過課程改革，提高了學生的學習興趣，鍛煉了他們的實際動手實踐能力，并為后續(xù)《Web應用程序設(shè)計》的頁面設(shè)計打下良好的基礎(chǔ)。

參考文獻：

[1] 彭莉，張道軍，高好良.《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)》課程教學改革與實踐.軟件導刊，2013，12（2）：170-172.

[2] 董玉蘭.教師引導 學生探究——《網(wǎng)頁修飾》教學設(shè)計.課程教育研究，2013.

[3] 閆奇峰，張莉平.高校《網(wǎng)頁設(shè)計與制作》課程的教學改革與探析.計算機教學，2012，8：165-166.

[4] 張梅.基于網(wǎng)頁設(shè)計與制作的課程改革新趨勢分析與研究.現(xiàn)代企業(yè)教育，2012，10：386-387.