Editing Web Page Content in OpenText Using the TinyMCE Text Editor

Transcription

1 FLORIDA GULF COAST UNIVERSITY Editing Web Page Content in OpenText Using the TinyMCE Text Editor 4/4/2014 The department of Web, E-learning, and Publications (WEP) utilizes a text editor within the OpenText Web Content Management System (CMS) called TinyMCE. The TinyMCE text editor is compatible with Internet Explorer, Firefox, and Safari on Windows and Macintosh computers. This document assumes that you already know how to open a Web page in OpenText for editing. 1

2 Contents Basic Tips on Writing for the Web... 3 TinyMCE Tools and their Functions... 5 Common Editing Tasks with TinyMCE... 8 Adding Text into the Editor... 8 Pasting Text... 8 Formatting Text... 8 Section and Sub-section Headings... 8 Lists... 9 Removing Formatting Images Insert/Edit Image Delete an Image Tables Adding a Table Editing a Table Links Linking from Text vs. Linking from an Image Adding a Link To a Web page/site Editing a link to a Web page/site Adding a Link to an Asset Editing an Asset Link Links Removing a link Anchors

3 Basic Tips on Writing for the Web The success of your Web site depends upon visitors completing tasks. Working against you is the fact that visitors to your site will tend to be impatient. You can overcome this impatience by instilling confidence into your visitors that your site is worth their time. This can be accomplished by following the these basic tips. Organize the page into manageable pieces using sections, sub-sections, lists, etc. Place the main message above the fold (visible on the screen without scrolling). Users will scroll down to see other content if they consider content above the fold meaningful. Keep your content simple and to the point. Use words that your visitors will recognize and keywords users might search for. Users are known to skip over pages and paragraphs that appear dense. Set word limits to help you write succinctly: a. Headings, Sections, and sub-sections 8 words or fewer b. Sentences 20 words or fewer c. Paragraphs words d. Stories 500 words or fewer Guide the reader s eye to key information: a. Use ordered or bulleted lists instead of comma-separated lists. b. Use numbered lists for steps in a procedure or process. c. Use tables for organizing tabular data. d. Use images and photos to enhance the message(s) on the page. e. Use Heading 3 Heading 6 and/or Bold text for section headings and sub-headings. Example 1: Section Heading in Heading 3 format Some text here. Sub-Heading in Heading 4 format Some text here. Sub-Sub-Heading in Bold Some text here. 3

4 Example 2: Section Heading in Heading 4 format Some text here. Sub-Heading in Bold Some text here. When linking to a document (pdf, word doc, excel file, etc.) always let the user know a) what type of document the link will open and b) how large the document is by using the following format: [document extension document size in kb or mb]. PDF link example: Download the membership application form [.pdf 48kb] Excel link example: Download the survey results [.xls 127kb] Note: Do not use spaces or special characters in the names of files. Use or _ in place of spaces. Use phrases for links that identify the action (Download, View, etc.) and the item (application, report, meeting summary, etc.). Correct: Download the membership application form [.pdf 48kb] Incorrect: Click here to download OR Download the membership application form. 4

5 TinyMCE Tools and their Functions The following table identifies the functions of the tools in the TinyMCE editor. (yellow = most commonly used; red = do not use) Tool Function Displays HTML source code editing window Clean up messy code Saves the changes (editing window remains open) Cuts content and places it to the clipboard Copies content to the clipboard Inserts content from the clipboard. The formatting will be retained. Inserts content from the clipboard. Formatting is removed. Undo Redo Find on page Find and replace on page Remove formatting from selected text Toggle on and off the viewing of guidelines and invisible elements Applies bold formatting to selected text Applies italic formatting to selected text Underlines selected text (Underlines are reserved for links only.) Strikethrough selected text Subscripts selected text Superscripts selected text 5

6 Tool Align Middle Align Right Align Full Ordered lists Unordered lists List properties Outdent (decrease indent) Indent Function Insert/edit link onto selected text or graphic (link to a web page/web site, link to a file, link to an anchor on current page) Unlink selected text or graphic Insert/edit anchor Insert/edit image Insert horizontal rule (horizontal line) Opens the symbol table Apply font to selected text Apply text color to selected text (Blue is reserved for links only) Toggle on and off the visual control characters Inserts a non-breaking space character Edit CSS styles (advanced editing) Applies a pre-defined style to selected text Applies a pre-defined format to selected text Applies background color to selected text 6

7 Tool Insert/edit table Edit properties of selected table row(s) Edit properties of selected table cell(s) Insert row above the selected row Insert row below the selected row Delete selected row Insert column before the selected row Insert column after the selected row Delete selected column Split merged table cells Function Merge table cells Information about the TinyMCE editor Closes the text editor window. Any unsaved changes will be lost. 7

8 Common Editing Tasks with TinyMCE Adding Text into the Editor You can add text by either typing directly into the editor or pasting text from another source, such as a web page, a PDF document, and a Microsoft Word file. Pasting Text You can paste text into the editor that has been copied from many different sources. You must use the correct pasting method or you may experience difficulties in formatting the text in the editor. Do not use the Paste tool. Instead, use the Paste as Plain Text tool. This will put the text into the web page without any of its original formatting. Apply formatting using the editor. Formatting Text Section and Sub-section Headings Using sections and sub-sections is a great way to organize your content and help improve the search engine ranking of your pages. Using the pre-defined Heading formats such as Heading 3 and Heading 4, simplifies this for you. To add a section header to a document: 1. Type in the text 2. Highlight the text 3. Select the appropriate header from the Format tool (Refer to the section at the front of this document Basic Tips on Writing for the Web for tips on using Heading formatting). 8

9 Lists Lists are a great way to present content. There are two types of lists, unordered and ordered. Unordered lists separate each point with a bullet; ordered lists use either letters or numbers to order your list. List styles can be changed after a list is created. To add a list to your page: 1. Select the text you wish to place into a list. 2. Click either the Ordered list or Unordered list tool. NOTE: You can change from an ordered list to an unordered list and vice versa by placing your cursor in the list content, and then clicking the appropriate tool. To indent a list item, click on the line of the list item to indent, and click the Indent tool. 9

10 To Outdent (decrease the indent) a list item, click on the line of the list item to outdent, and click the Outdent tool. To create a numbered list within a bulleted list: 1. Indent the list items you will change. 2. Click on one of the list items, and click the Ordered list tool. To change the style of a list: 1. Place your cursor within the list 2. Select the List properties tool. 3. Select the style of list you want from the List properties window. 10

11 Removing Formatting To remove formatting, place your cursor anywhere within the formatted content. If the content was formatted with a tool (e.g. the Bold tool), click either the Remove formatting tool, or the tool associated with the formatting (e.g. the Bold tool). If the content was formatted with the Edit CSS Styles dialog, then you will need to open the dialog box and reset the styles with that. 11

12 Images Images placed on web pages should be optimized for the web before being used. Optimizing for the web makes their file size smaller which will allow users to load your pages faster. Refer to the documentation on optimizing images for the Web. Insert/Edit Image 1. Open the page for editing 2. Place your cursor where you want the image to be inserted. 3. Click on the Insert/Edit image tool. 4. Click on the Asset Managers tab in the Insert/edit image window and find your images asset manager from the drop down list. Your Asset Manager should be called your department name images. 5. Click Browse Server to open the Asset Manager. 6. If the image has already been uploaded to OpenText, it will be in the Asset Manager and you can skip this step and go directly to Step 7. However, if the image is on your computer: o Click Select asset from local file system (located close to the top of the asset manager). o o Click Browse, and find the image on your computer. Click OK. 12

13 7. Select the image by clicking on the image title in the asset manager. The image information will display on the right side of the asset manager. o Click OK. 8. Back in the Insert/edit image window; enter a description in the Image description field. This becomes the alternative text that will display when a user mouses over the image on a web page. It is also what visually impaired and other users of screen readers will hear as their page content is read to them. 9. To have text wrap around the image, select the Appearance tab and set Alignment to either Left or Right. Left alignment forces the image to the left side of the page, and right alignment forces the image to the right side of the page, with text wrapping along the side of the image. 13

14 10. To add space between the image and the surrounding text, enter a value (measured in pixels) for Vertical Space and/or Horizontal Space. A value of 6 is commonly used. 11. To add a border around your image, enter a value (measured in pixels) larger than zero for Border. If the image will be used as a link, entering 0 (zero) is recommended. 12. Click Insert. 13. To further edit the image, either select it and click on the Insert/edit image tool, or right-click on the image and select Insert/Edit Image from the pop-up menu. Delete an Image To delete an image, click on the image to select it and then press the Delete key. 14

15 Tables Some data is naturally suited for display within a table, such as this table of CLEP Equivalencies that is on the FGCU catalog Web site. A best practice is to know the number of columns your table will need before you start. It may be helpful to draw your table on paper before adding one to your Web page. Adding a Table 1. Within the text editor, place your cursor where you want the table to appear. 2. Click the Insert a New Table tool. 3. Enter the value for the number of columns. Rows can be added later if necessary. 4. If needed, enter values for Cellpadding and Cellspacing. 5. Select the alignment of the table 6. Enter the value for the border (zero means no visible border). 7. Enter the width of the table 8. Leave the height, class, and Table caption blank 9. Click Insert. 15

16 Editing a Table Clicking inside a table activates the table editing tools located in the last row of the toolbar. Table Row Properties Tool To change the properties of rows, click in the row you want to change, and then click the Table Row Properties tool. The Table row properties window opens. o The General properties control how content will be displayed. o The Advanced properties contain the background color property. o Changes can apply to the selected row, odd or even rows, or all the rows. Table Cell Properties Tool To change the properties of cells, click in the cell you want to change, and then click the Table cell properties tool. The Table cell properties window opens. o The General properties control how content will display and the cell size. o The Advanced properties contain the background and border color properties. o Changes can apply to the selected cell, current row of cells, or all the cells. Merging Cells To merge cells, such as all the cells in a row to display a header, use the Merge table cells tool. 1. Click inside the first cell of the row. 2. Click the Merge table cells tool to open the Merge table cells window. 3. To merge all of the cells in a single row; in the Cols (Columns) field, enter a value equal to the total number of cells in the row. 4. To merge only 2 cells; in the Cols field, enter 2; to merge 3 cells, enter 3; etc. 16

17 Adding Rows When the cursor is in the last cell of the last row of a table, pressing the Tab key will add a new row. A row can also be inserted before the row the cursor is in by using the Insert row before tool; or after the row the cursor is in by using the Insert row after tool. Deleting Rows Place your cursor in the row you wish to delete and click the Delete row tool. Adding Columns A column can be inserted either before the column in which the cursor is in by using the Insert column before tool. tool; or after the column in which the cursor is in by using the Insert column after Deleting Columns Place your cursor in the column you wish to delete and then click the Remove column tool. Links Links, or the more formal term hyperlinks, can be attached to text or images. Links can open the content in the same window, or a new window. You can link to: a web page either o on your site o on a different site an asset, for example a PDF file or large Image an anchor (a named location) o on the same webpage o on a different page an address Linking from Text vs. Linking from an Image When linking from text, you select the text you want to be the link by highlighting it. When linking from an image, you select the image you want to be the link by clicking on it. The rest of the linking process is the same for both text and images. 17

18 Adding a Link To a Web page/site TIP - COPY THE URL OF THE PAGE YOU ARE LINKING TO To ensure you use a working link, navigate to the page you are linking to and copy the address from the address bar in your browser. 1. Copy the URL you will link to. 2. Highlight the text, or click the image, you want to add a link to. 3. Click the Insert/edit link tool. 4. On the General tab of the Insert/edit link window, paste (press CTRL - V) the URL into the Link URL field. 5. If this is a link away from your site, change Target to Open in new window (_blank). 6. If this is a link to a page in your own site, leave the Target set to Open in this window / frame. 7. Click Insert Editing a link to a Web page/site 1. To edit a text link, click anywhere within the text that is linked or to edit an image link select the image. 2. Click the Insert/edit Link tool. 3. Change the settings as described above. 18

19 Adding a Link to an Asset Editing Web Page Content in OpenText Using the TinyMCE Text Editor TIP Always open a link to an asset in a new window so your users do not accidently close your site when they are finished with the asset. 1. Highlight the text, or click the image, you want to add a link to. 2. Click the Insert/edit link tool. 3. From the Asset Managers tab o Select your asset manager. For a file like a PDF, your asset manager will be your site name files. o Click Browse Server 4. If the asset has already been uploaded to OpenText, it will be in the Asset Manager and you can skip this step and go directly to Step 5. However, if the asset is on your computer: o Click Select asset from local file system located close to the top of the asset manager. o Click Browse, and then find the asset on your computer. o Click OK. o Select the name of the asset you wish to link to o Click OK 5. Change Target to Open in new window (_blank). 6. Click Insert 19

20 Editing an Asset Link 1. Click anywhere in a text link, or select the graphic you are linked from 2. Click the Insert/edit link tool 3. Change settings as needed, and then click Update. Links 1. Select text or graphic that will serve as the link 2. Click the Insert/edit link tool 3. In the Link URL field available from the General tab, type the following: mailto: address. Example: mailto:johndoe@fgcu.edu Removing a link To remove a text link, click anywhere within the text that is linked, or to edit an image link select the image. Then, click the Unlink tool. Anchors An anchor is a named location on your page that you can link to. Incorporating anchors onto a web page is a two step process: Create the anchor, and then link to the anchor. 20

21 Create anchors on your page 1. Click in your content where you want to put the first anchor 2. Click the Insert/edit anchor tool 3. Give the anchor a name and click Insert NOTE: Do not use spaces or any special characters in the Anchor name. 4. Repeat steps 1-3 for any additional anchors. 5. An anchor icon will display in the editor where anchors have been placed. This is for reference only and these icons will not display on the published web page. Link to Anchors on your page 1. Select text or graphic that will serve as the link 2. Click the Insert/edit link tool 3. From the Anchors dropdown list, select the anchor you are linking to 21

22 4. Set the target to Open in this window / frame 5. Repeat for all anchors in your page Removing Anchor Links 1. Click anywhere in a text link, or select the graphic you are linked from and then Click the Unlink tool Removing Anchors Anchors can be removed by selecting them and pressing delete on your keyboard 22