网站设计的标准时代

来源:本站整理  作者:阿捷
摘要:注:本文已经在CSDN刊登,转载请联系CSDN本文观点:遵循国际网站标准(Web Standards)进行网站设计和改善。阅读对象:网站设计人员、web应用开发人员关键字:Web Standards、XML、XHML、CSS、DOM、DOC……
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.网站标准 2.有语义代码 3.校验(Validation ) 4.易用性(Accessibility ) 5.样式表CSS 6.实例站点(XHTML+CSS) 附.参考文章及网站
  • 【相关文章】好搜一下
    兼容标准XHTML的浮动层特效实现

    兼容标准XHTML的浮动层特效实现

    1. 浮动层的显示、移动一个简单的例子:div id="mydiv" style…