新工科背景下《Web前端開發(fā)技術》的PBL教學改革與實踐

劉雅君　袁婷　謝國　李愛民　劉光明　常婉倫

摘要：在新工科背景下，通過分析Web前端開發(fā)技術課程傳統教學的弊端，提出PBL教學考核方案。本文以“網頁頁面布局”章節(jié)為例，通過導入部分、知識講解和編程實踐三個課堂環(huán)節(jié)介紹了課程改革實踐過程。最后展示了學生的優(yōu)秀作品及教學反思。

關鍵詞：Web前端開發(fā)技術;PBL教學法;教學改革

中圖分類號：TP393? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）07-0127-02

2017年以來，國家對“新工科”建設的倡導，為計算機專業(yè)教學改革提出了新的要求，特別是如《Web前端開發(fā)技術》之類的工程專項能力培養(yǎng)類基礎課程。新工科建設行動路線（“天大行動”）提出了六個問題導向，其中“問技術發(fā)展改內容，更新工程人才知識體系;問學生志趣變方法，創(chuàng)新工程教育方式與手段”對當前《Web前端開發(fā)技術》課程改革指引的方向。

1 Web前端開發(fā)技術課程傳統教學的弊端

《Web前端開發(fā)技術》是我校電子與計算機工程專業(yè)的專業(yè)必修課程，是專業(yè)培養(yǎng)計劃中網頁前臺開發(fā)方向的工程專項能力培養(yǎng)類基礎課程。該課程一般安排在第四學期開設。該課程的學習目標分為三個層次：首先專業(yè)目標方面，通過課程的學習，讓學生正確理解前臺開發(fā)的相關概念，熟悉前臺開發(fā)的基本過程，掌握主流的前臺開發(fā)技能，為網站后臺開發(fā)課程的學習奠定基礎;其次能力目標方面，合理運用所學各種技術，完成企事業(yè)單位各種形式網站的前臺開發(fā)任務，體現良好的藝術性和實用性;最后素養(yǎng)目標，具有良好的自主學習能力團隊協作能力、職業(yè)崗位競爭能力和創(chuàng)新能力。

通過對首都師范大學、北京理工大學及陜西高等院校調研發(fā)現，86%本科院校的計算機學院均開設了前臺網頁開發(fā)相關課程。然而，網頁前端技術的革新速度較快，發(fā)展勢頭迅猛，現有的教學模式已經不能使學生較好地掌握網頁設計、開發(fā)和發(fā)布的全過程。在傳統教學中存在以下兩方面的弊端：

1）知識體系更新不足

伴隨5G時代的到來，網頁前端技術經歷了多種技術革新。前端開發(fā)工程技能要求也越來越綜合，不僅要求掌握多種語言的軟件開發(fā)技術，還對可用性、外觀等非功能性技術也有明確要求。然而，新型技術在現有知識體系更新不足。例如，HTML5作為最新的 HTML標準，已經被大部分瀏覽器支持，但是現有教學中所占比重仍然較少。同時，CSS也晉級到第3版本。該版本不僅減少開發(fā)成本與維護成本的同時，也提高了頁面性能。但是該版本在現有教材中介紹不足。最后也最重要的是，很多教材和教學都鮮少涉及網頁前端開發(fā)框架。

因此，如何根據網頁前臺開發(fā)技術的新發(fā)展、前臺開發(fā)崗位對人才培養(yǎng)的新要求引入教學過程和更新教學內容，是《Web前端開發(fā)技術》課程改革的亟待解決的問題之一。

2）工程教育模式陳舊

就目前授課情況和學生的學習情況來看，該課程主要采用課內理論教學環(huán)節(jié)和實踐教學環(huán)節(jié)結合的模式。課內理論教學環(huán)節(jié)為32～48學時，實驗課時一般16～24學時。作為重要的工程技能培養(yǎng)課程，現有重理論輕實踐的教學模式難以滿足學生理解并掌握工程技能的需求。因此改革傳統教學模式，形成新的工程教育模式成為教學改革的重要方向。

2 PBL教學法

PBL（problem-based learning）是一種以問題為基礎的教學方法，重點培養(yǎng)學生分析、解決問題的能力。該方法最早應用于醫(yī)學教育領域[1]。不同于傳統以授課為基礎的教學法，PBL教學法以問題為導向，以學生為中心。通過采用小組討論的形式，學生圍繞問題獨立收集資料，發(fā)現問題、解決問題，培養(yǎng)學生自主學習能力和創(chuàng)新能力的教學模式。

3 教學改革及實踐

為了更新Web前端開發(fā)技術知識體系和改革傳統教學模式，我們嘗試針對《Web前端開發(fā)技術》課程進行PBL教學改革。

首先，針對網絡和一線公司進行調研，確認最新技術動向，轉化為教學內容。網絡方面，我們爬取了主流IT招聘網站前臺開發(fā)相關崗位的技能要求，統計關鍵字，分析技術動向。針對當地軟件園，設計了有針對性的調查問卷進行地毯式調研。

此外，教學模式方面，《Web前臺設計》課程以集中2周的理實一體化形式全程在機房授課。教師進行引導和適度講解后，提出問題。根據分組，學生在機房討論、完成并展示作品。通過學生的主動學習，發(fā)現問題和解決問題的過程，從而達到提升教學效果的目的。本節(jié)以“網頁頁面布局”章節(jié)為例，介紹改革具體實踐。該部分課程的技能目標主要包含三個方面：要求學生熟悉各種常見的頁面布局類型、掌握主流頁面布局類型相應的DIV結構和浮動定位法中CSS規(guī)則的編寫方法。課程分為三個環(huán)節(jié)：導入部分、知識講解和編程實踐。

3.1導入環(huán)節(jié)

課程首先設置了5分鐘的引導部分。針對前期課程中CSS盒子模型基礎，提問學生思考“padding屬性與margin屬性的異同”。之后為了引入新課，展示2個典型網站示例。教師提出“這2個網頁有哪些相似的功能區(qū)域？”的問題，要求學生討論。過程中，借助機房教學軟件、QQ群、雨課堂等工具請學生提交答案，引導學生理解頁面分塊。最后，根據學生回答，總結概念“盒子相關位置”和“空間位置”，引入知識點。

3.2知識講解

根據學情，教師進行適度的知識講解。首先，展示主流網站，介紹常見的網頁布局結構，如國字型、T字型、綜合框架型等。然后，介紹三種定位方法，包含絕對位置定位、浮動定位和空間定位，引導學生分析優(yōu)缺點。此外，根據工程實踐推薦使用浮動定位法，現場演示實現一個基本的布局案例。演示中，應采用基于“工作過程”的教學模式，展示布局實現過程。另外，該案例應貼近學生生活，一般選取學校或學院主頁進行簡化的實操。最后，進行知識點的總結，引導學生查閱網頁布局框架，特別是自適應的網頁框架，擴展學生視野。

3.3編程實踐

教師在講解結束后立即向學生發(fā)布3道具有層次化的實踐題目。其中必做題2道，選做題1道。第一題為模仿課堂講解案例的制作。通過該題的制作，檢驗學生課程學習的成果。第二題要求學生兩兩自由組隊，模仿知名網站實現一個主頁面的布局設置。所模仿的網站由學生自選，教師僅進行簡單推薦。最后一個題目要求學生仍以小組形式完成一個自創(chuàng)網頁的頁面布局。

根據“教學做考”相結合的教學原則，教師在學生實踐過程中，觀察學生學習情況，以實現“培優(yōu)扶差”，從而提高課堂教學效果。學生根據自身情況選擇當堂提交或郵件提交。一般根據教學軟件統計，對當堂提交的前5名同學口頭表揚并將此次平時成績記“A+”，以示鼓勵。

4課堂效果及教學反思

通過這樣的教學改革，學生的網頁實操能力得到普遍的提高。圖1所示是兩位學生的優(yōu)秀作品。作為一線教師，我們不僅需要探究適應行業(yè)發(fā)展的教學內容，而且在教學模式方面進行深度改革實踐，如何針對傳統工程能力培養(yǎng)方式的弊端，提出并實踐符合新工科要求的改革方案，是每位高校教師時下需要深入思考的問題。針對《Web前端開發(fā)技術》課程，我們嘗試了PBL教學改革實踐，希望這些實踐能給計算機教師以啟發(fā)。

參考文獻：

[1] 陳英華，胡國棟，張琳，董為人.PBL教學法在我國基礎醫(yī)學教育中的應用及存在問題[J].中國繼續(xù)醫(yī)學教育，2015，7（18）：7-8.

【通聯編輯：王力】