如何用Web标准技术进行页面设计和开发

　　在Web标准出现之前，绝大多数的网页开发都采用表格布局法，Web标准技术的出现是一种技术的进步和更替，以CSS布局为代表的Web标准技术逐步为大家所接受。直到今天，Web标准已经成为网页设计行业的共识，成为Web开发通用的技术标准，传统技术方式受到挑战并逐步被淘汰，Web标准技术成为行业新的标准和开发指南。对新一代的网页设计师、开发者和网站管理者来说，应该开始思考在“漂亮”的页面背后，我们长期忽略并应该关注的东西，包括：

　　网站的成本、易用性、可维护性、SEO以及可访问性。

　　一、使用Web标准技术进行网页设计和开发的好处

　　1.恰当的语义化标记将使你的网站内容更容易被用户和搜索引擎找到。只要将代码从无语义的表格布局转化成结构良好的语义标记，网站就可以提高在搜索引擎结果列表中的位置，提升排名，并提高其他可发现性的指标。可发现性是标准化的重要指标。

　　2.将网站的表现从结构和行为中剥离出来，使你的开发和测试更加容易，也更加便利，可以降低你的总预算，或者让你在网站可用性和内容开发方面的现金投入更宽裕。

　　3.将网站的表现从结构和行为中剥离出来，使你的网站更轻量级，从而提高性能。

　　4.将网站的表现从结构和行为中剥离出来，使用适当的有语义的标记，使你的网站更容易被各种浏览器和不同设备访问，包括移动设备和给残疾人士使用的浏览工具，例如屏幕阅读器和其他输入替代设备，这一点对于政府部门的网站推广公共服务来说尤为重要。使用Web标准设计网站同样有利于提供手机版本，如果你希望推出网站的手机版本，采用标准会使它变得更容易。

　　5.使用Web标准而不是浏览器私有的代码设计网站，更加适应未来的发展。如果你的网站正确采用HTML4.01或者XHTML1.0，并用CSS2布局，将得到各种浏览器的永久支持，即使HTML5、CSS3或者其他新的规范已经确定下来，甚至他们得到将来新的浏览器的支持，你采用现在的Web标准制作的网站仍将完美工作。而非标准的网站则有可能会出现混乱，更严重的情况下网站则将停止工作。

　　二、Web标准的定义

　　Web标准把网页拆分为三个独立组件：结构、表现和行为。

　　1.结构。一种标记语言包含文本数据，并按它的结构（语义）含义进行分类，例如：标题、二级标题、段落、编号列表、定义列表等等。

　　2.表现。表现语言用来为网页提供格式，控制字体、布局、颜色等等。CSS能够代替旧式的HTML表格布局。在任何情况下，CSS都可以替换非标准的Font标签和那些浪费带宽的、过时的垃圾代码。因为表现与结构相分离，所以可以实现改变一部分而不影响另一部分。例如你可以在多个页面使用同样的布局，或者改变文本和链接而不破坏布局。

　　3.行为。一个标准的对象模型与CSS、XHTML等共同工作，使你创建出可以运行在多平台和浏览器上的交互行为和效果，不在需要为特定浏览器编写剧本。

　　三、如何用Web标准技术进行网页设计和开发

　　采用Web标准设计网页我们需要完全分离结构、表现和行为，使用校验正确的、严格或者过渡的XHTML1.0（或者HTML4.01/5）标记；使用校验正确的CSS布局，表格仅仅用在其真正本意上（表格数据的展示等等）；注重结构，没有表现标记用于结构，或者只有少数表现标记还存在；抽象出结构化标记来描述设计元素；可访问性属性和测试；用基于DOM的脚本语言控制行为，如果需要对代码进行分支，对探测对象支持，而不要探测浏览器版本。

　　1.使用现代标记语言进行开发

　　XHTML是当前标记语言的标准，而且它作为Web内容涉及严格的、逻辑的文档结构，并且能够很好的和其他Web标准（例如CSS和DOM）进行协作，还能够很好的与其他现有的、未来的基于XML的语言、应用程序和协议进行交互。XHTML可以帮助去除书写表现层标记的坏习惯，也能帮助避免可访问性问题和在不同厂商浏览器上显示不一致的问题。如果使用结构化的XHTML并且把它所有或者大部分的显示采用CSS控制，你将再也不用担心自己的页面在Firefox和IE上产生差异。

　　未来的HTML5是有史以来Web标记语言首次发生的重大改变。一方面它是第一个由浏览器厂商指定的标记语言，同时也是第一个在Web标准认同时期创造的标记语言。HTML5提供了很多令人兴奋的东西，包括增加丰富的语义性，依附CSS的新元素，更强大的表单控制，更快速的网络应用原型，更强更快的脚本执行等等。

　　2.使用CSS

　　CSS是一种对Web文档添加样式（例如：字体、颜色、间距）的简单机制。CSS是Web标准化布局语言，它可以控制颜色、字体，以及元素、图像的尺寸和布局。尽管CSS精确又强大，但是它手工书写起来很简单。CSS的创始人设计出了一个容易理解、容易学习、容易教授、容易实现、容易维护和容易扩展的Web表现层语言。

　　CSS的好处还在于，对于用户来说，节省了带宽，加速网页加载时间，减少服务器和带宽的费用，节约了资金。对于设计师和开发者来说，一旦掌握以后，就能缩短设计和开发的时间，便于动态原型开发，这使得CSS特别适合敏捷开发和Web应用的设计，缩短更新和维护时间。当文档更新时，人们无须再担心复杂的表格、字体标签以及其他旧式的布局组件，设计师、开发者和代理商无须再担心用户会破坏站点，更重要的是，所有修改能在几分钟内完成，如果文本颜色太暗，只要修改CSS文件里的一到两个规则，整个站点将立刻呈现修改后的效果。另外，使用CSS开发，遵守W3C推荐的Web标准以增强交互性，从标记代码里清楚表现元素以提高访问性。

　　3.关于文字版式

　　进行网页设计时只用两种或三种字体，不要在同一个页面上出现各种各样的字体。根据一个快速引导用户发现的机制来限制色彩的使用。比如，如果红色是未访问过的链接的颜色，那么就不该把这个颜色用到非链接的文字上，也不要再设定一个绿色的未访问过的链接，阅读者很可能被迷惑，从而错过了重要的链接。要设置合适的，阅读舒适的字间距和行间距。当设计多栏页面时，可以使用网格来实现美观和视觉上的连贯和多样化。为鼓励阅读而进行设计，扩大段落之间的距离、摘出引文等等。提供一个熟悉友好的阅读环境，就可以引导视线，顺应思路和帮助理解。

　　4.提高可访问性

　　可访问性是基于标准设计的核心，可访问性设计的目标就是保证站点内容可以被每个人阅读，可以被每个人使用，不管他们用什么设备浏览，不管他们的身体机能怎样。这些人群包括：使用移动设备的用户，他们所占的市场份额正在指数级的增加；残障人士以及暂时有身体损伤的人；有轻微视力问题的人，包括年纪比较大的人；临时使用那些非习惯的环境来访问网站的人等等。提高可访问性对于带有服务性质的政务类网站尤为重要。设计和开发者可以从图片属性、文本大小、文字叙述、颜色、表单设计、表格设计、CSS等细小方面改善可访问性，还要在多个浏览器上测试显示效果，并使用专业工具和插件程序实现可访问性，例如Firefox的Web开发工具条和IE的Web可访问性工具条等等。

　　提高可访问性对于设计师的水平提升亦是有诸多好处的，它可以加深设计师对设计的理解。考虑标签次序这样的问题可以使设计师超越只对表面外观做设计，从而进入用户体验设计、可能性设计和可用性设计的领域。这些都是Web设计师、用户体验设计师、信息架构工程师和可用性专家思考的问题。可访问性是关于如何构建最好的网站来满足不同群体的需求而需要考虑的另一个方面。对可访问性考虑得越多，就将越深刻理解用户体验和预见用户行为。实现可访问性和研究适应性策略同样能提高开发者的技术，为开发者开拓一些原先从来没有考虑过的新视野，在竞争中处于优势，并使站点赢得更多的用户。这是每个网站所有者、设计师或开发者努力的目标。

　　5.基于DOM的脚本语言

　　DOM（文档对象模型）是一个浏览器独立、与平台无关、与语言无关的编程接口，它允许“程序和脚本动态的访问和更新文档中的内容、结构和样式。文档可以进一步处理，处理的结果可以混合回当前的页面”。W3C DOM给予了设计者和开发者一个标准的方法，来把站点的数据、脚本和表现层结合在一起。使用DOM可以创造有创造性的特效、增强可访问性，能提供有力的帮助来构建那些能运行于现代浏览器上的基于标准的软件。

　　Web标准在快速发展，它的思想核心依然是网站可用性，随着更新的设备出现和技术的发展，许多老的Web标准开始淘汰，许多新的规范开始酝酿和发展，例如HTML5、CSS3等，作为设计师和开发者必须要迎头赶上。同时，随着中国互联网应用的普及和发展，万维网联盟W3C也促进了中国企业和开发者参与标准技术的研究和制定。国际大型互联网公司，包括微软、苹果、谷歌等都极力参与到标准的制定和推广中，值得国内的互联网公司重视和借鉴。