Creating and Modifying Web Pages in Microsoft Office SharePoint Designer 2007

1/9/2008

Contents

Creating a Basic Meeting Workspace Site
Creating a Web Part Page by Using a Browser
Creating an ASP.NET Page
Inserting a Web Part Zone
Adding a Web Part and Modifying Web Part Properties
Attaching a Master Page
Creating a Web Page from a Master Page
Deleting a Web Page
Key Points

Adding a Web Part and Modifying Web Part Properties

Managing Web Parts in SharePoint Designer is very similar to managing Web Parts by using the browser. In the browser, when you edit a page and add a Web Part, you can choose the Advanced Web Part Gallery And Options to open the Add Web Parts tool pane. SharePoint Designer has a similar interface: the Web Parts task pane. The only difference is that, in the browser, you are presented with three galleries, whereas in SharePoint Designer, you see only two because Closed Web Parts are displayed on the page as an opaque image, instead of being listed in the Closed Gallery as they are in the browser. (A Web Part gallery is a collection of Web Parts.)

In SharePoint Designer, the two galleries are as follows:

[site name] Gallery. In our example, this is Teams Gallery. The number of Web Parts listed in the [site name] Gallery varies based on the definition of the site and the features that are activated on that site. The Web Parts listed in this gallery can be managed at the site collection level, where it is known as the Web Part Gallery.
Server Gallery. This gallery contains Web Parts that a SharePoint Administrator has added to the server farm by using the command-line tool stsadm. This gallery is sometimes referred to as the central Web Part Gallery.

The Web Parts in the galleries act as templates from which you create instances of these Web Parts on your page. The template of the Web Part remains in the galleries for you to use again. You can configure each instance of a Web Part differently; in fact, as soon as you add an instance of a Web Part to a page, you should alter the title of the Web Part to reflect its use.

You can add the same Web Parts to a page by using either SharePoint Designer or the browser. There are two types of Web Parts:

List View Web Parts (LVWPs). Web Parts that display the contents of lists and libraries. Each time the data within the list or library changes, the changes are reflected in the LVWP. You will see LVWPs for lists and libraries for the site you have open in SharePoint Designer, and you will see LVWPs for lists or libraries created in other sites.
Built-in Web Parts. A Microsoft Windows SharePoint Services 3.0 installation has eight built-in Web Parts: Content Editor Web Part (CEWP), Form Web Part, Image Web Part, Page Viewer Web Part, Relevant Documents, Site Users, User Tasks, and XML Web Part. Microsoft Office SharePoint Server 2007 includes more than 50 additional built-in Web Parts, including Business Data List, Content Query Web Part (CQWP), Current User Filter, Excel Web Access, Key Performance Indicators, Search Box, and SQL Server 2005 Analysis Services cubes. A detailed description of these Web Parts is outside the scope of this book.

Using SharePoint Designer, you can also create a Data View Web Part (DVWP), also known as a Data Form Web Part (DFWP), which you can use to display and modify lists and libraries, as well as other data sources.

Web Parts are further classified by their location, as follows:

Dynamic Web Parts. These Web Parts are placed in Web part zones by using either SharePoint Designer or the browser. (When using the browser, you can add Web Parts only to Web Part zones.) Dynamic Web Parts are stored separately from the page, and only when a user requests the page is the SQL Server content database queried to find out the number of dynamic Web Parts, what they are, and in which Web Part zone they should be placed. They are then merged with the master page and content page.
Static Web Parts. These Web Parts are placed outside of Web Part zones by using SharePoint Designer. They cannot be customized by using the browser. Static Web Parts are stored as part of the page and can be added to both master pages and content pages.

In this exercise, you will add, modify, and delete a Web Part.

In the Header Web Part zone, click Click to insert a Web Part.

The Web Parts task pane opens.
Point to the icon to the left of the Image Web Part. You may need to click the Next link in the Web Parts task pane if you cannot see the Image Web Part.

Four-Way Arrow Pointer

The mouse pointer changes to a four-headed arrow.
Drag the Web Part to the Header Web Part zone.

Add Pointer

As you move the Web Part, the pointer changes to an arrow with a plus sign (+) enclosed in a square. SharePoint Designer redisplays the page with the Image Web Part placed in the Header Web Part zone.
Double-click the Image Web Part to open the Image Web Part dialog box.
In the text box below Image Link, type /_layouts/images/homepage.gif, and in the Alternative Text text box, type Consolidated Messenger Teams logo.

TIP

You do not have to type the URL of the image file. You can click the ellipsis button below Image Link to open the Edit Hyperlink dialog box, from which you can navigate to the image file that you want to use.
Expand the Appearance section. Then in the Title text box, type Teams Logo.
Click OK to close the Image Web Part dialog box.

The Image Web Part displays the Microsoft Windows SharePoint Services logo.
Drag a second Image Web Part on top of the first Image Web Part.

The two Web Parts should display side by side.
Click the Left Web Part zone. In the Web Parts task pane, click Content Editor Web Part. Then at the bottom of the Web Parts task pane, click Insert Selected Web Part.
In the Content Editor Web Part, select the text To add content, select this text and replace it by typing or inserting your own content, type Consolidated Messenger is one of the leading courier and parcel delivery services, and then press to move to a new line.
Select the sentence you just typed, and on the Common toolbar, in the Styles list, click Heading 3.
On the Common toolbar, click the Center alignment button.

Center

TIP

You can use the Common toolbar buttons and Design view to edit the contents of the Content Editor Web Part in a WYSIWYG manner. To enter HTML source code or JavaScript, use Code view.
Right-click the Content Editor Web Part, and then click Web Part Properties to open the Content Editor Web Part dialog box.
Expand the Appearance section, and in the Title text box, type Who Are We.
In the Chrome Type list, click None.
Click OK to close the Content Editor Web Part dialog box.
On the Common toolbar, click the Save button, and then press . If prompted, type your user name and password, and click OK.

Save

A browser window opens, with Consolidated Messenger Parcel Delivery in the program window title bar and displaying the ParcelDelivery.aspx page. There is no SharePoint look and feel to the page.