基于案例教學(xué)與項目驅(qū)動教學(xué)的網(wǎng)頁設(shè)計課程教學(xué)改革實踐探究

胡娟，湯海林

（廣東白云學(xué)院 大數(shù)據(jù)與計算機學(xué)院，廣東廣州 510400)

0 引言

網(wǎng)頁設(shè)計是計算機科學(xué)與技術(shù)專業(yè)的必修課程，具有較強的實踐性。教學(xué)內(nèi)容包含HTML5基礎(chǔ)知識、CSS3基礎(chǔ)知識和JavaScript前端知識等。該課程采用案例教學(xué)+項目驅(qū)動教學(xué)方法，通過任務(wù)案例的導(dǎo)入、分析、實踐與總結(jié)來講解和強化知識點，引導(dǎo)學(xué)生在學(xué)中做、在做中學(xué)，把價值觀的形成、基礎(chǔ)知識的學(xué)習以及基本技能的培養(yǎng)和提高進行有機地結(jié)合，從而將學(xué)生培養(yǎng)成為社會所需的復(fù)合型高技能應(yīng)用型人才[1]。

1 教學(xué)現(xiàn)狀和存在的問題

1.1 照本宣科地教學(xué)

沒有經(jīng)驗的網(wǎng)頁設(shè)計教師在講授這門課程的時候，通常是將市場上現(xiàn)有的網(wǎng)頁設(shè)計書籍作為主教材，給學(xué)生演示的時候把書上的每一個例子都照抄一遍，但書中有部分標簽在制作企業(yè)網(wǎng)站的時候并不實用。這種照本宣科、生搬硬套的教學(xué)方式，導(dǎo)致學(xué)生囫圇吞棗，不知所云，“夾生飯”問題層出不窮。

1.2 學(xué)生的基礎(chǔ)參差不齊

大部分高校的網(wǎng)頁設(shè)計課程都開設(shè)在大學(xué)一年級，很多學(xué)生在大一學(xué)習的都是基礎(chǔ)課程，如高等數(shù)學(xué)、大學(xué)英語等，并沒有接觸到較多的計算機專業(yè)課程，所以大部分學(xué)生在學(xué)習這門課的時候?qū)τ谟嬎銠C的基礎(chǔ)知識并不了解，但是有一部分學(xué)生在讀大學(xué)之前家里就有電腦，因為互聯(lián)網(wǎng)的普及，這一部分學(xué)生很早就學(xué)會了上網(wǎng)，有的對網(wǎng)頁制作很感興趣，會花錢買書自學(xué)，或者上網(wǎng)看視頻自學(xué)，這一部分學(xué)生在學(xué)習本門課程之前，對于HTML5 標簽和CSS3 的一些知識點其實已經(jīng)掌握了。上課的時候老師如果還是只講淺顯的知識點，就會讓基礎(chǔ)好的學(xué)生吃不飽，但如果不講這些最基本的知識點，那么基礎(chǔ)薄弱的學(xué)生就有可能跟不上。

1.3 考核評價體系單一

考核評價體系單一，太注重期末考試，期末考試分數(shù)在形成性考核中所占比值過大。在布置期末大作業(yè)的時候，如果出同一道題目，很難杜絕有些學(xué)生進行抄襲，交上來的作業(yè)一模一樣。為了杜絕這種抄襲現(xiàn)象，改革后重新制定了考核方案，新的考核方案能讓每一位同學(xué)都獨立思考，獨立完成期末大作業(yè)。

2 教學(xué)改革研究與實踐

針對上述存在的一些問題，筆者根據(jù)最近幾年網(wǎng)頁設(shè)計課程授課心得體會，作出了如下的改進措施。

2.1 教學(xué)內(nèi)容的優(yōu)化

本門課程共48學(xué)時，理論知識講解24學(xué)時，實踐操作24學(xué)時，全部安排在實驗室進行。筆者顛覆了完全按照書本章節(jié)進行教學(xué)的傳統(tǒng)模式。本門課程并沒有選擇一本書作為主教材。因為教材編排的目的并不是為了直接服務(wù)于教學(xué)，教材更多的是承載學(xué)科知識體系。教材把完整的知識體系分散到了各個章節(jié)，而各個章節(jié)之間關(guān)聯(lián)不大。現(xiàn)有的網(wǎng)頁設(shè)計書籍中提到的大部分標簽其實在做企業(yè)網(wǎng)站的時候是用不到的，學(xué)生只要學(xué)會一些常用的標簽、樣式、腳本，基本上就能完成企業(yè)網(wǎng)站的制作了。改革后的學(xué)習內(nèi)容極大地激發(fā)了學(xué)生學(xué)習這門課程的興趣，學(xué)生會迫不及待地想學(xué)習下一章節(jié)的內(nèi)容。表1將改革前與改革后的課程內(nèi)容進行了對比，主要是把分散的知識點融入案例和項目中，不再單獨講解一個個標簽，而是在綜合應(yīng)用中進行學(xué)習。

表1 改革前后課程教學(xué)內(nèi)容對比

2.2 案例教學(xué)法

案例教學(xué)法起源于美國哈佛大學(xué)商學(xué)院，是一種以案例為基礎(chǔ)的教學(xué)方法(Case-based Teaching)。這些案例都是來自商業(yè)管理的真實情境或事件。在網(wǎng)頁設(shè)計課程教學(xué)中，筆者將一些經(jīng)典的案例引入課堂中，帶領(lǐng)學(xué)生模仿真實的企業(yè)官網(wǎng)學(xué)習網(wǎng)頁設(shè)計制作，讓學(xué)生提前了解企業(yè)網(wǎng)站的制作流程和規(guī)范，實現(xiàn)產(chǎn)學(xué)人才的無縫鏈接。另一方面，通過微信群等通信工具為學(xué)生在學(xué)習中碰到的實際問題進行解答，為課程提供了有力的技術(shù)支撐。案例教學(xué)法有利于學(xué)生學(xué)習和理解理論知識。表2列出了網(wǎng)頁設(shè)計課程案例教學(xué)的例子。

2.3 項目驅(qū)動教學(xué)法指導(dǎo)實踐

項目驅(qū)動教學(xué)法是以項目的形式進行教學(xué)，在老師的指導(dǎo)下，將一個相對獨立的項目交由學(xué)生自己處理[2]。項目驅(qū)動教學(xué)法能讓學(xué)生有真實的體驗，促進學(xué)生的參與性和創(chuàng)造性，增加學(xué)生的開發(fā)技能和學(xué)習的成就感。

筆者把理論與實戰(zhàn)相結(jié)合，將企業(yè)的真實網(wǎng)站作為項目融入課堂，選取了四個不同的實戰(zhàn)項目向?qū)W生進行詳細地講解與分析。筆者對于重要的操作，撰寫了實驗操作手冊，操作步驟詳細，手冊附加了操作截圖，幫助學(xué)生輕松完成實戰(zhàn)案例。項目式實驗教學(xué)改革極大地激發(fā)了學(xué)生的學(xué)習興趣與學(xué)習熱情，計算機科學(xué)與技術(shù)專業(yè)的學(xué)生根據(jù)項目式實驗內(nèi)容親自動手實踐，加深了對網(wǎng)頁設(shè)計的理解。表3列出了改革后新增加的實驗項目及內(nèi)容。

表3 改革后實驗項目及內(nèi)容安排

2.4 課堂教學(xué)安排

為了提升課堂教學(xué)質(zhì)量，讓學(xué)有余力的學(xué)生吃得飽，讓跑得慢的學(xué)生跟得上。筆者重新調(diào)整了教學(xué)策略，精心設(shè)計了學(xué)生的學(xué)習任務(wù)，也研讀了很多教育類書籍，試圖尋找一種有效的教學(xué)途徑改變課堂。圖1展示了課堂提質(zhì)增效的教學(xué)安排。

圖1 課堂提質(zhì)增效的教學(xué)安排

2.4.1 課前階段

為了解決上述學(xué)生基礎(chǔ)參差不齊的問題，筆者將HTML5、CSS3 和JavaScript 的基礎(chǔ)知識放到了超星學(xué)習通網(wǎng)頁設(shè)計課程中，讓基礎(chǔ)薄弱的學(xué)生先預(yù)習掌握最基本的標簽和用法。對于已經(jīng)有一定網(wǎng)頁設(shè)計理論基礎(chǔ)的學(xué)生，可以跳過此環(huán)節(jié)，在課堂上直接聽老師講解案例和項目即可。改革后的課堂教學(xué)設(shè)計讓基礎(chǔ)好的學(xué)生不用重復(fù)學(xué)習，為他們節(jié)省了寶貴的學(xué)習時間，提高了學(xué)生的學(xué)習效率，同時也照顧到了基礎(chǔ)薄弱的學(xué)生，讓他們在課堂上學(xué)習案例的時候可以跟得上。

2.4.2 課中階段

在課堂上，老師主要進行案例式教學(xué)。在案例中把網(wǎng)頁設(shè)計需要學(xué)習的知識點進行講解，對案例進行演示，讓學(xué)生對這些經(jīng)典的網(wǎng)站進行賞析。老師講解完把主動權(quán)交到學(xué)生手中，讓學(xué)生做課堂練習，挑選出1～2名學(xué)生展示他們的練習作品，教師對學(xué)生的作品進行點評，最后做課堂總結(jié)。

2.4.3 課后階段

基礎(chǔ)薄弱的學(xué)生需要完成基礎(chǔ)題和課后作業(yè)?；A(chǔ)好的學(xué)生需要完成附加題和課后作業(yè)。對于有一些基礎(chǔ)但又不是很精通的學(xué)生，他們可以選擇三種題都做，即基礎(chǔ)題、課后作業(yè)和附加題，也可以選其中兩種題完成作業(yè)。

2.5 改革考核標準

建立課程評價體系是教學(xué)活動的重要環(huán)節(jié)之一。經(jīng)過對該門課程多個學(xué)期的教學(xué)經(jīng)驗總結(jié)，筆者針對這門課程制定了如下的形成性考核方案。該考核方案增加了學(xué)生平時分的比例，減少了期末考試分數(shù)所占的比例，打破了用一場考試來定義學(xué)生的水平，更加注重平時對于學(xué)生動手能力的培養(yǎng)，這符合廣東白云學(xué)院應(yīng)用型大學(xué)的教學(xué)目標。表4列出了課程形成性考核方案。

表4 課程形成性考核方案

2.5.1 課前學(xué)習的考核

對于基礎(chǔ)薄弱的學(xué)生需要完成課前學(xué)習任務(wù)，在超星學(xué)習通上教師可以看到學(xué)生完成的時間和完成的進度。對于基礎(chǔ)好的學(xué)生，在上這門課之前就已經(jīng)完成了自學(xué)的功課，所以可以跳過此環(huán)節(jié)直接得分。在這門課程開學(xué)的第一節(jié)課，筆者就進行了一場摸底考試，在有限的時間內(nèi)完成摸底測試并且得分在60分以上的學(xué)生，視為有一定的學(xué)習基礎(chǔ)，其他學(xué)生就需要在超星學(xué)習通完成課前學(xué)習任務(wù)，才能獲得相應(yīng)的課前學(xué)習積分。

2.5.2 小組匯報答辯考核

安排學(xué)生自行組隊，每個小組選一名組長，給自己的團隊起一個響亮的名字，小組組長作為項目經(jīng)理，安排3名網(wǎng)頁設(shè)計師加一名前端工程師，完成一個網(wǎng)站或者項目。團隊成員含組長不能超過5人。每次上臺匯報或答辯的時候，可以由組長完成，也可以由其他成員匯報。這樣安排主要是為了鍛煉學(xué)生的組織能力、語言表達能力、網(wǎng)頁設(shè)計能力、溝通協(xié)調(diào)能力和團隊協(xié)作能力等，畢竟如今的社會已經(jīng)不適合單打獨斗去完成一件事情。從大一開始培養(yǎng)學(xué)生的軟技能，可以增加學(xué)生日后在社會上的競爭力。

2.5.3 期末考試考核

期末考試雖然是開卷讓學(xué)生完成一個大作業(yè)，但它與之前讓學(xué)生組隊通力合作完成一個網(wǎng)站不同。期末考試需要每一個學(xué)生獨立思考，綜合運用這個學(xué)期所學(xué)的知識，獨立完成一個作品。為了防止學(xué)生抄襲其他同學(xué)的作品，筆者專門查詢了國民經(jīng)濟行業(yè)信息，專門給每一個學(xué)生布置不同的行業(yè)網(wǎng)站作為期末考試題目，單人單題，這樣就從根本上杜絕了抄襲的可能。這種出題方式對教師來說，工作量較大，但可以讓學(xué)生盡早地了解到各行各業(yè)，辛苦也是值得的。

3 教學(xué)改革效果分析

從2021 年至2022 年，大數(shù)據(jù)與計算機學(xué)院計算機科學(xué)與技術(shù)專業(yè)共三個班自教學(xué)改革后，極大地提高了學(xué)生的網(wǎng)頁設(shè)計能力和動手實踐能力。筆者分別對B21 計科1、2 班共98 人，B22 計科1 班共49 人的網(wǎng)頁設(shè)計課程綜合能力作了統(tǒng)計分析，如圖2所示，從圖2教學(xué)改革效果分析圖中可以看出各班級的學(xué)生在課堂表現(xiàn)、設(shè)計能力、前端開發(fā)能力上都有所提升，教學(xué)效果良好。

圖2 教學(xué)改革效果分析圖

4 結(jié)論

目前，網(wǎng)頁設(shè)計課程改革已經(jīng)在教學(xué)中使用了三輪，和改革之前相比取得了良好的教學(xué)效果。主要體現(xiàn)在學(xué)生對課程的學(xué)習態(tài)度上。改革之后，學(xué)生對于實踐內(nèi)容的理解和認識更加直觀，生動且有趣的案例項目式教學(xué)激發(fā)了學(xué)生的學(xué)習興趣和動手實操的欲望，實操的結(jié)果又極大地滿足了學(xué)生的成就感。無論是課堂上的注意力集中程度，還是實踐課上的學(xué)習氛圍，與改革前相比都有大幅度的提升。筆者制作了調(diào)查問卷讓學(xué)生填寫，從調(diào)查的結(jié)果來看，學(xué)生普遍認為本課程的學(xué)習變得更加有趣，這些案例與項目讓他們對于網(wǎng)頁設(shè)計也有了更加深入的了解。大部分學(xué)生在學(xué)完本課程后，會主動報名參加夢空間第二課堂活動、學(xué)?？萍紕?chuàng)新節(jié)等專業(yè)比賽。在做中學(xué)，在學(xué)中做的方式培養(yǎng)出來的學(xué)生有更強的動手能力，為學(xué)生將來學(xué)習Android App 開發(fā)、Java Web 開發(fā)、Node.js開發(fā)等后續(xù)課程打下堅實的基礎(chǔ)。