合格的前端开发：为高校新学生讲解网页设计

　　互联网处在快速变革期。网页前端开发深受近年来不断改变的编码技巧和手段的影响。在2003年，一个合格的网页前端开发者需要了解HTML和CSS，他们也可能会一点Javascript(有可能是从别的地方复制粘贴来的)。他们所编写的网站会在桌面电脑上供人浏览。

　　但是2013年情况不一样了!现在，一个合格的前端开发者必须精通HTML、CSS、Javascript、jQuery，CSS预处理器，以及诸如响应式设计之类的新技术，他们还要考虑首先为移动端设计页面，各种设备查看网站时的情况。

　　既然网页前端开发这一行业已然改变，高等教育体系需要对讲一些基本的网页设计课程。问题是，如何教那些连HTML和CSS都不知道的学生, 好让他们以独立于设备的观念，使用响应式设计和移动端优先的原则来设计构造网站呢?

　　我已经在许多学术和商业的环境下教网页设计课程13年，也提出了一些在网页设计开发过程中，如何讲最基础的两项知识(图形设计以及HTML和CSS 技术，译者注)的想法。关于这些想法的讨论十分重要, 因为讲解网页设计与开发的资源十分有限。由于时间紧迫，互联网发展迅速，那种每年一个个访问那些课程，用最新的材料更新课程的做法更加难以实施。

　　改善全职教授和兼职教员的合作有助于增强学生们的学习体验

　　兼职教员，是那些有着一份全职工作，并且兼职讲其他课程的教员。他们通常能制作专业的网站，同时也能有能跟上行业最新趋势和技术的资源。然而，缺少了接触宝贵教学法材料的便捷途径，兼职教员很难找到适合学生们消化吸收这些前沿资料的呈现方式。

　　同时，全职教师和教授们做的网站通常不会很专业(或者根本就不会做网站)，他们需要满足工作时的其他需求，很难抽出时间跟上新趋势、新技术的发展。与兼职教员不同，这些教师教授对教学方法有很深入的研究，在网页设计的课程中，什么样的教学能起作用，什么样的教学不起作用，他们了解得一清二楚。兼职教员通常晚上或者周末教学，而全职教师们常常在白天上课，所以两个群体很少有交集。增进全职教师和兼职教员之间的合作，是增强学生体验, 提高教学质量的关键之一。两种教员都会为高等教育带来互补的价值和技能。

　　在这篇文章中，我主要关注两项课程：图形设计和HTML、CSS。其他的概念，像是网站规划、移动版优先原则、信息结构、可用性、以用户为中心的设计、Javascript和jQuery、内容管理系统(CMS)、都是很重要的，都可以考虑设为课程涵盖的范围。然而，这些议题通常都在高校的其他课程中有所涉及，所以这里并不会提到上述内容。

　　创造出设计

　　在大多数学校的网页设计课程中，学生们会上一堂课，学习使用Photoshop或者Fireworks，画出一张简单的网站布局图。学生们会从现有网站的截图开始，把内容和图片换成自己的部分，或者让一切从头开始。

　　这项课程的理念是非常明智的。一旦学生们掌握了使用软件的基本方法，课程将会激发对于可用性、色彩、布局、字体、页面留白、图片质量和位置等知识的讨论，而暂时不涉及代码的部分。这种做法能让学生们在脑海中形成网页的画面，无需过多地关注网页代码是怎么编写出来的。在学生们真正开始编写网页的时候，他们就可以在写一行代码之前弄明白自己想要的是什么了。

　　让学生们在接触代码之前先形成网页的概念是十分重要的

　　在课程中，常有学生对于(元素内容)超出画布以后的行为感到困惑。如果只设计了960像素宽的内容，那么当显示器为1200像素宽的时候，页面会发生什么呢?通常情况下，超出的部分会填充为背景色或者填充为重复的图案。学生们却很少问到显示区域宽度小于960像素后发生的事情。

　　在问及较窄屏幕的情况时，大多数学生会指出页面底部会出现横向滚动条，网站访客需要拓宽浏览器宽度才能看得到完整的页面。他们(这个时候)并不会考虑按钮在触屏设备上会不会很不好操作，文字大小在不同屏幕的显示屏上是否会有很大的变动。这样的教学方式倒是可以引导学生思考这些问题。

　　许多关注于响应式设计的工作室，不会去使用像在课上设计出的那种设计图，也不把这种图作为开发过程中的一部分。相反，他们更倾向使用基于HTML和CSS的设计图来展示客户端所看到的网站外观。那为什么还要向学生们讲图像式的设计图呢?

　　原因是，在开发过程的这个阶段，学生们不一定十分了解HTML和CSS，极端情况下甚至一点也不了解。从设计图上拿掉代码的部分以后，学生们所关注的，是包括图形设计和用户体验之类的设计原则。一旦他们学会了HTML和CSS以后，他们就再也不会使用图像式的设计图了。在学习基于图像来设计网页效果的过程中，他们学会了使用Photoshop/Fireworks，了解了使用这种设计环境的优点和缺点——这也是很有益的经验。

　　下面是一些可以布置给学生的任务，让他们可以为设备独立的设计工作做好准备：

　　设计一个12等分栏的页面

　　这项任务是讲解网格系统及其工作原理的最佳时机。让学生们基于网格设计布局能展示学生们对于这种设计的理解。

　　展示不同尺寸的设计

　　一个960像素宽的页面，在1200像素宽的时候会是什么样子的?320像素宽呢?767像素宽呢?让学生们在设计中使用同样的内容，在不同屏幕尺寸的环境下安排不同的布局。确保问到了“过渡”的问题——从767像素宽缩小到320像素宽的时候，布局又会有怎样的改变呢?

　　问一些图片的问题

　　顶部的大图片在从767像素宽拉伸到960像素的时候，如何保持同样漂亮的观感呢?屏幕尺寸在767像素和960像素之间的时候，图片又会发生什么呢?

　　鼓励学生思考触摸屏的行为

　　在屏幕尺寸较小的时候这一点尤为重要，并且现在桌面电脑和笔记本电脑也在逐渐地触摸化。这里可以鼓励学生思考适合手指粗壮人士的情况。

　　弱化切图

　　把设计图当作网站想象的样子，不如就把网站做成原型。切图将不那么重要，因为这样一来需要为不同屏幕尺寸的请况准备不同大小的图片。现在背景图甚至也需要在各自的文档中自行指定。弱化了切图，也就弱化了这种图像式设计图的中心地位。在有了响应式设计之后，设计图按照既定尺寸值或者方向设计。而在 320像素宽、767像素宽和960像素宽或者更高屏幕尺寸之间的空白区域，需要反复调整。

　　有注意到一些公司有志于做出这个无需编写代码便能做出更加灵活设计的解决方案。等这样的程序更加稳定了以后，便值得考虑将这些软件的使用整合到大学课程中了。

　　讲解HTML和CSS

　　在典型的HTML和CSS课程中，学生们会学习到标记和呈现的差异。在一学期的课程中，他们学会从头创建一个网页，处理HTML、CSS和图像文件。他们的布局会各不相同，因此也会在学习过程中学到浮动和定位的知识。在碰到浏览器兼容性的时候，就会学会怎么处理这种兼容性问题。

　　“Don’t Fear The Internet”是一个学习 HTML 和 CSS 基础知识的极佳资源。上面的课程基本上没有错误。学生们会学习如何手写与标准兼容的HTML和CSS代码。同时，考虑到现代设计技术的改变，需要对课程作出如下修改：

　　以某种浏览器为标准

　　我推荐在课程中使用Firefox或者Chrome浏览器，因为这两款浏览器在Mac和PC上都可以使用，并且它们最大限度地兼容了标准。让学生知道这款浏览器是为完成课程需要关心的唯一一款浏览器。一旦学生知道了HTML和CSS在浏览器中的工作原理，就可以在后面处理浏览器兼容性问题了。如果过早地引入浏览器兼容性问题，学生们会感到困惑，不知道一个问题是因为浏览器渲染，还是只是写错了代码所带来的。

　　讲解HTML5

　　学生们应该一开始就学会如何使用等语义化标记。

　　讲解CSS3以及各种选择器

　　确保学生能尽快理解媒体请求(Media Queries)的技术。介绍临近元素选择器、子元素选择器、通用选择器以及伪类选择器等等。在此提醒，无需担心浏览器对于这些选择器的支持程度，因为这些学生离毕业还有几年时间(几年后支持这些新特性的现代浏览器就成为主流的浏览器了，译者注)。

　　尽早引入网格式的设计模式

　　即使学生们不能自己写出网格布局，他们也会在思考12栏布局的时候形成自己的布局方案，使用到em单位或者百分比单位的大小。让学生们按标准编出标准的页面，使用到2栏或者3栏的布局，不使用，或者用页眉，页脚和水平导航栏这些标准的页面，而不是放任学生编写任意类型的布局。理解设计和代码之间的妥协程度是很重要的，所以需要记得常提起这一点。

　　只要学生们学会了浮动和定位，就教会他们学习网格式布局

　　因为学生们已经按照网格化的原则思考网页设计了，这项过渡对他们来说应该会很快。

　　现阶段的响应式设计应只是略有提及，而不应大书特书

　　学生们现在应该会将网格化布局和媒体请求结合到一起了。他们应该会在这个过程中碰到图片放缩的问题了。如果还没碰到的话，现在正是谈论它的时候。

　　现在可以讨论浏览器兼容性问题

　　既然学生们掌握了合法的，与标准兼容的，带有响应式设计的代码，现在就是考虑浏览器兼容性问题的时间。一种介绍此类问题的方法就是找到一个对HTML5和CSS3选择器支持很差的浏览器，比如那些不支持圆角边距的浏览器。

　　CSS预处理技术是个热门话题

　　集中管理CSS变量是个好主意。CSS预处理技术会在接下来的一两年内，成为一个雇主需要的，核心的CSS技能(有人说已经是这样的了)。一些 LESS和Sass用到的概念，例如集中化的变量和逻辑，也为讲授Javascript和jQuery的课程提供了一个平滑的过渡，这些相似的概念在那些课程中也很重要。

　　提及响应式的设计框架是个好主意

　　如果课程还有余下的时间的话，还有一个可供学生们探索的绝佳议题。如果你教的是LESS，我会推荐使用Bootstrap;如果你教的是Sass的话，我会推荐Foundation。学生们将会学习到如何阅读他人的代码(这是个非常重要的技能!)，并且学习如何阅读文档。同时，他们也会学习到新技术，也会探索使用一个有文档的开源框架的优缺点。最后他们会学会如何按照自己的要求编写自己想要的代码。

　　间接技能

　　上面涵盖了现代前端Web开发直接塑造的技能。我会同样谈到一些间接的技能，让学生们能从这部分课程或者别的课程学习到。

　　开源的原则

　　与其告诉学生开源是‘免费’的代名词(就像免费啤酒一样)，不如告诉他们开源项目的生存来源于社区成员的贡献。了解了GitHub，也就可以解释人们如何下载，创建别人的代码分支，如何在线发表自己的代码。向学生们介绍开源社区，让他们收集这些开源社区最重视的贡献类型。

　　实时演示

　　现在，这个实时演示的部分在几年前就已经整合进课程了，但是这之前的设计师比开发者使用的更多一些。有了演示以后，听众们更关注视效本身，而不是视效背后的代码和原则。确保学生们习惯于为回顾开发过程发表代码(连接到他们的GitHub页是个绝佳的技巧)。

　　让学生们解释他们尝试解决的问题，并且解释采取这种做法的缘由。让学生使用博客是必须的。学生们可以通过博客发现有趣的文章，得到解决问题的新方法和代码片段等等。也可以鼓励学生形成专业的社交媒体互动，更加专注于他们的代码和工作。

　　理解和修改别人的代码

　　开源理念得到了世界的持续认可，尊重与合作后，拥有理解和修改他人代码的能力会更加重要。

　　认清趋势

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

　　学习如何学新技术

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

　　教初学者的一些建议

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

　　给出一个总体的介绍

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

　　翻译： 伯乐在线 - 埃姆杰