带来一篇网页作风化用CSS完成皮肤合时切换

只看该作者 · 发表于 2015-1-16 00:21:22

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
用W3C尺度制作的网站，从实际下去说能够做到完整的体现与布局相分别。打个例如，就是能够在不动骨架（布局，XHMTL）和肌肉（举动，Javascript）的条件下，彻完全底地换一身皮（体现，CSS）。
固然，换皮之前你必要先按W3C尺度建好你的网站，而且为它筹办两套体现纷歧样的CSS。“换皮”本色上就是“换CSS”，我们要做的，只是用某种办法让扫瞄器载进另外一套CSS，从头衬着页面。办法有良多种，我就先容最多见的三种。
办法一：甚么也不干
啊？甚么也不干？嗯，这个……正确地说是：就干那末一丁点儿（你还真觉得有这么好的事儿呀……）。
假定我们有两套CSS，分离关闭在两个分歧的文件中：a.css和b.css。然后在<head>和</head>之间到场以下两行XHTML代码：
然后用你的Firefox翻开这个页面，在菜单栏当选择：检察->页面作风，应当能够看到以下的“光景”：

登录/注册后可看大图

就这么复杂，如今你就能够用Firefox来“换皮”了。IE？IE没这个功效……MS就是这么拽，W3C“明文保举”：请求扫瞄器供应给用户本人选择款式表的权利，可它就不这么干。侥幸的是这件事也不是太难杂，咱就代庖一下吧。
办法二：Javascript
在办法一的基本上，能够用Javascript的DOM办法会见link工具，再将不必要的CSS设为“禁用（disabled）”，剩下的CSS就会被扫瞄器用来衬着页面。剧本以下，请注重个中的正文：
然后在符合的中央挪用这个函数，以本页为例，增加以下两个按钮：
<inputtype="button"value="清光"onclick="setStyle(清光);"/><inputtype="button"value="冥焰"onclick="setStyle(冥焰);"/>　　
利用Javascript的优点是便利、快速、复杂，弱点也是很分明的：很难做到全站的CSS切换，只能范围在以后页上。为了影象用户的选择，可行的计划就是接纳cookie。但是就算利用cookie，也必要在什么时候载进CSS，用户没有Javasciprt撑持怎样办等成绩上多做好些文章。以是不如用上面的办法――
办法三：服务器端剧本
毫无疑问，最好的CSS切换器应当利用服务器端剧本（PHP、ASP、JSP等）来开辟。如许做的优点是很分明的：间接、高效、兼容性好、能够影象用户选择、乃至能够组合分歧的CSS完成相称庞大的“皮肤”切换。
我这里就用PHP为例，用其他的言语也都迥然不同，对一样平常的开辟职员来讲不会有任何坚苦。
基础思绪是如许：用户选择一种“皮肤”，把用户的选择记进cookie（记进数据库也一样，不外如许体系开支会年夜一些），用户会见网站上的任何一个页面时，再从cookie（或数据库）中读出之前用户的选择，载进响应的CSS文件（这里仍是以办法一中讲到的a.css和b.css为例）。
创立一个名为switcher.php的文件，内容以下：
<?php$style=$_GET["style"];setcookie(style,$style,time()+31536000,/,.site.com,0);header("location:".$_SERVER[HTTP_REFERER]);?>　
这段剧本先读取query数据，然后把参数style的值记进cookie，最初前往上一页。接上去我们就能够创立两个用于切换款式的链接了，而且放在符合的页面上，好比首页或用户办理背景（注重把个中的site.com换成你的域名）：
<ahref="switcher.php?style=a">主题A</a>
<ahref="switcher.php?style=b">主题B</a>　　
点击恣意一个链接，响应的就会把“a”或“b”记进cookie，然后就必要一段剧本来读取这个cookie值而且输入XHTML来引进对应的CSS：
<?phpif(isset($_COOKIE["style"])){$style=$_COOKIE["style"];}else{$style="a";//默许接纳主题A}?>
<linkrel="stylesheet"type="text/css"
title="以后选择的主题"href="<?phpecho$style?>.css"/>
每个必要切换款式的页面都要加上这段代码，以是间接把它到场网站的头文件中就好了。固然你能够依据本人的必要修正这个剧本，但万变不离其宗，总的思绪应当是稳定的。

<scripttype="text/javascript">
functionsetStyle(title){
//预界说变量
vari,links;
//用DOM办法取得一切的link元素
links=document.getElementsByTagName("link");

for(i=0;links;i++){
//判别此link元素的rel属性中是不是有style关头字
//即此link元素是不是为款式表link
//同时判别此link元素是不是含有title属性
if(links.getAttribute("rel").indexOf("style")!=-1
&&links.getAttribute("title")){
//先不论三七二十一把它设为disabled
links.disabled=true;
//再判别它的title中是不是有我们指定的关头字
if(links.getAttribute("title").indexOf(title)!=-1)
//假如有则将其激活
links.disabled=false;
}
}
}
</script>

<linkrel="stylesheet"type="text/css"
title="主题A"href="a.css"/>
<linkrel="alternatestylesheet"type="text/css"
title="主题B"href="b.css"/>
</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

只看该作者 · 发表于 2015-1-17 23:14:35

可以使用CSS检查工具进行设计。

只看该作者 · 发表于 2015-1-21 11:45:54

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-1-30 17:29:18

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-6 14:34:04

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-16 15:07:15

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-3-5 07:18:49

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-12 00:56:53

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-19 17:29:53

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇网页作风化用CSS完成皮肤合时切换

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

[DIV+CSS] 带来一篇网页作风化 用CSS完成皮肤合时切换

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

[DIV+CSS] 带来一篇网页作风化用CSS完成皮肤合时切换