金課視域下H5編程技術(shù)課程線上線下混合式教學實踐研究

摘" 要：金課視域下，線上線下混合式教學模式成功實施的關(guān)鍵在于學生的全面參與、創(chuàng)新思維的培養(yǎng)和教師的高效引導。H5編程技術(shù)課程通過整合線上資源預習、線下課堂互動、實踐操作和項目驅(qū)動等多元化教學策略，促使學生從傳統(tǒng)的接受式學習轉(zhuǎn)變?yōu)樘剿魇綄W習，從而深度參與課程教學。這種教學模式不僅可以鍛煉學生的自主學習能力，提升團隊合作精神，而且能夠增強學生解決實際編程問題的能力，進一步促進學生創(chuàng)新思維和應用技能的培養(yǎng)。

關(guān)鍵詞：金課；H5編程技術(shù)；軟件工程；混合式教學

文章編號：1671-489X（2025）02-00-04

DOI：10.3969/j.issn.1671-489X.2025.02.0

0" 引言

在教育改革浪潮中，教育部于2018年提出金課概念，旨在提升課程質(zhì)量，摒棄低效的水課[1]。混合式教學模式結(jié)合線上與線下教育的優(yōu)勢，正成為教育的新趨勢，它通過多樣化的教學工具、方法和內(nèi)容，強化了教師的引導作用，提升了學生的參與性。在H5編程技術(shù)課程教學設(shè)計中，筆者采用混合式教學模式，其理論基礎(chǔ)深植于布魯姆的教育目標分類學，旨在實現(xiàn)認知領(lǐng)域的多層次學習目

標[2]。這種教學策略不僅可以促進學生從記憶到理解、應用、分析、綜合乃至評價的全面認知發(fā)展，而且通過靈活的教學設(shè)計，能夠滿足不同學習風格和需求的學生，從而提高教學質(zhì)量，增強教學效果。為了驗證混合式教學模式的效果，本文設(shè)計了一系列的教學活動和評估方法，旨在展示混合式教學模式與教育理論的契合度，并為優(yōu)化教學策略提供理論依據(jù)和實踐指導。

1" 線上線下混合式金課課程分析

1.1" 課程定位

H5編程技術(shù)是軟件工程專業(yè)的核心基礎(chǔ)課程，也是“1+X”體系下Web前端開發(fā)初級資格認證的組成部分。本課程旨在培養(yǎng)學生對HTML5編程基礎(chǔ)理論和技巧的掌握，為學生未來深入Web開發(fā)領(lǐng)域的學習奠定穩(wěn)固的基石。

1.2" 教學現(xiàn)狀分析

1.2.1" 學生層面

學生由于沒有網(wǎng)頁設(shè)計的基礎(chǔ)，對前端開發(fā)技術(shù)的認知有限，可能存在對編程語言和Web標準理解不足的問題。同時，大一學生可能對掌握抽象的編程概念和復雜的代碼邏輯感到困難。

1.2.2" 教師層面

教師需要更新教學方法，采用適合初學者的教學策略，如案例教學、項目驅(qū)動等，以提高學生的學習興趣和參與度。同時，教師需要具備豐富的前端開發(fā)實踐經(jīng)驗，以便更好地指導學生。

1.3" 課程培養(yǎng)目標

課程旨在通過教授HTML5、CSS3和JavaScript的基礎(chǔ)知識，使學生能夠熟練掌握H5編程的基本原則，并能夠獨立編寫基本的Web頁面以及實現(xiàn)簡單的交互效果。在教學過程中，通過實際操作和項目實踐，致力于培育學生的編程思維和問題解決技巧，同時激發(fā)他們對Web前端開發(fā)領(lǐng)域的濃厚興趣和探索欲望。

1.4" 教學對象分析

授課對象為軟件工程專業(yè)大一下學期的學生，他們對計算機科學和編程有一定的了解，但缺乏實際的Web開發(fā)經(jīng)驗；并且他們具有不同的背景，有的可能對編程有濃厚興趣，有的則需要更多的引導和激勵。

2" 教學模式構(gòu)建

在線上線下混合式金課建設(shè)標準的基礎(chǔ)上，對H5編程技術(shù)課程的教學環(huán)節(jié)進行構(gòu)建。遵循“兩性一度”（高階性、創(chuàng)新性、挑戰(zhàn)度）和學生中心的教育原則，根據(jù)學生的心理特點和知識吸收能力，設(shè)計線上線下相結(jié)合的教學模式。整個教學過程分為預熱、整合、實踐、拓展四個環(huán)節(jié)[3]，具體如圖1所示。

2.1" 預熱階段

預熱階段采用線上教學模式，利用超星泛雅平臺進行教學資源的創(chuàng)建與分享、課前測驗的設(shè)置與發(fā)布。學生在此階段主動積累基礎(chǔ)知識，并通過平臺討論區(qū)解決學習過程中的疑問。教師在這一過程中不僅監(jiān)督學生的學習進展，還積極參與討論，提供必要的指導和引導，以不斷增強學生的自主學習能力。

2.2" 整合階段

整合階段是混合式金課建設(shè)的核心環(huán)節(jié)，旨在通過線上和線下相結(jié)合的方式進行課堂教學。H5編程技術(shù)課程包括理論和實踐兩個方面，而整合階段主要關(guān)注理論學習。在預熱階段，學生通過自主學習已經(jīng)對即將講授的內(nèi)容有了初步的了解，在整合階段要加強學生對尚未牢固掌握的知識點的理解，教師的輔導尤為重要。這一環(huán)節(jié)包括線上的考勤和線下的任務(wù)布置，學生分組討論并展示討論成果。通過這個過程，教師能夠洞察學生對知識的掌握程度，并對知識盲點和課程重點進行詳細講解。此外，教師還可以在線接收學生的即時反饋，回答他們的常見疑問，并利用小測驗來評估課堂教學的成效。

2.3" 實踐階段

實踐階段是對整合階段知識的練習和鞏固，主要在機房進行。教師發(fā)布任務(wù)清單明確課堂重點，以提升學習效率。任務(wù)設(shè)計基于最近發(fā)展區(qū)和任務(wù)驅(qū)動原則，分為學習目標、任務(wù)要求、編程反思三個部分。首先，學生獨立完成基礎(chǔ)編程任務(wù)，小組討論解決難題，教師提供必要指導。接著，小組合作完成進階任務(wù)，促進創(chuàng)新和全員參與。最后，學生展示優(yōu)秀作品，教師點評，總結(jié)易錯點和重點，幫助學生避免重復錯誤。

2.4" 拓展階段

拓展階段是課前預熱、課中整合、上機實踐和課后拓展的閉環(huán)[4]，主要在線上進行。該教學環(huán)節(jié)至關(guān)重要，既是教師反思也是學生知識鞏固的階段。包括課后作業(yè)布置和教學評價反思兩部分。任務(wù)清單根據(jù)學生理解和最近發(fā)展區(qū)設(shè)計，分為小組和個人作業(yè)，旨在提升團隊協(xié)作和編程思維，同時鞏固理論知識。教師利用學習通平臺記錄學生數(shù)據(jù)和情感反饋，分析教學過程和效果，及時進行調(diào)整和改進，以提升教學能力和課堂效率。

通過這種綜合設(shè)計，期望能夠提升學生的學習體驗，激發(fā)學生的創(chuàng)新思維，同時通過實時情感分析和多元化評價，為教師提供教學反饋，不斷優(yōu)化教學策略，實現(xiàn)教學效果的最優(yōu)化。

3" 線上線下混合式金課教學實施

本研究選取豫章師范學院2022級軟件工程專業(yè)學生為研究對象，以H5編程技術(shù)課程第三章“HTML5+CSS3基礎(chǔ)”為例，開展線上線下混合式金課教學。

3.1" 預熱階段教學實施過程

3.1.1" 學習資源制作與推送

創(chuàng)建一個簡短的視頻，介紹HTML5的新增特性，如語義化標簽和多媒體支持。在視頻中融入實際的代碼示例，展示如何使用CSS3的過渡和動畫效果來美化網(wǎng)頁。

3.1.2" 課前小測設(shè)計及發(fā)布

設(shè)計一個包含若干道選擇題的小測，內(nèi)容涵蓋HTML5和CSS3的基礎(chǔ)知識，如HTML5的DOCTYPE聲明和CSS3的盒模型。在超星泛雅平臺上發(fā)布小測，鼓勵學生在課前完成，并在討論區(qū)分享自己的答案和理解。課前小測選擇題示例如圖2所示。

3.1.3" 學生自主學習與問題討論

學生觀看視頻教程，嘗試理解HTML5的結(jié)構(gòu)和CSS3的樣式規(guī)則。在討論區(qū)提出疑問，如“如何用CSS3實現(xiàn)按鈕的懸停效果”“HTML5的〈video〉標簽有哪些屬性”。

3.1.4" 教師指導

教師定期在討論區(qū)回復學生的問題，提供額外的學習資源，如CSS3的媒體查詢教程。發(fā)布預習提示，提醒學生注意HTML5的結(jié)構(gòu)變化和CSS3的新選擇器。

3.2" 整合階段教學實施過程

3.2.1" 線上考勤簽到

在課程開始前，通過平臺進行線上簽到，確保所有學生都準備討論即將到來的知識點。

3.2.2" 任務(wù)清單發(fā)布與小組討論

發(fā)布任務(wù)清單，要求學生討論什么是DIV+CSS布局。學生分組，準備在課堂上解釋DIV和CSS在網(wǎng)頁布局中的作用和關(guān)系。

3.2.3" 教師深入講解與課堂小測

對于學生在討論中提出的問題進行詳細解答，如“如何使用CSS3的@font-face規(guī)則”。在課堂上進行小測，檢測學生對HTML5和CSS3理論知識的掌握情況。

3.2.4" 線上實時反饋與解答

學生在課堂上通過平臺提出問題，如“CSS3的flexbox布局是如何工作的”。教師實時解答，并根據(jù)學生的反饋調(diào)整教學內(nèi)容，如增加對CSS3的媒體查詢的講解。

3.3" 實踐階段教學實施過程

3.3.1" 任務(wù)清單發(fā)布與上機指導

在機房發(fā)布任務(wù)清單，包括創(chuàng)建一個包含圖像和文本的HTML5頁面，并使用CSS3進行樣式設(shè)置。學生按照任務(wù)難度順序，先獨立完成基礎(chǔ)代碼練習。

3.3.2" 小組合作與問題解決

學生在小組內(nèi)分工合作，共同完成更復雜的任務(wù)，如使用CSS3的flexbox實現(xiàn)響應式布局，遇到問題時，小組內(nèi)討論解決。

3.3.3" 作品展示與點評

學生展示完成的作品，如一個具有基本導航欄和圖像輪播的網(wǎng)頁。教師點評作品，總結(jié)易錯點。

3.4" 拓展階段教學實施過程

3.4.1" 布置課后作業(yè)

布置課后作業(yè)，要求學生設(shè)計一個網(wǎng)上學習頁面。應用HTML5和CSS3的知識，包括結(jié)構(gòu)與表現(xiàn)分離的原則。設(shè)計小組作業(yè)，創(chuàng)建HTML5網(wǎng)上學習頁面，培養(yǎng)團隊協(xié)作和編程分解思維。

3.4.2" 教學反饋

教師收集學生作業(yè)和反饋，通過平臺數(shù)據(jù)分析學生的學習進度和理解程度。根據(jù)學生作業(yè)完成情況和情感反饋，反思教學方法，如是否需要增加實踐環(huán)節(jié)，如何提高學生對CSS3動畫效果的掌握等。

4" 教學效果分析

4.1" 學生知識掌握情況

在HTML5和CSS3基礎(chǔ)知識掌握方面，大多數(shù)學生能夠準確識別HTML5的結(jié)構(gòu)特點，對CSS3的基礎(chǔ)選擇器、樣式規(guī)則和優(yōu)先級有清晰的理解，并能正確應用到實際代碼中。在實踐操作能力提升方面，學生通過上機實踐，能夠獨立完成基本的HTML5頁面構(gòu)建，并應用CSS3進行樣式設(shè)置。在小組合作中，學生展現(xiàn)出良好的團隊協(xié)作能力，共同解決了一些復雜的布局和樣式問題。學習成績，尤其是高分段的人數(shù)明顯增多，如表1所示。

4.2" 教學方法的有效性

學生積極參與小組討論和課堂搶答互動，這表明互動式教學方法有效地促進了學生的思維活躍度和對知識的吸收。超星泛雅平臺為學生提供了便捷的學習資源和問題討論途徑，教師的實時回應也提高了學生的學習效率。

4.3" 課外拓展訓練效果好

課外拓展訓練在輕松的環(huán)境中進行，減輕了課堂帶給學生的壓力，提升了他們的學習興趣。學生通過實踐、嘗試和改進，更有效地掌握了知識和技能，為未來的學習和工作打下堅實基礎(chǔ)。通過分組任務(wù)的課外拓展訓練，學生還能夠更好地將課堂知識運用到實際問題解決中，加深對知識的理解和掌握。

4.4" 教學過程中的問題與改進

教學過程中也存在一些問題：預熱階段，學生的參與熱情和興趣程度不同，這可能影響后續(xù)階段的學習效果；整合階段，學生尤其是基礎(chǔ)薄弱的學生遇到將新知識與舊知識相融合的困難；實踐階段，需要充足的資源和工具支持，資源的不足或過時可能會限制學生的實踐能力；拓展階段，學生面臨將所學應用于實際問題的挑戰(zhàn)，尤其是在創(chuàng)新和解決復雜問題方面。為此，可以通過設(shè)計個性化的預熱活動、加強互動教學以促進知識整合、更新教學資源以及提供實際案例指導等措施來優(yōu)化教學過程[5]，確保學生在每個階段都能得到有效支持，從而提升整體的教學質(zhì)量，豐富學生的學習成果。

5" 結(jié)束語

H5編程技術(shù)課程旨在通過精心設(shè)計的四個教學環(huán)節(jié)——預熱、整合、實踐、拓展——實現(xiàn)學生的深度參與和高級學習策略的應用。這種教學模式通過分階段的深入教學，循序漸進地引導學生從基礎(chǔ)知識的學習到復雜概念的掌握，再到實際應用的創(chuàng)新，最終達到知識技能的拓展和深化。該教學方法提升了學生的參與度和學習動力，同時培養(yǎng)了學生的批判性思維和自主學習能力，為學生未來的編程實踐和技術(shù)創(chuàng)新奠定了基礎(chǔ)。

6" 參考文獻

[1] 王珊.高職院校“水課”的成因探析：局內(nèi)人“角色”與“互動”的社會學研究[J].中國職業(yè)技術(shù)教育，2023（31）：63-73.

[2] 胡國良，黃美初.“5G+AI”視域下智慧學習空間的構(gòu)建研究：基于開放大學的實踐探索[J].遠程教育雜志，2020，38（3）：95-104.

[3] 段振富，謝欽南，章勤瓊.數(shù)學“綜合與實踐”課程：內(nèi)涵、要求與啟示：基于三版數(shù)學課程標準的比較[J].天津師范大學學報（基礎(chǔ)教育版），2024，25（1）：19-24.

[4] 楊冬.脫嵌與內(nèi)嵌：智慧工程教學的現(xiàn)實困境與推進策略：基于技術(shù)嵌入理論[J].高校教育管理，2024（1）：33-46.

[5] 何蓮珍.服務(wù)高教強國建設(shè)，重構(gòu)大學外語課程體系[J].外語界，2023（5）：2-7.