网站的设计标准化(三)

upring

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规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个<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/

http://idcer.taobao.com