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

劉雅君　袁婷　謝國(guó)　李愛(ài)民　劉光明　常婉倫

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

關(guān)鍵詞：Web前端開(kāi)發(fā)技術(shù);PBL教學(xué)法;教學(xué)改革

中圖分類號(hào)：TP393? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）07-0127-02

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

1 Web前端開(kāi)發(fā)技術(shù)課程傳統(tǒng)教學(xué)的弊端

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

通過(guò)對(duì)首都師范大學(xué)、北京理工大學(xué)及陜西高等院校調(diào)研發(fā)現(xiàn)，86%本科院校的計(jì)算機(jī)學(xué)院均開(kāi)設(shè)了前臺(tái)網(wǎng)頁(yè)開(kāi)發(fā)相關(guān)課程。然而，網(wǎng)頁(yè)前端技術(shù)的革新速度較快，發(fā)展勢(shì)頭迅猛，現(xiàn)有的教學(xué)模式已經(jīng)不能使學(xué)生較好地掌握網(wǎng)頁(yè)設(shè)計(jì)、開(kāi)發(fā)和發(fā)布的全過(guò)程。在傳統(tǒng)教學(xué)中存在以下兩方面的弊端：

1）知識(shí)體系更新不足

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

因此，如何根據(jù)網(wǎng)頁(yè)前臺(tái)開(kāi)發(fā)技術(shù)的新發(fā)展、前臺(tái)開(kāi)發(fā)崗位對(duì)人才培養(yǎng)的新要求引入教學(xué)過(guò)程和更新教學(xué)內(nèi)容，是《Web前端開(kāi)發(fā)技術(shù)》課程改革的亟待解決的問(wèn)題之一。

2）工程教育模式陳舊

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

2 PBL教學(xué)法

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

3 教學(xué)改革及實(shí)踐

為了更新Web前端開(kāi)發(fā)技術(shù)知識(shí)體系和改革傳統(tǒng)教學(xué)模式，我們嘗試針對(duì)《Web前端開(kāi)發(fā)技術(shù)》課程進(jìn)行PBL教學(xué)改革。

首先，針對(duì)網(wǎng)絡(luò)和一線公司進(jìn)行調(diào)研，確認(rèn)最新技術(shù)動(dòng)向，轉(zhuǎn)化為教學(xué)內(nèi)容。網(wǎng)絡(luò)方面，我們爬取了主流IT招聘網(wǎng)站前臺(tái)開(kāi)發(fā)相關(guān)崗位的技能要求，統(tǒng)計(jì)關(guān)鍵字，分析技術(shù)動(dòng)向。針對(duì)當(dāng)?shù)剀浖@，設(shè)計(jì)了有針對(duì)性的調(diào)查問(wèn)卷進(jìn)行地毯式調(diào)研。

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

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

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

3.2知識(shí)講解

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

3.3編程實(shí)踐

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

根據(jù)“教學(xué)做考”相結(jié)合的教學(xué)原則，教師在學(xué)生實(shí)踐過(guò)程中，觀察學(xué)生學(xué)習(xí)情況，以實(shí)現(xiàn)“培優(yōu)扶差”，從而提高課堂教學(xué)效果。學(xué)生根據(jù)自身情況選擇當(dāng)堂提交或郵件提交。一般根據(jù)教學(xué)軟件統(tǒng)計(jì)，對(duì)當(dāng)堂提交的前5名同學(xué)口頭表?yè)P(yáng)并將此次平時(shí)成績(jī)記“A+”，以示鼓勵(lì)。

4課堂效果及教學(xué)反思

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

參考文獻(xiàn)：

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

【通聯(lián)編輯：王力】