摘要：網(wǎng)頁設(shè)計與制作作為高等學校計算機基礎(chǔ)教育的主干課程之一，由于其中涉及到了代碼的編寫和調(diào)試，對于許多非計算機專業(yè)的學生來說存在一定的難度。針對這一問題，在網(wǎng)頁設(shè)計與制作課程中的層疊樣式表CSS、模板和庫項目以及JavaScript的教學中引入了學習遷移理論。通過把學生們已經(jīng)掌握的Office系列軟件中的知識與網(wǎng)頁設(shè)計與制作課程相應(yīng)的概念做類比，消除同學們對新內(nèi)容的距離感和陌生感。在實際教學中，取得了良好的教學效果。

關(guān)鍵詞：學習遷移；網(wǎng)頁設(shè)計與制作；CSS；模板；JavaScript

中圖分類號：G442 文獻標識碼：A 文章編號：1009-3044（2013）02-0423-04

1 概述

學習遷移理論是指一種學習對另一種學習的影響。學習遷移的作用在于使習得的知識和經(jīng)驗得以概括化、系統(tǒng)化，形成一種穩(wěn)定的整合的心理結(jié)構(gòu)，給學習者帶來事半功倍的學習效率。它既包括先前學習對后繼學習的影響，也包括后繼學習對先前學習的影響[1-3]。網(wǎng)頁設(shè)計與制作課程是在大學計算機基礎(chǔ)課程之后，許多非計算機專業(yè)本科生所要學習的一門課程。由于其中涉及到許多接近編程方面的知識，學生在掌握起來遇到了不小的困難。在課程中引入合適的教學方法將能夠大大減少學生學習中的障礙，提高教學效率。通過在網(wǎng)頁設(shè)計與制作課程引入學習遷移理論，并進行相關(guān)的實踐教學活動，取得了良好的教學效果。

2 基于學習遷移理論設(shè)計網(wǎng)頁設(shè)計與制作的教學

學生在學校獲得知識、技能、行為以及態(tài)度的過程中，必然存在新舊知識和經(jīng)驗之間的相互影響。學生在學習網(wǎng)頁設(shè)計與制作課程之前，通過大學計算機基礎(chǔ)課程的學習，已經(jīng)普遍掌握了Office系列軟件，如Word、Excel和PowerPoint的使用。在網(wǎng)頁設(shè)計與制作課程中，借助于同學們已經(jīng)掌握的知識來促進這門課程的學習，即通過學習遷移的方法使同學們感到這門課程中的許多內(nèi)容使用到的方法都是他們已經(jīng)掌握的，從而達到降低學習的難度的目的。

2.1 基于學習遷移理論設(shè)計CSS的教學

在網(wǎng)頁設(shè)計與制作這門課程中，學生一開始接觸的是HTML的基本標簽。對于這一部分，經(jīng)過一定的講解，學生一般都能夠掌握。當進入到層疊樣式表CSS[4][5]的學習時，由于CSS涉及的屬性非常多，因此會使學生覺得CSS較難掌握。為了使學生把過去已有的經(jīng)驗轉(zhuǎn)移到CSS學習中，使他們可以利用原有的經(jīng)驗來掌握CSS，在課程中設(shè)計了以下2個方法：

方法1：日常生活中物體和網(wǎng)頁設(shè)計中元素的類比

CSS的基本使用方式是使用一系列屬性和屬性值對某一個網(wǎng)頁上的元素進行描述。而在日常生活中，人們對于某一物體的描述在某種程度上也是遵循同樣的原則。在課程中，使用了學生較為感興趣的iPad這一生活中的物體描述作為CSS描述的類比，使得學生了解CSS不過是網(wǎng)頁中按照同樣的方式來描述網(wǎng)頁中的元素。如在圖1中顯示了現(xiàn)實世界里人們描述iPad時使用的方式，圖2顯示了網(wǎng)頁設(shè)計中通過CSS中對網(wǎng)頁中的元素進行描述和定義，可以看出它們之間具有很大的相似性。

圖1 iPad的屬性信息

圖2 網(wǎng)頁設(shè)計中h1樣式的屬性信息

方法2：Word課程中樣式概念和網(wǎng)頁設(shè)計中CSS的類比

在學生們已經(jīng)學過Office系列軟件中的Word軟件中，存在樣式的概念。通過應(yīng)用Word中內(nèi)置的樣式或新建自定義樣式，可以完成對Word文檔中的文字和段落等內(nèi)容格式的設(shè)置。在網(wǎng)頁設(shè)計中的層疊樣式表CSS，同樣存在應(yīng)用已有的HTML標簽樣式和新建CSS的概念和操作。

在課堂教學中，先通過回顧在Word軟件中是如何進行樣式的編輯，再在網(wǎng)頁設(shè)計軟件Dreamweaver中演示如何進行網(wǎng)頁設(shè)計中CSS樣式的編輯，可以促使學生們把之前的經(jīng)驗引入到CSS的學習中，進而促進對CSS的理解和使用。如在Word軟件中，樣式的編輯是從字體、段落、制表位、邊框等幾個方面進行的，如圖3所示。其中，字體格式的設(shè)置包括字體、字號、加粗、顏色、下劃線等常用設(shè)置；段落格式的設(shè)置包括首行縮進、段前、段后、行距等常用設(shè)置。

圖 3 Word中樣式的編輯對話框

在Dreamweaver中，雖然在樣式的分類方面有所不同，如類型、背景、區(qū)塊、方框等，如圖4所示。但其本質(zhì)上和Word軟件是一樣的，都可以設(shè)置關(guān)于字體，段落，邊框等方面的格式。如在CSS中，字體格式的字體、字號、加粗、顏色、下劃線分別對應(yīng)的CSS屬性是：font-family、font-size、color、text-decoration，段落格式的首行縮進、段前、段后、行距分別對應(yīng)的CSS屬性是：text-indent、margin-top、margin-bottom、line-height。

圖 4 Dreamweaver中CSS的規(guī)則定義對話框

2.2 基于學習遷移理論設(shè)計模板和庫項目的教學

在Dreamweaver軟件中，模板是一種特殊的文檔，用于設(shè)計“固定的”頁面布局。它用來產(chǎn)生帶有固定特征和共同格式的文檔基礎(chǔ)，是用戶進行批量生產(chǎn)文檔的起點?？梢詫⑽臋n中的任意內(nèi)容存儲為庫項目，從而達到重復(fù)使用的效果[6]。在Dreamweaver軟件中通過模板建立新文件如圖5所示。

圖 5 Dreamweaver軟件中通過模板建立新文件

在Dreamweaver軟件的模板中需要通過“可編輯區(qū)域”把變化的部分標識出來，相應(yīng)的不需要變化的部分被稱為“鎖定區(qū)域”。哪些部分應(yīng)該被定義為“可編輯區(qū)域”，哪些部分應(yīng)該是“鎖定區(qū)域”，以及使用模板究竟帶來什么好處，對于部分同學來說理解和難以掌握。

課堂教學中，在學習遷移理論的指導(dǎo)下，先回顧了Word軟件中模板的概念，基于Word軟件中的模板，可以創(chuàng)建一系列風格類似的Word文檔，如圖6所示：

圖 6 Word中通過模板建立新文件

然后對Word軟件中使用模板的步驟和Dreamweaver軟件中使用模板的步驟進行了類比和比較。

在Word軟件中，編輯模板以及使用模板的步驟可以被概括為：

1） 創(chuàng)建模板文件；2） 在模板文件中，在需要變化的地方插入“域”或者“控件”，不需要變化的地方直接輸入文字、插入圖像等元素；3） 基于模板文件創(chuàng)建新的Word文檔。

在Dreamweaver軟件中，編輯模板以及使用模板的步驟可以被地概括為：

1） 創(chuàng)建模板文件；2） 在模板文件中，在需要變化的地方插入“可編輯區(qū)域”，不需要變化的地方直接輸入文字、插入圖像等元素。3） 基于模板文件創(chuàng)建新的HTML文檔。

可以看出，雖然面向的是不同的軟件和文檔，在模板的使用方面是基本類似的。所不同的是在Dreamweaver軟件中，用“可編輯區(qū)域”的概念替換了Word中的“域”或者“控件”。但是在Dreamweaver軟件中，也有一些概念是Word軟件中沒有的，表1 是對這2個軟件中模板相關(guān)概念的對比：

表1 Word和Dreamweaver相關(guān)概念的對比

[概念＼&Word＼&Dreamweaver＼&模板文件＼&dotx文件＼&dwt文件＼&可變化的內(nèi)容＼&域、控件＼&可編輯區(qū)域＼&鎖定區(qū)域＼&無此概念＼&非可編輯區(qū)域的區(qū)域為鎖定區(qū)域＼&脫離模板＼&無此概念＼&基于模板創(chuàng)建的文件可以脫離模板，脫離模板后模板的更新不會影響到這一文件＼&]

在Word軟件中，可以通過“把所選內(nèi)容保存到文檔部件庫”的功能把一些文檔中反復(fù)使用的內(nèi)容定義為“構(gòu)建基塊”，從而利于對這些內(nèi)容的重用。在Dreamweaver軟件中，庫項目用來完成同樣的功能。它們的使用方式可以被共同地概括為：

1） 把文檔中需要重用的部分選中并定義為庫項目（構(gòu)建基塊），選中的內(nèi)容可以是文字、圖像等任意內(nèi)容。2）在需要重用內(nèi)容的地方，插入庫項目（構(gòu)建基塊）。

通過與Word軟件的類比，Dreamweaver中模板和庫項目的學習完全被納入到了學生已有的知識體系中，從而降低了學習的難度。

2.3 基于學習遷移理論設(shè)計JavaScript的教學

在W3C組織制定的關(guān)于網(wǎng)頁的規(guī)范中，HTML用來實現(xiàn)網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS用來實現(xiàn)網(wǎng)頁的樣式，JavaScript[7][8]腳本語言用來實現(xiàn)網(wǎng)頁的行為。在目前的網(wǎng)站中，多級菜單、多標簽欄文本、自動輪轉(zhuǎn)圖像、輸入框的自動完成等效果都離不開JavaScript的編寫。與HTML這種描述性的語言相比，JavaScript是一種解釋型的腳本語言，有較為嚴格的語法和語義，對于學習網(wǎng)頁設(shè)計與制作這門課程的非計算機專業(yè)的學生來說，掌握起來尤其困難。

在學期遷移理論的指導(dǎo)下，可以發(fā)現(xiàn)在學生們已經(jīng)學過的Excel軟件中的許多概念可以在JavaScript中找到對應(yīng)的參照對象。如在Excel軟件中，基本的數(shù)據(jù)類型有數(shù)值、文本、公式，除此之外還有特殊的數(shù)據(jù)類型，如邏輯值。數(shù)值數(shù)據(jù)中又包含數(shù)字、日期、時間、百分比等數(shù)據(jù)類型。在JavaScript中，也包括數(shù)值、字符串型、布爾型、日期等數(shù)據(jù)類型。有了Excel做基礎(chǔ)，在課程中講述這一部分內(nèi)容時就可以較為輕松的使同學們發(fā)現(xiàn)JavaScript與Excel軟件數(shù)據(jù)運算之間的相似性。圖7、8中顯示了通過分別在Excel軟件和JavaScript實現(xiàn)加法運算的例子。在Excel軟件中進行運算時，可以通過類似A2、B2這樣的單元格引用來獲得某一單元格中的值并進行運算；而在JavaScript中，可以通過如下的方式進行運算：

m=parseInt（document.form1.add1.value，10）；

n=parseInt（document.form1.add2.value，10）；

mResult=m+n；

document.getElementById（"result"）.innerHTML=mResult；

圖 7 Excel中單元格的相加

圖 8 網(wǎng)頁設(shè)計中通過JavaScript進行數(shù)字的相加

對于函數(shù)這一任何編程語言中都少不了的概念，同學們在Excel中就已經(jīng)認識了sum、average等函數(shù)，也認識了通過if這一用來進行邏輯判斷的函數(shù)判斷某一單元格中的數(shù)據(jù)是否符合某個條件。在網(wǎng)頁設(shè)計與制作的課程中，同樣是利用if函數(shù)，但是使用的場景變換到了用來驗證網(wǎng)頁中用戶輸入的數(shù)據(jù)是否滿足一定的條件，如用戶名的合法格式和密碼長度的問題。

3 結(jié)論

網(wǎng)頁設(shè)計與制作課程是一門涉及到許多學科的綜合課程，其中的許多概念對于同學們來說都比較陌生并且不容易理解。通過學習遷移理論的引入，在課程的教學設(shè)計中，有意識地把同學們已經(jīng)接觸過的概念和知識引入到課程中，并由這些概念和知識作為切入點來講解新的內(nèi)容，消除同學們對新內(nèi)容的距離感和陌生感，使他們能夠快速地進入到學習的場景中。在實際教學中取得了良好的教學效果。

參考文獻：

[1] 朱文彬，趙淑文.高等教育心理學[M].北京：首都師范大學出版社，2007.

[2] 王文靜. 促進學習遷移的策略研究[J]. 教育科學，2004（2）：26-29.

[3] 趙文婷，張婷燕，李澤華. 學習遷移理論在C語言教學中的應(yīng)用[J].學周刊，2012（35）：160-161.

[4] 溫謙.CSS設(shè)計徹底研究[M].北京：人民郵電出版社，2008.

[5] 陸凌牛. HTML 5與CSS 3權(quán)威指南[M].機械工業(yè)出版社，2011.

[6] 劉強，張阿敏，翁艷彬. 網(wǎng)頁設(shè)計與制作[M].北京：高等教育出版社，2010.

[7] 陳爭航. JavaScript編程寶典[M].北京：電子工業(yè)出版社，2008.

[8] 弗蘭納根. JavaScript權(quán)威指南[M].機械工業(yè)出版社，2012.