Creating Website Templates with Master Pages

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.