Contents

Using the Editor
Heading styles and other styles
Bold and Italic
Text alignment
Lists
Adding images
Adding internal and external links
Adding and manipulating tables
Working with html

Using the Editor

The editor in DissConnected.Net  is called 'Kupu' and is used by many other sites. It is generally quite straightforward to use. Mostly you select text and click on one of the toolbar icons to format that text. Images and tables are a little more complex (see below). Don't be afraid to fiddle around! At worst, you may have to delete something and try again.

Here is a demonstration of what it can do. Notice that there are headings, subheadings, there is an image, with text on its right, there is a 'call-out' highlighted text, there is some italic text, a table, an external link and a list. This is your basic vocabulary in the Kupu Editor.

Heading styles and other styles

There are two heading styles. Both are selected from the style menu. The line above  is a heading. This is a sub-heading.

and there are some special styles to make text stand out in different ways...

This is the 'literal style'. Could be used for quotes, for example.

and this is discreet! When you want to whisper. Perhaps add a comment to the reader.

Call out also adds some emphasis with its colour.

Bold and Italic

and then click on the menu items.

Text alignment

Another easy one. You have the choice of text that is left justified.

And of course you can combine this with headings and other styles.

 Lists

There are three types of lists:

1. Numbered lists
2. bulleted lists
3. and definition lists.
4. This is a numbered list.
5. To create it I typed the entries, selected them, then clicked on the numbered list symbol.

• This is a bulleted list
• This time I clicked on the bulleted list symbol on the first line.
• Each succeeding line then has a bullet.
• There is a small extra menu that appears to offer a choice of bullets, but doesn't work on this site.
  

To stop the bullets I clicked on the bulleted list symbol again.

Then there are 'definition lists'. This part in bold is called the 'term'

and this part that follows is called the definition.

And now we are back to a term. 

You can use this when you want alternating bold and plain.

•  The final two icons for lists increase or decrease the indendation.

• Here is a line with increased indentation.
• And another. It also gives you an extra colour to play with.
  

Adding images

1. To add an image, put the cursor where you want it to be, then click on the image icon.
2. You will then see the Insert Image dialog box.  Working from left to right, you can find an image that is already somewhere on the site. If you want an image that you haven't used before you can upload it from your hard disk. Click on the bottome of the second column: 'upload image here...'
3. Finally in the third column you select the alignment and the size. (But you can change the size afterwards by clicking on the image and dragging the handles.) You also give the image a name.
   

You can add as many images as you want. Once they have been added you can drag them to another position if you want, and resize them by dragging their handles. If you want to change the alignment click on the image to select it then click on the image icon to show the dialog box again.

Adding internal and external links

The first icon is for internal links (that is to other pages in this site. Select the text to be linked. Click on the icon, then select the internal page you want to link to.

The second is for external links to anywhere else on the Web. First find the external page to be linked to and copy its URL. Then select the text to be linked. Click on the icon, then paste the URL into the dialog box.

The third is for 'anchors' which are places within a page (on this site). If you want to link to a place in the same page (for a table of contents, for example) select the text, click on the anchor icon. Then select the style of the text you want to link to. You should then see a list of all text with that style. Choose the one you want.

To link to a place on another page, first set up the anchor on that page. Go to that page: Click on the anchor icon.

 Th

Adding and manipulating tables

Working with html