homepage editor


The homepage editor (HTML editor or also known as Wyswy editor) simplifies the editing of web pages. No programming knowledge is required for operation.

Basic functions

The following describes some of the icons of the menu bars.

Open page, starts the file management

Save page

Save page as, saves the page under a different name

Start a new page

cutting

Copying

insertion

Undo, undo last executed action

Restore, last �Rückgängig machen� revoked

Cut, copy and paste example

To copy objects such as texts, images or tables, select the text or image and click on the Copying Symbol. Now click at the position where the text is to be inserted and click on the insertion Button. 

Text design

The following functions can be applied to texts. To do this, select the corresponding text and click on one of the icons.

Boldface

Italic type

Underlined

Superscript

Subscribed

Text color

Text background color

Remove text formatting, removes all formatting

 Font

 Font size, with input field for manual input of the font size

Text Alignment

 left-justified text alignment
 centered text alignment
 right-justified text alignment
 Justification
 Remove text alignment
 Numbering - automatic numbering of paragraphs, in combination with �Absatz

       einrücken� subitems can be realized
 Point list � analogous to the numbering only stylistically with dots instead of numbers
 indent paragraph
indent paragraph less

Web-specific functions

 Page settings

 Template

 Menu settings

 Release object

 HTML code view

 Search � finds terms on the page and in the code view.
 Remove link
 Own pictures - Image management
 Documents - document management
 Table menu bar - Enable and disable the Menu bar
 FTP directories - access to the FTP directory
 Insert dividing line - Text design
 Insert Form - Create forms
 Special objects - ticker, counter, date, slide show, mouseover - Picture
 Insert button - Create buttons
 Special characters

Create link � Connect pages

A so-called link is a reference to another page. A link can consist of a text or an image. To do this, select the desired text or an image in the editor and click Insert link.

In the link window click on  Select page.

In this example, a link to the page Contact.html is to be created. In the file manager, click on the page contact.html and confirm with Apply.

Confirm in the link window with insertion. Save the pages, close the editor and test the link.

External links � Link to another website

External links are references that connect to another website. To do this, select the desired text or an image in the editor and click Insert link. Now enter in the field �Link� the so-called URL of the web page, for example https://www.bluetronix.de...in. If you want to open the Web page in a new browser window, select New_window.

Confirm in the link window with insertion. Save the pages, close the editor and test the link.

The image management � Upload images

With the help of the image management you transfer images from your local PC to your web storage space and insert them, for example, in the editor.

 Select images directory
 Image Editor, for edit the image online
 Delete image
 Download picture (download)

In the following example, an image is to be uploaded and then inserted into the editor.

Start the image management with a click on the button Image management. Click on the Searchbutton to select an image file from your PC. Click on Opening and then to Image Upload.

To insert the image, mark the image with a click and press Insert image.

 An image file must have the extension jpg, jpe, jpeg, png or gif and must not be larger than 1 MB. To upload files that are not applicable, use the FTP access.

The picture menu bar

When you click on an image in the editor, the image menu bar is automatically displayed.

Here you can set the image size, image title, border color and border width. The function Smoothing automatically calculates the image to the entered image size. The function Car crops the image to fit proportionally into the specified image size.

In the following example, the image was transferred with a resolution of 640x480 pixels and a file size of 95 KB and inserted several times in the editor in different image sizes.

Image size 250x188 pixels, with smoothing, and proportionality, file size 28 KB

Image size 150x188 pixels, with smoothing, and auto-crop, file size 18 KB

Image in size 250x100 pixels, with smoothing, and auto-crop, file size 17 KB

An image can thus be used at different places in the editor in different resolutions. The bluetronix software automatically calculates the images in pixel size and resolution. A previous cropping of the images can be omitted.

 If the image is replaced in the image management, all versions of this image will change automatically.

The Image Editor

With the image editor you can easily edit images from the image management online without any additional software.

Open image, starts the file management

Save image

Save Image As, saves the image under a different name


      Selection field Zoom factor
Undo, undo last executed action

Restore, undo last undo
Mirror vertically
horizontal mirroring
      Contrast selection field
      Brightness selection field
Crop image, crop to selection frame
Clear selection
     Input field width in pixels
     Input field Height in pixels
     Keep proportionality when changing image dimensions option
Crop image to input size
Reset image, reset to initial state
      Input field for rotation in degrees
Turn clockwise
Turn counterclockwise
Convert to negative image
Convert to grayscale image

Example - Edit image online

In the following example, an image is opened, cropped to a specific area of the image, mirrored, and saved after brightness and contrast adjustments.

 

Original picture

Image after editing

Start the Image managementselect an image and click on Image Editing. To crop the image, click with the left mouse button on the starting point for the image section. Keep the mouse button pressed and drag the frame to the end point for the image section. Click on the icon Crop image. To flip the image, click on the button horizontal mirroring.

The next step is to adjust brightness and contrast. To do this, use the check boxes and set to +2 for contrast (increase by 2 values) and to �1 for brightness (decrease by one value). If the desired result has not been achieved click on Undoto undo the last action. Save the image with a click on Save.

Document management � Upload document

With the help of the document management you transfer documents such as PDF, DOC, XLS, ZIP as well as media files such as WAV, MP3, SWF, MOV etc. from your local PC to your web storage space and insert them, for example, in the editor.

Depending on the format, the document is inserted in such a way that it is generally accessed with the corresponding application. For example, a PDF is inserted in such a way that when you click on the file name, it is opened in the PDF program. Clicking on a ZIP file opens the download window (Download window). With MOV and MP3 the player opens to play the movie or title.

 Select document directory
 Preview in new window
 Delete a document
 Download document (download)

Uploading a PDF file

In the following example, a PDF document is to be uploaded and then inserted into the editor.

Start the document vault with a click on the button document management. Click on the Searchselect a file from your PC and click on Opening and then to File Upload.

To insert the document, mark it with a click and press File Insert. Close the document vault and save the page. If you now click on the file name on your homepage, the PDF opens automatically in the PDF program.

Upload a ZIP file, make it available for download

In the following example, a ZIP file is to be provided for download.

Start the document vault with a click on the button document management. Click on the Searchselect the ZIP file from your PC and click on Opening and then to File Upload.

To insert the file, mark it with a click and press File Insert. Close the document vault and save the page.
In order to test the download, click now on your homepage on the file name of the ZIP file and then in �Datei save Fenster� on Save.

 A document file must have the extension tiff, tif, fla, swf, wav, doc, wri, txt, xls, pdf, csv, zip, mpg, mov, mp3 or ppt and may not be larger than 10 MB when uploaded in the document management system. If the file is larger, upload it using FTP. See also Uploading a file with FTP.

Tables - Table menu bar

When designing a web page, tables have an important function for positioning elements.

Insert table

In the editor, click on the button Insert table. To highlight the table, make the settings for background color, border color and border width. Enter the number of columns and rows and confirm with insertion.

When you click in a table or on the edge of a table in the editor, the table menu bar is automatically displayed.

Insert row - inserts a new table row below the selected row

Delete line - removes the selected line

Insert column - inserts a new table column next to the selected column

Delete column - removes the selected line

Table total width - formats the width of the table in pixels and as a percentage

Table total height

Cell spacing - sets the distance between the text and the border

Edge width

Border color - The color of the table border

Table background color

Cell background image - a background image can be set for each field of the table

Remove cell background image

Cell background color - as for the entire table, a background color can be selected for each table field

Cell column width - formats the width of the column in pixels and as a percentage

Line height of the cell

vertical text alignment - the text within a table field can be aligned vertically

Invisible table, table without border, transparent table, position image and text next to each other

A table without border can be used for aligning and positioning images and text. In the following example, two images, each with an image description, are to be positioned next to each other.

Click in the editor on Insert table. Enter 2 for the number of columns (for 2 images) and 1 for the number of rows. Since the table is only used for positioning and should not be visible on the homepage, enter 0 at �Rahmenbreite�. Confirm with insertion. The table is displayed with border width 0 in the editor with dotted lines. After saving the page, these lines are no longer visible.
In the editor, click in the left table field and insert from the Image management a picture. Enter a description of the image below the image. Now click into the right table field and insert the 2nd picture. Save the page and check the result on your homepage.

Homepage Software Chapter selection
CMS