基于OBE理念《HTML5+CSS3網(wǎng)頁設(shè)計》課程教學(xué)改革探析

(長江工程職業(yè)技術(shù)學(xué)院，武漢 430212)

隨著互聯(lián)網(wǎng)信息技術(shù)的廣泛應(yīng)用和發(fā)展，Internet已改變?nèi)藗兊墓ぷ骱蜕罘绞?，成為人們獲得資訊和信息交流的重要渠道?；ヂ?lián)網(wǎng)技術(shù)的發(fā)展和普及，促使Web前端網(wǎng)頁設(shè)計人才供不應(yīng)求，Web前端開發(fā)工程師已成為具有發(fā)展?jié)摿η疑鐣枨罅看蟮木o缺人才。

《HTML5+CSS3網(wǎng)頁設(shè)計》是一門培養(yǎng)學(xué)生網(wǎng)站前端開發(fā)能力必修的專業(yè)技能支撐課程，是學(xué)生具備B/S架構(gòu)項目開發(fā)能力的基礎(chǔ)課程之一。傳統(tǒng)教育教學(xué)模式中，該課程通常采取教學(xué)設(shè)計為課程導(dǎo)向的正向設(shè)計，即學(xué)生學(xué)完本課程后，被動的“適應(yīng)”社會及企業(yè)等的外部需求，無法實現(xiàn)職業(yè)崗位零距離對接。成果導(dǎo)向是逆向思維過程，采用反向設(shè)計來進(jìn)行教學(xué)設(shè)計，采用正向方式進(jìn)行實施，充分保證了教育目標(biāo)、教育成果的高度一致[1]。筆者試將OBE教育理念應(yīng)用于《HTML5+CSS3網(wǎng)頁設(shè)計》課程教學(xué)中，探索適合培養(yǎng)高職院校計算機(jī)應(yīng)用技術(shù)專業(yè)學(xué)生的教學(xué)模式和評價體系。

1 OBE教學(xué)理念

OBE(Outcome-based Education)教學(xué)理念是由美國學(xué)者斯派帝(Spady W.D)于20世紀(jì)80年代提出的。OBE教學(xué)理念教學(xué)設(shè)計、教學(xué)實施的目標(biāo)是學(xué)生最后所獲得的學(xué)習(xí)成果，以最終學(xué)習(xí)成果反向設(shè)計課程體系的教育方法，先明確學(xué)生預(yù)期學(xué)習(xí)成果，反向進(jìn)行設(shè)計教學(xué)環(huán)節(jié)，構(gòu)建課程體系，確定教學(xué)的策略，組織教學(xué)活動，多元、梯次評價結(jié)果不斷持續(xù)改進(jìn)教學(xué)，幫助學(xué)生獲得預(yù)期學(xué)習(xí)成果[2]。OBE理念作為以結(jié)果為前提，依據(jù)當(dāng)前教育方針，結(jié)合學(xué)生學(xué)情，為學(xué)生提出十分明確學(xué)習(xí)目標(biāo)，通過不懈努力，實現(xiàn)最終的教學(xué)目標(biāo)。落實OBE理念進(jìn)行教學(xué)過程中，首先，需要根據(jù)企業(yè)崗位需求正確認(rèn)知教育工作的最終結(jié)果，然后在這個基礎(chǔ)上反向進(jìn)行教學(xué)設(shè)計與組織，打破傳統(tǒng)以教師為主的單向理論課堂傳輸模式，將真實案例引入課堂，模擬企業(yè)場景，采用多種教學(xué)方法與策略，調(diào)動學(xué)生學(xué)習(xí)熱情，使其主動地參與到教學(xué)活動中來，培養(yǎng)學(xué)生適應(yīng)未來工作崗位實踐能力，從而達(dá)到最終學(xué)習(xí)目標(biāo)，進(jìn)而提升教育教學(xué)的質(zhì)量。

2 《HTML5+CSS3網(wǎng)頁設(shè)計》課程教學(xué)現(xiàn)狀

《HTML5+CSS3網(wǎng)頁設(shè)計》是高職院校計算機(jī)大類開設(shè)的一門專業(yè)基礎(chǔ)課程，在教學(xué)實踐過程中，發(fā)現(xiàn)存在著如下現(xiàn)象。

2.1 教學(xué)對象

學(xué)生計算機(jī)基礎(chǔ)較薄弱，學(xué)習(xí)興趣差異對比明顯，缺乏學(xué)習(xí)主動性，一般不加思考疲于應(yīng)付地將老師提供的代碼從上到下錄入一遍，接受相關(guān)知識與技能比較被動，運行出現(xiàn)bug不知如何解決，對知識理解的深度不足。教學(xué)案例代碼數(shù)量普遍比較多，為了能夠讓學(xué)生在有限時間里多學(xué)技能，教學(xué)中教師采取程序式的方式讓學(xué)生寫代碼，從而導(dǎo)致學(xué)生不能夠從多角度、多層次理解問題，知識不能內(nèi)化，很多學(xué)生雖然學(xué)習(xí)了課程，但很難設(shè)計出讓別人甚至讓自己滿意的作品，不能夠充分表達(dá)并展示將個人的想法，獨立解決問題的能力弱，網(wǎng)頁開發(fā)過程中缺乏想象力和創(chuàng)造力。

2.2 教學(xué)方法

基本均采用案例驅(qū)動教學(xué)法，課堂上教師通過案例講解使學(xué)生充分掌握相關(guān)的理論知識點，但是，傳統(tǒng)的案例教學(xué)方法以教師教學(xué)為主，學(xué)生被動聆聽；同時，每節(jié)課時間有限，進(jìn)行分級-分層項目化教學(xué)有一定困難，知識點沒法具體化，很難融合到大的項目中進(jìn)行教學(xué)，沒有真正做到工學(xué)結(jié)合，與現(xiàn)實應(yīng)用脫節(jié)，無法滿足就業(yè)的要求，無法靈活運用所學(xué)理論知識解決實際工作問題，使模式多流于形式[3]。

2.3 教材

通過對比對近三年出版的《HTML5+CSS3網(wǎng)頁設(shè)計》教材研究發(fā)現(xiàn)，主要有兩種類型：①理論知識點傳統(tǒng)型，以講解理論知識點為主，圍繞相應(yīng)知識點，設(shè)計少量案例，通過案例的應(yīng)用說明知識點的含義及用法。這類教材主要側(cè)重講解理論知識，沒有結(jié)合實際項目，實踐操作性不強(qiáng)；②項目開發(fā)類型，此類教材通過實用性案例開發(fā)講解知識點，設(shè)計新穎，但選取的案例相對獨立，與真實完整網(wǎng)頁項目開發(fā)有偏差，學(xué)生難以系統(tǒng)掌握網(wǎng)頁項目開發(fā)的工作流程和方法[4]。

2.4 教學(xué)考核與評價

教學(xué)考核與評價單一，缺乏形成性評價，老師布置的學(xué)習(xí)任務(wù)學(xué)生是否及時、獨立、高效完成，缺乏相應(yīng)的評判準(zhǔn)則?，F(xiàn)有教學(xué)成績評定按權(quán)重由平時成績(20%)+實驗成績(20%)+考試成績(60%)組成，雖然教師上課過程中對學(xué)生的平時成績與實驗成績都有記錄和考察，但最后在實際成績評定過程中，仍以期末上機(jī)統(tǒng)一閉卷考試作為考試成績，考試試卷統(tǒng)一，評價標(biāo)準(zhǔn)統(tǒng)一，側(cè)重于橫向比較，學(xué)生往往臨時抱佛腳死記硬背知識點應(yīng)付考試，不利于綜合素質(zhì)培養(yǎng)。

3 基于OBE理念《HTML5+CSS3網(wǎng)頁設(shè)計》教學(xué)改革

在OBE教學(xué)模式的理論指導(dǎo)下，以產(chǎn)出為導(dǎo)向，結(jié)合《HTML5+CSS3網(wǎng)頁設(shè)計》教學(xué)學(xué)情，對授課內(nèi)容進(jìn)一步優(yōu)化，改進(jìn)教學(xué)模式，構(gòu)建網(wǎng)絡(luò)教學(xué)資源庫和新形態(tài)教材，改革評價反饋機(jī)制，創(chuàng)新人才培養(yǎng)模式，提高教學(xué)質(zhì)量。

3.1 以崗位職業(yè)能力為導(dǎo)向，完善課程體系建設(shè)

在OBE教學(xué)模式的理論指導(dǎo)下，以產(chǎn)出為導(dǎo)向，結(jié)合Web前端開發(fā)工程師的崗位需求與工作過程為導(dǎo)向，打破了傳統(tǒng)的學(xué)科體系的模式，以教學(xué)內(nèi)容改革為核心，通過學(xué)生有體驗感的實際案例項目(如網(wǎng)易、小米等)為載體導(dǎo)入課堂引導(dǎo)進(jìn)行教學(xué)，通過情境設(shè)計、教學(xué)設(shè)計、編寫學(xué)習(xí)任務(wù)書、教學(xué)資源開發(fā)等環(huán)節(jié)進(jìn)行課程內(nèi)容的開發(fā)，培養(yǎng)學(xué)生熟練掌握“DIV+CSS3網(wǎng)頁布局設(shè)計”的能力，能熟練運用HTML5、CSS3進(jìn)行網(wǎng)站前端開發(fā)，熟悉Web國際標(biāo)準(zhǔn)，確保教學(xué)內(nèi)容設(shè)計合理，具有實用性和前瞻性，培養(yǎng)學(xué)生掌握Web前端分析、設(shè)計、布局、測試的職業(yè)能力，同時，培養(yǎng)學(xué)生具備自我學(xué)習(xí)、溝通交流、團(tuán)隊協(xié)作等綜合職業(yè)素養(yǎng)。

3.2 采用“三化”課程教學(xué)方法，培養(yǎng)學(xué)生實踐能力和創(chuàng)新精神

(1)翻轉(zhuǎn)課堂信息化

改變傳統(tǒng)教師“講授”知識的課堂教學(xué)模式，采用“學(xué)習(xí)通”信息化教學(xué)平臺進(jìn)行翻轉(zhuǎn)課堂教學(xué)。教師通過學(xué)習(xí)通教學(xué)平臺，將課程教學(xué)課件、PPT、題庫、視頻、拓展學(xué)習(xí)資料等資源提供給學(xué)生，根據(jù)教學(xué)進(jìn)展，開放學(xué)習(xí)節(jié)點，學(xué)生課前進(jìn)行預(yù)習(xí)，在線完成學(xué)習(xí)任務(wù)。課堂上，教師將理論與案例結(jié)合，引導(dǎo)學(xué)生思考，通過案例演示方式循序漸進(jìn)講授知識重、難點，根據(jù)學(xué)生提出的疑問，通過小組討論創(chuàng)設(shè)自由學(xué)習(xí)氣氛的頭腦風(fēng)暴式教學(xué)，培養(yǎng)啟發(fā)學(xué)生從多個角度去思考問題、解決問題能力。

(2)真實案例項目驅(qū)動化

OBE理念以學(xué)生預(yù)期達(dá)成的最終學(xué)習(xí)成果為導(dǎo)向，在實際教學(xué)過程中，選用貼近學(xué)生的真實案例分析知識點，對教學(xué)內(nèi)容進(jìn)行重構(gòu)與設(shè)計，通過模擬制作真實網(wǎng)頁頁面，以此激發(fā)學(xué)生的學(xué)習(xí)興趣，增強(qiáng)自信心，提高學(xué)生解決實際問題的能力，從而“零距離”無縫對接前端開發(fā)工程師崗位。教學(xué)實踐中，基于OBE理念對CSS盒子模型教學(xué)內(nèi)容進(jìn)行了重構(gòu)與設(shè)計。

①以“成果為導(dǎo)向”，筆者選取網(wǎng)易門戶網(wǎng)站實時體育新聞為素材進(jìn)行教學(xué)設(shè)計，以“制作網(wǎng)易體育新聞列表”案例開展教學(xué)，任務(wù)效果如圖1所示。CSS盒子模型是網(wǎng)頁布局的基礎(chǔ)，是《HTML5+CSS3網(wǎng)頁設(shè)計》課程教學(xué)重點，只有理解了盒子模型的概念，掌握盒子模型相關(guān)屬性，才能更好地在網(wǎng)頁中對各元素進(jìn)行布局，呈現(xiàn)完美設(shè)計效果。為幫助學(xué)生理解、掌握盒子模型知識點，通過查看網(wǎng)易源代碼方式，讓學(xué)生理解盒子模型網(wǎng)頁布局概念。

圖1 “制作網(wǎng)易體育新聞列表”效果圖

②以“學(xué)生為中心”進(jìn)行分組討論，如何利用CSS盒子模型對網(wǎng)頁進(jìn)行排版，引出教學(xué)內(nèi)容盒子模型結(jié)構(gòu)：內(nèi)容content、內(nèi)邊距padding、邊框border和外邊距margin，盒子模型結(jié)構(gòu)如圖2所示。為幫助學(xué)生理解，選用生活中常見的手機(jī)包裝盒為教具，直觀演示盒子模型結(jié)構(gòu)，然后，教師通過學(xué)習(xí)通flash動畫、PPT方式對“CSS盒子模型”的概念、特點、屬性進(jìn)行講解。

圖2 盒子模型結(jié)構(gòu)

教師通過極域教師端屏幕廣播教學(xué)，在HBuilder軟件中使用CSS盒子模型控制網(wǎng)頁中的元素，進(jìn)行“制作網(wǎng)易體育新聞列表”案例演示。部分樣式源代碼如下：

學(xué)生上機(jī)實操，教師巡回點對點指導(dǎo)，調(diào)試錯誤程序代碼，對共性問題通過屏幕廣播進(jìn)行演示操作，答疑解惑。

③持續(xù)改進(jìn)。通過學(xué)習(xí)通教學(xué)課程評價、QQ或微信二維碼課程信息反饋收集表、學(xué)生學(xué)情座談等方式，了解學(xué)生知識掌握情況，對存在問題進(jìn)行教學(xué)反思，修改教學(xué)內(nèi)容設(shè)計，改進(jìn)教學(xué)手段和方法，提高教學(xué)質(zhì)量。

(3)團(tuán)隊協(xié)作化

具有良好的溝通和團(tuán)隊協(xié)作能力是Web前端工程師必備素養(yǎng)，通過模擬企業(yè)團(tuán)隊開發(fā)模式，培養(yǎng)學(xué)生團(tuán)隊協(xié)作精神。學(xué)生自我評估，根據(jù)個人能力自行組成團(tuán)隊進(jìn)行學(xué)習(xí)與項目實訓(xùn)。在實訓(xùn)過程中，根據(jù)現(xiàn)實項目設(shè)計開放性作業(yè)和小項目實訓(xùn)，需要小組成員進(jìn)行團(tuán)結(jié)協(xié)作，小組長根據(jù)每個成員的特點分配項目任務(wù)，各小組成員收集、查閱資料，解決開發(fā)過程中出現(xiàn)的實際問題，制作完成不同頁面及文檔，從而配合完成整個實訓(xùn)項目任務(wù)。通過團(tuán)隊協(xié)作化的教學(xué)方法，學(xué)生的自主學(xué)習(xí)能力得以提升，培養(yǎng)了良好的團(tuán)隊合作精神，極大地提高了學(xué)生參與度與學(xué)習(xí)興趣。

3.3 構(gòu)建網(wǎng)絡(luò)教學(xué)資源庫和新形態(tài)教材

(1)持續(xù)化建設(shè)課程資源

本課程自開設(shè)以來，不斷建設(shè)和完善課程資源，資源包括課程介紹、課程標(biāo)準(zhǔn)、師資隊伍、教學(xué)大綱、實訓(xùn)大綱、授課計劃、教學(xué)進(jìn)度、作業(yè)、課件、考試大綱、參考素材、學(xué)生作品等，按照工學(xué)結(jié)合的理念更新課程教學(xué)體系，解決傳統(tǒng)理論課程與就業(yè)崗位對接問題。

(2)案例驅(qū)動式教學(xué)，構(gòu)建教學(xué)單元資源

教學(xué)過程按照案例驅(qū)動式教學(xué)，實現(xiàn)“理實一體”“教學(xué)做合一”的教學(xué)模式，每一個教學(xué)單元分為教學(xué)設(shè)計、任務(wù)單、重難點、演示文稿、教學(xué)視頻、電子教案、考核評價、必備知識、作業(yè)習(xí)題、學(xué)習(xí)指南等多個子類，便于學(xué)生課后復(fù)習(xí)。

(3)豐富的素材和軟件

為方便學(xué)生課后學(xué)習(xí)和提高，建立豐富的素材資源庫，共享好用的應(yīng)用軟件，拓展學(xué)生掌握一些課堂上不講授的技能，制作出更專業(yè)的網(wǎng)頁效果。

(4)體現(xiàn)職業(yè)教育特色的高職高專新形態(tài)教材

基于OBE理念，針對高等職業(yè)教育教學(xué)的特點，開發(fā)具有鮮明高職特色高水平的示范性教材，采用真實項目編寫教材，以項目為中心組織教材內(nèi)容即教學(xué)內(nèi)容按照“總體項目—分解任務(wù)—實踐知識—理論知識—一般抽象理論—拓展知識—練習(xí)與實訓(xùn)”的模式展開，以真實項目案例教學(xué)為載體，通過實際案例的制作過程講解和實踐體驗，幫助學(xué)生理解和掌握相關(guān)知識點。

3.4 以職業(yè)院校教學(xué)工作診斷與改進(jìn)為契機(jī)，改革評價反饋機(jī)制

新形勢下，推進(jìn)職業(yè)院校教學(xué)工作診斷與改進(jìn)是提升職業(yè)院校人才培養(yǎng)質(zhì)量的重要舉措。落實診改工作常態(tài)化，提高Web前端開發(fā)工程師人才培養(yǎng)質(zhì)量，基于成果導(dǎo)向理念，對《HTML5+CSS3網(wǎng)頁設(shè)計》課程教學(xué)效果評價反饋機(jī)制進(jìn)行改革十分必要。依據(jù)教學(xué)工作診斷與改進(jìn)平臺數(shù)據(jù)分析掌握學(xué)生學(xué)習(xí)狀態(tài)，《HTML5+CSS3網(wǎng)頁設(shè)計》課程采取形成性評價與終結(jié)性評價相結(jié)合的多元化考核方式，詳見表1，強(qiáng)調(diào)對學(xué)習(xí)過程、學(xué)習(xí)結(jié)果評價。

表1 《HTML5+CSS3網(wǎng)頁設(shè)計》課程考核形式與內(nèi)容

具體教學(xué)過程中，可以采用小組項目匯報方式，各小組推選一名同學(xué)組成評審小組，以學(xué)生為主導(dǎo)對項目進(jìn)行提問、評價，教師進(jìn)行知識歸納、拓展，實現(xiàn)“學(xué)生+教師”相結(jié)合評價機(jī)制。同時，教師可以制作QQ或微信二維碼調(diào)查問卷、教學(xué)信息反饋座談會等方式傾聽學(xué)生的心聲和建議，及時調(diào)整教學(xué)設(shè)計與考核方式，不斷總結(jié)，積累經(jīng)驗，做到持續(xù)改善。

3.5 加強(qiáng)校企合作，創(chuàng)新人才培養(yǎng)模式

基于OBE理念，創(chuàng)新人才培養(yǎng)模式，加強(qiáng)與地方企業(yè)、龍頭企業(yè)聯(lián)系，與企業(yè)建立教學(xué)合作，開展定單式教學(xué)，成立校外教學(xué)實訓(xùn)基地，誠邀企業(yè)具有扎實理論水平和豐富實踐經(jīng)驗的工程師擔(dān)任專業(yè)的教學(xué)顧問和兼職教師，深度參與本課程的建設(shè)，收集課程資源，開展課程教學(xué)；鼓勵教師承擔(dān)企業(yè)的培訓(xùn)項目和實際開發(fā)項目，開展橫向項目研究，服務(wù)地方經(jīng)濟(jì)，緊跟新技術(shù)的發(fā)展，與企業(yè)工程師互通有無，相互學(xué)習(xí)。通過校企合作共同育人模式，師生接觸到網(wǎng)頁開發(fā)真實案例，切實了解信息技術(shù)行業(yè)對人才的需求，避免出現(xiàn)人才培養(yǎng)與社會需求脫節(jié)現(xiàn)象，培養(yǎng)適應(yīng)市場的Web前端開發(fā)高質(zhì)量應(yīng)用人才。

4 實踐效果

OBE教學(xué)模式的理論指導(dǎo)，以產(chǎn)出為導(dǎo)向，應(yīng)將知識、能力、素質(zhì)等多方面的學(xué)習(xí)產(chǎn)出進(jìn)行綜合評價，注重學(xué)生學(xué)習(xí)態(tài)度、學(xué)習(xí)過程等形成性評價，強(qiáng)調(diào)學(xué)習(xí)過程的重要性，同時，學(xué)生根據(jù)個人自身專長，按5-6人組成小組，隨著課程不斷深入的學(xué)習(xí)，確定期末綜合項目主題，要求每名學(xué)生獨立完成一個頁面，并使用外部樣式表實現(xiàn)相應(yīng)布局和特效，最后一節(jié)課進(jìn)行小組項目PPT匯報，評審小組通過對頁面的整體布局、功能、特效等多方面進(jìn)行提問與評價，教師點評、歸納、總結(jié)，將知識進(jìn)行拓展。通過筆者所在學(xué)校多個教學(xué)班級的實踐，學(xué)生不僅靈活掌握了《HTML5+CSS3網(wǎng)頁設(shè)計》的理論知識，而且學(xué)生在制作ppt、講解內(nèi)容、團(tuán)結(jié)協(xié)作等各方面能力得到鍛煉，綜合能力得到提升。

5 結(jié) 語

采用OBE理念對《HTML5+CSS3網(wǎng)頁設(shè)計》進(jìn)行課程教學(xué)質(zhì)量改革，以學(xué)生最終學(xué)習(xí)成果為目標(biāo)，分析教學(xué)現(xiàn)狀，優(yōu)化構(gòu)建課程體系，改革教學(xué)策略與方法，創(chuàng)新課程評價方式，培養(yǎng)學(xué)生適應(yīng)未來工作崗位的能力。學(xué)生反映在這門課程的學(xué)習(xí)中不僅深入理解了《HTML5+CSS3網(wǎng)頁設(shè)計》的基本知識，還鍛煉了制作ppt、獨立講解及團(tuán)隊協(xié)作的綜合素養(yǎng)。經(jīng)過教學(xué)改革與實踐，本課程基本取得了預(yù)期的教學(xué)成果，具有一定的示范作用。