全国连锁早教机构:创建可供用户选择的主题

来源:百度文库 编辑:中财网 时间:2024/05/03 00:43:05
主题是ASP.NET 2.0中的新功能,能够对网页外观进行更多的控制。主题可以定义颜色配置、字体名称、字体大小和样式、甚至是图片(是方角还是圆角,或者使用不同的颜色和阴影)。ASP.NET 2.0中增加了对"skin"的支持,这是对CSS想法的一种扩展。每个用户都可以从列表中选择一个主题,所选的主题决定了该用户会话期间网页的外观格式设置(称为"skin"),相对CSS样式表来说,skin是在服务器端的。skin文件与CSS文件类似,但与CSS不同的是,skin能够把页面中服务器端控件显式设置的外观属性值覆盖掉(全局CSS无法覆盖单独控件上的设置)。可以用主题来保存不同版本的图片,这样如果想拥有几套在当前skin基础上使用不同颜色配置的图片,这就能用到主题。然而,主题不能替代CSS,可以将CSS文件和skin文件结合起来使用实现灵活控制。至于样式表文件,在ASP.NET 2.0中没有什么创新,除了允许为一些新控件指定其CssClass属性外,还增加了一些可视化设计器支持的控件,以便能够为它们选择预定义的CSS样式。
主题是存放在网站App_Themes文件夹中子文件夹下的一组文件,包含以下项目:
CSS样式表文件,其中包含了对HTML对象外观的定义。
skin文件--这些文件定义了ASP.NET服务器端控件的外观,可以认为Skin文件是服务器端的样式表文件。
其他资源,例如图片。
ASP.NET 2.0在实现主题的方法上有个很酷的地方:当在页面上应用主题时,ASP.NET在运行时会自动为每个页面添加一个元标记,用来链接主题文件夹中的各个CSS文件。这样很方便,因为对已存在的CSS文件重命名,或者增加新的CSS文件,页面仍然能够自动地链接它们。这个功能尤其重要,因为能够实现在运行时动态更换主题(就像更换模板页面)的功能,ASP.NET会对新主题文件夹中的文件进行链接,这样网站的外观就得以改变,从而适合不同用户的喜好。如果没有这个机制,就需要根据浏览者所选的主题为每一个页面手工创建元标记,这是非常困难的。
在主题这一类功能中最好的是服务器端样式表,称为skin文件。它们的扩展名为.skin,包括了对ASP.NET控件的声明,如下所示:

除了在skin中声明时不需要指定控件的ID外,所有在.aspx页面中的声明都是需要指定控件ID的。当在页面上应用skin文件后,页面上的控件就采用skin文件中所指定的外观样式。对于TextBox控件来说这似乎没有什么优势,因为也可以在CSS样式表文件中为定义一个样式类。然而,很多复杂控件都不能这样处理,例如Calendar、DataGrid (或者新的GridView 控件)等,这就要花费很多精力了,因为这些控件之间无法用一个HTML元素联系起来,因此不能轻易地在样式表文件中通过单个类为它们定义样式。
注意:
可以用单独的.skin文件来存放对任何控件类型的定义,也可以为每种控件类型创建单独的.skin文件,例如TextBox.skin、DataGrid.skin和Canlendar.skin等,在运行时,这些文件会在内存中合并起来。这取决于开发人员更喜欢哪种方式。
对某一页面应用主题,需要使用@Page指令中的Theme属性:
<%@ Page Language="C#" Theme="NiceTheme"
MasterPageFile="~/MasterPage.master" ... %>
对所有页面应用某个主题,就需要对web.config中元素的theme 属性进行设置,如下所示:

对于模板页面,也可以通过编程来改变主题,在Page 类的PreInit事件中编写代码。例如,下面展示了如何应用一个主题,主题的名称存放在一个Session 变量中:
protected void Page_PreInit(object sender, EventArgs e)
{
if (this.Session["CurrentTheme"] != null)
this.Theme = this.Session["CurrentTheme"];
}
在第4章中,将对这种机制进行改进,使用新的Profile属性来代替使用Session变量。
在使用@Page指令(或者是web.config)的Theme 属性时,skin文件中定义的属性值会将.aspx文件中指定的值覆盖掉。如果想让主题也能像CSS样式表那样工作,也就是说,对于特定的控件,在.skin文件中定义的样式可以在.aspx页面中重新进行指定,这样就只能在@Page指令中设置StylesheetTheme属性为一个主题。或者是设置web.config文件中 元素的styleSheetTheme属性为一个主题,请不要将Theme属性与StylesheetTheme属性混淆。
到此为止,已经介绍了未命名的(unnamed)skin--能为同一类型的所有控件定义外观的skin。然而,有时需要让某个控件的外观与skin文件中所定义的不同,这时,可以采用以下三种方法:
1. 前面已经提到过,可以通过StylesheetTheme属性应用一个主题(不是Theme 属性),这样在.aspx文件中设置的视觉属性会将skin文件中定义的覆盖掉。然而主题机制的默认行为是确保同一类型的所有控件有同样的外观,因为当有多个页面开发人员时,不能确保每个开发人员是否在严格要求下才会在.aspx页面中使用特性。
2. 只对该控件禁用主题,然后像正常情况一样为它设置外观,如以下代码所示:
BorderStyle="Dotted" BorderWidth="2px" />
3. 为控件使用已命名的skin,即使用SkinID属性来引用一个定义好的skin,如下所示:


当声明控件时,需要为它的SkinID 属性设置一个相匹配的值,如下所示:
Text="Your message has been successfully sent."
SkinID="FeedbackOK" Visible="false" />Text="Sorry, there was a problem sending your message."
SkinID="FeedbackKO" Visible="false" />
我认为这是最好的可行办法,因为它允许为同一个控件类型定义多个外观,且都放在一个单独文件中,然后可以应用在任何页面中。另外,如果保持所有格式定义在skin文件中而不是定义在页面本身,就可以完全通过切换当前主题来改变网站的外观(这就是设计主题的目的所在)。否则,使用硬编码样式,是不可能完全实现的。
在本章"解决方案"部分将使用主题为模板页面创建一些不同的外观。