Web程序設(shè)計課程中分階段專題模式教學(xué)的改革與實踐

張宜浩，劉小洋，董世都

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

0 引言

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

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

1 Web程序設(shè)計課程面臨的挑戰(zhàn)

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

就課程教學(xué)而言，當(dāng)前較常使用的教學(xué)方法有講授法、基于問題的教學(xué)法、任務(wù)驅(qū)動教學(xué)法、項目教學(xué)法等[1]。講授法[3]是教師通過語言表達(dá)向?qū)W生傳授知識、培養(yǎng)能力、進(jìn)行教育的方法?；趩栴}的教學(xué)法[3]則是把教學(xué)內(nèi)容巧妙地設(shè)計成一個個的問題，由教師引導(dǎo)學(xué)生思考問題的起源、探討問題的解決方法，讓學(xué)生帶著問題學(xué)習(xí)。任務(wù)驅(qū)動教學(xué)法[3]是由教師把教學(xué)內(nèi)容設(shè)計成相應(yīng)的任務(wù)，然后圍繞任務(wù)展開教學(xué)。項目教學(xué)法[3]通過“項目”的形式進(jìn)行教學(xué)，由教師指導(dǎo)、學(xué)生獨立完成一個相對獨立項目的全過程，在此過程中學(xué)生唱主角，教師唱配角；在教師制定合理的項目后，由學(xué)生負(fù)責(zé)搜集資料、設(shè)計并實施項目的全過程。

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

2 Web程序設(shè)計中分階段專題教學(xué)模式探討

在Web程序設(shè)計課程中，根據(jù)教學(xué)內(nèi)容，將整個教學(xué)過程分為Web設(shè)計理論知識和實踐、網(wǎng)絡(luò)的腳本語言、交互式網(wǎng)頁開發(fā)技術(shù)、綜合項目開發(fā)與實戰(zhàn)以及網(wǎng)頁開發(fā)前沿技術(shù)等5個專題模式[4]。本課程的具體專題教學(xué)安排如表1所示。

表1 Web程序設(shè)計課程的專題教學(xué)安排

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

⑴ Web設(shè)計理論知識和實踐專題：以教師講授和微課的方式，學(xué)習(xí)Html和CSS基礎(chǔ)知識，并在實踐環(huán)節(jié)要求學(xué)習(xí)獨自完成個人簡歷的Web頁面（學(xué)生比較感興趣的主題），來練習(xí)Html標(biāo)簽和CSS技術(shù)。

⑵ 網(wǎng)絡(luò)腳本語言專題：以教師輔導(dǎo)學(xué)生為主體的方式，學(xué)習(xí)JavaScript和JQuery編程，通過任務(wù)驅(qū)動的方法讓學(xué)生在課后自學(xué)相關(guān)的語法，并在實踐中要求學(xué)生完成至少5道以上的JavaScript和jQuery編程題目。

交互式網(wǎng)頁開發(fā)技術(shù)專題：教師講授AJAX基本原理，并在課堂上編寫AJAX實現(xiàn)原理的代碼；在實踐環(huán)節(jié)，要求學(xué)生完成基于AJAX的姓氏建議、用戶名判斷、聯(lián)動下拉菜單等三個項目中的至少二個。

⑶ 綜合網(wǎng)站開發(fā)與實戰(zhàn)專題：教師講授網(wǎng)站的布局和人機交互中的Web界面設(shè)計，并以微課的形式學(xué)習(xí)Web UI網(wǎng)頁界面設(shè)計基礎(chǔ)和進(jìn)階；在實踐環(huán)節(jié)，給學(xué)生分發(fā)一些上屆學(xué)習(xí)的優(yōu)秀網(wǎng)站案例，要求每個學(xué)生利用實驗課和課外時間完成一個有鮮明主題的綜合性網(wǎng)站。

⑷ 網(wǎng)頁開發(fā)前沿技術(shù)專題：以教師講授和微課方法，讓學(xué)生學(xué)習(xí)jQuery EasyUI、Angular JS、Css3、Html5等Web開發(fā)前沿技術(shù)。并結(jié)合綜合網(wǎng)站開發(fā)實戰(zhàn)專題，讓學(xué)生將上述技術(shù)用于綜合網(wǎng)站開發(fā)中。

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

3 考核模式探討與效果

結(jié)合Web程序設(shè)計課程的特點，本門課程采用考勤、階段性任務(wù)考核、綜合項目答辯、項目文檔檢查、優(yōu)秀作品展示等相結(jié)合的方式進(jìn)行考核[5]。

⑴ 考勤：以點名和學(xué)生在課程上的互動情況為依據(jù)。

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

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

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

⑸ 優(yōu)秀作品展示：要求申優(yōu)的學(xué)生或階段檢查過程中發(fā)現(xiàn)的優(yōu)秀作品進(jìn)行公開答辯，以期達(dá)到同學(xué)之間交流Web開發(fā)技術(shù)和輔助教學(xué)的目的。

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

4 結(jié)束語

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

參考文獻(xiàn)(References):

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

[2]李華,張俊星,謝輝.一種計算機網(wǎng)絡(luò)課的教學(xué)方法設(shè)計[J].計算機教育,2012.1:72-74

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

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

[5]牛文穎.《網(wǎng)頁設(shè)計與制作》考核模式改革與實踐[J].計算機教學(xué),2018.1:98-98