ASP.NET网站主题设计

实现在页面中,添加一个主题,应用该主题指定控件样式设置。注意,该页本身并不需要包含任何样式信息。在运行时该主题自动将样式属性应用于该页的控件。

主题是属性设置的集合,使用这些设置可以定义页面和控件的外观,然后在某个Web应用程中的所有页、整个Web应用程序或服务器上的所有Web应用程序中一致应用此外观。

注意：Web应用程序中,主题文件必须存储在根目录的App_Themes文件夹下(除全局主题之外)。App_Themes文件中,可以有多个主题文件夹,如主题1、主题2、主题3等,每个主题文件夹中可以有CSS、JS、Images等文件。App_Themes中只存储主题及与主题相关的文件。

步骤1：创建主题

新建一个Web项目,单击【添加新项】,选择【外观文件】并命名为“Button.skin”,单击【添加】按扭,如图3-1所示。

图3-1

当单击【添加】按扭以后会弹出如图3-2所示的对话框。

图3-2

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

图3-3

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

从代码中我们可以看到,我们为Button控件设置了三个皮肤主题,

这是默认的皮肤,在Web页面中我们使用Button控件时的默认设置。

设置了SkinID分别为Blue和red的主题皮肤。

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

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

步骤2：使用、禁用主题

设置好应用主题后,就要为页指定主题了。首先在页面中添加4个Button按扭,设置如图3-4所示。

图3-4(www.xing528.com)

代码如下：

如上所示,通过将<%@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属性,如图3-5所示。

图3-5

默认情况下,外观文件中的控件定义应用于受主题影响的应用程序的页中同一类型的所有控件。但是,如果同一类型的控件在应用程序中不使用外观,例如,Button4控件不使用Button.skin文件中设置的主题,那么可以对控件禁用主题在示例中Button4按扭通过将Enable Theming属性设置为false,可将特定控件排除在主题之外,<asp：Button ID="Button4"runat="server"Back Color="Dark Orange"Border-Color=" #C000C0"ForeColor="Yellow"Text="Button"Width="174px"Enable Theming="False"/>。运行这个程序,如图3-6所示。

图3-6

外观文件分为默认外观和命名外观,默认外观是指没有设置SkinID属性的控件所应用的外观,而命名外观是指指定了SkinId属性的控件所引用的外观文件。主要是对相同的控件设置不同的外观而设置的,三种常见的外观文件的组织方式及其说明：

(1)根据SkiID,在对控件外观设置时,将具有相同的skinID放在同一个外观文件中,这种方式适用于网站页面较多,设置内容较复杂的情况。

(2)根据控件类型,组织外观文件时,以控件类型进行分类,这种方式适用于页面中包含控件较少的情况。

(3)组织外观文件时,以网站中的页面进行分类,这种方式适用于网站中页面较少的情况。

创建主题的步骤如下：

(1)在网站根目录下建立文件夹App_Themes用于存储主题。

(2)右击App_Themes文件夹,选择添加ASP.NET文件夹/主题,然后给该文件夹取名。然后右击该文件夹,选择【添加新项】→【外观文件】。

(3)在该外观文件夹中,填写外观代码。

(4)需要在应用该外观的页面的<%@Page%>标签中设置一个Theme属性来应用主题。

1.理论题

(1)主题是由什么组成?

(2)创建主题有哪些步骤?

(3)主题文件要存放在哪个目录下?

2.实训题

修改步骤2中的项目,再添加一个黑色按钮。