基于OBE 理念《Web 前端開發》課程教學改革

靳曉飛

河南工學院，河南 新鄉 453003

一、《Web 前端開發》課程的現狀

隨著國家對“新工科”和“雙萬計劃”建設持續推進和互聯網新技術的不斷發展以及移動終端設備的普及，各種Web 應用應運而生并呈爆發式增長，為前端開發者提供大量就業崗位，Web前端開發工程師已經成為具有發展潛力且社會需求量大的緊缺人才。Web 前端包含的知識點較多有各種標簽和屬性以及屬性值，內容龐雜而且零碎。這就要求在教學過程中，不能再像以往那樣照本宣科、灌輸式教學，應該采用OBE 教學理念，以學生為中心，以學習成果為導向，采用任務項目驅動的教學方法，將知識點融入到教學項目案例中，幫助學生完成課程知識的建構。

《Web 前端開發》課程是一門內容豐富，綜合性、實踐性比較強，提升學生網站前端開發設計能力必修的專業課程，是與實際工作崗位聯系密切且實踐性較強的課程，也是學生掌握B/S（Browser 瀏覽器/Server 服務器模式）架構模式項目開發能力的必修課程之一。在傳統教學模式中，通常以教師為中心，通過教學設計來進行教學實施，學生被動接受課程知識。這就容易出現以下問題：

（一）大部分學生對知識理解的深度不夠，經常不深入思考問題解決的方法，缺乏一個自主加工吸收知識的過程。

（二）課堂教學內容大部由代碼構成，代碼量普遍較大，為了讓學生掌握更多的技能，學生課程練習和作業程式化的填充代碼，編寫代碼流于形式，課程結束后無法對所學知識靈活運用。

（三）學習監督機制缺失。通常教師布置的學習任務，能否及時完成、是否獨立完成、完成的效果如何，沒有規范的評判標準。

（四）被動接受式學習，不利于學生的學習興趣的培養。

（五）學生課程達到的職業技能和素養，無法實現企業的需求和實現職業崗位零距離對接。

為了能夠提升教學質量，基于OBE（Outcomes-based Education，縮寫為OBE）強調課程中的任何教育教學行為，都要依據學生需要最終達成的學習效果進行課程設計和教學實施，采用OBE教學理念以成果導向，根據學生需達到的預期成果，進行逆向課程設計，只有這樣才能充分保證課程的教學目標與教育成果的一致，提升教學效果和質量。

二、基于OBE 教學理念課程的教學改革

（一）基于OBE 的教育模式

OBE 教學理念是由美國學者斯派帝于20 世紀80 年代提出的。其內涵可用“學生中心”“產出導向”“持續改進”十二字來進行概括，關注學習成果，整個課程的教學過程始終圍繞學習成果進行開展實施［1］。

（二）教學目標

依據學校本科數字媒體專業人才培養目標要求和企業web 前段崗位對人才素質的要求，確定合適教學總目標。OBE 教學理念以教學結果為導向要求目標的制定可以由公司企業、學校教師和學生共同討論研究提出，全方面結合學校的辦學定位、行業需求以及用人要求等因素，必須要有概括性、探究性，具有一定的引領性、創新性，體現Web 前端學科特色和教學的鮮明特征。

（三）教學對象

大學生Web 基礎較薄弱，學習興趣差異也非常明顯，接受知識與技能很被動，缺乏學習主動性，對于教師教學過程中提供的代碼一般機械地從上到下錄入一遍，調試網頁運行時，出現問題時不能多角度、多層次理解問題，獨立思考去解決問題的能力比較弱，不主動去尋找解決問題的方法，對知識理解的深度不足。

OBE 理念要求“以學生為中心”要求由教師教轉向關注學生學，教學過程中注重師生的互動交流，設計交互性強的教學方法，以案例任務驅動法，引導學生自主發現問題，培養學生團隊協助能力；通過學習通平臺對學生分組，分組采用隨機為主，使不同性格、不同技術特點的學生組隊合作完成項目任務，探究學習課程。注重學生創新能力、創新思想、發散思維的培養。

（四）教學方法

“施教之功，貴在引路，妙在開竅”，OBE 是以學習產出驅動整個課程活動，［2］結合《Web 前端開發》教學學情，對教學方法進行優化：

1.采用翻轉課堂教學方法

改變傳統的講授法課堂教學模式，采用“學習通”教學平臺進行翻轉課堂教學。在學習通平臺上傳教學課件、視頻、題庫、學習資料等資源提供給學生，讓學生成為課堂學習的主人，學生上課前進行課程知識預習，在線完成學習任務，課程實施過程中讓學生講解并分享知識技能，鍛煉學生的自主學習能力，溝通表達能力、獨立解決問題的能力。

2.案例項目驅動法

OBE 理念以學生預期達成的最終學習成果為導向，在教學過程中采用真實的案例項目驅動學生通過案例分析知識點，教師概括知識點對教學內容進行重構與設計使知識結構系統化。通過模擬完成案例項目，產生成就感以此激發學生對web 前端知識產生學習興趣，從而建立自信心，提高學生解決實際問題的能力。

3.線上線下混合式教學法

線下課堂+虛擬的線上課堂，線下課堂教師和學生在教室中面對面交流有助于線上學習任務完成情況進行指導和評價，對學生學習效果提出建設性意見，又可以進行啟發式教學、引導學生對Web 前端知識技能進一步深入理解融會貫通。此外，成長于互聯網時代的大學生，非常熟悉網絡學習的環境，線上的學習可以讓線下課堂學習效果得到延伸。學習通平臺中的教案、視頻、課件、測試練習、作業等學習資源可以讓學生充分利用課下瑣碎時間片段進行延伸學習［3］。

（五）教學內容

Web 前端開發技術有三大技術支撐分別是HTML 知識技能、CSS 知識技能、Javascript 知識技能。被喻為前端的框架內容、裝飾樣式和交互靈魂。

“框架內容”是HTML，中文的意思是超文本標記語言，HTML 內容的學習最主要的是HTML文件的基本結構和HTML5 基本標記的學習，例如標題h1 ～h6、段落p、列表ul ～li、區塊div、圖片img、字體font 等，以及每個標簽的屬性和應用。

“裝飾樣式”是CSS。CSS 在網頁設計中稱為層疊樣式表，主要的功能是用來美化頁面，使網站頁面變得美觀吸引瀏覽者去看。在網頁排版時還要掌握DIV 寬高設置、浮動樣式以及內容顯示屬性等，是網頁樣式美化的重要技術。

“交互靈魂”是Javascript。它是Web 頁面開發設計中的高級腳本語言，在網頁設計中被廣泛用于Web 應用開發中，例如在網頁頁面中添加不同樣式的動態效果和交互功能，為瀏覽者展示出更加美觀功能良好的網頁效果。同時讓網頁設計中的頁面變得活潑靈活。

課程教學內容可設計為兩大模塊。

1.WEB 基礎知識模塊：Web 前端開發需要學習的基礎知識，包括HTML、CSS、JavaScript以及前端Bootstrap 框架等內容。

2.高級應用開發能力模塊：掌握常見的Web前端開發框架/庫，熟悉AngularJS、jQuery、React等常用類庫的使用，掌握Vue.js、Bootstrap 框架技術的運用［4］。

基于“興趣→理解→實踐→應用”的能力培養過程，“產出導向”教學過程圍繞學習成果進行，根據崗位需要設計教學內容：掌握HTML5、CSS3、JavaScript、Ajax、JQuery 核心知識，掌握響應式布局框架、Vue、JS、Bootstrap、Angular等框架技術，熟悉服務器運行環境的搭建等。

優化和建設豐富課程資源，要充分利用好互聯網與新媒體平臺，依托學習通平臺完善課程資源建設，資源包括Web 前端課程內容說明、PPT課件、教學大綱、課程標準、教學日志、實驗報告、任務單、學生作品、學習網站等。

（六）課程實施

為有效使學生獲得這些學習成果，結合學生特點和知識結構建立新教學體系。

1 個任務項目，以開發一個網站為學習任務項目，項目流程：①確定開發網站主題②收集相關建站素材③網頁框架結構設計④網頁內容設計與制作⑤網頁美化與樣式設計⑥網頁交互內容設計⑦網站測試發布。通過1 個任務項目構建整個Web 知識學習的框架體系。課程知識融匯于任務項目中，通過完成對應的任務點，系統掌握知識以及如何運用。

2 個學習課堂，即線下與線上課堂相結合。

3 個教學內容模塊，分別是：基礎知識模塊、實踐技能模塊、應用提高模塊，以自主、合作、探究的學習方式分層次、分梯度完成知識的掌握。

在實驗上機過程中，教師通過極域教學客戶端屏幕廣播教學，讓學生演示在Dreamwear 軟件中編寫HTML 網頁文檔，教師輔助進行講解常見的HTML 元素和應用。在上機實驗課堂上，將項目任務分析的方法和項目制作過程分步驟講解給學生。在演示過程中滲透開發思想。例如，在講到網頁樣式時，使用DIV+CSS 盒子模型來設計并控制網頁中的元素布局，讓學生舉一反三靈活掌握代碼的應用技巧，用不同的代碼編寫方式達到同樣的效果，進行“制作河南工學院新聞列表”案例演示。

網站制作設計的過程中，要求整體把握所要制作網站的主題，內容的選擇，網站風格，用戶群體分析、布局結構樣式、網站配色風格、版面設計等因素。

依據OBE 理念：采用“真實項目+任務案例+知識點”相結合的教學方式，在教學過程中改進教學方法案例化、實驗作業項目化、作業測試平臺化、討論答疑線上化、課程成果網站化。［5］

（七）課程考核與評價

河南工學院的《Web 前端開發技術》課程，依托學習通平臺建設了系統的線上線下相結合課程，Web 前端開發技術的教學上機實驗環節共設置了4 個實驗，學期末以大作業的形式進行考核。

《Web 前端開發》課程的考核與評價強調學習過程、學習結果的評價，注重過程性評價。例如，在課堂教學中對于教學內容的收獲和掌握可以采用小組項目答辯的形式。考核與評價主要由過程性評價50% 和終結性評價50% 組成：

1.過程性評價占比50%，包括任務點知識學習占20%，平時出勤和學習態度占10%，課堂實驗任務占20%，前端拓展技能占10%。

2.終結性評價占比50%，包括創新能力占10%，項目實踐大作業占40%。

該考核與評價體系已在河南工學院計算機學院8 個班級的課程的中實施，并且達到了預期效果。

三、結語

Web 前端開發工程師就業前景很廣，Web 前端開發的就業方向可以是網頁設計制作、網站建設開發、移動端APP 開發、軟件程序開發、微信小程序開發。同時也是綜合性人才，在工作中要有較強的溝通表達能力，要與視覺設計師溝通，又要與Web 后端設計師溝通，要求必備的知識技能很廣泛。因而，需要對《Web 前端開發》課程進行改革來滿足人才培養的要求。

《Web 前端開發》課程在OBE 理念下創新性地開展教學改革，通過教學實踐證明，采用新的教學理念和教學方法后，真實有效地提升了學生的實踐能力、創新能力、團隊合作能力以及自主學習能力，全面提高了學生培養質量。《Web 前端開發》課程的教學改革，從課程的教學方法、教學內容、實施過程、評價考核等多個方面做出探索與創新。此次教學改革只是拋磚引玉，不是教學改革的最終點，需要教師在教學改革中不斷進行改進和完善，有效提高學生的職業素養和就業信心，達到了預期的成果目標。