基于心智技能理论的网页设计教学研究

摘要：本文在分析了心智技能理论的基础上，结合网页设计教学的实际情况，发现学生在心智技能上的缺乏制约了网页设计水平的提高。因此，本文将心智技能形成的三阶段理论应用于网页设计教学，提出了网页设计心智技能的形成过程，并进行了相关教学实践，对提高学生的网页设计能力起到了积极作用。

关键词：心智技能；网页设计；教学研究

中图分类号：G434 文献标志码：A 文章编号：1674-9324（2013）37-0154-03

一、心智技能理论概述

技能分为操作技能和心智技能，操作技能是一种动作技能，培养操作技能使学生“知其然”，比如网页设计中建立页面布局、插入表格这些功能如何实现。而心智技能是一种思维的技能，是调节和控制心智活动的经验，培养心智技能使学生“知其所以然”，比如为何要使用网页布局、使用何种布局更好、网页元素如何搭配更美观等，从而使学生能够更合理地应用其所具备的操作技能。

对于课程教学而言，不仅要培养学生的操作技能，还应更注重心智技能的培养。比如制作一个完整网站项目，不仅需要操作Dreamweaver、Fireworks等设计软件的技能，更需要需求分析、网站规划、风格设计和色彩搭配等心智技能。

因此，要提高学生的技能水平，就必须在教学中加强心智技能的培养，培养学生的创造性思维，提高学生学习创造能力以及解决实际问题的能力。

二、网页设计教学中存在的问题分析

目前，案例教学法是较为主流的网页设计课程教学方式，在教学过程中，往往以软件操作为主要内容，针对其中的各个功能设计教学案例并进行讲解。这种方式虽然能使学生在短时间内掌握软件使用技能，但学生对各个功能适用的场景和条件却不甚了解，不能真正做到学以致用，在独立面对一个完整的设计任务时会有无从下手的感觉。笔者采用课堂观察、学生访谈及学生作品指导等途径，开展调查研究之后发现，学生设计的网页作品普遍存在一些共性问题，主要体现在以下几个方面。

1.网页主题策划。当要求学生为某个网站主题制作一系列网页时，某些作品主题定位不准确，比如原本网站主题是品牌产品宣传，最后的作品却是购物网站。有的作品则是主题不统一，想展现的内容太多，多个主题拼凑在一起。出现上述问题的主要原因是需求分析不准确、提炼设计主旨的能力不足。

2.网页风格设计。在网页布局及风格设计方面，常出现页面风格不统一、页面风格与内容不协调等的问题。比如某些作品的多个页面之间在风格、模式和色彩上差异较大，影响了网站的整体风格。这是由于学生对形式与内容的协调把握不足，不能在内容不同时实现形式上的统一。

3.网页元素的编排。网页元素的编排，主要是框架、表格、文字、图片、动画等内容在单个网页内的排版。学生作品在网页元素的编排方面的问题主要有：（1）文字的处理。网页中使用的字体太多，造成页面混乱；字体、字号过于单一，标题或重点不突出；行距过大或过小等。（2）图片的处理。图片过度拉伸造成显示模糊；图片过大造成页面加载速度缓慢；并排显示的图片尺寸不统一等。（3）网页布局。页面宽度过大，在一屏内无法显示，造成浏览困难；页面内容多而杂，各部分跨度太大，整体可读性不好，重点内容不突出等。

4.网页色彩搭配。网页的色彩搭配应该均衡、协调，使人感觉舒适、美观，又不至于视觉疲劳。学生在网页色彩搭配上出现的问题主要有：网页色彩过于单一，无吸引力；色彩过于花哨，容易造成视觉疲劳；文字颜色与背景颜色相似，造成阅读困难等。

5.交互性设计。用户浏览网页是一个人与网页信息交互的过程，交互性好的网页应该功能实用、操作便捷。学生在交互性设计上出现的问题主要有：网页无标题；导航栏不全，引导性不佳；链接层次过深，造成连续浏览不便捷等。

6.网站文件结构。网站文件结构是指储存在硬盘上的目录结构，虽然不会影响到网页的功能和外观，但是良好的目录结构能够提高网页设计和后续维护工作的效率。学生设计的网页作品往往忽视网页文件结构的合理性，存在着网页命名随意无规则，不同层次的网页文件存放在同级目录，图片文件随意存放等问题。

综合上述问题分析可以看出，学生在创造能力及设计思维上相对较弱，实际上通过操作实践，学生基本都能完全掌握网页设计软件操作，比如插入文字和图片、设置字体和颜色、插入超链接等，但却在需要整合运用这些操作时出现了问题。这实际上就是心智技能缺乏的表现，因此培养心智技能是提高学生网页设计能力的关键。

三、心智技能阶段性理论在网页设计教学中的应用

1.网页设计心智技能形成分析。根据冯忠良教授的研究，心智技能的形成是阶段性的，其过程分为原型定向、原型操作和原型内化三个阶段[1]。原型定向阶段以理论知识传授为主，让主体掌握技能操作的原理；原型操作阶段通过实践让主体熟练掌握操作技能，为原型内化奠定基础；在主体大脑中形成内化的思维模式，使主体能够灵活运用操作技能解决实际问题[1-3]。

根据上述理论，结合网页设计教学的实际过程，网页设计心智技能的形成阶段如图1所示。

网页设计心智技能的形成可分为：掌握基本理论、熟练实践操作和总结设计模式三个阶段。这三个阶段不仅体现在整个学期的教学过程，更应该体现在每一章节的教学中，甚至在每次课的教学中不断重复，才能强化巩固心智技能。在整个学期的网页设计教学过程中，基本理论、熟练实践操作和总结设计模式三个阶段的主要教学内容是：（1）网站和网页的组成、网页设计的一般过程、HTML原理和常用设计工具。（2）网页设计工具Dreamweaver、Firewoks及Flash的操作和使用。（3）指导学生综合应用设计工具进行完整设计，总结网页设计中的经验和模式。而在某项软件操作的教学过程中也应遵循三阶段原则。教师首先结合HTML语言讲解此项操作的后台原理。然后教师进行演示，学生操作，期间教师不断进行指导。最后教师总结该操作中应当注意的一些原则，以及常用的一些设计模式，可通过展示优秀的设计作品进行对比讲解。

2.教学实践。在前述理论研究的基础上，笔者进行了教学实践。根据课程教材，首先设置了“网页设计概述”、“HTML基础”、“Dreamweaver CS 4应用”、“Firewoks CS 4应用”、“Flash CS 4应用”、“综合实例”六章课程内容[4]。其中第一、二章以纯理论教学为主，难点在于HTML基础知识，须重点讲解。第三至六章均采用三阶段原则进行教学。最后为了加强心智技能原型内化阶段的效果，增加了第七章“网页设计模式精讲”，对网页设计中的常见问题进行总结，介绍设计原则和方法。下面以第三章“Dreamweaver CS 4应用”和第七章“网页设计模式精讲”为例介绍教学思路。

“Dreamweaver CS 4应用”主要分为表格的使用、框架的使用、DIV元素的使用、文本的插入与编辑、图像的插入与编辑、超链接的插入与编辑、其他多媒体对象的插入与编辑七项主要内容。在正式讲解软件应用前，应使学生明白网页的本质是HTML代码，Dreamweaver本质是辅助设计工具，其作用是自动生成HTML代码，比如在Dreamweaver中执行插入表格的命令，就会在源文件中加入表格的HTML代码。在此后的讲课过程中，帮助学生理解操作的原理，为心智技能的建立奠定基础。以文本的插入和编辑为例，在教学中首先向学生讲解文本编辑中HTML标签

与

的作用和使用方法。然后在Dreamweaver中执行文本插入和编辑操作，并对比源文件中的代码变化。最后结合教学用例介绍文字排版的一些原则，比如长文本使用标准字号、在文本周围留出足够空间、增加文本和背景的对比度等。帮助学生建立文本编辑的心智技能，使学生在自主设计时能够编排出美观的、可读性强的文本效果。

“网页设计模式精讲”根据本文中对学生作品中常见问题的分类进行集中讲解，主要分为网页主题策划、网页风格设计、网页元素的编排、网页色彩搭配、交互性设计、网站文件结构六项主要内容。设计模式教学是一种经验的传授，目的是教会学生某一场景下问题的解决方法，因此在教学中，必须要明确模式适用的场景，以及模式如何实现，如表1所示是几个网页设计的模式。

在教学过程中仍主要依靠案例讲解进行，并在过程中要求学生在总结和思考之后进行相似模拟，但不能与原例一致。学生掌握正确的网页设计模式后，网页设计质量得到了一定改善，从侧面证明了学生网页设计心智技能的提升。

四、小结

笔者通过教学实践发现，结合心智技能形成的阶段性理论进行网页设计课程教学，确实对提高学生的网页设计能力起到了积极作用，但由于课时限制、教师经验等因素，教学质量仍有很大的上升空间。在后续教学过程中，仍需要不断地进行尝试和总结，探索更高效的心智技能教学方法，培养出更高素质的网页设计人才。

参考文献：

[1]冯忠良.教育心理学[M].北京：人民教育出版社，2000.

[2]丁清.论高职高专学生的心智技能培养[J].昆明冶金高等专科学校学报，2004，（1）：81-84.

[3]陈军民.高职生心智技能培养探讨[J].新课程学习，2012，（03）：77.

[4]詹青龙，郭永灿.网页设计与制作[M].北京：清华大学出版社，北京交通大学出版社，2010.

作者简介：宁艳（1986-），女，广西靖西人，硕士，助教，主要从事计算机多媒体技术，网页设计及网站建设等课程教学与研究。