馬春艷　梁霞　王海峪

摘 要：隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁(yè)編程發(fā)展越來越快，開發(fā)軟件日新月異，但無論怎么變化，網(wǎng)頁(yè)編程的核心卻沒有變，那就是HTML、CSS和JavaScript。本文以任務(wù)驅(qū)動(dòng)的形式闡述網(wǎng)頁(yè)編程的教學(xué)方法。

關(guān)鍵詞：HTML；CSS；JavaScript

HTML是超文本標(biāo)記語言（HyperText Markup Language）的縮寫，是制作網(wǎng)頁(yè)的基礎(chǔ)。

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

1 任務(wù)驅(qū)動(dòng)教學(xué)法簡(jiǎn)介

“任務(wù)驅(qū)動(dòng)教學(xué)法”是一種建立在建構(gòu)主義學(xué)習(xí)理論基礎(chǔ)上的教學(xué)法，它將以往以傳授知識(shí)為主的傳統(tǒng)教學(xué)理念，轉(zhuǎn)變?yōu)橐越鉀Q問題、完成任務(wù)為主的多維互動(dòng)式的教學(xué)理念；將再現(xiàn)式教學(xué)轉(zhuǎn)變?yōu)樘骄渴綄W(xué)習(xí)，使學(xué)生處于積極的學(xué)習(xí)狀態(tài)，每一位學(xué)生都能根據(jù)自己對(duì)當(dāng)前問題的理解，運(yùn)用共有的知識(shí)和自己特有的經(jīng)驗(yàn)提出方案、解決問題。

2 任務(wù)驅(qū)動(dòng)教學(xué)法在網(wǎng)頁(yè)編程中的應(yīng)用

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

2.1 HTML語言

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

2.2 CSS樣式

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

2.3 JavaScript語言

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

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

因?yàn)镴avaScript寫的程序都是以源代碼的形式出現(xiàn)的，也就是說你在一個(gè)網(wǎng)頁(yè)里看到一段比較好的JavaScript代碼，恰好你也用得上，就可以直接拷貝，然后放到你的網(wǎng)頁(yè)中去。正因?yàn)榭梢越梃b、參考優(yōu)秀網(wǎng)頁(yè)的代碼，所以讓學(xué)生學(xué)習(xí)起來就不會(huì)那么費(fèi)勁了

另外，本課程可安排一周的課程實(shí)訓(xùn)，網(wǎng)頁(yè)編程課程實(shí)訓(xùn)是本課程實(shí)踐教學(xué)的重要組成部分。是對(duì)學(xué)生掌握本門課程教學(xué)內(nèi)容、運(yùn)用所學(xué)知識(shí)解決實(shí)際問題能力的檢驗(yàn)，通過課程實(shí)訓(xùn)的實(shí)施，達(dá)到了提高學(xué)生動(dòng)手能力，增加了學(xué)生實(shí)際工作經(jīng)驗(yàn)。

[參考文獻(xiàn)]

[1]胡宇.談信息技術(shù)課堂教學(xué)中創(chuàng)造性思維的培養(yǎng)[J].湖南：教育教學(xué)論文網(wǎng).

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

[3]曲偉峰，等.網(wǎng)頁(yè)編程技術(shù)[M].北京：電子工業(yè)出版社.