Writing webpages isn't exactly like using your favorite word processor. There are a few quirks when it comes to webpages. Although you may not know it, you are actually writing in HTML code - and this code has its rules.

True, we have a fancy editor for you to use that kinda looks close to a word processor - but this editor is transforming your text to HTML in the background.

So here are a few tips in using our editor, and writing basic HTML code.

Editing Your Pages

First your need to log onto your website.

Then, when you come to page you can edit, you will see the button. Click on it to enter the editor.

Save your work regularly - every 5min

As with any application, it is recommended to save your work regularly. Also online web editors can timeout - so if you don't save your work your session could expire.

This may sound a bit daft - but it is a security measure. Logins will expire if there is no activity for a set amount of time.

If this is becoming a hassle - please contact us and we can increase the timeout.

Copying  Plain Text into your Article - important!

When pasting in text from other sources such as Word, or from other web pages, you should Paste as Plain Text and then reapply the formatting to suit. If you otherwise do a regular paste, you will copy hidden codes that could effect your webpage formatting.

To paste as plain text, click the down arrow of this button     and select "Paste as Plain Text"

Images and Tables

If you are using images left or right of text, it is often better to first build a table. Put the image in a cell and the text in the adjacent cell. You will find that you will have better control of how the text wraps around the image.

To build a table, click on . Sometimes it is good to make the cellpadding 10 - this pads out the cells 10 pixels, putting a space between image and text.

Inserting Images

Step 1: click onto open the image tool. You should get a dialogue box like this one popping up...

Step 2: Because you are using a live web editor, you need to upload your image from your PC to the webserver. Click on to upload a new image (its above the details window).

Step 3: Click on Add File... Select your file(s) and click Open.
TIP: you can select more than one file with CONTROL or SHIFT.

Step 4: Click Upload. When the files have uploaded, click Cancel or the close box.

Step 4: Important: find your picture and click it once, and then click again until the image details (URL, Dimensions, etc) are shown in the Article Image box. The image is now selected for inserting.

Step 5: Choose the Align option.

Step 7: If the image is right against other objects (like text), you may need to add a margin. The Margin settings are just under the Alignment settings. Something like 10px all around is usually good.

Step 6: Press Insert.

TIP: You can edit your image settings by selecting your image, and clicking the

TIP: For stricter control on wrapping text around images, try inserting a table () with two columns, one row. The place the image in one column, and the text in the other column.

Re-size Your Images *before* Uploading Them

There are three good reasons to re-size your images before you upload them to the web...

1. Small images take up less webspace
2. Re-sized small images are clearer and look better.
3. Small images are faster for your readers to download.

There are many ways to resize a picture...

• If you are using XP, download the image resizer power tool and you can resize in filemanager. More info here.
• You can use packages such as Photoshop, Paintshop, Corel Draw, or even Paint before you upload them.
• If you don't have a program to resize your pictures, you can get a free one here.
• There are other website that re-size pictures for you like www.resize2mail.com.
• Use the resize button on the Imagemanager. It looks like this and is found on the right hand side/lower part of the popup box. To use this button, you will need to first upload the image to the web and then resize it with the button - and depending on the size of your files and how many you are doing, that could be time consuming.

Small images like thumbnails are usually at 200 pixels wide. The largest picture you would have on your website would not be bigger than 800 pixels wide (~100kB). An image you get off a camera may be around 3500 pixel wide (~2000kB).

Sure, if you are feeling lazy you can re-size the image withby changing the dimensions, but as you'll see, it will look slightly fuzzy. This is because this tool is using a basic HTML code to re-size the image. This method also does not reduce the file size - so it will take longer for your readers to see it, and it is chewing up your webhosting space.

Keyboard Shortcuts

There are some keyboard shortcuts that are the same across applications, including our CMW.

• Control+Z: Undo
• Control+X: Cut
• Control+C: Copy

• Control+V: Paste

Use Predefined Formats

If you can. try to resist making your own styles with colours, fonts and font size. Instead, highlight your text and apply a format tag style. These format styles are basic HTML tags used in all webpages. That way all the headings on your site will look the same, and we will have better control of them if we need to change the look of your page.

The Format box looks like this - but it may have the words Paragraph in it. You can change for format with the dropdown arrow on the right.

The Styles box could also be used to format your text. But this may not be too helpful for you, as you'll find there are a lot of styles listed in this box that are unhelpful. This is because you are seeing styles used from behind the scenes on your webpage.

Example formats that are used regularly are:

• Paragraph - for regular paragraphs
• Heading 1 - used for things like the title of the page
• Heading 2 - used for subtitles. For example "Use Predefined Formats" is a Heading 2.

Seeing your HTML

Don't think you are writing HTML? Then click on this button to see what is happening behind the scenes.

If you understand a little HTML, you can also edit it direct by using this button. This can help sometimes if the editor gets confused.

Inserting Links

Use this tool to insert a link. Sometimes you need to high light some text for the tool to become active. You can use the same tool to edit a link.

When linking to one of your own pages, use the link tool and under the Content section, find and select your article.

Webmaster's TIP: when you are linking to an outside site, set the Target to be Open in new window. This will open a new window for the outside site, and the reader won't loose your web page. As a webmaster - you don't want your readers to loose your webpage.

Inserting emails

Step 1: Use this tool to insert a email. Sometimes you need to high light some text for the tool to become active.

Step 2: Under the Email section type in the email under Address. If you like, you and type in a subject for your email too.

Step 3: Important! Click on the Create button. The tool will then create the correct HTML link code for the URL.

Step 4: Click Insert.

By using this tool, an email is placed on the webpage with extra codes that inhibit email harvesters.

Misbehaving Formatting

If the format of your text is misbehaving - it is most likely due to some hidden codes. To fix, you need to remove all the formatting and the reapply it. There are a few ways to do this. Try one of these...

1. Try to clean up the hidden text by selecting large sections and clicking the erase formatting icon ()
2. Select all you text from start to finish. Cut and paste as text (). You'll have to re-insert your images and tables again.
3. Last resort for the advanced user - get into the HTML code and manually clean it up. You can edit the HML code using the Edit Code button ().

Spacing Paragraphs (more than one line).

This is actually Browser/HTML quirk. Some browsers delete empty lines - so the editor so does this in an effort to show you what your readers will see.

So if you really would like a big gap between paragraphs put a space on each line and then a return. Like below...

Because the space is there, its strictly an empty line!

Another thing to note, in the world of HTML SHIFT+ENTER is different than just a ENTER.

• SHIFT+ENTER is used for a new line, not not a new paragraph. The gap between lines is small.
• ENTER means new paragraph - so there is often a bigger gap inserted when using just a ENTER .