Six easy ways to customize your site using Web Parts

Applies to
Microsoft Windows® SharePoint® Services technology

You don't have to be a professional Web site designer or software developer to customize your Web site created in Microsoft Windows SharePoint Services. By using built-in Web Part features described in this article, you can easily customize your site's home page other Web Part Pages that are stored in your site.

Becoming familiar with Web Part customization techniques gives you a range of page-customization choices. For example, you can customize your site's home page so that it displays the specific information that your team needs. You can rearrange the list items on the home page, add lists, and even change the images on the home page. As you become more familiar with Web Part Page customization techniques, you can build interactive Web Part Pages that makes the data in lists more dynamic and useful, and you can add new Web Parts that provide access to external data and Web services.

A short Web Part overview

Add an image to a page

Add a list to a page

Add text to a page

Add a Web page to a page

Change a Web Part's appearance and layout

Display images from a list

Conclusion

A short Web Part overview

To help you succeed with the tasks described in this article, here is a short overview of Web Parts.

 Tip   For additional overviews of Web Parts and Web Parts Pages, see the Windows SharePoint Services Help topics "About Web Parts" and "About Web Part Pages."

Web Part Pages and Web Parts

A Web Part Page is a special type of Web page that consolidates data — such as lists and charts — and Web content — such as text and images — into a dynamic information center. The home page of your SharePoint site is a Web Part Page, and you can easily create other Web Parts Pages in your site. A Web Part Page contains one or more Web Parts, which are the basic building blocks of the page.

 Tip   To create a Web Part Page, on the top link bar, click Create. In the Web Pages section, click Web Part Page. Type a name for the page, choose a layout, and specify the document library in which the Web Part Page will be stored (Web Part Pages that you create must be stored in document libraries.)

The following picture shows the Web Part features of a home page in a SharePoint site based on the Team Site template:

Web Parts on the Home page

Most Web Parts are designed to display a specific type of data, such as text, HTML, or images. When you create a site based on the Team Site template in Windows SharePoint Services, included are Web Parts that display lists, images, text, and other content. By adding these Web Parts to Web Part Pages, configuring them, and connecting them, you can create dynamic information portals that present information to your site's users in an organized and convenient way.

A Web Part Page is always in shared view or personal view. When a Web Part Page is in shared view, all users see the same page and any changes you make are visible to all users. When a Web Part Page is in personal view, you see any personal changes you have made, and any changes you make in this view are visible only to you. You are in shared view if Modify Shared Page is displayed at the top of your page, and you are in personal view if Modify My Page is displayed. The procedures in this article use shared view, but you can use most of the techniques described in this article in either view.

 Note   To change from personal view to shared view, on the Modify My Page menu, click Shared View.

As you try out the techniques described in this article, keep in mind the following requirements for changing Web Part Pages:

  • To change the shared view of the home page or of any Web Part Page, you must be a member of a site group with the Add and Customize Pages right. By default, the Add and Customize Pages right is included in the Web Designer and Administrator site groups.
  • To change your personal view of the home page or of any Web Part Page, you must be a member of a site group with the Add/Remove Private Web Parts and the Update Personal Web Parts rights. By default, these rights are included in the Contributor, Web Designer, and Administrator site groups.

Web Part zones

Web Part zones are containers of Web Parts on a Web Part Page that group and organize Web Parts. Each Web Part zone on a page has a title such as "Header," "Footer," or "Left Column." The outlines of Web Part zones, along with their titles, appear only when you are designing the page. When site participants use a page, the outlines of Web Part zones and their titles do not appear.

Web Part zones

Web Part galleries

A Web Part gallery is a central warehouse of Web Parts that you use to locate a specific Web Part when you are designing a Web Part Page. The site Web Part gallery is often the most central Web Part gallery for your work group. By default, its name is the name of the top-level site in your site collection. For example, if the top-level site in your site collection is "My Team Site," the site collection Web Part gallery available to you will be named "My Team Site Web Part Gallery." You can find all the Web Parts you will need to complete the tasks described in this article in your site Web Part gallery.

Back

Add an image to a page

By using the Image Web Part, you can add an image to your site's home page or to a Web Part Page. The image that you display can be from a document library or picture library in your team site, or it can be from an external Web address.

  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.

The Add Web Parts tool pane opens. This tool pane contains all the Web Part galleries that are available to you.

The Web Part gallery

Notice that the page has switched to its design mode, and the page's Web Part zones and their titles are visible.

  1. Click the name of your site Web Part gallery and, in the Web Part List, find the Image Web Part.

If the Image Web Part does not appear in the list, click Next until it appears.

  1. Click Image Web Part and drag it into one of the Web Part Zones on your page. If other Web Parts are in the same zone, use the insertion bar to place the Image Web Part.

Next, associate an image with the Image Web Part.

  1. On the Image Web Part, click the Web Part Menu button Web Part Menu button and then click Modify Shared Web Part.

The Image Web Part tool pane opens. You use the Web Part tool pane to configure a Web Part's unique properties and to choose general settings that control the Web Part's layout and appearance.

Image Web Part tool pane

  1. In the Image Link field, type the URL of the image to display. This can be an image you have imported into your site or an image on another Web site.

 Note   To import an image into your site, from a picture library, click Add Picture. In the Name field, enter the path to the image, and then click Save and Close.

  1. Click OK.

Back

Add a list to a page

When you create a built-in or custom list, Windows SharePoint Services creates a Web Part that you can use to display that list. For example, when you create a site from the Team Site template, it comes with built-in Announcements, Contacts, and Events Web Parts. You use these Web Parts (collectively called List View Web Parts) to add a view of a list to your home page or to any Web Part Page.

In this exercise, you insert a view of the default Contacts list onto a page.

  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.

The Add Web Parts tool pane opens.

  1. Click the name of your site Web Part gallery and, in the Web Part List, find the Contacts Web Part.

If the Contacts Web Part does not appear, click Next until it appears.

  1. Click Contacts and drag it into one of the Web Part Zones on your page.

Next, learn how to change the view of the list displayed in any List View Web Part.

  1. On the Contacts Web Part, click the Web Part Menu button Web Part Menu button, and then click Modify Shared Web Part.

The Contacts Web Part tool pane opens.

  1. In the Selected View field, click a view to display in the Web Part, such as All Contacts.

 Note   If the following message is displayed, click OK to close the message: "Switching to a different view removes changes you have made to this view, and may disable Web Part connections that depend on columns in this view."

  1. Click OK to close the Contacts tool pane.

Back

Add text to a page

You can add formatted text, tables, hyperlinks, and other HTML code to a page, without knowing HTML syntax. This is useful, for example, for adding introductory text or for providing instructions about how to use a page.

  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.
  2. In your site Web Part Gallery, in the Web Part List, locate the Content Editor Web Part.

If the Content Editor Web Part does not appear, click Next until it appears.

  1. Drag the Content Editor Web Part into a Web Part zone.
  2. In the Content Editor Web Part, click open the tool pane.

The Content Editor Web Part tool pane opens.

  1. To add text, click Rich Text Editor.

The Rich Text Editor window opens. The Rich Text Editor provides a familiar text editing interface that you can use to add HTML content to the page.

  1. Click the text entry area in the Rich Text Editor window and type text to display on the page. Experiment with the formatting and editing options available in the Rich Text Editor window.

 Tip   For a complete reference for the formatting and editing commands, click the Help button Button image in the Rich Text Editor window.

  1. In the Rich Text Editor window, click Save.
  2. Click OK to close the Content Editor tool pane.

Back

Add a Web page to a page

You use the Page Viewer Web Part to display a Web page, file, or folder on a Web Part Page. For example, you could use the Page Viewer Web Part to display a favorite Internet news source on a Web Part Page.

  1. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.
  2. In your site Web Part gallery, in the Web Part List, locate the Page Viewer Web Part.

If the Page Viewer Web Part does not appear, click Next until it appears.

  1. Click and drag the Page Viewer Web Part into a Web Part zone.
  2. In the Page Viewer Web Part, click open the tool pane.

The Page Viewer Web Part tool pane opens.

Page Viewer Web Part tool pane

  1. In the Page Viewer field, make sure that Web Page is selected.
  2. In the Link field, type the URL of the page to display.
  3. Click OK to close the Page Viewer tool pane.

 Note   You might have to adjust the Page Viewer Web Part's height and width so that the content in the Web Page it displays is easier to view. A method for changing the height and width of a Web Part is described in the next section, "Change a Web Part's appearance and layout."

Back

Change a Web Part's appearance and layout

This article has so far described techniques that you can use to put different types of information on your home page or on a Web Part Page. To make your pages more attractive and useful, here are some general techniques that you can try with any Web Part. By using these techniques, you can change the appearance and layout of a Web Part.

 Note   To open a Web Part's tool pane, on the Modify Shared Page menu, point to Modify Shared Web Part, and then click the name of the Web Part you want to change.

ShowChange the title

  1. In the Web Part's tool pane, click the plus sign (+) next to Appearance to expand the Appearance section.
  2. In the Title field, type the Web Part's new title.
  3. Click OK to apply the changes and close the tool pane.

ShowSpecify the height and width

  1. In the Web Part's tool pane, click the plus sign (+) next to Appearance to expand the Appearance section.
  2. In the Height field, click Yes, type the value of the height, and select the units, such as Pixels or Centimeters.
  3. In the Width field, click Yes, type the value of the width, and select the units.
  4. Click OK to apply the changes and close the tool pane.

ShowRemove the border

  1. In the Web Part's tool pane, click the plus sign (+) next to Appearance to expand the Appearance section.
  2. In the Frame Style field, do one of the following:
    • To display just the title bar, select Title Bar Only.
    • To display the title bar and border, select Title Bar and Border.
    • To display the Web Part without a title or a border, select None.
    • To use the Web Part's default display style, select Default.
  3. Click OK to apply the changes and close the tool pane.

ShowMinimize a Web Part by default

  1. In the Web Part's tool pane, click the plus sign (+) next to Appearance to expand the Appearance section.
  2. In the Frame State field, click Minimized.

 Note   Site users can view a minimized Web Part by clicking Restore on the Web Part's menu.

  1. Click OK to apply the changes and close the tool pane.

ShowMove a Web Part

  1. On the Modify Shared Page menu, point to Design This Page.
  2. Click and drag the Web Part to a new Web Part zone. Use the insertion bar to place the Web Part relative to other Web Parts in the same zone.
  3. On the Modify Shared Page menu, click Design This Page to exit the design view of the page.

Back

Display images from a list

This exercise builds on the techniques that you have learned so far in this article. By following these steps, you will learn how to connect two Web Parts so that the content displayed in one Web Part is based on a selection in the other Web Part. You will connect a List View Web Part that contains links to images to an Image Web Part. By doing this, you will let users view each image in a separate Web Part "window" as they select each list item.

Before you start this exercise, create a list that contains, for each item, a link to an image. Any list with a field of type Hyperlink or Image will work. Note that the Links list that is available by default when you create a team site has a URL field that you can use for this purpose.

  1. In your Web browser, go to your site's home page or to any Web Part Page.
  2. On the Modify Shared Page menu, point to Add Web Parts, and then click Browse.

The Add Web Parts tool pane opens.

  1. Locate the List View Web Part with the list of links you will use in this exercise, and drag it into a Web Part zone.

The name of the Web Part is the same as the name of the list. If you use the Links list, for example, click the Links Web Part.

  1. Locate the Image Web Part and drag it into a Web Part zone.
  2. On the Image Web Part, click the Web Part Menu button Web Part Menu button, point to Connections, point to Get Image From, and click the name of the list of links, such as Links.

The Edit Connection -- Web Page Dialog opens. You use this dialog box to configure the connection between Web Parts.

Edit Connection dialog box

  1. In the Column field, select the name of the field containing hyperlinks to images, such as URL, and click Finish.

Note that radio buttons are inserted at the beginning of each list item in the list that contains the links to the images.

  1. Click the Close button Close button at the top of the Add Web Parts tool pane to close the tool pane.

Try clicking the radio buttons in your list of links. Each image appears in the Image Web Part as you click a list item.

Back

Conclusion

This article covered six basic Windows SharePoint Services customization techniques. By using these techniques, you can adapt your SharePoint site to meet your workgroup's needs.

You can remove customizations by using the following steps:

ShowDelete a Web Part

  1. On the Modify Shared Page menu, point to Design This Page.
  2. Click the Web Part's Menu button Web Part Menu button and click Delete.
  3. Click OK.
  4. On the Modify Shared Page menu, click Design This Page to exit the design view of the page.

 Note   You can close a Web part by clicking Close from the Web Part's menu. Closing a Web Part removes a Web Part from the Web Part Page and moves it to the Web Part Page Gallery. A closed Web Part (as opposed to a deleted Web Part) is still technically on the Web Part Page, but is not available until it is reactivated by dragging it onto the page from Web Part Page Gallery.

ShowRemove a Web Part connection

  1. On the Modify Shared Page menu, point to Design This Page.
  2. On the Web Part that you created the connection from, click the Web Part Menu button Web Part Menu button, point to Connections, point to Get Image From or Get Sort/Filter From, and click the name of the list that you connected to.
  3. In the Edit Connection -- Web Page Dialog, click Remove Connection.
  4. Click OK.
  5. On the Modify Shared Page menu, click Design This Page to exit the design view of the page.
 
 
Applies to:
Deployment Center 2003, Windows Sharepoint Services 2.0