<P> 当然,换皮之前你需要先按W3C标准建好你的<a href=http:///edu/management/ target=_blank>网站</
当然,换皮之前你需要先按W3C标准建好你的网站,并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”,我们要做的,只是用某种方法让浏览器载入另一套CSS,重新渲染页面。方法有很多种,我就介绍最常见的三种。
方法一:什么也不干
啊?什么也不干?嗯,这个……准确地说是:就干那么一丁点儿 (你还真以为有这么好的事儿呀……)。
假设我们有两套CSS,分别封闭在两个不同的文件中:http://www.xker.com/page/e2007/0104/a.css和http://www.xker.com/page/e2007/0104/b.css。然后在<head>和</head>之间加入如下两行XHTML代码:
|
<link rel="stylesheet" type="text/css" <link rel="alternate stylesheet" type="text/css" |
然后用你的Firefox打开这个页面,在菜单栏中选择:查看 -> 页面风格,应该可以看到如下的“风景”:
就这么简单,现在你就可以用Firefox来“换皮”了。IE?IE没这个功能……MS就是这么拽,W3C“明文推荐”:要求浏览器提供给用户自己选择样式表的权力,可它就不这么干。幸运的是这件事也不是太难杂,咱就代劳一下吧。
方法二:Javascript
在方法一的基础上,可以用Javascript的DOM方法访问link对象,再将不需要的CSS设为“禁用(disabled)”,剩下的CSS就会被浏览器用来渲染页面。脚本如下,请注意其中的注释:
|
<script type="text/javascript"> //预定义变量 //用DOM方法获得所有的link元素 //判断此link元素的rel属性中是否有style关键字 //先不管三七二十一把它设为disabled //再判断它的title中是否有我们指定的关键字 //如果有则将其激活 |
然后在合适的地方调用这个函数,以本页为例,添加如下两个按钮:
| <input type="button" value="清光" onclick="setStyle('清光');" /><input type="button" value="冥焰" onclick="setStyle('冥焰');" /> |
使用Javascript的好处是方便、快捷、简单,缺点也是很明显的:很难做到全站的CSS切换,只能局限在当前页上。为了记忆用户的选择,可行的方案就是采用cookie。可是就算使用cookie,也需要在何时载入CSS,用户没有Javasciprt支持怎么办等问题上多做好些文章。所以不如用下面的方法——
方法三:服务器端脚本
毫无疑问,最好的CSS切换器应该使用服务器端脚本(PHP、ASP、JSP等)来开发。这样做的好处是很明显的:直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的CSS实现相当复杂的“皮肤”切换。
我这里就用PHP为例,用其他的语言也都大同小异,对一般的开发人员来说不会有任何困难。
基本思路是这样:用户选择一种“皮肤”,把用户的选择记入cookIE(记入数据库也一样,不过这样系统开销会大一些),用户访问网站上的任何一个页面时,再从cookie(或数据库)中读出之前用户的选择,载入相应的CSS文件(这里还是以方法一中讲到的http://www.xker.com/page/e2007/0104/a.css和http://www.xker.com/page/e2007/0104/b.css为例)。
创建一个名为switcher.php的文件,内容如下:
| <?php$style = $_GET["style"];setcookie('style',$style,time() +31536000,'/','.site.com','0'); header("location:".$_SERVER['HTTP_REFERER']);?> |
尽管可以用<img>直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用<img>元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。
这样做的原因有2点:
- 将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分离》),用CSS控制所有的外观表现,便于改版。
- 使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
RSS订阅
已有