Web程序設計課程中分階段專題模式教學的改革與實踐

張宜浩，劉小洋，董世都

(重慶理工大學計算機科學與工程學院，重慶 400054)

0 引言

隨著網絡和信息技術的迅猛發展，Web成為當前互聯網中信息交換和共享的最有效方式，同時它也提供了Internet上的瀏覽、檢索和查找信息的有效方式。當前階段，網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式也為用戶提供了更好的使用體驗。互聯網發展前期，單純的只憑借Photoshop和Dreamweaver就可以制作網頁，現在看來只掌握這些工具技術已經遠遠不夠了，Web2.0甚至3.0的發展也對當前的Web前端開發提出了更高的要求。

在現階段，一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度。很多大公司即使開出高薪也很難招聘到理想的前端開發工程師。鑒于當前的網頁制作無論是在開發難度上，還是在開發方式上，都更接近傳統的網站后臺開發，所以現在更傾向于稱其為Web前端開發。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。因此，如何培養適應當前社會需要的優秀Web前端開發工程師，給Web程序設計課程提出了非常嚴峻的挑戰。

1 Web程序設計課程面臨的挑戰

根據Web程序設計課程的教學要求，學生要了解Web開發的基本概念、開發方法，熟練使用Web前臺開發技術、開發工具[1]。重點是要熟練掌握HTML、CSS、JavaScript、AJAX等技術；同時，學生如果想開發出優秀的Web作品，還要學習諸如jQuery、CSS3、Html5、jQuery EasyUI、Angular JS等技術，甚至還要求學生有一定的圖片處理基礎（如會使用Photoshop、Fireworks等處理圖片工具）和美術基礎。就Web程序前端開發行業而言，正如許多人說的那樣，其入門的門檻很低，但是要成為一名優秀的Web前端開發工程師，要學習和掌握的技術非常多。當前，大多數Web前端開發人員都停留在會用的階段，而后面的學習曲線會越來越陡峭，每前進一步都非常困難。

就課程教學而言，當前較常使用的教學方法有講授法、基于問題的教學法、任務驅動教學法、項目教學法等[1]。講授法[3]是教師通過語言表達向學生傳授知識、培養能力、進行教育的方法。基于問題的教學法[3]則是把教學內容巧妙地設計成一個個的問題，由教師引導學生思考問題的起源、探討問題的解決方法，讓學生帶著問題學習。任務驅動教學法[3]是由教師把教學內容設計成相應的任務，然后圍繞任務展開教學。項目教學法[3]通過“項目”的形式進行教學，由教師指導、學生獨立完成一個相對獨立項目的全過程，在此過程中學生唱主角，教師唱配角；在教師制定合理的項目后，由學生負責搜集資料、設計并實施項目的全過程。

結合Web程序設計課程的特點以及課程大綱的要求，講授法和基于問題的教學法顯然不能適用Web教學的要求。任務驅動教學法強調由教師指導、學生主導來完成相應的教學任務，比較適合Web程序設計課程中一個個獨立專題類技術的學習；而項目教學法則適合于開發一個完整的、綜合性強的Web程序，對于初學階段的本科生而言，要涉及整個Web開發過程中多個知識點的理論與實踐，這種教學實踐混合體式的項目教學方法也是不能滿足要求的。綜上，鑒于上述四種教學方法都不太適合該課程的教學和達到培養優秀Web前端開發工程師的目標，提出了Web程序設計課程中結合任務驅動和項目驅動的分階段專題模式教學與考核的改革與實踐。

2 Web程序設計中分階段專題教學模式探討

在Web程序設計課程中，根據教學內容，將整個教學過程分為Web設計理論知識和實踐、網絡的腳本語言、交互式網頁開發技術、綜合項目開發與實戰以及網頁開發前沿技術等5個專題模式[4]。本課程的具體專題教學安排如表1所示。

表1 Web程序設計課程的專題教學安排

根據表1的分階段專題模式教學過程，我們在各教學環節靈活運用多元化教學法，其中理論知識學習、及交互式網頁開發技術專題主要采用講授法，同時針對重要知識點借助網絡上的微課或教師自己錄制的微課；而在網絡腳本語言、綜合項目開發與實戰、網頁開發前沿技術專題以教師輔導、學生自學為主。在實踐教學過程中，主要通過任務驅動教學法和項目驅動法，以學生為主體，教師輔導的方式來達到最終的實踐目的。整個教學過程注重實踐教學，充分體現學生的主體性。具體如下：

⑴ Web設計理論知識和實踐專題：以教師講授和微課的方式，學習Html和CSS基礎知識，并在實踐環節要求學習獨自完成個人簡歷的Web頁面（學生比較感興趣的主題），來練習Html標簽和CSS技術。

⑵ 網絡腳本語言專題：以教師輔導學生為主體的方式，學習JavaScript和JQuery編程，通過任務驅動的方法讓學生在課后自學相關的語法，并在實踐中要求學生完成至少5道以上的JavaScript和jQuery編程題目。

交互式網頁開發技術專題：教師講授AJAX基本原理，并在課堂上編寫AJAX實現原理的代碼；在實踐環節，要求學生完成基于AJAX的姓氏建議、用戶名判斷、聯動下拉菜單等三個項目中的至少二個。

⑶ 綜合網站開發與實戰專題：教師講授網站的布局和人機交互中的Web界面設計，并以微課的形式學習Web UI網頁界面設計基礎和進階；在實踐環節，給學生分發一些上屆學習的優秀網站案例，要求每個學生利用實驗課和課外時間完成一個有鮮明主題的綜合性網站。

⑷ 網頁開發前沿技術專題：以教師講授和微課方法，讓學生學習jQuery EasyUI、Angular JS、Css3、Html5等Web開發前沿技術。并結合綜合網站開發實戰專題，讓學生將上述技術用于綜合網站開發中。

⑸ 優秀作品展示與講解專題：在上述五個專題模式基礎上，課程特別增加了優秀學生作品展示與講解專題。通過在學生綜合網站項目中開展競賽與評比，選取出較優秀的Web網站項目，讓其開發者在課堂上公開給其他同學演示和講解，并鼓勵在場的學生自評和提問，以達到同學之間交流和學習Web前端開發技術的目的。在此階段，也讓這些優秀作品學生錄制視頻，讓學生互相學習，同時也給后屆教學提供優良教案和素材。

3 考核模式探討與效果

結合Web程序設計課程的特點，本門課程采用考勤、階段性任務考核、綜合項目答辯、項目文檔檢查、優秀作品展示等相結合的方式進行考核[5]。

⑴ 考勤：以點名和學生在課程上的互動情況為依據。

⑵ 階段任務考核：完成符合Web設計理論知識和實踐專題要求的個人簡歷Web頁面，完成網絡腳本語言專題要求的至少五道以上的JavaScript和jQuery編程題目，并完成交互式網頁開發技術專題要求的三道AJAX題目中的二道及以上。

⑶ 綜合項目答辯：綜合利用本門課的所學知識及學生自學為主的網頁開發前沿技術，完成一個具有鮮明主題的綜合性網站，要求界面美觀、內容詳實、并盡可能多地應用Web開發技術；答辯階段，要求每個同學演示作品內容并回答老師提出的問題。

⑷ 項目文檔檢查：完成上述的階段任務和綜合項目的說明文檔，教師針對文檔的內容、條理、格式等方面進行打分。

⑸ 優秀作品展示：要求申優的學生或階段檢查過程中發現的優秀作品進行公開答辯，以期達到同學之間交流Web開發技術和輔助教學的目的。

⑹ 經過三年的教學改革，從學生期未成績和教學反饋情況看，該種考核模式取得了較好的效果。從教學統計數據來看，學生的出勤率顯著提高，課堂上學生的學習主動性較強，學習興趣濃厚；階段性考核貫穿于整個學期，學生每完成一個學習任務都可以看到自己的成果；及學習效果較好，有70%的學生期終考試成績是良好以上，且能開發出較優秀的Web作品。

4 結束語

根據Web程序設計課程的特點，本文探討了一種結合任務驅動和項目驅動的分階段專題模式教學改革方案，并探討了相應的教學考核方式。經過多年的實踐和反饋，盡管該教學模式達到了較好的效果，但該教學模式比較多的強調學生的參與和自學能力，對自主能動性較差與動手能力不強的學生效果并不好，期望在今后的教學實踐中逐步探索并形成針對不同類型學生的多樣化教學模式。

參考文獻(References):

[1]楊孜茁,方志軍,黃勃.《Web程序設計》課程建設策略研究[J].軟件導刊教育技術,2017.16(1):18-20

[2]李華,張俊星,謝輝.一種計算機網絡課的教學方法設計[J].計算機教育,2012.1:72-74

[3]盧慧,李華.階段式多元化教學法在Web程序設計課程中的應用[J].計算機教育,2015.22:40-43

[4]郭冬梅.“Web程序設計”案例驅動教學研究[J].安慶師范學院學報(自然科學版),2016.1:146-148

[5]牛文穎.《網頁設計與制作》考核模式改革與實踐[J].計算機教學,2018.1:98-98