Chapter 11. Master Pages

Many pages on a web site share common elements. For example, most pages on a web site share a header, some type of page navigation, and a footer. Master pages are used to store the shared elements on your page in one location. They enable you to create a consistent look and feel for your web application. In this lesson I illustrate some of the shared sections of a web page and explain how a generic master page works.

Figure 11-1 shows a typical web page with a header, a menu for navigation, some content, and a footer.

FIGURE 11-1

Figure 11.1. FIGURE 11-1

Figure 11-2 points out the different sections of the page.

The best way to lay out your web pages is to use a cascading style sheet. The first thing that I do when I am creating a new web site is to lay out a sample page using HTML. The page shown in Figure 11-1 used the following HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">
    </div>
    <div id="navigation">
        Top-Level Menu
    </div>
    <div id="content">
        Content goes here.
    </div>
    <div id="footer">
        Copyright © 2010 Super Easy Recipes. All rights reserved.
    </div>
    </form>
</body>
</html>

Figure 11.2. FIGURE 11-2

Get ASP.NET 4 24-Hour Trainer now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial