给学习网页制作新人的几条建议

您看到的这些页面都是手写。

常在休息时做一些练习:不依靠网页编辑器,通过手写一些零碎的html片断去测试xml xhtml css 以及主流浏览器的差异。对我来说,这是一种放松,同时也受益非浅。

如你现在所见,它们很平常,我尽力抛弃表现元素,只余内容。因为我相信对于阅读者,唯一有价值的只是内容。我使用xhtml 1.1 标准,努力将表现和数据分离,并尽可能清除每一个没有价值的元素……希望你在阅读内容的时,不被多余的线条、图标和动画打扰。

阅读外表华丽但源码邋遢的网页费力而痛苦。修改它们,或试图通过代码去分析数据、控制其中的片断更是极其复杂和困难。问题是,当一个人有兴趣倾听你表达的时候,为什么要塞给他一堆无用的噪音、样式和花边呢?为什么将一点有用的信息淹没在自鸣得意的杂草中?

我把这些练习汇总到这里,并给新手留下几条建议。书写规范而有效的代码,不是对标准发烧,而是今天的现实需求。写优雅的代码是一件快乐的事情,不是苦差。如果你是有志于web设计的新手,愿我的建议能于你有所助益,愿你感受到书写简练规范的代码——意即表达流畅——的快乐。

好页面是相似的,坏页面各有其糟糕之处。

  1. 好页面不超过3个主色;
  2. 好页面一次只说一个重点;
  3. 好页面不过分修饰标题;
  4. 好页面不说废话
  5. 好页面与人为善;
  6. ……
  7. 如何设计好一个页面?绝不夸张。

OK,在动手之前,让我们切记:世上只有两种页面:受欢迎的,不受欢迎的;聪明自信的,愚蠢自卑的;好页面,坏页面。

好页面不刁难用户,不强制注册,不骚扰用户浏览,不欺骗点击,站内跳转时不使用新窗口;不受欢迎的网页则急功近利无所不用其极,甚至损人不利己。

好页面主次分明,结构流畅,它相信用户,相信只需表达准确读者即可理解,无需废话;愚蠢的网页结构混乱重复罗嗦,东拉西抄头昏目眩。自卑的设计姿态夸张,内容庞杂——它假设用户像自己一样蠢笨,需要一再高声吆喝才能听到。

好页面诚恳;坏页面一味谄媚,却总被遗弃;坏页面既卑下又热情(不择手段拉人,欺骗点击),既热情(虚假广告)又计较(不忘占个小便宜:恶意代码,广告插件,限制浏览,隔几秒提醒一次注册)等等。

直线是最有效的进攻路线,形式服务于内容,是为了帮助内容易于传达和理解。网页设计的最终目的,是使得用户专注于内容而忽略设计的存在。复习一遍:浅薄者热衷浮华,空虚者虚张声势,自觉卑下者谄媚他人。

用80%时间构思,用20%时间制作。

  1. 忘记样式,仔细规划你的网站结构:栏目、导航、页面布局、css规划……从浏览者而不是站长的角度;
  2. 良好引用、良好结构、良好导航--本句引用自chedong.com
  3. 尽可能利用css的缺省属性,不必每个样式都重写或写全——css标准制定者很关心用户体验;
  4. 注意!样式也在暗示功能:同功能性链接或单元的风格不要混乱,例:栏目导航链接下划线时有时无;
  5. 尽量不使用弹出新窗口浏览:target="_blank"
  6. 不使用css滤镜:css滤镜属于ie私有代码,极度耗费客户端资源,得不偿失;
  7. 节约带宽:使用简短页面,恰当分页——精简,再精简!

可以信赖google,不要迷信教程。

如同互联网布满信息垃圾一样,银河系里繁衍着大量过时的、含混的、甚至是错误的教程。这些作者要么更新了教程的版本,要么批量蒸发——不再顾及他留下的过时教程的后患;

web发展迅速,当你在网上寻找答案的时候,切记首先查看教程的最后更新时间。谨慎对待你找到的建议——包括本文,确认其正确可行才使用。

什么?你不常搜索?@#$……我喜欢google,他给予我的,远胜我的大学。

爱人者必被人爱:为你的每一行代码负责,让代码易读,乐于分享。

  1. 尽可能遵守网页亲和力规范;
  2. 养成好习惯;
  3. 在FireFox里调试,然后兼容ie;
  4. 源码也有读者,也要排版:在源码中准确使用缩进;
  5. 切忌随意省略;
  6. 慎重使用缩写;
  7. 写规范干净的的代码,不要偷懒,也不要邋遢;

不存在只有一个读者的代码。所以务必让你的代码易读,至少为了3个月后你自己还能读懂。

Firefox,一款优秀的现代浏览器,安全、快速、好用。虽然ie也是不错的浏览器之一,但是FireFox比ie更准确解释和执行标准。在FireFox里调试页面,能学习到正确的css知识,然后兼容ie。习惯使用ie调试页面的人会在某一天发现:“天啦,原来俺一直这么干是错误的。”micro$oft误导了你。

  1. .lm { color:red;}
  2. .table1 { color:blue;}
  3. .table2 { color:blue;}
  4. .bt3 { color:green;}

看看左边:不出1月,你将对自己写的这一段css后悔,它们是控制那个部分的呢? 或许应该这样: .head_menu {...} 一看便知,这是头部菜单。 .footer_link {...} 很好认,这是底部链接。 .user_name {...} 这个当然是用户名了。 .do_not { text-decoration:line-through;} 看左边,删除线样式;

最后,当你遇到网上有人求助而你知道答案,不要吝惜回复。爱人者必被人爱。



还是无法满足所有人!

  1. 我维护和管理的论坛上,曾有用户要求:“为什么不放一个flash时钟?或游泳的金鱼呢?效果很炫耶~~”
  2. 我仍然没有理解,谁每天去论坛就是为了看很“炫”的金鱼呢?
  3. 我的教训是,你无法满足所有人,把你的用户细分,分到最细,只服务这群人,努力做到最好。

伙计,该出发啦!

  1. 勿以恶小而为之。
  2. 勿以善小而不为。

“人最宝贵的是生命,生命每个人只有一次。人的一生应该这样度过:当他重看当年代码的时候,不因疏于学习而悔恨,也不因代码混乱而羞愧。”

---摘自CodeCoke:《好网页是如何炼成的》 

End Channel Nav
>莫非的菠萝果

代码课博客导航

本Blog其他文章