Customizing and Branding Web Content Management-Enabled SharePoint Sites (Part 1 of 3): Understanding Web Content Management and the Default Features

Summary: This article discusses topics that you should understand before you use Microsoft Office SharePoint Server 2007 to create sites that support Web content management (WCM) and gives a general overview of the various artifacts that are available in the product. (11 printed pages)

Patrick Tisseghem, U2U

October 2006

Applies to: Microsoft Office SharePoint Server 2007

Contents

• WCM Enhancements in Windows SharePoint Services

• Understanding the Page Model

• Customizing a Master Page

• Creating New Page Layouts

• Conclusion

• About the Author

• Additional Resources

WCM Enhancements in Windows SharePoint Services

Windows SharePoint Services 3.0 introduces a number of major improvements to the way you store and manage information and documents in lists and document libraries. Let us first review these improvements because they form the basis on which a lot of the WCM features are relying. Here is the list of enhancements discussed:

• General enhancements

• Site columns

• Extensible field types

• Content types

General Enhancements

Versioning of content stored in lists and document libraries has changed significantly in Windows SharePoint Services 3.0. Lists support versioning now, and document libraries let you differentiate between minor (draft) and major (published) versions (Figure 1). The concept of minor and major versions is important in any Web content management system. Minor versions of pages are not exposed to everybody—only to the content authors and visitors of the site with the required permission level. The step from a minor version to a major version is, in most cases, the result of a workflow, but an authorized user can also decide to manually publish the minor version as a major version. Major versions of pages are available to every visitor of the site.

Figure 1. Version history page, which shows all version information for a document or list item

Windows SharePoint Services 3.0 also introduces a new level for securing your information: per-item security. If you create a list or document library, by default the new item inherits the permissions of the parent. You can override that inheritance and define the access control for the list or document library. In Windows SharePoint Services 3.0 lists and document libraries, the access control list is passed to every item or document stored, but again you have the option to continue with that scenario or to override the inheritance and define your own security settings for the individual item or document. In a WCM scenario, this means that you can now protect individual pages because, as I detail later in this article, pages are stored in a normal document library—the Pages library. In a Windows SharePoint Services 3.0 site, all of the content is also security trimmed. Pages that you are not allowed to see do not appear in the navigation controls.

Site Columns

When you are designing the containers for storing content in Windows SharePoint Services, aite columns offer you reusability. You can define a column or field at the level of the site collection and then associate this column with any of the lists or libraries you have or will make available on the site (Figure 2). Changes to the site column are, by default, pushed forward to any container that uses the column. This behavior is, however, a decision that the administrator can turn off per site column.

Figure 2. Adding site columns

Extensible Field Types

In Windows SharePoint Services, Web designers have a closed set of field types they can use to define the metadata for a list or library. Windows SharePoint Services 3.0 introduces new types but also lets developers extend that set of types with custom types. Imagine that you need to embed a movie or display GPS coordinates in a page. There are no default field types to work with. You must create your own custom field type definition and deploy it with custom controls that handle visualization and editing of the data for those types of content. This approach is useful when you frequently need specific validation or representation of content on a page. Extensible field types is a topic discussed in Part 2 of this series.

Content Types

Windows SharePoint Services 3.0 introduces content types, which provide a framework for defining your types of content at the level of the site collection. You can then associate these definitions with any of the lists and libraries in the site collection (Figure 3). A definition of a content type can range from something simple to highly complex content. Simple content could be a collection of dedicated metadata and a template you want to associate with the type of content. A marketing report is one example. Complex content can have custom workflows, event handlers, information management policies, and even customized Microsoft Office InfoPath forms that are used by the 2007 Microsoft Office system smart clients—for example, Microsoft Office Word 2007—to visualize the content and let you modify the metadata associated with the content type. An InfoPath template for capturing timesheet information that is processed automatically in Windows SharePoint Services is one example.

Figure 3. A document library enabled with multiple content types

Content types are the basis for the page layouts discussed later in this article. As a designer of a WCM system, one of your tasks is to create one or more page layouts or templates for your content authors. The first step in this process is the definition of a content type.

Understanding the Page Model

Delivering a publishing infrastructure that lets IT and the developers within your organization avoid the whole process of content creation and management requires a highly dynamic page model. This was the core of the whole Web content management story that was delivered with Microsoft Content Management Server (MCMS) and that is now integrated in Office SharePoint Server 2007.

The main ingredients are the following:

• Master pages determine the look and feel of your site. The master page also exposes the navigation controls that visitors of the site use.

• Page layouts—known as templates in MCMS—define the actual content per page, how that content is stored and made available to both content authors and visitors of the site, and when and under what policies the content is published.

• Field controls—also known as placeholders in MCMS—are controls on a page that have two purposes: They display the content to the visitor of the site, and they offer an edit-time canvas for authors. A title of a press release, for example, can be rendered as a heading 1 by a field control for a visitor of the site, and it can make the title editable via a text box for a content author.

Figure 4 displays the relation between a master page (BlueBand.master) and the page layout (WelcomeSplash.aspx) for a publishing portal site. Both are used to render the home page (default.aspx) of the site in your browser. This is the home page of a site based on the Publishing Portal site definition, a new type of site you can build when you have Office SharePoint Server 2007 installed in your server farm.

Figure 4. A page based on a master page, combined with a content page formatted by rules defined in a page layout file

Master Pages

In a typical site, some elements are shared across most, if not all, of the pages in the site. This is true for both highly branded sites (such as an outward-facing customer portal) and highly controlled sites (such as a corporate intranet portal site). Regardless of the type of site, master pages contain controls that are responsible for rendering these shared elements, which include:

• Top and left navigation menus

• Logos

• Search fields

• Page editing controls

• Logon controls

• Any other custom controls you create

Master pages also contain cascading style sheet (CSS) references that define the chrome, or overall look and feel of the page. Typically, many (if not all) of the pages in your site collection use the same master page to maintain a consistent brand throughout the site collection. In some scenarios, however, a single site collection employs multiple master pages for different areas of the collection. For example, a company's extranet portal might offer a product support area with an appearance that differs from the rest of the site. In this scenario, it may be wise to create a master page for support pages to differentiate them from the rest of the pages in the site collection.

Master pages are stored in the master page gallery, a normal document library at the level of your site collection. A master page gallery is automatically available when you install Office SharePoint Server 2007 and create a site collection. It provides all the functionality of a typical Windows SharePoint Services document library, such as versioning, page creation, check-in/check-out control, and workflow. Every site in the site collection displays a link to its own master page gallery in Site Settings. However, the master page galleries at the site levels are ignored for the page model.

Two types of master pages are stored in the master page gallery, each identified by a unique icon:

• System master pages define the appearance of form, view, and Web Part Pages. For example, compare the page for a document library (such as the master page gallery) with the home page of your Internet site.

• Site master pages define the look and feel of the pages published within the site. These pages, like the home page, are the ones your visitors see and therefore are more important to customize than the system master pages.

Page Layouts

Although master pages control the overall branding of your site, the page layout controls what content is displayed by a page and how that content is laid out. Page layouts are .aspx files stored in the master page gallery, containing field controls that are responsible for rendering that page's content. Each field control can pull data from one or more columns defined by that layout's content type.

Field Controls

Field controls are responsible for rendering the content inside your page layout. Examples are a text box, a rich HTML editor, or one of the custom field controls you have created. Page layouts can also contain more than field controls—they can contain Web Parts. Web Parts typically display content that is not under the control of the content author. An example is a Web Part that displays the list of related products for a product that the content author describes via the field controls.

Customizing a Master Page

All of the publishing pages within a site are automatically tied to a master page. When you create a subsite, the master page definition is inherited from the parent site, but authorized users can override that inheritance and associate a new master page stored in the master page gallery with the new subsite. As an administrator you can find that definition on the Site Master Page Settings page (Figure 5). You can browse to this page by opening the Site Settings page of your site (by using the Site Actions menu); in the Look and Feel section, you find the Master Page link.

Figure 5. Specifying the master page your site uses

On the page, you can review the current site master page and system master page. Switching to another master page is easy: Simply use the drop-down list that is populated with the names of all master pages that are stored in the master page gallery at the site collection level. If you make a change, you can decide to push your change to any of your subsites where the administrator decided not to override inheritance.

Part 2 of this series guides you through the steps of creating a brand new master page. For this article, let me show you how you can customize an existing master page. The goal of our customization is to add a copyright statement at the bottom of every page in the top-level site.

To modify the sample master page

1. On the Site Master Page Settings page, verify that the master page to edit is named BlueBand.master.

2. In Microsoft Office SharePoint Designer, click File and then click Open. Select your site, and click OK. You might want to disable the Contributor Settings by using the Site menu in SharePoint Designer.

   You can also open the master page directly from the master page gallery by using the Edit in Microsoft Office SharePoint Designer command in the drop-down list for BlueBand.master.

3. Navigate to the master page gallery, which is located under the _catalog node in the Folder List pane (Figure 6).

   Figure 6. Master page gallery in SharePoint Designer

   

4. Double-click BlueBand.master and confirm the check-out request.

   Notice how the master page is structured. Various SharePoint controls are responsible for the navigation, the rendering of the title of the site, the logo, and much more.

5. In the middle of the file, locate an <asp:ContentPlaceHolder> element whose ID is "PlaceHolderMain". That is where the content page is inserted by Windows SharePoint Services at run time.

   Note

   You can find a more detailed discussion of the skeleton of a master page in Part 2 of this series.

6. Switch to Code view and insert a new table row under the row that contains PlaceHolderMain (Figure 7).

   Figure 7. Modifying the master page by adding a copyright statement

   

7. Switch back to Design view and select the CSS class for your new table cell.

8. Use the Apply Styles pane to select one of the styles from the CSS files linked with the master page (Figure 8).

   Figure 8. Applying a style to a master page element

   

9. Click the Web Site tab, right-click the BlueBand.master page, and check in the page. You need to decide whether the revised page is a minor version or a major version. In this case, choose a major version and confirm the request to start the content approval.

   The browser displays the master page gallery again.

   Note

   TopNavFlyouts.master is currently stored with the approval status set to pending. Anybody with approver permissions can now approve the change you made.

10. You can see your change affecting every page on a site that uses TopNavFlyouts.master, such as is shown in Figure 9.

    Figure 9. The modified pages with the copyright statement at the bottom

    

Creating New Page Layouts

A good content management system should provide a rich and flexible infrastructure for creating templates (page layouts). These page layouts are the basis for the pages published on WCM-enabled SharePoint sites. Office SharePoint Server 2007 makes creating page layouts an easy process by using the storage enhancements discussed at the start of the article.

A number of page layouts are readily available for content authors to use. But let me guide you through the steps of creating your own custom page layout—one for a page that contains a job posting.

The first step is the creation of a content type. You can create a content type at the level of the site collection if you open the Site Settings administration page from your top-level site. From here, you can navigate to the Site Content Type Gallery (Figure 10). You can create the content type in the Site Content Type Gallery of one of your subsites and scope it to that site and all of the subsites.

Figure 10. Site content type gallery, which contains all content types that are available in a site collection

Notice that the gallery is already populated with content types. You can add to this list by clicking Create in the toolbar.

The first section in the New Site Content Type page specifies the name, description, and parent of the new content type. Each content type is based on a content type. This lineage creates a hierarchy that connects to the top-level System content type. You can follow this hierarchy if you go to a page that details a content type. The top section contains a link to the parent content type (Figure 11). Clicking the link displays the page defining the parent content type. You can repeat the process all the way to the top-level content type.

Figure 11. Location of the link to the parent content type

If you select Page Layout Content Types on the New Site Content Type page, you can see in the Parent Content Type list all of the content types that are the bases for the page layouts included with Office SharePoint Server 2007. If you select Publishing Content Types, you can see the base content types such as Page and Page Layout. For this example, select the first one, Page (Figure 12).

Figure 12. Creating your own Job Postings content type

You can also create your own custom group so that you can differentiate your work from the content types delivered with Office SharePoint Server 2007.

In the next page you define the details for your content type. The custom fields or columns you define here are important because later they become field controls that you can add to a page layout by using SharePoint Designer.

For the job posting example, let's add three columns that capture the information we want to make available on the page.

To add columns to the content type

1. The first column, the job title field, is already part of the site columns at the level of the site collection. Add the column by clicking Add from existing site columns.

2. Because the two other fields are not available as site columns, you must create them. Click Add from new site column.

3. For the second column, type the name Job Description and select the type Full HTML content with formatting and constraints for publishing.

4. For the third column, type the name Job Prerequisites and select the type Choice.

   For choice values, add, for example, SharePoint Development, ASP.NET Development, C#, Visual Basic 2005, HTML, and QuickBasic. You might want to let the content author select multiple options by selecting the Checkboxes (allow multiple selections) display option.

Now that you have defined what type of content you want to publish, it is time to create the page layout or template to be used by the content authors to create the job posting pages. Page layouts are created from the master page gallery. You can access the master page gallery via the Site Settings page at the level of your top-level site. Click the Master Pages and Page Layouts link in the Galleries group.

Remember that the content type you created is your definition of the content available with this type of page. Therefore, ensure that you select the correct content type at the top of the New Page Layout page. On this page you also need to enter the name of the file, the title of the page, and (optionally) a description.

You can also create page layouts in SharePoint Designer.

To create a page layout in SharePoint Designer

1. In SharePoint Designer, open the site.

2. Expand the _catalogs node, and right-click the masterpage (Master Page Gallery) node.

3. Point to New and click SharePoint Content.

4. In the dialog box, click SharePoint Publishing and select Page Layout.

5. Use the drop-down lists to select your content type group and then the content type that you created in the previous steps.

6. Fill in the name and title of your new page layout.

In both cases—creating the page layout in the browser or in SharePoint Designer—the controls that enable content authors to communicate with the content are not yet in place. Your next task is to use SharePoint Designer to place the field controls on the page layout.

From the master page gallery, edit the Job Posting.aspx file. Notice how the Toolbox displays the list of content fields that you can now drag and drop in the PlaceHolderMain section (Figure 13). As a designer, you determine the appearance of the page. You can also tweak the controls by using the Properties box.

Figure 13. Field controls based on the fields from the associated content type

To make the page layout available, you must save, check in, and get the file approved. You can perform these actions from within the master page gallery.

Now the content authors can use the custom page layout. Depending on the scope and the permissions, they can use the page layout in all of the sites or are restricted to only one. Let's assume the role of the content author and use the newly designed page layout.

To create a page based on the Job Posting page layout

1. In the browser, navigate to a site in your site collection or the site to which you have scoped the page layout.

2. Click Site Actions and click Create Page.

3. Provide a name and an optional description, and then select the Job Posting page layout. Click Create.

   The new page displays the field controls that you placed on the page layout (Figure 14).

   Figure 14. Page with the field controls you placed by using SharePoint Designer

   

4. To make the page available, check in the page and submit it for approval.

   A user who is a member of the Approvers group can then approve the page and change it to a published page (Figure 15) accessible by everyone visiting the site. (This assumes workflow is enabled. If not, anyone with approval rights can approve the job.)

   Figure15. Approved page as displayed to visitors of the site

   

Conclusion

This article (the first in a series of three) gave you an overview of the rich WCM infrastructure you receive with Office SharePoint Server 2007. I discussed the artifacts that are delivered with Windows SharePoint Services that make it all happen and the various features you can use to prepare a site in which your content authors can start publishing pages. In the second article (Customizing and Branding Web Content Management-Enabled SharePoint Sites (Part 2 of 3): Extending WCM) I go deeper into this subject and approach the content with a developer focus.

About the Author

Patrick Tisseghem (MVP, Microsoft Office SharePoint Portal Server) is managing partner at U2U, a Microsoft .NET training and services company based in Brussels, Belgium. He works most of his time as a contracted trainer for Microsoft delivering presentations, workshops, and seminars covering most of the information worker products and technologies. Patrick is author of a number of articles and white papers on SharePoint Portal Server development aspects (published on MSDN) and is currently researching and writing a book about Microsoft Office SharePoint Server 2007 for Microsoft Press.

This paper was developed in partnership with A23 Consulting.

Additional Resources

For more information, see the following resources:

• Customizing and Branding Web Content Management-Enabled SharePoint Sites (Part 2 of 3): Extending WCM

• Customizing and Branding Web Content Management-Enabled SharePoint Sites (Part 3 of 3): Creating and Configuring WCM-Enabled Sites

• Microsoft Office SharePoint Server 2007 SDK

• Microsoft Windows SharePoint Services 3.0 SDK

• Microsoft Office Developer Center: SharePoint Server 2007 Developer Portal

• Microsoft Windows SharePoint Services Developer Center