In this example we will create a Master Page that will define a rather simple template layout for an example site. We'll include a logo, a simple navigation menu with 2 hyperlinks on the left hand side and use a HTML table to control the layout of our Master Page.
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="images/codefixerlogo.gif" width="290" height="60" alt="Codefixer Logo" /></td>
</tr>
<tr>
<td width="15%" valign="top">
<a href="page1.aspx">Page 1</a><br />
<a href="page2.aspx">Page 2 </a><br />
</td>
<td width="85%" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</form>
</body>
</html>
The code above creates a Master Page template 'MasterPage.master' that will look like Figure 2 in your browser. Although the HTML table has no visible border be aware that the logo image occupies the top cell in the top row, and the 2 navigation links are placed in the first cell of the second row. The Master Page code also creates a contentplaceholder in the 2nd cell in the second row.
The contentplaceholder is the area where the unique content for each Content Page will be inserted and be surrounded by the frame that the Master Page code provides.
With our Master Page in place we need to create two pages 'Page1.aspx' and 'Page2.aspx' that make up our example site.
The code below is the markup for 'Page1.aspx'.
The top line incorporates the Master Page to be inherited through a page directive.
The second line is the <asp:Content> control. The ID of the <asp:contentplaceholder> from the Master Page which is 'ContentPlaceHolder1' must match the ContentPlaceHolderID in the content page, which in this case it does. The red text highlights where the content for the page goes.
Figure 2 shows how our page 'page1.aspx' will display in your browser.
Below is the code for our second page 'Page2.aspx'. As you can see it's very similar to the code in 'Page1.aspx' making use of the Master Page. Both 'Page1.aspx' and 'Page2.aspx' will incorporate the table layout with the unique content of each page being inserted into the HTML table layout defined (specifically the 2nd cell in the 2nd row) in the Master Page. The logo that makes up the Master Page is also displayed in both pages as well as the navigation links. 'Page2.aspx' has its own unique content including a product shot box image.
Figure 3 shows how our page 'page2.aspx' will display in your browser.
Any changes made to the Master Page are reflected in the Content Pages, so it's easy to make site-wide changes from just one file i.e. the Master Page.
Learn how to use Master Pages with a CSS layout
Get the best asp web hosting provider now and save 30%
Plug and play ASP membership script that integrates with PayPal to let you charge recurring membership fees.
