How to Paste Images into Dreamweaver - dummies

By David Karlins, Doug Sahlin

You can paste images from your operating system’s Clipboard into Dreamweaver documents. This works with images copied to the Clipboard from some, but not all, browsers (Safari being one) and for some but not all non–web-friendly file formats. Any image that you can copy into your operating system’s clipboard can be pasted into an open HTML page in Dreamweaver.

Copying images from browsers is a bit different depending on the browser, but the basic technique is to right-click or Control-click and choose an option like Copy Image from the context menu that appears. Or you can copy and paste artwork from programs like Illustrator, Photoshop, or Word.

With an image copied to the Clipboard, follow these steps to paste the image into Dreamweaver and then save it as an image file in your site:

  1. Click in the Document window at the point where the image is to be inserted.

    How the image displays will be defined with CSS, so don’t obsess on that at this stage.

  2. Choose Edit→Paste.

    What happens now varies significantly depending on your version of Dreamweaver although the basic concepts are the same:

    1. You choose an image file format and a few other image attributes.

    2. You assign a filename.

    In pre-CS6 versions of Dreamweaver, a somewhat complex Image Preview dialog box opens. In CS6, the image appears in the Document window, and a greatly simplified Image Optimization dialog box appears.


    Default image format settings in the Image Preview dialog box can be changed by choosing image file format and optimization settings (filters like transparency, contrast, and brightness) from the Preset popup.

  3. Make your choices in the Image Optimization dialog box (assuming that you’re in CS6) and then click OK.

  4. In the Save Web Image dialog box that opens, enter the image name.

    As with all web filenaming, avoid using spaces and special characters and do not replace the filename extension (.png, .jpeg, or .gif).

  5. Save the file to your site root folder by clicking the Site Root button.

    Saving to the site root folder is always a safe bet. If you’re comfortable with managing file folder structures, feel free to save images within subfolders inside your site folder, though.

  6. Click Save.

    The image is saved, and the Image Description (Alt Text) dialog box appears. In this dialog box, you define accessibility attributes.

    You can enter alt text (text that will be read out loud to describe the image for vision-impaired visitors by reader software, or that will display in browsing environments where image display is disabled) in the Alternate Text box in the dialog.

  7. Click OK to insert the image.

    The image will be visible on the page in Design view.