ASPNET 20入门经典5.doc

开发任何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属性。例如：This is a styled div tag图5-1显示了这个style属性在Internet Explorer中的效果。图 5-1 在下面的“试一试”练习中，首先将创建一个可以在其中进行本章所有示例的站点。(1) 在VWD中，打开名为Chapter05的初始示例站点(C:BegASPNET2ChaptersBegin)。这个初始站点仅仅包含了少数几个文件，从而为进行本章中的示例做好了准备。(2) 添加一个新的空白.aspx页面并将其命名为Default.aspx。直接切换到Source View并在Form标记之间输入灰色部分的代码：This is a styled div tag请注意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。在这个页面中，需要添加一个元素，该元素内的文本是“This is highlighted text”以及一个标题1(h1)元素，该元素内的文本是“This is also highlighted text”。(6) 使用Style Builder对话框(如图5-5所示)将两个元素的字体设置为Trebuchet MS，并将颜色设置为藏青色。这个操作将在Source View中自动添加如下代码：This is highlighted text.This is also highlighted text.图 5-5(7) 在浏览器中查看该页面以便浏览完成后的文档。其内容应该类似图5-6所示。图 5-6操作回顾现在这个页面可能还不是很令人满意，但修改其外观并不需要占用很多时间。接下来就可以把这项技术用于站点上的每个元素。可以在一个站点中使用多种不同的样式属性，附录E中列出了一些最常用的元素，可以帮助开发人员为站点选择最喜欢的样式。在学习了如何为页面上的元素设置样式之后，将样式表嵌入代码就不是什么复杂的问题了。HTML元素的样式属性的语法和样式表中所使用的样式语法完全一样，下一小节将学习如何使用样式表从而提高代码的可维护性。样式表的概念从出现至今已有数年的时间(它最初是由W3C在1996年12月作为一个建议提出来的)，每个设计得很优秀的站点都包含有一个定义明确的CSS样式表，这个样式表为站点定义了一个特定的外观。使用样式表，开发人员可以定义页面上每种类型的元素应怎样显示，同时还可以为特定的样式创建定义并将其应用于页面上的相关元素。例如，可以指定每个标记的实例都应包含藏青色的文本，或者也可以定义一个名为HighlightedText的样式类(class)，然后将其应用于页面上的所有标记以及类似的元素。下面是一个样式表的一部分代码，其中分别定义了这两种样式：divfont-family: Trebuchet MS;Color: Navy;.HighlightedTextfont-family: Trebuchet MS;Color: Navy;注意这两者之间的惟一差别是HighlightedText类的前面有一个点号，这个类名是用户自定义的。点号表示可以将这个区域作为一个类应用于任意元素，而不用为某种特定类型的元素定义默认样式。为了将样式用于元素，并不需要对元素本身进行任何修改；只要页面知道在什么地方能够找到样式信息，样式就可以自动地得以应用(稍后将讨论怎样定位样式信息)。然而，为元素指定某个特定的自定义类样式时，可以使用Class属性，例如：This is highlighted text.This is also highlighted text.虽然在本书中看不到文本的颜色，但是可以看到在前面的样式类定义的字体样式已经应用于这两个元素，如图5-7所示。图 5-7当然，如果亲自进行这个练习，将看到字体呈藏青色。1. 样式的语法样式定义包含在花括号之间。开括号的位置可以紧跟在元素或类名的后面，也可以另起一行；例如，div样式可以重写为如下形式：divfont-family: Trebuchet MS;Color: Navy;可以任意选择自己喜欢的样式 就作者个人而言，我喜欢将所有的括号放在一条垂直线上对齐。也可以对样式信息使用类似锚标记()这种带有特定变化的标记，从而在将鼠标放置在这些标记上时它们的外观能够自动发生变化，如下所示：a:link, a:visitedcolor: #cc3300;text-decoration: underline;a:hovertext-decoration: none;a:activecolor: #ff9900;text-decoration: underline;此代码将在页面上显示带有下划线的红色链接，当用户将鼠标放在链接上时，下划线将消失，而在单击链接时，它们立即变成浅橙色。通过这种方式可以提示用户鼠标正位于某个链接之上，并且刚才单击过某个链接。由逗号分隔开的两个条目表示后面的样式信息对它们都有效(在这个示例中，逗号分隔的两个条目是a:link和a:visited)。完全使用CSS为页面设置样式的第一步就是决定要为每个元素设置什么样的样式并创建一组样式定义。可以将样式定义存放在两个位置从而将其应用到Web页面上。第一个位置是将其存放在页面顶部元素内的标记内。另一种选择是创建一个独立的外部样式表来保存样式定义，并将这个外部样式表文件链接到需要使用它的Web页面。在下一小节将首先介绍把样式定义放在页面上的标记内的技术，然后再介绍怎样引入外部的CSS样式表。2. 将样式信息从style属性移到style区域如果只对单个页面设置样式，则可以将样式信息嵌入到页面的HTML语言的标记内，如下所示：Styled Page 1.HighlightedTextfont-family: Trebuchet MS;Color: Navy;This is highlighted text.This is also highlighted text.这些代码和前面示例中所使用的代码是一样的。注意怎样使用标记在页面的区域内简便地嵌入样式信息。在单个页面中使用这种技术是很好的 实际上，如果曾经将Word文档保存为HTML，将看到这种技术用于定义文档的样式从而使得该文档呈现为HTML。作者在Word 2003中将这个文件保存为Web Page(Filtered)，这种方式产生的HTML代码比在Word中将这个文件保存为Web Page时自动产生的标准代码要整洁得多。在保存该文件之后，作者查看了产生的源代码，并发现了如下所示的样式定义，它们描述了在本章中使用的某些高亮区域是怎样定义的：p.code, li.code, div.codemargin-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;:这种技术对于创建要在多个页面中使用样式信息的站点并不理想，因为开发人员必须为站点内的每个页面单独地复制标记和样式定义。对这种情况的解决方案是将样式定义移到一个单独的CSS文件中。3. 将样式信息移动到单独的CSS文件中这可能是最简单的一个步骤。一旦将样式定义封装在标记之内以后，将这些信息提取到一个单独的样式表中实在是一件非常容易的事情。开发人员需要进行的所有工作就是创建一个扩展名为.css的文件，将Web页面内的样式信息复制到该文件中，并以如下方式添加该样式表的链接：Styled Page 2样式表文件中只包含样式信息，因此可以说现在已拥有一个包含所有样式代码的样式表：.HighlightedTextfont-family: Trebuchet MS;color: Navy;a:link, a:visitedcolor: #cc3300;text-decoration: underline;a:hovertext-decoration: none;a:activecolor: #ff9900;text-decoration: underline;接下来可以将该样式表链接到Web页面，并在页面中添加如下灰色部分代码：This is highlighted text.This is also highlighted text.This is a sample link在查看这个页面时将看到如图5-8所示的画面。图 5-8 接下来将实践这些概念。在下面的“试一试”练习中，将在前面创建的StylePage1.aspx页面的基础上创建一个简单的样式化页面。(1) 在Chapter05站点中创建另一个名为StylePage2.aspx的新页面。(2) 从StyledPage1.aspx页面中复制标记和标题，并删除每个元素中的style属性。在相同的位置上，添加一个class属性，并将其值设置为“HighlightedText”。This is highlighted text.This is also highlighted text.(3) 在页面的标题下面添加一个文本为“This is a sample link”的超链接。将“default.aspx”设置为它的href属性的值。This is highlighted text.This is also highlighted text.This is a sample link(4) 该链接的后面添加一个换行符，并在该换行符的后面添加一个ASP.NET的Label控件。您应该记得服务器控件有一组与标准控件不相同的属性，因此将该标签控件的CssClass属性设置为“HighlightedText”，同时将Font-Italic属性设置为“true”：This is also highlighted text.This is a sample link(5) 在Solution Explorer中右击Chapter05站点并选择Add New Item。从图标列表中选择StyleSheet并接受默认名称：StyleSheet.css。在这个文件中，添加如下代码：.HighlightedTextfont-family: Trebuchet MS;color: Navy;a:link, a:visitedcolor: #cc3300;text-decoration: underline;a:hovertext-decoration: none;a:activecolor: #ff9900;text-decoration: underline;注意在CSS样式表中所使用的语法与在Source View中对某个HTML控件设置style属性时所使用的语法是相同的，这将有助于CSS文件的编写，如图5-9所示。另外还要注意到工具栏上的Build Style图标；如果单击这个按钮，将启动Style Builder对话框。可以自己尝试使用这个对话框 添加另一个元素定义(例如)，并在其后添加一对花括号。将光标放置在花括号内并单击该按钮启动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文件拖放到设计区时，页面的顶部将添加如下代码：Styled Page 2页面顶部的这个链接告诉Web页面到什么地方查找样式信息。从此刻起，页面中的任何class属性都将试图引用这个CSS样式表以便为这些元素找到样式信息。如果找不到相应的类，就不会有任何样式应用于元素，除非在元素的Style属性中手动指定了样式。对指定了class属性的HTML元素，还可以在它的Style属性中指定额外的样式信息。任何定义在Style属性中的样式都将重写那些在CSS文件中指定的样式，从而使得开发人员可以调整页面上特定元素的外观。服务器控件有些不同。由于服务器控件在呈现时会被转换为恰当的HTML代码，所以可以使用的属性将会不尽相同。在这个示例中，使用了一个Label控件。相对而言，Label控件非常简单，所以可对其添加的样式不是很多。在本示例中，您为其添加了一个CSS链接，并定义了另一个样式。服务器控件所使用的CssClass属性直接和HTML元素的class属性相关。而单个的样式属性则类似于HTML元素中的style属性：在呈现该标签的时候，将产生如下代码：This is an ASP.NET label注意在浏览器中自定义的样式属性被转换为一个标准的style标记。因为CSS样式在客户端才起作用，所以页面一旦呈现之后，HTML元素的class属性和style属性都将得以应用，就像静态的HTML元素那样。4. CSS的局限性和使用服务器端代码设置样式在使用CSS为站点设置样式时，可以指定特定元素在页面上的外观。这对于一个静态的HTML站点是可以的，单对于服务器端元素，这可能会有一些问题。例如，一个简单的ASP.NET控件Panel。如果将一个Panel控件拖放到页面上，添加一些文本，并在两个不同的浏览器中查看这个页面(例如，Internet Explorer和一个比较老的或功能有限的浏览器，如Links)，在查看页面的源代码时会看到不同的结果。下面是一些源代码示例：This textis contained within an ASP.NET Panel control现在，如果在Internet Explorer 6或Firefox 1.0.2中查看Web页面，将产生如下所示的代码：This text is contained within an ASP.NET Panel control如果在比较老的浏览器(例如Mozilla 5.0)中查看这个页面，将产生如下代码：This text is contained within an ASP.NET Panel control注意在两种情况下Panel都被呈现为一个控件，但在第二种情况中，它丢失了高度和宽度信息。这里只是一个小小的变化，但是却是对ASP.NET 1.1的一项很重大的改进。ASP.NET 1.1以前在较老的浏览器中将ASP.NET的Panel控件呈现为HTML的表格。例如：This text is contained within an ASP.NET Panel control现在虽然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的应用程序文件夹中。下面是一个皮肤文件示例：这个文件包含了为4种类型的元素所作的定义。这个文件中的ASP.NET TreeView控件和Calendar控件定义了站点上的每个日历控件和树型视图控件的外观。注意这些控件没有ID属性 这是所有皮肤文件的一个特点。每个带有皮肤文件的元素都没有ID。在运行的时候，如果将这个主题指定为页面的默认主题，而该页面上包含一个Calendar控件，那么这个控件将自动继承在这个文件中定义的样式。在这个皮肤文件中的另外两个控件Label和Image Button都有相关的SkinId属性。这些属性使得开发人员可以创建带有多种类型的Label控件或Image Button控件的站点，并使用皮肤数据提供的信息为选中的控件设置样式 对皮肤文件的链接由SkinId属性控制。因此，如果希望在Web页面上包含两个Label控件并使用一个主题为其中一个设置样式，那么可以使用如下语法：Styled labelUnstyled label这个示例中的SkinId属性指定了用于控件的样式，只要它是定义在页面所使用的主题中。在下面的“试一试”练习中，将在VWD中创建一个简单的主题并查看怎样定义样式格式。将在本章后面的示例中使用这个主题和另一个主题。(1) 在VWD中，打开Chapter05 Web站点。右击Solution Explorer顶部的C:Chapter05文件夹并选择Add ASP.NET FolderTheme。将看到如图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-1Blue Skin属 性样 式代 码Font-NamesCentury GothicFont-SizeSmallOtherMonthDayStyle- BackColorLavenderDayStyle-ForeColorMidnightBlueTitleStyle-BackColorLightSteelBlue表 5-2Red Skin属 性样 式代 码Font-NamesGaramondFont-SizeMediumBorderColorChocolateBorderStyleRidgeBorderWidth8pxDayNameFormatFirstLetterOtherMonthDayStyle- BackColorBlanchedAlmondDayStyle-ForeColorMaroonTitleStyle-BackColorMaroonTitleStyle-Font-BoldTrueTitleStyle-ForeColor#FFFFC0(8) 现在将一个Label控件拖放到页面上并为其指定一些颜色和字体样式。下面的代码创建两个标签并定义了两个应该和蓝色以及红色主题匹配的样式：在定义好样式之后，就为接下来的步骤做好了准备。(9) 在VWD中打开BlueBits.skin文件并将SkinSource.aspx页面中蓝色的Calendar控件和Label控件的HTML代码复制粘贴到这个皮肤文件中，然后删除这些控件的ID标记。(10) 最后，为Label控件添加SkinID属性，以便为其指定一个在后面可以使用的惟一样式引用(注意下面代码中的粗体部分)：(11) 针对红色的控件重复步骤7、8，将它们放置在RedBits.skin定义文件中：对其他希望添加到皮肤文件中的任何控件只需要重复以上步骤即可。在下一个“试一试”练习中，将在页面上添加一个Calendar控件和一个Label控件以显示这些主题怎样改变它们的外观。另外，还将添加一个TreeView控件和一个ImageButton控件，因此在皮肤文件中需要再添加一些样式信息。(12) 将下面的代码添加到蓝色皮肤文件(BlueBits.s