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

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

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

文章編號(hào)：1671-489X（2025）02-00-04

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

0" 引言

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

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

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

1.1" 課程定位

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

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

1.2.1" 學(xué)生層面

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

1.2.2" 教師層面

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

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

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

1.4" 教學(xué)對(duì)象分析

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

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

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

2.1" 預(yù)熱階段

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

2.2" 整合階段

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

2.3" 實(shí)踐階段

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

2.4" 拓展階段

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

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

3" 線上線下混合式金課教學(xué)實(shí)施

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

3.1" 預(yù)熱階段教學(xué)實(shí)施過程

3.1.1" 學(xué)習(xí)資源制作與推送

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

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

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

3.1.3" 學(xué)生自主學(xué)習(xí)與問題討論

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

3.1.4" 教師指導(dǎo)

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

3.2" 整合階段教學(xué)實(shí)施過程

3.2.1" 線上考勤簽到

在課程開始前，通過平臺(tái)進(jìn)行線上簽到，確保所有學(xué)生都準(zhǔn)備討論即將到來的知識(shí)點(diǎn)。

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

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

3.2.3" 教師深入講解與課堂小測(cè)

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

3.2.4" 線上實(shí)時(shí)反饋與解答

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

3.3" 實(shí)踐階段教學(xué)實(shí)施過程

3.3.1" 任務(wù)清單發(fā)布與上機(jī)指導(dǎo)

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

3.3.2" 小組合作與問題解決

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

3.3.3" 作品展示與點(diǎn)評(píng)

學(xué)生展示完成的作品，如一個(gè)具有基本導(dǎo)航欄和圖像輪播的網(wǎng)頁。教師點(diǎn)評(píng)作品，總結(jié)易錯(cuò)點(diǎn)。

3.4" 拓展階段教學(xué)實(shí)施過程

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

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

3.4.2" 教學(xué)反饋

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

4" 教學(xué)效果分析

4.1" 學(xué)生知識(shí)掌握情況

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

4.2" 教學(xué)方法的有效性

學(xué)生積極參與小組討論和課堂搶答互動(dòng)，這表明互動(dòng)式教學(xué)方法有效地促進(jìn)了學(xué)生的思維活躍度和對(duì)知識(shí)的吸收。超星泛雅平臺(tái)為學(xué)生提供了便捷的學(xué)習(xí)資源和問題討論途徑，教師的實(shí)時(shí)回應(yīng)也提高了學(xué)生的學(xué)習(xí)效率。

4.3" 課外拓展訓(xùn)練效果好

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

4.4" 教學(xué)過程中的問題與改進(jìn)

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

5" 結(jié)束語

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

6" 參考文獻(xiàn)

[1] 王珊.高職院?！八n”的成因探析：局內(nèi)人“角色”與“互動(dòng)”的社會(huì)學(xué)研究[J].中國(guó)職業(yè)技術(shù)教育，2023（31）：63-73.

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

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

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

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