線上線下混合式一流課程建設研究與實踐

高廣銀　儲久良　成艷　宦臣

摘? 要： 為了實現高質量教育，在新的教育改革背景與爭創一流課程的形勢下，調研“Web前端開發技術”課程的教學現狀及Web前端工程師的崗位要求，總結教學中存在的問題并進行分析，探討了以調動學生自主學習為目標，以建設一流課程為導向，以開發立體化教學資源為載體，以線上線下混合式教學為途徑的教學改革。實踐表明，學生主動學習行為增加，整體學習效果提升。

關鍵詞： 一流課程; 立體化教學資源; 線上線下混合式教學; 課程思政

中圖分類號：G642;TP311? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2022）04-77-03

Research and practice of online and offline blended first-class curriculum construction

——taking the course of web front end development technology as an example

Gao Guangyin Chu Jiuliang Cheng Yan Huan Chen

（1. School of Computer Science and Engineering， Taizhou Institute of Sci.&Tech， Taizhou， Jiangsu 225300， China;

2. Information Construction and Management Office， Taizhou Institute of Sci.&Tech）

Abstract： In order to achieve high-quality education， under the new situation of education reform and striving to build first-class courses， in this paper， the teaching status of the course "Web Front-end Development Technology" and the post requirements of Web front-end engineers are investigated， and the existing problems in teaching are summarized. The teaching reform methods for "mobilizing students' autonomous learning as the goal， building first-class courses as the guide， developing three-dimensional teaching resources as the carrier， and online and offline hybrid teaching as the approach" are discussed. Practice shows that students' active learning behavior is increased， and the overall learning effect is improved.

Key words： first-class courses; three-dimensional teaching resources; online and offline hybrid teaching; ideological and political theory integrated course

0 引言

前端開發主要利用HTML、CSS、JavaScript以及衍生出來的各種技術、框架創建Web頁面，實現用戶界面交互。隨著互聯網技術的發展，前端開發核心技術不斷發展，各種UI框架、JS類庫層出不窮，前端開發難度逐步提升[1]。近年來，在推進高質量教育的形勢下，中國高等教育面臨革命性調整，全國將有數百所高校向應用型轉變[2]，以培養應用型人才。在培養應用型人才的過程中如何實現教學過程與生產過程的對接，使得課程教學更好地適應人才培養要求，本文把理論聯系實際，以“Web前端開發技術”課程為例，探討一流課程的建設思路和具體舉措。

1 教學現狀及問題

1.1 理論知識掌握不夠系統

“Web前端開發技術”課程的知識相對龐雜，學生掌握不夠系統性。首先，前端開發技術包括HTML、CSS及JavaScript三個方面，其中HTML包括很多標簽和屬性，CSS包含各種外觀設置屬性，JavaScript雖然是弱類型語言，但同樣具有程序設計語言相關基本要素。在多次學情調研中發現，學生普遍反映該課程并不難，但就是記不住那些語法、標簽和屬性，導致一看案例就懂，一練實例就手忙腳亂的局面。究其原因是，沒有通過循序漸進的練習將每個知識點消化吸收，再將多個知識點串聯起來運用，系統地掌握相關知識。

1.2 實踐動手能力偏弱

“Web前端開發技術”是一門理論與實踐并重的課程，其教學要求之一是培養學生進行Web頁面設計的能力和養成良好程序設計的習慣。對于一個開發需求，要求學生能夠通過分析，選擇合適的標簽、屬性等進行布局設計、外觀樣式設計等，從而提高分析和解決問題的能力，達到學以致用的目的，所以在整個教學過程中，上機實驗是個至關重要的環節。但是在實際教學中，一方面課時有限，平均每周一次上機課，每次二學時;另一方面學生缺乏良好的復習習慣，未能充分做好上機實驗課的知識準備，使得上機課不是在運用知識，而是在消化知識，上機效率降低且達不到實踐效果;此外，在開放性實驗環節，學生選題過大，對界面美觀的期望過高，而與實際完成度之間形成一定落差，往往帶來一些挫折感，這些都反映了動手實踐能力偏弱。

2 理論教學改革

針對上述問題，整體教學改革思路是轉變思想，以學生為中心，結合社會及用人單位的需求，對標一流課程建設標準[3]，完善教學資源建設，采用線上線下混合式教學方式[4]，加強課程思政教育，充分調動學生積極性，發揮學生主動性，從而強化動手能力，提高知識綜合運用能力。

2.1 建設立體教學資源，開展線上線下混合式教學

契合社會及用人單位的需求，重新梳理教學內容，建設立體式教學資源。為了更好地培養應用型人才，首先根據崗位的要求，梳理出相應的知識、能力、素質的要求，進而對教學內容進行重新組織，使得各教學單元主題明確、知識量適中、知識點相關聯，每個單元相對獨立，從而有利于打造立體式教學資源，即與超星公司、清華大學出版社等企業深度合作，建設線上課程管理平臺，提供微課視頻、單元測試題、課后作業、試卷等一整套能夠與教學計劃相適應的教學資源，并可進行教學過程管理及學習數據分析。

對標一流課程建設標準，開展線上線下混合式教學。課程教學改革的實施還需依靠課堂教學，國家“雙萬計劃”中一流課程建設標準已經指明了改革的方向，根據本課程特點，采用線上線下混合式教學模式，將一方面可以彌補教學課時的不足，另一方面也是更重要的方面，能夠真正地實現“以學生為中心”，通過合理地將教學單元設置為線上與線下兩種不同形式，促進學生更自主地學習，課程比例設計如表1所示，其中陰影部分為線上教學單元，比例為32.14%。例如課程中一些簡單標記、屬性等基本語法內容的學習，可以錄制優質視頻，在視頻中嵌入隨堂問題，并配套相應自測題，以任務驅動的方式讓學生線上自主學習。而一些較難、相對綜合或者比較開放的環節則采用線下翻轉[5-6]、分組討論等形式，促進學生們加強學習交流。

2.2 遴選思政元素，融入專業教育

教學改革須堅持“立德樹人是教育的根本任務”[7]，深度挖掘課程蘊含的思想政治教育資源，實現思想和價值的引領，發揮專業課程育人功能。圍繞社會主義核心價值觀、科技強國精神、專業素養、科研精神、大局觀等思政元素，梳理契合的課程知識點，挖掘相關的思政案例，將其融入課堂教學，實現專業思政育人，如表2所示。

3 實驗教學改進

“Web前端開發技術”是一門實踐性很強的課程，基本概念和語法、技巧與方法必須通過反復練習來掌握，針對學生動手能力偏弱的問題對實驗教學進行改進。

3.1 保證上機課的數量

傳統的教學模式是理論為主上機為輔，這對于培養科學型人才是受用的，同時對于基礎扎實、主動性強的學生也是適用的，但是對于培養應用型人才不太合適，他們更需要加強實踐操作。前端開發課程的特點是一些知識多練習、經常運用就能掌握，需要加大動手練習環節。此外，通過線上教學環節設置自主學習任務，通過任務驅動學生完成一定基礎訓練量，使學生養成勤練習慣。

3.2 提高上機課的質量

要提高上機課的質量，必須精心設計上機實驗題。根據應用型人才培養要求，緊扣知識點及實際應用場景，選擇有代表性的、難度適中的實例作為實驗題。設置不同的難度，包括基礎型、驗證型、綜合型及設計型，并且分為必做題和選做題。基礎型、驗證型的題目為必做題，以鞏固前端開發技術的概念和語法;綜合型、設計型的題目為選做題，訓練學生綜合運用知識、分析并解決問題的能力，在實施時可以根據情況提供輔助，如允許學生分組完成，或為學生提供部分框架性源代碼，引導學生完成復雜網頁設計。此外，可以允許學生自選綜合型、設計型實驗題，由教師把關，學生對自選題往往更有責任心;允許學生就某些復雜網頁結構或構成元素進行研究。這樣，學生通過自身努力，在一定時間內能夠看到結果，就產生一種成就感[8]，逐步增強自信心，提高學習興趣。

4 結束語

為了推進高質量教育，培養好應用型人才，以“Web前端開發技術”課程為例，探討了線上線下混合式一流課程的建設思路與舉措，包括以學生為中心，重構教學內容，建設立體化教學資源，采用線上線下混合式教學模式，在教學過程中融入課程思政理念等，通過實踐明顯地調動了學生學習主動性，整體學習效果提升，取得一定成效。進一步工作將根據平臺積累的教學數據，對教學情況進行多維度量化分析，如學習行為分析、學習訴求分析、課程目標達成度分析等，從而對課程建設進行持續改進。

參考文獻（References）：

[1] 儲久良.Web前端開發技術——HTML、CSS3、JavaScript（第3版）[M].清華大學出版社，2018.

[2] 韓保清.以新工科建設推動地方高校向應用型轉變[J].中國高等教育，2021（2）：10-12

[3] 楊曉宏，鄭新，田春雨.線上線下混合式一流本科課程的內涵、建設目標與建設策略[J].現代教育技術，2021，31（9）：104-111

[4] 李慧，施珺等.線上線下混合式一流課程建設的探索與實踐[J].計算機教育，2021（7）：183-187

[5] 姜迎春，岳湘，等.工程材料課程混合式教學模式構建及翻轉課堂實踐研究[J].高教學刊，2021，7（24）：89-92

[6] 王波.翻轉課堂教學模式淺析[J].計算機時代，2021（9）：99-102

[7] 孟瑤.“Web前端開發技術”課程思政研究[J].電腦與信息技術，2020，28（3）：83-84

[8] 王肖燁，李春磊，等.新工科背景下人才學習質量提升路徑探索與實踐[J].科技與創新，2021（17）：151-152，157