Chapter 13: SharePoint Designer 2007

SharePoint is built to allow an ordinary user with the proper permissions to easily change the layout of sites without any extra tool besides the web browser. This feature is very important since it makes it possible for nondevelopers to quickly adjust a portal site or a team site to their own needs. No web designer or administrator is required for this task. The key to this functionality is the use of Web Parts and their Web Part zones in SharePoint web pages; just add any new Web Part needed to the preferred location on the page. In order to allow this, SharePoint has specially constructed Web Part pages, also known as Smart Pages, and every MOSS site and WSS site is built upon such Web Part pages.

However, sometimes it may be necessary to do more modifications than are possible using a web browser; this is where SharePoint Designer 2007 comes in. This program was especially designed with SharePoint 2007 in mind and has a lot of features for enhancing the look and feel of SharePoint sites. No other design tools for web sites have this functionality, so even if you today prefer other design tools, you will need to use SharePoint Designer when it comes to SharePoint.

When SharePoint 2003 was released, it requested FrontPage 2003 for this type of customization. SharePoint Designer 2007 is the next generation of FrontPage and now contains a lot more functionality that did not exist in FrontPage, such as Master Pages and page layout files. FrontPage simply does not understand how SharePoint 2007 works, so you should avoid customizing SharePoint 2007 with FrontPage 2003. If you are serious about getting the most out of SharePoint 2007, then you need to understand SharePoint Designer. This chapter will help you understand how to use this tool for customizing any type of MOSS 2007 or WSS 3.0 site.

Why SharePoint Designer 2007?

The big question is of course why you need SharePoint Designer. What does it allow you to do that cannot be done using a web browser? The answer is: A lot! In fact, most of the things you can do with the web browser, such as adding and managing Web Parts, can also be done in SharePoint Designer, and more. Here is a quick list of things that SharePoint Designer allows you to do with SharePoint 2007 web sites:

• q Manage Master Page files.

• q Manage page layout files.

• q Create workflows for SharePoint lists and libraries.

• q Add new Web Part zones.

• q Add some special Web Parts.

• q More advanced formatting of lists.

• q Add extra links in the Quick Launch bar, and the title bar.

• q Add buttons and tabs.

• q Add background pictures.

• q Create new site themes.

• q Install special SharePoint packages.

• q Back up and restore individual team sites.

And there is more. Note that only SharePoint Designer 2007 has this SharePoint 2007 integration. SharePoint Designer 2007 is not only the recommended web design tool for SharePoint 2007, but it will also work with the previous versions of SharePoint 2003. Therefore, if you have a mixed SharePoint 2007 and 2003 server environment, you will only need one single design tool. SharePoint Designer 2007 is also enhanced in many ways over FrontPage and offers more functionality, while still being easy to work with.

Even though SharePoint Designer 2007 (from now on, referred to as SPD) is a general design tool for standard web sites, it has special features when editing a SharePoint site. You will need to have some basic understanding of SharePoint Designer in order to start using it with SharePoint. The sections below describe the basic features of SharePoint Designer and to work with them. Later on you will see detailed steps on how to add and modify the site with SharePoint Designer.

Opening Sites with SharePoint Designer

SharePoint Designer is like all other editors; either you open an existing file and modify it or you create a file from scratch. However, when using SPD for editing SharePoint sites, you don't normally start by creating a site. It is much easier to create the SharePoint site the normal way, then open it in SPD and start editing. You have several options to open an existing SharePoint site, depending on whether it is a MOSS site or a WSS site:

• q Any site type: Start SPD with Start All Programs Microsoft Office Microsoft Office SharePoint Designer 2007, and connect it to a SharePoint site by selecting File Open Site and entering the URL to that site; then open the content page you want to see, usually Default.aspx.

• q Master Pages & page layouts: Open the page library in SharePoint 2007, then in the page files quick menu: select Edit in Microsoft Office SharePoint Designer.

• q WSS Site: Open the site you want to modify in Internet Explorer (IE), and then select Edit with MS Office SharePoint Designer. In IE 6 you find this option under the File menu; in IE 7 it is under the Page menu.

Important 

The Edit option is, by default, disabled in IE 7. Enable it by selecting the menu options Tools Internet Options, switch to Advanced tab, and disable "Disable script debugging (Internet Explorer)."

The last method is of course easiest, since you don't have to enter the site URL, but it requires that SharePoint Designer be the default web editor on your computer. Either way, SharePoint Designer will load the SharePoint site and display its content, showing much more detail than even design mode using Internet Explorer (see Figure 13-1 for an example of how a WSS site looks).

Figure 13-1

SharePoint Designer's Display Modes

When working with a design tool such as SharePoint Designer, you will sometimes need to see the code behind a page, and sometimes see the page layout. SPD fulfills this need by having several display modes that will present different types of content. Whenever necessary, you can switch between these display modes. Look at the bottom line of Figure 13-1; it lists these displays options:

• q Design: Shows the graphical presentation of the current site in real time. It will also show the content of many Web Parts and lists. Figure 13-1 uses this mode to display the IT team site.

• q Code: Will show the code behind the page.

• q Split: Will show both the graphical design and the code behind. If you select an object in the graphical part, SPD will highlight the code for that object. For example, look at Figure 13-2 where the Web Part displaying the WSS logo is selected and its code is automatically marked.

Figure 13-2

Important 

Press F12 to open a preview window. This will save and then display the page as it will be shown when opened in a web browser.

The two most useful modes are design and split. Design mode is very handy when you want to see exactly what part of this page you are working with, but the code part in the split mode gives you control of the exact location when managing objects on the page, while you still see the graphical representation of the page.

Modifying the Site

Use the menus and toolbar buttons to add, delete, and modify the SharePoint site. For example, if you want to add a Web Part you select the Web Part zone in the design mode and click on the menu Insert SharePoint Controls Web Part.

By default, SPD will display a number of panes on both sides of the page; these contain different information, such as Folder list, CSS properties, Tool box, and Styles. You can close any one of these or add new panes, such as a list of available Web Parts. If you open more than one site, web page, or layout file, they will be displayed as tabs at the top of the SPD window. If any of these tabs shows an asterisk (*) the page is modified but not saved. To close any of the tabbed pages, open it and click the X at the far right of the tab bar.

You can also modify the code directly. For example, if you want to display a frame around the content part of a page, search for the text PlaceHolderMain using Edit Find (or press Ctrl+F) and change the border property from 0 to 10 in the line under PlaceHolderMain; the result will immediately be displayed in the Design window.

If you know HTML and ASP.NET programming, you will have full control of this page. However, you must also understand how SharePoint's object model works in order to make changes. To add your own code, use the code or split display mode.

Saving Your Work

When working with a SharePoint site, it is only a copy; that is, you can make and test whatever modifications you want on the site, but they will not be stored in SharePoint unless you save the changes in one of these ways:

• q Select File Save (or click the Save button on the toolbar).

• q Press the F12 key. It will save the current modification and display the result using Internet Explorer.

Depending on the type of modification, when saving a SharePoint page, you may see a Site Definition Page Warning dialog box (see Figure 13-3), telling you that this site will now be customized, which is also known as "unghosted;" more about this later in this chapter. If you want to save the modified page then you must click Yes.

Figure 13-3

Important 

As long as you don't close SharePoint Designer, you can undo any changes and then save the site. This way, you can restore a site from a modification that you happened to save but don't want to keep anymore.

Differences between MOSS and WSS Sites

When using SharePoint Designer for editing SharePoint, you must be aware that there is a difference between MOSS sites and WSS sites. The big difference when it comes to customization is that MOSS sites are built using Publishing Pages, that is, the content of each MOSS site is stored in a Page file, which in turn is built upon a layout file; these Page files and layout files are stored in page libraries in the MOSS site. The content of all WSS sites, on the other hand, is built upon a shared Default.aspx file, stored in the file system (see Chapter 12 for more about site definitions). This file contains the page layout, but the actual content is stored along with the site in the content database. That is why a MOSS site must be treated differently than a WSS site when customizing with SharePoint Designer:

• q Master Pages: Define the chrome of the site (the top menus, and Quick Launch bar, plus bread- crumb links, logotypes, fonts, and colors for this part of the page); see Figure 13-4. All Master Pages are stored in a "Master pages and page layout" gallery, accessible only from the top site in a site collection (In the "Galleries" on the Site Actions Site Settings Modify All Site Settings page). Both WSS and MOSS use Master Pages.

  
  Figure 13-4

• q MOSS Publishing Pages: Contain the content displayed on the site. They are stored as page files in the local site (Open the site: click View All Site Content Pages). Each of these page files is associated with a special type of content type called a "layout file," see below. Normally you do not change the content of a Publishing Page by using SPD; instead, use Site Actions Edit Page in the web browser.

• q MOSS Layout Files: A content type that is stored in the "Master pages and page layout" gallery (see Master Pages above). The layout file governs how the content will be displayed, for example where the text body and images will be located on the content page.

• q WSS Sites Content Pages: To change the layout of this page, either change the shared Default.aspx file, stored on the SharePoint server's file system (see the section about site definitions in Chapter 12) or use SharePoint Designer to change the layout. But this will also "unghost" this page (see next section for more information about this).

In other words: if you need to customize the look and feel of a SharePoint site, you must know if it is a MOSS site, or a WSS site. You must also understand that the chrome of a site is governed by Master Pages. For example if you need to customize the look of an intranet based on MOSS sites, you customize the Master Page file regarding chrome features like navigation, and top menus, and you will customize the page layout files when you need to change the way the content of this MOSS site looks.

Customizing a WSS site is almost the same: Modify the Master Page for the chrome features, and open the WSS site in SharePoint Designer when you need to modify the layout of the content part of the site. An alternative is to create a new site definition instead of modifying the layout of the site.

Ghosting and Unghosting

As described in Chapter 12, all SharePoint sites are defined by one or more files stored in the file system on the SharePoint server, such as Default.aspx. For example, all WSS team sites are built upon this file:

     \Program Files\Common Files\Microsoft Shared\Web Server↩     Extensions\12\TEMPLATE\Site templates\STS\Default.aspx 

Even if you have 300 team sites, all of them will be built on this Default.aspx file. This makes it fast to open team sites, and it also saves a lot of space, since there is just one copy of the site definition. This is called "ghosting."

When you modify any team site by using SPD, SharePoint must store the complete site definition, including all its content, in the SQL database; the site now is "unghosted." The consequences of unghosting SharePoint sites are that it will require more space in the database and it will take slightly longer to load such a site, compared to a ghosted site. But in reality you must have thousands of SharePoint sites and/or a lot of users before anyone will ever notice any difference. I have never met a SharePoint administrator who actually had any real performance problem because of unghosting, so do not hesitate to use SharePoint Designer for editing these SharePoint sites.

There is one important thing about unghosted sites that may prohibit you from using SPD in some situations: An unghosted site will no longer be connected to the original site definition. If that site definition is modified, it will not affect unghosted sites, since they store their individual site definition. For example, say you have 2,000 WSS sites, all ghosted, and you want to change the configuration of the Web Part zones used by these sites. Simply edit the site definition stored in the file system of the SharePoint server, and all 2,000 sites are updated. This will not happen if those 2,000 sites are unghosted. In that case, you need to update them individually. In other words, if you believe that you may need to change the content layout for multiple WSS sites sometime in the future, then you should consider creating a new site definition for those WSS sites.

If you need to prohibit anyone from modifying SharePoint team sites with SharePoint Designer 2007 you can edit the Onet.xml file in the STS\XML structure as shown in the following Try It Out.

Try It Out Prohibit the Use of SharePoint Designer to Edit SharePoint Sites

1. Log on to the SharePoint server, as an administrator.

2. Navigate to this folder:

        \Program Files\Common Files\Microsoft Shared\Web Server↩     Extensions\12\TEMPLATE\Site Templates\STS\XML\Onet.xml 

3. Edit Onet.xml with Notepad.

4. Locate a line near the top that begins with:

        <Project Title="$Resources:onet_TeamWebSite 

5. Add the following text: DisableWebDesignFeatures="wdfopensite" near the end of that line, just after the text Microsoft SharePoint. The complete line then looks like this:

        <Project Title="$Resources:onet_TeamWebSite;" Revision="2"↩     ListDir="$Resources:core,lists_Folder;" xmlns:ows="Microsoft SharePoint";↩     DisableWebDesignFeatures="wdfopensite"><!-- _locID@Title="camlidonet1"↩     _locComment="{StringCategory=HTX}" --> 

6. Reset IIS with Start Run: IISRESET.

7. Test your work by opening any team site in SharePoint Designer. It will display a dialog stating that SharePoint Designer cannot edit the site (see Figure 13-5).

Figure 13-5