asp.net| Creation Although master pages and content pages are powerful, their creation and application processes are not complex. This section and the next section will create an example of how to create a master page and content page by using Visual Stuido 2005, for example, as shown in Figure 1, and related knowledge. The focus of this section is how to create a master page.
The master page contains the public part of the page, which is the page template. Therefore, before you create the example, you must decide which content is the public part of the page, and this requires starting from the analysis page structure. A screenshot of the page is shown in Figure 1. In the following section, the page is called Index.aspx and is assumed to be a page in a Web site. The analysis shows that the structure of the page is shown in Figure 5.
Figure 5 Page Structure Chart
The page index.aspx consists of 4 parts: header, footer, content 1, and content 2. Where the header and footer are common parts of the page in the Index.aspx site, many of the pages in the site contain the same header and footer. Content 1 and 2 are non-public parts of the page and are unique to index.aspx pages. With the knowledge of master pages and content pages, if you use master pages and content pages to create page index.aspx, you must create a master page masterpage.master and a content page index.aspx. Where the master page contains the contents of the header and footer, the content page contains content 1 and content 2.
Create a normal Web site using Visual Studio 2005, and then create a master page named Masterpage.master under the root directory of your site. Because this is the process of adding a new file, click Add New item from the Web Site Command menu. option, you can open the window as shown in Figure 6.
Figure 6 Adding a master page
Because this example creates a master page, you need to select the master page icon and set the file name to Masterpage.master. Note that there is also a check box item in the window that "places the code in a separate file." By default, this check box is selected. Represents Visual Studio 2005 will apply the code-behind model for the Masterpage.master file, which is to automatically create a MasterPage.master.cs file associated with the file, based on the creation of the Masterpage.master file. If you do not select the item, only one Masterpage.master file is created. It is recommended that the reader select the item.
After you create the Masterpage.master file, you can then start editing the file. As explained earlier, the master page contains only the common parts of the page, so the Masterpage.master contains the page headers and footer code. The specific source code looks like this:
| Master Page masterpage.master File source code |
<%@ 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 ">
<title> </title>
<link href= "Css/myfreetemplates.css" rel= "stylesheet" type= "Text/css"/>
<body background= "http://www.webjx.com/htmldata/2006-06-16/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= "align=" "right" valign= "top"
</td>
</tr>
<tr>
<TD width= "763" height= "align=" "right" valign= "bottom" background= "images/nav_bg.gif" > </td>
</tr>
<tr>
<TD width= "763" height= "align=" right "valign=" the Top ">
</tr>
<tr>
<TD width= "763" valign= "top"
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0"
<tr>
<TD width= "244" valign= "Top"
</td>
<TD valign= "Top" align= "left"
</td>
</tr>
</table>
</td>
</tr>
<tr>
<TD width= "763" height= "1" background= "http://www.webjx.com/htmldata/2006-06-16/images/pixi_lime.gif" > </td>
</tr>
<tr>
<TD width= "763" height= "align=" "Center" class= "baseline" >©copyright </td> study.com 2006
</tr>
</table>
</div>
</form>
</body> |
This is the source code for the master page Masterpage.master, which is very similar to the normal. aspx source code, for example, including web elements such as
As shown in Figure 7, the design-time view of the Masterpage.master file is shown.
Figure 7 Master Page design-time view
You can use Visual Studio 2005 to edit a master page, and it fully supports the WYSIWYG feature. The method of editing a master page using Visual Studio 2005 is the same as editing a normal. aspx file, whether in code mode or in design mode. The two rectangular boxes in the diagram represent the ContentPlaceHolder control. Developers can add content directly to the rectangular box, and the code for the content is included in the ContentPlaceHolder control declaration code. It is to be noted that this method is not normative and therefore does not recommend the use of this practice.
