首页 > 编程 > .NET > 正文

ASP.NET 2.0 中的 Theme 功能

2024-07-10 13:09:35
字体:
来源:转载
供稿:网友

asp.net 2.0 中新增加了 theme 的功能,它的出现能让网站实现换肤更加容易。

theme 的实现包括:css、skin、masterpage。

css 是用于控制所有 html 标记的外观。

skin 是用于控制所有 asp.net 服务器调整的外观,并且可以通过属性 cssclass 定义它的 css 样式。

masterpage 是 *.aspx 页面模版,不过它没有被定义到 theme 中。

------------------------------------------------

·创建 theme 的例子:

1、在 web 项目中创建 app_themes 目录。它是预定义的目录,asp.net 2.0 会自动识别其目录下的 theme 。

2、在 app_themes 目录创建 orangetheme、bluetheme 两个子目录。

3、为 app_themes 下的每个子目录添加 skin 文件,如 control.skin 。asp.net 2.0 会自动分析每一个 skin 文件,在这里的命名只需要为了开发时方便分类。

4、也可以为  app_themes 下的每个子目录添加 css 文件。asp.net 2.0 也会自动将每一个 css 文件添加到每一个使用此样式的页面中去。

·定义页面内容与 theme 样式

1、default.aspx 页面定义如下:

<%@ page theme="orangetheme" %>
<html>
<head runat="server">
<title>orange page</title>
</head>
<body>
<form id="form1" runat="server">
enter your name:<br />
<asp:textbox id="txtname" runat="server" />
<br /><br />
<asp:button id="btnsubmit" text="submit name" runat="server"/>
</form>
</body>
</html>

2、在  orangetheme 主页的 control.skin 文件中定义如下:

注意:只能指定外观属性,不能指定如 autopastback 等属性。

默认未命名的 skin 将会为所有 textbox 类型定义外观。

<asp:textbox backcolor="orange" forecolor="darkgreen" runat="server" />
<asp:button backcolor="orange" forecolor="darkgreen" font-bold="true" runat="server" />

已经命名 skinid 的将可以为指定 textbox 类型定义外观。

<asp:textbox skinid="title" backcolor="orange" forecolor="darkgreen" runat="server" />

·在页面中使用 theme

1、在 aspx 文件顶部 <%@ page %> 中添加 theme="default" 属性。这样它就可以使用 default 主题了。

2、如果想到在整个网站应用某个 theme 就需要在 web.config 定义。

<configuration>
  <system.web>
    <pages theme="orangetheme" />
  </system.web>
</configuration>

这样的定义相当于默认一个 theme 在所有网站文件中,使用时仍可以为每个页面定义 theme 。
skin 部分会使用 page 面中定义的 theme ,而 css 会重载默认主页中的 css 样式表。

3、指定好 theme 之后所有的外观都会使用 skin 中定义的。你也可以指定控件的 skinid 来定义单独外观。

4、如果想用编程方式定义 theme 必需在 page_preinit事件中处理,如下:

void page_preinit(object sender, eventargs e)
{
    page.theme = request["themename"];
    如果需要以编程的方式为 page 载入 masterpage 文件,也需要在此定义。
    this.masterpagefile = request["masterpagefile"];
}

了解了这些技术,将会让网站更加多变。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表