淺談基于翻轉(zhuǎn)課堂的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)模式的實(shí)踐研究

摘要：隨著5G技術(shù)的成熟運(yùn)用，Web前端開(kāi)發(fā)工程師仍是各大軟件企業(yè)追逐和獵取的人才對(duì)象，而html5+css3作為Web前端開(kāi)發(fā)的核心課程，對(duì)軟件工程專業(yè)前端工程師的培養(yǎng)尤為重要。本文針對(duì)“html5+css3網(wǎng)頁(yè)設(shè)計(jì)”這門實(shí)踐性極強(qiáng)的課程做翻轉(zhuǎn)課堂的教學(xué)方法改革研究，通過(guò)對(duì)課堂教學(xué)模式的設(shè)計(jì)與分析，構(gòu)建出適合教學(xué)的共享體系，進(jìn)行相應(yīng)的教學(xué)改革實(shí)踐。

關(guān)鍵詞：翻轉(zhuǎn)課堂;html5+css3;網(wǎng)頁(yè)設(shè)計(jì)教學(xué);教學(xué)實(shí)踐

引言

傳統(tǒng)的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的課堂教學(xué)中，是從教師備課、準(zhǔn)備教學(xué)內(nèi)容開(kāi)始，對(duì)知識(shí)內(nèi)容進(jìn)行編碼，教師在課堂里以聲音、畫面、文字等作為傳播介質(zhì)，學(xué)生再以聽(tīng)覺(jué)、視覺(jué)等感官接收信息，通過(guò)理解、整合等方式對(duì)信息進(jìn)行加工、解碼，最后將知識(shí)進(jìn)行記憶儲(chǔ)存。在這一教學(xué)方式里，優(yōu)質(zhì)的教師資源稀缺或者分配不均、學(xué)生因個(gè)體差異學(xué)習(xí)進(jìn)度不能統(tǒng)一、良好的知識(shí)傳播環(huán)境缺乏等問(wèn)題難以得到根本解決，導(dǎo)致知識(shí)傳播效果不佳，學(xué)生學(xué)習(xí)進(jìn)展緩慢。要達(dá)到良好的教學(xué)效果，學(xué)生在上網(wǎng)頁(yè)設(shè)計(jì)課程之前，就需要能擁有相當(dāng)量的實(shí)踐和教學(xué)溝通輔助學(xué)習(xí)。基于此，結(jié)合筆者的實(shí)踐經(jīng)驗(yàn)，本文提出了基于翻轉(zhuǎn)課堂的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的研究與實(shí)踐，使用教學(xué)平臺(tái)將前期教學(xué)轉(zhuǎn)移到課堂之外，教師采用課外的時(shí)間或資源來(lái)創(chuàng)建和不斷更新所使用平臺(tái)的視頻內(nèi)容。

1 基于翻轉(zhuǎn)課堂的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)背景

Html5+css3網(wǎng)頁(yè)設(shè)計(jì)課程作為一門實(shí)踐性較強(qiáng)的課程，教學(xué)目標(biāo)要求學(xué)生學(xué)習(xí)后能夠具備網(wǎng)頁(yè)開(kāi)發(fā)的能力，對(duì)于學(xué)生的自我學(xué)習(xí)能力具有一定要求。翻轉(zhuǎn)課堂的教學(xué)模式能為學(xué)生提供更多主動(dòng)參與學(xué)習(xí)的機(jī)會(huì)，能夠達(dá)到學(xué)生個(gè)性化需求的滿足與自主學(xué)習(xí)能力的培養(yǎng)。作為本次教學(xué)改革首選的實(shí)驗(yàn)方法，本文通過(guò)選用博學(xué)谷（傳智播客旗下高校教輔平臺(tái)）這個(gè)學(xué)習(xí)管理系統(tǒng)作為研究平臺(tái)，對(duì)翻轉(zhuǎn)課堂教學(xué)模式進(jìn)行實(shí)踐應(yīng)用。博學(xué)谷是一個(gè)被廣泛使用的傳智播客旗下的高校教輔平臺(tái)，不僅是在教育設(shè)計(jì)方面提供了的翻轉(zhuǎn)課堂教學(xué)模型模板，而且在課程或教育場(chǎng)景方面也提供了良好的教學(xué)資源。

2 基于翻轉(zhuǎn)課堂的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的理論研究

基于當(dāng)前高校課堂教學(xué)環(huán)境下，有兩種廣泛被應(yīng)用于的翻轉(zhuǎn)課堂教學(xué)模式，即探究式教學(xué)模式和基于問(wèn)題的教學(xué)模式。本文選定的教學(xué)模式是以探究為基礎(chǔ)的教學(xué)模式和以問(wèn)題為基礎(chǔ)的教學(xué)模式，它們已被確定為適合于滿足翻轉(zhuǎn)課堂教育新出現(xiàn)的需求的教學(xué)模式?；趩?wèn)題和探究的教學(xué)方式在其教學(xué)環(huán)節(jié)中以學(xué)生為中心，該教學(xué)方法實(shí)踐的第一步即在廣泛使用的教學(xué)模式的基礎(chǔ)上，設(shè)計(jì)兩個(gè)翻轉(zhuǎn)課堂的教學(xué)模型。教學(xué)模型旨在為教師提供兩方面的便利：第一，在兩個(gè)教學(xué)模式的具體階段內(nèi)，提供教學(xué)、學(xué)習(xí)和評(píng)估活動(dòng)類型的“通用”、結(jié)構(gòu)化和適應(yīng)性藍(lán)圖。第二，在教學(xué)、學(xué)習(xí)和評(píng)估活動(dòng)在教師之間的分布方面，他們采納了翻轉(zhuǎn)課堂模式的要點(diǎn)。

翻轉(zhuǎn)課堂模式是一種混合教學(xué)模式，它提出的關(guān)鍵概念，是教師支持的面對(duì)面演講不應(yīng)用于授課，而應(yīng)用于讓學(xué)生參與教師制定的動(dòng)手或協(xié)作活動(dòng)，以促進(jìn)活動(dòng)參與、互動(dòng)搭建和反饋。在翻轉(zhuǎn)課堂強(qiáng)化課程或教育情景中，教學(xué)、學(xué)習(xí)和評(píng)估活動(dòng)分配的基本原則是，基礎(chǔ)內(nèi)容教學(xué)不需要教師在課堂提供，教師可以通過(guò)適當(dāng)設(shè)計(jì)選定的教學(xué)和評(píng)估資源，如教學(xué)視頻和預(yù)習(xí)題代替教師在課堂教授基礎(chǔ)知識(shí)，學(xué)生可以自主地利用這些資源，從而在學(xué)習(xí)速度和時(shí)間方面享有更大的自由。

3 基于翻轉(zhuǎn)課堂的html5+css3網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的教學(xué)模式設(shè)計(jì)與實(shí)踐

此次研究以html5+css3網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)為例展開(kāi)分析與設(shè)計(jì)，該翻轉(zhuǎn)課堂教學(xué)模式將從課前、課中及課后三個(gè)階段進(jìn)行設(shè)計(jì)。

階段一：課前預(yù)習(xí)

翻轉(zhuǎn)課堂作為一種以學(xué)生為中心的教學(xué)模式，學(xué)生對(duì)于整個(gè)學(xué)習(xí)過(guò)程具備極大的自主性，可以根據(jù)自己的學(xué)習(xí)情況安排以及控制整個(gè)課前學(xué)習(xí)過(guò)程。教師將課堂知識(shí)點(diǎn)發(fā)布于博學(xué)谷平臺(tái)，學(xué)生使用手機(jī)或電腦隨時(shí)隨地登錄學(xué)習(xí)，完成預(yù)習(xí)任務(wù)，該平臺(tái)可以自動(dòng)統(tǒng)計(jì)學(xué)生預(yù)習(xí)數(shù)據(jù)。

階段二：課中交流

通過(guò)課前預(yù)習(xí)階段，學(xué)生能掌握一定的基礎(chǔ)知識(shí)，并記錄下自己無(wú)法準(zhǔn)確理解或者存在理解難度的知識(shí)點(diǎn)。由于課前預(yù)習(xí)是自我完成的過(guò)程，因而每個(gè)人都可以提出自己存疑的問(wèn)題，教師可以一一進(jìn)行解答。具體按照以下六個(gè)環(huán)節(jié)開(kāi)展課堂教學(xué)：

（1）預(yù)習(xí)反饋：授課教師登錄云平臺(tái)，展示學(xué)生預(yù)習(xí)數(shù)據(jù)及學(xué)生存疑的知識(shí)點(diǎn)問(wèn)題，針對(duì)這些數(shù)據(jù)，對(duì)學(xué)生的預(yù)習(xí)情況進(jìn)行介紹，對(duì)于完成情況較好及以上的同學(xué)提出鼓勵(lì)并讓其繼續(xù)保持，對(duì)于完成情況較差的同學(xué)，問(wèn)清楚原因后，督促學(xué)生課前要認(rèn)真預(yù)習(xí)。

（2）任務(wù)展示：根據(jù)基于問(wèn)題導(dǎo)向教學(xué)這一方法的要求，教師課前展示頁(yè)面效果，即提出這堂課需要解決的教學(xué)任務(wù)，然后與學(xué)生進(jìn)行互動(dòng)，通過(guò)分析、提問(wèn)等環(huán)節(jié)在對(duì)舊課復(fù)習(xí)基礎(chǔ)上，導(dǎo)入新課。

（3）任務(wù)分解：根據(jù)環(huán)節(jié)二提出的課堂任務(wù)，對(duì)該任務(wù)頁(yè)面進(jìn)行分解，形成若干新的知識(shí)點(diǎn)，如：CSS 基礎(chǔ)可以直接看教材，應(yīng)用可以學(xué)習(xí)所采用的云平臺(tái)上的教學(xué)視頻，CSS漸變語(yǔ)法可以登錄CSDN博客參與專題討論，創(chuàng)建CSS漸變可以通過(guò)上網(wǎng)來(lái)百度搜索學(xué)習(xí)。

（4）任務(wù)實(shí)現(xiàn)：環(huán)節(jié)三中的任務(wù)分解部分，設(shè)定任務(wù)完成時(shí)間，學(xué)生以組為單位，自我進(jìn)行任務(wù)安排。該環(huán)節(jié)可以培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作能力及解決問(wèn)題的能力。學(xué)生的工作是做目標(biāo)任務(wù)、問(wèn)問(wèn)題、學(xué)知識(shí)點(diǎn)、參與小組討論;老師的工作是巡視督學(xué)、答疑解惑，把控教學(xué)進(jìn)度。教師可以針對(duì)每組學(xué)生的教學(xué)進(jìn)度及情況進(jìn)行答疑解惑，一定程度上實(shí)現(xiàn)因材施教。

（5）任務(wù)展演：任務(wù)完成時(shí)間截止后，每個(gè)小組需要對(duì)該組最優(yōu)的作品進(jìn)行展示，首先一定程度上會(huì)培養(yǎng)學(xué)生的積極性，打破傳統(tǒng)小組學(xué)習(xí)中的多項(xiàng)工作都交由某個(gè)或部分同學(xué)，保證了大家的參與度。其他組的學(xué)生在觀看的過(guò)程中，找出該組的優(yōu)點(diǎn)及問(wèn)題，并發(fā)現(xiàn)自己的作業(yè)中存在的不足。學(xué)生在對(duì)比中尋找不足和獲得榮譽(yù)感。

（6）任務(wù)點(diǎn)評(píng)：各組對(duì)作品展示完畢后，教師依次回顧每一組的作業(yè)，讓同學(xué)們提出問(wèn)題，并嘗試找出自認(rèn)為可行的解決辦法。最后教師進(jìn)行總結(jié)，提出下次預(yù)期的目標(biāo)等。

階段三：課后鞏固

教師可以根據(jù)預(yù)習(xí)階段統(tǒng)計(jì)的數(shù)據(jù)，以及記錄課堂教學(xué)開(kāi)展的情況，合理并有效的安排下一次的預(yù)習(xí)任務(wù)以及課堂教學(xué)中可以調(diào)整的地方。課后可以在平臺(tái)發(fā)布一定作業(yè)，對(duì)該堂課的教學(xué)知識(shí)點(diǎn)進(jìn)行鞏固。

4 結(jié)束語(yǔ)

翻轉(zhuǎn)課堂教育一直與培養(yǎng)學(xué)生探究和解決問(wèn)題能力的聯(lián)系在一起，是以學(xué)生為中心的教學(xué)方法。本文基于博學(xué)谷這一教學(xué)平臺(tái)，對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程進(jìn)行翻轉(zhuǎn)課堂的教學(xué)改革實(shí)踐，提供了一種基于翻轉(zhuǎn)課堂的混合教學(xué)模式，通過(guò)重新分配學(xué)生學(xué)習(xí)活動(dòng)的分布，使學(xué)生的參與度最大化，增強(qiáng)翻轉(zhuǎn)課堂教學(xué)方法在教學(xué)中的應(yīng)用效果。

參考文獻(xiàn)

[1]繆靜敏，汪瓊.高校翻轉(zhuǎn)課堂：現(xiàn)狀、成效與挑戰(zhàn)——基于實(shí)踐一線教師的調(diào)查[J].開(kāi)放教育研究，2015，（05）.

[2]劉鑫，周潤(rùn)苗，聶作財(cái)， 等.基于云課堂的應(yīng)用型本科院校"網(wǎng)頁(yè)設(shè)計(jì)與制作"課程的翻轉(zhuǎn)課堂教學(xué)模式探索[J].教育教學(xué)論壇，2020，（3）：174-175.

[3]榮艷冬.翻轉(zhuǎn)課堂教學(xué)模式下數(shù)字化教學(xué)資源庫(kù)建設(shè)——以網(wǎng)頁(yè)設(shè)計(jì)與制作課程為例[J].軟件，2018，39（9）：213-215. DOI：10.3969/j.issn.1003-6970.2018.09.044.

[4]陳畫，楊孟瑩.基于微信平臺(tái)的翻轉(zhuǎn)課堂教學(xué)改革與實(shí)踐——以《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程為例[J].電子商務(wù)，2018，（5）：69-70，87.

課題編號(hào)

GZMDBXYSC1910，課題名：數(shù)字化“翻轉(zhuǎn)課堂”教學(xué)平臺(tái)開(kāi)發(fā)——數(shù)字藝術(shù)實(shí)踐課程教學(xué)改革研究。

作者簡(jiǎn)介

陳妍（1987.9—），女，漢族，貴州遵義人，碩士學(xué)歷，貴州民族大學(xué)，講師，研究方向：軟件前端開(kāi)發(fā)、數(shù)據(jù)分析與可視化。