孫銘蔚

摘要：隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，從PC到移動(dòng)端的屏幕上呈現(xiàn)的一切都是由前端實(shí)現(xiàn)的，因此IT行業(yè)WEB前端市場(chǎng)需求大，就業(yè)范圍廣，傳統(tǒng)的教育模式已經(jīng)不能滿(mǎn)足現(xiàn)在的社會(huì)需求。為了讓我院學(xué)生在就業(yè)過(guò)程中能夠脫穎而出，成為獨(dú)擋一面的WEB前端工程師，筆者提出與企業(yè)合作，引入項(xiàng)目教學(xué)法這一教學(xué)模式對(duì)我院WEB前端課程進(jìn)行教學(xué)改革與實(shí)踐。實(shí)驗(yàn)結(jié)果驗(yàn)證了該模式的可行性和有效性。

關(guān)鍵詞：校企合作;項(xiàng)目教學(xué)法;WEB前端

基金項(xiàng)目：2018東軟睿道產(chǎn)學(xué)合作協(xié)同育人項(xiàng)目*校企共建Web前端開(kāi)發(fā)人才培養(yǎng)的教學(xué)改革與研究

引言

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，從PC到移動(dòng)端的屏幕上呈現(xiàn)的一切都是由前端實(shí)現(xiàn)的，因此IT行業(yè)WEB前端市場(chǎng)需求大，就業(yè)范圍廣，高校學(xué)生在傳統(tǒng)的教育模式下所掌握的知識(shí)內(nèi)容已經(jīng)不能滿(mǎn)足現(xiàn)在的社會(huì)需求。為了使學(xué)生能緊貼企業(yè)崗位的實(shí)際需求，與企業(yè)真正做到無(wú)縫對(duì)接，就要聯(lián)合企業(yè)協(xié)同育人，積極合作，馬英英[1]在基于校企合作的網(wǎng)絡(luò)工程專(zhuān)業(yè)《web 前端開(kāi)發(fā)技術(shù)》課堂教學(xué)模式研究一文中，添加了一系列的教學(xué)訓(xùn)練。所以重新規(guī)劃課程建設(shè)，改革教學(xué)模式、教學(xué)方法，加強(qiáng)實(shí)踐操作，學(xué)生通過(guò)在校的學(xué)生身份學(xué)習(xí)理論知識(shí)和在企業(yè)的學(xué)徒身份掌握實(shí)踐技能二者完美結(jié)合，才能在就業(yè)過(guò)程中脫穎而出，成為獨(dú)擋一面的WEB前端工程師?！禬EB前端課程》是我院計(jì)算機(jī)專(zhuān)業(yè)的專(zhuān)業(yè)課、同時(shí)也是信管專(zhuān)業(yè)的學(xué)科基礎(chǔ)課。筆者根據(jù)自己多年的教學(xué)經(jīng)驗(yàn)，提出與企業(yè)合作，應(yīng)用項(xiàng)目教學(xué)法進(jìn)行任務(wù)分配這一教學(xué)模式，使學(xué)生系統(tǒng)化掌握理論知識(shí)內(nèi)容的同時(shí)，通過(guò)企業(yè)培訓(xùn)，提高并強(qiáng)化實(shí)踐能力。

1項(xiàng)目教學(xué)法的內(nèi)涵

項(xiàng)目教學(xué)法是由美國(guó)著名教育家凱茲博士和加拿大教育家查德博士共同創(chuàng)建的一種以學(xué)生為本的活動(dòng)教學(xué)法，其突出特點(diǎn)是以項(xiàng)目為主線(xiàn)，教師為引導(dǎo)，學(xué)生為主體，改變了以往 “教師講，學(xué)生聽(tīng)”的被動(dòng)教學(xué)模式，創(chuàng)造了學(xué)生主動(dòng)參與、自主協(xié)作、探索創(chuàng)新的新型教學(xué)模式[2]，該方法在職業(yè)教育和高等教育中得到了廣泛的應(yīng)用。

2項(xiàng)目教學(xué)法的實(shí)施流程

2.1從知識(shí)孤島到內(nèi)容整合

傳統(tǒng)的授課步驟是教師從一本教材的第一章由簡(jiǎn)到難，按部就班的講到最后一章。 由于WEB前端開(kāi)發(fā)課程涉及的技術(shù)多、內(nèi)容廣、知識(shí)點(diǎn)雜和代碼多等碎片化信息的特點(diǎn)，所以一如既往的采用傳統(tǒng)的授課步驟講授本門(mén)課，即從Html概念、網(wǎng)頁(yè)元素、布局到CSS基礎(chǔ)，再到JavaScript使用過(guò)程，由于每部分所介紹的代碼及實(shí)現(xiàn)的功能小模塊與其他章節(jié)之間的關(guān)聯(lián)性并不是太強(qiáng)，而且這些碎片化信息很容易形成知識(shí)孤島，所以教學(xué)效果不是很好。為了解決這個(gè)問(wèn)題，我們應(yīng)該把常見(jiàn)的，實(shí)用性強(qiáng)的所有知識(shí)點(diǎn)都匯集到一個(gè)完整的大項(xiàng)目上，完成內(nèi)容整合，最后通過(guò)對(duì)此項(xiàng)目的功能分解，由淺入深、由簡(jiǎn)到繁、查漏補(bǔ)缺的模式完成教與學(xué)的愉快過(guò)程。

2.2合理設(shè)計(jì)項(xiàng)目化教學(xué)環(huán)節(jié)

為切實(shí)滿(mǎn)足企業(yè)對(duì)實(shí)踐創(chuàng)新型人才的實(shí)際需求，板塊化項(xiàng)目的實(shí)踐訓(xùn)練模式勢(shì)在必行[3]。 在WEB前端開(kāi)發(fā)課程授課中，筆者和企業(yè)事先溝通好，選取一個(gè)合適、內(nèi)容詳盡和實(shí)用的完整項(xiàng)目“光影世界”為綜合案例。該綜合案例包含HTML、CSS、Javascript和Ajax等核心技術(shù)內(nèi)容。前臺(tái)首頁(yè)布局結(jié)構(gòu)為五行兩列，第一行為L(zhǎng)OGO和導(dǎo)航菜單，第二行為廣告圖片區(qū)域，第三行為主體部分，分兩列，左側(cè)列為最新上傳圖片，右側(cè)列為最新點(diǎn)評(píng)信息;第四行為特色美景制作欄目，該欄目由左側(cè)的拍攝主題和右側(cè)的最新影展兩具區(qū)域組成。第五行為頁(yè)面底部版權(quán)區(qū)域。整個(gè)頁(yè)面全局規(guī)則包括頁(yè)面body、圖像、超鏈接的CSS定義和使用JavaScript技術(shù)制作網(wǎng)頁(yè)的特效。首先對(duì)該綜合案例的各功能進(jìn)行演示和講解，簡(jiǎn)要介紹的所涉及的技術(shù)內(nèi)容。然后以前臺(tái)首頁(yè)為例進(jìn)行板塊化講解。

2.2.1 HTML5教學(xué)環(huán)節(jié)

由于HTML5具有可以兼容PC與移動(dòng)端、Windows與Linux、安卓和IOS這一跨平臺(tái)性的顯著優(yōu)勢(shì)，所以先簡(jiǎn)單介紹H5的基本知識(shí)，把我們事先錄制好有關(guān)H5的常用標(biāo)簽、功能、屬性和語(yǔ)法結(jié)構(gòu)的相關(guān)教學(xué)資源通過(guò)超星學(xué)習(xí)通向?qū)W生開(kāi)放，由于我院學(xué)生有一定的編程基礎(chǔ)，所以學(xué)生完全可以課后自學(xué)這部分內(nèi)容，并在Sublime等文本編輯工具中編寫(xiě)代碼并在瀏覽器中觀(guān)察效果。

2.2.2 CSS教學(xué)環(huán)節(jié)

在介紹完常用的標(biāo)簽使用方法后，重點(diǎn)分析和講解本項(xiàng)目的前端首頁(yè)布局方法。在制作頁(yè)面時(shí)，先要學(xué)會(huì)搭建一個(gè)可視的排版框架，然后再向框架中填充排版細(xì)節(jié)，這是關(guān)鍵過(guò)程。當(dāng)前制作網(wǎng)站的頁(yè)面布局是使用最流行Div+CSS的技術(shù)，所以筆者會(huì)結(jié)合本首頁(yè)代碼去講解整體頁(yè)面如何使用Div標(biāo)簽進(jìn)行分塊，然后講解頁(yè)面定位布局的核心內(nèi)容，即CSS的盒子模型，CSS的邊框和內(nèi)外邊距使用方法讓學(xué)生課前通過(guò)MOOC進(jìn)行學(xué)習(xí)。在上課中，結(jié)合代碼重點(diǎn)講解盒子的浮動(dòng)與清除功能，對(duì)之前Div劃分好的各個(gè)塊進(jìn)行CSS的定位，最后再向各個(gè)塊中添加相應(yīng)的內(nèi)容。其中，CSS的定義與使用會(huì)結(jié)合本項(xiàng)目的樣式表文件里的代碼舉例講解。然后對(duì)應(yīng)首頁(yè)的導(dǎo)航條內(nèi)容通過(guò)頁(yè)面結(jié)構(gòu)代碼標(biāo)簽中講解導(dǎo)航菜單的制作方法。在訪(fǎng)問(wèn)該項(xiàng)目的后臺(tái)管理系統(tǒng)中，首先進(jìn)入的就是登錄頁(yè)面。通過(guò)admin文件夾下的CSS文件夾中的樣式表login.css文件和頁(yè)面結(jié)構(gòu)代碼中標(biāo)簽中的標(biāo)簽進(jìn)行表單內(nèi)容的講解。

2.2.3 JavaScript教學(xué)環(huán)節(jié)

CSS樣式表可以控制和美化網(wǎng)頁(yè)的外觀(guān)，但對(duì)于網(wǎng)頁(yè)的交互行為卻無(wú)能為力。筆者通過(guò)本項(xiàng)目image文件夾和JS文件夾中的player.js和playerslider.js文件對(duì)應(yīng)著首頁(yè)廣告圖片區(qū)域和頁(yè)面結(jié)構(gòu)代碼標(biāo)簽中標(biāo)簽代碼講解插入JavaScript的三種方法和循環(huán)滾動(dòng)圖文字幕技術(shù)，制作首頁(yè)廣告圖片區(qū)域的幻燈片切換廣告。而JavaScript做為一名WEB工程師必備的技術(shù)，我們會(huì)請(qǐng)合作的企業(yè)指導(dǎo)老師親自講授進(jìn)階課程。其中，JavaScript中的基礎(chǔ)語(yǔ)法、簡(jiǎn)單、常用的函數(shù)、功能及使用方法已經(jīng)上傳到超星MOOC上，學(xué)生可以課后應(yīng)用HBuilder軟件編寫(xiě)JS文件。

3.項(xiàng)目教學(xué)法的實(shí)施效果

為了驗(yàn)證此方法的實(shí)施效果，筆者選取了18級(jí)學(xué)生的綜合實(shí)訓(xùn)項(xiàng)目作為19級(jí)學(xué)生期末測(cè)試內(nèi)容，測(cè)試結(jié)果顯示，接授項(xiàng)目教學(xué)法授課的19級(jí)學(xué)生作品無(wú)論從風(fēng)格版型、內(nèi)容設(shè)計(jì)還是細(xì)節(jié)處理上都勝過(guò)傳統(tǒng)教學(xué)方法的18級(jí)學(xué)生的作品。

4.結(jié)語(yǔ)

通過(guò)本次教學(xué)改革與實(shí)踐，學(xué)生可以獨(dú)立完成前端頁(yè)面的設(shè)計(jì)工作，為了讓所設(shè)計(jì)的網(wǎng)頁(yè)無(wú)論在何種設(shè)備上都能獲得最佳體驗(yàn)效果，響應(yīng)式布局，我院將繼續(xù)邀請(qǐng)經(jīng)驗(yàn)豐富的行業(yè)教師講授Bootstrap框架進(jìn)階課程，用項(xiàng)目驅(qū)動(dòng)教學(xué)，所學(xué)也是所用，相信學(xué)生通過(guò)進(jìn)階式學(xué)習(xí)，用作品說(shuō)話(huà)，成為熱門(mén)的WEB前端工程師指日可待。

參考文獻(xiàn)

[1]馬英英.基于校企合作的網(wǎng)絡(luò)工程專(zhuān)業(yè)《web 前端開(kāi)發(fā)技術(shù)》課堂教學(xué)模式研究[J].環(huán)球市場(chǎng)，2017（23）：167.

[2]胡慶芳.《優(yōu)化課堂教學(xué)方法與實(shí)踐》[M].中國(guó)人民大學(xué)出版社，2014.

[3]秦艷華.基于Web前端開(kāi)發(fā)技術(shù)的課程教學(xué)模式創(chuàng)新分析[J].佳木斯職業(yè)學(xué)院學(xué)報(bào)，2019（9）：110-111.