高職院校線上線下教學(xué)相互融合的方法研究

楊彥聰

摘要：文章分析了HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)課程在教學(xué)中存在的問(wèn)題，運(yùn)用線上線下模式理論對(duì)該課程課前、課中、課后三個(gè)環(huán)節(jié)進(jìn)行教學(xué)設(shè)計(jì)。文章從線上線下混合式教學(xué)的教學(xué)過(guò)程和考核方式兩方面著手，細(xì)致地討論了“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程教學(xué)過(guò)程中如何有效地進(jìn)行線上線下教學(xué)。

關(guān)鍵詞：線上線下;“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”;教學(xué)模式

一、緒論

“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”是計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的一門專業(yè)必修課，是一門實(shí)用性極強(qiáng)的課程，在課程體系中占有重要的地位，本課程主要培養(yǎng)學(xué)生掌握制作網(wǎng)頁(yè)、建立網(wǎng)站的能力。目前，很多職業(yè)院校的“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程都是采用“以教為主”的傳統(tǒng)教學(xué)模式，通常的課時(shí)安排是一周兩次共4節(jié)課，筆者近幾年一直從事這門課程的教學(xué)，對(duì)此也進(jìn)行了深入思考，結(jié)合該課程的特點(diǎn)及學(xué)生的學(xué)習(xí)現(xiàn)狀，嘗試進(jìn)行了線上線下教學(xué)法，即“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程教學(xué)活動(dòng)，學(xué)生學(xué)習(xí)的積極性有所提高，教學(xué)效果也有進(jìn)步。

二、“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”教學(xué)中線上線下教學(xué)法的教學(xué)過(guò)程

利用智慧職教MOOC平臺(tái)開(kāi)展“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程的線上教學(xué)。本課題組承擔(dān)的“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”在線開(kāi)放課程經(jīng)過(guò)1年的精心籌備和制作，2022年8月正式上線，實(shí)現(xiàn)了本校計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)課程的線上教學(xué)。

在教學(xué)內(nèi)容的設(shè)定上，筆者根據(jù)在線課程的特點(diǎn)，將各章節(jié)內(nèi)容分割成多個(gè)獨(dú)立的知識(shí)點(diǎn)，每個(gè)知識(shí)點(diǎn)錄制成1～3個(gè)視頻，每個(gè)視頻時(shí)長(zhǎng)不超過(guò)15分鐘，這些視頻形式上獨(dú)立，但知識(shí)點(diǎn)之間又互相貫穿。經(jīng)過(guò)精心設(shè)計(jì)，本課程共錄制了百余個(gè)小視頻，涵蓋了網(wǎng)頁(yè)規(guī)范、HTML5標(biāo)簽、CSS3基礎(chǔ)、CSS3選擇器、盒子模型、網(wǎng)頁(yè)布局和表單七章節(jié)的大部分知識(shí)點(diǎn)，平臺(tái)上還設(shè)置了討論、小測(cè)、階段測(cè)驗(yàn)等板塊，可以實(shí)現(xiàn)生生、師生間的實(shí)時(shí)互動(dòng)。這種線上教學(xué)模式變換了教師與學(xué)生在課堂教學(xué)中的角色，真正形成了以學(xué)生為中心的教學(xué)方式;通過(guò)重構(gòu)學(xué)習(xí)流程、學(xué)生在線參與、自主學(xué)習(xí)、互動(dòng)討論與協(xié)作、課堂討論、即時(shí)測(cè)試等形式，激發(fā)了學(xué)生參與課程學(xué)習(xí)的熱情[1]。

1課前-線上預(yù)習(xí)

自主學(xué)習(xí)內(nèi)容，并完成相關(guān)知識(shí)點(diǎn)小測(cè)。教師通過(guò)網(wǎng)絡(luò)教育資源平臺(tái)（比如智慧職教）為載體，發(fā)布單次教學(xué)內(nèi)容的小視頻，該視頻是對(duì)知識(shí)點(diǎn)的微型化處理，學(xué)生自主學(xué)習(xí)完成后，需要通過(guò)知識(shí)點(diǎn)的測(cè)驗(yàn)才能進(jìn)行下一個(gè)知識(shí)點(diǎn)的學(xué)習(xí)。這就要求教師熟練的掌握制作教學(xué)視頻和課件的方法，這一步驟我們?cè)谠诰€精品開(kāi)放課中完成。

下面以實(shí)際案例說(shuō)明課前線上預(yù)習(xí)的詳細(xì)步驟，例如，盒子模型是“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程的一個(gè)重點(diǎn)，教師在線上發(fā)布關(guān)于盒子模型的相關(guān)視頻，學(xué)生可以有選擇地進(jìn)行觀看和思考，然后解答視頻后面的小測(cè)，才能結(jié)束本次預(yù)習(xí)，這樣不僅加深了學(xué)生對(duì)該知識(shí)點(diǎn)的認(rèn)識(shí)和理解，還培養(yǎng)了學(xué)生主動(dòng)學(xué)習(xí)和解決問(wèn)題的能力。針對(duì)學(xué)生相關(guān)知識(shí)點(diǎn)的小測(cè)結(jié)果，在線下課堂教師可以更加明確、更加有針對(duì)性的開(kāi)展教學(xué)。

由于本門課程開(kāi)設(shè)第一學(xué)期，教學(xué)學(xué)時(shí)有所減少，但是課程內(nèi)容并沒(méi)有縮減，那么我們的教學(xué)就不得不拓展到線下課堂教學(xué)以外了，所以課前的線上預(yù)習(xí)活動(dòng)就顯得不可或缺了，相應(yīng)的，為了提高課前線上預(yù)習(xí)質(zhì)量，任課教師或者教學(xué)活動(dòng)設(shè)計(jì)者需要千方百計(jì)的調(diào)動(dòng)學(xué)生的學(xué)習(xí)興趣，例如在視頻學(xué)習(xí)的開(kāi)端，設(shè)計(jì)游戲闖關(guān)的環(huán)節(jié)，由淺到深，層層遞進(jìn)，調(diào)動(dòng)學(xué)習(xí)興趣，促進(jìn)預(yù)習(xí)質(zhì)量。[2]

2課中-線下課堂教學(xué)

“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程的主要內(nèi)容是按照規(guī)范和設(shè)計(jì)要求制作符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)。單純對(duì)知識(shí)的照本宣科和對(duì)代碼的機(jī)械背誦都不能給學(xué)生帶來(lái)構(gòu)建知識(shí)的成就感，只有教師對(duì)相應(yīng)的代碼舉一反三、總結(jié)、對(duì)比，才能讓學(xué)生體會(huì)到網(wǎng)頁(yè)的奧秘，將外在的網(wǎng)頁(yè)構(gòu)成知識(shí)升華為內(nèi)在的學(xué)識(shí)，所以“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課堂對(duì)任教者有更高的要求，需要任教者設(shè)計(jì)更加巧妙的課堂教學(xué)設(shè)計(jì)，實(shí)施獨(dú)具特色的多元化教學(xué)模式，如任務(wù)導(dǎo)向式教學(xué)、探究式教學(xué)等。

根據(jù)線上預(yù)習(xí)小測(cè)的完成情況，可以了解學(xué)生對(duì)本次教學(xué)內(nèi)容的掌握情況，在課堂上教師可以有的放矢，精準(zhǔn)施教，進(jìn)而提高教學(xué)效率。[3]通常情況下，線上預(yù)習(xí)時(shí)視頻是獨(dú)立精煉的，而“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”大部分的任務(wù)都是綜合性質(zhì)的，需要若干個(gè)知識(shí)點(diǎn)來(lái)完成。這時(shí)候，課堂上我們不可能再將這些涉及到的知識(shí)點(diǎn)一一講解了，只需要將涉及到相關(guān)知識(shí)點(diǎn)的視頻放到網(wǎng)絡(luò)平臺(tái)上供學(xué)生有選擇的學(xué)習(xí)。例如，制作一個(gè)注冊(cè)頁(yè)面，首先分析完成整個(gè)任務(wù)需要的知識(shí)點(diǎn)，也就是知識(shí)點(diǎn)的拆分，然后將其所需要的input控件的type屬性的相關(guān)視頻、css控制表單樣式的相關(guān)視頻上傳到網(wǎng)絡(luò)平臺(tái)（比如智慧職教），學(xué)生可以根據(jù)自己已有的認(rèn)知結(jié)構(gòu)，對(duì)給定的知識(shí)點(diǎn)視頻進(jìn)行重新組合進(jìn)而完成注冊(cè)頁(yè)面。

3課后-線上鞏固

課堂學(xué)習(xí)完成之后，學(xué)生對(duì)本次內(nèi)容有了更深入、系統(tǒng)的認(rèn)識(shí)，教師在網(wǎng)絡(luò)平臺(tái)（比如智慧職教）發(fā)布相對(duì)應(yīng)測(cè)試，學(xué)生完成后可以在平臺(tái)看到具體數(shù)據(jù)，這個(gè)數(shù)據(jù)可以非常準(zhǔn)確的了解學(xué)生對(duì)知識(shí)的掌握情況。另外，每章節(jié)學(xué)內(nèi)容結(jié)束后可進(jìn)入階段案例測(cè)試環(huán)節(jié)，測(cè)試成績(jī)可以作為學(xué)生平時(shí)成績(jī)的一部分，通過(guò)這種方式可以提高學(xué)生學(xué)習(xí)的積極性。

三、課程考核方式

為了線上線下教學(xué)的高效進(jìn)行，充分提高學(xué)生自主學(xué)習(xí)和解決問(wèn)題的能力，“HTML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程的評(píng)價(jià)由兩部分組成，平時(shí)成績(jī)和期末考試，其中平時(shí)成績(jī)是由網(wǎng)絡(luò)教學(xué)平臺(tái)上的相關(guān)數(shù)據(jù)組成的，例如視頻觀看時(shí)長(zhǎng)、討論、小測(cè)、階段測(cè)試等等。這樣減輕了學(xué)生期末考試的壓力，加大了學(xué)生平時(shí)學(xué)習(xí)的參與度，鼓勵(lì)學(xué)生養(yǎng)成良好的學(xué)習(xí)習(xí)慣。

綜上所述，線上線下教學(xué)模式的運(yùn)用主要分為課前線上預(yù)習(xí)、課中課堂教學(xué)、課后線上鞏固這三個(gè)具體的階段，當(dāng)然這種劃分方式只是為了讓應(yīng)用者明晰其具體構(gòu)成情況，在實(shí)際過(guò)程中，三者之間相互交織和影響，聯(lián)系非常緊密?！癏TML5+CSS3網(wǎng)頁(yè)基礎(chǔ)”課程是系統(tǒng)復(fù)雜的工程，筆者應(yīng)當(dāng)在實(shí)際教學(xué)過(guò)程中對(duì)該教學(xué)模式進(jìn)行不斷的探索和改進(jìn)，使其能夠在教學(xué)中發(fā)揮越來(lái)越大的作用。

參考文獻(xiàn)：

[1]徐曉飛.抓住 MOOC 之機(jī)遇促進(jìn)計(jì)算機(jī)與軟件工程專業(yè)教學(xué)改革[J].中國(guó)大學(xué)教學(xué)，2014（1）：29-33.

[2]劉鎮(zhèn).混合式教學(xué)模式在高職建筑工程計(jì)量與計(jì)價(jià)課程中的應(yīng)用[J].現(xiàn)代職業(yè)教育，2016（31）：78-79

[3]黃曉亞線上線下混合式教學(xué)方法研究---以“量子力學(xué)”課程為例.[J].江蘇科技信息，2022（3：48-50）

課題項(xiàng)目：高職院校線上線下教學(xué)相互融合的方法研究;

項(xiàng)目編號(hào)：20220375。