标准化网站布局

       标准化网站布局的格式只是整个过程的一部分,你还需要保证通用的元素,如网站的标题、网站的导航控件等在每个页面里都出现在相同的位置。解决这一问题的关键在于创建一个可以重复应用到整个网站的简单而灵活的布局。有 3 个基本办法可以选择:

  • 用户控件。用户控件时标准化通用页面元素的优秀方式,但是,它们自身并不能解决页面布局的问题,因为没有办法保证用户控件在所有页面中都被放到同样的位置。
  • HTML 框架。框架是在一个浏览器窗口中同时显示多个页面的 HTML 基本工具。它的主要缺点是它里面的每个页面必须通过单独请求服务器进行检索,这些页面的代码不得不完全独立。这同时意味着一个框架里的页面不能和其他框架中的页面交互,也不能影响其他框架中的页面。(至少不能通过服务器端代码)
  • 母版页母版页是 ASP.NET 的一个特性,它专门设计用于标准化 Web 页面布局。它可定义固定的内容并声明 Web 页面里可插入自定义内容的部分。如果在整个网站中使用同一个母版页,就可以确保获得同样的布局。最妙的是,如果修改了母版页的定义,应用它的所有页面都会自动变化。

 

 

母版页基础

       要为页面模版提供一个可操作且灵活的解决方案,必须满足以下几个条件。

  • 要能够单独定义页面的某个部分并在多个页面里重用它。
  • 要能够创建一个定义了可编辑区域的封闭布局。重用这个模版的页面只能够在许可的区域内添加或修改内容。
  • 页面能够对重用的元素做一些自定义。
  • 可以声明性的绑定页面倒页面模版(不使用代码)或者能够在运行时动态绑定到页面。
  • 可以用工具(如 VS)设计一个使用页面模版的页面。

       为了实现这一切,ASP.NET 定义了两种新的页面类型:母版页和内容页。

       母版页和普通的 Web 页面一样,它可以包含任何 HTML、Web 控件甚至代码的组合。母版页还可以包含内容占位符(定义的可修改区域)。

       内容页引用一个母版页并获得它的布局和内容。此外,内容页可以在任意的占位符里加入页面特定的内容。换句话说,内容页将母版页没有定义的缺失了的内容填入母版页。

 

 

简单的母版页

       母版页和一般Web窗体的区别是:

  • 母版页由 Master 指令开始,并提供和 Page 指令相同的信息。而所有 Web 窗体都由 Page 指令开始。
  • 只有母版页才可以使用 ContentPlaceHolder 控件,这个控件是内容页可以插入内容的部分。

       创建一个母版页后,会得到一个只包含 2 个 ContentPlaceHolder 控件的空白页。第一个是在 <head> 区域定义的,它让内容页面能够增加页面元数据,比如搜索关键字和样式表链接。第二个也是更重要的 ContentPlaceHolder 被定义在 <body> 区域,它代表页面显示的内容。

       另外,母版页不能被直接请求,要使用母版页,必须创建一个关联的内容页

 

       下面是个简单的母版页示例,它有一个静态的横幅,其后跟着一个 ContentPlaceHolder 控件,然后是一个页脚:

    Inherits="Chapter16_SiteTemplate" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="background: black; height: 87px; font-weight: bold; font-size: 20px;
            color: white; font-family: Verdana">
            <img align="left" src="headerleft.jpg" />
            <img align="right" src="headerright.jpg" />
            <br />
            <asp:ContentPlaceHolder ID="TitleContent" runat="server">
                My Site
            </asp:ContentPlaceHolder>
        </div>
        <br />
        <br />
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <br />
        <em>Copyright © 2008.</em>
    </div>
    </form>
</body>
</html>

相关文章: