The homepage editor (HTML editor) simplifies any work that needs to be done on your website. No programming skills are required.
These are the main menu icons:
Open page, starts the file management
Save page as - saves the page under a different name
Start page again
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.
Following functions for text editing are available. Simply select the text and click on one of these icons.
Text background colour
Remove text format
Font size, input box to type in the font size
Remove format, deletes text alignment
Indent more, increases paragraph indention
Indent less, Less paragraph indention
Position Relative, releases object
HTML code view
Search – search text in website and code view
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
Insert special character
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 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.uk. 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.
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
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.
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.
The image editor allows you to edit a picture conveniently without the need of any additional software.
Clip and resize image, clip selection frame
Width in pixel
Height in pixel
Constrain proportions to remain constant proportions when changing image size
Restore image properties to original
Inverted image, converts image to negative pattern image
Grey-scale image, converts image to monochrome colours
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.
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.
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.
Download preview file, Preview in new window
Download file, saves file on your local hard disk
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.
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 are an important design tool for websites, allowing a precise placement of elements within HTML pages.
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)
Insert column (on the right side of the selected 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
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
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.