《網頁設計與制作》課程的探索與實踐研究

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

關鍵詞：網頁設計與制作；Web應用程序設計；課程改革

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

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

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

1、引言

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

2、《網頁設計與制作》課程現狀及存在問題

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

3、教學改革措施

3.1課程定位與目標

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

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

3.2優化教學內容

以往《網頁設計與制作》的教學內容大多是按網頁三劍客展開，而以向Web應用程序設計的過渡為導向的課程改革需要將《網頁設計與制作》課程內容與Web應用程序開發的動態頁面要求相結合，滿足日后的Web應用程序設計要求。

教學內容主要包括：①網頁圖片處理；②網頁動畫制作；③基于HTML+CSS+Div+Javascript網頁設計。

借助Dreamweaver進行可視化頁面設計轉向純代碼的編寫，全部靠手工編寫代碼來設計網頁頁面。

3.3教學方法改革

教學方法由傳統的演示法向多樣式教學方法發展，主要有以下4種：

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

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

項目教學法：將實際的網站設計項目直接在課堂再現，以項目為驅動，帶動各知識點，讓學生邊學邊練。讓學生了解網站開發的流程，也促進各知識點的應用，快速吸收所學

內容。

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

《網頁設計與制作》課程是《Web應用程序設計》的先修課程，學生通過《網頁設計與制作》課程的學習，設計出的網頁成果要能直接移植或方便的移植到Web應用程序設計中來，而不能出現設計出的網頁成果與《Web應用程序設計》無關，與后續課程脫節。

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

對于基于.net的Web應用程序，在 Visual Studio環境下進行網頁設計，實現網頁設計向基于.net的Web應用程序的直接移植；對于基于JSP開發的Web應用程序，在Eclipse環境下進行網頁設計，實現網頁設計向基于JSP的Web應用程序的直接移植。

4、結語

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

參考文獻：

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

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

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

[4] 張梅.基于網頁設計與制作的課程改革新趨勢分析與研究.現代企業教育，2012，10：386-387.