《網(wǎng)頁設(shè)計與制作》課程的探索與實踐研究

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

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

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

[中圖分類號]：G633.67 [文獻(xiàn)標(biāo)識碼]：A

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

1、引言

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

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

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

3、教學(xué)改革措施

3.1課程定位與目標(biāo)

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

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

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

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

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

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

3.3教學(xué)方法改革

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

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

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

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

內(nèi)容。

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

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

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

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

4、結(jié)語

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

參考文獻(xiàn)：

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

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

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

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