Welcome to MSDN Blogs Sign in | Join | Help

Page Anatomy

AWPix

No this post is not about a popular TV show! We'll cover the integrated framework we are using in the next release of SPS + CMS (breaking news - now officially Office SharePoint Server 2007 - I will cover that in a second post later today) to enable people to create, manage and publish the spectrum of very simple to very sophisticated internet sites. We've learned a lot from a variety of customer feedback on ASP.NET, WSS, SPS, CMS, FrontPage and more and hopefully brought this all together in a powerful way. Let's go through them piece by piece.

1) Master Page

Master Pages are an ASP.NET 2.0 feature that lets child pages inherit and re-use a common design. This only makes development and maintenance of the site much easier. New pages don't have to re-do the work of the master. When you want to apply a new design, just change the master. Typically they will contain the branding, navigation, header and footer for the site. We used this to implement the overall "visual blueprint" of SharePoint including access to the end user features. In a more static internet site, little of this will be exposed which is why we'll provide different example master pages to support different scenarios. At rendering time, the page brings in the code from the master so it is always up to date. Master Pages have first class support in the next release of Windows SharePoint Services and Office SharePoint Designer 2007 (also new - wait until next post). In the picture above, the branding section and navigation are part of the master page. I should note that we'll have a lot richer navigation options out-of-box than SPS 2003 or CMS 2002 and if you don't like ours you can buy or build a 3rd-party controls written to the new ASP.NET 2.0 navigation provider interface and still use all our underlying site management capabilities.

2) Page Layouts

Page Layouts are a feature we evolved from CMS 2002 into the new integrated SPS \ CMS (oops Office SharePoint Server - still getting used to that) building on the Master Page support in the next release of WSS. In a large site, there a number of different page types (e.g. Product Description, Press Release, Executive Biography) that should have a standard look and feel. Web site owners not only want to save the work of redoing these, they also want to enforce consistency in the site across the authors and have the flexibility to change them later. The layout is separate from the underlying content in the site. The "page layout" is an ASP.NET page with special "field controls" (aka placeholders in CMS 2002) that know how to bind to WSS data. These layouts may or may not also have web part zones which tells the framework if users can add parts in the browser. More on this below. In the example above, we have a standard Adventure Works "News" Page Template with the authoring console visibile (it isn't by default and people who don't have the rights to see this won't). The stuff on the left is based on field controls and the stuff on the right is in a web part zone we have allowed the page editors to customize.

3) Page

Just like CMS 2002, we use the powerful concept of separating presentation from data in web publishing. In the Office SharePoint Server, the actual "page" is a item a WSS list and the framework knows how to assemble these. This list has columns that are bound to three field controls (title, picture, article). Re-using SharePoint lists for data storage lets us build on existing and new WSS list features like content types, check-in/out, versioning, per item security, workflow and more more. In edit mode, the field controls place constraints on the author for what content they can put in the "page".The screenshot above shows the page with the console visible where authors, approvers, etc. have the appropriate actions based on their role.

4) Web Parts Zones

One of the trickiest aspects of the design was getting the relationship between field controls and web parts right. Field controls are bound to a WSS item so workflow, etc. just works. By design, Web Parts are less tightly coupled. In fact one of their advantage is just using the browser, users can add them to the page. As with WSS and SPS V2, there's a lot of flexibility in this model for customization, personalization and targeting that site owners can choose to use.

a) Customization allows parts to be added for all users - we see a lot of site owners restricting it to a few people for more productive site design in just the browser. It will be fun to see what stuff people do upfront using Page Layouts vs. just-in-time via Web Parts. Feel free to choose any point on the spectrum on using field controls exclusively to using web parts or a combination.

b) Personalization allows each user to set their own parts in the zone - ASP.NET and WSS do the bookkeeping in SQL tables for this. There's a lot of pages where enabling personalization makes sense but many where it does not and you can turn it off.

c) Targeting is an SPS V2 feature (one many CMS 2002 customers asked for as well - it comes return in the trade for page layouts) that lets publishers show different content to developers vs. marketing based on their "audience". In the example above, the top right web part could be targeted just to sales people but everyone else accessing the page wouldn't see the part. We have made targeting even easier in the next release by letting you directly target to an existing group vs. requiring the work (and the privleges) to set up an audience that maps to the group.

5) General Purpose Web Parts

Almost home! One thing we noticed across CMS and SharePoint was many people were writing the same code over and over for many pages and sites particularly for summary "landing pages" and views on business data. While I love our flexibility with ASP.NET, I really want to reduce the code required to build and maintain cool sites. We have also learned the robustness of the ASP.NET and WSS security model can be a double-edged sword. To install a new web part in SharePoint, you need pretty advanced priveleges which many IT admins have restricted in consolidated intranet SharePoint farms and internet prescences for obvious reasons. Often they don't have the time or resources to test new potential web parts. So what we've tried to do is create some extremely flexible, data-driven parts that empower the site publishers.

a) Summary Links and Content-By-Query - These parts address the incredibly common practice of tweaking HTML tables with a list of links and formatting of associated pictures and text. We will be provided a lot of different styles out of the box and support adding your own CSSs. The middle web part in the right column is an example of this. We'll have two versions - one that does versioning and workflow of the links as part of the page and a second (Content-By-Query) that lets you query content elsewhere in the site. We'll probably tweak these names before we ship. But hopefully, a lot less table tweaking to build cooler lists of links, images and people.
 

b) Business Data Web Parts - We are greatly enhancing the WYSWIG XSLT web part that came with V2 called Data View and let you do rich formatting of remote XML or database calls. You can use this directly against your remote source but it will also be the rendering foundaiton for re-usable business data conncetions we are calling the Business Data Catalog. You can use the BDC to register entities and actions from remote LOB systems like SAP, Siebel and Dynamics as well as databases vs. hard coding them into every web part. Just like with content - we are  trying to provide separation of presentation from data and easier re-use and customization. In addition to the BDC parts, we'll have parts designed for simple business intelligence scenarios. In the example above, I've shown a KPI (Key Performance Indicator) Web Part that can bring in data from SQL Analysis Services, Excel Services, SharePoint lists or even just static data.

We're eager to see all the cool intranet, extranet and internet presences you build with the next release!

-- Jeff

Published Thursday, February 16, 2006 6:02 PM by sptblog

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# re: Page Anatomy

Will a site administrator/editor/author? be able to turn off the little arrow drop down for subscribers?  In the current version of SharePoint you can't do this without custom webparts or by making the arrow the same color as the back ground.  

We looked at sharepoint as a possible solution for an internet site, but inablity to turn off those simple ui elements made it a user unfriendly environment since usually it contains help for subscribers which is worthless.
Thursday, February 16, 2006 1:48 PM by dalmuti509

# re: Page Anatomy

Fantasitc post guys, these are exactly the type of posts we are all thirsty for.

I don't know if you have ever put any thought into making these type posts downloadable as well.  Whitepaper.doc style.  It would be nice to have a repository of these aside from Blog Searching.  Hint Hint :)

Keep up the great work!
Thursday, February 16, 2006 9:40 PM by Shane Perran

# re: Page Anatomy

Dalmuti - Great question and a reminder I left out a pretty key thing. WSS in the next release does security trimmed UI (users only see thing they have the rights to click on - not just getting access denied when they do). One example is readers don't see the little web part chevron whereas contributors will.

Shane - Thanks for the feedback. Yeah a bunch of content is under development for the beta 2 and final release. What you are seeing is a little early (and less polished) preview.
Thursday, February 16, 2006 11:59 PM by Jeff

# Jeff Teper explains SharePoint's page layouts components in the new SharePoint Server 2007

Friday, February 17, 2006 5:43 AM by Andrew Connell [MVP MCMS]

# re: Page Anatomy

Great post, these kind of descriptions are very usefull and the info about the new products leave us wanting to use them as soon as possible.

Good work guys in the evolution of the Sharepoint / CMS environments!
Friday, February 17, 2006 8:43 AM by magalhaes

# re: Page Anatomy

Thanks for the info.   I love the ways that CMS and Sharepoint are coming together.  I am looking forward to using the new Sharepoint server.  
Friday, February 17, 2006 12:16 PM by dalmuti509

# Sharepoint Server 2007 Page Components

Friday, February 17, 2006 10:21 PM by Wayne Larimore - his bloggin' Weighs

# re: Page Anatomy

Great post, thanks!

It would be also great If you include some WebParts with JavaScript functionality/code like Hide Quick Launch Bar, (Todd Bleeker had a great idea about that), and so on...

I cant wait to see it in action...
Saturday, February 18, 2006 6:45 PM by Luis Du Solier G

# re: Page Anatomy

A very useful post Jeff - thank you.

I'd like to know more about how pages fit in as part of an SP list - as a CMS user I don't know much about how SP lists work. Field controls mapping to columns in a list seems clear enough, but what if you want to use two different page layouts in one list (aka: templates in a channel) - surely the columns wouldn't match?

Also we seem to be getting very mixed messages from MS on web standards. One day we see the announcement of standards-compliant web authoring software, and the next we're told that Sharepoint's built-in web parts will use tables for layout (you say "HTML tables with a list of links" above).

For any organisation with up-to-date rules on building accessible websites, that makes those web parts redundant and we'll still have to re-build them ourselves. It would be great if the SP HTML could be reviewed by some of your CSS experts before launch. Give us a layout with default CSS in place and the opportunity to customise the CSS if we want, and you'll have an even more flexible product offering.
Monday, February 20, 2006 4:13 AM by Rick

# Sharepoint Page components under Sharepoint 2007

Monday, February 20, 2006 12:49 PM by Breaking Point Blog

# re: Page Anatomy

Rick - Yes 1) In a Web (unfied concept across CMS 2002 channels, SPS 2003 areas and WSS) you can have Pages with different Page Layout Templates. We keep a union of the schema (and there is a base type). 2) Our master pages, templates and list layout tools will ship with a few CSS options or you can replace with your own.

Jeff
Monday, February 20, 2006 8:03 PM by sptblog

# Tech Talk PT » Blog Archive » Page Anatomy by Sharepoint Team Blog

# SharePoint Team Blog : Page Anatomy

Thursday, March 09, 2006 1:39 AM by Steve Bargelt

# WSS v3.0 (Sharepoint 2007)

I have been doing some research into the new release of Sharepoint again after inital readings yesterday....
Thursday, March 09, 2006 3:57 AM by C# .Net Tales

# re: Page Anatomy

One of the requests I've been getting is for the ability to sync Sharepoint Calendars with a PocketPC phone. Has this ever been discussed?
Thursday, March 09, 2006 1:08 PM by Anthony Garmont

# Office 2007, SharePoint Server 2007 and Windows SharePoint Services V3

VIA JOPX on SharePoint, MCMS, Office and SOA

The Beauty of SharePoint 2007 - Publishing / Copying...
Wednesday, April 12, 2006 5:00 PM by Romeo Pruno

# Jeff Teper explains SharePoint's page layouts components in the new SharePoint Server 2007

Monday, April 17, 2006 2:43 PM by Andrew Connell [MVP MCMS]

# re: Page Anatomy

I have been doing some research into the new release of Sharepoint again after inital readings yesterday....

<a href="http://www.webtasar&#305;m.com">web tasar&#305;m </a>
Friday, April 21, 2006 11:26 AM by web tasarım

# re: Page Anatomy

www.marmaraweb.com
Friday, April 21, 2006 12:36 PM by web tasarım

# re: Page Anatomy

One of the requests I've been getting is for the ability to sync Sharepoint Calendars with a PocketPC phone. Has this ever been discussed?

<a href="http://www.marmaraweb.com">web tasarım </a>
Friday, May 05, 2006 4:17 AM by web tasarım

# re: Page Anatomy

It would be also great If you include some WebParts with JavaScript functionality/code like Hide Quick Launch Bar, (Todd Bleeker had a great idea about that), and so on...

see my page http://www.plussclinic.com
Saturday, May 06, 2006 3:41 AM by saç ekimi

# re: Page Anatomy

Also we seem to be getting very mixed messages from MS on web standards. One day we see the announcement of standards-compliant web authoring software, and the next we're told that Sharepoint's built-in web parts will use tables for layout (you say "HTML tables with a list of links" above). http://www.medyumyakup.net
Saturday, May 06, 2006 3:46 AM by medyum

# re: Page Anatomy

Shane - Thanks for the feedback. Yeah a bunch of content is under development for the beta 2 and final release. What you are seeing is a little early (and less polished) preview. http://www.medyumnimet.com
Saturday, May 06, 2006 3:47 AM by medyum

# re: Page Anatomy

We looked at sharepoint as a possible solution for an internet site, but inablity to turn off those simple ui elements made it a user unfriendly environment since usually it contains help for subscribers which is worthless.
http://www.medyum.web.tr
Saturday, May 06, 2006 3:48 AM by medyum

# re: Page Anatomy

One of the trickiest aspects of the design was getting the relationship between field controls and web parts right. Field controls are bound to a WSS item so workflow, etc. just works. By design, Web Parts are less tightly coupled. In fact one of their advantage is just using the browser, users can add them to the page. As with WSS and SPS V2, there's a lot of flexibility in this model for customization, personalization and targeting that site owners can choose to use.
http://www.medyumyakup.com
Saturday, May 06, 2006 3:48 AM by medyum

# re: Page Anatomy

Just like CMS 2002, we use the powerful concept of separating presentation from data in web publishing. In the Office SharePoint Server, the actual "page" is a item a WSS list and the framework knows how to assemble these. This list has columns that are bound to three field controls (title, picture, article). Re-using SharePoint lists for data storage lets us build on existing and new WSS list features like content types, check-in/out, versioning, per item security, workflow and more more. In edit mode, the field controls place constraints on the author for what content they can put in the "page".The screenshot above shows the page with the console visible where authors, approvers, etc. have the appropriate actions based on their role. http://www.denthouse.com.tr

Saturday, May 06, 2006 3:49 AM by diş kliniği

# re: Page Anatomy

For any organisation with up-to-date rules on building accessible websites, that makes those web parts redundant and we'll still have to re-build them ourselves. It would be great if the SP HTML could be reviewed by some of your CSS experts before launch.
http://www.t-kamul.com
Saturday, May 06, 2006 5:23 AM by kitap özetleri

# re: Page Anatomy

Tuesday, May 16, 2006 7:00 AM by buharlı temizlik makinası

# Random valuable finds...

Wednesday, May 17, 2006 10:33 PM by Andrew Connell [MVP MCMS]

# re: Page Anatomy

Simpson Wrought Iron Doors feature forged iron-black grille designs fully enclosed between two panes of textured glass - allowing light to pass through while maintaining privacy. The insulated glass unit makes the doors a natural choice for those wanting a Southwestern or old-world look.
<a href="http://www.ak-bm.com">banyo mutfak
</a>
Friday, May 26, 2006 4:11 AM by banyo mutfak

# re: Page Anatomy

<a href="http://www.balon.web.tr">baskili balon</a>We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.
Thursday, June 08, 2006 4:36 AM by baskılı balon

# 2007 Microsoft Office Server System Reference Material

Download SharePoint Beta2:

Important Documentation Prior to SharePoint Beta 2 Installation
Get...
Friday, June 09, 2006 11:12 AM by The Boiler Room - Mark Kruger, SharePoint MVP

# Sharepoint 2007 Web Content Pages

I've been having a bit of an experiment with Sharepoint 2007 and creating a Site of 'Publishing Site'...
Monday, August 21, 2006 10:32 PM by C# .Net Tales

# re: Page Anatomy

How do I use that KPI webpart? Is that custom coded or does it come by default in sharepoint server?

Sunday, November 05, 2006 2:30 PM by Mattlab

# re: Page Anatomy

Hi

When i create the new Migration Profile in Central Administrator under Manage Microsoft Content Management Server Migration Profiles, i'm not able to complete Migration Profile creation process.

It return the following message:

Specified argument was out of the range of valid values.

Parameter name: value

Note: This is for MOSS 2007 and not SharePoint 2003

help needed...

Monday, February 12, 2007 5:07 AM by vivekthangaswamy

# re: Page Anatomy

It would be great if the SP HTML could be reviewed by some of your CSS experts before launch.

Wednesday, June 13, 2007 11:00 AM by modelistlik

# 2007 MOSS Resource Links (Microsoft Office SharePoint Server)

2007 MOSS Resource Links (Microsoft Office SharePoint Server) Here is an assortment of various 2007 Microsoft

Tuesday, June 26, 2007 11:15 AM by The Boiler Room - Mark Kruger, Microsoft SharePoint MVP

# re: Page Anatomy

Helpfull! Thanks! We develop web sites ( web tasarım ) on http://www.ikovan.com like this!

Friday, July 06, 2007 3:45 PM by web tasarim

# re: Page Anatomy

SHOW reklam - www.showreklamweb.com anlamal matbaa ofset, dijital, kurumsal, reklam, hizmetleri, promosyon, dijital, katalog, matbaa, arama, kurumsal, show, ajans, tabela, internet,

web tasarm, matbaa, web design, fatura, kartvizit, katalog, bror

<a href="http://www.showreklamweb.com">showreklamweb - www.showreklamweb.com anla&#351;mal&#305; matbaa ofset, dijital, kurumsal, reklam, hizmetleri, promosyon, dijital, katalog, matbaa, arama, kurumsal, show, ajans, tabela, internet,</a>

Thursday, August 09, 2007 2:41 PM by karnca

# Sharepoint 2007 Web Content Pages

Body: I&#39;ve been having a bit of an experiment with Sharepoint 2007 and creating a Site of &#39;Publishing

Wednesday, September 05, 2007 4:39 PM by Mirrored Blogs

# re: Page Anatomy

It would be great if the SP HTML could be reviewed by some of your CSS experts before launch. thanks.

Wednesday, February 13, 2008 7:15 PM by cam filmi

# re: Page Anatomy

Is that custom coded or does it come by default in sharepoint server?

Friday, April 18, 2008 3:01 AM by şömine

# halı yıkama

2007 MOSS Resource Links (Microsoft Office SharePoint Server) Here is an assortment of various 2007 Microsoft good thanks.

Wednesday, April 23, 2008 8:23 AM by halı yıkama

# hastane

ust like with content - we are  trying to provide separation of presentation from data and easier re-use and customization. In addition to the BDC parts, we'll have parts designed for simple business intelligence scenarios. In the example above, I've shown a KPI (Key Performance Indicator) Web Part that can bring in data from SQL Analysis Services, Excel Services, SharePoint lists or even just static data.

Thursday, May 01, 2008 6:10 AM by hastane

# diyet

It would be also great If you include some WebParts with JavaScript functionality/code like Hide Quick Launch Bar. for thanks.

Wednesday, May 07, 2008 5:39 AM by diyet

# re: Page Anatomy

e  trying to provide separation of presentation from data and easier re-use and customization. In addition to the BDC parts, we'll have parts designed for simple business intelligence scenarios. In the example above, I've shown a KP

Monday, May 26, 2008 5:46 PM by egzoz

# sharepoint 2007 where is the css

Thursday, May 29, 2008 10:27 AM by sharepoint 2007 where is the css

# new web parts sharepoint 2007

Tuesday, June 03, 2008 6:27 AM by new web parts sharepoint 2007

# re: Page Anatomy

You state: "I should note that we'll have a lot richer navigation options out-of-box than SPS 2003 or CMS 2002 and if you don't like ours you can buy or build a 3rd-party controls written to the new ASP.NET 2.0 navigation provider interface and still use all our underlying site management capabilities."

I am very interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation. Can you spell exactly how this is done and what tools/products are currently compatible with this standard?

Wednesday, June 04, 2008 11:52 PM by Tom N

# Resizing Page Layout Field Controls

Hi, I have created a page layout which displays perfectly when rendered in IE. When it is in edit mode (when I create an new page or edit an existing one) the fields stretch very far horizontally across the browser making it quite unwieldy to work with. How do I set the size of the field controls and control the layout when in "edit" mode.

Also are there any resources available that describe the Tag Properties of the publishing controls?

Thanks very much

Regards

Gary

Saturday, June 07, 2008 7:49 AM by Gary

# jeneratör

I am interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation.

Monday, June 09, 2008 9:10 AM by jeneratör

# konut

I am very interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation. very good content.

Wednesday, June 11, 2008 5:14 AM by konut

# kartvizit program

Thursday, June 12, 2008 12:00 PM by kartvizit program

# buyu

I am very interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation. Can you spell exactly how this is done and what tools/products are currently compatible with this standard?

Wednesday, June 25, 2008 9:42 AM by buyu

# Anaokulu Merkezi

I am interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation. Very good content, thanks.

Anaokulu, yuva, kreş

Thursday, July 10, 2008 7:42 AM by anaokulu merkezi

# re: Page Anatomy

I am interested in doing precisely this: using ASP.NET 2.0 controls in lieu of the standard navigation.

Thursday, July 17, 2008 8:48 PM by aöf rehber

# nikah şekeri

İtina ile hazırlanmış birbirinden güzel nikah şekeri ve davetiye modelleri...

Monday, July 21, 2008 7:44 AM by nikah şekeri

# re: Page Anatomy

It would be also great If you include some WebParts with JavaScript functionality/code like Hide Quick Launch Bar.

Friday, November 28, 2008 11:15 AM by medyum

# re: Page Anatomy

It would be great if the SP HTML could be reviewed by some of your CSS experts before launch.

Friday, November 28, 2008 11:19 AM by astroloji

# Microsoft SharePoint Team Blog Page Anatomy | Outdoor Ceiling Fans

# Microsoft SharePoint Team Blog Page Anatomy | Outdoor Ceiling Fans

# Microsoft SharePoint Team Blog Page Anatomy | fix my credit

# Microsoft SharePoint Team Blog Page Anatomy | patio set

Wednesday, June 17, 2009 10:03 PM by Microsoft SharePoint Team Blog Page Anatomy | patio set

# Microsoft SharePoint Team Blog Page Anatomy | debt consolidator

Leave a Comment

(required) 
required 
(required) 

  
Enter Code Here: Required
 
Page view tracker