How to Create a SharePoint Server 2007 Custom Master Page and Page Layouts for a Web Content Management Site

  • Article

Summary: Follow step-by-step instructions with code examples to learn how to create a custom master page and related page layouts based on a minimal master page. (15 printed pages)

Avneesh Kaushik, Microsoft Global Services India (MGSI)

September 2007

Applies to: Microsoft Office SharePoint Designer****2007, Microsoft Office SharePoint Server 2007

Contents

  • Overview of Web Content Management, Master Pages, and Page Layouts

  • Customizing Master Pages

  • Common Steps for Creating a Custom Master Page

  • Customizing Page Layouts

  • Using Custom Content Types and Publishing Fields

  • Adding HTML Content with RichHtmlField Controls

  • Deploying Master Pages and Page Layouts as Features to a Site Collection

  • Web Content Management Site Performance Optimization

  • Disabling the Presence Indicator

  • Turning Off Integration with the Microsoft Office System

  • Conclusion

  • Additional Resources

  • About the Author

Overview of Web Content Management, Master Pages, and Page Layouts

One of the most important features of a Web content management (WCM) site is its "look and feel," or branding. The user interface (UI) of a Microsoft Office SharePoint Server 2007 site depends on several primary components, such as master pages, page layouts, images, and cascading style sheets. To be able to give your site a unique look and feel and a good user experience, you must understand these components in the context of Office SharePoint Server. It is also useful to understand how to properly customize or design master pages and layouts, as these affect the authoring experience and site maintenance effort. The code examples in this article are based on a minimal master page, and build on it to add advanced customizations that are based on real-world Office SharePoint Server deployments.

Customizing Master Pages

There are many ways to customize a master page and add it to a site collection. With the Office SharePoint Server 2007 Publishing Portal template, the master page gallery includes several master pages that you can customize fully or from which you can create custom master pages to provide unique branding for your site. You can add new custom master pages to the master page gallery for the site collection directly through the Web interface or by using Microsoft Office SharePoint Designer 2007. You can also add custom master pages to the master page gallery for the site collection by using the Features feature. Office SharePoint Server 2007 requires a master page to have certain minimal placeholders and controls to work. These placeholder and control elements include a title, branding, logon functionality, and navigation; basic required structural elements include page areas, separators, borders, consoles, and description placeholders. Some required placeholders are optional to show, such as search functionality and breadcrumb functionality.

You can use a text editor or a Web editor such as Office SharePoint Designer 2007, or an integrated development environment (IDE) such as Microsoft Visual Studio 2005, to create a master page. The following code example shows a custom master page. You can create a custom master page that is based on a minimal master page without modifying any built-in master pages. After you create the page, you add it to the site collection where it is made available with other master pages. You can select the new master page for the whole site or for individual pages depending on our requirements. Office SharePoint Server will add some files to the page that is sent to the client, such as core.js, core.css, and init.js. I address how to handle these files in How to Optimize a SharePoint Server 2007 Web Content Management Site for Performance.

There are multiple ways to create a custom master page and page layouts, including the CSS, and then deploy your work. Each approach has benefits and disadvantages. The approach you choose affects how you deploy and back up these resources. For example, you can develop a custom master page with Office SharePoint Designer, and then deploy it as a Feature. The following sections describe two approaches.

Approach 1: Using SharePoint Designer

You can create a custom master page by using SharePoint Designer, but after it is customized it becomes part of the SharePoint content database. To support multiple environments, changes are reflected automatically on each front-end Web server across which the content database is shared. In addition, each time you make a change to the master page, you must perform the complete check-in/check-out process. This approach provides good version control, but can slow performance in your development environment. However, SharePoint Designer does provide you with Microsoft IntelliSense.

Approach 2: Using Visual Studio or a Text Editor

Developing a master page without IntelliSense can be slightly more difficult. However, pages you develop in Microsoft Visual Studio 2005 can be deployed as Features (discussed in the following section). Because your pages are on disk, you can modify them additionally by using any text editor. Moving changes across different environments is a straightforward copy/paste operation; however, you must repeat it for each front-end Web server, and it is not automated. Also these pages are uncustomized. You also lose all the versioning capabilities, including check-in/check-out.

Common Steps for Creating a Custom Master Page

Regardless of whether you use Office SharePoint Designer, Visual Studio, or a text editor, you perform the same common steps to create a custom master page and page layouts. Following is the general procedure for creating a master page declaration for a typical WCM site, and code examples.

To create a custom master page

  1. Open Office SharePoint Designer, Visual Studio, or a text editor.

  2. Copy the following code (Section 1a) to create a master page declaration section. The following example code is the master page declaration section for a typical WCM site. If any custom controls are required such as custom navigation controls on the master-page level, you must add the declarations to this section (see Section 1b).

    Note

    This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

    Section 1a. Declaration

    <%-- Identifies this page as a .master page written in Microsoft Visual C#, 
and registers tag prefixes, namespaces, assemblies, and controls. --%>
<%@ Master language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" 
Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" 
Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" 
Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" 
Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/Welcome.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="DesignModeConsole" src="~/_controltemplates/DesignModeConsole.ascx" %>
<%@ Register TagPrefix="PublishingVariations" TagName="VariationsLabelMenu" src="~/_controltemplates/VariationsLabelMenu.ascx" %>
<%@ Register Tagprefix="PublishingConsole" TagName="Console" src="~/_controltemplates/PublishingConsole.ascx" %>
<%@ Register TagPrefix="PublishingSiteAction" TagName="SiteActionMenu" src="~/_controltemplates/PublishingActionMenu.ascx" %>
<%-- Uses the Microsoft Office namespace and schema. --%>

  3. Add any user controls (.ascx files) to the controltemplates directory, as shown in Section 1b.

    Section 1b. Declaration for custom controls

    <%@ Register TagPrefix="MyCustomNav" TagName="Navigation" Src="~/_controltemplates/MyCustNav.ascx" %>
<%@ Register TagPrefix="MyCustomFooter" TagName="Footer" Src="~/_controltemplates/MyCustFooter.ascx" %>

  4. In the header section, you can add any custom cascading styles sheets by using a simple link <html> tag or <SharePoint:CssRegistration> tag. The latter approach offers a few advantages because you have an option to use SPUrl, which returns the URL of the current site. Add the code in Section 2 (renaming the .css file if needed). Also ensure that the custom css file is uploaded in the style library. For more details about how to override core.css styles, see CSS Options with Master Pages.

    Note

    This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

    Section 2. Header

    <html>
  <WebPartPages:SPWebPartManager />
  <SharePoint:RobotsMetaTag />

  <%-- The head section includes a content placeholder for the page title and links to CSS and ECMAScript (JScript, JavaScript) 
     files that run on the server. --%>
  <head >
    <asp:ContentPlaceHolder  id="head">
      <title>
        <asp:ContentPlaceHolder id="PlaceHolderPageTitle"  />
      </title>
    </asp:ContentPlaceHolder>
    <Sharepoint:CssLink />
    <!-- Product Group Custom Styles -->
    <%--SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/PG/PG.css%>" /--%>
    <link type="text/css" rel="stylesheet" href="/_layouts/1033/styles/PG/PG.css" />    
    <!-- End Product Group Custom Styles -->
    <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead"  />
  </head>

  5. Copy and add the following code. The body section consists of the main body including the Site Actions menu, logon control, publishing console control, any navigation controls, and the main content placeholder or content area, which are defined by layouts.

    Note

    This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

    Section 3a. Body

    <%-- When loading the body of the .master page, Office SharePoint Server 2007 also loads the SpBodyOnLoadWrapper class. This class handles .js calls 
   for the master page. --%>
  <body onload="javascript:_spBodyOnLoadWrapper();">
    <%-- The SPWebPartManager manages all of the Web part controls, functionality, and events that occur on a Web page. --%>
    <form id="Form1"  onsubmit="return _spFormOnSubmitWrapper();">

    <!-- Master DIV -->
    <div id="masterbody">
        <!-- Master Header -->
        <div id="MasterHeader">
            <div class="authoringRegion1">
                <div class="sharepointLogin"><wssuc:Welcome id="explitLogout" /></div>
                <span class="siteActionMenu"><PublishingSiteAction:SiteActionMenu /></span>
                <PublishingWebControls:AuthoringContainer 
                   id="authoringcontrols" >
                      <PublishingConsole:Console  /> 
                </PublishingWebControls:AuthoringContainer>
            </div>
        </div>
        <!-- Left Body for Navigation -->
        <div id="LeftNavBody"><asp:ContentPlaceHolder 
           id="PlaceHolderLeftNavBar" />
        </div>
        <div id="leftnavspacer"><!-- Spacer -->
        </div>
        <!-- Content Body -->
        <div id="StagingBody">            
              <asp:ContentPlaceHolder id="PlaceHolderMain"  />            
        </div>
        <!-- Footer Area -->
        <div id="Footer"></div>
    </div>

  6. Copy and add the following code. This section is generally not visible but consists of placeholders that Office SharePoint Server needs to work properly. You can also use a <div> tag with display:none to hide this section instead of using a panel.

    Note

    This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

    Section 3b. Body for placeholders required by Office SharePoint Server

    <%-- The PlaceHolderMain content placeholder defines where to place 
the page content for all the content from the page layout. The page 
layout can overwrite any content placeholder from the master page. 
Example: The PlaceHolderLeftNavBar can overwrite the left navigation bar. --%>

        <asp:Panel visible="false" >
        <%-- These ContentPlaceHolders ensure all default Office SharePoint Server pages 
render with this master page. If the system master page is set to 
any default master page, the only content placeholders required are
 those that are overridden by your page layouts. --%>
            <asp:ContentPlaceHolder id="PlaceHolderSearchArea" />
            <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" />
            <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea"  />            
            <asp:ContentPlaceHolder ID="PlaceHolderPageImage" />
            <asp:ContentPlaceHolder ID="PlaceHolderBodyLeftBorder" />
            <asp:ContentPlaceHolder ID="PlaceHolderNavSpacer" />
            <asp:ContentPlaceHolder ID="PlaceHolderTitleLeftBorder" />
            <asp:ContentPlaceHolder ID="PlaceHolderTitleAreaSeparator" />
            <asp:ContentPlaceHolder ID="PlaceHolderMiniConsole" />
            <asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat ="server" />
            <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/>
            <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat ="server"/>
            <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat ="server"/>
            <asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat ="server"/>
            <asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" />
         </asp:Panel>
    </form>
  </body>
</html>

This completes the steps for creating a custom master page. Save the master page and continue.

Customizing Page Layouts

A page layout defines the look and feel of the main placeholder or content area in the master page in a WCM site. You can have as many placeholders as you need; there are no restrictions about designing placeholders except to follow the general rules that apply to designing ASP.NET placeholders. You can use any combination of Office SharePoint Server publishing field controls and Web Parts. The most frequently used controls are the RichHtmlField publishing control and the Content Editor Web Part. It is important to understand the implication of designing your layout by using any of these controls or Web Parts. It is always a good idea to use fields instead of Web Parts unless you have a business need such as personalization (the ability for a user to select what Web Parts to show, to drag and drop Web Parts to change the look and feel of the page, and so on) because Web Part content changes are not version-controlled, cannot be rolled back, and are not sanitized (for example, the content author can add scripts to the text). You can add Web Part zones to the layout to give authors and visitors some control over changing the look and feel of the layout by dragging Web Parts. By comparison to Web Parts, publishing fields are version-controlled by the WCM system in Office SharePoint Server and can easily be compared or rolled back. There are two types of publishing fields: page and content. You can customize existing publishing field controls or create publishing field controls if you need to by deriving from the baseField control. You can configure publishing fields to restrict authoring options, for example, to control setting fonts and adding tables.

The following two code examples show how to design these layouts by using Content Editor Web Parts or fields. The layouts can also include a combination of both types of controls.

To design a page layout

  1. Open any editor, such as SharePoint Designer or a text editor, or open Visual Studio.

  2. Copy the following common header code.

    Note

    This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

    Section 4. Common header

    <%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
Microsoft.SharePoint.Publishing,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" 
Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, 
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" 
Assembly="Microsoft.SharePoint, Version=12.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" 
Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" 
Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, 
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  3. In the following example (Section 5), notice the SharePoint RichHTMLField publishing control. Section 5 uses only publishing field controls, and so does not allow any personalization (this does not include audience targeting). Copy and add the Section 5 code. Or to create a Web Part–based layout, copy the code in Section 6.

    Note

    It is very important to understand that you must create a custom content type that can accommodate the fields you are adding to the page; by default one field can be added to the page based on the default page content type. All other tags are simple HTML tags required for formatting.

    Section 5. Layout with field controls only

    <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" >
   <style type="text/css">
      .ms-pagetitleareaframe table, .ms-titleareaframe {background: none;   height: 10px;   overflow:hidden;}
      .ms-pagetitle, .ms-titlearea {display:none;}
   </style>
      PublishingWebControls:editmodepanel  id="editmodestyles">
         <!-- Styles for edit mode only.-->
      <SharePointWebControls:CssRegistration 
name="<% $SPUrl:~sitecollection/Style Library/~language/Core  Styles/zz2_editMode.css %>"   />
   </PublishingWebControls:editmodepanel>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" >
   <SharePointWebControls:FieldValue id="HomePageTitleInTitleArea" FieldName="Title"  />
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" >
    <PublishingWebControls:RichHtmlField id="TopLeftContent" FieldName="PGPageTopLeftContent" />                                
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" >
    <SharePointWebControls:CssRegistration 
name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" />
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td valign="Top">
                <div id="StageContent">
                <table cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tr>
                        <td colspan="2"> <div id="ContentPageTitleArea">
                                <PublishingWebControls:RichHtmlField id="TopTitleContent" 
FieldName="PGPageTopContent" />                                
                        </div> </td>
                    </tr>
                    <tr>
                        <td valign="top"> <div id="ContentMiddleArea">
                                <PublishingWebControls:RichHtmlField id="LeftTitleContent"
 FieldName="PGPageBottomLeftContent" />
                            </div> </td>
                        <td valign="top"> <div id="ContentRightArea">
                                <PublishingWebControls:RichHtmlField id="RightTitleContent" 


   FieldName="PGPageBottomRightContent" />
                            </div> </td>
                    </tr>
                    <tr>
                        <td colspan="2"><div id="ContentPageTitleArea">
                                <PublishingWebControls:RichHtmlField id="BottomTitleContent" 


   FieldName="PGPageBottomContent" />
                            </div> </td>
                    </tr>
                </table>
                </div>
            </td>                    
        </tr>
     </table>
   <PublishingWebControls:editmodepanel  id="editmodepanel1">
      <!-- Add field controls here to bind custom metadata viewable and editable in edit mode only.-->
      <table cellpadding="10" cellspacing="0" align="center" class="editModePanel">
         <tr>
            <td><SharePointWebControls:TextField  id="TitleField" FieldName="Title"/></td>
         </tr>
      </table>
   </PublishingWebControls:editmodepanel>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderTitleBreadcrumb" />
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage"  />
<asp:Content ContentPlaceholderID="PlaceHolderNavSpacer"  />

    Section 6. Layout with Web Part zones (Content Editor Web Part can be added to zones at design time or run time)

    <asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" >
   <style type="text/css">
      .ms-pagetitleareaframe table, .ms-titleareaframe
      {
         background: none;height: 10px;overflow:hidden;
      }
      .ms-pagetitle, .ms-titlearea
      {
         display:none;
      }
   </style>
   <PublishingWebControls:editmodepanel  id="editmodestyles">
         <!-- Styles for edit mode only.-->
         <SharePointWebControls:CssRegistration 
name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/zz2_editMode.css %>" />
   </PublishingWebControls:editmodepanel>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" >
   <SharePointWebControls:FieldValue id="HomePageTitleInTitleArea" FieldName="Title"  />
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderLeftNavBar" >
    <WebPartPages:WebPartZone  AllowPersonalization="false" ID="LeftNavZone" FrameType="None"
                                                    Title="LeftNavZone" Orientation="Vertical" />
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" >
    <SharePointWebControls:CssRegistration 
name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/pageLayouts.css %>" />
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td valign="Top">
                <div id="StageContent">
                <table cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tr>
                        <td colspan="2"> <div id="ContentPageTitleArea">
                                <WebPartPages:WebPartZone  AllowPersonalization="false" 
ID="PageTitleZone" FrameType="None"   Title="PageTitleZone" Orientation="Vertical" />
                            </div></td>
                    </tr>
                    <tr>
                        <td valign="top"> <div id="ContentMiddleArea">
                                <WebPartPages:WebPartZone  AllowPersonalization="false" 
ID="MiddleZone" FrameType="None" Title="MiddleZone" Orientation="Vertical" />
                            </div></td>
                        <td valign="top"> <div id="ContentRightArea">
                                <WebPartPages:WebPartZone  AllowPersonalization="false" 
ID="RightZone" FrameType="None" Title="RightZone" Orientation="Vertical" />
                            </div> </td>
                    </tr>
                    <tr>
                        <td colspan="2"> <div id="ContentPageTitleArea">
                                <WebPartPages:WebPartZone  AllowPersonalization="false" 
ID="BottomZone" FrameType="None" Title="BottomZone" Orientation="Vertical" />
                            </div> </td>
                    </tr>
                </table>
                </div>
            </td>                    
        </tr>
     </table>
   <PublishingWebControls:editmodepanel  id="editmodepanel1">
      <!-- Add field controls here to bind custom metadata viewable and editable in edit mode only.-->
      <table cellpadding="10" cellspacing="0" align="center" class="editModePanel">
         <tr><td><SharePointWebControls:TextField  id="TitleField" FieldName="Title"/></td></tr>
      </table>
   </PublishingWebControls:editmodepanel>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderTitleBreadcrumb" />
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage"  />
<asp:Content ContentPlaceholderID="PlaceHolderNavSpacer"  />

  4. Save your page layout.

Figure 1 shows how the previous master page and layouts are structured in both cases.

Figure 1. Wireframe structure of master page and layouts

Wireframe structure of master page and layouts

Using Custom Content Types and Publishing Fields

It is very important to understand what content types are and how to customize them. If you are planning or intending to use field controls (which are not part of Office SharePoint Server built-in types), you must create custom content types.

A content type is a set of columns that define content in Office SharePoint Server. You can use default columns that are available, or create custom columns for a custom content type. In the following case, you first create a new site column that is based on any of the publishing type columns. After you create your columns based on publishing columns, you can create a new content type based on the page content type and add the new columns to it. You can then use this content type in your layouts.

Each custom column added to the content type can be represented as a publishing field in the layout. For the page layout described previously, you need to add some custom columns and custom content types to the site collection. You can add the required columns and custom content for the previous layout (with fields only) with the files mentioned in the following code examples by using Features, or manually by adding the same via SharePoint Designer or a Web interface.

Note

This code example includes line breaks to facilitate online viewing. You must remove the line breaks before running the code.

Section 8a. Customfields.xml for adding custom fields

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<!-- REORG: Shared Among All Base Types. -->
<Field ID="{CC295F9D-D301-44bb-8929-F56BB9085E59}" 
Name="PageTopLeftContent" 
SourceID="https://schemas.microsoft.com/sharepoint/v3" 
StaticName="HAPageTopLeftContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageTopLeftContent" 
Required="FALSE" Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{1F5EC9F7-97FD-4bee-8D4E-CB7A1B142FF3}" 
Name="PageBottomLeftContent" 
SourceID="https://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageBottomLeftContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageBottomLeftContent" 
Required="FALSE" Sealed="TRUE" 
RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{682FB0A4-4C28-4128-9DE2-FE6B7F9E6D12}" 
Name="PageTopMiddleContent" 
SourceID="https://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageTopMiddleContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="HAPageTopMiddleContent" 
Required="FALSE" Sealed="TRUE" 
RichText="TRUE" RichTextMode="FullHtml"/>
<Field ID="{CC00E18B-9F1C-4732-B600-F83DBCECDD5D}" 
Name="PageBottomMiddleContent" 
SourceID="https://schemas.microsoft.com/sharepoint/v3" 
StaticName="PageBottomMiddleContent" Group="Custom Site Columns" 
Type="HTML" DisplayName="PageBottomMiddleContent" 
Required="FALSE" Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{EB024A2C-289D-464b-8354-110ACA14F518}" 
   Name="PageTopRightContent" 
   SourceID="https://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageTopRightContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageTopRightContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{39B61F26-FC77-4123-B244-1985DC216DED}" 
   Name="PageBottomRightContent" 
   SourceID="https://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageBottomRightContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageBottomRightContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{EF1AFA93-78C7-4678-AB64-517D9A2091F2}" 
   Name="PageTopContent" 
   SourceID="https://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageTopContent" Group="Custom Site Columns" Type="HTML" 
   DisplayName="PageTopContent" Required="FALSE" Sealed="TRUE" 
   RichText="TRUE" RichTextMode="FullHtml"/>
   <Field ID="{764E8753-4A3F-4f79-89F1-3942A6B9171D}" 
   Name="PageBottomContent" 
   SourceID="https://schemas.microsoft.com/sharepoint/v3" 
   StaticName="PageBottomContent" Group="Custom Site Columns" 
   Type="HTML" DisplayName="PageBottomContent" Required="FALSE" 
   Sealed="TRUE" RichText="TRUE" RichTextMode="FullHtml"/>
    <!-- End DC Fields. -->
</Elements>

Section 8b. Feature.xml for adding custom fields

<?xml version="1.0" encoding="utf-8"?>
<Feature  Id="BBCDD530-0159-4a4a-AB0A-54DDA9E05CDE"
          Title="Custom Column Definitions"
          Description="Provides Custom column definitions for a site collection."
          Version="12.0.0.0"
          Hidden="FALSE"
          Scope="Site"
          DefaultResourceFile="core"          
          xmlns="https://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
        <ElementManifest Location="Customfields.xml"/>
    </ElementManifests>
</Feature>

Section 9a. CustomContenttype.xml for adding custom content types

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
    <ContentType ID="0x01010900EAE1B229763B4408940D3ED34CF408BF" 
    Name="Custom Page" Group="Custom Page Content Type" 
    Description="Designed to facilitate the storage of publishing 
    information." Version="0">
        <FieldRefs>
      <FieldRef ID="{CC295F9D-D301-44bb-8929-F56BB9085E59}" Name="PageTopLeftContent"  />
         <FieldRef ID="{1F5EC9F7-97FD-4bee-8D4E-CB7A1B142FF3}" Name="PageBottomLeftContent"  />
         <FieldRef ID="{682FB0A4-4C28-4128-9DE2-FE6B7F9E6D12}" Name="PageTopMiddleContent"  />
         <FieldRef ID="{CC00E18B-9F1C-4732-B600-F83DBCECDD5D}" Name="PageBottomMiddleContent" />
         <FieldRef ID="{EB024A2C-289D-464b-8354-110ACA14F518}" Name="PageTopRightContent"  />
         <FieldRef ID="{39B61F26-FC77-4123-B244-1985DC216DED}" Name="PageBottomRightContent"  />
         <FieldRef ID="{EF1AFA93-78C7-4678-AB64-517D9A2091F2}" Name="PageTopContent"  />
         <FieldRef ID="{764E8753-4A3F-4f79-89F1-3942A6B9171D}" Name="PageBottomContent" />
        </FieldRefs>
    </ContentType>
</Elements>

Section 9b. features.xml for adding the custom content type

<?xml version="1.0" encoding="utf-8"?>
<Feature  Id="CE9ECBE9-6D9D-424a-B92A-5199DB457516"
          Title="Custom Content Type Definitions"
          Description="Provides Custom content type definitions for a site collection."
          Version="12.0.0.0"
          Scope="Site"
          Hidden="FALSE"
          DefaultResourceFile="core"
          xmlns="https://schemas.microsoft.com/sharepoint/">
    <ElementManifests>
        <ElementManifest Location="CustomContentType.xml" />
    </ElementManifests>
   <ActivationDependencies>
      <!-- Installz the site columns that hold Hawaiian data -->
      <ActivationDependency FeatureId="BBCDD530-0159-4a4a-AB0A-54DDA9E05CDE"/>
   </ActivationDependencies>
</Feature>

Adding HTML Content with RichHtmlField Controls

The previous sample layouts used the RichHtmlField control. This field control is one of the most used controls, and lets you add HTML content to the publishing page. This HTML editor field control offers special capabilities such as customized styles, editing constraints, reusable content support, and use of asset pickers to select documents and images to insert into the page's content.

The following code example shows the syntax to use to add a RichHtmlField control to your page layout.

<PublishingWebControls:RichHtmlField id="ArticleAbstract" FieldName="ArticleAbstract" 
          AllowExternalUrls="false" 
          AllowFonts="true" 
          AllowReusableContent="false" 
          AllowHeadings="false"
          AllowHyperlinks="false"
          AllowImages="false"
          AllowLists="false"
          AllowTables="false"
          AllowTextMarkup="false" 
          AllowHTMLSourceEditing="false"
          DisalbeBasicFormattingButtons="false"
          />

Figure 2. Publishing fields

Publishing fields

Table 1. Attributes for publishing fields

Attribute

Description

AllowExternalUrls

Only URLs internal to the current site collection are allowed to be referenced in a link or an image.

AllowFonts

Content may contain Font tags.

AllowReusableContent

Content may contain reusable content fragments stored in a centralized list.

AllowHeadings

Content may contain standing HTML heading tags (for example, H1, H2).

AllowTextMarkup

Content may contain bold, italic, and underlined text.

AllowImages

Content may contain images.

AllowLists

Content may contain numbered or bulleted lists.

AllowTables

Content may contain table-related tags such as <table>, <tr>, and <td>.

AllowHyperlinks

Content may contain links to other URLs.

AllowHtmlSourceEditing

When set to false, the HTML editor is disabled from switching to HTML source editing mode.

DisableBasicFormattingButtons

When set to true, most basic formatting buttons are disabled.

Deploying Master Pages and Page Layouts as Features to a Site Collection

Master pages, page layouts, and custom content types can be created as Features and added to the site collection. Then, they become available in the site collection as with any built-in master page. One can also directly create these pages in the site collection by using SharePoint Designer.

Note

For very detailed steps about how to add your master pages and layouts to a site as a Feature, see How to Create and Store Master Pages on the Server for Use with Site Collections.

Web Content Management Site Performance Optimization

There are few other options which should be taken care of while designing the master pages and page layouts which impact performance. Some of the files which are added to the page payload automatically by Office SharePoint Server include core.js (~250 KB uncompressed, ~57 KB compressed). It is also very important to code custom controls properly and enable features, for example, view state, only if required. I talk in more detail about these in How to Optimize a SharePoint Server 2007 Web Content Management Site for Performance.

Disabling the Presence Indicator

There is a Microsoft Knowledge Base article that explains how to disable the presence indicator in Office SharePoint Server 2007, but this does not work for the released version of Office SharePoint Server. You can comment the function call in the init.js file to disable the ProcessImn() JavaScript function, but this option is not supported and you should avoid disabling the function. Another way to disable the presence indicator is to add your own .js file with an implementation of the ProcessImn() function that does nothing, and then add it to the master page. Be sure to define your ProcessImn() function at the bottom of the page, because the JavaScript code uses the function instance defined later in the script and ignores the earlier definition.

Turning Off Integration with the Microsoft Office System

You can also turn off Office system client integration.

To turn off integration with the Microsoft Office system

  1. Go to Central Administration for the site.

  2. Select Application administration, and then, under Application security, click Authentication providers.

  3. Click Default zone, and then on the Settings page, click No for Enable client integration.

Conclusion

There are many ways to customize and create custom master pages and page layouts that provide a unique user experience. The whole process has been made very easy in Office SharePoint Server 2007. You can now perform extensive user interface customizations with very little effort; however, there are still a few issues to be aware of. There are many approaches to develop master pages and page layouts, and similarly many approaches to deploy them. Mostly these approaches can be used in any combination. Again, the purpose of this article is to increase awareness about the effort required to develop master pages and page layouts and to show the impact on the entire WCM site, so that you can allocate time and give due diligence to this activity while developing a WCM Internet-facing site.

Additional Resources

For more information about how to create a custom master page and page layouts for a WCM site, see the following resources:

About the Author

Avneesh Kaushik is a senior consultant working with Microsoft Global Services India (MGSI) in the IW/Collaboration service line. He has helped design and deploy the Hawaiian Airlines WCM site.