徐好芹 韓慧杰

摘要：隨著互聯(lián)網(wǎng)技術(shù)的不斷更新，Web前端課程越來越受歡迎。結(jié)合高職院校學(xué)生特點(diǎn)，探索了基于創(chuàng)新能力培養(yǎng)的Web前端課堂教學(xué)改革思路，主要分析了創(chuàng)新教學(xué)內(nèi)容，教學(xué)模式、教學(xué)方法，創(chuàng)新教學(xué)環(huán)節(jié)，創(chuàng)新能力教師和教學(xué)反饋幾個(gè)關(guān)鍵因素，結(jié)合教學(xué)實(shí)踐，進(jìn)行對(duì)比分析，這種教學(xué)改革思路有利于激發(fā)學(xué)生學(xué)習(xí)興趣，培養(yǎng)學(xué)生創(chuàng)新能力。

關(guān)鍵詞：創(chuàng)新能力; Web前端 ;教學(xué)改革

中圖分類號(hào)：G642? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）02-0086-03

受互聯(lián)網(wǎng)快速發(fā)展的沖擊，近幾年Web前端技術(shù)發(fā)展迅速，前端工程師崗位火熱并相對(duì)緊缺，受教育部地方高校轉(zhuǎn)型發(fā)展的號(hào)召，高校課程建設(shè)緊跟社會(huì)需求，并在不斷進(jìn)行積極調(diào)整，Web前端課程也逐漸納入專業(yè)課程體系，但是許多高校教學(xué)內(nèi)容仍然相對(duì)落后，學(xué)生在校只是掌握了一些基礎(chǔ)的知識(shí)，核心知識(shí)比較薄弱，不重視代碼規(guī)范，基礎(chǔ)性的原理理解不深刻，導(dǎo)致學(xué)生畢業(yè)后不能靈活應(yīng)用，無法設(shè)計(jì)出好的前端作品。

高職院校開設(shè)Web前端課程相對(duì)較晚，課程體系設(shè)置不夠合理，對(duì)口的專業(yè)教師不足，授課教師前端經(jīng)驗(yàn)較弱，再加上人才培養(yǎng)方案里面課時(shí)受限、教師對(duì)教學(xué)要求較低等各種因素的影響，高職學(xué)生在校學(xué)習(xí)到的前端知識(shí)，主要是學(xué)會(huì)了一些基本的HTML標(biāo)簽，基礎(chǔ)的CSS樣式，再加上些許的JavaScript知識(shí)，只能做出相對(duì)比較容易的前端頁面，而且做出的頁面效果比較粗糙簡(jiǎn)單，存在代碼不規(guī)范、頁面不完整、細(xì)節(jié)問題較多等問題。

另外，高職學(xué)生雖然基礎(chǔ)相對(duì)薄弱，惰性較大，自主學(xué)習(xí)能力相對(duì)不高，但是高職學(xué)生性格相對(duì)比較活躍，心智也已經(jīng)相對(duì)成熟，而且高職學(xué)生也已經(jīng)具備一定的探索能力，只要方法得當(dāng)，也會(huì)比較容易受到引導(dǎo)。Web前端課程，學(xué)習(xí)初期見效比較快，而且難度較低，所以入門相對(duì)容易，比較容易激發(fā)學(xué)生的學(xué)習(xí)興趣。只要課程內(nèi)容安排合理，教師引導(dǎo)到位，高職學(xué)生完全可以熟練掌握Web前端相關(guān)技術(shù)技能。

1 基于創(chuàng)新能力培養(yǎng)的課堂教學(xué)改革思路

1.1創(chuàng)新教學(xué)內(nèi)容

Web前端所涉及的課程既重視技術(shù)又兼具設(shè)計(jì)，是可以通過代碼設(shè)計(jì)出優(yōu)美界面，并且可以增強(qiáng)用戶體驗(yàn)的一項(xiàng)技能，比如學(xué)生在初步學(xué)習(xí)了HTML就可以設(shè)計(jì)出相當(dāng)美觀的圖文混排頁面，再學(xué)一些CSS樣式，就可以設(shè)計(jì)出各種網(wǎng)頁排版，甚至多少了解一些CSS3動(dòng)畫就能夠設(shè)計(jì)出一些網(wǎng)頁動(dòng)態(tài)特效，僅僅一學(xué)期下來學(xué)生就可以獨(dú)立設(shè)計(jì)出一個(gè)完整的網(wǎng)站，獲得很大的成就感，因此，教師首先在授課內(nèi)容上一定要層層遞進(jìn)，創(chuàng)新教學(xué)案例和內(nèi)容。

（1）精心篩選授課內(nèi)容，避免泛而不精，切忌教學(xué)目標(biāo)不明確，重點(diǎn)內(nèi)容不突出。就HTML標(biāo)簽來說，HTML5新增了許多，并不一定都要講，課堂講主要的內(nèi)容，遵從“必須，夠用”原則，許多不常用的標(biāo)簽可以作為課后學(xué)生自我學(xué)習(xí)的一個(gè)擴(kuò)展。

（2）案例新穎。前端課程即便是在剛開始僅僅學(xué)習(xí)了幾個(gè)HTML標(biāo)簽，也是可以設(shè)計(jì)出美觀的案例的，因此教師在授課過程中要精選素材，精心設(shè)置案例，多上網(wǎng)查看，搜尋實(shí)用且真實(shí)的網(wǎng)頁素材[1]，每次案例的呈現(xiàn)都要讓學(xué)生有耳目一新的感受，每次做完一個(gè)案例都要讓學(xué)生有一定的成就感。

1.2靈活的教學(xué)模式，可行的教學(xué)方法

Web前端課程實(shí)踐性強(qiáng)，對(duì)學(xué)生動(dòng)手能力要求較高，學(xué)生只有通過多敲代碼、多動(dòng)手制作案例，才能真正掌握其相關(guān)技能，學(xué)生在不斷的嘗試和探索過程中也可以逐步獲取成就感，因此教師在授課過程中要以學(xué)生為中心，應(yīng)根據(jù)授課內(nèi)容靈活地選擇合適的授課模式和授課方法。

（1）靈活的教學(xué)模式

以“教-學(xué)-做”教學(xué)模式為主。授課過程主要采用邊講邊練方式，每節(jié)課連續(xù)講授時(shí)間控制在25分鐘左右，每講一個(gè)知識(shí)點(diǎn)一定要讓學(xué)生動(dòng)手練習(xí)，通過練習(xí)，從直觀上理解知識(shí)的使用，從而達(dá)到“學(xué)中做，做中學(xué)”。如果是案例，教師可以先分析演示，然后由學(xué)生進(jìn)行動(dòng)手練習(xí)，在規(guī)定時(shí)間內(nèi)由學(xué)生獨(dú)立完成案例并將作品上傳至教師機(jī)或網(wǎng)絡(luò)空間，之后教師可以在全班進(jìn)行學(xué)生作品展示，展示的目的一個(gè)是鼓勵(lì)學(xué)生，激發(fā)學(xué)生學(xué)習(xí)動(dòng)力，另一個(gè)要對(duì)學(xué)生出現(xiàn)的問題及時(shí)進(jìn)行反饋，對(duì)于共性問題，可以再進(jìn)行集中講解，加強(qiáng)學(xué)生印象，展示之后要督促學(xué)生針對(duì)自己作品的不足進(jìn)行及時(shí)的更新。

以“線上線下混合式”教學(xué)模式為輔[3]。線上課程由于其不受地點(diǎn)、時(shí)間的限制等特點(diǎn)，可以成為日常教學(xué)的有益補(bǔ)充。日常教學(xué)中可以讓學(xué)生通過線上教學(xué)視頻進(jìn)行預(yù)習(xí)，而對(duì)于課堂上講解到比較重要或者比較難的知識(shí)點(diǎn)時(shí)，教師可以錄制補(bǔ)充視頻，發(fā)布網(wǎng)上，學(xué)生可以利用課下時(shí)間，進(jìn)行復(fù)習(xí)鞏固。在授課過程中，對(duì)于有些有代表性的知識(shí)點(diǎn)或案例，在學(xué)生具有一定相關(guān)學(xué)習(xí)經(jīng)驗(yàn)的前提下，可以挑選部分學(xué)生進(jìn)行講解，講解過程，鼓勵(lì)學(xué)生大膽說出自己的想法，通過組織學(xué)生講授，進(jìn)一步提高學(xué)生對(duì)知識(shí)點(diǎn)在深度和應(yīng)用的理解，同時(shí)提升學(xué)生學(xué)習(xí)自信心。

（2）可行的教學(xué)方法

日常教學(xué)以任務(wù)驅(qū)動(dòng)教學(xué)法為主，前端效果在網(wǎng)上隨處可見，教師授課過程可以直接打開瀏覽器找一些有代表性的網(wǎng)站，讓學(xué)生理解學(xué)習(xí)要達(dá)到的目標(biāo)，并且在網(wǎng)上找現(xiàn)成的案例，通過分析真實(shí)是網(wǎng)站效果，并利用所學(xué)的知識(shí)將其實(shí)現(xiàn)，可以讓學(xué)生很直觀的明白知識(shí)點(diǎn)的具體應(yīng)用。教師通過美觀且實(shí)用的任務(wù)案例激發(fā)學(xué)生學(xué)習(xí)興趣，教師在講解案例過程中注意引導(dǎo)學(xué)生同樣的效果實(shí)現(xiàn)方法可以有多種，不要限制學(xué)生的思維，學(xué)生通過案例練習(xí)加強(qiáng)對(duì)知識(shí)點(diǎn)的理解和應(yīng)用，鼓勵(lì)學(xué)生在制作案例的過程中多進(jìn)行各種嘗試。

階段復(fù)習(xí)以項(xiàng)目驅(qū)動(dòng)教學(xué)法為主，教學(xué)進(jìn)度應(yīng)該張弛有度，比如學(xué)生學(xué)習(xí)完HTML標(biāo)簽，學(xué)習(xí)完CSS樣式，都要分別進(jìn)行一個(gè)階段復(fù)習(xí)，復(fù)習(xí)不僅是對(duì)知識(shí)點(diǎn)的歸納，更應(yīng)該有一個(gè)更加綜合的真實(shí)項(xiàng)目來支撐，通過項(xiàng)目驅(qū)動(dòng)的方式進(jìn)行階段復(fù)習(xí)，提高學(xué)生綜合應(yīng)用能力。

1.3 創(chuàng)新教學(xué)環(huán)節(jié)

為了檢驗(yàn)學(xué)生的階段學(xué)習(xí)效果，加強(qiáng)學(xué)生實(shí)際應(yīng)用能力，因此在一門課程每個(gè)模塊內(nèi)容結(jié)束之后，可以布置一項(xiàng)由學(xué)生自我設(shè)計(jì)完成的網(wǎng)頁作品，教師可以限定主題也可以不限定主題，根據(jù)學(xué)生已學(xué)習(xí)內(nèi)容情況給出一定的要求，向?qū)W生說明網(wǎng)頁制作從選題、找素材到制作的方法步驟，重點(diǎn)讓學(xué)生自我發(fā)揮，將學(xué)生創(chuàng)新能力培養(yǎng)貫穿在日常教學(xué)過程中。

在一個(gè)完整的學(xué)習(xí)階段結(jié)束后有必要組織一場(chǎng)與前端設(shè)計(jì)有關(guān)的大賽，讓學(xué)生將所學(xué)知識(shí)轉(zhuǎn)化成作品，再通過比賽的方式進(jìn)行展示，在此過程不僅提高學(xué)生知識(shí)的綜合運(yùn)用能力，也提高學(xué)生交流溝通，以及自主學(xué)習(xí)和探究能力，最終達(dá)到提升學(xué)生創(chuàng)新能力和綜合素養(yǎng)的教學(xué)目的。

下面表1是學(xué)生學(xué)習(xí)各階段涉及前端教學(xué)的主干課程和階段結(jié)束可以開展的比賽項(xiàng)目。

1.4具備創(chuàng)新精神和領(lǐng)導(dǎo)能力的教師

要想提高學(xué)生的創(chuàng)新能力，作為教學(xué)主導(dǎo)地位的教師首先必須具備一定的創(chuàng)新精神，只有教師具有創(chuàng)新精神，才能使得創(chuàng)新教學(xué)內(nèi)容成為可能，才能靈活地實(shí)施教學(xué)模式。教師對(duì)教學(xué)內(nèi)容的講授應(yīng)該有解構(gòu)和重構(gòu)的能力，另外教師不僅需要具備創(chuàng)新精神，也需要具備一定的領(lǐng)導(dǎo)能力[4]，比如教師需要具備較好的教學(xué)管理能力、教學(xué)改革能力，具備一定的專業(yè)建設(shè)能力，教師通過優(yōu)秀的個(gè)人魅力感染學(xué)生，通過深厚的專業(yè)知識(shí)引領(lǐng)學(xué)生，以期達(dá)到最終的教學(xué)效果。

1.5 合理有效的教學(xué)反饋和考核機(jī)制

高職學(xué)生自制能力相對(duì)不高，為了保證學(xué)生整體學(xué)習(xí)效果，必須有合理有效的教學(xué)反饋和考核機(jī)制作保障，日常教學(xué)可根據(jù)教學(xué)情況每周或者每階段進(jìn)行小測(cè)，根據(jù)學(xué)生測(cè)試情況，及時(shí)了解學(xué)生情況，并做教學(xué)反饋。教學(xué)考核要從之前的重期末考核轉(zhuǎn)變?yōu)槿粘５倪^程性考核為主[2]，重視學(xué)生日常學(xué)習(xí)表現(xiàn)和階段學(xué)習(xí)效果，比如課程最終考核成績(jī)可以考勤5%，日常作業(yè)占15%，線上學(xué)習(xí)10%，階段自主項(xiàng)目20%，期末網(wǎng)站設(shè)計(jì)30%，期末考試20%。通過全方位的過程性考核，更加合理全面地對(duì)學(xué)生學(xué)習(xí)效果進(jìn)行評(píng)價(jià)，以達(dá)到激發(fā)學(xué)生學(xué)習(xí)興趣，激勵(lì)學(xué)生不斷進(jìn)步的教學(xué)目的。

2 Web前端課程教學(xué)探索

為了檢驗(yàn)創(chuàng)新能力教學(xué)改革的效果，本學(xué)期通過對(duì)18級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)4個(gè)教學(xué)班進(jìn)行了對(duì)比試驗(yàn)，這4個(gè)班級(jí)是平行班級(jí)，學(xué)生整體上基礎(chǔ)相當(dāng)，人數(shù)相當(dāng)，在本次教學(xué)探索中，1-2班為參照班級(jí)，4-5班為試點(diǎn)班級(jí)，該學(xué)期學(xué)生同時(shí)開設(shè)《Web前端設(shè)計(jì)》課程，我?！禬eb前端設(shè)計(jì)》課程在中國(guó)大學(xué)MOOC上線開放，為學(xué)生線上學(xué)習(xí)提供了有效的平臺(tái)支持，兩組教學(xué)班各項(xiàng)對(duì)比項(xiàng)目如表2。

通過一學(xué)期的教學(xué)對(duì)比，試點(diǎn)班級(jí)學(xué)生對(duì)前端課程學(xué)習(xí)勁頭較大，通過線上課程也學(xué)到了一些擴(kuò)展內(nèi)容，表示很想繼續(xù)學(xué)習(xí)后續(xù)課程，而對(duì)比班級(jí)學(xué)生表示課程太難，學(xué)不會(huì)，對(duì)后續(xù)課程沒有太多期望。由教學(xué)對(duì)比結(jié)果可以得出以下幾點(diǎn)結(jié)論。

1）教師創(chuàng)新能力和領(lǐng)導(dǎo)力對(duì)學(xué)生創(chuàng)新能力培養(yǎng)起關(guān)鍵作用

作為一個(gè)教師不僅是在課堂上傳授知識(shí)，更重要的是要對(duì)學(xué)生起到一個(gè)引領(lǐng)作用，一個(gè)有創(chuàng)新意識(shí)的老師，在課堂上應(yīng)該通過自己的豐富的專業(yè)知識(shí)和有效的教學(xué)方法，讓學(xué)生學(xué)到扎實(shí)的專業(yè)知識(shí)，也要通過自己有意識(shí)的創(chuàng)新能力引導(dǎo)，感染學(xué)生，讓學(xué)生獲取創(chuàng)新的勇氣和探索的動(dòng)力。

2）線上線下混合式教學(xué)模式有利于擴(kuò)展學(xué)生知識(shí)面，激發(fā)學(xué)生學(xué)習(xí)興趣

對(duì)于學(xué)習(xí)狀態(tài)較好的學(xué)生通過自主學(xué)習(xí)線上視頻，可以彌補(bǔ)面授課程時(shí)間有限、知識(shí)點(diǎn)講解有限等問題，甚至可以通過線上課程實(shí)現(xiàn)超前學(xué)習(xí)，擴(kuò)展學(xué)習(xí)內(nèi)容。而對(duì)于課堂教學(xué)過程中學(xué)習(xí)效果不好的學(xué)生，可以通過課后觀看線上視頻鞏固學(xué)習(xí)內(nèi)容。在采用線上教學(xué)方式時(shí)，切忌盲目，高職學(xué)生整體上自制能力有待提高[5]，所以教師要提前做好組織工作，重點(diǎn)內(nèi)容仍然要通過面授方式對(duì)學(xué)生進(jìn)行系統(tǒng)講解，及時(shí)檢查學(xué)生學(xué)習(xí)效果，讓線上教學(xué)成為日常教學(xué)的有益補(bǔ)充。

3）課內(nèi)自主項(xiàng)目及階段綜合項(xiàng)目是提升學(xué)生創(chuàng)新能力的重要手段

貫穿在課程教學(xué)中的課內(nèi)自主項(xiàng)目，可以將學(xué)生創(chuàng)新能力培養(yǎng)滲透在日常教學(xué)中，通過不斷的創(chuàng)新意識(shí)激勵(lì)，使學(xué)生逐漸養(yǎng)成善于思考，敢于創(chuàng)新的自主學(xué)習(xí)能力。課內(nèi)逐步遞增的自主項(xiàng)目環(huán)節(jié)是課程結(jié)束進(jìn)行階段綜合項(xiàng)目做基礎(chǔ)，可以為綜合項(xiàng)目的完成提供有力的階段性支持。階段綜合項(xiàng)目對(duì)學(xué)生知識(shí)綜合應(yīng)用能力和創(chuàng)新能力的有更高的要求，學(xué)生在綜合項(xiàng)目制作初期，會(huì)有非常多的問題的，所以在這個(gè)階段，需要老師做好引導(dǎo)工作，給學(xué)生講解一定的方法，先讓學(xué)生進(jìn)行適度的練習(xí)，再開始進(jìn)行，鼓勵(lì)學(xué)生有問題多和同學(xué)老師溝通交流，教師也多詢問學(xué)生項(xiàng)目進(jìn)展情況，對(duì)于他們遇到的困難及時(shí)給予回應(yīng)。另一方面階段項(xiàng)目最后一定要有一個(gè)學(xué)生自我展示環(huán)節(jié)。

通過教學(xué)探索，發(fā)現(xiàn)在階段綜合項(xiàng)目進(jìn)行過程中，學(xué)生雖然問題和困難很多，但是每當(dāng)參與一次項(xiàng)目制作，對(duì)學(xué)生的整體學(xué)習(xí)能力和自信心都有很大的提高，也是培養(yǎng)和提高學(xué)生創(chuàng)新能力的一次實(shí)戰(zhàn)演練。

3 結(jié)論及展望

本文通過分析當(dāng)前高職院校Web前端課程開設(shè)情況，提出了基于學(xué)生創(chuàng)新能力培養(yǎng)的前端課程改革探索思路，并在本校進(jìn)行了初步試驗(yàn)，試驗(yàn)結(jié)果證明了這種改革思路的有效性。由于這種改革思路對(duì)教師要求較高，在教學(xué)的同時(shí)也要做好學(xué)生思想工作，今后會(huì)將這種教學(xué)改革方法進(jìn)行擴(kuò)展，擴(kuò)展到其他班級(jí)和其他專業(yè)，更加全面的培養(yǎng)學(xué)生的創(chuàng)新能力，鞏固學(xué)生的專業(yè)技能和職業(yè)素養(yǎng)。

參考文獻(xiàn)：

[1] 吳鴻韜，李智，袁玉倩. 基于OBE理念的Web前端開發(fā)技術(shù)課程教學(xué)改革[J].計(jì)算機(jī)教育，2019（11）：91-93，98.

[2] 顏慧佳.基于“前端工程師”崗位班的創(chuàng)新教學(xué)改革與實(shí)踐[J].計(jì)算機(jī)教育，2018（9）：160-163.

[3] 陳永平. “互聯(lián)網(wǎng)+”環(huán)境下高職傳統(tǒng)教學(xué)、MOOC與SPOC融合教學(xué)質(zhì)量評(píng)價(jià)指標(biāo)體系構(gòu)建[J].職教論壇，2019（07）：64-72.

[4] 邵建東. 高職教師領(lǐng)導(dǎo)力：內(nèi)涵、價(jià)值及發(fā)展路徑[J].江蘇高教，2018（10）：72-76.

[5] 譚永平，鐘暢武，韋柳絲，等. 高職院校實(shí)施混合式教學(xué)改革的策略研究[J].中國(guó)職業(yè)技術(shù)教育，2019（2）：30-33.

[6] 王文軒. 混合教學(xué)模式下 高職學(xué)生自主學(xué)習(xí)能力培養(yǎng)的實(shí)證研究[J].中國(guó)職業(yè)技術(shù)教育，2018（35）：10-15.

【通聯(lián)編輯：光文玲】