BOPPPS模式在高職院校網(wǎng)頁設(shè)計(jì)與制作課程中的應(yīng)用研究

唐斐琳

關(guān)鍵詞：BOPPPS模式；計(jì)算機(jī)類課程應(yīng)用；網(wǎng)頁設(shè)計(jì)與制作

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

文章編號(hào)：1009-3044（2023）12-0149-03

1 BOPPPS 模式應(yīng)用概況

1978年加拿大哥倫比亞大學(xué)的Douglas Kerr首次提出BOPPPS模式，當(dāng)時(shí)主要是用于對(duì)教師的技能培訓(xùn)，其后，該模式得到廣泛的應(yīng)用和推廣，國(guó)內(nèi)最早是2007年黃娟在《職業(yè)教育研究》上發(fā)表的《加拿大模型的教學(xué)技能培訓(xùn)》，從此，拉開了國(guó)內(nèi)對(duì)BOPPPS模型研究的熱潮，BOPPPS模式突出“以學(xué)生為中心，以目標(biāo)為導(dǎo)向”的教育理念，完美契合了新時(shí)代我國(guó)職業(yè)教育對(duì)教學(xué)的新要求，同時(shí)該模式還是一個(gè)強(qiáng)調(diào)學(xué)生參與和反饋的閉環(huán)教學(xué)設(shè)計(jì)[2]，通過設(shè)置深度參與式的學(xué)習(xí)活動(dòng)來增進(jìn)師生之間、生生之間的互動(dòng)和交流，提高學(xué)生自我建構(gòu)知識(shí)體系的能力，BOPPPS共有6 個(gè)步驟，按照Bridge-in 導(dǎo)入、Objective 目標(biāo)前測(cè)、Pre-assessment 前言、Participatory Learning 參與式學(xué)習(xí)、Post-assessment后測(cè)、Summary總結(jié)來進(jìn)行教學(xué)實(shí)施，如圖1所示。

2 網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)問題分析

網(wǎng)頁設(shè)計(jì)與制作課程，一般開設(shè)在高職計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)或者藝術(shù)設(shè)計(jì)專業(yè)當(dāng)中，不同的專業(yè)對(duì)于人才培養(yǎng)的目標(biāo)各不相同，無論是哪一個(gè)專業(yè)，它都處于核心地位，作為一門專業(yè)核心課程，它對(duì)接了UI設(shè)計(jì)師與網(wǎng)頁前端工程師的職業(yè)崗位需求，對(duì)學(xué)生綜合職業(yè)能力培養(yǎng)具有至關(guān)重要的作用。本次案例以計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的網(wǎng)頁設(shè)計(jì)與制作課程為例，分析該課程的性質(zhì)與主要內(nèi)容，整個(gè)內(nèi)容包括表現(xiàn)層、樣式層和行為層三個(gè)部分，在日常的教學(xué)中，學(xué)生學(xué)習(xí)該課程主要存在以下幾個(gè)方面的問題：

1） 學(xué)生基礎(chǔ)較弱，獲得感不強(qiáng)

網(wǎng)頁設(shè)計(jì)與制作課程為高職二年級(jí)階段的學(xué)習(xí)科目，通過學(xué)情分析，學(xué)生普遍英語能力較弱，詞匯量?jī)?chǔ)備不足，面對(duì)不斷出現(xiàn)的復(fù)雜代碼容易忘記其指代含義。一半的學(xué)生在編寫HTML代碼時(shí)容易出錯(cuò)，易漏掉字符，導(dǎo)致頁面效果無法顯示，特別是后面章節(jié)涉及到的代碼越來越復(fù)雜，學(xué)生學(xué)習(xí)容易受挫，導(dǎo)致學(xué)習(xí)興趣度不高，自我成就感較差。

2） 學(xué)習(xí)內(nèi)容更新慢，與行業(yè)企業(yè)脫節(jié)

隨著互聯(lián)網(wǎng)、大數(shù)據(jù)、區(qū)塊鏈等飛速發(fā)展，各大互聯(lián)網(wǎng)公司也在不斷挖掘和開發(fā)新的技術(shù)，部分高職院校HTML代碼編輯器與校外許多主流公司采用的編輯工具不一致，例如行業(yè)當(dāng)中一般都使用比較先進(jìn)的sublime text3 編輯器、Hbuiderx編輯器，而部分職業(yè)院校內(nèi)老師還是根據(jù)教材內(nèi)容，繼續(xù)使用dreamweaver這一工具軟件進(jìn)行教學(xué)，通過插入圖片的方式進(jìn)行學(xué)習(xí)，缺乏新技術(shù)、新規(guī)范、新工藝帶來的欣喜感，學(xué)生學(xué)習(xí)興趣度不高。

3） 教師授課方式單一，學(xué)習(xí)枯燥乏味

傳統(tǒng)教學(xué)主要是以教師講授為主，灌輸式的理論講授經(jīng)常出現(xiàn)在各個(gè)講臺(tái)，師生以及生生之間缺乏有效的互動(dòng)和交流，這種灌輸式的理論學(xué)習(xí)會(huì)導(dǎo)致學(xué)生對(duì)于課程的學(xué)習(xí)興趣降低。

3 BOPPPS 模式在網(wǎng)頁設(shè)計(jì)與制作教學(xué)中的實(shí)踐探索

為了滿足計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)對(duì)人才培養(yǎng)的需求，以2021級(jí)計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)三年制高職1班為例，將BOPPPPS模式融入網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)實(shí)踐，從課程標(biāo)準(zhǔn)、教學(xué)設(shè)計(jì)、考核方式改革3個(gè)方面進(jìn)行探索。

3.1 重構(gòu)內(nèi)容

網(wǎng)頁設(shè)計(jì)與制作課程選用計(jì)算機(jī)“十三五”規(guī)劃教材dreamweaver CS6案例教程，授課計(jì)劃總學(xué)時(shí)為108學(xué)時(shí)，教師按照教材項(xiàng)目進(jìn)行傳統(tǒng)教學(xué)，包括網(wǎng)頁基礎(chǔ)知識(shí)、網(wǎng)站的規(guī)劃與建設(shè)——制作“石市科干院”網(wǎng)站規(guī)劃書并建立站點(diǎn)、添加頁面對(duì)象——制作貿(mào)易公司網(wǎng)站等幾大項(xiàng)目進(jìn)行授課計(jì)劃編制。該流程按照傳統(tǒng)的“理論+實(shí)訓(xùn)”方式執(zhí)行，并未對(duì)教學(xué)內(nèi)容進(jìn)行重構(gòu)，學(xué)生學(xué)習(xí)起來容易導(dǎo)致理論與實(shí)踐脫節(jié)，更缺乏實(shí)際工作任務(wù)帶來的體驗(yàn)感。結(jié)合計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)人才培養(yǎng)方案和網(wǎng)頁前端工程師崗位工作要求，筆者將教學(xué)內(nèi)容進(jìn)行重構(gòu)，以學(xué)生綜合職業(yè)能力培養(yǎng)為目標(biāo)，將實(shí)際工作任務(wù)轉(zhuǎn)化為學(xué)習(xí)任務(wù)，將課程內(nèi)容重構(gòu)細(xì)化為5個(gè)代表性學(xué)習(xí)任務(wù)，分別設(shè)置：“個(gè)人簡(jiǎn)歷”頁面制作（6學(xué)時(shí)）、“隨閱書吧”圖書頁面制作（6學(xué)時(shí)）、“公益拍攝”相冊(cè)頁面制作（12學(xué)時(shí)）、“一箱情愿”志愿服務(wù)驛站專題頁制作（24學(xué)時(shí)）、“嗨購三湘”馬坪村商貿(mào)街網(wǎng)上交易平臺(tái)制作（48學(xué)時(shí)）5個(gè)項(xiàng)目，遵循學(xué)生的職業(yè)成長(zhǎng)規(guī)律，增加了思政內(nèi)容、職業(yè)素養(yǎng)等學(xué)習(xí)內(nèi)容，注重學(xué)生綜合職業(yè)能力的培養(yǎng)。

3.2 教學(xué)設(shè)計(jì)

BOPPPS模式，以建構(gòu)主義為理論依據(jù)，以有效教學(xué)設(shè)計(jì)著稱[3]，本次教學(xué)設(shè)計(jì)核心內(nèi)容就是將BOPPPS模式與教學(xué)設(shè)計(jì)進(jìn)行有機(jī)融合，結(jié)合五個(gè)項(xiàng)目的學(xué)習(xí)內(nèi)容，初步將每個(gè)項(xiàng)目按照知識(shí)難易度進(jìn)行課時(shí)劃分，每2學(xué)時(shí)一個(gè)教案，均按照BOPPPS的6個(gè)階段進(jìn)行教學(xué)設(shè)計(jì)，并結(jié)合一體化學(xué)習(xí)資源素材，靈活采用多種教學(xué)方法，初步構(gòu)建基于BOPPPS 教學(xué)模式的網(wǎng)頁設(shè)計(jì)與制作教案。其采用的主要方法、主要特點(diǎn)和目的如表1所示。

3.3 教學(xué)過程實(shí)施舉例

接下來以第五個(gè)學(xué)習(xí)任務(wù)的第三個(gè)微任務(wù)“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”為例進(jìn)行課堂實(shí)施，如圖2：

1） 導(dǎo)入

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，首先通過播放企業(yè)優(yōu)秀案例，優(yōu)秀校友網(wǎng)頁前端工程師小沈的前端工作經(jīng)歷，講述CSS樣式設(shè)計(jì)還原對(duì)于前端工程師的重要性，讓學(xué)生了解CSS精準(zhǔn)還原的原因和效果，明確本次學(xué)習(xí)內(nèi)容。

2） 目標(biāo)

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，要求學(xué)生能夠準(zhǔn)確敘述CSS的基本語法，默寫出CSS還原的基本步驟，掌握高級(jí)特性（繼承父級(jí)、CSS層疊樣式）的使用；并通過樣式設(shè)置完成UI設(shè)計(jì)的精準(zhǔn)還原，在完成任務(wù)的過程當(dāng)中培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作、創(chuàng)新能力以及精益求精的工匠精神。

3） 知識(shí)前測(cè)

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，學(xué)生需完成線上測(cè)試題目：1.CSS樣式設(shè)置的流程是什么？2.精準(zhǔn)還原所必備的條件有哪些？3.下列情況哪個(gè)屬于CSS高級(jí)特性（繼承父級(jí)、CSS層疊樣式）？通過三個(gè)問題，對(duì)課前自主學(xué)習(xí)情況進(jìn)行了解，對(duì)課中重難點(diǎn)進(jìn)行預(yù)判，教師結(jié)合測(cè)試情況，針對(duì)性地為學(xué)生發(fā)送學(xué)習(xí)資源包，做到精準(zhǔn)有效地自主學(xué)習(xí)，提高教學(xué)有效性。

4） 參與式學(xué)習(xí)

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，在講述CSS樣式規(guī)范時(shí)，學(xué)生展示匯報(bào)課前“一箱情愿”志愿服務(wù)驛站的首頁制作，各小組成員記錄還原過程中存在的問題。教師通過案例分析引導(dǎo)學(xué)生進(jìn)行CSS樣式思考，接著學(xué)生通過“小板凳對(duì)接”進(jìn)行組內(nèi)討論，并制定優(yōu)化方案，明確本次任務(wù)的重點(diǎn)內(nèi)容。在化解難點(diǎn)方面，學(xué)生通過角色扮演、組間走查等深度參與式學(xué)習(xí)活動(dòng)，進(jìn)行交互體驗(yàn)，模擬UI設(shè)計(jì)師進(jìn)行項(xiàng)目走查，檢測(cè)CSS精準(zhǔn)還原UI設(shè)計(jì)的規(guī)范程度。學(xué)生結(jié)合走查結(jié)果進(jìn)行作品優(yōu)化，培養(yǎng)他們精益求精的工匠精神。

5） 后測(cè)

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，提出2個(gè)問題，問題一：在還原過程中，發(fā)現(xiàn)有4個(gè)像素的小間隙，該如何去除？有幾種方法？ 問題二：CSS樣式初始化的原因描述錯(cuò)誤有哪些？查看學(xué)生知識(shí)重難點(diǎn)掌握情況，并引導(dǎo)學(xué)生結(jié)合實(shí)際進(jìn)行優(yōu)化。

6） 總結(jié)

以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，教師通過口訣編譯的形式與學(xué)生共同進(jìn)行總結(jié)，強(qiáng)調(diào)CSS精準(zhǔn)還原的方法和技巧，再次強(qiáng)化本次教學(xué)的重點(diǎn)和難點(diǎn)，引導(dǎo)學(xué)生完成任務(wù)遷移。

3.4 創(chuàng)新考核方式

融入BOPPPS模式后，評(píng)價(jià)機(jī)制也相應(yīng)地進(jìn)行調(diào)整，以“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”微任務(wù)為例，按照目標(biāo)達(dá)成情況進(jìn)行考核，考察學(xué)生的課堂參與度、學(xué)習(xí)態(tài)度、職業(yè)素養(yǎng)和階段性成果，如表2所示，在評(píng)價(jià)主體上，包括學(xué)生自評(píng)、組內(nèi)互評(píng)、教師點(diǎn)評(píng)、技能大師評(píng)價(jià)等多元多方評(píng)價(jià)體系，探索性地設(shè)置了增值評(píng)價(jià)，考查學(xué)生相比前一個(gè)任務(wù)的學(xué)習(xí)進(jìn)步程度，以此衡量BOPPPS模式對(duì)于課堂教學(xué)的有效性，同時(shí)，激發(fā)學(xué)生的獲得感和成就感，促進(jìn)學(xué)生的個(gè)人成長(zhǎng)，通過此評(píng)價(jià)完美地契合BOPPPS模式“以學(xué)生為中心，以目標(biāo)為導(dǎo)向”的理念[4]。

4 BOPPPS 模式應(yīng)用的具體教學(xué)效果

1） 學(xué)習(xí)目標(biāo)有效達(dá)成

通過BOPPPS模式融入課堂實(shí)踐，根據(jù)學(xué)習(xí)通平臺(tái)結(jié)果顯示，全班優(yōu)良率達(dá)到90%，其中90分以上5人，80～90 分人數(shù)為25 人，20% 的學(xué)生獲得創(chuàng)新達(dá)人，相比前一個(gè)學(xué)習(xí)任務(wù)，環(huán)比增長(zhǎng)5%，學(xué)習(xí)目標(biāo)有效達(dá)成，職業(yè)素養(yǎng)穩(wěn)步提升。

2） 學(xué)生興趣穩(wěn)步提升

BOPPPS模式突出“以學(xué)生為中心”的教學(xué)理念，通過設(shè)置深度參與式的學(xué)習(xí)活動(dòng)來激發(fā)學(xué)生的學(xué)習(xí)興趣，提高學(xué)生課堂的參與度，促進(jìn)師生之間、生生之間的有效溝通，通過課中觀察，結(jié)合學(xué)生自評(píng)和互評(píng)結(jié)果顯示，學(xué)生的學(xué)習(xí)積極性顯著提高，從要我學(xué)變?yōu)槲乙獙W(xué)。

5 結(jié)束語

網(wǎng)頁設(shè)計(jì)與制作課程作為計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)的一門核心課，在實(shí)際教學(xué)的過程中存在教學(xué)內(nèi)容陳舊、學(xué)習(xí)枯燥乏味、與行業(yè)企業(yè)實(shí)際脫軌等問題，本次任務(wù)在運(yùn)用BOPPPS模式進(jìn)行課堂教學(xué)實(shí)施過程中，通過BOPPPS 模式在“CSS樣式精準(zhǔn)還原UI設(shè)計(jì)”教學(xué)中的實(shí)踐應(yīng)用，加強(qiáng)了師生和生生之間的互動(dòng)[5]，培養(yǎng)了學(xué)生主動(dòng)分析問題和解決問題的能力，提升了學(xué)生學(xué)習(xí)活動(dòng)參與度，激發(fā)了學(xué)生學(xué)習(xí)興趣，提高了學(xué)習(xí)目標(biāo)的達(dá)成度，為培養(yǎng)新時(shí)代高素質(zhì)的網(wǎng)頁前端工程師打下了堅(jiān)實(shí)的基礎(chǔ)，提供了可靠的保障。

當(dāng)然也存在不足的地方，比如：參與學(xué)習(xí)活動(dòng)的方式可以更加豐富多彩，應(yīng)該盡可能地結(jié)合課程所對(duì)應(yīng)的崗位來設(shè)置參與式的學(xué)習(xí)活動(dòng)，以此來提高學(xué)生的學(xué)習(xí)興趣，促進(jìn)學(xué)生綜合職業(yè)能力的提升。