高校网页设计课程:如何给新生讲解网页设计(2)
弱化切图
把设计图当作网站想象的样子，不如就把网站做成原型。切图将不那么重要，因为这样一来需要为不同屏幕尺寸的请况准备不同大小的图片。现在背景图甚至也需要在各自的文档中自行指定。弱化了切图，也就弱化了这种图像式设计图的中心地位。在有了响应式设计之后，设计图按照既定尺寸值或者方向设计。而在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页是个绝佳的技巧)。
让学生们解释他们尝试解决的问题，并且解释采取这种做法的缘由。让学生使用博客是必须的。学生们可以通过博客发现有趣的文章，得到解决问题的新方法和代码片段等等。也可以鼓励学生形成专业的社交媒体互动，更加专注于他们的代码和工作。
理解和修改别人的代码
开源理念得到了世界的持续认可，尊重与合作后，拥有理解和修改他人代码的能力会更加重要。