为什么要用CSS布局取代表格布局?
为什么要用CSS布局取代表格布局?
利用表格进行布局排版对于设计过网页的同学来说是再熟悉不过的手段了,表格目前仍然主导着视觉丰富的网站的设计方式,但它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法。
对于CSS,很多人仍然停留在设计网页“样式”的层面上。之所以给“样式”加引号是因为多数朋友只是用CSS来进行简单的网页字体、表格属性等设置,而这样的“样式”并不是CSS真正意义上的样式。
使用CSS最大的优点就是它符合Web标准。Web标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构、表现和行为。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
有着6年以上网龄的人应该都受到过这样的困扰:一旦主流浏览器版本升级,刚建立的网站就可能变得过时。例如1996-1999年的“浏览器大战”,为了兼容Netscape和IE,网站制作者不得不编写同时适合这两种浏览器访问的代码,否则在网站就会在其中一种浏览器里面目全非。同时,当新的网络技术或交互设备出现的时候,我们也需要制作一个新的网站版本来支持这种新技术或新设备,例如支持手机上网的WAP技术,因为手机是不可能直接读取我们所熟悉的正常网站的。类似的问题不胜枚举:网站代码臃肿、繁杂浪费了我们大量的带宽,虽然现在宽带的发展对这个问题“改善”,但是仍然存在着一些使用宾馆拨号或者野外无线上网的客户;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。事实上,以上的一切都容易导致企业失去很多潜在的客户。
简而言之,Web标准的目的就是:提供最多的利益给最多的网站用户、确保任何网站文挡都能够长期有效、简化代码、降低建设成本、让网站更容易使用,能适应更多不同用户和更多网路设备、当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。
由此也可以看出,国外的设计者们确实遵循着以人为本的原则。可以举一个例子:对于target=”_blank”这个代码我们是再熟悉不过的了。但是这在Web标准里面是不允许的!因为W3C组织认为:不经过提示以及用户的同意而自行打开一个新的窗口是不礼貌的。
正如前面所说,很多人仍然在使用着表格式布局。所以学习使用XHTML+CSS制作网页需要一个过程,使现有网站符合Web标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合Web标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。
在这里先介绍一下简单的初期改善方法:
1、 页面添加正确的DOCTYPE
DOCTYPE是Document Type的简写。主要用来说明你编写的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的文档类型来解释页面代码。但是,如果你不注意设置了错误的DOCTYPE,你的网站就可能面目全非。XHTML1.0提供了三种DOCTYPE可选择:过渡型、严格型和框架型。对于初期改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。
2、用小写字母书写所有的标签
XML对大小写很敏感的,所以,XHTML也是有大小写区别的。所有的XHTML元素和属性的名字都必须使用小写。否则网页将被W3C校验认为是无效的。
3、对所有的标签进行关闭
在XHTML中,每一个打开的标签都必须关闭。就像这样书写<p></p>时要采用</p>进行关闭以告知浏览器这段标签结束,从而避免HTML的混乱和麻烦。需要说明的是:空标签也要关闭,在标签尾部使用"/"来关闭它们自己。例如:<br />、<img src="webstandards.gif" />
在设计完成后,我们还需要校验一下网页是否真的符合Web标准了。我们可以用W3C提供的免费校验服务(http://validator.w3.org/)来校验,发现错误后逐个修改。如果你在最后通过了XHTML验证,恭喜你已经向Web标准迈出了一大步!
附录:
1)、过渡型DOCTYPE代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2)、目前已经采用XHTML+CSS标准重构的著名网站举例:
Microsoft : http://www.microsoft.com
网易 : http://ww.163.com
MP3 : http://www.mp3.com/
Macromedia : http://www.macromedia.com/
闪客帝国 : http://www.flashempire.com/
魔兽世界中文网 : http://www.ngacn.com/
Posted by 最懒的蜜蜂 | 引用(1074) | 阅读2293次
Comment
- 提示:
此文还没有评论。
Trackback