学做网页这件小事

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

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

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

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

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

好了,闲话不多说了,开始谈点正经的吧~以下的内容请循序渐进,一步一步来。

P.S. 为了降低学习的难度提高学习的速度,这里给出的基本都是中文资料。

1. 首先, 明确概念

做网页 vs 做网站

  • 做网页:这里就只代表制作静态网页。静态网页是一切网站的基础。制作静态网页非常之简单,少看个电影就能入门了。而且很多童鞋很多时候其实就只需要几个静态网页。本文会集中火力讲解怎样学习静态网页的制作。
  • 做网站:这里就指动态网页了。这个需要有高级程序语言的基础,这里不讲,等下篇吧。

设计网页 vs 制作网页

  • 设计网页:简单地说,就是指将网页画出来。这个属于美工的范畴,而不是程序。程序猿们还是先使劲学程序吧,你学的那点很难上得了厅堂。
  • 制作网页:简单地说,就是指将美工画出来的网页做成静态网页。目前国内这个还是程序猿的活。但国外很多美工都能做出代码质量很高的静态网页。因为静态网页的制作真的很好学,很简单。看到这里,你的信心增强不少了吧!

2. Web标准

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

3. 唠叨几句

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

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

4. HTML

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

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

关于HTML的教程,网上有很多,但很多都有些过时或者繁琐。个人比较推荐 网页设计师W3School (英文版)。

这个阶段需要看的内容为:

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

4. CSS

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

5. XHTML+CSS

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

6. 回头复习 2. Web标准

7. 没有了

如果您能耐心地看完这里给出的资料,并且都实践了,那么恭喜您,入门成功!

这个时候你可以说自己会做静态网页了。

当然,要学的其实还有很多很多,比如如何切图,如何使用JavaScript等等。

有关这些的文章会在近期推出,有兴趣的同学可以关注一下,谢谢。

如有谬误,敬请斧正!

附. 手册下载

这两本手册很精简,但是绝对够用了,我一直就使用这两本手册。

HTML超精简手册:HTML参考手册

CSS2参考手册:CSS2参考手册

原文地址:http://www.fancycedar.info/2011/03/how-to-learn-web-programing/

喜欢这篇文章?

欢迎订阅 PureWeber.com - 纯粹互联网。接收免费的更新提醒,以及订阅读者独家优质内容。

讨论

  1. RockU 回复

    Up

  2. Swan 回复

    Up! So great.

  3. bearzx 回复

    orz

  4. 看到那个公开课的东西,很不错,过来支持一下

加入讨论

电子邮件地址不会被公开。 必填项已用*标注