ASP.NET 2.0主题和皮肤实现网站美化

asp.net

  主题和外观是ASP.NET 2.0 中的新增功能, 使用 ASP.NET 2.0 的“主题和外观”功能,可以将样式和布局信息分解为单独的文件组,统称为“主题”。然后,主题可应用于任何站点,影响站点中页和控件的外观。这样,通过更改主题即可轻松地维护对站点的样式更改,而无需对站点各页进行编辑。还可与其他开发人员共享主题。应用 ASP.NET 2.0的“主题和外观”功能轻松实现对网站美观的控制。

  ASP.NET 提供了一些可在应用程序中对页和控件的外观或样式进行自定义的功能。控件支持 Style 对象模型,用于设置字体、边框、背景色和前景色、宽度、高度等样式属性。控件还完全支持可将样式设置与控件属性分离的级联样式表 (CSS)。可以将样式信息定义为控件属性或 CSS,也可以在名为 Theme 的单独文件组中定义此信息,以便应用于应用程序的全部或部分页。各控件样式在主题中被指定为 Skin。

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

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

  新建一个Web 项目,点击“添加新项”,选择“主题外观”并命名为“Button.skin”,点击“添加”按扭,如图 1所示


图 1

  当单击“添加”按扭以后会弹出如下对话框 图 2 问你是否将主题文件添加到“App_Themes”文件夹,在应用程序中,主题文件必须存储在根目录的App_Themes文件夹下,主题由此文件夹下的命名子目录组成,该子目录包含一个或多个具有 .skin 扩展名的外观文件的集合。主题还可以包含一个 CSS 文件和/或图像等静态文件的子目录。我们单击“是”,这样就为Web添加一个名为“Button”的主题。如图 3


图 2

图 3

  我们可以看到在App_Themes文件夹下有一个所创建的主题Button,在Button文件夹下有一个Button.skin文件,这就是我们添加的主题文件,双击Button.skin文件,为其添加皮肤设置代码。
代码如下:

<asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" />
<asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" />
<asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" />
  从代码中我们可以看到,我们为Button控件设置了三个皮肤主题,<asp:Button runat="server" BorderColor="yellow" BackColor="yellow" BorderStyle="dotted" />,这是默认的皮肤,在Web页面中我们使用Button控件时的默认设置,<asp:Button runat="server" BorderColor="blue" BackColor="white" SkinID="Blue" />,<asp:Button runat="server" BorderColor="red" BackColor="red" Width="150" BorderWidth="2px" SkinID="red" />设置了SkinID 分别为Blue和red的主题皮肤。

  从上一个示例中可以注意到,外观文件的内容只不过是控件定义(如果这些定义出现在页面中)。一个外观文件可以包含多个控件定义,例如,每种控件类型一个定义。在主题中定义的控件属性自动重写应用了主题的目标页中同一类型的控件的本地属性值。

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

  我们设置好应用主题后,那么怎么为页指定主题呢?我们在页面中添加4个Button按扭,设置如图 4


图4

  代码如下:

<%@ Page Language="C#" AutoEventWireup="true" Theme="Button" CodeFile="Default.aspx.cs" Inherits="_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 runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
    默认皮肤的Button控件<br />
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Button" SkinID="Blue"/>
   命名皮肤SkinID="Blue"的Button控件<br />
<br />
<br />
<asp:Button ID="Button3" runat="server" Text="Button" SkinID="red"/>
   命名皮肤SkinID="red"的Button控件<br />
<br />
<br />
<asp:Button ID="Button4" runat="server" BackColor="DarkOrange" BorderColor="#C000C0"
ForeColor="Yellow" Text="Button" Width="174px" EnableTheming="False"/>
   禁用主题的Button控件<br />
 </div>

</form>
</body>
</html>

  如上所示,通过将 <%@ Page " Theme="Button" %> 指令设置为全局主题或应用程序级主题的名称(Themes 或 App_Themes 目录下的文件夹的名称),可为单个页指定主题。一页只能应用一个主题,但该主题中可以有多个外观文件,用于将样式设置应用于该页中的控件。这样Button.skin中设置的属性就应用到页面中。也可通过在 Web.config 中指定 <pages theme="..."/> 节,也可以为应用程序中的所有页定义应用的主题。若要对特定页取消设置此主题,可以将 Page 指令的 Theme 属性设置为空字符串 ("")。请注意,母版页不能应用主题。

  在页面中有4个Button按扭,其中前三个应用了Button.skin文件中设置的主题,Button1控件应用了Button.skin中设定的默认皮肤;Button2控件应用了Button.skin中SkinID为Blue的命名皮肤;Button3控件应用了Button.skin中SkinID为Blue的命名皮肤,为控件指定皮肤主题也很简单,只要指定相应的SkinID属性,入图5


图5

  默认情况下,外观文件中的控件定义应用于受主题影响的应用程序的页中同一类型的所有控件。但是,您可能希望同一类型的控件在应用程序中不使用外观。例如,您可能希望 Button4 控件不使用Button.skin文件中设置的主题。那么我们也可以对控件禁用主题在示例中Button4按扭通过将EnableTheming 属性设置为 false,可将特定控件排除在主题之外,<asp:Button ID="Button4" runat="server" BackColor="DarkOrange" BorderColor="#C000C0" ForeColor="Yellow" Text="Button" Width="174px" EnableTheming="False"/>。

  运行这个程序,如图6


图6

时间: 2024-10-28 12:59:08

ASP.NET 2.0主题和皮肤实现网站美化的相关文章

用ASP.NET 2.0主题和皮肤实现网站美化

主题和外观是ASP.NET 2.0 中的新增功能, 使用 ASP.NET 2.0 的"主题和外观"功能,可以将样式和布局信息分解为单独的文件组,统称为"主题".然后,主题可应用于任何站点,影响站点中页和控件的外观.这样,通过更改主题即可轻松地维护对站点的样式更改,而无需对站点各页进行编辑.还可与其他开发人员共享主题.应用 ASP.NET 2.0的"主题和外观"功能轻松实现对网站美观的控制. ASP.NET 提供了一些可在应用程序中对页和控件的外观

用ASP.NET 2.0主题控制网站外观

asp.net|控制 自.NET Framework出现以来,对网站外观进行控制一直是ASP.NET开发者的期待.ASP.NET 2.0使之成为现实,应用它的主题与皮肤,我们可以对外观进行控制. 开发者经常将主题与母版页面弄混,但这两个元素存在很大的不同.母版页面允许你控制一个网站的总体布局,或网站内的一组页面,但主题主要关注网站的外观与感觉. 在你能够应用ASP.NET 2.0主题的所有优点之前,你有必要了解一些术语与过程.主题能够应用一个称之为皮肤或层叠样式表(CSS)的新设计元素. 了解皮

IBM WebSphere Portal中的Web 2.0主题与皮肤定制开发介绍

在众多门户项目中,满足用户对 UI 的需求是项目成败的关键因素之一.良好的界面设计不但可以使用户操作更加便捷,而且能够使得应用 呈现条理更加清晰,从而提高用户的生产效率.WebSphere Portal 6.1 版本中新增加的 Web 2.0 主题特性通过 AJAX 的方式进行页面的客户 端页面聚合.相比起原来的服务器端聚合,这种方式在性能与用户体验上有了大幅度的提升.基于此,本文希望对 Web 2.0 主题皮肤框架的定 制与开发方面作全面的介绍.读者通过阅读本文可以快速开展 Web 2.0 主

用 ASP.NET 2.0 改进的 ViewState 加快网站速度

asp.net|速度     如果您是个经验丰富的 ASP.NET 开发人员,一提起 ViewState ,您可能会不寒而栗,因为您想到的是大量通过"鸡尾酒吸管"吸入的 Base64 编码数据.除非采取步骤进行预防,否则大部分 ASP.NET 页面将有大量辅助数据被存储在一个名为 __VIEWSTATE 的隐藏字段中,多数情况下,甚至不需要这个字段.浏览用 ASP.NET 生成的您喜爱的站点,查看页面源代码,计算隐藏在 __VIEWSTATE 字段中的字符数.我尝试了一下,数量为 80

在 ASP.NET 2.0 中创建 Web 应用程序主题

asp.net|web|程序|创建 引言 主题是 Microsoft ASP.NET 2.0 的一项新增功能,使用此功能可以一次定义一组控件的外观,并可以将该外观应用于整个 Web 应用程序.例如,通过利用主题功能,您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观,如背景颜色和前景颜色.使用主题功能可以轻松建立并维护整个网站外观的一致性. 主题与级联样式表并不相同.使用级联样式表可以控制浏览器上的 HTML 标记的外观.而主题则应用在服务器上,并适用于 ASP.NET

使用Web标准生成ASP.NET 2.0 Web站点

asp.net|web|web标准|站点    简介 Web 标准使您能通过最少的工作,生成可被最广大受众访问的 Web 站点.Web 标准的承诺是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作.例如,在按照标准生成以后,旨在在 Microsoft Internet Explorer 中以某种方式显示的页可在其他浏览器(如,Mozilla Firefox.Netscape Navigator.Opera.Camino 和 Safari)中以相同的方式显示,而无需完成

ASP.NET 2.0: 执行Web标准以便更加易于访问

本文讨论: 采用 Web 标准 CSS 控件适配器 ASP.NET 2.0 主题和母版页 本文使 用了以下技术: ASP.NET 2.0 我不得不承认我一开始并不觉得 Web 标准很重要.和大多数人一样 ,我也是在 Web 浏览器刚出现时就开始编写网页了.那时,我认为闭合每个 HTML 段落标记会降低我的工作效 率,而且会不必要地占用用户那宝贵的 28K 的部分带宽.所以,我不闭合它.只要浏览器能通过,我也不在乎 . 但是,自那时起我开始认识到 Web 标准对未来 Web 和基于 Web 的软件

ASP.NET 2.0的编译模型

ASP.NET 2.0支持两种编译模型(Compilation Model):一为动态编译 (Dynamic Compilation),另一个为先行编译(Precompilation). 这让程序设计师可以有更宽广的选择以决定不同网站何时该用何种编译模型 ,不但弹性大大提升,且若采用先行编译网站执行效能还可以更高,分述如下: (一)ASP.NET网站动态编译(Dynamic Compilation) 在ASP.NET 1.0时就已经支持网站动态编译,也就是使用者第一次请求网站网 页时,ASP.N

艾伟:ASP.NET 2.0的编译模型

ASP.NET 2.0支持两种编译模型(Compilation Model): 一为动态编译(Dynamic Compilation),另一个为先行编译(Precompilation). 这让程序设计师可以有更宽广的选择以决定不同网站何时该用何种编译模型,不但弹性大大提升,且若採用先行编译网站执行效能还可以更高,分述如下: (一)ASP.NET网站动态编译(Dynamic Compilation) 在ASP.NET 1.0时就已经支援网站动态编译,也就是使用者第一次请求网站网页时,ASP.NET