分类目录归档:WEB

CSS Hack for IE

每次解决CSS兼容性问题都要问度娘,我那么懒,怎能行呢。

所以亲测了一些粗暴有效的CSS Hack,以后问自己就行了。

CSS Hack IE6 IE7 IE8 IE9 e.g.
_ × × × _color:red;
* × × *color:red;
× × color:red;
9 color:red9;

都是 标签 惹的祸

前几天闲着无聊,用jQuery写了一个很炫的动画效果,昨天拿给朋友看,小小炫耀了一番。
可是没想到就是这番小炫耀,造成了我今天小小的杯具…
当时朋友看了效果觉得还不错,让我帮忙加到她的博客上。
我把代码原封不动的copy上去之后却发现不能正常显示效果,
总是莫名其妙的出现了一些随机bug,每次的效果竟然都不同。
一开始以为是某个js冲突或者css样式冲突,当我把博客上所有js和css都删掉之后,还是不能正常显示…
我个亲娘四舅奶奶的郁闷啊,被逼无奈,用上了排除法。
先从代码相近的html元素开始,一点点删除,一点点排除,直到最后让我扒的网页只剩一个裸体特效了,竟然还是不能正常显示…
邪门了,我擦擦眼睛,仔细看了看我的demo代码和被扒的博客页面代码,发现唯一的区别就是 <!DOCTYPE> 标签了。
终于找到了问题所在,整个过程持续了2个小时。
原来朋友的博客是几年前做的,是HTML4的声明:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
我的demo效果是用EditPlus创建的,是XHTML声明:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
其实早在04年就读过阿捷关于DOCTYPE的文章,
不同的标签会让浏览器按照不同的html规范解释代码。
只是没想到<!DOCTYPE html>标签也会影响javascript的解释效果,这下吃了小亏,浪费了2个小时的宝贵时光。
记录下来,以免再犯。  😥

让 eclipse 支持任意字符的代码提示

本来zend studio用的挺好的,最近常同时写java和php,eclipse和zend studio之间换来换去的太麻烦了,今早抽出点时间,统统整合到eclipse上面,既可以在一个IDE上面写多种语法,又可以节省zs消耗的不可思议的内存。

具体整合方法会在另一篇文章中记录。
整合成功后,问题出来了,在eclipse中似乎只有按alt+/时才会出现代码提示,而且content assist中的auto activation triggers文本框中只能输入一定数量的字符串,按照php的规则,当按下26个字母、$、> 等符号都需要出现提示才比较完美,经过网友的帮助,终于知道了解决之法,具体方法如下:

1. 点击 Eclipse 的 Window -> Preferences -> PHP -> Editor -> Code Assist-> Auto Activation 打开里面的 Enable auto activation 选项,Auto activation triggers for PHP 输入框中的默认值是 “$:>”,随便改成自己能记住的并且是唯一的,比如我改成了“mimiz.cn”,然后 Apply。

2. 点击 File -> Export,在窗口中展开 General -> Perferences -> Export all 然后点击 next,点击Browse,选择任意的一个路径,保存配置文件,然后点击”Finish”。

3. 用记事本打开保存的*.epf文件,查找刚才修改的字符串。把“mimiz.cn”修改为“$>:.abcdefghijklmnopqrstuvwxyz”。

4. 打开Eclipse的 File -> Import 然后在打开的窗口里展开 General -> Perferences,点next,选择刚才修改过的配置文件,Finish。

5. 重启Eclipse,体验一下吧。

积极遵循国际网站标准(Web Standards)

最近忙着整理WEB标准化相关的教案,无意中搜出来04年刚接触WEB标准化时发表的一篇文章,颇多感慨……
回想5年前,一本叫做《网站重构》的书,彻底改变了我在WEB前端的思想和观念,让我义无反顾的投入到标准化大军之中。
5年中,有多少个日日夜夜,在调试浏览器兼容性和CSS hack中痛并快乐着,感谢BlueIdea上面可爱又善良的朋友们,在我同浏览器斗争到抓狂的时候给了我雪中送炭的帮助。
通过WEB标准化认识的这帮可爱的朋友,是我最珍贵的友谊,感谢 秀才、单飞、猪猪、禽兽、七二、少龙、宇……以及那些我叫不上名字但却心有灵犀的人。

以下是帖子内容,发到这里作为纪念:

声明:本贴原出处为W3CN,经本人修改发表。

99.9%的网站是过时的”——当我猛然看到这个标题时,真的吃了一惊,但是当我仔细读完《网站重构》这本书后,觉得这句话一点不夸张。

想想自己从2000年开始到现在,做网站也有一段时间了,一直都以DW+FP为主,遇到软件实现不了的就手写一些html,可是不论我用什么方法,什么工具,同HTML规范相比是那么糟糕。

现在大部分网站都大量使用表格来进行定位,这样却实比较容易,但结果却造成代码臃肿不堪,看似华美的界面,背后却是不计其数的亢余代码,诺大的一片互联网真正遵循国际网站标准的寥寥无几

当国内的设计师现在都以为HTML已经没有什么可学,只要会使用Dreamweaver就行的时候,当我们沉醉在网页特效、Flash动画的时候,Web标准的推广已经成为国外一种普遍的现象。目前国内大多数客户都不清楚对网站的具体要求,他们注重的往往只是外观是否漂亮,基本功能是否实现,而不会去查看页面的原代码是否符合标准,也不会去问数据格式是否易于扩展交互。网站是否符合标准,很多时候都取决于设计者、开发者的知识面和认识。但是不能说因为客户不清楚、不要求采用Web标准,我们就可以偷懒和省略。作为网站设计师,有责任和义务去推广和采用Web标准。

那么让我们赶紧跟上新时代的步伐,一起来了解一下网站标准。

一.为什么要建立网站标准

我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的”浏览器大战”,为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。

如何解决这些问题呢?有识之士早已开始思考,需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处,因此在W3C(W3C.org)的组织下,网站标准开始被建立(1998年2月10日发布XML1.0为标志),并在网站标准组织(webstandards.org)的督促下推广执行。

简单说,网站标准的目的就是:

提供最多利益给最多的网站用户

确保任何网站文挡都能够长期有效

简化代码、降低建设成本

让网站更容易使用,能适应更多不同用户和更多网路设备

当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。

对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于你的网站用户来说,网站标准就是最佳体验。

访问量排名世界第4,中国第1的新浪网站,也遭遇非标准DHTML的问题。在最新发布的Netscape7和Mozila1.6浏览器中,新浪首页的漂浮广告全部失效,层叠挤在页面左下角。也许那些广告主认为损失这些潜在的用户无所谓

二.什么是网站标准

网站标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:

1.结构标准语言

(1)XML

XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。

(2)XHTML

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言

CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考http://www.w3.org/TR/CSS2/)。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

3.行为标准

(1)DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

(2) ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。

三.遵循标准的网站与传统网站的区别

传统网站只是印刷媒体的延伸,设计目标是保证在4-6个主流浏览器版本中看起来一致。通常的特征是:

以表格为基础的布局。

内容与表现方式混杂在一起。典型的例子是<font>标签。

垃圾代码(非标准代码)。

不易用的代码。

语义不正确的代码。比如<b>不解释的话,你根本不明白这是字体加粗的意思。

而采用网站标准建立的网站是一个能够接受各种用户和各种设备的广泛的交流沟通工具。一般特征是:

语义正确的标识。即使用能够表达含义的标签。保证代码可以在文本浏览器、PDAs、搜索引擎中被正确理解。

正确有效的代码。通过W3C代码校验(http://validator.w3.org/)的就是正确代码。

对人、机都易用的代码。能够接受广泛的用户和设备的访问,

用CSS分离表现层和内容。使代码更简洁、下载速度更快,批量修改和定制表现形式更容易。

四.采用网站标准的好处和缺点

1.好处

对网站浏览者的好处:

文件下载与页面显示速度更快;

内容能被更多的用户所访问(包括失明、视弱、色盲等残障人士);

内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等)

用户能够通过样式选择定制自己的表现界面

所有页面都能提供适于打印的版本

对网站所有者的好处:

更少的代码和组件,容易维护

带宽要求降低(代码更简洁),成本降低。举个例子:当 ESPN.com 使用 CSS改版后,每天节约超过两兆字节(terabytes)的带宽。

更容易被搜寻引擎搜索到

改版方便,不需要变动页面内容

提供打印版本而不需要复制内容

提高网站易用性。在美国,有严格的法律条款(Section 508)来约束政府网站必须达到一定的易用性,其他国家也有类似的要求。

2.缺点

需要花费更多时间来学习标准

依然需要注意浏览器的兼容问题

用 CSS 来实现某些表现反而比表格更为麻烦

五.怎么改善现有网站

我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。

1.初级改善

为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:

(1)过渡型(Transitional )

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

(2)严格型(Strict )

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

(3)框架型(Frameset )

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;

对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。

Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间(Namespace)

直接在DOCTYPE声明后面添加如下代码:

<html XMLns=”http://www.w3.org/1999/xhtml&#8221; >

一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言

为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:

<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />

这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。

用小写字母书写所有的标签

XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:

<TITLE>公司简介</TITLE>

正确的写法是:

<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。

为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:

<img src=”logo_unc_120x30.gif” alt=”logo_unc_120x30.gif”>

正确的写法:

<img src=”logo_unc_120x30.gif” alt=”UNC公司标志,点击返回首页”>

给所有属性值加引号

在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。

例:height=”100″,而不能是height=100。

关闭所有的标签

在XHTML中,每一个打开的标签都必须关闭。就象这样:

<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。</b>

这个规则可以避免HTML的混乱和麻烦。举例来说:如果你不关闭图像标签,在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是:空标签也要关闭,在标签尾部使用一个正斜杠”/”来关闭它们自己。例如:

<br /> <img src=”webstandards.gif” />

经过上述七个规则处理后,页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务(http://validator.w3.org/)。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址,可以作为W3C校验的补充。当最后通过了XHTML验证,恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧!

2.中级改善

接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:

用CSS定义元素外观

我们在写标识时已经养成习惯,当希望字体大点就用<h1>,希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的,<li>的意思是圆点,<b>的意思是“加粗文本”。而实际上, <h1>能变成你想要的任何样子,通过CSS,<h1>能变成小的字体,<p>文本能够变成巨大的、粗体的,<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果,我们应该使用CSS来确定那些元素的外观。例如,我们可以使原来默认的6级标题可以看起来大小一样:

h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

用结构化元素代替无意义的垃圾

许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现,而不是结构。例如,一段列表内容可能会使用下面这样的标识:

句子一<br /> 句子二<br /> 句子三<br />

如果我们采用一个无序列表代替会更好:

<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>

你或许会说“但是<li>显示的是一个圆点,我不想用圆点”。事实上,CSS没有设定元素看起来是什么样子,你完全可以用CSS关掉圆点。

给每个表格和表单加上id

给表格或表单赋予一个唯一的、结构的标记,例如

<table id=”menu”>

接下来,在书写样式表的时候,你就可以创建一个“menu”的选择器,并且关联一个CSS规则,用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样,不需要对每个%lt;td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记(标记“menu”的id标记),你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。

中级改善我们这里先列主要的三点,但其中包含的内容和知识点非常多,需要我们逐步学习和掌握,直到最后实现完全采用CSS而不才用任何表格实现布局。限于本文是引导推广之意,不展开详述。

最后我们特别需要补充介绍的是网站的易用性(Accessibility)和交互设计改善,易用性与网站标准有着标准联系紧密,和网站标准一样,都是为了使我们的网站接受更多的用户访问。1990年W3C建立了Web Accessibility Initiative(WAI),给网站建造者提供实现可访问性的方法和策略(http://www.w3.org/WAI/GL/)。提高易用性和研究交互设计(推荐VB之父Alan Cooper的About Face2.0一书)的策略能提高你的开发技术,开阔视野。提高你作为专业网页设计师的价值,使你更具竞争力。这正是每个网站所有者和每个设计师或开发者要努力达到的目标。

99.9%的网站是过时的”——当我猛然看到这个标题时,真的吃了一惊,但是当我仔细读完《网站重构》这本书后,觉得这句话一点不夸张。
想想自己从2000年开始到现在,做网站也有一段时间了,一直都以DW+FP为主,遇到软件实现不了的就手写一些html,可是不论我用什么方法,什么工具,同HTML规范相比是那么糟糕。
现在大部分网站都大量使用表格来进行定位,这样却实比较容易,但结果却造成代码臃肿不堪,看似华美的界面,背后却是不计其数的亢余代码,诺大的一片互联网真正遵循国际网站标准的寥寥无几
当国内的设计师现在都以为HTML已经没有什么可学,只要会使用Dreamweaver就行的时候,当我们沉醉在网页特效、Flash动画的时候,Web标准的推广已经成为国外一种普遍的现象。目前国内大多数客户都不清楚对网站的具体要求,他们注重的往往只是外观是否漂亮,基本功能是否实现,而不会去查看页面的原代码是否符合标准,也不会去问数据格式是否易于扩展交互。网站是否符合标准,很多时候都取决于设计者、开发者的知识面和认识。但是不能说因为客户不清楚、不要求采用Web标准,我们就可以偷懒和省略。作为网站设计师,有责任和义务去推广和采用Web标准。
那么让我们赶紧跟上新时代的步伐,一起来了解一下网站标准。
一.为什么要建立网站标准
我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的”浏览器大战”,为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。
如何解决这些问题呢?有识之士早已开始思考,需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处,因此在W3C(W3C.org)的组织下,网站标准开始被建立(1998年2月10日发布XML1.0为标志),并在网站标准组织(webstandards.org)的督促下推广执行。
简单说,网站标准的目的就是:
提供最多利益给最多的网站用户
确保任何网站文挡都能够长期有效
简化代码、降低建设成本
让网站更容易使用,能适应更多不同用户和更多网路设备
当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。
对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于你的网站用户来说,网站标准就是最佳体验。
访问量排名世界第4,中国第1的新浪网站,也遭遇非标准DHTML的问题。在最新发布的Netscape7和Mozila1.6浏览器中,新浪首页的漂浮广告全部失效,层叠挤在页面左下角。也许那些广告主认为损失这些潜在的用户无所谓
二.什么是网站标准
网站标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:
1.结构标准语言
(1)XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。
(2)XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考http://www.w3.org/TR/CSS2/)。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。
3.行为标准
(1)DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。
三.遵循标准的网站与传统网站的区别
传统网站只是印刷媒体的延伸,设计目标是保证在4-6个主流浏览器版本中看起来一致。通常的特征是:
以表格为基础的布局。
内容与表现方式混杂在一起。典型的例子是<font>标签。
垃圾代码(非标准代码)。
不易用的代码。
语义不正确的代码。比如<b>不解释的话,你根本不明白这是字体加粗的意思。
而采用网站标准建立的网站是一个能够接受各种用户和各种设备的广泛的交流沟通工具。一般特征是:
语义正确的标识。即使用能够表达含义的标签。保证代码可以在文本浏览器、PDAs、搜索引擎中被正确理解。
正确有效的代码。通过W3C代码校验(http://validator.w3.org/)的就是正确代码。
对人、机都易用的代码。能够接受广泛的用户和设备的访问,
用CSS分离表现层和内容。使代码更简洁、下载速度更快,批量修改和定制表现形式更容易。
四.采用网站标准的好处和缺点
1.好处
对网站浏览者的好处:
文件下载与页面显示速度更快;
内容能被更多的用户所访问(包括失明、视弱、色盲等残障人士);
内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等)
用户能够通过样式选择定制自己的表现界面
所有页面都能提供适于打印的版本
对网站所有者的好处:
更少的代码和组件,容易维护
带宽要求降低(代码更简洁),成本降低。举个例子:当 ESPN.com 使用 CSS改版后,每天节约超过两兆字节(terabytes)的带宽。
更容易被搜寻引擎搜索到
改版方便,不需要变动页面内容
提供打印版本而不需要复制内容
提高网站易用性。在美国,有严格的法律条款(Section 508)来约束政府网站必须达到一定的易用性,其他国家也有类似的要求。
2.缺点
需要花费更多时间来学习标准
依然需要注意浏览器的兼容问题
用 CSS 来实现某些表现反而比表格更为麻烦
五.怎么改善现有网站
我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。
1.初级改善
为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCTYPE,结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择:
(1)过渡型(Transitional )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
(2)严格型(Strict )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
(3)框架型(Frameset )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”&gt;
对于我们初级改善来说,只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等,不至于让你觉得变化太大,难以掌握。
Tip:你懒得输入上面过渡型代码的话,可以访问http://www.macromedia.com/网站的首页,然后查看源代码,把head区同样的代码拷贝粘贴就可以了。
设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。
声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。
用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的:
<TITLE>公司简介</TITLE>
正确的写法是:
<title>公司简介</title> 同样的,<P>改成<p>,<B>改成<b>等等。这步转换很简单。
为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:
<img src=”logo_unc_120x30.gif” alt=”logo_unc_120x30.gif”>
正确的写法:
<img src=”logo_unc_120x30.gif” alt=”UNC公司标志,点击返回首页”>
给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。
例:height=”100″,而不能是height=100。
关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。就象这样:
<p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标,XHTML就不可以。</b>
这个规则可以避免HTML的混乱和麻烦。举例来说:如果你不关闭图像标签,在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是:空标签也要关闭,在标签尾部使用一个正斜杠”/”来关闭它们自己。例如:
<br /> <img src=”webstandards.gif” />
经过上述七个规则处理后,页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务(http://validator.w3.org/)。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址,可以作为W3C校验的补充。当最后通过了XHTML验证,恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧!
2.中级改善
接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:
用CSS定义元素外观
我们在写标识时已经养成习惯,当希望字体大点就用<h1>,希望在前面加个点符号就用<li>。我们总是想<h1>的意思是大的,<li>的意思是圆点,<b>的意思是“加粗文本”。而实际上, <h1>能变成你想要的任何样子,通过CSS,<h1>能变成小的字体,<p>文本能够变成巨大的、粗体的,<li>能够变成一张图片等等。我们不能强迫用结构元素实现表现效果,我们应该使用CSS来确定那些元素的外观。例如,我们可以使原来默认的6级标题可以看起来大小一样:
h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }
用结构化元素代替无意义的垃圾
许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现,而不是结构。例如,一段列表内容可能会使用下面这样的标识:
句子一<br /> 句子二<br /> 句子三<br />
如果我们采用一个无序列表代替会更好:
<ul> <li>句子一</li> <li>句子二</li> <li>句子三</li> </ul>
你或许会说“但是<li>显示的是一个圆点,我不想用圆点”。事实上,CSS没有设定元素看起来是什么样子,你完全可以用CSS关掉圆点。
给每个表格和表单加上id
给表格或表单赋予一个唯一的、结构的标记,例如
<table id=”menu”>
接下来,在书写样式表的时候,你就可以创建一个“menu”的选择器,并且关联一个CSS规则,用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样,不需要对每个%lt;td>标签附带一些多余的、占用带宽的表现层的高、宽、对齐和背景颜色等等属性。只需要一个附着的标记(标记“menu”的id标记),你就可以在一个分离的样式表内为干净的、紧凑的代码标记进行特别的表现层处理。
中级改善我们这里先列主要的三点,但其中包含的内容和知识点非常多,需要我们逐步学习和掌握,直到最后实现完全采用CSS而不才用任何表格实现布局。限于本文是引导推广之意,不展开详述。
最后我们特别需要补充介绍的是网站的易用性(Accessibility)和交互设计改善,易用性与网站标准有着标准联系紧密,和网站标准一样,都是为了使我们的网站接受更多的用户访问。1990年W3C建立了Web Accessibility Initiative(WAI),给网站建造者提供实现可访问性的方法和策略(http://www.w3.org/WAI/GL/)。提高易用性和研究交互设计(推荐VB之父Alan Cooper的About Face2.0一书)的策略能提高你的开发技术,开阔视野。提高你作为专业网页设计师的价值,使你更具竞争力。这正是每个网站所有者和每个设计师或开发者要努力达到的目标。

对 Zend Studio 7.0 失望了

Zend Studio 7.0出来几个月了,一直都没空试用它,今天看了Zend官方的一篇文章,又恰好有些空余时间,心里稍微蠢蠢欲动一下,就把7.0安装到了硬盘上。

官方文章中描述的总是令人心潮澎湃,罗列了7.0的一堆优点,并建议用户升级,就文字方面的描述,确实很有吸引力。但当你用过之后,就像一盆冷水浇到了发烫的脑袋上,除了很爽之外还会让你很郁闷。

Zend Studio作为一个历史悠久的IDE,从诞生以来就BUG不断,5.5版本算是最经典的,从6.0开始使用了eclipse架构,虽然提高了系统的兼容性,但是Java那东西太耗费系统资源了,没有强悍的硬件支持,跑一个Zend Studio 7 简直是折磨。

折磨就折磨一下吧,卡一点,慢一点还可以忍受,if、while等语句不能折叠这我也能忍受,偶尔有点中文乱码我也勉强忍受了,但是最最不能忍受的是代码提示慢,我代码都敲完了,他的代码提示还没出来,总不能逼我按Alt+/去手动打开代码提示吧。

Zend Studio 6.x 已经很失败了,7.0虽有亮点但依然鸡肋,不知未来的8.0会不会那么让人失望。

把Zend Studio 7 OOXX了一下,不过按照惯例还是提供一下注册码:

User Name:mimiz_cn
License Key:3B9B9BB76C218B98BB76C218

官方下载地址:http://downloads.zend.com/studio-eclipse/7.0.0/ZendStudio-7.0.0.exe

20090826:
很抱歉我错怪了 ZendStudio7,既然是基于Eclipse开发的东西,同样也继承了eclipse的优点,在Window -> preferences -> PHP -> Editor -> Content assist -> Auto-Activation 中,可以调整自动提示的时间,我把它改为0,提示超快,哇咔咔~~~ :mrgreen:

20090920:
使用Zend Studio 7.0一个多月,越来越顺手了,现在他已经成了我最主要的php开发集成环境,甚至我的CentOS上面也把Eclipse换Zend Studio 7

20100118:
不少朋友说代码提示慢,确实,跟5.5比是慢多了,但这个是跟硬件环境成正比的,硬件在飞速的发展,软件当然也越做越大,越来越耗费资源,目前我用双核U,3G内存,没有任何不妥,硬件配置不高的朋友,建议回到5.5的平台,或者试试 NetBeans 和 Komodo 。古董机的话,还是用Editplus或者Dreamweaver吧。

本博客弃用了万恶的Comic Sans字体

不知当初设计 模板 的时候怎么会选这么难看的字体,现在已经到了越看越觉得恶心的地步,莫非是传说中的视觉疲劳?

Comic Sans是一个似手写的字体,由文生·康奈尔(Vincent Connare)设计,其被分类为一种随性且不连续的字体,设计基础来自于漫画书里的字体,可使用在非正式的文件里。
某些设计师认为这种字体包含着滑稽,傻气,粗俗与懒惰的意味,好比穿着小丑的衣服出现在严肃的社交聚会。
文生·康奈尔本人说,此字体并不适用于任何情况,只适合给儿童使用的软件。
Comic Sans
关于此字体的相关介绍请参考:百度百科

对于这个不怎么严肃的字体,偶尔看看也许可以增加一些滑稽的乐趣,如果常年累月的看,我不敢想象当我阅读的书籍,报刊,以及工作打印的文件都是这种字体时,我会崩溃到什么程度。

既然厌恶了,那就应该毫不犹豫的让他消失,本想换成中规中矩的Times New Roman 或者 经典的 Helvetica,但是考虑到很多PC上面都没有这些字体,最后决定换成Arial吧,简单、朴素、实用,我喜欢。 :mrgreen:

IE浏览器的if条件注释Hack

最近又开始客串美工的角色了,要写一个下拉导航菜单。

JS和CSS两者,我更加喜欢CSS方式,它的兼容性更好。

但IE6下非<a>标签不支持:hover伪类,无奈下翻出来N年前收集的Hack。

<!—-[if !IE]> 除IE外都可识别 < ![endif]—>

<!–[if IE]> 所有的IE可识别 < ![endif]–>

<!–[if IE 5.0]> 只有IE5.0可以识别 < ![endif]–>

<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 < ![endif]–>

<!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 < ![endif]–>

<!–[if IE 6]> 仅IE6可识别 < ![endif]–>

<!–[if lt IE 6]> IE6以及IE6以下版本可识别 < ![endif]–>

<!–[if gte IE 6]> IE6以及IE6以上版本可识别 < ![endif]–>

<!–[if IE 7]> 仅IE7可识别 < ![endif]–>

<!–[if lt IE 7]> IE7以及IE7以下版本可识别 < ![endif]–>

<!–[if gte IE 7]> IE7以及IE7以上版本可识别 < ![endif]–>

使用方法很简单,可以这样写:

<body>

<!–[if IE 6]> 您正使用 IE6 <br /> IE6 是垃圾 < ![endif]–>

<!–[if IE 7]> 您正使用 IE7 <br /> IE7 好慢 < ![endif]–>

<!–[if !IE]> <h6>我在使用 Chrome ,推荐您也使用^_^</h6> < ![endif]–>

</body>