Master Page, Page Layout and Content Types
One of the MOSS
2007 buzzwords is master pages. But what all does that entail? How does the
master page work with the content in the site and how do we do things like add
web part zones and field controls? To aid and benefit SharePoint designers and
those of us assigned to user interface customization, here is a breakdown of
the relationships between master pages, page layouts, controls and content
types. This is not a technical breakdown with sample code, this is just to
explain the relationships between these core concepts in MOSS 2007.
Master Pages
Master pages
are not a new concept or feature unique to SharePoint. Master pages were
introduced with ASP.NET 2.0 as a way to centrally house and control the layout
and design of a web site or application. A single master page file can control
the look and feel of countless pages within a site/application. It is basically
a next generation approach of how to include common content in lieu of frames
or server side includes files.
There is a lot
of documentation already out there about master pages, and much of the
knowledge can easily be utilized for developing and implementing master page
files for SharePoint.
Content Pages
Content pages
is the other half of master pages. Master pages store the layout and design,
while content pages define the content. The content page is bound to a master
page. Together the two create the presentation layer of content for a
site/application.
In SharePoint
content pages are called Page Layouts. But they work similar
to content pages. The master page file is combined with the page layout to
create the presentation layer of content for the SharePoint site.
Master
Page and Page Layout combine to create the rendered page
Master
Page/Content Page Resources
The Components
of a SharePoint Master Page File
The master page
will contain all of the user interface layout code for the site. This includes
CSS, JavaScript and HTML. Examples of what you would put in the master page:
- Header code
including company logo and branding images
- Navigation
- Footer code
including copyright statements and links
- CSS (cascading style
sheet) styles
- Body background
colors, images or styles
- Common JavaScript
functions
The other core
component that is used in a master page file are the Content
Placeholders. A Content Placeholder is just that, a location flagged
as where content will be inserted. The content is stored in the page layouts.
The content placeholders designate where the content from the page layout will
be inserted in the master page. So for example, a simple master page could flow
like this:
- Registry tags,
opening HTML/Body tags
- CSS Styles
- JavaScript Functions
- HTML code for the
header
- Content Placeholder
for the main content of the page
- HTML code for the
footer
- Closing Body/HTML
tags
A Content
Placeholder looks like this:
<asp:ContentPlaceHolder id="MyPlaceholder" runat="server" />
<asp:ContentPlaceHolder id="MyPlaceholder" runat="server" />
Content
Placeholders can be wrapped in HTML code, for example DIV, SPAN or TABLE tags. A
good way to think about it is everywhere you would place content that you would
like to have customized for each page, insert a Content Placeholder.
There are a set
of required Content Placeholders for SharePoint. Without these placeholders,
the site will not work. If you don't want to display all of the placeholders on
your site, you can hide the placeholders by grouping them in a hidden ASP:Panel control,
or individually set each placeholder with a visibility of false (visible="false").
Nesting
and components of a Master Page File
For a full list
of the content placeholders used in SharePoint, refer to the SDK (list to be
included on this site in the future). For the base code including the bare
minimum needed for a SharePoint master page, refer to this article:
The Components
of a Page Layout File
The page layout
contains all of the Content Controls that match the content placeholders from
the master page file. For example, the matching content control from our sample
master page content placeholder from above would look like this:
<asp:Content
ContentPlaceholderID="MyPlaceholder" runat="server">
Insert field controls, web part zones or HTML code here
</asp:Content>
Insert field controls, web part zones or HTML code here
</asp:Content>
Page layout
content should be content that will change from page to page, for example:
- Title, Author,
Byline
- Body Text
With the
exception of the Registry tags, nothing can be outside of a content control in
the page layout file! If you try to wrap HTML or add extra code outside of the
content control, it will break the page.
SharePoint content
is added to the content controls in a page layout in one of two ways, Field
Controls or Web Part Zones.
Field Controls
are content areas that map to columns in the Content Type.
Field control placement is controlled in the page layout file and can't be
moved by the content editor through the web interface. They are ideal for
situations where excerpts of content need to remain in a fixed location on a
site. A field control looks similar to this:
<SharePointWebControls:TextField
FieldName="ArticleByLine" runat="server"/>
Web Part Zones
on the other hand allow content editors to add and move content around on the
page. They work very similar to how they did in SharePoint 2003. The web part
zone is specified in the page layout, and then the content editor can choose to
add, remove or rearrange web parts within the specified zones. A web part zone
looks similar to this:
<WebPartPages:WebPartZone
runat="server" AllowPersonalization="false"
FrameType="TitleBarOnly" ID="MiddleRightZone"
Title="Middle Right Zone"
Orientation="Vertical"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
Nesting
and components of a Page Layout File
Content Types
Content Types
are a new feature/concept of SharePoint 2007. They definitely warrant learning
about and gaining an understanding of. A content type is a collection of
settings that is applied to a particular category of content that can be reused
multiple times. Through content types you can manage metadata and the behavior
of a document or item type in a central, reusable way. Please refer to the
following additional resources for a more in depth explanation of content
types:
- Introduction
to Content Types
- Plan
content types [Office SharePoint Server]
- What
Are Content Types, Anyway?
Columns from a
content type are referenced through the field controls in the page layout. One
content type can be reference by multiple page layouts, but a page layout can
only reference one content type. This allows you to easily change the page
layout of a page in a site without compromising the content since the content
is controlled in the content type. The only restriction is to change the page
layout to another page layout that is based on the same content type as the
original.
Relationship
between Content Types and Page Layouts, shown here wrapped with Master Pages.
Click for a larger view.
A Few More Core Concepts and We Are Done…
Master Page
Inheritance
Master page
files can be applied on a site level, but not on a page level. So a sub site
can have a different master page specified than the parent, or it can inherit
the master page file settings from the parent.
Master
page inheritance among sites and sub sites.
The Pages
Library
When you create
a page on a site, the page is stored in a Pages document library in the content
database. A physical file is not created on the web server. The Page settings
specify a page layout that can be changed to another page layout (that uses the
same content type). Pages can be moved between Page libraries in a site
collection. Each site has its own Pages library. Because the Pages are stored
in a library, they can have version history; check in-check out, publishing and
workflow capabilities.
Pages
library relationships with sites.
The Silo
Approach United
All of the
components that contribute to the rendered SharePoint page is stored in
silos... master page, page layout, page, content type and all the bits in between
that link them together. To connect it all:
- A Page is stored in a Pages library within a
site.
- The Page references
a Content Type that helps
populate the page with data. Content types are stored within a site.
- A Page Layout is applied to
the Page to control what content appears and where through the use of Field Controls and Web Part Zones. This is
specified within the Content
Controls in the Page Layout.
- A Master Page is applied to
the site to wrap on the look and feel and control content placement from
the Page Layout through the use of
Content Placeholders.
A
snapshot of the silos layered together to create the rendered page...