asp.net2.0控制UI显示:master_page和theme二维控制。

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名字。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值