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

陳 蘋

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

1 引言

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

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

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

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

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

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

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

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

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

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

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

4 《網(wǎng)頁設(shè)計與制作》項目目標導向式教學

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

項目目標導向式教學主要從五個方面展開：項目的選取，學生學習項目需要達成的能力目標，項目介紹，實施安排，成果展示。

4.1 項目選取

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

4.2 項目達成的能力目標

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

4.3 項目介紹

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

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

4.4 實施安排

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

4.5 成果展示

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

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

圖1 學生作品展示

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

圖2 學生實踐成績分布

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

5 結(jié)論

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