采用XHTML和CSS设计可重用可换肤网页

来源:岁月联盟 编辑:zhu 时间:2006-09-26
采用XHTML和CSS设计可重用可换肤网页内容简介:随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法,“XH

  随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法,“XHTML 是 html 的继承者”(http://www.w3.org/MarkUp/)。

  XHTML具有两大目标:

  • 在文档结构和表示形式之间创建更明显的分离。
  • 将 html 重新表示为 XML 的应用程序。

  使用XHTML标准的好处是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如,在按照标准生成以后,页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式显示,而无需完成任何额外的工作。并且XHTML标准可以使 Web 站点更易于为智能手机、残疾人电脑等设备访问。

  由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS样式表是必不可少的。CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。 在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本。

  CSS 的发明者的目的是除去表示性元素,即应该根据内容所表示的东西来标记内容,而样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致,(在XHTML 2.0将除去b 、 i 和 img 标记(以及 big 、 small 和 tt ),甚至不赞成使用 br ,准备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令,规定有关其内容应该如何显示,但却完全未提供有关其内容是什么的信息。) 因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料,请参见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html

  CSS过去经常被用来定义的属性,而现在新标准中我们将用它来控制整个页面的显示。然而,我们必须需要做一些不同于以往的处理来适应这种新的变化,如:使用div来布局而不是表格,使用结构化、语义化的标记等等。由于采用新的处理方式,我们现在可以轻松地设计出可重用的CSS(同一个样式文件多个WEB站点中使用)以及可换肤的WEB站点(一个站点使用多种不同风格的样式)。

  随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法,“XHTML 是 html 的继承者”(http://www.w3.org/MarkUp/)。

  XHTML具有两大目标:

  • 在文档结构和表示形式之间创建更明显的分离。
  • 将 html 重新表示为 XML 的应用程序。

  使用XHTML标准的好处是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如,在按照标准生成以后,页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式显示,而无需完成任何额外的工作。并且XHTML标准可以使 Web 站点更易于为智能手机、残疾人电脑等设备访问。

  由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS样式表是必不可少的。CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。 在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本。

  CSS 的发明者的目的是除去表示性元素,即应该根据内容所表示的东西来标记内容,而样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致,(在XHTML 2.0将除去b 、 i 和 img 标记(以及 big 、 small 和 tt ),甚至不赞成使用 br ,准备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令,规定有关其内容应该如何显示,但却完全未提供有关其内容是什么的信息。) 因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料,请参见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html

  CSS过去经常被用来定义的属性,而现在新标准中我们将用它来控制整个页面的显示。然而,我们必须需要做一些不同于以往的处理来适应这种新的变化,如:使用div来布局而不是表格,使用结构化、语义化的标记等等。由于采用新的处理方式,我们现在可以轻松地设计出可重用的CSS(同一个样式文件多个WEB站点中使用)以及可换肤的WEB站点(一个站点使用多种不同风格的样式)。


  /*文中的样式表语法中的"("及")"为示例所用,因为blog每次保存花括号都出现错误。请在使用时改为正确的符号*/

  BODY
  (
  background: url(images/bg_page.jpg);
  font: 10pt verdana,arial,;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  )
  H1, H2, H3, H4, H5, H6
  (
  border-bottom: solid 1px #ccc;
  margin: 1em 0;
  )
  TD
  (
  font: 10pt;
  )
  A:link
  (
  color: #057AE0;
  text-decoration: none;
  )
  A:visited
  (
  color: #057AE0;
  text-decoration: none;
  )
  A:hover
  (
  color: #009900;
  )
  A:active
  (
  color: #009900;
  )

  这样的一个样式文件,可以适用于任何一个网页,只要添加引用我们都可以立刻看见效果。

  由于样式表的继承规则是外部的标签样式会保留下来继承给这个标签所包含的其他标签。事实上,所有在标签中嵌套的标签都会继承外层标签指定的属性值,有时会把很多层标签的样式叠加在一起,例如在body标签中定义了大小,那么div、p等标签也会继承一样的大小,如果在P标签中又定义了颜色,那么P标签中的文字既具有body标签的大小又有P标签的颜色。需要注意的是,table标签不会继承body的大小设定,所以在上面的样式表中,我们单独来定义td的样式。

  3、定义好页面的结构布局

  很多时候,我们在制作网页时总是从视觉出发,先用或者Fireworks画出来、思考页面的配色,做一些很炫的效果,很精美的,再切割成小图。然后通过编辑HTML将所有设计变成页面。

  然而,有视觉的缺陷的人,不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。

  因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义,显示成任何外观,显示在任何支持XHTML的网络设备上。

  通过分析我们可以发现,对于大多数WEB来说,页面都是由一些类似的内容区块所组成,如:

  • 站点标题区
  • 站点导航(主菜单,次及菜单)
  • 功能区(例如搜索框、用户登陆区)
  • 内容区(文章正文或者文章、产品列表)
  • 页脚(版权和有关法律声明)

  然后我们用DIV标签来将这些区块包含起来,类似这样:

<div class="pageHeader">站点标题 
</div> 
<div class="pageNav">站点导航 
</div> 
<div class="catalogNav">栏目导航 
</div> 
<div class="pageContent">文章正文或列表等等 
</div> 
<div class="pageSearch">查询 
</div> 
<div class="pageBottom">页脚 
</div>

  通过CSS的定义,我们可以将这些DIV标签包含的区块放在页面上任何位置,再指定这些块的颜色、、边框、背景以及对齐属性等等。如:我们再建立siteLayout.css文件,定义如下:


 .pageHeader
  (
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 70px;
  )
  .pageNav
  (
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 30px;
  )
  .catalogNav
  (
  float: left;
  top: 130px;
  padding: 10px;
  border: 1px solid #666;
  width: 20%;
  )
  .pageSearch
  (
  float: left;
  top: 130px;
  padding: 10px;
  border: 1px solid #666;
  width: 20%;
  )
  .pageContent
  (
  float: left;
  padding: 10px;
  border: 1px solid #666;
  height: 400px;
  width: 60%;
  )
  .pageBottom
  (
  clear: both;
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 70px;
  )

  如此,我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度,当然您也可以将页面定义为中间只有两列等等,您只需要调整layout.css文件即可,这样您可以灵活的修改页面的布局,让页面外观发生根本的变化,而不必动到HTML源文件,这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料,请参见:http://www.w3cn.org/article/layout/2004/55.html
 .pageHeader
  (
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 70px;
  )
  .pageNav
  (
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 30px;
  )
  .catalogNav
  (
  float: left;
  top: 130px;
  padding: 10px;
  border: 1px solid #666;
  width: 20%;
  )
  .pageSearch
  (
  float: left;
  top: 130px;
  padding: 10px;
  border: 1px solid #666;
  width: 20%;
  )
  .pageContent
  (
  float: left;
  padding: 10px;
  border: 1px solid #666;
  height: 400px;
  width: 60%;
  )
  .pageBottom
  (
  clear: both;
  padding: 10px;
  border: 1px solid #666;
  height: 100px;
  height: 70px;
  )

  如此,我们定义了一个三列的页面布局:顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度,当然您也可以将页面定义为中间只有两列等等,您只需要调整layout.css文件即可,这样您可以灵活的修改页面的布局,让页面外观发生根本的变化,而不必动到HTML源文件,这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料,请参见:http://www.w3cn.org/article/layout/2004/55.html


  这样我们就有了3个CSS文件。 SiteComm.css:任何站点都可以使用的样式文件,定义了常用的html标签样式。 SiteLayout.css:站点的布局文件,能适用于大多数的结构,具体细节需要调整。 siteStyle.css:站点独有的样式文件,能显示出本站点独特的风格和适应于站点的内容。

  然后我们采用外部调用法:将这些样式表与页面关联起来。

<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">

  在符合XHTML标准的设计中,我们使用外部调用法,好处不言而喻,HTML文档会变得非常的小,CSS文件被存在浏览器的缓存中,仅仅需要下载一次即可,并且你只需要修改一个文件就可以改变整个的样式。

  并且这样我们才能通过客户端脚本,或者服务器端代码方便地改变样式表的连接地址,而快捷地实现换肤功能。

  5、根据用户设置换肤

  样式切换在网上已有很多现成的javascript换肤代码,一般使用cookie来保存用户设置,在请求页面时,改变页面的CSS文件连接即可。

  而服务器端的换肤做法是根据用户请求,动态地生成CSS文件连接,用户设置一般保存在数据库或者cookie中。

  由于我们使用了3个不同功能CSS样式文件来显示,所以我们可以设计出更加灵活的换肤方案和组合,如只切换主题而保留布局,和切换布局和主题,以及各种细节等等。

  使用3个CSS样式文件额外的好处是,每当我们设计一个新的,它的样式风格特性几乎都可以大部分应用到以前的上(因为我们采用大致相同的页面结构模型,虽然显示千差万别,但主要的框架是一样的),这样我们就可以积累出相当数量和相当风丰富的界面样式库来。

  6、通过校验

  整个过程的最后一个步骤就是对XHTML/CSS代码进行验证。有很多种的工具都可以帮你对二者进行验证。

  例如Dreamweaver MX即可检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来,还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。

  而Microsoft ASP.NET 2.0 具有很多有用的功能,也能帮助我们设计和生成符合 XHTML 和可访问性标准的 Web 站点。 使用 Web 标准生成 ASP.NET 2.0 Web 站点 http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx

  此外,World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。

  因此如果想要改善友好度,可用性,可访问性等,可将新标准视为一个机会,而不是一个障碍。要了解更多关于新标准和可访问性的内容,你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。

图片内容