Building Block: Pages and User Interface

SharePoint 2010

Last modified: April 12, 2010

Applies to: SharePoint Foundation 2010

The user interface (UI) in Microsoft SharePoint Foundation consists of many different parts. The basic part of the UI is a page. There are two primary types of pages in SharePoint Foundation. They are site pages and application pages. Site and application pages both inherit their layout from the same master page. In addition to the page types, there are other parts of the UI including the Server ribbon, Web Parts, Cascading Style Sheets (CSS), and themes.

There are two primary pages types in SharePoint Foundation. These are site pages and application pages. Site pages are used to display information and can be customized by end users. Application pages perform a specific function within SharePoint Foundation.

Site Pages

Site pages are created, edited, and customized by end users. They are primarily used for the content in a site. Site pages come in two types—a standard page and a Web Parts page. A standard page contains text, images, Web Parts, and other elements. A Web Parts page contains Web Parts in Web Part zones. They have a predefined layout that uses Web Part zones. Both types of site pages are edited by using a Web browser or Microsoft SharePoint Designer. Site pages are customized by using Web Parts, in-browser editing, SharePoint Designer and themes. Custom master pages, ECMAScript (JavaScript, JScript), and CSS can be applied to site pages for more advanced customization scenarios. For more information about site pages, see SharePoint Page Types.

Application Pages

Application pages perform a specific function within SharePoint Foundation. Application pages are deployed across the server farm and are stored in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS directory on the front-end Web server. They are attached to the site master page in order to create a consistent user interface. For more information about application pages, see SharePoint Page Types.

Master Pages

Master pages define a common structure for site and application pages in SharePoint Foundation. When a page is requested, the master page and content page are combined to produce a single page. That page contains both the site-wide elements of the UI from the master page combined with the page-specific content from the content page. By using a master page, all content and application pages share the same page structure and have a consistent look and feel. SharePoint Foundation uses v4.master as its primary master page. All content and application pages use v4.master. When you install SharePoint Foundation, the master pages are stored in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\GLOBAL directory. For more information about master pages, see Master Pages.

The Server ribbon is a UI element that presents a consistent command surface that you can use to interact with pages and objects in SharePoint Foundation. The ribbon is discussed in a separate building block topic. For information about the ribbon, see Building Block: Server Ribbon.

Web Parts present a reusable, modular UI inside of pages in SharePoint Foundation. Web Parts are discussed in a separate building block topic. For information about Web Parts, see Building Block: Web Parts.

SharePoint Foundation includes support for applying a theme to a site. You can use themes to apply colors and fonts to UI elements in a Web site. The themes that are used in SharePoint Foundation use the same file extension and structure that theme (THMX) files use in Microsoft Office 2010 client applications, such as Microsoft PowerPoint 2010. CSS files can be marked up with variables that are unique to themes but that are translated into real values in the CSS when a theme is applied to the site. These variables are stored as comments in the CSS file, so they are completely supported by Web standards. Creating a new theme is as simple as defining new values for those variables. Then CSS files that have themes applied are downloaded by the browser.

Cascading Style Sheets (CSS) consist of a format definition schema that is used to define the formatting of a document that is written in a markup language such as HTML, XHTML and XML. The purpose of CSS is to enable the separation of content from presentation, including attributes such as the colors, fonts, and other aspects of document layout. The rules that determine the styles and formatting that are applied to pages in SharePoint Foundation are defined in CSS files. The CSS files are stored locally on each front-end Web server in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\LocaleID\STYLES\Themable\ directory, where LocaleID is the locale identifier (LCID) for the installation of SharePoint Foundation. The LCID for English - United States is 1033. For more information about the classes that are defined in the default CSS, see Cascading Style Sheets Class Usage in SharePoint Foundation.