校企合作背景下基于項目教學(xué)法的WEB前端課程教學(xué)改革與實踐

孫銘蔚

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

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

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

引言

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

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

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

2項目教學(xué)法的實施流程

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

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

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

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

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

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

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

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

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

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

3.項目教學(xué)法的實施效果

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

4.結(jié)語

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

參考文獻

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

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

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