Creating Website Templates with Master Pages

Almost all modern dynamic websites use a template. This includes ASP.NET 3.5 websites. The template page in ASP.NET is called a “master page.” This article series will explain what they are and how to use them.

A master page is a very important page for maintaining a consistent look and feel on your website. It makes your ASP.NET web pages look consistent in the eyes of your visitors regardless of what URLs they are visiting. For example, you need the following things to be same for every ASP.NET web page:

  • Website header image and logo

  • Sidebar navigation

  • Footer section

Suppose you plan to design a website with the following elements on the page:

Without a master page, you can still create your ASP.NET web pages with the  elements shown in the screen shot above. But you’ll two problems if you DON’T use a master page.

First, suppose you plan to edit the website logo and header section of your website (maybe change the graphics or the text). Since you are not using a master page, you will need to edit each and every one of your ASP.NET pages in your server.

This might sound logical if you have one or two ASP.NET pages, but this is inefficient or impossible if your website consists of hundreds or even thousands of pages. Even as few as 10 to 20 ASP.NET web pages can be difficult to maintain/edit without master page.

Second, what if you edit the pages in your website in a hurry while not using the master page technique? There is a risk of forgetting some important elements of your web page.

The result is that NOT all of your pages are exactly the same in terms of layouts and graphics, so your pages might not look consistent on a page-per-page basis.

Even a font size can matter. Some web pages might use a 12 pt font size but others use 10 pt. Visitors notice this small difference,  which makes your website inconsistent in terms of design.

This is why you should use a master page when developing an ASP.NET website. If you are planning to update the layout of your website, you only need to edit the master page, and it’s done (as opposed to editing all of your ASP.NET pages “manually” if you are not using master pages).

ASP.NET website development steps using the Master Pages technique

It is very easy to get started with Master Pages, as long as you are highly familiar with working with ASP.NET pages.

Below is the typical development flowchart for an ASP.NET website using Master Pages:

The website designer is responsible for creating the website layout, navigation and graphics. Once this is finalized, it will be coded by the website developers into the “master page.”

The master page is the result of implementing the website designer’s ideas. This can be simple or complex, depending on the website’s objective. As a suggestion, the simpler the design, the more friendly it will be to your users as well as to the search engines.

In the website development stage, the developers will start to create ASP.NET pages which inherit the design from the master page. So when the website design and development have been completed, it can be deployed on a web server.

The time will come when the website layout will need to be updated. In this case, the developers will simply need to edit the website’s master page.

Once done, all ASP.NET pages will automatically inherit the changes made on the master page, thus saving time in the editing/updating process.

{mospagebreak title=Creating the Master Page File}

The master page in ASP.NET uses the .master extension. Let’s create your first master page file, by following the steps below.

1. Create an ASP.NET website using Visual Web Developer Express: http://www.dotnetdevelopment.net/tutorials/how_to_create_a_project.jpg

Name the project "masterpageexercise." So the sample path will be: E:aspdotnetprojectsmasterpageexercise

2. In Solution Explorer, click your project path (e.g. E:aspdotnetprojectsmasterpageexercise)

3. Right click on the path and click “Add New Item.”

4. Under “Templates,” select “Master Page.”

5. Just leave the rest at default values:

Name: MasterPage.master

Language: Visual Basic

Place code in separate file: “Checked.”

6. Click “Add.”

7. Go to File -> Save All.

Visual Web Developer automatically creates MasterPage.master and shows you the basic/default source code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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 runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

This is the source code that you need to edit to add your HTML code that governs the website layouts, colors, fonts, tables, etc.

Using the Design view for the WYSIWYG (What You See is What you Get) editor, the above default source code is rendered as:

You will noticed that it is still empty because you have not defined the master page’s layout HTML code.

What you see is only the ContentPlaceHolder1 web control.

Introducing the ContentPlaceHolder Web Control

Every ASP.NET master page, it will consist of two parts: the master page HTML code and the ContentPlaceHolder.

The master page HTML code is what defines the look and feel (website header logo, sidebar navigation, footer HTML, etc.) that you want to appear consistently and accurately for every ASP.NET web page.

Inside the ContentPlaceHolder is where you can see the unique content for every ASP.NET web page.

The content should be unique to every page, and not considered part of your master page layout/HTML. It can be dynamically driven. This means that the content can be pulled from the MS SQL server database.

You can assign more than one contentplaceholder to your master page. To add a contentplaceholder to your master page, you need to click and drag the ContentPlaceHolder web control from your toolbox: Toolbox -> Standard -> ContentPlaceHolder.

You cannot add a ContentPlaceHolder to an ordinary ASP.NET web page (that is not a master page). This web control is only available in the toolbox if you are editing a master page file (MasterPage.master).

Now you have a pretty good understanding of what composes a master page, going back to our first screen shot, you can easily define where the contentplaceholder should be placed by knowing where your unique content will be found.

In the above screen shot, the unique content can be added only in the gray shaded box (for the ContentPlaceHolder web control).

Once you have completed your master page, and want your ASP.NET web page to inherit the design of your master page, the master page layout can be found in your ASP.NET web page — but you cannot edit the HTML source of your master page in an ordinary ASP.NET web page. Remember that you can only edit the master page code by going to your master page file: MasterPage.Master

In the next part, you will learn how to actually code your MasterPage.Master with basic HTML, so that a sample website layout design can be completed.

One thought on “Creating Website Templates with Master Pages

  1. This is very useful information. This could really help me a lot or anyone who needs help for website templates.

Join the conversation
about this article

View thread