Home > 2010 Winter BTI420 > Page layout essentials – CSS and Master Pages

Page layout essentials – CSS and Master Pages

January 25, 2010 Leave a comment Go to comments

You have now seen enough ASP.NET Web Forms pages to see the need for a consistent development process and consistent visual appearance across a web site’s pages. We discuss Master Pages as a tactic you can use.


ASP.NET Master Pages are introduced in the documents linked in the virtual textbook. Scan some of those, and then return here.


Content layout – use CSS!

You have complete and total freedom when choosing your page layout strategy. However, web standards guide you to use CSS for layout. That’s what your professor advises – DON’T use tables for layout (but it’s OK to use tables for tabular data).


A few tips for using CSS in ASP.NET Web Forms

CSS must be used to maintain the visual appearance of your ASP.NET web pages. Both the development environment and the runtime environment fully support CSS. Here are a few highlights of our introductory coverage on CSS:

  • You can create one or more style sheets, and store it/them anywhere in your web site
    • For best results, place them in the ui/css folder
    • Later, your professor will teach about a way to organize style sheets and the kind of rules they contain
  • Zero, one, or more style sheets can be linked to a page (web form or master page)
    • Can click-drag-and-drop from Solution Explorer to the page’s design view
  • Learn and know the XHTML markup that web server controls render, so that your CSS rules are applied correctly
  • Web server controls have a CssClass property which can be used to specify a CSS class rule
  • Rules are sequenced and merged according to CSS standards

Later in the course (just after study week), we will probably return to this topic. In particular, we’ll look at the Visual Studio 2008 tools that help you work with styles:

  • CSS Properties
  • Manage Styles
  • Apply Styles


ASP.NET Master Pages

As noted on the ASP.NET Master Pages introduction and overview pages:

ASP.NET master pages enable you to create a page layout (a master page) that you can use with selected or all pages (content pages) in your Web site. Master pages can greatly simplify the task of creating a consistent look for your site.

ASP.NET master pages allow you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application. You can then create individual content pages that contain the content you want to display.

When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.

Study the following image. It shows a content page (its background is white) that uses a master page (its background is coloured):


When you create a master page, it is named with the ".master" extension. When you create a content page (i.e. a web form) that uses a master page, you click/select the "Select master page" checkbox in the "Add New Item" dialog. The following is the markup for a new "example1.master" page:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="example1.master.cs" Inherits="ui_mp_example1" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <asp:contentplaceholder id="head" runat="server">
    <form id="form1" runat="server">
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

The following is the markup for a new "example1.aspx" web form that uses "example1.master": 

<%@ Page Title="" Language="C#" MasterPageFile="~/ui/mp/example1.master" AutoEventWireup="true"
    CodeFile="example1.aspx.cs" Inherits="examples_example1" %>

<asp:content id="Content1" runat="Server" contentplaceholderid="head">
<asp:content id="Content2" runat="Server" contentplaceholderid="ContentPlaceHolder1">

When you edit the "example1.aspx" page (in design view or source view), you add content to the asp:Content "Content2" element. The "Content1" element is used to hold content that normally appears in an XHTML page’s <head></head> element.

A simple example of a content page that uses a master page is one of today’s in-class code examples. Have a look at its construction, as it uses a table for laying out content. The white-background area is where any "content" page would go.

We will study today’s code examples to learn more about master pages.


Categories: 2010 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: