Adding Pictures to Your Website Using Mozilla Composer
Switch to text-only version

Assumptions

• You have installed Mozilla Composer.
  Available at: http://www.mozilla.org/products/mozilla1.x/
• You have a copy of your website in a folder in your computer.
• You have successfully set up the Publish feature in Mozilla Composer.
  For detailed instructions on how to do this see FTP Setup in Mozilla Composer.

Introduction

There are some issues to consider when adding pictures to a website:

• The pictures have to be resized so they download faster
• You have to make sure that the pictures are on the server itself (your website)
• You should use alternate text

There are a lot of programs available to resize your pictures. We chose Image Resizer for this tutorial since is freely available for the popular operating system Windows XP and it is very easy to use.

After adding pictures to your website, it is recommended that you open the website from another computer, this way, you will be able to check for errors that might not be noticeable in your computer.

Alternate text in pictures on the Internet has many purposes. For instance, alternate text will allow screen readers to describe the image to handicapped users. The alternate text will also be shown as a tool tip when a user scrolls over the picture or will appear in the browser instead of the image if such image failed to load.

Adding Images

1. Find the webpage you want to insert the picture to in Mozilla (screenshot) and open it for editing in Mozilla Composer by clicking on File and Edit Page (screenshot).
2. To insert a picture, place the cursor in the spot you want the picture to be inserted and then click on the image button.

Figure 6. The Image button in Mozilla Composer .

3. On the images properties window, click on Choose File.

Figure 7. The Image Properties window: Choose File...

4. Go to your website's folder. Choose the resized picture and then click on Open.
5. On the Images Properties window, write an alternate text and click OK.

Figure 8. The Image Properties window: alternate text

6. If you have completed all the changes in you webpage, save your work and click on the publish button.

Figure 9. Publishing the modified webpage.

[Back to top]