“雙高計(jì)劃”背景下“Web前端設(shè)計(jì)”課程設(shè)計(jì)與實(shí)踐

何妹 龍江騰 樂小軍

摘? 要：文章以“雙高計(jì)劃”課程建設(shè)為背景，對課程進(jìn)行線上線下混合式教學(xué)設(shè)計(jì)，從課程資源、學(xué)情分析、教學(xué)策略、教學(xué)實(shí)施、教學(xué)評價(jià)五個(gè)方面對本課程進(jìn)行改革探索和實(shí)踐。深度采用案例探索模式，提高教師業(yè)務(wù)水平和授課水平；邀請企業(yè)專家合作編寫教材，使教材內(nèi)容與職業(yè)崗位能力要求相契合；并建立以實(shí)踐應(yīng)用能力為導(dǎo)向的課程考核體系，改變課堂上重理論、輕實(shí)踐的學(xué)習(xí)現(xiàn)狀。

關(guān)鍵詞：雙高計(jì)劃；Web前端設(shè)計(jì)；線上線下混合式；課程設(shè)計(jì)

中圖分類號：TP39；G434? ? 文獻(xiàn)標(biāo)識碼：A? ? 文章編號：2096-4706（2023）10-0182-05

Abstract： With the construction of “Double High Plan” course as the background， this paper carries on a online and offline blended teaching design for the course， exploring and practicing the reform of this course from five aspects： course resources， learning situation analysis， teaching strategies， teaching implementation， and teaching evaluation. Deeply adopting case exploration mode to improve teachers' professional level and teaching level; Invite enterprise experts to collaborate in writing textbooks to ensure that the content of the textbooks aligns with the requirements of professional abilities; And establish a course assessment system guided by practical application ability， changing the current situation of emphasizing theory over practice in the classroom.

Keywords： double high plan; Web front-end design; online and offline blending mode; course design

0? 引? 言

2018年《江西省高水平高等職業(yè)院校和優(yōu)勢特色專業(yè)建設(shè)實(shí)施方案》正式印發(fā)，吹響了江西省新時(shí)代職業(yè)教育高水平發(fā)展的集結(jié)號。2018年11月27日，江西省教育廳發(fā)文公布“江西省高等職業(yè)院校優(yōu)勢特色專業(yè)擬立項(xiàng)名單”，江西信息應(yīng)用職業(yè)技術(shù)學(xué)院軟件技術(shù)專業(yè)成功入選特色專業(yè)。

“雙高計(jì)劃”的總體目標(biāo)是引領(lǐng)新時(shí)代職業(yè)教育實(shí)現(xiàn)高質(zhì)量發(fā)展，而高等職業(yè)教育高質(zhì)量發(fā)展的核心和重要載體是課程建設(shè)。針對軟件技術(shù)專業(yè)的核心課程進(jìn)行線上線下混合式教學(xué)設(shè)計(jì)，既是“雙高計(jì)劃”建設(shè)的重要內(nèi)容，也是適應(yīng)“互聯(lián)網(wǎng)+職業(yè)教育”發(fā)展需求的重要探索，對于提高課堂教學(xué)質(zhì)量，促進(jìn)課程改革有著積極的意義。

1? 線上線下混合式課程設(shè)計(jì)

1.1? 課程介紹

“Web前端設(shè)計(jì)”是軟件技術(shù)專業(yè)開設(shè)的一門核心專業(yè)基礎(chǔ)課程，培養(yǎng)具有前端開發(fā)設(shè)計(jì)基礎(chǔ)的高等技能型實(shí)踐人才，對學(xué)生的職業(yè)崗位能力、職業(yè)素養(yǎng)養(yǎng)成起支撐作用，是程序員、軟件設(shè)計(jì)師等職業(yè)資格證書和1+X Web前端開發(fā)職業(yè)技能等級證書所必備的技能。

本課程開設(shè)在第一學(xué)期，共80個(gè)學(xué)時(shí)，教學(xué)內(nèi)容涵蓋網(wǎng)頁基礎(chǔ)知識、網(wǎng)頁結(jié)構(gòu)和標(biāo)簽、CSS樣式、網(wǎng)頁選擇器、CSS美化網(wǎng)頁元素、盒子模型、CSS3屬性和綜合案例八個(gè)項(xiàng)目，內(nèi)容層層遞進(jìn)，緊密銜接，皆在培養(yǎng)學(xué)生的網(wǎng)頁設(shè)計(jì)能力。教學(xué)過程以專題案例形式有機(jī)融入愛國情懷、工匠精神、奉獻(xiàn)精神、職業(yè)道德等思政元素，在提升專業(yè)技能的同時(shí)，注重愛國主義、社會主義核心價(jià)值觀的培養(yǎng)。

1.2? 學(xué)情分析

1.2.1? 對象分析

授課對象是高職軟件技術(shù)專業(yè)的2021級大一新生，還不具備前端開發(fā)技能相關(guān)的專業(yè)知識，同期所學(xué)課程有C語言程序設(shè)計(jì)，后期相繼會學(xué)習(xí)“前端框架技術(shù)”“JavaScript程序設(shè)計(jì)”“響應(yīng)式網(wǎng)頁開發(fā)”等課程。高職學(xué)生的主動(dòng)學(xué)習(xí)意識較為薄弱，創(chuàng)新能力不足，理論聯(lián)系實(shí)際應(yīng)用的視野不夠?qū)挘麄儗柚ヂ?lián)網(wǎng)的學(xué)習(xí)頗感興趣。Web課程在軟件技術(shù)專業(yè)人才培養(yǎng)方案中的地位如圖1所示。

1.2.2? 教材分析

課程教學(xué)采用2020年新編高職教材《Web前端設(shè)計(jì)案例教程》，內(nèi)容編排依據(jù)“1+X”Web前端開發(fā)職業(yè)技能等級證書標(biāo)準(zhǔn)，以“項(xiàng)目+任務(wù)”的形式分解知識內(nèi)容，淺顯易懂，層層深入，可供學(xué)生自主探究學(xué)習(xí)。同時(shí)，教材配套完整的數(shù)字化學(xué)習(xí)資源，滿足開放式學(xué)習(xí)需求。教學(xué)架構(gòu)如圖2所示。

1.2.3? 學(xué)習(xí)基礎(chǔ)分析

本門課程教授的學(xué)生為軟件技術(shù)專業(yè)大一的學(xué)生，學(xué)生好奇心強(qiáng)，喜歡動(dòng)手和實(shí)踐，但學(xué)習(xí)缺少主動(dòng)性，不能很好地將理論和實(shí)踐結(jié)合。同時(shí)學(xué)生對超星學(xué)銀在線學(xué)習(xí)平臺和學(xué)習(xí)通APP的使用非常熟練，能夠開展個(gè)性化自主學(xué)習(xí)。

學(xué)習(xí)情況實(shí)時(shí)更新，學(xué)期中期根據(jù)超星學(xué)習(xí)通平臺數(shù)據(jù)反饋，如圖3所示，學(xué)生對DIV+CSS網(wǎng)頁布局技術(shù)基礎(chǔ)知識在理解方面存在較大困難，65%的學(xué)生還停留在了解知識的層面，只有10%的學(xué)生能夠自行完成實(shí)訓(xùn)，整體應(yīng)用水平有待提高；學(xué)生普遍傾向于用網(wǎng)絡(luò)平臺開展學(xué)習(xí)，比較關(guān)注社會熱點(diǎn)。因此我們引入鄉(xiāng)村振興專題案例，并通過信息化手段融入教學(xué)，激發(fā)學(xué)生的自主學(xué)習(xí)意識，培養(yǎng)和營造良好的學(xué)習(xí)興趣。

1.3? 教學(xué)策略

1.3.1? 采用“五學(xué)”線上線下混合式教學(xué)模式

遵循“學(xué)生主體、教師主導(dǎo)”的教學(xué)理念，采用“自學(xué)-促學(xué)-探學(xué)-互學(xué)-深學(xué)”線上線下混合式教學(xué)模式，教師將翻轉(zhuǎn)課堂和混合式學(xué)習(xí)理念引入傳統(tǒng)教學(xué)，把學(xué)銀在線學(xué)習(xí)平臺作為課堂內(nèi)容的主要傳授方式形成翻轉(zhuǎn)課堂，或?qū)⑵渥鳛檎n堂教學(xué)的強(qiáng)化與補(bǔ)充，形成混合式教學(xué)模式。

本次課程采用的教學(xué)方法非常豐富，但又不會冗余，通過不同的教學(xué)方法和教學(xué)手段，讓課程的節(jié)奏穩(wěn)步推進(jìn)同時(shí)又環(huán)環(huán)相扣，形成了一套完整的教學(xué)和實(shí)踐的閉環(huán)，讓學(xué)生每一分鐘的學(xué)習(xí)都能進(jìn)入到最佳的狀態(tài)，全程保持高度的學(xué)習(xí)注意力，且課后也保持旺盛的學(xué)習(xí)興趣，達(dá)到最佳的教學(xué)效果。其主要使用的教學(xué)方法依次如表1所示。

1.3.2? 形成以項(xiàng)目任務(wù)為驅(qū)動(dòng)的“六位一體”翻轉(zhuǎn)課堂

引入社會熱點(diǎn)“鄉(xiāng)村振興”專題網(wǎng)頁案例，激發(fā)學(xué)生的學(xué)習(xí)興趣。以完成“鄉(xiāng)村振興”專題網(wǎng)頁為總項(xiàng)目，對接相應(yīng)知識模塊。通過項(xiàng)目引導(dǎo)、任務(wù)驅(qū)動(dòng)的教學(xué)方法，重點(diǎn)突出教學(xué)過程中的“學(xué)、引、析、探、練、延”，激發(fā)學(xué)生自主學(xué)習(xí)，完成課前探究、課中提升、課后拓展的學(xué)習(xí)過程，最終完成項(xiàng)目任務(wù)，真正做到做中學(xué)，做中教。利用微課、動(dòng)畫等信息化資源輔助教學(xué)，有利于幫助學(xué)生突破重難點(diǎn)。超星學(xué)銀在線網(wǎng)絡(luò)平臺對教學(xué)過程數(shù)據(jù)實(shí)時(shí)跟蹤采集，依據(jù)平臺記錄，實(shí)現(xiàn)個(gè)性化學(xué)習(xí)和差異化指導(dǎo)。

1.3.3? 構(gòu)建多元化考核評價(jià)方式

借助超星學(xué)銀在線網(wǎng)絡(luò)平臺，采用過程性評價(jià)和綜合性評價(jià)相結(jié)合的評價(jià)原則。線上采集學(xué)生自主學(xué)習(xí)課程資源的數(shù)據(jù)、參與課堂互動(dòng)的數(shù)據(jù)，線下提交完成的綜合項(xiàng)目，構(gòu)建教師評價(jià)、企業(yè)導(dǎo)師評價(jià)與學(xué)生小組互評、自評相結(jié)合的多元化考核評價(jià)方式。

2? 教學(xué)實(shí)施過程

課程教學(xué)始終圍繞以學(xué)生為中心，通過借助信息技術(shù)、互聯(lián)網(wǎng)技術(shù)和網(wǎng)絡(luò)學(xué)習(xí)平臺，合理設(shè)計(jì)翻轉(zhuǎn)課堂，開展線上線下混合式教學(xué)，充分依賴學(xué)習(xí)通APP功能，廣泛拓展師生的知識交流與探討范疇，激發(fā)學(xué)生的求知欲望。在不同的教學(xué)環(huán)節(jié)中融入適合的鄉(xiāng)村振興等思政元素，持續(xù)搜集先進(jìn)人物事跡素材，建立實(shí)踐教學(xué)素材庫，并根據(jù)實(shí)際授課效果及新的技術(shù)發(fā)展趨勢以及思政元素的新提法，不斷完善與更新教學(xué)素材庫。利用網(wǎng)絡(luò)資源，將中華優(yōu)秀傳統(tǒng)文化、革命文化、社會主義先進(jìn)文化有機(jī)融入平臺建設(shè)，使學(xué)生正確認(rèn)識世界和中國發(fā)展大勢，堅(jiān)定理想信念。同時(shí)，抓住重大歷史事件紀(jì)念活動(dòng)節(jié)點(diǎn)，在課堂開展內(nèi)容豐富的主題活動(dòng)吸引學(xué)生參與。

由于本課程各個(gè)任務(wù)的教學(xué)過程大致相同，下面以任務(wù)“盒子浮動(dòng)”為例展示教學(xué)實(shí)施過程，整個(gè)教學(xué)過程分為課前探究、課中提升和課后拓展三個(gè)部分。

2.1? 課前探究

課前1～2天，教師在超星學(xué)銀在線平臺發(fā)布學(xué)習(xí)資源（包括微課、教案、習(xí)題等），明確學(xué)習(xí)任務(wù)，下發(fā)督學(xué)通知，及時(shí)了解學(xué)生學(xué)習(xí)情況，對學(xué)習(xí)滯后的同學(xué)給予提醒。學(xué)生完成內(nèi)容自學(xué)，查看應(yīng)用案例效果，借助微課自主探究網(wǎng)頁圖片排列方法，并完成課前測驗(yàn)題，收集學(xué)習(xí)難點(diǎn)，平臺記錄學(xué)生學(xué)習(xí)數(shù)據(jù)，強(qiáng)化學(xué)生競爭意識。界面展示如圖4、圖5所示。

2.2? 課中提升

課中提升包括引案例、析方法、探方案、練技能4個(gè)環(huán)節(jié)。

2.2.1? 引案例

經(jīng)過小組討論后，由小組學(xué)生代表闡述近年來我國的各項(xiàng)政策及事件，以此引入社會熱點(diǎn)“鄉(xiāng)村振興戰(zhàn)略”，并提出“鄉(xiāng)村振興”專題網(wǎng)頁案例設(shè)計(jì)，從而引出學(xué)習(xí)任務(wù)，理論聯(lián)系實(shí)際，激發(fā)學(xué)生學(xué)習(xí)興趣。

2.2.2? 析方法

結(jié)合課前所學(xué)知識，分組采用“找不同得積分”的趣味形式由學(xué)生對“鄉(xiāng)村振興”專題網(wǎng)頁案例展開分析，初步提出應(yīng)用浮動(dòng)知識完成的網(wǎng)頁內(nèi)容。同時(shí)，反觀平臺數(shù)據(jù)，對課前學(xué)習(xí)不理解的知識，特別是浮動(dòng)元素不占物理空間的難點(diǎn)知識，教師現(xiàn)場通過PPT課件、動(dòng)畫演示、現(xiàn)場實(shí)操的形式講解元素浮動(dòng)產(chǎn)生的網(wǎng)頁效果變化。

2.2.3? 探方案

在自學(xué)、分析、討論的基礎(chǔ)上，學(xué)生查閱相關(guān)資料，小組探究制定網(wǎng)頁內(nèi)容設(shè)計(jì)方案，包含所用知識點(diǎn)與操作步驟，在頭腦風(fēng)暴中提煉想法，并將小組方案進(jìn)行分享。

2.2.4? 練技能

學(xué)生根據(jù)教師提供的案例效果與素材，結(jié)合課中對案例的分析，集中完成網(wǎng)頁中的橫向圖片排布效果。期間教師巡回指導(dǎo)，對學(xué)生實(shí)訓(xùn)中出現(xiàn)的問題及時(shí)做出答疑。

2.3? 課后拓展

課后，采用線上方式，學(xué)生在平臺社區(qū)交流學(xué)習(xí)心得，分享設(shè)計(jì)方法。教師下發(fā)合作企業(yè)提供的真實(shí)項(xiàng)目，學(xué)生分層完成部分項(xiàng)目內(nèi)容，同時(shí)，由企業(yè)工程師介紹行業(yè)崗位前端設(shè)計(jì)人才的技能標(biāo)準(zhǔn)，讓學(xué)生不斷了解當(dāng)前社會技術(shù)的變化與需求。

3? 教學(xué)實(shí)施成效

3.1? 教學(xué)效果

3.1.1? 專題案例培養(yǎng)技能

整個(gè)教學(xué)過程以“鄉(xiāng)村振興”專題網(wǎng)站為項(xiàng)目，按照“項(xiàng)目+任務(wù)”的總分形式，以小組協(xié)助開展網(wǎng)頁內(nèi)容設(shè)計(jì)，充分發(fā)揮了學(xué)生的學(xué)習(xí)主動(dòng)性，強(qiáng)化學(xué)生技能的同時(shí)，培養(yǎng)學(xué)生的愛國情懷、奉獻(xiàn)精神和精益求精的工匠精神。

3.1.2? 層層遞進(jìn)強(qiáng)效果

融合了信息資源的遞進(jìn)式教學(xué)過程，層層深入，符合高職學(xué)生的認(rèn)知規(guī)律。學(xué)生滿意度、課后測試正確率、實(shí)訓(xùn)任務(wù)完成率、1+X考證率均明顯提升，圓滿完成教學(xué)任務(wù)。如圖6、圖7所示。

3.1.3? 實(shí)戰(zhàn)演練提能力

通過專題網(wǎng)站實(shí)戰(zhàn)演練，結(jié)合前端設(shè)計(jì)崗位標(biāo)準(zhǔn)，有利于激發(fā)學(xué)生學(xué)習(xí)的自主性和創(chuàng)造性，同時(shí)培養(yǎng)學(xué)生的團(tuán)隊(duì)意識、精益求精的工作意識和責(zé)任心。學(xué)生參與項(xiàng)目的熱情得到提升，項(xiàng)目的完成質(zhì)量明顯高于同級其他班級。

3.2? 特色創(chuàng)新

3.2.1? 依據(jù)實(shí)時(shí)數(shù)據(jù)實(shí)施因材施教

學(xué)銀在線網(wǎng)絡(luò)教學(xué)平臺適時(shí)采集數(shù)據(jù)，為教師掌握學(xué)生學(xué)習(xí)情況提供數(shù)據(jù)分析，準(zhǔn)確鎖定問題，及時(shí)調(diào)整教學(xué)策略，滿足不同層次學(xué)生的學(xué)習(xí)需求。

3.2.2? 借助二維動(dòng)畫促進(jìn)知識理解

學(xué)生通過觀看Flash二維動(dòng)畫，能夠非常直觀地理解盒子浮動(dòng)、定位等知識，為知識的應(yīng)用奠定基礎(chǔ)。

3.2.3? 嵌入鄉(xiāng)村振興激發(fā)愛國情懷

整個(gè)項(xiàng)目以鄉(xiāng)村振興專題案例貫穿知識講解的始終，充分挖掘課程思政元素，無聲育人，既鍛煉學(xué)生職業(yè)能力，又培養(yǎng)學(xué)生的無私奉獻(xiàn)精神。

4? 結(jié)? 論

教學(xué)過程合理利用信息化手段，適時(shí)采用視頻、電子課件、動(dòng)畫、項(xiàng)目案例，順?biāo)浦郏S富有趣，有效提升學(xué)生參與課堂的積極性，營造課堂中學(xué)生的存在感與獲得感。以職業(yè)為本位，以能力為前提，打造“教、學(xué)、做、評、用”的立體式課堂，促進(jìn)學(xué)生的職業(yè)能力和職業(yè)素養(yǎng)快速提高。軟件技術(shù)日新月異，需要進(jìn)一步深化校企合作模式，提供更多的校內(nèi)企業(yè)模式的工作環(huán)境，將更多的企業(yè)案例和技術(shù)標(biāo)準(zhǔn)引進(jìn)課堂，幫助學(xué)生提前明確專業(yè)課程學(xué)習(xí)的作用，找準(zhǔn)方向，為學(xué)生就業(yè)做好鋪墊。

參考文獻(xiàn)：

[1] 孔祥陽，李傳偉，李欣星.“雙高計(jì)劃”背景下高職高等數(shù)學(xué)“金課”建設(shè)的路徑探索 [J].內(nèi)江科技，2022，43（3）：140-141.

[2] 姚文靜，林樹燕，徐勇.線上線下混合式教學(xué)在高?！捌胀ㄉ飳W(xué)”課程中的應(yīng)用 [J]. 教育教學(xué)論壇，2021（51）：69-72.

[3] 高廣銀，儲久良，成艷，等.線上線下混合式一流課程建設(shè)研究與實(shí)踐——以“Web前端開發(fā)技術(shù)”課程為例 [J].計(jì)算機(jī)時(shí)代，2022（4）：77-79.

[4] 教育部.教育部關(guān)于印發(fā)《高等學(xué)校課程思政建設(shè)指導(dǎo)綱要》的通知 [R/OL].（2020-05-28）[2022-10-23].http：//www.gov.cn/zhengce/zhengceku/2020-06/06/content_5517606.htm.

[5] 張揚(yáng).高職學(xué)生關(guān)鍵能力培養(yǎng)的模式變革研究 [D].上海：華東師范大學(xué)，2022.

作者簡介：何妹（1992—），女，漢族，湖南永州人，助教，碩士研究生，研究方向：移動(dòng)計(jì)算、前端開發(fā)；龍江騰（1990—），男，漢族，江西南昌人，講師，碩士研究生，研究方向：軟件開發(fā)、VR開發(fā)；樂小軍（1990—），男，漢族，江西撫州人，助教，碩士研究生在讀，研究方向：公共管理學(xué)。