Using the Online HTML Editor

LAMS 2.4 Authoring and Learning tools use CKEditor The updates includes increases in speed and better rendering of content.

CKEditor Links These are links to the CKEDitor website, which may help you in using the software. Further discussion is of the editor is on this wiki page below. CKEditor User Guide CKEditor demonstration

Contents

Online HTML Editor Interface

This is a brief description of all the interface elements on the Toolbar.

Top Row

• Shows the source code for the editor page.

• Expands the view to fullscreen.

• Previews the text in a new web page.

• Cleans up text pasted from Microsoft Word, removing excess formatting.
  • Paste from word dialog box:

• Removes or replaces the most recent actions.

• Basic text formatting.
  • In order: Bold, Italics, Underline, Subscript, Superscript, Numbered List, Bulletted List, Indenting (Left and Right), Alignment (Left, Centre, Right, Justified), Text Colour, Highlight Colour.

• Equation Editor.
  • When the Latex Equation Plugin is installed, this button will insert an equation onto the page.

Bottow Row

• Paint opens a new layer that allows the author or learner to create a painted image and insert it into the fck editor. More info here.

• Inserts a media clip. Click here for more details..
  • When using FCK 2.6.4, this button opens the Media Player properties, allowing you to insert movie and sound files onto the page.

• Inserts an image. (See section below)

• Attaches a file. (See section below.)

• Adds a table to the editor.

• Adds a horizontal divider.

• Inserts emoticons and smileys.
  • 

• Inserts special characters and symbols.
  • 

• Creates document templates for quick page creation.
  • 

• The Format menu allows you to apply custom CSS styles to your text, ranging from Heading 1 to Heading 6.
• The Font menu allows you to choose from a list of 'web-safe' fonts.
• The Size menu applies HTML sizes to the selected text.

LAMS Painter (from v2.3+)

Click for larger view.

The LAMS painter allows the author or learner to insert a painted image as part of the instructions for a lesson or as a response to a question.
The Painter allows the selection of a full range of HEX colours and can draw shapes, lines and text.
When completed, the image is saved to the LAMS server and inserted into the fck window that is being edited.

The painter works really well with touch-enabled devices, like the Nova 5000!

Google Gadgets

There are over 49 thousand Google Gadgets.

A new feature of LAMS is the ability to include Google Gadgets as part of a LAMS sequence; this presentation will walk you through the process.

Showing the gadget from the Learner's perspective.

Google Gadgets can enhance the visual appearance of LAMS lessons sequences. Please note that certain gadgets do not display very well when authoring the activity - however previewing the sequence, or viewing the activity in FCK Editor
s preview mode should make them display correctly.

Inserting Images

Information on inserting images with the Online HTML Editor is available from the user guide..

The icon for inserting image is - clicking this button opens the 'Insert Image' dialog.

Online HTML Editor Insert Image Dialog

"Image info" tab.

"Upload Image" Tab

To Upload an image in LAMS:

1. Select the "Add Image" button from the toolbar.
2. Select the "Upload Image" tab.
3. Browse to where the image file is located on your computer.
   • Alternatively, you can enter an image URL on the "Image Info" tab to insert directly from the web.
4. Click "Send it to the Server"
5. You can now return to the "Image Info" tab and modify the image properties. A live preview will display in the right of the screen.

You can add a hyperlink to the image by using the Link tab. Enter the target URL, or click Browse Server to see a list of already uploaded files.
The target list lets you specify how the link will open.

Improving appearance of uploaded files in LAMS

The Editor allows documents to be uploaded to a LAMS server; however the presentation of such documents can be improved with the code described in this section.

Where no content is selected, the Editor inserts a direct link to the file. The linking text can be edited to create a more aesthetic look.

The quickest way to achieve this is to first create the target text which will form the link, and then upload and link the file.

Where more advanced linking is required, you can edit the HTML link in the Editor, as described in the panel below.

More aesthetic presentation of WebPages in LAMS

Utilising WebPages within LAMS undoubtedly enhances its learning capabilities.
There are several ways to include external web sites in a LAMS sequence.

Linking to a Seperate Web Page

The simplest way to link to a web page using the Editor in LAMS, is to create the linking text or image, then select the Linking button from the toolbar.

On the Link Info tab, you can then enter a URL which will be the target for the link.

Using the Target Dialog, you can change the type of link which will appear. In most cases, Authors will want to choose between New Window (\blank) and Same Window (\self) which will open the link in a new window, or the activity window respectively.

Using HTML Embed tags

By far the most efficient way to include web pages in a LAMS document is by embedding them into the content of a Noticeboard or other activity.

Editor does not provide a graphical interface for this, but the HTML code is not too hard to learn:

<div align="center"><iframe height="400" width="95%" src="PUT TARGET WEBSITE HERE"></iframe></div>

Obviously, you replace the PUT TARGET WEBSITE HERE text with the target URL.

You can also change the align, height and width parameters to suit particular designs.

Including a page in a LAMS activity like this renders the following view:

MELCOE's website embedded into a LAMS activity.

Useful Plugins