基于任務+項目驅動的《網頁設計與制作》課程教學研究

陳 蘋

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

1 引言

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

2 《網頁設計與制作》課程要求

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

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

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

3 《網頁設計與制作》任務驅動式教學

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

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

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

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

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

4 《網頁設計與制作》項目目標導向式教學

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

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

4.1 項目選取

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

4.2 項目達成的能力目標

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

4.3 項目介紹

理論部分已經采用任務式的方式學習過HTML5+CSS3等知識，綜合實踐部分結合前面的理論知識，技術棧時采用的HTML5+CSS3等前端技術實現抖音官宣網的首頁界面設計，學生通過此次實踐可以掌握前端設計相關規范。

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

4.4 實施安排

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

4.5 成果展示

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

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

圖1 學生作品展示

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

圖2 學生實踐成績分布

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

5 結論

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