Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Transcription

1 Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4. Undo 5. Redo 6. Edit hyperlink 7. Remove hyperlink 8. Insert image 9. Insert reusable content 10. Insert table 11. Edit Table 12. Show/Hide gridlines 13. Table operations 14. Merge cells 15. Change column wide and row height 16. Edit HTML source 17. Hide inline styles 18. Left-to-right (justify) 19. Right-to-left (justify) 20. HELP 21. Select formatting element 22. Page content (inline styles) 23. Paragraph format 24. Font 25. Font size 26. Bold 27. Italic 28. Underline 29. Left align 30. Center 31. Right align 32. Numbered list 33. Bulleted list 34. Decrease indent 35. Increase indent 36. Text color 37. Text highlight color 1

2 Use the HTML Editor The HTML Editor feature of Microsoft Office SharePoint Server 2007 is a fullfeatured rich text editor. You can apply formatting styles to text or to content elements by using a menu on the HTML Editor toolbar. You can insert elements, such as tables and lists, by using buttons on the toolbar. You can search your content and even check the spelling of your content, all by using the toolbar. You can also access all of these features by using the keyboard. Insert and edit text The HTML Editor may appear inline, or it may appear in a Web Page dialog box, in a new window. You can type directly in the HTML Editor window as you would in any other text editor. Your text appears in the HTML Editor the way that it appears on the published page. Some features are not available when the HTML Editor appears inline. Copy and paste Copying and pasting text works the same as it does in other rich text editors, except that the HTML Editor offers paste options. When you paste text from the Clipboard and that text is formatted, the Paste Options menu appears. The Paste Options menu offers the following options: Remove Inline Styles This option removes any inline styles from the pasted text. Formatting that is not part of an inline style is left intact. Keep Text Only This option removes any inline styles and any formatting from the pasted text. Keep Inline Styles This option leaves all inline styles and formatting intact in the pasted text. Search for text in your content You can search for text in your content by clicking the Find button. When you click the Find button, a Find box appears, along with a Find Next button. In the Find box, type the text that you want to search for, and then click Find Next. If the text that you typed in the Find box occurs in the content that you are editing, the first instance of that text will be highlighted in the content. Click Find Next again to search for the next instance. NOTE If you move the cursor out of the Find box, the Find command starts searching your content wherever the cursor is located when you click Find Next and does not loop through the content after it reaches the end. To ensure that all of your content is searched, leave the cursor in the Find box when you click Find Next. NOTE inline. Search functionality is not available when the HTML Editor appears 2

3 Check your text for spelling errors You can check your text for spelling errors by clicking the Spell Check toolbar button. When you click the Spell Check button, a new window opens and displays possible spelling errors, along with suggestions for correcting them. Keyboard shortcut To check your spelling, press F7. NOTE Spelling check functionality is not available when the HTML Editor appears inline. Select text or HTML elements and apply formatting or custom styles When you want to change the appearance of text in your page content, you can use formatting and styles. Styles are predefined sets of formatting options that you can apply as if they were one formatting option. For example, you may have a predefined Article Title style that specifies bold, 14-point font, using the Arial font family, with a maroon font color. When you apply the Article Title style to a selection, each of the individual formatting options of the style is applied to the selection. There are two ways that you can select content: You can manually select content, or you can select the HTML elements and the content that those elements contain. Use the mouse or keyboard to select text You can select a block of text by using the mouse or the keyboard. To select a block of text by using the mouse, do either of the following: Drag the mouse pointer to select the text that you want. Double-click the text to select a word, or triple-click the text to select a paragraph, a list item, or a table cell. To select a block of text by using the keyboard, hold down SHIFT and press the LEFT ARROW or RIGHT ARROW key to adjust your selection by one character at a time. Or hold down SHIFT and press the UP ARROW or DOWN ARROW key to adjust your selection by one line at a time. You can also hold down CTRL and SHIFT while you press either the LEFT ARROW or RIGHT ARROW key to select one word at a time. 3

4 Use the Select menu to select HTML elements If you want to select all of the text that is contained by an HTML element, use the Select menu on the toolbar. The Select menu is context-sensitive, so its options depend on the element that the cursor is on. For example, if you click the Select menu while the cursor is on a list item, the Select menu displays these options: Select the formatted content (just the text in the current item). Select the formatting block (the text and the DIV element that contains the text). Select the list item (the list item element, including the text and the formatting block that the item contains). Select the list (all the list items in the current list, including their text and formatting blocks). Select all content (all of the content that is contained in the current HTML Editor window). 1. With the page content open in the HTML Editor, position the cursor in the text of the HTML element that you want to select, and then click Select on the toolbar. 2. Click the Select menu item that best matches the scope of the selection that you want. For example, if the cursor is in the text of a bulleted list item and you want to select the whole list, click Bulleted List. Use the Select menu to ensure that you are formatting or applying styles to specific HTML elements and not just to the text that you see highlighted in the editor window. This helps to keep your styles and formatting consistent. Apply styles by using the Styles menu Whether you select text by using the mouse and keyboard or select elements by using the Select menu, you can use the Styles menu to apply styles that have been defined for your site. Several such styles are installed as part of Office SharePoint Server 2007, and your site administrator or a page layout designer can define custom styles that you can access by using the Styles menu. The Styles menu is context-sensitive. The styles that it displays depend on the selection to which you are applying a style. Apply formatting by using the toolbar buttons You can use the toolbar buttons to apply formatting to a selection. These commands can be accessed by using the mouse or by using keyboard shortcuts. When you apply a format to a selection, it is added to the other formats that are already applied to the selection unless the two formats are incompatible with each other. If any two formats are incompatible for example, they specify two different font colors the second format is applied to the selection. 4

5 Insert and edit tables and other HTML elements You can use the toolbar buttons to insert tables, lists, hyperlinks, images, and reusable content. Reusable content consists of blocks of text and HTML elements that can be inserted into page content. You cannot change the content or structure of reusable content by using the HTML Editor. You can use the HTML Editor to apply styles and formatting to reusable content. Insert and edit a table You can insert a table by clicking the Insert Table toolbar button. When you click Insert Table, a new window opens where you can choose the following table properties: Size properties: Rows Use this property to choose the number of rows. Columns Use this property to choose the number of columns. Specify dimensions Select this check box in order to change the width and height of the table in the Width and Height boxes. Clear this check box if you want the table dimensions to be managed by the server. Width and Height If you selected the Specify dimensions check box, you can choose the Width and Height properties to control the dimensions of the table. Type a number in the Width or Height box, and then click the arrow to select either pixel or percent. For example, to specify that the table should be half as wide as the page, type 50 in the Width box, and then click percent in the list. Format properties: Use Predefined Table Format Select this check box in order to choose a table format from the drop-down list. Office SharePoint Server 2007 provides a number of predefined table formats, and your site administrator can create custom table formats and add them to the list. When you choose a table format from the list, a preview of that format is shown in the Preview box. Clear the Use Predefined Table Format check box to turn off the options in the Format section. No format is applied to the table. Apply special formats to Each predefined table format can contain formatting that applies to the heading row, the last row, the first column, and the last column. Use these four row and column options to specify whether the particular formatting for that row or column is applied. For example, to specify that the heading row is not formatted 5

6 as specified by the predefined table format, clear the Heading Row check box. NOTE These options are available only if the Use Predefined Table Format check box is selected. You can also edit a table to change its size, formatting, and other properties. The best way to edit a table is by using the Cell Menu. To open the Cell Menu, click the arrow at the right edge of the table cell that you are editing. The Cell Menu contains the following commands: Insert Row Above This command inserts a row directly above the cell that you are editing. Insert Row Below This command inserts a row directly below the cell that you are editing. Insert Column Left This command inserts a column directly to the left of the cell that you are editing. Insert Column Right This command inserts a column directly to the right of the cell that you are editing. Delete Row This command deletes the row that contains the cell that you are editing. Delete Column This command deletes the column that contains the cell that you are editing. Merge Cell This command merges the cell that you are editing with the cell to its right, or, in right-to-left languages, the cell to its left. Split Cell This command splits the cell that you are editing and places the cursor in the left-most cell that results. Height and Width This command opens a dialog box that allows you to change the row height and column width of the row and column that contain the cell that you are editing. Edit Table This command opens a dialog box that allows you to change any of the properties of the table that contains the cell that you are editing. You can also perform all of the Cell Menu actions by using the toolbar buttons. Insert a list You can insert a list by clicking the Numbered List or Bulleted List toolbar button. Keyboard shortcut To insert a numbered list, press CTRL+SHIFT+E. To insert a bulleted list, press CTRL+SHIFT+L. 6

7 Insert a hyperlink You can insert a hyperlink by clicking the Insert Hyperlink toolbar button. Keyboard shortcut To insert a hyperlink, press CTRL+K. When you insert a hyperlink, the Edit Hyperlink Properties Web Page dialog box opens. In the Selected URL box, you can type a URL or click the Browse button to browse to an item or document in your site. Select the Open Link In New Window check box to open the hyperlink in a new window. If this check box is cleared, the hyperlink will open in the same window. Select the Display link with icon check box to display an icon in front of the hyperlink text. This is done by adding an image tag (<IMG>) at the beginning of the link. By default, the icon that is displayed reflects the type of document that the hyperlink points to, but you can later change the image that is displayed by editing the source attribute of the image tag (<IMG src=>). If the Display link with icon check box is cleared, the hyperlink is displayed as hyperlink text. In the ToolTip box, you can type text that will be displayed when the mouse pointer rests on the hyperlink. This text is saved as the title attribute of the hyperlink's anchor tag (<A title=>). In the Bookmark section, in the Name box, you can type a name for the hyperlink. This name is saved as the ID attribute of the hyperlink's anchor tag (<A id=>). Use this to create a bookmark on the page that you can link to from other pages or from elsewhere on the same page. You can edit an existing hyperlink by using the same toolbar buttons or by pressing CTRL+K when the hyperlink that you want to edit is selected. Delete a hyperlink To delete a hyperlink, do the following: 1. Select the link that you want to delete by using the Select menu. 2. Do one of the following: Press DELETE or BACKSPACE. Click the Remove Hyperlink toolbar button. 7

8 Insert an image You can insert an image by clicking the Insert Image toolbar button. Keyboard shortcut To insert an image, press CTRL+SHIFT+G. When you click the Insert Image button or press CTRL+SHIFT+G, the Edit Image Properties Web Page dialog box opens. Click the Browse button to browse through the available images. When you click Browse, the Select an Image Web Page dialog box opens and displays the images that are stored in the Publishing Images library of the site that contains the page content that you are editing. Click an image, and then click OK to insert that image. You can type alternate text for the image in the Alternate Text box. Alternate text is read by screen readers in lieu of displaying the image and is displayed in the browser if the image cannot be rendered by a visitor's Web browser. Select options in the Layout section to specify the alignment, border thickness, and spacing of the image. Select options in the Size section to specify the size of the image. You can specify that the image will be displayed at its default size, or you can choose the display size in pixels. If you specify the display size, you can choose both the height and width of the image or choose to maintain its aspect ratio (preserve the ratio of height to width). When you finish editing the image properties, click OK. You can edit an existing image by using the same toolbar button or by pressing CTRL+SHIFT+G when the image that you want to edit is selected. Insert reusable content You can insert reusable content by clicking the Insert Reusable Content toolbar button. After you insert reusable content, you can change its position on the page and its size and apply styles and formatting option. To change the position or size of the reusable content, click the content and use its frame to adjust its position or size. To apply styles or formatting options, click the reusable content, click the Select menu, and then click Bulleted List. You can then apply styles by using the Styles menu and apply formatting options by using the toolbar buttons or keyboard shortcuts. For more information about reusable content, see the article Use Reusable Content. 8

9 Use HTML source editing mode You can switch from text editing to HTML source editing at any time by clicking the Edit HTML Source toolbar button. HTML source editing mode is useful for changing the attributes of the HTML elements in your content. When you are in HTML source editing mode, the HTML Editor window displays your content in HTML, and most of the toolbar buttons are disabled. You can edit the HTML source by using standard HTML tags and syntax. The HTML Editor supports the HTML version 4.01 Transitional standard. 9