MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O'Reilly公司副总裁的戴尔·多尔蒂(Dale Dougherty)注意到,同所谓的“崩溃”迥然不同,互联网比其他任何时候都更重要,令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是,那些幸免于当初网络泡沫的公司,看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折,以至于呼吁“Web 2.0”的行动有了意义?我们都认同这种观点,Web 2.0会议由此诞生。WEB 标准不是某一个标准,而是一系列的标准集合,网页主要是由三部分组成:结构(structure)、表现(presentation)、和行为(behavior)。对应的标准也分为三个方面:结构化标准语言主要包括 XHTML和XML ,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3CDOM)、ECMAScripr等。这些标准大部分由W3C起草和发布, 也有一些是其他标准组织制订的标准, 比如 ECMA (European computer Manufacturers Asscoiation) 的 ECMASscript 标准。 我们来简单了解下这些标准:
1、结构标准语言
XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一样,xml 同样是来源于SGML,但是xml是一种能定义其他语言的语。xml 最初设计的目的是弥补html的不足,以强大的扩展性妈祖网络信息发布的需要,够来逐渐用于网络数据的转换和描述。关于xml 的好处和技术规范描写,这里就不说了有更多的数据可供参考。
xhtml是 The Extensible Hapertext Markup Language 可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0 ,xml 虽然是数据转换的能力强大,完全可以替代HTML,但是面对成千上万的已有的站点,直接串通XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了xhtml 。简单的说,建立xhtml的目的就是实现XHTML向xml的过渡。
2、表现标准语言
CSS是 Caseading Style Sheets 层叠样式表的缩写。目前推荐遵循的是W3C
3
于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
3、行为标准
(1)DOM
DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C 规范http://www.w3.org/dom/,DOM是一种浏览器,平台,语言的借口,使得你可以访问页面其它的标准组件。简单的理解,DOM解决了 Netscaped 的Javascript和Microsoft 的 Jscript 之间的冲突,给予web 设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象。
(2)ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association) 制订的标准脚本语言JAVAScript。目前推荐遵循的是 ECMAScript 262。
CSS是Caseading Style Sheets 的简称。实际上它是一组样式。我们对CSS样式并不陌生,在网上冲浪时,几乎随时都在与CSS打交道,在网页上没有使用过CSS的网页可能不好找,不管你用什么工具软件制作网页,都在有意无意的使用CSS。用好CSS能使你的网页更加的简练,为什么同样内容的网页,有的人能做出及时KB,而高手做出来的只有十几KB,CSS在其中的作用是不言而喻的。
4
第二章 DIV+CSS详解
第一节 DIV+CSS简介
CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML 等文件式样的计算机语言。DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介:
① 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
② 支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
③ 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
④ 样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
⑤ CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
⑥ 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
5
第二节 级联样式表简介
有三种方法可以在站点网页上使用样式表: ①将网页链接到外部样式表。 ②在网页上创建嵌入的样式表。 ③应用内嵌样式到各个网页元素。 ④每一种方法均有其优缺点:
当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名,例如 Mystyles.css。
当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的
标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。
如果网页链接到外部样式表,为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。
第三节 DIV+CSS布局的优点
一、利于搜索引擎蜘蛛爬行
根据总结和经验,div+css布局有利于蜘蛛的爬行,拿html的table布局和div+css布局的网页来做对比,很显然table的字节大于div+css的,字节小就有益于搜索引擎蜘蛛下载页面所用的时间,缩减页面代码量,可以提高页面浏览速度。而且也有益于蜘蛛爬行到网站深处。
6
二、易于修改
提高易用性,使用CSS可以结构化HTML,可以轻松控制页面的布局。CSS编写容易,可以像写html代码一样轻松地编写CSS。在一般情况下,div+css布局的网站,都是将html页面和css文件分开的,div+css的特点就是能将网页的内容和表现形式分离,将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。网站改版方便,只要修改CSS文件就可以重新构建网站。所以,假如你要修改网站整站布局的话,一般只需要修改css文件里的的个别属性即可,而这种特点是table不具备的。可重复使用,编程完成多处使用。你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
三、减少网页加载时间
缩减页面代码量,可以提高页面浏览速度,在几乎所有的浏览器上都可以使用。前面就提到过,div+css是将css文件和html文件分开的,当用户点击网站时,是在同时下载css文件和html文件,所以可以提高打开网页的速度,而table是必须以标签开始到结束才能显示网页内容。另外,div的html文件则是边加载边显示,这样是不是提高了用户体验? Google已经将网页加载速度列入了排名的因素,尽管这个因素只能影响排名的一小部分,甚至可以忽略,但是有利于seo的办法,我们为什么不用?
四、代码精简
如果使用DIV+CSS布局,网页的页面代码精简,使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。Table 中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。
7