当前位置:甜馍馍地理信息网 >> 网站开发 >> .Net编程 >> 正文 >>  [阅读资讯:如何用ASP.NET 2.0主题控制网站外观]

如何用ASP.NET 2.0主题控制网站外观

[ 来源:互联网 | 时间:2007年09月13日 | 收藏本文 ] 【

尽管在主题中不必应用皮肤,但我还是想首先介绍一下皮肤的概念,因为它是主题中的标准设计元素。皮肤提供了一种管理网络控件外观的方法。你也可以用它来批量设置一个控件的某些特性。开发者经常将主题与母版页面弄混,但这两个元素存在很大的不同。母版页面允许你控制一个网站的总体布局,或网站内的一组页面,但主题主要关注网站的外观与感觉。

在你能够应用ASP.NET 2.0主题的所有优点之前,你有必要了解一些术语与过程。主题能够应用一个称之为皮肤或层叠样式表(CSS)的新设计元素。

了解皮肤文件

皮肤的定义包含在皮肤文件(以。skin为文件扩展名)中。在Visual Studio中,你可以选择增加项目>皮肤文件(Add New Item>Skin File)来方便地增加皮肤文件。它们是基本的文本文件,因此你还可以应用自己喜欢的文本编辑器。

皮肤文件中包含一些控件和它们所应用的属性。我读到的微软的所有文件都建议为每个控件类型建立单独的皮肤文件,但你也可以在一个单独的文件中包括数个控件定义,而不会引起问题。下面的代码是一个样本皮肤文件,它定义了标签与文本框控件的显示颜色。

<asp:Label runat="server" BackColor="Red" ForeColor="White" />

<asp:TextBox runat="server" BackColor="Black" ForeColor="Yellow" />

标签控件将以红色为背景,文本为白色;文件框控件以黑色为背景,文本为黄色。以下是定义皮肤文件控件的几点提示:

·每个被定义的控件都需要runat="server"属性。

·id属性没有包括在内。它是网络控件的一个独特属性,因此只有在网页的控件才被指定。

·皮肤文件中只能定义呈现(presentation)特性。

你可能想了解如何定义同一类型控件的多种格式。这就是skinid属性的作用所在。在皮肤文件中,你可以为一个控件指定一个skinid属性,以此来定义这个控件类型的多种呈现格式。列表A是一个皮肤文件,它定义了文本框与标签控件的两种格式。

你还可以应用样式(style)属性或外部样式表。列表B中的标签声明应用了样式属性。微软建议为不同的控件建立单独的皮肤文件。例如,你可能想定义一个称为label.skin的文件的标签控件和其它控件的外观。

通过主题应用皮肤文件

主题是一个或多个皮肤和/或CSS文件的组合,用来控制ASP.NET网站内控件的外观。组成主题的文件(皮肤与CSS)包含在一个主题文件夹中。

文件夹的名称定义主题的名称(如同页面声明、代码等一样),它是包含在网络应用软件内的特殊App_Themes文件夹的一个子文件夹。如果你应用Visual Studio,你就可以在解决方案上右击,并选择增加ASP.NET文件夹再选主题(Add ASP.NET Folder>Themes);这样就可自动地增加App_Themes文件夹。你还可以通过Windows Explorer或你喜欢的方法来建立App_Themes文件夹。

一个特殊主题文件夹中的皮肤和CSS文件包含那个主题中的所有元素。主题可以通过页面指示的pagetheme属性应用于网页中,就像是这样:

<%@ Page Language="C#" Theme="TechRepublicTest" %>

主题一旦指明后,皮肤与CSS文件就与那个页面相连。此时,你就可以为具有不止一个有效定义的控件指定一个skinid属性;如果没有必要,也可以将其忽略。列表C中的网页应用的是在样本皮肤文件中定义的控件。

在页面级别指定主题是件痛苦的事情,在有数百个页面时更是如此。你也可在应用软件的web.config文件中指定主题。页面元素(位于system.web元素中)包含一个主题属性,它为网站指定默认的主题。

<pages theme="TechRepublicTest" />

这样就不必设置页面级主题属性;但你仍可以用它来代替web.config文件中定义的默认主题。

不要混淆主题与CSS

尽管主题与皮肤在很多方面与CSS相似,它们并不一样。主题能够控制一个网络控件的视觉呈现,包括为DataGrid或TreeView控件中的图片指定模板布局。主题与CSS的另一主要不同之处在于:主题中没有层叠。但是,主题中可以包含样式表。而且,主题的特性值总是代替本地特性值。

单一化与个别化

长期以来,开发社区一直强烈要求公开由主题与皮肤提供的功能,感谢ASP.NET 2.0做到这一点。虽然CSS提供许多格式化的选项,主题则更进一步,其中可以应用CSS文件。下周我们将继续讨论主题与母版页面,说明如何用它们来控制网站。

Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识,是一个专业的应用程序开发人员。

列表A


 

<asp:Label runat="server" BackColor="Red" ForeColor="White" skinid="redlabel" />
<asp:Label runat="server" BackColor="Blue" ForeColor="White" skinid="bluelabel" />
<asp:TextBox runat="server" BackColor="Black" ForeColor="Yellow" skinid="blacktb" />
<asp:TextBox runat="server" BackColor="White" ForeColor="Black" skinid="whitetb" /> 

列表B

<asp:Label runat="server" style="color: yellow; background: black;" skinid="csslabel" /> 

列表C

<%@ Page Language="C#" Theme="TechRepublicTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TechRepublic.com sample</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label SkinID="redlabel" ID="lblTest" runat="server">Testing Red</asp:Label>
<asp:Label SkinID="bluelabel" ID="Label1" runat="server">Testing Blue</asp:Label>
<asp:TextBox SkinID="blacktb" ID="txtText" runat="server" Text="Type here" />
</form></body></html> 

 

【推荐本文】 【打印本页】 【返回顶部

>> 相关文章:

● 上一篇文章:教你如何利用ASP.net编写发送Email程序
● 下一篇文章:详细介绍Asp.net 5种页面转向方法
最新文章
推荐文章