HOME - Desire2Learn - Ning - Mythology & Folklore - World Literature - Indian Epics

Mozilla Composer: Images

Here is how you add images to your webpages with Composer:

1. Save an image file in your webpage folder. Before you add images to your webpage, you need to have a copy of the image saved in the same webpage folder where you saved your webpage files. To save an image from a webpage on the Internet, just right-mouse click on the image, and choose File-Save As (or the equivalent in your browser). You will probably want to rename the image file unless it has a good name already. Also, make sure now that you will be able to provide good Image Information - you will need the address of the webpage where you found the image later!

IMPORTANT TIP: Bookmarks. Save ALL the pages you use for this class in a folder of Bookmark favorites in your browser. Whenever you use an image for a webpage in this class, save the webpage as a Bookmarked favorite in your browser for future reference. That way if you somehow lose the image file or forget to do the Image Information, you will be able to easily find the webpage you used as your source.

IMPORTANT TIP: Image size. When you insert an image into a webpage, you need to make sure the image is already the right size - so if you need to resize or crop the image now, you can do that using a free online service such as Picnik.com. You cannot make images larger, but it is very easy to make them smaller or to crop out some part of the image you do not want to use.

2. Open your webpage in Composer. After you have your image ready to go, start the Composer program and open the webpage where you will add the image.

3. Insert the image. To insert the image, first you need to position the cursor where you want to place the image. Click on the Image icon.

Then, click on the Choose File button and browse until you find the image file you want to use.

After you have clicked on the image file to add it to your page, you will be prompted to add the Alternate Text, which is the message that will be displayed when someone is using a text-only browser in order to access your website.

Click OK. You should now see the image displayed in the webpage!

4. Image Information. Don't forget to include all the required Image Information on this page! You need Image Information for every image you have taken from another webpage. You can put the Image Information anywhere on the page. In general, the Image Information is less distracting if you put it down at the bottom of the page instead of trying to put it next to the image itself.

5. Save and publish. You need to click Save to save your file and then click Publish to publish. This time when you publish you should see multiple green checkmarks because there will be a green checkmark for the webpage file itself and a separate green checkmark for each image file that it contains.

If you do not see multiple green checkmarks, something has gone wrong.

6. IMPORTANT: Close the file after you publish!!!!I It is very important you always remember to CLOSE THE FILE AFTER YOU PUBLISH. Close the file even if you want to continue editing it! If you want to continue editing, close the file - and then open it again.

The most common problem people have when adding images to their webpages is that they link to a LOCAL file, instead of publishing the image on the Internet so that everyone can see it. This can be very confusing, since the webpage will look fine on your computer - but the image will be broken on everybody else's computer. So, when you publish, make sure you got a green checkmark for the webpage file and ALSO a green checkmark for each image you included. Check the Images FAQ page if you need additional help.