Adding pictures is quite easy; they are automatically resized so they can’t be too big for the page – but some care is still required. If you have a modern digital camera that can take 6mega-pixel pictures, then you might need to resize the images BEFORE trying to upload them – the file size limit is 2Mb.

25/9/2009 – Please be aware that a recent Microsoft ‘update’ has removed the ‘insert file’ and ‘upload’ buttons from the window shown below.FIREFOX users are unaffected. You can get Firefox free.

We are continuing from the previous exercise of updating the home page – but the same applies to ANY page (though you may prefer to use slideshows instead of this method on other pages).

Click on ‘Site Home Page’. The editor window opens, showing the text that you wrote previously. Position the cursor (mouse pointer) at the end of the text.

Move your mouse over the buttons at the top of the editor; thrid in from the right is ‘Insert Media’. Click this and a new window opens (this is called the ‘Remote File Explorer’ and will show any pictures and files that you’ve uploaded to your site – it’s empty ate the moment, for obvious reasons!)

At the bottom of this window is an ‘Upload File’ button (it may say something different, depending on your browser). Click this and another window opens (right), showing files and folders on your computer. Note that you can change the view to show ‘thumbnail’ pictures, all details etc, so your view may differ from that shown below.

Choose an image file that isn’t too big – note the one I’ve chosen is 240 x 184 pixels. You can change images on the server, but we will keep things simple for starters! I have clicked on ‘Conwy Suspension Bridge.jpg’, then click ‘Open’. After a few moments, the file will be uploaded to the server and will show in your’Remote File Explorer’ window. It will be selected (highlighted) so click ‘Insert’ (below left), then the update page will show your picture (below right).

This doesn’t look too good at the moment – the picture is in the wrong place, and ideally the text would flow around it. This is easy to fix! Click on the picture and drag it so that the cursor is at the start of the second line.

You will notice that ‘handles’ appear (square blocks at each corner) on the image to show it is selected. Whilst the image is selected, different options appear at the bottom of the Editor window. Click the ‘Advanced’ button.

Change the alignment to ‘Left’. It is also good practice to label your pictures, so enter a description of you picture in the ‘Alt’ box (ALT is an abbreviation of ‘Alternative text’).

Click ‘Update’ then look at the public version of your home page:

Note that the ALT text is displayed when you move your mouse over the picture. This is an important element for vuisually impaired people who may be ‘looking’ at your page with a screen-reader; they obviously can’t see the picture, so a description helps them navigate through the page. It is also helpful for thise who may be browsing without images being shown

In the next tutorial, we will start to add pages to the site.