学习迁移在网页设计课程中的应用

前言：本站为你精心整理了学习迁移在网页设计课程中的应用范文，希望能为你的创作提供参考价值，我们的客服老师可以帮助你提供个性化的参考范文，欢迎咨询。

当进入到层叠样式表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软件中，模板是一种特殊的文档，用于设计“固定的”页面布局。它用来产生带有固定特征和共同格式的文档基础，是用户进行批量生产文档的起点。可以将文档中的任意内容存储为库项目，从而达到重复使用的效果[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函数，但是使用的场景变换到了用来验证网页中用户输入的数据是否满足一定的条件，如用户名的合法格式和密码长度的问题。

结论

网页设计与制作课程是一门涉及到许多学科的综合课程，其中的许多概念对于同学们来说都比较陌生并且不容易理解。通过学习迁移理论的引入，在课程的教学设计中，有意识地把同学们已经接触过的概念和知识引入到课程中，并由这些概念和知识作为切入点来讲解新的内容，消除同学们对新内容的距离感和陌生感，使他们能够快速地进入到学习的场景中。在实际教学中取得了良好的教学效果。

作者：王海波王兆华单位：中国传媒大学计算机与网络中心