葉文全 劉彥會(huì)

摘要：課程教學(xué)作為影響教學(xué)質(zhì)量的首要因素，如何有效提升課程質(zhì)量十分重要。通過對(duì)高職學(xué)生的學(xué)情及“Web前端開發(fā)”課程的特點(diǎn)進(jìn)行分析，將遞進(jìn)式案例教學(xué)法應(yīng)用于高職“Web前端開發(fā)”課程教學(xué)中，案例取材結(jié)合學(xué)生現(xiàn)有認(rèn)知能力，案例設(shè)計(jì)遵循知識(shí)點(diǎn)涵蓋、內(nèi)容遞進(jìn)、難度遞進(jìn)三大原則，課程過程化考核管理系統(tǒng)輔助案例教學(xué)的實(shí)施，成績(jī)多元評(píng)價(jià)，作品線上線下展示。實(shí)踐表明，遞進(jìn)式案例教學(xué)法在高職“Web前端開發(fā)”課程中的應(yīng)用，提高了學(xué)生的參與度，提升了課程的教學(xué)質(zhì)量。

關(guān)鍵詞：遞進(jìn)式案例教學(xué)法; Web前端開發(fā); 過程化考核

高等職業(yè)教育作為我國(guó)高等教育的重要組成部分，肩負(fù)著為社會(huì)建設(shè)與發(fā)展培養(yǎng)高素質(zhì)技術(shù)、技能型人才的使命[1]，其中，課程教學(xué)作為學(xué)生能力培養(yǎng)的主要落地方式，是影響人才培養(yǎng)質(zhì)量的首要因素[2]，如何有效提升課程教學(xué)質(zhì)量，是辦好高等職業(yè)教育的基礎(chǔ)。在課程教學(xué)實(shí)施的過程中，教學(xué)內(nèi)容的選取要符合人才培養(yǎng)目標(biāo)的要求，教學(xué)方法的使用要根據(jù)學(xué)生的學(xué)情、課程的特點(diǎn)進(jìn)行具體分析與執(zhí)行。與本科生相比，高職學(xué)生的主動(dòng)學(xué)習(xí)熱情較低、規(guī)劃性較差、好勝心不強(qiáng)，但對(duì)專業(yè)的興趣較高[3]，因此，高職教師可以利用學(xué)生對(duì)專業(yè)的興趣作為突破口，使用合適的教學(xué)方法提高學(xué)生的學(xué)習(xí)熱情，幫助學(xué)生樹立學(xué)習(xí)自信心、建立大學(xué)生涯學(xué)習(xí)規(guī)劃?！癢eb前端開發(fā)”作為計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的一門核心課，內(nèi)容涉及HTML、CSS、Javascript、前端框架等，要求學(xué)生具備一定的英文基礎(chǔ)和編程能力，實(shí)踐性較強(qiáng)、難度較大，成就感的獲得較難，學(xué)生容易產(chǎn)生畏難情緒，甚至中途放棄該門課程的學(xué)習(xí)。由于“Web前端開發(fā)”課程的實(shí)踐性較強(qiáng)，案例教學(xué)法在該門課程中的應(yīng)用較為普遍，也取得不錯(cuò)的教學(xué)效果，但是，案例之間的內(nèi)容銜接不夠連貫、案例難度推進(jìn)不夠平穩(wěn)，導(dǎo)致學(xué)生對(duì)課程知識(shí)體系的整體學(xué)習(xí)效果不夠理想[4]。為了進(jìn)一步改善“Web前端開發(fā)”課程的教學(xué)質(zhì)量，將案例教學(xué)法中的案例進(jìn)行遞進(jìn)式改良，案例取材結(jié)合學(xué)生的現(xiàn)有認(rèn)知能力，提高學(xué)生對(duì)新知識(shí)的接受度。案例設(shè)計(jì)遵循知識(shí)點(diǎn)涵蓋、內(nèi)容遞進(jìn)、難度遞進(jìn)三大原則，實(shí)施過程注重學(xué)生獨(dú)立思考、師生雙向交流，課程過程化考核管理系統(tǒng)輔助遞進(jìn)式案例教學(xué)的實(shí)施，成績(jī)多元評(píng)價(jià)，并對(duì)學(xué)生作品進(jìn)行線上、線下展示，促進(jìn)學(xué)生成就感的獲得，推動(dòng)課程教學(xué)質(zhì)量提升，形成一套完整的遞進(jìn)式案例教學(xué)法實(shí)施方案。

一、案例取材結(jié)合學(xué)生認(rèn)知能力，幫助學(xué)生理解要“做什么”

案例作為案例教學(xué)法的基礎(chǔ)，也是案例教學(xué)法的核心內(nèi)容[5]，其取材十分重要。學(xué)生在學(xué)習(xí)過程中，先要理解做什么，才能接著思考怎么做、如何做得更好。一個(gè)超出學(xué)生現(xiàn)有認(rèn)知能力的教學(xué)案例，學(xué)生需要花大量時(shí)間去理解教師的教學(xué)目標(biāo)和明確要做什么，容易造成學(xué)生的學(xué)習(xí)無從入手，產(chǎn)生學(xué)習(xí)畏懼感，從而導(dǎo)致學(xué)生失去繼續(xù)學(xué)習(xí)的興趣。且不同的學(xué)生理解偏差較大，無法準(zhǔn)確把握知識(shí)點(diǎn)，學(xué)習(xí)效果不好，而一個(gè)好的教學(xué)案例往往符合學(xué)生的現(xiàn)有認(rèn)知能力，學(xué)生可以快速理解“做什么”，從而進(jìn)入思考怎么做的學(xué)習(xí)階段。使用學(xué)生熟悉的案例作為新知識(shí)傳授的入口，可以讓學(xué)生產(chǎn)生親切感，促進(jìn)學(xué)生對(duì)案例的獨(dú)立思考，激發(fā)學(xué)生對(duì)新知識(shí)學(xué)習(xí)的熱情[6]。

在互聯(lián)網(wǎng)全面發(fā)展的大環(huán)境下[7]，高職學(xué)生對(duì)Web前端已經(jīng)具備了較好的認(rèn)知能力，為“Web前端開發(fā)”課程教學(xué)案例的取材提供了更大的選取空間。以“Web前端開發(fā)”課程中的HTML知識(shí)模塊的表格、表單案例教學(xué)為例，表格的教學(xué)案例取材于課程表，表單的教學(xué)案例取材于用戶注冊(cè)，學(xué)生不需要花太多時(shí)間去思考我要做什么。因?yàn)?，課程表、用戶注冊(cè)符合學(xué)生現(xiàn)有形成認(rèn)知能力，而且認(rèn)知相對(duì)統(tǒng)一，認(rèn)知點(diǎn)與所需傳授的知識(shí)點(diǎn)吻合度高。學(xué)生可以帶著信心快速進(jìn)入思考怎么做，在做的過程中不斷找到樂趣，從而升華到追求如何做得更好，產(chǎn)生對(duì)新知識(shí)主動(dòng)、迫切學(xué)習(xí)的效果，于是教學(xué)變成學(xué)生學(xué)習(xí)新知識(shí)點(diǎn)，遇到難題與老師探討、解決問題、思考如何做得更好的良性循環(huán)過程，并在學(xué)習(xí)過程中使學(xué)生的認(rèn)知能力得到持續(xù)的提高。因此，案例教學(xué)法在“Web前端開發(fā)”課程中的應(yīng)用具備良好的可行性，案例取材結(jié)合學(xué)生認(rèn)知能力，能夠發(fā)揮更好的教學(xué)效果。

二、遞進(jìn)式案例教學(xué)的案例設(shè)計(jì)原則

（一）知識(shí)點(diǎn)涵蓋原則

教學(xué)案例的知識(shí)點(diǎn)涵蓋原則指教學(xué)案例必須能夠與所需傳授的知識(shí)點(diǎn)相吻合。知識(shí)點(diǎn)涵蓋是教學(xué)案例的基本要求，如果一個(gè)案例不能承載所需傳授的知識(shí)點(diǎn)，就不適合作為教學(xué)案例。案例取材需要結(jié)合學(xué)生的認(rèn)知能力，同時(shí)，還需要對(duì)取材進(jìn)行加工，以滿足知識(shí)點(diǎn)涵蓋的設(shè)計(jì)原則，也意味著教學(xué)案例的制定者（一般為授課教師）需要對(duì)課程內(nèi)容十分熟悉，從而能夠?qū)⒄n程知識(shí)點(diǎn)有機(jī)融合在教學(xué)案例中。以表單教學(xué)為例，需要傳授的知識(shí)點(diǎn)主要包括：普通文本框、多行文本框、密碼框、單選按鈕、復(fù)選框、下拉框、提交按鈕、重置按鈕，案例取材于常見的網(wǎng)站用戶注冊(cè)，用戶注冊(cè)一般只涉及普通文本框、密碼框、提交按鈕，不符合知識(shí)點(diǎn)涵蓋的原則。如果使用多個(gè)案例對(duì)表單的知識(shí)點(diǎn)進(jìn)行承載，又容易導(dǎo)致案例小而多，因此，需要針對(duì)普通用戶注冊(cè)進(jìn)行知識(shí)點(diǎn)擴(kuò)展，加工成為一個(gè)滿足知識(shí)點(diǎn)涵蓋原則的教學(xué)案例（見表1）。知識(shí)點(diǎn)涵蓋包括廣度涵蓋和深度涵蓋，為了提高知識(shí)點(diǎn)深度涵蓋，在用戶注冊(cè)的教學(xué)案例中，還增加了用戶名如何做到不記憶（引入文本框autocomplete屬性）、點(diǎn)擊單選按鈕文本可切換選中狀態(tài)（引入label標(biāo)簽for屬性），供學(xué)生進(jìn)行提高型學(xué)習(xí)思考。

（二）內(nèi)容遞進(jìn)原則

教學(xué)案例的內(nèi)容遞進(jìn)原則指教學(xué)案例隨著課程內(nèi)容的展開，案例的知識(shí)點(diǎn)涵蓋也隨之推進(jìn)。不同的知識(shí)點(diǎn)，如果能夠基于同一系列的教學(xué)案例進(jìn)行教學(xué)，課程內(nèi)容的延續(xù)性將更好，學(xué)生可以更專注于新知識(shí)點(diǎn)的學(xué)習(xí)與新增要求的實(shí)現(xiàn)，相比孤立化、碎片化的教學(xué)案例，具備內(nèi)容遞進(jìn)的教學(xué)案例教學(xué)效果更好。以用戶注冊(cè)為例，內(nèi)容遞進(jìn)包括橫向遞進(jìn)和縱向遞進(jìn)，可以將表單元素放置在表格內(nèi)部，也可以使用項(xiàng)目列表符號(hào)進(jìn)行實(shí)現(xiàn)，不僅涵蓋了更多的知識(shí)點(diǎn)，還為學(xué)生提供了更多的思考空間。同時(shí)，基于HTML負(fù)責(zé)頁(yè)面結(jié)構(gòu)、CSS負(fù)責(zé)頁(yè)面外觀、Javascript負(fù)責(zé)頁(yè)面行為的特性，三大知識(shí)模塊相對(duì)獨(dú)立又彼此相互支撐，因此，在HTML教學(xué)階段要求學(xué)生實(shí)現(xiàn)用戶注冊(cè)的結(jié)構(gòu)，CSS教學(xué)階段要求學(xué)生實(shí)現(xiàn)用戶注冊(cè)的外觀美化，Javascript教學(xué)階段要求學(xué)生實(shí)現(xiàn)用戶注冊(cè)的數(shù)據(jù)驗(yàn)證、異步提交等，從而構(gòu)建一個(gè)內(nèi)容遞進(jìn)、連貫性強(qiáng)的“用戶注冊(cè)”大教學(xué)案例。“用戶注冊(cè)”教學(xué)案例的實(shí)現(xiàn)的效果，如圖1所示。

遞進(jìn)式案例教學(xué)過程中，要遵循案例內(nèi)容遞進(jìn)的原則，但不能簡(jiǎn)單地把案例根據(jù)知識(shí)模塊嚴(yán)格劃界，理論上獨(dú)立的知識(shí)模塊在實(shí)際教學(xué)過程中，往往需要彼此交叉?！癢eb前端開發(fā)”課程的教學(xué)中，HTML、CSS、Javascript三大模塊的知識(shí)，是在相對(duì)獨(dú)立的基礎(chǔ)上混合推進(jìn)的，將“Web前端開發(fā)”課程的知識(shí)點(diǎn)有機(jī)地融合在一起，教學(xué)效果良好。

（三）難度遞進(jìn)原則

教學(xué)案例的難度遞進(jìn)原則指教學(xué)案例的難度必須能夠被學(xué)生所接受，如果難度過大，則需要使用輔助案例或子案例進(jìn)行分解，實(shí)現(xiàn)難度遞進(jìn)，從而不影響教學(xué)目標(biāo)的實(shí)現(xiàn)。案例太難容易導(dǎo)致學(xué)生參與度低，影響案例的教學(xué)效果 [8]，如果一個(gè)案例的難度太大，且無法使用輔助案例或拆分成子案例，則不適合作為教學(xué)案例使用?！癢eb前端開發(fā)”課程中的“紅綠燈”教學(xué)案例，符合學(xué)生現(xiàn)有的認(rèn)知能力，知識(shí)點(diǎn)主要涉及Javascript控制結(jié)構(gòu)語(yǔ)句的應(yīng)用、Javascript對(duì)Dom元素的操作、全局變量的使用、setInterval與setTimeout的使用，最終實(shí)現(xiàn)紅、黃、綠三種燈按指定的時(shí)間及順序進(jìn)行切換，滿足知識(shí)點(diǎn)涵蓋原則。雖然學(xué)生對(duì)“紅綠燈”的案例比較感興趣，但由于涉及面較廣、難度系數(shù)較大，直接進(jìn)入“紅綠燈”案例的學(xué)習(xí)，將難以達(dá)到預(yù)期的教學(xué)效果。為了解決這一問題，根據(jù)教學(xué)案例難度遞進(jìn)的原則，在學(xué)習(xí)“紅綠燈”教學(xué)案例之前，安排了“開關(guān)燈”“定時(shí)開關(guān)燈”兩個(gè)輔助案例，分別對(duì)Javascript操作Dom元素、setInterval與setTimeout的使用等知識(shí)點(diǎn)進(jìn)行分解，遵循了教學(xué)案例難度遞進(jìn)的原則，降低了教學(xué)案例的學(xué)習(xí)難度，有利于學(xué)生對(duì)案例知識(shí)點(diǎn)的學(xué)習(xí)與掌握，為教學(xué)案例的教學(xué)效果提供保障?！凹t綠燈”教學(xué)案例的實(shí)現(xiàn)效果，如圖2所示。

三、案例教學(xué)信息化、系統(tǒng)化，課程過程性考核與多元評(píng)價(jià)

案例教學(xué)法的順利實(shí)施需要學(xué)生的高度參與、制定符合課程需求的教學(xué)案例、教師對(duì)案例教學(xué)的推進(jìn)精準(zhǔn)把握之外，還需要教師能夠?qū)Π咐虒W(xué)的過程進(jìn)行跟蹤、監(jiān)督與交流，實(shí)現(xiàn)課程過程化考核管理，案例教學(xué)法注重學(xué)生的獨(dú)立思考、師生間的雙向交流，要求學(xué)生提前進(jìn)行案例學(xué)習(xí)、分組討論等，為了案例教學(xué)法能夠在“Web前端開發(fā)”課程中得到良好的應(yīng)用，結(jié)合課程特點(diǎn)與案例教學(xué)法的需求，筆者針對(duì)性地開發(fā)出了“Web前端開發(fā)”課程過程化考核管理系統(tǒng)（以下簡(jiǎn)稱“系統(tǒng)”）。系統(tǒng)包含教學(xué)資源、課前測(cè)試、課中測(cè)試、學(xué)生自評(píng)、小組互評(píng)、教師評(píng)價(jià)、作業(yè)提交、互動(dòng)問答、成績(jī)統(tǒng)計(jì)等功能。

學(xué)生登錄系統(tǒng)后，可以根據(jù)教師上傳的教學(xué)資源，提前進(jìn)行教學(xué)案例學(xué)習(xí)，并完成課前測(cè)試，在案例教學(xué)推進(jìn)的過程中，學(xué)生可以進(jìn)行課中測(cè)試，針對(duì)自己的表現(xiàn)進(jìn)行自評(píng)、小組互評(píng)，可分階段上傳作業(yè)（網(wǎng)頁(yè)形式的作業(yè)，支持壓縮包上傳，服務(wù)器端自動(dòng)解壓，并生成在線訪問地址），支持與授課教師進(jìn)行互動(dòng)問答，并可查看自己過程化的得分情況與教師的點(diǎn)評(píng)，為進(jìn)一步獨(dú)立思考提供方向。

教師登錄系統(tǒng)后，可以上傳教學(xué)資源，查看學(xué)生對(duì)教學(xué)資源的瀏覽情況，各個(gè)環(huán)節(jié)的測(cè)試得分，對(duì)學(xué)生分階段上交的作品進(jìn)行評(píng)分與點(diǎn)評(píng)（網(wǎng)頁(yè)形式的作業(yè)，可以根據(jù)系統(tǒng)生成的在線訪問地址，進(jìn)行訪問與分享），與學(xué)生進(jìn)行互動(dòng)問答，查看學(xué)生學(xué)習(xí)過程的參與度、過程化考核的得分情況，并根據(jù)學(xué)生的學(xué)習(xí)情況，進(jìn)行針對(duì)性地線下深入溝通，真正實(shí)現(xiàn)了案例教學(xué)的過程跟蹤、監(jiān)督與師生雙向交流。

遞進(jìn)式案例教學(xué)法的實(shí)施，環(huán)環(huán)相扣，在使用系統(tǒng)輔助教學(xué)之前，難以對(duì)學(xué)生的學(xué)習(xí)過程進(jìn)行跟蹤、監(jiān)督與評(píng)價(jià)，學(xué)生成績(jī)的評(píng)定基本由教師單獨(dú)完成，主觀性較強(qiáng)。使用系統(tǒng)輔助教學(xué)后，構(gòu)成教師評(píng)價(jià)、學(xué)生自評(píng)、小組互評(píng)多元評(píng)價(jià)體系后，大大提高了學(xué)生學(xué)習(xí)的興趣與積極性，也促進(jìn)了不同學(xué)生之間思想火花的碰撞，形成更良好的學(xué)習(xí)氛圍。案例教學(xué)法的實(shí)施需要突破傳統(tǒng)教學(xué)模式的束縛，積極與信息化教學(xué)接軌[9]，與針對(duì)性的課程教學(xué)管理系統(tǒng)對(duì)接，才能形成多方合力，更好地發(fā)揮遞進(jìn)式案例教學(xué)法的作用。

四、學(xué)生作品線上線下展示，提高學(xué)生學(xué)習(xí)積極性

學(xué)生作品展示對(duì)于提高學(xué)生的學(xué)習(xí)積極性有良好的幫助[10]，針對(duì)高職學(xué)生學(xué)習(xí)熱情較低的現(xiàn)狀，其所發(fā)揮的作用尤為明顯。案例教學(xué)中需要學(xué)生完成相應(yīng)的案例作業(yè)，針對(duì)學(xué)生完成的作品進(jìn)行遴選展示，對(duì)案例教學(xué)法的實(shí)施有良好的幫助。對(duì)于大多數(shù)課程而言，學(xué)生作品存在展示成本較高、宣傳范圍較小等不足之處，而“Web前端開發(fā)”課程的作業(yè)大部分以網(wǎng)頁(yè)的形式呈現(xiàn)，可以通過互聯(lián)網(wǎng)渠道直接展示，成本低、覆蓋廣、可行性強(qiáng)，因此，“Web前端開發(fā)”課程的學(xué)生作品展示，必須做到常態(tài)化、持久化。在實(shí)際操作過程中，可以采用線上線下相結(jié)合的模式，線上依托系部門戶網(wǎng)站“學(xué)生作品”專欄，對(duì)“Web前端開發(fā)”課程的學(xué)生作品進(jìn)行展示，線下依托專業(yè)實(shí)訓(xùn)室舉辦作品展。學(xué)生作品展示不僅可以提高當(dāng)前學(xué)生學(xué)習(xí)的積極性，也為之后學(xué)習(xí)“Web前端開發(fā)”課程的學(xué)生樹立學(xué)習(xí)榜樣，增強(qiáng)學(xué)習(xí)信心，對(duì)專任教師也能起到一定的鞭策與激勵(lì)作用，形成師生共同進(jìn)步的良性循環(huán)，有利于增強(qiáng)遞進(jìn)式案例教學(xué)法的教學(xué)效果。

參考文獻(xiàn)：

[1]? 段致平，王升，賈樹生.論現(xiàn)代職業(yè)教育體系下高等職業(yè)教育人才培養(yǎng)目標(biāo)[J].中國(guó)職業(yè)技術(shù)教育，2015，（15）：18-21.

[2]? 張彥春，王孟鈞.基于課程的教學(xué)質(zhì)量保證體系構(gòu)建與運(yùn)行[J].中國(guó)大學(xué)教學(xué)，2012（08）：73-75.

[3]? 陳慧.高職生和本科生非智力因素問卷調(diào)查比較研究[J].武漢交通職業(yè)學(xué)院學(xué)報(bào)，2014，16（1）：59-61.

[4]? 蘆佳.遞進(jìn)式案例教學(xué)法在“刑事案件偵查”課程中的應(yīng)用[J].教育與職業(yè)，2014，（36）：146-147.

[5]? 吳高臣，劉爽.實(shí)踐導(dǎo)向：案例教學(xué)法研究[J].黑龍江高教研究，2011，（12）：178-181.

[6]? 徐嫻英，黃濤，張冬.基于內(nèi)容熟悉度的案例教學(xué)模式構(gòu)建——以國(guó)際貿(mào)易實(shí)務(wù)案例教學(xué)為例[J].對(duì)外經(jīng)貿(mào)，2013，（8）：148-149.

[7]? 陸峰. 互聯(lián)網(wǎng)：全面發(fā)展? 輝煌五年[N]. 中國(guó)電子報(bào)，2017-08-01（007）.

[8]? 王淑娟，王曉天.管理案例教學(xué)中案例難度適用性的實(shí)證研究[J].管理案例研究與評(píng)論，2008，（2）：83-88.

[9]? 隆平，劉毅，曹紅玲.“互聯(lián)網(wǎng)+”時(shí)代高職院校信息化教學(xué)面臨的挑戰(zhàn)及變革[J].河北職業(yè)教育，2017，1（5）：66-69.

[10]? 馮秀玲，張趙管，許國(guó)強(qiáng).通過作品展示激勵(lì)學(xué)生學(xué)習(xí)的研究——以高職“計(jì)算機(jī)操作基礎(chǔ)”教學(xué)為例[J].計(jì)算機(jī)時(shí)代，2015，（10）：51-52+55.