VISUAL FORMATTER
Please note that when you first access these pages you should use Internet Explorer and ensure that the Pop-up blocker (Under Tools) is turned off. Accessing a DCR for the first time you will be asked whether you wish to download and install the Visual Format Editor. Click yes and allow the installation of the text editor to continue. If you experience any problems with this installation please see Rad Flossman.
The visual formatter is designed as a WYSIWYG (What You See Is What You Get) html editor. It allows content authors to use advanced editing features such as layout tables, hyperlinks and text formatting such as Bold, Italics and Underline at the click of a button. The Visual Formatter also allows you to directly edit html code by clicking the 'Code View' button in the toolbar.
Open a Document Capture Record
- Click on the
button to the right of Feature to add another element.
- Select 'Layout Table'.
- The Visual Formatting window will appear below the selection.
Inserting an image using Visual Formatter
1. On the toolbar, click the insert image button:
2. In the Picture Properties dialogue box, browse for your image by clicking Select New File. Note, you must first ensure that your image has been imported into the htdocs/images folder in myCMS. Please see
Importing Files and Images into myCMS. Click 'Preview' to ensure it is the correct image.
3. Enter the width, height and border thickness for your image. Alignment refers to how you want the image to display on the page; on the left, right or in the centre. Border thickness is normally left at 0. Ideally images should not be more than 172px wide.
4. Enter a title for your image at the bottom of the dialogue box. Note that this title (the 'Alt' tag in html) is important for those users using assistive technology such as blind people.
Making a Hyperlink
Highlight the text that will be the link.
1. On the toolbar, click the New Hyperlink button:
2. For a link to another page in your site, click the browse button in the link dialogue box, then the htdocs folder and then browse to the page you wish to link. If you are linking to a page on an external web site, you can cut and paste the URL from the page that you wish to link.
3. The target box should remain blank unless you wish the link to load a page in a new browser window. If this is the case, enter 'Blank'.
4. Click ok to finish.
Making a Layout Table
A layout table is an invisible table that allows you to achieve a more flexible and elaborate content format. It allows you to perform tasks such as displaying multiple images or make text columns.
1. On the toolbar, click the Table button and then Insert Table:
2. The table properties dialogue box is quite similar to creating a table in Microsoft Word. Specify the number of rows and columns required. The table width can be specified in absolute size (pixels) or as a percentage of the page (percent). The latter will allow the table to contract or grow according to browser window and/or screen resolution size. Cell padding and spacing place a layer of invisible space around the objects contained within the table. Click OK to finish.
3. Once the table is inserted, you may edit the properties of any cell by right clicking in the cell and selecting from the context sensitive menu. You may add features such as a background colour to individual cells, or merge cells.
WYSIWYG View and HTML View of your Pages
If you have edited HTML directly before, you may want to see the content of your layout table as html coding. Click on the 'Code View' button to view the html.
To revert back to WYSIWYG view, click on the button next to it.
