There are several options to choose from when designing a Microsoft Office SharePoint site and – as well as the regular HTML and CSS layout techniques that you might use on any other type of web page – you can harness master pages, page layouts, themes, site templates and site definitions to put your design on SharePoint.
Referring to my first post on Supercharging SharePoint Server, this study site is made up of a number of site collections organised in a hierarchy that reflects the structure of the Youth Achievement Awards. Most of the pages in each of the site collections are derived from page layouts (or content pages) that in turn refer to a single master page at the top level. This master page provides the fixed layout and content that is reflected throughout the site as a whole.
 |
| The Youth Achievement Awards master page on Microsoft Office SharePoint Server |
The layout for this master page was developed using ordinary HTML and CSS, it is a fluid layout – which means it will size to the user’s browser – and has a header with logos, a toolbar and a breadcrumb, and a footer containing other links – the space between the header and footer is where our individual page content will sit. You can initially design the master pages and page layouts away from SharePoint, in fact we developed the HTML and CSS layouts and checked these in all popular browsers long before plumbing them into SharePoint itself.
Page layouts are framework pages that once deployed carry the site's content; this content may include lists of user content, document libraries, and other web parts – used to redefine content or endow the page with additional functionality. User's can easily add their lists, libraries and web parts to one or more web part zones declared in the page layout.
Stepping back to our site design, we originated single column, two-column and three-column layouts for the inside pages and allowed for a corresponding number of web part zones on each page. This approach, in tandem with the master page, allowed us to lay down the arrangement of all site content into just three different types of page on which web parts could be placed.
 |
| 2-column and 3-column layouts with web parts added |
No comments:
Post a Comment