6.1 主题概述

6.1.1 组成元素

主题由外观、级联样式表（CSS）、图像和其他资源组成，主题中至少包含外观，它是在网站或Web服务器上的特殊目录中定义的，如图6.1所示。

图6.1 添加主题文件夹

在制作网站中的网页时，有时需要对控件和页面设置进行重复设计，主题的出现就是将重复的工作简单化，不仅提高制作效率，更重要的是能够统一网站的外观。例如，一款家具的设计框架是一样的，但是整体颜色、零件色彩（把手等）可以是不同的，这就相当于一个网站可以通过不同的主题呈现出不同的外观。

1．外观

外观文件是主题的核心内容，用于定义页面中服务器控件的外观，它包含各个控件（如Button、TextBox或Calendar控件）的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如，下面的代码定义了TextBox控件的外观。

    <asp:TextBox runat="server" BackColor="PowderBlue" ForeColor="RoyalBlue"/>

控件外观的设置与控件声明代码类似。在控件外观设置中只能包含作为主题的属性定义。上述代码中设置了TextBox控件的前景色和背景色属性。如果将以上控件外观应用到单个Web页上，那么页面内所有TextBox控件都将显示所设置的控件外观。

2．级联样式表（CSS）

主题还可以包含级联样式表（.css文件）。将．css文件放在主题目录中时，样式表自动作为主题的一部分应用。使用文件扩展名．css在主题文件夹中定义样式表。

3．图像和其他资源

主题还可以包含图形和其他资源，如脚本文件或视频文件等。通常，主题的资源文件与该主题的外观文件位于同一个文件夹中，但也可以在Web应用程序中的其他地方，如主题目录的某个子文件夹中。

6.1.2 文件存储和组织方式

在Web应用程序中，主题文件必须存储在根目录的App_Themes文件夹下（除全局主题之外），开发人员可以手动或者使用Visual Studio 2015在网站的根目录下创建该文件夹。如图6.2所示为App_Themes文件夹的示意图。

图6.2 App_Themes文件夹的示意图

在App_Themes文件夹中包括“主题1”和“主题2”两个文件夹。每个主题文件夹中都可以包含外观文件、CSS文件和图像文件等。通常APP_Themes文件夹中只存储主题文件及与主题有关的文件，尽量不存储其他类型文件。

外观文件是主题的核心部分，每个主题文件夹下都可以包含一个或者多个外观文件，如果主题较多，页面内容较复杂时，外观文件的组织就会出现问题。这样就需要开发人员在开发过程中，根据实际情况对外观文件进行有效管理。通常根据SkinID、控件类型及文件3种方式进行组织，具体说明如表6.1所示。

表6.1 3种常见的外观文件的组织方式及说明