北大青鸟APTECH 北大青鸟广州天河培训中心
所在位置:北大青鸟,漫谈软件技术流 >>用ASP.NET 2.0的母版页集中网站设计
收藏本站
推荐给好友
北大最新招生信息
用ASP.NET 2.0的母版页集中网站设计  
发布者:[本站编辑] 来源:[广州北大青鸟]  
      当一个客户准备使用ASP.NET 2.0重新设计原有ASP网站时,我终于有机会使用.NET框架2.0了。它的很多新特性有助于简化开发;我最喜欢的一个特性是母版页(master page)。我将在本文里介绍如何用母版页设计元素,以及你可以如何在项目中使用它。

集中化的设计

分离设计元素以简化网站设计的方式有很多种。下面列出了其中的三种:

    * CSS:层叠样式表(Cascading Style Sheets)让你能够分离内容和显示,这样你可以在一个中心位置来维护网站的外观。
    * 控件:ASP.NET的Web控件让你能够开发网站的片段,这样你可以在一个或者多个Web窗体里重新使用它们。将代码集中还有另外一种方式。
    * SSI:服务器端(Server-Side)Include指令提供了另外一种方式将Web网站的内容组件化。你可以将网站的片段放在一个以上的文件里,并集中管理它们。

想要轻松维护Web网站的整体设计总是十分困难的。很多开发人员会为他们的ASP.NET 1.1网站使用模板系统,但是这些都是他们自己开发或者通过第三方软件来实现的。ASP.NET 2.0的母版页提供所需要的功能,而无需额外的工作。

母版页

ASP.NET 的母版页让你能够轻松地创建和维护Web网站上一致的外观。你可以用母版页来定义整个网站的显示,或者网站的一组子页面。如果你在使用Visual Studio 2005,那么通过选择“添加项(Add Item)”可以很容易往项目里添加一个母版页。母版页(使用.master文件扩展名)有一个不同的页面指令,而不是普通的Web窗体,你可以在下面看到:

<%@ Master Language="C#" %>

语言属性根据你选用的语言(用于VB.NET的VB)而有所不同。你可以选择使用代码隐藏结构或者直接把代码放到页面里。如果使用代码隐藏结构,Visual Studio会有一个复选框(把代码放在单独的文件里,Place Code In Separate File)提示你。页面指令的CodeFile属性可以被用来指定代码隐藏文件,而Inherits属性用来指向类名。下面一行代码显示了它的句法:

<%@ Master Language="C#"?CodeFile="mp.master.cs" Inherits="mp" %>

使用母版页的页面叫做内容页面(content page),后者不是专门的设计元素——它们只是普通的ASP.NET Web窗体。唯一的不同点是页面指令带有一个指向所需母版页的MasterPageFile属性。如果你在使用Visual Studio,那么会有一个复选框(选择母版页,Select Master Page)让你为一个Web窗体选择母版页(如果用到了的话);它还允许你选择项目里定义了的母版页。你可以在应用层(带有web.config的页面元素)指定母版页,以及文件夹层(特定文件夹里的web.config)。

母版页含有所有的顶级HTML元素。这包括html、页头、正文和HTML窗体元素,因此内容页面不应该含有这些元素。头元素必须带有runat=server属性,而且在运行期间其头文本要用内容页面的标题文本来替换。

内容替换

母版页包括内容占位符控件,以接纳来自内容页面的输出。这些控件的句法如下:

<asp:contentplaceholder id="Main" runat="server" />

此外,内容页面使用内容控件来指定要被插入母版页的内容区域。内容控件的句法如下:

<asp:Content ID="ContentID" ContentPlaceHolderID="Main" Runat="Server">
Your content goes here.
</asp:Content>

母版页的占位符元素的id属性与页面内容元素的ContentPlaceHolderID属性相对应。打开和关闭asp:Content标记之间的数据或者内容被插入到母版页的正确位置。

ASP.NET按照下面的运行顺序来处理母版页:

    * 通过URL来加载内容页面。
    * 页面指令被处理。如果指令需要参考一个母版页,母版页就被读取。这两个页面都在第一次被读取/请求的时候被编译。
    * 已经更新过内容的母版页被合并到内容页面的控件树里。
    * 单独的Content控件的内容被合并到相对应的母版页的ContentPlaceHolder控件里。
    * 合并的页面被加载和显示出来。

列表A里有一个示例。下面是关于母版页的一些说明:

<%@ Master Language="C#" %>
<!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>Untitled Page</title>
</head><body>
<div id="header">
Header text
</div>


<form id="frmExample" runat="server">
<div><asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
<hr>
<asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
</asp:contentplaceholder>
</div></form>
<div id="footer">
Footer text
</div></body></html>


    * 标题文本不应该被更改。但是它会被内容页面的标题文本自动替换。
    * 页面内容含有两个div元素,用来定义页面的标题和页脚区域。内容占位符在页面的中间,位于标题和页脚元素之间。
    * 页面带有两个内容占位符元素。来自内容的文本可以直接放在页面的这些区域里。

现在内容页面可以使用母版页结构。列表B里的Web表单用来指定内容页面使用我们的示例母版页:

<%@ Page Language="C#" MasterPageFile="~/TechRepublic.master" Title="ContentOne" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Content for the first placeholder.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
Content for the second placeholder.
</asp:Content>

要注意的是,内容不含有顶级HTML实体,比如html、页头、正文或者窗体——这些都由母版页来控制。asp:Content元素的ContentPlaceHolderID属性与母版页上的asp:contentplaceholder元素的id属性相对应。

编码

在编码进行过程中,内容页面的行为像母版页的容器程序。一个简单的方式是母版页的行为模式与页面上的用户控件类似。但是,你可以参考内容页面代码里的公共母版页成员。

掌控网站的设计

ASP.NET 2.0的母版页让你能够轻松地把网站的设计分割为全局和具体页面特性。全局元素可以在母版页里轻松设置,并指定给单独的页面。这就让你能够在整个网站上或者一组页面上重新使用你的设计,同时用一个集中的设计元素来轻松编辑设计。
用邮箱推荐给好友】- 北大青鸟
 普通文章 Javascript中最常用的55个技巧(二)
 普通文章 Javascript中最常用的55个技巧(一)
 普通文章 在分层架构下寻找java web漏洞
 普通文章 spring简介(二)
 普通文章 spring简介(一)
学期
班别
日期
S1

脱产预科

5月8日

S1

业余预科

5月18日

S1

脱产

5月20日

S1

脱产预科

5月28日

S1

脱产

6月12日

S1
业余
6月8日
S2
脱产班
7月15日
Y2
脱产班
7月21日
我要在线报名

主题:职业规划(目标管理)
与软件发展

时间:周六、日 14:00
内容:
1.如何设计职业生涯规划
2.如何发现职业兴趣点?
3.如何成功实践职业规划?
4.IT与软件离我们有多远?
5.软件行业潜力和前景在哪里?
6.如何成为软件英才
7.accp课程免费体验

 让总部职业规划师为你
一一打开问号!!!

订座热线:020-85566216
  ©版权所有2005 北大 青鸟APTECH(广州天河)授权培训中心 粤ICP备05043791号
地址:广州市中山大道91号B座8楼(华景软件园后) 510630
电话:020-85566215 85566216 85563631 85567987
传真:020-85567986-224
网址:http://www.accp-teem.com.cn