“雙高計劃”背景下“Web前端設計”課程設計與實踐

何妹 龍江騰 樂小軍

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

關鍵詞：雙高計劃；Web前端設計；線上線下混合式；課程設計

中圖分類號：TP39；G434? ? 文獻標識碼：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年《江西省高水平高等職業院校和優勢特色專業建設實施方案》正式印發，吹響了江西省新時代職業教育高水平發展的集結號。2018年11月27日，江西省教育廳發文公布“江西省高等職業院校優勢特色專業擬立項名單”，江西信息應用職業技術學院軟件技術專業成功入選特色專業。

“雙高計劃”的總體目標是引領新時代職業教育實現高質量發展，而高等職業教育高質量發展的核心和重要載體是課程建設。針對軟件技術專業的核心課程進行線上線下混合式教學設計，既是“雙高計劃”建設的重要內容，也是適應“互聯網+職業教育”發展需求的重要探索，對于提高課堂教學質量，促進課程改革有著積極的意義。

1? 線上線下混合式課程設計

1.1? 課程介紹

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

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

1.2? 學情分析

1.2.1? 對象分析

授課對象是高職軟件技術專業的2021級大一新生，還不具備前端開發技能相關的專業知識，同期所學課程有C語言程序設計，后期相繼會學習“前端框架技術”“JavaScript程序設計”“響應式網頁開發”等課程。高職學生的主動學習意識較為薄弱，創新能力不足，理論聯系實際應用的視野不夠寬，但他們對借助互聯網的學習頗感興趣。Web課程在軟件技術專業人才培養方案中的地位如圖1所示。

1.2.2? 教材分析

課程教學采用2020年新編高職教材《Web前端設計案例教程》，內容編排依據“1+X”Web前端開發職業技能等級證書標準，以“項目+任務”的形式分解知識內容，淺顯易懂，層層深入，可供學生自主探究學習。同時，教材配套完整的數字化學習資源，滿足開放式學習需求。教學架構如圖2所示。

1.2.3? 學習基礎分析

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

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

1.3? 教學策略

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

遵循“學生主體、教師主導”的教學理念，采用“自學-促學-探學-互學-深學”線上線下混合式教學模式，教師將翻轉課堂和混合式學習理念引入傳統教學，把學銀在線學習平臺作為課堂內容的主要傳授方式形成翻轉課堂，或將其作為課堂教學的強化與補充，形成混合式教學模式。

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

1.3.2? 形成以項目任務為驅動的“六位一體”翻轉課堂

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

1.3.3? 構建多元化考核評價方式

借助超星學銀在線網絡平臺，采用過程性評價和綜合性評價相結合的評價原則。線上采集學生自主學習課程資源的數據、參與課堂互動的數據，線下提交完成的綜合項目，構建教師評價、企業導師評價與學生小組互評、自評相結合的多元化考核評價方式。

2? 教學實施過程

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

由于本課程各個任務的教學過程大致相同，下面以任務“盒子浮動”為例展示教學實施過程，整個教學過程分為課前探究、課中提升和課后拓展三個部分。

2.1? 課前探究

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

2.2? 課中提升

課中提升包括引案例、析方法、探方案、練技能4個環節。

2.2.1? 引案例

經過小組討論后，由小組學生代表闡述近年來我國的各項政策及事件，以此引入社會熱點“鄉村振興戰略”，并提出“鄉村振興”專題網頁案例設計，從而引出學習任務，理論聯系實際，激發學生學習興趣。

2.2.2? 析方法

結合課前所學知識，分組采用“找不同得積分”的趣味形式由學生對“鄉村振興”專題網頁案例展開分析，初步提出應用浮動知識完成的網頁內容。同時，反觀平臺數據，對課前學習不理解的知識，特別是浮動元素不占物理空間的難點知識，教師現場通過PPT課件、動畫演示、現場實操的形式講解元素浮動產生的網頁效果變化。

2.2.3? 探方案

在自學、分析、討論的基礎上，學生查閱相關資料，小組探究制定網頁內容設計方案，包含所用知識點與操作步驟，在頭腦風暴中提煉想法，并將小組方案進行分享。

2.2.4? 練技能

學生根據教師提供的案例效果與素材，結合課中對案例的分析，集中完成網頁中的橫向圖片排布效果。期間教師巡回指導，對學生實訓中出現的問題及時做出答疑。

2.3? 課后拓展

課后，采用線上方式，學生在平臺社區交流學習心得，分享設計方法。教師下發合作企業提供的真實項目，學生分層完成部分項目內容，同時，由企業工程師介紹行業崗位前端設計人才的技能標準，讓學生不斷了解當前社會技術的變化與需求。

3? 教學實施成效

3.1? 教學效果

3.1.1? 專題案例培養技能

整個教學過程以“鄉村振興”專題網站為項目，按照“項目+任務”的總分形式，以小組協助開展網頁內容設計，充分發揮了學生的學習主動性，強化學生技能的同時，培養學生的愛國情懷、奉獻精神和精益求精的工匠精神。

3.1.2? 層層遞進強效果

融合了信息資源的遞進式教學過程，層層深入，符合高職學生的認知規律。學生滿意度、課后測試正確率、實訓任務完成率、1+X考證率均明顯提升，圓滿完成教學任務。如圖6、圖7所示。

3.1.3? 實戰演練提能力

通過專題網站實戰演練，結合前端設計崗位標準，有利于激發學生學習的自主性和創造性，同時培養學生的團隊意識、精益求精的工作意識和責任心。學生參與項目的熱情得到提升，項目的完成質量明顯高于同級其他班級。

3.2? 特色創新

3.2.1? 依據實時數據實施因材施教

學銀在線網絡教學平臺適時采集數據，為教師掌握學生學習情況提供數據分析，準確鎖定問題，及時調整教學策略，滿足不同層次學生的學習需求。

3.2.2? 借助二維動畫促進知識理解

學生通過觀看Flash二維動畫，能夠非常直觀地理解盒子浮動、定位等知識，為知識的應用奠定基礎。

3.2.3? 嵌入鄉村振興激發愛國情懷

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

4? 結? 論

教學過程合理利用信息化手段，適時采用視頻、電子課件、動畫、項目案例，順水推舟，豐富有趣，有效提升學生參與課堂的積極性，營造課堂中學生的存在感與獲得感。以職業為本位，以能力為前提，打造“教、學、做、評、用”的立體式課堂，促進學生的職業能力和職業素養快速提高。軟件技術日新月異，需要進一步深化校企合作模式，提供更多的校內企業模式的工作環境，將更多的企業案例和技術標準引進課堂，幫助學生提前明確專業課程學習的作用，找準方向，為學生就業做好鋪墊。

參考文獻：

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

[2] 姚文靜，林樹燕，徐勇.線上線下混合式教學在高校“普通生物學”課程中的應用 [J]. 教育教學論壇，2021（51）：69-72.

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

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

[5] 張揚.高職學生關鍵能力培養的模式變革研究 [D].上海：華東師范大學，2022.

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