您的位置：首页 > 编程语言 > ASP

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

2007-09-29 22:18 561 查看

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

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

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

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

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

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl08947c9c8,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl08img,";

先决条件

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

Microsoft Visual Web Developer (Visual Studio)。

.NET Framework。

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl097bc1267,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl09img,";

创建网站

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

创建文件系统网站

打开 Visual Web Developer。

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

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

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

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

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

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

单击“确定”。

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

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

将控件放在页上

切换到“设计”视图。

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

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

切换到“源”视图。

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

复制代码

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

保存页。

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

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl15b8b0c3c,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl15img,";

创建主题并将其应用于页

ASP.NET 使得将预定义的主题应用于页或创建唯一的主题变得很容易。（有关详细信息，请参见如何：定义 ASP.NET 主题。）在演练的此部分中，您将创建一个包含一些简单外观的主题，这些外观定义控件的外观。

创建新主题

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

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

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

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

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

在 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 属性的设置。

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

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

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

测试主题

按 Ctrl+F5 运行该页。

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

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

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

复制代码

<%@ Page Theme="sampleTheme" ... %>

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

按 Ctrl+F5 再次运行该页。

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

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

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

按 Ctrl+F5 再次运行该页。

控件再次更改外观。

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl195ec8d3e,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl19img,";

样式表主题和自定义主题

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

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

本地页设置。

样式表主题设置。

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

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

切换到“源”视图。

更改页声明：

复制代码

<%@ Page theme="sampleTheme" %>

为样式表主题声明：

复制代码

<%@ Page StyleSheetTheme="sampleTheme" %>

按 Ctrl+F5 运行该页。

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

切换到“设计”视图。

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

按 Ctrl+F5 运行该页。

“Label1”的 ForeColor 属性为蓝色。

切换到“源”视图。

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

复制代码

<%@ Page StyleSheetTheme="sampleTheme" %>

改回为：

复制代码

<%@ Page Theme="sampleTheme" %>

按 Ctrl+F5 运行该页。

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

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl24a4db207,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl24img,";

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

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

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

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

BackColor 青色

BorderColor 红色

BorderWidth 4

CellSpacing 8

Font-Name 宋体

Font-Size 大

SelectedDayStyle-BackColor 红色

SelectedDayStyle-ForeColor 黄色

TodayDayStyle-BackColor 粉红

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

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

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

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

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

保存 sampleTheme.skin 文件。

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

运行 Default.aspx 页。

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

var ExpCollDivStr = ExpCollDivStr;
ExpCollDivStr = ExpCollDivStr + "ctl00_LibFrame_ctl25c3604ef,";
var ExpCollImgStr = ExpCollImgStr;
ExpCollImgStr = ExpCollImgStr + "ctl00_LibFrame_ctl25img,";

将主题应用于网站

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

为网站设置主题

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

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

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

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

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

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

复制代码

<pages theme="sampleTheme" />

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

保存并关闭 Web.config 文件。

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

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

按 Ctrl+F5 运行 Default.aspx。

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航