Creating a Master Page

Creating a Master Page

A master page is similar to the standard ASP.NET pages we've been creating throughout this book. Like ASP.NET pages, master pages consist of Web controls, static HTML markup, and server-side code. The main difference between a master page and a standard ASP.NET page is that a master page's purpose is to define a template for the website. As we discussed earlier in this hour, the master page defines both the user interface elements common to all pages that inherit the master page as well as the regions that are editable on a page-by-page basis.

To get started defining a sitewide template, add a master page to your project using the following steps:

Right-click on the project name in the Solution Explorer.

Choose the Add New Item menu option, displaying the Add New Item dialog box.

From this dialog box, choose the Master Page item type.

Choose a name for the master page. By default, the name MasterPage.master is chosen. Feel free to leave it as this or change it to something else. Just be sure to keep the file extension as .master.

Check the Place Code in Separate File check box, if it's not already checked. As we discussed in previous hours, checking this check box places the master page's source code portion in a separate file.

Click the Add button to add the master page to your project.

After you add the new master page, the Design view shows a page with a single ContentPlaceHolder Web control (see Figure). This ContentPlaceHolder indicates the region that can be edited by the ASP.NET pages that inherit this master page. You can have multiple ContentPlaceHolders in your master page. To add a new ContentPlaceHolder, simply drag the ContentPlaceHolder control from the Toolbox onto the master page.

4. New master pages contain a single Content PlaceHolder control.

By the Way

The ContentPlaceHolder Web control can be added only to master pages, not to ASP.NET pages. Therefore, when viewing a master page in Visual Web Developer, you will find the ContentPlaceHolder control in the Toolbox; however, when you're viewing a normal ASP.NET page, this control is not displayed in the Toolbox.

Take a moment to view the declarative markup of the master page by going to the Source view (see Listing 21.1). If you compare the default declarative markup for a master page to that of a regular ASP.NET page, you'll see two differences. The first is that the master page starts with a <%@ Master %> directive (line 1), whereas normal ASP.NET pages start with the <%@ Page %> directive. Furthermore, the master page contains, by default, a ContentPlaceHolder control (lines 12 and 13).

The Default Declarative Markup for a Master Page

 1: <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage2" %>
 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
 5: <html xmlns="" >
 6: <head runat="server">
 7:     <title>Untitled Page</title>
 8: </head>
 9: <body>
10:     <form id="form1" runat="server">
11:     <div>
12:         <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
13:         </asp:contentplaceholder>
14:     </div>
15:     </form>
16: </body>
17: </html>

To create the sitewide look and feel, add the appropriate static HTML markup and Web controls to the master page. Again, you can do this by manually entering the HTML markup and control syntax through the Source view, or in a more graphical way through the Design view.

Did you Know?

A website project can have multiple master page files, each one defining a different template. For example, a website may be broken into three different sections, with each section having its own unique look and feel. In this case we would create three different master pages for the site. When creating a new ASP.NET page, we would associate it with the appropriate master page.

Designing the Sitewide Template

Let's create a master page that has the look and feel first shown in Figurea title at the top, a TreeView control along the left, and so on. This design has each page laid out into four regions:

  • The header region, which displays the title of the website.

  • The navigation region, which contains the TreeView control and appears on the left of the page beneath the header region.

  • The main region, which contains the SiteMapPath control and the ContentPlaceHolder control. This region is located beneath the header region and to the right of the navigation region.

  • The footer region, which contains the common linksLegal, About Us, and so onalong with the copyright statement.

To provide this page layout, let's use tables. A table is an HTML element that can be used to arrange a page into various columns and rows. For this site design, we want a table that takes up the entire page with two columns and three rows, with the top and bottom rows spanning two columns. Figure illustrates this design concept graphically.

5. The site's design lays out pages using a two-column, three-row table.

To create such a layout in HTML, you can manually enter the appropriate HTML table markup, or you can use Visual Web Developer. If you are interested in entering the HTML markup by hand, feel free to do so; Listing 21.2, shown later, contains the complete markup for the master page.

If you are not an HTML aficionado and would rather have Visual Web Developer assist with creating the page's layout, follow these steps by going first to the master page's Design view. From the Layout menu, choose Insert Table, displaying the Insert Table dialog box (see Figure). From this dialog box, you can specify the precise table settings, indicating the number of rows and columns, the alignment, the width and height, and so on, or you can use a preexisting template. For our master page, go ahead and opt to use the "Header, footer, and side" template.

6. Add a table to the master page using the Insert Table dialog box.

The Insert Table dialog box adds the new table before the ContentPlaceHolder Web control. Because we want the ContentPlaceHolder control in the main region, take a moment to drag the ContentPlaceHolder from beneath the table into the second column in the second row of the table.

Creating the Header Region

In the header region, enter the site's title, such as Welcome to My Website! I've opted to have this title centered and displayed in a 24pt font size. These settings can be specified when typing in the website name, through the myriad of formatting options along the toolbar or through the Format menu.

These settings can also be made to apply to the entire content region, rather than just the particular piece of text being entered. To tailor the entire header region, perform the following steps:

Click inside the table cell and then go to the Properties window.

Click on the Style property, which will display a set of ellipses.

Click on these ellipses. This will display the Style Builder dialog box where you can set the font, background, layout, and other options that apply to the entire table row (see Figure).

7. Customize the appearance of the header region through the Style Builder dialog box.

For example, to have the header region display white text on an olive background, from the Font tab, pick White from the Color drop-down list, and from the Background tab, pick Olive from the Color drop-down list. You can also specify font sizes, alignment, and a host of other settings through the Style Builder dialog box.

Did you Know?

By default, the table rows that make up the header and footer regions have a height of 200 pixels. You can increase or decrease this amount by clicking on the border between the rows and, while holding down the button, move the mouse up or down.

Crafting the Navigation Region

The purpose of the navigation region is to provide the visitor with a complete listing of the site's structure, making it easy to quickly move to another page on the site. As we discussed in Hour 19, "Defining a Site's Structure and Providing Site Navigation," the ASP.NET TreeView Web control can be used in tandem with a SiteMapDataSource control to display the site's structure, assuming that there is a properly defined site map. For this hour, I am using the same site map used in Hour 19.

After you have created your site map, add the SiteMapDataSource and TreeView controls to the first column in the second row of the table, configuring the TreeView control to use the SiteMapDataSource.

By default, the content in a table cell is vertically placed in the middle of the cell. If the navigation region's row is particularly tall, which can happen in pages that include lengthy content in the main region, whitespace will appear between the header region and the TreeView control. In fact, if there is several pages' worth of content in the main region, the visitor may have to scroll down to see the TreeView.

Often the common sitewide elements are formatted so that their position is not affected by the page-specific content. To accomplish this, we need to have the navigation region's content appear at the top of the cell, rather than in the middle. This is configurable through the table cell's valign property. To set this property, click inside the cell that makes up the navigation region, go to the Properties window, and set the valign property to top. This will cause the navigation region's content to be vertically aligned with the top of the table cell, regardless of how much or how little content is in the main region.

Did you Know?

When you add a table using the "Header, footer, and side" template, the side columnthe navigation regionis created with a width of 200 pixels. Like with the height of the header and footer regions, you can adjust this width by clicking on the border between the navigation and main regions and, while holding down the button, move the mouse to the right or left.

Creating the Main Region and Footer Region

At this point the only two regions remaining are the main and footer regions. The main region already has the ContentPlaceHolder control (dragged into it after adding the table) but still needs the SiteMapPath control, which shows a breadcrumb. Drag this control from the Toolbox into the main region, placing it above the ContentPlaceHolder control. Finally, set the main region's table cell's valign property to top, just as we did with the navigation region. This ensures that regardless of how little content is in the main region, it will appear at the top of the cell.

Finally, add the content for the footer region in the bottommost row. My footer region contains three links: Legal, About Us, and Privacy Policy. I manually typed in these links, although you could opt to use three HyperLink Web controls, if you'd prefer.

Refer back to Figure to see the completed master page when viewed through the Visual Web Developer's Design view. Listing 21.2 contains the complete declarative markup of the master page when viewed through the Source view.

The Master Page's Declarative Markup

 1: <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
 5: <html xmlns="" >
 6: <head runat="server">
 7:     <title>Untitled Page</title>
 8: </head>
 9: <body>
10:     <form id="form1" runat="server">
11:     <div>
12:         <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height:
13:             <tr>
14:                 <td colspan="2" style="height: 100px; color: #ffffff; background-color
: olive; text-align: center; font-weight: bold; font-size: 24pt;">
15:                     Welcome to My Website!</td>
16:             </tr>
17:             <tr>
18:                 <td style="width: 200px" valign="top">
19:                     <asp:TreeView ID="TreeView1" runat="server"
 DataSourceID="SiteMapDataSource1" ImageSet="Simple" NodeIndent="10">
20:                         <ParentNodeStyle Font-Bold="False" />
21:                         <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
22:                         <SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555"
23:                             VerticalPadding="0px" />
24:                         <NodeStyle Font-Names="Verdana" Font-Size="8pt"
 ForeColor="Black" HorizontalPadding="0px"
25:                             NodeSpacing="0px" VerticalPadding="0px" />
26:                     </asp:TreeView>
27:                     <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
28:                 </td>
29:                 <td valign="top">
30:                     &nbsp;<asp:SiteMapPath ID="SiteMapPath1" runat="server"
 Font-Names="Verdana" Font-Size="0.8em"
31:                         PathSeparator=" : ">
32:                         <PathSeparatorStyle Font-Bold="True" ForeColor="#1C5E55" />
33:                         <CurrentNodeStyle ForeColor="#333333" />
34:                         <NodeStyle Font-Bold="True" ForeColor="#666666" />
35:                         <RootNodeStyle Font-Bold="True" ForeColor="#1C5E55" />
36:                     </asp:SiteMapPath>
37:                     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
38:                     </asp:ContentPlaceHolder>
39:                 </td>
40:             </tr>
41:             <tr>
42:                 <td colspan="2" style="height: 50px; text-align: center;">
43:                     <a href="Legal.aspx">
44:                     Legal</a> | <a href="About.aspx">About Us</a> | <a href="Privacy
.aspx">Privacy Policy</a><br />
45:                     Copyright Scott Mitchell, 2006</td>
46:             </tr>
47:         </table>
48:         &nbsp;
49:     </div>
50:     </form>
51: </body>
52: </html>

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows