MOSS 2007 Design Component Relationships and Diagrams

This article refers to Microsoft Office SharePoint Server 2007 (MOSS
2007) Beta 2 Tech Refresh.   Details are subject to change in the RTM version.

One of the MOSS 2007 buzzwords is master pages. But what all does that entail?
How does the master page work with the content in the site and how do we do
things like add web part zones and field controls? To aid and benefit SharePoint
designers and those of us assigned to user interface customization, here is a
break down of the relationships between master pages, page layouts, controls and
content types. This is not a technical breakdown with sample code, this is just
to explain the relationships between these core concepts in MOSS 2007.

Master Pages

Master pages are not a new concept or feature unique to SharePoint. Master pages
were introduced with ASP.NET 2.0 as a way to centrally house and control the
layout and design of a web site or application. A single master page file can
control the look and feel of countless pages within a site/application. It is
basically a next generation approach of how to include common content in lieu of
frames or server side include files.

There is a lot of documentation already out there about master pages, and much
of the knowledge can easily be utilized for developing and implementing master
page files for SharePoint.

Content Pages

Content pages is the other half of master pages. Master pages store the layout
and design, while content pages define the content. The content page is bound to
a master page. Together the two create the presentation layer of content for a
site/application.

In SharePoint content pages are called Page Layouts. But they work similar to
content pages. The master page file is combined with the page layout to create
the presentation layer of content for the SharePoint site.

Master Page and Page Layout combine to create the rendered page
Master Page and Page Layout Create the Rendered Page

Master Page/Content Page Resources

The Components of a SharePoint Master Page File

The master page will contain all of the user interface layout code for the site.
This includes CSS, JavaScript and HTML. Examples of what you would put in the
master page:

  • Header code including company logo and branding images
  • Navigation
  • Footer code including copyright statements and links
  • CSS (cascading style sheet) styles
  • Body background colors, images or styles
  • Common JavaScript functions

The other core component that is used in a master page file are the Content
Placeholders
. A Content Placeholder is just that, a location flagged as where
content will be inserted. The content is stored in the page layouts. The content
placeholders designate where the content from the page layout will be inserted
in the master page. So for example, a simple master page could flow like this:

  1. Registry tags, opening HTML/Body tags
  2. CSS Styles
  3. JavaScript Functions
  4. HTML code for the header
  5. Content Placeholder for the main content of the page
  6. HTML code for the footer
  7. Closing Body/HTML tags

A Content Placeholder looks like this:
<asp:ContentPlaceHolder id=”MyPlaceholder” runat=”server” />

Content Placeholders can be wrapped in HTML code, for example
DIV, SPAN or
TABLE
tags. A good way to think about it is everywhere you would place content that
you would like to have customized for each page, insert a Content Placeholder.

There are a set of required Content Placeholders for SharePoint. Without these
placeholders, the site will not work. If you don’t want to display all of the
placeholders on your site, you can hide the placeholders by grouping them in a
hidden ASP:Panel control, or individually set each placeholder with a visibility
of false (visible=”false”).

Nesting and components of a Master Page File
Components of a Master Page file

For a full list of the content placeholders used in SharePoint, refer to the SDK
(list to be included on this site in the future). For the base code including
the bare minimum needed for a SharePoint master page, refer to this article:

  • How to: Create a Minimal Master Page

    The Components of a Page Layout File

    The page layout contains all of the Content Controls that match the content
    placeholders from the master page file. For example, the matching content
    control from our sample master page content placeholder from above would look
    like this:

    <asp:Content ContentPlaceholderID=”MyPlaceholder” runat=”server”>
    Insert field controls, web part zones or HTML code here

    </asp:Content>

    Page layout content should be content that will change from page to page, for
    example:

    • Title, Author, Byline
    • Body Text

    With the exception of the Registry tags, nothing can be outside of a content
    control in the page layout file! If you try to wrap HTML or add extra code
    outside of the content control, it will break the page.

    SharePoint content is added to the content controls in a page layout in one of
    two ways, Field Controls or Web Part Zones.

    Field Controls are content areas that map to columns in the Content Type. Field
    control placement is controlled in the page layout file and can’t be moved by
    the content editor through the web interface. They are ideal for situations
    where excerpts of content need to remain in a fixed location on a site. A field
    control looks similar to this:

    <SharePointWebControls:TextField FieldName=”ArticleByLine” runat=”server”/>

    Web Part Zones on the other hand allow content editors to add and move content
    around on the page. They work very similar to how they did in SharePoint 2003.
    The web part zone is specified in the page layout, and then the content editor
    can choose to add, remove or rearrange web parts within the specified zones. A
    web part zone looks similar to this:

    <WebPartPages:WebPartZone runat=”server” AllowPersonalization=”false” FrameType=”TitleBarOnly”
    ID=”MiddleRightZone” Title=”Middle Right Zone” Orientation=”Vertical”><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

    Nesting and components of a Page Layout File
    Components of a Page Layout File

    Content Types

    Content Types are a new feature/concept of SharePoint 2007. They definitely
    warrant learning about and gaining an understanding of. A content type is a
    collection of settings that is applied to a particular category of content that
    can be reused multiple times. Through content types you can manage metadata and
    the behavior of a document or item type in a central, reusable way. Please refer
    to the following additional resources for a more in depth explanation of content
    types:

    Columns from a content type are referenced through the field controls in the
    page layout. One content type can be reference by multiple page layouts, but a
    page layout can only reference one content type. This allows you to easily
    change the page layout of a page in a site without compromising the content
    since the content is controlled in the content type. The only restriction is to
    change the page layout to another page layout that is based on the same content
    type as the original.

    Relationship between Content Types and Page Layouts, shown here wrapped with Master Pages. Click for a larger view.

    A Few More Core Concepts and We Are Done…

    Master Page Inheritance

    Master page files can be applied on a site level, but not on a page level. So a
    sub site can have a different master page specified than the parent, or it can
    inherit the master page file settings from the parent.

    Master page inheritance among sites and sub sites.
    Master page inheritance

    The Pages Library

    When you create a page on a site, the page is stored in a Pages document library
    in the content database. A physical file is not created on the web server. The
    Page settings specify a page layout that can be changed to another page layout
    (that uses the same content type). Pages can be moved between Page libraries in
    a site collection. Each site has it’s own Pages library. Because the Pages are stored in a library, they can have
    version history, check in-check out, publishing and workflow capabilities.

    Pages library relationships with sites.
    Pages Library

    The Silo Approach United

    All of the components that contribute to the rendered SharePoint page is
    stored in silos… master page, page layout, page, content type and all the bits
    in between that link them together. To connect it all:

    • A Page is stored in a Pages library
      within a site.
    • The Page references a Content Type that helps populate
      the page with data.
      Content types are stored within a site.
    • A Page Layout is applied to the Page to control what content appears and where
      through the use of Field Controls and Web Part Zones. This is specified within the
      Content Controls in the Page Layout.
    • A Master Page is applied to the site to wrap on the look and feel and control
      content placement from the Page Layout through the use of Content Placeholders.

    A snapshot of the silos layered together to create the rendered page…
    Pages Library

41 thoughts on “MOSS 2007 Design Component Relationships and Diagrams”

  1. Great article….Really good introduction to sharepoint components. Could I use your article for for some internal thingy?

  2. Brilliant job! Heather is my all time favorite on Share Point.Thanks for going all the trouble to create such nice pictures to simplify the concept.

  3. hi,I am new to share point, but i understood each and everything in this article…. simply excellent article…

  4. Dont know whether you can help but we are trying to create a site ( a sub site) from a web service and whilst we can do this within the same server we are unable to do it where sharepoint is on a separate server. In fact we get I/O type errors or application not known errors just trying to access sharepoint. We are using Sharepoint MOSS 2007. Is there something peculiar with web services and sharepoint and can you point me at nay references?Thanks for any helpPeter

  5. Great information! I’m hoping you know this one off the top of your head. I’m looking for information on the hierarchy between master pages, page layouts and css when predicating style on a page. Specifically, I need to know which of the three overrides the others when setting style.Thanks for your help.Rochelle

  6. I am trying to use Master Pges in a Web App in the _layouts directory. It seems to work if I access the content page from http://siteroot/_layouts/webapp/form.aspx, but will not work from another site like http://siteroot/sites/site/_layouts/webapp/webform.aspx The web app itself works fine when called from any site, but I was tyring to implement master pages so I could style the web app as needed. I am starting with a really simple master page, just a background color. Any thoughts?

  7. Awesome! I spent the last 2 days reading books and google hits, but this article made it so much easier to understand and only took 1/2 to read.Thanks!

  8. The best and simplest article I found.Great explanation about basic concepts.It gives me a jump start to learn the Share Point. “A Picture’s Worth a Thousand Words” – true for this article.Thanks a lot. Really very good effort.

  9. I have one site collection (collaboration portal) with several team sites under it. I copied core.css, modified it, and applied it as an alternate CSS on the portal site settings. This worked great for everything except the MySite area (which doesn’t appear to be in the structure although it’s in the same web app). I can’t get MySite to inherit from the portal and there is no MasterPage item in the _layouts/settings.aspx. Any thoughts?

  10. so can you you assign different CSS styles to different content placeholders? What about at the web part zone level? Let say for instance I have a standard 3 column layout and in the center I want all the content to look a certain way but the left right columns to look differently (maybe with visible boxes around content or a backround color in the title/header area). Where/how does this happen? Do I have to customize each web part I drop in or can they inherit from a common place? So in other words, if I drop in a link list to the center area and a link list in the right column they will appears differently.

  11. Great article.You write that it is possible to change a Layout for a page to another Layout, as long as the Layout is based on the same Content Type. But is it possible to change the Content Type of Layout to another Content Type?The reason for this is because I’m doing a migration from MCMS 2002, and I want to do some clean up in the Content Types afterwards.

  12. Thanx! It seems you have a talent for making the complex simple. Thank you for your excellent blog, I use it all the time (Especially the post with the styling overview of moss-styles, it’s REALLY a helpfull tool!Regards, NileZ

  13. Which aspect of master pages do we have to learn about to make our site icon — the one that WSS/MOSS allows us to put in Site Settings | Look and Feel | Title, Description, and Icon — clickable and link back to the home page of the main site??Thank you, Tom

  14. Heather,Very nice, well written breakdown of Master Pages and the relationship between all related components. I really benefited from much of your articles.Thanks,John – V3O Productions

  15. where is the actual data stored for each of the instances of the page layout you create?Is there a simple approach to getting the fields on the page layout to come from a list and then have a page for each item in a list that diaplays that item’s details?

  16. Hi,It’s really very good article on SharePoint components. I’m new to sharepoint and this article really helped me a lot in understanding the realtionship between MOSS 2007 design components

  17. Hello Heather,This is a very good article. The concepts are explained in a simple and clear manner. I thank you very much.Best Regards,Babu

  18. first off, it is an excellent article for newbies like me to learn about sharepoint masterpages! i really can’t thank you enough for this! i am trying to build a custom aspx page on my sharepoint site which only inherits the default CSS and js files but not the header, search, navigation etc. from the site masterpage. is that possible? The rest of the site should inherit the original masterpage with everything, actually this paritcular page is going to be a popup page containing a single list view webpart, but nothing else. but since i want it to look consistent with rest of the site i have created a copy of the original masterpage and applied visible=false to all the contentplaceholders except “PlaceHolderPageDescription” and “PlaceHolderMain” which i intend to use to contain the webpart. I want only this one particular page to inherit the modified masterpage. do you think this method is correct?

  19. I have added a SharePointWebControls:TextField that users add keywords for the meta tags. I want it to show up on the “edit” portion of the page, but not when the page is rendered. If I try visible=false it hides it in the edit portion. Any ideas?

  20. this is really gud one . can i customize my master page like can i add a theme and custom menu-bar to my MOSS site ??thanx in advanceRam

  21. Hi Heather, I saw your branding presentations at the Sharepoint Conference last week and decided to set up a test server with Sharepoint on it to learn about branding, since our orgnization still uses the OOB sites (with different templates of course). This was a great read with a-l-o-t of great information and links!One question though, what do you prefer to work in when branding sites.. VS2005/08 or Designer? I myself am more comfortable editing in code view and only using design view to see the changes being made.

  22. thanks heather,great article,give some idea abt traversing the document hirarchy,if u have any article then mail it to me

  23. I have added my aspx page in to Sitedirectory/pages/mytest.aspxi use one of my custom masterpage in this aspx page and also register Microsoft.SharePoint.WebControls tag, i m adding asp.net controls in my aspx page….it works fine……but when ever i add WebpartZone in my aspx page it doesn’t work for me………..plz help me out………tell me wat m doing wrong….

  24. Very good article. Easy to read and understand. I hope we get you here to help us with our look!

  25. Very great materials you have. Hope you get a book out! I did have one question. Is there a direct way to create a site template from a layout? It seems not. It seems that the best path would be to edit in the the <asp:content> elements of such a layout to a default.aspx of a new site and save that site as a template.

  26. Hi Heather,Thank you for a very fine site for collecting Sharepoint information. I have a problem with my template. I have created a version of my template, uploaded it and seen that it worked. I have then changed some aspects of the page and uploaded it again (removing he original, incrementing the version) and seen that the site and subsites that have been ordered to use the new template work. My problem is that pages under pages are rendered using the original of my custom template. I have tried forcing the template to the subsites, but alas thiss did not work. Do you have any suggestions?

  27. Thank you for taking the time and write this article. I have some question and you may know the answer.1) Is it possible to have a web part included in all pages that are created in a site? Does this modification has to be done on master.aspx page?2) I am having too many problems attaching a master page to a site using Sharepoint GUI. I activate site publishing feature and then when I selected the master page in the master pages (under look and feel) it does not apply, any idea why?Thanks in advance.

  28. THANK YOU. I’ve been a web designer / Java programmer for almost 15 years, so when I was looking for a new position and a friend said “I desperately need a Sharepoint site in six weeks. I’m sure you can do it — it’s a very simple web site” I thought “…I’ve done some .NET and lots of web — how bad could it be?”You’re laughing right? That’s really all I could give back at this point for some resources that are proving invaluable.

Comments are closed.