Homepage editor

Basic functions

Text design

Text alignment

Web related functions

Creating links

External links – links to other websites

Handling images – to upload images

Image menu bar

Image editor

 Image processing

Document Management – Uploading documents

Uploading a PDF file

Uploading a ZIP file

Tables – table menu bar

Inserting tables

 Invisible tables and transparent tables


The homepage editor (HTML editor) simplifies any work that needs to be done on your website. No programming skills are required.

Basic functions

These are the main menu icons:

* Open page, starts the file management

* Save page

* Save page as - saves the page under a different name

* Start page again

* Cut

 Copy

 Paste

 Undo last action

 Redo recent action

Examples showing how to use cut, copy, paste

To copy objects like text, images or tables, select the object and click on the  Copy symbol. Now click onto the part of the page, where you want to paste the new object, and click on the   Paste button. 

Text design

Following functions for text editing are available. Simply select the text and click on one of these icons.

* Bold letters

 Italic letters

 Underline

 Superscript

 Subscript

 Text colour

 Text background colour

 Remove text format

 Font type

 Font size, input box to type in the font size

Text alignment

 Left-aligned text
 Centre-aligned text
 Right-aligned text
 Centre justification
 Remove format, deletes text alignment
 Consecutive numbering
 Doted list
 Indent more, increases paragraph indention
 Indent less, Less paragraph indention

Web related functions

 Settings

 Templates

* Menu settings

 Position Relative, releases object

 HTML code view

 Search – search text in website and code view

 Insert link
 Remove link
 Images  - Image management
 Documents  - Document management
 Insert table – enables or disables the Table Menu bar
 FTP folder – access via FTP
 Insert divider bar – line break
 Insert form - Creating forms
 Modules and Plug-ins  - Special objects like Ticker, Counter, Time/Date, Slideshow, Mouseover-image
 CSS settings
 Insert special character

Creating links

A link can be a text, part of text or an image. Select the text or image in the editor and click on  Insert link.

In the pop up window click on  Select page.

The following example shows how to create a link to the contact.html page:

In the file management click on the page ‘contact.html’ and confirm that you would like to open this page by clicking ‘Apply’.

Confirm again by clicking on ‘Insert’ in the link window. Save the page, close the editor and double check the results.

External links – links to other websites

External links are links referring to other websites but your own. Again select the text or image and click on  Insert link. Now enter the web address (URL) you want to create a link from your page to, for example http://www.bluetronix.com.au. If you want the new website to pop up in a new browser window, you can configure this through the category target New_window.

Confirm by clicking on Insert in the link window. Save the page, close the editor and double-check the results.

Handling images – to upload images

With the help of the Image management you can transfer images from your local hard drive to your web space and use them in the editor.

 Select image folder
 Edit image, see Image editor
 Delete image
 Download image

The following example shows how to upload an image and use it in the editor.

Start the image manager by clicking the  Image management button. Click on Browse and select an image file from your local hard drive. Click on Open and then on Upload image.

To add the image, simply select it and press Place image.

 An image file needs to have a .jpg, .jpe, .jpeg, .png or .gif file extension and must not be larger than 1 MB. To upload other files, please use  FTP access.

Image menu bar

When you select an image loaded in the editor, the image menu bar will pop up immediately.

Here you can change image size, image title, border colour and border widnoth. The option Constrain Proportions fits the picture automatically within a selected image size. The option Smooth sharpens the image (smooth edges). The option Auto resizes the picture to a pre-defined image size.

The following example shows how to insert an image into the editor. The file in use has a resolution of 640x480 and is of 95 KB small, it has been inserted into the image editor in different sizes.

Image with 250x188 pixel, adjusted and 'Constrain proportions' switched on, file size 28 KB

Image with 150 x 188 pixel, Adjust and Clip switched on, file size 18 KB

Image with 250 x 100 pixel, Adjust and Clip switched on, file size 17 KB

An image can be used at different positions on the webpage with different resolutions. The images will be resized by the bluetronix software, therefore it is not necessary to edit the images beforehand.

 Changing the source picture in the image manager will result in a change of all versions of this image.

Image editor

The image editor allows you to edit a picture conveniently without the need of any additional software.

* Open image

* Save image

* Save as


       Zoom parameter
 Undo

 Redo
 Flip vertically
 Flip horizontally
       Contrast
       Brightness
 Clip and resize image, clip selection frame
 Unselect
       Width in pixel
       Height in pixel
       Constrain proportions to remain constant proportions when changing image size
 Resize image
 Restore image properties to original

       Rotate (degree)
 Rotate clockwise
 Rotate anti-clockwise
 Inverted image, converts image to negative pattern image
 Grey-scale image, converts image to monochrome colours

 Image processing

The following example shows how to edit an image by clipping it, flipping it and saving a new version with its contrast and brightness adjusted.

 

Original

Edited image

Start the  Image management, select an image and click on  Edit image. To clip the picture click the left mouse button, hold it down and define the selection frame by moving the mouse pointer. Now press the symbol  Clip and resize image. Finally, to flip the image press the  Flip horizontally button.

The next step is setting contrast and brightness of the picture. Use the respective fields and enter +2 at the contrast field and –1 at the brightness field. If any step does not produce the desired outcome, you can  Undo the action. After finishing your modifications, save your changes by clicking on * Save.

Document Management – Uploading documents

The document manager enables you to upload documents like PDF, DOC, XLS, ZIP as well as media files like WAV, MP3, SWF, MOV etc. from your local hard drive onto your web space and use them in the editor.

Depending on the file type, a document will be inserted so that it will be displayed automatically with the respective programme. This means that clicking on a PDF file, starts a PDF viewer. If the document is a ZIP file, a download popup window will appear or if it is a MOV or MP3 file, the media player will start.

 Select folder
 Download preview file, Preview in new window
 Delete file
 Download file, saves file on your local hard disk

Uploading a PDF file

The following example shows how to upload a PDF document and use it in the editor. Start the document manager by clicking on the  Document management symbol. Click on Browse, select a PDF file from your local hard disk, click on Open and then on Upload file.

To insert the document, select it and press the Insert file button. Now close the document manager and save your website. Check the result by clicking onto the file name at your homepage and the PDF file should opened.

Uploading a ZIP file

The following example shows how to upload a ZIP file and use it in the editor. Start the document manager by clicking on the  Document management symbol. Click on Browse, select a ZIP file from your local hard disk, click on Open and then on Upload file.

To insert the document, select it and press the Insert file button. Now close the document manager and save your website. Check the result by clicking onto the file name at your homepage and a download dialog will appear.

 A document file must have one of the following file extensions: tif, fla, swf, wav, doc, wri, txt, xls, pdf, csv, zip, mpg, mov, mp3 or ppt and the file’s size must not exceed 10 MB.

If you want to upload a bigger file, please use FTP access.

Tables – table menu bar

Tables are an important design tool for websites, allowing a precise placement of elements within HTML pages.

Inserting tables

In the editor click on the button  Insert table. To highlight a table you can change the settings for background colour, border colour and border widnoth. Enter the number of rows and columns and confirm by clicking on Insert.

When clicking on a table/table border in the editor the table menu bar will appear automatically.

 Insert row (below the selected row)

 Delete row

 Insert column (on the right side of the selected column)

 Delete column

 Table’s total widnoth – in pixel or percent of the site’s widnoth

 Table’s total height - in pixel or percent of the site’s height

 Cell offset- defines the offset between text and table cell

 Border widnoth

 Border colour

 Table’s background colour

 Cell background image – for each cell possible

 Remove a cell’s background image

 Cell background colour – define colours for the entire table or for each cell

 Cell’s widnoth - in pixel or percent of the table’s total widnoth

 Cell’s height - in pixel or percent of the table’s total height

 Vertical text alignment

 Invisible tables and transparent tables

A table without border can be used for placing images and text precisely on your site. The following example shows how to place two images with subtitle next to each other.

In the editor, click on  Insert table. Select two columns (two images next to each other) and one row. Because the table is used for defining the position of the images supposed to be invisible on the page, define the border widnoth as zero. Confirm your selection by clicking on insert .The table border widnoth ‘zero’ is shown in the editor as dashed lines. Those lines will not be visible on your web page after you saved it.

Finally, insert an image from the image manager into the left cell of the table and give it a subtitle. Do the same with the right cell. After saving your page you can check the result.