摘要：本文探索了線上線下混合教學(xué)模式，并以“Web前端開(kāi)發(fā)”課程為例，從課程資源建設(shè)、教學(xué)方式、實(shí)驗(yàn)與實(shí)訓(xùn)及考核四個(gè)方面進(jìn)行線上線下融合改革，以期能夠提升學(xué)生學(xué)習(xí)的參與感與成就感。

關(guān)鍵詞：Web前端開(kāi)發(fā);混合式教學(xué);教學(xué)內(nèi)容;教學(xué)方式;實(shí)踐

中圖分類號(hào)：G717? 文獻(xiàn)標(biāo)識(shí)碼：A? 論文編號(hào)：1674-2117（2021）22-0104-05

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，Web開(kāi)發(fā)分工越來(lái)越細(xì)，出現(xiàn)了Web前端開(kāi)發(fā)、移動(dòng)開(kāi)發(fā)、后端開(kāi)發(fā)等崗位，它們分工明確且緊密配合。從當(dāng)前互聯(lián)網(wǎng)公司的就職要求來(lái)看，除了必須掌握HTML5、CSS3和JavaScript等的基礎(chǔ)技能外，還需要熟悉vue、react等前端框架，熟悉后臺(tái)管理系統(tǒng)的開(kāi)發(fā)全流程。針對(duì)Web前端開(kāi)發(fā)人才的需求，筆者所在學(xué)院計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)開(kāi)設(shè)了“Web前端開(kāi)發(fā)”課程，但課程內(nèi)容總體比較滯后，教學(xué)方法比較單一，因此，筆者結(jié)合自身的教學(xué)實(shí)踐，提出了線上線下混合式教學(xué)模式，從課程的教學(xué)內(nèi)容、教學(xué)方法、課程實(shí)踐、課程考核方式四個(gè)方面進(jìn)行改革與實(shí)踐，以提升學(xué)生的學(xué)習(xí)興趣和動(dòng)手能力。[1]

● 課程設(shè)計(jì)

1.教學(xué)中引入思政元素

立德樹(shù)人是永恒的主題，教師需在教學(xué)中加入思政元素，如前端技術(shù)涉及界面設(shè)計(jì)，可以美育先行;一種界面效果有多種實(shí)現(xiàn)方法，需要培養(yǎng)學(xué)生多角度思考和分析問(wèn)題的能力;代碼的設(shè)計(jì)與調(diào)試過(guò)程需要培養(yǎng)學(xué)生的工匠精神，注入家國(guó)情懷，培養(yǎng)正確的世界觀、人生觀、價(jià)值觀以及勇于挑戰(zhàn)困難的精神。[2]

2.教學(xué)內(nèi)容改革

Web前端開(kāi)發(fā)技術(shù)所包含的內(nèi)容較多，目前主要以HTML+CSS+JavaScript為基礎(chǔ)課程，其知識(shí)面相對(duì)較廣，因而教學(xué)設(shè)計(jì)需要注重整體性，讓學(xué)生掌握多方面的知識(shí)，從而取得較好的教學(xué)質(zhì)量。同時(shí)，基于混合式的教學(xué)模式，建設(shè)多層次可擴(kuò)展的教學(xué)資源庫(kù)尤其重要。教學(xué)資源包括教學(xué)課件、上機(jī)指導(dǎo)手冊(cè)、實(shí)驗(yàn)庫(kù)、案例庫(kù)、試題庫(kù)、項(xiàng)目庫(kù)、教學(xué)視頻等，這些資源又分為基礎(chǔ)知識(shí)和提高知識(shí)。根據(jù)學(xué)生的不同基礎(chǔ)，逐級(jí)提高學(xué)生的水平。需要注意的是，課程內(nèi)容要與時(shí)俱進(jìn)、由淺入深，可以考慮將主流Web前端開(kāi)發(fā)技術(shù)引入課堂，要求學(xué)生至少掌握一種前端框架的使用方法，重點(diǎn)培養(yǎng)學(xué)生的實(shí)踐應(yīng)用、規(guī)范代碼編寫(xiě)等能力。[3]

3.教學(xué)方式的改革

（1）課前充分預(yù)習(xí)

課前學(xué)生通過(guò)視頻教程、PPT了解學(xué)習(xí)目標(biāo)，知道學(xué)習(xí)任務(wù)，記錄不懂的問(wèn)題，寫(xiě)下學(xué)習(xí)心得。教師端可以通過(guò)雨課堂記錄學(xué)生出勤情況，還可通過(guò)在線習(xí)題，了解學(xué)生自學(xué)后的知識(shí)掌握情況。

（2）課中交流討論

課中是對(duì)學(xué)生預(yù)習(xí)的檢驗(yàn)，教師提前審閱學(xué)生的心得體會(huì)，收集問(wèn)題，并把學(xué)生不理解的內(nèi)容在課堂上討論解決。教師可針對(duì)典型問(wèn)題提出最基本的解決方案，然后由學(xué)生討論，找到最佳解決方案。尤其在項(xiàng)目實(shí)踐過(guò)程中，定期開(kāi)展交流活動(dòng)，將編碼中典型的錯(cuò)誤或?qū)W生都困惑的知識(shí)點(diǎn)，通過(guò)界面效果、代碼展示開(kāi)展編程思路討論，為學(xué)生創(chuàng)造相互學(xué)習(xí)和交流的機(jī)會(huì)。

（3）課中問(wèn)題啟發(fā)

啟發(fā)式教學(xué)是教師經(jīng)常使用的教學(xué)方法之一，即由教師提出問(wèn)題引導(dǎo)學(xué)生思考，問(wèn)題要具備典型性和實(shí)際性。例如，在Web前端開(kāi)發(fā)中，教師展示表單的應(yīng)用場(chǎng)景，如去銀行柜臺(tái)填寫(xiě)開(kāi)卡申請(qǐng)單，填寫(xiě)網(wǎng)站注冊(cè)信息等，再提出問(wèn)題“如何在網(wǎng)頁(yè)中實(shí)現(xiàn)表單？”，并以各大網(wǎng)站的登錄頁(yè)面為例，引出頁(yè)面中的控件、表單的命名、數(shù)據(jù)傳送方式等知識(shí)點(diǎn)。由此可見(jiàn)，與實(shí)際相關(guān)聯(lián)的知識(shí)，可以讓學(xué)習(xí)服務(wù)于實(shí)際應(yīng)用，從應(yīng)用角度出發(fā)學(xué)習(xí)知識(shí)，學(xué)生也更有興趣。[4]

（4）課中案例講解

Web開(kāi)發(fā)離不開(kāi)對(duì)各種案例的講解，案例教學(xué)可引導(dǎo)學(xué)生將知識(shí)轉(zhuǎn)變?yōu)槟芰?。案例的設(shè)置要具有典型性和通用性，突出知識(shí)的重點(diǎn)和知識(shí)的應(yīng)用。例如，在講解JavaScript語(yǔ)法時(shí)，教師可以給出帶有錯(cuò)誤的完整代碼，要求學(xué)生找出錯(cuò)誤，引導(dǎo)學(xué)生注意語(yǔ)法細(xì)節(jié)。又如，導(dǎo)航欄是現(xiàn)在的主流網(wǎng)站都具有的功能，學(xué)生拿到案例后，先要進(jìn)行分析，再經(jīng)過(guò)小組討論，提出解決問(wèn)題的方案。教師再根據(jù)學(xué)生不同的理解，通過(guò)案例分析、知識(shí)點(diǎn)的分解、動(dòng)畫(huà)演示等一系列方法，消除學(xué)生的疑惑，讓學(xué)生掌握Web前端開(kāi)發(fā)相關(guān)技術(shù)，這樣才能將知識(shí)內(nèi)化，提升學(xué)習(xí)效率。

（5）課中原理剖析

教學(xué)中，教師圍繞問(wèn)題要點(diǎn)解析背后原理，并在講解JavaScript中的變量時(shí)引出問(wèn)題：直接輸出一個(gè)a的值，為什么會(huì)出錯(cuò)？如果后面再用var來(lái)聲明變量a，為什么沒(méi)有出錯(cuò)？在學(xué)生討論之后再講解JavaScript引擎的工作機(jī)制。在進(jìn)行原理講解前，教師可以使用程序編輯器現(xiàn)場(chǎng)展示具體操作過(guò)程及相關(guān)代碼運(yùn)行后的具體效果。需要注意的是，在進(jìn)行原理講解的過(guò)程中，需要與提出的問(wèn)題高度關(guān)聯(lián)，結(jié)合所提出問(wèn)題的具體情況進(jìn)行教學(xué)，分步驟講解，最后還需要進(jìn)行知識(shí)的歸納總結(jié)，給出參考代碼等輔助學(xué)生的后續(xù)實(shí)踐操作。

（6）課后在線作業(yè)答疑及成果展示

教師通過(guò)雨課堂可查看課后作業(yè)，客觀題可以要求學(xué)生在線回答提交，程序題可將源代碼或截圖發(fā)布到班級(jí)QQ群。另外，學(xué)生遇到的問(wèn)題也可通過(guò)雨課堂提出評(píng)論反饋，或通過(guò)QQ群、微信群等即時(shí)通信工具進(jìn)行交流和答疑。最后，把每次作業(yè)中的優(yōu)秀作品放到教學(xué)平臺(tái)上展示，方便學(xué)生瀏覽學(xué)習(xí)，提升學(xué)生的成就感。

4.實(shí)驗(yàn)與實(shí)訓(xùn)改革

“Web前端開(kāi)發(fā)”課程的實(shí)踐性非常強(qiáng)，學(xué)生需要通過(guò)寫(xiě)代碼，調(diào)試代碼，不斷地總結(jié)才能獲取技術(shù)的積累。但學(xué)院里規(guī)定這門(mén)課程的上機(jī)課僅16課時(shí)，學(xué)生要在短時(shí)間內(nèi)做到熟練開(kāi)發(fā)項(xiàng)目是有難度，鑒于學(xué)生動(dòng)手能力參差不齊、個(gè)人的就業(yè)方向不同等因素，筆者采取了因材施教的方式開(kāi)展實(shí)踐教學(xué)。

（1）課內(nèi)實(shí)驗(yàn)

從培養(yǎng)學(xué)生基本動(dòng)手能力的角度出發(fā)，實(shí)驗(yàn)設(shè)置由易到難，以下要求是每個(gè)學(xué)生都必須達(dá)到的：①能看懂課件、教材中的示例代碼;②分析以上示例代碼，明白代碼設(shè)計(jì)的邏輯性，參照所給示例代碼上機(jī)調(diào)試;③獨(dú)立思考完成單一效果的編碼工作，如導(dǎo)航欄;④用不同的方式實(shí)現(xiàn)這單一效果，如同一個(gè)布局效果，可以用表格展示，也可以用Div+CSS布局來(lái)展示商品信息，又如輪播圖可以用CSS實(shí)現(xiàn)，也可以用JavaScript實(shí)現(xiàn)，進(jìn)而達(dá)到訓(xùn)練學(xué)生不同角度思考問(wèn)題和解決問(wèn)題的能力;⑤完成一個(gè)復(fù)雜的效果，如用Javascript操作DOM在前端進(jìn)行增刪改，在交互編程訓(xùn)練中培養(yǎng)學(xué)生的編程思維;⑥模擬現(xiàn)實(shí)作品的實(shí)驗(yàn)，將現(xiàn)實(shí)中網(wǎng)站的網(wǎng)頁(yè)截圖，先引導(dǎo)學(xué)生分析頁(yè)面結(jié)構(gòu)——如何用盒子模型及定位進(jìn)行頁(yè)面整體布局、每個(gè)盒子中用到哪些樣式整個(gè)頁(yè)面有響應(yīng)事件、有哪些交互的效果，并按照分析的結(jié)果自己寫(xiě)頁(yè)面代碼，完成后再參照其源碼，通過(guò)代碼對(duì)比，分析哪部分可以用不同的方法來(lái)實(shí)現(xiàn)，哪些地方原版的設(shè)計(jì)更好或自己的代碼比原版的更好，在前端開(kāi)發(fā)學(xué)習(xí)前期鼓勵(lì)學(xué)生模仿優(yōu)秀的作品，實(shí)現(xiàn)創(chuàng)作、吸收、改進(jìn)、創(chuàng)新;⑦模擬現(xiàn)實(shí)問(wèn)題的實(shí)驗(yàn)，如需要開(kāi)發(fā)一個(gè)學(xué)生管理系統(tǒng)，給出功能列表，鼓勵(lì)學(xué)生先做出初型框架，然后循序漸進(jìn)，逐步完善樣式和交互部分，在完善的過(guò)程中，依次加入任務(wù)的難度和復(fù)雜度，訓(xùn)練學(xué)生調(diào)試和查錯(cuò)的能力，使其在完善任務(wù)的過(guò)程中掌握所學(xué)的知識(shí)，提升學(xué)生Web前端開(kāi)發(fā)技術(shù)動(dòng)手能力。

模擬現(xiàn)實(shí)問(wèn)題的實(shí)驗(yàn)，學(xué)生除了要提交源碼，還需要提交書(shū)面形式的問(wèn)題描述、解決方法及編碼時(shí)的心得體會(huì)。教師可要求對(duì)學(xué)生進(jìn)行答辯，讓學(xué)生嘗試分解復(fù)雜問(wèn)題，然后尋找方法解決。教師從界面設(shè)計(jì)的合理性和代碼編寫(xiě)的邏輯性方面來(lái)進(jìn)行作業(yè)點(diǎn)評(píng)。

（2）實(shí)驗(yàn)室訓(xùn)練營(yíng)

學(xué)院實(shí)驗(yàn)室利用平時(shí)或寒暑假時(shí)間開(kāi)設(shè)訓(xùn)練營(yíng)，根據(jù)學(xué)生的基礎(chǔ)課程成績(jī)及訓(xùn)練營(yíng)的筆試、面試結(jié)果，選拔優(yōu)秀本科生入營(yíng)。學(xué)院將課程分為不同的等級(jí)（如表1），對(duì)課內(nèi)所學(xué)的基礎(chǔ)知識(shí)進(jìn)行拓展和延伸。實(shí)驗(yàn)室有專業(yè)的教師開(kāi)展培訓(xùn)講座、重點(diǎn)競(jìng)賽指導(dǎo)等，還會(huì)有一些前沿的項(xiàng)目或?qū)嶋H的工程實(shí)踐課題。在訓(xùn)練營(yíng)中，學(xué)生自由組合并推選組長(zhǎng)，在項(xiàng)目實(shí)踐過(guò)程中，組長(zhǎng)主要負(fù)責(zé)組內(nèi)各類學(xué)習(xí)事務(wù)安排、學(xué)習(xí)檢查、實(shí)驗(yàn)考核等工作。在合作過(guò)程中，組長(zhǎng)相當(dāng)于項(xiàng)目經(jīng)理，負(fù)責(zé)項(xiàng)目分工及進(jìn)度跟蹤匯報(bào)等工作，這樣能模擬企業(yè)的項(xiàng)目開(kāi)發(fā)，加深學(xué)生對(duì)專業(yè)知識(shí)的理解和鞏固，激發(fā)學(xué)生利用學(xué)到的知識(shí)解決實(shí)際問(wèn)題。

（3）以賽促學(xué)

學(xué)院重視為學(xué)生參加各類比賽的機(jī)會(huì)，促使學(xué)生通過(guò)參賽發(fā)現(xiàn)自己知識(shí)儲(chǔ)備的不足，進(jìn)而不斷完善，這樣既鞏固了基礎(chǔ)知識(shí)又拓展了前沿技術(shù)。另外，依照比賽的等級(jí)及獲獎(jiǎng)級(jí)別和名次，給予學(xué)生對(duì)應(yīng)的獎(jiǎng)金和創(chuàng)新學(xué)分，使學(xué)生更有成就感。

（4）校外實(shí)訓(xùn)

學(xué)校的上機(jī)實(shí)驗(yàn)任務(wù)設(shè)置相對(duì)比較簡(jiǎn)單，學(xué)生所學(xué)與企業(yè)所需略微有些脫節(jié)。因此，學(xué)院里開(kāi)設(shè)了為期2周的企業(yè)實(shí)訓(xùn)課，讓學(xué)生走進(jìn)企業(yè)，了解當(dāng)前最新的技術(shù)，跟著實(shí)踐經(jīng)驗(yàn)豐富的技術(shù)人員學(xué)習(xí)，這樣就培養(yǎng)了學(xué)生發(fā)現(xiàn)問(wèn)題和分析問(wèn)題的能力。校企合作有利于把企業(yè)先進(jìn)技術(shù)和學(xué)校理論相結(jié)合，實(shí)現(xiàn)全方位協(xié)同育人的實(shí)踐平臺(tái)，使學(xué)生畢業(yè)后能盡快融入工作中，勝任行業(yè)發(fā)展需求。[5]

● 考核改革

課程傳統(tǒng)的考核方式是平時(shí)成績(jī)+期末成績(jī)，但在混合式教學(xué)模式中，這種評(píng)價(jià)體系顯然是片面的。因此，需要改革考核方式，保證合理且公平地反映學(xué)生各方面的學(xué)習(xí)情況?？己朔绞街苯幼饔糜诮虒W(xué)效果，教師通過(guò)考核發(fā)現(xiàn)問(wèn)題，在此基礎(chǔ)上改進(jìn)、優(yōu)化教學(xué)方式，不斷提升學(xué)習(xí)效率和質(zhì)量，這是一個(gè)良性發(fā)展的過(guò)程。

筆者對(duì)原有考核內(nèi)容進(jìn)行了修改（如表2），考核成績(jī)主要分為四大塊，即平時(shí)成績(jī)+企業(yè)實(shí)訓(xùn)+期末大作業(yè)+競(jìng)賽附加分，平時(shí)成績(jī)又分為課前、課中、課后及過(guò)程性考核四個(gè)方面。期末大作業(yè)會(huì)提前2周發(fā)布題目及詳細(xì)功能要求，學(xué)生可以自由結(jié)合成小組（不超過(guò)3人）。個(gè)人和小組均需在規(guī)定的時(shí)間內(nèi)完成項(xiàng)目要求的所有功能，個(gè)人完成項(xiàng)目以項(xiàng)目分?jǐn)?shù)為個(gè)人最終成績(jī)，小組共同完成項(xiàng)目用小組平均分作為個(gè)人基礎(chǔ)分，根據(jù)貢獻(xiàn)程度的不同確定權(quán)重，基礎(chǔ)分和加權(quán)分之和為個(gè)人最終成績(jī)。實(shí)驗(yàn)室訓(xùn)練營(yíng)是為感興趣的學(xué)生進(jìn)行延伸拓展服務(wù)的，為他們參加競(jìng)賽奠定了技術(shù)基礎(chǔ)，這里實(shí)驗(yàn)室訓(xùn)練營(yíng)不作為考核項(xiàng)，而將競(jìng)賽獲獎(jiǎng)作為一個(gè)加分項(xiàng)。[6]

● 教學(xué)效果

“Web前端開(kāi)發(fā)”課程混合式教學(xué)實(shí)施對(duì)象是筆者所在學(xué)院計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)20190231的學(xué)生，與計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)20180231采用傳統(tǒng)教學(xué)方法進(jìn)行對(duì)比，平均成績(jī)總體提高5.9%，不及格率為0，教學(xué)效果明顯?；旌鲜浇虒W(xué)模式更能督促學(xué)生努力學(xué)習(xí)。

● 結(jié)語(yǔ)

混合式教學(xué)給學(xué)生提供了更多的線上交流機(jī)會(huì)，需要學(xué)生提前預(yù)習(xí)相關(guān)知識(shí)、思考頁(yè)面實(shí)現(xiàn)方法、準(zhǔn)備交流的問(wèn)題和資料，學(xué)生的學(xué)習(xí)主動(dòng)性和積極性明顯提高。在解決問(wèn)題和技術(shù)交流的過(guò)程中，學(xué)生對(duì)Web頁(yè)面開(kāi)發(fā)知識(shí)掌握得更加準(zhǔn)確、扎實(shí)、系統(tǒng)化?；旌鲜浇虒W(xué)給學(xué)生留出了更多的自我思考和實(shí)際操作時(shí)間，小組合作方式更好地模擬了企業(yè)中Web網(wǎng)站開(kāi)發(fā)的工作流程和環(huán)境。企業(yè)實(shí)訓(xùn)、實(shí)驗(yàn)室訓(xùn)練營(yíng)及競(jìng)賽提前做了職業(yè)分流，讓畢業(yè)后有志于從事Web開(kāi)發(fā)的學(xué)生提前了解了公司的工作環(huán)境、Web開(kāi)發(fā)流程、所需要的知識(shí)技能，鍛煉了他們的合作能力，提高了他們的自學(xué)能力和解決問(wèn)題能力，為以后的正式工作打下了良好的基礎(chǔ)。

參考文獻(xiàn)：

[1]劉競(jìng)遙，陳一笑，趙歡歡，等.基于泛雅平臺(tái)的Web前端開(kāi)發(fā)技術(shù)課程混合教學(xué)模式的分析[J]，遼寧科技學(xué)院學(xué)報(bào)，2019，21（06）：47-48，40.

[2]張芳，鄒俊.后MOOC時(shí)代SPOC線上線下混合教學(xué)模式的實(shí)踐與探索[J].湖北經(jīng)濟(jì)學(xué)院學(xué)報(bào)：人文社會(huì)科學(xué)版，2018，15（11）：148-151.

[3]劉雅君，袁婷，謝國(guó)，等.新工科背景下《Web前端開(kāi)發(fā)技術(shù)》的PBL教學(xué)改革與實(shí)踐[J].電腦知識(shí)與技術(shù)，2021，17（07）：127-128.

[4]王毅，張滬寅，黃建忠，等.基于“四類型六環(huán)節(jié)”實(shí)驗(yàn)教學(xué)體系建設(shè)物聯(lián)網(wǎng)工程專業(yè)實(shí)驗(yàn)案例庫(kù)[J].實(shí)驗(yàn)技術(shù)與管理，2019，36（07）：174-178.

[5]劉渝妍，何俊，王亞寧，等.校企協(xié)同育人模式探索與實(shí)踐[J].福建電腦，2021，37（02）：37-41.

[6]劉雅君，李愛(ài)民，謝國(guó)，等.延期返校背景下編程實(shí)踐類課程考核工作改革和實(shí)踐——以Web 前端開(kāi)發(fā)技術(shù)課程為例[J].計(jì)算機(jī)教育，2021（02）：9-12.

作者簡(jiǎn)介：黃歡（1982.12—），女，助教，主要研究方向?yàn)槟Ｊ阶R(shí)別與智能控制。