Customizing a SharePoint site in your Web browser, Part 1

Applies to
Microsoft Windows® SharePoint® Services technology

When you create a site in Microsoft Windows SharePoint Services, you get a good-looking, useful Web site, right out of the box. However, if you are a member of the Web Designer or Administrator site groups, you can customize your site, changing its appearance and adding functionality without using other applications or doing any programming.

This tutorial, and its companion tutorial, Customizing a SharePoint site in your Web Browser, Part 2, teaches you how to customize your site by using built-in features of Windows Sharepoint Services that you use in a Web browser. By taking these tutorials you will learn how to modify your site's appearance by applying a new theme. You will learn how to use Web Parts—the basic building blocks of the pages in SharePoint sites—to customize your home page. After you have practiced using Web Parts in this first tutorial, you will step up to a more complex task in the second tutorial, building a new Web Part Page that displays data.

Imagine that you are setting up a site for your team at your company, Contoso, Ltd. You want to change the home page of the site to reflect your team's priorities. The default layout isn't quite right for your team, so you decide to rearrange the items on the page, removing some and adding others. Also, you decide to replace the graphic on the home page with one that represents your company.

Goals

After completing part one of this two-part tutorial, you will know how to:

  • Change the theme of your site.
  • Move lists and other Web Parts around on a page.
  • Add a Web Part to a page.
  • Change the image on your home page.

Before you begin

Although you can do the exercises in these tutorials by using your current SharePoint site, we recommend that you first create a practice team site for these exercises. If you don't have a server running Windows SharePoint Services available and have Internet access, you can sign up for a hosted Windows SharePoint Services trial.

Create a practice site

 Note   You can create a subsite under the current site if you are a member of the Administrator site group. If you are not a member of the Administrator site group, ask the site administrator to create a subsite for you. Make sure you are a member of the Web Designer or Administrator site group in the new subsite.

  1. On the top link bar, click Create.
  2. In the Web Pages section, click Sites and Workspaces.
  3. In the Title and Description section, type a name, such as Practice Site, and a description for the new site.
  4. In the Web Site Address section, complete the Web address (URL) that you will type to go to the new site.

 Note   The first part of the address is provided for you.

  1. In the Permissions section, click Use same permissions as parent site .
  2. Click Create.
  3. On the Template Selection page, in the Template list, click Team Site, and then click OK.

The sample data that you will need to complete these tutorials includes two Microsoft Excel spreadsheets and an image. Next you will download these files.

Download companion files
  1. Go to Site Customization Tutorial Files on the Microsoft Download Center.
  2. Click Download and follow the instructions to download the files to your computer.

Now that you have set up a site and downloaded the files you need, it's time to start customizing your site!

Customizing the site's theme

A theme is a unified set of design elements that influence the fonts and color scheme of your SharePoint site. Changing your site's theme is an easy way to customize your site to fit your team's personality.

  1. On the top link bar, click Site Settings.
  2. On the Site Settings page, in the Customization section, click Apply theme to site.
  3. On the Apply Theme to Web Site page, select the Journal theme.

A preview of the theme appears.

Select a Theme

  1. Click Apply.
  2. Return to your site's home page by clicking Home in the top link bar.

Customizing your home page

The home page of your SharePoint site is your site's "front door," and it can highlight important site information that you want all site users to see. The home page is a Web Part Page, which is made up of Web Part zones—containers that are used for layout and to group and organize Web Parts on the page. Web Parts are the basic building blocks of the page, displaying data, such as SharePoint lists, and providing commands to manipulate the data and configure the Web Part. By using Web Parts you can customize your home page to suit your team's information needs.

The default home page of your team site contains Web Parts that display the contents of the Announcements, Events, and Links lists, in addition to a space for a site image. For your team's site, you want to move Web Parts around to make room for a Web Part that displays your team's main document library.

In this section of the tutorial, you will learn some basic techniques for customizing your SharePoint site using Web Parts. In the second part of this tutorial, Customizing a SharePoint site in your Web Browser, Part 2, you will build on this knowledge and create a new Web Part Page that takes sample list data that you import and builds a useful, interactive Web page.

Move the Events Web Part
  1. Click Modify Shared Page and then click Design this Page.

The view of the Home page transforms so that you can see the page's design. Notice that the page contains two Web Part zones, labeled "Left" and "Right."

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

The Events Web Part tool pane opens. You use the Web Part tool pane, which is available for all Web Parts, to configure a Web Part's unique properties and to choose general settings that control the Web Part's layout and appearance. For this exercise, you will move the Events Web Part from the Left Web Part zone to the bottom of the Right Web Part zone.

Events Web Part tool pane

  1. In the Events Web Part tool pane, locate the plus sign next to Layout and click it to expand the Layout section.
  2. In the Zone list, click Right.

This specifies that the Events Web Part should be displayed in the Right Web Part zone on the page.

  1. In the Part Order box, type 3, to indicate that the Web Part should appear third (from the top) in its Web Part zone.
  2. Click OK to apply the changes to the Events Web Part and close the Events Web Part tool pane.

You can also move Web Parts by dragging them to new locations when you are in the design view of the page.

Move the Links Web Part
  1. On the Home Page, click the title bar of the Links Web Part.
  2. Drag the Web Part from the middle of the Right Web Part zone to the top of the Left Web Part zone.

The Events Web Part and the Links Web Part are List View Web Parts. Each built-in list and library in a SharePoint site—including the Shared Documents document library—and each new list or library that you create has a corresponding List View Web Part to display the list's data. It's important for everyone on your team to have quick access to the team's documents, so you want to add the Shared Documents Web Part to the home page.

Add the Shared Documents Web Part
  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. 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. For this exercise you will insert a list from the site Web Part gallery. This 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."

Add Web Parts tool pane

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

If you do not see the Shared Documents Web Part, click Next until it appears.

  1. Click Shared Documents and drag the Web Part to the bottom of the Left Web Parts Zone.
  2. Click the Close button Close button at the top of the Add Web Parts tool pane to close the tool pane.
  3. To view the changes you have made so far, on the Modify Shared Page menu, click Design This Page to exit the design view of the page.

Changing the logo on your home page

You want to replace the default image displayed on the home page (the Windows SharePoint Services logo) with an image related to your Contoso company's identity. The first step is to import the new image into your Web site.

Import image
  1. In the Shared Documents list Web Part on your Home Page, click Add new document .
  2. Click Browse and locate the Contoso.gif file that you downloaded to your computer, and then click Open.
  3. Click Save and Close.
Add image to home page
  1. On your site's home page, click Modify Shared Page, point to Modify Shared Web Parts, and then click Site Image.

The Site Image Tool Pane opens. You can use this tool pane to customize the Site Image Web Part.

  1. In the Image Link field, type in the full Web address of the Contoso.gif file that you imported, such as http://MyServer/MySite/Tutorial/Shared Documents/Contoso.gif.
  2. Click OK.

 Note   If new new logo does not appear, try repeating the steps in this section, but type %20 for each space in the Web address, such as http://MyServer/MySite/Tutorial/Shared%20Documents/Contoso.gif .

Suggested next steps

Congratulations on completing Customizing a SharePoint site in your Web Browser, Part 1! Now that you have learned the basics of customizing a home page, here are a few suggestions for additional tasks you can try:

If you do not want to complete the second part of this tutorial, you can delete your practice site so that you don't waste your server resources.

Delete a site
  1. Click Site Settings on the top link bar of your site.
  2. On the Site Settings Page, click Go to Site Administration.
  3. On the Site Administration page, in the Management and Statistics section, click Delete this site.
  4. On the confirmation page, click Delete.

 Note   The example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious. No association with any real company, organization, product, domain name, email address, logo, person, places, or events is intended or should be inferred.

 
 
Applies to:
Deployment Center 2003, Windows Sharepoint Services 2.0