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

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

2014-04-26 10:29 435 查看
　　自。NET Framework出现以来，对网站外观进行控制一直是ASP.NET开发者的期待。ASP.NET 2.0使之成为现实，应用它的主题与皮肤，我们可以对外观进行控制。ftubd.com

　　上周我们讨论了ASP.NET 2.0母版页面(Master Pages)，以及如何应用它们对网站布局进行集中控制。开发者经常将主题与母版页面弄混，但这两个元素存在很大的不同。母版页面允许你控制一个网站的总体布局，或网站内的一组页面，但主题主要关注网站的外观与感觉。

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

　　了解皮肤文件

　　尽管在主题中不必应用皮肤，但我还是想首先介绍一下皮肤的概念，因为它是主题中的标准设计元素。皮肤提供了一种管理网络控件外观的方法。你也可以用它来批量设置一个控件的某些特性。

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

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

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

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

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

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

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

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

　　通过主题应用皮肤文件

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

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

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

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

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

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

　　不要混淆主题与CSS

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

　　单一化与个别化

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

　　Tony Patton拥有丰富的、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="" 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> 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航