基于任務(wù)+項(xiàng)目驅(qū)動(dòng)的《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)研究

陳 蘋

(內(nèi)江師范學(xué)院， 四川 內(nèi)江 641000)

1 引言

《網(wǎng)頁設(shè)計(jì)與制作》是內(nèi)江師范學(xué)院計(jì)算機(jī)相關(guān)專業(yè)大一新生必修的專業(yè)基礎(chǔ)課程，操作性和實(shí)踐性很強(qiáng)，需要學(xué)生能夠掌握Web前端的相關(guān)開發(fā)知識(shí)[1]。為了學(xué)生能夠熟悉網(wǎng)頁設(shè)計(jì)流程，使用常見的網(wǎng)頁布局效果，該課程對(duì)HTML5、CSS3制作網(wǎng)頁的技巧進(jìn)行了講述，為后續(xù)前端JavaScript、UI、JQuery等、網(wǎng)站開發(fā)PHP、Java等課程進(jìn)行深入學(xué)習(xí)夯實(shí)基礎(chǔ)。

2 《網(wǎng)頁設(shè)計(jì)與制作》課程要求

《網(wǎng)頁設(shè)計(jì)與制作》是一門實(shí)踐性、綜合性都較強(qiáng)的專業(yè)課程[2]，為了培養(yǎng)學(xué)生的綜合實(shí)踐應(yīng)用能力，采用校企合作理論+實(shí)驗(yàn)方式[3]，32課時(shí)的理論學(xué)時(shí)，24課時(shí)的實(shí)驗(yàn)學(xué)時(shí)。理論知識(shí)由學(xué)校教師采用任務(wù)驅(qū)動(dòng)式授課[4，5]，每個(gè)任務(wù)實(shí)施的過程中掌握任務(wù)中總結(jié)出來的理論知識(shí)點(diǎn)。實(shí)驗(yàn)部分有課堂實(shí)驗(yàn)和綜合實(shí)驗(yàn)，由學(xué)校教師和企業(yè)老師一起完成教學(xué)。課堂實(shí)驗(yàn)是學(xué)校教師指導(dǎo)完成，4個(gè)單頁面設(shè)計(jì)與制作，用實(shí)驗(yàn)報(bào)告來書寫實(shí)驗(yàn)步驟與結(jié)果。綜合實(shí)驗(yàn)是企業(yè)教師根據(jù)學(xué)生學(xué)習(xí)的理論知識(shí)指導(dǎo)完成實(shí)踐項(xiàng)目抖音沉浸式官宣網(wǎng)站，以項(xiàng)目團(tuán)隊(duì)開發(fā)的形式實(shí)現(xiàn)抖音官宣網(wǎng)界面設(shè)計(jì)。這樣學(xué)生不僅在課堂中學(xué)習(xí)了足夠的理論知識(shí)，還能接觸企業(yè)中現(xiàn)常用的技術(shù)、方法，能為后續(xù)的課堂學(xué)習(xí)提供支撐，也可以將學(xué)習(xí)到的知識(shí)運(yùn)用到以后的工作中。

本課程的授課模式為：課堂授課+上機(jī)，其中，課堂主要采用多媒體的方式進(jìn)行授課，并且會(huì)通過測(cè)試題階段測(cè)試學(xué)生的掌握程度；上機(jī)編寫Html代碼，要求學(xué)生動(dòng)手完成指定的驗(yàn)證性或綜合性頁面。使用的教學(xué)軟件：網(wǎng)頁編輯與制作軟件Adobe Dreamweaver CS6、數(shù)據(jù)庫MySQL、開發(fā)工具IDEA。

學(xué)生通過該課程的學(xué)習(xí)，學(xué)生能夠?qū)W習(xí)到:第一，了解網(wǎng)頁 web發(fā)展歷史及其未來方向；第二，熟悉網(wǎng)頁設(shè)計(jì)流程和常見網(wǎng)頁布局；第三，掌握HTML語言的文檔結(jié)構(gòu)和基本標(biāo)簽使用，能綜合應(yīng)用Dreamweaver軟件、HTML5和CSS3技術(shù)制作網(wǎng)頁；第四，掌握規(guī)劃、開發(fā)、發(fā)布和管理靜態(tài)網(wǎng)站的專業(yè)知識(shí)和技能；第五，能獨(dú)立構(gòu)建簡(jiǎn)單網(wǎng)站或通過協(xié)作方式完成較復(fù)雜網(wǎng)站的建設(shè)，學(xué)會(huì)制作各種企業(yè)、門戶、電商類網(wǎng)站。

3 《網(wǎng)頁設(shè)計(jì)與制作》任務(wù)驅(qū)動(dòng)式教學(xué)

理論知識(shí)采用的教學(xué)方式：講授、討論、演示、任務(wù)驅(qū)動(dòng)。為了讓學(xué)生幫助消化知識(shí)，會(huì)有豐富的課堂源代碼、習(xí)題、實(shí)驗(yàn)資源等自主學(xué)習(xí)資料包，在扎實(shí)的掌握知識(shí)，以便實(shí)踐中加以運(yùn)用。課堂的特點(diǎn)如下：第一，任務(wù)驅(qū)動(dòng)式講解知識(shí)點(diǎn)[6-8]；第二，從案例任務(wù)到知識(shí)點(diǎn)總結(jié)，由淺入深。第三，課后練習(xí)題，每個(gè)章節(jié)進(jìn)行階段性小結(jié)，并布置與課堂知識(shí)點(diǎn)相關(guān)的實(shí)驗(yàn)任務(wù)。第四，會(huì)有4個(gè)課堂實(shí)驗(yàn)，將課程知識(shí)通過實(shí)驗(yàn)報(bào)告的方式，讓學(xué)生獨(dú)立完成，鍛煉學(xué)生動(dòng)手能力，了解學(xué)生對(duì)知識(shí)的掌握情況。驗(yàn)證性實(shí)驗(yàn)一，唐詩頁面設(shè)計(jì)學(xué)習(xí)如何通過對(duì)文字與段落屬性的設(shè)置，來提高文字的藝術(shù)表現(xiàn)力。驗(yàn)證性實(shí)驗(yàn)二，超鏈接的制作悉常見導(dǎo)航形式，并能夠利用無序列表完成簡(jiǎn)單的導(dǎo)航設(shè)計(jì)；掌握?qǐng)D片的鏈接方法以及在頁面中修改不同鏈接形式的樣式。驗(yàn)證性實(shí)驗(yàn)三，產(chǎn)品介紹頁面的制作掌握通過表格來進(jìn)行網(wǎng)頁頁面的布局方法；理解利用Html中表格的方法及優(yōu)勢(shì)，來展示圖片、文本等內(nèi)容。綜合性實(shí)驗(yàn)四，用DIV+CSS布局的方法來構(gòu)建網(wǎng)頁結(jié)構(gòu)；掌握商業(yè)網(wǎng)站的頁面布局方式、體會(huì)使用DIV+CSS布局網(wǎng)頁的方法。

(1)任務(wù)描述。為了注重基礎(chǔ)理論知識(shí)教育，突出學(xué)生動(dòng)手能力的培養(yǎng)，將每個(gè)理論知識(shí)劃分為一個(gè)小的任務(wù)，通過案例任務(wù)來完成知識(shí)點(diǎn)的學(xué)習(xí)。從案例任務(wù)到知識(shí)點(diǎn)總結(jié)慢慢引導(dǎo)實(shí)施，學(xué)生易于自主學(xué)習(xí)。

(2)任務(wù)實(shí)施。根據(jù)任務(wù)的描述，教師半控屏演示案例，學(xué)生跟隨操作，通過操作來總結(jié)任務(wù)知識(shí)點(diǎn)，學(xué)生自己動(dòng)手加深對(duì)該知識(shí)的理解、運(yùn)用。

(3)知識(shí)拓展與訓(xùn)練。給出與任務(wù)相關(guān)的知識(shí)分享，讓學(xué)生能夠根據(jù)任務(wù)的實(shí)施自主學(xué)習(xí)，擴(kuò)展在教學(xué)內(nèi)容外的知識(shí)。

根據(jù)上面的任務(wù)驅(qū)動(dòng)式教學(xué)，按任務(wù)描述、任務(wù)實(shí)施、知識(shí)拓展與訓(xùn)練來組織教學(xué)，給出了一個(gè)理論知識(shí)點(diǎn)例子。任務(wù)描述：Html中文本格式化標(biāo)簽；任務(wù)實(shí)施：使用Dreamweaver工具書寫Html代碼，每行代碼應(yīng)用不同的文本格式化標(biāo)簽，使文字產(chǎn)生特殊的效果，學(xué)生根據(jù)預(yù)覽的效果，來總結(jié)常用的文本格式化標(biāo)簽。知識(shí)拓展與訓(xùn)練：給出特殊字符標(biāo)簽。

4 《網(wǎng)頁設(shè)計(jì)與制作》項(xiàng)目目標(biāo)導(dǎo)向式教學(xué)

最后部分是教學(xué)實(shí)踐，有8個(gè)課時(shí)貫穿全書的綜合項(xiàng)目，這部分由企業(yè)教師負(fù)責(zé)教學(xué)。課程的綜合實(shí)踐是以項(xiàng)目目標(biāo)導(dǎo)向進(jìn)行分解實(shí)施和設(shè)計(jì)的[9～12]，加強(qiáng)學(xué)生對(duì)前面理論知識(shí)點(diǎn)在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)技術(shù)上的應(yīng)用，了解互聯(lián)網(wǎng)開發(fā)中前端開發(fā)相關(guān)技術(shù)，為后續(xù)JQuery、JavaScript等前端課程，Java、PHP等網(wǎng)站開發(fā)課程提供技術(shù)支持。

項(xiàng)目目標(biāo)導(dǎo)向式教學(xué)主要從五個(gè)方面展開：項(xiàng)目的選取，學(xué)生學(xué)習(xí)項(xiàng)目需要達(dá)成的能力目標(biāo)，項(xiàng)目介紹，實(shí)施安排，成果展示。

4.1 項(xiàng)目選取

為了學(xué)生能夠在實(shí)踐項(xiàng)目中將理論知識(shí)得到運(yùn)用，選取了實(shí)踐項(xiàng)目：抖音沉浸式官宣網(wǎng)站。學(xué)生能夠掌握現(xiàn)在工作中前端流行的開發(fā)工具使用；能夠快速掌握前端基礎(chǔ)技術(shù)；能夠熟練掌握流行的頁面布局的應(yīng)用，熟練掌握視頻組件的應(yīng)用等相關(guān)應(yīng)用。

4.2 項(xiàng)目達(dá)成的能力目標(biāo)

根據(jù)學(xué)習(xí)的理論知識(shí)和選取的項(xiàng)目，學(xué)生需要達(dá)到以下7個(gè)能力目標(biāo):第一，掌握HTML、CSS語言基礎(chǔ)語法；第二，掌握HTML5+CSS3基礎(chǔ)完成可視化交互界面的開發(fā)與實(shí)現(xiàn)；第三，熟悉CSS3高級(jí)樣式應(yīng)用，如：彈性布局；定位等相關(guān)技術(shù)；第四，熟悉HTML5中視頻播放組件的應(yīng)用；第五，了解沉浸式開發(fā)所帶來的用戶交互與用戶體驗(yàn)；第六，培養(yǎng)學(xué)員對(duì)項(xiàng)目實(shí)施過程的監(jiān)控能力，能夠根據(jù)實(shí)訓(xùn)過程中的實(shí)際情況，掌控整個(gè)項(xiàng)目進(jìn)度的執(zhí)行狀況；第七，培養(yǎng)學(xué)員的團(tuán)隊(duì)協(xié)作能力，學(xué)員需在團(tuán)隊(duì)中承擔(dān)相應(yīng)的職責(zé)，并通過合作共同完成項(xiàng)目目標(biāo)。

4.3 項(xiàng)目介紹

理論部分已經(jīng)采用任務(wù)式的方式學(xué)習(xí)過HTML5+CSS3等知識(shí)，綜合實(shí)踐部分結(jié)合前面的理論知識(shí)，技術(shù)棧時(shí)采用的HTML5+CSS3等前端技術(shù)實(shí)現(xiàn)抖音官宣網(wǎng)的首頁界面設(shè)計(jì)，學(xué)生通過此次實(shí)踐可以掌握前端設(shè)計(jì)相關(guān)規(guī)范。

根據(jù)項(xiàng)目涉及的知識(shí)點(diǎn)，主要從兩個(gè)方面來提升學(xué)生的實(shí)踐動(dòng)手能力：第一，HTML5新增技術(shù)的應(yīng)用；第二，互聯(lián)網(wǎng)中彈性布局的應(yīng)用，同時(shí)學(xué)生能夠使用快速建模工具實(shí)現(xiàn)常見的圖例和模型的繪制操作。

4.4 實(shí)施安排

以企業(yè)工作方式展開教學(xué)，在實(shí)踐過程中以項(xiàng)目團(tuán)隊(duì)開發(fā)的形式，企業(yè)教師充當(dāng)整個(gè)項(xiàng)目的技術(shù)指導(dǎo)和項(xiàng)目管理角色，負(fù)責(zé)項(xiàng)目技術(shù)和整體架構(gòu)的培訓(xùn)，項(xiàng)目計(jì)劃的制定，人員分工，進(jìn)度控制等[13]。學(xué)生以5、6人為一個(gè)開發(fā)小組，有一名組長(zhǎng)擔(dān)任項(xiàng)目Leader，嚴(yán)格按照項(xiàng)目經(jīng)理的要求，遵循軟件開發(fā)的標(biāo)準(zhǔn)過程，團(tuán)隊(duì)協(xié)作共同完成項(xiàng)目。學(xué)生需要根據(jù)每課時(shí)學(xué)習(xí)的內(nèi)容，企業(yè)教師的引導(dǎo)，完成相應(yīng)的成果，動(dòng)手完成抖音官宣網(wǎng)的首頁界面設(shè)計(jì)。

4.5 成果展示

考核方式由團(tuán)隊(duì)項(xiàng)目完成情況，團(tuán)隊(duì)協(xié)作能力、工作態(tài)度，日?？记?個(gè)部分組成。成果展示方式是答辯，演示團(tuán)隊(duì)項(xiàng)目完成的成果。根據(jù)答辯指導(dǎo)意見，學(xué)生需要在本次實(shí)踐課程之后，完善并提交的成果如下：第一，完整的可運(yùn)行的項(xiàng)目，包括源代碼；第二，考核匯報(bào)PPT；第三，個(gè)人總結(jié)。

本次課有兩個(gè)班，共有95位學(xué)生。學(xué)生學(xué)習(xí)狀態(tài)很好，不管課上課下學(xué)生都會(huì)積極與老師交流、溝通。學(xué)生能夠根據(jù)分組完成企業(yè)教師的綜合項(xiàng)目，小組的作品展示如圖1所示。

圖1 學(xué)生作品展示

這門課程重在強(qiáng)調(diào)學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)綜合實(shí)踐能力的培養(yǎng)，綜合實(shí)驗(yàn)項(xiàng)目完成情況為依據(jù)，考查學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)與制作應(yīng)用知識(shí)的掌握情況。根據(jù)學(xué)生的現(xiàn)場(chǎng)答辯，3位教師提問方式，可以發(fā)現(xiàn)學(xué)生在計(jì)算機(jī)實(shí)踐能力等方面較好。2個(gè)班級(jí)中的學(xué)生綜合成績(jī)都有所提高，3位教師的綜合平均分如圖2所示。

圖2 學(xué)生實(shí)踐成績(jī)分布

在以后的課堂中，改進(jìn)措施和意見如下：第一，應(yīng)重視學(xué)生對(duì)知識(shí)綜合運(yùn)用的能力，加強(qiáng)學(xué)生實(shí)踐訓(xùn)練，培養(yǎng)學(xué)生動(dòng)手能力，尤其是綜合性實(shí)踐的訓(xùn)練；第二，根據(jù)學(xué)生對(duì)于知識(shí)的靈活應(yīng)用和掌握方面的欠缺，可以在教學(xué)過程中增加網(wǎng)頁設(shè)計(jì)與制作理論相關(guān)知識(shí)的練習(xí)題等題庫，這樣操作與理論結(jié)合有利于學(xué)生對(duì)知識(shí)的運(yùn)用；第三，加強(qiáng)學(xué)生的管理，提高他們的學(xué)習(xí)興趣。

5 結(jié)論

《網(wǎng)頁設(shè)計(jì)與制作》課程由理論+實(shí)驗(yàn)組成，為了培養(yǎng)學(xué)生網(wǎng)頁設(shè)計(jì)與開發(fā)能力，根據(jù)《網(wǎng)頁設(shè)計(jì)與制作》課程要求，采用校企合作式，將任務(wù)驅(qū)動(dòng)式和項(xiàng)目目標(biāo)導(dǎo)向式相結(jié)合應(yīng)用于《網(wǎng)頁設(shè)計(jì)與制作》課程中，在教學(xué)過程中將任務(wù)驅(qū)動(dòng)式按任務(wù)描述、任務(wù)實(shí)施、知識(shí)拓展與訓(xùn)練的方法用于理論知識(shí)教學(xué)，將項(xiàng)目目標(biāo)導(dǎo)向式從項(xiàng)目的選取、學(xué)生學(xué)習(xí)項(xiàng)目需要達(dá)成的能力目標(biāo)、項(xiàng)目介紹、實(shí)施安排、成果展示等五個(gè)方面展開用于綜合實(shí)驗(yàn)。全面培養(yǎng)了學(xué)生的網(wǎng)頁設(shè)計(jì)、網(wǎng)頁制作能力，也將學(xué)生學(xué)習(xí)到的理論知識(shí)應(yīng)用于實(shí)踐中，解決了項(xiàng)目實(shí)踐問題，提高了學(xué)生的網(wǎng)頁制作和網(wǎng)站開發(fā)技能，激發(fā)了學(xué)生的學(xué)習(xí)興趣與動(dòng)力。能將學(xué)習(xí)到的知識(shí)應(yīng)用于現(xiàn)有的職業(yè)中，使學(xué)生擁有真實(shí)的工作能力，滿足計(jì)算機(jī)專業(yè)的人才需求，增加學(xué)生的就業(yè)核心競(jìng)爭(zhēng)力。