http://xiaoruanjian.iteye.com/blog/881921
虽然母版页和内容页功能强大,但是其创建和应用过程并不复杂。本节和下一节将以创建如图1所示示例为例,向读者详细介绍,使用Visual Stuido 2005创建母版页和内容页的方法以及相关知识。本节的重点是创建母版页的方法。
母版页中包含的是页面公共部分,即网页模板。因此,在创建示例之前,必须判断哪些内容是页面公共部分,这就需要从分析页面结构开始。图1所示显示的是一个页面截图。在下文中,暂称该页面名为Index.aspx,并且假设其为某网站中的一页。通过分析可知,该页面的结构如图5所示。
图5 页面结构图
页面Index.aspx由4个部分组成:页头、页尾、内容1和内容2。其中页头和页尾是Index.aspx所在网站中页面的公共部分,网站中许多页面都包含相同的页头和页尾。内容1和内容2是页面的非公共部分,是Index.aspx页面所独有的。结合母版页和内容页的有关知识可知,如果使用母版页和内容页来创建页面Index.aspx,那么必须创建一个母版页MasterPage.master和一个内容页Index.aspx。其中母版页包含页头和页尾等内容,内容页中则包含内容1和内容2。
这个专题中主要讲解的是MasterPage,给刚刚建立的工程添加一个MasterPage:
MasterPage以master为后缀名,我们刚刚建立了一个MasterPage.master文件,该文件有如下内容:
2
3
4
5 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <htmlxmlns="http://www.w3.org/1999/xhtml">
10
11 <headrunat="server">
12
13 <title>UntitledPage</title>
14
15 </head>
16
17 <body>
18
19 <formid="form1"runat="server">
20
21 <div>
22
23 <asp:contentplaceholderid="ContentPlaceHolder1"runat="server">
24
25 </asp:contentplaceholder>
26
27 </div>
28
29 </form>
30
31 </body>
32
33 </html>
34
这是一个很标准的网页页面布局,下一步就把 Contentplaceholder 放进去 “ 占地盘 ”“ :
放完后我们把各个部分的 ContentPlaceHolder 重新命名一次,更改后的代码如下:
2
3
4
5 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <htmlxmlns="http://www.w3.org/1999/xhtml">
10
11 <headrunat="server">
12
13 <title>UntitledPage</title>
14
15 </head>
16
17 <body>
18
19 <formid="form1"runat="server">
20
21 <tablewidth="60%">
22
23 <tr>
24
25 <tdcolspan="3"height="80">
26
27 <asp:ContentPlaceHolderID="TopContent"runat="server">
28
29 </asp:ContentPlaceHolder>
30
31 </td>
32
33 </tr>
34
35 <tr>
36
37 <tdheight="300"width="25%">
38
39 <asp:ContentPlaceHolderID="LeftContent"runat="server">
40
41 </asp:ContentPlaceHolder>
42
43 </td>
44
45 <td>
46
47 <asp:ContentPlaceHolderID="CenterContent"runat="server">
48
49 </asp:ContentPlaceHolder>
50
51 </td>
52
53 <tdwidth="25%">
54
55 <asp:ContentPlaceHolderID="RightContent"runat="server">
56
57 </asp:ContentPlaceHolder>
58
59 </td>
60
61 </tr>
62
63 <tr>
64
65 <tdcolspan="3"style="height:80px">
66
67 <asp:ContentPlaceHolderID="CopyrightContent"runat="server">
68
69 </asp:ContentPlaceHolder>
70
71 </td>
72
73 </tr>
74
75 </table>
76
77 </form>
78
79 </body>
80
81 </html>
82
在 Design 状态下我们可以看到如下效果:
此时点击 Add 后会谈出下面这个窗口:
2
3 <asp:ContentID="Content1"ContentPlaceHolderID="TopContent"Runat="Server">
4
5 </asp:Content>
6
7 <asp:ContentID="Content2"ContentPlaceHolderID="LeftContent"Runat="Server">
8
9 </asp:Content>
10
11 <asp:ContentID="Content3"ContentPlaceHolderID="CenterContent"Runat="Server">
12
13 </asp:Content>
14
15 <asp:ContentID="Content4"ContentPlaceHolderID="RightContent"Runat="Server">
16
17 </asp:Content>
18
19 <asp:ContentID="Content5"ContentPlaceHolderID="CopyrightContent"Runat="Server">
20
21 </asp:Content>
22
23
24
在 PS4.0 中的应用 .
如图所示 : 在在 PS4.0 中所使用的 MasterPage.master. 图中所显示的是 content 控件