Dreamweaver CS6: The Missing Manual

Adding Images

If you were writing out the HTML instructions for your web page by hand, you’d insert an image using the image tag: <img>. For example, the HTML snippet <img src=“images/george.jpg”> tells a browser to display a graphic file named george.jpg, which it can find in the images folder. (An image tag’s primary property is called the source [src] property; it indicates the URL or path to the graphics file.)

Dreamweaver automatically does all the necessary coding for you when you insert a picture into your fledgling page. Here are the steps:

1. Save the web page that will include the image.

   To insert an image, Dreamweaver has to know where to find it, which could be anywhere on your hard drive. As with links, saving the page before you proceed lets Dreamweaver correctly determine the path from the page you just saved to the image.

2. In the document window, put your cursor where you want to insert the image.

   You can choose anywhere within a paragraph, a cell in a table (see Chapter 6), or a <div> tag (see Float Layout Basics). To set your graphic apart from the text on the page, press Enter (Return) to create a blank line to give the image its own paragraph.

3. Choose Insert→Image.

   Alternatively, from the Insert panel’s Common category, you can click the Image button (see Figure 5-2). Or, if you’re a keyboard shortcut fan, press Ctrl+Alt+I (⌘-Option-I).

   In any case, the Select Image Source dialog box opens. This box is nearly identical to the Select File window that appears when you add a ...