asp.net2.0里面多出的一些功能中,有两项可以帮助开发者控制UI的显示。
一个是master page ,一个是theme。
这两个功能一起使用的话,就可以在二维上控制UI的显示效果,并且程序员和美工之间的分工也比较明确,更容易协作。
先介绍master page
master_page可以翻译为“主控页面”。可以用于控制整个网站的显示布局。他控制的是各个页面、对象之间的位置、大小,页面的背景等。
一个master_page文件,看上去和aspx等文件类似,只是标志不太一样而已:<%@ Master Language="C#" %>
编辑masterpage就像编辑aspx差不多。可以放入很多控件,可以写代码处理。重要的控件是:ContentPlaceHolder 。这是一个可以被aspx业所引用的标示。
比如这样一个masterpage。
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body bgcolor="#9999cc">
<form id="form1" runat="server">
<table>
<tr> <td bgcolor="#cc9933">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
this is holder2</asp:ContentPlaceHolder>
</td>
<td bgcolor="#66cc66">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
this is holder3</asp:ContentPlaceHolder>
</td>
</tr>
<tr> <td bgcolor="#33cccc">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
this is holder1<br />
</asp:contentplaceholder> </td> <td bgcolor="#ff99ff"> </td>
</tr>
</table>
</form>
</body>
</html>
再看一个aspx的使用这个masterpage的例子
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<asp:Button ID="Button1" runat="server" Text="default test 2" />
look, maybe the empty message is replaced by me</asp:Content>
注意
1:MasterPageFile="~/MasterPage.master" 表示引用MasterPage 。也就是使用这个框架显示。
2:<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">。。。。</asp:Content > 这个就是引用MasterPage的地方。这里表示使用ContentPlaceHolder2这个显示区域来显示page中的一些控件。
再说一下几个特点
1:如果mater page中的部分地方不是ContentPlaceHolder,则在aspx中无法修改这些设置。
2:如果aspx中没有引用ContentPlaceHolder,则没有引用的地方不能编辑。
3:如果master page中的ContentPlaceHolder也就设置了一些控件,但是aspx中也在该区域中设置了控件,则原来的master page中的设置被覆盖。
4:master page还可以是另一个master page 的引用。
5:一个aspx页面可以在使用中切换master page
这是在aspx中的代码。注意只能在OnPreInit里面才可以更改master page
protected override void OnPreInit(EventArgs e)
{
string masterPageFile = "~/MasterPage.master";
if (Session["MasterPageFile"] != null)
masterPageFile = Session["MasterPageFile"].ToString();
this.MasterPageFile = masterPageFile;
}
6:在aspx页里可以获取master page的各种属性,也可以修改这些属性。
Control content=Master.FindControl("ContentPlaceHolder3");
Label myc = new Label();
myc.Text = "<br>i am added automatic, and added by the page it self";
content.Controls.Add(myc);
下边再看theme
theme可以翻译为“主题”。它包括css和skin等格式的文件。
他控制的是页面的各种对象的显示属性。比如字体大小,颜色等。
新建一个theme,系统就会在App_Themes文件夹下建立一个子目录。然后这个目录下的文件,比如xx.css,xxx.skin就组合在一起成为一个主题。
css就不用说了,看一下skin文件
<asp:DropDownList runat="server" BackColor="hotpink" ForeColor="white" />
<asp:DataGrid runat="server" BackColor="#CCCCCC" BorderWidth="2pt"
BorderStyle="Solid" BorderColor="#CCCCCC" GridLines="Vertical"
HorizontalAlign="Left"
>
<HeaderStyle ForeColor="white" BackColor="hotpink" />
<ItemStyle ForeColor="black" BackColor="white" />
<AlternatingItemStyle BackColor="pink" ForeColor="black" />
</asp:DataGrid>
其实他的作用和css差不多,只是这里可以直接定义aspx中的对象。
在aspx中的应用:
<%@ Page Language="C#" Title="Untitled Page" Theme="Theme1" %>
和master page差不多,一个aspx页面可以切换几个theme文件。
this.Theme="Theme2";
现在看看,一个aspx可以使用几个master_page来控制对象的位置大小等表现,一个aspx同时还可以使用几个theme来控制每个对象的字体大小,颜色等外观信息。综合起来,就使用一个二维的控制UI的方案。
这样,同一个布局,可以有不同的主题;不同的网站布局可以使用相同的主题。
程序员关注与逻辑,美工只需要设计master page和theme就可以了。唯一的接口就是master page 中的ContentPlaceHolder的ID名字。