Session 8 - 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 design

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"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>Untitled Page</title>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <asp:contentplaceholder 
            id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
      </div>
    </form>
  </body>
</html>
  5. Modify the content of the <div> element to include three <div>s with the <asp:contentplaceholder> inside the third <div> as follows. 
    <div>
  <div id="header"></div>
  <div id="menu"></div>
  <div id="main">
    <asp:contentplaceholder
        id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
  </div>
</div>
  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: 
    #menu
{
  width: 150px;
  float:left;
} 
#main
{
  margin-left: 160px;
}
  9. Open your masterpage in Design view and in properties select DOCUMENT from the drop down list and set the Stylesheet property to the file you have just created.
  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. Put your page content in this section and save the file.
  16. Repeat steps 14 to 18 to create two pages called FAQ.aspx and Supplies.aspx.
  17. Open the Masterpage and for each of the LinkButtons set its PostBckUrl to the appropriate page using the file selector.
  18. Save your project and run it.

Download the ZIP version of the MasterPage application.

Session 8 - Workshop

  1. Reproduce the multi-level page hierarchy from Session 7 using the Master & Content pages, but use navigation controls in the Master page layout. Application MasterNavigate is available for reference.
Valid XHTML 1.0! | Valid CSS! | Bobby WorldWide Approved AAA