| |
第五章：在21分钟内学会撰写HTML |
报纸上曾经有过一个关于一个10岁大孩子的特别报道。 这个孩子患有精神病的母亲不仅不肯吃药，而且还痛打他。他想和父亲住在一起，但是法官不愿意改变以前的监护权的判决。所以这个10岁大的孩子为自己建立网站，恳求人们向法官呼吁改变判决。
每当有人请我帮助他们建立静态网站时，我就告诉他这个故事：“这个被虐待的10岁孩子都能够为自己建立网站，你也一定行的。”
如果他仍坚持说自己不行，我就会告诉他，到网上找一个喜欢的网页，在Netscape选择“另存为
...”将其保存在自己的硬盘上，再按照自己的需要把里面的文字做一下修改即可。到目前为止，我还没有发现有谁无法在21分钟之内为自己做一个简单的网页呢。“
我们其中一位网络管理员”
这是一个激动人心的时刻，我被介绍给了一个世界上有能力修改网络标准中一切不合理的计算机巨人。我确信Dertouzos一定会向其介绍我是一个多么富有天赋的计算机奇才。他打算在演讲里介绍我很早以前就已经提出的在HTML文本中使用语义标记的想法，介绍我早已在因特网上实现的医疗数据库记录共享的工作，介绍我那早已在无数网站得以使用得协作系统。
“
这位是Philip Greenspun，”实验室主任说道，“我们其中一位网络管理员。”没错，只是网络管理员。
不管怎么说，网络管理员的一部分工作就是帮助新的用户设计网页。所以，本着这个目的，我要给大家一个5分钟学会HTML的指南。
也许你已经挣了100万美圆
当然，也许没有。但是你至少知道怎样写HTML：
My Samoyed is really hairy.
这就是一个很好的HTML的文档。在一个文字编辑器里输入上面的句子，存成index.html，然后上载到你的网络服务器上。只要服务器工作正常，别人就能够通过浏览器看到，搜索引擎也会对它做索引。
假如想要强调什么，比如想把单词“really”显示为斜体，那么只要做以下的修改：
My Samoyed is <I>really</I> hairy.
HTML的意思是超文本标记语言（Hypertext Markup Language）。 “<I>”就是标记。 它告诉浏览器，后面的单词用斜体显示。“</I>”标记表示结束斜体显示。如果想显示的更加美观，可以告诉浏览器“强调”单词really：
My Samoyed is <EM>really</EM> hairy.
大多数的浏览器用斜体表示强调，但是也有一部分使用黑体，一些运行在ASCII终端上的浏览器（比如Lynx）将忽略掉这些标记，或是采用别的方法。挑剔的用户甚至可以在某些浏览器上定制特殊的显示方法。
在HTML中，有几十种标记。看到一个你觉得格式很漂亮的网页，就选择“看原代码”观察它是怎么编辑的，这样来学习怎样使用标记即快又方便。我就是这样学习标记的。在
http://www.photo.net/wtr/ 有连往简单易学的在线HTML教材的链接。或者可以买一本《HTML：终极指南》(Musciano and Kennedy，O'Reilly1997年出版)。文件结构
另一个必须注意的结构的问题是，所有的开始和结束的标记必须一一对应。所以在前面用了<BODY>，在文档的末尾必须有</BODY>。如果在你的HTML文档里有一个<TABLE>，而没有</TABLE>与之对应，Netscape Navigator将会什么都不显示。标记可以嵌套，但是不可以交叉，比如把某个词既显示黑体，又显示成斜体：
My Samoyed is <B><I>really</I></B> hairy.
令众多新手们感到困惑的一件事，表示一段开始的<P>，居然可以没有</P>与之相对应。浏览器通常认为一个<P>的开始，就是上一个<P>标记的结束。这使得很多的网络出版者（包括又懒又笨的我）把<P>当作段落之间的分割物。
我的网页通常是以下面的格式开头：
<html>
<head>
<title>New Doc</title>
</head>
<body bgcolor=white text=black>
<h2>New Doc</h2>
by <a href="http://www.photo.net/philg/">Philip Greenspun</a>
<hr>
introductory text
<h3>First Subhead</h3>
more text
<p>
yet more text
<h3>Second subhead</h3>
concluding text
<hr>
<a href="mailto:philg@mit.edu">
<address>philg@mit.edu</address>
</a>
</body>
</html>
让我们一段一段仔细来分析一下，看看浏览器究竟是如何来显示它的。
最上面的<HTML>告诉浏览器“我是一个HTML文件”。在最底部有一个与之对应的结束标记。其实这个结束标记也不是必需的。把这个文件存为“basic.html”。当用户访问这个文件的时候，网络服务器发现该文件的扩展名是“.html”，就会在这个文件前面加一个
MIME头，告诉用户的浏览器这个文件的类型是“text/html”。在文件里我使用了<HEAD>标记，目的是为了可以合理的使用<TITLE>为整个文件加一个题目。置于<TITLE>和</TITLE>标记之间的任何文字都会被显示在netscape浏览器的最顶端的状态栏里，在Go菜单里，或是在bookmarks栏里，如果这个用户把这个页面做了bookmark的话。在</HEAD>标记了头的结束之后，<BODY>标记表明了正文的开始，在标记里有两个人工设定的参数，分别将背景设定为白色，文字设为黑色。之所以这样做的原因是有些浏览器的缺省的背景设置是灰色，这样会减少文字和背景之间的对比度。盖写缺省值是和我一贯的网页编辑原则相违,容易导致用户浏览过程失诸谐和。但是，我也不认为这样做是不合适的，因为(1)毕竟很多的浏览器是采用白色为缺省背景的(2)也有很多网络出版者将背景设置为白色，我这样做也不是特例(3)对用户界面的影响还不及人工设定超链接的颜色来得大。
在正文的最开始，有一个用<H2>标记包裹着的，2号字的标题，显示在页面的最顶端。也许我该用<H1>标记，但是浏览器通常会把这种标记的字显示的比我那自大的灵魂还要大。在标题下面，一般我会写“Philip Greenspun著”或是其他一些表明作者的文字，也许还有通向全文的超链接。“Philip Greenspun”这几个字还包含了一个超链接，这就是为什么它要写在A标记的里面的缘故。<A HREF= 标记表明这是一个超链接。如果读者点击了在</A>之前的任何文字，浏览器都会把他们带向http://www.photo.net/philg/。
在标题，作者，和可选择的超链接之后，我放了一个水平线标记<HR>。我希望可以说我能够从Dave Siegel那里学到的最好的技巧是怎么样通过热门网站去骚扰女孩子（请看
http://www.photo.net/wtr/getting-dates.html）。但是，到头来最有实用价值的一条准则却是不要在网页上乱用横线：真正的图象设计师是用空白来表示间隔的。一般我用<H3>的标题在文字之间表示间隔，只在文档的最底端再用另一条<HR>横线。在最底端的<HR>下面，我用“philg@mit.edu”作为我的署名（从1979年以来我的这个电子邮件的地址就一直没有变过）。一般位于<ADDRESS>之间的文字总是被显示为斜体。每一个网页都应该有一个类似的署名。当用户读完整个网页的时候，很自然的希望知道刚才所读文章的作者是谁。如果用户点击中了用<ADDRESS>标记标示的我电子邮件的地址，浏览器就会弹出一个“发邮件给philg@mit.edu”的窗口。写上电邮地址，却不加上“mailto”标记，是如何都说不过去的。
给你的网页加点色彩
如果既想把时间更多的花在网页的内容上，又不愿放弃对页面格式的要求，那么你可以考虑设定一个遍用于整个网站的级联式页面。下面是本书网络版采用的一个(http://www.photo.net/wtr/thebook/ ):
P { margin-top: 0pt; text-indent : 0.2in } P.stb { margin-top: 12pt } P.mtb { margin-top: 24pt; text-indent : 0in} P.ltb { margin-top: 36pt; text-indent : 0in} p.marginnote { background-color: #E0E0E0 } p.paperonly { background-color: #E0E0E0 } li.separate { margin-top: 12pt }
上面文件的每一行都给出了一个新HTML标记，或一个子标记的定义。第一行的要求浏览器不要以空白行来间隔段落，但是在每一段的开始缩进0.2英寸（曾尝试过缩进3个字的宽度，但是效果不好）。现在网页看上去就和通常所见的书籍和杂志差不多了。虽然有时书籍和报纸也会采用留白来表示间隔，但是大多数是用来突出段落主题的，因此我们也有必要定义3种主题间隔的显示方式。“stb”（小主题间隔）将会增加12个点的宽度
--一个被标记“stb”的段落不仅会象一般被P标记那样缩进0.2英寸，而且还要增加12个点的宽度。至于中，大主题间隔，我在通常缩进的基础上再增加不同的点数的空白。怎么样使用这样式呢？我把这些样式的定义存放在扩展名为“.css”的文件中。然后修改网站服务器设置，把MIME-type修改为“text/css”。就我来说，我一般把这些样式文件存放在网站我的目录的最高一层，因为我打算把所有文档都采用这些格式。在每一个使用样式的文件中，在文件头里，TITLE标记的上方，我都添加了下面的一行：
<LINK REL=STYLESHEET HREF="/philg.css" TYPE="text/css">
注意到在HREF之前有一个“/”，用户的浏览器会在显示页面内容之前，重新产生一个超链接“http://www.photo.net/philg.css”到我的服务器读取格式文件。这样的一个过程会稍稍降低用户浏览的速度，然而我所有的页面格式都是一样的，用户的浏览器可以存储并再用这个格式
--如果你用的是Netscape Navigator 4.0在线的浏览这本书的全部17章，浏览只会要求下载philg.css文件一次。好了，至此为止浏览器不仅知道了格式文件在服务器上的位置，而且还知道小主题间隔显示时的要求。但是怎么让浏览器知道哪一段文字是要用小主题间隔显示，而不是用“<P>”呢？我们用
<P CLASS="stb">
标记在需要采用新格式的文字的前面。
书的边注，脚注，还有正文里的一些标注都可以被出版者设计得很漂亮。但是，为了简单起见，我只定义了几种标注的样式，比如增加一个灰色的背景（“p.marginnote { background-color: #E0E0E0 }”）。 这会让用户意识到注释并不属于正文。
我最后定义的子类（“li.separate { margin-top: 12pt }”）是要在列表的各个项之间增加一些空白。在Internet Explorer 4.0下它工作的很好，但是在Netscape Navigator 4.0下却不行，于是我放弃了这个定义（取而代之的是两个连着的<BR>）。
要想了解所有关于版面样式的指令，可以参见《HTML：定义指南》，或者在线的浏览我写的参考
http://www.photo.net/wtr/。知道怎么编写HTML了，等一等！
“由于对国家防务的忽略以及近5年来在处理与德国关系上的失误，我们不得不在?战争?抑或?耻辱?中做一个无奈的选择。我的感觉告诉我，我们将会选择后者，让战争稍后才以比目前更凶险的面目扑过来”
-- 引自1938年温斯顿。丘吉尔给Moyne伯爵的信（《丘吉尔：一种生活》， Gilbert出版社 1991）
HTML是集了两个可能性的最坏元素于一身。我们本可以拿一个现成的格式化的语言，加入一些超文本的标记，让用户们在自己的计算机上看到设计精美的网页。我们也可以设计一种功能强大的文本结构描述语言，使得浏览器可以智能的，自动的对网络页面进行处理。但是，实际上我们所见到的却是一团糟：面目丑陋，既无格式又无结构说明的文档。
万维网始终会演变到最无知的用户所渴望的样子。你请计算机为你找一条在万维网上兜售的最便宜的兰色牛仔裤，10秒钟之后，荧光屏上出现了一条牛仔裤的照片，并且问你要不要买下。你看到一个演唱会的公告，只要在浏览器里点击一个键，就可以自动的把有关的信息加入到你的日程计划中。更加强大的格式也离我们不远了。最终我们将拥有任何浏览器都会无误显示小说读本的方法。
但是除非HTML发生革命性的变化，否则上面的情况决不可能发生。我们必须采用一些可以让计算机明白的有语义的标记，凭借它们，网络出版者可以告诉浏览器“这个网页出售牛仔裤”，或是“这些牛仔裤仅售25美圆”之类的信息。不管我们是否需要，每一个新推出的浏览器版本，必然会伴随着一些新HTML标记。（至今为止仍没有在照片或是图片上添加说明的功能，真是令人沮丧。其实这只是在60年代字处理软件中一个很普通的功能。）
回到1994年，在那时，我天真的以为学术会议真的是一种推广想法的最有效的途径。我写了一篇题为“因为我们的愚蠢，未来必然是一片混乱”的论文（
http://www.photo.net/philg/research/shame-and-war.html）。在那篇文章里，我提出了一个在HTML文档里添加语义标记的设计，目的是为了兼容旧版本的浏览器（比如，NCSA Mosaic）。并且我还建议把普通的文本分为几类，比如“广告”、“小说”、“日报”等等，只要让程序员编写一些简单的程序，就能够简化编者的工作，而且方便读者阅读。兴许是因为我的主意太有创造力，太具有革命性，太高瞻远瞩的缘故，在那个学术会议上没有人感兴趣。但是这个关于在文本里添加语义标记的主意其实早就被人实践过。Charles Goldfarb、Raymond Lorie、和Edward Mosher曾经在1969年他们的“广义标记语言”（Generalized Markup Language (GML)）里做过尝试。在他们公司的90%的产品文档采用了这个标记语言。也许是这只是一个小公司，没有哪个网络标准的专家会注意到。哦，对了，忘了说了，那个公司的名字叫“IBM”。
美国国家标准学会（The American National Standards Institute (ANSI) ）在1980年首次出版了“标准广义标记语言”初稿（ Standard Generalized Markup Language (SGML)）。只有很少的小组织，例如美国国防部（United States Department of Defense）、税务局（Internal Revenue Service）、以及证券交易公署（Securities and Exchange Commission），开始采用这种带有语义标记的新标记语言。
奇怪的是，HTML居然只抄袭了SGML的最无聊的部分
--语法标记：<element> ... stuff being marked up ... </element>
但是却没有把SGML最有意义的部分
--语义标记或是文本类型的定义，继承下来。作为一个网络用户和网络出版者，我很自然地认为那些制定网络标准的人，应该能够意识到语义标记和文档的自动处理对用户来说是多么的重要。但是社会学大师韦伯的学生就不会对我的论文被遗弃，或是语义标记的想法被人忽略达6年之久表示惊讶。制定网络标准和参加网络研讨会的人都不是热衷于网络出版和冲浪而参加工作的。他们喜欢坐在会议室里，喜欢高谈阔论，喜欢不远万里地参加各种会议，因为费用由公司支付(奇怪的是，居然没有人指出，那些所谓的因特网专家宁愿不辞劳苦地在世界各地飞来飞去的参加会议，也不愿采用网上视频会议系统来协同合作，是多么的荒唐)。 真正热衷网上出版的人在忙于建设在线杂志，增加服务，而真正热衷网上冲浪的人则正呆在家里拥着他的调制解调器。
从我写“愚蠢和混乱”一文到现在已经过去4年了，情况有没有改进呢？说有也有，说没有也没有。扩展标记语言(XML)要成为万维网联盟（World Wide Web Consortium (W3C)）的标准。XML既满足了对语义标记的需求，同时又不强求出版者必须接受一整套预设的XML标记。XML的使用者可以按其各自的范畴所需设定适用的文件类别与相应的标记。Microsoft和Netscape都已同意支持XML。并且也陆续出现了一些服务器端的工具，籍以解释XML文本，由数据库里的数据生成XML，将XML转化为HTML，或者是编辑XML。
如果你打算发送的是结构化的数据，HTML和XML那一个会更好些？两者都不会。XML允许存储和交换结构化的数据，但是这并不意味着它可以取代数据库管理系统。有了XML，你可以在文件系统中保存一张出售商品的清单，通过程序轻而易举的读出每件商品的价格，但是你还是没有办法建立索引，或是快速搜索到指定颜色、大小的商品。你可以利用XML记录所剩商品的数目，但是当用户下了一份定单之后，你却无法用XML发出指令更新，更无法协调并行的更新指令。 一个XML文件就象是数据库管理系统中的一条记录。因此，要把数据从一个数据库转移到另一个数据库的时候，XML可以用上，但是它并不能帮助你构建整个的数据库。
如果我出版的是结构化很强的信息，我会把他们存放在数据库里，然后通过程序读取并即时地生成HTML或是XML页面。那样，我可以免去因语言标准或是出版需要的改变而必须更改上千的XML和HTML文件之苦了。“数据库”？是否意味着是后面几章需要讨论的庞大的数据库管理系统？其实不然，如果不需要实时改变数据的话，一个普通的字符文件就可以胜任。
比如你打算把公司的电话簿放到网站上，首先可以定义以下的文件结构：
每个人的资料占用一行，每个字段之间用竖线隔开。如果是MIT，这个通讯簿应该是类似下面的样子：
Philip|Greenspun|eecs|253-8574|864-6832|ne43-414 Rajeev|Surati|athletics|253-8581|555-1212|dupont gym ...
不用一个小时，你一定可以写出一个简单的程序，从这个文件里读取信息，然后可以
如果打算添加新的服务，你不必徒手更新网页，只需要稍微改动一下程序就行。
当XML浪潮到来，通讯簿的XML文件已然出现，你立即就可以生成XML文本，下载了这文本的用户还可以让计算机自动拨号，因为文本里的电话号码可以籍VOICE_PHONE_NUMBER元素立即辨认出来。
这里需要强调的是，先要将出版信息的结构考虑清楚，然后考虑如何在这种结构上累积数据资源，并妥善维护等等。最后再花点时间去设计最终的HTML和XML页面上。
简单的页面乱不到哪里去
光盘驱动器速度越来越快，价格越来越低，可靠性越来越好，并且和多媒体技术的结合远比因特网要来的紧密。但是为什么用户会贪婪的在速度慢，可靠性差，价格昂贵的因特网上冲浪，而选择把它们丢在一边呢？关键是用户界面的高稳定性。
HTML的格式确实存在不少限制。它的格式化功能确实简陋，根本无法定义文本结构。即便如此，原始的因特网/HTML模型却有着一个巨大的好处：几乎所有网页的外观和工作原理都大同小异。见到黑色的，就阅读；灰色的是背景；兰色（或是有下划线）的，是超链接。
一旦熟悉了此类传统的网站，就没有必要再去学习如何使用新的用户界面。然而对于CD-ROM来说，其用户界面是多变的。有的人认为在屏幕的右下角放置一个导航图标，看上去会不错。有些人则认为直接点击页面的右边来实现翻页的功能，会给人带来简洁的感觉。并且，你常常会因为面对屏幕上纷乱的图像无从下手，而感到失望和沮丧。一张CD-ROM就是如此被束之高阁。
Netscape 2.0和其它后来出现的浏览器都有着巨大的改进--它们都赋予了平面效果设计师把网站弄得象CD-ROM一样让人摸不着头脑的功能。 平面效果设计师与用户界面设计师根本就是两码事。如果你读过《麦金塔人机界面指南》（苹果电脑公司，Addison-Wesley1993出版），你一定会认同其中所提出的关于设计完美人机界面的理论。人机界面的好坏，其实与美工设计的程序外观并没有太大的联系。下拉式菜单比弹出式菜单好，并不是因为更美观的缘故，而是由于对用户来说，他们总是能够轻而易举的找到菜单中打印命令的位置。
甚至在Netscape 1.1里，平面设计师就可以做出一些中看不中用的效果来。他可能会因为某个页面上的大部分文字是带有超链接的，为了所谓的“美观”，一股脑的把所有的文字都显示为黑色（text=#000000, link=#000000, vlink=#000000）。或者，他先用一种触目惊心的颜色做背景，再分别为普通文字、超链接、访问过的超链接涂上其他夺目的色彩。这下可好，谁还可以分得清楚，哪些是超链接，哪些不是？更还有人嫌颜色的单调，甚至在同一个网站的不同页面上随意改动颜色搭配。
我就遇到过一个由于平面设计师的愚蠢而给其网站造成损失的例子。一次我从一个名为MediaOne公司（是麻省剑桥一带唯一的有线电视商）订购了一台同轴线调制解调器（cable modem）。他们同时也提供多付10美圆月费就可以收看的有线电视的配套服务，由于价格便宜，我也预定了。糟糕的是，他们的安装人员在安装完毕了一切之后，忘了给我留一个频道备忘卡。当我的一个朋友说“我们看看音乐电视台吧。”，我才发现我不知道应该输入什么来选台。“不成问题，马上搞定！只要到MediaOne的网站上找一份打印出来不就行了吗？”我很有自信。MediaOne花了大把的钱请一家名叫?纽约网络?的设计公司来建设网站，不出所料通向频道说明的一连串页面，既漫长又痛苦。终于我们还算可以把那个页面在我的HP打印机上输出。然而，输出的页面上竟然什么也没有--那个页面采用蓝色的背景，白色的字。Netscape Navigator向打印机传送的文件却是白色的文字白色的背景。我不得不打电话到MediaOne (电话是由MediaOne付费)，他们雇人将频道备忘卡(MediaOne以前出钱印刷好的)放在信封里(也得MediaOne掏钱)，贴上邮票，然后寄给我。
迄今为止，框架结构可能算得上Netscape最糟糕的主意了。那些对你计算机屏幕大小和形状毫无了解的图象设计师们总是乐于将它切成细条。计算机的屏幕是用户们最为宝贵的资源，但是框架结构却成为出版者出卖广告，添加无关内容，浪费用户资源的工具。更糟糕的是，在Netscape
Navigator 2.0里，当用户点击?退回?按钮打算取消刚才的操作时，浏览器就会跳过用户在框架内的所有鼠标点击操作，并把最初的框架页面弹出给用户。新一些的浏览器在处理框架结构的时候要体面一些，但是仍然没有哪一个浏览器可以象1993年出现的NCSA
Mosaic在处理滚屏时做得那样好。在过去，只要按一下空格键，浏览器就会将网页向下滚动一屏。但是如果采用框架结构，即便是页面中只有一个滚动条，浏览器也不会响应空格键
。你必须用鼠标指明了你想操作的子窗口。
我并不是说世界上就没有设计精良的网站，也不是说框架结构毫无用处，只是要提醒大家在注意框架的美观和实用的同时，也要考虑到其变化多端的使用界面可能给用户带来的困扰。但是太少的人如此为用户设想，实在令人遗憾。
在你打算花钱在网站的动画设计、Java程序，或是为插件提供内容之前，不妨考虑一下为什么不能购买一本与你网站主题相吻合的书的在线版权呢？请注意AltaVista的搜索引擎并不能识别图象和Java小程序。它只能检索文字。所以一本在线书籍可以即时为你带来大量的访问者。
也许你资本雄厚，不仅买得起书，而且还可以雇一群多媒体设计师。但你必需明白，最能吸引用户前来访问的关键两条是：随心所欲的操纵和有深度的内容。诸如Java 和Shockwave此类的软件可以让你牵着用户的鼻子走--在这里丢 一张图片，在那里放一段声音，等等。但是这难道是他们造访你网站的真正目的吗？如果他们只是想被动的看点什么，看看电视，或是去听听讲座岂不是更好？
这似乎是显而易见的，但我之所以提出的原因，是仍然有太多人企图把PowerPoint文件转化成网页。这种基于图片的陈述主要适用于游说一屋子的听众都跟随演讲者的叙述和议论。由于时间和空间的限制，讲者的观点都浓缩在少量的图片上，然后由讲者再扩充传递给听众。 而网络的本意却是要让每一个用户都能按照自己的意愿浏览网站，在喜爱的网页随意逗留。
在以下几种情况下，一个Java小程序可以为你的网站锦上添花：
精美的用户界面
假设我正在进行一项相机使用情况的调查。如果用户拥有的是一个傻瓜照相机，就没有必要向其询问有关他的附属镜头和闪光灯的资料。但是当用户声称有一台Nikon 8008时，那么我就列出一个Nikon闪光灯型号的列表，供其选择。如此我只需在每个HTML表单里问一个问题就可以了。在用户们选择?我的相机是单反式的?之后，接着的一个表单中就会出现?我的相机是Nikon牌的?的选项，再接下来的表单中就出现?我的相机型号是8008?此类的选项，最终服务器根据以上用户信息，动态的生成一个适合用户相机的闪光灯配件列表。
通过Java小程序，用户在?傻瓜/单反?选单上的选择决定了随后的相机品牌选单中备选品牌，继而在品牌选单中的选择又会决定了型号选单中等备选项。这样做是不是好一些？用户们要多花点时间来下载这个小程序。除了这个小程序，你还得把你相机型号数据库中的所有信息都传送给用户
--尽管他们看到的只是其中的一小部分。从好处想，用户可以在下载的时候干些别的事情，一旦下载完毕，小程序交互性能远比让用户填写一系列的表单要好。千万不要因为Java所能提供的丰富的用户界面而感到惊喜万分。Adobe 公司的PhotoShop用户界面的确丰富，但这是耗费了他们几百人数年时间来加以完善的结果。在每一个新的版本上市之前，Adobe要组织几百人，花上数年进行测试。并且撰写各种文档和指南又要花费数百万美元。而对于用户呢，他们不得不花上几个小时来搞清楚使用的方法。你既没有庞大的程序员班子来专门开发某一个程序，也没有全职负责质量保证人员，更没有用于撰写文档和使用指南的预算，即便是你具备了以上的条件，用户们也绝不会愿意花时间在学习如何使用你的网站上，无论他是一个见多识广老到的网上冲浪高手，还是一个虚心好学年轻的网络新人。
实时的响应
谁会愿意使用一个加一条直线都要在网络上绕一个大圈子的绘图工具？一个用HTML表单实现的网络游戏必然只会是益智的，决不会象Doom一样让人感觉到眼花缭乱。任何远程的视频游戏都必须要求在用户的处理器上处理数据。
注意：你可以在
http://fragisland.fragzone.se/fraggame.html那里找到一个用Java小程序开发的类DOOM游戏：杀戮岛。网上股票投资、新闻浏览和聊天系统一般可以籍Java来实现实时刷新。用户们可以启动一个Java小程序，整天的连接在股票报价服务器，或是新闻服务器上，实时的获得最新的信息。同样明显的是，此类程序不必要Java来实现。信息提供商只要简单的写一个“客户端pull”的HTML文档 --在其头部里添加
<META HTTP-EQUIV=REFRESH CONTENT="60; URL=update.cgi">
就可以实现同样的功能。用户的浏览器自动的每隔60秒请求服务器上的?update.cgi?刷新该页面。
我曾经与一些来自波士顿儿童医院的人们合作过几年。1994年，我们合作为那家医院60 GB Oracle数据库开发网络界面。在浏览器刚刚开始支持Java小程序时，我的一个合作者就设计了一个在因特网上实时发布精细护理监视数据给外地医生的程序。请见
http://www.emrs.org/。当然，这会使得用户的浏览器当机。
“Java在Netscape浏览器上无法运行，我们打算在未来几个月改善客户端的Java。”
-- Marc Andreessen，Netscape产品部副经理 ( 引自某商业杂志 1998年7月号)
Java通常被认为是一种既安全又可靠的语言。然而不幸的是，由于Java小程序运行在不可靠的Java虚拟机和Java视窗系统之上，所以往往无可避免的会使得用户的浏览器彻底崩溃。Plug-ins也具有类似的毛病。请仔细阅读本书关于服务器端包含程序的一章，弄清楚到底通过服务器上的程序能实现怎样的功能。
为什么图像设计师总是不得要领
Siegel做了以下几个想当然的假设：所有用户的浏览器都可以浏览图片；所有用户的网络速度都很快，绝不需要花上45秒的时间去下载网页的内容；所有的用户都采用?图文并茂?的浏览方式；拥有几千页内容的网站总有适合放“隧道”的地方。即便所有的假设但是对的，并且其内部的网页也确实有内容，AltaVista也会呼啸而过，毁坏所有的东西。没有人会愿意在浏览器的地址栏里输入?http://www.greedy.com?，然后把他们自己的鼻子交出来，让你牵着走。 人们通常通过在搜索引擎查询感兴趣的词汇或是短语来获得网站地址。搜索引擎根据用户的查询内容一口气列出所有相关的网站地址。AltaVista搜索引擎决不会认为Dave Siegel的?进入通道?是?酷?的，恰恰相反，甚至它可能根本不会为一个只有一幅图片的网页建立索引。
AltaVista总是把文字内容与用户查询短语最接近的网站URL返回给用户。AltaVista不会关心你那以125美元一小时雇来的图像设计师设计的某个框架的一部分，也不会关心通向主页面的连接和其它相关文章在另外的一个子窗口里。
若你真要来家伙把好内容放在网页服务器上的话，最好让每一个页面都能独当一面。网页间的连接亦要好好配合。每个网页都要有通向作者的、通向主页面的、通向下后续页面的链接。记住，网站酷不酷不是由出版者说了算的。每个用户浏览网站都有着自己的角度。也许是从搜索引擎返回的资源里得到的，也许是从朋友的网站上得到的，也有可能是从一些提供个性化服务的网站那里得到的。
网络出版者的任务就是不仅要按自己的认识去建设网络，更重要的是要从用户的角度进行考虑。
一个深谙其道的信息设计师
在Edward Tufte的《可视解释：图像和质量，证据和描述》(Graphics Press出版社 1997年出版)一书的146-149页上有很多关于网站用户界面设计的很有价值的观点：
我的个人英雄
63秒。“接下来，看看搜索一次要花多长时间？”
90秒。
“你们有什么感想呢？”总经理问道。 “唔... 嗯..我们可以采用更快的服务器。”一个网络专家回答说。 “好的，谢谢，你被解雇了”我的朋友就被总经理亲自点名要求去建立一个没有动画，没有Java的新网站。工作的着重点是加快对服务器端数据库的搜索速度。
多页面的设计和流程
本章的大部分内容是关于如何设计单独的网页。
本书的大部分内容则是围绕多页面网络应用的。设计糟糕的网页使人感到不快；设计糟糕的浏览流程则将会彻底摧毁用户阅读的意欲。
有没有一个可以适用于不同网站设计的通用准则？我发现了两个。
因特网流行的原因之一，是交互的过程有很好的可控性，用户可以随意地走走停停，前进后退而不如一般桌面软件般引起运算矛盾的问题。尽管软件商在许多流行的桌面软件中增加了多次?取消刚才操作?的功能，但是程序所位于的状态对用户来说仍然是一片模糊。
第一个通用准则是：不要破坏浏览器的“Go”菜单。总要允许用户在任何时候，任何状态下随意的前进或是后退。比如，让我们考虑以下的页面：
当用户发现在确认页上显示的收件地址有笔误时，他必须通过“Go”或是“Back”按钮退回到输入收件地址的那一页，修改后再重新继续以上的流程。如果把用户以前输入的信用卡信息作为缺省值，自动的由服务器填写在以后出现的表格中，效果会好得多。尽管这仍然无法从本质上确保任意的前进或是后退，不会导致错误。这个主意听起来不错，但是却难以实现，尤其当出版者的野心越来越大，服务器处理着越来越多的浏览状态，越来越多的出版者开始使用JavaScript的情况下。
第二条准则是，让用户先选择物件再选择操作。比如让我们来考虑一下电子商务网站的客户服务。假设用户甲已经通过了服务器对她的身份确认。并网站把她曾经买过的商品列表显示给她。简首先选择一个商品(选择目标)，然后得到一个操作的列表，比如“退货”或是“更换”。简选择了“更换”(进行操作)，接着得到了更换商品操作指南和可以调换的商品目录。
这个理论究竟有多么新颖？早在大约1984年德苹果麦金塔电脑里就有直接的体现，后来在《买金塔电脑人机界面指南》 (苹果电脑有限公司，Addison-Wesley出版社，1993出版)更是有详细的论述。 创意在现代文明中是价值的代名词，但是它对思想呆板的设计者来说不值分文，对用户似乎也没有直接的帮助。开始时，麦金塔计算机获得了广泛的欢迎，但是没有多久微软凭着从麦金塔上抄袭来的技术，垄断了计算机的桌面。网络出版者可以肯定，绝大多数的用户非常熟悉?先选择目标，再进行操作?的界面模式。坚持采用用户熟悉的使用界面会大大减少使用者的时间和疑惑。
如果出版者忽略了这些基本的原则，结果会是怎么样？
Date: Wed, 5 Aug 1998 23:20:33 -0400 (EDT) From: Garrett Wollman <wollman@khavrinen.lcs.mit.edu> To: philg@MIT.EDU Subject: Another bad Web user interface example当波士顿银行用一个可以在因特网运行的家庭银行系统，替换了原先的只能通过调制解调器基于终端的老牛破车系统时，我的确认为这很了不起。但很快我就泄了气。不仅下载用户界面慢得让人痛苦(使用一个33.6的调制解调器，通过加密的连接，还要下载每一页都不相同的图片)，而且还丝毫不理睬我的浏览器本来的界面。比如，当你连往别处的时候，你会得到以下的信息：
Error Description 2300004 - Screen Error你只要在你的选择上点击一下即可，毋需双击，毋用浏览器上等按钮或是在登陆到波士顿银行时打开多个窗口。使用屏幕上按钮和快捷键可以很方便的在系统中穿梭。
哦！
更糟的是，一旦进入了该系统，退出就很困难。如果退回到登录页，它会给出如下的帮助信息：
Error Description 1501002 - Invalid Card Number此卡号已经登陆，请在确定退出之后重新登录。
嗯，喂？
与他们联系的唯一方法是利用?反馈?功能，但是他们的系统似乎不愿意与我交谈。(当然，看文档的名称估计，整个系统是在NT平台上运行。这也很叫人忧郁。）
最后，千辛万苦之后我终于再次登录进入系统，通过?反馈?的功能发了个消息给他们。我花了十分钟才写好我的控诉，找到了那个表示?发送?的?图片?按钮，然后点击它。接着又有一个错误信息跳了出来--我写的日期不符合他们关于日期格式的单纯设想，于是我又错了。为了不丢失精心撰写的控诉，我点击?退回?图标，回到刚才的页面。(既然给用户空白的文本框要求输入日期，但是又没有相应的日期格式的说明，并且那个头脑简单的程序只能接受一种格式的日期。我又在原来的文字上添加了一段，讲述这是如何愚蠢至极。) 下面发生的，你们一定猜得到：我更改了日期的格式，点击了?发送?图标，然后又是刚才同样的错误信息。天那... 又得浪费10分钟。
总而言之，我花了整整一个小时的时间来发送消息。原要我在网上支付帐单的工作当然也没有完成。
根据1997年7月27号的《个人电脑周刊》的记载，波士顿银行的网络服务系统是由一个叫做Sapient的顾问公司开发的，实际上采用的全都是我后面几章要谈到的时髦技术：网络对象， Windows NT，和C++ 以及CORBA中间设备层。
摘要
以下是本章的要点：
更多的信息