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:
- Image controls
-
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.
- Panel control
-
Use the mouse to stretch the Panel control across the page. Set its Backcolor property to Maroon.
- LinkButton controls
-
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 ContentPlaceHolder 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 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. |
