Using the HTML Editor

ExSite's HTML editor allows you to edit and format HTML content right in your browser. To use the full-featured editor, you will need to use one of the following browsers:

• Internet Explorer 6+ (Windows)
• Mozilla 1.4+ (Windows, Mac, Linux, etc.)
• Firefox (Windows, Mac, Linux, etc.)

If you try to use the HTML editor on another browser, it will automatically warn the user and downgrade its capabilities to run in a raw-HTML editing mode.

Style Guide

Before we begin, a few notes on style and web design.

Good web design normally places the style rules for formatting text into style sheets, which are stored separately from the content itself. The setup of the stylesheets is done by your website's graphic designer, and is usually off-limits to the website's editors (just as the site content is off-limits to the designer).

This separation of content and design is a deliberate feature of ExSite (and other content management systems). You may be tempted to manually add graphic style to your content, by setting colors, changing fonts, changing font sizes, and so on. As a general rule, this should be discouraged. Although your content may appear to be the wrong style when viewed inside the editor, it will change when it is inserted back into your web pages where the style sheets can take over the formatting.

By manually configuring styles, you are effectively overriding the graphic design rules for your website. Unless you are very sure why you are doing this, it can lead to mismatched styles and formatting, reducing the attractiveness of your pages.

Why, then, does ExSite allow you to change colors and fonts, if you are not supposed to? Because there are occasional situations where you want to override the default styles. For example:

• quotations
• poetry
• computer code
• technical data
• etc.

Exsite allows you to customize the style of these "snippets" so they stand out from normal paragraphs and body text. (See example in the box at right, which sets a custom color and font for the HTML code only.)

As a general rule, then, you do not need to concern yourself with the graphic design style of your web pages when editing content. Unless you have a specific effect in mind, always use the default neutral style, and allow the web site template to apply its own style rules to it.

Style is often a problem when pasting content from a word processing application into the editor, since word processors want to include all sorts of embedded style info. To remove the inappropriate formatting and return to a neutral style, use the cleanup button:

Finding your way around the editor

The editor consists of a text editing area, topped by a toolbar that contains all your special editing tools:

Note that some tools in the 2nd row of the toolbar have restricted access. If you do not have permission to use these tools, you will not see them in the toolbar. The affected tools are links, images, table editor, and dynamic content.

Click inside the editing area to position your cursor and begin editing. Different browsers respond different ways to unpositioned cursors. For instance, if you do not position your cursor first, nothing will happen when you type, or inserted items may not be positioned correctly. On some browsers, the cursor will only be positioned if you click on existing content (or at the very top of the editing area if there is no content yet). If you click at the bottom of the editing area, where no content exists yet, then some browsers might ignore the click.

If you are editing a long piece of content, there will be a scrollbar along the right edge of the editor. Because the editor is embedded into a web page, there may also be a scrollbar on the right edge of your browser that you will have to move to bring the editor fully into view. If you use a wheel mouse, the wheel will work the browser scroll bar by default (or if you click anywhere outside the content editing area); if you click inside the content editing area, the wheel will work the editor scrollbar instead.

Entering Text

Click inside the content editing area to place your cursor where you would like to begin entering text. Then simply type your new text as you would in any word processing application.

Copy-and-Paste Issues

You can also paste text that has been cut/copied from other applications. Click to place your cursor where you would like the text to be pasted. Then type CTRL-V to paste the contents of the clipboard into the editor. (You can also use CTRL-X to cut selected text out of the editor, and CTRL-C to copy any selected text to the clipboard.)

WARNING: several problems can arise when pasting text from external sources into the editor, if you are not careful:

• When pasting text from other applications, such as Word, the editor may try to preserve the original formatting and styles. As a general rule, you do not want this, because those styles will probably clash with your web site style sheet. Really, you want just the original content, but reformatted to match the web site style. See the section on Style, above, for information on fixing these problems.
• When pasting information from other web pages, you may include images in the copied data. When you do this, you are not actually copying the images, only a link to them. Those images only exist in the original location, which means they could vanish without your knowledge.
• When pasting information from other web pages on your own site, you may include images or dynamic content in the copied data. When you do this, you are only taking a "snapshot" of the images or copied data at that time. Although the original data is managed by the content management system (which means the images and dynamic content will get updated automatically), the copied data is not. It will remain static and won't update unless you manually edit it.
• When copying information from web pages, remember that some fancier web pages will have special stylesheet rules and Javascript code for formatting that do not get copied. The copied data may not reflect the original source in the way you expected.
• If you copy raw HTML code and try to paste it into the editor, it will go in as literal code, not as formatted text. (You can paste raw HTML into the plain-text editor in the advanced CMS tools, but the WYSIWYG editor reproduces exactly what you enter, including the special formatting codes.) Similarly, if you try to type HTML codes into the editor, you will get literal text representations of the codes that will not affect the formatting.

It is generally safe to use cut-and-paste inside the HTML editor. Eg. cut a section of text, images, and icons from one part of the edited content, and paste it to another.

In problematic cases where you cannot get the pasted content to conform to your web site style, even after trying to use the clean-up tool, the following method may help: copy the original content to the clipboard. Then open a plain-text editor (eg. Windows Notepad), and paste the content there. It will paste as just the original text, with no formatting. Then repeat the operation; select the text in the plain-text editor, copy it to the clipboard, and paste it into the ExSite HTML editor. Now you should have the original text, with no formatting; you may have to spend a little time restoring headings, lists, etc. Unfortunately, you cannot copy tables using this method.

Formatting Text

You can apply a variety of formatting operations to any block of selected text, using the text formatting tools:

To set a format for new text that you are entering, simply click on the appropriate tool to go into that mode. For instance, to begin entering boldfaced text, click on the B tool and then type the text. When finished, click on the B tool again, and you should revert to normal text.

To reformat a block of text, simply highlight the text and then click on the new format to be applied to it. You can also reformat lists, by highlighting the whole list, and then select the new list type.

Note that the font selection tools only have a very limited selection of fonts to choose from. This is because the correct fonts are normally defined by your website's stylesheets, and should not be manually specified in the editor. The small selection of fonts are available to be used in special cases where you need to override the stylesheet fonts for specific purposes (eg. code listings, or extended block quotations).

Unformatting Text

To remove all unnecessary formatting and styles, click on the cleanup tool:

(You will first be prompted to confirm the "scrubbing" operation.)

This operation removes colors, font settings, font sizes, special style directives, and any inessential HTML codes (including codes that are inserted by word processing packages such as Microsoft Word, which tend to interfere with normal web style sheets.) This is a good way of normalizing your HTML after importing it from another source with different formatting.

See the Style section, above, for more tips on how to use good graphic design style when composing your content.

Entering Images

If you have images loaded into your image library, then you can insert any of these images into the editor using the image tool. Click to place your cursor where you would like the image to go. Next, click on the image tool in the toolbar:

This brings up the image dialog:

Select the image to insert using the "Select an image/document" drop-down selector. This will show all images in the selected library. If you have more than one library of images available, you can choose an alternate library using the library selector. If none of your libraries has the image, but you do have the image in a file on disk, you can upload the image into one of your libraries using the upload buttons at the bottom of the dialog.

Once selected, your image will be previewed in the preview box. An image alignment selector will also appear. Choose left alignment if you want the image to be placed flush left, with text flowing around it. Choose right to place the image flush right, with text flowing around it. Leave the alignment unset to simply place the image without text flowing around it.

Assuming the preview shows that you selected the correct image, click on "Insert" to place the image into the editor at the point you chose.

To remove an image, simply click on it, and press the delete key. To re-size an image, click on the image once to bring up control points on the edges and corners of the image. You can click and drag these control points to re-size the image. Note that the quality of an image is best at its original resolution; the image quality will decrease as it is re-sized away from the original.

WARNING: Although you can cut and paste an image straight into the editor (eg. from other web pages or documents), this does not properly copy the images into your site. It merely copies a link to the original image. Those links will break if they are not accessible to other viewers of the web page (for instance, if the links point to files only accessible from your PC), or if they disappear from their original location on the web. To ensure proper access, always use the image tool to select images from your libraries.

Making Hotlinks

To create a hotlink to another URL, either place your cursor where the link should appear, or highlight the text that will serve as the link text. Then click on the link tool:

This brings up the link dialog:

If you highlighted your link text, it will be shown in the dialog. Otherwise, enter the link text in the given field - eg. "Click here to search using Google."

If you are linking to another page in your site, simply select the page from the drop-down list of those that are available (this will automatically populate the URL field). If you are linking to an external URL, type (or paste) it into the URL field manually - eg. "www.google.com" (the prefix "http://" is assumed unless a different protocol is specified).

If this link should open in a new window, check that option off. (It is common to do this for links that take you outside your site, for instance.)

Once everything is ready, click submit, and the link will be inserted into the editor. Note that although the link appears correctly in the editor, you cannot actually follow it by clicking on it inside the editor.

Making Tables

To create a table to format content into rows and columns, place your cursor where you would like the table to appear, and then click on the table tool:

This brings up the table dialog. Define the basic attributes of your table, such as the number of rows and columns. You can optionally define attributes such as column width or row height (these will apply to all rows/columns). You also have the option of setting background colors, border widths, and border colors. Note that your website's stylesheet may already define these, so it's a good idea to leave colors undefined unless there is a specific effect you are trying to achieve.

When the table is first created, the cells may contain some generic marker text such as "?". This is done so that you can see where the cells are located, even if the cell borders are invisible. If you see these markers, you can delete them and/or replace them with content that is appropriate for your table.

Editing Tables

Editing the content of tables is a simple matter of adding/deleting/modifying the text in the cells. Changing the overall size/shape of the table can be done by clicking on the table and then dragging the control points that appear until the table's layout is close to what you desire. (Generally, it does not pay to micro-manage your layout, since the table will format differently when your stylesheet takes over, or when viewed under different browser configurations.)

For more advanced table reconfiguration tools, select your table in the editor by clicking on it. Control points will appear around the table to show you that it is selected. Then you can launch the table editor:

The table editor gives you many options for editing your tables, including:

• modifying borders, background colors, and other attributes
  
• adding new rows and columns
• adding a row of headers
  
• deleting cells, rows, or columns
  
• setting cells to span multiple rows or columns
  

In general, select the particular cell, row, or column you want to work on. (For rows and columns, simply select any cell in that row or column.) The table editor has tabs for the cell, row, column, or entire table. Select the one that you want to operate on, and the table editor will show you your options for modifying that aspect of the table.

Note that when you set cells to span multiple rows or columns, you may end up "pushing" the leftover cells in the row or column off the edges of your table. Note that cells that get pushed off the bottom edge of the table may slip over to the leftmost column, since there are no other cells there to hold them in place. Generally, the way you clean this up is to delete the excess cells by clicking on them, then (from the cell tab in the table editor), clicking on delete.

The controls with the left-right arrows control column formatting. To delete the selected column, click on the x-in-circle symbol. To insert a new column, click on one of the arrows to insert a column to the left or right of the selected column.

The controls with the up-down arrows control row formatting. To delete the selected row, click on the x-in-circle symbol. To insert a new row, click on one of the arrows to insert a row above or below the selected row.

Adding Dynamic Content

The ExSite HTML editor makes it very easy to add dynamic content into your web pages. Dynamic content comes from one or more web application plug-ins that are installed on your website. Each of these plug-ins can generate blocks of interactive, dynamic content that are inserted into your pages wherever you place them.

To insert a block of dynamic content into a particular place on a page, place your cursor where you want the dynamic content to appear. Then, click on the dynamic content tool:


This brings up the dynamic content dialog:


The available web applications are shown in the Web Application drop-down list. Select the one you want to insert.

Every web application can accept parameters to pre-configure it. In most cases, the parameters are optional, and can be left blank (or set to default, if that option is available). Some web applications are smart enough to configure the optional parameters to give you a user-friendly choice of options. Other web applications only give you a blank options field, and you must know what sort of option string the web application is expecting in order to do anything other than the default (blank) action. If you have the documentation for the web application, it may give you some idea what parameter values are acceptable. When in doubt, leave the parameter blank.

Click the Insert button to place the web application into the editor. It will appear as an icon, representing the web application. This example shows an event calendar tool that has been placed into the editor:



This icon only appears in the editor view; when the content is viewed on the live site, the icon will invoke the calendar web application, and generate appropriate content to replace the icon.

You can also add regular text content and images in addition to the web application icon. The web application icon will expand in place into whatever content it is designed to generate, but the normal content will remain static from page view to page view.

To remove a dynamic content web application, simply click on its icon, and then hit delete.

To modify a dynamic content web application, it is usually simplest to delete it, and then re-insert it with new parameters. If you are editing the content in plain-text mode, however, you will see the parameters encoded directly into the dynamic content reference:

This examples shows what the Calendar web application would look like in a plain text editor. The "PARAMETERS" section (which would normally consist of some key=value style settings) could be edited to vary the web application's start-up behaviour. Most web applications have a default mode to start up in if the parameters are empty.