基于云班課的網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程混合式教學(xué)實(shí)踐

瞿江

摘要：網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程借助云班課平臺(tái)進(jìn)行課程改革，與傳統(tǒng)教學(xué)方式相比，教師能夠更有效地把握課堂節(jié)奏，調(diào)動(dòng)學(xué)生的學(xué)習(xí)主動(dòng)性，做到課內(nèi)課外無(wú)縫銜接，從而提高整個(gè)課程的教學(xué)效果。該文將介紹具體的云班課平臺(tái)資源整合以及基于云班課平臺(tái)在網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程改革中的應(yīng)用。

關(guān)鍵詞：云班課;混合教學(xué);線上線下

中圖分類號(hào)：TP37? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）30-0286-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程為計(jì)算機(jī)軟件技術(shù)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、計(jì)算機(jī)應(yīng)用技術(shù)等專業(yè)的一門專業(yè)基礎(chǔ)課，該課程以實(shí)踐為主，面向的崗位如網(wǎng)頁(yè)設(shè)計(jì)師、前端開發(fā)人員等，課程特點(diǎn)為理論與實(shí)踐相結(jié)合，對(duì)學(xué)生的實(shí)踐操作能力要求較高，要求學(xué)生能夠獨(dú)立自主完成網(wǎng)站的開發(fā)，做到美觀、大方、富有創(chuàng)意、讓人賞心悅目。傳統(tǒng)的課堂教學(xué)此課程一般為48課時(shí)，對(duì)于學(xué)生能夠熟練應(yīng)用HTML、CSS與JavaScript完成網(wǎng)頁(yè)設(shè)計(jì)與制作，時(shí)間遠(yuǎn)遠(yuǎn)不夠，同時(shí)傳統(tǒng)教學(xué)中，學(xué)生學(xué)習(xí)積極性不高，課堂玩手機(jī)現(xiàn)象嚴(yán)重。如何激發(fā)學(xué)生的學(xué)習(xí)興趣，擴(kuò)展學(xué)生的學(xué)習(xí)時(shí)間，使學(xué)生靈活運(yùn)用所學(xué)完成網(wǎng)頁(yè)的設(shè)計(jì)與制作，是每位網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程老師需要解決的重要問(wèn)題。

云班課（原藍(lán)墨云班課）是由北京智啟藍(lán)墨信息技術(shù)有限公司在2014年開發(fā)的移動(dòng)網(wǎng)絡(luò)環(huán)境下為教學(xué)服務(wù)的一款智能教學(xué)客戶端App，它能夠支持移動(dòng)網(wǎng)絡(luò)環(huán)境下為教師提供發(fā)布教學(xué)資源、布置批改作業(yè)、與學(xué)生交流、發(fā)起多種教學(xué)活動(dòng)、測(cè)試、考試、分析各項(xiàng)教學(xué)活動(dòng)及學(xué)生成績(jī)等，方便教師的教學(xué)活動(dòng)，同時(shí)也充分利用學(xué)生的手機(jī)資源，使學(xué)生從上課玩手機(jī)到利用手機(jī)完成課堂及課后學(xué)習(xí)的有力工具，增強(qiáng)師生交流，有效提高教學(xué)效果。

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程借助云班課平臺(tái)進(jìn)行課程改革，與傳統(tǒng)教學(xué)方式相比，教師能夠更有效地把握課堂節(jié)奏，調(diào)動(dòng)學(xué)生的學(xué)習(xí)主動(dòng)性，做到課內(nèi)課外無(wú)縫銜接，從而提高整個(gè)課程的教學(xué)效果。本文將介紹具體的云班課平臺(tái)資源整合以及基于云班課平臺(tái)在網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程改革中的應(yīng)用。

1 重構(gòu)課程內(nèi)容，建立完整的課程資源

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程主要講解HTML+CSS+JavaScript技術(shù)，將網(wǎng)頁(yè)內(nèi)容、外觀樣式及動(dòng)態(tài)效果進(jìn)行分離，從而減少頁(yè)面代碼，提高網(wǎng)速。其實(shí)踐性較強(qiáng)，各種標(biāo)簽較多，學(xué)生容易混淆、遺忘。而如果不理解意思只是機(jī)械地按照書本完成實(shí)驗(yàn)，將達(dá)不到靈活應(yīng)用的要求。因此要求學(xué)生需要在有一定的計(jì)算機(jī)基礎(chǔ)和PHOTOSHOP基礎(chǔ)上能夠熟練應(yīng)用各種標(biāo)簽完成具有自己特色的頁(yè)面。顯然，傳統(tǒng)的課堂教學(xué)及課程內(nèi)容不能滿足此要求，傳統(tǒng)課堂教學(xué)時(shí)間有限，且枯燥乏味，學(xué)生容易被手機(jī)吸引，教學(xué)效果較差。

改革傳統(tǒng)教學(xué)內(nèi)容，將課程內(nèi)容分為簡(jiǎn)單頁(yè)面制作，咖啡店主題頁(yè)制作，“珍饈閣西點(diǎn)”專題頁(yè)制作，“志高電子”網(wǎng)站首頁(yè)制作、“鴻潘電子科技”主頁(yè)制作五個(gè)項(xiàng)目，以項(xiàng)目為導(dǎo)向，采用情境教學(xué)模式，通過(guò)項(xiàng)目將相關(guān)知識(shí)點(diǎn)串聯(lián)起來(lái)，不同的項(xiàng)目有助于學(xué)生掌握不同網(wǎng)站的設(shè)計(jì)風(fēng)格和制作技巧。教學(xué)內(nèi)容重新規(guī)劃設(shè)計(jì)好后，將所有的素材進(jìn)行分類，并錄制微課，建立完善的課程教學(xué)資源，包括教學(xué)大綱、授課計(jì)劃、教學(xué)設(shè)計(jì)、PPT、講解視頻、案例素材、試題庫(kù)等。云班課課程對(duì)于教師提出了更高的要求，需要教師付出幾倍的努力，只有教師自己對(duì)課程有全面的了解，技術(shù)熟練，而且能夠完成完整的課程素材及講解視頻，才能實(shí)現(xiàn)線上線下結(jié)合，學(xué)生能夠隨時(shí)隨地學(xué)習(xí)，從而能夠?qū)崿F(xiàn)學(xué)生對(duì)知識(shí)的靈活運(yùn)用。

2 基于云班課的混合式教學(xué)模式設(shè)計(jì)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程旨在引導(dǎo)學(xué)生根據(jù)客戶實(shí)際需求分析制定網(wǎng)站目標(biāo)，確定結(jié)構(gòu)和欄目，設(shè)計(jì)、采集或制作網(wǎng)頁(yè)的素材，合理布局網(wǎng)頁(yè)，建設(shè)完善可用的網(wǎng)頁(yè)。根據(jù)學(xué)生學(xué)習(xí)特點(diǎn)、課程特點(diǎn)以及教學(xué)規(guī)律，嘗試設(shè)計(jì)如下基于云班課的線上線下混合式教學(xué)模式，如圖1所示。

2.1課前引導(dǎo)探究，自我摸索

課前教師首先對(duì)課程內(nèi)容進(jìn)行分析，完成教學(xué)設(shè)計(jì)，準(zhǔn)備資源，將課程資源發(fā)布到云班課中，同時(shí)給出課前任務(wù)單，學(xué)生根據(jù)教師發(fā)布的課前任務(wù)單，完成課前任務(wù)。如圖2所示。教師可以根據(jù)云班課中學(xué)生的完成進(jìn)度，以及學(xué)生的提問(wèn)了解學(xué)生的問(wèn)題，及時(shí)調(diào)整教學(xué)計(jì)劃與內(nèi)容以及教學(xué)重難點(diǎn)，使其更好地幫助學(xué)生完成相關(guān)內(nèi)容的學(xué)習(xí)。學(xué)生在完成課前任務(wù)單的同時(shí)，可以進(jìn)行小組交流，及時(shí)記錄自己遇到的問(wèn)題，向教師進(jìn)行反饋，對(duì)于自己遇到的問(wèn)題，可以自己通過(guò)搜索得到答案，也可以向老師提出問(wèn)題，教師進(jìn)行解答。如圖3所示。這樣課前就能使師生進(jìn)行充分的互動(dòng)，對(duì)課程內(nèi)容有充分了解。

2.2課中答疑解惑，實(shí)踐操作

課中教師對(duì)課前學(xué)生反饋的問(wèn)題進(jìn)行答疑解惑，對(duì)一些重點(diǎn)及難點(diǎn)進(jìn)行講解，通過(guò)云班課中多種活動(dòng)如“頭腦風(fēng)暴”“投票問(wèn)卷”等活動(dòng)，同時(shí)還有“搶答”“搖一搖”等方式，調(diào)動(dòng)學(xué)生課堂積極性，使學(xué)生對(duì)相關(guān)知識(shí)進(jìn)一步強(qiáng)化。學(xué)生分組討論遇到的問(wèn)題，展示作品，在討論中不僅能夠一起面對(duì)解決問(wèn)題，還能加強(qiáng)交流溝通。

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)課程最重要的是實(shí)踐操作，課上除了答疑解惑、分組討論外教師可以布置一些相關(guān)的實(shí)踐操作，學(xué)生分組完成，完成的作業(yè)上傳到云班課，大家進(jìn)行互評(píng)，學(xué)生可以在評(píng)分的過(guò)程中發(fā)現(xiàn)不足，從而進(jìn)一步完善，同時(shí)也加深了對(duì)知識(shí)的理解。教師引導(dǎo)學(xué)生進(jìn)行自我反思和總結(jié)，并開展自我評(píng)價(jià)，構(gòu)建自己的知識(shí)體系。最后通過(guò)云班課中的“測(cè)試”了解學(xué)生的掌握情況。

在這一過(guò)程中教師結(jié)合云班課及學(xué)生課堂表現(xiàn)，對(duì)學(xué)生存在的問(wèn)題進(jìn)行解答，同時(shí)不斷調(diào)整自己的教學(xué)方案，適時(shí)進(jìn)行教學(xué)整改，從而使教學(xué)效果最佳。

2.3課后知識(shí)拓展，靈活運(yùn)用

圍繞網(wǎng)頁(yè)設(shè)計(jì)課程的特點(diǎn)，需要學(xué)生能夠靈活運(yùn)用所學(xué)，設(shè)計(jì)出精美的網(wǎng)頁(yè)，課堂時(shí)間非常有限，因此課后需要大量的練習(xí)與學(xué)習(xí)時(shí)間，教師根據(jù)教學(xué)內(nèi)容布置開放的課題，學(xué)生可以自由發(fā)揮不同主題的頁(yè)面，同時(shí)通過(guò)云班課的“討論”“消息”“私聊”模塊，能夠隨時(shí)與教師進(jìn)行溝通，實(shí)現(xiàn)線下與線上結(jié)合。這一環(huán)節(jié)中教師通過(guò)學(xué)生的反饋以及云班課生成的數(shù)據(jù)，可以及時(shí)了解學(xué)生的掌握情況，對(duì)于參加活動(dòng)較少的同學(xué)予以重點(diǎn)關(guān)注，而經(jīng)驗(yàn)值較多的同學(xué)可以布置多一些拓展任務(wù)，幫助學(xué)生進(jìn)行深入學(xué)習(xí)。如圖4所示。

3 “珍饈閣西點(diǎn)”專題頁(yè)標(biāo)題制作混合式教學(xué)設(shè)計(jì)案例

以《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程的項(xiàng)目三“珍饈閣西點(diǎn)”專題頁(yè)中的任務(wù)5——制作“標(biāo)題”模塊作為教學(xué)實(shí)施案例，遵循課前引導(dǎo)探究，自我摸索—課中答疑解惑，實(shí)踐操作—課后知識(shí)拓展，靈活運(yùn)用的模式，分為三個(gè)環(huán)節(jié)，課前探標(biāo)題制作—課中話標(biāo)題制作—課后拓標(biāo)題制作。

1）課前探標(biāo)題制作

課前教師準(zhǔn)備教學(xué)素材和視頻，首先對(duì)頁(yè)面的標(biāo)題部分進(jìn)行結(jié)構(gòu)分析，分解標(biāo)簽，對(duì)相關(guān)標(biāo)簽進(jìn)行講解，然后制作頁(yè)面標(biāo)簽。視頻錄好后，將視頻和素材都上傳至云班課，同時(shí)在云班課中布置學(xué)習(xí)任務(wù)單，學(xué)生通過(guò)課前觀看視頻、完成學(xué)習(xí)任務(wù)單，對(duì)相關(guān)知識(shí)點(diǎn)及操作有了一定的了解，若存在問(wèn)題則進(jìn)行搜索解決或記錄反饋給教師，教師根據(jù)學(xué)生的問(wèn)題及時(shí)調(diào)整教學(xué)內(nèi)容。

2）課中話標(biāo)題制作

課堂教學(xué)中教師首先對(duì)學(xué)生的課前問(wèn)題進(jìn)行答疑解惑，如如何控制標(biāo)題塊的高度，如何控制字體加粗和傾斜等，通過(guò)問(wèn)題的解答不僅能強(qiáng)化重難點(diǎn)，同時(shí)能夠?qū)ο嚓P(guān)內(nèi)容進(jìn)行拓展講解。接著通過(guò)小組討論、完成相似實(shí)踐任務(wù)，讓學(xué)生在討論和實(shí)踐中加強(qiáng)對(duì)知識(shí)點(diǎn)的理解，強(qiáng)化練習(xí)。最后對(duì)課堂練習(xí)進(jìn)行小組互評(píng)，在相互的點(diǎn)評(píng)過(guò)程中發(fā)現(xiàn)問(wèn)題，解決問(wèn)題，進(jìn)一步加深理解。教師巡視學(xué)生完成情況，同時(shí)通過(guò)學(xué)生上傳到云班課的作業(yè)，發(fā)現(xiàn)問(wèn)題，對(duì)存在的問(wèn)題進(jìn)行統(tǒng)一講解。

3）課后拓標(biāo)題制作

課后布置拓展任務(wù)，使學(xué)生能夠靈活運(yùn)用所學(xué)完成自定主題的標(biāo)題模塊。通過(guò)課后拓展，將課堂內(nèi)容與具體工作實(shí)踐相結(jié)合，真正做到知識(shí)的理解與運(yùn)用。教師通過(guò)云班課中每位學(xué)生的經(jīng)驗(yàn)值圖表分析，能夠清晰地了解每位同學(xué)的學(xué)習(xí)情況，對(duì)于經(jīng)驗(yàn)值較低的同學(xué)給予重點(diǎn)關(guān)注。

4 云班課教學(xué)效果分析

將基于云班課平臺(tái)的線上線下混合教學(xué)與傳統(tǒng)課堂教學(xué)進(jìn)行比較，基于云班課平臺(tái)的線上線下混合教學(xué)有如下優(yōu)點(diǎn)：

1）優(yōu)化教學(xué)內(nèi)容，適時(shí)進(jìn)行教學(xué)調(diào)整

利用云班課平臺(tái)進(jìn)行教學(xué)需要教師對(duì)教學(xué)內(nèi)容進(jìn)行優(yōu)化，完善教學(xué)資源，通過(guò)云班課中學(xué)生的反饋及時(shí)對(duì)教學(xué)進(jìn)行調(diào)整，而傳統(tǒng)教學(xué)中，教師很難及時(shí)掌握學(xué)生存在問(wèn)題，因此教學(xué)是一成不變的，不能適應(yīng)新時(shí)代學(xué)生的要求。

2）共享教學(xué)資源，實(shí)現(xiàn)隨時(shí)隨地學(xué)習(xí)

云班課中教學(xué)資源豐富，通過(guò)網(wǎng)絡(luò)學(xué)生可以在手機(jī)上利用碎片化的時(shí)間進(jìn)行學(xué)習(xí)，同時(shí)能夠進(jìn)行反復(fù)學(xué)習(xí)，加深對(duì)知識(shí)的理解。而師生互動(dòng)也能隨時(shí)進(jìn)行，通過(guò)教師及時(shí)的答疑解惑，使存在的問(wèn)題一一解決，有利于學(xué)生對(duì)知識(shí)的掌握。

3）調(diào)動(dòng)學(xué)習(xí)積極性，靈活運(yùn)用所學(xué)

傳統(tǒng)課堂教學(xué)中學(xué)生積極性不高，教師講授枯燥無(wú)味，學(xué)生被手機(jī)吸引，而在云班課平臺(tái)下，手機(jī)是學(xué)習(xí)的工具，教師通過(guò)云班課平臺(tái)發(fā)布任務(wù)，學(xué)生通過(guò)不同的活動(dòng)完成知識(shí)的內(nèi)化，構(gòu)建自己的知識(shí)體系，從而達(dá)到靈活運(yùn)用知識(shí)的目的。

5 結(jié)語(yǔ)

基于云班課的線上線下混合教學(xué)打破了傳統(tǒng)教學(xué)的時(shí)間與空間限制，將教學(xué)貫穿于課前、課中、課后3個(gè)階段。課前自學(xué)過(guò)程中，學(xué)生遇到問(wèn)題可以借助云班課討論，教師根據(jù)學(xué)生提出的問(wèn)題再確定下一步的教學(xué)目標(biāo)，及時(shí)進(jìn)行教學(xué)診改。課堂上通過(guò)小組合作、討論交流、成果分享、歸納總結(jié)等教學(xué)活動(dòng)，促進(jìn)學(xué)生個(gè)性發(fā)展，提升學(xué)生合作能力。課后，教師通過(guò)知識(shí)點(diǎn)測(cè)試和作業(yè)任務(wù)，增加學(xué)生練習(xí)機(jī)會(huì)，拓展學(xué)生視野，使學(xué)生能夠靈活運(yùn)用所學(xué)。通過(guò)云班課平臺(tái)，學(xué)生不僅在課堂上變得活躍，課后與老師互動(dòng)增加，使學(xué)生的學(xué)習(xí)由被動(dòng)變主動(dòng)，課堂學(xué)習(xí)由原來(lái)的以教師為主變?yōu)橐詫W(xué)生為主，教學(xué)質(zhì)量得到提升。

參考文獻(xiàn)：

[1] 李春良.基于云班課的高職學(xué)前教育專業(yè)混合式教學(xué)實(shí)踐——以《學(xué)前兒童游戲與指導(dǎo)》課程為例[J].高教論壇，2020（11）：102-105.

[2] 黃丹卉.基于云班課平臺(tái)的高職英語(yǔ)混合式教學(xué)實(shí)證研究[J].寧波職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2020，24（5）：32-39.

[3] 刁海軍，羅偉，張小宇，等.基于移動(dòng)學(xué)習(xí)App的混合式教學(xué)研究與實(shí)踐——以云班課移動(dòng)學(xué)習(xí)資源的建設(shè)與應(yīng)用為例[J].太原城市職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2020（11）：65-67.

【通聯(lián)編輯：唐一東】