Overview

Although not strictly a module on its own the HTML Editor is used throughout the OctEportal system whenever you need to edit the HTML-based information in your web pages.

 

It provides you with a wysiwyg function (the Maine Editor area) so that you can enter your information in a similar manner to a word processor but if you want to use more advance HTML it can be switched to HTML mode for direct editing of the HTML code.(the Display tabs).  You can add images, links, flash documents etc. and fine tune these to your needs (in the Property area, see later)

A number of other functions are built in (like the spelling checker) that will help you produce a polished, professional web site (the Tool bars).

 

Editing Text

Editing text uses the same techniques as are used in almost all computer programs.   If there is a techniques that you already use in your favourite word processor of editor program then it is worth trying because it probably works here too.  Some of the important features are shown below to get you started...

 Full Screen Mode

This function makes editing much easier. Click this button to allow editing in the whole of your screen, rather than just the area of your main panel.  You will need to toggle full screen off in order to save your changes.

 ClipBoard Functions

These buttons cover the 'standard' "Find [and Replace]", "Cut", "Copy", "Paste Last", "Paste from List", "Undo [from List]", "Redo [from List]"

 The Insertion Point
Typed characters are added to the page at the insertion point indicated by a blinking vertical bar.  You can change the position of the insertion pointing using the mouse or the arrow keys.

Text Selection
Text can be selected by dragging the mouse over it or by holding down the shift key while moving the insertion point with the arrow keys.  Once you have selected text most other formatting functions will then be applied to the text that has been selected.

Editing functions that can be applied to selected text include...

• Characters typed after selecting text will replace the selected text.
• Selected text may be moved to a different part of the page by dragging it with the mouse.

Character Formating

The appearance of the text is modified using the character formatting toolbars.

 General Formatting.
These formatting options are applied to the selected text or if none is selected it becomes the default formatting for text entered from then on.

B - Bold, I - Italic, U - Underline, abc - Strike-through, x² - Superscript, x₂ - Subscript

In addition you can change the case of words or blocks of code using

 

 Paragraph Type
 sets the HTML paragraph type.  Typically used to set different heading levels for different sections in the page.    

 

 

  Choosing the Font
You can select the font and its size to be used for the selected or following text.  Note that the way this will display on the user's browser will depend on whether they have the selected font installed. Font size will normally be determined by the Font style of the paragraph and the Style sheet making up the Skin. You are generally better to stick with the standard fonts such as Arial, Courier New, Tahoma, Times and Verdana.

 Text Colour
These controls select foreground colour of the selected or following text.  Click the arrow next to the A and pick the colour you want.

 Text Background
These controls select a colour for the text background.  This colour is shown as a background to the highlighted text.

  .

 

Formatting

 Alignment
Sets the alignment for the current paragraph.

 

This text is left aligned.  This is the default alignment and keeps text up against the left margin with a ragged right margin.	This text is centred.  All the text is adjusted to sit in the centre of the space.	This text is right aligned.  It keeps the text pushed against the right hand side of the space.	This text has justified margins.  This means that the text is adjusted to keep the margins straight.	Copied text should have no alignment

 Indenting
These buttons increase or decrease the level of indentation respectively.  They are also used in conjunction with Bulleted and Numbered Paragraphs (see below) to increase or decrease the current level of bullets or numbering.

 Bulleted Paragraphs
Bulleted paragraphs are shown with a symbol in front of each paragraph to highlight.  Text is indented under the bullet so that it is always shown to the left of the paragraph margin.  The actual symbol used for the bullet is determined by the current style which would usually be set by the skin for the web site.

Example:

• This is bulleted paragraphs.
• Each paragraph has a bullet at the start of the line and wrapped text is indented to remain under the start of the first line.
  • Increasing the indent adds a deeper level of bulleting.

 Numbered Paragraphs
Numbered paragraphs are the same as bulleted paragraphs except that a sequential numbering system is used instead of the bullets.  The style of the numbering is control by the current style or web skin and could include letters and roman numerals as well as conventional numbers.

Example:

1. Numbered paragraphs are given a new number
2. ...at the start of each paragraph.
   1. Increasing the indent adds another level of number for sub-paragraphs.
   2. ...which follows a new numbering order.
3. Removing the indent continues the original numbering.

Pictures and Images

The OctEportal conent editorallows you to add images, associate them with links, and add hotspots.  For more information see Images

 

Links

 

You can add links to other web sites or other pages within the web site using these tools.

 Add a Link
External: This will add a link into the page at the current insertion point.  If you have selected text before clicking this button the selected text will be used for the link otherwise the URL of the link will be placed in the text.

The address or URL of the link must be entered in the dialog.

Internal: To link to another page in the same web site we recommend you use the Internal Links.  Select the page from the list:

If you use the , enter the page ID (not the page name) together with the extension '.aspx':

 

 Remove a Link
Place the insertion point anywhere in the link to be removed and click the remove link button.  The link text will remain but it will no longer be a link.

Tables

Tables make it easy to lay out text in a structured fashion.  For more information on using tables see Tables

Utilities

These are additional useful functions that will help you produce polished professional pages.

 New Paragraph

Helps with proper spacing, rather than just relying on the return key

 Horizontal Rule

Adds a horizontal line at the insertion point.  The colour and width will be defined by your page style sheet

 Insert Current Date or Time
Inserts the current date or time at the current insertion point.

 Check Spelling
This allows you to check the spelling of the pages - always a good idea. Wrogn spelling detracts from the message.

  Insert a Symbol
The drop down list contains a wide variety of symbols that can be inserted into the page.

 Group Box

The Group Box consists of a header and content area.  You can therefore group text and images into one block, defined by the size of the box, which you can then place where you like on a page.
 Flash Manager

You can insert Flash movies into your pages using this Manager.  Use the handles at the corners to resize the selected video clip