An HTML Programmer’s Guide to SharePoint Customization

This article provides the information you need to get started creating your own custom-branded SharePoint designs—a basic understanding of the technologies behind SharePoint, the HTML architecture SharePoint uses, and some of the issues that can trip you up, such as browser compatibility, accessibility, and so forth.

As a quick overview, Microsoft Office SharePoint Server (MOSS 2007) was released in early 2007. MOSS 2007 serves as a single replacement for two earlier products: SharePoint Portal Server (SPS 2003), and Microsoft Content Management Server (MCMS 2002). Like those previous versions, MOSS 2007 runs on top of and builds on a tool called Windows SharePoint Services (WSS 3.0), which is a free add-on to Windows Server and forms the basis of SharePoint. It is possible to run WSS without MOSS 2007, but the opposite is not true. All SharePoint products run on the ASP.NET 2.0 framework. This is important because MOSS uses a lot of features of the new framework which you'll need to understand for customization, particularly the use of master pages.

Understanding the HTML Architecture

The first thing to realize when developing for SharePoint is that nearly everything is stored in the database, not on the file system. In many cases, this includes all the content on a page, as well as all the HTML markup, CSS styles, and JavaScript code that format and activate the content. You won't be able to look into the file structure to find a page you want to edit or to view the code on a page. Instead, you'll find all the files you may want to customize in libraries, accessible through the SharePoint web interface. While it is possible to create a custom site definition that pulls pages from the file system, doing that isn't recommended for first-time SharePoint programmers.

Figure 1. SharePoint HTML Architecture: The data sources feed content into content placeholders placed into specific page layouts, each of which inherits common layout features from a master page.

A basic SharePoint page pulls data (HTML) from at least three distinct sources. The three sources you'll be most concerned with are:

1. Content areas (including lists, web part zones, etc.)
2. The page layout
3. The master page.

The diagram below shows how the three sources fit together:

You can think of each source of data as a puzzle piece that fits into its parent's HTML. The content areas fit into openings you've placed in the page layout and the page layout fits into openings you've placed in the master page. The data for the content areas is usually inserted by your end users—users who are not developers. HTML designers are usually responsible for master page development and page layouts.

The next section describes the code that allows your master page, page layouts, and user content to interact. After that, I'll show you how to actually get that code onto your pages.