黃鶯 昂娟 葉根梅

摘? 要：針對(duì)高?！熬W(wǎng)頁(yè)設(shè)計(jì)與制作”課程在傳統(tǒng)教學(xué)模式下存在的弊端，基于工作過(guò)程的教學(xué)思路，文章對(duì)項(xiàng)目教學(xué)法借助信息化教學(xué)平臺(tái)在教學(xué)中的具體設(shè)計(jì)、方法和實(shí)施的效果進(jìn)行實(shí)踐性研究。學(xué)生在課堂上既學(xué)習(xí)了知識(shí)也掌握了企業(yè)網(wǎng)站開(kāi)發(fā)流程，通過(guò)項(xiàng)目訓(xùn)練使得學(xué)生在校期間就積累了豐富的項(xiàng)目經(jīng)驗(yàn)，真正實(shí)現(xiàn)與真實(shí)崗位對(duì)接。

關(guān)鍵詞：工作過(guò)程;項(xiàng)目教學(xué)法;網(wǎng)頁(yè)制作

Abstract：In view of the drawbacks of the traditional teaching mode of “Web Design and Production” course in colleges and universities，through the teaching ideas based on the work process，the article conducts practical research on the specific design，method and implementation effect of project teaching method with the help of information teaching platform in teaching. In the classroom，students have both learned knowledge and mastered the corporate website development process. Through project training，students have accumulated a wealth of project experience during school，and truly realize the connection with real positions.

Keywords：work process;project teaching method;webpage production

0? 引? 言

“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程是高校計(jì)算機(jī)專業(yè)的必修課，其主要的培養(yǎng)目標(biāo)就是學(xué)生系統(tǒng)性地學(xué)習(xí)并掌握網(wǎng)站開(kāi)發(fā)的理論知識(shí)，同時(shí)能夠熟練進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)和制作，從而能有效應(yīng)用于將來(lái)的網(wǎng)站開(kāi)發(fā)工作中。隨著計(jì)算機(jī)網(wǎng)絡(luò)的普及和發(fā)展，市場(chǎng)對(duì)網(wǎng)站開(kāi)發(fā)的人才需求會(huì)越來(lái)越大，作為高校，應(yīng)更好地服務(wù)于經(jīng)濟(jì)發(fā)展和企業(yè)人才需求，需要使課程設(shè)置與工作崗位更為貼合，這樣才能夠培養(yǎng)出面向市場(chǎng)需求的技術(shù)型人才。

基于實(shí)際工作過(guò)程的項(xiàng)目教學(xué)是符合高職教育堅(jiān)持“職業(yè)化、員工化”的教學(xué)改革思路，其人才培養(yǎng)目標(biāo)和模式必須適應(yīng)市場(chǎng)經(jīng)濟(jì)對(duì)人才的需求。可以激發(fā)學(xué)生的學(xué)習(xí)興趣，提高學(xué)生的團(tuán)結(jié)協(xié)作能力、分析和解決問(wèn)題的能力，真正體現(xiàn)高職教育特點(diǎn)[1]。

在基于實(shí)際工作過(guò)程的項(xiàng)目教學(xué)過(guò)程中，教師不再是處于教學(xué)的主體，而是作為引導(dǎo)者，幫助及促進(jìn)學(xué)生進(jìn)行項(xiàng)目學(xué)習(xí)，學(xué)生在項(xiàng)目實(shí)踐過(guò)程中發(fā)揮其學(xué)習(xí)主體性，在完成工作任務(wù)的過(guò)程中完成知識(shí)和技能的學(xué)習(xí)并解決實(shí)際問(wèn)題[2]。

1? 網(wǎng)頁(yè)設(shè)計(jì)與制作課程概況

本文以計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程中的表單設(shè)計(jì)與制作模塊為例，以本校2018級(jí)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)學(xué)生為教學(xué)對(duì)象，進(jìn)行基于工作過(guò)程的項(xiàng)目式教學(xué)應(yīng)用研究。

“網(wǎng)頁(yè)設(shè)計(jì)與制作”是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)的一門專業(yè)課程，開(kāi)設(shè)時(shí)間是大一第二學(xué)期，共18個(gè)教學(xué)周，每周4課時(shí)，共72學(xué)時(shí)。本門課包含“Web前端開(kāi)發(fā)工程師”崗位需求三要素：HTML、CSS和JavaScript，主要是為專業(yè)培養(yǎng)目標(biāo)中的“網(wǎng)站建設(shè)”起支撐作用，和“數(shù)據(jù)庫(kù)應(yīng)用技術(shù)”“網(wǎng)站建設(shè)與開(kāi)發(fā)”等課程結(jié)合，培養(yǎng)網(wǎng)站建設(shè)與管理方向高素質(zhì)的技能型人才。

整個(gè)課程選取學(xué)生寒假實(shí)踐承接的政府公益性網(wǎng)站“助農(nóng)網(wǎng)”，將完整的“助農(nóng)網(wǎng)”工作項(xiàng)目貫穿始終，包括：需求分析、網(wǎng)站策劃和設(shè)計(jì)、網(wǎng)站建設(shè)與制作、網(wǎng)站部署和驗(yàn)收。按照項(xiàng)目開(kāi)發(fā)流程結(jié)合教學(xué)實(shí)際，劃分成5個(gè)子項(xiàng)目，本研究選取表單模塊，依據(jù)Web前端開(kāi)發(fā)工程師典型職業(yè)崗位，選取與本課程相關(guān)的典型職業(yè)技能，整合“助農(nóng)網(wǎng)”教學(xué)項(xiàng)目，選取表單設(shè)計(jì)與制作這項(xiàng)典型工作任務(wù)進(jìn)行實(shí)踐性研究。

2? 基于工作任務(wù)的項(xiàng)目教學(xué)實(shí)施

本文以表單模塊為例，驗(yàn)證基于工作過(guò)程的項(xiàng)目教學(xué)是符合人才培養(yǎng)目標(biāo)的，通過(guò)在課程中實(shí)施基于實(shí)際工作過(guò)程的項(xiàng)目教學(xué)法，促進(jìn)學(xué)生在學(xué)習(xí)專業(yè)知識(shí)的同時(shí)能夠做到更好地掌握崗位技能，對(duì)于培養(yǎng)學(xué)生們的職業(yè)能力和職業(yè)素養(yǎng)有很大的促進(jìn)作用，充分體現(xiàn)出高職教育的職業(yè)化特點(diǎn)[3]。

2.1? 教學(xué)目標(biāo)

依據(jù)計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)人才培養(yǎng)方案中對(duì)“Web應(yīng)用開(kāi)發(fā)能力”的培養(yǎng)要求，結(jié)合“1+X——Web前端開(kāi)發(fā)”職業(yè)能力標(biāo)準(zhǔn)中的技能要求，以及課程標(biāo)準(zhǔn)中的崗位目標(biāo)，并結(jié)合學(xué)生學(xué)情，以政府公益性網(wǎng)站“助農(nóng)網(wǎng)”的設(shè)計(jì)與制作為主線，整合教學(xué)內(nèi)容，設(shè)定表單模塊的三維教學(xué)目標(biāo)如表1所示。

學(xué)生經(jīng)過(guò)前期章節(jié)的學(xué)習(xí)，學(xué)生熟悉了網(wǎng)頁(yè)項(xiàng)目的開(kāi)發(fā)工具和開(kāi)發(fā)流程;經(jīng)過(guò)本章節(jié)前面知識(shí)的學(xué)習(xí)，學(xué)生掌握了表單標(biāo)簽（form、input、textarea、select）和屬性、表單的布局和美化等基本知識(shí)。從學(xué)生的課前微課學(xué)習(xí)和理論測(cè)試結(jié)果來(lái)看，學(xué)生對(duì)于新課知識(shí)點(diǎn)掌握良好;從學(xué)生提交的原型圖來(lái)看，設(shè)計(jì)稿基本能滿足客戶需求和用戶體驗(yàn)，但綜合應(yīng)用能力較欠缺。經(jīng)過(guò)一學(xué)期通識(shí)課程的學(xué)習(xí)，學(xué)生面臨基礎(chǔ)教育到職業(yè)教育學(xué)習(xí)模式的轉(zhuǎn)變，具有職業(yè)理想，亟待形成專業(yè)認(rèn)知和崗位認(rèn)知，同時(shí)對(duì)先進(jìn)的互聯(lián)網(wǎng)技術(shù)很感興趣，對(duì)新興的信息化技術(shù)有較大的熱情。

2.2? 教學(xué)設(shè)計(jì)

本次教學(xué)選取來(lái)自政府公益性項(xiàng)目“助農(nóng)網(wǎng)”的表單模塊為載體，要求學(xué)生完成“助農(nóng)網(wǎng)”四個(gè)表單模塊的設(shè)計(jì)和制作。按照企業(yè)實(shí)際開(kāi)發(fā)網(wǎng)站的流程：需求分析-網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)制作-部署驗(yàn)收來(lái)策劃教學(xué)內(nèi)容，可以激發(fā)學(xué)生的學(xué)習(xí)興趣，體驗(yàn)真實(shí)的職業(yè)情境。四個(gè)教學(xué)任務(wù)都按照實(shí)際工作流程來(lái)組織教學(xué)過(guò)程，基于實(shí)際的工作過(guò)程，以任務(wù)為驅(qū)動(dòng)，對(duì)接技術(shù)活動(dòng)全過(guò)程，優(yōu)化教學(xué)環(huán)節(jié)。

2.3? 教學(xué)內(nèi)容

教師首先要和企業(yè)導(dǎo)師一起，結(jié)合企業(yè)中“Web前端開(kāi)發(fā)設(shè)計(jì)師”的崗位標(biāo)準(zhǔn)，練習(xí)本章的教學(xué)內(nèi)容，創(chuàng)設(shè)出本模塊的典型工作任務(wù)——“助農(nóng)網(wǎng)”四個(gè)表單頁(yè)面的設(shè)計(jì)與制作，引導(dǎo)學(xué)生先明確網(wǎng)頁(yè)需求，根據(jù)需求進(jìn)行頁(yè)面設(shè)計(jì)并熟練的制作出頁(yè)面。根據(jù)學(xué)生的認(rèn)知特點(diǎn)和知識(shí)點(diǎn)遞進(jìn)關(guān)系，將表單項(xiàng)目分解序化成4個(gè)典型工作任務(wù)，分別為登錄表單、留言反饋表單、注冊(cè)表單、商家表單。其中登錄表單主要知識(shí)點(diǎn)為認(rèn)識(shí)表單;留言反饋表單主要知識(shí)點(diǎn)為表單布局;注冊(cè)表單主要知識(shí)點(diǎn)為表單空間選擇;商家信息表單主要知識(shí)點(diǎn)為表單的綜合應(yīng)用。其設(shè)置包含了表單所需的知識(shí)點(diǎn)，同時(shí)加強(qiáng)了學(xué)生的實(shí)踐操作過(guò)程，四個(gè)任務(wù)環(huán)環(huán)相扣，其流程有利于學(xué)生學(xué)習(xí)掌握相應(yīng)知識(shí)點(diǎn)。

2.4? 教學(xué)實(shí)施流程

在具體的教學(xué)實(shí)施過(guò)程中，利用超星學(xué)習(xí)通在線學(xué)習(xí)平臺(tái)，4個(gè)表單子任務(wù)皆采用“線上+線下”混合式教學(xué)模式，整個(gè)企業(yè)任務(wù)貫穿課前、課中和課后，教學(xué)實(shí)施流程圖如圖1所示。

2.5? 教學(xué)具體實(shí)施

根據(jù)教學(xué)內(nèi)容分析和學(xué)情分析，確定教學(xué)目標(biāo)和重難點(diǎn)。依據(jù)職業(yè)教育改革要求，踐行“以學(xué)生為主體”的理念，以“助農(nóng)網(wǎng)”真實(shí)任務(wù)為驅(qū)動(dòng)，合理采用多樣化教學(xué)策略和信息化手段，構(gòu)建高效課堂。

課前老師通過(guò)學(xué)習(xí)通平臺(tái)發(fā)布每個(gè)學(xué)習(xí)任務(wù)書(shū)，指定教學(xué)資源。初步了解表單任務(wù)。學(xué)生根據(jù)學(xué)習(xí)任務(wù)書(shū)，解讀需求分析并設(shè)計(jì)原型圖初稿，教師在在線學(xué)習(xí)平臺(tái)發(fā)布微習(xí)題，課前測(cè)試如圖2所示，根據(jù)平臺(tái)測(cè)試結(jié)果，掌握學(xué)生知識(shí)準(zhǔn)備情況，調(diào)整教學(xué)策略。測(cè)試結(jié)果分析如圖3所示。

課中情境引入，通過(guò)查看常用網(wǎng)站的真實(shí)案例引導(dǎo)學(xué)生知道什么是表單。通過(guò)展示“助農(nóng)網(wǎng)”表單空白頁(yè)面明確本次課的任務(wù)，通過(guò)教師自制的Flash視頻動(dòng)畫，演示表單工作原理，變抽象為形象，更好幫助學(xué)生理解什么是表單解決教學(xué)難點(diǎn)，學(xué)生進(jìn)行挑戰(zhàn)答題，寓教于樂(lè)，在答題的過(guò)程中掌握表單的相關(guān)概念和原理。教師根據(jù)測(cè)試結(jié)果進(jìn)行有效的階段性評(píng)價(jià)。

針對(duì)課前原型圖初稿的問(wèn)題，在學(xué)校教師的講解指導(dǎo)下，幫助學(xué)生充分考慮客戶需求和用戶體驗(yàn)。再次解讀需求說(shuō)明書(shū)，幫助學(xué)生通過(guò)頭腦風(fēng)暴明確修改意見(jiàn)。并通過(guò)在線原型圖工具修改完善原型圖，并在線學(xué)習(xí)平臺(tái)提交，學(xué)生對(duì)前后提交的原型圖進(jìn)行對(duì)比，評(píng)選出改進(jìn)最大的組，并由該組上臺(tái)進(jìn)行匯報(bào)，其他組進(jìn)行補(bǔ)充，教師根據(jù)各個(gè)任務(wù)原型圖評(píng)分標(biāo)準(zhǔn)對(duì)各組提交的原型圖進(jìn)行評(píng)分，并提出進(jìn)一步修改意見(jiàn)。團(tuán)隊(duì)成員對(duì)原型圖進(jìn)行進(jìn)一步完善，通過(guò)反復(fù)對(duì)原型圖改進(jìn)，培養(yǎng)學(xué)生精益求精的工匠精神，提高頁(yè)面設(shè)計(jì)的能力，突出教學(xué)重難點(diǎn)。

各組根據(jù)完善后的原型圖，使用企業(yè)專業(yè)的編輯工具——Visual Studio Code，小組協(xié)作制作完成每個(gè)模塊的表單，如圖4所示，并提交至在線學(xué)習(xí)平臺(tái)。通過(guò)真實(shí)的企業(yè)協(xié)同軟件，體驗(yàn)真實(shí)的生產(chǎn)環(huán)境，真正體現(xiàn)工學(xué)結(jié)合;學(xué)生根據(jù)評(píng)分標(biāo)準(zhǔn)對(duì)各組提交的作品進(jìn)行小組互評(píng)，票選出得分最高的一組，由票選出來(lái)的冠軍組，上臺(tái)分享協(xié)作經(jīng)驗(yàn);師生結(jié)合標(biāo)準(zhǔn)共同分析各組作品的優(yōu)缺點(diǎn)以供改進(jìn)，強(qiáng)化教學(xué)重難點(diǎn)。

課后根據(jù)評(píng)價(jià)指標(biāo)以及教師的提出的修改意見(jiàn)，對(duì)作品進(jìn)一步完善，并根據(jù)Web標(biāo)準(zhǔn)對(duì)作品進(jìn)行優(yōu)化。表單項(xiàng)目各作品的冠軍組部署到阿里云供企業(yè)進(jìn)行驗(yàn)收，其他組本地部署供教師進(jìn)行驗(yàn)收。本地和云端部署網(wǎng)站都是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)必備的職業(yè)能力，通過(guò)部署熟悉真實(shí)的生產(chǎn)環(huán)境，鞏固學(xué)習(xí)成果，學(xué)生在教學(xué)平臺(tái)上根據(jù)成員表現(xiàn)評(píng)分標(biāo)準(zhǔn)進(jìn)行組內(nèi)互評(píng)。教師及時(shí)掌握學(xué)生課堂情況以便下一次的教學(xué)優(yōu)化。教師和企業(yè)導(dǎo)師對(duì)作品共同進(jìn)行總結(jié)點(diǎn)評(píng)，明確達(dá)成客戶需求和用戶體驗(yàn)的目的。冠軍組作品如圖5所示。

3? 教學(xué)實(shí)施效果

從學(xué)生調(diào)查問(wèn)卷結(jié)果來(lái)評(píng)價(jià)分析。對(duì)于“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程，學(xué)生表現(xiàn)出了很大的學(xué)習(xí)興趣，能夠接受并適應(yīng)基于實(shí)際工作過(guò)程的項(xiàng)目教學(xué)方式，對(duì)本門課程的教材、教學(xué)案例、實(shí)訓(xùn)操作等都比較滿意，覺(jué)得課程非常有意義。通過(guò)本學(xué)期的課程學(xué)習(xí)，班級(jí)中58%的學(xué)生對(duì)于“網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)”工作崗位的工作流程有很好地了解，42%的學(xué)生基本了解，說(shuō)明經(jīng)過(guò)基于實(shí)際工作任務(wù)的項(xiàng)目教學(xué)過(guò)程，學(xué)生們對(duì)未來(lái)相關(guān)的工作崗位有了一定的認(rèn)識(shí)，對(duì)整體工作流程有了一定的熟悉感，提高了學(xué)生對(duì)今后工作的適應(yīng)能力，在畢業(yè)進(jìn)入職場(chǎng)后能盡快的進(jìn)入工作狀態(tài)[1]，如圖6所示。

4? 結(jié)? 論

本研究按照標(biāo)準(zhǔn)化工作流程組織了教學(xué)過(guò)程。學(xué)生按照真實(shí)標(biāo)準(zhǔn)化工作流程，采用角色扮演法沉浸式學(xué)習(xí)，在小組協(xié)作過(guò)程中，有效提升學(xué)生的合作能力、崗位操作能力和職業(yè)素養(yǎng)，通過(guò)不斷完善作品，培養(yǎng)學(xué)生精益求精的工匠精神，目前，“助農(nóng)網(wǎng)”已經(jīng)部署到阿里云試運(yùn)行。通過(guò)基于工作過(guò)程的教學(xué)思路，對(duì)項(xiàng)目教學(xué)法在教學(xué)中的具體設(shè)計(jì)、方法和實(shí)施的效果進(jìn)行實(shí)踐性研究，使學(xué)生掌握了課堂知識(shí)的同時(shí)也掌握了實(shí)際的工作流程，在校期間就積累了豐富的項(xiàng)目經(jīng)驗(yàn)，未來(lái)能夠更快更好的適應(yīng)網(wǎng)站開(kāi)發(fā)的工作崗位。

參考文獻(xiàn)：

[1] 張潔.基于工作任務(wù)的項(xiàng)目教學(xué)在高職課程中的應(yīng)用研究 [D].石家莊：河北師范大學(xué)，2012.

[2] 凌云.高職計(jì)算機(jī)專業(yè)教學(xué)引入項(xiàng)目教學(xué)法的實(shí)踐 [J].職業(yè)技術(shù)教育，2007，28（11）：32-33.

[3] 朱鵬.基于就業(yè)能力導(dǎo)向的高職院校人才培養(yǎng)模式的創(chuàng)新研究 [D].長(zhǎng)沙：湘潭大學(xué)，2015.

作者簡(jiǎn)介：黃鶯（1984—），女，漢族，安徽馬鞍山人，計(jì)算機(jī)教師，本科，學(xué)士學(xué)位，研究方向：Linux應(yīng)用、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)。