在任務(wù)驅(qū)動(dòng)和項(xiàng)目化教學(xué)模式下的《網(wǎng)站建設(shè)》課教學(xué)探析

孫瑋

【摘 要】《網(wǎng)站建設(shè)》是一門理論性、實(shí)踐性、應(yīng)用性，創(chuàng)新性要求都很高的課程，很適合任務(wù)驅(qū)動(dòng)下的項(xiàng)目化教學(xué)。項(xiàng)目設(shè)計(jì)貼近實(shí)際工作，選題精確、明確教學(xué)目標(biāo)、重點(diǎn)難點(diǎn)，將項(xiàng)目分解成若干個(gè)小任務(wù)，促進(jìn)學(xué)生全面掌握網(wǎng)站建設(shè)的知識技能，進(jìn)而能自主設(shè)計(jì)完成網(wǎng)站的開發(fā)、設(shè)計(jì)和實(shí)施。最后要注重科學(xué)評價(jià)，堅(jiān)持進(jìn)行職業(yè)能力的培養(yǎng)。

【關(guān)鍵詞】網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)；項(xiàng)目化教學(xué)；應(yīng)用人才培養(yǎng)

1 研究背景

對于新時(shí)期的大學(xué)生來說，學(xué)習(xí)應(yīng)該是一種生動(dòng)活潑的、主動(dòng)和富有個(gè)性的創(chuàng)造過程，90后，00后學(xué)生追求的是一種精彩而有內(nèi)涵的學(xué)習(xí)體驗(yàn)。在新的教育環(huán)境下，我們作為教育引導(dǎo)者必須注重學(xué)生個(gè)性的發(fā)掘與探索，與學(xué)生建立良好的師生互動(dòng)關(guān)系，豐富上課形式，采用多元科學(xué)的評定手段，給學(xué)生一個(gè)多姿多彩的學(xué)習(xí)體驗(yàn)。

2 項(xiàng)目化教學(xué)和任務(wù)驅(qū)動(dòng)教學(xué)法

項(xiàng)目化教學(xué)是師生通過共同實(shí)施一個(gè)完整的項(xiàng)目工作而進(jìn)行的教學(xué)活動(dòng)，是目前職業(yè)院校普遍實(shí)踐的教學(xué)方法。項(xiàng)目教學(xué)法是“行為導(dǎo)向”教學(xué)法的一種。一個(gè)項(xiàng)目是一項(xiàng)計(jì)劃好的有固定的開始時(shí)間和結(jié)束的時(shí)間的工作。原則上項(xiàng)目結(jié)束后應(yīng)有一件較完整的作品。本文所指項(xiàng)目是以實(shí)際的職業(yè)活動(dòng)為背景，情境真實(shí)，數(shù)據(jù)具體，內(nèi)容實(shí)用的、典型的、復(fù)雜的、學(xué)生有興趣的、綜合的課程教學(xué)并且按照認(rèn)識論的要求即按照認(rèn)知規(guī)律進(jìn)行知識內(nèi)容整合的項(xiàng)目。項(xiàng)目化教學(xué)設(shè)計(jì)尤其是單元教學(xué)設(shè)計(jì)，要根據(jù)教學(xué)目標(biāo)（能力目標(biāo)、知識目標(biāo)、素質(zhì)目標(biāo)）的需求，按照崗位工作實(shí)際發(fā)生的情境來設(shè)計(jì)。

任務(wù)驅(qū)動(dòng)教學(xué)法是一種建立在建構(gòu)主義教學(xué)理論基礎(chǔ)上的教學(xué)法。所謂任務(wù)驅(qū)動(dòng)教學(xué)法，就是讓學(xué)生在一個(gè)典型的處理"任務(wù)"的驅(qū)動(dòng)下，展開教學(xué)活動(dòng)，引導(dǎo)學(xué)生由簡到繁、由易到難、循序漸進(jìn)地完成一系列“任務(wù)”，從而得到清晰的思路、方法和知識的脈絡(luò)，在完成“任務(wù)”的過程中，培養(yǎng)分析問題、解決問題以及處理問題的能力。

3 教學(xué)具體目標(biāo)

網(wǎng)站建設(shè)是一門理論性、實(shí)踐性、應(yīng)用性，創(chuàng)新性要求都很高的課程，采用講授與實(shí)踐相結(jié)合，項(xiàng)目導(dǎo)向任務(wù)驅(qū)動(dòng)的教學(xué)方式。以項(xiàng)目為線索，將Dreamweaver的主要功能與內(nèi)容穿插于項(xiàng)目之中，每個(gè)項(xiàng)目又循序漸進(jìn)分解為多個(gè)任務(wù)，通過完成任務(wù)，掌握WEB站點(diǎn)設(shè)計(jì)與開發(fā)的方法與技巧。

教學(xué)具體目標(biāo)如下：

3.1 能力目標(biāo)

（1）能收集、處理、準(zhǔn)備和加工信息。（2）能設(shè)計(jì)網(wǎng)頁及網(wǎng)頁中的圖形、動(dòng)畫。（3）能獨(dú)立設(shè)計(jì)一個(gè)內(nèi)容完整、圖文并茂、技術(shù)運(yùn)用得當(dāng)?shù)木W(wǎng)站。（4）能初步開發(fā)一個(gè)網(wǎng)站，并進(jìn)行維護(hù)和管理。

3.2 知識目標(biāo)

（1）掌握網(wǎng)頁的構(gòu)成和頁面控制。（2）掌握插入文本、圖像、動(dòng)畫、表單、音樂、視頻的操作。（3）掌握超級鏈接的使用。（4）掌握表格布局、框架、DIV的使用。（5）掌握CSS的樣式的定義、設(shè)置及應(yīng)用。（6）掌握模板和庫的使用。（7）掌握J(rèn)avascript技術(shù)、行為的使用。（8）掌握網(wǎng)站的規(guī)劃和管理。

3.3 素質(zhì)目標(biāo)

（1）培養(yǎng)學(xué)生樂觀向上的敬業(yè)精神。（2）培養(yǎng)學(xué)生知識獲取和應(yīng)用的自主學(xué)習(xí)能力。（3）培養(yǎng)學(xué)生溝通協(xié)作的團(tuán)隊(duì)意識。（4）培養(yǎng)學(xué)生探索實(shí)踐的創(chuàng)新能力。（5）具有一定的科學(xué)思維方式和判斷分析問題的能力。（6）具有較強(qiáng)的網(wǎng)頁設(shè)計(jì)創(chuàng)意思維，藝術(shù)設(shè)計(jì)素質(zhì)。

4 教學(xué)項(xiàng)目設(shè)計(jì)與實(shí)施

4.1 教學(xué)項(xiàng)目設(shè)計(jì)

我校學(xué)生學(xué)習(xí)《網(wǎng)站建設(shè)》課安排學(xué)時(shí)為一學(xué)期，72學(xué)時(shí)，針對學(xué)生之前沒有學(xué)過專業(yè)課動(dòng)手能力較弱的實(shí)際情況，課程以靜態(tài)網(wǎng)頁教學(xué)為主，下半學(xué)期加入部分動(dòng)態(tài)網(wǎng)站教學(xué)。項(xiàng)目化教學(xué)的關(guān)鍵是項(xiàng)目的質(zhì)量，項(xiàng)目應(yīng)貼近實(shí)際，涵蓋相關(guān)知識點(diǎn)，符合學(xué)生的認(rèn)知和審美。本課共設(shè)計(jì)十六個(gè)項(xiàng)目，因文章篇幅所限列出四個(gè)（見表1）。

4.2 教學(xué)實(shí)施過程

教學(xué)過程中，教師通過項(xiàng)目教學(xué)演示完成網(wǎng)頁基礎(chǔ)知識的講授，教會學(xué)生基本方法和基本操作，讓學(xué)生模仿完成項(xiàng)目，學(xué)生在操作過程中會遇到很多困難尋求同學(xué)和老師協(xié)助，最終運(yùn)用所學(xué)的知識技能自主完成項(xiàng)目任務(wù)。

例如在學(xué)習(xí)DIV布局加CSS設(shè)計(jì)樣式部分，學(xué)生往往感覺自己遇到很多莫明其妙的問題，其實(shí)是一些小細(xì)節(jié)沒有弄清楚，教師要根據(jù)學(xué)生普遍遇到的情況列出了問題與解決技巧，及時(shí)講解。比如（1）檢查HTML元素是否有拼寫錯(cuò)誤、是否忘記結(jié)束標(biāo)記，即使是老手也經(jīng)常會弄錯(cuò)div的嵌套關(guān)系?？梢杂肈reamweaver的驗(yàn)證功能檢查一下有無錯(cuò)誤。（2）檢查CSS是否正確，檢查一下有無拼寫錯(cuò)誤、是否忘記結(jié)尾的}等?？梢岳肅leanCSS來檢查CSS的拼寫錯(cuò)誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯(cuò)誤等等。這些細(xì)節(jié)問題在項(xiàng)目最后要做總結(jié)溫故而知新。

過去的教學(xué)中對于注意站點(diǎn)路徑結(jié)構(gòu)，檢查頁面鏈接的正確性、網(wǎng)站內(nèi)容更新、網(wǎng)站訪問效率優(yōu)化等，學(xué)生沒有真實(shí)網(wǎng)站管理維護(hù)體驗(yàn)，在學(xué)習(xí)中就不會重視。在“項(xiàng)目8網(wǎng)站發(fā)布和管理、維護(hù)”的學(xué)習(xí)中，教師指導(dǎo)學(xué)生申請免費(fèi)空間和域名，建立配置遠(yuǎn)程站點(diǎn)，上傳本地文檔，使用瀏覽器瀏覽網(wǎng)頁。經(jīng)過檢查內(nèi)容有沒有錯(cuò)誤；檢查超鏈接跳轉(zhuǎn)的正確性；檢查文檔的存放、下載的情況如何等多項(xiàng)檢測，學(xué)生會發(fā)現(xiàn)網(wǎng)站中各種錯(cuò)誤，教師正好拿出這些實(shí)際的、有體驗(yàn)的案例來講解網(wǎng)站管理維護(hù)過程，學(xué)生會更重視去改正網(wǎng)站設(shè)計(jì)中的錯(cuò)誤，也有了網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)的職業(yè)體驗(yàn)；這樣的教學(xué)過程，實(shí)現(xiàn)了教、學(xué)、做、應(yīng)用的一體化，促使學(xué)生對知識的理解掌握，也真正達(dá)到了學(xué)以致用的教學(xué)效果。

教學(xué)中我們還選擇網(wǎng)上的一些優(yōu)秀網(wǎng)站作為教學(xué)案例輔助介紹課程的知識點(diǎn)和擴(kuò)展內(nèi)容。引導(dǎo)鼓勵(lì)學(xué)生自主尋找，學(xué)習(xí)、模仿自己欣賞的網(wǎng)站，參與到設(shè)計(jì)中來，激發(fā)學(xué)習(xí)興趣，增強(qiáng)學(xué)習(xí)的成就感。同時(shí)要教會學(xué)生主動(dòng)搜索學(xué)習(xí)資料，一方面通過教師提供的教學(xué)資源如筆記、ppt、微課等，一方面通過網(wǎng)上論壇的帖子、公開課，公眾號等查找、解決項(xiàng)目中遇到的技術(shù)問題，這樣既幫助解決實(shí)際問題，還提高了學(xué)生發(fā)掘新信息的能力，在學(xué)習(xí)《網(wǎng)站建設(shè)》這門課的同時(shí)學(xué)生也在學(xué)習(xí)《PHOTOSHOP應(yīng)用》課，學(xué)以致用，可運(yùn)用所學(xué)圖形圖像處理技術(shù)為自己的網(wǎng)站制作圖標(biāo)、按鈕，處理素材。

5 教學(xué)評價(jià)

教師帶領(lǐng)大家從網(wǎng)站文檔設(shè)計(jì)的規(guī)范性、系統(tǒng)運(yùn)行的正確性、系統(tǒng)功能的完善性和人機(jī)界面設(shè)計(jì)的好壞等方面加以評價(jià)，幫助學(xué)生總結(jié)經(jīng)驗(yàn)，找到薄弱環(huán)節(jié)，調(diào)整學(xué)習(xí)方法，進(jìn)行有效的改進(jìn)，促使學(xué)生綜合運(yùn)用知識的能力得到提升。

6 教學(xué)效果

使用項(xiàng)目教學(xué)法兩年，學(xué)生學(xué)習(xí)效率提高很明顯，主要得益于項(xiàng)目設(shè)計(jì)的合理。以前純粹按照知識結(jié)構(gòu)劃分模塊進(jìn)行教學(xué)，學(xué)生最后不知道如何整合應(yīng)用。最明顯的變化之一是HTML語言的學(xué)習(xí)，傳統(tǒng)方法是花四到六個(gè)課時(shí)單獨(dú)講解HTML語言結(jié)構(gòu)、書寫規(guī)范，標(biāo)簽等等，但是實(shí)際結(jié)合表格或者DIV和CSS樣式等使用時(shí)，學(xué)生依然覺得看代碼很難。改變了項(xiàng)目設(shè)計(jì)之后，從項(xiàng)目三開始將HTML語言的講解和使用穿插到每一個(gè)項(xiàng)目之中，逐漸展開，特別是針對學(xué)生遇到問題時(shí)，糾正代碼錯(cuò)誤，展現(xiàn)改代碼解決問題的優(yōu)勢，拉近了抽象的代碼和學(xué)生的距離。經(jīng)過大半學(xué)期的訓(xùn)練，學(xué)生已經(jīng)很熟悉編寫修改HTML代碼了。

總體而言，學(xué)生在完成指定項(xiàng)目的同時(shí)，學(xué)習(xí)和應(yīng)用新舊知識，進(jìn)行基于應(yīng)用的項(xiàng)目建設(shè)全程演練，完成從“學(xué)習(xí)知識”到“應(yīng)用知識”的轉(zhuǎn)變。學(xué)習(xí)從項(xiàng)目規(guī)劃、設(shè)計(jì)到最終實(shí)現(xiàn)這個(gè)過程中所需要的各種知識和技巧，體驗(yàn)了真實(shí)工作環(huán)境，培養(yǎng)了自主進(jìn)行知識建構(gòu)的能力，創(chuàng)新意識也得到了很好地鍛煉。

【參考文獻(xiàn)】

[1]袁磊，陳偉衛(wèi)編著.網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程（第2版），北京：清華大學(xué)出版社，2016.

[2]謝旻旻.網(wǎng)站建設(shè)課程教學(xué)方法改革探究[J].遼寧師專學(xué)報(bào)：自然科學(xué)版，2016（03）.

[3]李博.項(xiàng)目教學(xué)法教學(xué)模式與傳統(tǒng)教學(xué)模式的比較[J].教育教學(xué)研究，2013，29：355-356.