基于任務驅動的網頁編程教學方法探究

馬春艷　梁霞　王海峪

摘 要：隨著互聯網的發展，網頁編程發展越來越快，開發軟件日新月異，但無論怎么變化，網頁編程的核心卻沒有變，那就是HTML、CSS和JavaScript。本文以任務驅動的形式闡述網頁編程的教學方法。

關鍵詞：HTML；CSS；JavaScript

HTML是超文本標記語言（HyperText Markup Language）的縮寫，是制作網頁的基礎。

CSS是Cascading Style Sheet的縮寫。也稱之為“層疊樣式表”，是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。JavaScript是一種腳本語言，比HTML要復雜，使用它可以使頁面更加豐富多彩。本人在教學實踐中不斷的探究網頁編程的教學方法，完善教學手段，幾年來取得了良好的教學效果，下面對任務驅動式教學在本課程中的具體應用做一總結。

1 任務驅動教學法簡介

“任務驅動教學法”是一種建立在建構主義學習理論基礎上的教學法，它將以往以傳授知識為主的傳統教學理念，轉變為以解決問題、完成任務為主的多維互動式的教學理念；將再現式教學轉變為探究式學習，使學生處于積極的學習狀態，每一位學生都能根據自己對當前問題的理解，運用共有的知識和自己特有的經驗提出方案、解決問題。

2 任務驅動教學法在網頁編程中的應用

由于網頁編程是一門實踐性很強的課程，老師單純的理論講解，激發不了學生的學習興趣，很容易引起學生的厭學情緒，以任務為導向，在講解HTML、CSS和JavaScript理論知識的一開始就以一個案例的形式先讓學生感受到將要學習的內容可以實現這么精彩的網頁，然后根據這個案例任務引導學生學習理論知識，在學習的同時完成這個案例任務的制作，通過學習以及實踐可以加深學生的理解能力以及運用的能力。此外，可以提高學生解決問題的能力。

2.1 HTML語言

HTML是編寫網頁的基礎，內容也很多，因此在這一章可以分成三個任務案例來講解，每一個任務都是一個精彩的網頁。任務一主要講述HTML的基本構成，網頁中可以添加的基本元素以及表單等，這部分的理論知識主要通過任務案例直觀理解。任務二主要講述表格以及如何使用表格布局頁面，在講述布局頁面的時候，可以添加一個案例，用來專門講解布局方面的問題，理論部分講解完后，可以給學生留一個作業，把剛才的案例自己用表格布局來完成，達到鞏固知識的目的。任務三主要簡述框架布局，在講述框架這部分內容時，還是以實踐為主導，把任務三少部分的案例頁面發給學生，讓他們完成剩余的部分，這樣可以激發學生的學習興趣，并且做到有的放矢。這樣每一個任務都有一個明確的目標以及視覺上的感受，當學生學習理論知識后就可以輕松的完成開始的時候老師給的任務案例了，最后可以加一個知識拓展的內容，把任務中沒有涉及的知識點加進去。

2.2 CSS樣式

CSS樣式的屬性很多，不容易掌握，同樣以一個任務案例的形式展示一個網頁，用加了樣式的網頁和沒有加樣式的網頁進行一下對比，學生就會感受到加了樣式的網頁更加的精美，從而激發了學生的學習興趣，如果以Dreamweaver為編寫軟件的話，軟件有自動提示功能，所以學生編寫代碼部分就不會那么費力了。CSS的屬性比較多，可以講解比較常用的部分，例如背景的屬性，字體的屬性，邊框的屬性，濾鏡特效等，在講解每一個屬性的時候都采用案例的形式進行。

2.3 JavaScript語言

JavaScript是一種腳本語言，主要是基于客戶端運行的，用戶點擊帶有JavaScript的網頁，網頁里的JavaScript就傳到瀏覽器，由瀏覽器對此作處理，比HTML、CSS要復雜。下拉菜單、驗證表單有效性等大量互動性功能，都是在客戶端完成的，不需要和Web Server發生任何數據交換，因此，不會增加Web Server的負擔。

在這部分中主要講解一些成熟的代碼，以三個任務的形式把JavaScript常見的應用運用到網頁中，這三個任務分別是萬年歷、輪換圖片以及注冊驗證等。通過三個任務案例，使學生對JavaScript有一個初步的認識，同時打消學生對腳本語言的恐懼心理，讓他們輕松的學習。任務一主要講述日歷的制作，任務二主要講述網頁中輪換圖片的設置，任務三主要講述表單驗證，在講述這部分內容時，把表單驗證的一部分代碼發給學生，讓他們把剩余的代碼補充完整，這樣學生在編寫代碼時就不費力了，例外在任務講解中把學生分成若干組，每一組安排幾個學得比較好的，讓他們把每個任務按照小組的形式把案例完成，完成后互相評比，互相學習，從而達到掌握的目的。

因為JavaScript寫的程序都是以源代碼的形式出現的，也就是說你在一個網頁里看到一段比較好的JavaScript代碼，恰好你也用得上，就可以直接拷貝，然后放到你的網頁中去。正因為可以借鑒、參考優秀網頁的代碼，所以讓學生學習起來就不會那么費勁了

另外，本課程可安排一周的課程實訓，網頁編程課程實訓是本課程實踐教學的重要組成部分。是對學生掌握本門課程教學內容、運用所學知識解決實際問題能力的檢驗，通過課程實訓的實施，達到了提高學生動手能力，增加了學生實際工作經驗。

[參考文獻]

[1]胡宇.談信息技術課堂教學中創造性思維的培養[J].湖南：教育教學論文網.

[2]殷寶良.高等成人教育教學模式創新研究[J].南京：文教資料，2006.1（345）.

[3]曲偉峰，等.網頁編程技術[M].北京：電子工業出版社.