在团队不断成长的过程中，需要处理的需求也在逐渐增长，团队中成员如何分工配合决定了开发的效率、产品的质量，在这个时候我们就需要一个流程来规范、指导我们，下面就将咱们前端组的一些经验跟大家分享一下，有不足之处欢迎大家指出来。

当PRD确立下来后，前端组的同学们就需要做好准备，好应对高强度的开发工作。在今年年初的时候前端组经过激烈的讨论针对新产品的开发做了一些约定。制定了前端开发的一些相关的规范，包括不同产品的命名规范，前端文件存放目录等等一系列的前期准备。别看这些只是小事，但做好万全的准备，是敏捷开发中所必的。

下面讲讲前端开发组的流程。

1、分层开发

在PRD确定后就需要进行分层开发的划分，根据项目内容的不同，划分组员的工作。大致分为，总体结构搭建、模块制作、页面制作、底层JS搭建、JS交互效果、内部测试、代码优化。

这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的进行人员分配，让合适的人做合适的事。降低开发成本，提高开发效率。

2、代码编写

前期工作准备好后，就开始进入代码编写阶段，我们采用LSM方式进行，大致流程为 prototype产出后，就进行前期的前端开发（搭建大致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。

确定了流程后还需要对产品原型进行分析、拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二、三级页面的风格搭建统一框架。

设计拿到prototype后，就进行通用模块样式的设计（包括按钮、分页、默认字体颜色、连接颜色等），完成后并提交给前端，统一的搭建。

在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。

代码编写过程中让前端组提前进入开发流程中来，在prototype产出后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，还能锻炼前端组的同学对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，在一个团队协同开发过程中，必须要严格按照规范执行，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。

3、内部测试与后续优化

所有页面出完以后设计参与前端组的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。让设计参与测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求。

总的流程结构图

这套流程制定出来就一直要求所有前端组同学严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。提高了团队的协作程度，代码更可控，开发效率更高。

http://www.xmued.com/?p=1873

我发现，这种概述性的问题，最适合这种集合群智、头脑风暴式的回答方式了。这也是我第一次觉得，Stack Overflow做到了Wikipedia做不到的事。（难怪它最近挤进了全美前400大网站。）

在我的印象中，关于网站开发，这样全面的概述性文章非常少见，因此也就非常有用。大家不妨看看，62件事情中你做到了多少？

一、界面和用户体验（Interface and User Experience）

1.1

知道各大浏览器执行Web标准的情况，保证你的站点在主要浏览器上都能正常运行。你至少要测试以下引擎：Gecko（用于Firefox）、Webkit（用于Safari、Chrome和一些手机浏览器）、IE（你可以利用微软发布的Application Compatibility VPC Images进行测试）和Opera。同时，不同的操作系统，可能也会影响浏览器如何呈现你的网站。

1.2

除了浏览器，网站还有其他使用方式：手机、屏幕朗读器、搜索引擎等等。你应该知道在这些情况下，你的网站的运行状况。MobiForge提供了手机网站开发的一些相关知识。

1.3

知道如何在基本不影响用户使用的情况下升级网站。通常来说，你必须有版本控制系统（CVS、Subversion、Git等等）和数据备份机制（backup）。

1.4

不要让用户看到那些不友好的出错提示。

1.5

不要直接显示用户的Email地址，至少不要用纯文本显示。

1.6

为你的网站设置一些合理的使用限制，一旦超过门槛值，就自动停止服务。（这也与网站安全相关。）

1.7

知道如何实现网页的渐进式增强（progressive enhancement）。

1.8

用户发出POST请求后，总是将其重导向（redirect）至另外一个网页。

1.9

不要忘记网站的可访问性（accessibility，即残疾人如何使用网站）。对于美国网站来说，有时这是法定要求。WAI-ARIA有一些这方面很好的参考资料。

二、安全性（Security）

2.1

阅读《OWASP开发指南》，它提供了全面的网站安全指导。

2.2

了解SQL注入（SQL injection）及其预防方法。

2.3

永远不要信任用户提交的数据（cookie也是用户端提交的！）。

2.4

不要明文（plain-text）储存用户的密码，要hash处理后再储存。

2.5

不要对你的用户认证系统太自信，它可能很容易就被攻破，而你事先根本没意识到存在相关漏洞。

2.6

了解如何处理信用卡。

2.7

在登录页面及其他处理敏感信息的页面，使用SSL/HTTPS。

2.8

知道如何对付session劫持（session hijacking）。

2.9

避免”跨站点执行“（cross site scripting，XSS）。

2.10

避免”跨域伪造请求“（cross site request forgeries，XSRF）。

2.11

及时打上补丁，让你的系统始终跟上最新版本。

2.12

确认你的数据库连接信息的安全性。

2.13

跟踪攻击技术的最新发展，以及你使用的平台的最新安全漏洞。

2.14

阅读Google的《浏览器安全手册》（Browser Security Handbook）。

2.15

阅读《网络软件的黑客手册》（The Web Application Hackers Handbook）。

三、性能（Performance）

3.1

只要有可能，就使用缓存（caching）。正确理解和使用HTTP caching与HTML5离线储存。

3.2

优化图片。不要把一个20KB的图片文件，作为重复出现的网页背景图案。

3.3

学习如何用gzip/deflate压缩内容（deflate方式更可取）。

3.4

将多个样式表文件或脚本文件，合为一个文件，这样可以减少浏览器的http请求数，以及减小gzip压缩后的文件总体积。

3.5

浏览Yahoo的Exceptional Performance网站，里面有大量提升前端性能的优秀建议，还有他们的YSlow工具。Google的page speed则是另一个用来分析网页性能的工具。两者都要求安装Firebug。

3.6

如果你的网页用到大量的小体积图片（比如工具栏），就应该使用CSS Image Sprite，目的是减少http请求数。

3.7

大流量的网站应该考虑将网页对象分散在多个域名（split components across domains）。

3.8

静态内容（比如图片、CSS、JavaScript、以及其他cookie无关的网页内容）都应该放在一个不需要使用cookie的独立域名之上。因为域名之下如果有cookie，那么客户端向该域名发出的每次http请求，都会附上cookie内容。这里的一个好方法就是使用”内容分发网络”（Content Delivery Network，CDN）。

3.9

将浏览器完成网页渲染所需要的http请求数最小化。

3.10

使用Google的Closure Compiler压缩JavaScript文件，YUI Compressor亦可。

3.11

确保网站根目录下有favicon.ico文件，因为即使网页中根本不包括这个文件，浏览器也会自动发出对它的请求。所以如果这个文件不存在，就会产生大量的404错误，消耗光你的服务器的带宽。

四、搜索引擎优化（Search Engine Optimization，SEO）

4.1

使用”搜索引擎友好”的URL形式，比如example.com/pages/45-article-title，而不是example.com/index.php?page=45。

4.2

不要使用”点击这里”之类的超级链接，因为这样等于浪费了一个SEO机会，而且降低了”屏幕朗读器”（screen reader）的使用效果。

4.3

创建一个XML sitemap文件，它的缺省位置一般是/sitemap.xml（即放在网站根目录下）。

4.4

当你有多个URL指向同一个内容时，在网页代码中使用<link rel=”canonical” … />。

4.5

使用Google的Webmaster Tools和Yahoo的Site Explorer。

4.6

从一开始就使用Google Analytics（或者开源的访问量分析工具Piwik）。

4.7

知道robots.txt的作用，以及搜索引擎蜘蛛的工作原理。

4.8

将www.example.com的访问请求导向example.com（使用301 Moved Permanently重定向），或者采用相反的做法，目的是防止Google把它们当做两个网站，分开计算排名。

4.9

知道存在着恶意或行为不正当的网络蜘蛛。

4.10

如果你的网站有非文本的内容（比如视频、音频等等），你应该参考Google的sitemap扩展协议。

五、技术（Technology）

5.1

理解HTTP协议，以及诸如GET、POST、sessions、cookies之类的概念，包括”无状态”（stateless）是什么意思。

5.2

确保你的XHTML/HTML和CSS符合W3C标准，使得它们能够通过检验。这可以使你的网页避免触发浏览器的古怪行为（quirk），而且使它在”屏幕朗读器”和手机上也能正常工作。

5.3

理解浏览器如何处理JavaScript脚本。

5.4

理解网页上的JavaScript文件、样式表文件和其他资源是如何装载及运行的，考虑它们对页面性能有何影响。在某些情况下，可能应该将脚本文件放置在网页的尾部。

5.5

理解JavaScript沙箱（Javascript sandbox）的工作原理，尤其是如果你打算使用iframe。

5.6

知道JavaScript可能无法使用或被禁用，以及Ajax并不是一定会运行。记住，”不允许脚本运行”（NoScript）正在某些用户中变得流行，手机浏览器对脚本的支持千差万别，而Google索引网页时不运行大部分的脚本文件。

5.7

了解301重定向和302重定向之间的区别（这也是一个SEO相关问题）。

5.8

尽可能多得了解你的部署平台（deployment platform）。

5.9

考虑使用样式表重置（Reset Style Sheet）。

5.10

考虑使用JavaScript框架（比如jQuery、MooTools、Prototype），它们可以使你不用考虑浏览器之间的差异。

六、解决bug

6.1

理解程序员20%的时间用于编码，80%的时间用于维护，根据这一点相应安排时间。

6.2

建立一个有效的错误报告机制。

6.3

建立某些途径或系统，让用户可以与你接触，向你提出建议和批评。

6.4

为将来的维护和客服人员撰写文档，解释清楚系统是怎么运行的。

6.5

经常备份！（并且确保这些备份是有效的。）除了备份机制，你还必须有一个恢复机制。

6.6

使用某种版本控制系统储存你的文件，比如Subversion或Git。

6.7

不要忘记做单元测试（Unit Testing），Selenium之类的框架会对你有用。
（完）

原文网址：http://stackoverflow.com/questions/72394

百度也弄出了个说吧，虽然百度内部自己的同事们说这个产品目前半死不活的，但是确实在一步步的完善，也有很多创新点，有亮点。

1.认证很容易，手机号，身份证号，真实清晰头像=V 字实名认证。就是这么容易

2.百度发明了新的PR值。这里的PR不是page rank而是people rank。

知名度(People Rank)

在百度说吧，知名度(People Rank)是用户的动态评价指标，综合用户在百度说吧实名社交平台的行为和在百度每日上亿次数据搜索计算而得。这一指标能客观反映出实名用户在真实社会的身份和影响力。每个百度说吧实名认证的用户都会拥有自己的“知名度”。“知名度”每隔一定时间会根据用户实际行为进行更新。

http://t.baidu.com/help/peoplerank 关于PR的详细说明

3.更加真是的诱惑。 也许他跟其他微博产品的最大区别是它给大家带来的是更加的真实，真是的名字，可以交换手机号，当然以后可以加入可交换的更丰富的其他元素。

百度说吧邀请码 先到先得

http://t.baidu.com/i/337e7c046afbf2fe93e5acce 点击此条链接注册百度说吧

http://t.baidu.com/i/3f0e162e7520042e9abf5a50 点击此条链接注册百度说吧

http://t.baidu.com/i/06c56e2cce27b146d308c056 点击此条链接注册百度说吧

http://t.baidu.com/i/e73b62e9eafbd01ea60265e9 点击此条链接注册百度说吧

Pragmatically speaking, though, there is a lot of value in monitoring and incorporating design trends, especially with regard to websites.

Let’s face it: the web changes at a rapid pace. Unlike in other media, design trends on the web are not just driven by aesthetics.

Technology is changing that can drastically alter the capabilities of the medium.

In 2010, we’re seeing designers continuing to push the boundaries of web design, setting the following clear trends…

有人会说，伟大的设计是永恒的。是的，在一个理想世界中，我们不用关注这些新的趋势。
实话讲，有很多网站都值得我们关注，分析趋势，特别是某些网站。
网络的变化太快是我们不得不面对的现实。不像在其他媒体，Web的设计原始动力不只是美学。
技术是不断变化的，可以大大加强媒体的能力。
2010年，我们看到设计师继续推进网页设计的发展，以下明显的趋势…

Print Design

Print design has always been a source of inspiration for the web. Web design has been around long enough now to cultivate a strong core of designers who have never worked in print. As a result, we are seeing more inspiration drawn from print, as these designers look beyond the web.

Serif Fonts

One of the most important issues of typography is legibility. Print designers have always favored serif fonts because the edges improve visibility and make letterforms easier to recognize.

Sans-serif fonts have generally been considered easier to read on the screen. But with more users browsing at high resolution and the improvements in font-smoothing technology, serif fonts have become very legible for body text.

平面设计
平面设计一直是Web的灵感来源。我们看到很多的灵感是来自平面设计，这些设计师想法似乎超越了Web。
衬线字体
字体的最重要问题之一是可读性。平面设计师们总是倾向于衬线字体的边缘，因为提高知名度，使字符表单更容易识别。
无衬线字体，一般被认为更容易阅读在屏幕上。但是，随着更多的用户在浏览高分辨率和字体平滑技术的改进，衬线字体已经变得非常清晰的正文文本。

Big Headings

Print designers have been using big headings to grab attention for ages. Print material has had to be high impact if it was expected to be read at all. If you saw a dull brochure sitting on a desk, would you bother to pick it up? Probably not.

This trend started in 2009 and has only grown in popularity. Large headings have been proven to grab attention and communicate clearly.

大标题
平面设计师一直在使用大标题，以争取不同年龄层用户注意。印刷材料的可读性已经很高了。如果你看到一个沉闷的小册子上一坐在办公桌前，你会不嫌麻烦捡起来？我猜你不会。
这一趋势在2009年开始，并开始在普及。大标题意味着更高的关注和更清晰的意图。

Multi-Column Layouts

Designers have to work within the constraints of their medium. Unlike the web, print offers no option for scrolling, being bound as it is by the dimensions of the paper. Using several columns allows you to fit more content in the same space.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

多列布局
一般设计人员在其工作中有很多限制。使用多列可让你在同一个空间展示更多的内容。
现在，以增加屏幕分辨率和网格布局的到来，更多的设计师正在适应这种方法的网站，使网站更容易使用，并适应更多的内容。

Big Lead Image

A picture is worth a thousand words. While it may be a while before a photograph has the same impact on the web as it does in print (which has much higher resolution), the adoption of broadband access has made big photographs more feasible.

We are seeing more websites use large, high-impact images to draw users in and create an immersive experience.

大引导图像
一张图片胜过千言万语。虽然在Web展示上会耗掉一些时间加载，因为它确实在效果方面比单使用文本的要好（其中有比较高分辨率的），宽带接入取得了很大的照片，采用更为可行。
我们看到更多的网站使用大，符合意境的图像来吸引用户，创造一个身临其境的体验。

Diagrams and Infographics

Print designers have been using graphics to convey complex information for years. This is seen most commonly in magazines and annual reports.

Graphics can communicate complex relationships and ratios in a way that is too difficult to do with plain text. Infographics tend to have a simple yet visually rich appearance, and more designers are adopting infographics or mimicking the style in their designs.

图表和信息图像
设计师一直使用图形来传达复杂的信息多年。普遍认为这是最常见的杂志和年度报告。
图形比纯文本更能表达相对比较困难的事或复杂的关系和比例。信息图像往往有一个简单而丰富的视觉外观，越来越多的设计师都采用或者模仿信息图像的设计风格。

Simplicity

Antoine de Saint-Exupery once said, “Perfection is achieved not when there is nothing more to add but when there is nothing left to take away.” The advantages of simplicity in design are many.

Hick’s Law tells us that the time required to make a decision increases with every option. Additionally, the signal-to-noise theory tells us that anything that doesn’t add to the message or function of a website (the signal) gets in the way and makes the design less effective (the noise).

Simple designs are easier to use and understand, and they allow for greater clarity in communicating messages.

Minimalist and Grid Design

Minimalism is powerful yet difficult to master. It contains nothing but the essentials. Everything else is removed, resulting in maximum impact of the elements that are present.

Minimalist designs require a strong grid system to be effective. Naturally, they will have plenty of white space, and so without that grid, a minimalist design would feel disconnected and sloppy. The grid gives it organization and structure.

简单
Antoine de Saint-Exupery曾说过，“实现完美并不是要加更多的东西，而是精简到不能再精简。”在设计简单的优点很多。
Hick’s法则告诉我们，每增加一个选项都会增加作出决定所需的时间。
简单的设计更容易使用和理解，使信息传播更加清晰。

精简和网格设计
极简主义比较难以掌握。它只包含的基本要素。其他一切都要被删除，在该元素是目前最大的影响造成的。
极简设计需要使用一个强大的网格系统才有效。若是有足够的空白，没有这种网格，一个简约的设计会感到零散。网格赋予页面一个组织结构。

One-Page Layouts

There are several ways to simplify. A one-page layout exhibits two of these ways: hiding and removing.

Effective one-page layouts hide any elements that are not a priority. If a user wants to see one of those elements, they can click to uncover it. This is much more effective than leaving everything visible, which would make the page complicated and overwhelming.

Likewise, the principle behind one-page layouts makes additional pages unnecessary. With the availability of powerful JavaScript libraries and faster connections, many websites now have little need for several pages. Designers can easily fit information on one page, without bothering the user with a hierarchy.

单页面布局
有几种方法简化。一个单页布局展品这些方法2：隐藏和删除。
有效办法是隐藏的那些优先级没有那么高的页面布局元素。如果用户希望看到这些元素之一，他们可以按一下来发现它。这比一切可见更为有效，不过这将使本页面复杂。
同样，单页布局后面的原则，使其他网页变得不重要。随着强大的JavaScript库和更快的连接，许多网站现在必要的页面已经没有几页了。设计人员可以轻松地容纳在一个页面上的信息，而没有打扰用户。 

Massive White Space

In the early days of web design, we didn’t have much screen real estate to work with, and so we didn’t show much white space. If you’ve ever tried to design a website for a 640×480 resolution, you’ll know exactly what I’m talking about.

Now that we have higher resolutions and the ability to hide and reveal elements with JavaScript, harnessing white space is much easier.

White space is critical to good design. It gives the eye a place to rest. It naturally improves the quality of a design. And it shows which elements are related to each other by way of proximity.

Typographic Layouts

Whereas we used to be confined to a few select “web-safe fonts” with very little control over how they were displayed, we now have a wide range of tools to enrich our typography.

Web designers have long enjoyed using type as a subtle tool to communicate messages. With increasing control and capabilities, we’re seeing more designers focus on typography as the primary design element.

我们以前在适合Web使用的字体方面只限于少数选择，我们现在有很多工具来丰富我们的排版。
Web设计者一直喜欢使用typography这个微妙的工具来沟通。我们将看到更多的设计师聚焦在typography上并把它作为主要设计元素排版。 

CSS3 Techniques

Not sure you can take advantage of CSS3 yet? Think again. Web pioneers such as Andy Clarke and Jeremy Keith have long preached about “progressive enhancement” in web design.

Progressive enhancement is about designing websites so that they are usable on older browsers, while being “enhanced” for users who commit to the latest technology.

Designing in this camp lets you take advantage of CSS3 properties such as rounded corners, border backgrounds and text and box shadows. Users on modern browsers will see the nicer version, and those on older technology (cough ¦ IE6 ¦ cough) will see the basic version.

CSS3 Animation

Animation on the web has gone through many stages. Initially, we could only animate with GIF image files. Then, we were pretty much limited to Flash. Now, we can select from Flash, Silverlight, GIF, JavaScript and even CSS3. Subtle animation can be memorable, and CSS3 makes it lightweight and easy.

CSS3技术
不肯定你可以采用CSS3吗？再想想。Web先锋如Andy Clarke和Jeremy Keith长期呼吁“逐步改进”Web设计。
“逐步改进”是关于Web设计，让他们在老的浏览器可用，同时要考虑那些喜欢使用新技术的用户。
你可以利用对CSS3属性，如圆角，边框背景和文本框阴影。在现代浏览器的用户将看到更好的版本，并且对喜欢用旧技术（IE6的）将看到的基本版本。
CSS3动画
在Web上，动画经历了很多阶段。起初，我们只能用动画的GIF图像文件。然后，我们几乎限于Flash。现在，我们可以选择从Flash，Silverlight的，以及GIF，JavaScript和甚至对CSS3。微妙的动画，可令人难忘的，且CSS3更轻量级，简单。

Rounded Corners

The Web 2.0 style of 2005 and 2006 made rounded corners popular, to the point of being annoying. At the time, creating them was difficult. There was no set way to create truly rounded corners. Instead they were simulated with CSS, JavaScript hacks and image files.

CSS3 now allows us to generate rounded corners directly in the browser, making them not only easier to create but also much more efficient, because the user doesn’t have to download additional images or JavaScript files.

Designers are increasingly taking advantage of this new browser capability in 2010.

圆角
在2005年和2006年的Web 2.0风格让圆角变得受欢迎，这是个恼人的问题。那时，他们创造了麻烦的事情。没有固定的方法来建立真正的圆角，只好利用CSS，JavaScript hack 来模拟。
现在让我们使用CSS3直接产生在圆角，使他们不仅轻松地创建，而且更有效率，因为用户不必下载额外的图片或JavaScript文件。
设计师正越来越多地在2010年这个新的浏览器功能的优势。

Box and Text Shadows

Using shadows to create a sense of depth has been done (and sometimes overdone) since the earliest days of the web. But it was not always practical. To add shadows to text, you had to use images, which increased loading time and made maintenance more difficult. Box shadows required several images and CSS tricks like “sliding doors.”

CSS3 has highly customizable shadow capabilities, which allow for a wide range of creative effects, including not only drop shadows but inner shadows, too. Creative designers have already been using these CSS3 effects to simulate both embossed and imprinted effects.

Box 和文本阴影
利用阴影，以创造一种深度感已经完成，因为在Web最早的时候（有时过头了）。但它并不总是可行的。要添加阴影的文本，使用的图片，从而增加加载时间，使维护更加困难。框阴影需要一些图像和Css技巧，如“滑动门”。
Css3具有高度定制的阴影的能力，这是非常有创造性的，不仅包括阴影，而且还包括内部的阴影。有创意的设计师已经开始使用这些CSS3，模拟浮雕和印迹效果。

RGBa and Opacity

For years, working with opacity and transparency on the web was near impossible. You had three choices: simulate transparency using flat images, deal with PNG’s cross-browser incompatibilities, or struggle with CSS’ basic transparency selectors and filters.

CSS3 gives designers much better consistency and freedom in using opacity with the RGBa property. While you can take advantage of transparency in countless ways, one area that it has helped particularly is with complex backgrounds overlaid with semi-transparent colors. Previously, this effect was impractical or impossible to create without resorting to complex PNG images.

RGBA颜色和不透明度
多年来，与不透明性和透明度，在Web几乎不可能的。你有三种选择：使用PNG图像模拟的透明度，不过这并不能跨浏览器，再或者使用CSS的选择器和过滤器的基本透明度处理。
对CSS3使设计师更好的一致性和使用的不透明的RGBA属性的自由。虽然你可以在很多方面透明度的优势，特别是半透明的颜色叠加的复杂的背景方面。此前，这种效果是不切实际的，若果没有PNG图像的话。

Mobile-Compatible Design

The mobile web has given millions of users the ability to check their bank account while waiting in line, look up the latest scores on the subway and update their Twitter status while driving. (Which one of these is a dangerous habit?) And the mobile web continues to grow rapidly.

We have gotten to the point that every company has to consider whether their website will be used on the go, and if so how. Innovative companies have already invested heavily in useful and user-friendly mobile versions of their websites.

兼容移动设计
移动Web已让百万计的用户在银行排队时能够查看他们的银行帐户，能在地铁里查看最新比分和在驾驶时更新自己的Twitter。（这其中之一是一个危险的习惯？）和移动Web正在快速增长。
每一个公司都有自己的网站，考虑它是否将用于在旅途中，如果是的话如何，可以设计一个Web版本。创新公司已经投入巨资开发一个有用和友好的移动版本。

Creativity

The explosive growth in use of social media is proof that people want to connect and share things they are passionate about.

In the design field, we have seen large growth in the sharing and browsing of other people’s work. As designers, we are now bombarded by everyone else’s creativity. Not only does this raise the standard of quality of design, but it encourages ideas to be shared, which contributes to a culture of creativity and innovation.

Clean Illustrations

If you’re like me, you grew up watching Disney movies, admiring all the effort that went into creating each frame of animation. We are well past the days when illustration was done in ink and markers, and this evolution in tools has led to some very creative approaches to design.

Many designers are learning that smooth, clean, crisp illustrations create a distinctive feel that can’t be replicated by photography or simple clip art. The result is a wide range of professionally illustrated designs that are engaging and inviting.

创新
从社会媒体使用的爆炸性增长能看出来，人们很希望共享那些东西充满热情的东西。
在设计领域，我们已经看到在共享方面以及查看他人工作的需求大幅度增长。我们现在被别人的创造力不停的轰炸。不仅提高了设计质量标准，而且它鼓励要共享，这也促进了创造力和创新文化理念。
简洁插图
如果你像我一样，看迪斯尼电影长大的，佩服那些每个帧的创造动画。我们能很容易识别那些使用墨水或标记的插图，而这样插图慢慢演进出一些非常有创意的设计方法来。
许多设计师正在学习光滑，干净，那些不能由摄影或简单的剪贴画复制的清晰的插图创建一个独特的感觉。一个专业插图设计师，会得到广泛邀请。

Textured Backgrounds

Textured backgrounds are nothing new on the web. But this technique has seen an interesting variation in the last few months. I refer to it as “micro-textures”which are subtle, barely noticeable textures in the background.

纹理背景
Textured backgrounds纹理背景，对于Web并不是新的。但是，这种技术在过去几个月已经出现了有趣的变化。我指的是把它当成“微型纹理”，这是在微妙的背景，几乎明显纹理。

Thumbnails

You may be saying, “Thumbnails have been around since the dawn of the web. How is this a trend?” True, they have always been used, but only very simply. You would have a thumbnail that you could click on to get a bigger image. It did the job but was boring.

In the last few months, designers have started asking, “How can we make thumbnails more exciting?” This has led to an upswing in thumbnails that are both clever and usable.

缩略图
你可能会说，“Web最初就使用了很多缩略图。这怎么会是趋势？”是的，缩略图一直被使用，但很简单。你有一个缩略图，您就可以得到一个更大的图片点击。它实现了功能，但有些乏味。
在过去的几个月里，设计师们开始问，“怎样才能使缩略图更精彩？”这导致了缩略图使用上更进了一步，可用性也得到了上升。

Watercolor

As the web evolves, we are seeing more designers being inspired by a variety of sources and media. No surprise that the fine arts are among these sources.

One of the styles that has emerged is the simulation of watercolors. The soft elegant look of this style is distinct and calming.

水彩
随着Web的发展，我们看到更多的设计师展现了各种来自各种媒体的灵感。毫不奇怪，其中美术方面灵感来源。
风格之一是水彩模拟。这种风格独特和优雅的外观是平静的。

Handwriting

Handwritten and script fonts are abused the most. For this reason, many designers steer clear of both types either out of disgust or because of a fear of looking amateurish. But lately, many designers have found that, when used properly, the handwritten style conveys a sense of craft and planning. Used in the right context, it is a powerful way to communicate.

手写
手写和原件字体是滥用情况很严重。基于这个原因，许多设计师避开这两种类型，以免造成厌恶出或业余的恐惧。但最近，许多设计师都发现，如果使用得当，手写风格能传达一种结构规划意识。在正确的上下文中使用，它是一个功能强大的交互方式。

Social Media

With people spending more time on Facebook than Google now, no wonder designers are looking for innovative ways to integrate social media on their websites.

Some designers have gone so far as to publish their content on social media networks and then use their websites to aggregate it.

It is safe to say that as 2010 progresses, we will see more designers find creative ways to integrate social media onto their websites in order to better engage users.

随着人们在Facebook上花更多的时间比谷歌多，难怪设计师是创新的方法来整合社会化媒体在其网站上寻找。
有些设计师在Web上公布他们的社会化媒体的内容，然后利用他们的网站来做聚合。
这可以说是2010年的增长，我们将看到更多的设计师创造性地整合到他们的社会媒体网站，以便更好地吸引用户。

Fixed Elements

Now that browsers better support the position: fixed element, we are seeing cleverer uses of it.

There are plenty of situations in which a fixed element (such as persistent navigation) could serve the owner’s business objectives and make the website more usable.

Fixed elements are memorable and enhance the user experience. They have countless creative uses, and we will continue to see designers take advantage of them.

固定元素
现在，浏览器更好地支持这一立场：position: fixed，我们看到很多设计师正越来越适当的使用它。
有几种情况下，一个固定的元素（如持续导航）可以成为业主的商业目标，使网站更加实用丰富。
固定元素是难忘和增强用户体验。他们有无数的创造性使用，我们将继续看到设计师利用这些优势。

团队竞赛

　　第一点，也是最重要的一点，敏捷建模者总是积极的寻求协作，因为他们意识到他们不是万事通，他们需要不同的观点，这样才能做到最好。软件开发可不是游泳，单干是非常危险的。在敏捷的字典中没有“我”这个词。

畅所欲言

　　敏捷建模者都有良好的沟通技巧－－他们能够表达出他们想法，能够倾听，能够主动获取反馈，并且能够把需要的写出来。

脚踏实地

　　敏捷建模者应当脚踏实地 他们的精力都集中在满足用户的需求上，他们不会在模型上画蛇添足，即便那双足是多么的好看。他们满足于提供可能的方案中最简单的一种，当然，前提是要能够完成工作。

好奇

　　敏捷建模者乐衷于研究问题，解决问题。

凡是都问个为什么

　　敏捷建模者看问题从不会至于表面，而是会打破沙锅问到底。他们从不会就想当然的认为一个产品或一项技术和它们的广告上说的那样，他们会自己试一试。

实事求是

　　敏捷建模者都非常的谦逊，他们从不认为自己是个万事通，所以他们会在建立好模型之后，用代码来小心的证明模型的正确。

根据实验

　　敏捷建模者应当愿意尝试新的方法，例如一项新的（或是已有的）建模技术。一般而言，他们也会接受敏捷建模开发技术，必要时，为了验证想法，他们愿意同传统的思想做斗争，例如在一个项目中减少文档数量。

有纪律

　　要坚持不懈的遵循敏捷建模的实践。对你来说，你可能会在不经意间说，“加上这个功能吧！无伤大雅。”或是，“我比project stakeholder更了解。”在AM的道路上要想不偏离方向，是需要一定的纪律性的。

建模的误区

走出一般性的设计误区，迈向成功之途 无论你遵从的是重量级的方法，比如Enterprise Unified Process(EUP)，还是轻量级的开发过程，如Extreme Programming(XP)，建模在软件开发中都是不可或缺的。但不幸的是其中充斥着各种谬误与迷思。这来自于各个方面，有从理论家错误的研究、数十年来信息技术领域内的文化沉积、软件工具开发商天花乱坠半的市场宣传以及象Object Management Group (OMG)和IEEE这类组织的标准。这个月，我要揭示建模中的误区，指出其相应的事实真相。

误区一

　　建模就等于是写文档

　　这很可能是其中最具破坏力的一条，因为开发人员可以此为借口而完全放弃建模。许多优秀的软件开发人员会说他们不想把时间浪费在这些“无用的“文档上。他们沉溺于编码之中，制造着一些脆弱而劣质的系统。另外，甚至于许多尽责的开发人员现在也认为建模是一件讨厌的事，而不愿去学习相应的建模技术。

　　事实分析：“模型”与“文档”这二者在概念上是风马牛不相及的—你可以拥有一个不是文档的模型和不是模型的文档。一幅设计图就是一个模型，而不论是被画在餐巾纸的背面，或写在一块白板上，或在Class Responsibility Collaboration(CRC)卡片中，还是根据记录在报纸和便签纸上的流程图而生成的一个粗略的用户界面原型。虽然这些都不能说是文档，但他们却都是有价值的模型。

　　建模很象是作计划：作计划的价值在于计划编制的过程中，而非计划本身；价值体现在建模的活动中，而非模型本身。实际上，模型不是你系统中的一部分正式的文档，而且在完成它们的使命后可以被丢掉。你会发现值得保留的只有很少的模型，而且它一定是非常完美。

误区二

　　从开始阶段你可以考虑到所有的一切

　　这种说法流行于二十世纪七十年代到八十年代早期，现今的许多经理都是在那个时候学习的软件开发。对这一点的迷信会导致在前期投入可观的时间去对所有的一切建模以期把所有一切都弄正确，试图在编码开始前就“冻结”所有的需求（见误区四），以致于患上“分析期麻痹症” – 要等到模型非常完美之后才敢向前进。基于这个观点，项目组开发了大量的文档，而不是他们真正想要得到的—开发满足需要的软件。

　　事实分析：怎么才能走出这个误区呢？首先，你必须认识到你不能考虑到所有的细枝末节。第二，认识到编码员可能会对建模者的工作不以为然（这是可能的，事实上建模者所作的工作在实际价值中只占很少的部分），他们或许会说模型没有反应出真实的情况。第三，认识到不管你的最初所作的规格说明书有多好，但注定代码会很快地与之失去同步，即便是你自己建模自己编码。一个基本的道理就是代码永远只会和代码保持一致。第四，认识到迭代法（小规模地建模，编一些代码，做一些测试，可能还会做一个小的工作版本）是软件开发的准则。它是现代重量级的软件开发过程（如EUP），以及轻量级（如XP)的基本原理。

误区三

　　建模意味着需要一个重量级的软件开发过程

　　走入这个误区（经常与误区一有联系）的项目组常常是连建模都彻底地放弃了，应为这样的软件开发过程对他们来说太复杂太沉重了。这不亚于一场天灾。

　　事实分析：你可以用一种敏捷的方式取而代之。关于用简单的工具进行简单地建模的详细内容可参看Agile Modeling(AM)。而且，你可以丢弃你的模型当使命完之后，同样也可以很基本的方式进行建模（比如，从办公桌起来，来到白板前就开始构略草图）。只要你愿意，你就可以轻松地建模。

误区四

　　必须“冻结”需求

　　这个要求常常来自高级经理，他们确切地想知道他们从这个项目组能得到什么东西。这样的好处就是在开发周期的早期确定下需求，就可以确切地知道所要的是一个什么样的东西；缺点就是他们可能没有得到实际上所需要的。

　　事实分析：变化总会发生的。由于优先级的变化和逐渐对系统有了更进一步的理解，都会引起需求的变化。与冻结需求相反，估计项目成功的风险，尽量去接受变化而且相应地采取行动，就象XP所建议的一样。

误区五

　　设计是不可更改的

　　如同误区四，要求每一个开发人员必须严格遵从“设计“，导致开发人员为了符合“设计“而作了错误的事情或以错误的方式作正确的事情。或者是简单地忽略了设计，否定了所有设计可能带来的好处。冻结了设计，你就不能从在项目进程中所学到知识进一步获益。另外一个很大的趋势就是开发出大量的文档而不是实际的软件，使用面向文档的CASE工具而不是能给项目带来实际价值的面向应用的工具。

　　事实分析：事实上，设计会经常根据开发人员和数据库管理员的反馈进行修改，因为他们是最接近实际应用的人，通常他们对技术环境的理解要好于建模者。我们必须的面对这样一个事实：人无完人，他们所作的工作也不可能尽善尽美。难道您真的想将一个并不完善的设计固定下来而不再去修改其中的错误吗？另外，如果需求并没有被冻结，其实就意味着你不能冻结你的设计，因为任何需求的修改势必影响设计。对之，正确的态度是：只要你的代码还在改动，涉及就没完。

误区六

　　必须使用CASE工具

　　建模常常被认为是一项复杂的工作，因此需要大量地使用CASE工具辅助进行。

　　事实分析：是的，建模可以是很复杂的。但你完全可以建立一个有效而简单的模型表述其中关键的信息，而不是将一些无关紧要的细节包括进来。

　　比如，我经常使用UML建立模型来表示类、它们的属性及一些关键的业务操作，但并不画出属性的存取操作(get和set)，以及维护与其它类关系的框架代码，或者其他一些琐碎的实现细节。我通过建模寻找解决问题的方法，让我和我的同事能继续前进去实现这个模型。以这样灵活的方式，大多数情况下我并不需要一个CASE工具来支持建模工作，一块白板，或者一台数字相机足以。这样，我就不用花时间去评估CASE工具，不用去和工具供应商讨论许可证的问题，也免去了人员培训开销。CASE工具只有当它能体现最佳性价比时（相对你自己的情况而言），才值得购买。大多数情况下，我都能不用它而达到目的（完成建模）。我经常使用的工具有Together/J/) – 因为它能产生数目可观的Java框架代码；还有ERWin（） — 因为它能规划数据库。这两个工具真正地帮助我实现了软件开发的目的 – 制造满足用户要求的软件。但我绝大多数得建模工作仍然使用的是简单的工具，而不是CASE工具。

误区七

　　建模是在浪费时间

　　许多新手都这样认为，这主要是因为他们所接受的教育仅仅局限于如何编写代码，对于完整的开发流程鲜有接触。而且他们的经验也仅限于如何实现代码，就如初级程序员。他们放弃了提高效率和学习技能的机会，这些技能能够使他们很容易地适应不同的项目或组织。他们应该为此感到羞愧。

　　事实分析：在大多数情况下，在开始编码之前画一个草图、开发一个粗率的原型或者制作一些索引卡片都能提高你的生产效率。高效的开发者在编码之前都要进行建模工作。另外，建模是一种很好的在项目组成员与项目负责人之间沟通途径。你们在这个过程中探讨问题，从而对所要的是一个什么样的东西可以得到更好的理解，涉及到该项目中的每个成员也可得到对该项目有一个从分的了解。

误区八

　　数据模型(Data Model)就是一切

　　许多组织基于数据模型就蹒跚启动新的开发工作，也许正如你所在的组织：IT部门对于数据有非常严格的规定，控制着你的开发项目；或者你以前的数据库是一团糟，别无选择。

　　事实分析：数据模型是一个重要的但不是最重要的建模，它最好是建立在另外的模型之上。（参见“Extreme Modeling”，Thinking Objectively，Nov.2000）。这即使在象数据仓库这类面向数据的项目中也如此。如果没有很好的理解用户是如何使用该数据仓库的（在数据模型中没有表示出来），这些项目经常是以可悲的失败而告终。你可以使用的模型有很多 – 使用案例（use cases），业务规则（business rules），activity diagrams，类图（class diagrams），component diagrams，用户界面流程图（user interface flow diagrams）和CRC，等等。数据模型仅仅是其中的一种。每种模型都有其长处和短处，应该正确地使用。

误区九

　　所有的开发人员都知道如何建模

　　我们现在面临照这样一个严重的问题：许多不是开发人员的人，包括高级经理和用户，不知道软件是如何建成的。其结果，他们不能够区分开熟练的开发者和一般的程序员（当然也分不清高级程序员和一般程序员），他们想当然地认为所有的开发人员都具备从头到尾开发整个系统的技能。

　　事实分析：这肯定是不正确的。建模的技能，是只有当一个开发者通过学习它，并经过长期的实践才能够掌握。一些非常聪明的程序员常常相信自己无所不能，毕竟他们终究只是程序员。正因为这样的狂妄自大，他们承当的一些任务是他们根本就没有相应的技能去完成的。软件开发是如此的复杂，单单一个人是很难具备所有的技能去成功地进行开发，甚至也不可能去配置有一定复杂程度的系统。开发这应该有自知之明，明白他们自己的弱点，学无止境。通过互相取长补短，建模者可从程序员身上学到一项技术的具体细节，程序员也可从建模者那里学到有价值的设计和体系结构的技术。我个人认为所有的人，包括我自己，都是新手。

AM的价值观包括了XP的四个价值观：沟通、简单、反馈、勇气，此外，还扩展了第五个价值观：谦逊。

沟通

　　建模不但能够促进你团队内部的开发人员之间沟通、还能够促进你的团队和你的project stakeholder之间的沟通。

简单

　　画一两张图表来代替几十甚至几百行的代码，通过这种方法，建模成为简化软件和软件（开发）过程的关键。这一点对开发人员而言非常重要－它简单，容易发现出新的想法，随着你（对软件）的理解的加深，也能够很容易的改进。

反馈

　　Kent Beck在Extreme Programming Explained中有句话讲得非常好：“乐观是编程的职业病，反馈则是其处方。”通过图表来交流你的想法，你可以快速获得反馈，并能够按照建议行事。

勇气

　　勇气非常重要，当你的决策证明是不合适的时候，你就需要做出重大的决策，放弃或重构（refactor）你的工作，修正你的方向。

谦逊

　　最优秀的开发人员都拥有谦逊的美德，他们总能认识到自己并不是无所不知的。事实上，无论是开发人员还是客户，甚至所有的 project stakeholder，都有他们自己的专业领域，都能够为项目做出贡献。一个有效的做法是假设参与项目的每一个人都有相同的价值，都应该被尊重。 AM的价值观包括了XP的四个价值观：沟通、简单、反馈、勇气，此外，还扩展了第五个价值观：谦逊。

沟通

　　建模不但能够促进你团队内部的开发人员之间沟通、还能够促进你的团队和你的project stakeholder之间的沟通。

简单

　　画一两张图表来代替几十甚至几百行的代码，通过这种方法，建模成为简化软件和软件（开发）过程的关键。这一点对开发人员而言非常重要－它简单，容易发现出新的想法，随着你（对软件）的理解的加深，也能够很容易的改进。

反馈

　　Kent Beck在Extreme Programming Explained中有句话讲得非常好：“乐观是编程的职业病，反馈则是其处方。”通过图表来交流你的想法，你可以快速获得反馈，并能够按照建议行事。

勇气

　　勇气非常重要，当你的决策证明是不合适的时候，你就需要做出重大的决策，放弃或重构（refactor）你的工作，修正你的方向。

谦逊

　　最优秀的开发人员都拥有谦逊的美德，他们总能认识到自己并不是无所不知的。事实上，无论是开发人员还是客户，甚至所有的 project stakeholder，都有他们自己的专业领域，都能够为项目做出贡献。一个有效的做法是假设参与项目的每一个人都有相同的价值，都应该被尊重。

原则：

　敏捷建模（AM）定义了一系列的核心原则和辅助原则，它们为软件开发项目中的建模实践奠定了基石。其中一些原则是从XP中借鉴而来，在Extreme Programming Explained中有它们的详细描述。而XP中的一些原则又是源于众所周知的软件工程学。复用的思想随处可见！基本上，本文中对这些原则的阐述主要侧重于它们是如何影响着建模工作；这样，对于这些借鉴于XP的原则，我们可以从另一个角度来看待

下载:点击进入下载页面

硬件加速的 HTML5. 现在, 在您浏览网站时, 您仅仅使用了计算机性能的10%. Internet Explorer 9 将这个比例提升到 90%. 内置了专业级的HTML5支持, Internet Explorer 9 通过Windows 充分发挥了计算机硬件的优势，让开发人员能够开发出下一代的体验.新的硬件加速HTML5 功能包括支持video 和 audio 元素, 开启了平滑、内嵌的视频，不需要插件. 此外, 支持 HTML5 canvas 元素让动态图形的渲染更加的容易, 同时通过Windows 和图形处理单元（GPU）获得加速. 新增的对几个CSS3模块的支持大大增加了网页设计师创作的手段，新的DOM支持意味着更灵活的Web开发.

支持现代的标准. 开发者和客户期待着新的丰富的web应用程序，由web标准例如HTML5, CSS3 和 ECMAScript5开启. 我们一直和标准组织例如W3C 合作，来帮助开发这些标准并将标准通过Internet Explorer 9交付到市场. Internet Explorer 9 已经支持众多的硬件加速，符合基于HTML5, CSS3, DOM L2 和 L3, SVG, ECMAScript5, 等标准的功能.

和Windows 7 无缝的集成. 有了和Windows 7无缝的集成，访问和使用您喜欢的网站在Internet Explorer 9中更加容易. 您可以从任务栏直接访问您喜欢的网站，不需要首先打开浏览器. 有了 固定站点, 您可以拖动喜欢的站点到Window 任务栏让访问更加容易。固定站点能够和其他Windows 7的原生应用程序混合。当网站支持的时候，每个站点可以固定到任务栏预览和跳转菜单， 这样您就可以与其他的Windows 应用程序互动和熟悉这些网站. 跳转菜单是一个不打开浏览器快速访问站点的方法. 缩略图预览控件在Windows 7任务栏可以提供控制，以支持他们的网站. 使用缩略图预览控件，您可以在支持的网站暂停或倒转影片. 您还可以把标签拖动到远离浏览器的地方使用Windows Aero Snap 来对齐一组网站，和原生的应用程序一样.

您的网站更加出色. 新的Internet Explorer 9 浏览器框架使得网站更加出色。简洁并且增强的用户界面将站点放置在前端。浏览器框架是简洁的的，所有的控件将保持安静并且透明，将焦点集中在网站. 每个网站的特点是反映整个的浏览器，使用户沉浸在访问的站点中。浏览器淡化到到背景中，将网站放置到前端，并且您需要的功能悄悄的显露.

随着WEB标准在国内的不断普及，结构表现行为分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目，其中，由于SEO背后的商业价值影响，“语义化”得到了突出的重视，作为一名前端工作者，必须明确的认识到标准化的网页对一个企业网站的商业价值的重要性。

随着越来越多的网站改版成符合Web标准的版本，Web标准也逐渐的被网站的设计者们所了解和认可，Web标准之所以能从原来的被质疑，争论，到现在的被应用和认可，其中的主要原因是，Web标准能给使用者带来真正的好处。在传统的table布局中，页面内容要等表格中的内容加载完后才能显示出来。而使用css布局的页面里，内容边加载边显示，所以大大提高的页面的显示速度。同时由于标准的布局代码更加简洁，增加了关键字占网页代码的比重，从而实现了搜索引擎的优化。

基于Web标准化xHTML+CSS构架的企业网站正式利用了标准化网页做具有的独特优势，能够给在不同类型客户端的潜在客户带来良好的用户体验的同时，最大化的降低网站的维护成本，提高网站的效率，为企业网站带来更大的价值。

   关键字：Web标准 前端开发 企业网站 SEO xHTML+CSS

 Abstract

With Web standards improving continuously in domestic, the concepts of structure behaves separation, modular, semantic, elegant degeneration and etc. become the important guideline to check the front-end people’s comprehension for the web standards. Thereinto, because of the commercial value behind SEO, “semantic” has been regarded highlighted. As a front-end worker, it must be clear understanding the importance of business value of the standardized Web page for the company website.

As more and more websites are in accord with Web standards, Web standards are also understood and approved gradually by Web designers. Before Web standards was questioned and argued. But they can be applied and approved now, arguing that to, because Web standards can give consumers a real benefit. In the traditional table layout, the page content would be appeared after the content of table. But the content in the layout of CSS pages are appeared and loaded at the same time. Therefore, it improves the speed of display of the page greatly. At the same time, because the code of standard layout is more concise and the code increases the proportion of keywords in order to achieve the search engine’s optimization.

In view of unique goodness of corporate Website using a standardized web, it can bring the good user experience to the potential customer of customer of clientntages,  In a the different client while it can reduce the maintenance costs, improve website efficiency and bring greater value to corporate website.

  Key words: web standards  front development  company website  SEO  xHTML + CSS               

1  前　言

进入信息时代，互联网应用在很大意义上在改了变传统的行业以及其营销手段。目前，传统行业从研发、生产、销售无不与互联网有着千丝万缕的联系，尤其是在产品的销售方面，企业网站作为一个企业展示自己良好形象的平台以及和外界沟通的窗口，更是起到了十分重要的的作用。通过企业网站在互联网推广产品和服务的营销方式，更是以其成本更低、销量更大等优势，被越来越多的企业所有者所看好。越来越多的企业，特别是大中型企业纷纷如雨后春笋一般建立了其企业网站作为展示其企业品牌价值的良好平台。如果说某个企业仍然固守传统，不思创新改变，那么这个企业势必将会淹没在竞争对手的互联网大潮里。一句话，不顺应互联网，在其中谋取发展机会，必被淘汰！

虽然如今的互联网已经充斥着各种大大小小的企业网站，但是这些网站两极分化十分严重，从网站前端讲，大多数网站都是采用落后的传统布局模式进行网站前端的开发，所谓传统布局，就是有别于Web标准化的CSS布局，用table进行页面的定位和排版，这样开发的网站不仅代码臃肿，页面渲染的效率极低，而且不便于维护，Html页面的可读性很差，甚至基本没有语义可言。另外，基于传统布局的网站甚至无法满足当今互联网快速发展的要求，在不同的浏览器下，传统布局的网页甚至无法调整至兼容状态。所以会出现我们使用不同的浏览器观看统一网页时，会发现排版样式个不一样，甚至有的网页在一些高端浏览器下严重错位无法浏览。这不仅大大降低了一个企业在客户心目中的形象，严重影响了企业的品牌价值，而且还会对客户的正常浏览造成障碍，影响用户体验，这就是我们为什么要提倡使用Web标准化的方式进行网站前台的开发。

采用基于Web标准化的(x)Html+css进行网站前端开发的意义不仅在于它能够使我们有效的团队合作和维护，加速网站的开发，提升用户体验，还在于一个企业网站背后蕴含着巨大的商业价值—易于SEO优化。基于Web标准化开发的网页具有对搜索引擎十分高的亲和力。它丰富的语义化的标签和良好的文本结构能够让搜索引擎快速，高效的获取网站的核心内容，对提升网站的收录和排名有这至关重要的作用。一个让用户无法在搜索引擎中搜索到的网站，其价值一定会大打折扣的。

2 Web标准与Css布局概述

随着Web技术的不断发展，互联网已经由被动接受型的Web1.0向主动参与型的Web2.0过度了，越来越多的Web技术需要Web页面具有清晰的语义和严格的结构，传统的采用表格布局的页面所带来的缺点表现的越来越明显，随着Web2.0技术的逐渐成熟，以及更多的基于XML技术的出现，使得用CSS进行网页布局的技术显得越来越重要，同时也成为未来互联网发展的趋势。如今，已经有越来越多的新网站采用了css布局技术，同时也有很多大型的企业和门户网站采用css布局对原有的网站进行了重构，这充分说明了Web标准的重要性。这一章节中，我将阐述Web标准的基本概念和Web标准化进程的历史。

2.1 Web标准的历史和发展

2.1.1 什么是Web标准

WEB标准不是某一个标准，而是一系列标准的集合。我们知道，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C组织进行起草和发布的，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。所以说Web标准是一些规范的集合，是由W3C和其他的标准化组织共同制定的，以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计，使其能够被大多数人所访问。下面我将简单介绍这些标准。

（1）    结构标准语言

     结构标准语言包括两个部分：XML和XHTML。其具体区别如下：

     XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

XHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

（2）    表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

行为标准语言也包括两个部分：DOM和ECMAscript，其具体区别如下：

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

　ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262。

所以总体来说WEB标准是W3C（World Wide Web Consortium）和其它标准组织制定的一套规范集合，包含一系列的标准，包含我们所熟悉的HTML,XTML,JavaScript,以及CSS等等。WEB标准的目的在于创建一个统一的用于WEB表现层的技术标准，以便于通过不同的浏览器或终端设备向最终用户展示信息内容。

2.1.2  Web表现层技术

Web标准化的一大特点就是内容和形式的分离，结构和表现的分离，CSS技术应用于Web的表现层可以控制结构内所装载内容的表现形式，CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。CSS的出现，解决了一个普遍的问题，就是使得网页的文档能够清晰的独立于文档的表现成，从而更加的具有可读性。

CSS定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，我能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

所以表现层技术指的就是将信息展现给用户并提供给用户交互行为的技术，简单理解表现就是样式，技术层面上是一堆程序代码，而表面上带给人们的是视觉所看到的东西。

目前主要有：W3C的WEB标准，此外还有Macromedia公司的Flash，Microsoft推出的WPF都在致力成为下一代富应用（富因特网应用程序Rich Internet Application）表现层技术。

2.1.3 Web标准的历史

在90年代后期，当互联网和Web逐渐成为主流时，Web浏览器的开发商还没有完全的支持CSS（层叠式样式表，对于Web开发人员来说，他们可以用CSS来控制Html文档的表现）。考虑到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以这种对CSS支持的不足也是可以理解的。

由于浏览器对CSS的支持不够，再加上一些平面设计师的要求，导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是，当设计师可以用 border=”0″来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”（透明）的使用，同样是不可见，他们却使用空白的GIF图片来控制布局。

由于HTML从来就没被用来控制一个文档的表现，导致大量的乱码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说，标签汤（tag soup）是一个很形象的名字。

新版本的Web浏览器的发布，使得对CSS的支持得到了加强与扩展，但是并没有达到它应有的水平。尽管浏览器的开发商对CSS支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持CSS，此时，不应该再有任何理由再像以前那样使用HTML了，应该让它恢复本来的面貌：去描述文档的结构 ，而不是它的表现。 正因为此，我们现在才能够用CSS来达到其本来的目的了。

1994年10月，W3C组织成立，3C是专门致力于创建Web相关技术标准并促进Web向更深、更广发展的国际组织。W3C组织一支致力于推进网页标准化进程的发展，推进Web的普及，即不仅人能阅读和理解Web上的信息，计算机、程序以及其他硬件设备也 同样能理解并处理Web上的形形色色的信息。到目前为止，W3C已开发了超过50个规范(草案)。这些规范(草案)包括人们早已、耳熟能详的HTML、HTTP、URIs、XML等，也包括针对语义Web的RDF、OWL等。国内的Web标准化进程起步较晚，由于大量的技术文章是从外文翻译而来，大大的影响着国内的Web标准化向前推进的速度，再加上国内浏览器市场IE6一统天下的现状至今没有改变，所以至今国内大部分网站依然是不友好的。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供服务。

2.1.3 Web标准的前景

随着越来越多的网站改版成符合Web标准的版本，Web标准也逐渐的被网站的设计者们所了解和认可，Web标准之所以能从原来的被质疑，争论，到现在的被应用和认可，其中的主要原因是，Web标准能给使用者带来真正的好处。在传统的table布局中，页面内容要等表格中的内容加载完后才能显示出来。而是用css布局的页面里，内容边加载边显示，所以大大提高的页面的显示速度。同时由于标准的布局代码更加简洁，增加了关键字占网页代码的比重，从而实现了搜索引擎的优化。

自2005年以来，Web2.0的提出和应用给IT界带来了新的技术革新。而Web标准正式Web2.0技术的基础，这也在很大程度上推动了Web标准的发展。随着Web技术的不断革新和越来而越多支持标准的浏览器出现，采用Web标准的网页布局一定会变得更加的容易和普遍。

2.2  Web标准的构成

2.2.1 结构（Structure）

结构是由文档中的主体部分，再加上语义化、结构化的标记。Web标准的网页结构，简单的说就是Html，xHtml，xml这三类。

HTML最初由Tim Berners-Lee于1991年创建，到1993年6月，互联网工程工作小组 (IETF)发布了超文本标记语言工作草案（并非标准），称为HTML1.0；之后，1994年IETF成立了专门的HTML工作小组，并于1995年11月发布了HTML2.0，成为第一个HTML规范，即RFC1996；HTML3.0标准于1995年4月便已经被提出，到1997年1月，HTML3.2作为W3C的第一个推荐规范发布；1997年12月，HTML4.0作为W3C推荐规范发布，之后又做了部分细微调整，形成了现在广泛使用的HTML4.01标准，于1999年12月作为W3C推荐规范发布；HTML的最近更新是于2008年1月22日发布的HTML5.0工作草案。

HTML语言是一种特殊的标记语言，它通过各种标记来识别文档的结构以及超链接信息，虽然HTML语言描述了WEB文档的结构格式，但并不能精确定义

文档信息必须如何显示和排列，而只是建议WEB浏览器应如何处理，最终呈现在用户面前的效果取决于浏览器本身的显示风格及其对标记的解释能力。目前，对HTML标准的支持程度成为判断一个浏览器优劣的重要指标。

XHTML的最初思想是采用XML1.0标准对HTML4.01进行改造，XHTML1.0于2000年1月26日作为W3C推荐规范发布，2001年5月31日发布XHTML1.1；XHTML2.0目前还是一个工作草案，不再与XHTML1.x保持兼容；XHTML5.0则是伴随HTML5.0工作草案同时进行的草案，属于XHTML1.x的更新版本。

XML（eXtensible Markup Language）1.0规范由W3C于1998年2月发布，最初用于解决HTML在网络应用中的局限性。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言，通过强大的扩展性满足网络信息发布的需要，现在更多的用于网络数据的转换和描述。

XML的应用非常广泛，例如，用于网站信息推送的RSS，WebService的服务描述和数据传递等，都是典型的XML应用。

最初的HTML不仅标记结构，也标记网页如何展现。因此，就出现了如<p>这样的表示结构的元素与<center>这样的表示展现的元素混杂的局面。那个时候还没有CSS。

后来有了专门表示展现的CSS，人们发现，应该把HTML进行一番清洗整理，使HTML只表示结构，而把如何展现的责任完全交给CSS。该设想得到了绝大多数的支持，因此，W3C在1999年末制定了HTML4.01（也是目前的最新版本），该标准对HTML进行了大规模的清洗整理，像<font>、<center>等表示结构的元素都被扫地出门。从此，HTML只表示结构，而CSS则全责负责展现。

然而，事情却没这么简单，有一大批的人习惯于使用旧的HTML进行开发，有一大批的旧式的网页仍然需要得到支持。为了应对这种情况，W3C在HTML4.01下制定了3个文档类型，分别是严格型、过渡型、框架型。

 所谓严格型，就是指完全符合HTML4.01标准的文档类型，在该类型下，所有表示展现的元素都不允许使用，另外，元素嵌套规则等都必须严格符合HTML4.01的标准。

所谓过渡型，顾名思义，就是过渡类型的文档，类型的文档并不排斥HTML旧式的元素，在该类型下，你可以使用旧式的元素，也可以使用新的元素。元素之间的嵌套规则等也不严格。

所谓框架型，是指允许包含框架元素的类型，即<frameset>元素。框架结构的页面现在普遍认为不是一种好的页面结构方式，因此已经很少使用。

从以上的描述中，我们知道，W3C推荐的页面模式是严格型的模式，之所以存在过渡型的模式，完全是不得已而为之的权宜之计。设计良好的页面，HTML应只表示结构，而CSS则全责负责展现。

2.2.2 表现（Presentation）

表现，是我们赋予内容的一种样式。在大多数情况下，表现就是文档看起来的样子，但是它同样可以影响一个文档“听”起来的样子—-毕竟不是每个人使用的都是图像化的浏览器。尽可能的把结构和表现相分离。理论上讲，你应该用一个 HTML 文档来保存内容与结构，用一个 CSS 文档来控制整个文档的表现。

2.2.3 行为（Behavior）

 行为，既是网页和用户之间互动的过程，通常使用JavaScript向网页中添加行为，它是一种用于向网页中添加行为的脚本语言，可以用于检验你输入某一个表单里的数据的有效性（告诉你其格式正确与否），提供拖放功能，改变漂浮广告的样式，使页面元素如菜单等动起来，处理按钮功能等等。最新的JavaScript是这样工作的：找到一个目标HTML元素，然后对该元素进行一些处理。这和应用CSS差不多，不过两者的运行方式、语法等，则有相当大的差别。

 JavaScript 是根据 “ECMAScript”标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。

2.3           Web标准有什么好处

建立网站时，有很多理由让我们去遵循Web标准。企业、开发人员和用户都会从兼容标准的做法中获益。这里列举了一些最令人信服的理由，来说明为什么要使用基于Web标准的技术去建立一个网站。

2.3.1对网站自身

对网站自身而言，采用Web标准进行网站（前端）开发，有以下几点好处：

（1）能够提供最多利益给最多的网站用户

（2）确保任何网站文挡都能够长期有效

（3）简化代码、降低建设成本

（4）让网站更容易使用，能适应更多不同用户和更多网路设备

（5）当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行

2.3.2对网站浏览者

对于网站的访问者而言，Web标准化的网页无疑是给用户提供了更高的用户体验，是网站的用户能够轻松的访问页面从而高效的获得所需信息。其优势可以简单概括为以下几点：

（1）文件下载与页面显示速度更快

（2）内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）

（3）内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）

（4）用户能够通过样式选择定制自己的表现界面

（5）所有页面都能提供适于打印的版本

2.3.3对网站所有者（企业）

对于网站的所有者。采用Web标准化的网站可以更是可以给企业带来最下化的支出和最大化的效益，其好处可以概括为以下几点：

（1）更少的代码和组件，容易维护

（2）带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节的带宽。

（3）更容易被搜寻引擎搜索到

（4）改版方便，不需要变动页面内容

（5）提供打印版本而不需要复制内容

2.3.4对网站开发者

（1）减少开发时间。你可以用外部CSS文件来控制整个设计，避免重复代码，如<font>。

（2）降低维护时间。某个外部CSS文件的变化可能影响整个网站。

（3）提高设计能力。有一些高级设计功能CSS可以实现，而HTML不行。

（4）开发更清楚的代码。XHTML将格式化、结构和行为分开，更容易阅读和维护。

（5）用单独的样式表，使其能在多种格式下传递同样的XHTML内容。一个XHTML文件可以适应屏幕、手持设备和打印显示。

（6）开发更稳定的代码。标准兼容的代码可能适用于未来版本的浏览器，也适用于老的浏览器。

2.4  CSS布局与table布局的区别

2.4.1 CSS 2.0的优势

样式单自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。

CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式，HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和 Li此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观。

CSS2.0的优势可以概括为以下两点：

（1）浏览器支持完善

（2）结构与表现分离

（3）样式设计控制功能强大

（4）、继承性能优越

可以说当今的所有主流浏览器都已完全的支持CSS2.0，但是从兼容性考虑，各个浏览器的解释还不仅相同，但是优秀的前端开发者可以通过使用复位样式或Hack等手段解决这些不兼容问题。

基于css2.0布局的网页支持使用外部调用的方式来加载css控制文件，这就使得内容与表现的完全分离得以实现，Web标准化的网页的最大优势也就从这点体现出来：即使没有css来控制网页形式的表现，我们依然可以清晰完整的解读Html文档的内容。所以说CSS2.0真正意义上使设计代码与内容分离，而在CSS设计代码中通过CSS的内部导入特性还可以使设计代码根据设计需求进行二次分离。使得设计代码本身也便于维护与修改。

在CSS2.0里，可以通过对css文件对网页内容的布局进行像素级别的精确控制，Html文档中的任何内容都可以拥有一个自定义的标签（类），在css文件中可以精确地对每一个标签或每一类标签进行精确的控制。

CSS2.0的继承性能也十分的优越。方便的运用css标签选择器，对父类和子类进行属性控制，子类能够继承父类中的属性也能有自己独特的属性，这大大提高的网页的开发效率，减少代码使用量，从而提高了Web页面的性能。

2.4.2    传统的table布局与CSS布局

复杂的表格设计使得设计极不容易，修改更加复杂。最后生成的网页代码队了表格本身的代码，还有许多无意义的透明的gif占位图及其它元素，文件量庞大，最终使得浏览器下载及解析速度变慢。

而在CSS布局中，用DIV元素代替传统的Table元素，从真正意义上实现结构与表现分离，则可以从根本改变这种情况。

2.5  向Web标准过渡

2.5.1 从HTML转向XHTML

事实上XHTML就是HTML的下一个版本，用于替代HTML并帮助转向XML的一套过度型标记语言。

在强调表现与结构分离的WEB标准时代，HTML的语法模式已经不能满足需求，取而代之的将是新一代的标记语言，结构与标记更严谨。而XHTML正是这样的一门面向结构的语言。

2.5.2 发挥CSS 2.0的作用

CSS是的应用Web标准的核心，也是向标准过渡的重要一环。但CSS丰富的样式表现也对设计者提出了更高的要求。 在此我们针对向标准过渡的要求，对CSS的的编写提出了一些建议与要求。

（1）、合理的CSS文件结构。（CSS支持import功能，可使用分离的CSS文凭来组织样式）

（2）、继承与重用的优势。

（3）、设计跨平台的代码。(注意留有一定的CSS hack代码进行编写）

（4）、具有良好可用性的CSS样式设计。

（5）、使用基于DOM的脚本语言来编写交互。（DOM的产生也是为了实现脚本语言的跨平台与跨浏览器）

2.6  面向现在与未来的设计

2.6.1 Web标准与Web 2.0

虽然说现在很多Web2.0的网站都普及了Web标准，但这两者之间是没有什么必然的关系的。也就是说，你用传统的table布局也好，用xHtml+css也罢，对网站算不算Web2.0，都没有本质上的影响。Web标准是一套技术标准，而Web2.0则是一种网络概念、模式。

 “Web2.0”这个词没有明确的意义，也没有明确的定义。Web 2.0不是一种技术升级，而是一种观念升级。

Web2.0，是相对Web1.0（2003年以前的互联网模式）的新的一类互联网应用的统称，是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览Html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。

　　 Web1.0到Web2.0的转变，具体的说，从模式上是单纯的“读”向“写”、“共同建设”发展；由被动地接收互联网信息向主动创造互联网信息迈进！从基本构成单元上，是由“网页”向“发表/记录的信息”发展；从工具上，是由互联网浏览器向各类浏览器、rss阅读器等内容发展；运行机制上，由“Client Server”向“Web Services”转变；作者由程序员等专业人士向全部普通用户发展；应用上由初级的“滑稽”的应用向全面大量应用发展。

在技术特征上，　Web2.0是基于元数据评注信息发布方式的新型互联网.技术上,它用xml处理RSS/ATOM/RDF/F0AF等数据、用AJAX来综合Web信息发布技术,并且使用开放的Web应用API来开发Web服务.这些并不具有革命性的技术特征却给信息传播思想带来了革命性的变化,Web2.0将六度关系理论应用于信息传播、以微内容为信息传播的基础并在大众信息传播中着眼于用户个体。

2.6.2 用户体验设计的发展趋势

用户体验（User Experience，简称UX 或 UE）是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新2.0模式的精髓。

用户体验贯穿在一切设计、创新过程。IT应用设计方面的用户体验主要是来自用户和人机界面的交互过程。在早期的产品过程中，人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发，而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计，其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大，牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。至于客户服务，从广义上说也是用户体验的一部分，因为它是同产品自身的设计分不开的。客户服务更多的是对人员素质的要求，而已经难以改变已经完成并投入市场的产品了。但是一个好的设计可以减少用户对客户服务的需要，从而减少公司在客户服务方面的投入，也降低由于客户服务质量引发用户流失的机率。

　　现在流行的设计过程注重以用户为中心。用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证：

　　（1）对用户体验有正确的预估

　　（2）认识用户的真实期望和目的

　　（3）在功能核心还能够以低廉成本加以修改的时候对设计进行修正

（4）保证功能核心同人机界面之间的协调工作，减少BUG。

那么，如何对用户体验这一概念进行量化呢？信息构建师Peter Morville由于长期从事信息构建和用户体验(User Experience)设计的工作，对此深有体会，他对用户体验(User Experience)设计进行总结，并设计出了一个描绘用户体验(User Experience)要素的蜂窝图，如图所示。

图2-1 用户体验蜂窝图

该蜂窝图很好的描述了用户体验的组成元素，信息构建师在设计网站或其他信息系统时应当参照 这个进行。这个蜂窝图也说明，良好的用户体验不仅仅指是可用性，而是在可用性方面还有其他一些很重要的东西。

　　该蜂窝图很好的描述了用户体验的组成元素，信息构建师在设计网站或其他信息系统时应当参照 这个进行。这个蜂窝图也说明，良好的用户体验不仅仅指是可用性，而是在可用性方面还有其他一些很重要的东西。比如：

　　有用性（useful）：它表示设计的网站产品应当是有用的，而不应当局 限于上级的条条框框去设计一些对用户来说根本毫无用处的东西；

　　可找到性（findable）：网站应当提供良好的导航和定位元素，使用 户能很快的找到所需信息，并且知道自身所在的位置，不至于迷航；

　　可获得性（accessible）：它要求网站信息应当能为所有用户所获 得，这个是专门针对于残疾人而言的，比如盲人，网站也要支持这种功能。

　　满意度（desirable）：是指网站元素应当满足用户的各种情感体 验，这个是来源于情感设计的；

　　可靠性（credible）：是指网站的元素要是能够让用户所信赖的，要 尽量设计和提供使用户充分信赖的组件；价值性（valuable）：它是指网站要能盈利，而对于非赢利性网站， 也要能促使实现预期目标。

关于用户体验的发展，用户体验贯穿在一切设计、创新过程，如用户参与建筑设计和工作环境、生活环境的设计和改善，用户参与IT产品设计和改善等。随着计算机技术和互联网技术的发展，用户体验更加得到重视，IT应用设计方面的用户体验逐渐在软件设计、互联网设计中占据主流地位。而信息技术支撑下的创新模式，也就是面向未来的创新2.0模式，则从更加广阔的领域关注用户体验、强调以人为本，无论是欧盟Living Lab中的用户体验创新、Fab Lab中的用户直接参与、还是AIP“三验”中的以用户为中心的体验，都将用户置于创新的中心地位，而带动用户体验向经济社会发展的纵深迈进。

3  XHTML与CSS基础

       在此章节，主要介绍可扩展超文本置标语言XHTML和层叠样式表CSS的基础内容。

3.1           XHTML基础

　  XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

2000年底，国际W3C组织(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。所以，建立XHTML的目的就是实现HTML向XML的过渡。目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用（即通常所说的CSS＋DIV）。

　  XHTML是当前HTML版的继承者。HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的计算机来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。

　　大部分常见的浏览器都可以正确地解析XHTML，即使老一点的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML。当然，从HTML完全转移到XHTML，还需要一个过程。

　　跟CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这使实现样式跟内容的分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用，比如MathML、SVG。

从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，比如img、br等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛。

XHTML是“3种HTML 4文件根据XML 1.0标准重组”而成的。 而W3C亦继续维持建议使用HTML 4.01和积极地研究HTML5及XHTML的计划。 于2002年8月发表的XHTML 1.0 的建议中，W3C指出XHTML家族将会是Internet的新阶段。而转换使用XHTML可以令开发人员接触XML和其好处，并可以确保以XHTML开发的网页于未来的相容性。

　　HTML语法要求比较松散，这样对网页编写者来说，比较方便，但对于机器来说，语言的语法越松散，处理起来就越困难，对于传统的电脑来说，还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大。因此产生了由DTD定义规则，语法要求更加严格的XHTML。

　　大部分常见的浏览器都可以正确地解析XHTML，即使老一点的浏览器，XHTML作为HTML的一个子集，许多也可以解析。也就是说，几乎所有的网页浏览器在正确解析HTML的同时，可兼容XHTML。当然，从HTML完全转移到XHTML，还需要一些过程。

　　跟CSS（Cascading Style Sheets，层叠式样式表）结合后，XHTML能发挥真正的威力；这使实现样式跟内容的分离的同时，又能有机地组合网页代码，在另外的单独文件中，还可以混合各种XML应用，比如MathML、SVG。

　　从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，实现的方式是在开始标签末尾加入斜扛。

3.2           选择合适的DTD

3.2.1 文档类型定义

DTD （Document Type Definition）是一套关于标记符的语法规则。它是XML1.0版规格的一部分,是XML文件的验证机制,属于XML文件组成的一部分。

DTD 是一种保证XML文档格式正确的有效方法，可以通过比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。一个DTD文档包含：元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。

　　XML文件提供应用程序一个数据交换的格式,DTD正是让XML文件能够成为数据交换的标准,因为不同的公司只需定义好标准的DTD,各公司都能够依照DTD建立XML文件,并且进行验证,如此就可以轻易的建立标准和交换数据，这样满足了网络共享和数据交互。

3.2.2为什么使用文档类型

依据HTML和XHTML标准，一个DOCTYPE(“document type declaration”的简写)是用来告诉浏览器你使用的是哪一个版本的(x)HTML,而且必须出现在每一个页面的顶部。DOCTYPE是网页的一个重要构成：没有他们，你的CSS将不再有效。

一个新的DOCTYPE包含了一整个URI，它告诉那些浏览器去把页面解析成与标准相适的模型。把(X)HTML, CSS和DOM处理成你所期望的那样。

使用一个不完善或是旧的的DOCTYPE，甚至不使用DOCTYPE，它会使浏览器把它转化成“Quirks”模型，此时浏览器假设你写的是过时的，残缺的90年代后的代码。

这样设置，浏览器将尝试用旧的标准解析你的页面，把你的CSS解析成IE4标准。并且回复所有者一个特殊的DOM。

无疑，这并不是我们所想要的。但却是我们常得到的。所以本文就想要纠正这些不正确或是不完整的DOCTYPE。去选择合适的正确的而又完整的DTD。

3.2.3 DTD的几种类型

在Html4中DTD分为严谨型，过渡型，框架型，他们分别有如下的声明方式

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://WWW.W3.org/TR/Html4/strict.dtd”>

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://WWW.W3.org/TR/Html4/loose.dtd”>

  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”

“http://WWW.W3.org/TR/Html4/frameset.dtd”> 

在XHtml1中，三种声明严谨型，过渡型，框架型的三种文档类型的声明方式为：

<!DOCTYPE Html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://WWW.W3.org/TR/xHtml1/DTD/xHtml1-strict.dtd”>

    <!DOCTYPE Html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://WWW.W3.org/TR/xHtml1/DTD/xHtml1-transitional.dtd”>

 <!DOCTYPE Html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://WWW.W3.org/TR/xHtml1/DTD/xHtml1-frameset.dtd”> 

严谨型的文档要求网页十分严格，不能使用任何表现层的标识和属性，而过渡型的DTD则宽松许多，它允许你继续使用HTML4.01的标识(但是要符合xHtml的写法)。框架型的DTD是专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

关于DTD的选择，理想情况当然是严格的DTD，但对于大多数刚接触Web标准的设计师来说，在后面章节中所介绍的我开发的企业网站选择的是过渡型的DTD。过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

3.3          选择合适的标签（语义化）

在做网页时需要根据网页HTML文档的结构和语义环境选择最合适的HTML或XHTML标签，而不是根据它们的外观样式去选择它们。使用P标签定义一个段落，而不是用它来获得换行效果。我们使用h1-h6标签标记标题，而不是用它们取得文字大小与加粗的效果。这就是Web标准所倡导的，语义化的HTML。

3.3.1如何构建语义化的HTML

HTML是一种对文本内容进行结构和意义（或者说语义）进行补充的方法。它会告诉我们说：这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是到互联网上另一个文件的超。值得注意的是，不应该让HTML来告诉我们：这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。也就是说，这些关乎于网页表现形式的工作应该是CSS的工作。在做前端开发的时候应该记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到语义标记的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

语义化的HTML结构其实很简单，首先掌握Html中各个标签的语义，div是一个容器；strong是表示强调；ulli是一个无序列表；p表示一段文字；H表示标题；a表示一个连接，等等。在看到内容的时候我们应该想想用什么标签能更好的描述它，是什么就用什么标签。

   3.3.2语义化的HTML的优势

我们知道HTML5新增的标签，比如header和footer，Html正在朝着更加健壮的语义化的HTML结构发展，xHtml2在这点上没Html5先进，这也是xHtml2死亡的一个原因，这一点也说明了语义化的HTML结构是Html的发展趋势。

（1）去掉或样式丢失的时候能让页面呈现清晰的结构

Html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是Html的表现，这些其实Html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达Html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

（2）屏幕阅读器会完全根据你的标记来读你的网页.

例如，如果我们使用的含语义的标记，屏幕阅读器就会逐个拼出你的单词，而不是试着去对它完整发音.

（3）PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下，观看设备的任务是符合设备本身的条件来渲染网页。

（4）搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

过去你可能还没有考虑搜索引擎的爬虫也是网站的访客，但现在它们他们实际上是极其宝贵的用户.没有他们的话，搜索引擎将无法索引你的网站，然后一般用户将很难过来。页面是否对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记.

（5）便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

3.4          给CSS留下接口

有了标签，就有了包含内容的页面对象，但是，若要控制这些对象，就需要使用XHTML中的Id与Class属性。在XHTML中，每一个页面上，Id名称只能使用一次，不允许重复使用Id名称；Class名称在页面中允许重复，同一样式可以在多个样式中，如某个Span或某个Div或某个P可以同时拥有Class为Blue的样式；我们可以很方便的通过这些类来控制标签内元素在页面布局中的呈现形式。

4 Div标签

       在此章节，主要讲述基于Web标准的CSS布局中所最常使用的div标签。

4.1           div是什么

Div是Html标签中一个普通的标签，之所以在Web标准化的网页中运用广泛，甚至有时候过渡运用，是因为div是Html标签中没有实际意义的标签。在使用它进行排版时，不会像其他Html标签一样具有原始属性和意义。因此，使用div会更加方便，但是，如今很多人在制作网页时过渡的使用div标签，造成Html可读性差，违背了Web标准化所倡导的语义化的宗旨。

4.2          如何使用div

在布局中，DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

4.3          理解div

在我看来，div只是HTML标签家族中众多标签中的普通而又特殊的一个。普通是因为它和其他标签等级并列，毫无优先级可言，特殊是因为他是无意义标签。任何人在学习css布局之前都应当深刻的认识到。div并不代表着一切。就像table横行的时代一样，并不是只有table一个标签能够代表一切。Html的每个标签都是十分有用的，如果我们说网页布局是div+css的话，是不是W3c应该把其他标签都精简掉呢？所以盲目推崇DIV+CSS只会让更多的人误入歧途。

现在，在开发CSS的时候，提的越来越多的是语义化，语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读，更加易懂，比如，.text_01{color:red} 就没有.text_red{color:red} 容易理解。

HTML同样如此，比如我们看到<ol>就知道这是个有序列表；看到<p>标签就知道这是一个段落，内容为文字；看到<span>就知道这个是比<p>还小的文字单位；看到<h1>、<h2>之类的就知道他们是标题。

显然，全部是div的页面，是看不出来这些的。

页面的结构化亦是如此：

<div><div><div><div>…..</div></div></div></div>

这样的代码，显然是很难理解其DOM结构的，但是

<div><p><h2><span>…..</span></h2></p></div>

就比上面的那个结构要清晰很多。

这就是说，虽然很多时候都可以用div进行布局，但是，我们完全可以用更好的标签来替代它，过多的div所构建的网页可读性低、结构化和语义化差，团队的其他成员的学习和维护难度就会提高，这对于一个团队来说，是很浪费时间和精力的。

5  浏览器兼容与解析问题

由于不同的浏览器，比如IE6,IE7,FireFox解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。由于内容十分繁杂，所以我只在这里做简单的介绍。

5.1  CSS hack技术

5.1.1 什么是 CSS Hack

       简单的概括，css hack就是通过使用一些分正规的手段寻求网页在多浏览器上兼容的过程。由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。等等。另外，使用css hack还有一个好处就是，我们可以使用它为每一款浏览器单独写一个css来控制网页布局，这也是利用css hack的浏览器滤镜效果实现的。但是需要注意的是，如果页面中使用的CSS hack，则页面讲无法通过W3C的css验证，所以作为一个前端开发者来说，要在现实效果和验证上做一个取舍。

5.1.2 如何使用 CSS hack

这里收集我工作的过程中经常遇到的浏览器兼容性方面的css hack 解决办法。

（1）@import

我们以@import的用法作为CSS hack的示例代码，实际上@import的用法远远不止这么简单。一个小小的发动都可能导致解析上的变化。下面就来详细了解@import的使用方法。在@import中使用URL来导入样式，标准用法便是将URL中的值带上引号，例如：

 @import url（”neWstyle.css”）;

带引号的URL地址只能被IE5及以上浏览器，以及firefox所识别，而IE4及以下版本的浏览器则不会解析neWstyle.css。@import的这种用法主要用于区分IE4，只要我们将IE4的CSS代码直接写在样式文件中，而将IE5及以上浏览器的样式写在neWstyle.css中，再使用@import进行调用，从而实现了IE4的单独处理。另一个方法如下：

@import url（”neWstyle.css”）screen；

Screen 参数是CSS提供的用于指定设备类型的选项，screen 表示用于屏幕显示，print表示用于打印设备的显示。比较有意思的是，IE系列浏览器对设备类型都不支持，因此可以利用这个情况来做IE浏览器的区别。使用以上代码，noneIE.css中的样式在IE系列中都不会被解析，只会被Firefox解析，这样就做到了IE与Firefox的区别处理。

（2）  注释

我们知道，CSS中的注释语句可以使用/* */来标记一段注释内容。由于版本升级的原因，在对注释的解析上，IE浏览器也有所区别，因此可以利用注释语句来进行CSS hack。

例如以下的代码：#content /* */ {Font-size:18px;}

在选择符与大括号之间使用注释语句，这样的代码在IE6中看上去是可以显示的，而在IE5及以下的版本浏览器中却不会被处理，因此我们可以这样针对IE6、IE5进行单独处理。例如：

#content  {Font-size:15px;}           

#content /* */ {Font-size:30px;}

CSS的执行顺序是后一个总是会覆盖前一个。当IE6与Firefox执行到这里时，将使用后一个样式代码进行处理，而IE5由于对/* */注释代码并不解析，因此它认为只有第一段代码，所以将会使用第一个代码进行显示。

（3）属性选择符

CSS2中提供了一种选择符，我们称之为属性选择符，用于对具有特定属性的对象进行选择。使用方法如下：

 Span.left  {color:blue;}

表示对名为left的span进行选择。

当然，属性class可以替换为其他属性。如：

Span [title] {color:blue;}

表示对所有具备title的span对象进行选择。

这是CSS中的一个非常优秀的选择符方法，但是IE浏览器至今也没有对这种方法提供支持。属性选择器在Firefox中正常工作，而对IE系列浏览器却没有任何作用。

一些设计师在实际网站开发过程中，经常使用属性选择符方法来进行IE与Firefox之间的区别处理，代码如下：

 #content  {

Color:red;}

[xmlns] #content  {color:blue}

在第二个选择符中，使用[xmlns]作为顶及选择符。需要注意的是，使用方法必须让你的Html标签加上xmlns属性。

只有这样，才能保证页面中拥有xmlns属性。这样，一旦需要对Firefox进行单独处理，只需要在相同的选择器前面加上[xmlns]，就可以对Firefox编写单独的样式表代码了，而且在标准的xHtml网页中，Html标签页默认拥有xmlns属性，所以使用此方法非常方便、实用。

5.2  IE条件注释功能

条件注释是IE特有的一种功能，能对IE系列产品进行单独的XHTML代码处理，注意，主要是针对XHTML,而非CSS。在应用条件注释功能的时候，我们可以利用它来针对各个不同的浏览器版本来设定不同的代码，来调整页面在各个浏览器中的最终显示效果。

下面举一些应用ie条件注释的简单语句例子来介绍它的用法;

<!–[if IE]>此内容只有IE可见<![endif]–>

<!–[if IE 6.0]>此内容只有IE6.0可见<![endif]–>

条件注释能被IE判断是什么版本的浏览器，并在符合条件的情况下显示其中的内容，从IE5.0到7.0都支持注释功能，而且版本号精确到小数点后4位：

<!–[if IE 6.1000]>此内容只有IE6.1可见<![endif]–>

IE条件注释还支持感叹号非操作：

<!–[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]–>

并且支持前缀，用于判断更高版本或是更低版本：

<!–[if gt IE 5.0]>此内容只有IE5.0以上版本可见<![endif]–>

这里的gt全称为greater than表示当前条件版本以上版本，但不包含当前版本。

还有其它几个前缀：

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

5.3           盒模型问题

5.3.1什么是盒模型

每一个块级元素，如p或div元素，都有上、下、左、右四侧。块级元素的这些侧都是由围绕着内容部分的3个层面组成。因此，我们可以把块级元素看作4部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。实际的内容包括文字、图片、Java应用程序和其他对象。内容区处于整个盒的中央。内边距紧贴着内容的区域。

包围着内边距的外层，并构成盒的边界。外边距是从边框的边界开始并向外延伸的透明盒。

5.3.2 盒模型BUG

在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border） 和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，　Firefox（FF）是准确按照CSS标准：Width为内容的宽度，也就是说：层的宽度 = “Width” + “padding(left and right)” + “border-Width”；而IE则把Width作为整个层的宽度：内容的宽度 = “Width” – “padding” – “border-Width”；

IE的这种解析，被认为是一个BUG。但事实上，这种解释也不无道理，人们在设计页面的时候关注得更多的是盒子的大小，而不是内容的大小。正是因为浏览器的不同解析，给CSS的设计带来一些困难。针对这个问题，我们经常使用!important来区分Firefox和IE6.0：

#content

{

　　    Width: 414px !important;

　　    Width: 400px;

　　    padding: 5px; /*只给出一个值，表示上右下左的边距都为5px*/

　    　border-Width: 2px;

}

Firefox识别!important，而IE6不识别，且!important的Width优先级高，因此FF理解为Width: 400px，IE6.0理解为Width: 414px，从而显示就相同了。

但是问题出在IE7，IE7.0对!important有了识别能力，但是对盒模型的解析却和IE6.0等一样，从而造成很大的麻烦。也就是说，!important的方法在IE7.0下变得不适用了。

而一般的情况下，border的使用相对较少的，并且border-Width一般较小，因此最主要的问题就出在padding上了。网上很多人总结的经验是：padding要尽量少用，能用margin的，就别用padding。这种说法是消极的，问题的解决不应该总是回避。

5.3.2盒模型bug的简单hack

盒模型的bug的原因就在于“Width与padding/border-Width的同时定义”上，这个问题在CSS代码中一定要注意。而明白了这一点，解决的方法就不难想到了——当子元素的宽度固定时，padding在其父元素中指定的时候，只要添加一个无Width定义的Wrapper层，把原来的一个content层拆分成2个层，分别地，在Wrapper中定义padding和border-Width，然后在content中定义Width：

#Wrapper { padding: 5px; border-Width: 2px; }

#content { margin: 0px; Width: 400px; }

<div>

　　    <div>

　　　    　…

　    　</div>

</div>

这样问题就可以得到解决，FF，IE6.0以及IE7.0都会获得相同的显示效果。更重要的是，没有使用任何CSS hack。

这种解决方法可以说是最终的方案，使用CSS hack的方法只是目前过渡阶段的临时方法。对于网站构造，特别是对于样式比较复杂的网站，个人建议在重要的层快外加上Wrapper层。

但是对于目前现成的模板，可以有选择修改部分样式，分别定义 “Width” 与 “padding或者border-Width” ，或者使用其他方法。

5.4  常见的一些问题

5.4.1 IE捉迷藏问题

IE捉迷藏bug（peek-a-boo），之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。假如清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

图5-2 IE捉迷藏原理图

解决这个bug的方法很多，下面列举一些：

（1）在对页面上的对象使用float浮动之后，最后在下面使用带有clear:both的div对页面进行一些浮动上的清理工作，并且尽量避免对#layout使用background。

（2）假如有可能，可以给#layout使用固定和高度，尽管这样会对页面有所限制，但能消除一些捉迷藏的影响。

（3）可以尝试给#layout和#left使用position:relative。

（4）对#layout使用line-height属性，强制浏览器对其中的内容进行选中调整，从面可以消除捉迷藏bug，例如使用line-height:1.2；就能够使页面运作变得正常。

5.4.2 ul的不同表现

ul是一个很常用的标签，但是因为它在Firefox和IE下的不同表现，让人觉得它是个很难以控制的标签。

　　ul在Firefox下有个padding值， 却没有margin值；而在IE下正好相反，ul有个margin值， 却没有padding值。

　　在Firefox下，ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。

　　通过权衡得到适合两个浏览器的设置：padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;，然后给li添加背景图片，也是很不错的选择。

5.4.3 IE 3px问题

这个问题是ie6浏览器下很常见的一个问题，两个相邻的div层之间会自动留出3px的边距，而在ie6以上的浏览器中缺正常。解决这一bug的方法也很简单，css中控制层浮动即可。

5.4.4 高度不适应

当内层对象的高度发生变化的时候，容器却没有随之变化，这个高度自适应是个典型的CSS hack。一个简单的方法就是设定高度，或在最外层增加一个容器，设定属性height：100%；overfloW：hidden；即可解决。

5.4.5 IE6断头台问题

断头台问题(IE/Win Guillotine bug)是国外的css设计者给这个问题起的一个非常形象的名字，就如同断头台一样，对象被无情的切断了一部分，不过与之相反的是，断头台问题中的对象切断的不是对象的头部，而是对象的底部。

根据我的个人经验，解决这一现象有两个方法，一是定义内部容器高度为自动，即height：auto；给层底部加一个清除浮动层即：<div class=”clear”></div>当然，在css文件中要定义类.clear的属性为 { clear:both;}。

5.4.6容器不扩展问题

这个问题也是十分的常见，许多情况下，外部容器不能够根据子容器的增加而扩展，虽然问题很简单，很多人都会在容器下方加一个清除浮动层，但是这样会增加代码量，我总结的一个比较简单的方法为在层的css中加入属性overfloW:hidden;zoom:1;即可。

6  搜索引擎优化

6.1  什么是搜索引擎优化

6.1.1搜索引擎优化的基本知识

搜索引擎优化，就是常说的SEO，全称“Search Engine Optimization”。它是一种通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎的检索原则并且对用户更友好（Search Engine Friendly），从而更容易被搜索引擎收录及优先排序的网络营销技术。

一个例子，太平洋网(1999年)、中关村在线(1999年)和泡泡网（1998年），三个都是很出名的IT网站。由于百度对搜索结果的人工干预比较强，为公平起见，我选用Google。在Google上搜索“电脑报价”，可以看到太平洋网排第一、中关村在线第二、泡泡网第八。三个网站的内容实力建设差距不大，三个网站的PageRank分别为8、8、7，Alexa排名分别为194、198、606，而另一个后起之秀IT世界网（2004年），其Alexa排名是2561，而关键字排在第三。在这里我想说明的是，通过搜索引擎的优化，即使在建站时间、PageRank和Alexa排名上有一定的劣势，在搜索引擎搜索结果的自然排名中依旧可以占据一席之地。

6.1.2搜索引擎优化的应用

作为搜索引擎优化营销的一种手段，SEO具有以下优点：

    1、成本较低。其排名的前后依靠站长的搜索引擎优化技术，不需要其他的费用。一般企业可以通过雇佣技术员工或者专业的优化公司为之服务。

    2、稳定持久性。只要搜索引擎算法不改变或者没有更强的网站出现，用正规网站优化手法做好了排名的网站，维护得当，搜索引擎优化后排名的稳定性非常强，所在位置数年时间也许都不会变动。

3、不用担心恶意点击。竞价排名需要承担“无效点击”的风险，不管是潜在的客户还是搜索者无意点击，必须要承担费用。

尽管它有如此优点，但是它也有一些不可克服的缺陷:

1、优化持续时间久。网站建设需要的时间很短，但是网站的优化过程

2、不确定性。

3、排名规则的不确定性。

4、热门关键词优化很难。

一个企业的主站，经过优化的完善，可以增加浏览者对网站的信任，进而对企业的信任。企业的产品通过各类专题网站的优化，使用户在搜索关键字的时候，搜索引擎所展示的搜索结果把企业的网站排在前面。

搜索引擎的优化工作主要有站内优化和站外优化。在这里先简单的描述一下优化的工作。站内优化主要是对网站的结构、关键字的分布、页面的结构、网页的加载速度等网站基本元素进行适当的调整，当出现明显的结果的时候，站内优化基本完成；站外优化主要是提交网站地图给搜索引擎、增加外部链接等实现。

搜索引擎优化的工作主要是以用户为中心，围绕提高用户的体验、完善网站的功能，不能为了优化而优化。正如Google站长工具帮助优化建议所言：当你在进行网站优化的时候，不妨问问自己，这对我的用户有帮助吗？如果不存在搜索引擎，我还会这样做吗？

6.2          搜索引擎的工作原理

6.2.1 搜索引擎的主要工作

搜索引擎对页面的收录首先从蜘蛛开始，URL是每个页面的入口地址，”蜘蛛程序”通过这些URL列表抓取到页面的，“蜘蛛”不断的从这些页面中获取URL资源及存储页面，并加入URL列表，如此不断的循环，搜索引擎就可以从互联网中获取到足够的页面。URL是页面的入口，则域名则是网站的入口，搜索引擎就是通过域名进入网站，挖掘URL资源，换而言之搜索引擎在互联网中抓取页面的首要任务就是要有庞大的域名列表，在不断的通过域名，进入网站抓取网站中的页面。蜘蛛程序每隔一定的时间,自动启动并读取网页URL服务器上的URL列表，按深度优先或广度优先算法，抓取各URL所指定的网站，将抓取的网页分配一个唯一文档ID(DocId)，存入文档数据库。一般在存入文档数据库之前进行一定的压缩处理。并将当前页上的所的超连接存入到URL服务器中。在进行抓取的同时，切词器和索引器将已经抓取的网页文档进行切词处理，并按词在网页中出现的位置和频率计算权值，然后将切词结果存入索引数据库。整个抓取工作和索引工作完成后更新整个索引数据库和文档数据库，这样用户就可以查询最新的网页信息。查询器首先对用户输入的信息进行切词处理，并检索出所有包含检索词的记录，通过计算网页权重和级别对查询记录进行排序并进行集合运算，最后从文档数据库中提取各网页的摘要信息反馈给查询用户。

6.2.2 搜索引擎对页面的收录

搜索引擎对页面的收录首先从蜘蛛开始，URL是每个页面的入口地址，”蜘蛛程序”通过这些URL列表抓取到页面的，“蜘蛛”不断的从这些页面中获取URL资源及存储页面，并加入URL列表，如此不断的循环，搜索引擎就可以从互联网中获取到足够的页面。URL是页面的入口，则域名则是网站的入口，搜索引擎就是通过域名进入网站，挖掘URL资源，换而言之搜索引擎在互联网中抓取页面的首要任务就是要有庞大的域名列表，在不断的通过域名，进入网站抓取网站中的页面。蜘蛛程序每隔一定的时间,自动启动并读取网页URL服务器上的URL列表，按深度优先或广度优先算法，抓取各URL所指定的网站，将抓取的网页分配一个唯一文档ID(DocId)，存入文档数据库。一般在存入文档数据库之前进行一定的压缩处理。并将当前页上的所的超连接存入到URL服务器中。在进行抓取的同时，切词器和索引器将已经抓取的网页文档进行切词处理，并按词在网页中出现的位置和频率计算权值，然后将切词结果存入索引数据库。整个抓取工作和索引工作完成后更新整个索引数据库和文档数据库，这样用户就可以查询最新的网页信息。查询器首先对用户输入的信息进行切词处理，并检索出所有包含检索词的记录，通过计算网页权重和级别对查询记录进行排序并进行集合运算，最后从文档数据库中提取各网页的摘要信息反馈给查询用户。

搜索引擎抓取页面的简单流程图：

图6-1 搜索引擎原理图

6.2.1 网页分析和网页排序

搜索引擎首先对存储的原始页面建立索引，过滤原始网页的标签信息，从中提取网页中的正文内容；然后对征文内容进行且此，建立关键字的索引，得到页面与关键字之间的对应关系；最后对所有关键字进行充足，从而建立关键字和页面网址的对应关系。

以下是网页分析、处理的流程图：

图6-2 网页分析处理流程图

用户向搜索引擎提交自己搜索的关键字信息后，搜索引擎根据自己的算法，返回搜索结果，这些结果按照从上到下排列。

6.3  企业网站的具体优化策略

6.3.1 关键字优化

关键字（KeyWord）在不同的领域有不同的含义。在搜索引擎中，关键字就是用户在使用搜索引擎时输入的、能够最大程度概括用户所要查找的信息内容的字或者词，是信息的概括化和集中化，是搜索应用的基础，也是搜索引擎优化的基础。

6.3.2 代码优化

页面代码优化是页面优化的一个重要环节，也是页面优化的基础，但是一直得不到人们的重视，本节着重介绍一下页面代码优化。

页面代码优化就是对网页中的HTML源代码进行必要的调整，以提高页面的友好性。一方面，可以有效精简页面中的冗余代码，加快页面的显示速度，同时也降低页面占用搜索引擎服务器的存储空间，从而提高页面的用户体验及搜索引擎友好性；另一方面，还可以有效突出页面的主题，突出页面的相关性。

代码优化包括精简代码、头部优化、权重标签使用及图片优化。其中精简代码是最基础、最根本的。精简代码又包括清理垃圾代码、HTML标签转换、CSS优化、JS优化及表格优化。

6.3.3 网站结构优化

　网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。

(1)网站结构在决定页面重要性(即页面权重)方面起着非常关键的作用。

(2)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结构可以帮助用户快速获取所需信；相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。

(3)网站结构还直接影响搜索引擎对页面的收录，一个合理的网站结构可以引导搜索引擎从中抓取更多有价值的页面。

网站的逻辑结构是指由页面间的链接关系所决定的结构，逻辑结构反映的是页面间的链接层次关系。在逻辑结构中，我们常用链接深度去衡量页面间的链接层次。

链接深度，指从源页面到达目标页面所经过的路径数。例如：某网站的首页中存在链接指向“页面 A”，则从首页到“页面 A”的链接深度就是 1。

链接深度越小，表示从源页面到达目标页面的路径就越短。与重要页面间的链接深度越小，被搜索引擎抓取的机率就越大。如下图所示，搜索引擎仅需抓取网站的首页并提取其中的链接就可以发现的页面“A1”；而对于页面“C1”，搜索引擎还必须抓取并提取页面“A1”，“B1”的链接后才能发现。

图6-3.网站逻辑结构图

所以网站结构优化是对网站页面的存储方式（即物理结构）及内部链接的关系（即逻辑结构）进行合理的调整，以减少页面的目录深度及重要页面间的链接深度。此外，还有一点非常重要的就是增加重要页面的链接入口，从而提高页面被搜索引擎收录的几率和重要性。

6.3.4 链接策略优化

链接是决定页面权重最主要的因素，分内部链接及外部链接，需要从内部、外部链接的角度出发，考虑到链接对页面权重及相关性的影响，以及合理、有效的增加外链。网站的链接优化是一个非常庞大的体系，在此我就不做一一介绍。