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

孫銘蔚

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

關鍵詞：校企合作;項目教學法;WEB前端

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

引言

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

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

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

2項目教學法的實施流程

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

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

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

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

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

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

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

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

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

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

3.項目教學法的實施效果

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

4.結語

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

參考文獻

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

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

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