posted on Wednesday, January 19, 2005 6:30 PM by mlorengo

Creating a MasterPage for the Virtual Cellar

I've begun creating the website that will house the Virtual Cellar data model and form the main user interface for the application. My next couple of entries will pertain to some initial tasks that need to be done so that I start hanging pages on the website. In this entry I'll discuss the setup of the site master template for the Virtual Cellar.

The General Layout

I plan on having a three column layout along with a header section, as illustrated in the picture below.

There are four major sections

  • Banner
    The Header section will contain the application title bar as well as the main menu navigation for the application
  • ContextBar
    The ContextBar will contain information that will vary depending on the context of the application. For example, if the user is not logged in, it will contain a username, password prompt. If the user is logged in, it could contain statistics about her account, an overview of her cellar statistics or latest headlines via rss feeds.
  • Main
    The Main section will be where the user spends most of her time interacting with the application. The content of the section will be the data pulled from the Virtual Cellar catalog in the form of reports or where the user will enter new information into the Virtual Cellar.
  • SideBar
    The sidebar section is where items of interest will be displayed depending on the type of information being displayed in the main section. These could be Google AdSense links, or links to items for sale on Amazon and eBay.

Creating The MasterPage

In Visual Studio, I create a new MasterPage template by Right-Clicking on the web project and select to add a New Item. I'm then presented with the following dialog box.

After adding the VirtualCellar.master file to the project, I'll go ahead and create the following <div> tags that define each of the sections. 

<body>
<form id="MainForm" runat="server">
  <div id="Banner">Banner
  </div>
  <div id="ContextBar">ContextBar
  </div>
  <div id="Main">Main
  </div>
  <div id="SideBar">SideBar
  </div>
</form>
</body>

The next step is to add the <style> section to arrange the <div> sections in the order above

<head>
<style type="text/css">
	body {
		margin:10px 10px 0px 10px;
		padding:0px;
	}

	#Banner {
		background:#fff;
		height:70px;
		border-top:1px solid #000;
		border-right:1px solid #000;
		border-left:1px solid #000;
		voice-family: "\"}\"";
		voice-family: inherit;
		height:69px;
	}
	html>body #Banner {
		height:69px;
	}

	#Banner p {
		font-size:14px;
		padding:10px 10px 0px 10px;
		margin:0px;
	}

	#ContextBar {
		position: absolute;
		left:10px;
		top:80px;
		width:200px;
		background:#fff;
		border:1px solid #000;
	}

	#Main {
		background:#fff;
		margin-left: 199px;
		margin-right:199px;
		border:1px solid #000;
		voice-family: "\"}\"";
		voice-family: inherit;
		margin-left: 201px;
		margin-right:201px;
	}
	html>body #Main {
		margin-left: 201px;
		margin-right:201px;
	}

	#SideBar {
		position: absolute;
		right:10px;
		top:80px;
		width:200px;
		background:#fff;
		border:1px solid #000;
	}
</style>
</head>

You may notice the use of the infamous "voice family" hack, this is to get around the various browser bugs or interpretations of the css box model. This code also allows us to view our layout semantically. For the longest time I did layout using tables, little did I know that was a major crime according to the css folk. This article on retooling slashdot with css got me hooked on using css for layout. Another great site is the CSSZenGarden, but I digress. The above css code will give us the nice layout we set out to construct.

Creating a New Page Based on The Master

Now that I have the VirtualCellar.master page created, I can begin using it in new pages that I create. So I'll right click on my web project and select Add New Item. I'm present with the same dialog box as before, but this time I choose, Web Form. I also check the box that says Select Master Page. After selecting Add, a listbox containing all of the defined MasterPages are shown, and I select VirtualCellar.master. A new file Default.aspx is created that contains the following code.

<%@ Page Language="C#" 
    MasterPageFile="~/VirtualCellar.master" 
    CodeFile="Default.aspx.cs" 
    Inherits="Default_aspx" 
    Title="Untitled Page" 
%>

And the output looks like this!

Next time I'll look at adding a menu to the application using the new <asp:Menu /> and <asp:SiteMapDataSource /> controls

Comments