高校网页设计课程:如何给新生讲解网页设计(3)

认清趋势

网页开发的规则主导者是谁，什么技术是即将过时的？我们现在应该学习什么技能？(每时每刻都有新东西可以学习。)

学习如何学新技术

学生们不能指望老师用汤匙喂给他们每一步所要学习的知识。他们需要找到不用课程和课本也能保持前沿的学习方法。可以帮助学生搜集有趣的博客，使用社交媒体的资源查找编程提示和技巧。

教初学者的一些建议

许多富有天分的网页设计师和工程师发现教初学者是一件非常烦闷和困难的事。一部分问题在于，高级别的开发者能在实现之前能预知很多的讯息。专业人士甚至都不记得最后一次严肃思考语法，文件管理，样式表的顺序和一个页面的正确标记的等等到底是在何时，因为他们每天都会无数次碰到这类问题。而对于初学学生而言，这些问题则是全新的。

给出一个总体的介绍

把课程放在更大的Web环境里，可以提出这些有趣的问题。例如，什么是HTML？这个缩写代表什么？它是在什么地方产生的？HTML就是网页么？谁需要了解HTML？CSS是怎么和HTML配合的？这一篇目不需要耗费太多时间。这些大情景的想法就是用来引导学生的，他们会在使用语言中深入了解细节方面的事情。你可以使用幻灯片或者白班展示材料。时常注意让学生融入讨论中，并关注学生们的的困惑之处。确保学生们能在接触代码之前理解总揽中的内容，不然的话，讲解代码没有任何意义。

在课堂上写代码

在现场教学的环境中，我会打开文本编辑器，在讲台上敲出我的代码，而学生们在下面用他们的电脑跟着一起做。这种做法能让他们保持专注。一些学生并不能很好地跟上我打字的节奏，要么是他们学习方式不同，要么是他们的打字速度很慢。在这些情况下，我鼓励他们更加专心，也可以像一些人一样，用纸和笔来记笔记和代码片段。如果是在线授课的话，我会使用相同的演示方法，使用Camtasia软件记录屏幕和授课语音。两种情况下，都应当把你的文件提供给学生们。这样，他们就能看到你的成果。你在代码里勤写注释，他们就能根据注释理解你的笔记和示例。

每次写一点代码，慢慢地让例子变得复杂

一次不要介绍太多的东西。例如，在介绍CSS的时候，可以先开始在HTML标记里写样式。向 body 标签里加样式可以展示控制整个页面样式的效果，例如控制背景色，字体，字号等等。每次写一个属性，保存，在浏览器中显示效果，如此这般，学生们就能知道每行CSS控制的是页面上的哪个元素了。

循着某个问题一直问下去

在确认怎么做之前，应当要求学生们为构建网页时可能遇到的问题寻找解决方案。如果他们能从概念上解释清楚，那讲解代码就会变得容易。例如，已经将网页标签中的文字设为蓝色了之后，如何再将主标题设为红色。如果学生们知道该用某种方式改变h1标签的样式就能变成红色，他们便会做到。之后你只需给他们展示如何书写代码。

把复杂的东西说简单很难，但是把简单的东西说复杂却很容易。

学生们会一直问，问到一些复杂的问题。例如，他们会注意到红色的值能写成 #ff0000、red 或者rgb(255,0,0)，并且会问到他们三者的区别！不要这么早试着就回答这些问题。只提供一种书写颜色值的方式(我建议是#ff0000)，在学生掌握这种方式之前不要涉及更深入的问题。或许接下来的课程中，学生们会注意到别人的代码中有rgb(255,0,0)这种写法。到那个时候解释起两者之间的差异就会更加迅速。但在一开始，解释没有太大意义。记的东西太多，信息量大就会成为记忆负担。

讲解语法很有挑战

一开始学生们会犯忘记闭合标签，忘记写分号，或者完全编造了一个不存在的标签等等错误。找出这些问题所在，有时候很简单，有时候却很难。而我会一早就介绍验证的手段，好让学生们有一个检查自己成果的简单办法。开始，你可以自行指出缺失的、额外的以及未闭合的标签，之后则介绍更加健壮的调试技术。这样一来就能很显著地帮到他们。

管理文件是种挑战

在介绍HTML和CSS的课程中，文件管理是个老大难的问题。有些人会为存在硬盘还是移动设备上这个问题犯难，而一些人甚至不知道文件和文件夹的区别。最好是在教如何管理网站文件之前介绍一些基础知识。我会一开始将项目的所有文件放在中文的一个文件夹里，因为学生们很容易就能找到它，而唯一的一个项目文件夹能降低不少困惑。之后，所有的HTML文档、图片和CSS都会存在这一个文件夹下。刚开始的一点文件很好管理，因为学生们只需要管理为数不多的网站和屈指可数的文件。在学生们感到文件放到一个文件夹中太乱，需要整理时，他们便会学着如何链接两个文件，如何插入图片等方法。他们会知道代码的预期效果和作用，如果代码出错，他们会自然想到错误的路径才是事故的元凶。

记住你不是在为客户设计页面

在优秀教员中常犯的一个错误就是一开始就让课堂上的示例网页外观精美，完好无缺，兼容性强。不幸的是，那不是重点。即使是初学者，在浏览网页时能轻易地找到漂亮的页面。你是一名老师，并不需要以这种方式展现你的能力。你的职责是讲清楚每行代码的意义，和每行代码影响网页的哪项外观和功能。我在学生们面前写代码时，会在CSS代码里插入一些讲解概念用的背景色和边框样式。我鼓励学生们用同样的方式调试CSS。不要一次性快速的讲解许多CSS。学生们会自己毫无意外地让页面更加漂亮，当他们之中的大多数人成为图形设计师后，会讨厌自己早年做出的页面。然而，学生们看到他们设计的变化，从一开始没有样式的纯HTML到有一点基本样式的CSS，最后到有完整布局的时候，他们会更有耐心地听你讲解这个阶段的复杂问题。

你是在为他们的职业生涯打下基础

图形设计，HTML和CSS技术是每个专业设计师每天工作的关键技能。书写简洁有效的代码，了解如何调试问题，找到表述问题的更佳方式，解决浏览器间兼容问题——这些都是前端开发者生活中的基本概念。我已经看到许多学生在受到不良的启蒙教育后的痛苦模样了。你的职责非常重要。所以，新知识慢慢讲，在确保学生们充分了解了这项知识了以后再进入下一个话题。

翻译： 伯乐在线 - 埃姆杰