Master Pages are Page Templates for Dynamic ASP.NET 2.0 Websites

What is a Master Page?

ASP.NET 2.0 Master Pages is one of the primary technologies that makes website creation and maintenance so easy with VWD-CMS. A Master Page is a web page template for dynamic ASP.NET sites. After you create a Master Page, you can quickly create as many other pages as you want that use the same layout. If you need to make some changes to the template, you don't have to edit all of your pages, just the Master Page.

How Master Pages and Content Pages Work

The basic idea behind a master page is that many of your pages share the same layout so there is no need to duplicate this HTML code on every page. The Master Page defines the overall look and feel of your Content pages, and each content page is responsible for inserting unique content into the template defined by the Master Page.

You define a section of the Master Page as a ContentPlaceHolder and a corresponding Content control, on the Content page, fills in the real content when the web page is requested and the server loads it.

Building a New MasterPage

You will want to build a new MasterPage so that your website is unique. You can use HTML templates, or design a web page yourself, or hire a designer to build an HTML template for you.

In the end, regardless of where you get your website HTML template, you will need to convert it to a MasterPage so it can be usable in the ASP.NET and VWD-CMS framework.

I provide ASP.NET and C# consulting services. If you would like help incorporating your HTML templates into ASP.NET MasterPages, please feel free to contact me with a description of the work that you would like performed. For more information about my services, rates, and availability, send me an email with the details of your website project.

Master Page Design Strategy and Content Reuse

When you design a Master Page, you are creating a overall structure for all of the pages that will use the Master Page. There are some decisions to be made about putting content, such as the footer section of the page, in the Master Page or making it a separate reusable "content block."

One approach to this kind of decision is to consider if the section in question will show up on every page or if it will only show on some pages. If you know in advance that you don't want the section to show on all pages, or if you want to swap in different content in the section for some pages, then the decision is clear - make the section a reusable content block. Depending on the nature of the content, you can store it in the Content folder, Navigation folder, or Ads folder.

Conversely, if you know that the footer section, will be displayed on every page that uses the Master Page, then it is a logical choice to include the footer section directly in the Master Page HTML.

Yet another consideration is if you plan to have several different page layouts on the site. This will require several Master Pages. It is possible, though, that all of your different Master Pages will display an identical footer section. In this case, it would be best to store the footer as a reusable content block so it can be shared by all of the Master Pages and you can make changes in one place and it takes effect on all of your pages.

The end result of all of this is that the design decisions about what content to include in the Master Page verses reusable content blocks is subjective and really depends on your needs and what arrangement works best for you. Finding an even balance is probably the best approach, try to find opportunities to reuse content as you build your Master Page, but don't go crazy creating hundreds of reusable content blocks that may not be needed.

VWD-CMS Extends the MasterPage Class to Make SEO and Content Management Easier

When you create a new Master Page in VWD-CMS, you don't need to write any code, but if you need to customize your pages you have the freedom to do so, but it is not required to use VWD-CMS. The easiest way to do this is to copy the MainMaster.master file, and the MainMaster.controls file, that are included with VWD-CMS and then start editing the layout of the HTML for the New Master Page.

If you are not an ASP.NET developer and you would like to create a new Master Page, I suggest that you hire an experienced programmer to do this.

Creating new Content pages for your new Master Page is easy too, you just change the MasterPageFile attribute in the .aspx file for the Content page. Here is an example:

The default Content Page in VWD-CMS

<%@ Page Language="C#" 
MasterPageFile="~/VwdCms/Master/DefaultMaster.master" 
AutoEventWireup="true" 
%>
<asp:Content runat="server" ID="ccContent" ContentPlaceHolderID="cphPageContent"/>

Let's assume that you created a new Master Page called NewMaster.master and you want to create a new Content page based on it. In VWD-CMS, you would click the create a new page button, give it a name, and click OK. Go to the Code view in VWD-CMS and make the changes shown in red.

A Content Page based on NewMaster.master

<%@ Page Language="C#" 
MasterPageFile="~/VwdCms/Master/NewMaster.master" 
AutoEventWireup="true" 
%>
<asp:Content runat="server" ID="ccContent" ContentPlaceHolderID="cphPageContent"/>

If you plan to use NewMaster.master for all of your pages, or the majority of them, it would be helpful to make the changes shown in red above to the Content Page Template file (/VwdCms/ContentPageTemplate.aspx) so that VWD-CMS will automatically use NewMaster.master when you create a new ASPX page.

Master Page HTML Code Example

<%@ Master Language="C#" 
AutoEventWireup="true" 
CodeFile="MainMaster.master.cs" 
Inherits="MainMaster" 
EnableViewState="false"%>
<%@ Register TagPrefix="VwdCms" Namespace="VwdCms" Assembly="VwdCms" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:contentplaceholder id="cphHead" runat="server">
    </asp:contentplaceholder>
</head>

<body onload="try{analytics();}catch(ex){}">
<div>
<table class="banner" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left" valign="top" style="width:275px;height:100%;">
            <VwdCms:ContentControl ID="ccBannerLinksLeft" runat="server" 
            ContentFile="" ContentFolder="Navigation"/>
        </td>
        <td align="center" valign="top" style="width:430px;height:100%;">
            <asp:HyperLink runat="server" ID="lnkLogo" Text="" NavigateUrl="" ToolTip="">
            <asp:Image runat="server" ID="imgLogo" ImageUrl="~/Images/vwd-cms-logo-p.jpg"
             AlternateText="" Width="420" Height="90" style="border:none;" />
            </asp:HyperLink>
        </td>
        <td align="right" valign="top" style="width:275px;height:100%;">
            <VwdCms:ContentControl ID="ccBannerLinksRight" runat="server" 
            ContentFile="" ContentFolder="Navigation"/>
        </td>
    </tr>
    <tr style="height:2px;">
    <td colspan="3" align="center" valign="middle" style="font-size:0pt;">
        <VwdCms:ContentControl ID="ccAdHead" runat="server" 
        ContentFile="" ContentFolder="Ads"/>
    </td>
    </tr>
</table>

<table class="bodycontent" border="0" cellpadding="0" cellspacing="0">
<tr style="height:2px;">
    <td colspan="2" style="width:980px;height:2px;font-size:0pt;
    background-color:#660066;"> </td>
</tr>
<tr>
    <td colspan="2" class="languagebar" 
    style="font-size:0pt;width:980px;text-align:right;">
        <VwdCms:LanguageControl ID="lcLanguage" runat="server" />
    </td>
</tr>
<tr>
    <td colspan="2"align="left" valign="top" style="height:1px;font-size:0pt;">
        <VwdCms:ContentControl ID="ccNav" runat="server" 
        ContentFile="" ContentFolder="Navigation"/>
        <VwdCms:ContentControl ID="ccAdNav" runat="server" 
        ContentFile="" ContentFolder="Ads"/>
    </td>
</tr>
<tr>
    <td align="left" valign="top" style="width:800px;">
        <asp:ContentPlaceHolder ID="cphPageContent" runat="server"/>
        <VwdCms:ContentControl ID="ccPageContent" runat="server" 
        ContentFile="" ContentFolder="Content"/>
        <VwdCms:ContentControl ID="ccAdFooter" runat="server" 
        ContentFile="" ContentFolder="Ads"/>
    </td>
    <td align="center" valign="top" style="width:180px;">
        <VwdCms:ContentControl ID="ccAdMain" runat="server" 
        ContentFile="" ContentFolder="Ads"/>
    </td>
</tr>
<tr>
    <td colspan="2" align="center" valign="middle" style="width:980px;">
        <VwdCms:ContentControl ID="ccFooter" runat="server" 
        ContentFile="" ContentFolder="Content"/>
    </td>
</tr>

</table>
</div>
</body>
</html>