网站设计的标准时代
接下来我们的改善主要在结构和表现相分离上,这一步不象第一步那么容易实现,我们需要观念上的转变,以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的,不是吗?诀窍在于边做边学。假如你一直采用表格布局,根本没用过 CSS,也不必急于跟表格布局说再见,你可以先用样式表代替 font 标签。随着你学到的越多,你能做的就越多。好,一起来看看我们需要做哪些事:
我们在写标识时已经养成习惯,当希望字体大点就用<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关掉圆点。
给表格或表单赋予一个唯一的、结构的标记,例如
<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/
- http://validator.w3.org/
- http://www.htmlhelp.com/tools/validator/
- http://webboy.net/presentation/validation.cfm
- 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/
- 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