下载掌阅APP，畅读海量书库
立即打开
3-2 母版页和内容页
在设计具有众多页面组成的网站时，通常需要使这些页面的某些部分（如标题栏、页脚栏和导航栏等）具有相同的设计效果，此时就需要通过设计母版页来实现。
母版页是指其他网页可以作为模板来引用的特殊网页，其文件扩展名为master。 在母版页中，界面被分为公用区和可编辑区。公用区的设计方法和普通网页的设计方法相同，可编辑区需要使用ContentPlaceHolder控件预留出来。一个母版页中可以有一个或多个可编辑区。
所谓内容页，是指引用了母版页的.aspx页面。 在内容页中母版页的ContentPlaceHolder控件预留可编辑区域会自动替换为Content控件，设计人员只要在其中填充需要显示的内容即可，在母版页中定义的公共区域元素将自动显示在内容页中。
当用户通过浏览器请求一个内容页时，服务器按照以下步骤将页面发送给用户。
1）服务器读取页面中的@Page指令，判断页面是否引用了某个母版页。如果是，则读取该母版页。
2）服务器将内容页中Content控件的内容合并到母版页的ContentPlaceHolder控件中，形成完整的页面效果发送给客户端。
需要说明的是，在母版页中使用图片或超链接时应尽量使用ASP.NET服务器端控件Image和HyperLink，而不要使用客户端的HTML元素<img>和<a>。这是因为将设计好的母版页或内容页移动到另一个文件夹导致其URL变化时，如果使用服务器端控件，ASP.NET就能自动修正其URL。但如果使用客户端HTML元素，ASP.NET可能无法正确解析其URL，从而导致图片不能显示或链接丢失的情况，给维护带来很大的麻烦。
母版页的设计方法与普通网页设计方法完全相同，唯一不同的是不能单独在浏览器中预览母版页的显示效果，而必须通过引用了该母版页的内容页进行查看。
内容页所有的内容必须包含在Content控件内，可以认为内容页实际上是母版页中可编辑区的填充内容。
1.创建母版页
新建一个ASP.NET空网站，在解决方案资源管理器中右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令，在弹出的如图3-11所示的对话框中选择“母版页”模板，并为母版页文件命名后单击“添加”按钮（默认名称为MasterPage.master），即可在网站中创建一个新的空白母版页。
图3-11 添加母版页
添加完毕后，系统将自动切换到母版页的源视图，从中可以看到由系统创建的、分别命名为head和ContentPlaceHolder1的两个ContentPlaceHolder控件。设计人员可以在源视图中添加母版页的内容，也可以切换到设计视图使用可视化方法设计母版页内容。需要注意的是，母版页的内容不能出现在ContentPlaceHolder控件中，即母版页内容不能出现在<asp:asp:ContentPlaceHolder…>和</asp:ContentPlaceHolder>标记之间，该区域是为内容页预留的显示位置，书写在其中的任何代码在内容页加载时都将被覆盖。
2.创建内容页
母版页添加完毕后，可再次在快捷菜单中选择“添加”→“添加新项”命令，在弹出的对话框中选择“Web窗体”模板，向网站中添加一个Web窗体页面。
需要注意的是，在指定了文件的名称后，应选择对话框右下方的“选择母版页”复选框。单击“添加”按钮，弹出如图3-12所示的“选择母版页”对话框。从列表框中选择想要的母版页后单击“确定”按钮，即可向网站中添加一个引用了指定母版页的空白内容页。
在内容页的源视图中可以看到，系统为内容页创建了与母版页对应的两个Content控件，并将其ContentPlaceHolderID属性设置为与母版页中ContentPlaceHolder控件对应的head和ContentPlaceHolder1。
图3-12 “选择母版页”对话框
需要注意的是，与设计母版页时正好相反，在设计内容页时所有内容必须包含在Content控件中，即内容页的内容必须书写在<asp:Content…>和</asp:Content>标记之间，否则运行时将出现错误。
此外，如果希望将现有的.aspx页面修改成引用某母版页的内容页，除了需要在@Page指令中添加<% @Page…MasterPageFile="母版页名称"…%>外，还需要删除页面中已包含在母版页中的<html>、<head>、<title>、<body>和<form>等标记，并添加<asp: Content…>标记和</asp:Content>标记，将内容页的所有元素包含在Content控件中。
【 演练3-3 】母版页和内容页使用示例。要求使用母版页技术控制站内其他网页的外观风格。网站由首页（Default.aspx）、产品展示（Product.aspx）、客户服务（Service.aspx）、技术支持（Support.aspx）和联系我们（Contact.aspx）5个Web窗体页面组成，通过导航栏的超链接关联。其中，引用了母版页的Default.aspx内容页在浏览器中呈现的效果如图3-13所示。单击导航栏中某板块名称时在客户浏览器中实现跳转，此时母版页区域内容不变，变化的只是内容页区域的信息。图3-14所示为单击“产品展示”后显示的页面。
图3-13 显示首页内容
图3-14 显示“产品展示”页
（1）设计母版页
新建一个ASP.NET空网站，右击网站名称，在弹出的快捷菜单中选择“添加”→“添加新项”命令，在弹出的对话框中选择“母版页”模板后单击“添加”按钮，系统将在网站中添加一个名为MasterPage.master的母版文件。
按照设计要求，母版页中应包括用于显示网站标题的logo层、用于显示导航栏的nav层、用于显示左侧导航栏的left层、用于显示左侧导航栏中具体导航信息的div层（该层包含在left层内），以及用于显示版权信息的bottom层。
按照下列代码所示修改系统自动创建的MasterPage.master的HTML代码。
（2）设计CSS样式表
向网站中添加一个CSS样式表文件StyleSheet.css，并将文件从解决方案资源管理器中拖动到MasterPage.mater的<head>标记和</head>标记之间，完成页面对CSS样式表的引用。
编写以下所示的StyleSheet.css文件代码。
（3）设计内容页
向网站中添加一个新Web窗体，注意在“添加新项”对话框中选中“选择母版页”复选框，将文件命名为Default.aspx后单击“添加”按钮。
切换到Default.aspx页面的设计视图，向Content2控件（对应母版页ContentPlaceHolder1控件）中添加一个用于内容布局的、2行1列的表格，适当调整各行的高度，并按需要向表格中添加文字、图片等信息后即可完成内容页的设计。按〈F5〉键在浏览器中打开页面，将能看到预期的设计效果。
其他4个页面可以通过在解决方案资源管理器中按住〈Ctrl〉键拖动Default.aspx的方法进行复制，而后再重命名并修改。
Default.aspx的HTML代码如下。
需要注意以下两点。
1）本例是一种常用的网站布局设计，在实际应用中通常需要将logo、nav和bottom这3个层的宽度设置为100%，以自动匹配屏幕的宽度；不设置left层的高度，使之能自动匹配内容页的高度。
2）在实际应用中，为了使bottom层无论是否出现纵向滚动条都自动出现在屏幕的最下方，需要在StyleSheet.css的#bottom{}中添加以下代码。
