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

辛 紅

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 HTML5概述

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

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

2.3 CSS3概述

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

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

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

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

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

3 結(jié)語

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