ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

2.1. How do I do that?

To really understand how Master Pages work, you will build a web
application using Master Pages in the next couple of labs. In this
lab, you will create a Master page and populate it
with some controls.

In Visual Studio 2005, create a new ASP.NET 2.0 web application and
name it C:\ASPNET20\chap02-MasterPages.

Add a folder named Images to the project
(right-click the project name in Solution Explorer and select Add
Folder Regular Folder).
Copy the images shown in Figure 2-1 into the new
C:\ASPNET20\chap02-MasterPages\Images\ folder.
You'll use these images to build your Master page.

Tip: The images can be downloaded from this book's
support site: http://www.oreilly.com/catalog/aspnetadn/.

Figure 2-1. The images in the Images folder

Now you'll create the Master page. Right-click the
project name in Solution Explorer and then select Add New Item....

In the Add New Item dialog, select the Master Page template and use
the default name, MasterPage.master, as shown in
Figure 2-2. Click Add to create the page.

Figure 2-2. Adding a Master page to the project

In Solution Explorer, double-click
MasterPage.master and you will see an empty web
page that contains a single ContentPlaceHolder control.

Note: The ContentPlaceHolder control is a placeholder for Content
pages (pages that inherit from the Master page) to populate with
controls.

Populate the MasterPage.master page with
content, images, and links by dragging from the Toolbox and dropping
onto its surface two Image controls, one Panel control, and four
LinkButton controls, as shown in Figure 2-3. Set
the properties of each of the controls as follows:

Name the first Image control imgLogo and set its
ImageURL property to Images/oreilly_header.gif to
display the O'Reilly tarsier logo. Name the second
Image control imgTitle and set its ImageURL property to
Images/oranet_logo.jpg to display the
O'Reilly Network logo.

Use the mouse to stretch the Panel control across the page.
Set its Backcolor property to Maroon.

Drop four LinkButton controls onto the Panel control. Name
them as shown in Figure 2-3 (via their Text
properties). As you are going to click on only one of the links, name
the second LinkButton control lnkONDotnet. Set its PostbackUrl
property to ONDotnet.aspx.

Type in the footnote at the bottom of the screen, after the
ContentPlaceHolder control. To type the footnote, position your
cursor at the end of the ContentPlaceHolder control and press the
Enter key. You can then start typing the copyright notice as shown in
Figure 2-3.

Figure 2-3. Populating the Master page

That's it. Your Master page is now created. You will
learn how to use it in the next lab.

2.1.1. What about...

...nesting Master Pages?

Nesting a Master page within another Master
page is sometimes useful when you want to alter the look and feel of
a specific area of your site. For example, suppose the
O'Reilly Network wanted to provide unique navigation
bars for pages at particular Network sites, such as ONDotnet.com or
MozillaDevCenter. Figure 2-4 shows how this might
be done with a page that contains two Master Pages, the second nested
within the first.

Figure 2-4. Nested Master Pages

To see how you can nest one Master page inside another, follow these
steps:

Add a new Master page to the project
(C:\ASPNET20\chap02-MasterPages) and name it
MasterPage2.master.

This second Master page will consist of a single-row table with two
columns. The first column contains a Content control
(Content1) that occupies the ContentPlaceHolder
control in the first Master page
(ContentPlaceHolder1) with text (for
simplification, in this example you will use text instead of links)
such as Log in, Register, etc. The second column contains a
ContentPlaceHolder control (ContentPlaceHolder2)
for Content pages to add controls to. Switch to Source View and add
the code shown in Example 2-1 to
MasterPage2.master.

Note: You'll learn more about the Content page
in the next lab.Tip: Visual Studio 2005 does not support visual editing or creation of
nested Master Pages. You need to do this work in Source View.

Example 2-1. Creating a nested Master page

<%@ Master Language="VB"  MasterPageFile="~/MasterPage.master" 
CodeFile="MasterPage2.master.vb" AutoEventWireup="false" 
Inherits="MasterPage2_master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
Runat="Server">
<table>
<tr>
<td width=200 bgcolor=black>
<font color=white>
Login<br />Register<br />Manage Newsletters<br />
Register Your Books<br />.NET Topics<br />
.NET Compact Framework<br />ADO.NET<br />
ASP.NET<br />C#/J#/F#<br />COM(+)/ATL<br />
FCL/CLI/CLR<br />Open/Shared Source<br />
VB .NET<br />Web Services<br />Windows Forms<br />
Windows OS<br />
</font>
</td>
<td>
<asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</asp:Content>

Figure 2-5 shows the relationship between the two
Master Pages.

Figure 2-5. The relationship between the two Master Pages

In the next lab, you will learn how to use the Master page you
created in this lab to establish a consistent look and feel for your
Content pages.

2.1.2. Where can I learn more?

For a guided tour that shows how to build Master Pages using Visual
Web Developer 2005 Express, visit http://beta.asp.net/GuidedTour/s15.aspx.