母版页的使用
一、母版页简介
Asp.net2.0改进了以往版本对网页设计方面支持上的不足，新增了母版页，或者将它称为页面模版较容易让人理解他的作用。母版页能够为asp.net应用程序创建统一的用户界面和样式，这是母版页的核心功能。采用母版页制作的网站都含有两种文件：一种是母版页，一种是内容页。母版页的后缀为.master，里面封装页面的公共元素；内容页的后缀为.aspx，就是普通的aspx页面，里面包含了除母版页外的其他公共内容。在运行时，asp.net2.0引擎会将两种页面合并再发个客户的浏览器。
二、母版页的结构
常见的母版页代码结构如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title></title>
<link href="/oblog312/css/myfreetemplates.css" rel="stylesheet" type="text/css" />
</head>
<body background="/oblog312/images/pixi_lime.gif" leftmargin="0" topmargin="0">
<form id="form1" runat="server">
<div align="center">
<table width="763" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="763" height="86" align="right" valign="top">
<img src="/oblog312/images/topic.gif"></td>
</tr>
<tr>
<td width="763" height="53" align="right" valign="bottom" background="/oblog312/images/nav_bg.gif">
</td>
</tr>
<tr>
<td width="763" height="22" align="right" valign="top">
<img src="/oblog312/images/toppic2.gif" width="763" height="22"></td>
</tr>
<tr>
<td width="763" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="244" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
<td valign="top" align="left">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="763" height="1" background="/oblog312/images/pixi_lime.gif">
<img src="/oblog312/images/pixi_lime.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="763" height="35" align="center" class="baseline">
©Copyright Study.Com 2006</td>
</tr>
</table>
</div>
</form>
</body>
</html>
从上面这段代码我们可以看出，母版页除了头部声明与普通的aspx页面不同外，代码结构上与普通的aspx页面并没有什么差别。
三、占位控件
当你在读这段代码是会发现母版页上有个新用了两次——ContentPlaceHolder控件，这是在母版页上使用的占位控件。如构想母版页的某一区域拖拽这个控件，就表示这个区域在内容页里是可编辑的区域。以下是与上面的母版页相对应的内容页代码
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Index.aspx.cs" Inherits="Index" Title="示例5-1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<img src="/oblog312/images/pagepic.gif" width="244" height="223" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
<p>
</p>
<p>
</p>
<h1>
网站介绍</h1>
<p>
本页面采用来自ASP.NET 2.0技术的母版页新特性进行开发。 主要包括两个页面：母版页和内容页。 母版页后缀名是.master，其封装网站中的共用元素。 内容页实际是普通的.aspx文件，它包含除母版页的其他内容。
在运行时，ASP.NET引擎将两种页面内容合并执行，最后将结果发给客户端浏览器。
<p>
<br>
</p>
</asp:Content>
母版页中的ContentPlaceHolder控件的ID属性必须与内容页中Content控件的ContentPlaceHolderID属性邦定。
例如创建如下图结构的页面：
<!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 id="Head1" runat="server">
<title></title>
<link href="/oblog312/css/myfreetemplates.css" rel="stylesheet" type="text/css" />
</head>
<body background="/oblog312/images/pixi_lime.gif" leftmargin="0" topmargin="0">
<form id="form1" runat="server">
<div align="center">
<table width="763" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="763" height="86" align="right" valign="top">
<img src="/oblog312/images/topic.gif"></td>
</tr>
<tr>
<td width="763" height="53" align="right" valign="bottom" background="/oblog312/images/nav_bg.gif">
</td>
</tr>
<tr>
<td width="763" height="22" align="right" valign="top">
<img src="/oblog312/images/toppic2.gif" width="763" height="22"></td>
</tr>
<tr>
<td width="763" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="244" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
<td valign="top" align="left">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="763" height="1" background="/oblog312/images/pixi_lime.gif">
<img src="/oblog312/images/pixi_lime.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="763" height="35" align="center" class="baseline">
©Copyright Study.Com 2006</td>
</tr>
</table>
</div>
</form>
</body>
</html>
