⽹页设计之内容、结构、表现分离
对于初学者，我们常看见web标准的好处之⼀是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以⼀个实际的例⼦来详细说明。⾸先我们必须先明⽩⼀些基本的概念：内容、结构、表现和⾏为。
1.内容
内容就是页⾯实际要传达的真正信息，包含数据、⽂档或者图⽚等。注意这⾥强调的“真正”，是指纯粹的数据信息本⾝。⽐如⼀个不包含辅助的信息,⽐如导航菜单、装饰性图⽚等。举个例⼦，有下⾯⼀段⽂本是我们页⾯要表现的信息。
忆江南(1)唐.⽩居易江南好，风景旧曾谙。(2)⽇出江花红胜⽕，春来江⽔绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原(今属⼭西)⼈。唐德宗朝进⼠，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，⼜为苏州(今属江苏)、同州(今属陕西⼤荔)刺史。晚居洛阳，⾃号醉吟先⽣、⾹⼭居⼠。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐⼤家。也是早期词⼈中的佼佼者，所作对后世影响甚⼤。注释(1)据《乐府杂录》，此词⼜名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。⼜名《望江南》、《梦江南》等。分单调、双调两体。单调⼆⼗七字，双凋五⼗四字，皆平韵。(2)谙(⾳安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春⾊，⾸句“江南好”，以⼀个既浅切⼜圆活的“好”字，摄尽江南春⾊的种种佳处，⽽作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已
甚，⽅
能“忆”之不休，因此，此句⼜已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并⾮得之传闻，⽽是作者出牧杭州时的亲⾝体验与亲⾝感受。这就既落实了“好”字，⼜照应了“忆” 字，不失为勾通⼀篇意脉的精彩笔墨。三、四两句对江南之“好”进　⾏形象化的演绎，突出渲染江花、江⽔红绿相映的明艳⾊彩，给⼈以光彩夺⽬的强烈印象。其中，既有同⾊间的相互烘托，⼜有异⾊间的相互映衬，充分显⽰了作者善于著⾊的技巧。篇末，以“能不忆江南”收束全词，既托出⾝在洛阳的作者对江南春⾊的⽆限赞叹与怀念，⼜造成⼀种悠远⽽⼜深长的韵味，把读者带⼊余情摇漾的境界中。
2.结构(Structure)
可以看到上⾯的⽂本信息本⾝已经完整。但是混乱⼀团，难以阅读和理解，我们必须给它格式化⼀下。把它分成标题、作者、章、节、段落和列表等。
标题忆江南(1)
作者唐.⽩居易
正⽂页面设计是什么
江南好，风景旧曾谙。(2)
⽇出江花红胜⽕，春来江⽔绿如蓝，(3)
能不忆江南。
节1作者介绍
772－846 ，字乐天，太原(今属⼭西)⼈。唐德宗朝进⼠，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，⼜为苏州(今属江苏)、同州(今属陕西⼤荔)刺史。晚居洛阳，⾃号醉吟先⽣、⾹⼭居⼠。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐⼤家。也是早期词⼈中的佼佼者，所作对后世影响甚⼤。
节2注释
列表
(1) 据《乐府杂录》，此词⼜名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。⼜名《望江南》、《梦江南》等。分单调、双调两体。单调⼆⼗七字，双凋五⼗四字，皆平韵。
(2)谙(⾳安)：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
节3品评
此词写江南春⾊，⾸句“江南好”，以⼀个既浅切⼜圆活的“好”字，摄尽江南春⾊的种种佳处，⽽作者的赞颂之意与向往之情也尽寓其中。同时，唯因 “好”之已甚，⽅能“忆”之不休，因此，此句⼜已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并⾮得之传闻，⽽是作者出牧杭州时的亲⾝体验与亲⾝感受。这就既落实了“好”字，⼜照应了“忆”字，不失为勾通⼀篇意脉的精彩笔墨。三、四两句对江南之“好”进　⾏形象化的演绎，突出渲染江花、江⽔红绿相映的明艳⾊彩，给⼈以光彩夺⽬的强烈印象。其中，既有同⾊间的相互烘托，⼜有异⾊间的相互映衬，充分显⽰了作者善于著⾊的技巧。篇末，以“能不忆江南”收束全词，既托出⾝在洛阳的作者对江南春⾊的⽆限赞叹与怀念，⼜造成⼀种悠远⽽⼜深长的韵味，把读者带⼊余情摇漾的境界中。
类似上⾯标题、作者、章、节、段落和列表，我们就把它称做结构。结构使内容更加具有逻辑性，易⽤性。
2.表现(Presentation)
虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变⼤，正⽂的颜⾊也没有变
化，没有背景，没有修饰。所有这些⽤来改变内容外观的东西，我们称之为“表现”。下⾯是对上⾯⽂本⽤表现处理过后的效果:
忆江南(1)
唐.⽩居易
江南好，风景旧曾谙。(2)
⽇出江花红胜⽕，春来江⽔绿如蓝，(3)
能不忆江南。
作者介绍
772－846 ，字乐天，太原(今属⼭西)⼈。唐德宗朝进⼠，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，⼜为苏州(今属江苏)、同州(今属陕西⼤荔)刺史。晚居洛阳，⾃号醉吟先⽣、⾹⼭居⼠。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐⼤家。也是早期词⼈中的佼佼者，所作对后世影响甚⼤。
注释
(1)据《乐府杂录》，此词⼜名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。⼜名《望江南》、《梦江南》等。分单调、双调两体。单调
⼆⼗七字，双凋五⼗四字，皆平韵。
(2)谙(⾳安)：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
品评
此词写江南春⾊，⾸句“江南好”，以⼀个既浅切⼜圆活的“好”字，摄尽江南春⾊的种种佳处，⽽作者的赞颂之意与向往之情也尽寓其中。同时，唯因 “好”之已甚，⽅能“忆”之不休，因此，此句⼜已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并⾮得之传闻，⽽是作者出牧杭州时的亲⾝体验与亲⾝感受。这就既落实了“好”字，⼜照应了“忆”字，不失为勾通⼀篇意脉的精彩笔墨。三、四两句对江南之“好”进　⾏形象化的演绎，突出渲染江花、江⽔红绿相映的明艳⾊彩，给⼈以光彩夺⽬的强烈印象。其中，既有同⾊间的相互烘托，⼜有异⾊间的相互映衬，充分显⽰了作者善于著⾊的技巧。篇末，以“能不忆江南”收束全词，既托出⾝在洛阳的作者对江南春⾊的⽆限赞叹与怀念，⼜造成⼀种悠远⽽⼜深长的韵味，把读者带⼊余情摇漾的境界中。
噢，很明显，我们加了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，⼀页⼀页地制作"打印友好页"。这样做显然不是有效率的办法。
实际上，第⼀个问题实质是批量改变"表现"。由于传统HTML⽅法的结构并不明显，甚⾄可以视作只有表现，我们就象设计时尚杂志那样精⼼画出每⼀页。严谨的设计师可以控制到每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.更有意义的搜索。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。