网站重构

在开始之前

《网站重构》是为那些希望自己的网站成本变得更低，运行得更好，访问者更多的网页设计师、开发者、网站所有者及管理者写的。如果你希望自己的网站不仅仅能适应目前的浏览器、屏幕阅读器和无线设备，也能适应明天的、明年的甚至更长远的设备，那么这本书正是你所需要的。[1]

由于技术的快速发展，大部分网站已经不可避免地经历了几轮淘汰。每当浏览器版本升级或者新的网络设备和技术出现时，刚完成（或刚支付了建设费用）的网站看起来就已经过时了。

我们的建设仅仅就是为了重新建设。通常，改版并没有增加客户需要的功能或者提高网站的可用性，仅仅是为了跟上新的浏览器和设备，并且预算一定会超出我们的计划和开发周期。

即便偶尔有一个新浏览器或设备的出现没有影响我们的站点的情况，我们采用的“向前兼容”技术（让站点在所有的浏览器版本中的外观和行为均一样）也会迫使我们花费大量人力和财力。

“这些是在Web上做商务必须付出的代价”——我们已经习惯这样，甚至成了标准。但是这样的成本是大多数人不能长期承受的。

费用上升，效益下降

复杂的代码、层层嵌套的表格、<font>标签，以及其他冗余代码使简单的网站需要两至三倍的带宽。网站访问者要花费长时间等待页面的打开，除了少数有毅力和耐心的客户能够等到所有页面打开，大多数人早已因厌倦而离开。这样的网站是难以让人去访问的。

我们支付服务器费用，用以支持一个每次页面浏览为20KB就可以满足需求，却要耗费60KB带宽的网站——我们也要为页面浪费的带宽向ISP提供商支付费用（或者增加我们的IT预算）。我们吸引的访问者越多，所需的成本就越高。为了应付特别的前台设计，我们的数据库不得不支持更多查询，费用也进一步增加。最后，我们被迫购买或者租借额外的服务器来满足需求——不是因为访问者增加，而是臃肿冗余的标记和代码。

创建网站时，我们聘用按小时计价的程序员为网站开发程序，6种版本的方法（不同的版本服务于不同的浏览器和设备的访问者）使成本非常高，以至于用尽所有的钱。这时，一种新浏览器或无线设备又出现了，而我们已经没有钱修改代码，以适应新浏览器和新设备。淘汰的周期重新开始。

大部分人都曾经有这样的吃惊体验：用新浏览器访问一个网站时，被告知浏览该网站需要一个“时髦”浏览器，其实这个“时髦”浏览器已经比我们正在使用的版本旧很多。实际情况是，那个网站的站长或开发者并不愚蠢，也不是不顾及别人，只是他们已经用尽了他们的升级预算，没有更多的钱去维护这个网站。

在另外一些案例中，问题并不是缺少资金，而是缺乏知识，或是投资被误导。Connected Earth，这个口号为“How communication shapes the world”的公司，据报道最近花费了100万英镑（大约160万美元）重新设计了网站。不管在开发上浪费了多少资金，它居然不支持近来多数流行的浏览器，网站拒绝Mozilla（如图1所示）、Netscape 6/7及Opera（如图2所示）浏览器访问，同时也不支持非Windows操作系统，Macintosh的IE用户就更不幸了。

不管网站是因为不断的升级超出预算而荒废，还是因为一开始就采用了过时的标准被淘汰，结果都是一样的：他们损失了潜在的不断增长的用户。总之，不论你花费了100万英镑还是1 000英镑，目的都是欢迎用户来访问，而不是赶走他们。

下面介绍解决方案。

终止网站淘汰的怪圈

现在，由于W3C组织（参见后面的阴影部分）和其他标准组织已经建立起来的技术，以及大部分主流浏览器和设备对标准的支持，使网站的设计及其长久运行变为可能，即便标准和浏览器在不断演化。已经在此行业拼搏奋斗多年的老手可能怀疑这种说法，但本书将展示它是如何实现的。　 

图1

花费了巨额资金，Connected Earth公司网站几乎不支持所有的流行浏览器，它拒绝任何平台上的Mozilla（图中显示的）、Netscape 6/7、Opera浏览器用户，也不支持Mac操作系统的IE用户（www. connected-earth.com）

 

图2

同样的站点，在Windows XP系统中用Opera 7浏览效果。Connected Earth公司的技术问题可能已经通过本书介绍的方法消除了　

本书将教你如何摆脱网站的“建立、废弃、再建立”的怪圈，设计现在和将来的超越桌面系统的网站，不再拒绝潜在用户，不再因为目光短浅的解决方案而浪费日益稀少的时间和金钱。

这不是一本给空谈者或纯理论家的书，而是为那些需要继续工作、不断实践的人们写的。它是专门为创新者和那些寻找明智建议的专业人员而提供的，帮助他们调整自己的技术和思路，继续工作并创造能够吸引越来越多访问者和用户的成功站点。

有了这本书，设计师和开发者将能很快调整他们正在建设的网站，使它能够适应多种浏览器和设备，避免网站因为使用私有标记和代码技术而在未来被淘汰。

阅读本书的网站所有者和管理者将会立刻停止在怪圈上浪费金钱，他们将懂得如何为向后兼容的网站撰写需求文档。

什么是W3C                                                     

W3C（World Wide Web Consortium，http://www.w3.org/）创建于 1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体，它的主任Tim Berners-Lee（http://www.w3.org/People/Berners-Lee/）在1989年发明了Web。W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。

多年以来，W3C把那些没有被部分会员公司（如Netscape和Microsoft）严格执行的规范定义为“推荐”（Recommendations）。自1998年开始，“Web标准组织”（www.webstandards.org）将W3C的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全地支持那些规范（看另外一个阴影部分：什么是“Web标准组织”）。

其他的标准组织包括European Computer Manufacturers Association（ECMA）将ECMAScript定义为“标准JavaScript”。请看第3章“推广标准的困难”了解更详细的资料。

什么是向后兼容

什么是向后兼容？我们认为是：采用正确的方法设计和建设，发布的任何文档可以正确显示在多种浏览器、平台、设备上，并且能继续在未来发明的新浏览器和设备中工作。开放的标准使之成为可能。

最具吸引力的是，用标准来设计和建设网站，可以用更少的生产和维护成本，并使网站的可访问性更完美（说明：更多的客户，更少的成本，提高大众亲和力，减少网站不易用的投诉）。

我们说的Web标准是什么呢？是指结构化的语言（如XHTML和XML），解释性语言（如CSS），对象模型（如W3C DOM）和脚本语言（如ECMAScript），所有这些（甚至更多）都会在本书做解释和说明。

经过委员会专家的推敲，这些技术被精心设计，将最大益处提供给数量众多的Web用户。这些技术的集成应用，已经成为合理的、易用的、稳定的和高价值的网站标志（网站的所有者和管理者：不用担心不懂技术，你可以跳过技术章节，只要确认你的员工或卖主理解这些就可以）。

以上所说的标准兼容的浏览器是哪些呢？我们认为那些能理解和支持XHTML，CSS，ECMAScript，DOM的产品都是，例如：Mozilla，Netscape 6+，MSIE5+/Mac，MSIE6+/Win和Opera 7+。这些浏览器都能完全支持每个标准吗？当然不是，没有任何软件完全没有bug，而且标准本身也复杂，它们互相作用的方式就更复杂了。

不过，主流浏览器足够可靠，所以我们可以抛弃旧方法，并更加灵活地工作，满足更多用户的需求，因为标准已经很自然地被包含在浏览器中，我们能适应那些使用老版本浏览器和设备的人们，当然必须在向后兼容的前提下。

没有规则，没有教条

这不是一本宗教式或教条的书。设计网站没有“最好”的方法，也没有一个绝对正确的方法能将标准融进到你的工作流程中。本书不提倡死板地遵循标准，也许一些特别的网站和任务有变通的方法。本书更不会假惺惺地吹嘘W3C推荐的标准没有任何缺点。

本书将告诉你在IE、Netscape和其他主流浏览器中工作需要知道的特殊细节，并提供应付旧版本浏览器用户的策略，因为也许你的网站浏览者中，就有一位躲在办公室角落使用旧版本浏览器的顽固家伙。

本书不会说谎。有一些私有的方法和捷径比W3C的规范更容易使用。举例来说，IE独有的使用Microsoft捷径的脚本（比如innerhtml）比W3C标准DOM的脚本更快更容易。而从商业角度看，适合所有浏览器的代码比只适应一个浏览器的代码更理性，DOM就是这样的解决方法。

同样，探究结构化标记和XHTML的好处时，我们不会假装说每一个网站、每一个页面、每一个标记都需要结构化。我们也不会告诉你每个网站必须立刻从HTML转换到XHTML——尽管我们希望XHTML的优势迫使你考虑尽快进行转换。

本书的作者因为提倡尽可能用CSS替代传统的HTML表格而闻名。CSS标准为开发者和读者解决了大量问题，CSS设计是未来趋势，并已经被许多网站使用，从大型商业站点，比如wired（www.wired.com）（如图3所示），到搜索引擎（www.alltheweb.com），到公共部门和个人网站。

 

图3

这是大的企业网站，它是用Web标准和XHTML及CSS建立的（www.wired.com）

虽然CSS具有不可否认的优势，但是彻底抛弃表格设计还需要很长时间，表格依然是很多设计工作的方便工具，它能够完成工作，且能够符合标准或向后兼容。这是你的网站，你有权利选择。

在一些纯标准论者的头脑中，流行的专利技术，如Flash和QuickTime将在Web上没有任何地位。这种观点理论上也许正确，但是我们还有工作要做，这些技术如Flash和QuickTime对解决某些问题是最好的工具。除了一些相关的标记和可访问性，本书不会对这类技术讨论更多，并不是因为讨厌Flash和QuickTime，而是因为这些技术超出了本书范围。

你也许会遇到一些Web标准鼓吹者反对你使用GIF格式，他们也可能会指责你用GIF制作标题而不用CSS。通常推荐用XHTML制作标题，这有时还是最好选择，但在实际应用中，一种用nicely kerned字体制作的GIF格式图片也许比用CSS定义的Arial，Verdana或者Georgia字体更适合你的网站访问者。这是你的网站，你有权利选择。

实践，不是理论

我们并不反对那些用激情驱使Web标准创建的纯理论者，相反，我们由衷地赞美和非常庆幸从他们那里获得的帮助和知识。

但这本书是写给正在工作的设计师、开发者、客户和为技术支付费用的雇主的。我们关于Web标准的探讨将立足在设计、内容和出版上，我们的目标是指导你了解整个Web标准体系，并帮助你做决定——做出那些让设计师或者客户能够永远真正受益的决定。

如果说本书有一个教条的、坚决的、僵硬的观点的话，那就是：商业成本普遍偏高，没有一位阅读本书的人能够负担得起用过时的方法设计的网站的高昂费用。

当一些标准刚起草时，守旧的技术有绝对的地位，当时主流浏览器对标准的支持少得可怜，但那些日子一去不复返了。时间推移，在网络繁荣和预算过度膨胀时期达到顶峰的“6种版本代码”的方法曾经看起来是合理的实践，但在今天，一样地逝去了。

现在是XHTML，XML，CSS，ECMAScript和DOM的时代，虽然它们不是最终的技术，但它们组合起来成为一个解决方案，能够解决自从<blink>标记时代以来的困扰所有者和开发者站点的问题。

什么是“Web标准组织”（Web Standards Project）                                                

创立于1998年，Web标准组织帮助终止浏览器战争，说服了Netscape、Microsoft和其他浏览器开发商正确地、完全地支持标准，减少因为开发的复杂性而增加的成本，保证对所有浏览器简单有效的访问。除了浏览器制造商，该团体还与开发工具制造商（如Macromedia）、网站所有者和开发者合作。Web标准组织是一个联合组织，它的活动是完全自愿和非营利的。

这样的旅行真的必需吗

为了使网站避免被淘汰的困境并达到新的水平，设计师和开发者必须学习和使用Web标准。网站所有者和管理者必须清楚标准为什么对他们的业务有帮助。

公布的Web标准并不能说明白它自己，商业用户不太可能去浏览W3C的站点，查看其“字典型”文档，以及直观地领会那些含义模糊的只取首字母的缩写词（如XHTML或CSS）的关系他们利益的技术。同样，忙碌工作的设计师和开发者，总在为进度期限而努力奋斗着，只有很少的时间通过邮件列表和搜索到的易于理解在线教程来学习那些网络新技术。

为了提供一些标准的实际用例，我们不得不写这样一本书。作为Web标准组织的创办人之一，这个工作落到我身上。我的名字是Jeffrey。虽然是我主笔，除了绝对必要，我都以“我们”作为第一人称。这是我从1995年成为一个网站编辑开始就一直采用的，相信读者不会因为我这个习惯而困扰。

虽然你可能宁愿阅读有关图形和动画设计、新的网站架构思想及其可访问性，也不想了解Web基础技术的变化，但是我也宁愿写那些东西。但是如果我们的网站不能在浏览器X或者设备Y中工作，我们最好的设计、结构和可访问性都将被浪费。如果电影规格、镜头、录音技术没有广泛的行业协议，就不会有电影。同样地，Web设计健康的发展依靠Web标准的采用，没有那些标准就没有真正的可访问性和连贯的设计。

在我们接受标准的期间，Web仍然以比任何传统媒体快的速度发展着，但是商业的发展远远快于行业标准，这就把我们建设的网站扔在了一个非常危险的位置，当新的浏览器或者设备出现后网站就不断地荒废。我们仍将忙于建设而没有时间思考我们的工作方法是否正确。今天，若想继续我们的工作和建设，就必须检查和调整我们的方法。

我们所有人都可以采用Web标准建立长久的、漂亮的网站，并且可以在将来仍像今天一样很好地提供服务。在这本书中，我将解释每个标准，以及它们如何一起工作建立一个向后兼容的网站，但具体的工作还是由你自己去做。

 

Jeffrey Zeldman

于纽约市

W3C（World Wide Web Consortium，http://www.w3.org/）创建于 1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体，它的主任Tim Berners-Lee（http://www.w3.org/People/Berners-Lee/）在1989年发明了Web。W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。

多年以来，W3C把那些没有被部分会员公司（如Netscape和Microsoft）严格执行的规范定义为“推荐”（Recommendations）。自1998年开始，“Web标准组织”（www.webstandards.org）将W3C的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全地支持那些规范（看另外一个阴影部分：什么是“Web标准组织”）。

其他的标准组织包括European Computer Manufacturers Association（ECMA）将ECMAScript定义为“标准JavaScript”。请看第3章“推广标准的困难”了解更详细的资料。

什么是向后兼容

什么是向后兼容？我们认为是：采用正确的方法设计和建设，发布的任何文档可以正确显示在多种浏览器、平台、设备上，并且能继续在未来发明的新浏览器和设备中工作。开放的标准使之成为可能。

最具吸引力的是，用标准来设计和建设网站，可以用更少的生产和维护成本，并使网站的可访问性更完美（说明：更多的客户，更少的成本，提高大众亲和力，减少网站不易用的投诉）。

我们说的Web标准是什么呢？是指结构化的语言（如XHTML和XML），解释性语言（如CSS），对象模型（如W3C DOM）和脚本语言（如ECMAScript），所有这些（甚至更多）都会在本书做解释和说明。

经过委员会专家的推敲，这些技术被精心设计，将最大益处提供给数量众多的Web用户。这些技术的集成应用，已经成为合理的、易用的、稳定的和高价值的网站标志（网站的所有者和管理者：不用担心不懂技术，你可以跳过技术章节，只要确认你的员工或卖主理解这些就可以）。

以上所说的标准兼容的浏览器是哪些呢？我们认为那些能理解和支持XHTML，CSS，ECMAScript，DOM的产品都是，例如：Mozilla，Netscape 6+，MSIE5+/Mac，MSIE6+/Win和Opera 7+。这些浏览器都能完全支持每个标准吗？当然不是，没有任何软件完全没有bug，而且标准本身也复杂，它们互相作用的方式就更复杂了。

不过，主流浏览器足够可靠，所以我们可以抛弃旧方法，并更加灵活地工作，满足更多用户的需求，因为标准已经很自然地被包含在浏览器中，我们能适应那些使用老版本浏览器和设备的人们，当然必须在向后兼容的前提下。

没有规则，没有教条

这不是一本宗教式或教条的书。设计网站没有“最好”的方法，也没有一个绝对正确的方法能将标准融进到你的工作流程中。本书不提倡死板地遵循标准，也许一些特别的网站和任务有变通的方法。本书更不会假惺惺地吹嘘W3C推荐的标准没有任何缺点。

本书将告诉你在IE、Netscape和其他主流浏览器中工作需要知道的特殊细节，并提供应付旧版本浏览器用户的策略，因为也许你的网站浏览者中，就有一位躲在办公室角落使用旧版本浏览器的顽固家伙。

本书不会说谎。有一些私有的方法和捷径比W3C的规范更容易使用。举例来说，IE独有的使用Microsoft捷径的脚本（比如innerhtml）比W3C标准DOM的脚本更快更容易。而从商业角度看，适合所有浏览器的代码比只适应一个浏览器的代码更理性，DOM就是这样的解决方法。

同样，探究结构化标记和XHTML的好处时，我们不会假装说每一个网站、每一个页面、每一个标记都需要结构化。我们也不会告诉你每个网站必须立刻从HTML转换到XHTML——尽管我们希望XHTML的优势迫使你考虑尽快进行转换。

本书的作者因为提倡尽可能用CSS替代传统的HTML表格而闻名。CSS标准为开发者和读者解决了大量问题，CSS设计是未来趋势，并已经被许多网站使用，从大型商业站点，比如wired（www.wired.com）（如图3所示），到搜索引擎（www.alltheweb.com），到公共部门和个人网站。

 

图3

这是大的企业网站，它是用Web标准和XHTML及CSS建立的（www.wired.com）

虽然CSS具有不可否认的优势，但是彻底抛弃表格设计还需要很长时间，表格依然是很多设计工作的方便工具，它能够完成工作，且能够符合标准或向后兼容。这是你的网站，你有权利选择。

在一些纯标准论者的头脑中，流行的专利技术，如Flash和QuickTime将在Web上没有任何地位。这种观点理论上也许正确，但是我们还有工作要做，这些技术如Flash和QuickTime对解决某些问题是最好的工具。除了一些相关的标记和可访问性，本书不会对这类技术讨论更多，并不是因为讨厌Flash和QuickTime，而是因为这些技术超出了本书范围。

你也许会遇到一些Web标准鼓吹者反对你使用GIF格式，他们也可能会指责你用GIF制作标题而不用CSS。通常推荐用XHTML制作标题，这有时还是最好选择，但在实际应用中，一种用nicely kerned字体制作的GIF格式图片也许比用CSS定义的Arial，Verdana或者Georgia字体更适合你的网站访问者。这是你的网站，你有权利选择。

实践，不是理论

我们并不反对那些用激情驱使Web标准创建的纯理论者，相反，我们由衷地赞美和非常庆幸从他们那里获得的帮助和知识。

但这本书是写给正在工作的设计师、开发者、客户和为技术支付费用的雇主的。我们关于Web标准的探讨将立足在设计、内容和出版上，我们的目标是指导你了解整个Web标准体系，并帮助你做决定——做出那些让设计师或者客户能够永远真正受益的决定。

如果说本书有一个教条的、坚决的、僵硬的观点的话，那就是：商业成本普遍偏高，没有一位阅读本书的人能够负担得起用过时的方法设计的网站的高昂费用。

当一些标准刚起草时，守旧的技术有绝对的地位，当时主流浏览器对标准的支持少得可怜，但那些日子一去不复返了。时间推移，在网络繁荣和预算过度膨胀时期达到顶峰的“6种版本代码”的方法曾经看起来是合理的实践，但在今天，一样地逝去了。

现在是XHTML，XML，CSS，ECMAScript和DOM的时代，虽然它们不是最终的技术，但它们组合起来成为一个解决方案，能够解决自从<blink>标记时代以来的困扰所有者和开发者站点的问题。

什么是“Web标准组织”（Web Standards Project）                                                

创立于1998年，Web标准组织帮助终止浏览器战争，说服了Netscape、Microsoft和其他浏览器开发商正确地、完全地支持标准，减少因为开发的复杂性而增加的成本，保证对所有浏览器简单有效的访问。除了浏览器制造商，该团体还与开发工具制造商（如Macromedia）、网站所有者和开发者合作。Web标准组织是一个联合组织，它的活动是完全自愿和非营利的。

这样的旅行真的必需吗

为了使网站避免被淘汰的困境并达到新的水平，设计师和开发者必须学习和使用Web标准。网站所有者和管理者必须清楚标准为什么对他们的业务有帮助。

公布的Web标准并不能说明白它自己，商业用户不太可能去浏览W3C的站点，查看其“字典型”文档，以及直观地领会那些含义模糊的只取首字母的缩写词（如XHTML或CSS）的关系他们利益的技术。同样，忙碌工作的设计师和开发者，总在为进度期限而努力奋斗着，只有很少的时间通过邮件列表和搜索到的易于理解在线教程来学习那些网络新技术。

为了提供一些标准的实际用例，我们不得不写这样一本书。作为Web标准组织的创办人之一，这个工作落到我身上。我的名字是Jeffrey。虽然是我主笔，除了绝对必要，我都以“我们”作为第一人称。这是我从1995年成为一个网站编辑开始就一直采用的，相信读者不会因为我这个习惯而困扰。

虽然你可能宁愿阅读有关图形和动画设计、新的网站架构思想及其可访问性，也不想了解Web基础技术的变化，但是我也宁愿写那些东西。但是如果我们的网站不能在浏览器X或者设备Y中工作，我们最好的设计、结构和可访问性都将被浪费。如果电影规格、镜头、录音技术没有广泛的行业协议，就不会有电影。同样地，Web设计健康的发展依靠Web标准的采用，没有那些标准就没有真正的可访问性和连贯的设计。

在我们接受标准的期间，Web仍然以比任何传统媒体快的速度发展着，但是商业的发展远远快于行业标准，这就把我们建设的网站扔在了一个非常危险的位置，当新的浏览器或者设备出现后网站就不断地荒废。我们仍将忙于建设而没有时间思考我们的工作方法是否正确。今天，若想继续我们的工作和建设，就必须检查和调整我们的方法。

我们所有人都可以采用Web标准建立长久的、漂亮的网站，并且可以在将来仍像今天一样很好地提供服务。在这本书中，我将解释每个标准，以及它们如何一起工作建立一个向后兼容的网站，但具体的工作还是由你自己去做。

 

Jeffrey Zeldman

于纽约市