Inserting Images

Unlike word processing documents, which embed images into the document itself, Web pages display images by pointing to a location in the file system outside the document where the image resides.

This makes it possible to use the same image file hundreds of times throughout a Web site without duplicating the file. A webmaster will generally create a folder called "graphics" or "images" on the web server as a central location for storing images.

To insert an image into your page, click in the spot on your page where you want the image to appear.

Then in the menu at the top to select Insert...Image.

You'll be prompted to type in some alternative text, which should be words that describe the image you're about to insert on your page. This will help a vision-impaired person using a screen reader know what the image on the page is about.

You'll then get a panel that looks something like this (different under Windows or Mac OS 9 of course):

This panel lets you select the source file that's the image to be displayed on your page.

You can use the From: box to navigate through your file system to the location of the image file you want to insert.

Or you can type or paste the folder path and file name into the URL field manually (again, it's wise to keep your graphics in a subfolder labeled "graphics" or "images" so they can easily be used site-wide).

Click Choose (or OK) and the image will appear in your Dreamweaver document at the place you specified.

Note that when you click on the image, information about the image will appear in different fields in the Properties panel. You can use these fields to make adjustments to your image.

The dimensions of the image (W and H measured in pixels), are displayed, for example. You could adjust the size of the area in which the image is displayed on the page by changing these dimension numbers. But that's not recommended because a browser will still load the full image and then resize it on the page, slowing down the loading of the page. Instead you should resize the image itself in a program like Photoshop.

You can use other fields in the Properties panel for a selected image to change the way text near your image is displayed on the page.

For example, you can use the Align field to make text you type after an image wrap around it in different ways. If you want the image to be displayed to the right of your text, select right. If you want the image to be displayed to the left of the text, select left.

You also can type numbers into the V Space box to create vertical white space above and below your image so your text doesn't butt up against the image (the higher the number you type in, the bigger the buffer of white space).

Or you can type numbers into the H Space box to create horizontal white space to the left and right of your image (the higher the number the bigger the buffer of white space).

You also can type a URL or a folder/file path into the Link field to turn your image into a link to another Web page.