DotAdmin User Guide

The WYSIWYG Editor

When you open a Content Section for editing, a new window opens containing the WYSIWYG Content Editor. At the top of this window you will see the grey interface shown in the image below, which provides controls for editing your page content. Below this grey interface, the page you have opened for editing is displayed. The Content Section you can edit is surrounded by a thin grey border and a flashing cursor is displayed in its top left corner. The rest of the page is not editable.

Note: If you can't see the editable area, try clicking in the main content area of the page. When you click in the editable area, a flashing cursor will appear.

The WYSIWYG Content Editor.

The WYSIWYG Content Editor is divided into three main sections, as shown in the image above.

The Toolbar

The toolbar provides common editing controls. Most of these controls are similar to those found in popular Word Processing software, and work in a similar way. For a full explanation of each of these controls, see the section on The WYSIWYG Toolbar.

The Inspector

This section of the editor shows controls specific to the type of content you are editing. In the example shown above, the user is editing a table cell, and so the Cell Properties Inspector is displayed.

The Tag List

This section shows all the HTML formatting applied at the current cursor position, and is used in conjunction with the Inspector. In the example shown above, the cursor is inside a table cell, which is inside a table, which is inside a paragraph. Clicking on any Tag in the Tag List will change the controls shown in the Inspector, to allow you to edit the properties appropriate for that Tag.

Saving Your Changes

Buttons in the WYSIWYG Editor.

In addition to the Toolbar, Inspector and Tag List, three more buttons are displayed in the bottom-right corner of the WYSIWYG Editor. These buttons are shown in the image above.

To save your changes at any time, click the “Save” button. You will then be given the option of closing the editor, or continuing to edit your document. To close the editor without saving your changes, click the “Quit” button.

Viewing and Editing the HTML Source Code

Important! If you are not familiar with HTML we do not recommend editing in this view—you could mess up the appearance of your page. It is only provided for the benefit of users who are comfortable with manually editing HTML.

The “View Source” button allows you to view and edit the HTML which has been generated for your page. If you have created HTML for your site in another application, you can copy and paste your mark-up into this view, then switch back to the WYSIWYG view to see any changes you have made.

Guidelines For Using the WYSIWYG Editor

It is important to remember that, while you can see what your page looks like in Internet Explorer while you are editing it, the page may look different to users of other web browsers such as Netscape, Mozilla or Opera. This is because not all web browsers display the same page in exactly the same way.

Arguably the best approach to creating a web page which works well for every visitor is to keep it simple. While you may be eager to use all of the features of the editor when creating your web page, the best results usually come from a more conservative approach. This helps to maintain a uniform look across your web site, which in turn makes your site look more professional.

It is generally advisable to use styling and emphasis sparingly. For instance: Don't create an entire page using Headings just because you like the look of a particular heading, when paragraphs would probably be more appropriate. Avoid over-use of bold face or italic face, and don't crowd the page with too many images as this will make for a very cluttered look.

As a general guideline: If you find yourself trying to do something which the Content Editor seems incapable of - or which is proving to be very difficult to achieve - you are probably overcooking the goose. If simplifying your page isn't a workable solution, try contacting your designer who may be able to provide you with a different page template to help you achieve your goals.