Dreamweaver

Insert an image

When you insert an image into a Dreamweaver document, a reference to the image file is generated in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

You can also insert images dynamically. Dynamic images are those images that change often. For example, advertising banner rotation systems need to randomly select a single banner from a list of potential banners, and then dynamically display the selected banner’s image when a page is requested.

After you insert an image, you can set image tag accessibility attributes that can be read by screen readers for visually impaired users. These attributes can be edited in HTML code.

For a tutorial on inserting images, see www.adobe.com/go/vid0148.

  1. Place the insertion point where you want the image to appear in the Document window and do one of the following:

    • In the Common category of the Insert bar, click the Images icon .

    • In the Common category of the Insert bar, click the Images button and select the Image icon. With the Image icon displayed in the Insert bar, you can drag the icon to the Document window (or to the Code view window if you are working in the code).

    • Select Insert > Image.

    • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.

    • Drag an image from the Files panel to the desired location in the Document window; then skip to step 3.

    • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.

  2. In the dialog box that appears, do one of the following:

    • Select File System to choose an image file.

    • Select Data Source to choose a dynamic image source.

    • Click the Sites And Servers button to choose an image file in a remote folder of one of your Dreamweaver sites.

  3. Browse to select the image or content source you want to insert.

    If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

    Note: When inserting images it’s also possible to use an absolute path to an image that resides on a remote server (i.e., an image that is not available on the local hard drive). If you experience performance problems while working, however, you might want to disable viewing the image in Design view by deselecting Commands > Display External Files.
  4. Click OK. The Image Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences (Edit > Preferences).
  5. Enter values in the Alternate Text and Long Description text boxes, and click OK.

    • In the Alternate Text box, enter a name or brief description for the image. The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Long Description text box, to a file that gives more information about the image.

    • In the Long Description box, enter the location of a file that displays when the user clicks the image or click the folder icon to browse to the file. This text box provides a link to a file that is related to, or gives more information about, the image.

    Note: You can enter information in one or both text boxes depending on your needs. The screen reader reads the Alt attribute for the image.
    Note: If you click Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.
  6. In the Property inspector (Window > Properties), set properties for the image.

Set image properties

The Images Property inspector allows you to set properties for an image. If you do not see all of the image properties, click the expander arrow in the lower-right corner.

Images properties in the Property inspector.

  1. Select Window > Properties to view the Property inspector for a selected image.
  2. In the text box below the thumbnail image, enter a name so you can refer to the image when using a Dreamweaver behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.
  3. Set any of the image options.
    W and H
    The width and height of the image, in pixels. Dreamweaver automatically updates these text boxes with the image’s original dimensions when you insert an image in a page.

    If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H text box labels, or the Reset image size button that appears to the right of the W and H text boxes in entering a new value.)

    Note: You can change these values to scale the display size of this image instance, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.

    Src
    Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

    Link
    Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.

    Align
    Aligns an image and text on the same line.

    Alt
    Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

    Map Name and Hotspot tools
    Allow you to label and create a client-side image map.

    V Space and H Space
    Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

    Target
    Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

    • _blank loads the linked file into a new, unnamed browser window.

    • _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.

    • _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.

    • _top loads the linked file into the full browser window, thereby removing all frames.

    Low Src
    Specifies the image that should load before the main image. Many designers use a 2‑bpc (black and white) version of the main image because it loads quickly and gives visitors an idea of what they’re waiting to see.

    Border
    The width, in pixels, of the image’s border. The default is no border.

    Edit
    Starts the image editor you specified in External Editors preferences and opens the selected image.

    Optimize
     Opens the Optimization dialog box.

    Crop
     Trims the size of an image, removing unwanted areas from the selected image.

    Resample
     Resamples a resized image, improving its picture quality at its new size and shape.

    Brightness and Contrast
     Adjusts the brightness and contrast settings of an image.

    Sharpen
     Adjusts the sharpness of an image.

    Reset Size
     Resets the W and H values to the original size of the image. This button appears to the right of the W and H text boxes when you adjust the values of the selected image.

Edit image accessibility attributes in code

If you inserted accessibility attributes for an image, you can edit those values in the HTML code.

  1. In the Document window, select the image.
  2. Do one of the following:

    • Edit the appropriate image attributes in Code view.

    • Right-click (Windows) or Control-click (Macintosh), and then select Edit Tag.

    • Edit the Alt value in the Property inspector.