You are on page 1of 12

Working with Images

Dreamweaver lets you insert both GIF and JPEG graphic file formats, as well as the PNG (Portable Network Graphic) format, which is the native graphics format for Fireworks. Note: The PNG file format is only partially supported by the major browsers. When you insert a graphic into a web page, Dreamweaver creates a link to the image file. This file must be uploaded with the rest of the site in order for the image to appear when the page is viewed in a browser.

Inserting Images
To insert an image, use the Images button on the Insert panel: 1. Position your cursor where you want the image to appear:

2. On the Insert panel, make sure the Common category is selected. 3. Click the Images button and select Image from the pop-up menu.

4. In the Select Image Source dialog box, navigate to the image you want to insert and click OK. 5. In the Image Tag Accessibility Attributes dialog box, you can enter alternate text and a description. Click OK.

The image is inserted into the page:

If you need to, you can resize the image by clicking and dragging on one of the corner handles, or by changing the width (W) and height (H) attributes in the Property Inspector. Tip:

You can also drag and drop images onto your page from the Files panel. Generally, when you move files from one directory to another within your site using the Files panel, Dreamweaver updates the links on the pages. However, you can manually change the path for the link to the image if you need: 1. On your page, click the image (or the placeholder, if the link is broken) to select it. 2. The current path for the link to the graphic appears in the Src (Source) field in the Property Inspector. To enter the correct path, you can use any of the methods described earlier in this tutorial for linking to files: you can type the path directly into the field, use the Point to File button, or use the Browse for File button.

3. Enter the correct path to the image.

Changing Image Properties
You can use the Property Inspector to modify basic image properties, including height and width, alignment, spacing, and alternate text labels. In addition, the Property Inspector includes access to optimization features as well as external image editing tools.

To adjust image properties using the Property Inspector, click the image to select it and change the following fields:

Width and Height control the appearance of the image size. Be aware that these values do not actually change the size of the image, but its appearance on the page. For this reason, reducing these properties will not reduce the time it requires a browser to display the image. If you have a large image, you should use a graphics program to reduce the size before inserting the image into Dreamweaver. In the Link field, you can enter a link if you want the image to function as a hyperlink.

The pencil icon next to Edit opens the image editor specified in the Dreamweaver File Types/Editors preferences: From the Edit menu, select Preferences, and then select the File Types/Editors category; the list at the bottom of the dialog box displays file types that you can select and associate with editors—just select, for example, .gif on the left-hand side, then click the plus sign at the top of the Editors list and browse to the executable file for an image editor.

The second button, Edit Image Settings, lets you optimize the image for download by adjusting the quality, smoothing setting and scale.
• •

• •

V Space and H Space are values for the blank space appearing vertically and horizontally around the image. To place a border around the image, enter a numeric value for the border weight (for example, 1 for a thin border) into the Border field. Notice that next to the Border field, Dreamweaver includes several buttons for editing the image: Crop, Resample, Brightness and Contrast and Sharpen. The Align drop-down menu lets you set the alignment of the image in relation to the text within a paragraph. Type the alternate text for the image into the Alt field. This text appears as the graphic is loading, and is read aloud by software used by viewers with hearing disabilities. Including alternate text for each of your images helps ensure your site is compliant with the Section 508 standards for accessibility.

Using a Class to Float an Image
Using CSS, you can set properties the same way for several images. For example, you can create a class for floating images to the left, thus wrapping other content (like text) around them, as well as for setting margins. Applying the class to multiple images means you won’t have to set individual properties like Vertical (V) and Horizontal (H) Space for each image. When you create a new page based on one of the predefined CSS layouts, Dreamweaver generates classes for doing just this: one called .fltrt, which floats an element to the right and sets the left margin 8 pixels out; and .fltlft, which floats an element to the left and sets the right margin 8 pixels out. These classes can be applied to any element around which you want other elements to wrap.

To show you how it’s done, we’ll reproduce the .fltlft class and apply it to the image we inserted earlier: 1. At the bottom of the CSS Styles panel, click the New CSS Rule button . 2. In the New CSS Rule dialog, choose Class from the Selector Type drop-down menu. 3. In the Selector Name field, type .fltlft (this is just an abbreviation for “float left”; remember, you can name a class whatever you like, as long as you preface it with a period).

4. Under Rule Definition, choose where to save the rule. If you’re using an external style sheet, it’s best to save it there, so the class will be available to all your pages. 5. Click OK. 6. In the CSS Rule definition dialog, select the Box category. 7. From the Float menu, select Left. 8. Under Margin, uncheck Same for all. 9. In the Right field, type 8 and leave px selected.

10. Click OK. The class now appears in the CSS Styles panel:

11. In the Design window, select the image you want to float:

12. In the Property Inspector, select fltlft (or whatever you named the class) from the Class menu.

The text now wraps around the image:

Tip: If the first paragraph is shorter than the image, you may find the second paragraph is overlapped by the image. Recall that floated images are taken out of the normal flow of elements in a document, so while the first paragraph is bumped up, being next in the normal flow after whatever precedes the image, the second paragraph is also bumped up, but is not affected by margin properties. The way to solve this is to add a small margin to the bottom of the image; often 1 pixel will do. This property can be added to the class directly from the CSS Styles panel:

If you want, you can double-click on the class in the panel to open the CSS Rule definition dialog, enter a value for the bottom margin, close it, and then play around with the value in the Properties pane of the CSS Styles panel.