Adobe CS5 Dreamweaver Page Images - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

You can add a images including native Photoshop (PSD) files and Fireworks (PNG) to your blank page in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver. Placing images does affect the Dreamweaver Files panel.

  1. Choose Insert→Image.

    The Select Image Source dialog box appears.

    Alternatively, click the Common tab of the Insert panel and click the Insert Image button.

  2. Navigate to the location of your image and click Choose (Mac) or OK (Windows).

    If you choose a native Photoshop (PSD) or Fireworks (PNG) file, the Image Preview dialog box appears, allowing you to optimize your image directly in Dreamweaver.

    If you select a web-ready image, such as GIF, JPG, or PNG and the image is outside your site folder, you see a warning. Dreamweaver alerts you that the image is outside the root folder, which causes issues when you copy pages to a web server.

    Click Yes to copy the file to your site’s root directory. Assign a new name there or just click Save to keep the same name and duplicate the image file into your site folder.

    The Image Tag Accessibility Attributes dialog box appears.

    All images should have Alt (alternate) text — text that appears before the image has downloaded or if the viewer has turned off the option to see images.

  3. Add an appropriate description of the image in the Alternate Text text box.

    If the image is a logo, the description should include the company name as the Alt text or, if it’s a photo or an illustration, describe the image in a few words.

    From an accessibility standpoint, alt text aids screen readers (such as those used by the visually impaired) in identifying image content to users. In addition, Alt text is a valuable tool in providing search engines a way of indexing image content included on your site.

  4. Click OK.

    The image is added to the page and to the Files panel.

You can edit an image by double-clicking it in the Files panel. You can also use the Property inspector to see details about the image, including its dimensions and file size. You can also modify image properties, including border, hyperlink, and vertical and horizontal padding.

Use the Property inspector to see information about your image and modify image properties.
Use the Property inspector to see information about your image and modify image properties.

When you create a larger site with multiple pages linked to each other, you may want to change the view of the Files panel. By clicking the drop-down list (on the top-left side of the Files panel) where your site is located, you can locate folders and other sites you’ve used recently. By clicking the View drop-down list to the right, you can change the appearance of the Files panel.

Open files from the Files panel by double-clicking them.