ASP.NET2.0中themes、Skins轻松实现网站换肤!

asp.net

可能有些朋友还不是很清楚themes、skins。下面先介绍下themes、skins.。

一、简介:
一看Themes、Skins这2名字就都知道是用来做什么的了吧,下面就说下它是做什么的(怎么都知道了还说,~_~),利用Themes我们可以很容易的更改控件、页面的风格,而不需要修改我们的代码和页面文件。
Themes文件被单独的放在1个App_Themes文件夹下面,与你的程序是完全分开的。

二、怎么使用Themes和Skins:
先看个非常简单的实例:

App_Themes\default\1.skin文件代码:

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx:文件代码:

<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Page with Example Theme Applied</title>
</head>
<body>
  <form id="form1" runat="server">
      <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
      <asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />
  </form>
</body>
</html>

可以看到我们在default.aspx并没有写如何的控制style的代码,但运行取发现label上的字都变成了粗体红色了,这就是1个最基本的theme例子。

App_Themes文件夹:
App_Themes文件夹位于程序的根目录下,App_Themes下必须是Theme名称的子文件夹,子文件夹中可以包含多个.skin和.css文件。下图中建立2个Theme,名称分别为default和default2:

使用themes
1、在1个页面中应用Theme:
      如果想在某1个页面中应用Theme,直接在aspx文件中修改<%@ Page Theme="..." %>,比如你想这个页面应用default2 theme,设置<%@ Page Theme="default2" %>就OK

2、在所有页面应用同1个Theme:
      如果要在所有页面上使用相同的Theme,在web.config中的<system.web>节点下加上句<pages theme="..."/>

3、让控件不应用Theme:
        第1个例子中我们看到了2个Label的风格都变了,就是说.skin文件中的风格在页面上所有Label都起作用了。但有时我们希望某1个Label不应用.skin中的风格,这时你只需设置Label的EnableTheming属性为false的时候就可以了。
        也许你还想不同的label显示不同的风格,你只需设置label的SkinID属性就可以,见下面的实例:
 App_Themes\default\1.skin

<asp:label runat="server" font-bold="true" forecolor="Red" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
deafult.aspx

<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Page with Example Theme Applied</title>
</head>
<body>
  <form id="form1" runat="server">
      <asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />
      <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />
  </form>
</body>
</html>
运行后就会发现2个label显示的风格不一样了。

4、其他方法:
前面已经说了在aspx文件头使用 <%@ Page Theme="..." %> 来使用theme,而用这个方法应用theme中的风格将会覆盖你写在aspx中的控件属性style。比如:
 App_Themes\default\1.skin

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx

<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
  <form id="form1" runat="server">
      <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
      <asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />
  </form>
</body>
</html>
运行结果,所有的label的forecolor都为red。

 而使用<%@ Page StyleSheetTheme="..." %>应用theme就不会覆盖你在aspx文件中写的属性style:

控件应用style属性的顺序如下:
a、StyleSheetTheme引用的风格
b、代码设定的控件属性(覆盖StyleSheetTheme)
c、Theme引用的风格(覆盖前面2个)

theme中包含CSS:
        theme中也可以使用.css文件,当你把.css文件放在1个theme目录下后,在用到了这个theme的页面中自动会应用你的.css的

三、后台代码轻松为网站换府肤
        前面讲的都是在aspx文件或web.config中应用theme,而在blog这样的每个用户都有不同的skin的网站中用上面的方法来实现换skin显然是不方便的。
       下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况,theme必须在page被请求的最早期就应用上,所以我们必须在Page_PreInit事件中写代码,代码很简单,就1句:
        Page.Theme = "..."; 
这里我们只要从数据库中去读取每个用户设置的不同theme名就可以轻松实现每个用户都有不同的skin了。

------------------------------------------
以上都是个人的看法和体会,如有不妥处,还请大家多多指点,谢谢!

时间: 2024-10-24 18:49:40

ASP.NET2.0中themes、Skins轻松实现网站换肤!的相关文章

ASP.NET2.0中的ClientScriptManager 类用法

asp.net|client ASP.NET2.0中的ClientScriptManager 类用法-如何添加客户端事件 在ASP.NET2.0中,ClientScriptManager 类通过键 String 和 Type 唯一地标识脚本.具有相同的键和类型的脚本被视为重复脚本.因此,我们可以使用脚本类型来避免混淆可能用在页中的来自不同用户控件的相似脚本. <html>  <head>    <title>ClientScriptManager Example<

在Asp.Net2.0中可以方便的访问配置文件web.config,如判断debug设置,验证类型

Asp.Net2.0中我们可以方便的访问配置文件中,.NetFrameWork2.0新增加了 SystemWebSectionGroup 类. 允许用户以编程方式访问配置文件的 system.web 组. 比如判断web.config内是否为 debug="true",或者判断身份验证形式 SystemWebSectionGroup ws = new SystemWebSectionGroup(); CompilationSection cp = ws.Compilation; 用cp

asp.net2.0中导出EXCEL时内容为什么始终为空?[高分]

问题描述 asp.net2.0中导出EXCEL时内容为什么始终为空?实现方式,首先生成HTML摸板[格式如下,内容太长删除了一些]privateStringBuilderpHead=newStringBuilder();privateStringBuilderpBody=newStringBuilder();privateStringBuilderpFoot=newStringBuilder();publicRptSpareQuery(){pHead.Append("<htmlxmlns:

ASP.NET2.0中的超链接

问题描述 ASP.NET2.0中的超链接控件的下划线怎麽能让它消失,鼠标移过去后下划线又显示出来 解决方案 解决方案二:a:hover{text-decoration:none}

在ASP.NET2.0中通过Gmail发送邮件的代码_实用技巧

    在这里我们主要是使用Gmail,究其原因,是因为,我在使用Gmail的邮箱发送邮件的时候,遇到一小小的困难,而使用163等邮箱的时候,没遇到这个问题.     在ASP.NET2.0中,发送邮件是很简单的,我们主要使用来自命名空间System.Net.Mail中的几个类,MailMessage和SmtpClient.     核心代码是很简洁的,如下:     复制代码 代码如下:  string to = "这里填写接收者的Email地址";      string from

asp.net2.0中如何动态增加删除表格,在增加表格的同时能增加下拉列表控件?在线等

问题描述 asp.net2.0中如何动态增加删除表格,在增加表格的同时,表格中增加下拉列表控件>该如何实施?谢谢! 解决方案 解决方案二:昨晚天刚用JS写一个,给个参考吧-----------<scripttype="text/javascript">//印刷机组信息varmachineStr='<%=machineStr%>';//可开计划的产品编号和名称信息varproductionStr='<%=productionStr%>';//将印

ASP.NET 2.0中轻松实现网站换肤

asp.net 一.简介: 利用Themes我们可以很容易的更改控件.页面的风格,而不需要修改我们的代码和页面文件.Themes文件被单独的放在1个App_Themes文件夹下面,与你的程序是完全分开的. 二.怎么使用Themes和Skins: 先看个非常简单的实例: App_Themes\default\1.skin文件代码: <asp:Label Font-Bold="true" ForeColor="Red" runat="server&quo

原创:在ASP.NET2.0中实现主页嵌套

asp.net|原创 现在的很多商业公司都设有不同的部门,而这些部门在公司的网站上都有自己的子网站.一般情况下,每一个部门都会根据自己的需要来维护各自的网站.这样做虽然会使公司的网站显得丰富多彩,但这却会对用户的访问带来不便,也就是说,由于各个部门的子网站没有保持一致性而使用户在浏览网站时造成了困难.幸运的是,ASP.NET2.0为我们提供了一种解决方案,这就是主页嵌套. <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:

Asp.Net2.0中实现多任务异步页的一点提示

asp.net|异步     如果想学习Asp.Net2.0的异步页技术,那么一定要仔细阅读http://www.microsoft.com/china/MSDN/library/default.mspx?mfr=true,并且下载它的源代码仔细揣摩.全文共介绍了3种实现异步页的编程模型,且功能一种比一种强大.多余的我就不多说了,直接看最后一种模型:使用PageAsyncTask类.RegisterAsyncTask方法.ExecuteRegisteredAsyncTasks方法和Timeout