HTML5網頁設計課程混合式教學設計與實踐

酈麗華

【摘要】研究是針對HTML5網頁設計課程基于在線的混合式教學進行了設計，并在浙江育英職業技術學院信息技術類專業群開展了兩年多的教學實踐。文章對該模式下的教學進行了總結和反思。

【關鍵詞】混合式教學;線上教學;網頁設計;翻轉課堂

【基金項目】本文系浙江育英職業技術學院2018年度院級課題“HTML5網頁設計課程混合式教學設計與實踐”的研究成果（項目編號：YYZD201808）。

混合式教學是針對結合網絡端的“網絡學習（e-Learning）”與課堂“面對面（Face to Face）教學”的混合式學習（Blended Learning）的學習方式而提出的，是信息化教學背景下的主流教學方式，也是能被學生廣泛接受的教學方式之一。

一、課程實施對象分析

本課題課程研究與實施對象是浙江育英職業技術學院信息類專業學生，課程是學院信息類專業平臺課程之一，是進行網頁前端設計開發和WEB程序設計開發的基礎。高職信息類專業學生在學習上大致分成兩大類，一類是“學習動機不強”“學習興趣不高”“對專業課程學習困難”，另外一類是“學習興趣濃厚”“自我學習能力較強”，但是需要督促性學習。因此，由課堂實體教學、網絡在線學習監控和引導學習者主動學習三部分組成的混合式教學設計能夠充分滿足學生的學習需要，它既發揮了教師引導、啟發、監控教學過程的主導作用，又充分發揮了學生作為學習主體的主動性、積極性和創造性。HTML5網頁設計課程教學采用混合式教學模式，實現線下實體課堂教學優勢和線上網絡教學優勢互補，能夠大幅度提高教學質量和效果。

二、“混合式教學”設計

“混合式教學”設計是線上線下教學的組合，實現在線課程資源和傳統教學資源的結合應用。“混合式教學”教學模式充分實現了學習環境混合、學習資源混合、學習方式混合，從而把傳統教學和在線學習兩種教學方式的優勢結合起來。通過線下線上課堂教學完成教學任務講解、教學點撥、自主學習引導、職業素養培養等任務;通過使用在線資源實現教學任務，促進學生知識獲取能力、自主探究能力、項目合作能力以及協調能力的發展。課題組針對浙江育英職業技術學院信息類專業學生實際情況，設計了符合他們特點的混合式教學模式，其原型如圖1。

三、“混合式教學”準備

混合式教學分成課前準備（線上）、課堂教學（線上、線下）和課后提升（線上）三個階段，課程實施必須滿足高職項目化分層教學要求。首先，課題組制定了一整套的指導性資源，包括教學大綱、教學計劃等，讓學生能夠準確定位課程在專業學習中的地位與課程教學目標。其次，遵循“項目化/模塊化/層次化”的原則，課題組針對每個教學階段所要進行的主要活動、任務、課程拓展延伸所需要的資源進行了重點設計和開發。課程內容依據“鄉韻有約”（網站地址：http：//www.zjxyyy.com/）進行模塊化的劃分，劃分成了“HTML5基礎”“CSS3應用”“表格表單應用”“CSS盒子模型應用”“多媒體應用”和“實戰案例”6個模塊，每個模塊相對獨立但又是一個整體，學生完成每個獨立的實驗項目之后能夠組合成一個網站。混合式教學課堂中的教學資源配置如圖2。每個教學視頻用5-15分鐘呈現一個獨立的知識點，可以讓學生自主學習，反復演示觀看。多媒體課件是教學計劃中每一個模塊的教學內容和教學資源，方便學生預習與教學演示。拓展資料包括與課程相關的知識案例以及JS客戶端交互技術應用、網頁設計技巧、經典案例分享等供學生拓展學習使用。圍繞教學需要總共設計了兩次討論，討論主題提前在網上發布，讓學生提前準備，查找相關資料。課程作業通過課程的整體設計來確定，在混合式教學之后再發布，由學生完成課程后進行自我評價和復習，課程作業是考核學生學習成效的重要部分。翻轉課堂教學包括“學生設計作業供同學測試”“學生作品挑刺”。

四、“混合式教學”實施

混合式教學的實施過程分為“課前準備”“課堂教學”和“課后提升”三個階段，教學設計時把一個完整的項目拆分成若干個子項目，每個子項目是一個待完成的完整任務，實施過程按照任務驅動進行教學，“混合式教學”實施過程如圖3所示。課題組借助手機app實施課堂教學。課前，教師依據教學設計發布事先錄制好的視頻，以任務的形式布置給學生，并且會有短信通知發送給學生。學生的主要活動是觀看教學視頻，進行自主學習，目的是了解和預習教學內容，為即將開展的教學活動奠定基礎。課堂教學過程教師使用app和學生進行課堂互動，包括隨堂教學任務布置、在線測評、問題搶答、在線點評、頭腦風暴等，有效調動了學生學習的積極性和主動性，也增強了課堂的趣味性。教學任務完成之后，根據任務實施情況發布拓展性任務。課后教師借助各種平臺（比如微信）和學生交流，收集優秀作品，在課程學習交流群發布，供學生學習交流。

五、“混合式教學”評價

HTML5網頁設計混合式教學采用了多種評價相結合的方式，尤其注重過程性評價。學生“網絡平臺”的使用、課前預習情況、課堂參與情況與表現、課后學生作品評價等都是評價的重要指標。階段性任務考核與綜合性評價相結合評估學生學習質量，階段性任務考核是對一個項目完成情況的考核，綜合性考核評價是課程學習結束之后，對學生綜合性課程設計的完成情況進行評價。同時，考核過程中注重對學生學習情況階段性反饋，以便于學生掌握自己的學習情況，提高學習質量。

六、總結反思

混合式教學顯著提高了教學效果，提升了學生學習質量，但是也出現了各種各樣的問題，需要對存在的問題進行反思和進一步研究，以便更好地提高教學質量。

1.學生課堂學習積極性和主動性提高，但是在線上教學時部分缺乏學習積極性的學生預習質量不高，影響課堂教學進度。解決方法是督促未預的習學生，保證課前預習的有效性，同時進行多樣化教學設計，參考學生課前學情數據，課中進行針對性教學。

2.學生課堂學習目的性加強，但是模仿在多數，缺乏問題意識。解決方法是進一步豐富課程資源，完善課程測試內容和題庫。

3.學生實踐操作能力有明顯提升，但是“貧富差距”進一步拉大。解決方法是采用多樣化學習資源，創建多維互動環境，有效獲取學情，布置更有針對性的作業。

當代手機+實踐的教學模式更能被高職院校的學生接受，面向他們的教學必須做到不受時間、空間限制，在線教學安排要循序漸進，螺旋遞增，線下教學要耐心細致，不可急于求成。針對HTML5網頁設計課程混合式教學雖然取得了不錯的效果，但是在如何更加貼近高職學生的在線學習規律，如何滿足多層次學生學習等方面，還有待于進行深入的研究。

【參考文獻】

美國新媒體聯盟，北京師范大學智慧學習研究院.2017新媒體聯盟中國高等教育技術展望：地平線項目區域報告[R].2017-03-08.

中教新媒.如何開展混合式教學的設計與實踐[EB/OL].（2017-08-07）[2020-02-07].http：//www.sohu.com/a/162827471_414933.

阮高峰.微課與混合式教學設計[EB/OL].（2017-11-06～2018-01-21）.https：//www.icourse163.org/course/detail.htm？cid=1002110006.

劉斌.基于在線課程的混合式教學設計與實踐探索[J].中國教育信息化（高教職教），2016（06）：81-84.

余建波.如何開展混合式教學的設計與實踐[J].中國教育網絡，2017（08）：72-73.

中華人民共和國教育部.教育部關于加強高等學校在線開放課程建設應用于管理的意見（教高〔2015〕3號）[EB/OL].（2015-04-13）[2020-02-07].http：//old.moe.gov.cn/publicfiles/business/htmlfiles/moe/s7056/201504/186490.html.