最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

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

日期:02-27    来源:|    作者:

随着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站点(一个站点使用多种不同风格的样式)。

示例请见四川省建设厅信息门户,界面切换在右上方,如图1所示。由于时间原因,并未通过XHTML和css校验,但原理是一样的。
图1:界面样式切换

1、重新设计站点的HTML

首先我们要去掉网页中有关外观的标签。在以前的代码中,我们常用一个表格用来在页面的内容中创建一个有边框的区块,我们还使用〈b〉来加粗文本。用<font color=red>来改变字体颜色等等。用<br>标签来创建段落等。

而要做出能适应XHTML标准和能随意换肤的网站,我们须要避免在页面中使用有关外观的标签。使文档结构和表示形式分离的一个最大的好处就是它使文档在没有css时,仍然可以使用和访问。表现(就是文档看上去的样子)在一个支持性好的浏览器中也将呈现的不一样,但是它的内容将永远不变,大多数情况,对于访问网站的人来说,内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面,要比把他们排斥在外要好的原因。

现在比较流行的做法是使用DIV、SPAN等标签来布局整个页面,而TABLE,UL,PRE,CODE等标签来显示数据,用UL是用来显示无序的列表信息,而OL显示有序的列表信息。这将比用TABLE来显示一个列表更有语义上的意义,同时UL和OL在浏览器中比TABLE标签更快有下载速度,并且相对于TABLE,css对UL和OL的外观控制更加灵活。当然对于复杂的数据,比如报表,用TABLE来显示仍然是不二的选择。

2、建立基本的通用样式

由于所有的XHTML文件都是由各种各样的HTML标签和标签内的文字组成,而一些基本的标签在每个XHTML文件都存在的,如:body、table、td、div、h1—h6、ul、li、input等等,如果我们定义好了这些标签的css样式,如:字体,字号,行距,背景色,背景图等等,我们就有了一个基本的样式风格,就如同在word或PowerPoint中的主题,每个主题就是一套风格样式。 因此,我们可以根据基本的HTML标签定义出一个通用的样式来,例如建立一个siteComm.css文件,定义如下:

/*文中的样式表语法中的"("及")"为示例所用,因为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;
)

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