前言：本站為你精心整理了學(xué)習(xí)遷移在網(wǎng)頁設(shè)計課程中的應(yīng)用范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

當(dāng)進入到層疊樣式表CSS[4][5]的學(xué)習(xí)時，由于CSS涉及的屬性非常多，因此會使學(xué)生覺得CSS較難掌握。為了使學(xué)生把過去已有的經(jīng)驗轉(zhuǎn)移到CSS學(xué)習(xí)中，使他們可以利用原有的經(jīng)驗來掌握CSS，在課程中設(shè)計了以下2個方法：方法1：日常生活中物體和網(wǎng)頁設(shè)計中元素的類比CSS的基本使用方式是使用一系列屬性和屬性值對某一個網(wǎng)頁上的元素進行描述。而在日常生活中，人們對于某一物體的描述在某種程度上也是遵循同樣的原則。在課程中，使用了學(xué)生較為感興趣的iPad這一生活中的物體描述作為CSS描述的類比，使得學(xué)生了解CSS不過是網(wǎng)頁中按照同樣的方式來描述網(wǎng)頁中的元素。如在圖1中顯示了現(xiàn)實世界里人們描述iPad時使用的方式，圖2顯示了網(wǎng)頁設(shè)計中通過CSS中對網(wǎng)頁中的元素進行描述和定義，可以看出它們之間具有很大的相似性。方法2：Word課程中樣式概念和網(wǎng)頁設(shè)計中CSS的類比在學(xué)生們已經(jīng)學(xué)過Office系列軟件中的Word軟件中，存在樣式的概念。通過應(yīng)用Word中內(nèi)置的樣式或新建自定義樣式，可以完成對Word文檔中的文字和段落等內(nèi)容格式的設(shè)置。在網(wǎng)頁設(shè)計中的層疊樣式表CSS，同樣存在應(yīng)用已有的HTML標(biāo)簽樣式和新建CSS的概念和操作。

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

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

在Dreamweaver軟件中，模板是一種特殊的文檔，用于設(shè)計“固定的”頁面布局。它用來產(chǎn)生帶有固定特征和共同格式的文檔基礎(chǔ)，是用戶進行批量生產(chǎn)文檔的起點?？梢詫⑽臋n中的任意內(nèi)容存儲為庫項目，從而達到重復(fù)使用的效果[6]。在Dreamweaver軟件中通過模板建立新文件如圖5所示。在Dreamweaver軟件的模板中需要通過“可編輯區(qū)域”把變化的部分標(biāo)識出來，相應(yīng)的不需要變化的部分被稱為“鎖定區(qū)域”。哪些部分應(yīng)該被定義為“可編輯區(qū)域”，哪些部分應(yīng)該是“鎖定區(qū)域”，以及使用模板究竟帶來什么好處，對于部分同學(xué)來說理解和難以掌握。課堂教學(xué)中，在學(xué)習(xí)遷移理論的指導(dǎo)下，先回顧了Word軟件中模板的概念，基于Word軟件中的模板，可以創(chuàng)建一系列風(fēng)格類似的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中的“域”或者“控件”。在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中模板和庫項目的學(xué)習(xí)完全被納入到了學(xué)生已有的知識體系中，從而降低了學(xué)習(xí)的難度。

基于學(xué)習(xí)遷移理論設(shè)計JavaScript的教學(xué)

在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)站中，多級菜單、多標(biāo)簽欄文本、自動輪轉(zhuǎn)圖像、輸入框的自動完成等效果都離不開JavaScript的編寫。與HTML這種描述性的語言相比，JavaScript是一種解釋型的腳本語言，有較為嚴(yán)格的語法和語義，對于學(xué)習(xí)網(wǎng)頁設(shè)計與制作這門課程的非計算機專業(yè)的學(xué)生來說，掌握起來尤其困難。

在學(xué)期遷移理論的指導(dǎo)下，可以發(fā)現(xiàn)在學(xué)生們已經(jīng)學(xué)過的Excel軟件中的許多概念可以在JavaScript中找到對應(yīng)的參照對象。如在Excel軟件中，基本的數(shù)據(jù)類型有數(shù)值、文本、公式，除此之外還有特殊的數(shù)據(jù)類型，如邏輯值。數(shù)值數(shù)據(jù)中又包含數(shù)字、日期、時間、百分比等數(shù)據(jù)類型。在JavaScript中，也包括數(shù)值、字符串型、布爾型、日期等數(shù)據(jù)類型。有了Excel做基礎(chǔ)，在課程中講述這一部分內(nèi)容時就可以較為輕松的使同學(xué)們發(fā)現(xiàn)JavaScript與Excel軟件數(shù)據(jù)運算之間的相似性。圖7、8中顯示了通過分別在Excel軟件和JavaScript實現(xiàn)加法運算的例子。在Excel軟件中進行運算時，可以通過類似A2、B2這樣的單元格引用來獲得某一單元格中的值并進行運算；而在JavaScript中。對于函數(shù)這一任何編程語言中都少不了的概念，同學(xué)們在Excel中就已經(jīng)認(rèn)識了sum、average等函數(shù)，也認(rèn)識了通過if這一用來進行邏輯判斷的函數(shù)判斷某一單元格中的數(shù)據(jù)是否符合某個條件。在網(wǎng)頁設(shè)計與制作的課程中，同樣是利用if函數(shù)，但是使用的場景變換到了用來驗證網(wǎng)頁中用戶輸入的數(shù)據(jù)是否滿足一定的條件，如用戶名的合法格式和密碼長度的問題。

結(jié)論

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

作者：王海波王兆華單位：中國傳媒大學(xué)計算機與網(wǎng)絡(luò)中心