[摘自MSDN] ASP.Net2.0学习 [2] 主题 7 ：演练：创建用户可选择的主题

演练：创建用户可选择的主题

本演练演示了如何创建允许用户选择页面主题的 ASP.NET 页。虽然本示例使用单一的控件外观和基本的级联样式表 (CSS) 文件，但所说明的原则适用于在 CSS 文件中包括图形和不同布局方案的更为复杂的主题以及更为复杂的服务器控件外观。

本演练演示如下任务：

  • 在 Microsoft Visual Web Developer 中创建一个主题，包括 CSS 文件和服务器控件外观。

  • 创建一个使用主题的 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 的新页。

创建主题创建主题
创建母版页创建母版页
对母版页进行布局对母版页进行布局

母版页定义了页面的组成元素。它可以包含静态文本和控件的任何组合。母版页还可以包含一个或多个内容占位符，这些占位符指定显示页面时动态内容出现的位置。

在本演练中，将使用一个表作为 Home.aspx 页的布局，该表包含一个标题、多个水平标尺以及一个母版页内容占位符。

为母版页创建表

创建内容页创建内容页

母版页提供内容的模板。通过创建与母版页关联的 ASP.NET 页来定义母版页的内容。内容页是一个专用的 ASP.NET 页，它仅包含要与母版页合并的内容。在内容页中，添加用户请求该页面时要显示的文本和控件。

内容页将使用已创建的母版页以及尚未完成的主题。该页将使用母版页的内容占位符，并将包含一个标题、副标题和下拉列表。由于内容页将使用母版页，因此它必须在 @ Page 指令中包含 MasterPageFile 属性，并包含内容占位符。

创建内容页

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

  2. 在“Visual Studio 已安装的模板”之下单击“Web 窗体”。

  3. 在“名称”框中键入“主页”。

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

  5. 选择“选择母版页”复选框，再单击“添加”。

    “选择母版页”对话框出现。

  6. 单击“Master1.master”，然后单击“确定”。

    将创建一个名为 Home.aspx 的新文件。该页包含一个 @ Page 指令，此指令使用 MasterPageFile 属性将当前页附加到选定的母版页，如下面的示例所示。

    Visual Basic
    复制代码
    <%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %>

     

    C#
    复制代码
    <%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>

    此页面还包含一个 <asp:Content> 元素，稍后将使用此元素。

向内容页添加内容向内容页添加内容

内容页不具有常见的组成 ASP.NET 页的元素，如 <html>、<body> 或 <form> 元素。相反，通过替换在母版页中创建的占位符区域，仅添加要在母版页上显示的内容。对于本示例，可以添加标题 1 元素、标题 2 元素、段落元素和下拉列表。将使用下拉列表选择要应用于该页的主题。

向主页添加内容

  1. 在 <asp:Content> 开始标记与结束标记之间粘贴以下代码。下面的示例将创建三个 HTML 元素：标题 1、标题 2 和一个段落。它还会添加一个下拉列表控件。请注意，如果您愿意，也可以在设计视图中向该页添加该控件。

    复制代码
    <h1 id="title1">Switchable Themes on a Page</h1><br />
    <h2 id="title2">Note how the master page content and the page content are affected</h2>
    <p>Select a color from the drop-down list below to change the appearance of this page.</p>
    <br /><br />
    <asp:dropdownlist id="ddlThemes" runat="server" autopostback="true" >
    <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem>
    <asp:listitem value="Red">I'd like the page to be red!</asp:listitem>
    <asp:listitem value="Green">I'd like the page to be green!</asp:listitem>
    </asp:dropdownlist>

  2. 添加一个脚本部分，在从下拉列表中选择主题时，该脚本部分将运行用于加载该主题的代码。应将下面的示例和 <script> 标记添加到内容页中 @ Page 指令之后的行上。

    Visual Basic
    复制代码
    <script runat="server">
    Public Sub Page_PreInit()
    ' Sets the Theme for the page.
    Me.Theme = "Blue"
    If ((Not (Request.Form) Is Nothing)  _
                        AndAlso (Request.Form.Count > 0)) Then
                Me.Theme = Me.Request.Form(4).Trim
    End If
    End Sub
    </script>

     

    C#
    复制代码
    <script runat="server">
    public void Page_PreInit()
    {
    // Sets the Theme for the page.
    this.Theme = "Blue";
    if (Request.Form != null && Request.Form.Count > 0)
    this.Theme = this.Request.Form[4].Trim();
    }
    </script>

    在页面生命周期的 PreInit 事件过程中，将加载该主题。页请求窗体包含一个值数组，其中索引为 4 的值是从下拉列表中选定的值。将此值赋予该页的主题，当加载该页时，将应用新主题。

    本演练的下一步是创建多个主题，可用于演示要应用的不同主题。

编辑 Blue 主题编辑 Blue 主题

Blue 主题包含一个空样式表和一个空外观。由于已知默认页及其所用母版页的组成元素，因此现在可以编辑这些主题文件以向页面元素添加颜色。

编辑 Blue 主题

  1. 在源视图中，从 Blue 主题文件夹中打开 Default.skin 文件。

  2. 将下面的代码添加到下拉列表中，以便在选择 Blue 主题时指定页面颜色。

    复制代码
    <asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />

  3. 在源视图中，从 Blue 文件夹中打开 Default.css 文件。首先，添加下面的代码，以从母版页中设置表标题的格式。

    复制代码
    td.title
    {
    font-size: 1em;
    text-align: center;
    font-family: verdana;
    font-size: x-large;
    font-weight: bolder;
    color: Navy;
    }

  4. 其次，使用下面的代码向该表添加一种背景色。

    复制代码
    table.header
    {
    background-color: Blue;
    }

  5. 再次，设置内容页中标题 1 和标题 2 元素的样式。

    复制代码
    h1
    {
    font-size: large;
    color: Navy;
    }
    h2
    {
    font-family: Verdana;
    font-size: medium;
    margin-top: 30;
    color: Navy;
    }

  6. 最后，设置水平标尺和段落元素的样式。

    复制代码
    p
    {
    font-family: Verdana;
    font-size: small;
    color: Aqua;
    text-align: left;
    }
    hr
    {
    border: 0;
    border-top: 2px solid Aqua;
    height: 2px;
    }
将主题连接到页面将主题连接到页面

在查看应用于 Home.aspx 页的主题之前，需要先向 @ Page 指令添加一个指示该页所用主题的属性。

将页面连接到主题

  1. 在源视图中打开 Home.aspx。

  2. 将 StylesheetTheme 属性添加到 @ Page 指令中并将其设置为等于 Blue 主题。该页指令应类似于下面的示例。

    Visual Basic
    复制代码
    <%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>

     

    C#
    复制代码
    <%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
测试页面测试页面
创建其他主题创建其他主题

尽管 Blue 主题运行良好，但本演练的目的是为页用户提供多个主题选项。可以将外观和样式表文件复制到新的主题目录中，然后编辑在主题中使用的颜色以反映新的主题颜色。下面的过程将创建两个新主题，分别名为 Red 和 Green。

创建其他主题

  1. 在解决方案资源管理器中，右击“App_Themes”文件夹，再单击“添加 ASP.NET 文件夹”，然后单击“主题”。在文件夹标题“Theme1”处于选定状态的情况下，键入“Red”，再按 Enter。

  2. 打开“Blue”文件夹，再选择 Default.skin 和 Default.css 文件。右击这两个选定的文件，再单击“复制”。

  3. 右击“Red”文件夹，再单击“粘贴”。

  4. 重复步骤 1，但将新主题文件夹命名为“Green”。接下来，右击“Green”文件夹并单击“粘贴”，以将 Default.skin 和 Default.css 文件的副本置于“Green”文件夹中。

  5. 编辑外观文件中的颜色属性，以反映主题颜色。例如，Red 主题中的外观文件应类似于下面的示例。

    复制代码
    <asp:dropdownlist runat="server" ForeColor="white" BackColor="Red" />

  6. 编辑每个主题的样式表，以反映主题的名称。请注意，您将需要对各个 HTML 元素以及文本使用多种色度的绿色才能使其在背景中显示出来。Green 主题的样式表可能类似于下面的示例。

    复制代码
    p
    {
    font-family: Verdana;
    font-size: small;
    color: Teal;
    text-align: left;
    }
    hr
    {
    border: 0;
    border-top: 2px solid Teal;
    height: 2px;
    }
    h1
    {
    font-size: large;
    color: Green;
    }
    h2
    {
    font-family: Verdana;
    font-size: medium;
    margin-top: 30;
    color: Green;
    }
    table.header
    {
    background-color: Lime;
    }
    td.title
    {
    font-size: 1em;
    text-align: center;
    font-family: verdana;
    font-size: x-large;
    font-weight: bolder;
    color: Teal;
    }
测试主题选择测试主题选择

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

导航