Tutorials

Use the image tools in Dreamweaver to work with images in your website

by Nolan Hester

Images are an integral component of almost every website. In this tutorial, you’ll learn how to use the Property inspector to add images to your Dreamweaver site, and then crop or scale the image, or adjust its brightness or contrast.

The Property inspector.

• Displayed near the image thumbnail is the file size (52K in our example) and its W (width) and H (height) in pixels.
• Src tells you where the image is stored, while Link tells you what file (if any) the image is linked to if clicked.
• Alt lets you create a label to be read aloud by browsers created for visually handicapped visitors. Also use Alt to describe an image for visitors who have turned off image downloading for speedier surfing.
• The items from Map to Target are used to create image maps.
• Some of the Edit buttons only work if you have installed Macromedia Fireworks. Without Fireworks, you’re limited to using the Crop, Contrast/Brightness, and Sharpen buttons (later in this tutorial).
• Use Border to set the border width around the image. The three buttons to the right control whether your image is set at the left, center, or right of the page. Use the Align drop-down menu to control how text wraps around the image.

Add images to a web page

After preparing images in an external program, you’re ready to add them to your web pages.

1. Open one of your existing web pages. (In our example, we added a new folder for our site, tuffits, in which we’ve created the file tuffits.html.)

Open the web page to which you want to add images.

2. Make sure the Insert toolbar is set to Common, position your cursor in a new blank paragraph between your headline and the main text.
3. Choose Image from the Image button’s drop-down menu.

Click the Image button on the toolbar, and then choose Image.

4. When the Select Image Source dialog box appears, navigate to the image you want to use (using the preview area to help you choose), and click OK.

Navigate to the image you want to add in the Select Image Source dialog box.

5. If the image isn’t already a part of your Web site, Dreamweaver asks if you want to save it in the site’s root folder. Choose Yes, navigate to your site’s images, and save the image there. The selected image appears between the headline and the main text.
6. Once inserted on the page, the image remains selected, so click the align center button in the Property inspector to center the image on the page.
7. Type a brief description of the image in the Alt text box. Save the page before continuing.

Crop an image

You don’t need a separate graphics program for cropping images—just don’t use your original image. Cropping permanently alters your image, so if you make a mistake, immediately choose Undo Crop in the Edit menu.

1. Select the original image in your site’s Files panel and duplicate it (Ctrl+D in Windows, Command+D on the Mac). Dreamweaver automatically adds Copy of to the beginning of the duplicate’s file name.

To crop an image, first select the original image in your site’s File panel.

2. If you want to name it something else, right-click (Windows) or c-click (Mac) the item and choose Rename from the Edit drop-down menu. Once the name is highlighted, type in a new name and press Enter (Windows) or Return (Mac).
3. Insert the image on the page and select it by clicking on it. Make sure the Property inspector is visible and click the Crop button in the Property inspector. A selection area, marked by a line and darker surrounding area, appears in the middle of the image.

Select the image, and then click the Crop button on the Property inspector.

4. Click and drag any of the black handles along the selection’s edge to set your crop lines or click-and-drag in the middle to reposition the entire crop.
5. Double-click inside the selection and the image will be trimmed.

Dreamweaver trims the image.

Adjust brightness

A single button in the Property inspector lets you adjust an image’s brightness or contrast. Sometimes minor adjustments of either can really help a so-so image. You do not need to make a duplicate of the image.

1. On your page, click to select the image that you want to adjust.
2. Now click the Brightness and Contrast button in the Property inspector. To change the brightness or contrast drag the sliders or enter new values in the adjacent text windows. (Increase the effects by sliding to the right or entering a larger number.) Click OK to apply your adjustments.

Drag the sliders to change the brightness or contrast.

Reduce an image

If you have an image without lots of details, which would disappear if shrunk, you can use it to create a tiny thumbnail to add some graphic variety to a page. Detail lost from reducing and resampling cannot be recovered, so use a duplicate of your original image.

1. Make a duplicate of your original image, and the renamed image—in our example salon2x2.jpg the original and salonTHUMB.jpg the renamed dupe—onto the page. The image appears on the page with small black handles at its corners.

Drag the duplicate image onto your page.

2. Press Shift while dragging a corner handle to reduce the image while maintaining its proportions. Watch the pixel dimensions change in the W and H text windows in the Property inspector to gauge how much to reduce the image.

Press Shift to reduce the image while maintaining its proportions.

3. Release the cursor and the image appears with the new dimensions in bold—even though the actual size of the file remains the same.
4. Click the Property inspector’s Resample button to reduce the actual file size, indicated afterward by a smaller K size in the Property inspector.
5. Greatly reduced images often lose some crispness, so click the Sharpen button.
6. Use the slider or text window in the Sharpen dialog box to adjust the amount. (Drag the slider to the right or enter a higher number in the text window to increase the sharpening.) Click OK when you’re satisfied. Save the page before continuing.