Creating Consistent Websites

One of the most important characteristics of a usable website is consistent layout. If a user is presented with a collection of pages with different layouts, menu choices, colours etc. it become difficult to work with. A website designer should strive to create a design which encompasses the entire site, with perhaps minor thematic changes for different sections. To assist in achieving this ASP.NET 2.0 introduces the concept of master pages.

A master page is a web page which is created using the Master page template and is saved with file extension .master. To all intents and purposes is looks just like an ordinary ASP.NET web page with one important difference: you can place content place holders on a master page which will get replaced by custom content when you start developing your actual pages. A master page will have one or more ContentPlaceHolder controls on it. When a page is created using the master page as its template each ContentPlaceHolder gets replaced by a Content control. The designer can modify the Content control to provide the distinct content for the page.

Step by step

Before you start you must have a clear idea of the layout of the pages on your site, preferably with a visual design. This is used to form the basis for your master page.

For the purpose of this example the following design will be implemented:

Basic page layout for UB101

The layout will be implemented using three <div>s and a simple stylesheet to position the content.

  1. Create a new C# Empty Website called MasterPages.
  2. Select File | New File ...
  3. Choose Master Page from the list and click Add.
    Default Master page layout

    You will see a web page with a large ContentPlaceHolder on it. This will become the part of your web pages that contains the information. You need to build the design of your web page around this ContentPlaceHolder.

  4. Switch to source view and you will see:
    <%@ Master Language="C#" AutoEventWireup="true"
        CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="" >
      <head runat="server">
        <title>Untitled Page</title>
            id="head" runat="server">
        <form id="form1" runat="server">
                id="ContentPlaceHolder1" runat="server">
    Note: there is a second ContentPlaceHolder in the <head> of the page, with id="head". This is used for adding page specific content to the head of the page, for example, metadata.
  5. Modify the content of the <div> element to include three <div>s with the <asp:contentplaceholder> inside the third <div> as follows.
      <div id="header"></div>
      <div id="menu"></div>
      <div id="main">
            id="ContentPlaceHolder1" runat="server">
    Note: you may also want to set the 'id' of the outer <div> (e.g. id="container") so you can control the appearance of the page using your stylesheet.
  6. Put the heading <h1> with content 'Underwater Basketweaving 101' in the <div> with id="header".
  7. Put three LinkButtons into second <div> (id="menu"), with text 'Home', 'FAQ' and 'Supplies'.
    Prototype Master page layout
  8. Add a New Item of type stylesheet to the project and add the following code:
      width: 150px;
      margin-left: 160px;
  9. Open your master page in Source view and drag the style sheet file onto the code immediately after the <head runat="server"> tag in the master page. A line similar to the following will be added to your master page, but you must make sure it is in the correct place:
    <link href="StyleSheet.css"
                        rel="stylesheet" type="text/css" />
    An alternative method of adding the style sheet is to use the style manager, but this will add the style sheet link at the end of the <head> section. This may not be the best place when creating a master page.
  10. Save the page, and close it.
  11. Select File | New File ...
  12. Choose Web Form, select the checkboxes at the bottom labelled 'Place code in separate file' and 'Select master page', make sure the page name is Default.aspx and click Add.
  13. Select MasterPage.master in the following dialog and click OK.
    Edititng a content page based on a site master
  14. When the page opens you will see that the layout is greyed out, and the only area you can modify is the content of the Content control on the page. Type some simple text into the Content, e.g. This is the home page!!.
  15. If you look at the Source for the page you will see it doesn't have any of the outer bits of XHTML, just a <%@ Page> tag and an <asp:Content> element to hold the actual page content.
    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
             AutoEventWireup="true" CodeFile="Default.aspx.cs" 
             Inherits="_Default" Title="Untitled Page" %>
    <asp:Content ID="Content1" 
      This is the home page!!
  16. Put your page content in this section and save the file.
  17. Repeat steps 11 to 16 to create two pages called FAQ.aspx and Supplies.aspx.
  18. Open the Masterpage and for each of the LinkButtons use the Properties pane to set its PostBackUrl to the appropriate page using the file selector.
  19. Save your project and run it.

Download the ZIP version of the MasterPage application.

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera