作者介绍了做静态网页所要学习的知识点
(X)HTML/CSS/Web-standards

原作者：杨帆 《学做网页这件小事》
from: PureWeber – 纯粹互联网
origianl link: 已失效

神马都是浮云，神马都在云端。

在这个时代，很多人都会面临网页制作这个事情。特别是对广大程序猿们，网页制作应该是很基本的技能了——你也不用会得太多，但你也不能一点不会。

但是对于到底怎么学做网页这个小事，对新手来说却是个大事。遵循“复用”的原则，我希望这一篇文章能解除多个人的疑惑。

俗话说，师父领进门，修行靠个人。这里不会教你怎样做美工怎样编码怎样制作表单怎样控制样式，这里只会教你怎样去学习制作网页，怎样从一个菜鸟成长为一个老鸟。

我只是一个掌灯的NPC，打怪练级还得靠你自己。

谈点正经的：以下的内容请循序渐进，一步一步来。

明确概念

做网页 vs 做网站

  • 做网页：这里就只代表制作静态网页(wiki, baike)。静态网页是一切网站的基础。制作静态网页非常之简单，少看个电影就能入门了。而且很多童鞋很多时候其实就只需要几个静态网页。本文会集中火力讲解怎样学习静态网页的制作。

  • 做网站：指动态网页(wiki, baike)。这个需要有高级程序语言的基础，这里不讲。

设计网页 vs 制作网页

  • 设计网页：简单地说，就是指将网页画出来。这个属于美工的范畴，而不是程序。程序猿们还是先使劲学程序吧，你学的那点很难上得了厅堂。

  • 制作网页：简单地说，就是指将美工画出来的网页做成静态网页。目前国内这个还是程序猿的活。但国外很多美工都能做出代码质量很高的静态网页。因为静态网页的制作真的很好学，很简单。看到这里，你的信心增强不少了吧！

Web标准

这个部分第一次看的时候，不用看得太明白。等掌握了HTML和CSS之后应该再复习一下这个部分。

唠叨几句

请同学们先暂时压抑一下自己写代码的冲动，请先看看以下的几点注意事项：

  • 用什么来写代码？不要使用自动生成代码的工具！不要用Dreamwaver的设计模式！如果你对自己要求不高，你可以使用Dreamwaver的代码模式。如果你对自己要求很高，推荐使用有代码高亮功能的文本编辑器，比如：Vim (善用佳软介绍)，VS Code，Atom
  • 看教程时，所有示例代码必须自己实现
  • Dirty your hands. 实现示例时，所有的代码必须手动输入。从第一个示例程序就开始坚持！Ctrl+C Ctrl+V的话是学不会的。得真刀真枪才能锻炼出来
  • 当你等下看教程的时候，会发现会有很多内容，你或许会感叹内容太多甚至望而却步。不要慌！其实教程的很多东西都是目前不用屌的。先把这里罗列出的入门知识看完再去慢慢学其他的也不迟
  • 当你遇到问题的时候，首先应该思考——找到问题所在并尝试去找解决方案，其次应该查询参考手册，再次问Google（百度就免了），最后也可以到这里提问

HTML

HTML并非是单纯的一行一行的代码，而应该有严禁的结构——DOM。您写的不是代码，您写的也不是寂寞，您写的是一棵树。

HTML就是网页的骨骼，就是网页的结构。

这个阶段只看HTML基础教程。

  • W3School (en, zh)
  • 网页设计师 (old)

对于HTML，就只需要学习这么多。不要惊讶，这就是基础，就这么少，但一定要全部掌握。

CSS

CSS就是网页的皮肤。学会CSS之后你就可以随心所欲地控制网页的样式了。

  • CSS教程(en, zh) 也要注重实践哦！

XHTML+CSS

这个部分将告诉你怎样将HTML和CSS结合起来使用，做出漂亮且实用的网页。一定要手动编写代码实践！

回头复习 Web标准

入门了

如果您能耐心地看完这里给出的资料，并且都实践了，那么恭喜您，入门成功！这个时候你可以说自己会做静态网页了。

当然，要学的其实还有很多很多，比如如何切图，如何使用JavaScript等。只学W3School是远远不够的。

附：HTML5新特性概览