asp.net2.0讲解5

最新推荐文章于 2024-09-21 16:56:47 发布

布丁88

最新推荐文章于 2024-09-21 16:56:47 发布

阅读量930

点赞数

文章标签： asp.net stylesheet calendar server asp css

本文链接：https://blog.csdn.net/qyweiyy88/article/details/2060743

版权

开发任何Web应用程序的过程都是围绕着两个主要方面进行的：功能和外观。Web应用程序的功能方面主要包括站点的结构、控件的行为、用户经验、保护应用程序安全的代码、当用户单击某个按钮时会发生什么，等。站点的外观多少包含一些美学因素，涉及到色彩和图片的使用、页面的布局以及在某种程度上还包括在浏览器上显示的代码样式。一个成功的应用程序应努力在两者之间保持平衡，既保证在视觉上给用户享受，又保证使用上的简单性，但很多站点在这个问题上都做得不好。

本章首先介绍为Web应用程序制作样式的基本工具，然后介绍Visual Web Developer设置样式的能力。在介绍编写独立的CSS文件之前，先介绍为单个控件设置样式的基础知识，然后介绍主题—— 一种为页面和站点设置样式的新技术。

本章讨论了以下内容：

● 为站点设置样式，从为单个元素设置样式到使用CSS样式表

● 在VWD中为应用程序开发样式表

● 使用ASP.NET 2.0的主题(theme)和皮肤(skin)快速开发样式化的Web页面，使它们符合一致的外观

● 使用主题和皮肤为Wrox United添加样式

另外，本章还讨论了实用性和可存取性，这是两个重要的方面，在站点的开发过程中应给予充分考虑。

5.1 为站点设置样式

站点的首页是访客首先看到的页面，虽然我们知道不能通过一本书的封面判断其价值(特别是Wrox出版社的书籍，不能通过作者的面部照片判断书籍价值)，但我们仍会根据书籍的外观产生第一印象，无论是一种普通的反应(一般吧，功能还可以，搜索框在哪里？)，一种肯定的反应(整洁、朴实、美观，我想浏览其他页面！)，还是一种否定的反应(哇，一团糟，我要到其他地方去！)。第一印象是很重要的，因此必须正确处理！

任何站点设计中都包含有常见的元素；例如，一个显示公司名称的标题，站点主要内容的介绍，或者您浏览站点的原因。另外还会发现诸如菜单、搜索框、链接组、页脚等区域。没有这类元素的页面一般只适用于特定的用户；例如，开发人员为了验证一个概念，或者希望尝试一本书中的某种新技术。准确地放置这些元素是很重要的，就像组织站点的内容以符合站点的样式一样。

设置样式和布局站点是Web开发中的一个有机整体。虽然布局站点是一个方面，但设置样式可能更加复杂。本章将重点讨论这个过程中涉及到的页面样式化、规则和层次结构—— 在页面上布局元素和放置内容是站点设计的一部分，本书从始至终都将讨论这个主题。

5.1.1 style属性

改变Web页面上元素外观的最快捷的方法是添加style属性。Web页面上任何可见的元素都具有style属性。例如：

<div style="font-weight:bold;color:red;border-bottom:solid 2pt navy">This is a styled "div" tag</div>

图5-1显示了这个style属性在Internet Explorer中的效果。

图 5-1

在下面的“试一试”练习中，首先将创建一个可以在其中进行本章所有示例的站点。

(1) 在VWD中，打开名为Chapter05的初始示例站点(C:/BegASPNET2/Chapters/Begin/)。这个初始站点仅仅包含了少数几个文件，从而为进行本章中的示例做好了准备。

(2) 添加一个新的空白.aspx页面并将其命名为Default.aspx。直接切换到Source View并在Form标记之间输入灰色部分的代码：

<div style="font-weight:bold; color:red; border-bottom:solid 2pt

navy; ">

This is a styled "div" tag

</div>

</form>

请注意VWD是如何帮助您输入样式信息的(如图5-2所示)。

图 5-2

(3) 现在切换到Design View并观察这些格式化信息是如何应用到页面上的，如图5-3所示。

图 5-3

(4) 注意属性窗口是如何显示style属性值的。如果在属性值内的任意位置单击鼠标，在属性值的后面将会出现椭圆按钮(…)。单击该按钮将会看到如图5-4所示的Style Builder对话框。

在为元素设置样式时这个对话框非常有用，因为使用它可以不必记住每个样式的语法。开发人员所需做的就是选择希望应用于元素的样式并单击OK即可。我们将在另一个页面使用这个对话框设置样式。

图 5-4

(5) 创建另一个.aspx页面并将其命名为StyledPage1.aspx。在这个页面中，需要添加一个<div>元素，该元素内的文本是“This is highlighted text”以及一个标题1(h1)元素，该元素内的文本是“This is also highlighted text”。

(6) 使用Style Builder对话框(如图5-5所示)将两个元素的字体设置为Trebuchet MS，并将颜色设置为藏青色。这个操作将在Source View中自动添加如下代码：

This is highlighted text.</div>

This is also highlighted text.</h1>

图 5-5

(7) 在浏览器中查看该页面以便浏览完成后的文档。其内容应该类似图5-6所示。

图 5-6

操作回顾

现在这个页面可能还不是很令人满意，但修改其外观并不需要占用很多时间。接下来就可以把这项技术用于站点上的每个元素。可以在一个站点中使用多种不同的样式属性，附录E中列出了一些最常用的元素，可以帮助开发人员为站点选择最喜欢的样式。

在学习了如何为页面上的元素设置样式之后，将样式表嵌入代码就不是什么复杂的问题了。HTML元素的样式属性的语法和样式表中所使用的样式语法完全一样，下一小节将学习如何使用样式表从而提高代码的可维护性。

样式表的概念从出现至今已有数年的时间(它最初是由W3C在1996年12月作为一个建议提出来的)，每个设计得很优秀的站点都包含有一个定义明确的CSS样式表，这个样式表为站点定义了一个特定的外观。使用样式表，开发人员可以定义页面上每种类型的元素应怎样显示，同时还可以为特定的样式创建定义并将其应用于页面上的相关元素。例如，可以指定每个<div>标记的实例都应包含藏青色的文本，或者也可以定义一个名为HighlightedText的样式类(class)，然后将其应用于页面上的所有<div>标记以及类似的元素。下面是一个样式表的一部分代码，其中分别定义了这两种样式：

div

{

font-family: 'Trebuchet MS';

Color: Navy;

}

.HighlightedText

{

font-family: 'Trebuchet MS';

Color: Navy;

}

注意这两者之间的惟一差别是HighlightedText类的前面有一个点号，这个类名是用户自定义的。点号表示可以将这个区域作为一个类应用于任意元素，而不用为某种特定类型的元素定义默认样式。

为了将样式用于元素，并不需要对元素本身进行任何修改；只要页面知道在什么地方能够找到样式信息，样式就可以自动地得以应用(稍后将讨论怎样定位样式信息)。然而，为元素指定某个特定的自定义类样式时，可以使用Class属性，例如：

<div class="HighlightedText">This is highlighted text.</div>

<h1 class="HighlightedText">This is also highlighted text.</h1>

虽然在本书中看不到文本的颜色，但是可以看到在前面的样式类定义的字体样式已经应用于这两个元素，如图5-7所示。

图 5-7

当然，如果亲自进行这个练习，将看到字体呈藏青色。

1. 样式的语法

样式定义包含在花括号之间。开括号的位置可以紧跟在元素或类名的后面，也可以另起一行；例如，div样式可以重写为如下形式：

div{

font-family: 'Trebuchet MS';

Color: Navy;

}

可以任意选择自己喜欢的样式—— 就作者个人而言，我喜欢将所有的括号放在一条垂直线上对齐。

也可以对样式信息使用类似锚标记(<a>)这种带有特定变化的标记，从而在将鼠标放置在这些标记上时它们的外观能够自动发生变化，如下所示：

a:link, a:visited

{

color: #cc3300;

text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900;

text-decoration: underline;

}

此代码将在页面上显示带有下划线的红色链接，当用户将鼠标放在链接上时，下划线将消失，而在单击链接时，它们立即变成浅橙色。通过这种方式可以提示用户鼠标正位于某个链接之上，并且刚才单击过某个链接。由逗号分隔开的两个条目表示后面的样式信息对它们都有效(在这个示例中，逗号分隔的两个条目是a:link和a:visited)。

完全使用CSS为页面设置样式的第一步就是决定要为每个元素设置什么样的样式并创建一组样式定义。

可以将样式定义存放在两个位置从而将其应用到Web页面上。第一个位置是将其存放在页面顶部<head>元素内的<style>标记内。另一种选择是创建一个独立的外部样式表来保存样式定义，并将这个外部样式表文件链接到需要使用它的Web页面。

在下一小节将首先介绍把样式定义放在页面上的<style>标记内的技术，然后再介绍怎样引入外部的CSS样式表。

2. 将样式信息从style属性移到style区域

如果只对单个页面设置样式，则可以将样式信息嵌入到页面的HTML语言的<head>标记内，如下所示：

<title>Styled Page 1</title>

<style>

.HighlightedText

{

font-family: 'Trebuchet MS';

Color: Navy;

}

</style>

</head>

<body>

<div class="HighlightedText">This is highlighted text.</div>

<h1 class="HighlightedText">This is also highlighted text.</h1>

</form>

</body>

</html>

这些代码和前面示例中所使用的代码是一样的。注意怎样使用<style>标记在页面的<head>区域内简便地嵌入样式信息。在单个页面中使用这种技术是很好的—— 实际上，如果曾经将Word文档保存为HTML，将看到这种技术用于定义文档的样式从而使得该文档呈现为HTML。作者在Word 2003中将这个文件保存为Web Page(Filtered)，这种方式产生的HTML代码比在Word中将这个文件保存为Web Page时自动产生的标准代码要整洁得多。在保存该文件之后，作者查看了产生的源代码，并发现了如下所示的样式定义，它们描述了在本章中使用的某些高亮区域是怎样定义的：

p.code, li.code, div.code

{margin-top:0cm;

margin-right:0cm;

margin-bottom:0cm;

margin-left:30.0pt;

margin-bottom:.0001pt;

line-height:112%;

font-size:8.5pt;

font-family:Courier;}:

这种技术对于创建要在多个页面中使用样式信息的站点并不理想，因为开发人员必须为站点内的每个页面单独地复制<style>标记和样式定义。对这种情况的解决方案是将样式定义移到一个单独的CSS文件中。

3. 将样式信息移动到单独的CSS文件中

这可能是最简单的一个步骤。一旦将样式定义封装在<style>标记之内以后，将这些信息提取到一个单独的样式表中实在是一件非常容易的事情。开发人员需要进行的所有工作就是创建一个扩展名为.css的文件，将Web页面内的样式信息复制到该文件中，并以如下方式添加该样式表的链接：

<title>Styled Page 2</title>

</head>

样式表文件中只包含样式信息，因此可以说现在已拥有一个包含所有样式代码的样式表：

.HighlightedText

{

font-family: 'Trebuchet MS';

color: Navy;

}

a:link, a:visited

{

color: #cc3300;

text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900;

text-decoration: underline;

}

接下来可以将该样式表链接到Web页面，并在页面中添加如下灰色部分代码：

<div class="HighlightedText">This is highlighted text.</div>

<h1 class="HighlightedText">This is also highlighted text.</h1>

<div><a href="default.aspx">This is a sample link</a></div>

</form>

在查看这个页面时将看到如图5-8所示的画面。

图 5-8

接下来将实践这些概念。在下面的“试一试”练习中，将在前面创建的StylePage1.aspx页面的基础上创建一个简单的样式化页面。

(1) 在Chapter05站点中创建另一个名为StylePage2.aspx的新页面。

(2) 从StyledPage1.aspx页面中复制<div>标记和标题，并删除每个元素中的style属性。在相同的位置上，添加一个class属性，并将其值设置为“HighlightedText”。

This is highlighted text.</div>

This is also highlighted text.</h1>

</form>

(3) 在页面的标题下面添加一个文本为“This is a sample link”的超链接。将“default.aspx”设置为它的href属性的值。

This is highlighted text.</div>

This is also highlighted text.</h1>

<div><a href="default.aspx">This is a sample link</a></div>

</form>

(4) 该链接的后面添加一个换行符，并在该换行符的后面添加一个ASP.NET的Label控件。您应该记得服务器控件有一组与标准控件不相同的属性，因此将该标签控件的CssClass属性设置为“HighlightedText”，同时将Font-Italic属性设置为“true”：

This is also highlighted text.</h1>

<div><a href="default.aspx">This is a sample link</a></div><br />

<asp:Label CssClass="HighlightedText" Font-Italic="true" ID="Label1"

runat="server" Text="This is an ASP.NET label"></asp:Label>

</form>

(5) 在Solution Explorer中右击Chapter05站点并选择Add New Item。从图标列表中选择StyleSheet并接受默认名称：StyleSheet.css。在这个文件中，添加如下代码：

.HighlightedText

{

font-family: 'Trebuchet MS';

color: Navy;

}

a:link, a:visited

{

color: #cc3300;

text-decoration: underline;

}

a:hover

{

text-decoration: none;

}

a:active

{

color: #ff9900;

text-decoration: underline;

}

注意在CSS样式表中所使用的语法与在Source View中对某个HTML控件设置style属性时所使用的语法是相同的，这将有助于CSS文件的编写，如图5-9所示。

另外还要注意到工具栏上的Build Style图标；如果单击这个按钮，将启动Style Builder对话框。可以自己尝试使用这个对话框—— 添加另一个元素定义(例如<div>)，并在其后添加一对花括号。将光标放置在花括号内并单击该按钮启动Style Builder。在选择所需的样式之后，只需单击OK，这些样式就将作为一个CSS条目出现在StyleSheet.css文件中。

(6) 最后的收尾工作只有一件事情要做，那就是告诉Web页面引用定义在.css文件中的样式。切换回StyledPage2.aspx并进入Design View。应该看到如图5-10所示的画面。

图 5-9

图 5-10

(7) 现在从Solution Explorer中将StyleSheet.css文件的图标拖放到设计区中。该操作一完成，页面的外观就将发生变化(如图5-11)所示。

图 5-11

如果现在运行这个页面，将会在浏览器窗口中看到几乎相同的画面。

操作回顾

使用CSS文件为页面中的HTML元素添加样式只需完成两件事情。一件是定义表示元素样式的类，另一件是在页面中添加一个链接以便定位CSS文件。当把CSS文件拖放到设计区时，页面的顶部将添加如下代码：

<title>Styled Page 2</title>

</head>

页面顶部的这个链接告诉Web页面到什么地方查找样式信息。从此刻起，页面中的任何class属性都将试图引用这个CSS样式表以便为这些元素找到样式信息。如果找不到相应的类，就不会有任何样式应用于元素，除非在元素的Style属性中手动指定了样式。

对指定了class属性的HTML元素，还可以在它的Style属性中指定额外的样式信息。任何定义在Style属性中的样式都将重写那些在CSS文件中指定的样式，从而使得开发人员可以调整页面上特定元素的外观。

服务器控件有些不同。由于服务器控件在呈现时会被转换为恰当的HTML代码，所以可以使用的属性将会不尽相同。在这个示例中，使用了一个Label控件。相对而言，Label控件非常简单，所以可对其添加的样式不是很多。在本示例中，您为其添加了一个CSS链接，并定义了另一个样式。服务器控件所使用的CssClass属性直接和HTML元素的class属性相关。而单个的样式属性则类似于HTML元素中的style属性：

<asp:Label CssClass="HighlightedText" Font-Italic="true" ID="Label1"

runat="server" Text="This is an ASP.NET label"></asp:Label>

在呈现该标签的时候，将产生如下代码：

<span id="Label1" class="HighlightedText" style="font-style:italic; ">This is an ASP.NET label</span>

注意在浏览器中自定义的样式属性被转换为一个标准的style标记。因为CSS样式在客户端才起作用，所以页面一旦呈现之后，HTML元素的class属性和style属性都将得以应用，就像静态的HTML元素那样。

4. CSS的局限性和使用服务器端代码设置样式

在使用CSS为站点设置样式时，可以指定特定元素在页面上的外观。这对于一个静态的HTML站点是可以的，单对于服务器端元素，这可能会有一些问题。例如，一个简单的ASP.NET控件Panel。如果将一个Panel控件拖放到页面上，添加一些文本，并在两个不同的浏览器中查看这个页面(例如，Internet Explorer和一个比较老的或功能有限的浏览器，如Links)，在查看页面的源代码时会看到不同的结果。下面是一些源代码示例：

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="

125px">This text

is contained within an ASP.NET Panel control

</asp:Panel>

</form>

现在，如果在Internet Explorer 6或Firefox 1.0.2中查看Web页面，将产生如下所示的代码：

<div>

<input type="hidden" span="__VIEWSTATE" id="__VIEWSTATE"

value="/wEPDwULLTEwODU4OTkxMzRkZHehxD/SHmjEeZzCKx7+bB752B3R" />

</div>

This text is contained within an ASP.NET Panel control

</div>

</form>

如果在比较老的浏览器(例如Mozilla 5.0)中查看这个页面，将产生如下代码：

<form name="form1" method="post" action="StyledPanels.aspx" id="form1"

<input type="hidden" span="__VIEWSTATE" id="__VIEWSTATE"

value="/wEPDwULLTEwODU4OTkxMzRkZHBovyeleyCJNtOpi+uco+l/zE5a" />

This text is contained within an ASP.NET Panel control

</div>

</form>

注意在两种情况下Panel都被呈现为一个<div>控件，但在第二种情况中，它丢失了高度和宽度信息。这里只是一个小小的变化，但是却是对ASP.NET 1.1的一项很重大的改进。ASP.NET 1.1以前在较老的浏览器中将ASP.NET的Panel控件呈现为HTML的表格。例如：

<table id="Panel1" cellpadding="0" cellspacing="0" border="0" height="

50"

width="125">

This text is contained within an ASP.NET Panel control

</td></tr>

</table>

现在虽然ASP.NET 2.0已经将很多类似的问题从我们的日常编程工作中移除，但有一个问题仍然存在，那就是在服务器端看到的内容与在客户端看到的内容不一样，而且无法保证同一个元素在不同的浏览器上会以相同的方式进行呈现。ASP.NET 2.0所要做的是提供一种机制，这种机制基于服务器端控件的类型而不是客户端控件的类型来指定元素的外观，因此当一个控件在不同的浏览器上显示时，其一致性将能尽可能地保持。这个目标是通过使用主题和皮肤实现的。

5.1.3 主题

主题(theme)用于定义站点的外观，类似于使用CSS设置页面的样式。然而，与CSS不同的是，主题可以指定服务器端元素，例如TreeView控件，在浏览器上显示时的外观。记住服务器控件必须转换为标准的HTML，而且如果浏览器理解在页面上如何呈现JavaScript的话，还可能会有一些JavaScript脚本。在浏览器请求页面时，一个设置了主题的服务器控件将转换为带有style属性的相关客户端元素。

一个主题在创建好之后有两种使用方式。可以将它用作Stylesheet主题，其行为类似于一个普通的CSS样式表。另一种方式是将它用作Customization主题，这将改变您习惯使用的样式选取规则，因为Customizaton主题将指定用于每个元素的样式，覆盖在单独的样式表中指定的所有样式，或者甚至覆盖元素的style属性中指定的样式。

无论以哪种方式使用主题，创建它的基本技术都是一样的。另外，可以选择在整个站点中使用一个主题，也可以为每个页面指定一个主题。

1. 创建主题

创建一个主题的过程包括创建一个.skin文件，该文件定义了页面上每个元素的外观，以及将这个皮肤文件放置到一个文件夹中，这个文件夹的名称就是所创建的主题的名称。所有的主题都保存在一个名为App_Themes的应用程序文件夹中。下面是一个皮肤文件示例：

<asp:Calendar runat="server" Font-Names="Century Gothic" Font-Size="

Small">

</asp:Calendar>

<asp:TreeView runat="server" ExpandDepth="1" Font-Names="Century Gothic"

BorderColor="LightSteelBlue" BorderStyle="Solid" >

</asp:TreeView>

<asp:Label SkinId= "textLabel" runat="server" Font-Names="Century Gothic"

Font-

Size="10pt" ForeColor="MidnightBlue"></asp:Label>

<asp:ImageButton SkinId="homeImage" runat="server" ImageUrl="

~/platypus.gif" />

这个文件包含了为4种类型的元素所作的定义。这个文件中的ASP.NET TreeView控件和Calendar控件定义了站点上的每个日历控件和树型视图控件的外观。注意这些控件没有ID属性—— 这是所有皮肤文件的一个特点。每个带有皮肤文件的元素都没有ID。在运行的时候，如果将这个主题指定为页面的默认主题，而该页面上包含一个Calendar控件，那么这个控件将自动继承在这个文件中定义的样式。

在这个皮肤文件中的另外两个控件Label和Image Button都有相关的SkinId属性。这些属性使得开发人员可以创建带有多种类型的Label控件或Image Button控件的站点，并使用皮肤数据提供的信息为选中的控件设置样式—— 对皮肤文件的链接由SkinId属性控制。因此，如果希望在Web页面上包含两个Label控件并使用一个主题为其中一个设置样式，那么可以使用如下语法：

<asp:Label ID="Label1" SkinID="textLabel" runat="server" Text="Label">

Styled label</asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label">Unstyled label</asp:Label>

这个示例中的SkinId属性指定了用于控件的样式，只要它是定义在页面所使用的主题中。

在下面的“试一试”练习中，将在VWD中创建一个简单的主题并查看怎样定义样式格式。将在本章后面的示例中使用这个主题和另一个主题。

(1) 在VWD中，打开Chapter05 Web站点。右击Solution Explorer顶部的C:/…/Chapter05文件夹并选择Add ASP.NET Folder→Theme。将看到如图5-12所示的画面。

图 5-12

(2) 将在应用程序内创建一个名为App_Themes的文件夹，以及一个在App_Themes内的新的空文件夹，必须为这个文件夹命名。现在将其命名为Blue。

(3) 右击App_Themes文件夹并添加一个新的Theme文件夹Red。现在已经为站点创建了两个主题，虽然到目前为止还没有任何包含样式定义的皮肤文件。

(4) 右击Blue文件夹并选择Add New Item。选择Skin File并将其命名为BlueBits.skin，如图5-13所示。

图 5-13

单击Add。查看生成的结果文件(如图5-14所示)将看到一些默认的注释，这些注释介绍了皮肤文件的基本知识。

图 5-14

(5) 重复这个步骤为Red主题添加一个皮肤文件，并将其命名为RedBits.skin。

(6) 在这个示例中，您将发现在向皮肤文件添加控件之前，创建一个简单的ASP.NET页面来试验新的样式是非常方便的。在Solution Explorer中右击C:/…/Chapter05文件夹并选择Add New Item，选择Web Form并将该文件命名为SkinSource.aspx，单击OK从而添加一个新页面。

(7) 将两个Calendar控件拖放到该页面上。接下来为这两个控件设置样式，第一步是手动为每个控件添加一些样式，使其中一个用于蓝色主题，而另一个用于红色主题。稍后，您将看到这些控件所使用的样式—— 首先，图5-15显示了在样式化之后它们看起来是什么样子。

图 5-15

注意Properties窗格中为Calendar控件包含了很多不同的样式选项。按表5-1和表5-2所示设置属性。

表 5-1

Blue Skin
属性	样式	代码
Font-Names	Century Gothic	<asp:Calendar ID="Calendar1" runat="server" Font-Names="Century Gothic" Font-Size="Small"> <OtherMonthDayStyle BackColor="Lavender" /> <DayStyle ForeColor="MidnightBlue" /> <TitleStyle BackColor="LightSteelBlue" /> </asp:Calendar>
Font-Size	Small
OtherMonthDayStyle- BackColor	Lavender
DayStyle-ForeColor	MidnightBlue
TitleStyle-BackColor	LightSteelBlue

表 5-2

Red Skin
属性	样式	代码
Font-Names	Garamond	<asp:Calendar ID="Calendar2" runat="server" Font-Names="Garamond" Font-Size="Medium" BorderColor="Chocolate" BorderStyle="Ridge" BorderWidth="8px" DayNameFormat="FirstLetter"> <OtherMonthDayStyle BackColor="BlanchedAlmond" /> <DayStyle ForeColor="Maroon" /> <TitleStyle BackColor="Maroon" Font-Bold="True" ForeColor="#FFFFC0" /> </asp:Calendar>
Font-Size	Medium
BorderColor	Chocolate
BorderStyle	Ridge
BorderWidth	8px
DayNameFormat	FirstLetter
OtherMonthDayStyle- BackColor	BlanchedAlmond
DayStyle-ForeColor	Maroon
TitleStyle-BackColor	Maroon
TitleStyle-Font-Bold	True
TitleStyle-ForeColor	#FFFFC0

(8) 现在将一个Label控件拖放到页面上并为其指定一些颜色和字体样式。下面的代码创建两个标签并定义了两个应该和蓝色以及红色主题匹配的样式：

<asp:Label ID="Label1" runat="server" Text="Label" Font-Names="century gothic"

Font-Size="10pt" ForeColor="MidnightBlue"></asp:Label>

<asp:Label ID="Label2" runat="server" Font-Names="garamond" Font-Size="11pt"

ForeColor="DarkRed" Text="Label"></asp:Label>

在定义好样式之后，就为接下来的步骤做好了准备。

(9) 在VWD中打开BlueBits.skin文件并将SkinSource.aspx页面中蓝色的Calendar控件和Label控件的HTML代码复制粘贴到这个皮肤文件中，然后删除这些控件的ID标记。

(10) 最后，为Label控件添加SkinID属性，以便为其指定一个在后面可以使用的惟一样式引用(注意下面代码中的粗体部分)：

<asp:Calendar runat="server" Font-Names="Century Gothic" Font-Size="Small">

</asp:Calendar>

<asp:Label SkinId="textLabel" runat="server" Font-Names="Century Gothic"

Font-Size="10pt" ForeColor="MidnightBlue"></asp:Label>

(11) 针对红色的控件重复步骤7、8，将它们放置在RedBits.skin定义文件中：

<asp:Calendar runat="server" Font-Names="Garamond" Font-Size="Medium"

BorderColor="Chocolate" BorderStyle="Ridge" BorderWidth="8px"

DayNameFormat="FirstLetter">

<TitleStyle BackColor="Maroon" Font-Bold="True" ForeColor="#FFFFC0"

</asp:Calendar>

<asp:Label SkinId="textLabel" runat="server" Font-Names="Garamond" Font-Size="11pt"

ForeColor="DarkRed" />

对其他希望添加到皮肤文件中的任何控件只需要重复以上步骤即可。在下一个“试一试”练习中，将在页面上添加一个Calendar控件和一个Label控件以显示这些主题怎样改变它们的外观。另外，还将添加一个TreeView控件和一个ImageButton控件，因此在皮肤文件中需要再添加一些样式信息。

(12) 将下面的代码添加到蓝色皮肤文件(BlueBits.skin)中从而为TreeView和ImageButton控件指定样式：

<asp:TreeView runat="server" ExpandDepth="1" Font-Names="Century Gothic"

BorderColor="LightSteelBlue" BorderStyle="Solid ">

</asp:TreeView>

<asp:ImageButton SkinId="homeImage" runat="server" ImageUrl="~/platypus.gif" />

(13) 现在需要添加一些代码，这些代码类似于红色皮肤文件(RedBits.skin)中的代码，从而指定怎样为一个TreeView控件设置样式：

<asp:TreeView runat="server" ExpandDepth="1" Font-Names="Garamond"

BorderColor="Chocolate" BorderStyle="Ridge">

</asp:TreeView>

<asp:ImageButton SkinId="homeImage" runat="server" ImageUrl="~/platypus.gif" />

创建主题所要做的事情就是这么多—— 现在应该在Chapter05站点中拥有两个主题：Blue和Red。

操作回顾

在Web应用程序的App_Themes文件夹内创建一个子文件夹，并在该子文件夹中创建一个.skin文件，这就是应用程序创建主题所需的工作。如果将站点部署在一个运行IIS的服务器上，还可以将各种主题放置在<drive>:/Inetpub/wwwroot/aspnet_clinet/<version>文件夹中，这使得服务器上的所有应用程序都可以使用这些主题。

可以为每个主题创建多个.skin文件。所需做的工作是在主题的文件夹中创建另一个.skin文件并在其中创建更多的控件定义。这将有助于将.skin文件定义分隔成比较小的几个部分。例如，如果创建了一个使用两种不同字体的站点(例如，一种用于用户普通文本而另一种用于代码片断)，那么可以将这两种样式定义在两个.skin文件中，一个包括用于普通文本的样式，而另一个包含用于代码片断的样式。

还可以在主题中包含CSS样式表并使用由友好的站点设计人员创建的样式。稍后会看到这是怎样实现的。不过首先需要实际使用Blue和Red两个主题！

在前面的示例中构成主题的.skin文件定义了一些标准的控件样式，可以将这些样式应用于页面上带有SkinID属性的Calendar控件或Label控件的实例。在下面的“试一试”练习中，将把这些主题应用于站点中一些简单的页面。注意本章使用的所有代码都可以从www.wrox.com下载。

(1) 先为站点创建一个Master页面。这是一个非常小也非常简单的站点，但是使用Master页面可以帮助您在站点内使用一致的方式导航。将Master页面命名为Themed-
Master.master。在该页面的左边添加一个TreeView控件，并使用下面的HTML代码将ContentPlaceHolder放置在右边。注意两个以粗体显示的<div>元素的style属性将使得页面的内容显示为两列：

<body>

<div style="float:left;padding-right:15px">

<asp:TreeView ID="TreeView1" runat="server">

</asp:TreeView>

</div>

<div style="float:left">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"

</asp:contentplaceholder>

</div>

</form>

</body>

(2) 需要为这个示例创建一个简单的web.sitemap文件以作为TreeView控件的数据源。右击Chapter05文件夹并选择Add New Item。添加一个web.sitemap文件并输入如下代码：

<?xml version="1.0" encoding="utf-8" ?>

<siteMapNode url="ThemeDefault.aspx" title="Default" description="

Default Page">

<siteMapNode url="ThemePage1.aspx" title="Page1" description="Themed

Page 1" />

<siteMapNode url="ThemePage2.aspx" title="Page2" description="Themed

Page 2" />

<siteMapNode url="Default.aspx" title="SubPage" description="Sub Page"

<siteMapNode url="StyledPage1.aspx" title="Page1" description="Page

1" />

<siteMapNode url="StyledPage2.aspx" title="Page2" description="Page

2 "/>

</siteMapNode>

</siteMap>

(3) 现在向Master页面添加一个SitemapDataSource控件并设置TreeView控件的DataSource属性—— 就像在第3章中做的那样。现在应该编写好如下所示的代码：

<body>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="

SiteMapDataSource1">

</asp:TreeView>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

</div>

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

</div>

</form>

</body>

图5-16显示了Design View中的内容。

图 5-16

(4) 现在要创建一些Content页面。在这个示例中，应该创建3个非常简单的页面。第一个文件的名称是ThemeDefault.aspx。右击Chapter05文件夹并选择Add New Item。确保为新页面选中Select a Master Page复选框并为其选择前面创建的Master页面(如图5-17所示)。

图 5-17

(5) 在这个新页面的Content占位符中输入如下文本：“Default page!”，然后将两个Label控件拖放到该页面上。把第一个Label控件的text属性设置为“Styled label”而第二个Label控件的text属性设置为“Unstyled label”。最后，将第一个Label控件的SkinID属性设置为textLabel。这将把该Label控件链接到皮肤文件并使用其中的样式。页面应该如图5-18所示。

图 5-18

(6) 最后，需要为页面指定使用哪个主题。让我们使用Blue主题。如果在Design View下，请单击灰色区域并查看这个Document的属性：在属性列表中，应该将Theme属性设置为Blue。保存该页面，这样第一个页面就制作好了。

如果喜欢使用Source View直接处理HTML代码，那么代码应该类似于下面的内容—— 注意页面顶部的@Page指令中的MasterPageFile和Theme属性(粗体)，它们控制了页面的布局和样式：

<%@ Page Language="VB" MasterPageFile="~/ThemedMaster.master" Title="Untitled Page"

Theme="Blue" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Default page!<br />

<asp:Label ID="Label1"SkinID="textLabel" runat="server" Text="Label"

Styled label</asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label">

Unstyled label</asp:Label>

</asp:Content>

(7) 现在需要以相同的方式添加另外两个页面。分别将它们命名为ThemePage1.aspx和ThemePage2.aspx。确保为这两个Content页面指定相同的Master页面。

(8) 在ThemePage1.aspx中，输入文本“Page 1”并在页面的Content区域添加一个Calendar控件。将该页面的Theme属性设置为Blue。该页面的源代码应该如下所示：

<%@ Page Language="VB" MasterPageFile="~/ThemedMaster.master" Title="

Untitled Page"

Theme="Blue" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Page 1<br />

<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

</asp:Content>

(9) 在ThemePage2.aspx中，输入文本“Page 2”并向页面添加一个ImageButton控件。将该控件的SkinID属性设置为homeImage，并将PostBackUrl属性设置为ThemeDefault.aspx。这意味着如果用户单击该图片，他将被带回ThemDefault.aspx页面。最后，将该页面的Theme属性设置为Red。该页面的源代码应该如下所示：

<%@ Page Language="VB" MasterPageFile="~/ThemedMaster.master" Title="Untitled Page"

Theme="Red" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Page 2<br />

<asp:ImageButton ID="ImageButton1" SkinID="homeImage "runat="server"

PostBackUrl="ThemeDefault.aspx" />

</asp:Content>

(10) 好极了—— 您已经完成了基本的工作，现在该看看辛勤工作的结果了！在Solution Explorer中单击ThemeDefault.aspx页面并按下Ctrl+F5运行该页面(如图5-19所示)。

图 5-19

导航到Page 1查看Calendar控件，如图5-20所示。

图 5-20

最后导航到Page 2(如图5-21所示)，该页面包含ImageButton控件，而且它使用的主题是Red。

图 5-21

(11) 将Page 1的Theme属性修改为Red。保存并再次查看该页面。它应该如图5-22所示。

图 5-22

操作回顾

本例将前一个“试一试”练习中创建的主题应用到一组简单的页面上。应该记得在第2章中讨论了Master页面的概念，但在本章中可以看到当一个页面使用了Master页面，那么呈现的页面将被看作是一个单独的实体。应该记得是怎样设置ThemeDefault.aspx页面使用Blue主题的，但并没有指定Master页面的Theme属性，不是吗？其实，无论在什么情况下都不能直接为一个Master页面指定Theme属性。这个示例已经说明，改变Content页面的Theme属性将改变整个页面(包括添加到master页面的TreeView控件)的样式，从而使其保持一致的外观。在不同的页面上使用不同的样式很容易，如您在本示例中看到的Page 1。

需要注意的代码片断是Page指令中的Theme属性和服务器控件的SkinID属性。向页面添加这两个信息后得到一个完成的页面。以ThemePage2.aspx为例：

<%@ Page Language="VB" MasterPageFile="~/ThemedMaster.master" Title="Untitled Page"

Theme="Red"%>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Page 2<br />

<asp:ImageButton ID="ImageButton1" SkinID="homeImage" runat="server"

PostBackUrl="ThemeDefault.aspx" />

</asp:Content>

页面顶部的Theme属性指定整个页面将应用哪一个主题，包括与这个页面相连接的Master页面的内容。SkinID属性指定页面上的ImageButton控件将使用为它准备的那一个皮肤，因此如果在皮肤文件中定义了多个ImageButton控件的样式，这个属性将指定在页面上使用其中的哪一个。

在前面的示例中，使用页面顶部的Theme属性指定使用哪个主题为页面设置样式。也可以使用另一个属性为页面上的元素指定样式：StyleSheetTheme属性。Theme属性和StyleSheetTheme属性都将主题作为属性值，它们的作用都是为页面指定主题，但两者在呈现的页面中会引起一些细微的差异。下面解释原因。

2. Customization主题—— 掌握控制权！

前一个示例中的页面使用了Theme属性，这意味着在这个示例中使用了Customization主题为页面设置样式。Customization主题对页面元素的样式有最终决定作用。如果手动设置页面元素的样式，而该页面由Customization主题控制，那么这些样式只有在主题中不包含对应元素的样式时才能得以应用。

3. Stylesheet主题—— 服务器控件的CSS

如果希望将主题像样式表那样使用，则只需要在页面的顶部使用StyleSheetTheme属性。这个变化意味着开发人员可以在每个标记的style属性中设置少量的样式，同时在主题内为站点提供一个一致的外观。

比较两种方式差别的最好方法是实际应用一下，所以在下面的“试一试”练习中将修改前面的示例以查看差别所在。

(1) 打开ThemeDefault.aspx页面并在代码中为文本“Styled label”添加Font-Bold=“true”。或者，可以切换到Design View，选中Styled label并在Properties窗格中将字体设置为粗体：

<asp:Label ID="Label1" SkinID="textLabel" runat="server"

Text="Styled label" Font-Bold="True"></asp:Label>

(2) 现在运行该页面可以看到字体已经变成粗体，如图5-23所示。

图 5-23

(3) 在BlueBits.skin文件中编辑带有SkinID=“textLabel”的标签，并添加下面的字体声明：

<asp:Label SkinId="textLabel" runat="server" Font-Names="Century Gothic"

Font-Size="10pt" ForeColor="MidnightBlue" Font-Bold="False"></asp:Label>

(4) 再次运行该页面，可以看到字体不再是粗体，如图5-24所示。

图 5-24

(5) 将ThemeDefault.aspx页面顶部的Theme属性修改为StyleSheetTheme。或者，可以切换到Design View，在Properties窗格中将页面的StyleSheetTheme属性设置为Blue，并删除Theme属性的值。重新运行这个页面将看到字体再次变为粗体。

操作回顾

这个练习中的第一步是为标签控件添加Font-Bold=“True”属性。由于粗体属性在Customizaton主题中没有指定，因此页面上的这个样式将成功地得以应用，同时控件的文本将显示为蓝色粗体。

但是，在皮肤文件中为textLabel控件添加Font-Bold=“False”将覆盖在页面上指定的样式，因为页面仍然在使用Customization主题(由页面顶部的Theme属性表示)。结果，第二次运行页面的时候，页面上就不存在蓝色粗体文本了。

最后一个步骤是将页面顶部的Theme属性修改为StyleSheetTheme。这使得页面上指定的样式具有较高的优先级，因此第三次运行页面的时候将再次看到蓝色粗体文本。

使用Stylesheet主题或者Customization主题完全由开发人员决定。选择Customization主题使得站点的设计人员能够更多地控制站点的外观，而Stylesheet主题则使得开发人员能够定义控件的外观。然而，必须记住，如果为控件自行添加样式属性，那么如果修改主题的内容、或者直接切换到一个完全不同的主题之后，可能会发现站点的外观看起来有些奇怪。

4. Stylesheet主题和Customization主题

ASP.NET中没有任何规则指定在页面中只能使用Stylesheet主题或Customization主题。如果希望可以在页面中使用两种级别的样式，无论是出于强制的原因还是最佳的决定，完全可以在站点中使用这两种主题。

例如，可能会指定不同页面之间的主要元素必须在外观上保持一致。页面的<body>标记内必须总是一种特定的字体，Menu控件必须总是包含特定样式的节点，但您也许希望只是将Label控件所应用的样式作为参考或默认样式。因此可以创建一个为主要的页面元素和Menu控件定义样式的主题，并将其用作Customization主题。然后可以使用其他样式信息创建一个不同的主题并在创建站点的时候应用它覆盖特定元素的样式，接着将这个主题用作Stylesheet主题。下面的列表是为应用程序设置样式的顺序：

(1) Stylesheet主题

(2) CSS样式

(3) Element样式

(4) Customization主题

在Customization主题中指定的样式总是会覆盖其他所有的样式。

5. 主题和CSS

CSS是为站点设置样式的一种非常好的方法，因此能够通过非常简单的方法将样式表整合到主题中也是非常好的。所需进行的操作是在主题的文件夹中添加一个样式表并将其放置在紧靠皮肤文件的后面。不使用ASP.NET的设计人员知道能够轻松地将他的设计整合到服务器端页面中一定会很高兴！

由于这不是一个很深奥的概念，因此可以直接通过一个简单的示例查看这是如果工作的。

(1) 在VWD中，右击Blue主题文件夹，选择Add New Item。在弹出的对话框中，添加一个新的样式表并将其命名为BlueStyleSheet.css。

(2) 在新创建的样式表中，添加如下代码：

body

{

font-family:Arial;

}

.bigtext

{

font-size:xx-large;

}

(3) 现在返回ThemeDefault.aspx页面并为没有设置样式的标签控件添加CssClass属性，将该属性的值设置为“bigtext”：

<asp:Label ID="Label2" CssClass="bigtext" runat="server" Text="Unstyled label">

</asp:Label>

(4) 运行页面将看到标签现在应用了xx-large文本样式(请查看CSS样式表的定义)，而页面的默认字体(<body>标记内的所有文本)变成了Arial字体，如图5-25所示。

图 5-25

(5) 切换到BlueBits.skin文件并添加另一个Label控件定义。将该控件的SkinID属性设置为“bigLabel”并添加CssClass属性，将该属性的值设置为“bigtext”，保存该文件：

<asp:Label SkinId="bigLabel" runat="server" CssClass="bigtext"></asp:Label>

(6) 删除标签中的CssClass属性并将SkinID属性设置为“bigLabel”：

<asp:Label ID="Label2" SkinID="bigLabel" runat="server" Text="Unstyled label">

</asp:Label>

注意这时VWD中的IntelliSense工具将会弹出来帮助您指定使用哪一个标签样式(如图5-26所示)，因为现在在所使用的主题中有多个可选的样式。

图 5-26

注意只有保存皮肤文件之后，在ThemeDefault.aspx页面中才能获得IntelliSense工具的支持。

再次运行该页面将显示同样的结果；惟一的差别在于样式信息是包含在皮肤文件中还是包含在页面中。

操作回顾

通过在主题文件夹内添加一个CSS样式表，该样式表就可以应用于所有使用这个主题的页面。一旦主题得以应用，无论它是Customization主题还是Stylesheet主题，位于该主题文件夹内的样式表中的样式对皮肤文件和页面都是可以使用的。

对应使用CSS设置样式的服务器控件，相同的规则也适用于由Customization主题和Stylesheet主题指定的样式—— 如果在一个主题中将CSS样式应用于某个元素，同时将一种不同的样式应用于页面上的一个元素，结果将根据所使用的主题类型而有所不同。如果使用的是Customization主题，那么在皮肤文件中定义的主题将覆盖所有在.aspx页面中指定的CSS类，而如果使用的是Stylesheet主题，则不会出现覆盖。

5.1.4 设置站点级别的样式

在很多情况下，开发人员可能会希望为站点内的所有页面指定一个一致的外观。虽然可以为所有的页面指定同一个主题，但是在某个中心位置为站点指定默认的主题将会更加迅速和简单。在ASP.NET 2.0中，可以在Web.config文件内添加一个值从而为站点中的页面指定默认的主题。应该记得在第4章中使用过Web.config文件为不同的用户账户指定站点的访问权限。由于Web.config文件是保存所有站点级别设置的中心位置，因此可以将站点的默认主题信息保存在其中。基本的语法如下所示：

<?xml version="1.0"?>

<system.web>

可以在Web.config文件中同时指定Stylesheet主题和Customization主题。如果在Web.config文件中指定了一个主题而页面中没有指定任何主题，那么这个页面将应用Web.config文件中的主题。另外，如果Web.config文件为站点指定了一个Customization主题，而页面中指定了一个Stylesheet主题，那么应用于页面的将是Web.config文件中的Customization主题。下面是经过细微修改的样式优先级，其中包括Web.config文件内的主题：

(1) Web.config文件内的Stylesheet主题

(2) 页面上的Stylesheet主题

(3) CSS样式

(4) Element样式

(5) Web.config文件内的Customization主题

(6) 页面上的Customization主题

如果希望完全控制整个站点的外观，则可以在Web.config文件中指定一个Customization主题。

在下面的“试一试”练习中，将为本章中创建的小应用程序指定一个站点级别的主题。

(1) 右击Chapter05文件夹并选择Add New Item。在弹出的对话框中，创建一个新的Web配置文件(Web.config)并单击OK。

(2) 将下面的代码(灰色部分)添加到Web.config文件中并保存该文件：

<?xml version="1.0"?>

<!--

Note: As an alternative to hand editing this file you can use the

web admin tool to configure settings for your application. Use

the Website->Asp.Net Configuration option in Visual Studio.

A full list of settings and comments can be found in

machine.config.comments usually located in

/Windows/Microsoft.Net/Framework/v2.x/Config

-->

<system.web>

(3) 删除所有页面中的Theme属性和Stylesheet属性并运行该应用程序。站点中的所有页面都将应用Red主题，但请注意图5-27中显示的ThemeDefault页面。

图 5-27

操作回顾

所显示的ThemeDefault.aspx页面看起来好像是两种主题同时作用的结果，尽管指定了站点的所有页面都应该使用Red Customization主题。然而，在前面的示例中，您在Blue主题中添加了一个CSS文件并设置了一些样式信息，同时因为Blue主题被设置为站点的Stylesheet主题，而且在Red主题中没有对应的样式信息，因此这些样式将得以从Blue主题中提取出来并应用于<body>中的文本和“Unstyled label”标签控件。

该页面的<body>标记内的第一行HTML代码是：

Default page!<br />

因此这些文件将应用BlueStyleSheet.css文件中的body样式：

body

{

font-family:Arial;

}

代码中的下一个内容是“Styled label”控件，该控件的SkinID属性值为textLabel：

<asp:Label ID="Label1" SkinID="textLabel" runat="server" Text="

Styled label"

Font-Bold="True"></asp:Label>

由于这个SkinID在两个主题中都存在，因此将应用Red主题，因为这个主题在Web.config文件中被设置为Customization主题：

<asp:Label SkinId="textLabel" runat="server" Font-Names="Garamond"

Font-Size="11pt"

ForeColor="DarkRed" />

下面是Web.config文件中设置主题的代码：

记住Theme属性表示Customizaton主题。然而，在这个示例中指定的Red主题没有SkinID为“bigLabel”的标签定义，所以将使用Blue主题中的样式：

<asp:Label ID="Label2" SkinID="bigLabel" runat="server" Text="Unstyled

label"></asp:Label>

因此页面中的最后一个控件将应用Blue主题中的样式：

<asp:Label SkinId="bigLabel" runat="server" CssClass="bigtext"></asp:Label>

最后需要注意的是，Label控件仍然是页面的一部分，而且因为没有为这个控件指定其他字体信息，它还将从Blue主题的CSS文件中继承样式。

本章最后一个示例将查看Wrox United应用程序中的主题。下面的小节将迅速查看这个应用程序的主题和样式。

Wrox United站点定义的主题控制了球队站点的外观。这个站点有两个主题：Red主题和Blue主题。普通的、日常使用的是Red主题，它以红色和黄色粗体的内容反映出球队的设备。另一个可以使用的与Red相对的主题是Blue主题，设计它主要是为了显示两个用于站点的主题之间的差别。图5-28显示了使用Red主题的站点。

在Wrox United站点中应用主题的方法与在本章前面讨论的技术有所不同，因为它与用户的偏好有关。如第4章所示，可以为站点添加用户账户从而使得用户可以登录站点。一旦用户登录Wrox United站点之后，有一些代码使得这个用户可以在站点中保存个人信息(用户的姓名、地址等)和个人偏好，例如当用户登录时站点要应用哪个主题。

处理主题切换的代码将在第11章中详细讨论，因为这涉及到其他一些本书到目前为止还没有介绍的技术。然而，在下面的“试一试”练习中，可以看到主题是怎样应用于Wrox United站点的，同时这个示例还将逐步介绍为Wrox United站点定义主题的过程中最有趣的内容。

图 5-28

(1) 打开Wrox United站点的本地副本—— 它应该保存在C:/BegASPNET2/WroxUnited文件夹中。

(2) 按下Ctrl+F5运行这个站点，浏览器中将显示默认颜色样式的主页。在左下方的登录框中，输入用户名Lou，口令Lou@123。在登录框下面的框中，需要单击Modify Account链接，如图5-29中的手型图标所示。

图 5-29

(3) 在出现的画面中(如图5-30所示)，从Theme下拉列表框内选择Wrox Blue主题并单击Save Changes。

图 5-30

(4) 单击菜单顶部的Home链接返回站点主页，现在应该看到站点应用了Blue主题，如图5-31所示。

图 5-31

操作回顾

这个示例演示了Wrox United站点的主题切换能力，这个功能将在第11章详细讨论，但本示例的重点是站点的样式本身。

这个站点上使用了很多样式，因此首先看看Wrox Red主题，研究怎样使用这个主题为页面上的元素设置样式。

可以从该站点的代码(从www.wrox.com)中找到这个主题文件(WroxRed Theme文件夹内的WroxRed.skin文件)。下面列出该皮肤文件中定义的一些样式：

<asp:Label runat="server" ForeColor="#000000" BackColor="transparent"

></asp:Label>

<asp:TextBox runat="server" ForeColor="#000000" BorderWidth="1px"

BorderStyle="Solid" BorderColor="#ff0000" BackColor="Transparent"

></asp:TextBox>

<asp:Button runat="server" BorderStyle="Solid" BorderColor="#ff0000"

BorderWidth="1pt "ForeColor="#000000" BackColor="#ffe5e5"></asp:Button>

<asp:HyperLink runat="server" Font-Underline="True" BorderStyle="None"

</asp:HyperLink>

注意Label、TextBox、Button、HyperLink和Calendar控件都有特定的样式定义，这意味着这些类型控件的每一个实例都将使用这个皮肤文件中定义的样式。

下面是TextBox控件的定义：

<asp:TextBox runat="server" ForeColor="#000000" BorderWidth="1px"

BorderStyle="Solid" BorderColor="#ff0000" BackColor="Transparent"

></asp:TextBox>

根据这个定义，TextBox将有一个红色的实线边界。注意BorderColor属性的值并不是英文单词red，相反是表示单纯、明亮红色的十六进制数。

井字符号(#)表示所要应用的颜色由十六进制数表示。接下来的两个字符表示要为控件添加多少红色，范围从00到FF。再接下来的两个字符表示要应用的绿色的深度，最后两个字符控制了蓝色的深度。十六进制值000000表示纯黑色(没有任何颜色)，而FFFFFF则表示白色(三种颜色混合到一起)。

十六进制计数系统(有时称为以16为基数)表示十六进制值FF等于十进制值256。由于每个部分有256个值，三个部分就使得可选择的颜色有16,000,000种之多！

Wrox Red主题还有一个相关的CSS样式表WroxRed.css，从下载的代码中也可以找到这个文件。下面是该文件的部分代码：

html, body {

margin: 0;

padding:0 5px 0 5px;

background-color: #f00;

color: #000;

}

title {

color: #f66;

}

#nav {

background-color: #f00;

width: 20px;

float: left;

margin-left: -1px;

padding: 10px;

}

#content {

padding: 10px;

margin-left: 230px;

width: 100%;

}

这个主题中的样式为一些元素定义了一些简单的颜色和位置信息。#nav和#content定义分别用于匹配ID值为nav和content的所有元素，而不是指定class属性，或者指定一个样式的特定的元素类型。

本章中讨论的概念可以带来好处，也可以带来坏处。在站点中可以定义任意数量的样式，但如果对样式没有一定的把握，那么到最后可能会把站点弄得一团糟。而且没有良好的布局，样式就没有任何作用—— 它们是相辅相成的。必须以某种有意义的方式组织页面，这样用户才能明白您要告诉他的是什么。既然已经明白为站点设置样式和显示站点的基本要求，现在就需要理解可用性(usability)和可访问性(accessibility)两个概念。

5.3.1 可用性

可用性是关于怎样挽留用户的概念，怎样让他们在浏览站点的时候获得最好的用户体验。用户希望看到他们的请求得以迅速的响应，他们希望能够找到需要的东西，而且他们希望能明白这个站点是做什么的。一个带有15种字体的站点将会显得很混乱，难以阅读，很有可能是由某个从来不花费时间阅读站点内容的人将它们胡乱拼凑到一起。

每个Web开发小组的目标都是要让站点尽可能地好用，这意味着开发人员和设计人员一起合作，从而提供一个具有吸引力的、直观的用户界面，这正是本章中讨论的技术的目标所在。要实现站点的可用性必须遵循以下基本原则：

● 可学习：精心设计用户界面，从而使得一个第一次访问站点的用户能以最少的时间理解站点的设计并使用站点。

● 高效率：注重站点的效率，使得有经验的用户可以迅速地完成任务。

● 可记忆：一个用户在第二次访问站点的时候应该能记住怎样使用这个系统。

● 错误处理：尽可能减小错误带来的影响，如果有错误发生，则向用户显示一个友好的界面并尽快恢复功能。

● 满意度：用户应该喜欢浏览您的站点。

很多人都写过关于可用性的文章，但在讨论可用性的原则时主要的参考站点是www.useit.com，该站点的所有人是Jakob Nielsen。建议所有的开发人员都应该投入一些时间研究一下这个问题，并深刻理解怎样才能使站点真正有效率。

5.3.2 可访问性

可访问性是关于如何让所有用户访问站点的概念。例如，Web用户在屏幕阅读器的帮助下访问站点，这个工具将朗读位于站点上的内容。另一种情况上，这些用户可以将它们的画面设置为很低的分辨率，从而使得屏幕无法显示站点的页面。另一种极端的情况是，也有用户使用Pocket PC连接到网络，而这种设备一次只能显示320×240个像素的信息。在不同的设备，例如Pocket PC上所使用的浏览器将应用先进的技术使得Web页面能够适应屏幕的大小。有时还需要特别迎合用户的需要，因为他们使用的浏览器功能比较有限；例如不能使用客户端JavaScript的浏览器，或者为了节约带宽不显示图片的浏览器。如果页面上不能显示某个图片，最好是在图片原来的位置上显示一些文字说明原图片要表示的是什么。

可访问性的核心内容是一些实际的技术，这些技术使得站点能尽可能地容易访问。例如，如果有一个屏幕阅读器朗读源代码，那么在图片中应该总是包含HTML alt属性，以便屏幕阅读器能够描述图片要显示的内容。应该始终提供代码以便在不支持HTML<frame>元素的浏览器中使用<noframes>显示页面，同时应尽可能避免使用嵌套层次结构过多的HTML表格为站点布局，因为屏幕阅读器将朗读每个表格单元和每一行的内容。

加强站点的可访问性有很多原则可循，但应该首选阅读下面的站点：www.w3.org/WAI/。

这个站点是关于Web Accessibility Initiative的权威站点，里面有很多有用的、重要的建议。

虽然可以使用的资源非常丰富，但是这个世界上的大多数开发人员都没有认真地考虑过加强站点的可访问性。有些开发人员考虑过这个问题并修改了站点，试图让其具有更好的可访问性，但是要开发一个真正具有可访问性的站点实际上是非常困难的。

以Wrox United站点为例。本书主要专注于教授怎样创建ASP.NET站点。我们的重点是告诉您什么是可能的、可以使用哪些技术以及怎样快速查看结果。要使这个站点真正具有可访问性将需要更多的时间，而且这可能是另一本书的主题。

作者强烈建议多了解一些关于怎样创建具有真正可访问性的公共站点的内容，因为提供一个不可访问的站点是违法的(虽然通常不是强制的)，正如英国残疾人权益保障法(www.opsi.gov.uk/acts/)所描述的那样。对站点的不可访问性进行起诉的案件非常少，但是因为不可能创建完全可访问的站点，在设计站点时为残疾人提供可访问性是很有意义的，而且也能增加个人的专业声誉。

本章讨论了为页面及其元素设置样式的各种不同的技术，并演示了大量控制站点外观的方法。ASP.NET 2.0新提供的皮肤和主题技术使得开发人员能够将各种可以使用的技术融合到一个应用很方便的软件包中。

本章讨论了以下内容：

● 如何将style属性应用于元素。

● 如何将style属性中的信息移到页面的<style>区域，然后再移到单独的CSS文件中。

● 创建ASP.NET主题并将主题应用于页面。

● Customization主题和Stylesheet主题之间的差别。

● 结合主题和CSS。

● 为站点的所有页面指定一致的外观。

● 可用性和可访问性的问题以及这两个问题在当今的Internet世界中为何非常重要。

下一章将讨论完全不同的内容；在代码中产生和处理事件的问题，同时介绍回送驱动结构的概念。

(1) 在页面上有一个ASP.NET Label控件。该控件有font-italic=“true”属性以及Css Class=“maintext”属性：

<asp:label id="myLabel" CssClass="maintext" font-italic="true"