
标签,以及一个指向强大的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过渡呢?
标准化带来的经济利益是切实的。一旦我们的站点都普及了标准化,商业将体会到真实的许诺---内容的自由共享。
问题就出在结构层和表现层混杂在一起!当我们只发布一些简单页面,没什么影响。当我们发布了大量页面,问题就来了。
第一个问题是:如何改版。假如由于某些原因我们需要把背景替换成黑色,边框变成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区,没有另外单独调用,便于你的查看:)