论文部分内容阅读
摘要：网页设计与制作作为高等学校计算机基础教育的主干课程之一，由于其中涉及到了代码的编写和调试，对于许多非计算机专业的学生来说存在一定的难度。针对这一问题，在网页设计与制作课程中的层叠样式表CSS、模板和库项目以及JavaScript的教学中引入了学习迁移理论。通过把学生们已经掌握的Office系列软件中的知识与网页设计与制作课程相应的概念做类比，消除同学们对新内容的距离感和陌生感。在实际教学中，取得了良好的教学效果。
关键词：学习迁移；网页设计与制作；CSS；模板；JavaScript
中图分类号：G442 文献标识码：A 文章编号：1009-3044（2013）02-0423-04
1 概述
学习迁移理论是指一种学习对另一种学习的影响。学习迁移的作用在于使习得的知识和经验得以概括化、系统化，形成一种稳定的整合的心理结构，给学习者带来事半功倍的学习效率。它既包括先前学习对后继学习的影响，也包括后继学习对先前学习的影响[1-3]。网页设计与制作课程是在大学计算机基础课程之后，许多非计算机专业本科生所要学习的一门课程。由于其中涉及到许多接近编程方面的知识，学生在掌握起来遇到了不小的困难。在课程中引入合适的教学方法将能够大大减少学生学习中的障碍，提高教学效率。通过在网页设计与制作课程引入学习迁移理论，并进行相关的实践教学活动，取得了良好的教学效果。
2 基于学习迁移理论设计网页设计与制作的教学
学生在学校获得知识、技能、行为以及态度的过程中，必然存在新旧知识和经验之间的相互影响。学生在学习网页设计与制作课程之前，通过大学计算机基础课程的学习，已经普遍掌握了Office系列软件，如Word、Excel和PowerPoint的使用。在网页设计与制作课程中，借助于同学们已经掌握的知识来促进这门课程的学习，即通过学习迁移的方法使同学们感到这门课程中的许多内容使用到的方法都是他们已经掌握的，从而达到降低学习的难度的目的。
2.1 基于学习迁移理论设计CSS的教学
在网页设计与制作这门课程中，学生一开始接触的是HTML的基本标签。对于这一部分，经过一定的讲解，学生一般都能够掌握。当进入到层叠样式表CSS[4][5]的学习时，由于CSS涉及的属性非常多，因此会使学生觉得CSS较难掌握。为了使学生把过去已有的经验转移到CSS学习中，使他们可以利用原有的经验来掌握CSS，在课程中设计了以下2个方法：
方法1：日常生活中物体和网页设计中元素的类比
CSS的基本使用方式是使用一系列属性和属性值对某一个网页上的元素进行描述。而在日常生活中，人们对于某一物体的描述在某种程度上也是遵循同样的原则。在课程中，使用了学生较为感兴趣的iPad这一生活中的物体描述作为CSS描述的类比，使得学生了解CSS不过是网页中按照同样的方式来描述网页中的元素。如在图1中显示了现实世界里人们描述iPad时使用的方式，图2显示了网页设计中通过CSS中对网页中的元素进行描述和定义，可以看出它们之间具有很大的相似性。
图1 iPad的属性信息
图2 网页设计中h1样式的属性信息
方法2：Word课程中样式概念和网页设计中CSS的类比
在学生们已经学过Office系列软件中的Word软件中，存在样式的概念。通过应用Word中内置的样式或新建自定义样式，可以完成对Word文档中的文字和段落等内容格式的设置。在网页设计中的层叠样式表CSS，同样存在应用已有的HTML标签样式和新建CSS的概念和操作。
在课堂教学中，先通过回顾在Word软件中是如何进行样式的编辑，再在网页设计软件Dreamweaver中演示如何进行网页设计中CSS样式的编辑，可以促使学生们把之前的经验引入到CSS的学习中，进而促进对CSS的理解和使用。如在Word软件中，样式的编辑是从字体、段落、制表位、边框等几个方面进行的，如图3所示。其中，字体格式的设置包括字体、字号、加粗、颜色、下划线等常用设置；段落格式的设置包括首行缩进、段前、段后、行距等常用设置。
图 3 Word中样式的编辑对话框
在Dreamweaver中，虽然在样式的分类方面有所不同，如类型、背景、区块、方框等，如图4所示。但其本质上和Word软件是一样的，都可以设置关于字体，段落，边框等方面的格式。如在CSS中，字体格式的字体、字号、加粗、颜色、下划线分别对应的CSS属性是：font-family、font-size、color、text-decoration，段落格式的首行缩进、段前、段后、行距分别对应的CSS属性是：text-indent、margin-top、margin-bottom、line-height。
图 4 Dreamweaver中CSS的规则定义对话框
2.2 基于学习迁移理论设计模板和库项目的教学
在Dreamweaver软件中，模板是一种特殊的文档，用于设计“固定的”页面布局。它用来产生带有固定特征和共同格式的文档基础，是用户进行批量生产文档的起点。可以将文档中的任意内容存储为库项目，从而达到重复使用的效果[6]。在Dreamweaver软件中通过模板建立新文件如图5所示。
图 5 Dreamweaver软件中通过模板建立新文件
在Dreamweaver软件的模板中需要通过“可编辑区域”把变化的部分标识出来，相应的不需要变化的部分被称为“锁定区域”。哪些部分应该被定义为“可编辑区域”，哪些部分应该是“锁定区域”，以及使用模板究竟带来什么好处，对于部分同学来说理解和难以掌握。
课堂教学中，在学习迁移理论的指导下，先回顾了Word软件中模板的概念，基于Word软件中的模板，可以创建一系列风格类似的Word文档，如图6所示：
图 6 Word中通过模板建立新文件
然后对Word软件中使用模板的步骤和Dreamweaver软件中使用模板的步骤进行了类比和比较。
在Word软件中，编辑模板以及使用模板的步骤可以被概括为：
1） 创建模板文件；2） 在模板文件中，在需要变化的地方插入“域”或者“控件”，不需要变化的地方直接输入文字、插入图像等元素；3） 基于模板文件创建新的Word文档。
在Dreamweaver软件中，编辑模板以及使用模板的步骤可以被地概括为：
1） 创建模板文件；2） 在模板文件中，在需要变化的地方插入“可编辑区域”，不需要变化的地方直接输入文字、插入图像等元素。3） 基于模板文件创建新的HTML文档。
可以看出，虽然面向的是不同的软件和文档，在模板的使用方面是基本类似的。所不同的是在Dreamweaver软件中，用“可编辑区域”的概念替换了Word中的“域”或者“控件”。但是在Dreamweaver软件中，也有一些概念是Word软件中没有的，表1 是对这2个软件中模板相关概念的对比：
表1 Word和Dreamweaver相关概念的对比
[概念＼&Word＼&Dreamweaver＼&模板文件＼&dotx文件＼&dwt文件＼&可变化的内容＼&域、控件＼&可编辑区域＼&锁定区域＼&无此概念＼&非可编辑区域的区域为锁定区域＼&脱离模板＼&无此概念＼&基于模板创建的文件可以脱离模板，脱离模板后模板的更新不会影响到这一文件＼&]
在Word软件中，可以通过“把所选内容保存到文档部件库”的功能把一些文档中反复使用的内容定义为“构建基块”，从而利于对这些内容的重用。在Dreamweaver软件中，库项目用来完成同样的功能。它们的使用方式可以被共同地概括为：
1） 把文档中需要重用的部分选中并定义为库项目（构建基块），选中的内容可以是文字、图像等任意内容。2）在需要重用内容的地方，插入库项目（构建基块）。
通过与Word软件的类比，Dreamweaver中模板和库项目的学习完全被纳入到了学生已有的知识体系中，从而降低了学习的难度。
2.3 基于学习迁移理论设计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中，可以通过如下的方式进行运算：
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 网页设计中通过JavaScript进行数字的相加
对于函数这一任何编程语言中都少不了的概念，同学们在Excel中就已经认识了sum、average等函数，也认识了通过if这一用来进行逻辑判断的函数判断某一单元格中的数据是否符合某个条件。在网页设计与制作的课程中，同样是利用if函数，但是使用的场景变换到了用来验证网页中用户输入的数据是否满足一定的条件，如用户名的合法格式和密码长度的问题。
3 结论
网页设计与制作课程是一门涉及到许多学科的综合课程，其中的许多概念对于同学们来说都比较陌生并且不容易理解。通过学习迁移理论的引入，在课程的教学设计中，有意识地把同学们已经接触过的概念和知识引入到课程中，并由这些概念和知识作为切入点来讲解新的内容，消除同学们对新内容的距离感和陌生感，使他们能够快速地进入到学习的场景中。在实际教学中取得了良好的教学效果。
参考文献：
[1] 朱文彬，赵淑文.高等教育心理学[M].北京：首都师范大学出版社，2007.
[2] 王文静. 促进学习迁移的策略研究[J]. 教育科学，2004（2）：26-29.
[3] 赵文婷，张婷燕，李泽华. 学习迁移理论在C语言教学中的应用[J].学周刊，2012（35）：160-161.
[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.
[5] 陆凌牛. HTML 5与CSS 3权威指南[M].机械工业出版社，2011.
[6] 刘强，张阿敏，翁艳彬. 网页设计与制作[M].北京：高等教育出版社，2010.
[7] 陈争航. JavaScript编程宝典[M].北京：电子工业出版社，2008.
[8] 弗兰纳根. JavaScript权威指南[M].机械工业出版社，2012.
关键词：学习迁移；网页设计与制作；CSS；模板；JavaScript
中图分类号：G442 文献标识码：A 文章编号：1009-3044（2013）02-0423-04
1 概述
学习迁移理论是指一种学习对另一种学习的影响。学习迁移的作用在于使习得的知识和经验得以概括化、系统化，形成一种稳定的整合的心理结构，给学习者带来事半功倍的学习效率。它既包括先前学习对后继学习的影响，也包括后继学习对先前学习的影响[1-3]。网页设计与制作课程是在大学计算机基础课程之后，许多非计算机专业本科生所要学习的一门课程。由于其中涉及到许多接近编程方面的知识，学生在掌握起来遇到了不小的困难。在课程中引入合适的教学方法将能够大大减少学生学习中的障碍，提高教学效率。通过在网页设计与制作课程引入学习迁移理论，并进行相关的实践教学活动，取得了良好的教学效果。
2 基于学习迁移理论设计网页设计与制作的教学
学生在学校获得知识、技能、行为以及态度的过程中，必然存在新旧知识和经验之间的相互影响。学生在学习网页设计与制作课程之前，通过大学计算机基础课程的学习，已经普遍掌握了Office系列软件，如Word、Excel和PowerPoint的使用。在网页设计与制作课程中，借助于同学们已经掌握的知识来促进这门课程的学习，即通过学习迁移的方法使同学们感到这门课程中的许多内容使用到的方法都是他们已经掌握的，从而达到降低学习的难度的目的。
2.1 基于学习迁移理论设计CSS的教学
在网页设计与制作这门课程中，学生一开始接触的是HTML的基本标签。对于这一部分，经过一定的讲解，学生一般都能够掌握。当进入到层叠样式表CSS[4][5]的学习时，由于CSS涉及的属性非常多，因此会使学生觉得CSS较难掌握。为了使学生把过去已有的经验转移到CSS学习中，使他们可以利用原有的经验来掌握CSS，在课程中设计了以下2个方法：
方法1：日常生活中物体和网页设计中元素的类比
CSS的基本使用方式是使用一系列属性和属性值对某一个网页上的元素进行描述。而在日常生活中，人们对于某一物体的描述在某种程度上也是遵循同样的原则。在课程中，使用了学生较为感兴趣的iPad这一生活中的物体描述作为CSS描述的类比，使得学生了解CSS不过是网页中按照同样的方式来描述网页中的元素。如在图1中显示了现实世界里人们描述iPad时使用的方式，图2显示了网页设计中通过CSS中对网页中的元素进行描述和定义，可以看出它们之间具有很大的相似性。
图1 iPad的属性信息
图2 网页设计中h1样式的属性信息
方法2：Word课程中样式概念和网页设计中CSS的类比
在学生们已经学过Office系列软件中的Word软件中，存在样式的概念。通过应用Word中内置的样式或新建自定义样式，可以完成对Word文档中的文字和段落等内容格式的设置。在网页设计中的层叠样式表CSS，同样存在应用已有的HTML标签样式和新建CSS的概念和操作。
在课堂教学中，先通过回顾在Word软件中是如何进行样式的编辑，再在网页设计软件Dreamweaver中演示如何进行网页设计中CSS样式的编辑，可以促使学生们把之前的经验引入到CSS的学习中，进而促进对CSS的理解和使用。如在Word软件中，样式的编辑是从字体、段落、制表位、边框等几个方面进行的，如图3所示。其中，字体格式的设置包括字体、字号、加粗、颜色、下划线等常用设置；段落格式的设置包括首行缩进、段前、段后、行距等常用设置。
图 3 Word中样式的编辑对话框
在Dreamweaver中，虽然在样式的分类方面有所不同，如类型、背景、区块、方框等，如图4所示。但其本质上和Word软件是一样的，都可以设置关于字体，段落，边框等方面的格式。如在CSS中，字体格式的字体、字号、加粗、颜色、下划线分别对应的CSS属性是：font-family、font-size、color、text-decoration，段落格式的首行缩进、段前、段后、行距分别对应的CSS属性是：text-indent、margin-top、margin-bottom、line-height。
图 4 Dreamweaver中CSS的规则定义对话框
2.2 基于学习迁移理论设计模板和库项目的教学
在Dreamweaver软件中，模板是一种特殊的文档，用于设计“固定的”页面布局。它用来产生带有固定特征和共同格式的文档基础，是用户进行批量生产文档的起点。可以将文档中的任意内容存储为库项目，从而达到重复使用的效果[6]。在Dreamweaver软件中通过模板建立新文件如图5所示。
图 5 Dreamweaver软件中通过模板建立新文件
在Dreamweaver软件的模板中需要通过“可编辑区域”把变化的部分标识出来，相应的不需要变化的部分被称为“锁定区域”。哪些部分应该被定义为“可编辑区域”，哪些部分应该是“锁定区域”，以及使用模板究竟带来什么好处，对于部分同学来说理解和难以掌握。
课堂教学中，在学习迁移理论的指导下，先回顾了Word软件中模板的概念，基于Word软件中的模板，可以创建一系列风格类似的Word文档，如图6所示：
图 6 Word中通过模板建立新文件
然后对Word软件中使用模板的步骤和Dreamweaver软件中使用模板的步骤进行了类比和比较。
在Word软件中，编辑模板以及使用模板的步骤可以被概括为：
1） 创建模板文件；2） 在模板文件中，在需要变化的地方插入“域”或者“控件”，不需要变化的地方直接输入文字、插入图像等元素；3） 基于模板文件创建新的Word文档。
在Dreamweaver软件中，编辑模板以及使用模板的步骤可以被地概括为：
1） 创建模板文件；2） 在模板文件中，在需要变化的地方插入“可编辑区域”，不需要变化的地方直接输入文字、插入图像等元素。3） 基于模板文件创建新的HTML文档。
可以看出，虽然面向的是不同的软件和文档，在模板的使用方面是基本类似的。所不同的是在Dreamweaver软件中，用“可编辑区域”的概念替换了Word中的“域”或者“控件”。但是在Dreamweaver软件中，也有一些概念是Word软件中没有的，表1 是对这2个软件中模板相关概念的对比：
表1 Word和Dreamweaver相关概念的对比
[概念＼&Word＼&Dreamweaver＼&模板文件＼&dotx文件＼&dwt文件＼&可变化的内容＼&域、控件＼&可编辑区域＼&锁定区域＼&无此概念＼&非可编辑区域的区域为锁定区域＼&脱离模板＼&无此概念＼&基于模板创建的文件可以脱离模板，脱离模板后模板的更新不会影响到这一文件＼&]
在Word软件中，可以通过“把所选内容保存到文档部件库”的功能把一些文档中反复使用的内容定义为“构建基块”，从而利于对这些内容的重用。在Dreamweaver软件中，库项目用来完成同样的功能。它们的使用方式可以被共同地概括为：
1） 把文档中需要重用的部分选中并定义为库项目（构建基块），选中的内容可以是文字、图像等任意内容。2）在需要重用内容的地方，插入库项目（构建基块）。
通过与Word软件的类比，Dreamweaver中模板和库项目的学习完全被纳入到了学生已有的知识体系中，从而降低了学习的难度。
2.3 基于学习迁移理论设计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中，可以通过如下的方式进行运算：
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 网页设计中通过JavaScript进行数字的相加
对于函数这一任何编程语言中都少不了的概念，同学们在Excel中就已经认识了sum、average等函数，也认识了通过if这一用来进行逻辑判断的函数判断某一单元格中的数据是否符合某个条件。在网页设计与制作的课程中，同样是利用if函数，但是使用的场景变换到了用来验证网页中用户输入的数据是否满足一定的条件，如用户名的合法格式和密码长度的问题。
3 结论
网页设计与制作课程是一门涉及到许多学科的综合课程，其中的许多概念对于同学们来说都比较陌生并且不容易理解。通过学习迁移理论的引入，在课程的教学设计中，有意识地把同学们已经接触过的概念和知识引入到课程中，并由这些概念和知识作为切入点来讲解新的内容，消除同学们对新内容的距离感和陌生感，使他们能够快速地进入到学习的场景中。在实际教学中取得了良好的教学效果。
参考文献：
[1] 朱文彬，赵淑文.高等教育心理学[M].北京：首都师范大学出版社，2007.
[2] 王文静. 促进学习迁移的策略研究[J]. 教育科学，2004（2）：26-29.
[3] 赵文婷，张婷燕，李泽华. 学习迁移理论在C语言教学中的应用[J].学周刊，2012（35）：160-161.
[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.
[5] 陆凌牛. HTML 5与CSS 3权威指南[M].机械工业出版社，2011.
[6] 刘强，张阿敏，翁艳彬. 网页设计与制作[M].北京：高等教育出版社，2010.
[7] 陈争航. JavaScript编程宝典[M].北京：电子工业出版社，2008.
[8] 弗兰纳根. JavaScript权威指南[M].机械工业出版社，2012.