University of Michigan - Flint

The first time you edit a page in TeamSite you may be prompted to install the VisualFormat plug-in.  Follow the onscreen prompts to install it.  Once it has been successfully installed your text area should appear similar to the image below.

Refer to the images below and the sample VisualFormat text window above to learn the locations of the buttons and their function.

This portion of VisualFormat allows you to change the style (is it quoted text, etc), font family (Arial, Times New Roman, etc.), the format (whether it is a heading, etc.), and the font size.  The multi-colored wheel on the end of the image allows you to change the text color.  Due to the way the CMS has been set up, some changes that you make to the font will not show on your website.  For example, the university has elected that all font on university pages use the Arial font face.  Even if you change the font in the VisualFormat window to Times New Roman, when it is displayed on the Internet the CMS default font face of Arial will be used.

This image should look pretty similar to Microsoft Word.  These three options allow you to make your font bold, italicized, or underlined.  To change previously entered text, highlight the desired area and then select the appropriate button.

Items in the VisualFormat window can be displayed in bulleted or numbered lists. 

In Microsoft Word, to indent a paragraph all you have to do is press the "Tab" key.  In VisualFormat you must use one of these two buttons to increase an indent or reduce it. 

Text in the VisualFormat window can be aligned either to the left side of the screen, the center of the screen, the right side of the screen, or it can be justified.  Justified text will be stretched so that all sentences cover the exact same amount of space across the screen (most newspapers are printed with justified font).

Just like in Microsoft Word you can copy and paste text between VisualFormat windows, or from other windows into VisualFormat.  From left to right: the first icon allows you to cut, the second allows you to copy, the third allows you to paste, and the fourth will paste items in from Microsoft Word.

These two icons allow you to undo previous changes (the arrow on the left) or to redo changes that you erased (the arrow on the right).

VisualFormat uses a spell check, but first it must be installed.  The first time you click on the ABC checkmark you will be directed to the download page.

This icon allows you to place "anchors" or "bookmarks" in the text area.  These bookmarks can later be used to link directly to a specific area on a webpage.

By highlighting the text you want to make into a hyperlink, and then clicking on the button featured on the left of the above image, you can place a hyperlink in the text area.  This hyperlink can be to any other outside web source, or to another page in your website.  The icon on the right of the above image will break any selected hyperlinks, or remove them from the webpage.  For more information on including hyperlinks please refer to the Creating Hypterlinks tutorial.

The icon on the left will insert a horizontal line into the text area.  This line helps to divide up long blocks of information into easier to read chunks, or can be used to make a small piece of information stand out.  The eraser-like icon on the right will remove all formatting from the highlighted text.  For example, if you had made a word bold, italicized, and changed the font face to Georgia, it would be easier to remove all three at once with this icon.

These icons will allow you to place sub scripts and super scripts in the text area. 

The "Custom" button allows you to enter special symbols into the text area.  These symbols include such items as: greek letters and letters from other alphabets.

The button on the left side of this toolbar allows you to insert images into the text area.  Once you click on the button a new window will open that allows you to navigate to the image you would like to include.  The button second from the left allows you to insert tables.  The button second from the right (which looks like a lifesaver) will display the "Help" information for Visual Format.  The button on the far right will allow you to edit the HTML code for the text box.  It is recommended that only advanced users, who have experience with HTML, use this feature.