网页设计的步骤：
1:定位
在通过与客户,或与和客户接触的业务人员交流,做出一个准确的定位.
定位的准确与否,虽然不能决定一定通过,但如果定位不准或相差太远,那么100%被pass.定位决定了你出的稿的品位.试想一下,一个年产值 100W和一个年产值1E的企业,定位能一样么?同样的,将这两个企业正确的定位交换一下,同样都过不了.年产值100W的,一般情况下思想都没有达到那 个高度,这是由企业的规模大小来决定的,(注意,这里说的是一般企业),而年产值1E的企业,你给他100W的那个高度,他自然也看不上眼.在交流的时 候,准确把握住客户的喜好.仔细观察客户企业/办公室的装修及装饰.注意一下他的言行举止.做到这几点.即使在与客户语言的交流上你得不到准确的定位,也 可以从侧面分析出来.尤其是那些不懂得表达的客户.更要注意这些侧面的东西.
一般我向客户伸手要的第一份资料是客户的CIS样册.CIS对企业意味着什么,不就不多说了,自己去查.CIS,可以说是灵魂一般的东西.
05年初,公司接了个单.在初稿形成之后,从业务那边得到的信息,我认为这仅仅是一个土老板的小厂子,所以就按照经验,做了一个适合他们口味的版. 结果这个版到那边之后,副总拍板通过.这就坚定了我本来很摇摆的心态.但结果是一直收不到钱.原因是老总回来之后直接否决了.在拉锯了3个月之后,我和业 务来到了厂里.一进大门我就知道不好.在见了老总之后,我不得不对他们的公司做了新的定位.然后就判断出副总和老总的差距太大.事实证明了我的判断.工人 们对老总都是言语中带着钦佩.对副总却是不屑一顾.
定位,并不是一个能够用准确的语言表达出来的.这需要你去发现,需要你去判断,需要你去感觉.
2:参考(可能会省略)
用一句完整的话来说,就是”全面研究和发掘客户给出的相似站点”,其实这一点不用多说,就是客户给出的参考网站,你要仔仔细细的全全面面的浏览,并且做出透彻的理解.而且必须理解到客户说的人家哪里好,人家哪里不好.这样,你才会对你的稿有更多的把握.
3:沟通
这个词天天都会看到,但你有没有想过这个词具体表达什么意思呢?
在我看来,无非是理解和表达.中间穿插着分析而已.理解了客户的意思,分析利弊,分析轻重,分析合理性.然后再根据自己的专业知识做个筛选,最后表达出来.注意,客户并非专业人员,所以,你必须用他们的语言来表达自己的设计思路.
不懂得表达的设计师,不能算是优秀的设计师.同样,不懂得坚持原则的设计师.也不是好的设计师.要理解的是客户并非专业人士,他们仅仅是在讨论或批 评你的作品而不是你的人品,在沟通的过程中守好你的底线,一句老话,生意不成仁义在.千万不能动怒,哪怕对方爆了粗口,因为,客户比你更关心你的作品.
在出稿提交给客户的时候,有一点非常重要,也是大部分人没有做的.就是设计说明,一般我是两种方案,因为文字类的不如语言来的直接迅速,所以我会打 个电话给客户,简单介绍一下,如果客户有空,而且愿意的话,我会挑个时间直接登门,如果客户没时间,我会奉上我的设计说明.专业的态度,决定客户对你的尊 重程度,而你的名气,大部分的作用是价格的高低.
在制作进行到80%的时候,或者提交初步完稿的时候,你要将你为客户设计的功能或图片夸张150%给客户知道.因为这个时候再博得进一步的好感,客 户会更爽快的跟你结帐.然后迅速到位的解决客户要求增加的内容,顺带问问是否将访问设置成多少多少次.是否增加一些其他的提示信息…….
要从不同角度去分析客户提出的意见建议(在稿件没有大的变动下),一般我都是说没有问题.然后略为思索,用最简练通俗的语言表达出你的方法或手段. 让客户坚信你没有问题.而如果真的有问题,也还是要在没有问题之后,用平淡的语气说出的想法或难点,并且要让客户理解.如果客户坚持,那么不要轻易的提到 加钱.引导客户,通过工作量的增加,难度的增加等等手段让客户自己提出加钱的解决办法.
对于老板娘或其他人的意见.首先你要作到滴水不漏的接住.千万不要人家一说话你就没音了…要善于运用(老板的意思是***,老板觉得***)这 是中央集权的方法.如果老板不满意,而手下的人满意.那么你就要很小心的说X总在颜色方面好象比较了解,他认为这个不错,XX主任的感觉很敏锐,他觉得这 个也不错.)这样类似的句子.记住,在你取得客户的绝对信任之前,千万不要直接否定他们任何人的意见.即使客户砸了自己的脚,你也要给他把锅给背了..
(好象说多了…)
4:修改及后期维护
即时到位,保证质量.有那些很讨喜但不费力不费时的,免费送给他.
PS:学习及设计态度.
认真负责,健康热情的态度.会让你在工作和生活中获益菲浅.
注:
所有文字,除注明网站类型外,其他均针对企业站点.请随时注意留言,若修改则会在首页提示文字里标注.若
牵扯到业
务方面的问题,我可能不会做过多的阐述.但会讲一些基本的原则和处理技巧.重要的文字一般都是加粗的….有经验的人直接看加粗的内容就可以了.除了第
一条以外,其他的初入行的可以跳过.
沟通部分,适合大部分设计行业.
本章全是理论的东西,不牵扯实际设计.
原文链接：http://www.happyui.com/index.php/designarticle/64-webinprove01.html
两个10大戒律都是不是新鲜的总结了，他们很早就被国外设计组织提出并被翻译成中文“引进”到了国内，即使很早就已经出现的设计戒条，现在依然有用。
10个WEB设计戒律
最近 BusinessWeek.com 邀请了14名 Web 设计方面的顶尖专家，就 Web 设计发表自己的看法，最终，他们编写了 Web 设计的十诫（35公里 ）。
1. 不可滥用 Flash， Adobe 备受欢迎的 Web 动画技术，Flash，在很多地方显示了它的威力，从 Nike 充满炫耀味道的整体 Flash 网站，到充斥各个网站的 Flash Banner 广告，然而该技术很容易被滥用，大量的，无节制的 Flash 动画不仅带来易用性问题，而且让用户的浏览器不堪重负；
2. 不可搅扰内容， 广告对一个网站的生存也许很重要，但易用性研究者认为，弹窗广告，以及全屏广告会扰乱网站的内容，并挑战用户再次访问的信心。传统的 Banner 广告可能更好一些；
3. 不可失去条理， Web 是个大宝藏，但失去条理的网站让人无法访问其中的内容。包括 Amazon.com 在内的一些优秀网站向来将对内容的组织视为首要设计任务；
4. 不可滥用玻璃倒影效果， 苹果向以时尚与酷绚的设计著称，但一些专家称，苹果在他们的产品图片中设计的玻璃倒影效果被大量模仿，最终将这种风格演变成恶俗；
5. 不可在网站命名中跟风， 一些聪明的网站主在网站命名中不使用任何元音，或尽可能多用元音，比如，Flickr， Smibs， 以及 Meebo，这些命名方式会随着时间很快过时。（中国网站流行的恶俗命名方式包括使用数字谐音，所以，我们有数以万计的 51 什么什么的网站 – 译者）；
6. 应当重视文字版面， 尽管宽带连接无处不在，但纯文字版面的网站仍然拥有一种不可低估的势头。这类网站的典型包括 Craigslist ，Coudal Partners ，Daring Fireball 。（还有译者最推崇的 Alisapart.com ） ；
7. 应当有吸引用户的内容和体验， 单单漂亮还不够，Facebook 以及 YouTube 一类的站只所以吸引用户，是因为他们有抓人的内容；
8. 应当走向社会化， Web2.0 已经无处不在，MySpace 一类的站点引领了用户交流沟通的趋势；
9. 应当大众熟悉的技术， Wikipedia , YouTube, Facebook 一类的网站已经成为很多人生活的一部分。应当将这些网站中的元素引入你的设计，让你的用户感到亲切，熟悉；
10. 应当坚持内容为王， 内容为王的口号已经不新鲜了，但仍然有用。外观的美丽无法弥补内容的空洞。
本文由以下14位在 Web 设计领域成就卓越的专家编写:
Dan Cederholm, SimpleBits 的创办人（请参阅：佳站有约-SimpleBits ）
Chris Conley, IIT 设计学院教授
Malcolm Garrett, AIG 创意总监
Robert Greenberg, R/GA CEO
Steven Heller, School of Visual Arts
John Maeda, Rhode Island School of Design 总裁
Don Norman, Nielsen Norman Group 创始人
Dave Shea, mezzoblue 创始人《The Zen of CSS Design 》一书的作者
Lisa Strausfeld, Pentagram 合作伙伴
Jakob Trollbäck, Trollbäck 创始人
Khoi Vinh, NYTimes.com 设计主管
Simon Waterfall, D&AD 创意主管
Martin Wattenberg, IBM 视觉交流实验室经理
Jeffrey Zeldman, A List Apart Magazine 杂志出版商
10个设计师戒律
NewWebPick集结中国、法国、意大利、德国、英国、日本、巴西、波兰、美国、新西兰各国当红商业设计师和团队，起草编写了“设计师十之诫”，希望对准备从事或正在从事设计行业的朋友们有所帮助，对“设计师”这个职业有更深层次的认知。（蓝色理想 ）
第一条
：
不可抄袭他人之创意，不论有何前提；
Not to copy other’s creative work, under no circumstances;
第二条
：
不可过分依赖电脑技术，切记，你是一名设计师，不是一名电脑修图员；
Not
to rely completely on computer technology, it is a tool only and cannot
substitute your creativity. Remember, you are a designer, not a
computer graphic editor;
第三条
：
不可一直追随流行设计风格，现在流行的，必是马上过时的；
Be a creator and not a fashion-follower because a trendy style today would become an out-dated one tomorrow;
第四条
：
各用10%的精力涉足十门设计学科，不如用100%的精力涉足于一门学科；
Trying ten design fields simultaneously but badly is worst than concentrating on one field and master it;
第五条
：
不可将自己都认为有问题的作品向公众发表；
Be professional and not to release any art works that you don’t like;
第六条
：
不可因低价商业项目，而放低对作品的要求；
Not to lower the quality in view of low business value of an art work;
第七条
：
不可凭主观意识评价他人作品；不可人云亦云；
Not to criticize other’s artwork merely on the ground of one’s preferences nor just replicate comment from someone;
第八条
：
不可闭门造车；了解一些历史、哲学和人文，将对你的作品大有好处；
Not
to create artwork without any ground. Great works usually come from the
understanding of the culture, history and philosophy;
第九条
：
不论身份高低，须保持谦虚的态度；
Keep yourself modest to people, no matter you are just a novice or a master;
第十条
：
永远坚信：设计可以拯救你的国家，可以改变世界。
Always believe that design can save your country and change the world.
浏览体验
内容建设
网站结构和界面
增强交互性
通常具有交互性服务的网站都有不错的粘度，内容类网站可以通过增加文章评论来提高交互性，除此以外，还要鼓励读者进行评论，很多博客都有一些第 三方插件可以增强读者的评论体验，例如不注册即可评论（降低评论难度）、得到回复时邮件通知、给评论打分等等，都是不错和鼓励用户发表意见的方法。多和读 者交流，对于保持长期稳定的流量有一定好处。
从2001年网络泡沫爆发，到2006年无处不在的WEB2.0 正式成为主流大约用了5年的时间。在这5年里，人们通过对XML和RSS等标准格式、面向服务的网络应用程序、用户控制的数据的应用，认识到了英特网真正 的力量，当然，整个社会对英特网的接受也功不可没。在这期间，我们见证了社交网站的崛起和许多漂亮的交互式WEB应用程序的出现，我们的个人生活已经与互 联网密不可分。如果在这5年里，你是一个自由网站设计者的话，你可能已经分到了博客、社交网站、Flash、或者WEB应用程序的一杯羹。并且你不管以前 和现在都可以仅仅通过专注于做美工或者程序员潇洒的生活。
所以我们的问题是自由网站设计者未来的5年会怎样?这会对你有什么影响?下面有5方面的预测.：
全球化程度越来越高
互联网上的世界简直是太缤纷多彩了。我曾经遇到来自东欧的杰出程序员、来自澳大利亚的的不可思议的博客、来自南美的杰出美工。不难看出，全球化正在 给商业带来巨大的影响。自由职业者可以给自己一个定位，通过做外包更快的成长，同时你可以利用充足的人力资源库。所以，如果你的最佳承包商来自印度，你的 顶级客户来自西班牙，你的网站最忠实的访问者来自加拿大，也不要感到惊讶。
富界面应用程序的崛起
正如在最近的海报的提到的，WEB应用程序正变得更加深入，更具互动性。正是由于这些技术，越来越多的软件和数据都在往互联网上转移。对于自由网站 设计者，这意味着：第一，那些已经接受了互联网文化的人会有更多的需求;第二，想要继续把握住机会，继续有饭吃，就必须与时俱进。在九十年代后期“懂一点 HTML和图像处理”仍能找到一份很好的工作，当然，现在这句话早就不适用了。所以，当你展望未来的时候，当心类似的陷阱，要时刻关注和吸收新技术。
战略家站得住脚
说实话，同样的工作，可能有人比你做得好，可能有人比你收费低，也可能有人既比你做得好又比你收费低。正因如此，现在越来越多的网络工作人员把自己 定位为 “战略家”。一个Flash或者CSS程序员很容易找到外包项目(以后几年正能会更容易)。所以，超越仅仅只做一件事的层面吧。做一个能够在遇到问题时拿 出解决方案的人。拥有你自己的承包商和客户。把你自己变成一个能够让客户第一个想到的人。如果你做到这一点，你将变得很难替代，你就能够在未来的互联网领 域叱咤风云。
门槛越来越高
在八十年代初，当PC游戏业仍处于起步阶段的时候，许多个人开发者和他们的小团队靠做一些很酷的游戏(如理查德‧盖瑞特的创世纪系列和席德梅尔的文 明)出了名。然而到了九十年代和现在，游戏都变成了需要有数百万美元预算和上百人的开发团队的庞大产品。行业的成熟意味着门槛的提高。网络设计也会遵循同 样的规律。尽管许多任务，比如付款处理和购物车技术已经变得比较简单，但大部分网站的解决方案都包括像搜索优化，搜索引擎营销，社会营销，内容管理模块， 与其他网站交互等一些复杂的技术。这意味着必须接受更多的培训，积累更多的经验，才能在网络世界里驰骋。所以尽管通过一定的学习和经验还是能够很容易的闯 入网络设计领域，但你要明白，学习曲线仍然在增长。
更多机遇
虽然不断发展的网络技术意味着你要学习更多的东西，但同时也给你带来了更多的机遇。十年前，仅仅只有一类网络工作人员：“网站建设者”。如今，许多 人正通过做Wordpress 主题、ajax开发、电子相册、搜索优化、零售网店、Facebook apps等大把大把的赚钱，并且这些赚钱的方式还在增加。所以，不要一想到网络技术将会越来越复杂就泄气。相反，你要看到它每天给你带来的的意想不到的机 遇，并抓住他们。
对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。
用户体验，英文叫做User Experience，缩写为UE或者UX。一种纯主观的在用户访问一个网站或使用一个产品（服务）的过程中建立起来的心理感受。他们的印象和感觉，是否 成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的 真实体验是无法通过其他途径来完全模拟或再现的。
1、超长的页面下载时间
如果页面下载时间超过30秒，很难有用户会喜欢你的网站。
2、无限制的使用Flash及图片
适当的用一些图片及Flash，可以增加网站的生动性，增加视觉冲击力。但无限制的使用Flash及图片，会造成页面文件超大，占用浏览者的CPU 资源，并且不利于页面更新及搜索引擎对网站的抓取。企赢营销在服务企业客户时也会遇到纯Flash的整站首页网站，建议网站建设过程中要考虑视觉效果的同 时，把优化的因素重视起来。
3、网站页面过长
你认为有多少浏览者有兴趣看你网页中最下面的内容，不要拿自己来作比喻，因为99%以上的人才刚学会上网。
在王建硕的一篇文章中提到：“1995年Jakob Neilson做的互联网用户调查，美国的用户在1994年的时候，只有10%的用户会拖动浏览器右边的滚动条，而绝大多数，90%的用户，打开一个网 站，只看浏览第一屏看到的内容，就以为看到了全部，而不会向下滚动。”
现在中国也有这样的人，而且为数不少。在一个网站的首页，能看到第三屏内容的人只有10%以下，一个过长的网站很容易引起浏览者的视觉疲劳，更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。
4、不友好的导航
不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容。用户来到一个页面不知如何返回上一页，不知道当前页面是在哪个栏目下的，这样的网站很可能用户来了一次就不会再来了。
5、过期的信息
很久不更新的信息，很容易让浏览者感到反感，而且在心中也会对你这个网站的品牌形象大打折扣。
6、死连接或连接错误
这个就不说了，这是最基本的错误，但是好些还有这样的错误，包括新浪这种大网站。
7、孤立的页面
用户不知用什么方法返回首页，这种情况往往是出现在信息提示页或内容调查的结果页上。
8、页面没有视觉差异
页面没有视觉差异，页面设计很“平”，缺少“层次感”，缺少视觉冲击力和亮点或者视觉冲击力突出的并不是网站的主体内容。这是没有经验的设计师设计大型网站时最容易犯的错误。
把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少。页面设计要吸引并引导浏览者来观看你想推广的内容或产品，当然对网页“层次感”的
设计平不是简单的用一些纯度高的颜色来实现，要根据页面的环境及周边元素综合考虑。就象在一个黑板中画一个白点很明显，但在一个白板上画一个白点就看不清
楚了。
9、链连没有标准的表现形式
现在很多刚上网站的人还只认为有带下画线的文字才是链接，网站要有统一标准的链接表现形式，并且要和没有连接的文字有区别，要让浏览者很方便的认出哪些是连接的文字。
如果是图片加的连接要在图片下标出“点击图片见大图”，图片一定要加ALT属性。“更多”要用中文写，最好不要MORE或者标点符号代替。
10、过多的运用新技术
所谓新技术，就是只有少数人掌握的技术，虽然有可能他的视觉效果很好，功能很强大，但过多的运用新技术，就意味着你准备抛弃99%的用户。
11、缺少互动的内容
缺少互动的内容，缺少网友的参与，不能让网友表达情感和思想，注定这个网站只是个死网站。
12、过复杂的文件目录及文件名
过复杂的文件目录及文件名，不利用搜索引擎对页面的抓取，并且也不利于浏览者的记忆。几乎100%的人输入网址时会用到IE的缓存，目录和文件过于复杂，排在IE缓存很靠下的地方，你当然被第二次访问的机率小的多。
不要说什么用收藏夹，不会有超过一半的人会用收藏夹。而且象我这种收藏夹过于庞大的人，想在收藏夹里找一个网址也是比较不容易的。
13、使用框架
不建议使用框架，不为什么，就因为搜索引荐不喜欢。连Google的广告计划中，对有框架的代码都是单独的。
14、恶意插件，恶意弹出窗口
15、页面中不要过多的用_blank
过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。
来源: 企赢网络营销
2010 年的 Web 会是什么样，或者说，未来的 Internet 意味着什么，2010 会是值得关注的一年。本文从 5 个方面展望 2010 年的 Web，包括 HTML5，CSS3，字体服务技术；浏览器；社会媒体；JavaScript 框架；以及 SAAS。
1. CSS3, HTML5 以及 字体服务
CSS3，HTML5，以及 Typekit 一类的字体服务，将给 Web 设计师带来更多自由。
CSS3 的新功能会让 Web 内容的展示变得更容易，从多背景图 ，到更强大的选择器，到颜色渐变 ，到圆角 ，这一切都让原先复杂的工作变得简单。
HTML5 虽然进展缓慢，但必将改变我们描述页面的方式，成为通往语义 Web 的重要阶梯，为 Web 带来真正的本地多媒体支持，并改善我们同 Web 内容的沟通。
而 Typekit 一类的字体服务联同 @font-face ，将允许我们在 Web 页面上使用任何字体，设计师们不必再依赖 CSS 背景图 ，JavaScript 或 Flash。
这意味着什么？
这些新技术将为 Web 世界带来新的美学体验，当然，也会引发新的滥用潮，那些蒙古大夫式的设计师将会大量使用各种花里胡哨的字体和渐变色，使他们的页面变得难以访问，对专业的设计师而言，这些新功能会让他们的创意更吸引人。
延伸阅读:
- Typekit
- CSS3.info
- Play around with CSS3
- Get Ready for HTML 5
- 5 Exciting Things to Look Forward to in HTML 5 （Six Revision 主编 Jacob Gube 撰写）
2. Web 的消费方式
浏览器领域重新繁荣，诸如 Google Chrome, Firefox, Safari, Opera 一类的浏览器大行其道，用户如今拥有更广泛的选择，厂商之间的竞争更加激烈。浏览器之战进入新的阶段，和过去不同，过去的浏览器之争是微软主导并最终将对 手消灭，新的浏览器之争使 IE 身涉危境。
人们消费 Web 的方式也在改变，上网不再意味着坐在电脑桌前打开电脑，智能手机越来越普遍，电视可以上网，SP3 之类的游戏机，上网本 ，iPhone，Android 设备都可以在一个相对小的屏幕上给用户带来上网体验。
浏览器本身也在改变，Google Chrome 将 WebKit 引擎，将大部分 CSS3 和 HTML5 功能从苹果迁移到 Windows，Google 在未来几年的目标是争取到 10% 的市场份额 ，这将撼动 IE 的统治地位，在德国，Mozilla Firefox 已经在超过 IE 成为主导浏览器 。
这些因素也将改变我们对 Web 设计以及可访问性的看法，你的站点是否有一个移动版本？它们在小屏幕上看上去如何？在一个很大的屏幕上看上去又如何？在 Weibit 引擎，或是 Gecko 引擎，或是 Trident 引擎上看上去是否一致？
人们对在不同设备上访问 Web 的观念也在改变，设计师们逐渐意识到，没必要在各种不同设备上输出相同的页面 ，也无需为不同的设备提供相同的用户体验。
这意味着什么？
人们将发现 Web 在不同的浏览器上有不同的样子，诸如渐进式增强 的 Web 技术越来越普遍，为不同 Web 用户提供不同的体验。同时，放弃对陈旧浏览器的支持也逐渐为人接受，让用户将压力推向浏览器厂商而不是设计师。另外，人们会将注意力转向内容，功能，可访问性，并注重设计和创意。
3. 社会媒体
没有人会否认，2009年是社会媒体极其重要的一年，比如， Twitter 已经成为热门话题，它还会继续热门。诸如 Twitter， Facebook 一类的平台的发展使 Web 逐渐成为社区导向的 Web，毫无疑问，社会媒体会有大的变革且会实现盈利。
围绕着社会媒体的一个问题是，如何衡量它的价值并获得这份价值。1000个 Twitter 跟随者价值几何？他们是否将为此收费？在2010年，对这类问题的解答将导致社会媒体的大变革。
伴随着这些变革，信息的实时获取将成为焦点，Google 已经在讨论针对 Twitter 等平台进行实时搜索 的问题。这些改变如何同现有的系统，尤其是搜索引擎技术集成，将引发一些技术革新。
这意味着什么？
随着越来越多的人参与 Web 信息的创建，我们获取信息的方式将从过去的单一来源向更社区化的来源转变，假如我们要搜索修车行，我们会看到修车行最新的 Twitter 或 Facebook 消息而不是那些过时的静态内容。
4. JavaScript
当 CSS3 和 HTML5 开始涉足 JavaScript 的地盘，JavaScript 本身也向 Flash 逼宫。诸如 jQuery 一类的框架使富客户端，异步与无缝用户体验变为现实，Web 应用的开发变得更简单，并引发竞争和创新。
JavaScript 已经可以帮我们实现过去只能靠 Flash 实现的东西，如交互式游戏 ，复杂的交互式数据可视化技术 ，也使那些富客户界面，Flash 式体验变得更具可访问性。
最近，已经 10 年没有升级的 JavaScript 也迎来了它的一次重要升级 (中文 )，一旦浏览器厂商们吸纳了这些标准，Web 开发者们将拥有更强大工具来创建 Web 应用。
这意味着什么？
随着 CSS3 和 HTML5 开始涉足一些 JavaScript 的功能（如复杂对象的选取，动态圆角，实时可编辑页面），JavaScript 将趋向于用来处理 Web 应用与客户端的程序逻辑。JavaScript 的最新升级将使 Web 应用之间更容易相互操作（JavaScript 的这次升级的一个主要目标是实现 JSON 对象的安全 细则）。
5. SaaS – 软件即服务
SaaS （软件即服务）已经不新鲜，象 37 Signals ，Google Enterprise 一类的 SaaS 越来越普遍。竞争会越来越激烈，引入门槛低，那些小厂商将有机会和大厂商展开竞争，2010年，我们会看到这种竞争加剧并带来 Web 应用的创新。
这意味着什么？
SaaS 商业模式会继续取代传统软件的位置，随着上网的人越来越多，人们需要的是基于 Internet 可以相互操作的系统。
延伸阅读
- Creating a Timeless User Experience
- 10 Useful Gadgets for Mobile Computing
- 10 Simple Web Accessibility Tips You Can Do Today
- Related categories : Web Development and User Interface
关于作者
Dave Sparks 是一位 Web 设计与开发工程师，现居 Lake District 的 Kendal，就职于 Armitage Online （偶尔自由职业）。擅长 PHP 开发。他的博客为 Kamikazemusic.com ，Twitter 为 twitter.com/dsparks83 。
关于译者
刘清涛（35公里），CSDN特约记者，Web开发与设计师，COMSHARP CMS 开发成员，热衷 Web 技术，长期译介海外最新 Web 相关的技术文章与资讯，在 CSDN 开有专家博客 。
最近越来越多在博客上写些UX相关的内容作为分享，就涉及到跟普通博文不一样的文章建构问题。文章内容固然很重要，但排版、组织也是提高可读性和用户体验的关键呢。于是乎在比较著名的几个UX博客/网站上找了些值得学习的地方。
一、开篇
如果你的文章内容较长，开篇给出一个小总结、简介或内容纲要是不错的做法。
图1 ：Nielson 的文章全部一个板式，开首必不可少Summary
图2 ：Smashing Magazine 的文章，一开始除了有内容简介，还会摆出相关文章。
二、正文 1. 标题的样式
这是首要解决的问题，因为标题是表示文章层次结构的最佳手段。可以通过调整字体颜色、大小，加入分割线等来实现。好的CSS是一劳永逸的基础哦~~~
图5 ：UX Booth 用不同的字体颜色、大小表示层及关系
图6 ：Smashing Magazine 优雅的二级标题，以及一级标题的分割线
好的图片能让文章增色不少，必须是读图时代嘛。贴图，也有点儿学问哦～～
图7 ：UX Matters 的文章，图题都在上方，且有清晰的标识
图9 ：用框线将图题与图片装在一起也不错，不过比较花功夫吧
另外，在文章开始以图表意（如图3所示），也是添加趣味性的做法哦
图10 ：Johnny Holland Magazine 上的文章，开始都是一幅图
我发现这是国外UX博文蛮常见的做法呢。中间穿插一些引用，可以适当减低长篇阅读的疲乏感哦！
图11：A List Apart文章中的引用
图12 ：UX Matters文章中的豆腐块引用很经典。有时候只看豆腐块就够了
行与行之间的留白 、恰当使用编号列表 都是提高博文可用性的重要手段。另外，Nielson还有爱用的一招是加粗关键字 ，也不妨学习学习。
图14 ：Nielson自己的研究表明，人们阅读网络文献都是跳着挑字眼看的
三、结束部分
对于长文来说，给出个小结总是必要的。除此之外， “延伸阅读”是一篇好的UX博文应有的部分，让你的读者可以按图索骥。如果有参考其他文章，请给出“参考文献”部分，为你文章的专业程度加分~~~
图15 ：Smashing Magazine上的延伸阅读
图16 ：UX Booth上的延伸阅读
图17 ：良好的参考文献
总而言之 ……
以上几点不是什么八股的东西，毕竟文章个性很重要。不过作为本身研究UX的人，多多考虑读者的用户体验嘛，也是应该哈。当然，最最重要的，还是内容本身。
一、少用偏门。
类似break-word断行，z-index手动分层，还有像垂直对齐等等这些偏门
CSS最好少用，因为不一定所有浏览器都支持，而且极难通过W3C检测。
二、center不是float的值。
很多新手都会把center误认为是float的值，而偏偏不是如此。center只是text-align的值。
三、
对齐不能包括两个值。
很多新手会在float或者text-align中填写两个值，比
如：float:left top。这是不允许的，浏览器也无法识别。
四、滚动条颜色最好不要自定义。
很多浏览器不能正常识别自定义颜色的滚动条，况且很多自定义颜色都不能通过W3C。
五、单独滚动条设置。
现在经常使用overflow-x（横向滚动条）或者overflow-y（纵向滚动条），在设置这个的时候经常会发现并不是所有的客户端上都有效果，
大家在设置的时候最好在body和html同时进行设置。然而这个CSS也不是CSS2.1支持的（CSS2.1支持overflow，同时定义横纵滚动
条），直到CSS3才支持这种定义方式。尽量少用。
六、background和color颜色相同会受到警告。
一、所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和<
/li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"
/"来关闭它。例如：
<br /><img height="80" alt="网页设计师"
src="/uploadfile/200806/17/8C162625950.gif" width="200" />
二、所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和
属性的名字都必须使用小写。例如：<BODY>必须写成<body>
。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
三、所有的XHTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>必须修改为：<p><b></b>
/p>
就是说，一层一层的嵌套必须是严格对称。
四、所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：
<height=80>必须修改为：<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
<alt="say'hello'">
五、把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。
六、给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap> <input type="checkbox" name="shirt"
value="medium" checked>
必须修改为：
<td nowrap="nowrap"> <input type="checkbox" name="shirt"
value="medium" checked="checked">
七、不要在注释内容中使“–”
“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：
<!–这里是注释———–这里是注释–>
用等号或者空格替换内部的虚线。
<!–这里是注释============这里是注释–>
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
1、浏览器支持的不一致性
览器的漏洞或缺乏支持的CSS功能，导致不同的浏览器显示出不同的CSS版面编排。例如
在微软Internet Explorer6.0的旧版本 ，执行了许多自己的CSS2.0属性，曲解了很多重要的属性，例
如：width，height，和float。许多所谓的CSS人员，必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中，要达到像素
精准的版面编排，有时候是不可能的。
2、CSS没有父层选择器
CSS选择器无法提供元素的父层或继承性，以
符合某种程度上的标准。先进的选择器（例如 XPath）有助于复杂的样式设计。然而，浏览器的性能和增加彩现的问题关系著父层选择器，却是CSS的工作
群组拒绝建议的主要原因。
3、不能明确地指定继承性
样式的继承性，建立在浏览器中DOM元素的层级和具体的
规则上。
4、垂直控制的局限
元素的水平放置普遍地易于控制，垂直控制则非凭直觉性的、较迂回的甚至是不可能
的。简单来说，例如：垂直地围绕一个元素、页尾的放置不能高于可见视窗（viewport，视窗或屏幕的可见范围）的底部范围、需要复杂而非凭直觉性的样
式规则，或是简单但不被广泛支持的规则。
5、显示的缺乏
目前的CSS没有办法明确又简单的显示属性值（例
如：margin-left: 10% - 3em +4px;）。这在很多情况下都是非常有用的，例如：总字段中计算字段的尺寸限制。无论如
何，CSS WG发表了CSS局限性的草案，而InternetExplorer 5 以后的版本支持相似功能的语法显示。
6、缺乏正交性
同样的效果可以用不同的属性来完成，这经常会造成困扰。例如position、display与float定义了不同的配置方
式，而且不能有效的交替使用。 一个display: table-cell元素不能指定 float或是position: relative，因为指
定float:left的元素不应该受到display效果的影响。再者，没有考虑到新建立属性所造成的影响，例如在表格中你应该使用border-
spacing而不是margin-*来指定表格元素。这是因为依照CSS准则，表格内部元素是没有边界（margin）的。
总结了部分所学、所听、所看、所问的一些CSS写作经验，书写高效的CSS - 漫谈CSS的渲染效率，它们与渲染效率及所占用消耗的资源有一定的关
联。部分为自己理解所写，不排除会有错漏，欢迎提供更好的意见。
1、十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是
大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议
用 - color:#FF33AA;
2、display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物
理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;
3、
border:none;与border:0;的区别
和display与visibility的关系类似，分别不
保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;
4、不宜过小的背景图片平
铺
一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背
景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建
议用 - 衡量适中体积及尺寸的背景图片
5、IE的滤镜
IE的滤镜除了比较消耗
资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上
已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。
6、*
{ margin:0; padding:0;}避免浏览器样式差异
*号通配符把所有标签都初始化一遍，浏览器的
渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做
能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制
内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。
7、不要添加额外的标签来描述class
或id
如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个
不存在的理由而降低了匹配的效率。
* 不赞成 - button#backButton { }
* 不赞成 - .menu-
left #newMenuIcon { }
* 建议用 - #backButton { }
* 建议
用 - #newMenuIcon { }
8、尽量选择最特殊的类来存放选择器
降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用
为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 - treeitem[mailfolder="true"] &
gt; treerow > treecell { }
* 建议用 - .treecell-mailfolder { }
9、
避免子孙选择符
子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类
的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
* 不赞
成 - treehead treerow treecell { }
* 好一点，但还是不行(参照下一
条) - treehead > treerow > treecell { }
10、标签类中不要包含子
选择符
不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会
被匹配的情况下）
* 不赞成 - treehead > treerow > treecell { }
* 建议
用 - .treecell-header { }
11、留意所有子选择符的使用
小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。
* 不赞成 - treeitem[IsImapServer="true"] > treerow > .tree-
folderpane-icon { }
请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性
改变的子 XUL 元素上的 RDF 属性。
* 建议用 - .tree-folderpane-
icon[IsImapServer="true"] { }
简短的介绍和图片，列举出Web2.0网站十五个显著的流行风格要素。不必在一个设计中应用下列所有的元素，掌握何时用和如何使用才是关键。希望此文
对你的设计有参考意义。
1.简约：
至于简约的风格，对于我们来说不是必要的一种
推行，需要根据网站的目地进行定位。设计师如何协调网站的定位和客户需求之间的关系，完成工作是最关键。
2.居中布局
居中布局很容易做到，而
且已经成为了默认模式。
3.不要过多使用竖列布局
几年前，3、4列的布局盛行，
如今2列布局比较普遍，3列已是最大限度了。
4.页面头部和主体有所分离
将页面的
Top/Header在设计上与主体内容部分有所区分，可以在视觉、颜色等诸方面。这样可以让用户更清楚页面是从哪里开始的。让其简约一些，加入粗体
LOGO会看起来非常"2.0"。
5.明显的区域分界
让
Header,Content,Banner.....这些区域分界明显一些，颜色区块、留白、表格、边线都是手段。
6.简约的导航栏
做一个简约的条状全
站航栏放在每一个页面上，最好用区别与正文的颜色和字体。让用户知道：这里有什么、这是什么地方、我还可以去什么地方。
7.粗体字的LOGO
用一个清晰的大
LOGO，来传递你是谁或主题。
有这么一段HTML，请挑毛病：
<P>
哥写的不是HTML，是寂寞。<br><br>
我说：<br>不要迷恋哥，哥只是一个传说
这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================
出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不
灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html,
css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他
们真的不懂怎么合理的把js, html,
css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。
这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题，考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。
言归正传。这道题的考点：
考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0
strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合,
标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。
这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。
考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp
考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。
上面全答对，你就能拿到100分。
对原题改进的结果：
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>
加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。
<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>
我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。
<p> 哥写的不是<abbr title=”Hyper Text Markup language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>
我们在不断的学习，追求进步与提高，到底学到什么程度了，到底是
不是真的了解CSS，是哪个层次了呢。我们来对照一下。
第0级：CSS？那不是一个多人射击游戏吗？
CSS? Isn't that a multiplayer game?
有些人因为在找
CS:S（Counter Strike: Source）这款游戏的资讯而进到#CSS网站。不必担心这些人，他们不可能制作太多网页，所以对网络也不
会造成多大伤害。
第1级：是啊，我偶尔用它来移除连结的底线
Yeah, I use it to remove underlines on links sometimes
和第0级的人不同，这些人
学过HTML，也制作过几个简单的网站。他们只有在无法使用HTML制作出某些效果时，才会使用CSS，例如移除连结的底线或者设定行高。这些人的网站通
常规模不大也没什么访客，所以他们也不会对网络造成太大伤害。
第2级：不，我不喜欢div元素；表格好用多了！
No, I don't like divs; tables are much easier to work with
他们听过使用
div元素来设计网页这件事，也花了些时间学习CSS。不过他们很快就放弃了，觉得CSS太难而且支持度不佳，还是宁可用表格排版。
注意！他们是
危险人物！他们在这个领域已经待了一段时间，许多都是网站部门的主管。和他们接触是很重要的，提倡网络标准的人应该多多开导他们，这对网络的意义非同小
可。
第3级：是啊，听说它挺好的，不过我没用它因为……
Yes I've heard it's good, but I can’t use it because of…
这些人虽然知道CSS
的优点，不过总是基于某些原因而无法使用它，例如他们可能有第2级的上司，或者他们必须考虑到Netscape 4的使用者。
旧版的浏览器虽
然不支持CSS，不过使用者还是可以看见完整的内容。而基于亲和力（accessibility）和易用性（usability）的好 处，CSS可以为
网站带来更多访客。把这些优点告诉第3级的开发人员，即使他们不是决策者，或许多少能对第2级的上司发挥点影响力吧。
第
4级：CSS？喔！没错，我用div元素来排版
CSS? Oh! Yes, I use divs for all my layouts
在页面中使用过多的div元素反而是这群人的问
题，他们会用#toprightredline或是#r5_c7（表示第5列第7栏）这样的方式设定div元 素的id。即使可以通过XHTML 1.1
的验证，这种排版方式却无法发挥CSS的优势。荧幕朗读软体（screen readers，视障者使用的浏览器）很难解译这些网页，旧版浏览器也会有同
样的问题，网页的内容无法完整显示。而不良的class与id命名方式，也对 于版面的修改造成极大不便。
虽然第4级的人制作的网站仍然很糟，不
过由于他们很容易接受新的观念，因此对网络造成的伤害较小。许多所见即所得（WYSIWYG）的编辑器制作出充满div元素的原始码，可能也是误导这群人
的原因。幸好这些编辑器已经逐渐改良了，希望这会有助于第4级的人继续往上提升。
第5级：我用CSS来设计，这比表
格好多了，因为……
I use CSS for design, it's better than tables because of…
第5级的人知道
CSS的优点并乐于使用，虽然有时会遇到些问题，但并不严重。他们也能运用长期的CSS工作经验，与人辩论为什么要将网页的结构与设计分开。我猜这篇文章
大部分的读者是这一级的CSS开发人员，我想我自己也是。不过这还不是最好的……
第6级：哪个版本的CSS？是的，
我知道啊。你有读过我的书关于……
What version of CSS? Yes, I do. Did you read my book about…
第6级的人致力
于改良CSS，并且写了许多很棒的文章介绍它的新用法。其中有些人将W3C关于CSS的说明文件全部读完了，并且知道哪些功能在哪个版本的浏 览器才有支
持。他们是CSS初学者的典范，并且运用他们的影响力使网络更加进步。其中有许多人组成了Web Standards Project，如果你在他们的网
站上面发现任何错误，那一定是有理由的，向他们请教之后你必能获得满意的解答。
标题title： 10分
域名： 7分
H1,H2字号标题： 5分
每段首句： 5分
路径或文件名： 4分
相似度（关键词堆积）： 4分
每句开头： 1.5分
加粗或斜体： 1分
文本用法(内容)：1分
title属性： 1分 (注意不是title>, 是title属性, 比如a href=… title=”)
alt标记： 0.5分
Meta描述（Description属性）： 0.5分
Meta关键词（Keywords属性）： 0.05分
1、 静态页面
将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录。
2、 页面标题(Page Title)的关键词优化
必须列出信息的标题、网站的名称以及相关关键字。
3、 Meta标签的优化
（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）
主要包
括：Meta description、Meta keywords的设置
关键字密度要适度，通常为2%-8%，也就是说你的关键字必须在页
面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。
4、 针对Google制作Sitemaps
Google的sitemaps是对原来robots.txt的扩展，它使用XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更
全面的收录网站的内容。
可以使用Google提供的Sitemap生成器制作（需要技术人员制作）：
https://www.google.com/webmasters/sitemaps/docs/zh_CN/sitemap-generator.html
也可以由技术部人员制作更全面的Sitemaps。
5、 图片的关键词优化
图片的替代关
键词也不要忽略，其另外一方面的作用是，当图片不能显示的时候，可以给访问者一个替代解释语句。
6、 避免表格的嵌套
目前本站的表格嵌套太多，搜索引擎通常只读取3个＜table>的嵌套，如果太多，会造成部分有用信息没有被检测到。
7、 采
用web标准进行网站重构
尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML＋CSS技
术进行网站重构，减少不表格及冗余代码，提高网站页面的扩展性，兼容性，可以使更多浏览器支持。
8、 网站结构的扁平化规划
目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母
9、 页面容量的合理化
合理的页面容量会提升网页的显示速度，增加对搜索引擎蜘蛛程序的友好度。同时建
议js脚本和css脚本尽量用链接文件
10、外部文件策略
把javascript文件和
css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部，同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面
重要内容。其他的字体（FONT）和格式化标签也尽量少用，建议采用CSS定义。
11、外部链接
尽可能多地让其他跟你主题相关的网站链接本站，同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接，被搜索引擎认为有丰富的与
主题相关的内容，也有利于排名，例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网，对搜索引擎而言宁少要精。
12、
网站地图
网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作 基于文本的网站地图，内含网站所有栏
目、子栏目。网站地图的三大因素：文本、链接、 关键词，都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。
13、图像热点
除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持。当“蜘
蛛” 程序遇到这种结构时，就会无法辨别。因此尽量不要设置图像热点(Image Map)链接。
14、FLASH应用
FLASH由于不含文字信息，应尽量用于功能展示和广告，少用于网站栏目和页面。
15、JS脚本
在不支持JS脚步的浏览器里 NOSCRIPT> 标签会起到重要提示作用，对搜索引擎的Spider搜索也会有帮助。
16、
Frame框架
Frame标签会被搜索忽略，尽量少用，如果一定要用，则应正确使用Noframe标签， 在
Noframe>/Noframe>区域中包含指向frame页的链接或带有关键词的描述文本，同 时在框架以外的区域也出现关键词文本。
17、资讯的内部链接
有助提高网站排名和PR值，例如相关资讯、推荐资讯等。
今天突然发现一个很奇怪的问题，一些专注于CSS和XHTML、Web 2.0和Web标准的网站都在探讨如何去掉当鼠标点击时超级链接周围的虚线框（outline）如，outline:none 或者 outline:0 。可能有时候默认出现虚线框（outline）会影响美观，但是它的存在必然有它的道理：那就是提高网站的易用性，特别是给使用键盘导航的人带来极大的便利。我们在讨论语义化，易用性的同时却总在做与其背道而驰的事情。
一、虚线框（outline）给键盘导航带来便利
我在阅读文章的 时候有个习惯：极少使用鼠标，基本上全部靠键盘。而使用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来 导航超级链接，可以在不同超级链接之间切换，选中某链接之后直接按Enter进入（现在你就可以使用Tab键在本页上看看效果）。当Tab键聚焦 （focus）某链接时这个链接的周围就会出现一个虚线框（outline），代表这个链接已经处于焦点状态，确定即可访问。当然很多人可能会说，使用鼠 标多么方便啊，干吗用键盘？在这里我想说几个理由。
- 据说有一条道别是否真正的电脑高手的标准就是，是否可以不使用鼠标就可以完成所有操作。（出处已经 不可查，但是可以Google到。）
- 有时候我看文章时，右手端着咖啡左手敲动键盘不影响我阅读
- 特殊人群的特殊需要
- 你的网站不是只给你一个人看的，你不能左右别人怎么使用你的网站。
使用Tab键聚焦到一链接时的新式（不同浏览器中可能不尽相同，但是每个浏览器都有此功能，可见其必要性）
二、更加糟糕的用户体验
用outline:none 或者 outline:0去掉外虚线框，虽然从链接上看不到变化了，但是至少还可以从状态栏里看出链接信息。但是更加糟糕的用户体验是使用JavsScript 的onfocus事件，当用户聚焦某链接时，它立即取消该焦点，也就是说你永远也无法聚焦到这个超级链接上，所以如果你不使用鼠标你绝对不可能访问这个页 面上的任何一个链接。更有高手开发出了使用JQuery等来去除outline。如果你Google一下“去掉链接虚线”，你会得到几万个结果，看来很多 人需要、很多人在研究。但是他的确违背了Web的易用性原则，完全没有考虑到用户体验。
三、可替代的选择
如果你确实觉得觉得出现虚线框会影响美观的话，你完全可以有更好的选择。那就是使用CSS中的:focus 伪类。例如使用
a:focus { background-color:#f00; }
/*或者*/
a:hover, a:focus {text-decoration:underline;}
设置焦点被触发时，链接背景为红色等。当然可以根据需要设计出更加复杂的样式，更可以把focus和hover设置成同样的样式。但是有一点，你不能屏蔽掉focus触发机制。
所以永远也不要去移除超级链接周围的虚线框，至少不能屏蔽掉focus的触发。
Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市 场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。
简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
- 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
- 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
- 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
- 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
- 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面 的代码；
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
- 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
- Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
- 终于等到了</html>的到来，浏览器泪流满面……
- 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
- 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾 行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群 人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退 的过程叫reflow。
reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可 以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或 内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。
（待续）
当一个链接得到焦点时，默认会有个虚线框。如图：
在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：a:focus {
outline:none;
-moz-outline:none;
}
顺便提一下，如果你用过 Safari 和 Chrome 可能会发现，当输入框得到焦点时边框会出现阴影效果。
如果想去掉阴影效果也可以用 outline 属性。input,textarea {
outline:none;
}
言归正传，刚刚说的是 Firefox ，现在说说 IE。首先比较遗憾，还没有找到通过 CSS 去掉 IE 链接虚线框比较好的解决办法。所以只能用一个替代的办法，就是 a 标签的 hidefocus 属性(这个属性是 IE 独有的)。<a href="#" hidefocus="true">链接</a>
注意：JS 脚本对应的属性名是：hideFocus。对应的 JS 代码应该是：
xxx.hideFocus = 'true';
还有一种不推荐的办法。就是让链接得到焦点的时候失去焦点。<a href="#" onfocus="this.blur();">链接</a>
这种办法很管用，但过于暴力，最好不要用了。
简介
当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！
1.重置
首先，很认真的告诉你，总是要重置某些分类 。无论你是使用 Eric Meyer Reset 、YUI Reset
或者你自己编写的重置代码，只要使用就对了。
它能很简单的移除所有元素的填充（padding）和边距（margin）：
- html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
-
pre
, form, fieldset, table, th, td {
margin
: 0;
padding
: 0; }
Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式 表。
噢，请停止使用：
* { margin : 0; padding : 0; }
花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。
2.排序
一个小的测试
这个例子就是要让你思考如何更快的找到右边距属性 ？
Example#1
div
#header
h1 {
z-index
: 101;
color
:
#000
;
position
:
relative
;
line-height
:
24px
;
margin-right
:
48px
;
border-bottom
:
1px
solid
#dedede
;
font-size
:
18px
;
}
Example#2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS ，将帮助你节省花费在寻找一个特殊属性的时间。
我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。
3.组织
你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：
/*****Reset*****/
移除元素的填充（padding）和边距（margin）。
/*****Basic Elements*****/
定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/
定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等
当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。
/*****Basic Layout*****/
定义基本的模板: header, footer等. 帮助定义网页布局的基本元素
/*****Header*****/
定义所有Hearder元素
/*****Content*****/
定义所有内容框内的元素
/*****Footer*****/
定义所有Footer的元素
/*****Etc*****/
定义其他的选择器。
通过注解和归类相似元素的分组，将更快的找到你想要的。
4.一致性
无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS 编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。
就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。
div
#header
{
float
:
left
;
width
: 100%; }
div#header
div.column {
border-right
:
1px
solid
#ccc
;
float
:
right
right
;
margin-right
:
50px
;
padding
:
10px
;
width
:
300px
;
}
div#header
h1 {
float
:
left
;
position
:
relative
;
width
:
250px
; }
所以找到你喜欢的工作方式然后保持一致。
5.从正确的地方开始
在完成标记语言之前不要去尝试靠近你的样式表 。
当我准备分割一张网页的时候，创建CSS 文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。
通过先标记文档，你将不会碰到本已注定的divities1 和classitis2 麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译）。
利用CSS 子选择器指定子元素；不要只是机械的给元素添加类或者ID选择器。记住：没有一个良好的格式化文档（或者标记结构）CSS 是无价值的。
-
不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
-
无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
-
慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
-
CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
-
样式放头上，脚本放脚下。不内嵌，只外链。
-
坚决不用 CSS 表达式。
-
使用 引用样式表，而不是通过 @import 导入。
-
一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
-
千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
-
正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
-
block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
-
段落之间，至少要有一倍行距。
-
强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
-
中文标点用全角。英文夹杂在中文中，左右空格，半角。
-
中文字体的粗体和斜体，远离较好，利民利己。
这是一篇程序员写给程序员的趣味读物。所谓趣味是指可以比较轻松地了解一些
原来不清楚的概念，增进知识，类似于打RPG游戏的升级。整理这篇文章的动机是两个问题：
问题一：
使用Windows记事本的“另存为”，可以在GBK、Unicode、Unicode big endian和UTF-8这几种编码方式间相互转换。同样是txt文件，Windows是怎样识别编码方式的呢？
我很早前就发现Unicode、Unicode big
endian和UTF-8编码的txt文件的开头会多出几个字节，分别是FF、FE（Unicode）,FE、FF（Unicode big
endian）,EF、BB、BF（UTF-8）。但这些标记是基于什么标准呢？
问题二：
最近在网上看到一个ConvertUTF.c，实现了UTF-32、UTF-16和UTF-8这三种编码方式的相互转换。对于
Unicode(UCS2)、GBK、UTF-8这些编码方式，我原来就了解。但这个程序让我有些糊涂，想不起来UTF-16和UCS2有什么关系。
查了查相关资料，总算将这些问题弄清楚了，顺带也了解了一些Unicode的细节。写成一篇文章，送给有过类似疑问的朋友。本文在写作时尽量做到通
俗易懂，但要求读者知道什么是字节，什么是十六进制。
0、big endian和little endian
big endian和little endian是CPU处理多字节数的不同方式。例如“汉”字的Unicode编码是6C49。那么写到文件里时，究竟是将6C写在前面，还是将49写在前 面？如果将6C写在前面，就是big endian。还是将49写在前面，就是little endian。
“endian”这个词出自《格列佛游记》。小人国的内战就源于吃鸡蛋时是究竟从大头(Big-Endian)敲开还是从小头(Little- Endian)敲开，由此曾发生过六次叛乱，其中一个皇帝送了命，另一个丢了王位。
我们一般将endian翻译成“字节序”，将big endian和little endian称作“大尾”和“小尾”。
1、字符编码、内码，顺带介绍汉字编码
字符必须编码后才能被计算机处理。计算机使用的缺省编码方式就是计算机的内码。早期的计算机使用7位的ASCII编码，为了处理汉字，程序员设计了 用于简体中文的GB2312和用于繁体中文的big5。
GB2312(1980年)一共收录了7445个字符，包括6763个汉字和682个其它符号。汉字区的内码范围高字节从B0-F7，低字节从 A1-FE，占用的码位是72*94=6768。其中有5个空位是D7FA-D7FE。
GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号，它分为汉字区和图形符号区。汉字区包括21003个字 符。2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文 字。现在的PC平台必须支持GB18030，对嵌入式产品暂不作要求。所以手机、MP3一般只支持GB2312。
从ASCII、GB2312、GBK到GB18030，这些编码方法是向下兼容的，即同一个字符在这些方案中总是有相同的编码，后面的标准支持更多 的字符。在这些编码中，英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼，GB2312、GBK到GB18030 都属于双字节字符集 (DBCS)。
有的中文Windows的缺省内码还是GBK，可以通过GB18030升级包升级到GB18030。不过GB18030相对GBK增加的字符，普通 人是很难用到的，通常我们还是用GBK指代中文Windows内码。
这里还有一些细节：
GB2312的原文还是区位码，从区位码到内码，需要在高字节和低字节上分别加上A0。
在DBCS中，GB内码的存储格式始终是big endian，即高位在前。
GB2312的两个字节的最高位都是1。但符合这个条件的码位只有128*128=16384个。所以GBK和GB18030的低字节最高位都可能 不是1。不过这不影响DBCS字符流的解析：在读取DBCS字符流时，只要遇到高位为1的字节，就可以将下两个字节作为一个双字节编码，而不用管低字节的 高位是什么。
2、Unicode、UCS和UTF
前面提到从ASCII、GB2312、GBK到GB18030的编码方法是向下兼容的。而Unicode只与ASCII兼容（更准确地说，是与 ISO-8859-1兼容），与GB码不兼容。例如“汉”字的Unicode编码是6C49，而GB码是BABA。
Unicode也是一种字符编码方法，不过它是由国际组织设计，可以容纳全世界所有语言文字的编码方案。Unicode的学名 是”Universal Multiple-Octet Coded Character Set”，简称为UCS。UCS可以看作是”Unicode Character Set”的缩写。
根据维基百科全书(http://zh.wikipedia.org/wiki/)的记载：历史上存在两个试图独立设计Unicode的组织，即国 际标准化组织（ISO）和一个软件制造商的协会（unicode.org）。ISO开发了ISO 10646项目，Unicode协会开发了Unicode项目。
在1991年前后，双方都认识到世界不需要两个不兼容的字符集。于是它们开始合并双方的工作成果，并为创立一个单一编码表而协同工作。从 Unicode2.0开始，Unicode项目采用了与ISO 10646-1相同的字库和字码。
目前两个项目仍都存在，并独立地公布各自的标准。Unicode协会现在的最新版本是2005年的Unicode 4.1.0。ISO的最新标准是10646-3:2003。
UCS规定了怎么用多个字节表示各种文字。怎样传输这些编码，是由UTF(UCS Transformation Format)规范规定的，常见的UTF规范包括UTF-8、UTF-7、UTF-16。
IETF的RFC2781和RFC3629以RFC的一贯风格，清晰、明快又不失严谨地描述了UTF-16和UTF-8的编码方法。我总是记不得 IETF是Internet Engineering Task Force的缩写。但IETF负责维护的RFC是Internet上一切规范的基础。
3、UCS-2、UCS-4、BMP
UCS有两种格式：UCS-2和UCS-4。顾名思义，UCS-2就是用两个字节编码，UCS-4就是用4个字节（实际上只用了31位，最高位必须 为0）编码。下面让我们做一些简单的数学游戏：
UCS-2有2^16=65536个码位，UCS-4有2^31=2147483648个码位。
UCS-4根据最高位为0的最高字节分成2^7=128个group。每个group再根据次高字节分为256个plane。每个plane根据第 3个字节分为256行 (rows)，每行包含256个cells。当然同一行的cells只是最后一个字节不同，其余都相同。
group 0的plane 0被称作Basic Multilingual Plane, 即BMP。或者说UCS-4中，高两个字节为0的码位被称作BMP。
将UCS-4的BMP去掉前面的两个零字节就得到了UCS-2。在UCS-2的两个字节前加上两个零字节，就得到了UCS-4的BMP。而目前的 UCS-4规范中还没有任何字符被分配在BMP之外。
4、UTF编码
UTF-8就是以8位为单元对UCS进行编码。从UCS-2到UTF-8的编码方式如下：UCS-2编码(16进制) UTF-8
字节流(二进制)
0000 – 007F 0xxxxxxx
0080 – 07FF 110xxxxx 10xxxxxx
0800 – FFFF 1110xxxx 10xxxxxx 10xxxxxx
例如“汉”字的Unicode编码是6C49。6C49在0800-FFFF之间，所以肯定要用3字节模板了：1110xxxx 10xxxxxx 10xxxxxx。将6C49写成二进制是：0110 110001 001001， 用这个比特流依次代替模板中的x，得到：11100110 10110001 10001001，即E6 B1 89。
读者可以用记事本测试一下我们的编码是否正确。
UTF-16以16位为单元对UCS进行编码。对于小于0×10000的UCS码，UTF-16编码就等于UCS码对应的16位无符号整数。对于不 小于0×10000的UCS码，定义了一个算法。不过由于实际使用的UCS2，或者UCS4的BMP必然小于0×10000，所以就目前而言，可以认为 UTF-16和UCS-2基本相同。但UCS-2只是一个编码方案，UTF-16却要用于实际的传输，所以就不得不考虑字节序的问题。
5、UTF的字节序和BOM
UTF-8以字节为编码单元，没有字节序的问题。UTF-16以两个字节为编码单元，在解释一个UTF-16文本前，首先要弄清楚每个编码单元的字 节序。例如收到一个“奎”的Unicode编码是594E，“乙”的Unicode编码是4E59。如果我们收到UTF-16字节流“594E”，那么这 是“奎”还是“乙”？
Unicode规范中推荐的标记字节顺序的方法是BOM。BOM不是“Bill Of Material”的BOM表，而是Byte Order Mark。BOM是一个有点小聪明的想法：
在UCS编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输 字符”ZERO WIDTH NO-BREAK SPACE”。
这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little-Endian的。因 此字符”ZERO WIDTH NO-BREAK SPACE”又被称作BOM。
UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符”ZERO WIDTH NO-BREAK SPACE”的UTF-8编码是EF BB BF（读者可以用我们前面介绍的编码方法验证一下）。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。
Windows就是使用BOM来标记文本文件的编码方式的。
6、进一步的参考资料
本文主要参考的资料是 “Short overview of ISO-IEC 10646 and Unicode” (http://www.nada.kth.se/i18n/ucs/unicode-iso10646-oview.html)。
如果你已经是一名优秀的Web开发人员，那请路过即 可。如果你还是一个准备入行或刚入行的菜鸟，那本文倒值得一读。要成为一名优秀的Web开发人员，没 有捷径可走，本文就是为那些还在苦苦寻找学习目标的人编写的。
第一步：学好HTML
HTML(超文本标记语言)是网页的核心，因此你首先 应该学好它，不要害怕，HTML很容易学习的，但也很容易误用，学懂容易要学精还得费点功夫，但学好HTML是成为Web开发人员的基本条件。
学习资源：
HTML Dog (http://htmldog.com/)
HTML入门指南 (http://www.w3.org/MarkUp/Guide/)
W3C HTML学习教程 (http://www.w3schools.com/html/)
第二步：学好服务器端脚本语言
服务器端脚本编程也是Web开发人员的基本功之一，你 只需挑选一个服务器端脚本语言，然后学好它，目前流行的服务器脚本语言有：
PHP (http://php.net/)
Python (http://www.python.org/)
Ruby (http://www.ruby-lang.org/en/)
第三步：学好SQL
要构建动态页面就必须使用到数据库，但这么多数据库产品，该如何是好呢?别担心，它们都会遵循标准的SQL原则，学习SQL的资源包括：
W3C SQL学习教程 (http://www.w3schools.com/SQl/default.asp)
MySQL主页 (http://www.mysql.com/)
SQL维基百科 (http://en.wikipedia.org/wiki/SQL)
第四步：学好CSS
涉及到网页外观时，就需要学习CSS了，它可以帮你把 网页做得更美观。
学习资源：
HTML Dog (http://htmldog.com/)
CSS禅意花园 (http://www.csszengarden.com/)已有中文版图书。
第五步：学好JavaScript
今天大部分Web开发人员都喜欢使用 jQuery(http://jquery.com/)，学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高你的技能。
学习资源：
webmonkey.com上的JavaScript 学习资源 (http://www.webmonkey.com/tutorial/JavaScript_Tutorial)
W3C JavaScript学习教程 (http://www.w3schools.com/JS/default.asp)
第六步：学好正则表达式
虽然它并不像其它知识那么重要，但学习了正则表达式 后，如果使用得当将会节省你很多时间，从验证到高亮显示它够能帮到你。
第七步：学习一点Unix和Linux的基本知识
这并不是必须的，但知道一点Linux命令不会伤害到 你，或许你还不知道，大部分Web服务器都运行在Unix和Linux平台上，如果我是你，我会去学习一些基本的Linux命令的。
第八步：了解Web服务器
你不必在这上面花太多精力，但对Apache的基本配 置，.htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易，不会花多长时间。
第九步：熟悉版本控制系统的用法
熟悉使用一种优秀的版本控制系统将很有用处，你在实际 工作中就会发现精通一种版本控制系统是多么幸福。
第十步：学好Web框架
当你掌握了HTML，服务器端脚本语言，CSS和 JavaScript后，就应该找一个Web框架加快你的Web开发速度，使用框架可以节约你很多时间，如果你使用PHP，可选的框架有 CakePHP，CodeIgniter，Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员喜欢使用RoR。
怎么样，从最简单的HTML到Web框架，内容还是不 少吧，要想精通这里的每一样技术，都得下苦功夫才行。
