Creating master pages, CSS, skins and themes
Part three of a five-part series of blogs

How to create the perfect ASP.NET website, including using master pages, CSS style sheets, and whether to use skins and themes or not.

  1. Creating ASP.NET Websites using CSS and Master Pages
  2. Creating an ASP.NET Website
  3. Creating and Using Master Pages (this blog)
  4. Formatting Choices: HTML styles, Themes/Skins and CSS
  5. Creating and Applying CSS Style Sheets in ASP.NET

This blog is part of a larger online tutorial in ASP.NET. Wise Owl's main business is running classroom-based training courses - have a look at our other .NET courses.

Posted by Andy Brown on 01 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Creating and Using Master Pages

Now that we've got a basic website, it's time to create a master page.

Why Use Master Pages?

It's almost certain that you're going to want every single page of your website to have the same look-and-feel and header:

Default page Page filled in
Pages start out like this ... ... and you fill in the details


By far the easiest way to achieve this is to create one or more master pages

Creating a Master Page

To create a new master page, first choose to add a new item to your website:

Adding new item

Right-click on your project and Solution Explorer, and choose to add a new item.

Now give your master page a name, following the steps below:

Creating master page

Choose to create a master page, and give it a name

Here are the steps to follow for the dialog box above:

  1. Choose to create a master page.
  2. Give your master page a name (most sites will only ever have one master page, so it often makes sense to give it the same name as your website).
  3. Choose to add it to your website!

You'll see your master page displayed in Solution Explorer:

Master page selected

So far, so good - now it's time to edit the master page ...


Customising the Master Page 

I'm going to assume you know a little HTML here (but not much).  Initially a master page contains a section for header data, and a section for the main body of the page:

Master page HTML

The placemarkers are called ContentPlaceHolders.

If you're going to have the same title on every page, you can dispense with the top ContentPlaceHolder:

HEAD section of master page

The revised HTML for the header section of the master page.


For the details of the page, we'll just add a title:

Amended BODY section

We've added a title (see a separate blog on CSS styles for how the title and container of the page are formatted).


Master pages can have as many content place holders as you like - so you could, for example, have a navigational menu appearing in one content place holder on the left, and the body of the page appearing in another content place holder on the right.

Creating Pages Based on the Master Page 

Now that you've got a master page, you can use it to create new pages.  First choose to create a new page:

Create new page menu

Right-click on your project in Solution Explorer and choose to create a new page.


Now give your new page a name, and make sure you base it on the master page you've just created:

Creating a page based on a master page

Follow the numbered steps below to create your new page.

The steps to follow for the dialog box above are:

  1. Choose to create a web form (ie a web page).
  2. Give this new page a name (here we're just created Default.aspx). 
  3. Vitally, choose to select upon which master page you're basing this new page.
  4. Click on the button to add the new page.

You can now choose upon which master page you want to base this page (you'll probably only have one to choose from).

For subsequent pages, the Select master page option will be ticked automatically for you.

 Editing Pages Based on Master Pages 

This is identical to editing normal pages, in both Design and Source views:

Using design view Using source view
Design view Source view

However, the nice thing now is that you can change the look and feel of every single page in your website just by changing the master page. 

This blog has 0 threads Add post