ASP.NET2.0中Web应用程序样式切换(App_Themes)

转载 2011年11月05日 21:18:14
 

 

 

主题是Microsoft ASP.NET 2.0 提供给开发人员的一项新增功能。   

 

    在 Asp.NET 2.0 出现以前, 给网站提供更换主题功能是一项繁重的工作,鉴于每切换一套主题,都需要在页面更改相应的图片、字体、网页样式等等细小的元素,因而在代码编写之余,更要求资源的规范管理。而往往在网站的编写初期,如果没有一定的经验,很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时,大量的迁移和更改,稍有不慎,还会引发文件丢失的问题。 

        现在这些担忧,都在 Asp.NET 2.0 中得到了完善的解决。首先,您可以通过简单的代码编写实现复杂的功能;其次,Asp.NET 2.0 在处理主题的问题时提供了清晰的目录结构,使得资源文件的层级关系非常清晰,在易于查找和管理的同时,提供的良好的扩展性。 

 

       下面就让我们通过一个Demo感受一下Asp.NET 2.0 的新特性。 

 

       1. 建立主题文件夹: 

 

       在应用程序的根目录上单击右键,点选 Add Folder 下的 Theme Folder 选项后,会在根目录下出现名为 App_Themes 的空文件夹,所有的与主题有关的资源文件都会存储在这个文件夹下。 

 

       在本例中,选择以颜色不同的方式来区分主题,需要在主题文件夹(App_Themes)下建立两个以颜色为名称的文件夹。 

 

       操作方式:在 App_Themes 文件夹上单击右键,将鼠标移动到 Add Folder 选项上,发现在主题文件夹(App_Themes)新增文件夹的类型只有一种 Theme Folder: 

 

  建立两个主题文件夹,分别命名为 BlueTheme 和 PorpleTheme。

 

将主题 BlueTheme 应用于页面: 

 

  <%@ Page Language="C#" StylesheetTheme="BlueTheme" %>  

 

      Skin 文件是实际包含主题所应用的格式设置的文件。一个主题可以包含一个或多个 Skin 文件。这没有关系,因为在将主题应用于页面时,ASP.NET Framework 将把某个主题下的多个 Skin 文件合在一起,而将这些文件视为一个 Skin 文件。 

 

       您可以根据需要将 Skin 文件命名为任何名称,在文件中可以通过声明某个控件的实例设置一个或多个此控件中的属性,从而使用 Skin 文件指定控件的外观。(注:并不是所有属性都可以设置,能设置的多为外观属性)。 

 

       本例中先在主题 BlueTheme 中建立新文件 Control.skin,在文件中对三个控件的某些属性进行了设置。

 

 

<asp:TextBox  BackColor="#c4d4e0"   ForeColor="#0b12c6"   Runat="Server" />  

 

<asp:Label    ForeColor="#0b12c6"   Runat="Server" /> 

 

 

此时页面页面代码为:

 

 

<body> 

  <form id="form1" runat="server"> 

    <table width="100%" cellpadding="0" cellspacing="0" border="0"> 

      <tr> 

        <td height="23px" colspan="2"></td> 

      </tr> 

      <tr> 

        <td align="center" height="50px"> 

          <asp:Label ID="Label1" runat="server" Text="Enter Your Name:"></asp:Label> 

        </td> 

        <td> 

          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 

        </td> 

      </tr> 

      <tr> 

        <td align="center" height="50px"> 

          <asp:Label ID="Label2" runat="server" Text="Enter Your Nickname:"></asp:Label> 

        </td> 

        <td> 

          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

        </td> 

      </tr> 

      <tr> 

        <td align="center" height="50px"> 

          <asp:Button ID="Button1" runat="server" Text=" OK " /> 

        </td> 

        <td> 

          <asp:Button ID="Button2" runat="server" Text="Cancel" /> 

        </td> 

      </tr> 

      <tr> 

        <td height="23px" colspan="2"></td> 

      </tr> 

      <tr> 

        <td colspan="2"><br /><br /></td> 

      </tr> 

    </table> 

  </form> 

</body> 

 

 

 

此时页面效果为:

 

 

 

   4. 使用 CSS 文件做更细致的设置: 

 

       对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的. 

 

 

 

       本例中在主题 BlueTheme 中建立了新文件 Default.css, 在此文件中对页面中的 body,table,td 元素进行了设置. 

 

body 

{ margin:0; padding:0; overflow:hidden; } 

 

.tableStyle 

{ font-family:"宋体"; font-size:12px;color:#000000;

line-height:120%; background-image:url(image/bg.jpg); } 

 

.tdStyle

{ background-image:url(image/Bar_out.gif); }

 

 

再更改部分页面代码调用 CSS 样式后, 效果如下

 

 

 

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.NET 2.0 中新增的主题功能,利用此项功能,我们不仅可以快速的将各式各样的外观应用于整个 Web 应用程序。还可以更加轻松的完成网站的扩充和维护工作。

 

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/zzdzzd1029/archive/2007/02/07/1504018.aspx

 

 

 

 

 

 

 

 

 

 

 

ASP.NET2.0中轻松实现网站换肤(App_Themes的使用)

2009年03月20日 星期五 上午 11:03

1.简介

   新建App_Themes文件夹:

    项目 - 右键 - 添加 - 添加ASp.net文件夹 - 主题

利用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://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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:

<img src="http://cndw.com/ShowImg.asp?p=/2006-4-26/794853ms136_1.jpg">

  使用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://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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了。

 

ASP.NET2.0中Web应用程序样式切换(App_Themes)

主题是Microsoft ASP.NET 2.0 提供给开发人员的一项新增功能。        在 Asp.NET 2.0 出现以前, 给网站提供更换主题功能是一项繁重的工作,鉴于每切换一套主题,都需...
  • zzdzzd1029
  • zzdzzd1029
  • 2007年02月07日 10:25
  • 1658

ASP.net的主题App_Themes

一个网站中的web页面风格需要统一,ASP.net的App_Tyemes提供了一个很好的设计方法。 首先一点是,在Default.css可以制作css样式。更重要的一点是在Control.skin中...
  • donhao
  • donhao
  • 2011年08月16日 17:27
  • 872

Web开发之CSS样式设置小技巧

本文根据慕课网整理:http://www.imooc.com/code/4339水平居中设置我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。 这里我们...
  • lwk520136
  • lwk520136
  • 2017年03月01日 17:19
  • 222

web 改变鼠标样式

请把鼠标移动到单词上,可以看到鼠标指针发生变化: Auto Crosshair Default Pointer Move e-resize ne...
  • HDFQQ188816190
  • HDFQQ188816190
  • 2016年10月20日 17:32
  • 733

ASP.NET2.0中WEB应用程序的部署

 在我们建立完一个WEB应用程序后,我们就要考虑如何进行部署和发布。一般情况下,尽可能将安装简单化,以使用户有非常好的用户体验。但有的情况下,可能对安装程序的要求比较高,比如有时要将一些安装配置信息写...
  • w_shilai
  • w_shilai
  • 2007年12月19日 15:15
  • 277

加载主题(皮肤、样式表)的多种方式

一、加载主题(皮肤、样式表)的多种方式 除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外,还可以通过配置文件为多个页面批量加载主题,另外,还可以通过改变页面的Th...
  • hitlisheng
  • hitlisheng
  • 2013年03月05日 13:28
  • 2037

应用程序"DEFAULT WEB SITE"中的服务器错误

先把iis关了。iis和apache,冲突的
  • wangrongm2009
  • wangrongm2009
  • 2014年12月09日 20:52
  • 771

asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】

asp.net2.0学习历程 菜鸟到中级程序员的飞跃--30本好书点评作者:清清月儿主页:http://blog.csdn.net/21aspnet/          时间:2007.5.16学历历...
  • 21aspnet
  • 21aspnet
  • 2007年05月16日 23:34
  • 57011

jquery 点击按钮切换样式on方法使用

$('.teaching .tab a').on('click',function(){ $(this).siblings().removeClass('cur') $(this).addCl...
  • shaka0
  • shaka0
  • 2014年05月19日 17:06
  • 2397

VS中Web应用程序和Web网站

无意间发现了还有这样的不同,在感觉有些晕的时候,找找答案。        在新建网站的时候会有两种选择,在解决方案右击我们会看到,新建网站这一项,同时会看到新建项。        据说We...
  • xhf55555
  • xhf55555
  • 2012年12月12日 17:33
  • 4190
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET2.0中Web应用程序样式切换(App_Themes)
举报原因:
原因补充:

(最多只允许输入30个字)