基于雨課堂的在線教學模式實踐與探索
——以響應式布局網站開發為例

郭欣桐 于 洪

（黑龍江工商學院，黑龍江 哈爾濱 150001）

0 引言

2021年8月部分地區疫情突發，在此突發情況之下，黑龍江工商學院積極響應國家號召，2021—2022年第一學期學生延期返校，并開啟了“停課不停學”的教學模式，避免了人群聚集，為師生人身安全提供了保障。在此背景下，如何有效組織課堂教學，發揮線上教學的優勢，成為任課教師首要思考的問題。基于上述問題，利用互聯網以及現代信息技術的優勢，適當融入課程思政元素，積極探索“響應式布局網站開發”課程線上教學的新模式。

1 “響應式布局網站開發”課程特點以及教學內容

“響應式布局網站開發”是我校軟件工程專業Java EE方向課之一，其前導課程為Web前端開發技術，是一門理論知識與實踐應用相結合的綜合性課程，在軟件工程專業培養中起到至關重要的作用[1]。

課程教學目標主要分為三個方面：

1.1 知識目標

（1）熟悉Bootstrap安裝過程以及使用。

（2）熟悉響應式布局網站開發的基本流程。

1.2 能力目標

（1）能運用響應式布局的基本原理，根據需求分析，對所提出的解決方案進行評價，進而驗證解決方案的合理性，得出有效結論。

（2）能夠開發、選擇與使用恰當的前端開發技術、資源、開發工具完成響應式布局網站的需求分析、設計、實現。

1.3 素質目標

具有良好的職業素養，熟悉前端開發領域的國家政策、法律法規和行業規范。

課程教學目標是教學的依據，對整個課程教學的實施過程具有導向作用。教學過程的實施又離不開教學內容的組織。該課程主要講述Web前端開發主流框架Bootstrap的基本使用以及響應式布局網站開發的基本流程。

根據“響應式布局網站開發”課程的地位和特點，將課程教學內容分成四個模塊。第一個模塊為響應式布局原理模塊，主要涉及媒體查詢、布局容器、前端主流響應式布局框架Bootstrap的安裝和引入。第二個模塊為柵格系統模塊，主要講解如何使用Bootstrap柵格系統對網頁進行響應式布局。第三個模塊為公共樣式模塊，主要包括Bootstrap框架內外邊距、邊框、寬高、對齊方式、顏色、顯示方式、浮動等設置方式。第四個模塊為組件模塊，主要包括下拉菜單、導航、面包屑、分頁、按鈕組、卡片等框架和樣式的基本使用方式。第五個模塊為插件模塊，主要包括過渡、輪播、折疊、下拉項、彈出提示等交互行為和動態效果的基礎使用方式。

2 教學平臺以及教學工具

課程以雨課堂為主要教學平臺，QQ群、多媒體課件、網頁案例作為輔助的教學工具。雨課堂是由清華大學和學堂在線共同合作開發的智慧教學平臺，該平臺基于微信公眾號和PPT插件運行，用戶界面簡潔、友好，操作簡單，避免了過多復雜的操作，易上手。教師只需下載安裝雨課堂軟件并關注長江雨課堂公眾號，在公眾號中進行身份激活。激活成功后，在“我教的課”選項中即可查閱本學期課程以及班級學生信息。

3 基于“雨課堂”的教學實施

“響應式布局網站開發”課程的教學實施過程主要從課前、課中、課后這三個環節開展。教學實施的流程圖如圖1所示。

圖1 教學實施流程圖

3.1 課前準備

在課前準備階段，對授課的不同班級進行學情分析，制作供學生自主預習的課程材料，課程材料題型以思考題為主，涵蓋本節課教學內容的重難點。思考題主要引導學生進行自主探究式學習[2]，整合所學新知識點和舊知識點之間的內在聯系，通過已掌握的知識點學習新的知識點，從而完成新舊知識點的轉化。通過輔助教學工具QQ群可與學生保持聯系，對學生提出的問題及時進行在線答疑解惑，幫助學生進行新知識點的理解。同時，在解答的過程中，針對共性問題，可組織學生進行討論，從而了解其他同學的預習情況。

通過學生的預習情況，在授課過程中根據不同班級的情況適當調整教學方法，做到因材施教。

網絡是線上教學的基本保障，因此在課前準備階段，教師需要與學生進行線上教學環境的測試，重點檢測是否有學生因網絡問題無法進入課堂、教師麥克聲音是否正常、教師PPT、案例網頁是否正常顯示等問題。

確保線上教學硬件設施與軟件無誤后，教師可正式進行線上教學環節。

3.2 課中開展多個教學環節

3.2.1 知識點回顧

由于響應式布局網站開發的課程特點，知識點回顧以實踐操作為主，培養學生的實際操作能力。以小組互助學習為依托，小組討論找出網站代碼中的錯誤點，錯誤點為上一節的重難點以及學生代碼練習時的錯誤點。各小組存在競爭關系，根據提交答案的先后順序以及準確率進行加分，分數秉承公開公正的原則，從而讓更多的學生參與教學中，提高學生的自主學習能力以及團隊協作能力，增強學生的集體榮譽感。經實踐表明，教學效果良好，各小組提交的匯總答案均能保證85%的準確率，各小組成員均能積極參與至小組討論中，給出自己的意見。

3.2.2 知識點講解

由于響應式布局開發的課程特點，課程應整合學生興趣、技術學習等多種內容，發揮前端開發技術的應用優勢，堅持以實踐操作為主，教學難度適中的教學原則。保持教學內容的及時更新，在信息化時代下，及時查找新的教學熱點[3]。與此同時，應注重從學生感興趣的學習關注點出發，提高教學的趣味性，以興趣為導向，激勵學生對響應式布局網站開發的學習熱情。例如，講解Bootstrap柵格系統時以實際網頁為例進行網頁整體布局。將學生感興趣的熱點話題電視劇《你是我的榮耀》中的航天背景與時政熱點神舟十二號緊密關聯，講解中國載人航天官方網站的布局方式。在提高學生學習興趣的同時，引入課程思政，宣揚中國航天自強不息的精神，讓學生樹立民族自豪感。

在講解實際案例網站時，采用啟發式教學方式，以學生為主體，引導學生自主思考，利用雨課堂的彈幕功能調動學生參與課堂互動的積極性，避免了傳統教學中易出現的師生互動較少、學生積極性不高的問題。教師根據彈幕內容及時給予學生反饋，對學生的思路進行引導。若在彈幕中出現與教學內容無關的內容，應及時給予學生警告、制止發送與課堂教學無關的內容。經實踐表明，班級大部分同學均可積極參與課堂互動，將自己思考后的答案以彈幕形式發送。而課程結束后，教師可查閱課程報告中的彈幕消息統計，如圖2所示，方便課后進行分數統計。在授課過程中，還可利用雨課堂提供的隨機點名功能調動學生參與課堂的積極性，并且隨機點名功能因為其不確定性可以提高學生的緊張感[4]，有助于提高學習效率。但在教學過程中要注意使用次數，防止學生太緊張導致無法集中注意力。

圖2 教師端查看彈幕

3.2.3 實驗練習

由于課程特點，基本理論知識點講解環節結束后，開展實驗練習環節。由于線上教學地點的局限性，無法面對面檢查學生實驗練習的情況。為解決這一問題，采用QQ群作為輔助教學工具，要求學生將實驗練習的代碼以截圖的形式發送至QQ群。教師依次查看每位學生代碼，指出問題，如圖3所示，從而完成遠程實驗指導。

圖3 實驗遠程指導

3.3 課后鞏固

課后鞏固主要通過課后作業以及雨課堂討論區兩部分展開。課后作業是對課上教學的有效延伸，是學生課堂學習的鞏固和深化。根據課程特點，課后作業以實際操作為主。通過課后作業，學生可以了解自身的學習情況。當學生在完成作業的過程中遇到問題時，可通過QQ群對教師提出問題，教師進行解答。當遇到共性問題時，發送至雨課堂討論區，全班同學進行交流溝通。

4 結語

本文基于“雨課堂”，從課前準備、課堂教學以及課后鞏固三個環節進行“響應式網站開發”課程的線上教學實踐嘗試。課程以小組互助學習為依托，積極開展探究式、討論式、參與式教學。基于雨課堂的在線教學對“響應式網站開發”課程是一次新的嘗試，后續會逐步完善以達到更好的教學效果。