HTML5網(wǎng)頁設(shè)計課程混合式教學(xué)設(shè)計與實(shí)踐

酈麗華

【摘要】研究是針對HTML5網(wǎng)頁設(shè)計課程基于在線的混合式教學(xué)進(jìn)行了設(shè)計，并在浙江育英職業(yè)技術(shù)學(xué)院信息技術(shù)類專業(yè)群開展了兩年多的教學(xué)實(shí)踐。文章對該模式下的教學(xué)進(jìn)行了總結(jié)和反思。

【關(guān)鍵詞】混合式教學(xué);線上教學(xué);網(wǎng)頁設(shè)計;翻轉(zhuǎn)課堂

【基金項(xiàng)目】本文系浙江育英職業(yè)技術(shù)學(xué)院2018年度院級課題“HTML5網(wǎng)頁設(shè)計課程混合式教學(xué)設(shè)計與實(shí)踐”的研究成果（項(xiàng)目編號：YYZD201808）。

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

一、課程實(shí)施對象分析

本課題課程研究與實(shí)施對象是浙江育英職業(yè)技術(shù)學(xué)院信息類專業(yè)學(xué)生，課程是學(xué)院信息類專業(yè)平臺課程之一，是進(jìn)行網(wǎng)頁前端設(shè)計開發(fā)和WEB程序設(shè)計開發(fā)的基礎(chǔ)。高職信息類專業(yè)學(xué)生在學(xué)習(xí)上大致分成兩大類，一類是“學(xué)習(xí)動機(jī)不強(qiáng)”“學(xué)習(xí)興趣不高”“對專業(yè)課程學(xué)習(xí)困難”，另外一類是“學(xué)習(xí)興趣濃厚”“自我學(xué)習(xí)能力較強(qiáng)”，但是需要督促性學(xué)習(xí)。因此，由課堂實(shí)體教學(xué)、網(wǎng)絡(luò)在線學(xué)習(xí)監(jiān)控和引導(dǎo)學(xué)習(xí)者主動學(xué)習(xí)三部分組成的混合式教學(xué)設(shè)計能夠充分滿足學(xué)生的學(xué)習(xí)需要，它既發(fā)揮了教師引導(dǎo)、啟發(fā)、監(jiān)控教學(xué)過程的主導(dǎo)作用，又充分發(fā)揮了學(xué)生作為學(xué)習(xí)主體的主動性、積極性和創(chuàng)造性。HTML5網(wǎng)頁設(shè)計課程教學(xué)采用混合式教學(xué)模式，實(shí)現(xiàn)線下實(shí)體課堂教學(xué)優(yōu)勢和線上網(wǎng)絡(luò)教學(xué)優(yōu)勢互補(bǔ)，能夠大幅度提高教學(xué)質(zhì)量和效果。

二、“混合式教學(xué)”設(shè)計

“混合式教學(xué)”設(shè)計是線上線下教學(xué)的組合，實(shí)現(xiàn)在線課程資源和傳統(tǒng)教學(xué)資源的結(jié)合應(yīng)用?！盎旌鲜浇虒W(xué)”教學(xué)模式充分實(shí)現(xiàn)了學(xué)習(xí)環(huán)境混合、學(xué)習(xí)資源混合、學(xué)習(xí)方式混合，從而把傳統(tǒng)教學(xué)和在線學(xué)習(xí)兩種教學(xué)方式的優(yōu)勢結(jié)合起來。通過線下線上課堂教學(xué)完成教學(xué)任務(wù)講解、教學(xué)點(diǎn)撥、自主學(xué)習(xí)引導(dǎo)、職業(yè)素養(yǎng)培養(yǎng)等任務(wù);通過使用在線資源實(shí)現(xiàn)教學(xué)任務(wù)，促進(jìn)學(xué)生知識獲取能力、自主探究能力、項(xiàng)目合作能力以及協(xié)調(diào)能力的發(fā)展。課題組針對浙江育英職業(yè)技術(shù)學(xué)院信息類專業(yè)學(xué)生實(shí)際情況，設(shè)計了符合他們特點(diǎn)的混合式教學(xué)模式，其原型如圖1。

三、“混合式教學(xué)”準(zhǔn)備

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

四、“混合式教學(xué)”實(shí)施

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

五、“混合式教學(xué)”評價

HTML5網(wǎng)頁設(shè)計混合式教學(xué)采用了多種評價相結(jié)合的方式，尤其注重過程性評價。學(xué)生“網(wǎng)絡(luò)平臺”的使用、課前預(yù)習(xí)情況、課堂參與情況與表現(xiàn)、課后學(xué)生作品評價等都是評價的重要指標(biāo)。階段性任務(wù)考核與綜合性評價相結(jié)合評估學(xué)生學(xué)習(xí)質(zhì)量，階段性任務(wù)考核是對一個項(xiàng)目完成情況的考核，綜合性考核評價是課程學(xué)習(xí)結(jié)束之后，對學(xué)生綜合性課程設(shè)計的完成情況進(jìn)行評價。同時，考核過程中注重對學(xué)生學(xué)習(xí)情況階段性反饋，以便于學(xué)生掌握自己的學(xué)習(xí)情況，提高學(xué)習(xí)質(zhì)量。

六、總結(jié)反思

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

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

2.學(xué)生課堂學(xué)習(xí)目的性加強(qiáng)，但是模仿在多數(shù)，缺乏問題意識。解決方法是進(jìn)一步豐富課程資源，完善課程測試內(nèi)容和題庫。

3.學(xué)生實(shí)踐操作能力有明顯提升，但是“貧富差距”進(jìn)一步拉大。解決方法是采用多樣化學(xué)習(xí)資源，創(chuàng)建多維互動環(huán)境，有效獲取學(xué)情，布置更有針對性的作業(yè)。

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

【參考文獻(xiàn)】

美國新媒體聯(lián)盟，北京師范大學(xué)智慧學(xué)習(xí)研究院.2017新媒體聯(lián)盟中國高等教育技術(shù)展望：地平線項(xiàng)目區(qū)域報告[R].2017-03-08.

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

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

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

余建波.如何開展混合式教學(xué)的設(shè)計與實(shí)踐[J].中國教育網(wǎng)絡(luò)，2017（08）：72-73.

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