To add an image to a page, click on the Insert/Edit Image button in the editor tool bar.
This will bring up a pop-up window with image settings spread across three tabs: General, Appearance, and Advanced.
General
The first field on this tab is the URL to the image. Following the field is a button
to browse the server. This will allow you to select from a list of images that you've uploaded to the server and is the preferred way to fill in the URL field.
Uploading an Image
If your image is not currently on the server, then you need to upload it. In the Image Browser pop-up window, you will find "Browse..." and "Upload File" buttons, in the above image. Clicking on the "Browse..." button will allow you to browse through your local directory system. Navigate to the image that you would like to upload and select it, and then click the open button. Once the image location is in the field proceeding the "Browse..." button, click on the "Upload File" button to upload the image. You will see a preview of the image in the window and find that the newly uploaded image has joined the list of files that you have uploaded.
When you upload the image of your choice, be sure the image doesn't already exist on the server. If you upload an image with a name that already exists on the server, it will be renamed with an additional "name_#", like "flower_0.gif". To avoid this, you either rename your image or delete the existing file on the server. If you upload the file with the same name as a deleted one, be sure to refresh your browser. This will re-download the images instead of loading them from your browser's cache.
Once you have uploaded the image, you can select the image from the list, as shown above, which will show a preview of the image. If you'd like to use the image, then click on the add link next to the image in the list, or click on the actual image in the preview, and you will return to the first pop-up window with the URL field filled in. You can also delete images from this browse server window.
The next field is called "Image description" and is a very important field for accessibility. This field is also referred to as Alternative text. This field should hold a meaningful, yet short, description of the image. This text will be displayed if the image cannot be displayed.
The last field in the General tab is called Title. The contents of this field display when someone hovers over the image with their cursor.
Appearance
The Appearance tab is associated with properties of the image. On the right of all the fields, there is a preview window. All the changes you make are updated in that window.
The Alignment field is important if you want to modify the position of your image. You can select from a list of positions of place your image. If you want your text to display around your image, select Left or Right. This will place your image on the left or right side with text beside it. This is also known as text-wrapping.
You can also change the dimensions of the image in the Dimensions fields, and are automatically filled in when you select your image. You can, however, manually change these. The "Constrain proportions" check-box is defaulted on, but you can uncheck it to specify each field. If you change the dimensions of an image, it will become distorted. The recommended action is to edit the image's dimensions, or resize the image, using image editing software, like Adobe Photoshop or Adobe Fireworks.
The next three fields, Vertical space, Horizontal space, and Border, are used to style your image easily. Vertical space adds space above and below the image. Horizontal space give space on the left and right of the image, which is handy when using text-wrapping. Both Vertical space and Horizontal Space use pixels as their unit. Good values to use are 8 pixels vertically and 12 pixels horizontally. The Border field specifies the size of border, in pixels, surrounding the image.
The Class and Style fields are for advanced users. The Class field is used in Cascade Style Sheets (CSS). The Style field is for the user to specify custom styling options for the image. Make sure you understand what this does before filling these in. None of them are required.
The Advanced tab is used for advanced image settings. Only advanced users should modify these settings.
Link
Please see the creating a link tutorial for instructions on how to create a link. You can link an image in the same way you can create a link out of text.

