Home > Sample chapters

Working with Web Pages in Microsoft SharePoint Foundation 2010

This chapter from Microsoft SharePoint Foundation 2010 Step by Step introduces the basic concepts of wiki pages, Web Part pages, and Web Parts. Using the browser, you will learn how to view wiki pages and Web Part pages in different ways, as well as how to change the appearance of these pages by adding and removing static text and images and adding and removing Web Parts.
httpatomoreillycomsourcemspimages1755457.jpg

Chapter at a Glance

In Microsoft SharePoint Foundation 2010, a website is a collection of web pages. You will find this approach more natural than in Microsoft Windows SharePoint Services 3.0, where a site was seen as a container for list and library data and web pages were used to display data held in the lists and libraries. In Windows SharePoint Services 3.0, the addition of static text and images was possible only by adding the Content Editor Web Part.

In SharePoint Foundation, when you create a Team site, SharePoint creates a wiki page library, named Site Pages, where the web pages are stored and where the new pages can be created from the Site Actions menu. There are two types of web pages—wiki pages and Web Part pages. Wiki pages are the default pages at sites created from the Team, Blank, or Document Workspace site template. Both wiki pages and Web Part pages can contain Web Parts. Web Parts are reusable components that can contain any type of web-based information, including analytical, collaborative, and database information. Wiki pages consist of a mix of free-format static text and images in addition to Web Parts, whereas Web Part pages can contain only Web Parts. To include free-format static text or images on a Web Part page, you must use the Content Editor Web Part or the Image Web Part.

Both types of pages are flexible and highly customizable using three types of tools:

  • A browser

  • A SharePoint Foundation–compatible web page editing tool, such as Microsoft SharePoint Designer 2010

  • A professional development tool such as Microsoft Visual Studio 2010

No one tool can do everything, and therefore it is likely that in any deployment of SharePoint Foundation, all three tools will be used at some point.

This chapter introduces the basic concepts of wiki pages, Web Part pages, and Web Parts. Using the browser, you will learn how to view wiki pages and Web Part pages in different ways, as well as how to change the appearance of these pages by adding and removing static text and images and adding and removing Web Parts.

Editing a Page

On a Team site, blank site, or Document Workspace, the default web pages are wiki pages. They are stored in a SharePoint Foundation–based wiki library, named Site Pages.

The wiki library, Site Pages, inherits its permissions from the site. Therefore, anyone who is mapped to the Contribute permission level at the site level—that is, anyone who is a member of the site’s Members SharePoint group—is allowed to change any wiki page or create new pages, which is known as “open editing.” If a page is found to be incomplete or poorly organized, any member of the site can edit it as he or she sees fit. Therefore, as users share their information, knowledge, experience, ideas, and views, the content evolves. Site members can work together to change or update information without the need to send emails or attend meetings or conference calls. All users are allowed to control and check the content, because open editing relies on the assumption that most members of a collaboration site have good intentions.

When you edit a page, you should always check it out before you modify the content. This is to prevent other users in your team from editing the page at the same time.

In this exercise, you will edit the home page of a site.

  1. Click the Edit icon that is displayed to the left of the Browse tab.

    httpatomoreillycomsourcemspimages1755459.jpg

    The Editing Tools ribbon tabs—Format Text and Insert—are displayed on the right side of the Page tab, and the Ribbon is displayed above the two wiki page content areas. The Edit icon that was displayed to the left of the Browse tab is replaced with the Save & Close icon.

    httpatomoreillycomsourcemspimages1755461.jpg
  2. On the Format Text tab, click Check Out in the Edit group.

    httpatomoreillycomsourcemspimages1755405.png

    A notification message briefly appears below the Ribbon and to the right, displaying the text “Page Checked Out,” and a yellow status bar appears below the Ribbon stating that the page is checked out and editable. On the Format Text tab, the Check Out command in the Edit group is replaced with the Check In command.

    httpatomoreillycomsourcemspimages1755463.jpg
  3. Place the cursor to the left of the Welcome title. Press CTRL+A to select all the content in the left content area of the page, and then press DELETE.

    The contents in the left area of the wiki page are deleted.

  4. In the left content area, type Welcome to the Financial team site, and then press ENTER to move the cursor to a new line.

  5. On the Format Text tab, click Styles, and then click Normal.

    httpatomoreillycomsourcemspimages1755465.jpg
  6. Type This web site is used by members of the Wide World Importers Financial team and allows us to share content and then press ENTER.

  7. Click the Insert tab, and then click Picture in the Media group.

    httpatomoreillycomsourcemspimages1755467.jpg

    The Select Picture dialog opens.

  8. Click Browse, and then navigate to the Chapter06 practice file folder. Click pjcov.jpg and then click Open.

  9. Leave the default library where the image will be uploaded to Site Assets, and then click OK.

    The Site Assets – pjcov.jpg dialog opens.

  10. Click Save to upload the image and display the image on the page. The Design tab is displayed.

  11. On the Format Text tab, click Check In in the Edit group.

    The Check In dialog is displayed.

    httpatomoreillycomsourcemspimages1755411.png
  12. In the Comments box, type Welcome message added to the page, and then click Continue.

    The page is saved, the Editing Tools ribbon tabs disappear, and the Save & Close icon to the left of the Browse tab is replaced with the Edit icon. The Browse tab becomes the active tab.