Image Placement in Adobe CS5 Dreamweaver Pages - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

You can use menu items, copy and paste, and even drag and drop images on your Adobe Creative Suite 5 (Adobe CS5) Dreamweaver page. As a result, putting images on a web page in Dreamweaver is easier than ever, mostly because of its integration with other Adobe products.

Image insertion

If you’re preparing images ahead of time, save or move the optimized images into your site folder.

  1. Click on the page to position the cursor where you want to place the image.

  2. Locate the Common category from the drop-down list at the top of the Insert panel and click the Insert Image button or choose Insert→Image.

    If Image isn’t the default for your Insert Image button, click and hold the arrow to the right of the button and choose Image from the drop-down list.

    The Select Image Source dialog box appears.

  3. Navigate to the spot where your image is located and click OK (Windows) or Choose (Mac) to place the selected image.

    If your images are in your site folder, you can click the Site Root button in the Select Image Source dialog box to navigate there quickly. If an image isn’t in your site folder, an alert box asks whether you want to copy the file there now.

  4. If you’re prompted to copy the image to your site’s root folder, click Yes. When the Copy File As dialog box opens, verify that the name is correct and click Save.

    The Image Tag Accessibility Attributes dialog box requests that you enter alt text.

  5. Type a word or three that best describes your image (such as Our Family Photo) in the Alt text field and click OK.

    The image is inserted.

Image dragging and dropping

In addition to inserting images from the Insert panel or application menus, you can drag and place images directly from the Files panel to the page. If you’re dragging an image, the cursor follows it while you move it around the document; release the mouse button when the cursor marks the correct spot where you’d like to drop the image.

If you’re taking advantage of the Adobe Bridge workflow, you can leave Bridge running and drag images as you need them directly from the Bridge window into your Dreamweaver page. You can access Bridge by choosing File→Browse in Bridge.

If the image is a native Photoshop (PSD) or Fireworks (PNG) file, the Image Preview dialog box appears, giving you the opportunity to optimize the image before placing it.

You can also drag and drop an optimized image from your desktop or other folders into a Dreamweaver page. If an image is not in your site folder, you have the opportunity to copy that image to your site folder when it’s placed.