Basic Design

Using SharePoint Designer for editing SharePoint sites allows you to do almost anything. To give you an idea of what you can do, this section describes often requested modifications that are easy to make. Remember to keep SharePoint Designer open while testing these modifications; if anything goes wrong you can use the undo feature in SharePoint Designer and then save the file again.

Adding Text Outside Web Parts

There are a lot of Web Parts for displaying text on a SharePoint site, but sometimes you need to add a text block without relying on a Web Part; for example, you may want to add an instruction at the top of the site where there is no Web Part zone.

Try It Out Add Text to Any Part of a Site Page

1. Log on as a user with web design permissions (for example, a site Owner, or the Site Collection Administrator).

2. Open the site to be modified in SharePoint Designer.

3. Make sure that SPD is using Design view.

4. Place the cursor where you want to enter the new text block, for example next to the site description.

   Important 

   You can create a new table row or column for this text; select a table cell near where you want the text, right-click, and select Insert.

5. Enter the text.

6. Press F12 to save and view it (see Figure 13-6). If it does not look good, go back to SharePoint Designer, use the Undo feature under the Edit menu, and save the page again.

Figure 13-6

Add a Background Picture

Since team sites use Master Pages or site themes for controlling the style of the page, you cannot add a background picture to the whole page, but you can add it to a table or cell on a page. For example, say that you want to add a photo as a background picture to a Web Part zone in a team site, right-click a free part of the cell where that Web Part zone is stored and edit the cell:

Try It Out Add a Background Picture to a Web Part Zone

1. Open the site to be modified in SharePoint Designer as previously described.

2. Right-click anywhere in the cell where the Web Part zone is stored; select Cell properties.

3. Check Use background picture, and enter or browse to the picture.

4. Click Save. You will then be asked if you want to customize a page from the site definition; answer Yes.

5. Next, you will be asked to save these embedded files: click OK. Note that embedded files will be visible in the Folder List pane to the left in SPD. If the picture needs to be adjusted, right-click on the picture and select Picture.

Important 

To add a background picture to all Web Part zones, select Table properties in step 2 above.

Interactive Buttons

Many SharePoint customers ask for a button on the site page that performs an action or open another page. This is very easy to do with SharePoint Designer, and you have a lot of different looks for these buttons, so you will most likely find just the right button for your site.

Try It Out Add Interactive Buttons

1. Open the site to be modified in SharePoint Designer as previously described.

2. Place the cursor where you want the button. Note that you cannot place the button inside a Web Part zone! If you need more space, right-click on a table cell, and select Insert to add a new row, column, or cell.

3. Click menu Insert Interactive Button, then:

   1. Use the Buttons field to select the type of button you want. There is a preview of these buttons above this field.

   2. Text: Enter the text for the button; for example, Create Site.

   3. Link: Enter the link to be activated for this button; for example, http://srv1/SiteDirectory/it/_layouts/newsbweb.aspx to create subsites under the IT site.

   4. Click OK to save and close. Note that first time you save a button, SPD will ask if you want to embed the button images; click OK.

4. Save the modified page. Then test the new button to make sure that it works as expected. See Figure 13-7, which has three different types of buttons added.

Figure 13-7

Important 

If you add a button with rounded corners on a shaded background, you will see the default white background color for the button's picture. If this happens, right-click on the button and select Button Properties, switch to the Image tab, and either change the background color or make the button a GIF image so that it can use a transparent background.

Copying Complete Sites

You may recall that any team site may be stored as a site template. This is a very handy way of creating templates for sites, including content if necessary. The problem with that technique is that you can only store 500 MB of content. But using SharePoint Designer you can save a complete site, including all its content, in a backup file, then restore it anywhere, including other SharePoint environments. This is very handy if you have a test environment and need to copy sites from that environment to the production server.

The technique for copying and moving sites with SharePoint Designer is to back up the site to the file system, then move those files to the destination server and restore them with SharePoint Designer. But before you can do a restore, an empty site must exist where SPD can restore the files. So, how do you create an empty site? Use the STSADM tool, mentioned in many previous chapters. It has a special command for creating an empty site. In the following example, you will make a backup of the WSS site IT, using SPD, then restore those files to another site in another site collection on the server. These steps can also be used to copy a site to any SharePoint environment.

Try It Out Copy a Site to Another Site Collection with SPD

1. Log on as an administrator.

2. Open the WSS site to be copied in SharePoint Designer.

3. In SPD, select the menus options Site Administration Backup Web Site.

4. Choose if you want to include subsites, as well. Click OK, then enter the path where the backup files will be saved, and give the backup file a name. Note that the file type will be Content Migration Package (cmp). Click OK to start the backup process; wait for it to complete, then click OK.

5. The next step is to create an empty site, that is, a site without a site template. You must use the STSADM tool for this. Open a new command window, and type this command to create an empty site with the URL http://srv1/sites/sc2/abc:

        Stsadm --o createweb --url http://srv1/sites/sc2/abc 

6. Open the new site in SPD: click File Open Site and enter or browse to http://srv1/sites/sc2/abc. It will be empty, except for some default folders.

7. Click Site Administration Restore Web Site, then browse to the cmp file you created in step 4; open that file and click OK to start restoring the site.

8. Open the new site in a web browser, and verify that it is correct. The next step is to define the permission settings for the site, since these settings are not restored.

Managing Web Part Zones

You already know that a Web Part must be stored in a Web Part zone. But sometimes you need to add a Web Part to another part of the page. A common example is when you want to add a site tree Web Part to the Quick Launch bar in a team site. To do that you need to create a new Web Part zone. Only SharePoint Designer allows you to create such a zone; no other third-party web design tool knows how do this.

Try It Out Create a New Web Part Zone

1. Log on as an administrator

2. Go to the page you want to add the Web Part zone; for example, http://srv1/SiteDirectory/it.

3. Open this page with SharePoint Designer.

4. Place the cursor where the new zone will be; for example to create the zone in the Quick Launch bar, go to the last action line in that bar, then press Space to get a new row in the Quick Launch bar.

5. Click the menu options Insert SharePoint Controls Web Part Zone. The new zone is added to this location.

6. The next step is adding a Web Part. Use the link on the new zone. Click it to insert a Web Part, and select the Web Part from the Web Part pane on the right of the SPD window. If you need to configure the Web Part, right-click on it and select Web Part Properties.

7. When all the Web Parts you need are added, save this page in SharePoint Designer. Then open it in a web browser and make sure that it works as expected.

8. To delete a Web Part zone, select it by clicking its name, then press the Delete key.

Note that you can create any number of Web Part zones, and they will be resized automatically when you add new Web Parts to them.

Important 

When editing Web Part properties from within SPD, you will not see some properties, such as the current view for lists or libraries. To change the view, open this page in the web browser and edit the Web Part properties there.

Retrieving a Site Summary

Since SharePoint Designer knows how SharePoint works, it can also present a lot of information for a given portal or team site, such as a list of all files, all links, and all pictures. It can run a test to see what pages are slow to load and much more.

Try It Out Create a Site Summary

1. Open the site in SharePoint Designer.

2. Click the menu Site Reports and select:

   1. Site Summary: A summary of the current site (see Figure 13-8).

      
      Figure 13-8

   2. Files: Lists all files, new files, old files, and so on.

   3. Shared Content: Master pages, style sheets, themes, dynamic web templates, and so on.

   4. Problems: Unlinked files, slow pages, hyperlinks, and component errors.

   5. Usage: Displays statistics about the site; it requires that you have activated logging (SharePoint Central Administration Operations Usage analysis processing).

One analysis that this site summary can perform is to test the speed with which your pages load. For example, if you link a lot of external information to your SharePoint pages, you must make sure that it does not take too long to open those pages. Control this by using the Site Summary that displays slow pages, or use Problems Slow Pages to test how long your pages take to load. Note that this page allows you to set the limit in seconds to define what a "slow page" really is.