網頁設計與網站建設混合式教學研究

導語：網頁設計與網站建設混合式教學研究一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

摘要：網頁設計與網站建設課程借助云班課平臺進行課程改革，與傳統教學方式相比，教師能夠更有效地把握課堂節奏，調動學生的學習主動性，做到課內課外無縫銜接，從而提高整個課程的教學效果。該文將介紹具體的云班課平臺資源整合以及基于云班課平臺在網頁設計與網站建設課程改革中的應用。

關鍵詞：云班課；混合教學；線上線下

網頁設計與網站建設課程為計算機軟件技術、計算機網絡技術、計算機應用技術等專業的一門專業基礎課，該課程以實踐為主，面向的崗位如網頁設計師、前端開發人員等，課程特點為理論與實踐相結合，對學生的實踐操作能力要求較高，要求學生能夠獨立自主完成網站的開發，做到美觀、大方、富有創意、讓人賞心悅目。傳統的課堂教學此課程一般為48課時，對于學生能夠熟練應用HTML、CSS與JavaScript完成網頁設計與制作，時間遠遠不夠，同時傳統教學中，學生學習積極性不高，課堂玩手機現象嚴重。如何激發學生的學習興趣，擴展學生的學習時間，使學生靈活運用所學完成網頁的設計與制作，是每位網頁設計與網站建設課程老師需要解決的重要問題。云班課（原藍墨云班課）是由北京智啟藍墨信息技術有限公司在2014年開發的移動網絡環境下為教學服務的一款智能教學客戶端App,它能夠支持移動網絡環境下為教師提供教學資源、布置批改作業、與學生交流、發起多種教學活動、測試、考試、分析各項教學活動及學生成績等，方便教師的教學活動，同時也充分利用學生的手機資源，使學生從上課玩手機到利用手機完成課堂及課后學習的有力工具，增強師生交流，有效提高教學效果。網頁設計與網站建設課程借助云班課平臺進行課程改革，與傳統教學方式相比，教師能夠更有效地把握課堂節奏，調動學生的學習主動性，做到課內課外無縫銜接，從而提高整個課程的教學效果。本文將介紹具體的云班課平臺資源整合以及基于云班課平臺在網頁設計與網站建設課程改革中的應用。

1重構課程內容，建立完整的課程資源

網頁設計與網站建設課程主要講解HTML+CSS+JavaScript技術，將網頁內容、外觀樣式及動態效果進行分離，從而減少頁面代碼，提高網速。其實踐性較強，各種標簽較多，學生容易混淆、遺忘。而如果不理解意思只是機械地按照書本完成實驗，將達不到靈活應用的要求。因此要求學生需要在有一定的計算機基礎和PHOTOSHOP基礎上能夠熟練應用各種標簽完成具有自己特色的頁面。顯然，傳統的課堂教學及課程內容不能滿足此要求，傳統課堂教學時間有限，且枯燥乏味，學生容易被手機吸引，教學效果較差。改革傳統教學內容，將課程內容分為簡單頁面制作，咖啡店主題頁制作，“珍饈閣西點”專題頁制作，“志高電子”網站首頁制作、“鴻潘電子科技”主頁制作五個項目，以項目為導向，采用情境教學模式，通過項目將相關知識點串聯起來，不同的項目有助于學生掌握不同網站的設計風格和制作技巧。教學內容重新規劃設計好后，將所有的素材進行分類，并錄制微課，建立完善的課程教學資源，包括教學大綱、授課計劃、教學設計、PPT、講解視頻、案例素材、試題庫等。云班課課程對于教師提出了更高的要求，需要教師付出幾倍的努力，只有教師自己對課程有全面的了解，技術熟練，而且能夠完成完整的課程素材及講解視頻，才能實現線上線下結合，學生能夠隨時隨地學習，從而能夠實現學生對知識的靈活運用。

2基于云班課的混合式教學模式設計

《網頁設計與網站建設》課程旨在引導學生根據客戶實際需求分析制定網站目標，確定結構和欄目，設計、采集或制作網頁的素材，合理布局網頁，建設完善可用的網頁。根據學生學習特點、課程特點以及教學規律，嘗試設計如下基于云班課的線上線下混合式教學模式，如圖1所示。

2.1課前引導探究，自我摸索

課前教師首先對課程內容進行分析，完成教學設計，準備資源，將課程資源到云班課中，同時給出課前任務單，學生根據教師的課前任務單，完成課前任務。如圖2所示。教師可以根據云班課中學生的完成進度，以及學生的提問了解學生的問題，及時調整教學計劃與內容以及教學重難點，使其更好地幫助學生完成相關內容的學習。學生在完成課前任務單的同時，可以進行小組交流，及時記錄自己遇到的問題，向教師進行反饋，對于自己遇到的問題，可以自己通過搜索得到答案，也可以向老師提出問題，教師進行解答。如圖3所示。這樣課前就能使師生進行充分的互動，對課程內容有充分了解。

2.2課中答疑解惑，實踐操作

課中教師對課前學生反饋的問題進行答疑解惑，對一些重點及難點進行講解，通過云班課中多種活動如“頭腦風暴”“投票問卷”等活動，同時還有“搶答”“搖一搖”等方式，調動學生課堂積極性，使學生對相關知識進一步強化。學生分組討論遇到的問題，展示作品，在討論中不僅能夠一起面對解決問題，還能加強交流溝通。網頁設計與網站建設課程最重要的是實踐操作，課上除了答疑解惑、分組討論外教師可以布置一些相關的實踐操作，學生分組完成，完成的作業上傳到云班課，大家進行互評，學生可以在評分的過程中發現不足，從而進一步完善，同時也加深了對知識的理解。教師引導學生進行自我反思和總結，并開展自我評價，構建自己的知識體系。最后通過云班課中的“測試”了解學生的掌握情況。在這一過程中教師結合云班課及學生課堂表現，對學生存在的問題進行解答，同時不斷調整自己的教學方案，適時進行教學整改，從而使教學效果最佳。

2.3課后知識拓展，靈活運用

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

3“珍饈閣西點”專題頁標題制作混合式教學設計案例

以《網頁設計與網站建設》課程的項目三“珍饈閣西點”專題頁中的任務5——制作“標題”模塊作為教學實施案例，遵循課前引導探究，自我摸索—課中答疑解惑，實踐操作—課后知識拓展，靈活運用的模式，分為三個環節，課前探標題制作—課中話標題制作—課后拓標題制作。1）課前探標題制作課前教師準備教學素材和視頻，首先對頁面的標題部分進行結構分析，分解標簽，對相關標簽進行講解，然后制作頁面標簽。視頻錄好后，將視頻和素材都上傳至云班課，同時在云班課中布置學習任務單，學生通過課前觀看視頻、完成學習任務單，對相關知識點及操作有了一定的了解，若存在問題則進行搜索解決或記錄反饋給教師，教師根據學生的問題及時調整教學內容。2）課中話標題制作課堂教學中教師首先對學生的課前問題進行答疑解惑，如如何控制標題塊的高度，如何控制字體加粗和傾斜等，通過問題的解答不僅能強化重難點，同時能夠對相關內容進行拓展講解。接著通過小組討論、完成相似實踐任務，讓學生在討論和實踐中加強對知識點的理解，強化練習。最后對課堂練習進行小組互評，在相互的點評過程中發現問題，解決問題，進一步加深理解。教師巡視學生完成情況，同時通過學生上傳到云班課的作業，發現問題，對存在的問題進行統一講解。3）課后拓標題制作課后布置拓展任務，使學生能夠靈活運用所學完成自定主題的標題模塊。通過課后拓展，將課堂內容與具體工作實踐相結合，真正做到知識的理解與運用。教師通過云班課中每位學生的經驗值圖表分析，能夠清晰地了解每位同學的學習情況，對于經驗值較低的同學給予重點關注。

4云班課教學效果分析

將基于云班課平臺的線上線下混合教學與傳統課堂教學進行比較，基于云班課平臺的線上線下混合教學有如下優點：1)優化教學內容，適時進行教學調整利用云班課平臺進行教學需要教師對教學內容進行優化，完善教學資源，通過云班課中學生的反饋及時對教學進行調整，而傳統教學中，教師很難及時掌握學生存在問題，因此教學是一成不變的，不能適應新時代學生的要求。2)共享教學資源，實現隨時隨地學習云班課中教學資源豐富，通過網絡學生可以在手機上利用碎片化的時間進行學習，同時能夠進行反復學習，加深對知識的理解。而師生互動也能隨時進行，通過教師及時的答疑解惑，使存在的問題一一解決，有利于學生對知識的掌握。3）調動學習積極性，靈活運用所學傳統課堂教學中學生積極性不高，教師講授枯燥無味，學生被手機吸引，而在云班課平臺下，手機是學習的工具，教師通過云班課平臺任務，學生通過不同的活動完成知識的內化，構建自己的知識體系，從而達到靈活運用知識的目的。

5結語

基于云班課的線上線下混合教學打破了傳統教學的時間與空間限制，將教學貫穿于課前、課中、課后3個階段。課前自學過程中，學生遇到問題可以借助云班課討論，教師根據學生提出的問題再確定下一步的教學目標，及時進行教學診改。課堂上通過小組合作、討論交流、成果分享、歸納總結等教學活動，促進學生個性發展，提升學生合作能力。課后，教師通過知識點測試和作業任務，增加學生練習機會，拓展學生視野，使學生能夠靈活運用所學。通過云班課平臺，學生不僅在課堂上變得活躍，課后與老師互動增加，使學生的學習由被動變主動，課堂學習由原來的以教師為主變為以學生為主，教學質量得到提升。

參考文獻：

[1]李春良.基于云班課的高職學前教育專業混合式教學實踐——以《學前兒童游戲與指導》課程為例[J].高教論壇,2020(11):102-105.

[2]黃丹卉.基于云班課平臺的高職英語混合式教學實證研究[J].寧波職業技術學院學報,2020,24(5):32-39.

[3]刁海軍,羅偉,張小宇,等.基于移動學習App的混合式教學研究與實踐——以云班課移動學習資源的建設與應用為例[J].太原城市職業技術學院學報,2020(11):65-67.

作者：瞿江 單位：蘇州信息職業技術學院