學習遷移在網頁設計課程中的應用

前言：本站為你精心整理了學習遷移在網頁設計課程中的應用范文，希望能為你的創作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

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

在課堂教學中，先通過回顧在Word軟件中是如何進行樣式的編輯，再在網頁設計軟件Dreamweaver中演示如何進行網頁設計中CSS樣式的編輯，可以促使學生們把之前的經驗引入到CSS的學習中，進而促進對CSS的理解和使用。如在Word軟件中，樣式的編輯是從字體、段落、制表位、邊框等幾個方面進行的，如圖3所示。其中，字體格式的設置包括字體、字號、加粗、顏色、下劃線等常用設置；段落格式的設置包括首行縮進、段前、段后、行距等常用設置。在Dreamweaver中，雖然在樣式的分類方面有所不同，如類型、背景、區塊、方框等，如圖4所示。但其本質上和Word軟件是一樣的，都可以設置關于字體，段落，邊框等方面的格式。如在CSS中，字體格式的字體、字號、加粗、顏色、下劃線分別對應的CSS屬性是：font-family、font-size、color、text-decoration，段落格式的首行縮進、段前、段后、行距分別對應的CSS屬性是：text-indent、margin-top、margin-bottom、line-height。

基于學習遷移理論設計模板和庫項目的教學

在Dreamweaver軟件中，模板是一種特殊的文檔，用于設計“固定的”頁面布局。它用來產生帶有固定特征和共同格式的文檔基礎，是用戶進行批量生產文檔的起點?？梢詫⑽臋n中的任意內容存儲為庫項目，從而達到重復使用的效果[6]。在Dreamweaver軟件中通過模板建立新文件如圖5所示。在Dreamweaver軟件的模板中需要通過“可編輯區域”把變化的部分標識出來，相應的不需要變化的部分被稱為“鎖定區域”。哪些部分應該被定義為“可編輯區域”，哪些部分應該是“鎖定區域”，以及使用模板究竟帶來什么好處，對于部分同學來說理解和難以掌握。課堂教學中，在學習遷移理論的指導下，先回顧了Word軟件中模板的概念，基于Word軟件中的模板，可以創建一系列風格類似的Word文檔。然后對Word軟件中使用模板的步驟和Dreamweaver軟件中使用模板的步驟進行了類比和比較。在Word軟件中，編輯模板以及使用模板的步驟可以被概括為：1)創建模板文件；2)在模板文件中，在需要變化的地方插入“域”或者“控件”，不需要變化的地方直接輸入文字、插入圖像等元素；3)基于模板文件創建新的Word文檔。在Dreamweaver軟件中，編輯模板以及使用模板的步驟可以被地概括為：1)創建模板文件；2)在模板文件中，在需要變化的地方插入“可編輯區域”，不需要變化的地方直接輸入文字、插入圖像等元素。3)基于模板文件創建新的HTML文檔?？梢钥闯?，雖然面向的是不同的軟件和文檔，在模板的使用方面是基本類似的。所不同的是在Dreamweaver軟件中，用“可編輯區域”的概念替換了Word中的“域”或者“控件”。在Word軟件中，可以通過“把所選內容保存到文檔部件庫”的功能把一些文檔中反復使用的內容定義為“構建基塊”，從而利于對這些內容的重用。在Dreamweaver軟件中，庫項目用來完成同樣的功能。它們的使用方式可以被共同地概括為：1)把文檔中需要重用的部分選中并定義為庫項目（構建基塊），選中的內容可以是文字、圖像等任意內容。2)在需要重用內容的地方，插入庫項目(構建基塊)。通過與Word軟件的類比，Dreamweaver中模板和庫項目的學習完全被納入到了學生已有的知識體系中，從而降低了學習的難度。

基于學習遷移理論設計JavaScript的教學

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

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

結論

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

作者：王海波王兆華單位：中國傳媒大學計算機與網絡中心