Inserting an Image

In this lesson you will learn how to insert an image into a Dreamweaver document.

Note: You are encouraged to use your own image.

1. From the Site Window, double-click on index.html to open it
   
   
   
   
   
2. Position your cursor below the link and click on the Insert Image icon in the Objects Panel
   
   
   
   
   
3. The Select Image Source dialog box opens (navigate to your Root Folder if necessary)
   
   Click on the twirlie (the triangle to the right of the images folder) to see your images
   
   
   
   Note: HTML pages do not show up in this dialog box because Dreamweaver is looking for JPEGs and/or GIFs (we won't be using the PNG option for now)
   
   
   
4. Select an image and open it (double-click, click Open, or press Return or Enter)
   
   
   
   
   
5. Presto! Your image is inserted
   
   Quick! Click away from the image before you notice the resize handles
   
   
   
   
   
6. Ah, that's better
   
   Never, ever, ever should you resize an image in from within Dreamweaver
   
        Never!
   
   
   
   
   
7. Just so we're clear on this, I'll repeat myself:
   
   Never, ever, ever should you resize an image in from within Dreamweaver
        Never!
   
   Always use Photoshop or Fireworks to resize properly
   
   
   
8. Save your file (Command-S) and close the window (Command-W)

Congratulations! You now know how to insert an image into an HTML file using Dreamweaver.

<< Back