中国设计联盟
联网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网站建设
中国福网
招聘求职
中国互联
中国设计秀
中资源
当前位置:网站综合首页 >> 建站资源 >> 站长手册 >> 理解表现和结构相分离

理解表现和结构相分离

来源:中国设计秀    作者:    点击:11     加入收藏    发表评论
0
顶一下
作者介绍: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过渡呢?

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


  类似上面标题、作者、章、节、段落和列表,我们就把它称做结构。结构使内容更加具有逻辑性,易用性。
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,一页一页地制作"打印友好页"。这样做显然不是有效率的办法。


  实际上,第一个问题实质是批量改变"表现"。由于传统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.更有意义的搜索。

  好了,说到这,关于表现与结构相分离的概念,您是否有一点理解?如果还是模模糊糊,也不要紧,自己实际制作体验一把,在实践中逐步领会。学习web标准需要循序渐进,阿捷和您一样,也在努力学习中。


 

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

2005-09-14 21:13:05    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口