" sample - sampleInstr
  Middleton Sub Aqua Club
Skip navigation links
Home
MSAC members pages


How to create a page with pictures

The following walks through creating a page with images and links.

Create a basic page as shown on the members page or edit your existing page and delete all text then hit save so that you can start with a blank page.

It is best to plan your page and get together all the images you wish to place on the page. You may wish to use word to draft your page. If so create your page in word and adjust the font. If you have ms word 2007 you may be able publish your word document directly to the site and will not need to use the web editor or upload the pictures.  If not then you need to upload the pictures you wish to use to the site so that you can include them on the page. 

Creating a page involves the following steps:

·         Upload the pictures

·         Plan the page

·         Build the page

Uploading Pictures

Before you upload pictures, try to ensure that they are the correct size. Use a photo editor to change the size and save them as separate images in a folder on your PC to make it easier to upload.

For example I have the following pictures on my PC and I wish to include them all on my page. I have already changed their size to fit on the page. Note they can also be changed automatically when they are uploaded.

 

To upload them I click on the "upload page images" link on the left of the members pages screen which takes me to the picture library.

It would be better if we all kept our own pictures separate so you need to create a folder for your pictures. To do this click on the new button as shown below then click new folder.

 

Type a name for your folder e.g your name and click OK

 

 

If you have already created a folder for a previous page then you can skip this step. Note you can create sub folders inside your folder to organise your pictures better if you wish.

After clicking OK, you will see your folder in the images list. Click on your folder to go into it.

Now we will upload our pictures. It is best to upload multiple pictures at once since it is quicker.

To do this, click on the upload button and then click on upload multiple pictures as shown below. 

 

The following box will be shown

I have already navigated to the directory that I store my pictures on my PC using the tree on the left. I have selected the first picture and then holding down the shift key clicked the last image to select all images. Note you can hold down the ctrl key to select one image at a time. After selecting the images, click upload and close.

The pictures will be uploaded to the site. This may take a few seconds depending on how big and how many images.

We now have all the images we need to use available on the msac members pages site.  

Note the pictures have been stored in the images1 folder and then in your folder so for example I created a folder called “paulowens sample pictures” so my picture, “macro.jpg” will be stored in the following place http://msac.filestop.co.uk/mp/images1/PaulOwens%20sample%20pictures/macro.JPG

The address “msac.filestop.co.uk” is the main web site address
which is followed by “mp” (members pages)
then by “images1” the photo upload area
and then by “PaulOwens%20sample%20pictures” (%20 means space) which was my folder and where I uploaded my pictures.
 
If you created  a image folder called paul for example then inside that you created a folder called mull and uploaded a picture called test.jpg, your picture would be stored in http://msac.filestop.co.uk/mp/images1/paul/mull/test.jpg” 

 

Plan the page

Before we publish our page it is best to plan the layout. i.e. where is the text and where are the pictures. Most web pages use tables to arrange pictures and text and the easiest way to build our page is using tables. Using word I created the following layout.

 

 

I have already uploaded the pictures so now it’s a case of laying out the page.

Looking at the plan I can see that I have a maximum of three columns so editing my page I need to insert a table with 6 rows and 3 columns.

 

To do this, open up your page and edit the content.

 

Clicking the table iconin the rich text editor will insert a table.

 

 

 

I have entered 3 columns and 6 rows. After clicking OK it inserts a new table which is a bit small but not to worry it will grow.

 

 

Placing the cursor in the top left cell click on the picture icon  . This will allow us to insert a picture.

A box pops up and asks for alternative text and address.

 

 

The alternative text is text that is displayed when the user moves his mouse over the image on the web page. Type a short description of the picture in the alternative text box.

 

The address it wants is the web address of the picture. If you know where your picture was uploaded you can type the address. If not, you need to find it. To find it, open up a new web browser window and navigate to the members pages site then click on upload images then navigate to your picture. If I do this I get to this page.

 

 

 

This is still not the address of the picture but if I click on the image itself, it takes me to this.

 

 

At the top in the address bar is the web address of this picture. This address can be worked out (see pictures above). If you are still not sure, right click the picture and select properties. Copy the web address and place it into the address box above then click OK.

 

After you have inserted your picture, you can adjust the size of your picture by clicking and dragging the small squares on the corner of the image. If you cant see small squares, click the image and they will appear.

 

I ended up with the following.

 

 

 

Now click the cell next to the image and then click on the merge cell icon.  This will merge the 2nd and 3rd cell so that we end up with 2 cells like our plan.

Next copy and paste your text into this cell.

 

 

Continue adding images and text until you have finished. Remembering to merge cells when needed. If you make a mistake there is an undo icon at the top to go back. I ended up with the following.

 

 

The only thing left to do is to add a link. I wanted to link to Divetech’s site, To do this go back into the editor and select the word divetech and click on the hyperlink icon

 

Enter the web address and click ok.

We now have the finished page.

Finished page is here

Click save and let someone know you have built a page.

There other ways to create pages in fact there are hundreds of ways but I can’t describe them all here so if you want a better page or more complex page etc just ask and I can talk you through creating them.

 

Paul