第1章　Web2.0时代的网站开发

1.5　标准化让我们更轻松

在国内申请的信用卡，可以在世界上很多国家使用。
虽然不懂广东话，但依然可以去香港旅游、购物，因为大家都会讲普通话。
水龙头坏了，在楼下的五金店买一个换上就行了。
欧洲杯将在北京时间凌晨两点直播，将观看到精彩的比赛。
生活中每天都发生类似的事情，这样的事情似乎再正常不过，并没有什么特别之处。但是，有没有想过，为什么信用卡可以在国际上通用?为什么大家都会讲普通话?为什么买来的新水龙头的螺口正好与老的水管能接上?为什么只要在凌晨两点打开电视机，就不会错过比赛?在这些事情的背后，都有着一个隐藏的“因素”在起作用，这个因素就是标准。生活中各行各业都有着自己相应的标准与规范，标准可以方便交流、促进协作、提高效率。

对于IT行业，设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。可能要在手机、打印机、数码相机之间交互数据；可能要在网站、邮件和办公软件之间传递信息；可能要在未来新设备（例如机顶盒、信息家电）中应用现有资源。如果没有统一的标准，那么现在所有的信息都是孤立的、不可分享、不可重用的，需要浪费大量的人力、物力重新为新设备建立数据，需要为每一次的多系统应用做专门的开发。对于这个问题，好在已经找到了解决的方案，这就是——XML。

XML简单说就是一种“有规定格式的文档”，只要设备或系统产生的数据都遵守这种格式，就可以实现互相的数据交换、分享与协作。自从1998年国际万维网组织（W3C.org）推出XML 1.0规范以来，已经有大量的XML标准在生活中应用，例如用手机订阅的天气预报、股票行情，这些数据都是从相应的系统获得，然后通过XML格式转换发送的；通过QQ或者MSN上发送消息到不在线的朋友手机上，这其中的信息也是通过XML转换实现的。还有更多的商业应用，例如公司内部的CRM、ERP、内容管理系统之间的数据交互、整合与共享都应用了XML。

那么，自然会想到网页（Web）是否也应该遵循XML标准呢?答案是肯定的。
本节将介绍网站标准化。

1.5.1 CSS让网页更容易设计-5维护

万维网出现以后，大大改变了人们的信息获取方式，以前从报纸、电视、广播上获取信息，现在可以更方便地通过网络、浏览器获得。Web上的信息也曰益丰富，从一开始简单的、静态的文档和图片信息，到现在动态的、可交互的多媒体信息，Web上的信息已经多到可以用“恐怖”来形容。到2008年年底，Google搜索引擎已经能够搜索到82亿张网页和21亿张图像。这么多的数据是财富，但是如果不能有效利用和搜索就是“信息垃圾”。而事实上，已经产生了数据冗余和信息无法有效共享、查询的情况。

99％的网站都是采用HTML制作的，而HTML并不符合XML格式，因此这些网页信息都很难适应未来新设备和数据共享的要求。国际万维网组织（W3C.org）已经提出了解决这个问题的办法，他们在HTML基础上，按照XML格式制定了新的规范XHTML 10。只要通过简单的改变，就能将HTML转为XHTML，从而实现向XML的过渡。同时，为了使页面信息更加容易被搜索和重用、XHTML的代码需要结构更加清晰、标签更加有语义，W3C推荐使用CSS来控制表现，以实现内容与表现的相分离。
World Wide Web最早是以文件的概念组成，希望透过网页与超链接，让文件与知识更容易连接援引。从HTML语法大量使用文件概念的标签（例如代表标题的
、代表段落的），就不难看出WWW的这个特质。

然而WWW比起早期其他网络媒介更迷人的地方，在于它能直接在页面上嵌入并呈现图片，这个改变让WWW发展迅速，也让页面视觉装饰大为盛行。但网页先天的文件特性，让图像排版设计难以施展手脚，于是像利用嵌套表格与图像拼组而成的页面开始盛行，以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开，造成了许多失控的乱象，让页面的源代码变得难以阅读与维护。

为了让网页在视觉上可以有更多元的表现，W3C在1996年推出CSS第一版，提供解决之道。不过由于CSS有赖于浏览器的支持，因此长久以来，CSS的推展情况一直不佳，直到IE 6、Firefox等主流浏览器支持CSS，才渐渐改善。

CSS语法是要让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计也对搜寻引擎更为友善，更容易搜寻到页面内容。其次，CSS也可以增加页面在不同媒介的呈现效果。同一份页面可依据用途不同，例如在屏幕显示或打印，而自动切换不同的CSS语法，让呈现最佳化。也由于读取页面的媒介越来越多元（如手机、PDA），CSS可以弹性调整呈现方式。这些都更加彰显了CSS在网页上的优势。

1.5.2 扔掉Table使用XHTML+CSS的布局

在开发标准化的网站时，时不时能够看到一些页面整体布局的问题，要求用DIV做一些Table才能做到的，否则就以此为把柄说XHTML+CSS布局方法不好。其实，首先要做的是改变思维，以适应XHTML+CSS的布局。

1.面向页面设计而非面向浏览器设计

XHTML+CSS能够实现的是一种流布局，也就是随着内容的长度自动增长区域，并且最终导致整个页面增长，这时候浏览器就必须显示滚动条。Table强迫症的一个征兆就是极力避免流布局，希望以浏览器的可视区域为布局目标，要求在可视区域中划分内容区域而不是在页面上划分内容区域。

实际上XHTML是无法针对浏览器设计的，因为它仅仅包含语义，或者说是内狡而浏览器如何去表现这些内容是无法确定的。CSS提供了控制表现方式的一种途径，但这仅仅是针对主流浏览器的，而且浏览器支持的“指令集”还有稍微的差别（说到这里，真希望能够为一个浏览器写CSS，然后编译为全平台兼容代码），最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此，如果决定要开始写符合语义的XHTML，并且仅仅用CSS控制布局，首先就要把思路转变为面向页面（或者说是文档）的布局控制，而非面向浏览器可视区域的布局控制。

接下来肯定有人要说，“那就是承认了有些布局老方法很容易做到，但新方法很难做到啦”。这是当然的，然而这不成为继续使用Table的理由。这时候要反过来探讨原始目标，是为什么要控制布局?低层次的需求是为了美观，谁都希望同样的内容能够以更好的视觉效果展示在用户眼前。高层次的需求是为了控制受众的浏览方式，让他们能够按预先设计好的方式来区分页面内容的轻重点，按照期望优先浏览某些内容，同时也帮助他们更快地找到想要的内容，而不会在网站内感到沮丧。

在当当网购买此书  |  在卓越网购买此书

经典论坛交流：
http://bbs.blueidea.com/thread-2937783-1-1.html

本文链接：http://www.blueidea.com/news/book/2009/6854.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 DW CS4开发标准布局Web 2.0网站 [1] 下一页