理解表现和结构相分离
出处：网页设计师
责任编辑：xietaoming

[ 04-10-8 17:35 ] 作者：阿捷


　　对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为。

1.内容

　　内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。
2.表现(Presentation)

　　虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:

　　点击这里查看效果

　　噢，很明显，我们加了2种背景，将标题字体变大并居中，将小标题加粗并变成红色，等等等等。所有这些，都是“表现”的作用。它使你的内容看上去漂亮、可爱多了！形象一点的比喻:内容是模特，结构标明头和四肢等各个部位，表现则是服装,将模特打扮得漂漂亮亮。(请原谅我用模特打比方，很多时候模特比web标准更具有吸引力。)

　　那么行为是什么？

3.行为(Behavior)

　　行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。

　　所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”,示意草图如下：

4.传统的HTML方法

　　传统的HTML3.2/4.0标签里既有控制结构的标签，例如<title>,<p>，又有控制表现的标签，例如<font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构标签与表现标签混杂在一起。

　　例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2><h3>来定义标题和小节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制作好页面。聪明些的设计师还采用CSS样式表来统一控制一些字体的表现。下面的代码是我们最熟悉不过的了：

<table border="0" width="100%"><tr><td align="center"><h1><font
color="#C61C18">忆江南</font></h1></td></tr></table>

　　传统的方法看上去并没有什么问题。(我们已经很习惯了,从来没有想过会有什么问题。)但是既然W3C放弃HTML，推荐XHTML和XML就一定有它的道理和原因，问题出在哪里？

　　问题就出在结构层和表现层混杂在一起！当我们只发布一些简单页面，没什么影响。当我们发布了大量页面，问题就来了。



　　第一个问题是：如何改版。假如由于某些原因我们需要把背景替换成黑色，边框变成1px黄色，文字变成白色，所有文字居中。你可能就要一页一页的修改。好，你说你用了CSS，那么恭喜你，你可以直接修改样式表，轻松实现这样简单的改版。(复杂改版暂且不提。)



　　第二个问题是：数据的利用。本质上讲所有页面信息都是数据。当我发布了唐诗300首，宋词100首，就是一个可观的数据库，这个应该不难理解。那么好，是数据就存在数据查询，处理和交换的问题。假如我所有的页面上都不需要显示“品评”这一小节；假如我要将页面数据转成excel格式；假如我要打印一个干净内容的页面(不要背景、导航、版权等不相干信息)怎么办？传统的解决方法是：一页一页删除“品评”小节；一页一页地拷贝粘贴到excel，一页一页地制作"打印友好页"。这样做显然不是有效率的办法。



　　实际上，第一?象设计时尚杂志那样精心画出每一页。严谨的设计师可以控制到每1px的细节。内容与表格紧密的嵌套、混杂在一起，结构只是用表现来表现出来，而不是用标签。这种设计方法下，任何内容的变化，结构的变化都会影响整个页面的表现，都需要一点一点细节的修改。CSS的出现，一开始似乎就是用来解决"批量改表现"的问题。大部分的网页设计师已经能够熟练使用CSS来控制字体的大小颜色，超链接的效果，表格的边框等等，已经体会到CSS批量改变表现的效率。



　　第二个问题则是无法避免。由于结构和表现混杂在一起(内容被n层的表格拆分)，你无法判断哪个td里面到那个td是你需要的数据，无法剥离其中夹杂的<font><b>的标签。上例中，从哪里开始是正文？哪里开始是“品评”小节?哪些是附加信息不需要打印？我们都无法让电脑自己去判断，唯一的方法是人工判断，手工处理。结构和表现混杂在一起，页面就好比是一张图片，你无法让电脑搜索其中的文字。(哦，我听见有人说：我的站点有全文检索啊。恩，我想说的是，第一,这样的检索效率非常低，你需要滤过整个内容，匹配到你的"检索关键字"，例如，我要查找作者李白，搜索引擎会检索页面所有文字才能告诉你这页里面含有"李白"，而且不一定出现在作者上。第二，这样的检索对数据处理和交换毫无用处。例如我要将所有作者李白的诗摘出来，我要给所有作者增加一个肖像图片，这样的搜索毫无帮助。)



　　对于第二个问题，要如何解决呢？解决的办法就是：结构清晰化，将内容、结构与表现相分离。
5.web标准推荐的方法

　　对于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的。QQ用过吧，QQ面板的变更皮肤就是内容不变，外观表现在变化；还有winamp的skin也是这种原理的典型体现。其实我们大多数的设计师已经在实践中都接触到。我们的动态信息发布系统，实际上就是基于这个原理制作的，设计师只需要设计模版，程序员将数据(标题、作者、发布日期、摘要、相关文章、相关图片等等)从数据库中读出，嵌入你的模板，形成一个新的页面再展示给浏览者。其中的内容已经被结构化后分别保存在数据库的不同字段中。例如查找作者，我们只要在作者字段中搜索，这样的效率就提高很多了。



　　上面都是有赖于程序，如果页面文档本身就能实现表现和结构相分离，那么数据的交换和再利用不就更方便了。嘿嘿，其实XML就是奔着这个方向去的，XML允许你自己定制结构标识，还提供了XSLT用来格式化、查询和处理文档内容。例如上面的诗词页面，用XML写出来的代码就象这样：



<标题>忆江南</标题>


<作者>唐.白居易</作者>

<正文>江南好...</正文>

<作者介绍>772－846 ，字乐天...</作者介绍>

<注释>据《乐府杂录》...</注释>

<品评>此词写江南春色...</品评>

　　这些<标题><作者>都是自己定义的标签，这样文档结构非常清晰，查询和处理也很简单。啊哦，说远了。还是回到目前能应用的web标准方法上。



　　web标准方法目前推荐大家使用XHTML+CSS来制作网站。目标是使结构与表现彻底相分离。



　　就是说，XHTML的标签只用来定义文档的结构，所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。(CSS的好处上面已经讲到，可以批量处理表现)。采用这种方法后，上面的第二个问题中的3个假设困难就迎刃而解。我们可以利用样式表将所有"品评"结构不显示(DISPLAY:
none);我们可以根据页面结构标签将内容自动导入到excel；我们可以设计一个专门的打印样式表，隐藏掉所有附加的信息，只打印干净的内容。就这么简单。



　　现在你明白了吧，为什么我们反对用表格设计布局。原因是<table>用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有：



　　1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关

　　2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;

　　3.由于结构清晰，数据的集成、更新和处理更加方便灵活；

　　4.更有意义的搜索。

　　好了，说到这，关于表现与结构相分离??也不要紧，自己实际制作体验一把，在实践中??样，也在努力学习中。



　　要一个符合wbe标准的实际例子？查看本页原代码，讲"表现"概念的那个例子就是用CSS+DIV实现的。样式表的内容直接在本页head区，没有另外单独调用，便于你的查看:)

web标准的商业价值

出处：网页设计师

[ 2004-10-14 17:34:38 ] 作者：阿捷 责任编辑：xietaoming


　　原文来自：adaptivepath.com

　　作者介绍：Jeffrey Veen是AdaptivePath.com的合伙人之一，专门研究网页设计新技术，你可以在他的个人站点veen.com上学到更多知识。


　　自从开始web设计工作，我就加入到用web标准进行设计的团体中，至今已经很长时间了。我越来越感觉到采用W3C推荐的标准进行设计是一件正确的事情。当我准备重新设计adaptivepath.com站点时，我的搭档同意用符合标准的方法来建设它。但在我们开始前，我们也有一番讨论：采用web标准需要付出很大的努力，这样做是否值得？

　　当然，重新设计可以在“web标准支持者”中树立信誉，但是除了业界的赞誉以外，标准对于象我们这样的个人商业站点真的重要吗？web标准能为我们带来回报吗？转换到XHTML+CSS有什么经济上的利益吗？所有的答案是：是的。

　　加速开发

　　虽然HTML页面的简单大大促进了web发展，但是它也成为一种祸根。因为它们对代码格式如此的"宽容"，助长了一些浏览器私有代码的发展，这些私有代码造成无数用户无法得到最佳体验(看到页面的最佳效果)。

　　我们许多的客户都为站点建立了多个版本，以尽可能地为更多用户提供最完美的设计。对于我们的公司，我们只需要用一组HTML页面、一个样式表和很少量的开发就可以了，超过95%的adaptivepath.com网站用户都采用遵循标准(standards-c ompliant)的浏览器，所以我们想，是时候向web标准过渡了。

　　web标准强制你进行错误校验。简单的声明你的HTML是什么版本，校验程序将按你的声明的标准来校验你的页面。校验器将严格校验并详细的告诉你有哪些错误，这样缩短了开发者花费在质量上的时间，并保证你的站点在不同浏览器上保持高度的一致性。即使现在的浏览器依然有某些显示bug，但是这已经比五年前的情况好多了。

　　易于维护，增加机会

　　多年以来，web标准团体一直推荐"保持视觉设计和内容相分离"的优点，这意味着HTML变得非常简单(几乎可笑)，大部分的XHTM L页面只有一些富语义的
和
标签，以及一个指向强大的CSS文件的链接。这种完全的分离使得你的页面开发和维护变得简单，首先是因为使得开发团队之间能够更好的协调，例如编辑和设计师可以分开工作。

　　最近，有一个项目，我们采用了CSS技术，我们在自己的开发服务器上为客户开发CSS文件。而他们在后端服务器上准备内容的同时，我们也可以不断地修改设计，我们只要简单的编辑CSS文件而不需要和他们的版本发布系统保持结合，工作是平行进行的，我们戏剧性得缩短了开发时间。快速的开发获得了竞争和费用优势，更短的开发时间不仅仅节约成本，而且使资源空闲出来，因而获得更多机会。

　　拓展访问渠道

　　干净的代码带来更多的利益。不支持CSS的浏览器现在可以简单的忽略样式表，换句话说，有语义的XHTML表示可以被任何浏览器呈现，包括非传统的客户端，例如手机、PDAs、语音阅读器和屏幕阅读器等等，任何支持这些简单标签的设备都可以。

　　一个符合web标准的站点可以支持移动访问；支持Section 508易用性标准；以及兼容以前老版本的浏览器。你可以获得所有好处而且更加容易开发和维护，甚至于，在这个过程中你能节省一些硬件成本。

　　节约带宽成本

　　当我们从页面上剥离了font、table标签和一些用于装饰的图片，我们将页面尺寸从20.9k缩减到9.2k。目前，这些缩减看起来微不足道，但是当所有页面访问聚集起来就相当多了，使得我们站点的流量不堪重负。

　　我们的站点一天大约有几千的页面访问量(page views)，可以节约56%的带宽。而大型商业站点可能一、二分钟内就达到这样的访问量，流行的热门站点更常常一天就达到几千百万的页面访问量。如果每页节约30-40k，加上缓存的样式表不需要再次下载，每月能为这些站点节约上千美元。你会看到那些IT人士为这样的设计而兴奋！

　　提高用户体验

　　金钱很容易量化，压缩代码还带来更多隐性的、附加的好处。一个快速的、活跃的站点总是能带来一个更好的、全面的用户体验，这不是什么秘密。

　　在web初期，巨大的图形界面设计使得拨号上网的用户忍受缓慢的访问速度，随着宽带的普及这种情况有些好转。但是出差的商业旅行者仍然可能通过旅馆的电话拨号上网成为你的新用户，采用干净、标准化的代码可以帮助你的用户快捷方便地在网站上完成他们的目的。

　　转变被证明是值得的

　　我们决定转换到标准，不是一种客套话，而是因为标准可以带来可爱的经济利益。这就是为什么越来越多的酷站开始转向web标准。为什么你还不开始向XHTML+CSS过渡呢？

　　标准化带来的经济利益是切实的。一旦我们的站点都普及了标准化，商业将体会到真实的许诺---内容的自由共享。

网站六宗罪（我翻译的hofman转载的文章，请大家指教）

http://www.101webtemplate.com/article_info.php/articles_id/17

人们说眼睛是心灵的窗户，那么网站就是企业的窗口。来往的访客会怎样看待您的“窗口”呢？他们是否原意驻足片刻或者进来看看？或者仅仅是目不斜视地经过而已？

任何网站的目的都力图使访问者留下来，期待访问者会购买东西、订阅新闻通讯、参与竞争或者只是完成一项调查。最终目的都是一样的――网上冲浪者在你的网站上驻留的时间越长越好。

然而，网站的很多因素会阻止来访者驻留其中。其中有些因素是：

第一宗罪：页面载入迟缓
这是最不可饶恕的网站过错。你的网页必须、必须、必须于30秒之内载入完毕，别无选择。如果一位来访者要等待30秒以上，他们会立刻放弃转而投向别的网站。优化你的网站，使用尽可能少的图像，并且限定在jpeg和gif格式（png格式被抛弃了？）。你的网站应该有不多于20％的图像和不少于80％的文字（指的是实际占用空间还是页面显示比例？）。为什么呢？因为文字载入得更快而且可以使来访者专注于阅读你的网站。

第二宗罪：不合理的布局
来访者应该在三次点击之内于你的网站中找到任何他试图找到的内容，更深的内容会失去很多有价值的访问者。你的导航菜单应该简单易用而且确实可靠，可以采用站点地图。不要使用古怪的指针，不要使用复杂的菜单系统。文字应该清晰易读但不要太大。保持简洁。想象一下一位刚接触互联网的人会对你的网站有何反应。他们是喜欢还是讨厌它？一位新访客会轻松地找到他们所要的信息吗？


第三宗罪：糟糕的颜色搭配
最糟糕的事情莫过于，当在网站中寻找了半天之后，发现你需要的东西根本没法看――因为网站设计者认为在黄色文字下配上浅蓝背景比较酷。如果你在选择颜色方面需要指点，可以在任何一本杂志中找到范例。白色背景上的黑色或者深蓝是最为简单而最为有效的颜色搭配。

至于菜单或者其他背景，牢记如下几个原则：
红色代表刺激和攻击性；
蓝色代表和平与安宁；
绿色代表镇定与清爽；
黄色吸引大家的注意力；（怪不得皇帝先生要穿黄色衣服）
紫色代表财富和奢侈；（化妆品网站多用紫色）
棕色代表坚定和可靠；
橙色代表欢快和乐观。

第四宗罪：拙劣的拼写和语法
如果你在撰写产品或者服务的在线说明，但是其中存在语法或者拼写错误，那么你就输定了。最近我审查了一个电子本说明书，其中有四处很糟糕的拼写错误，包括第一段中的文字错拼。这时不可原谅的！我们总会犯错，但是应该尽可能把错误控制到最小。访问者或许会原谅一个拼写错误，但是永远不要指望得到第二此原谅。

这里有检查你网页的三个小窍门：
1、运用拼写检查，每个文字处理软件都有这个功能。
2、从头到尾校对所有你写的东西，这样可以避免很多错误。
3、24小时之后再次对你写的内容进行校对，你将会惊奇地发现自己竟然找到如此多错误。

第五宗罪：FLASH
应该停止使用那些闪耀、旋转、消退、显现或者其他噱头的Banners or Logos。因为它们表明：“我从没有整合过这样的网站，怎么样？酷不酷？”任何使用这种元素的网站都令我厌倦。网站的logo和banner应该是静态的图像或者文字。在线的市场调查一直告诉我们，网站中的动画按钮和图像是浏览者最讨厌的东西。

第六宗罪：点击计数器
只有业余爱好者才会使用这种东西，拜托赶紧把它从你的网站上去掉。任何一个像样的网站都会提供比计数器更精确的流量报告。在网站中采用计数器在8年以前是个好主意，但网络世界已经变化了，你也应该与时俱进。

有一条很古老的销售原则：“如果我能看穿约翰的眼睛，我就能把东西卖给约翰。”

要为你的浏览者设计网站而不是为你自己。

关于作者：Niall Roche 是http://www.affiliate-advocate.com 的内容作者和所有者，网站中包括了丰富的网络营销建议和电子图书评论。

其实主要是说和bbs的区别。作者把博客称作“引用型网络”，把传统bbs称作“线性讨论”。下面图片是两者的形象对比：



附带解释如下：（翻译的很臭，请大家捂住鼻子）

“在左边，你可以看到一个正常的讨论――就像在线性信息板（bbs）中发生的那样。在这个例子中，顶端的帖子是首要的，第二个帖子引用第一个，第三个也引用第一个帖子，而第四个则同时引用第三个和第二个却没有引用第一个。在这个讨论中没有过滤机制或者类似的东西。如果第二个帖子完全跑题或者包含虚假信息，它仍然处于线性文本的明显位置。于是如果这条讨论思路链接到别的地方，那么我们没有简单的评估办法来确定哪些帖子比其他的更有价值――整条讨论线既不说好也不说坏。

在右边，你可以看到一个讨论在引用型网络（blog）中传播的简化模式。如果在群体中由过滤机制在起作用（在我们的例子中，人们选择链接到谁取决于他们的个人偏好），那么最为重要的发言回被自动定位在中心，产生一个明晰的运动从开始的讨论原则导向最终的结论。或许最终大家都认可的结论是永远无法得到的，但是大家都会对明显占有优势的叙述表现出尊重。诸如“我同意”、“我不同意”之类的发言会被过滤出公众的注意，尽管它们可能曾经完成了重要的导向功能。

那么，这意味着什么呢？本质上讲，我认为blog中的讨论能够以一种相当不错的自我组织形态来展开。但是我并非认为这种运作如此完美 以至于不需要任何改进。不过与其感慨事情经过blog的传播变得面目全非，不如努力使这个机制运转更加流畅。我个人相信，诸如trackback和Daypop等工具工作的如此之好就是因为它们建立在并且增强这个机制的基础之上的原故。”

原文：
On the left, you can see a normal piece of discussion - as it would occur on a threaded message-board. In this example, the top post is the first, the second post cites the first, the third also cites the first while the fourth cites both the third and the second but not the first. In this debate there is no filtering mechanism of any kind. If the second post is entirely off-topic or contains spurious information, then it remains very clearly in the context of the thread. And if that thread is linked to from elsewhere, there can be no simple evaluation of what posts are considered more worthwhile than other1 - the thread is either good or it is not.

On the right, you can see a simplified diagram of the passage of a discussion through a citation network. If there are filtering mechanisms functioning through the community (in our case people choose who to link to based on whatever personal preference they wish to express) then the most important structural posts will self-locate towards the middle, generating a clear (almost linear) movement of discussion from first principles towards a conclusion of some kind. The conclusion itself may never be met - consensus may never be fully reached - but positions with regard to this evolving dominant narrative will be reached by everyone. Those posts which are merely "I agree" or "I disagree" will be filtered from the public consciousness, even as they have fulfilled a valuable function in directing people towards the next structural post in their debate.

So - what does this all mean? In essence I'm arguing that debate across weblogs self-organises in a pretty useful way. But I'm not going to pretend that it operates perfectly or that we can't do anything to improve it. However, it seems to me that rather than bemoaning the things that make debate across weblogs different, we should be trying to grease the wheels of those mechanisms. It's my personal belief (and one that I've expressed before) that things like trackback and Daypop work so well because they are specifically building upon - enhancing - the mechanisms that make webloggia operate effectively in the first place.

from http://www.plasticbag.org

就如同余老师推荐的bloglines一样，如果不自己动手体会一下，是不明白它所带来的便捷性的。
由此我联想到平常说的262教学模式，未免有硬性分割的嫌疑。其实学习和实践，理论和操作总是密不可分的。前一段时期教育出现的问题应该算作特殊时期的特例，从更广阔的视野来看。无论传统社会还是现代社会，教育都是紧密跟随社会的 应用。
但是因为我们社会变化太快，所以教育有点跟不上了。在这个时候提出262模式有进步的意义，但是仔细考察一下，当前的学习不是262模式可以涵盖的了。学习已经越来越跟实践操作紧密联系在一起，不过，我们要从更宽广的视野来看待“实践”。
不仅仅是创造经济价值的活动才是实践，任何有超出个体的语言、思想和行为都应该归属于实践，因为都对他人产生了效应，都不再是个人的事务而演化成社会活动，最终会产生超出个人范围的影响。

我从刚开始接触blog，就想当然认为它是菜市场，大家可以在里面交流自己微薄的收获，逐渐把思想传播到各个地方。它里面什么都有，就是没有传统意义上的思想权威。
但是从另外一个朋友那里得到的反馈是：虽然机制很重要，但是任何制度都不会自发产生有决定价值的成果。人类历史上有价值的创造，都是一小撮人或者一大群人，在共同的理想下，不断争取的结果。他的观点，实际上还是大教堂模式。
我跟他争论了半天，临走才想到：难道市场和教堂就必定存在冲突吗？当然分歧是有的，但是未必你死我活呀。

我是土人，没有余老师的技术功力，只能用土人的观点理解技术。
我认为bbs相当于公社大队的公共田地，大家每天下地工作挣工分，干的质量不管，泡的多了工分就多。现在论坛也是这样，发帖子多了就是将军，谁管他写的是什么。因为灌水比写原创成本低很多，所以大家都在灌水。论坛里面的好文章很快就会沉下去。
而blog就相当于农民的自留地，虽然小，但是愿意投入时间精力精耕细作，还要注意言辞为自己的自留地负责，这样信息的质量会有所提高。
^_^，粗浅比喻，让高手见笑了。

经常上天涯社区，感觉已经挺好，为什么还要搞个什么blog呢？博客中国不过就是多用户留言本系统吗？
昨天听余老师讲课，才知道自己的想法太幼稚。
的确有些网站，包括门户站点和个人站点，都号称拥有了自己的blog，但其实他们都是早就有的多用户流言本。但是他们同blog有本质的区别：缺少rss和trackback。rss减少了信息查找成本，而trackback则减少了信息发布成本。当然好处不仅仅是这些，但如果这两个标志性技术都没有完成，那么可以断定这是伪造blog。

如今商业级别的blog应用还不是很多，能在商业水平上赢利的更少，除非被并购。
有时候blog被应用在客户沟通和内部沟通。大家看看blog还有什么功能？
有些教育机构，比如哈佛也开始建立自己的blog项目。从这方面说，我们卓达可真是已经超过北大了，哈哈。不过对于具体应用领域，肯定还有待发掘。
就我看来，blog可以用来作教和学之间的沟通：老师可以把教案提出，然后由学生提出评价和置疑。
其次，可以用在学务……
不过无论运用哪种技术，都需要参与者的投入。而投入是双方的，关键看有没有这个动机和热情。