Organisation Login

Print Friendly

Choose a town

MySouthWest MySouthWest Augusta Balingup Boyup Brook Bridgetown Bunbury Busselton Capel Collie Dardanup Donnybrook Dunsborough Greenbushes Harvey Manjimup Margaret River Nannup Northcliffe Pemberton Walpole

Advertisements

Advertise with us

Adding pictures to your website creates a personal touch and also provides much more interesting content for your visitors.  Before you add the pictures it will help to understand how the size of an image will affect upload times.

The size of an electronic image is measured in bytes, like any other electronic document; however the actual size that you see is measured in Pixels.  An image size of 600 pixels by 600 pixels is normally more than adequate for any use on the web.  An image that is this size in pixels will also be small enough in bytes to be quickly uploaded and viewed on the Internet.  This is important as a visitor who has to wait too long for an image to appear on their screen will normally not bother waiting and 'surf off' to some other website.  For example, the following picture is 600 pixels wide by 428 pixels high:

 There is rarely a need for such a large picture to be on a webpage, but you will want to use your own particular requirements to guide your own web pages.
 
Preparing your images:

Before you can use an image on your website, you will need to have prepared the size of it by using some photo editing software on your own PC.  Most modern PCs come with built-in editing packages.  The only formats that can be used by the MySouthWest system are GIF's or JPG's.  You will then need to store the image on your own PC, in a directory that you will be able to find later on.

Once you have your images ready you can then add them in to your web pages.  To add an image to your website, click on the page you want to put it into and click on edit.  This will take you into the HTML editor.

Position your cursor where you want the image to go and click on the Insert Internal Image icon . A new window will pop-up.

Put the mouse over the word Images and click on the right hand mouse button. A small menu appears.

Click on Add New Image with the left hand button.

You now will have to enter some information about the image:

You could store all of the images on your website in the default folder 'images'.  However, if you have a lot of pictures, then it is good practice to logically structure their storage.  If you wish to create a new directory for each category of image, then you can type a new directory name into the category box. Please note you only need to type the name in, there is no requirement to add the / character after it.

Click on the browse button and locate the image you want to use.  This will be somewhere on your own PC.  Click on the name of the picture once and then click on open. The name of the file is loaded into the Upload Image box.

You can choose to leave the filename the same as it is, or you can uncheck the box provided and type in a new filename.

Having completed that click on OK. The details window will close and the next window will have pre-selected the image you just uploaded.

Ensure the image name is loaded in the image box.

The alternate text box is what will pop-up when someone puts their mouse over the image, or if someone has selected to view text only they will see that instead of the picture, so put a meaningful description in there.

The alignment means where the picture will go in relation to any text on the page, but you can leave it at baseline and if you don't like it you change it later.'

A border is if you want to put an outline box around the picture.  Entering a number in here will put the corresponding number of pixels in a frame around the picture.  For example a 5 in here would place a 5-pixel width border around the image.

Likewise horizontal and vertical spacing is the gap that will be left between the edges of the picture and any surrounding text.  It is also measured in pixels, so about 5 or 10 or 15 will do, dependent on your own design. 

The height and width values are important.  The MySouthWest system is very clever. It can take an original picture of any size and resize it on the fly.  So a 600 x 600 pixel image can be shown at 200 x 200.  This is helpful if you wish to use the same picture at different sizes throughout your website.  One picture can be used many times and placed at different sizes depending on what you enter into these boxes.

A value of 200 x 200 will make it easier to see on screen and it will also reduce the overall byte size so that it can be viewed on-line much more quickly.

Leaving these height and width boxes empty means the full picture size will be loaded by default.  Should you wish to change your mind with regard to the size, it is easier to delete the picture from your page and re-enter it with a different size selected.

Large images will take a long time to upload and in the mean time your visitors may decide to surf elsewhere.

If you are not sure what 200 x 200 would look like, the following image is set to that size:

By experimentation you will begin to quickly realise what size is appropriate for your needs.

Once you have entered all the details, click on OK to enter the picture into your webpage.

If you then realise you do not like the way the picture is placed in relation to the surrounding text you can change the image properties.

Right click on your mouse when it is over the image. This will bring up a menu.

From here you can cut it, copy it or paste something over the top of it.

You can also make the image into a hyperlink, justify it and remove the whole thing by removing the <IMG> element, which is HTML 'for remove the picture!'

You can put a paragraph before it or after it, and you can also click on image properties.

If you select Image Properties, another window will pop-up.

Within this window you can change the Alternate Text, the border size, the horizontal and vertical spacing and the alignment.

Clicking on an alignment style via the drop down box and then clicking on ok will move the image in relation to the text on the page.

Continue to right click, select properties, change the alignment and click ok, until you find the alignment that works best for your page.

Once you are satisfied, click on update content and then save the whole page.

Open a new browser window and view your actual website through it.

Because you have loaded the image on to the MySouthWest system, if you wanted to insert another copy of it all you have to do is to click the internal image icon again.

This time, instead of selecting Add New Image, just click on the Images Folder and then find the image name that will be listed under images in the left hand side of the window. This will select the image and then you can set the properties on the right hand side.

Adding an external image

Adding an external image is exactly like adding an internal image (see this training manual), but you can choose an image which is actually on another website. When your page loads, it loads up the image from the other website and then displays it on your screen. All you need to know is the precise web address of the image, including the filename. But, be careful as you have no control over what happens to that image. You just have to hope it will always be out there on the Internet for you.

To add an external image, click on the Insert External Image Icon and another box will pop-up.

Enter the full address of an image on the Internet into the Image URL box.  To ensure you get the right address it is often easier to find the image address from the website it is on and copy it into the box.  The other boxes are the same as within the Internal Image dialogue box.

To make the image also link back to the original website when clicked, return to the editor and right click your mouse when over the image.

This will bring up a shortcut menu from which you choose Make a Link.

Paste, or type, the full URL of the image into the URL box. Add a tool tip (text that will display on screen when the visitor's mouse is moved over the link) and choose to open a new browser window.

Click on OK, update details and then save.

This will now give you an image which is referenced from an external site.  If that image changes on the original site, your image will also change.  By inserting a link on the picture you have also created a hyperlink that will take a visitor, who clicks on it, to the external website. 

To remove the link and the picture return to the HTML editor.  Click on the image and then press the delete key on your keyboard. The image and the link will be removed.  Click on update content and then on save.