Master Pages
Typical modern day User Interface design of
web sites calls for a consistent look and feel throughout all pages in
the web site. Before SharePoint and WCM, creation and management of UI
consistency across multiple pages was a painful experience—each page
included the same cut and pasted markup for the design, and the only
difference between one page and another was the main body content of
each page. As the number of pages in the site grew, the tasks to
maintain a consistent look and feel across them became increasingly
more difficult. Then came the frightful day on which management
requested a new UI design for the site; this involved editing every
single page on the site and making the same design changes—a nontrivial
task. Fortunately, ASP.NET 2.0, and SharePoint 2007 provided us with
master pages.
Think of a master page as the skeleton of any
page in a web site, containing HTML markup for common areas of all
pages and placeholders for the areas that change from page to page.
Common areas of a master page might include the page header and footer,
top navigation, and left navigation, because these areas do not change
(not much anyway) from one page instance to another. Using a master
page, a site UI designer has to define the HTML and CSS markup for
common page areas in only one place. Should the UI design change, then
only the master page requires change.
To use a real-world example, a master page is
like the framework of your house—the framework defines the structure of
your house, where the rooms reside and the window and door locations,
and includes fixed structure elements defined by the builder. The
framework for every house in your neighborhood might be identical, but
the interior decor, color, and style of doors and windows may differ
with each property.
SharePoint 2013 includes several Master Page
files, each serving a different purpose. SharePoint stores all Master
Page files in the Master Page Gallery, a special document library that
resides at the root of every site collection. Master Page files consist
of HTML markup, with embedded ASP.NET controls, CSS styling, and
placeholders for what will be actual content markup later—provided by
page layouts (more on these in a moment). The main master page for user
pages of a SharePoint site is the v5.master Master Page. All SharePoint master pages have the .master
extension, and if you edit one, either by using SharePoint Designer or
by downloading the file and opening it in Notepad, you will see
familiar markup like that of a typical ASP.NET (ASPX) page.
By default, the out-of-the-box SharePoint 2013 Publishing Site uses two master pages (for most pages): v5.master and Application.master.
The former defines the common elements for viewable publishing pages
and the latter defines the common elements for administration pages.
Typically, when designing a brand for a SharePoint publishing site, you
would create a custom master page for publishing pages, with the v5.master file as a starting template.
Note It
is generally not a good idea to edit the v5.master and other stock
master pages directly—always make a copy with a different name and
assign your site the new custom master page.
With the theory on master pages covered, I
shall now walk you through the steps involved in customizing a
publishing site, using a renamed copy of the v5.master page file.
To illustrate the common areas typically defined in a SharePoint master page, Figure 5
shows the header and left navigation areas in color and the page
content—provided by a page layout—in black and white and blurred.
Page Layouts
Page layouts are template files, which map
page instance content into HTML markup for rendered pages. ASP.NET 2.0
provided pages (ASPX files) and master pages (master files), and
combined they rendered a complete HTML page, including content.
SharePoint publishing, in addition to the same model as ASP.NET,
abstracts the content from the ASPX page and stores this information as
metadata in a pages library list item.
So, if the master page is the presentation of
common page elements, and SharePoint abstracts page content data into
list metadata columns, then what is the page layout? Simply put, a page
layout is an ASPX file that lives in the Master Page Gallery and maps
content column data to HTML markup.
Similar to how I illustrated master page elements in Figure 5, Figure 6 shows the page layout presentation areas in color and the common master page elements blurred out and in black and white.
Page layouts contain HTML markup, CSS,
JavaScript, etc., similar to master pages, but in addition a SharePoint
page layout associates with a publishing page content type and includes
mapping of site columns in the markup. For example, a press release
page might be represented with a content type, which consists of
publication data, abstract text, header image, and main press release
article text. To render press release pages in a SharePoint publishing
site, you would create a page layout for all press releases and
associate the press release content type with the page layout. The page
layout will contain ASP.NET control references for each site column
(field) in the associated content type that you wish to display as part
of the rendered page.
Like master pages, page layouts reside in the Master Page Gallery at the root of the publishing site collection. Figure 7
shows some example HTML/ASP.NET markup from a page layout. Notice the
presence of field value controls, which map specific site columns from
the associated content type to the presentation within the page layout.
