“HTML5+CSS3前端開發(fā)技術(shù)”教學實踐探索

辛 紅

(松原職業(yè)技術(shù)學院，吉林 松原 138000)

1 前端開發(fā)技術(shù)概述

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

1.1 前端開發(fā)技術(shù)現(xiàn)狀綜述

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

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

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

1.2 前端開發(fā)技術(shù)研究背景

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

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

1.3 前端開發(fā)技術(shù)研究目的

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

2 前端開發(fā)技術(shù)教學實踐探索

2.1 計算機應用技術(shù)專業(yè)課程體系

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

計算機應用技術(shù)專業(yè)所有課程圍繞移動互聯(lián)網(wǎng)、網(wǎng)絡調(diào)試兩大模塊進行設(shè)計，主要有專業(yè)基礎(chǔ)課、專業(yè)技能課、綜合實訓課、人文素質(zhì)課4種類型，其中專業(yè)技能課開設(shè)“HTML5網(wǎng)頁設(shè)計與制作”“微信小程序制作”“Web前端高級開發(fā)”“Web UI設(shè)計”等核心課程；綜合實訓課開設(shè)“HTML5網(wǎng)頁制作綜合實訓”“UI設(shè)計綜合實訓”等實訓課程。

2.2 HTML5概述

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

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

2.3 CSS3概述

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

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

2.4 HTML5+CSS3前端開發(fā)技術(shù)實踐意義

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

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

3 結(jié)語

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