SEO与UCD不清不白的原因

网上有人在讨论SEO与UCD的关系,还挺热闹。

文章中的观点我是认同的:

  1. SEO的服务对象是机器;UCD的服务对象是用户;
  2. 用户体验属于UCD的范畴;
  3. 国内的SEO水准普遍处于“伪设计层面”

但为什么会出现SEO如春回大地,言网站建设必谈SEO的局面,其实是和行业发展相关的。

SEO:

  1. SEO能在短期内提高网站的流量,迎合了国人急功近利的性子;
  2. 金钱利益促使SEO行业(黑帽,白帽)畸形的急剧扩大,黑帽SEO用“邪门武功”也能出招致胜;
  3. SEO门槛很“低”,网上流传的入门级文章比比皆是,只要能看懂HTML代码,小学没毕业的孩子也能SEO;

相较而言,UCD:

  1. UCD见效慢;
  2. UCD只能从正道入手;
  3. UCD要有扎实的理论,多数从业者都有专业背景支撑,从业门槛高;

以上情况导致:

  • 当一部分SEOer发现利用HTML能够促进搜索引擎友好度后,这种“神奇的方法”迅速在SEO行业传播开来,而无人去了解为何,源自哪里;
  • 而为数不多的UCDer们只把“HTML语义规范”看作是基本知识而已,继续低调行事;

“神奇方法”就像由SEOer从自己的院子打开了UCDer的小门,逐渐有SEOer深入研究,把头伸到了用户体验的院子。

看看网上的文章吧,更多积极推进WEB标准的IT人(且不说他了解多少),是SEOer。

使用WEB标准重构网站,通常是SEOer给客户方案的头条;

这就是现状!

一切有利于提高搜索引擎友好度的方法都能被SEO拿来使用,不仅包括HTML语义化,甚至包括一台高效稳定运行的服务器(这难道不是网络管理员的基本职责吗?)。

真正的UCDer,他们制作的网站天生就与搜索引擎亲近,像一叶千鸟realazy网页设计师,首页PR值都是6。

如此,更多的SEOer仅仅帮助客户改进了网站的UCD程度,就能够使得客户网站更上一层楼了,那么,将UCD的方法纳入SEO方案又何乐而不为?又何必澄清两者之间的关系?而不明真相者,就以此为准了。

我想,这就是SEO和UCD不清不白的原因吧。

两本书

《网站重构》和《CSS权威指南》

《网站重构:应用Web标准进行设计》
本书是为了希望自己的网站成本变得更低,运行得更好,访问者更多的网页设计师、开发者、网站所有者及管理者写的。
本书着重分析了目前网站建设中存在的一些问题,以及“Web标准”思想的产生、发展和推广,并从技术细节上讲解了网站实际制作和开发的过程中如何向Web标准过渡,如何采用和符合Web标准。
本书的出版目的就是帮助读者理解Web标准,创建出用最低的费用达到最多的用户,并维持最长时间的网站,并且提供一些相关的技术和技巧。 不要停滞不前,不要拒绝接受全部观点!


CSS权威指南第二版英文版
作者:Eric 2004-6-25 23:49:54
基本信息
书籍名称:Cascading Style Sheets The Definitive Guide 2nd Edition
出版社:OReilly
作者主页:www.meyerweb.com
作者Eric Meyer的介绍

Eric A. Meyer从1993年开始做网络方面的工作,受雇于Netscape公司做标准设计培训师。Eric在这个行业中相当有名,他经常就web标准、跨浏览器兼容性、CSS和web设计等方面在各种会议上发言。作为一个西方预科大学的网络管理员和毕业生,Eric开发W3C的CSS1校验程序,并于最近出版了尽其所能发现的CSS设计局限。Eric也是《Eric Meyer on CSS》、《Mastering the Language of Web Design》(New Riders)、《样式表:权威指南》(O’Reilly & Associates)、《CSS2.0 程序员参考》(Osborne’ McGraw-Hill)以及众所周知的CSS 浏览器兼容性表的作者。
下面是《CSS权威指南》第一版的目录:

前言
第一章 HTML与CSS
网络的由盛到衰
CSS是拯救之方
CSS的局限
CSS和HTML
小结
第二章 选择符与结构
基本规则
分组类选择符和ID选择符
伪类和伪元素
结构
继承
特殊性
层叠
元素分类
小结
第三章 单位和值
颜色
长度单位
百分比值
URL
CSS2中的单位
小结
第四章 文本属性
使用文本
小结
第五章 字体属性
字体系列
字体加粗
字体尺寸
样式和变形
使用缩略方式:字体属性
字体匹配
小结
第六章 颜色和背景
颜色
复杂背景
小结
第七章 框与边框
基本元素框
是边界,还是补白?
边界
边框
补白
浮动与清除
列表
小结
第八章 可视化格式编排
基本框
块级元素
浮动元素
内联元素
小结
第九章 定位
基本概念
相对定位
绝对定位
固定定位
层叠定位元素
小结
第十章 CSS2展望
与CSS1的区别
CSS2选择符
字体与文本
产生内容
适应环境
边框
表格
媒体类型与@规则
小结
第十一章 CSS应用
转换方案
提示与技巧
附录一 CSS资源
附录二 HTML 2.0样式表
附录三 CSS1属性
附录四 CSS支持表
词汇表
购买信息
CSS权威指南第二版未发行中文版,只有第一版。请支持正版图书:购买《CSS权威指南》第一版人民币:16.50元

什么是WEB标准

WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(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和HTML一样,XML同样来源于 SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。

(2)XHTML

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

2. 表现标准语言

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

3.行为标准

(1)DOM

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

(2) ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262。

原文出处:http://tech.163.com/04/1119/11/15I2V73N000915AD.html

定义标题的最好方法

定义标题的最好方法
作者:阿宏 2005-4-15 20:45:18

  • 原文:What is the Best Way to Mark up the Title of a Document?
  • 说明:本文是 《Web Standards Solutions: The Markup and Style Handbook》一书中的一章。书号:ISBN:1590593812。我们会陆续翻译此书中有价值的章节。
  • 原作者:Dan Cederholm
  • 翻译:阿宏

一个文档标题,最好的定义方法是什么?要回答这个问题,先设想我们要在一个页面上定义文章的标题,通常我们有三个方法来实现这个简单目的:

方法一: 有意义吗?


<span class=”heading”>文章标题</span>

虽然在某些情况下<span>会是一个方便的标签,但它并不能表达出标题的完整含义。采用这个方法的一个好处是,我们可以对它附加一个CSS规则,分配其一个heading class,使其文字象标题一样显示。

.heading {

font-size: 24px;

font-weight: bold;

color: blue;

}

ok,现在所有的标题都用heading class标记成了大号的粗体字体,并且为蓝色。太棒了!但是这样做对吗?如果有人用一个不支持CSS的浏览器来观看,会怎样呢?

举个例子,如果我们设置的这个外部样式表的规则不被老版本的浏览器支持,会怎样?又或者有视觉障碍的人用屏幕阅读器来阅读这个页面,又会怎样?一个访问者通过这些途径所看到(或听到)的应该和这个页面上正常的文本没有任何区别。

尽管class=”heading”为这个标签增加了一点意义,但<span>仍然只是一个普通的标签,可以被大多数浏览器的缺省样式所修改掉。

搜索引擎检索这个页面时会略过<span>标签,就好象它不存在一样,不会对其可能包含的关键字给于一点额外的重视。在后面我们会更多的谈到搜索引擎和标题的关系。

最后,由于<span>标签是一个内嵌元素,我们可能需要把它嵌套在一个额外的块级元素中,比如<p>标签或<div>标签,为的是使它能够形成单独的行,这会进一步被非必要的
代码弄乱你的标签。而这些额外增加的标签却是必须的,这样才能使不支持CSS的浏览器显示出没有差别的文本。

方法二:<p>和<b>组合

<p><b>文章标题</b></p>

使用一个段落标签,将会给我们带来块级的显示,<b>会把文本变成粗体。但是用这个方法标记一个重要的标题时,我们面对的是同样无意义的结果。不象方法A,<b>标签能在可视化的浏览器中把文字显示成粗体——甚至在不支持CSS的浏览器中。但是和<span>标签一样,搜索引擎也不会因为有一些东西在段落中被加粗了而给予更高的优先。

难以设计样式

用普通的<p>和<b>的组合,也带来了另一个缺憾——无法把这个标题设计成不同于其他段落的样式。我们可能想用一个特别的样式来突出标题,来使页面内容更清晰更具结构,但是用这个方法只能使其显示成粗体。

方法三:样式加实质

<h1>文章标题</h1>
恩,多么好的标题定义。大多数的网页设计者对它都很熟悉。其实适当的使用它们,<Hn>就能为页面内容提供灵活的、可索引的、以及可样式化的结构。

这也是聪明的定义方法,你会发现它很简单。不再需要额外的标签,你可以说,这仅仅比另外两个方法节省了一点点的字节,可以忽略不计,但节省一点是一点。
<h1>一直到<h6>,代表了标题的六个级别,从最重要的(<h1>)到最次要的(<h6>)。
他们本身就是块级的,不需要增加其它元素来使其单独成行。简单,有效——就是好工具。
轻松定制样式
因为我们使用<h1>标签是唯一的,而<b>或<p>标签更适合使用在整个页面,所以我们可以用各种各样的CSS方法来样式化。

更重要的是,尽管完全不用样式,一个标题标签也能明显的表示出一个标题!可视化的浏览器把<h1>显示成更大的粗体。一个非样式化的页面将以被期望的那样显示文档结构,用适当的标题标签来传达意思。

屏幕阅读器、PDA、手机、以及可视化的和非可视化的浏览器都会明白,碰到一个标题标签时该做的事情,正确的处理,比页面上的普通文本更重视的来对待。而使用<span>标签,那些不支持CSS的浏览器就不会特别的对待它。

讨厌的默认样式
以往,由于浏览器默认的缺省值非常的丑陋,设计者们也许会避免完全的使用标题标签。或者,因为缺省值的巨大尺寸而避免使用<h1>或<h2>,取而代之的是用更高数值的标题标签来实现更小的尺寸。

然而,需要重点强调的是,我们可以很简单的用CSS来改变这些标题标签——举个例子,一个<h1>并非一定是占满大半屏幕的巨大标版。在后面,我将证明用CSS来样式化标题标签是多么的简单,希望可以帮助你减轻巨大的恐惧。

对搜索引擎友好的

这是一个巨大的好处。搜索引擎喜欢标题标签。另一方面,一个<span>标签或者普通的加粗的段落标签却在意味着次要一点。适当的用<h1>到<h6>标记你的标题,只需要你的
一点点努力,然而却让搜索引擎更容易的检索到你的页面,让人们最终能找到它们。
搜索引擎机器人会给予标题标签特别的关注——这是你可能放置一些关键词的地方。就象检索到<title>和<meta>,它们会顺着标题标签往页面下面查找。如果你不使用这些标签,那么包含在里面的关键词将不会被认为是有价值的,从而被忽略掉。

所以只要付出一点点的努力,你就能增加人们基于页面的内容找到你的站点的可能性。听上去不错,不是吗?

关于标题的次序

在范例中,这个特别的标题是页面中最重要的,因为它是文档的标题。因此,我们使用最重要的标题标签,<h1>。顺应W3C的规范,一些人认为跳过数个标题级是个不好的使用。举个例子,想象我们在下面的页面:
<h1>文章标题</h1>
我们接下去的标题(如果不是用另一个<h1>重复的话)应该是<h2>,然后是<h3>,等等。你也许不应该在<h1>后面跳过一级,直接跟上<h3>。我倾向于同意以上的观点,顺着行文保持级别的连续性,来构造一个排版结构。这样的话,给一个已经存在的页面添加标题和样式就更容易了,你会减少因使用超出的数字而导致的错误。

前面提到的,设计者也许会用<h4>来标签一个页面上最重要的标题,仅仅是因为它的缺省的字体尺寸不象<h1>那样令人生厌的巨大。但是记住,先结构,后设计。我们总是能用CSS来把标题样式化成任何我们喜欢的文字尺寸。

原文地址:http://www.w3cn.org/article/translate/2005/111.html

伴随着Web标准发展建议与好的实例

原作:Roger Johansson, 456 Berea Street (翻译:x5, x5studio )

1. 简介

本文阐述了Web标准是如何使一个开发者建设网站更加的节省时间与金钱,如何使浏览者获得更好的浏览经历,以及他们的原因。同时,讨论中还涉及到一些方法,准则和好的实例用来帮助您建设一个对尽可能多的人都充满亲和力的高质量的网站。

2. 历史

在90年代后期,当互联网和web逐渐成为主流时,Web浏览器的开发商还没有完全的支持CSS(层叠式样式表,对于Web开发人员来说,他们可以用CSS来控制Html文档的表现)。考虑到CSS1是在1996年制定的,而CSS2是在1998年才制定的,所以这种对CSS支持的不足也是可以理解的。

由于浏览器对CSS的支持不够,再加上一些平面设计师的要求(这些要求与他们经常与印刷品打交道有关)导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是,当设计师可以用border=”0″来隐藏表格的边框时,用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”(透明)的使用,同样是不可见,他们却使用空白的GIF图片来控制布局。

由于HTML从来就没被用来控制一个文档的表现,导致大量的乱码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说,标签汤(tag soup)是一个很形象的名字。

新版本的web浏览器的发布,使得对CSS的支持得到了加强与扩展,但是并没有达到它应有的水平。尽管浏览器的开发商对CSS支持的步伐很缓慢,但是现在已经有许多浏览器选择了支持CSS,此时,不应该再有任何理由再像以前那样使用HTML了,应该让它恢复本来的面貌:去描述文档的结构 ,而不是它的表现。 正因为此,我们现在才能够用CSS来达到其本来的目的了。 >>全文 继续阅读

网站设计的标准时代

出处:CSDN
作者:阿捷

本文观点:遵循国际网站标准(Web Standards)进行网站设计和改善。
阅读对象:网站设计人员、web应用开发人员
关键字:Web Standards、XML、XHML、CSS、DOM、DOCTYPE、Accessibility

前言

网络上的变革每天都在发生,当我们觉得网站设计技术已经非常简单和熟悉的时候。国外网站设计标准化的概念早已悄悄的形成和迅速“蔓延”,自2000年起,大部分新发行的浏览器版本都开始支持网站标准。主流的网页编辑工具也开始全面支持网站标准,甚至一些软件几乎完全由XML文件组成,例如Dreamweaver MX。一些著名的大型商业网站开始采用网站标准来重新构建(例如体育资讯www.espn.com),另外一些则拒绝非标准浏览器浏览它们的网站(例如连线杂志www.wired.com)。众多的设计网站(例如:www.k10k.net) 和个人网站更是标准推广的先行者,纷纷转向采用XHTML+CSS来建立。2004年2月4日XML1.1推荐标准正式发布,标志着网站设计的标准时代已经到来。

国外网站标准的声势汹涌,但国内业界显得有些后知后觉或者毫无兴趣,让我们来看看国内三大门户网站首页对网站标准的遵循情况:

校验项目 校验目标网站 校验结果
代码校验(XHTML)(校验地址:http://validator.w3.org/

(http://www.htmlhelp.com/tools/validator/ )

www.sina.com.cn 失败,混杂的HTML,未达到XHTML1。黄色警报:字符集错误。(定义了GB2312,但页内使用了非GB2312字符)。非标准代 码43处。
www.163.com 失败,混杂的HTML,未达到XHTML1。红色警报:未定义DOCTYPE。非标准代码41处。
www.sohu.com 失败,混杂的HTML,未达到XHTML1。黄色警报:字符集错误。非标准代码38处。
CSS2校验 (校验地址:http://jigsaw.w3.org/css-validator/validator-uri.html ) www.sina.com.cn 25处错误。
www.163.com 1处警告,10处错误。
www.sohu.com 1处警告,15处错误。

校验结果显示所有门户网站都没有符合网站标准,甚至连HTML4.0标准都没有遵循。举例来说:标签,早在1998年4月HTML4.0标准中就已经被W3C列为“不建议使用(deprecated)”标签。但我们的三大门户网站首页上都有不少类似的代码。这里的简单列表,目的不是批评这些网站做得不好(事实上大部分的大型商业站点都通不过W3C严格的正确性校验),有很多的原因造成这种状况,例如采用老的信息发布系统,网页设计人员的技术和意识不够等等。我们只是想说明一点:连比较规范的上市公司的网站都没有意识到遵循标准,其他规模教小的商业网站就更不用说,国内对网站标准没有足够的重视。

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

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

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

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

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

  • 提供最多利益给最多的网站用户
  • 确保任何网站文挡都能够长期有效
  • 简化代码、降低建设成本
  • 让网站更容易使用,能适应更多不同用户和更多网路设备
  • 当浏览器版本更新,或者出现新的网络交互设备时,确保所有应用能够继续正确执行。

对于网站设计和开发人员来说,遵循网站标准就是使用标准;对于你的网站用户来说,网站标准就是最佳体验。
访问量排名世界第4,中国第1的新浪网站,也遭遇非标准DHTML的问题。在最新发布的Netscape7和Mozila1.6浏览器中,新浪首页的漂浮广告全部失效,层叠挤在页面左下角。也许那些广告主认为损失这些潜在的用户无所谓。(截图日期2004年4月12日)

二、什么是网站标准

网站标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(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个主流浏览器版本中看起来一致。通常的特征是:

  • 以表格为基础的布局。
  • 内容与表现方式混杂在一起。典型的例子是标签。
  • 垃圾代码(非标准代码)。
  • 不易用的代码。
  • 语义不正确的代码。比如不解释的话,你根本不明白这是字体加粗的意思。

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

  • 语义正确的标识。即使用能够表达含义的标签。保证代码可以在文本浏览器、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可选择:

  • 过渡型(Transitional )
  • “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • 严格型(Strict )
  • “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  • 框架型(Frameset )

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

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

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

  • 设定一个名字空间(Namespace)

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

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

  • 声明你的编码语言

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

这里声明的编码语言是简体中文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可以接受不关闭的标,XHTML就不可以。

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

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

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一书)的策略能提高你的开发技术,开阔视野。提高你作为专业网页设计师的价值,使你更具竞争力。这正是每个网站所有者和每个设计师或开发者 要努力达到的目标。

六、网站标准的资源

1. 网站标准

http://www.zeldman.com/
http://webstandards.org/
http://webstandardsgroup.org/
http://www.nypl.org/styleguide/

2. 有语义代码

http://brainstormsandraves.com/articles/semantics/structure/

3. 校验(Validation )

http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
http://webboy.net/presentation/validation.cfm

4. 易用性(Accessibility )

http://www.joeclark.org/
http://www.accessify.com/
http://www.juicystudio.com/

5. 样式表CSS

http://webboy.net/presentation/ict2004/01.htm
http://webboy.net/presentation/ict2004/02.htm
http://webboy.net/presentation/ict2004/03.htm
http://westciv.com/style_master/academy/css_tutorial/
http://css.maxdesign.com.au
http://www.thenoodleincident.com/tutorials/css/

6. 实例站点(XHTML+CSS)

http://www.macromedia.com/
http://www.k10k.net
http://www.fyrebase.com/
http://www.onetruefit.com/
http://pixeltable.com/
http://www.fishmarketing.net/

附:参考文章及网站

Jeffrey Zeldman(www.zeldman.com)著作《Design with Web Standards》,该书已经由电子工业出版社引进,即将发行中文版。
Max Design的文章:《The benefits of Web Standards to your visitors, your clients and you!》http://www.maxdesign.com.au/presentation/benefits/index.htm
Mark Pilgrim 《Dive Into Accessibility》http://diveintoaccessibility.org
网站标准组织www.webstandards.org
网站标准团体www.webstandardsgroup.org

网易按web标准重构的首页

这个举动开创了四大门户首页改版的先河,也符合一向标榜以技术领先的网易风格。

把页面源代码粘到UE里有1193行,不过再删除多余的空行,就精简到了908行。
搜狐的1817行;新浪有3121行;TOM1815行;

不过网易首页自向西方风格(雅虎)转变后,页面内容相对本来就少…所以再和雅虎中国的首页对比了一下,有1458行…..
从这个简单的对比,就可以看出用web标准重构网站的优点了…同样的页面,用web标准重构,代码更精简。
另:网易首页的样式表全部写在了内部,如果采用外联,吼吼,又可以减少一百多行代码。

不过,为什么代码里有很大的空行呢?

CSS相关链接

CSS相关链接
作者:网页设计师
本CSS 相关资源链接来自CSSVault.com

文章

CSS+JavaScript

演示

思想理论

兼容技巧

图象处理

布局

列表处理

导航

定位

指南

工具

教程

web标准相关的一些链接

国外标准推广站点

1.网站标准

2.有语义代码

3.校验(Validation )

4.易用性(Accessibility )

5.样式表CSS

学习web标准的重要链接大全

学习web标准的重要链接大全
作者:阿捷 2004-7-2 0:34:07

<br/>#bonanza-list{<br/>LIST-STYLE-TYPE: none;<br/>line-height:180%;<br/>}<br/>#bonanza-list li{PADDING-LEFT:15px;<br/>background:url(images/icon_file.gif) transparent no-repeat 0px 0px;}<br/>#bonanza-list li a:link{COLOR:#60A179;}<br/>#bonanza-list li a:hover{COLOR:#3AAD7E;font-weight:bold;}<br/>

这是一笔财富,485个与web标准有关的、受人喜爱的站点、文章和blog被收集在这里。Steve SmithShaun Inman完成了这个列表,因此获益的我们应该感谢他们!

注:阿捷将陆续翻译其中的主要文章,如果您也有兴趣翻译,请email联系我,告诉我您翻译的文章名称,以免重复。欢迎将您翻译好的文章提供给本站推荐。来信也请注明您的版权声明。谢谢

最后更新:2004年6月21日