Using the Online Editing Software
Contents
The editing software works much like a word processor. You will probably want to experiment first and this guide for reference if you get stuck. Below is some basic information to get started.
- Make sure the cursor is always within the two dotted lines.
- Your images will be size for the maximum the pages can take. You can reduce the size of the images to any size you feel suitable.
- You can cut and past text from another source, you must however copy this data to Microsoft Notepad first to remove the formatting.
|
|
This button saves HTML code of your edited content into parent form. |
|
|
This is windows function, it deletes selected content. |
|
|
Next windows function, copies selected text and object into clipboard of your computer. |
|
|
Opposite function to copy, reveals copied text and objects from computers clipboard and pastes them into editbox. |
|
|
Undo last action |
|
|
Re-do last action |
|
|
selected text is converted to bold |
|
|
selected text is converted to italic |
|
|
selected text is converted to underline |
|
|
edited/selected paragraph(s) will be aligned to the left |
|
|
edited/selected paragraph(s) will be aligned to the centre |
|
|
edited/selected paragraph(s) will be aligned to the right |
|
|
edited/selected paragraph(s) will be fully justified |
|
|
selected text and/or objects will be linked to any url |
|
|
selected text and/or objects will be un-linked |
|
|
creates bulleted list |
|
|
creates numbered list |
|
|
decreases indent of edited/selected paragraph(s) about 1 tab |
|
|
increases indent of edited/selected paragraph(s) about 1 tab |
|
|
creates horizontal ruler |
Image functions
By clicking on this icon you will open following menu:
Philosophy of this window was
slightly changed from version 1.0, from now on you don't have to click preview
image to add image into layout but you have to click on "insert image
button" in the bottom of the window.
As you can see there are more options for proper positioning of your images.
|
1 |
current folder - this
is root folder of your image directory, set in config of editor in standalone
version or it takes this information from configuration of your application
(Mambo, Nuke, ...) |
|
2 |
subfolders - list of subdirectories inside root folder with images, you can change directory by one click and list of images (3) will be automatically refreshed. |
|
3 |
images - list of images inside selected folder. Select image by click, preview (4) of the image will be shown. |
|
4 |
preview - this is preview of selected image (in new window), to view image in it's current size with measures and size in bytes. |
|
5 |
filename - this is filename with full path of the image. If you select filename from the list it will be assigned automatically. |
|
6 |
alt tag - you can assign alt text to each image. |
|
7 |
align - all available alignments of image, again you must first finish options if you want use them and then click on preview to add it into your content. |
|
8 |
border - set size of the border around image (in pixels) |
|
9 |
spacing - you can assign horizontal and vertical spacing of the image |
|
A |
measures - you can assign custom width and height of the image |
|
B |
insert image - this button will insert image into your layout but will keep this window open, if you are not satisfied with settings or placement, you can delete current image in editor, point your cursor to other place and new image again. |
|
C |
cancel - closes image window |
|
D |
upload new img - to enable to enhance your images we ask that you email your images to us. We have therefore dissabled this function |
|
|
Image preview
if you click on preview image in the window above (4) you
will get following image:
Links and File functions
Use this to link to any external pages and objects.
|
1 |
link URL or email - this is full path to linked object or mail starting mailto: |
|
2 |
link Alt - you can comment your link in alt tag; this is useful for better orientation of your visitors and also gives you better rating in webspiders. |
|
3 |
link target - you can link to new, parent or child page. |
|
4 |
create link - action button creating link |
|
5 |
link to local file - in the case you want to link local file, click to this bookmark and you will get file listing tool. |
|
6 |
upload file - upload any file into /files directory which you can link later |
|
|
Colour management
This is the most enhanced javascript Colour picker you can get. Choosing
colours never been easier and it's very intuitive. And what's more, you can save
5 custom favourite colours and editor will remember that.
You can find these two icons in right top menu and by click will open
Colour selector in the bottom of the editor. You can leave this subwindow open
as long as you need it. In version 2.0 was introduced background Colour
selector.
We have separated Colour management section into six parts:
|
1 |
Colour preview - you can re-pick already selected Colour by one click without choosing Colour from chart. |
|
2 |
rgb value - you are not limited just by 216 netscape safe colours but you can add any RGB Colour value - actual chosen Colour you will see in Colour preview (1) after deselecting rgb value (2). |
|
3 |
add button - by clicking this button active Colour (shown in Colour preview) will be stored into favourite colours |
|
4 |
favourite colours - any 1-5 colours can be stored in this place, editor will write their values as a cookie into your computer (with saving) and will reveal them next time editor is opened. |
|
5 |
Colour chart - this are 216 netscape safe colours, Colour can be chosen by click |
|
6 |
Colour status - shows which Colour is currently being edited |
Picking
colours:
You can pick colours several ways. Here are those most common
(numbers in text are sections in picture).
Way1 (onetime pick):
select text,
pick Colour in (5)
Way2 (repeated pick):
pick Colour in (5),
select text,
pick Colour in (1),
select other text,
pick Colour in (1) again
Way3 (double Colour pick via favourites):
pick first Colour in (5),
add to favourites by (3),
pick second Colour in (5),
add to favourites by (3),
select first portion of text,
pick first Colour from favourites (4),
select second portion of text,
pick second Colour from favourites (4)
Way4 (unsafe corporate id colours):
insert RGB value of first Colour into (2) and deselect,
add to favourites by (3),
insert RGB value of second Colour into (2) and deselect,
add to favourites by (3),
select first text,
pick first Colour from favourites,
select second text,
pick second Colour from favourites
and so on ...
Table functions
Table
creation was rewritten from scratch using DOM. From now on you can create
better tables than ever before and what's more, you can edit them later.
Editing is easy, just select one table (click on top border) and then click on
table icon in top menu, popup window will open pre-populated with current table
settings.
|
1 |
number of columns - number of columns in future table, this item is not later editable from here but you have to add or delete columns from rows&columns tab. |
|
2 |
number of rows - number of rows in the table, also this item must be later edited by adding and removing rows in rows&columns tab. |
|
3 |
table width - you can set table width in pixels or percents |
|
4 |
cellspacing - set cellspacing in pixels (space outside cells) |
|
5 |
cellpadding - set cellpadding in pixels (space inside cells). |
|
6 |
table height - you can set total table height in pixels or percents |
|
7 |
table settings preview - this is preview of background Colour and border settings, anytime you change and of these settings preview will show them in real time so you can precisely set your table appearance |
|
8 |
background Colour - set hex value of your background Colour |
|
9 |
Colour picker - or you can pick background Colour from this two row Colour picker, hex value will be automatically transferred into element no.8 |
|
A |
all borders settings - this row will assign equal settings into all four borders, if you change Colour, this value will be copied into all four edges, same as border thickness and style. Be careful if you worked out separated settings for each border, rather don't touch this row ... |
|
B |
separate border settings - you can separately set borders for each edge and see in real time preview in element no.7 |
|
C |
table align - tables can be aligned to the left, centre or right same as pictures, this means that text will flow around the edge of the table |
|
D |
create table - this button will deploy new table in the editor window where is placed cursor, this is an improvement from previous version, you can easily create table within table. |
|
|
Cell editing
same
as table settings also cell settings were improved, once you have cursor inside
table cell and click on this icon, you will get following window, pre-filled
with current cell settings:
|
1 |
cell width - set cell width in pixels or percent |
|
2 |
cell height - set cell height in percent |
|
3 |
vertical alignment - select vertical alignment from the list |
|
4 |
horizontal alignment - select horizontal alignment from the list |
|
5 |
rowspan - do you want to have cell covering more than one row, set it here |
|
6 |
col span - cell over more than one column can be set here |
|
7 |
cell settings preview - this is preview of background Colour and border settings, anytime you change and of these settings preview will show them in real time so you can precisely set your cell appearance |
|
8 |
background Colour - set hex value of your background Colour |
|
9 |
Colour picker - or you can pick background Colour from this two row Colour picker, hex value will be automatically transferred into element no.8 |
|
A |
all borders settings - this row will assign equal settings into all four borders, if you change Colour, this value will be copied into all four edges, same as border thickness and style. Be careful if you worked out separated settings for each border, rather don't touch this row ... |
|
B |
separate border settings - you can separately set borders for each edge and see in real time preview in element no.7 |
|
C |
no text wrap - if you want to have text in one line unwrapped, check this box |
|
D |
edit cell - this button will apply new cell settings to the cell in editor window where cursor is placed. Window will not close automatically, so if you want to apply same settings to another cell, just place cursor into another table cell and re-apply settings there. |
|
|
