This document will describe a Text / Graphic Editor and how to add it to the Right Side Bar of a faculty page.
Text / Graphic Editor Example Right Side Bar
This tool can be used to add text and/or graphics to either the main body or right side a web page. This tutorial will provide instructions for a right side tool only. See Faculty Admin - Text /Graphic Editor (Main Body) for additional directions.
How to Add a Text / Graphic Tool to the Right side of a Webpage
Within My Navigation Builder, in the Page Detail column, click Right.
Add Tool to the Page
- On the Page Detail page, choose Right Side Text / Graphic from the first drop down menu.
- The second drop down menu is used to determine the location on the page. If no other tools exist, Place at top of page is the only option.
- Choose to add a separation line between Main Body tools and Right Side tools.
- Click Add.
Add a Graphic and Text
- Use the Browse button to locate the graphic file. Note: Files must be .jpg. gif or .png file formats.
- Alt Text: May be used to provide text that will show when the mouse cursor hovers on the picture. Alt text is truly meant for screen readers for the visually impaired. So a screen reader will read the text entered as alt text. It is not support by all browsers. This option will appear with a red asterisk by it, making it required, only if a user with permissions to the Settings module has made Alt Text required.
- Enter text in the textbox shown. Additional options for text are provided in the following steps.
Understanding the Text Editor Toolbox
- Source: Click on this button see the HTML view of your copy. More advanced Web site administrators can use this to work with the HTML code. Click this button again to go back to regular text view. Widgets can be added to a web page by clicking the "Source" icon, pasting
- Preview: By clicking on this, this page will open in a new browser window.
- Print: This will print the contents entered in the editor.
- Cut: You can also use use Ctrl-X.
- Copy: You can also use Ctrl-C.
- Paste: You can also use Ctrl-V (Not recommended: the best results are obtained when using the Paste as plain text clipboard.)
- Paste as plain text: (Recommended when ever you paste text) This paste function will remove all formatting and underlying coding. Use the formatting tools from this text editor to format the text in a web page friendly format.
- Paste from Word: (Not recommended: the best results are obtained when using the Paste as plain text clipboard.) Use this icon to paste text that is coming from Microsoft Word. Although the results are better than pasting with Crtl-V there is still underlying coding from Microsoft that often distorts a web page.
- Undo: Reverse the last action taken.
- Redo: Reverse an "undo."
- Find: Use this to find a desired string of text.
- Replace: Use with the Find option to replace a text string with a new string of text.
- Select All: Use this to select all the text in the editor.
- Spell Check: Check the spelling of the text inside the editor.
Understanding the Text Editor Toolbox (cont)
- B: Use to bold selected text
- I: Use to italicize selected text.
- U: Use to underline selected text.
- abc: Use to "strike through"78/ selected text.
- X2: Use to create subscript
- X2: Use to create superscript
- Eraser: Use to remove all formatting from selected text.
- Numbered List: Use to create numbered lists. See next screen shot on working with the properties of a numbered list.
- Bulleted List: Use to create a bulleted list. Right click with the cursor in an item in the list and select Bulleted List Properties and choose circle, disc or square for the type of bullet.
- Indent (increase): Use this to indent text. This can be used like the Tab key in a word processing program. Click more than once to increase the size of the indent. All of the text added will be indented until the decrease indent icon is used.
- Indent (decrease): Moves the cursor and/or text to the left.
- Quote: Creates an indented block style quote with selected text. While text is selected clicking the quote icon will remove the indent.
- Div Container: Some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to apply formatting to a larger document fragment that extends beyond one block. If this is the case, a standard practice is to add a div container around a document fragment. Note that using div containers, just like other HTML elements, along with CSS styling, is an advanced feature that should only be used if you have sufficient knowledge of both Web standards. Info Source: http://docs.cksource.com/CKEditor_3.x/Users_Guide/Layout/Div
- Align Left: Aligns selected text on the left side.
- Center: Centers selected text.
- Align Right: Aligns selected text on the right.
- Justify: Justifies the selected text.
- Link: Select text and click the Link icon to link it to a URL or click the Link icon and key in or paste the URL to display the full URL within the text. See the screen shot below for additional information.
- Unlink: Select a link or linked text and click the Unlink icon to remove the hyperlink.
- Anchor: An anchor can be created anywhere within the text at the cursor position, or selected text. Click on the Anchor icon and then enter the name of the anchor. The anchor is shown when text is edited and a link can be created to the anchor.
- Image: This icon can be used to insert an image into the text editor with or without additional text. The image needs to be uploaded to the File Uploads first, click the linked file name in the File Uploads and copy the URL of the image that opens in a browser window. See the screen shot below labeled "Image options".
- Table: Insert a table. To get back to the table properties right click in one of the table cells and select Table Properties. The right click will also give you the insert, delete and merge option for cells, rows and columns.
- Horizontal Line: Insert a horizontal line to use as a divider on a page. Never use a repeated line of hyphens or underscores to draw a dividing line. The horizontal line option will automatically re size to fit the width of the content. Drawing your own will often distort the page width.
- Smiley: Inserts a smiley. There are many to choose from.
- Special Character: Insert a special character.
Image Options (step 4 above)
Image Info tab - Paste in the URL obtained from viewing the image via the file name in File Uploads. The image will show in the Preview box. Alternative Text is for screen readers and does
not work with all browsers. Manage image sign and alignment here.
Link tab - If you want the picture to be a hyperlink, key or paste in the URL the picture should link to and choose the appropriate target.
Advanced tab - Use this tab only if you have adequate knowledge of HTML.
- Styles, Format, Font and Size can be applied to selected text or chosen before text is keyed in.
- Text Color: Choose a color from the color palette that opens.
- Background Color: The background color acts like a highlighter, only the area behind and in line with the text is colored.
Linking Graphic or Text
- Optionally link the graphic and text to: Add a URL to make the graphic and text a link.
- Type: If a link is added in the "Link Graphic To:" option use the radio buttons to determine if the URL should open in a New Browser Window (usually used for an external website) or in Existing Browser Window (usually used for an internal web page.)
- Submit Right Side Item button - Use this to save the changes.
Note: Graphics are not required. It is possible to have text with no graphic added.
Updating the Right Side Text/Graphic Editor
- edit - Enter a tool heading, make tool active/inactive, schedule a status change from active to inactive or vice versa
- Move - Change the location of this tool to another page or to a new page. Main Body tools can only be moved to the Main Body of a different page and right side tools can only be moved to the right side of a different page.
- Update Right Side Text/Graphic - Opens the Text/Graphic Editor and allows the information to be changed and/or a new graphic to be uploaded..
- Preview - Preview the page.
- Delete - Delete the tool from the page.