Formatting Basics: Images

When you insert an image into your document in Dreamweaver, the program automatically places the HTML code into your document to display your image. To alleviate any potential problems, make sure your image file (GIF or JPG) is located within the site you created. If you insert an image that is not located in your site folder, Dreamweaver will ask if you would like to place a copy of the image into your current site folder.

You insert an image into your document by clicking the Insert Image icon in your objects palette, or selecting Insert > Image. Here you will get a window to select your image source file. Simply browse to the correct folder and select the image file name from the list. Dreamweaver will automatically insert the correct file name and will also automatically detect the correct pixel dimensions for you image file.

Once you have inserted your image, the inspector palette will change to give you all the formatting options for your image. Let's take a look:

• Thumbnail: This is simply a thumbnail version of your image. This is useful if you have several small images in your document and you want to ensure you are formatting the correct image.
• Name: You can give your image a name in the dialog box. You must name images if you want to use them for scripting and behaviors (ie: mouseovers).
• Size: This is the file size of you image.
• Dimensions: Dreamweaver looks at your image and automatically detects the correct dimensions, measured here in pixels. You can change the size of your image by changing the pixel dimensions or by selecting your image on-screen and using the handles to resize it.
• Source: This is the file name and location or your image.
• Link: If you want to make the image a clickable link, type the web address here or use the browse or point-and-shoot linking icons.
• Alignment: This will change the alignment of your image relative to the text that is surrounding the image.
• Alt: Don't forget to use the Alt option for your image. This is a text description of the image, required for ADA compliance.
• Image Map: You can use these options to create an image map on your graphic. This is detailed later in the tutorial.
• Spacing: Sets the vertical and horizontal spacing around the image. Spacing leaves a buffer zone between your image and any text that is surrounding the graphic.
• Border: Defaults to 0 (no border). If you would like a border drawn around your image, select it here. Defined in pixels.
• Edit and Reset Size Buttons: The reset size button restores the original pixel dimensions of the image to your HTML code. The edit button launches your external graphics editor (Photoshop, Fireworks, etc.) to edit your image. After saving the edited image, the new image is automatically updated in Dreamweaver.

Now that you've added some images to your document, play around with some of the different image formatting options and see how easy it is to layout and arrange your document using Dreamweaver.