网页设计课程中的教学方法

王新儒 刘慧娟 赵秋红

摘 要：网络前端开发技术发展迅速，正如前端开发技术的快速发展以及对前端开发人员的要求已经发生了巨大变化一样，在高等教育中的网页设计课程也必须做出相应调整，教师在进行网页设计的教学时要从带领学生建立感性认识，展示好的代码，一步步编写代码，慢慢地使示例更加复杂等几个方面入手。

关键词：网页设计；教学方法；高等教育

网络前端开发技术已经取得了迅速的发展，在2003年的时候，一名前端开发人员只需要通过HTML和CSS以及简单的JAVASCRIPT代码，就可以设计出一个网站，供人们浏览访问。但是现在，一个合格的前端开发者必需精通HTML、CSS、JAVASCRIPT和JQUERY，CSS 预处理等新技术，同时还要具有响应式设计和移动优先的设计理念。[1]

在本文中，我将首先介绍两种常见的网页设计教学安排，而后将着重谈谈如何对一名网页设计新生进行有效的教学。

一、以可视化图形界面进行网页设计教学

在大多数大学的网页设计课程设计中，学生将会在PHOTOSHOP或FIRWORKS等可视化软件中，以图形化的形象创建网站布局。学生可能会从一个现有网站的截图开始，在他们自己的图片和内容上分层，以创建一个独特的页面设计。

这种课程安排首先是学生掌握使用软件的基本知识，课程学习中也会涉及到可用性、色彩、布局、字体、负空间、图像质量和位置等方面的内容，而并不涉及代码。这种授课安排能使学生在他们的脑海中勾画出一个网页并在编写第一行代码之前清楚他们想要构建的内容，而不太关心网页的编码方式。[2]

二、学习HTML 和 CSS代码

在典型的HTML和CSS课程中，学生会系统学习标记和样式的定义。学生将学会从头开始创建网页，编写第一行网页代码，操作 HTML、CSS 和图像文件。将会对标签、选择器、盒子模型以及盒子的浮动和定位得到充分了解。在此学习过程中也会对浏览器的兼容性问题有所涉及。

从根本上讲，这种教学安排没有问题。但学生要知道手动写的代码必需与HTML 和 CSS标准兼容，要按照标准语言要求书写代码。同时，授课过程中注意扩展最新的知识和技术应用发展，教学中及早引入网页布局的思想，尤其是当学生掌握了浮动和定位以后，让学生在宏观层面上对网页布局进行规划，防止过分纠缠于某个技术细节的实现，要培养学生由上及下的设计思路。课堂教学中多做一些案例，如设计两列和三列的布局，或是更复杂的1-2-1、1-3-1等布局。当页面布局完成后，再考虑在某个区块内实现具体的内容和完善细节。[3][4]

三、如何对网页设计的新生进行有效授课

许多教师教授新生网页设计课程有些枯燥和困难。主要原因是初学者对于语法、文件管理、样式表中样式的顺序、页面的正确标记等等接受起来有一定难度，也需要一些时间。而且开始阶段设计的页面也比较简单，很难引起所有学生的兴趣。建议可以从以下几个方面入手。

（1）建立学生的感性认识。找一些大多数人都感兴趣的主题。例如，什么是 HTML？缩写代表什么？它在哪里开发的？HTML 可以独立于网页吗？谁需要知道 HTML？CSS 如何与 HTML 匹配？这些问题不需要花太长时间，但是可以通过这些问题让学生建立起一种“大局观”。对于具体的技术细节当他们在编写页面时，可以通过幻灯片或白板进行讲授。一定要让学生参与讨论，提防在学习中出现大的方向上的困惑。在用代码具体实现设计之前，确保他们了解最终目的和规划，否则代码将毫无意义，学习也会陷入被动。

（2）一步步编写代码，慢慢地使示例更加复杂。教学时不要同时介绍太多的项目，以免失去重点。例如，当引入 CSS 时，首先要为 HTML 标记编写样式。显示样式的BODY标记可以控制整个网页，包括背景颜色、字体、大小等。每次编写一个属性，保存更改并在浏览器中显示它，这样学生就能准确地看到哪一行 CSS 控制了页面上的哪个元素。这一点对于学生准确理解知识点很重要。[5]

（3）课堂上要不时提问。在进行某项技术的具体操作前，教师要先设置几个疑问，并让学生给出相对的解决方案。如果他们可以从概念上解释这个概念，那么代码编写就变得简单了。例如，如果你已用蓝色文本樣式化了网页的正文，请询问学生如何使主标题变为红色，如果学生可以解释，你需要以某种方式改变文本H1标记为红色，并要向他们展示如何将其写为代码。

（4）及早规范语法规则。学生在刚开始学习时，会经常忘记关闭标签，忘记分号，大括号和小括号弄混，甚至在中文输入下写入相关符号等等。发现这些错误有时很容易，有时候也很困难。这时一定要养成一种良好的编码习惯，比如在每写完一部分功能时，就要查看输出效果，有问题早发现，也好解决，决不能等全部代码输入完毕再进行验证，往往很难定位问题的所在。同时要规范编码，严格按最严标准来写，从一开始就养成好的习惯，后面的学习可以节省不必要的时间浪费。

教师教导学生的工作非常重要，要了解不同教学方法对学生的影响，并掌握新生的教学规律。平面设计、HTML和CSS是专业设计师每天工作的关键技能。编写干净、高效的代码、了解如何调试问题、研究解决问题的更好方法、解决跨浏览器兼容性问题-这些都是前端开发人员生活中的基本概念。教师要用新鲜而又生动的素材，并确保学生有一个扎实的理解，然后再进入下一个主题，为他们的职业打开一个好的开端。

参考文献：

[1]任翠池，姜晗.《网页设计与制作》课程教学改革研究与实践.课程教育研究，2013（22）：217-217.

[2]韩陵宜.《网页制作》课程教学及考核方式的研究与探索.电脑知识与技术，2008，2（14）：122-124.

[3]张翔，贾雪倩.《网页设计》课程教学改革的研究和探索.福建电脑，2011，27（1）：39-40.

[4]李伟，邓红涛.《网页设计》课程实践性教学改革与创新研究.新课程研究：高等教育，2011（12）：103-104.

[5]任雪莲.高职《网页设计与制作》课程教学改革的实践与探索.职业技术，2011（2）：14.

作者简介：王新儒（1983-），男，专业课教师。