“HTML5+CSS3前端開發技術”教學實踐探索

辛 紅

(松原職業技術學院，吉林 松原 138000)

1 前端開發技術概述

2005年以后，互聯網進入Web2.0時代，各種類似桌面軟件的Web應用大量涌現，網站前端發生了翻天覆地的變化，一個新興的職業——Web前端開發工程師開始受到國內外的重視。

1.1 前端開發技術現狀綜述

針對Web前端開發工程師這個職業，各大職業院校專業教師開始研究自學前端開發的3個基本要素：超文本標記語言(Hyper Text Markup Language，HTML)、層疊樣式表(Cascading Style Sheets，CSS)和JavaScript腳本語言。各大職業院校專業帶頭人開始進行前端開發培養方向教學改革思路的探索，并開始嘗試開設前端開發相關課程。2016年，上饒職業技術學院以Web前端開發工程師為導向，與蘇州軟件園Web前端開發的專家一起研究討論、構建課程教學體系，重點包括：“網絡與Web技術導論”“平面設計軟件應用”“Web編程基礎”“HTML5高級程序設計”“JS高級程序設計”“常用前端開發框架”“項目實戰”等課程[1-2]。

隨著智能移動設備與移動網絡的迅速發展，移動設備桌面程序開始盛行，Web前端開發也拓展到移動端市場。長春職業技術學院開設移動應用開發專業，依據專業培養目標和培養規格，構建以公共基礎課程、專業平臺課程為基礎，以崗位能力課程為核心，以專業拓展課程為補充的“三線交融、崗位遞進”課程體系。

松原職業技術學院計算機應用技術專業于2017年更換教學設備，利用云課堂新型教學軟件，本著崗位需求原則，陸續開設“Axure原型設計”“HTML5+CSS3網頁制作與實訓”“JavaScript”“BootStrap響應式網頁”“Web前端開發”等特色課程，旨在培養優秀的前端開發與設計人員，且已有第一批少量優秀人才輸送成功，現工作在前端開發崗位上。

1.2 前端開發技術研究背景

近兩年來，互聯網技術(Internet Technology，IT)行業就業形勢大致可分為4個方面：技術類、文職類、銷售支持類、運營維護類。更為精細的分類可分為：技術類，包括：前端開發、后端開發、移動開發等；文職類，包括：產品設計、用戶界面(User Interface，UI)設計等；銷售支持類，包括：市場、銷售、網絡推廣、售前售后服務等。

針對以上IT熱門就業崗位，本專業帶頭人迅速調整課程設置，先將最新、最熱的前端開發中的HTML5、CSS3加入課程體系，代替Dreamweaver、Flash，迎合市場需求的初步設想已經實現，教師利用有限的資源自學并講授，效果顯著，教師能力得到很大提高，個別學生表現優異，作品優良，充分證明適合當前學生學情，可行性強。隨之陸續加入“JavaScript”“BootStrap響應式網頁”“Axure原型設計”“Ajax”等特色課程。將來還會陸續加入培養后端開發技術類崗位以及銷售技術類崗位就業人才的相關課程，邀請語言表達類行業能手、電教類行業專家，為學生講授“市場銷售”“行業禮儀”“電子課件制作”等與銷售及網絡推廣等崗位相關的課程，協助完成多級分化就業設想。

1.3 前端開發技術研究目的

松原職業技術學院計算機應用技術專業開展前端開發課程案例教學實踐研究，目的在于促進松原職業技術學院計算機應用技術專業建設，提高教學團隊的整體教學及科研能力、學生就業率以及就業質量，為社會輸送行業特色人才，創建品牌專業，提高學校聲望與地位，最終實現多級分化就業的設想。

2 前端開發技術教學實踐探索

2.1 計算機應用技術專業課程體系

松原職業技術學院計算機應用技術專業面向的崗位群為：辦公文員、Web前端開發工程師、網站建設管理員、計算機網絡管理員、網絡工程師、數據庫管理員、數據庫工程師、UI設計師等。以就業為導向、以能力為本位、以崗位需要和職業標準為依據，在滿足學生職業生涯發展需求的基礎上，建立以職業及職業崗位所需的、以專業能力培養為本位、兼顧理論知識和職業素質培養的課程體系。

計算機應用技術專業所有課程圍繞移動互聯網、網絡調試兩大模塊進行設計，主要有專業基礎課、專業技能課、綜合實訓課、人文素質課4種類型，其中專業技能課開設“HTML5網頁設計與制作”“微信小程序制作”“Web前端高級開發”“Web UI設計”等核心課程；綜合實訓課開設“HTML5網頁制作綜合實訓”“UI設計綜合實訓”等實訓課程。

2.2 HTML5概述

HTML主要是通過HTML標記對網頁中的文本、圖片、聲音等內容進行描述。HTML提供了許多標記，如段落標記、標題標記、超鏈接標記、圖片標記等，網頁中需要定義什么內容，就用相應的HTML標記描述即可。

HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。HTML5技術結合了HTML4.01的相關標準并革新，符合現代網絡發展要求。與傳統的技術相比，HTML5的語法特征更加明顯，并且結合了可縮放矢量圖形(Scalable Vector Graphics，SVG)的內容。這些內容在網頁中使用可以更加便捷地處理多媒體內容，而且HTML5中還結合了其他元素，對原有的功能進行調整和修改，開展標準化工作。

2.3 CSS3概述

CSS通常稱為CSS樣式或樣式表，主要用于設置HTML頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。

CSS3是CSS技術的升級版本，于1999年開始制訂，2001年W3C完成了CSS3的工作草案，主要包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊[3]。

2.4 HTML5+CSS3前端開發技術實踐意義

松原職業技術學院計算機應用技術專業通過對前端開發工程師的市場需求分析，針對此崗位進行本專業課程設置的調整，開設當今前端開發工程師應掌握的“HTML5+CSS3”“Web前端高級開發”(JavaScript，BootStrap等)“Web UI設計”等主流基本技能課程，并由本專業教師實施教學，在實踐中總結經驗，體驗成敗，不斷改善教學模式與教學方法，確保新課程設置的可行性。

“HTML5+CSS3前端開發技術”是Web前端開發培養方向較核心的內容，此技術的實踐研究有以下作用。(1)有利于探索新型課程與學科建設的方向，全面推進專業建設的實施。(2)有利于構筑既貼合就業市場要求又帶有松原職業技術學院特色的創新型的課程。(3)有利于穩定松原職業技術學院計算機應用技術專業學生的就業、創業發展。(4)有利于通過實踐帶出一支成熟的教研隊伍，真正提高教師的素質。

3 結語

松原職業技術學院計算機應用技術專業近三年來陸續開設“HTML5+CSS3網頁設計與制作”“HTML5網站綜合實訓”“Web前端高級開發(JavaScript)”“Web UI設計(Axure原型設計)”等課程，對教學方法與教學手段的探索逐步走向成熟階段，并有部分優秀的畢業生走向了相關的前端開發崗位，證明了課程體系建立的可行性，并將致力于開發適應于本專業學生學情、難易適中的流行案例教程。