[摘自MSDN] ASP.Net2.0学习 [2] 主题 2 ：演练：在 Visual Studio 中使用主题自定义网站

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

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

本演练中阐释的任务包括：

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

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

先决条件先决条件
创建网站创建网站

如果已经在 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. 从“工具箱”的“标准”组中将“日历”控件、“按钮”控件和“标签”控件拖到页上。页的具体布局无关紧要。

    Note注意

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

  3. 切换到“源”视图。

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

    复制代码
    <head runat="server"></head>

  5. 保存页。

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

创建主题并将其应用于页创建主题并将其应用于页

ASP.NET 使得将预定义的主题应用于页或创建唯一的主题变得很容易。（有关详细信息，请参见如何：定义 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"/>
    Note注意

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

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

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

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

Note注意

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

测试主题

  1. 按 Ctrl+F5 运行该页。

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

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

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

    复制代码
    <%@ Page Theme="sampleTheme" ... %>
    Note注意

    必须在属性值中指示实际的主题的名称（在此例中，即先前定义的 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. 如果没有将一个 Web.config 文件自动添加到网站，则可按下面的步骤创建 Web.config 文件：

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

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

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

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

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

    复制代码
    <pages theme="sampleTheme" />
    Note注意

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

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

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

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

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

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

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

posted on 2007-09-29 22:18  leup  阅读(293)  评论(0)  编辑  收藏  举报

导航