Hour 21. Using Master Pages to Provide Sitewide Page Templates

In this hour, we will cover

• Creating a master page

• Defining editable regions within a master page

• Associating a newly created page with an existing master page

• Making an existing page use a master page

• Adding source code to a master page

Virtually all professionally done websites have a very consistent look and feel across their pages. The common look and feel usually include both the layout of the pagewhere various user interface elements appear and how they are oriented with respect to one anotherand the fonts, colors, and graphics used within the page. For example, if you visit sports channel ESPN's website, ESPN.com, you'll find that regardless of where you go on the site, at the top of the page you'll see the ESPN logo, a search box, and a menu listing the sports covered by ESPN. At the bottom of each page is another search box, along with the links to the most recently published stories.

When you are building the web pages in a site, it is important not to add the common sitewide features manually to each and every page. That is, the web designers at ESPN.com would be remiss to manually add the search box, logo, and common links to each and every page. Not only would this add significantly to the time required to build a page, but it would make updating the website's layout a nightmare. If the designers at ESPN.com wanted to remove the search box from the top or add to their menu of sports covered, they would have to visit and update each and every page of the site.

The approach used by professional web developers is to design some sort of site template that has the HTML content that should be present on each and every page. This is accomplished in ASP.NET through the use of a master page. A master page is a special ASP.NET page that, like regular ASP.NET pages, contains both a code portion and an HTML portion, with the HTML portion consisting of both static HTML content and Web controls. This master page contains the common layout content. Then, when you're creating a new ASP.NET page, this new page can be assigned to the master page, thereby inheriting its look and feel. With the master page model, updating the single master page automatically updates the common content in all of the pages that inherit that master page. With master pages, creating a unified site layout that can be easily updated is a snap!