IAMI Help - WYSIWYG Editor

Back

Contents

Introduction
About HTML
Designing Web Pages
Using The Editor
Entering Text
Adding Images and the Asset Manager
Creating Tables
Adding Bookmarks and Hyperlinks

Introduction

The WYSIWYG (What You See Is What You Get) Editor is used throughout IAMI for editing documents such as email templates and web pages, and provides a familiar, word-processor style editing environment. It is quite advanced, although many of its features are simple to use. Users with some knowledge of HTML (Hyper-Text Mark-Up Language) or CSS (Cascading Style Sheets) will be able to implement some of the more advanced features, but this knowledge by no means essential. Basic knowledge of a modern word processing package, such as Microsoft Word will also be beneficial.

Back to Top

About HTML

If you are familiar with HTML (Hyper-Text Mark-Up Language), you can skip this section, but a little knowledge about HTML and the associated terminology can go a long way, although you will probably never need to work with raw HTML in the editor.

HTML is not a programming language, it is a mark-up language, which means that it is a standard method of marking up text to tell your computer how to display it. It is what ALL web pages are made from, and is reminiscent of some of the original computer word processors where commands had to be inserted in the text to tell the printer how to print the document.

The commands in HTML are called 'tags', and each 'tag' is signified by being enclosed in left and right angled brackets. Some of the commands are very simple, others more complex. Most of them are used in pairs to form a container with an opening and closing tag. Here are some examples of the simpler commands:

Bold Text
To display 'The quality of mercy is not strained' in bold text, the HTML would be: 

Note the enclosing 'b' tags.

Underline
To display 'The quality of mercy is not strained' underlined, the HTML would be:

Note the enclosing 'u' tags

Bold and Underlined
To display 'The quality of mercy is not strained' bold and underlined, the HTML would be: 

Note that the tags are arranged like a nest of tables, so that the 'u' tags appear inside the 'b' tags (this is actually called 'nesting').

Back to Top

Designing Web Pages

When the internet first started it was text only. When images were added and the speed of the internet increased, web site builders wanted to make their page layouts look more attractive. A person with an eye for design will always produce a better looking page than someone who disregards some simple rules:

Don't Mix Fonts
Having lots of different fonts in different sizes always looks very amateurish. There are only a few fonts which are 100% guaranteed to be on everyone's computer anyway (called 'Web Safe' - Arial, Times New Roman, Verdana, Georgia, Comic Sans Serif, Trebuchet, Courier New). Choose one and stick with it throughout, standardise your set of font sizes and weights, and stick to a site colour theme. If your site has a Style sheet and all IAMI sites do) you should choose your styles from this only, and deviate only in exceptional circumstances.

Stick to the Design Brief
If you are adding content to a site which has a particular style, colour theme or layout, take care to use exactly what has been used before. It's not good enough get colours 'close enough' - small differences can appear quite noticeable on different monitors, so make sure you know the exact RGB (red-green-Blue) reference number.

Use TABLES for your Layout
Because HTML is quite limited, professional web designers use tables to make sure the page layout always appears the way they intended. The one big advantage HTML has over most modern word processors is that it is easy to lay tables within tables to force quite complex layouts. These tables are usually completely invisible to the viewer, so you wouldn't know they were there at all on most cases. An example is shown below:

Note how the green table is inside one cell of the red table, which is itself inside one cell of the blue table.

Line It Up
Wherever possible keep horizontal and vertical straight lines or hard edges in line. The example shown above looks better if the right hand edge of the lower image is in line with the corresponding edge of the image above. If you can't do this, then inserting a paragraph of text between them would break up the natural line the eye tries to follow.

Optimise Your Images
Optimising means that the file size of the image is no larger than it need be to display a clear image on the page. This means that the actual pixel dimensions of your image should be exactly the same in the file as it is on the web page, and that you have not had to resize the image to fit on the web page in the editor. Images taken directly from a scanner or digital camera are too big in terms of kilobytes for the web. You should ensure that all the images you use have been optimised using and art package. This usually means shrinking them down in terms of pixel size, which also produces a corresponding reduction in file size, making your images faster to download on the page.

Clean Up Word HTML
Never cut and paste content directly from other applications, especially Microsoft Word (or any other Microsoft application, including Powerpoint) without first cleaning it up. Microsoft Word inserts a huge number of style tags which are unnecessary, and will break your design brief. The IAMI editor provides tools to do this, but if in doubt paste your content into e text editor first (such as Notepad), then into the editor and re-format it. This sounds like a lot of work, but pasting from Microsoft Word causes more broken pages that anything else.

Back to Top

Using The Editor

The editor is accessed from a number of IAMI modules, usually by double-clicking a text box or editor button. It always opens in a pop-up window, so make sure you don't have a pop-up blocker stopping it from working. The editor window looks something like this:

TIP: The most important thing to remember is that once you have made your changes, you must click UPDATE, and this window will close. In almost all IAMI applications you will then have to click SAVE on the page from which you opened the editor to lock the changes into the database.

The two rows of icons at the top are used to access all the tools and wizards to help you construct and format your document. To find out what each one is for, simply roll your mouse over it and a tool tip will pop up saying what it does. Each one is discussed in detail below, but first let's discuss some simple tasks:

Back to Top

Entering Text

Entering text is as simple as positioning your cursor in the content area, and typing. The font type will default be the default for your style sheet, and you should avoid changing this. Alternatively, you can write your copy in your favourite word processor and paste it into the editor. However, applications such as Microsoft Word or Powerpoint embed style commands which can disrupt your web page and override the site style sheet settings. Some pasting tools are provided to help you overcome this (Note: these tools do not become active if the clipboard is empty, or if the clipboard contents can not be pasted into the selected area for technical reasons):

This is the standard PASTE command (Control-V). this will paste the contents of the clipboard at the cursor location. DO NOT use when pasting Microsoft Word or Powerpoint content.
Use this to paste content from Microsoft Word or Powerpoint at the current cursor location. A window will open up, and you paste your clipboard into this (using Control-V), then click OK. This cleans up the content, but you may have to apply further formatting to get the required layout.
l This extracts the text content from the clipboard and pastes this at the current cursor location.
This is the standard CUT command (Control-X)
This is the standard COPY command (Control-C)

Tip: When typing in text, press RETURN at the end of each line to insert a create a PARAGRAPH break. Press SHIFT-RETURN to insert a LINE break.

Text Formatting

To change the style of your text while keeping to the design style sheet, first select the text you want to change (for example, a heading) then select the style from the style drop-down box (showing PARAGRAPH in the image below):

Select the appropriate style from the list (trial and error may be required to determine the best selection from your style sheet). The style options available from this list are the 'standard' HTML types, e.g. Heading 1, heading 2, paragraph, etc, but you may also have some custom styles defined. To see these styles, click the  icon. This opens up a side-bar displaying the custom styles. To apply these to a section of text first select the text then click on the style in the side-bar.

All the other options in this toolbar will override the site style sheet, and are not recommended for normal use.

The options highlighted below will be familiar to users of modern word processors and may be freely and safely applied:

Paragraph Formatting

A full set of paragraph formatting commands are available and will be familiar to users of modern word processors:

Bullets and Numbering

The bulleting and numbering options available in HTML are quite basic, but can be enhanced by advanced users with knowledge of CSS (Cascading Style Sheets). To create a simple list or numbered list first type your list, making sure that you press RETURN at the end of each line so that each list item is a separate paragraph. When complete, select the whole list then click the  icon for a bulleted list or  for a numbered list.

Paragraph Indentation

Paragraph indentation is available by selecting the paragraph to indent then clicking the  icon. To reverse an indentation, click the  icon.

Tip: If you are having trouble getting the appearance you expect, make sure you are selecting the right text areas by using the tag list at the foot of the page:

This shows what is currently selected. In the example above, this is a PARAGRAPH (P) within a table .
To select the paragraph which contains this table, simply click the  P tag to on the far left.

Back to Top

 

Adding Images and the Asset Manager

 Images are added using the Image icon on the toolbar . Clicking this opens up the Image dialogue box:

In almost all instances you will need to use the ASSET MANAGER to either locate the image on the web server if it's already there, or chances are it's a new image and you will have to upload it. Either way, click on the ASSET MANAGER icon  which opens the ASSET MANAGER dialogue:

To select an existing image, simply click on the file name (the image will then be displayed in the preview window), then click OK. Set the top/left/right/bottom spacing as required, border and alignment in the Image dialogue box then click INSERT. To use a new image the process is the same except you first need to upload the image on to the server. To do this click BROWSE and locate and select the file on your computer, then click UPLOAD. If the file is very large, the upload may take several minutes depending on your internet connection speed (there is also a 10Mb limit on file size). Once the upload is complete, the new file is automatically selected, so click OK to use it. Apply any borders and formatting using the Image dialogue, then click INSERT.

To modify the appearance of an image, click on it to select it, then click the image icon . Make any changes in the Image dialogue, then click APPLY or OK. If you click APPLY the dialogue window remains open. You can then select another image to modify, which saves repeatedly having to open the dialogue box when doing multiple changes. Clicking OK will close the dialogue window.

Back to Top

Creating Tables

Tables are used extensively by professional web page designers to fix page layouts. IAMI's WYSIWYG includes extensive table handling and formatting which are accessed from the table icons on the toolbar:

To insert a new table, position the cursor at the location where you want the table to appear, then click the  icon. This opens up a matrix which allows you to set the size of the table (rows and columns). Click on the matrix cell corresponding to the size of table you require. You can always increase or decrease the number of rows and columns later if you need to:

A guideline framework should appear at the cursor location. If you can't see this, click the  icon to switch the guidelines on. Without this, it's very hard to work with tables, and the guidelines will be invisible on the finished page. A 3 x 3 table might look like this:

To place images or text into a cell, click on the required cell and continue as described in previous sections. The size of the table will enlarge to fit your content, but you can fix the size of the cells and the overall table (as a percentage of screen size or in absolute numbers of  pixels) using the extensive cell, row, column and table formatting capabilities available by first placing the cursor in the table or cell you wish to modify, then clicking the  icon. This opens up a menu with 3 options:

Table Size
Use this to add rows or columns to the table, or remove rows and columns:

Edit Table
This sets parameters for the table as a whole, such as overall size, borders, cell spacing and padding. Getting a nice looking layout using tables is really trial an error, and gets easier with experience. It's easy using IAMI's editor to do this because you can try different settings and click the APPLY button to immediately see how this affects your table:

Edit Cell
this allows you to apply formatting at individual cell level. You can also apply formatting to all the cells in a row or column, or to the whole table. Although having all these different formatting options may seem unnecessary and confusing, they are in fact required for maximum flexibility in presentation. Getting a nice looking layout using tables is really trial an error, and gets easier with experience. It's easy using IAMI's editor to do this because you can try different settings and click the APPLY button to immediately see how this affects your table:

Back to Top

Adding Bookmarks and Hyperlinks

Hyperlinks (or 'links' for short) are text or images which, when clicked, opens another web page, image or document in your browser. You can make the link open a new browser window rather than replacing the content of the current one. This is done when you don't want the user to lose their starting page, and is typically used for opening large-scale images or downloading documents.

Bookmarks are similar to hyperlinks, except they exist within the current page. They are typically used when the page is quite large, and there is contents section at the top linking to sections within the page body.

To make some text a hyperlink, first select the image, word or phrase you would like to make a hyperlink (e.g. CLICK HERE) then click  icon on the toolbar. This opens the hyperlink dialogue:

Linking to Internal Pages
To link to a page within the web site, first click the radio button labelled SITE, then select the page from the drop-down list. There is also an associated box labelled PARAMETERS. In most cases this should be left blank, but if the link needs parameters these will be supplied by your system administrator.

Linking to External Pages
To link to a page on another web site you must first know the URL of the page, which usually begins with http://. Click the radio button labelled SOURCE, then select the type of link from the drop-down list (usually http://) then type in the rest of the URL in the adjacent box.

Providing an Email Link
To make a link which opens up a new email, click the SOURCE radio button and select the MAILTO option from the drop-down list. Enter the email address that you want emails to be sent to in the adjacent box. Note: if you type in an email address into the content area, IAMI will recognise this and automatically insert a mail link.

Linking to a Large Scale Image
It is not uncommon to have a gallery of images which, when clicked, open up a larger scale version of the same image. To insert this type of link, first select the image then click the  icon on the toolbar to open up the hyperlink dialogue. To locate or upload the larger-scale image, click the  icon to open the ASSET MANAGER  (please refer to the section on images for details of how to use the ASSET MANAGER). It's a good idea to make sure the TARGET is set to BLANK to open the image in it's own window.

Linking to a Download Document
A document download is another form of hyperlink, except you may firstly have to upload the document. Firstly select the text or image which will make the link then click the  icon on the toolbar to open up the hyperlink dialogue. To locate or upload the download document, click the  icon to open the ASSET MANAGER (please refer to the section on images for details of how to use the ASSET MANAGER). It's a good idea to make sure the TARGET is set to BLANK to make sure the document opens in it's own window.

Linking to a Bookmark
To link to a bookmark in the current page you must firstly create the bookmark. To do this, place the cursor at the position you want the bookmark to appear then click the  icon. This opens the Bookmark dialogue:

You can call your bookmark anything you like, using numbers and letters, but obviously duplicates are not allowed.

Once your bookmark has been created, you can now link to it. Select the image, word or phrase you want to make a link then click the  icon on the toolbar to open up the hyperlink dialogue:

If you can't see your bookmark in the drop-down list it means you have not yet created it. Go back and create the bookmark, then try linking again.

Back to Top