通过

演练：在 Visual Studio 中使用主题自定义网站

  • 项目

更新：2007 年 11 月

此演练演示如何使用主题为网站中的页和控件应用一致的外观。主题可以包括定义单个控件的常用外观的外观文件、一个或多个样式表和用于控件（如 TreeView 控件）的常用图形。此演练演示如何在网站中使用 ASP.NET 主题。

本演练演示如下任务：

  • 将预定义的 ASP.NET 主题应用于单个页和整个站点。

  • 创建您自己的包括外观的主题，这些外观用于定义单个控件的外观。

先决条件

若要完成本演练，您需要：

  • Microsoft Visual Web Developer (Visual Studio)。

  • .NET Framework。

创建网站

如果已经在 Visual Web Developer 中创建了一个网站（例如，按照演练：在 Visual Web Developer 中创建基本网页中的步骤），则可以使用该网站而转到下一节。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建网站”。

    “新建网站”对话框随即出现。

  3. 在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

  4. 在“位置”框中输入要保存网站页面的文件夹的名称。

    例如，键入文件夹名“C:\WebSites”。

  5. 在“语言”列表中，单击您想使用的编程语言。

  6. 单击“确定”。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

若要在此演练中开始使用主题，请设置一个 Button 控件、一个 Calendar 控件和一个 Label 控件，以便了解主题是如何影响这些控件的。

将控件放在页上

  1. 切换到“设计”视图。

  2. 从“工具箱”的“标准”组中将“日历”控件、“按钮”控件和“标签”控件拖到页上。页的具体布局无关紧要。

    说明：

    不要对任何控件应用任何格式。例如，不要使用 AutoFormat 命令来设置“日历”控件的外观。

  3. 切换到“源”视图。

  4. 确保页的 <head> 元素具有 runat="server" 属性，以便可以显示为如下内容：

    <head runat="server"></head>

  5. 保存页。

要对页进行测试，首先需要在应用主题前先查看页面，然后查看应用不同主题的效果。

创建主题并将其应用于页

ASP.NET 使得将预定义的主题应用于页或创建唯一的主题变得很容易。在演练的此部分中，您将创建一个包含一些简单外观的主题，这些外观定义控件的外观。

创建新主题

  1. 在 Visual Web Developer 中，右击网站名，单击“添加 ASP.Net 文件夹”，然后单击“主题”。

    将创建名为“App_Themes”的文件夹和名为“Theme1”的子文件夹。

  2. 将“Theme1”文件夹重命名为“sampleTheme”。

    此文件夹名将成为创建的主题的名称（在这里是“sampleTheme”）。具体名称无关紧要，但是在应用自定义主题的时候，必须记住该名称。

  3. 右击“sampleTheme”文件夹，选择“添加新项”，添加一个新的文本文件，然后将该文件命名为“sampleTheme.skin”。

  4. 在 sampleTheme.skin 文件中，按下面的代码示例所示的方法添加外观定义。

    <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
<asp:button runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>
    说明：

    定义的具体特性无关紧要。上面选择的值是建议值，采用这些建议值在稍后测试主题时效果将较为明显。

    外观定义与创建控件的语法类似，不同之处在于，定义只包括影响控件外观的设置。例如，外观定义不包括 ID 属性的设置。

  5. 保存该外观文件，然后将其关闭。

现在可以在应用任何主题前对页进行测试。

说明：

如果向“sampleTheme”文件夹添加一个级联样式表文件 (CSS)，则该级联样式表将应用于所有使用该主题的页。

测试主题

  1. 按 Ctrl+F5 运行该页。

    控件以它们的默认外观显示。

  2. 关闭浏览器，然后返回到 Visual Web Developer。

  3. 在“源”视图中，向 @ Page 指令添加下面的属性：

    <%@ Page Theme="sampleTheme" ... %>
    说明：

    必须在属性值中指示实际的主题的名称（在此例中，即先前定义的 sampleTheme.skin 文件）。

  4. 按 Ctrl+F5 再次运行该页。

    这次，控件使用主题中定义的配色方案呈现。

    “标签”和“按钮”控件将按照您在 sampleTheme.skin 文件中完成的设置显示。因为没有在 sampleTheme.skin 文件中为“日历”控件设置项，该控件以默认外观显示。

  5. 在 Visual Web Developer 中，将该主题设置成另一个主题（如果存在）的名称。

  6. 按 Ctrl+F5 再次运行该页。

    控件再次更改外观。

样式表主题和自定义主题

创建了主题后，可以定制如何在应用程序中使用主题，方法是：将主题作为自定义主题与页关联（如上一节中所做的那样），或者将主题作为样式表主题与页关联。样式表主题使用和自定义主题相同的主题文件，但是样式表主题在页的控件和属性中的优先级更低，相当于 CSS 文件的优先级。在 ASP.NET 中，优先级的顺序是：

  • 主题设置，包括 Web.config 文件中设置的主题。

  • 本地页设置。

  • 样式表主题设置。

在这里，如果选择使用样式表主题，则在页中本地声明的任何项都将重写主题的属性。同样，如果使用自定义主题，则主题的属性将重写本地页中的任何内容，以及使用中的任何样式表主题中的任何内容。

使用样式表主题并查看优先级顺序

  1. 切换到“源”视图。

  2. 更改页声明：

    <%@ Page theme="sampleTheme" %>

    为样式表主题声明：

    <%@ Page StyleSheetTheme="sampleTheme" %>

  3. 按 Ctrl+F5 运行该页。

    注意，“Label1”控件的 ForeColor 属性为红色。

  4. 切换到“设计”视图。

  5. 选择“Label1”，然后在“属性”中将“ForeColor”设置为“蓝色”。

  6. 按 Ctrl+F5 运行该页。

    “Label1”的 ForeColor 属性为蓝色。

  7. 切换到“源”视图。

  8. 更改页声明，以声明非样式表主题的主题，方法是将：

    <%@ Page StyleSheetTheme="sampleTheme" %>

    改回为：

    <%@ Page Theme="sampleTheme" %>

  9. 按 Ctrl+F5 运行该页。

    “Label1”的 ForeColor 属性再次变为红色。

基于现有控件创建自定义主题

创建外观定义的一种简单方法是使用设计器来设置外观属性，然后将控件定义复制到外观文件。

基于现有控件创建自定义主题

  1. 在“设计”视图中，设置“日历”控件的属性，使该控件具有特别的外观。下列设置为推荐设置：

    • BackColor   青色

    • BorderColor   红色

    • BorderWidth   4

    • CellSpacing   8

    • Font-Name   宋体

    • Font-Size   大

    • SelectedDayStyle-BackColor   红色

    • SelectedDayStyle-ForeColor   黄色

    • TodayDayStyle-BackColor   粉红

    说明：

    定义的具体特性无关紧要。上面列表的值是建议值，采用这些建议值在稍后测试主题时效果将较为明显。

  2. 切换到“源”视图，并复制 <asp:calendar> 元素及其属性。

  3. 切换到 sampleTheme.skin 文件或打开该文件。

  4. 将 Calendar 控件定义粘贴到 sampleTheme.skin 文件中。

  5. 从 sampleTheme.skin 文件中的定义中移除 ID 属性。

  6. 保存 sampleTheme.skin 文件。

  7. 切换到 Default.aspx 页，再将一个“日历”控件拖到页上。不要设置该控件的任何属性。

  8. 运行 Default.aspx 页。

    两个“日历”控件将具有相同的外观。第一个“日历”控件反映出您设置的显式属性设置。第二个“日历”控件从您在 sampleTheme.skin 文件中创建的外观定义中继承其外观属性。

将主题应用于网站

可以将一个主题应用于整个网站，这意味着不需要再次将该主题应用于各个页。（如果需要，可以在页上重写主题设置。）

为网站设置主题

  1. 如果没有将一个 Web.config 文件自动添加到网站，则可按下面的步骤创建 Web.config 文件：

    1. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

    2. 在“模板”下，选择“Web 配置文件”，然后单击“添加”。

      注意   不需要键入名称，因为文件总是被命名为 Web.config。

  2. 如果 <pages> 元素尚不存在，请添加该元素。<pages> 元素应该出现在 <system.web> 元素内部。

  3. 将下列属性添加到 <pages> 元素。

    <pages theme="sampleTheme" />
    说明：

    Web.config 是区分大小写的，值是大小写混合格式。（例如：theme 和 styleSheetTheme）。

  4. 保存并关闭 Web.config 文件。

  5. 切换到 Default.aspx 并切换到“源”视图。

  6. 从页声明中移除 theme="themeName" 属性。

  7. 按 Ctrl+F5 运行 Default.aspx。

    该页现在使用 Web.config 文件中指定的主题显示。

如果选择在页声明中指定一个主题名称，该主题名称将重写 Web.config 文件中指定的任何主题。

后续步骤

ASP.NET 对主题的支持使您能够以多种方式定制整个应用程序的外观。此演练涵盖了一些基本知识，但是您可能有兴趣了解更多。例如，您可能希望更多地了解以下方面：

请参见

概念

ASP.NET 主题和外观概述