Homepage editor
External links – links to other websites
Handling images – to upload images
Document Management – Uploading documents
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.org. 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 width. 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 width. 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 width – in pixel or percent of the site’s width
Table’s total height - in pixel or percent of the site’s height
Cell offset- defines the offset between text and table cell
Border width
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 width - in pixel or percent of the table’s total width
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 width as zero. Confirm your selection by clicking on insert .The table border width ‘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.
