基于OBE理念《HTML5+CSS3網頁設計》課程教學改革探析

(長江工程職業技術學院，武漢 430212)

隨著互聯網信息技術的廣泛應用和發展，Internet已改變人們的工作和生活方式，成為人們獲得資訊和信息交流的重要渠道。互聯網技術的發展和普及，促使Web前端網頁設計人才供不應求，Web前端開發工程師已成為具有發展潛力且社會需求量大的緊缺人才。

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

1 OBE教學理念

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

2 《HTML5+CSS3網頁設計》課程教學現狀

《HTML5+CSS3網頁設計》是高職院校計算機大類開設的一門專業基礎課程，在教學實踐過程中，發現存在著如下現象。

2.1 教學對象

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

2.2 教學方法

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

2.3 教材

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

2.4 教學考核與評價

教學考核與評價單一，缺乏形成性評價，老師布置的學習任務學生是否及時、獨立、高效完成，缺乏相應的評判準則。現有教學成績評定按權重由平時成績(20%)+實驗成績(20%)+考試成績(60%)組成，雖然教師上課過程中對學生的平時成績與實驗成績都有記錄和考察，但最后在實際成績評定過程中，仍以期末上機統一閉卷考試作為考試成績，考試試卷統一，評價標準統一，側重于橫向比較，學生往往臨時抱佛腳死記硬背知識點應付考試，不利于綜合素質培養。

3 基于OBE理念《HTML5+CSS3網頁設計》教學改革

在OBE教學模式的理論指導下，以產出為導向，結合《HTML5+CSS3網頁設計》教學學情，對授課內容進一步優化，改進教學模式，構建網絡教學資源庫和新形態教材，改革評價反饋機制，創新人才培養模式，提高教學質量。

3.1 以崗位職業能力為導向，完善課程體系建設

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

3.2 采用“三化”課程教學方法，培養學生實踐能力和創新精神

(1)翻轉課堂信息化

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

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

OBE理念以學生預期達成的最終學習成果為導向，在實際教學過程中，選用貼近學生的真實案例分析知識點，對教學內容進行重構與設計，通過模擬制作真實網頁頁面，以此激發學生的學習興趣，增強自信心，提高學生解決實際問題的能力，從而“零距離”無縫對接前端開發工程師崗位。教學實踐中，基于OBE理念對CSS盒子模型教學內容進行了重構與設計。

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

圖1 “制作網易體育新聞列表”效果圖

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

圖2 盒子模型結構

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

學生上機實操，教師巡回點對點指導，調試錯誤程序代碼，對共性問題通過屏幕廣播進行演示操作，答疑解惑。

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

(3)團隊協作化

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

3.3 構建網絡教學資源庫和新形態教材

(1)持續化建設課程資源

本課程自開設以來，不斷建設和完善課程資源，資源包括課程介紹、課程標準、師資隊伍、教學大綱、實訓大綱、授課計劃、教學進度、作業、課件、考試大綱、參考素材、學生作品等，按照工學結合的理念更新課程教學體系，解決傳統理論課程與就業崗位對接問題。

(2)案例驅動式教學，構建教學單元資源

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

(3)豐富的素材和軟件

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

(4)體現職業教育特色的高職高專新形態教材

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

3.4 以職業院校教學工作診斷與改進為契機，改革評價反饋機制

新形勢下，推進職業院校教學工作診斷與改進是提升職業院校人才培養質量的重要舉措。落實診改工作常態化，提高Web前端開發工程師人才培養質量，基于成果導向理念，對《HTML5+CSS3網頁設計》課程教學效果評價反饋機制進行改革十分必要。依據教學工作診斷與改進平臺數據分析掌握學生學習狀態，《HTML5+CSS3網頁設計》課程采取形成性評價與終結性評價相結合的多元化考核方式，詳見表1，強調對學習過程、學習結果評價。

表1 《HTML5+CSS3網頁設計》課程考核形式與內容

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

3.5 加強校企合作，創新人才培養模式

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

4 實踐效果

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

5 結 語

采用OBE理念對《HTML5+CSS3網頁設計》進行課程教學質量改革，以學生最終學習成果為目標，分析教學現狀，優化構建課程體系，改革教學策略與方法，創新課程評價方式，培養學生適應未來工作崗位的能力。學生反映在這門課程的學習中不僅深入理解了《HTML5+CSS3網頁設計》的基本知識，還鍛煉了制作ppt、獨立講解及團隊協作的綜合素養。經過教學改革與實踐，本課程基本取得了預期的教學成果，具有一定的示范作用。