自。NET Framework出现以来,对网站外观进行控制一直是ASP.NET开发者的期待。ASP.NET 2.0使之成为现实,应用它的主题与皮肤,我们可以对外观进行控制。
上周我们讨论了ASP.NET 2.0母版页面(Master Pages),以及如何应用它们对网站布局进行集中控制。开发者经常将主题与母版页面弄混,但这两个元素存在很大的不同。母版页面允许你控制一个网站的总体布局,或网站内的一组页面,但主题主要关注网站的外观与感觉。
在你能够应用ASP.NET 2.0主题的所有优点之前,你有必要了解一些术语与过程。主题能够应用一个称之为皮肤或层叠样式表()的新设计元素。
了解皮肤文件
尽管在主题中不必应用皮肤,但我还是想首先介绍一下皮肤的概念,因为它是主题中的标准设计元素。皮肤提供了一种管理网络控件外观的方法。你也可以用它来批量设置一个控件的某些特性。
皮肤的定义包含在皮肤文件(以。skin为文件扩展名)中。在Visual Studio中,你可以选择增加项目>皮肤文件(Add New Item>Skin File)来方便地增加皮肤文件。它们是基本的文本文件,因此你还可以应用自己喜欢的文本编辑器。
皮肤文件中包含一些控件和它们所应用的属性。我读到的微软的所有文件都建议为每个控件类型建立单独的皮肤文件,但你也可以在一个单独的文件中包括数个控件定义,而不会引起问题。下面的代码是一个样本皮肤文件,它定义了标签与文本框控件的显示颜色。
<asp:Label runat="server" BackColor="Red" ForeColor="White" />
<asp:TextBox runat="server" BackColor="Black" ForeColor="Yellow" />
标签控件将以红色为背景,文本为白色;文件框控件以黑色为背景,文本为黄色。以下是定义皮肤文件控件的几点提示:
·每个被定义的控件都需要runat="server"属性。
·id属性没有包括在内。它是网络控件的一个独特属性,因此只有在网页的控件才被指定。
·皮肤文件中只能定义呈现(presentation)特性。
你可能想了解如何定义同一类型控件的多种格式。这就是skinid属性的作用所在。在皮肤文件中,你可以为一个控件指定一个skinid属性,以此来定义这个控件类型的多种呈现格式。列表A是一个皮肤文件,它定义了文本框与标签控件的两种格式。
你还可以应用样式(style)属性或外部样式表。列表B中的标签声明应用了样式属性。微软建议为不同的控件建立单独的皮肤文件。例如,你可能想定义一个称为label.skin的文件的标签控件和其它控件的外观。
通过主题应用皮肤文件
主题是一个或多个皮肤和/或文件的组合,用来控制ASP.NET网站内控件的外观。组成主题的文件(皮肤与)包含在一个主题文件夹中。
文件夹的名称定义主题的名称(如同页面声明、代码等一样),它是包含在网络应用软件内的特殊App_Themes文件夹的一个子文件夹。如果你应用Visual Studio,你就可以在解决方案上右击,并选择增加ASP.NET文件夹再选主题(Add ASP.NET Folder>Themes);这样就可自动地增加App_Themes文件夹。你还可以通过 Explorer或你喜欢的方法来建立App_Themes文件夹。
一个特殊主题文件夹中的皮肤和CSS文件包含那个主题中的所有元素。主题可以通过页面指示的pagetheme属性应用于网页中,就像是这样: