基于工作過程導向的《HTML5 UI設計實訓》課程教學改革的探索與實踐

鄭 超 ，鄭 蕊 ，田美艷 ，林宗朝

（1廈門華天涉外職業技術學院 福建 廈門 361100）

（2廈門市同安職業技術學校 福建 廈門 361100）

1 引言

國務院出臺的《國務院關于加快發展現代職業教育的決定》一文中指出，建立以職業需求為導向、以實踐能力培養為重點、以工學結合培養專業技術人員的培養模式。推動課程內容與職業需求對接，教學過程與工作過程對接。在這種工學結合的教改理念的指引下，計算機專業的課程改革已然成為各高職院校積極探索與研究的重要課題之一。

2 課程教學存在的問題

目前，各高職院校該課程教學存在的問題如下：（1）偏局部輕整體。課程內容被分成幾大獨立的知識模塊，每個知識塊以獨立的案例進行實訓。學生完成其中的一個案例只能掌握獨立的知識點，并不能自主完成知識的擴展和衍生，以及理解知識塊之間的銜接和遞進。（2）忽略訓練職業崗位的工作過程。學生只掌握了其中的工作技能，并不了解該對應崗位的具體工作流程以及具體內容，進而培養出的學生無法滿足現階段計算機前端開發人才崗位的需求。

3 課程對應目標崗位分析

通過對國內大中城市的人才招聘信息進行分析，從數萬份招聘信息中篩選出了與高職院校《HTML5 UI設計實訓》課程相關的工作崗位有：web前端開發人員、HTML5前端開發工程師、HTML5/JS前端開發工程師等，將技能要求相似的崗位合并分析后，我們得到課程對應崗位所需要的2個技能目標。

（1）知識目標：學習和掌握作為一線前端UI設計師需要掌握的html5、CSS樣式、Javascript腳本等核心知識。

（2）能力目標：具備從最開始的客戶溝通，網站頁面布局剖析，到在瀏覽器中呈現界面布局，到最終完成交互功能實現完整站點，做前端設計師的能力。

4 課程教學模式改革思路

4.1 課程設計思路

《HTML5 UI技術實訓》該課程應該以職業崗位工作過程為主線，通過以上對課程對應目標崗位分析，再根據學生的學習規律發布教學案例，形成與工作過程相對應的課程及專題組合，包括內容和順序[1]。

該課程的主要任務是以培養一線前端UI設計師崗位為目標，根據高級HTML5編碼，中級CSS樣式設計，初級Javascript腳本、知識、能力要求為目標。因此設計該課程為一門基于工作過程的項目化課程，以工作項目為導向的任務驅動的教學方式，用以激發學生的學習積極性。

4.2 課程內容設計

《HTML5 UI技術實訓》課程的教學內容與其他傳統的學科課程相比具有鮮明的特點：課程的教學過程可以有較強的操作性和實踐性。在教學內容方面，設置以就業為導向，將學生以后畢業到相應行業就業可能遇到的問題，納入到教學內容中來，突出“學以致用”[2]。

為了適應網頁應用的變化，改革后的課程引入兼容不同設備及屏幕的響應式網頁開發內容[3]。課程內容的章節以模擬的實際項目的工作進度來劃分“布局分析─界面局部設計─樣式設計─交互性設計─匯總站點”，讓學生更好地體驗工作過程。

4.3 教學模式與方法設計

以職業崗位工作過程為主線，根據確定的學生已有知識狀態和學習特點，分析學生已有知識到目標之間應掌握的知識與技能，讓學生以團隊的形式合作完成相應的工作任務。

小組合作實施模擬項目工作，應用的基本過程是遵循著“以小組為單位接收教師發放的整套網站的psd原圖─以小組為單位進行布局分析─學生進行自主項目分工─模擬工作模式下制作網頁─以小組為單位驗收網站”的基本流程。

以教師為引導，學生為主體的模式，可以有效地調動學生的學習積極性和主動性，進而引導、吸引、集中、維持學生的注意力，做到知識有效遷移，學生通過任務引領實現對所學知識的構建。將教學內容與教學方法、教學手段相結合，同時還實施發現探究教學、自我教學單元、理論實踐一體化教學、小組協作型教學發等方法。

在教學過程中，教師相當于實際工作中的售前工程師，通過與客戶的溝通，確定了整個網站所需要的模塊數、模塊名稱以及各模塊所需要實現的功能。同時也是網頁設計師，提供設計圖稿并對最終瀏覽器呈現的效果進行把控，這個“最終呈現的效果”包括站點的LOGO、背景、字體大小、版面布局、瀏覽方式、交互性等諸多要素。現在很多設計類網站可供下載網站模板，教師可以利用網站資源，實戰教學。選取一組學生的知識儲備能夠駕馭的，頁面模塊完整的，網站的整體形象符合現代企業需求的網站設計圖稿作為案例樣稿及任務的目標模板。

學生是工作過程的主體，相當于H5前端設計師、web前端設計師等，將教師發布的案例樣稿組作為最終網站呈現的效果圖。學生被劃分為多個小組，以團隊的形式接收設計任務。首先以組長為代表作為前端設計師與老師溝通，并通過查看樣稿，了解任務要求以及應該做的哪些知識的準備。隨后組長負責首頁模塊，其余組員各自選擇1個模塊頁面，由組長組織小組討論剖析各個模塊頁面的布局，并畫出相應的結構布局圖。隨后各組員將自己負責的頁面，使用圖片處理軟件把素材圖通過裁剪處理等方法保存到站點文件夾下的圖庫里。組長負責的首頁部分特殊處理，將頭部和底部的HTML、CSS、JavaScript獨立出來，作為整個網站的通用模塊。其余組員將自己負責的頁面主體部分，根據小組分析的網頁結構布局圖，通過選擇對應的HTML5標簽，將頁面上的文字、圖片、表格等結構搭建起來，選擇CSS樣式將頁面上的背景、鼠標指上去的效果、定位等設計出來，最后使用JavaScript以及衍生出來的各種技術、框架，完成創建Web頁面的前端界面。最后由團隊合作整合各個模塊的主體內容，加上共用的頭部和底部，并呈現出來，實現互聯網產品的用戶界面交互。作品完成后，組長組織全體組員根據瀏覽器最終呈現的網站界面效果，回顧整個過程所運用的知識，進行集體消化吸收，并積累經驗教訓，進而嘗試向更專業更簡潔的工作過程轉化。

4.4 考核方式設計

改革后的考核方式應該明確了任務目的，各組成員根據教師提供的網頁設計稿，編寫自己制作的功能模塊，并畫出結構布局圖，由組長匯總提交給教師，作為前期的網頁布局剖析工作總結。教師通過文檔結構了解學生對網頁布局分析的是否到位，并結合最終完成的網頁效果給出相應的分值，作為考核的成績。

由于這門課程是以培養學生實踐能力為主要目標，改革后的考核方式，通過項目考核的方式真正考察學生對于知識的應用能力，從而真正培養出學生符合職業需求、實踐能力強、工學結合的專業技術能力。

5 結語

通過“基于工作過程導向”教學模式的探索，建立以職業需求為導向, 以實踐能力培養為重點,將“工學結合”很好地融入到教學訓練的過程中。在實施任務的過程中，學生了解了工作的過程，實現了知識的構建、技能的提升、職業素養的養成。做到課程教學內容與職業標準對接，教學過程與實際工作過程對接，進而提高學生的就業能力。