网站皮肤的使用方法总结

最近做一个电子商务的项目，在里面就应用了AJAX、网站皮肤、WebParts这些个东东，下面就是我使用了Theme/Skin之后的一点小结，仅供大家参考，希望对大家有所帮助。
利用Themes我们可以很容易的更改控件、页面的风格，而不需要修改我们的代码和页面文件。那么我们就先来看一下这Theme/Skin文件是怎么样创建的吧。Themes文件单独的放在1个App_Themes文件夹下面，与你的程序是完全分开的，使之更容易管理。
具体方法如下：项目点右键，选择“添加ASP.NET文件夹”下的“主题”，再右键点添加新项，选择“外观文件（skin）”
接下来我们来看一下它具体是怎么用的，好的不着急，且听我慢慢道来。。。
一、我们先来看一下简单的应用
1、编写.Skin文件
skin1.skin

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

2、将写好的skin文件应用到aspx页面中
.aspx页面

< %@ Page Language = " vb "  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 >

可以看到我们在.aspx并没有写Label的样式，但运行后发现label上的字都变成了粗体红色了，这就是最简单的一个使用Theme的例子。

上面的这个方法是在项目的一个页面上应用Theme，如果要想在项目的所有页面上都应用该样式，那就这样做：
在web.config中的<system.web>节下加上句<pages theme="..."/>就可以，试试吧！
二、我们再来看一下其稍微复杂一点的应用
1、有时候就关是上面这种简单的应用满足不了我们的要求，我们想让页面上的同一控件应用不同的样式，那怎么来做呢，我们先来看个例子：
skin2.skin

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

.aspx页面

< %@ Page Language = " vb "  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 >

在家注意了，我呢在skin文件中其中一个label的样式里加了SkinID="...",在.aspx页面的其中一个Label控件里面也加上SkinID="..."，这样的话，相应的样式就应用到指定的控件上了。运行后就会发现2个label显示的风格不一样了。
2、下面再来看个例子：
skin1.skin

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

.aspx页面

< %@ Page Language = " vb "  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。
那么我们如果想要上面的那个页面里面的Label2的ForeColor为blue的话，这时候我们就要再Page标签里用这么个东东：StyleSheetTheme="..."
使用<%@ Page StyleSheetTheme="..." %>应用theme是不会覆盖你在aspx文件中写的属性style
说到这里，我们就要来看一下这个Theme使用的优先级了：
  a、StyleSheetTheme引用的风格
  b、代码设定的控件属性(覆盖StyleSheetTheme)
  c、Theme引用的风格(覆盖前面2个)
三、我们再来看一下怎么样实现动态换肤，从而实现页面的个性化
下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况，theme必须在page被请求的最早期就应用上，所以我们必须在Page_PreInit事件中写代码，代码很简单，就一句：Page.Theme = "..."

页面执行的时候，取得所保存的主题：

protected   Sub Page_PreInit() sub Page_PreInit(object sender, EventArgs e)
  
    if (Session["Theme"] is nothing) then
    
      ' No theme has been chosen. Choose a default
      ' (or set a blank string to make sure no theme is used).
      Page.Theme = ""
    
    else
    
      Page.Theme = ctype(Session["Theme"],string)
    
  end sub

主题改变的时候，应用它并保存：

protected   Sub cmdApply_Click() sub cmdApply_Click(object sender, EventArgs e)
  
    ' Set the chosen theme.
    Session["Theme"] = lstThemes.SelectedValue

    ' Refresh the page.
    Server.Transfer(Request.FilePath)

  end sub

去除主题的应用：

protected   Sub cmdClear_Click() sub cmdClear_Click(object sender, EventArgs e)
 
 ' Set the chosen theme.
 Session["Theme"] = ""

 ' Refresh the page.
 Server.Transfer(Request.FilePath)
 end sub

上面呢我们是将主题保存在Session中，也可以保存在数据库中，那么应该也可以保存在Profile中了！

四、上面说了这么多，总结一下主要的也就是这么几句话：
  a、页面里相同的控件使用不同的样式：在该控件后面加skinID

  b、把定义好的theme应用到整个页面：在该页的Page页签里加上属性theme=“theme名称”

  c、把定义好的theme应用到整个站点：在web.config文件system.web的配置节中加上<pages theme="theme名称">

  d、动态的更换站点的样式（主题、皮肤）：在Page_PreInit事件中写代码,Page.Theme = "...";

  e、控件中应用样式的优先级：a、StyleSheetTheme引用的风格[优先级最低]
 
                           b、代码设定的控件属性(覆盖StyleSheetTheme)
 
                           c、Theme引用的风格(覆盖前面2个) [优先级最高]

  f、让某个控件不应用theme里面定义的风格：更改属性EnableTheming=false即可

 

C#*****************************************************************************

5. 主题的动态切换：

       在前台页面 Default.aspx 中添加一个下拉框,用来进行主题的选择.

 

<tr>   <td colspan="2">     <br />   您可以在此处选择页面主题：     <asp:dropdownlist id="ChooseTheme" runat="server" autopostback="true">       <asp:ListItem Value="BlueTheme">请选择颜色</asp:ListItem>       <asp:ListItem Value="BlueTheme">蓝色</asp:ListItem>       <asp:ListItem Value="PorpleTheme">紫色</asp:ListItem>     </asp:dropdownlist>     <br /><br /><br />   </td> </tr>

 

       在后台页面 Default.aspx.cs 中添加代码用来在每次刷新页面时替换新选的主题.

 

protected void Page_PreInit(object sender, System.EventArgs e) {     Page.Theme = Request["ChooseTheme"]; }

ASP.NET2.0 快速入门 ----使用主题对站点进行自定义

使用主题对站点进行自定义

 

原英文地址：http://www.asp.net/QuickStart/aspnet/doc/themes/themes.aspx


上一节演示了通过设置控件自身的样式属性来指定控件样式的各种方式。例如，考虑下面的页，对该页上的单个控件应用了一些样式设置。

 

 

 

 

 

C# Page with No Theme Applied

 

 

 

 

 

除了指定单个控件的样式外，ASP.NET 2.0 还引入了“主题”，它提供了一种简易方式，可以独立于应用程序的页为站点中的控件和页定义样式设置。多个主题的优点在于，设计站点时可以不考虑样式，以后应用样式时也无需更新页或应用程序代码。此外，还可以从外部源获得自定义主题，以便将样式设置应用于应用程序。一个主题的优点在于，样式设置存储在一个位置，可以独立于应用该主题的应用程序来维护这些设置。

 

 

 

下面的示例演示的页具有同一个主题，应用该主题指定控件样式设置。注意，该页本身并不需要包含任何样式信息。在运行时该主题自动将样式属性应用于该页的控件。

 

 

 

 

 

C# Page with Example Theme Applied

 

 

 

 

 

 

 

App_Themes 文件夹

 

主题位于应用程序根目录下的 App_Themes 文件夹中。主题由此文件夹下的命名子目录组成，该子目录包含一个或多个具有 .skin 扩展名的外观文件的集合。主题还可以包含一个 CSS 文件和/或图像等静态文件的子目录。下图演示定义了两个主题的 App_Themes 目录，这两个主题分别命名为“Default”和“White”，每个主题都有一个外观文件和一个 CSS 文件。

 

 

 

 

 

 

 

从上一个示例中可以注意到，外观文件的内容只不过是控件定义（如果这些定义出现在页面中）。一个外观文件可以包含多个控件定义，例如，每种控件类型一个定义。在主题中定义的控件属性自动重写应用了主题的目标页中同一类型的控件的本地属性值。例如，外观文件中的 <asp:Calendar Font-Name="Verdana" runat="server"/> 控件定义将使应用了主题的页中的所有 Calendar 控件都使用 Verdana 字体。主题将重写该控件这一属性的本地值。请注意，在外观文件中为控件定义指定 ID 属性值是错误的。

 

全局主题和应用程序主题

 

主题可位于应用程序级或计算机级（全局适用于所有应用程序）。如上所述，应用程序级主题放在应用程序根目录下的 App_Themes 目录中。全局主题放在 ASP.NET 安装目录下 ASP.NETClientFiles 文件夹下的“Themes”目录中，例如 %WINDIR%/Microsoft.NET/Framework/<version>/ASP.NETClientFiles/Themes。对于 IIS 网站，全局主题的位置是 Inetpub/wwwroot/aspnet_client/system_web/<version>/Themes。

 

为页指定主题

 

通过将 <%@ Page Theme="..." %> 指令设置为全局主题或应用程序级主题的名称（Themes 或 App_Themes 目录下的文件夹的名称），可为单个页指定主题。一页只能应用一个主题，但该主题中可以有多个外观文件，用于将样式设置应用于该页中的控件。

 

在配置中指定主题

 

通过在 Web.config 中指定 <pages theme="..."/> 节，也可以为应用程序中的所有页定义应用的主题。若要对特定页取消设置此主题，可以将 Page 指令的 Theme 属性设置为空字符串 ("")。请注意，母版页不能应用主题；而应在内容页或配置（如下所述）中设置主题。

 

 

 

 

 

C# Assigning a Theme in Web.config

 

 

 

 

 

 

 

对控件禁用主题

 

通过将 EnableTheming 属性设置为 false，可将特定控件排除在外，使其属性不会被主题重写。