第9章使用母版页(MasterPage)750091.ppt

第9章 使用母版页（Master Page） 母版页是一个网站统一界面的基础，我们在浏览页面的时候经常看到，有些网站的所有顶端和底端内容都是相同的。实现这种相同有很多种方法，最笨的一种方法是每个网页都进行同样的设计，最简单的方法就是使用母版页。本章就介绍如何在ASP.NET程序中应用母版页。 【本章示例参考：\源代码\C09】 9.1 母版页基础 在使用ASP的时候，要想让整个网站页眉页脚等格式统一，一般使用frameset来解决。它可以将页面分成3个框架，最上面和最下面的框架保持不变，只允许更改中间的内容框架。那时框架的内容以及部署都需要手工完成。而在ASP.NET中新添加了Master Page页面，专门用于统一界面框架。本节介绍Master Page的使用。 9.1.1 建立一个母版页 本节首先学习创建一个母版页，然后再了解母版页的组成。创建母版页的步骤如下。 （1）右击当前项目名称，单击“添加新项”菜单命令，打开“添加新项”对话框。 （2）选择“母版页”模板，系统将自动命名为“MasterPage.master”，这里不需要修改名字。 注意：母版页文件的扩展名为“.master”。 （3）单击“添加”按钮，在解决方案资源管理器中生成了一个母版页文件。 （4）双击“MasterPage.master”文件，在页面的“设计”视图的整个文件中，只有两个ContentPlaceHolder服务器控件，这是允许改变的内容部分，一个在页面的head中，一个在页面的body中。而其他固定部分，在此控件以外的地方添加。 （5）在此文件中加个HTML表格，设置为3行2列。 （6）将“ContentPlaceHolder1”控件拖到第2行第2列中。 （7）在第1行中显示欢迎信息，主要是为了在母版页中显示固定的内容。最终页面的设计都是一些隐藏的网格线，并没有非常特殊的设计，如图9.1所示。下面给出母版页的源代码。 9.1.2 建立一个内容页（Content Page） 上一节创建好了母版页，本节将在一个内容页中，应用这个母版，让读者看看ASP.NET程序下的母版页是什么样子。 （1）右击当前项目名称，单击“添加新项”菜单命令，打开“添加新项”对话框。 （2）此时，选中对话框右下角的“选择母版页”复选框。然后选择“Web窗体”项，将这个窗体命名为ContentP.aspx，单击“添加”按钮，此时打开一个对话框，让用户选择要应用哪个母版页。 （3）因为本例只创建了一个MasterPage.master母版，所以选择这个文件，然后单击“确定”按钮，此时生成的页面源代码如下所示。 %@ Page Language=C# MasterPageFile=~/MasterPage.master AutoEventWireup=true CodeFile=ContentP.aspx.cs Inherits=ContentP Title=Untitled Page % asp:Content ID=Content1 ContentPlaceHolderID=head Runat=Server /asp:Content asp:Content ID=Content2 ContentPlaceHolderID=ContentPlaceHolder1 Runat=Server /asp:Content 9.1.3 在母版页使用相对路径应注意的问题 在母版页中使用图像文件时，内容页是否可以正常显示这个图像。下面通过试验来测试这个路径问题。 （1）在网站下添加一个LOGO，本例使用了Google的LOGO。 （2）在母版页文件MasterPage.master中添加一个img控件，然后设置其图像文件属性如下所示。 img src=logo_cn.gif style=height: 39px / （3）在网站根目录下添加一个新文件夹“Content”，将上节的ContentP.aspx页面拖到这个文件夹内。主要目的是让母版页和内容页不在同个目录下。因为实际项目都很大，不同的内容都会分类在不同的目录下。 （4）此时设置ContentP.aspx为起始页，运行后发现图像根本没有显示。这就是经常遇到的母版页路径问题。 凡是在母版页遇到文件路径时，如图像的文件来源、链接的文件去向等，都需要使用绝对路径，或者使用ResolveUrl方法实现相对路径。本例将img的属性修改为如下所示。 img src= %=ResolveUrl(logo_cn.gif)% style=height: 39px 此时再运行程序，图像就可以正常显示了，如图9.3所示。 9.1.4 在配置文件中设定母版页 如果要修改现在的网站，让每个网页都能应用母版页，那么不需要修改每个网页的属性，只需