周香慶，龍江騰

（江西信息應(yīng)用職業(yè)技術(shù)學(xué)院，江西南昌 330013)

0 引言

Web 前端開發(fā)是軟件技術(shù)專業(yè)的職業(yè)核心技能課程，也是步入網(wǎng)站前端開發(fā)的入門課程。本課程依據(jù)高職軟件技術(shù)專業(yè)教學(xué)標(biāo)準(zhǔn)，以服務(wù)中國制造2025和區(qū)域經(jīng)濟(jì)發(fā)展為己任，面向網(wǎng)頁前端開發(fā)領(lǐng)域重點(diǎn)培養(yǎng)互聯(lián)網(wǎng)信息類技術(shù)技能型人才，在軟件技術(shù)專業(yè)課程體系中占有非常重要的基礎(chǔ)作用[1]。課程設(shè)計(jì)是堅(jiān)持以就業(yè)為導(dǎo)向，與“校企合作、工學(xué)結(jié)合”的辦學(xué)模式緊密結(jié)合，在教學(xué)中堅(jiān)持以學(xué)生為主體的現(xiàn)代教學(xué)理念，以技能學(xué)習(xí)為核心，以學(xué)生獲得職業(yè)能力為目標(biāo)，提高學(xué)生的自主學(xué)習(xí)能力，為其勝任軟件開發(fā)、網(wǎng)站運(yùn)維、前端開發(fā)等相關(guān)崗位工作和可持續(xù)發(fā)展打下基礎(chǔ)[2]。

1 學(xué)情分析

Web 前端開發(fā)授課對(duì)象是計(jì)算機(jī)和軟件系的大二學(xué)生，在經(jīng)過之前課程任務(wù)學(xué)習(xí)，學(xué)生已經(jīng)具備了基本的語法知識(shí)，包括：教學(xué)內(nèi)容涵蓋網(wǎng)頁基礎(chǔ)知識(shí)、網(wǎng)頁結(jié)構(gòu)和標(biāo)簽、CSS 樣式、網(wǎng)頁選擇器、CSS 美化網(wǎng)頁元素、盒子模型六大模塊。盡管大多數(shù)同學(xué)對(duì)編程具有濃厚興趣，但隨著學(xué)習(xí)難度的不斷增加，部分學(xué)生對(duì)編程有畏懼心理，對(duì)于HTML語言的應(yīng)用場景知之甚少，盲目跟從老師的講解，并沒有做到對(duì)崗位知識(shí)深入理解。大二部分學(xué)生由于還未適應(yīng)專業(yè)課學(xué)習(xí)模式，造成有些科目基礎(chǔ)薄弱，而其就業(yè)壓力不像大三學(xué)生一樣迫在眉睫，對(duì)未來缺乏明確的目標(biāo)和規(guī)劃，對(duì)于就業(yè)崗位認(rèn)識(shí)較少。因此導(dǎo)致學(xué)習(xí)熱情不高，認(rèn)為及格就好，業(yè)余時(shí)間大多用來上網(wǎng)、打游戲、追劇等。

2 “工單制”教學(xué)實(shí)施策略

“工單制”教學(xué)模式是一種基于任務(wù)的教學(xué)方式，旨在將真實(shí)工作情景融入授課內(nèi)容中。該教學(xué)模式以“1+X”Web 前端開發(fā)崗位技能標(biāo)準(zhǔn)為依據(jù)，結(jié)合高職學(xué)生特點(diǎn)和實(shí)踐性課程的教學(xué)要求，引入了“理實(shí)一體”“翻轉(zhuǎn)課堂”以及“線上線下混合式教學(xué)”等教學(xué)理念。此外，它還通過使用項(xiàng)目式、任務(wù)式、探究式和協(xié)作式等與職業(yè)教育相符合的教學(xué)方法，設(shè)計(jì)出符合職業(yè)能力要求和實(shí)際教學(xué)需求的網(wǎng)頁實(shí)訓(xùn)項(xiàng)目[3]。與傳統(tǒng)的“教師講，學(xué)生學(xué)，考試背”教學(xué)模式不同，“工單制”教學(xué)模式突破了傳統(tǒng)教學(xué)模式的限制，并形成了一種基于傳統(tǒng)課堂和線上教學(xué)平臺(tái)的混合教學(xué)模式。在該模式下，教師將以任務(wù)為核心，貫穿整個(gè)教學(xué)內(nèi)容，構(gòu)建課程的脈絡(luò)。學(xué)生將通過參與工單任務(wù)的完成來學(xué)習(xí)和掌握知識(shí)和技能，同時(shí)也培養(yǎng)了學(xué)生解決問題和團(tuán)隊(duì)協(xié)作的能力。在教學(xué)內(nèi)容組織方面，這種教學(xué)模式通過整合“工單任務(wù)”將各個(gè)知識(shí)點(diǎn)和技能進(jìn)行有機(jī)結(jié)合，使學(xué)生在實(shí)踐中進(jìn)行學(xué)習(xí)。工單任務(wù)作為基本單位，具有一定的綜合性和真實(shí)性，能夠讓學(xué)生在完成任務(wù)的過程中充分運(yùn)用所學(xué)知識(shí)和技能，鍛煉實(shí)際操作的能力。該教學(xué)模式還引入了“理實(shí)一體”的教學(xué)理念，強(qiáng)調(diào)理論與實(shí)踐的結(jié)合。學(xué)生不僅僅是被動(dòng)接受知識(shí)的輸入，而是通過實(shí)際操作和解決問題的實(shí)踐活動(dòng)來加深對(duì)知識(shí)的理解和掌握。同時(shí)，采用“翻轉(zhuǎn)課堂”和“線上線下混合式教學(xué)”等教學(xué)方法，可以更好地激發(fā)學(xué)生的學(xué)習(xí)興趣和主動(dòng)性。

2.1 課程分配

課程安排為80學(xué)時(shí)，其中教學(xué)內(nèi)容分為四個(gè)主要模塊：網(wǎng)頁基礎(chǔ)知識(shí)、CSS 樣式、CSS 美化網(wǎng)頁元素以及盒子模型[4]。在這些模塊中，學(xué)生將學(xué)習(xí)到關(guān)于html標(biāo)簽、字體樣式、段落樣式表、CSS濾鏡、超鏈接及偽類、盒子模型、邊距與定位等方面的知識(shí)。為了保持理論與實(shí)踐教學(xué)的平衡，教學(xué)過程中的理論和實(shí)踐比例被設(shè)定為1∶1。

為了更好地支持教學(xué)需求，教師們?cè)诮虒W(xué)過程中充分利用、豐富和完善線上教學(xué)平臺(tái)資源，以提供更多線上教學(xué)資源。這個(gè)舉措使得學(xué)生可以在課堂之外進(jìn)行自主學(xué)習(xí)，并在完成任務(wù)時(shí)獲得適當(dāng)?shù)闹笇?dǎo)和支持。為確保學(xué)生對(duì)所學(xué)內(nèi)容的掌握程度，采用過程性考核和期末考核相結(jié)合的考核辦法。這樣的方式能夠全面評(píng)估學(xué)生的學(xué)習(xí)進(jìn)展，并促使他們?cè)谡麄€(gè)學(xué)期內(nèi)保持學(xué)習(xí)的動(dòng)力和積極性。同時(shí)，這也是對(duì)傳統(tǒng)考核方式進(jìn)行改革和創(chuàng)新的一種嘗試，更符合現(xiàn)代教育的要求。

圍繞Web 前端開發(fā)崗位中的前端頁面設(shè)計(jì)技能模塊，課程還設(shè)計(jì)了多個(gè)工單任務(wù)。這些任務(wù)包括但不限于：1)熟悉網(wǎng)頁版式、構(gòu)成要素和設(shè)計(jì)工具；2)掌握網(wǎng)頁結(jié)構(gòu)標(biāo)簽的用法；3)掌握CSS 樣式與選擇器，應(yīng)用定位、浮動(dòng)、邊距美化網(wǎng)頁內(nèi)容等。通過這些任務(wù)，學(xué)生將有機(jī)會(huì)進(jìn)行實(shí)際操作，并在解決問題的過程中提升自己的技能和能力。最終，他們將完成一個(gè)主題網(wǎng)頁的效果設(shè)計(jì)，展現(xiàn)出所學(xué)知識(shí)的應(yīng)用能力。

通過以上的課程安排和教學(xué)方式，學(xué)生將能夠系統(tǒng)性地掌握前端開發(fā)所需的基本知識(shí)和技能。他們不僅能夠理解并運(yùn)用各種網(wǎng)頁技術(shù)，還能夠利用CSS樣式進(jìn)行網(wǎng)頁美化，同時(shí)也了解如何設(shè)計(jì)具有吸引力和用戶友好性的網(wǎng)頁。這些所學(xué)知識(shí)和技能將為學(xué)生未來在Web 前端開發(fā)領(lǐng)域的就業(yè)和職業(yè)發(fā)展奠定堅(jiān)實(shí)的基礎(chǔ)。

2.2 工單實(shí)施

課程采用崗位工單實(shí)戰(zhàn)任務(wù)為主線，以基于學(xué)習(xí)通與CSDN 高校教學(xué)社區(qū)平臺(tái)的混合教學(xué)為方法的“工單實(shí)施六步驟”教學(xué)方法。每個(gè)工單任務(wù)都有任務(wù)目標(biāo)、任務(wù)介紹、任務(wù)規(guī)劃、任務(wù)資訊、任務(wù)實(shí)施和任務(wù)總結(jié)6個(gè)步驟。

1)任務(wù)目標(biāo)：詳細(xì)說明本次任務(wù)完成后達(dá)到的目標(biāo)，此次教學(xué)重點(diǎn)內(nèi)容。

2)任務(wù)介紹：情景設(shè)置引入崗位工作任務(wù)，講解任務(wù)要求，明確任務(wù)目標(biāo)。

3)任務(wù)規(guī)劃：本次任務(wù)設(shè)計(jì)知識(shí)點(diǎn)思維導(dǎo)圖，理清任務(wù)涉及的知識(shí)點(diǎn)。

4)任務(wù)資訊：完成本次任務(wù)過程中應(yīng)知應(yīng)會(huì)的內(nèi)容講解，通常是任務(wù)理論講解、知識(shí)視頻、技術(shù)文章等教學(xué)內(nèi)容。

5)任務(wù)實(shí)施：提出任務(wù)實(shí)施要求，確定任務(wù)驗(yàn)收標(biāo)準(zhǔn)、操作規(guī)范、完成時(shí)間。

6)任務(wù)總結(jié)：學(xué)生總結(jié)此次任務(wù)得與失，教師對(duì)學(xué)生任務(wù)完成情況進(jìn)行評(píng)價(jià)打分。

2.3 課堂策略

課前知識(shí)獲取階段采用線上學(xué)習(xí)通+CSDN 學(xué)習(xí)社區(qū)開展。課中探究開發(fā)階段采用線下上機(jī)實(shí)踐模式開展，將任務(wù)案例教學(xué)、分組討論、情景模擬等多種教學(xué)方法有機(jī)融合。課后知識(shí)鞏固階段采用線上模式開展，通過分組完成工單任務(wù)，將知識(shí)內(nèi)化為職業(yè)技能。項(xiàng)目結(jié)束時(shí)通過答辯對(duì)學(xué)生的任務(wù)完成效果進(jìn)行評(píng)判。將枯燥的理論知識(shí)應(yīng)用到逼真的具體工作場景中，促使學(xué)生關(guān)注實(shí)際工作問題，激發(fā)將理論應(yīng)用于實(shí)踐的學(xué)習(xí)熱情，培養(yǎng)學(xué)生分析問題和解決問題的能力[5]。

課前知識(shí)獲取階段采用線上學(xué)習(xí)通+CSDN 學(xué)習(xí)社區(qū)開展，目的是讓學(xué)生在課程開始前通過線上平臺(tái)自主獲取相關(guān)知識(shí)。通過使用學(xué)習(xí)通和CSDN學(xué)習(xí)社區(qū)，學(xué)生可以瀏覽在線資料、觀看教學(xué)視頻，參與討論和交流，以便在課堂上有所準(zhǔn)備。

課中探究開發(fā)階段采用線下上機(jī)實(shí)踐模式開展，這一階段的重點(diǎn)是讓學(xué)生通過實(shí)踐來深入探究知識(shí)。課堂上，教師會(huì)結(jié)合任務(wù)案例教學(xué)、分組討論和情景模擬等多種教學(xué)方法，幫助學(xué)生將理論應(yīng)用于實(shí)際工作場景中。通過解決實(shí)際問題和完成具體任務(wù)，學(xué)生可以更好地理解知識(shí)，并培養(yǎng)他們分析問題和解決問題的能力[6]。

課后知識(shí)鞏固階段采用線上模式開展，旨在幫助學(xué)生鞏固所學(xué)知識(shí)并將其內(nèi)化為職業(yè)技能。學(xué)生將被分組完成工單任務(wù)，通過協(xié)作合作來運(yùn)用所學(xué)知識(shí)解決實(shí)際問題。線上平臺(tái)提供了便捷的工單任務(wù)發(fā)布和提交功能，學(xué)生可以在組內(nèi)交流討論，并最終將解決方案提交。通過這種方式，學(xué)生不僅可以加深對(duì)知識(shí)的理解，還能培養(yǎng)團(tuán)隊(duì)合作和溝通能力。

在項(xiàng)目結(jié)束時(shí)，將通過答辯對(duì)學(xué)生的任務(wù)完成效果進(jìn)行評(píng)判。這個(gè)環(huán)節(jié)旨在對(duì)學(xué)生的學(xué)習(xí)成果進(jìn)行總結(jié)和評(píng)估，評(píng)價(jià)他們?cè)趯?shí)踐中應(yīng)用理論的能力。通過答辯，學(xué)生需要展示他們?cè)诮鉀Q實(shí)際問題中所運(yùn)用的技能和思維方式，并回答評(píng)審人員的問題。

采取以上教學(xué)模式的目的是將枯燥的理論知識(shí)與逼真的具體工作場景相結(jié)合。通過關(guān)注實(shí)際工作問題，激發(fā)學(xué)生將理論應(yīng)用于實(shí)踐的學(xué)習(xí)熱情，并幫助他們培養(yǎng)分析問題和解決問題的能力。這樣的教學(xué)方法可以使學(xué)生從被動(dòng)傾聽者轉(zhuǎn)變?yōu)橹鲃?dòng)學(xué)習(xí)者，更好地準(zhǔn)備他們未來的職業(yè)發(fā)展。

2.4 資源建設(shè)

課程資源建設(shè)圍繞工單任務(wù)實(shí)施需求展開，分為質(zhì)量監(jiān)控教學(xué)平臺(tái)、專業(yè)技能學(xué)習(xí)資源、情景訓(xùn)練場三類。

第一類是質(zhì)量監(jiān)控教學(xué)平臺(tái)。這個(gè)平臺(tái)由學(xué)習(xí)通班級(jí)和CSDN技術(shù)學(xué)習(xí)社區(qū)組成。為了督促學(xué)生完成工單任務(wù)，該平臺(tái)會(huì)根據(jù)任務(wù)實(shí)施過程中的要求對(duì)學(xué)生進(jìn)行定量和定性的評(píng)估。教師可以通過學(xué)習(xí)通班級(jí)發(fā)布任務(wù)，收集并檢查學(xué)生的工單任務(wù)完成情況。同時(shí)，CSDN 技術(shù)學(xué)習(xí)社區(qū)提供了一個(gè)互動(dòng)交流的平臺(tái)，學(xué)生可以在其中分享經(jīng)驗(yàn)、互相討論問題，以便更好地完成任務(wù)。

第二類是專業(yè)技能學(xué)習(xí)資源。該類資源包括課程微課視頻、操作規(guī)范、紙質(zhì)教材、CSDN 技術(shù)博客以及企業(yè)工程師和教師的專業(yè)指導(dǎo)。通過這些資源，學(xué)生可以在不同的學(xué)習(xí)方式下全方位地獲取專業(yè)知識(shí)。微課視頻可以提供簡明扼要的講解，操作規(guī)范則明確了任務(wù)執(zhí)行過程中的步驟和規(guī)則。紙質(zhì)教材提供了更系統(tǒng)化和深入的理論知識(shí)。此外，訪問CSDN 技術(shù)博客和得到企業(yè)工程師和教師的指導(dǎo)可以幫助學(xué)生解決實(shí)際工作中遇到的難題，提高實(shí)踐能力。

第三類是情景訓(xùn)練場。為了模擬企業(yè)的工作環(huán)境和實(shí)際崗位，課程會(huì)部署相應(yīng)的設(shè)備環(huán)境，并考核學(xué)生對(duì)操作規(guī)范的掌握。在這個(gè)訓(xùn)練場中，學(xué)生可以得到真實(shí)的實(shí)踐鍛煉，提高他們?cè)诠ぷ鲌鼍跋碌穆殬I(yè)技能。通過面對(duì)真實(shí)的情境挑戰(zhàn)，學(xué)生能夠更好地理解并應(yīng)用所學(xué)的知識(shí)。

以上三類資源的建設(shè)旨在為學(xué)生提供全方位的學(xué)習(xí)支持。質(zhì)量監(jiān)控教學(xué)平臺(tái)幫助教師督查并評(píng)估學(xué)生的任務(wù)完成情況，促使學(xué)生積極投入學(xué)習(xí)。專業(yè)技能學(xué)習(xí)資源提供多樣化的學(xué)習(xí)材料和指導(dǎo)，幫助學(xué)生獲取專業(yè)知識(shí)和實(shí)踐技能。情景訓(xùn)練場則提供真實(shí)的環(huán)境和實(shí)踐機(jī)會(huì)，培養(yǎng)學(xué)生在實(shí)際工作中的應(yīng)變和解決問題能力。通過這些資源的綜合運(yùn)用，學(xué)生將能夠更好地應(yīng)用理論到實(shí)踐中，提高自己的綜合素質(zhì)和職業(yè)能力。

3 課程特色與創(chuàng)新

3.1 教學(xué)內(nèi)容的高階性

本課程將德育內(nèi)容與專業(yè)內(nèi)容充分融合，通過在課程思政中講述“長征精神”“井岡山精神”“愛崗敬業(yè)精神”等內(nèi)容，將思政元素融入本次任務(wù)課程中，使學(xué)生在學(xué)習(xí)和實(shí)踐中自覺地樹立正確的價(jià)值觀，實(shí)現(xiàn)思政育人目標(biāo)。通過講解這些精神，激發(fā)學(xué)生對(duì)于團(tuán)結(jié)協(xié)作、勇敢拼搏、服務(wù)社會(huì)等方面的意識(shí)和行動(dòng)力，培養(yǎng)他們的道德情操和社會(huì)責(zé)任感。在課程設(shè)計(jì)中，教師精心挑選相關(guān)案例和實(shí)際工作場景，讓學(xué)生在掌握技術(shù)知識(shí)的同時(shí)，也能理解相關(guān)的人文精神和價(jià)值取向。通過這樣的方式，課程具有高階性，不僅注重學(xué)生的專業(yè)能力培養(yǎng)，也注重他們的綜合素質(zhì)和人文修養(yǎng)的培養(yǎng)。

3.2 教學(xué)方式的創(chuàng)新性

為了提高教學(xué)效果和學(xué)生的學(xué)習(xí)主動(dòng)性，本課程采用了崗位工單實(shí)戰(zhàn)任務(wù)為主線的教學(xué)方式，同時(shí)結(jié)合了基于學(xué)習(xí)通和CSDN高校教學(xué)社區(qū)平臺(tái)的混合教學(xué)方法。這種創(chuàng)新的教學(xué)方式改變了傳統(tǒng)的“教師講、學(xué)生學(xué)、考試背”的教學(xué)模式，形成了一種基于傳統(tǒng)課堂和線上教學(xué)平臺(tái)的混合教學(xué)模式。通過“工單任務(wù)”，學(xué)生不僅需要掌握相關(guān)的知識(shí)和技能，還需要進(jìn)行實(shí)踐和應(yīng)用。激發(fā)了學(xué)生的探究式學(xué)習(xí)和反思總結(jié)的能力，在解決實(shí)際問題的過程中提高了教學(xué)效果。而采用混合教學(xué)的方式，可以讓學(xué)生靈活地利用線上平臺(tái)進(jìn)行學(xué)習(xí)和交流，增加了教學(xué)的靈活性和互動(dòng)性，使學(xué)生在學(xué)習(xí)中更加積極主動(dòng)。

3.3 人才培養(yǎng)的時(shí)效性

為了適應(yīng)時(shí)代的需求和社會(huì)的發(fā)展，本課程注重人才培養(yǎng)的時(shí)效性。通過與“1+X”課證、競賽“課賽”的雙重融通，為校企合作和產(chǎn)學(xué)研做好準(zhǔn)備，培養(yǎng)技能型人才。課程內(nèi)容采用項(xiàng)目貫穿和任務(wù)驅(qū)動(dòng)的方式進(jìn)行授課。教學(xué)知識(shí)點(diǎn)屬于“1+X”證書考核要求的知識(shí)點(diǎn)，重視培養(yǎng)學(xué)生的知識(shí)、技能和能力三個(gè)方面。在知識(shí)和技能掌握的同時(shí)，還注重提高學(xué)生的動(dòng)手能力、分析能力和解決問題的能力。通過實(shí)踐任務(wù)和競賽活動(dòng)的引導(dǎo)，學(xué)生可以將所學(xué)知識(shí)應(yīng)用到具體的實(shí)際工作中，并在實(shí)踐中不斷提升自己的專業(yè)能力。這種時(shí)效性的人才培養(yǎng)模式，有助于學(xué)生更好地適應(yīng)就業(yè)市場和社會(huì)的需要，并為他們的職業(yè)發(fā)展奠定堅(jiān)實(shí)的基礎(chǔ)。

4 教學(xué)成效

在教學(xué)中注重激發(fā)學(xué)生的學(xué)習(xí)主動(dòng)性，教師通過布置任務(wù)、設(shè)置情景、設(shè)計(jì)等環(huán)節(jié)完成學(xué)生“發(fā)現(xiàn)問題——解決問題”的實(shí)踐體驗(yàn)。學(xué)生在接受新知識(shí)、新技術(shù)的過程中，有目標(biāo)、有體驗(yàn)、有發(fā)現(xiàn)。利用線下實(shí)訓(xùn)、線上視頻、技術(shù)博客等資源，學(xué)生能夠反復(fù)看，隨時(shí)看，為學(xué)生完成目標(biāo)任務(wù)提供了便利性。通過學(xué)習(xí)通班級(jí)數(shù)據(jù)和CSDN 技術(shù)社區(qū)的博客評(píng)論，可以發(fā)現(xiàn)實(shí)行工單任務(wù)式教學(xué)，可以讓學(xué)生逐步體驗(yàn)到學(xué)習(xí)的成就感，逐漸建立起自信心。

課程思政將價(jià)值導(dǎo)向與知識(shí)傳授相融合，明確課程思政教學(xué)目標(biāo)，在知識(shí)傳授和能力培養(yǎng)中，弘揚(yáng)社會(huì)主義核心價(jià)值觀，傳播愛黨、愛國、積極向上的正能量，培養(yǎng)科學(xué)精神，從而實(shí)現(xiàn)將思想價(jià)值引領(lǐng)貫穿于教學(xué)計(jì)劃、課程標(biāo)準(zhǔn)、課程內(nèi)容等主要教學(xué)環(huán)節(jié)。