香樟树的个人博客-xzscom.com，关于WEB前端开发技术，网页设计及制作,关于互联网产品设计，用户体验，交互设计

页面构建的审图与细节

作为专业的页面构建工程师，除了在专业技能上有很高的要求以外，还需要具有一定的对设计图的审稿能力。审图，并非是意味着追求跟PSD一模一样，甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中，审图是通过对UI设计稿的分析，充分理解UI设计师的意图，再结合UE的交互状态，从中做到真正的“还原设计稿”。

事例一：有取有舍，方是领悟

马化腾 VS. 凯文凯利：互联网千亿级的考问

凯文凯利被称为互联网的“预言帝”，他在1994年出版的书《失控》中就预见到了今天的云计算、敏捷开发、网络社区、虚拟现实等。马化腾的QQ则渗透到中国的每一个角落，他也被称为中国的“产品帝”。

昨天腾讯在北京举办了马化腾和凯文凯利的高端对话，现场一共提出了七个问题。下面内容来自对现场对话的整理（不保证和现场对话一模一样。）

提问的背景：

马化腾：在过去中国互联网的历史，从业人员就好像在地面上，在一个原始的荒漠，在丛林里面去拼杀，去发展，但事实上当我们看到凯文·凯利的一些论著，我们感觉到他是从高空去俯视整个格局的发展，可以观察到河流的走向。对于我们来说，像井底之蛙，就限在某一个局限的范围里面，没有办法全局观察整个产业和整个环境生态的变迁，其实是在一定程度上受到很大的制约，所以也会遇到很多的困惑。包括很多我们征求意见领袖和网民的问题，以及我们自身遇到的疑问，有很多类别。不管是谈垄断也好，谈个人隐私也好，谈未来互联网移动化等等，我们发现很多问题困惑着我们，我们也非常希望借助这个宝贵的机会，凯文凯利能给我们更多前瞻性的指引，我们也愿意在现实中遇到的问题能够与他分享，希望找到更多的答案。

一、千亿级的考问，失控与控制，对互联网企业的管理来讲，失控和控制之间怎么样找到一个平衡点？凯文凯利是怎么样理解这种平衡的？

凯文凯利：如果你要是把控制作为一种具有约束的力量，如果说觉得它是一种存在或者不存在的控制力量，实际上没有太大的帮助。我们所需要的是不同类型的控制，我觉得现在我们必须要拥有的一种控制是一种非常复杂的系统，就好像在互联网上看到越来越多的协作，而且有对于互动的控制，它不是一种自上而下的，而是共同控制的模式。这种控制就好像你对待自己的孩子一样，比如你的孩子属于青春期，你没办法直接控制他，随着时间的推移不断给他们一些培训，让他能够放手去做，比如你要告诉这个孩子应该拥有什么样的价值观，应该为什么东西感到骄傲，你有什么奖惩给他，这是我们可以运用的一种控制方法。在公司内部我们也可以用，对待互联网我们也可以去用，因为这个行业现在已经变得很大了。如果我们想要强制性的进行控制是没有用的，你没有办法去进行强制性的控制，它也不会起任何作用，我们看不同类型的控制，它要比我们考虑控制还是不控制要更好。

马化腾：凯文凯利在书里面提到了一些对于我们来说反映到企业管理方面的，刚才他也问我说，你们现在最担忧什么？我说对于我们来说内部管理问题是其中一个非常大的担忧，比如员工人数增加非常快，去年增加60%，现在突破两万多人。文化的稀释，包括管理方面其实会产生很大的问题。外界也有很多的文章质疑腾讯有没有失控等文章。我看到凯文凯利有一个观点，一个大企业有固定的流程，有比较成熟的流程，这里面就会让其中的产品、研发等会限制在其中，可能达到某一个高点之后就陷入到一个局部的优势，可能没有办法摆脱这样一个从内部创新和把握新机会的机遇的能力。往往看到一些创新，包括企业内部也是一样，是从边缘的地方起来，它会有自下而上的情况。所以，如果完全自上而下，说看好了往哪边走，这样往往企业是没有活力的，是很僵化的，尤其在互联网变化特别快的产业里面是非常危险的，可能不用一年的时间，就会发现落伍了。

对腾讯来说，我们其实是两种结合，一方面是要对成熟的业务，就是它已经进入到相对清晰的业务是用比较稳健的管理方式。但是对于新兴的模糊的地带，是需要鼓励自下而上的，但都是客观辩证的。一旦成熟的时候，不能完全失控，其实要依靠你成熟的那一部分帮助他。比如微信，它不在我们成熟的无线业务里面诞生，反而是在广州研发中心诞生。一旦它成形，我们全公司的力量支持它，包括我们核心的QQ的关系链，包括我们的营销资源，包括其它的微博、社交网站，其实是联动起来的。这个是一个比较好的范例。如果说你没有营造一个环境的话，企业内部的管理可能就各据山头，那就会产生很多的矛盾。对于腾讯来说，这是一个大的挑战，也是很多互联网公司会遇到的挑战。像凯文凯利的理论，就好像一个大自然的生物进化一样，其实进化在不同的环境会有不同的外界刺激，会让局部的物种产生变化，适者生存，自然会产生一些地区的生物有差异性的变化。适应好的话就自然会成长起来，就会形成多文化多基因的生物，我觉得应该顺应这样的潮流。这是我的一些理解。

是时候了,前端架构师【转】

最近对Web前端有很多想法，刚好看到这篇文章，跟我想法不谋而合，所以翻译出来与大家分享。许久没翻译了，里面多少还是有些我没能完全理解，意译过来，如果错误，请务必指出和修改，谢谢。

原文：The Time is Now for Front-End Architects， 来自：Garrett Dimon，感谢作者的许可。

去年，我在YTS发表了前端架构师的想法，之后花更多时间来思考，现在更坚信这是一个不可或缺的角色。

当后端技术伴随.Net, Rails和Java之类的框架发展得越来越抽象和强大，前端技术的潜在发展也日益复杂。在束缚前端技术潜在好处的差劲实现之前， Web需要更多的前端架构师。

多亏了诸如跨浏览器支持的先进技术的发展，用户体验、更多有意义的主题比如无障碍都拨云见日，这个世界再也不仅仅就HTML和CSS如此简单，因此，绝大部分的团队都需要一个真正理解和实践涉及到前端的一切的人。

角色

这并不是一个扼要和简单的清单，对于下面的主题／技术，前端架构师也不能仅仅满足于了解一下的里里外外而已，而是需要足够的深入研究，并有自己出色的见解。

XHTML
CSS(1, 2, 3)
跨浏览器和跨平台
DOM脚本编程
AJAX
Flash
渐进增强和适度降级
无障碍
可用性
信息架构
界面设计
视觉设计
表现层逻辑（APSX, Rails视图等）
商业规则和逻辑
作为一个前端架构师，必须拥有这些领域的绝对执行力。例如，前端架构师能够决定某个特性是使用AJAX还是传统的页面刷新。哪个更便于使用？对无障碍的影响如何？改用Flash有意义吗？

拨乱反正

表现，结构，行为和商业逻辑的混杂，导致不必要的复杂，导致难以维护的怪胎解决方案。就如后端需要正确地划分为数据层，商业逻辑，表现逻辑等，前端开发复杂到是时候调整其架构了。

编写良好结构或者说避免使用表格布局是远远不够的。这是第一步，前端架构的哆咧咪而已。现在是时候关注DOM脚本编程，AJAX, 无障碍等，该升级了。

非编程不可

我主张前端架构师必须懂得真正的编程知识，而这正是很多自封为前端架构师的人所缺乏的。我的意思不是能够剪切粘贴改进代码就行了，而是能够跟老练的工程师商讨如何能够最好地结合前端。

这就是说，前端架构师需要真正理解结构遭遇商业逻辑的问题。如果工程师说某些东西使用ASP.Net DataGrid是不可能实现的，前端架构师必须能够解释如何与为何要使用DataList或Repeater取代，解释为何DataGrid在该情景下是个错误的选择……

这只是个例子，问题还在于仅知道客户端编程也是不够的。能够使用与工程师相同的术语，能够讨论（前后端）关键集成的最佳解决方案，这是绝对必须的。

断线的风筝

我们今天正处在一个不妙的处境中，原因在于几乎没有人能够为前后端的沟壑搭桥。一般工程师不会有兴趣或实践标记，CSS, 或DOM脚本编程，大部分客户端开发者也没有与后端技术协作的经验。几周入门PHP不会成为程序员，几周入门XHTML也不会成为真正的客户端开发者。

罪魁祸首

我首先想到的十足例子是，ASP.Net完全漠视Web标准，同样地，web氛围（我们指表格和占位gif）让Web标准郁闷。企业项目的大多数框架输出的标记，即使使用1999年的标准来衡量，都是糟糕无比的。

如此巨大和“专业”的产品怎么能才够不忽视，按理说是整个项目最简单的方面？只有静态代码。理由是，基于技术的立场衡量产品，结构，CSS和其他客户端技术都是“事后诸葛亮”。表现逻辑，结构和行为混杂，压根无助于无障碍，Web标准，或者前端技术干净的分离。抬起你的头来，就在2006，这些都成受欢迎的惯例了。

总结

如果这个世界上姿态最鲜明的产品和项目都如此低劣的方式来处理事情，其他的还有什么好说？毫无疑问，我们需要前端架构师，而且就在昨天。

归结于归结，我们有一堆相互关联的技术，很少人能够埋头钻研它们之间的关系，这很不幸。正确做事的真正价值在于容易的维护和长期的适应性。虽然在关键时刻，有些方式更容易选择其他的方法和拼凑起另外的东西。对某些人来说，这可能是可接受的做事方式。但是，对我们大部分人来说，这是拙劣的抉择，也非常不专业。

我交给你去想了。我假设你把车交给技工修理，修好了时候，瞧瞧引擎罩内大量的输送管，我不知道你对技工作何感想？

源文：http://www.gafish.net/archives/765

腾讯敏捷教练艾永亮：敏捷企鹅的创新功夫

2011年6月24~25日，敏捷实践者的盛会Scrum Gathering大会在上海召开，此次盛会云集了传统行业和互联网行业的众多知名企业，如百度、支付宝、SAP、爱立信……来自于腾讯的嘉宾们也带来了腾讯6年敏捷实践的精华——创新的敏捷实践，结合着腾讯实际业务，故事性的展现了各项实践的由来和价值。

腾讯公司敏捷教练&高级项目经理艾永亮在本次活动中分享了腾讯在敏捷探索中的六项独特的实践：

2009年最火的游戏QQ农场，一周最多发布23个版本，它为什么需要如此之快的开发速度呢？由于农场玩法非常简单，必须要持续推出新的玩法，新的作物，才能让用户被长期吸引在这里，因此2周已经太慢了，必须要更快的速度才能满足用户。

那么它如何做到的呢？

创新实践：自运转团队

早期的农场项目，大家的压力都非常大，为了能提高效率，项目经理希望每个角色都能全力以赴的提升自己的效率，于是自己承担起来大量沟通和推进的工作，那个时候的感觉是大家都在被PM推着走，一旦PM休假，项目基本没有什么产出，当时去了以后，发现问题很严重，觉得团队的主动性必须被调动起来才行，但是大家都已经习惯了了现有的工作方式，短期内很难到达自组织团队。更加思考和一段时间的尝试，我找到一个中间阶段“准自组织团队”，我们管它叫“自运转团队”。

自运转团队，是将需求开发过程详细划分成开发的各环节，并明确每个环节的负责人，由该负责人来驱动上下游的负责人，而不再由项目经理来连接各个环节，再配合上高效的项目协助工具平台，实现开发过程自运转。这时项目经理则由指挥者变成服务者，观察环节之间产生的瓶颈，并及时采取措施扫除障碍。
借此团队的主动性和合作性明显提升，一次女生节活动，早上提出想法，下午6点就上线了。

产品三俗

与广告“互动”—情景互动式创意广告

早晨做地铁，正打盹的时候，忽然听到某网站的大名被一声声地呼喊着，顿时就把我惊醒了，现在有些广告

做得都不怎么考虑用户的感受，在既没有美感又没有创意的前提下，强行灌输信息只会令多数人感到厌恶。
广告本来起的是一个宣传的作用，如果人人看到都觉得烦，那就适得其反了。其实广告也有很多形式，平面、

电视、网络等。通常我们看到的都是以上三种。这里，给大家介绍一个比较新颖的趋势——情景互动式广告。

情景互动广告是指需要广告画面外的物体来参与，共同完成信息传播的一种广告形式。与传统广告相比，

情景互动广告并不一定需要在公共场合突出位置，以大幅面、醒目文字和艳丽的画面博取注意力，而是建立

在用户视觉经验、心理暗示和行为活动之上，根据广告目的预先设计场景，使得用户能够不自觉地参与互动

体验各种广告信息，从而更生动、更形象和更丰富地传播信息。
它除了互动性的特点之外，还具有非强迫性的特点，用户可以自由选择是随意浏览还是细看，避免了注意力

集中的无效性和被动性。

常见的情景互动式广告大体可分以下三类：

一．创意与产品包装相结合

生活中各种产品都会有一个精美的包装，大多数只是为了一个美观的视觉效果，但是当创意融入产品包装，

它会产生一个多么美妙的感觉！

Nike Stadium系列鞋的鞋盒设计，小鞋盒，新天地，足球场有了，篮球场，排球场以后也会有的！

深入了解 CSS3 新特性

CSS 即层叠样式表（Cascading Stylesheet）。Web 开发中采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。

CSS3 选择器（Selector）

写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：
清单 1. CSS 选择器案例

 Body > .mainTabContainer  div  > span[5]{
 Border: 1px solod red;
 Background-color: white;
 Cursor: pointer;
 }

此处的 CSS 选择器即：“body > .mainTabContainer div span[5]” 代表这这样一条路径：

1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A

2. A 的后代元素（descendant）里标签为 div 的所有元素 B

3. B 的直接子元素中的第 5 个标签为 span 的元素 C

这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性也会全部应用到 C 元素上。

以上为 CSS2 及之前版本所提供的主要定位方式。现在，CSS3 提供了更多更加方便快捷的选择器：
清单 2. CSS3 选择器案例

 Body > .mainTabContainer  tbody:nth-child(even){
 Background-color: white;
 } 

 Body > .mainTabContainer  tr:nth-child(odd){
 Background-color: black;
 } 

 :not(.textinput){
 Font-size: 12px;
      } 

      Div:first-child{
      Border-color: red;
      }

如上所示，我们列举了一些 CSS3 的选择器，在我们日常的开发中可能会经常用到，这些新的 CSS3 特性解决了很多我们之前需要用 JavaScript 脚本才能解决的问题。

13个最常用的CSS和HTML快速开发工具

1）CleverCSS

CleverCSS是个为CSS开发而产生的小型的标记语言，它的设计灵感来自Python,使得能够以一种简洁、结构化的方式构建样式表。在很多方面，它比CSS2更加爱简洁和强大。

它与CSS最明显的不同之处在于语法：基于缩进而不是flat，很明显这有违Python指导，但这也不失为构建结构化样式的好点子。

2）Sass

Sass令CSS又有趣起来，它对CSS3进行了扩展，增加了嵌套规则、变量、混入、选择器继承等语法，可以使用命令行工具或网络框架插件，将其转化为良好格式的标准CSS。

3）Sajax

Sajax是一种使用Ajax framework来构建网站的开源工具,它使得通过JavaScript调用PHP，Perl或Python函数更加简便，而不产生页面刷新。该工具为你做了99%的工作，没有理由不用用。

4）Komodo Edit for Perl,Python,Tcl,PHP,Ruby,Javascript

Komodo Edit一个小型快速开源编辑器，要替换你信任已久的代码编辑器很难，但若给Komodo Edit一个机会，它一定不会让你失望的。
它支持Windows、Mac、Linux，支持PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5, CSS3语法着色、代码折叠、后台语法检查、超强的自动补全和calltips。

5）CSSTidy

CSSTidy是一个开源CSS转化和优化工具，它能在Windows、Linux、OSX下执行，可以像PHP脚本一样由每行代码来控制行为。
与其他大多数CSS转换工具相反，它不实用任何常规的表达式，从而CSSTidy能够对CSS2完美支持并提供高可靠性。

洪波谈Facebook如何改变互联网

随着Facebook向美国证券交易委员会提交招股说明书，Facebook上市以及相关话题愈发受到大家的关注。2月2日下午，互联网观察者、独立博客作者洪波（keso）接受搜狐微博微访谈，就大家关心的一系列话题发表了看法。

RTdot经授权将洪波与搜狐微博网友的问答内容整理成文字，超过20道微博问答，包含大量精妙的见解，跟大家分享。

1、有媒体认为Facebook上市意味着互联网黄金增长结束，并将导致新一轮的互联网泡沫，您是如何看待的呢？

洪波：互联网是一座潜力惊人的富矿，Yahoo!上市未能穷尽其潜力，Google上市未能穷尽其潜力，为什么Facebook上市就可以穷尽？Facebook上市只是证明，互联网总有新的潜力可供挖掘。至于是否会引发泡沫，我认为不会。市场大势并不乐观，Facebook只是一个众望所归的投资对象而已。

2、Facebook是硅谷的又一个神话，上市之后的facebook您认为它最大的挑战在哪儿？

洪波：上市是一家企业的成人礼。Facebook从一家我行我素的私有公司，变成事事公开的公众公司，对年轻的扎克伯格是个很大的挑战。不过，扎克伯格仍牢牢地掌握着Facebook的控制权，我相信他会把神话演绎得更加出神入化。

3、您觉得Facebook会夺去Google的优势吗？

洪波：Facebook和Google是两家不同的公司，前者关心人和人的社会关系，后者关心信息及其流动。不过由于是人在决定着信息的产生和传播，所以在某种程度上，Facebook确实抄了Google的后路。未来，Facebook与Google的缠斗，绝不会亚于Google和微软的缠斗。

4、Facebook是不是对于手机用户有很强的吸引力？尤其是在移动互联网时代。

洪波：Facebook超过半数的活跃用户来自手机，但Facebook实际上尚未在手机端真正发力。不过我想，快了。

5、您觉得在模式上，人人网和新浪微博哪个和Facebook更加类似？

洪波：人人和新浪都不是将核心竞争力建立在社交关系上的公司，或者说，他们都没有一个精心构筑的、庞大的、难以替代的社交图谱。在中国，如果说哪家公司类似Facebook，我认为是腾讯。只不过腾讯对其用户关系缺乏哲学意义上的抽象。

6、像Facebook这样的社交性网站，如何能持续保持用户增长以及增强用户粘度呢？

洪波：这就是开放平台的威力，大量粘住用户的应用，并非由Facebook官方提供，而是由开放平台上的50多万个应用来提供。

7、Facebook的社交广告能替代Google AdWords吗？

洪波：社交广告瞄准的是特定的人，AdWords瞄准的是基于特定信息的用户意愿，这两者无法完全相互替代。但社交广告还很新，未来的成长空间要大于已经非常成熟的AdWords。而且Facebook所建立的封闭王国，令Google感受到巨大的压力。

8、您觉得用户隐私真的会成为Facebook发展的最大障碍吗？

洪波：Facebook的核心竞争力在于人和人的社会关系，其中大量涉及个人隐私。但Facebook所提倡的开放、透明，必然与现行的隐私法律存在冲突，所以它必然会试图重新定义隐私。

9、Facebook上市的消息不仅带动了社交类股票价格的上涨，还带动了土豆、世纪佳缘等数支中国概念股的集体上涨，您觉得是否有可能Facebook上市会对股市注入一剂强心针呢？

洪波：相关股票价格的上涨，主要是来自投资者的美好的投机性联想。但一只股票的价值，最终还是要靠自己的业绩去证明，这不是Facebook所能带动的。整个市场的大势，也不是Facebook一家公司的上市所能改变的。

10、Facebook的市值真的能有千亿那么多吗？不会又是泡沫吧？

洪波：真正优质的股票会被追捧，这很正常。实际上去年Facebook的估值就已经达到800亿-1000亿美元了，没人想错过“下一个Google”这样的赚钱机会。单就Facebook的业绩和估值看，确实有点高估，也存在一定的投资风险。但考虑到Facebook积累8年的潜能才刚刚开始释放，如果你是投资者，你自会去判断其中的风险和收益。

11、有香港媒体称，Facebook被美政府利用成监控工具，您有什么看法？

洪波：你也可以利用Facebook去进行监控啊，有人阻止你这么做吗？另外，难道你认为新浪微博没有被用作监控工具？

12、 Facebook会以非传统方式IPO吗？

洪波：Facebook是一家有着鲜明黑客文化色彩的公司，你无法用常规的观点去判断其行为方式。当年Google甩开投行，以荷兰式拍卖的方式销售股票，得罪了华尔街。谁知道Facebook会怎么做呢。

13、雅虎目前拥有1100多项与社交、搜索和显示广告有关的专利，Facebook很可能会侵犯到其中的一大部分专利，Facebook是否需要出钱购买呢？

洪波：钱能摆平的问题，都不是问题。Google当年也是用钱摆平了与Yahoo!的专利争端。

14、Facebook上市之后，是否会造成员工流失呢？

洪波：在上市之前，Facebook的股票已经在二级市场流通，实际上有些持股员工已经套现了。所以单纯从套现的角度看，Facebook上市并不会导致大规模的人才流失。但上市带给一家公司和员工心态的改变，并不仅仅是钱，一些员工如果不再能感受到自由自在的创业氛围，可能会选择离开。不过好在，Facebook还是一家“小”公司，员工数仅仅3000多。

15、在全球经济大环境如此不好的前提下，Facebook真的能带动起这么多钱吗？

洪波：大环境不好的时候，优质资源更显可贵。

16、您觉得在中国能不能诞生这样的一家企业？

洪波：中国也有很多了不起的公司，但在公司文化上，肯定跟Facebook有很大的不同。

17、Facebook风靡全世界的原因是什么呢？是人们对于社交的渴望吗？

洪波：过去，互联网将一切可以数字化的东西，全都数字化了，比如文本、音频、视频，这些我们称之为信息。Facebook是第一家将人的社会关系大规模数字化的公司，并且依托社会关系的数字化构建起庞大的平台，将数字化了的社会关系变成一种新的基础设施（Social Graph）。

18、 Facebook的广告业务涨势强劲，您觉得未来如果没有新的广告形式，Facebook的业绩是否会受到影响？

洪波：社交广告的巨大潜能才刚刚开始释放，Facebook上市会有利于更多企业了解这种广告形式。

19、 您觉得以后会有人（公司）打破Facebook的上市神话吗？

洪波：神话就是用来打破的。Facebook不是打破了Google的神话吗？

20、扎克伯格到底如何思考IPO这件事的？

洪波：我不是扎克伯格，不知道他如何思考，建议阅读他致投资者的公开信。但他多次表示过，Facebook不想上市，而且由于Facebook去年已经有10亿美元的盈利，账面上现金也非常充裕，更不需要上市。但像Google一样，股东数量超过500，上不上市都要披露财务数据。

21、G+（Google+）对Facebook冲击太大，所以才选择上市？

洪波：Google+对Facebook有一定影响，但冲击根本谈不上。G+也没有机会构建Facebook那样的Social Graph，Google更多还是着眼于信息而不是人。

22、facebook如何改变互联网了？变成什么样了？

洪波：简单说，过去的互联网还是信息的互联网，Facebook之后，变成人的互联网了。

23、您有在用facebook吗？粉丝多么？

洪波：我在用Facebook，好友数量已经达到系统上限了。

源文：http://www.rtdot.com/others/127

web页面入门

开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。

前端页面的工作很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很重要的一点还要细心。下面我们就讲讲页面开发，开发中需要事项和常遇到的问题吧。

首先分析效果图，细节上是否和站内风格统一；设计的元素是否便于实现；元素是否能复用。有问题及时和产品人员进行沟通，避免开发过程中的频繁修改，影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。

合理布局很重要，如同大厦的地基，大厦的高度再于地基是否牢固，合理的布局能有更好的扩展性。结构要尽量简洁，尽量减少结构中的嵌套，不要为了实现某种样式添加多余的空标签。

标签尽量语义化，能够让代码更加清晰。现在html5添加了更多的语义化标签，像header，section等，大胆的使用吧。虽然html5对于标签的相互嵌套体现了很好的包容性，即使标签没有闭合，或是inline元素中包含一堆block元素也不会有问题，但是为了养成良好的习惯还是尽量做到严格遵循xhtml的规范。

尽量少在页面写inline css,会使页面代码臃肿，不便于维护，有悖于样式和结构相分离的初衷。

页面中推荐的两种注释：

<%!–jsp注释,不会输出,推荐使用–%>

另一个总和前端页面开发打交道的就是图片。图片分为两种，一种是cssimage引用，另一种纯Image的页面引用。

背景图是通过样式在页面上输出，会在页面中产生请求，延长页面的渲染时间，为了解决这个问题，可以把类似的图片进行合并，减少请求数。在进行合图的时候，尽量把颜色相近的图标放到一起，可以减少图片的大小。

页面中直接引用的图片尽可能少的缩放，非常影响页面的渲染速度；尽可能少的使用前端技术控制图像显示大小，对用户不可见的部分就是浪费带宽，浪费钱，页面的渲染速度也肯定会受到影响，影响用户体验；在知道图片宽高的情况下尽量在img中加上宽高，减少页面reflow造成的速度损耗。

静态图片一定要小，建议存成png8格式，在不影响图片的显示质量下，可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片，存成jpg格式的更小，难道你会非选png的吗？存储完后图片还能用一些压缩工具进行无损压缩（如：PNGGauntlet）。

对于图片来说小就是原则，为什么呢，给你算个帐，节约10K看不出什么，100个用户是1000K，10000个是100000K,那一亿个用户呢？全是白花花的银子啊！

图片有几点需要注意：
1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替（http://a.xnimg.cn/a.gif）。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。
2、如果你的工程已经上线，我们站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。
3、避免过小的背景图平铺。
4、尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改；

css主要说一下注意事项。
1、class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。
2、CSS后代选择器性能：.a{} > .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便；
3、编码时尽可能使用缩写，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;
4、使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999em;来达到同样效果。
5、减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。
6、border:none;替换border:0;的写法；
7、使用css3的属性来代替阴影或是圆角的图片；

浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
IE6、IE7、Firefox之间的兼容写法：
写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
同一类class下的CSS hack可写为：
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*仅IE6*/
*+html .classname{background-color:#555;}/*仅IE7*/
常见的css bug这里就不说了，稍后会在wiki里总结一个列表供大家查阅和参考。

对于样式和图片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。这三种的区别是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾经的域，通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。

在开发过程中，我们应该对bug出现有预见性，特别是常见的bug（QA经常提的bug比如连续字符串没有换行，鼠标在没有变成手型…）要提前做出处理。要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划，减少冗余，可以简单写下注释，便于以后修改。

再来说一下快速查bug和解决bug的一些个人见解吧。
首先要分辨bug的类型，有的bug不一定是页面的问题。是否是页面套错了某个标签没有闭合，是否需要js修改或是后台技术处理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自带调试工具都能进行调试和修改；使用工具能很快定位bug的位置和类型，作出修改。
经验的积累也是很重要的。有时候你使用了所有的方法解决但问题仍然存在，需要看看DOCTYPE是否在HTML顶部，是否完整，推荐；是否有多余的空格或是编码格式是否正确，
比如ie解析的空格间距不太一样，有时候会导致意想不到的bug。
还有一种方式是逐步删代码方式，看究竟是那个部分是有问题的。

解决bug常用的几个方法：
有人说zoom:1;是解决ie6的兼容问题的万精油。可以用，但是不易多用，这个属性可能会存在一些潜在的问题，至于是什么问题，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解决ie下滚动图片侧漏问题哦。

最后要说的是优化，一定要时时刻刻想着优化自己的代码，给用户带来最好的体验。永远记住这句话【HTML结构的简化>css代码结构的简化】

源文：http://fed.renren.com/archives/373