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

楊彥聰

摘要：文章分析了HTML5+CSS3網頁基礎課程在教學中存在的問題，運用線上線下模式理論對該課程課前、課中、課后三個環節進行教學設計。文章從線上線下混合式教學的教學過程和考核方式兩方面著手，細致地討論了“HTML5+CSS3網頁基礎”課程教學過程中如何有效地進行線上線下教學。

關鍵詞：線上線下;“HTML5+CSS3網頁基礎”;教學模式

一、緒論

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

二、“HTML5+CSS3網頁基礎”教學中線上線下教學法的教學過程

利用智慧職教MOOC平臺開展“HTML5+CSS3網頁基礎”課程的線上教學。本課題組承擔的“HTML5+CSS3網頁基礎”在線開放課程經過1年的精心籌備和制作，2022年8月正式上線，實現了本校計算機應用技術專業課程的線上教學。

在教學內容的設定上，筆者根據在線課程的特點，將各章節內容分割成多個獨立的知識點，每個知識點錄制成1～3個視頻，每個視頻時長不超過15分鐘，這些視頻形式上獨立，但知識點之間又互相貫穿。經過精心設計，本課程共錄制了百余個小視頻，涵蓋了網頁規范、HTML5標簽、CSS3基礎、CSS3選擇器、盒子模型、網頁布局和表單七章節的大部分知識點，平臺上還設置了討論、小測、階段測驗等板塊，可以實現生生、師生間的實時互動。這種線上教學模式變換了教師與學生在課堂教學中的角色，真正形成了以學生為中心的教學方式;通過重構學習流程、學生在線參與、自主學習、互動討論與協作、課堂討論、即時測試等形式，激發了學生參與課程學習的熱情[1]。

1課前-線上預習

自主學習內容，并完成相關知識點小測。教師通過網絡教育資源平臺（比如智慧職教）為載體，發布單次教學內容的小視頻，該視頻是對知識點的微型化處理，學生自主學習完成后，需要通過知識點的測驗才能進行下一個知識點的學習。這就要求教師熟練的掌握制作教學視頻和課件的方法，這一步驟我們在在線精品開放課中完成。

下面以實際案例說明課前線上預習的詳細步驟，例如，盒子模型是“HTML5+CSS3網頁基礎”課程的一個重點，教師在線上發布關于盒子模型的相關視頻，學生可以有選擇地進行觀看和思考，然后解答視頻后面的小測，才能結束本次預習，這樣不僅加深了學生對該知識點的認識和理解，還培養了學生主動學習和解決問題的能力。針對學生相關知識點的小測結果，在線下課堂教師可以更加明確、更加有針對性的開展教學。

由于本門課程開設第一學期，教學學時有所減少，但是課程內容并沒有縮減，那么我們的教學就不得不拓展到線下課堂教學以外了，所以課前的線上預習活動就顯得不可或缺了，相應的，為了提高課前線上預習質量，任課教師或者教學活動設計者需要千方百計的調動學生的學習興趣，例如在視頻學習的開端，設計游戲闖關的環節，由淺到深，層層遞進，調動學習興趣，促進預習質量。[2]

2課中-線下課堂教學

“HTML5+CSS3網頁基礎”課程的主要內容是按照規范和設計要求制作符合標準的網頁。單純對知識的照本宣科和對代碼的機械背誦都不能給學生帶來構建知識的成就感，只有教師對相應的代碼舉一反三、總結、對比，才能讓學生體會到網頁的奧秘，將外在的網頁構成知識升華為內在的學識，所以“HTML5+CSS3網頁基礎”課堂對任教者有更高的要求，需要任教者設計更加巧妙的課堂教學設計，實施獨具特色的多元化教學模式，如任務導向式教學、探究式教學等。

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

3課后-線上鞏固

課堂學習完成之后，學生對本次內容有了更深入、系統的認識，教師在網絡平臺（比如智慧職教）發布相對應測試，學生完成后可以在平臺看到具體數據，這個數據可以非常準確的了解學生對知識的掌握情況。另外，每章節學內容結束后可進入階段案例測試環節，測試成績可以作為學生平時成績的一部分，通過這種方式可以提高學生學習的積極性。

三、課程考核方式

為了線上線下教學的高效進行，充分提高學生自主學習和解決問題的能力，“HTML5+CSS3網頁基礎”課程的評價由兩部分組成，平時成績和期末考試，其中平時成績是由網絡教學平臺上的相關數據組成的，例如視頻觀看時長、討論、小測、階段測試等等。這樣減輕了學生期末考試的壓力，加大了學生平時學習的參與度，鼓勵學生養成良好的學習習慣。

綜上所述，線上線下教學模式的運用主要分為課前線上預習、課中課堂教學、課后線上鞏固這三個具體的階段，當然這種劃分方式只是為了讓應用者明晰其具體構成情況，在實際過程中，三者之間相互交織和影響，聯系非常緊密。“HTML5+CSS3網頁基礎”課程是系統復雜的工程，筆者應當在實際教學過程中對該教學模式進行不斷的探索和改進，使其能夠在教學中發揮越來越大的作用。

參考文獻：

[1]徐曉飛.抓住 MOOC 之機遇促進計算機與軟件工程專業教學改革[J].中國大學教學，2014（1）：29-33.

[2]劉鎮.混合式教學模式在高職建筑工程計量與計價課程中的應用[J].現代職業教育，2016（31）：78-79

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

課題項目：高職院校線上線下教學相互融合的方法研究;

項目編號：20220375。