Use the commands in this group to save and close the page, save and keep editing the page, and stop editing the page, which means any changes you make to the page will be lost. The other two commands in the Save & Close drop-down list—Edit and Edit In SharePoint Designer—are inactive. These commands are available on the Page tab, when the page is not in Edit mode.

The other set of commands in this group can be used to check out the page. Any team member mapped to the contribute permission level, which on most Team Sites is most users, can amend the wiki pages of the site. When you edit a page, you should always check it out before you modify the content. This prevents other users in your team from editing the page at the same time. Once the page is checked out, the Check In, Discard Check Out, and Override Check Out commands are available.

Check Out locks the page so other contributors cannot edit the page; however, while the page is checked out to you and in Edit mode, you will be the only person to see the changes that you’re making to the page.

Use the commands in this group to cut, copy, paste, undo, and redo your modifications. These commands are placed in a group named Clipboard because they use your computers clipboard feature; therefore, you are able to copy and paste content from other applications and websites. The paste command, by default, maintains the formatting from the copy or cut source. To paste the unformatted text, click the down-arrow on the Paste command button, and then click Paste Plaintext. When pasting content from other programs, such as Microsoft Word, the formatting instructions can be verbose and might not generate the most efficient HTML code; therefore, use the Paste Text command, unless you specifically created the text in Word to generate the formatting you required, such as a table.

As with other Microsoft applications, you can use the standard shortcut key combinations to complete these commands; for example, press Ctrl+C to copy selected text, and Ctrl+V to paste the copied text. Use Ctrl+Z (undo an action) and Ctrl+Y (redo an action) to cycle through the history of changes. If you do inadvertently paste content with the format and later decide that you want to remove that format, use the Clear Format (Ctrl+Space) command in the Font group.

Use the set of commands in this group as you would in other Microsoft Office applications to change the font face, font size, font color, as well as formatting text to a specific style—bold, italics, underline, strikethrough, subscript or superscript—just as you would in Word, for example.

Use the commands in this group, which again are similar to those you would find in Word, to arrange the text on the page as bulleted lists, numbered lists, to increase or decrease the indent level, and align a paragraph Left, Center, Right or Justify. You can also choose to display the paragraph for the selected text so that it displays in left to right or right to left reading order. This is primarily used for languages that read right to left.

Use this method of formatting text in preference to the commands in the Font group to consistently apply styles across all wiki pages in your site. Select the text that you wish to format, and then use the Styles drop-down list to select a style. Similar to any Office 2010 application, a preview of the styling is provided when you hover over the style command, as shown in Figure 6-4.

Figure 6-4. You can apply a style to text by using the Styles command. Hovering over an item in the list displays a preview of the text formatting.

The drop-down options for both the Styles command and the Markup Styles command in the Markup group are populated dynamically by client-side code using Microsoft ASP.NET Ajax and the CSS classes that are available for the wiki page when you place it in Edit mode. For each style that appears in the Styles drop-down list, there is a matching CSS class in the corev4.css with a name. ms-rteStyle-SSSS, where SSSS is the style name in the drop-down list; for example, .ms-rteStyte-Highlight. The CSS for this style is shown in the following code sample:

.ms-rteStyle-Highlight
{
  -ms-name:"Highlight";
  /* [ReplaceColor(themeColor:"Dark1-Darker")] */
  color:#312a26;
  /* [ReplaceColor(themeColor:"Accent6")] */
  background-color:#fae032;
}

When you create a Team Site, the home page, with the Rich Content area, has two rich text editing areas (also known as divisions) structured as two columns. Use the Text Layout command in the Layout group to create additional editing areas and to change the structure of your page. You can reformat the page by using any of the eight options shown in Figure 6-5. A thumbnail to the left of each option provides a view of the editing areas and structure that will be applied to the Rich Content area when selected.

Figure 6-5. Text Layout options.

The Layout group and the Text Layout command are not available when you add content to a CEWP. The Rich Content area of a wiki page is created by using a SharePoint control named EmbeddedFormField, with which you can modify the layout of the wiki page by using the Text Layout command. This command creates the rich text editing areas and the layout you choose by using HTML <TABLE> and <DIV> tags. The rich text editing areas are not Web Part zones.

When you select a layout that has fewer rich text editing areas than the current layout, then the content from the area not included in the layout is combined into an area that is included in the layout.

This ribbon group provides four commands:

Click the down-arrow on the Table command to add an HTML table. You can use the grid provided to quickly create a table by dragging the mouse across the grid to select the number of columns, and then drag the mouse down the grid to select the number of rows. On the Table drop-down menu, you can also click Insert Table, which displays a dialog in which you can type the number of columns and rows that you need.

Once the table is created, an additional tab set, Table Tools, is added to the ribbon. This contains two tabs, Layout and Design, as shown in Figures Figure 6-8 and Figure 6-9.

Figure 6-8. The Layout tab in Table Tools.

The Layout tab consists of four groups:

Figure 6-9. The Design tab in Table Tools.

The Design tab contains two groups:

Click the Picture command down-arrow to insert a picture from your computer or to reference a web address where a picture is currently stored. No longer do you need to upload your images prior to editing the page. Using the first option, the Select Picture dialog opens in which you can now both upload and add an image to the page with one click of the mouse. Use the Select Picture dialog box to browse to the location on your computer where the picture is stored. You can then select a library on your site where you want to upload the picture. By default the Site Assets library is chosen. The Site Assets library is the location where site supporting files, such as images displayed on pages, CSS files, or JavaScript files should be stored. Do not combine team documentation with files that are needed to brand a site.

If the image is already uploaded into a library, then the Picture, From Address drop-down menu option opens the Select Picture dialog, where you need to manually type or paste the URL of the image. The dialog does not provide any browse button with which to navigate to the library where the picture is stored. To guard against you typing the incorrect URL of the image, which would result in a broken link, it is easier to open another browser window, navigate to the picture and copy the URL, and then paste the URL into the Select Picture, Address text box.

Once an image is added to a page and that image is selected, the Picture Tools contextual tab set appears, as shown in Figure 6-10. When a picture is selected, you can press the Delete key to remove it from the page.

Figure 6-10. The Design tab in Picture Tools.

This Picture Tools tab set contains one tab, the Design tab, which contains five ribbon groups:

On the Insert tab, in the Links group, two commands are provided: the Link command and the Upload File command.

You use the Link command to associate a hyperlink with text on the page so that when you click the text you are directed to the page associated with the hyperlink.

The Insert Hyperlink dialog does not provide you with any options to configure the hyperlink to open in a new browser window; therefore, when the user clicks the hyperlink, he is redirected from the wiki page and will need to use the browser’s back button to return to it. However, once you add a link to the wiki page, the Format tab within the Link Tools tab set is displayed, which you can use to remove the link, edit the URL, display an icon to the left of the hyperlink and configure the hyperlink so that when a user clicks it, the page that the hyperlink is pointing to is displayed in a new tab, and the user is not redirected from the wiki page. You can also associate a description with the hyperlink which displays when a user hovers over the hyperlink. This is sometimes known as a ScreenTip; you should configure this for accessibility reasons.

You can use the second command in the Links group, the Upload File command, to upload a file and store that file by default into the Site Assets library, in one action, and then create a hyperlink pointing to the file that you have just uploaded. An icon appears to the left of the hyperlink, indicating the type of file the hyperlink points to.

If you want to create a link to an existing wiki page, it is easier to use a method known as wiki links or forward links than it is to use either of the two commands on the Links tab. You’ll read more about wiki links in the section Creating Wiki Pages, later in this chapter.

This group provides commands to insert Web Parts into your wiki page. When you click the Web Part or Existing List commands, the Web Parts pane is displayed at the top of the page, below the ribbon, as shown in Figure 6-11.

Figure 6-11. Inserting Web Parts into a Wiki Page.

Web Parts, if not fully tested, can cause a page to not display in the browser. If this occurs, append ?contents=1 to the page’s URL to navigate to the page’s Web Part Page Maintenance page, where you can close, reset, or delete the offending Web Part. You can use this page to delete all Web Parts from the page.

The two most commonly used types of Web Parts via the browser are:

You can use the third command in the Web Parts group, New List, to create a list or library and then insert a Web Part that displays the contents of that list or library, all in one action.