《Designing with Web Standards》学习笔记

<Designing with Web Standards>学习笔记

终于看完了《Designing with Web Standards》这本被尊称为web领域最鸟的书之一。我想 之所以鸟，并不是因为它所描述的技术有多么高深，而是它对推动web标准化所作出的贡献。对它的中文名《网站重构》并不是很认同，因为它并没有突出标准化这两个本书的核心词，或许翻译者的意思应该是“以标准化重构网站”吧。

总结了一些心得和体会，共享之。

Web标准化

标准化的必要性

在没有标准的年代，绝大多数网站都出现了费用上升，效益下降的状况。随着新版本浏览器的出现，网站遭遇淘汰，需要构建新的适应新一代浏览器要求的网站。并且，网站要有多个版本，来满足不同浏览器的要求，来满足仍旧在使用旧版本浏览器的用户。

这些都是因为没有规则，没有教条所产生的问题。为了降低网站制作的费用，为了能让一个网站版本就可以在所有的浏览器上正确运行，为了让网站不再为出现的一个又一个新版本的浏览器而花费巨资重建网站， Web 标准应运而生。

这些看起来可爱，却有着丑陋代码；看起来时髦，却用着古老方法的网站，正在向 web 标准过渡。

Web 标准是真正向后兼容的，又能在很大程度上做到向前兼容，一劳永逸的别无选择。

Web 标准通过把网页分成三个独立组成部分来解决这些问题： Structure, Presentation and Behavior 。来实现这个分类的内容有，结构化的语言（如 XHTML 和 XML ），解释性语言（如 CSS ），对象模型（如 W3C DOM ）和脚本语言（如 ECMAScript ）。 ( 当然，你也可以创建一个完全基于 flash 的网站 )

如果把一个网站比喻成一部电影，那么结构就是它的编剧，决定了这部电影的各基本架构；表现就是艺术导演，决定了一个网站的分布、外表；脚本语言提供特效处理；而对象模型则就是整部电影的导演了。

或许在不久的将来，网页的结构会完全基于 XML ，但现在我们强迫自己先去使用 XHTML ，一种 W3C 推荐的，过渡期的置标语言。置标语言包含的格式化的文本数据，用于创建网页的结构：标题、副标题、段落、数字列表、定义列表等。我们要尽量将结构从表现和行为中分离，比如表格（ table ）只用于做它原始的目的：表现一个表格数据，类似电子表格、地址簿等；强调结构，在标记中没有表现的处理或者尽量少用表现处理。总之，根据元素的含义来使用元素，而不是因为它们看起来像什么。
    表现语言（ CSS1,CSS2 ）用来格式化网页、控制字体、布局、颜色等等。表现应该决定于 CSS ，而不是标记，其实 CSS 发明者并没有为任何元素假设显示方式，但浏览器作了大量的假设。我们在制作网站的时候，就应该在观念里不要把标记跟显示联系在一起。标记就是标记，只是代表一个结构。

标准的对象模型 DOM 使你可以创建出运行在多平台和浏览器上的交互行为和效果，不再需要为各不同浏览器创建不同版本。

 

附：各标准组织介绍

W3C ： World Wide Web Consortium, http://www.w3.org 。一个研究 Web 规范和指导方针，致力于推动 web 发展，保证各种 web 技术能很好协同工作的组织。

Web 标准组织： www.webstandards.org

ECMA ：将 ECMAScript 定义为“标准 JavaScript ”。

 

XML

     XML 是自 HTML 以来最成功的 web 标准。 XML 是一种可以包含一切的数据格式，已经被广发应用并且适用于复杂需求。在当今数据驱动的时代，私有格式的数据将被淘汰。 XML 拉平了技术门槛，并且任何人都可以参与。

  在介绍 XML 之前，先来介绍一下 HTML ，以区分它们的不同。 HTML 是构架 web 页面的一种基本语言，它由一些固定数量的标记和看起来有些矛盾的规则组成。在 HTML 中，你可以随意使用或者不使用某些标记，组合或者不组合其它标记。但这个松散的随意性，恰恰使构建一个 web 页面变得很容易。

  但在今天，经过长期成长的网站，需要频繁的通过发布工具重新组装页面，经常需要将内容从数据库发布至 web 页面或者无线设备。但 HTML 缺乏这种统一的规则，从而阻碍了数据的转化。我们很容易把文本转化成 HTML ，但是很难把标记在 HTML 文件中的数据转换成我们需要的其他文件格式。利用 XML ，我们就可以做到对标记进行编码，使得任何支持 XML 的环境都能理解我们的 XML 文档。

  XML 是一种能创造其它语言的语言。 XSLT ， RDF ， RSS 等等这些应用都基于 XML ，能被 XML 解析器理解，并且每个应用可以很容易和其他应用进行数据交换。 XML 不仅可以保存数据，还可以保存数据的数据（元数据）。

 

 

设计与构造

这个部分详细地介绍了建设标准化网站的各种方法， XHTML 、 CSS 、基于 DOM 的脚本语言，以及在使用这些方法时为了向前兼容所采取的一些折中方法。

 

XHTML

XHTML 是一个用 XML 语法对 HTML 重新阐释的语言， XHTML 是一种基于 XML 的置标语言，并且看起来和 HTML 有些相像。

用 XML 来重新阐述 HTML 的一个重要原因是， XHTML 是一致的，而 HTML 则不具备这个特性。在 HTML 中，有些标签从来没有结束标签，而有些必须要有。

但这些都不是最主要的原因，最主要的原因是：用基于 XML 的语言开发页面，站点就会很好地和其他基于 XML 的语言、应用程序和协议进行交互。在没有实现使 XML 数据服务于大多数 Web 浏览器之前， XHTML 是种很好的桥接技术。在目前， XHTML1.0 是过渡的最好选择，而过渡到更高版本则需要更多的工作，也没有这个必要。

XHTML 有更多更苛刻的不同于 HTML 的要求。这里就不再赘述。

 

附： W3C 校验服务

CSS 校验服务： http://jigsaw.w3.org/css-validator

标记语言校验服务： http://www.htmlhelp.com/tools/validator

 

DIV 流

    DIV 是什么， W3C 对它的解释是“一个增加结构的通用机制”。用 division 来解释 div 最恰当不过， div 是一个块，它可以是一组链接，可以是一块文档，也可以是页面底部的法律声明块。

在初期接触所谓标准化编码的时候，经常会出现这个错误的概念：结构化就是 Div 流，就是用 div 来替代 table 。其实不是 div 代替 table ，而是用结构化的方式来代替表格式布局。

其实标准化就是：该用什么的时候用什么。我们要提倡从 table 到 div 的转变，但也要防止出现 Divitis ，该用什么的时候才用什么，用什么取决于结构的含义，就好比标题用 h ，段落用 p ，表格用 table ，而不是用 <div class= “ headline ” > 来替代 <h1> 。

 

 

CSS

W3C 把 CSS 定义为“一种对 web 文档添加样式的简单机制”。

学会正确使用即可以。其中注意 CSS 的盒模型并不符合我们的通常理解。盒模型的四个区域包括：内容，边框距，边界和边距。其中 CSS 的 width 并不是整个盒的 width ，而是内容的 width 。或许在 CSS3 里会有一个“盒尺寸设置属性”。

某些版本的 IE 中有很多 bug ，比如 IE5.X 以及旧版本错误地理解了盒模型。我们总可以通过一些巧妙的办法，使表现设计在这些浏览器上也正常显示。

 

 

DOM

     什么是 DOM ？ DOM 是一种与浏览器无关的，平台、语言中性的接口，能够允许“程序和脚本动态地访问和更新文档的内容、结构和样式”。

DOM 驱动的交互会替服务器减轻一部分它所要进行的繁重的处理。在客户端，你就可以轻松地进行很多操作，比如排序等等。

有了 DOM ，我们就可以利用基于 DOM 的脚本语言，比如 JavaScript 创建丰富的交互功能。

 

 

标准化学习过程

　　 　 www.zeldman.com , www.alistpart.com 等等这些完全标准或者标准过渡型网站，都是我们学习的榜样。对它们代码的阅读，有利于建立什么是标准的概念，并学习到在标准化的规范下建立优等网站的技巧。