Quantumjelly

Insert Custom HTML: There may be a list of available items to insert that you can preview and choose from. This list will usually contain customized items in HTML such as logos and formatted text specific to your site. To preview an item, click on the item in the list, and the item will appear the preview field below. To select the item, click on it and choose 'OK'.

Show / Hide Guidelines: To show or hide guidelines, click the 'Show/Hide Guidelines' icon.

This will toggle between displaying table and form guidelines and not showing any guidelines at all.

Tables and cells will have a broken grey line around them, forms will have a broken red line around them, while hidden fields will be a pink square when showing guidelines.

Note that the status bar (at the bottom of the window) will reflect the guidelines mode currently in use.

Source Mode: To switch to source code editing mode, click the 'Source' button at the bottom of the editor.

This will switch to HTML code editng mode.

To switch back to WYSIWYG Editing, click the 'Edit' button at the bottom of the editor.

This is recommended for advanced users only

The HTML Tag bar

What is the HTML tag bar?

The HTML tag bar is located at the bottom of the editor, just above the "Edit, Source and Preview" tabs. It's purpose is to show you the HTML tag that is currently being edited, and allow you to select specific tags easily and remove or modify them. Because HTML allows you to have multiple tags overlapping, it becomes increasingly difficult to select specific tags using only the editor and your cursor. The HTML tag bar is extremely useful in these scenarios where there are overlapping HTML tags and allows you to select the specific HTML tag you would like to modify or remove.

How do I use HTML tag bar?

Using the HTML tag bar is simple. When your cursor is placed in the editor inside a specific HTML tag, you will see that tag appear in the HTML tag bar. By clicking on this HTML tag in the HTML tag bar, the editor will automatically select that entire HTML tag. You can then modify that tag for example by selecting a new Style to be applied. Alternatively, you can remove the tag by clicking on the "Remove tag" option on the right side of that bar, or edit the HTML code of that tag only, by selecting the "Edit tag" option.

Sometimes you will notice that a tag will also be followed by the name of a Class found in the stylesheet. (eg. «span.myClass>) This means that current HTML tag being selected has a style applied to it. This makes it easier for you to see what Style has been applied and to modify it in seconds.

Using the Right Click Context Menu

Similar to other desktop based applications, the HTML editor features a right click "Context" menu.

This menu enables quick and easy access to commonly used functions. Other options also appear depending on your current editing situation. If you select an Image and right click on that Image, you will be able to select the "Modify Image" option. If you select or click inside a Table, the various Table options will appear in the "Context" menu. Finally, right clicking inside a Form will present the "Modify Form" option.

Using the Source Tab

Selecting the "Source" tab at the bottom of the editor will switch you to editing the HTML source code.

ShortCut Keys

The following table outlines the shortcut keys available inside the HTML editing component.