Jango User guide - Using the HTML Editor

	The HTML Editor we have bundled in Jango is now compatible with Mozilla based browsers as well as Internet Explorer for PC. This means that for the first time, Macintosh, Linux and Solaris users can work in Jango in the same way that PC users have for years. Please check the Miro site for a complete list of all browsers supported.

Jango includes the latest version of the WYSIWYG Pro HTML editor. WYSIWYG Pro (which is valued at AUD $49 and bundled at no cost) in Jango sets new standards for editing within a web browser. It is now possible to do advanced table creation and editing, as well as using CSS styles as defined by your site template. The HTML Editor is a vital part of Jango. It allows for structure and content to be created quickly and easily with minimal knowledge of HTML.

	Using the HTML Editor

The majority of the instructions below will apply to the HTML Editor that is used in the administration area. However, features that appear on the front end version will also be discussed.

Choosing a mode

The editor has three different modes that can be used depending on your HTML skills and what you want to achieve. Those modes are:

• WYSIWYG (default)
• Text Mode (HTML Source)
• Preview

The default setting WYSIWYG stands for 'What You See Is What You Get'. This allows for real time previews of what the page you are working on is expected to look like. This mode will suit most people with a lesser knowledge of HTML coding.

Text Mode is the preferred mode by more experienced programmers. It can be used exactly the same as any other html editor and there is always the option to preview the page by switching to the WYSIWYG or preview mode.

To change modes simply click the corresponding tabs located at the bottom of the HTML editor.

Choosing a Style

The editor has predefined styles available that allow for quick changes between one style to another. The styles can be chosen by clicking on the drop down menu on the top left of the editor.

Choosing a Font

The type of font chosen can determine how good a site looks. If you would like to change the font of the text that has already been entered, highlight the text and select one of the fonts from the drop down list. If no text is selected, by selecting a new font will cause all the text entered after that to be in the new font type. The size of the font can also be chosen by selecting a size from the drop down menu next to the fonts.

Creating Links

To create links you have to type the text that will be displayed in the page, then highlight the text and either right click your mouse and navigate to 'Insert/Edit' a hyperlink or click the link icon on the editor. The first thing to do is select what type of link it is. The most common is a weblink which can be used to link to other pages. Another common link is the email address link. This can be used to setup links to email accounts. After choosing the type, you will need to type in the address of the link, email address etc.

Inserting Images

If the images are already located under the 'Assests' directory, then click on the image name and click 'OK' to insert the image. If you need to upload images, just click the 'Browse' button on the top right corner of the popup window, then navigate the image you wish to upload and click ok to upload the image. If you wish to change the more advanced options regarding the image, clicking on next after an image is selected will take you to the advanced options. The advanced options allows you to change the text positioning with the image, give the image a border and give the image a title. Alternatively you can use the Jango Assets manager to insert images, links and other media files

The Asset manager window can be opened at the same time to view your site assets. Simply select the item you want to insert onto the Asset manager, copy the code, change to the editor window and click 'Code View'. Paste your code and swap back to the WYSIWYG view to view the inserted image.

Creating Tables

To create a table, click on the 'Table' icon. If you hover your mouse of the icon it should say 'Insert Table...'. Another window will pop up with the options available for creating the table.

Set the rows and columns etc, you will notice their is a preview of how the table will look, once you are happy with the layout click 'OK' to create the table.

Table properties

Adding and deleting rows and tables, merging and unmerging existing tables together are some of the more advanced table features that are available with the new HTML editor. These operations can be performed by clicking on the table icons in the editor, these can be easily identified by hovering your mouse over the icon to reveal the icon summary.