XHTML和CSS能改变什麼
文件类型：PDF/Adobe Acrobat 文件大小：字节
更多搜索：XHTML CSS 改变 什麼
009
CSS Professional Style
I 导入篇 IntroductIon
010
XHTML和CSS能改变什麼
实用性(usability),可亲性(accessibility),SEO.在制作一个网站的时候,除了外观以外,还
有很多地方必须要考虑周详的.从设计.制作阶段至营运.维护做全盘考量时,以及以使用
者为中心的观点来做思考时,最有效率且具有效果的制作方法到底为何 其答案就是XHTML
和CSS.
为什麼以前是采用表格排版
(Table Layout)
使用表格的版面设计,自从WWW被一般使
用者广为使用的时候开始,一直就是网页制作
中经常被使用来实现复杂版面的一个方法.只
要使用表格排版方式,就可以在大多数的网页
浏览器中显示同样的版面,即使在稍旧一点的
浏览器也不会有什麼问题.若使用CSS的话,
可能会因为浏览器的种类或版本的不同,而出
现不同的显示状态,而且事实上现在一般被使
用的网页浏览器,并没有完全对应CSS的.
虽然这样的推论可能不够完整,但是至今为止
大多数的网页制作者不使用CSS,而是以表格
排版方式来进行网页制作,应该都是基於这样
的原因吧.
但最近发现,渐渐有较多的网站不使用表格
排版,而是将结构和表达部分分离开来,使用
遵循W3C标准规格的XHTML和CSS来建构
网站,或是将网站翻新.这到底是为什麼呢
以站在更接近使用者立场的观点
在这几年来,网站设计中的实用性,可亲
性,SEO等概念渐渐被网站制作者和网站营
运者所接受.现在应该是鲜少有人会觉得这样
的概念是毫无意义的.反倒应该是有很多人希
望,若能够的话,将这些概念导入,让自己的
网站能够变得更好.
事实上,光是这样,跟以前比起来,已经足
以称作一个很大的变化了.若是以前的话,
可能会选择客户的负责人喜欢的设计,或是为
了要得到较高的制作费来使用不必要的动画或
script,或是为了缩短制作时间而使用框架,也
就是说,在大多数的情况下,都是看制作者和
客户的方便或喜欢来决定网站的内容的.而现
在则是渐渐转变成为从使用者立场的观点来决
定网站制作的方向.
但事实上,在使用表格排版方式来制作的网
站实现这样的目标,并非一件易事.例如以可
亲性为例,假设这里有一个以文书处理器的感
觉,只考虑外观来制作出来的一个网页.若要
将它修正为在语音浏览器中也能够将内容传达
出去的话,其困难度非常的高,且负担很大,
效果也非常有限.一个只考虑外观制作出来的
网页,若想将它改版成具有十足可亲性的网页
的话,最好的办法就是将结构和表达部分分离
开来重新制作.
环境已经完备,技术也已足够
CSS一直以来,顶多只有个人网站会去使
用它.其中最大的理由是因为截至目前为止的
Web浏览器并没有完全对应CSS的关系.尤
其在version 4世代以前的浏览器,根本不能说
有对应到CSS,甚至在某些情况下,CSS还
可能是导致当机的原因.但在IE6登场之后,
在最近的浏览器上CSS几乎已经达到一个能够
使用的层级.另外,在时代变迁的同时,网页
制作者对於「在不同浏览器上也要有同样的显
示结果」这种概念的执著也渐渐消失.也就是
说,在经过综合性的判断之后,制作者已经接
受「在version 4以前的浏览器不使用CSS,
即使有不同的显示结果也没关系」这样的情
导入篇 IntroductIon
011
况.而对於version 5世代之后的浏览器的显
示问题,则是已经有研究出各种对应方式,并
广为被公开使用.
而自从2002年的秋季开始,渐渐有知名网
站正式导入XHTML和CSS(详细的内容我们
将在下一部分说明).而在2003年时,Jeffrey
Zeldman氏所著的「Designing With Web
Standards」这本解说如何使用遵循W3C标准
规格的制作网站的书藉,得到相当不错的销售
成绩.
在这里不可忘记的是,这些活动的中心人
物Douglas Bowman氏和Jeffrey Zeldman氏
基本上并不是一个技术人员,而是一个设计人
员.也就是说,之前一直以技术人员为中心来
进行的结构与表达的分离工作,现在已经变成
由设计者以更亮眼更聪明的方式来实现.
导入XHTML和CSS会怎样
就像这样,首先是业界整体对於「使用者为
中心的观点」的意识有了变化,「网页和表达
固定的印刷物或CD-ROM不同」的概念已经
被大众接受.而网页浏览器已经进化成为拥
有充足的CSS对应能力的版本,而避开旧型
浏览器问题的方法也渐渐被研究出来.透过
XHTML和CSS的导入来将结构与表达分离,
制作出遵循Web标准的网站已经不是一件困
难事了.
在现阶段,即使不使用XHTML,由於有许
多工具可以从HTML 4.x来转换到XHTML 1.0,
因此若要再晚一点进行转移,也是可以的.但
若是这样的话,一开始就使用XHTML这个将
来也能够使用到且能够扩充和组合的方法,
应该是能够得到更好的效率的.另外,由於
XHTML和HTML比较起来,在文法上比较严
格,自由度也较少,因此若要导入CSS的话,
建议早点采用XHTML,以早点适应XHTML.
所谓遵循Web标准来制作,即遵循经业界
代表综合判断所拟出最佳的规格文件来制作网
站.只要实际使用看看,应该就可以感受到它
是真的被考虑得非常周详.例如关於可亲性的
部分,即使制作者没有特意专注,应该还是会
有相当程度的水准.若您曾经制作一个只考虑
外观的网站,而为了求得网页的可亲性而花费
许多精神,您就会发现到您以前花费的时间和
精神是多麼浪费且无意义.
只考虑外观来设计造成庞大的缺点,而避开
这些缺点,应该就是导入XHTML和CSS最大
的优点了吧.其实是没有什麼好犹豫的了.
2002年10月「Wired News」网站的更新,是使用XHTML和
CSS来建构网站的方法扩展至一般使用者的一大原因.
http://www.wired.com/
连以前采用Table Layout制作的W3C网站,从2002年12月起
也改采使用XHTML和CSS的设计.
http://www.w3c.org/
XHTML和CSS能改变什麼
012
19941994.10.10CSS的最初草案 Cascading HTML Style Sheets被公开
1994.10.25W3C设立
19951995.11HTML 2.0 被公开为RFC1866
19961996.12.17CSS1成为W3C正式标准(recommendation)
19971997.01.14HTML3.2成为W3C正式标准
1997.01.31Positioning HTML Elements with Cascading Style
Sheets的草案公开
1997.06Netscape Navigator 4发布
1997.10Internet Explorer 4发布
1997.12.18HTML 4.0成为W3C正式标准
19981998.05.12CSS2成为W3C正式标准
1998.08WaSP(The Web Standards Project)开始活动
19991999.03.18Internet Explorer 5发布
1999.12.24HTML 4.01成为W3C正式标准
20002000.01.26XHTML 1.0成为W3C正式标准
2000.03.28Mac版Internet Explorer 5发布
2000.04.14CSS3的草案公开
2000.07.12Internet Explorer 5.5发布
2000.11.14Netscape 6发布
20012001.08.27Internet Explorer 6发布
2001.11.29Opera 6对应日文发布
20022002.08.02CSS 2.1的草案公开
2002.08.29Netscape 7发布
2002.10.11Wired News以XHTML+CSS的方式翻新
2002.12.05W3C的首页从表格排版变成CSS
20032003.01.28Opera 7发布
2003.03.17WThRemix(W3C的首页重新设计大赛)结果发表
2003.05css Zen Garden开放
2003.06.24Safari 1发布
2003.11.14ReUSEIT(useit.com首页的重新设计大赛)结果发表
20042004.06.21Web accessibility的JIS规格(JIS X 8341-3)被交付
2004.11.09Firefox 1发布
20052005.04.19Opera 8发布
2005.05.19Netscape 8发布
年表
导入篇 IntroductIon
013
CSS的历史与其周边环境的变化
CSS的最初草案公开之后,目前已经过了十年的时间.但是,CSS被使用者正式采用,却是
最近几年才有的事.在这边,我们先来回顾一下CSS的历史,来看看CSS被使用的方式的变
化过程.
个人网站的实验与研究的时代
看到左页的年表应该可以了解到CSS的规
格本身在很久以前就存在了.在HTML 3.2登
场之前,CSS 1就已经被公开为W3C正式标
准了,而现在较常被使用的CSS 2则是早在
1998年就被公开了.光看到这样的时间表,
CSS到最近才被使用反倒让人觉得奇怪.但从
以前就有制作网页经验的人应该就会知道,以
前CSS没有被使用的理由,基本上就是Web
网页并没有完全对应CSS.说好听一点是「只
有部分对应」,但实际上是由於存在著很多的
BUG,并且在各浏览器之间的显示差异很大,
在某些使用环境中甚至可能发生因为结构崩溃
而无法阅读内容的情况.
在这样的状况下,仍旧有一些个人网站尝试
去理解使用CSS的意义,让CSS想办法能
够被使用.例如若某个浏览器的对应状况实在
太差的话,就不要让它对应CSS等等,有许
多专注在浏览器的BUG或未对应部分的手法
被开发并公开出来,虽然速度并不快,但使
用CSS的技术已渐渐被累积.在这同时,有
一个团体对於不遵循W3C而独自扩充功能的
浏览器做出了规范.这个团体就是「The Web
Standards Project(WaSP)」.
Web浏览器的进化终於开始
不知道是不是因为有WaSP活动的效果,在
HTML 1.0被列为正式标准而公开的2000年,
有对应了CSS的浏览器,Mac版的IE 5以及
Windows版的IE 5.5,Netscape 6被推出,其
对应CSS的程度和以前是完全不能相比的.
在隔年2001年,有Windows版的IE 6以及
对应日文的Opera 6被推出.在这时候,可说
是一些主要的浏览器都可使用CSS来达到排
版的目的了.可能是因为这样的潮流出现,在
这一年的年尾,WaSP已经宣布停止活动.
但是,即使CSS的对应程度较高的浏览器
被推出,并不代表使用者会马上将浏览器的版
本升级.而且当时被认为对应情况最有问题的
Netscape 4.x仍有使用者在使用,因此在这个
时间点,CSS并没有被大网站采用.
Wired News的更新
与其所造成的影响
在这样的情况下,2002年的秋天发生了一件
大事,就是美国「Wired News」(http://www.
wired.com/ 请参照MISSION 001)将网站整体
以XHTML+CSS完全翻新.如此大规模的网
站完全导入CSS是当时谁都不曾想过的事情,
014
因此所造成的冲击非常的大.这件事情证明到
可使用XHTML+CSS来建构网站的时代已经
来临,之后,XHTML+CSS的网站翻新事例也
渐渐多了起来.例如,Wired News的翻新两
个月之后,W3C的首页也从Table Layout变
更为CSS Layout.
Wired News之所以能够实现导入以往被认
为不可能的CSS,笔者认为主要有两个重点.
第一点是和当时的个人网站所采用的方式一
样,Wired News在version 4以前的浏览器不
使用CSS.当时大网站的营运者大多认为在
不同的使用环境下,仍要有相同的显示结果,
但Wired News却不是这麼想的.它在较旧版
本的浏览器中,就以无设计的情况下来进行显
示,而积极地采用新型Web浏览器有对应的
标准规格的手法.
第二点是,Wired News在使用一直以来累
积的CSS技术的同时,在CSS中导入了一些
「密技」.结果,XHTML这边的原始码是处理
原本该有的状态,但CSS这边的原始码则是
到处都被写了一些特殊的密技在里面.
密技般的技巧蓬勃发展
被翻新的Wired News的CSS原始码的特
徵是,使用绝对配置的3栏式配置,以及使用
voice- family属性对Windows版的IE 5.5以前
指定特别的值的「Box Model Hack」这种密技
很常被使用.虽然这些在现在已经是不常被使
用了,但在当时算是很先进的技术.
之后,仍有许多的网页设计者在经过不断的
实验,研究之后,开发出了方便且无副作用的
技术,并有人将这些技术整理成网站.就这样
地密技与改良版的不断出现之后,数量多到难
以掌握的新技巧一个一个被开发出来.
Douglas Bowman
支持著CSS技术不断发展的设计者
住在旧金山的网页设计师.
他是WaSP的谘询委员会的
成员,在HotWired和Terra
Lycos工作的同时,在1998
年设立了Stopdesign.著
名的「Wired News」网站
更新一事,就是由他所主导
的.除此之外,「adaptive
path」的重新设计以及
「Blogger」的重新设计和
模版设计也是他的作品.
请参照MISSION 001,002,003,
004,013,014
Stopdesign
http://www.stopdesign.com/
导入篇 IntroductIon
015
有问题的技巧之流传
但是,在新被开发出来的CSS技巧中,有
些是非常便利,但有些是存在著一些问题的.
其中最有名的一个例子,就是透过CSS将文
字隐藏,而改以背景图片显示的「FIR(Fahrner
Image Replacement)」这个技巧.在初期
的使用方式是,为了要隐藏文字,会使用到
「display:none」.为此,在大多数以声音读取
文字的环境中,会出现该段文字不会被读取到
的问题,对於该网页的可亲性造成影响.但
是由於这个技巧可以将任何一段文字取代为
图片,因此在图片设计师之间很快地流行了
起来.因此在某段时期,「css Zen Garden」
(http://www.csszengarden.com/)等网站都使
用这个技巧,然而当使用语音浏览器时,却发
生标题等重大资讯无法完全被读取的状况.
FIR的问题点在「A List Apart」(http://www.
alistapart.com/ 请参照MISSION 006)这个线
上杂志中被Joe Clark氏指出来,之后FIR才
被改良为不会发生这种问题的版本.
blog,Web accessibility,SEO的
影响
就这样,在部分网页设计师之间的CSS密
技研究进行的同时,在2003年时,还发生了
一些也让一般使用者注意到CSS的事件.那
就是blog的流行和Web Accessibility与SEO
的概念被受到重视一事.若想让blog的排版
能有更多的原创性的话,基本上除了编集CSS
之外,别无他法.另外,若要将可亲性与SEO
有效且高水准地实现的话,使用CSS来将结
构与表达部分分离开来,变成一种广为普及的
概念,在可亲性的部分,2004年春天有公布了
JIS规格(JIS X8341-3),让CSS的受瞩目度是
越来越高.
Jeffrey Zeldman
住在纽约的网页设计师.他是
WaSP的设立者之一,在2000
年至2002年之间,曾任该团体
的领导者.他也是Happy Cog
的创立者,有「Designing
with Web Standards」(2004
年10月),「Taking Your
Talent to the Web」等著书.
另外他所发行的网页设计者专
用的线上杂志「A List Apart」
也颇有人气.
请参照MISSION 005,006
Jeffrey Zeldman Presents
The Daily Report
http://www.zeldman.com/
Happy Cog Studios
http://www.happycog.com/
CSS的历史与其周边环境的变化
016
但是,虽然从以前就有在注意CSS的网页
设计者,在研究密技的同时,对於各种浏览器
的bug问题与其对应方法也累积了不少的相关
知识技术,但对於CSS的初学者来说,由於
密技和特殊技巧等技术的进步速度太快,造成
不知该从什麼地方开始.
更进一步的CSS
在Windows的IE停留在Version 6而未做
更新的这段时间,Opera和Netscape的研发
已经超过Version 8,另也有Firefox,Safari
等新的网页浏览器出现(IE 7在2005年11月
现在正在开发当中,给开发者用的Beta版则
是已被公开).而且,由於在安全性方面的不
安感的关系,IE的市占率已渐渐下降,反之
Dave Shea
住在加拿大温哥华的
网页设计师.WaSP
的成员.他是「css
ZenGarden」的营
运者,也是Bright
Creative公司的所有
人.记载著有关网
页设计技术的blog
「mezzoblue」颇受欢
迎.mezzoblue
http://www.mezzoblue.com/
Firefox等软体渐渐扩展著市占率.在这样的情
况下,只有IE没有对应到的新功能渐渐受到注
目.例如,在IE以外的浏览器中,可以设定
BOX的长宽的最大.最小值,来对於长度做出
限制,或是使用CSS来追加文字或图片等内
容之外,有透明色的PNG也可以完全没有问
题地显示.就现实层面来讲,光是能这样子,
网页的完成度就会有很大差别的.
因此,虽然之前通常都只有IE6有对应的功
能才会被使用,但最近则是渐渐有IE6未对应
的功能被使用.当然,这些网页在IE6也可以
被显示,没有问题,但若使用有对应这些功能
的浏览器来看,则可以得到更好的显示效果.
css Zen Garden
http://www.csszengarden.com/
导入篇 IntroductIon
017
Eric Meyer
住在俄亥俄州的世界知
名HTML&CSS专家.他
是W3C的CSS Working
group的成员,也是
「CSS Test Suite」制
作的中心人物.著书
有「Eric Meyer on
CSS」「Cascading
Style Sheets: The
Definitive Guide」
「CSS 2.0 Programmer's
Reference」等等.
meyerweb.com
http://www.meyenweb.com/
更乾净的原始码之实现
进入2004年之后,CSS的密技也发生了很
大的变化.在以往,通常都会在CSS的原始
码中纳入各种特殊的密技,但在新的方法中,
则是会准备一个给各种浏览器使用的修正专用
外部样式表,以因应各种BUG.经过这样的处
理之后,除了修正用的外部CSS和读入该档
案的部分以外,基本上原始码可以保有它原本
该有的「乾净」的模样.
像这样的大变化,其实也只是在这两年之间
所发生的事情.也许不用为特定的浏览器做特
定处理的时代,不久就会来临了也说不定.
CSS的历史与其周边环境的变化
·上一篇：WiMAX开始在全球部署
·下一篇：无线通讯技术重大发展-论WiMAX