Creating and Modifying Web Pages in Microsoft SharePoint Designer 2010

Chapter at a Glance

With Microsoft SharePoint Designer 2010, you can create a number of different file formats, some of which you might not consider to be Web pages—for example, text and cascading style sheet files and others you might not have heard about before reading this book. Chapter 1, “Exploring SharePoint Designer 2010,” explored one file type—the Wiki page. You might also be familiar with Web Part pages and, if you use Microsoft SharePoint Server, publishing pages. Publishing pages are detailed in Chapter 13, “Managing Web Content in the SharePoint Server Environment .”

This chapter focuses on Wiki pages and Web Part pages, building on the information in Chapter 1. You’ll learn to use the SharePoint Designer ribbon to add static content such as text, ScreenTips, hyperlinks, and images. You’ll learn that Wiki pages and Web Part pages are instances of Microsoft ASP NET 2.0 content pages and that any SharePoint content page can contain one or more Web Parts. You’ll also learn how to change the appearance of a Web page by adding Web Part zones, the containers for Web Parts. And you’ll learn to manage Wiki pages and Web Part pages by applying permissions, manipulating the versions of these pages, and deleting pages.

Inserting Text, ScreenTips, Hyperlinks, and Images

The browser is the main Web content editing tool for SharePoint. You can complete similar activities using SharePoint Designer in Design view. The standard Windows application shortcuts for the Copy, Cut, Paste, and Undo commands work in SharePoint Designer as they do in any other Windows-based program. However, when you paste contents from other programs, such as Microsoft Word, use the Paste Text command, which you can find by clicking the arrow on the Paste command in the Clipboard group on the ribbon, and then add your own formatting. Formatting from other programs can be verbose and might not generate the most efficient Web code.

You can add components, such as text, images, hyperlinks, ScreenTips, and alternate text. ScreenTips are useful because they provide information when users point to hyperlinks. Alternate text allows you to define text that is displayed if an image does not load or if users are unable to see images. Append a period to the end of the words you enter so that users who listen to screen readers are able to understand your pages more easily, especially when two alternative text tags are next to each other.

SharePoint Designer provides a number of tools to manage the graphics that you include on pages:

• Image conversion When you insert an image that is not a GIF or JPEG, SharePoint Designer by default converts the file to GIF or JPEG format, depending on the number of colors in the original image. After you insert an image, you can reformat it in SharePoint Designer by using commands on the Picture Tools, Format tab and in the Picture Properties dialog box.

• Auto thumbnail You can tell SharePoint Designer to create a small version of an image—a thumbnail—and link it to th e full-size image that it represents by right-clicking an image and then clicking Auto Thumbnail. Alternatively, select the image and press Ctrl+T.

For prototyping purposes or for images on team sites, the image manipulation capabilities in SharePoint Designer should be adequate, but if you are producing a public-facing site, you might want to obtain a third-party image-editing tool. Ideally, you should resize image files in an image-editing program before inserting the images into pages, because when you resize an image by using HTML tag attributes, the original image file is downloaded to the user’s computer, even though the browser renders the image file at a smaller size. This can cause a page to take more time than necessary to load the page.

In this exercise, you create a new page based on the home page of a team site. You then add text and quickly format it by using the commands on the Home tab. After adding a hyperlink to the text and associating a ScreenTip with the hyperlink, you will configure the hyperlink so that a new browser window opens when a user clicks the hyperlink.

SET UP

Using SharePoint Designer, open the team site you created and modified in earlier chapters. If you did not create a team site, follow the steps for creating the site in Chapter 1. The site settings page should be displayed in the workspace.

1. In the Navigation pane, click Site Pages.

   The Site Pages gallery page is displayed in the workspace.

2. Click the icon to the left of Home.aspx. On the Pages tab, click Copy and then click Paste in the Clipboard group.

   The file Home_copy(1).aspx appears in the Site Pages gallery page.

3. On the Pages tab, click Edit File to open the page in edit mode, and then click the arrow to the right of Navigation on the Navigation pane.

   The Navigation pane collapses, providing you with more area in the workspace to modify the page.

4. Right-click anywhere within the PlaceHolderMain region, and then click Zoom to Contents.

   

   Only the code that is contained within the EmbeddedFormField control is displayed.

5. Select the text Welcome to your site!, and type Wide World Importers Human Resources team site.

   An asterisk appears on the Home_copy(1).aspx tab, indicating that the page has changed but that you have not saved your changes. This type of page is commonly referred to as a dirty page.

6. Select the text Wide World Importers Human Resources team site. On the Home tab, click the Bold button in the Font group, and then click the Center button in the Paragraph group.

7. Select the text Wide World Importers, and then on the Home tab, click Hyperlink in the Paragraph group.

   TIP

   There is also a Hyperlink command on the Insert tab in the Links group.

8. In the Insert Hyperlink dialog box, click ScreenTip.

   The Set Hyperlink ScreenTip dialog box opens.

9. Under ScreenTip text, type text that describes the Web site, such as Wide World Importers’ intranet site, and then click OK to close the Set Hyperlink ScreenTip dialog box.

10. In the Address box in the Insert Hyperlink dialog box, type the URL of a Web site, such as http://wideworldimporters, and then click Target Frame.

    The Target Frame dialog box opens.

11. In the Common targets list box, select New Window, and then click OK.

    The Target Frame dialog box closes. The Target Frame area at the bottom of the Insert Hyperlink dialog box displays_blank.

    

    TIP

    Your company might have a policy about when a new browser window should be opened. Generally, you should open a new browser window only in scenarios in which you display a printable version of a Web page or large images. You can find expert usability references on this topic at www.sitepoint.com/article/beware-opening-links-new-window/ and by using the search keywords opening, new, browser, window, usability.

12. Click OK to close the Insert Hyperlink dialog box.

    The Insert Hyperlink dialog box closes. The text Wide World Importers is highlighted, and on the Quick Tag Selector, the orange <a> tag appears.

    TIP

    If the orange <a> tag does not appear on the Quick Tag Selector, click elsewhere on the page, and then click the text Wide World Importers.

13. On the Quick Access Toolbar, click Save.

    A Microsoft SharePoint Designer dialog box opens, warning you that SharePoint may have removed unsafe content.

    

14. Click Yes to reload the page within the editor page.

    The page refreshes, and no asterisk appears on the Home_copy(1).aspx tab.