唐斐琳

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

中圖分類號：G42 文獻標(biāo)識碼：A

文章編號：1009-3044（2023）12-0149-03

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

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

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

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

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

網(wǎng)頁設(shè)計與制作課程為高職二年級階段的學(xué)習(xí)科目，通過學(xué)情分析，學(xué)生普遍英語能力較弱，詞匯量儲備不足，面對不斷出現(xiàn)的復(fù)雜代碼容易忘記其指代含義。一半的學(xué)生在編寫HTML代碼時容易出錯，易漏掉字符，導(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)中一般都使用比較先進的sublime text3 編輯器、Hbuiderx編輯器，而部分職業(yè)院校內(nèi)老師還是根據(jù)教材內(nèi)容，繼續(xù)使用dreamweaver這一工具軟件進行教學(xué)，通過插入圖片的方式進行學(xué)習(xí)，缺乏新技術(shù)、新規(guī)范、新工藝帶來的欣喜感，學(xué)生學(xué)習(xí)興趣度不高。

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

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

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

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

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

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

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

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

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

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

1） 導(dǎo)入

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

2） 目標(biāo)

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

3） 知識前測

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

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

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

5） 后測

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

6） 總結(jié)

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

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

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

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

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

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

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

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

5 結(jié)束語

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

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