采用XHTML和CSS设计可重用可换肤的WEB站点

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd>
随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年  6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法,“XHTML 是  html 的继承者”( ::URL:: 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的资料,请参见: ::URL:: 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,CO DE等标签来显示数据,用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文件,定义如下: 

 
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、定义好页面的结构布局
很多时候,我们在制作网页时总是从视觉出发,先用Photoshop或者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布局的资料,请参见: ::URL:: http://www.w3cn.org/article/layout/2004/55.html  

4、定义站点独有的样式 
经过以上两步之后,我们已经有了一个大概的页面主题外观,接下来我们要设计站点的细节,比如,对站点导航条我们想使用与普通超链接不一样的样式,如:蓝色、加粗、字体更大、再加上有立体效果的背景图:

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;  
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;  

 对于栏目导航,我们想给每个栏目连接加上背景色,并且有鼠标滑过和移出的效果。 栏目导航区的html代码为: 

<div class="catalogNav"> 
        <ul> 
            <li> 
                <A href="1">栏目1</A> 
            <li> 
                <A href="2">栏目2</A> 
            <li> 
                <A href="3">栏目3</A> 
            <li> 
                <A href="4">栏目4</A> 
            <li> 
                <A href="5">栏目5</A> 
            <li> 
                <A href="6">栏目6</A> 
            </li> 
        </ul> 
    </div> 
栏目导航区对应的Css代码为: 

.catalogNav ul 

    margin-left: -30px; 
    list-style: none; 

.catalogNav li 

    float: left; 
    background: #CCC; 
    line-height: 30px; 
    border: solid 1px #black; 

.catalogNav a 

    width: 100%; 
    text-align: center; 
    height: 30px; 

.catalogNav a:link 

    color: #666; 
    background: url(arrow_off.gif) #CCC no-repeat 5px 12px; 
    text-decoration: none; 

.catalogNav a:visited 

    color: #666; 
    text-decoration: underline; 

.catalogNav a:hover 

    color: #FFF; 
    font-weight: bold; 
    text-decoration: none; 
    background: url(arrow_on.gif) #F00 no-repeat 5px 12px; 

接下来我们还需要定义其他的站点独有的样式,如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式,而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的,不适用于其他的站点,然后我们将这些样式保存为siteStyle.css文件。 

这样我们就有了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、根据用户设置换肤
网站样式切换在网上已有很多现成的javas cript换肤代码,一般使用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 站点  ::URL:: 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)。
本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2007/01/03/2912448.html   ,如需转载请自行联系原作者
相关文章
|
3月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
108 2
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
53 1
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
257 91
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
24 4
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
54 2
|
2月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
67 28
|
1月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
2月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
49 15
|
2月前
|
前端开发
|
2月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。

热门文章

最新文章

下一篇
无影云桌面