Mozilla Composer Tutorial
Images make websites pretty, and they are surprisingly easy to add in Composer. The easiest way to add an image is by clicking on the Images toolbar button or clicking on Insert | Image:
If you click the Image toolbar button, you'll see the following dialog box:
Choosing an image location is identical to choosing a link location (see Creating Links). The only difference is that after you have chosen the image you would like to insert, make sure to check the "URL is relative to page location" box:
Also notice in the Alternate text box the words "Betsy hugs the goat" has been entered. Providing alternate text for all images is important for search engines and for providing accessiblity to those with special needs such as blind individuals.
If you click the Dimensions tab of the Image Properties box, you'll see the following options:
If you click the Custom Size radio button, you can have the browser resize your image. It is important to note, however, that doing so changes only the dimensions of the file in the browser and not the size of the file. In other words, a graphic will download no faster if you set the dimensions to a smaller size.
Clicking on the Appearance tab of the Images Properties box yields the following options:
The spacing options control how much space in pixel that apears to the respective side of an image. The Align Text to Image drop down box provides the following options:
These options are fairly self-explanatory: Any text around the image will be wrapped in the way described by the option. For example, if an image is set to Wrap to the Left, the text around the image will appear to the left of the image, as in the following screenshot:
Images as Links
Inserting an image with a link attatched to it is as easy as clicking on the Link tab in the Image Properties dialog:
The process of creating links with images is essentially identical to creating text links (See Creating Links).
When using images in web pages, remember the following: