Importing Images

Images are not actually a part of the Web page. They are completely separate files that are linked to the page. It is part of a Web browser’s job to take those separate files and mix them together on the screen to create the appearance that the Web page is one seamless unit.

The link is created by putting an IMG element onto your Web page. The IMG element holds the information on where to fine the image, the Web browser reads it, and then retrieves the picture. The IMG element does not have an end tag. The reason for this is that this element does not contain anything, and the purpose of start and end tags is to show where content starts and ends. You may think of the image as the contents of the IMG element, but it really is not, and neither is the location of the file. The location of the image file is an attribute of the IMG element, not a part of its contents.

Inserting Images

To insert an image, place the text cursor where you want the image to be inserted and click the Insert Image icon on the Common panel of the Object picture. You can also drag the Insert Image icon to the point on your Web page where you want to place the image. Alternatively, you can select Insert -> Image or use the Ctrl+Alt+I key combination. This brings up the Select Image Source dialog box.

If the folder that is listed is not the one that contains the desired image files, navigate to the correct one. Then you can simply double-click the image filename or click the Select button to complete the process.

If you want to explore the available files before inserting the image, you can use the image preview option in the Select Image Source dialog box to get a look at them. Check the Preview Images check box at the bottom of the dialog box. Then click a filename, and the image will appear in the panel on the right. The width and height measurements will appear under the image.

To replace one image on your Web page with another one, just double-click the image you want to replace. The Select Image Source dialog box will come up, just as when you inserted the image originally.

Moving and Copying Images

Once an image is in place, you can alter its location at will. Simply click it and drag it to its new location. Dreamweaver MX will instantly rewrite the HTML source code to accommodate the change.

You can use a virtually identical technique to make a copy of an image. Just hold down the Ctrl key while you move the image. The original image will remain in place, and a copy will be put wherever you release the mouse button.

Resizing Images

Images are rectangles that have a fixed width and height. Often, however, you may find that an image will not fit in your design unless its size is altered.

Fortunately, resizing is easy in HTML. IMG elements have two attributes that set the size at which the image is displayed on the Web page width and height. Altering either or both of these values changes the appearance of the image.

You can resize an image with the Property Inspector or by dragging it to its new size. Select the image and then use one of these methods:

• In the Property Inspector, enter a new width in the W text box and a new height in the H text box. To finish, press the Enter key or click anywhere outside the Property Inspector.
• Click a resizing handle and drag the image to the desired dimensions. To resize horizontally, use the resizing handle on the right side of the image. To resize vertically, use the resizing handle on the bottom of the image. To resize in both dimensions simultaneously, use the resizing handle on the bottom-right corner of the image. You can maintain the original proportions during resizing by holding down the Shift key while dragging the corner-resizing handle.

The image file itself is not changed at all when you resize its appearance on the Web page. Instead, the height and width attributes for that IMG element are altered in the HTML source code. This means that the original image size information is still available in the unchanged image source file, and any changes you made can be undone at any time.

Generally, you will want to resize while maintaining the original proportions of an image. There are few cases where a major alteration, either vertically or horizontally, will improve the appearance of an image. However, careful manual alterations can produce an image that is still presentable. For instance, slight adjustments of a scanned photograph can make a person appear wither taller and thinner or shorter and fatter, without seriously compromising the basic image quality.

If you want to make an image considerably larger than it originally was, you would need to deal with the blockiness factor. All the common graphics file formats for Web pages are bitmap types, which set the color value of rows of pixels. When such an image is reduced in size, it tends to become clearer, but the reverse happens when it is enlarged. If you are going to be doing serious enlargement, modify the original image in an external image editor (which is better able to handle the transition than a Web browser is), save the enlargement as a new image file, then use the new image instead of the original one.

Using Images as Links

You create image links in the same way as text links, but there are some special considerations you should keep in mind. With image links, you need to make sure that the viewers can recognize the image as a link, and you also want to avoid problems with image file sizes.

Another way to design your page is with image maps. An image map allows a single image to have multiple links.

Indicating Image Links

Normal image borders are the same colour as the text on the Web page, but image like borders are the same colour as the text links. Unless you have changed the default colours for text and links, this means that image borders are black and image link borders are blue. This colour difference provides a visual cue to let users know that the image link is a route to somewhere else.

There are two other clues that let visitors to your site know that the image is a link, the mouse pointer changes from an arrow to a hand, referred to as a mouse over, and the status bar of the Web browser shows the URL of the link. However, you should not count on these two items as the only link indicators. If you leave out the border, then people must place their pointer over all the images on the page, one by one, to see if they are links or not. It is very unlikely that many users would bother doing that.

Using Thumbnail Images

Probably 90 percent or more of the image links on the World Wide Web point to Web pages. There’s another use of image links that you might want to consider using, especially if you need a solution to the major problem of image download times.

Rather than making your Web page into a \"one-size-fits-all\" graphics situation, you can provide visitors with an option. When you have a large image file that you want to include, you can use an image link to that file instead. The image link is a smaller version of the same image, called a thumbnail image (or just thumbnail for short). Thumbnails, being smaller images, also have smaller file size.

The advantage to this approach is that the Web page loads much faster. Those people to whom the full-size image is not that important can still get some idea of the content without suffering from the extended download time. Those people who really want to see the big image need only to click on the thumbnail to access it.

Thumbnails are commonly used for image like portraits, maps, or anything else that can be readily identified to a less-detailed version. You will need to create the thumbnail version in an external graphics program. Fortunately, every image editor worth its salt has a resizing function built into it.

How small should a thumbnail image be? That is really something that should be decided on a case-by-case basis. You will need to make up your mind based on a variety of factors:

• How does the image fit into the overall page design?
• How clear is the smaller image?
• Will it do the job as far as giving at least a general idea of the content?
• Does the workable size result in a significantly smaller image file?

Once you are satisfied with the answers to these questions, you are ready to go.