XHTML CSS制做款式设计风格切换的WEB站点

2021-03-16 07:02 jianzhan
伴随着XHTML的慢慢营销推广时兴,HTML在很多场所早已显得落伍。WorldWideWebConsortium(W3C)于2000年6月26日公布了XHTML的第1个版本号做为强烈推荐规范。XHTML规范的总体目标是替代html。依照W3C的说法,“XHTML是html的承继者”(http://www.w3.org/MarkUp/)。
XHTML具备两大总体目标:
在文本文档构造和表明方式之间建立更显著的分离出来。
将html再次表明为XML的运用程序流程。
应用XHTML规范的益处是:只需设计方案网页页面1次,便可让该页以彻底同样的方法在任何当代的访问器中显示信息和工作中。比如,在依照规范转化成之后,网页页面在InternetExplorer、MozillaFirefox、NetscapeNavigator、Opera、Camino和Safari)中以同样的方法显示信息,而不用进行任何附加的工作中。而且XHTML规范可使Web站点更容易于为智能化手机上、残疾人电脑上等机器设备浏览。
因为XHTML规范规定在在文本文档构造和表明方式之间建立更显著的分离出来。因而应用CSS款式表是必不能少的。CSS在网页页面中占着极关键的影响力,它的应用1直是热门探讨的话题。CSS是CascadingStyleSheet的简写,译为“堆叠款式表单”。在1997年W3C施行HTML4规范的另外也发布了相关款式表的第1个规范CSS1,自CSS1的版本号以后,又在1998年5月公布了CSS2版本号。
CSS的创造发明者的目地是去除表明性元素,即应当依据內容所表明的物品来标识內容,而款式表应当用于清理內容。而这1点与XHTML分离出来文本文档构造和表明方式的总体目标是1致,(在XHTML2.0将去除b、i和img标识(和big、small和tt),乃至不赞同应用br,提前准备从未来的发售版中去除它。缘故在于大多数数标识全是表明性的。它们的唯1目地便是给予访问器命令,要求相关其內容应当怎样显示信息,但却彻底未出示相关其內容是甚么的信息内容。)因而它们变成最好是的协作小伙伴。更多有关XHTML2.0的材料,请参照:http://www⑴28.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
CSS以往常常被用来界定字体样式的特性,而如今新规范中大家将用它来操纵全部网页页面的显示信息。但是,大家务必必须做1些不一样于过去的解决来融入这类新的转变,如:应用div来合理布局而并不是报表,应用构造化、词义化的标识这些。因为选用新的解决方法,大家如今能够轻轻松松地设计方案出可重用的CSS(同1个款式文档好几个WEB站点中应用)和可换肤的WEB站点(1个站点应用多种多样不一样设计风格的款式)。
示例请见4川省基本建设厅信息内容门户网,页面切换在右上方,如图1所示。因为時间缘故,仍未根据XHTML和CSS校检,但基本原理是1样的。
图1:页面款式切换
1、再次设计方案站点的HTML
最先大家要去掉网页页面中相关外型的标识。在之前的编码中,大家常见1个报表用来在网页页面的內容中建立1个有边框的区块,大家还应用〈b〉来加粗文字。用<fontcolor=red>来更改字体样式色调这些。用<br>标识来建立段落等。
而要做出能融入XHTML规范和能随便换肤的网站,大家需要防止在网页页面中应用相关外型的标识。使文本文档构造和表明方式分离出来的1个最大的益处便是它使文本文档在沒有CSS时,依然可使用和浏览。主要表现(便是文本文档看上去的模样)在1个适用性好的访问器中也将展现的不1样,可是它的內容将始终不会改变,大多数数状况,针对浏览网站的人来讲,內容具体上比主要表现的方法更为关键。这便是为何给那些适用性不太好的访问器推送1个沒有款式的网页页面,要比把她们抵触出外好些的缘故。
如今较为时兴的做法是应用DIV、SPAN等标识来合理布局全部网页页面,而TABLE,UL,PRE,CODE等标识来显示信息数据信息,用UL是用来显示信息无序的目录信息内容,而OL显示信息井然有序的目录信息内容。这将比用TABLE来显示信息1个目录更有词义上的实际意义,另外UL和OL在访问器中比TABLE标识更快有免费下载速率,而且相对TABLE,CSS对UL和OL的外型操纵更为灵便。自然针对繁杂的数据信息,例如表格,用TABLE来显示信息依然是不2的挑选。
2、创建基础的通用性款式
因为全部的XHTML文档全是由各种各样各种各样的HTML标识和标识内的文本构成,而1些基础的标识在每一个XHTML文档都存在的,如:body、table、td、div、h1—h6、ul、li、input这些,假如大家界定好了这些标识的CSS款式,如:字体样式,字号,行距,情况色,情况图这些,大家就有了1个基础的款式设计风格,就好似在Word或PowerPoint中的主题,每一个主题便是1套设计风格款式。因而,大家能够依据基础的HTML标识界定出1个通用性的款式来,比如创建1个siteComm.css文档,界定以下:
/*文中的款式表英语的语法中的"("及""为示例所用,由于blog每次储存花括号都出現不正确。请在应用时改成正确的标记*/
BODY
(
background:url(images/bg_page.jpg);
font:10ptverdana,arial,;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
)
H1,H2,H3,H4,H5,H6
(
border-bottom:solid1px#ccc;
margin:1em0;
)
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;
)
这样的1个款式文档,能够可用于任何1个网页页面,要是加上引入大家都可以以马上看奏效果。
因为款式表的承继标准是外界的标识款式会保存下来承继给这个标识所包括的别的标识。客观事实上,全部在标识中嵌套循环的标识都会承继外层标识特定的特性值,有时会把许多层标识的款式叠加在1起,比如在body标识中界定了字体样式尺寸,那末div、p等标识也会承继1样的字体样式尺寸,假如在P标识中又界定了字体样式色调,那末P标识中的文本既具备body标识的字体样式尺寸又有P标识的字体样式色调。必须留意的是,table标识不容易承继body的字体样式尺寸设置,因此在上面的款式表格中,大家独立来界定td的款式。
3、界定好网页页面的构造合理布局
许多情况下,大家在制做网页页面时一直从视觉效果考虑,先用Photoshop或Fireworks画出来、思索网页页面的配色,做1些很炫的实际效果,很精致的照片,再激光切割成小图。随后根据编写HTML将全部设计方案变为网页页面。
但是,有视觉效果的缺点的人,不可以了解这些色调或实际效果。PDA、挪动电話和显示屏阅读文章机上也没法分析这些实际效果。
因而外型其实不是最关键的。1个构造优良的XHTML能够根据CSS的不一样界定,显示信息成任何外型,显示信息在任何适用XHTML的互联网机器设备上。
根据剖析大家能够发现,针对大多数数WEB网站来讲,网页页面全是由1些相近的內容区块所构成,如:
站点题目区
站点导航栏(主菜单,次及菜单)
作用区(比如检索框、客户登录区)
內容区(正文或文章内容、商品目录)
页脚(版权和相关法律法规申明)
随后大家用DIV标识来将这些区块包括起来,相近这样:
<divclass="pageHeader">站点题目
</div>
<divclass="pageNav">站点导航栏
</div>
<divclass="catalogNav">栏目导航栏
</div>
<divclass="pageContent">正文或目录这些
</div>
<divclass="pageSearch">查寻
</div>
<divclass="pageBottom">页脚
</div>
根据CSS的界定,大家能够将这些DIV标识包括的区块放在网页页面就任何部位,再特定这些块的色调、字体样式、边框、情况和对齐特性这些。如:大家再创建siteLayout.css文档,界定以下:
.pageHeader

padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;

.pageNav

padding:10px;
border:1pxsolid#666;
height:100px;
height:30px;

.catalogNav

float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;

.pageSearch

float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;

.pageContent

float:left;
padding:10px;
border:1pxsolid#666;
height:400px;
width:60%;

.pageBottom

clear:both;
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;

这般,大家界定了1个3列的网页页面合理布局:顶部自融入网页页面宽度。正中间3列自融入网页页面。底部自融入网页页面宽度,自然您还可以将网页页面界定为正中间仅有多列这些,您只必须调剂layout.css文档便可,这样您能够灵便的改动网页页面的合理布局,让网页页面外型产生压根的转变,而无须动到HTML源文档,这1点针对服务器端转化成编码的程序流程尤其关键。更多有关CSS合理布局的材料,请参照:http://www.w3cn.org/article/layout/2004/55.html
4、界定站点特有的款式
历经以上两步以后,大家早已有了1个大约的网页页面主题外型,接下来大家要设计方案站点的细节,例如,对站点导航栏条大家想应用与一般超连接不1样的款式,如:蓝色、加粗、字体样式更大、再再加有立体式实际效果的情况图:
.pageNava:link,.pageNava:hover,.pageNava:visted(Color:#36c;
font-weight:bold;font-size:120%;background:url(images/bg_siteMenu.jpg)#36c;
)
针对栏目导航栏,大家想给每一个栏目联接再加情况色,而且有电脑鼠标滑过和移出的实际效果。栏目导航栏区的html编码为:
<divclass="catalogNav">
<ul>
<li>
<Ahref="1">栏目1</A>
<li>
<Ahref="2">栏目2</A>
<li>
<Ahref="3">栏目3</A>
<li>
<Ahref="4">栏目4</A>
<li>
<Ahref="5">栏目5</A>
<li>
<Ahref="6">栏目6</A>
</li>
</ul>
</div>
栏目导航栏区对应的Css编码为:
.catalogNavul
(
margin-left:⑶0px;
list-style:none;
)
.catalogNavli
(
float:left;
background:#CCC;
line-height:30px;
border:solid1px#black;
)
.catalogNava
(
width:100%;
text-align:center;
height:30px;
)
.catalogNava:link
(
color:#666;
background:url(arrow_off.gif)#CCCno-repeat5px12px;
text-decoration:none;
)
.catalogNava:visited
(
color:#666;
text-decoration:underline;
)
.catalogNava:hover
(
color:#FFF;
font-weight:bold;
text-decoration:none;
background:url(arrow_on.gif)#F00no-repeat5px12px;
)
接下来大家还必须界定别的的站点特有的款式,如栏总体目标题、文章内容目录、正文、時间、注解、提醒、不正确这些各种各样款式,并且这些款式多以类和id来做为挑选符。这些款式全是对于某个站点的,不可用于别的的站点,随后大家将这些款式储存为siteStyle.css文档。
这样大家就有了3个CSS文档。SiteComm.css:任何站点都可以以应用的款式文档,界定了常见的html标识款式。SiteLayout.css:站点的合理布局文档,能可用于大多数数的网站构造,实际细节必须调剂。siteStyle.css:站点特有的款式文档,能显示信息出本站点与众不同的设计风格和融入于站点的內容。
随后大家选用外界启用法:将这些款式表与网页页面关系起来。
<LINKrev="stylesheet"media="all"href="css/SiteComm.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/SiteLayout.css"type="text/css"rel="stylesheet">
<LINKrev="stylesheet"media="all"href="css/siteStyle.css"type="text/css"rel="stylesheet">
在合乎XHTML规范的设计方案中,大家应用外界启用法,益处显而易见,HTML文本文档会变得十分的小,CSS文档被存在访问器的缓存文件中,仅仅必须免费下载1次便可,而且你只必须改动1个文档便可以更改全部网站的款式。
而且这样大家才可以根据顾客端脚本制作,或服务器端编码便捷地更改款式表的联接详细地址,而便捷地完成换肤作用。
5、依据客户设定换肤
网站款式切换在网络上已有许多现成的javascript换肤编码,1般应用cookie来储存客户设定,在恳求网页页面时,更改网页页面的CSS文档联接便可。
而服务器端换肤做法是依据客户恳求,动态性地转化成CSS文档联接,客户设定1般储存在数据信息库或cookie中。
因为大家应用了3个不一样作用CSS款式文档来显示信息网站,因此大家能够设计方案出更为灵便的换肤计划方案和组成,如只切换主题而保存合理布局,和切换合理布局和主题,和各种各样细节这些。
应用3个CSS款式文档附加的益处是,每当大家设计方案1个新的系统软件,它的款式设计风格特点基本上都可以以绝大多数运用到之前的系统软件上(由于大家选用大概同样的网页页面构造实体模型,尽管显示信息千差万别,但关键的架构是1样的),这样大家便可以累积出非常数量和非常风丰富多彩的页面款式库来。
6、根据校检
全部全过程的最终1个流程便是对XHTML\CSS编码开展认证。有许多种的专用工具都可以以帮你对2者开展认证。
比如DreamweaverMX便可查验我的样版编码的可浏览性。你能够根据在文档菜单选中择CheckPage随后挑选CheckAccessibility来完成。任何不正确或是警示都会显示信息出来,还包含出現部位的行号和对难题扼要的解释。你能够在DreamweaverMX的Reference专用工具中寻找更多有关这些不正确和警示的內容。
而MicrosoftASP.NET2.0具备许多有效的作用,也能协助大家设计方案和转化成合乎XHTML和可浏览性规范的Web站点。应用Web规范转化成ASP.NET2.0Web站点http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx
另外,WorldWideWebConsortium(W3C)出示了超出30个的可浏览性评定专用工具的连接。W3C还出示了对于HTML和CSS的根据Web的完全免费认证器。
因而假如要想改进网站友善度,能用性,可浏览性等,可将新规范视作1个机遇,而并不是1个阻碍。要掌握更多有关新规范和可浏览性的內容,你能够去看1看WorldWideWebConsortium中的WebAccessibilityInitiative(WAI)。