Adding Image Placeholders

When you first work on a page, you'll often be creating pages without all of the finished elements, such as the text and images. That shouldn't stop you from working on the page's design, of course. You can always copy and paste, "The quick brown fox..." or similar text as a placeholder for the text that's to come, and Dreamweaver gives you the ability to insert image placeholders, as well. The placeholder lets you allot the space on the page for a future image, allowing you to position and size the placeholder and finish your design before you have all the content. When you are ready to turn the placeholder into the final image, all you have to do is double-click on the placeholder.

To insert an image placeholder:

1.	Click in your document to set the insertion point where you want the image placeholder to appear.
2.	Choose Insert > Image Objects > Image Placeholder. or In the Common category of the Insert Bar, choose Image Placeholder from the Images pop-up menu ( Figure 8.9 ). Figure 8.9. Use the Images pop-up menu on the Insert Bar to insert an image placeholder. The Image Placeholder dialog appears ( Figure 8.10 ). Figure 8.10. Use the Image Placeholder dialog to specify the placeholder's parameters.
3.	Fill out the Width and Height fields for the image placeholder (the units are pixels). The Name and Alternate text fields are optional; if you fill them out, the text will appear in the Property Inspector in the Name and Alt text boxes. You cannot use spaces in the Name field. The default color for an image placeholder is a light gray; if you want to change that color, click in the color well and choose a new color from the resulting color picker.
4.	Click OK. The new image placeholder appears in your document ( Figure 8.11 ). Figure 8.11. The image placeholder appears in the document, with its name and size (these are cut off if the image isn't big enough).

To replace the placeholder with an image:

1.	Double-click the image placeholder. The Select Image Source dialog appears (Figure 8.2).
2.	Select the file that you want to insert.
3.	Click OK (Choose). The Image Tag Accessibility Attributes dialog appears.
4.	In the Alternate text text box, type the alternate text you want to use for the image.
5.	Click OK. The image appears on your page.

Tip

• If you are also responsible for creating the images on your site, and you own Macromedia Fireworks, when you select an image placeholder you'll see a button in the Property Inspector that has the Fireworks logo and the word Create ( Figure 8.12 ). Clicking this button launches Fireworks and creates a new image with the same dimensions as the placeholder. After you finish making the image in Fireworks, save the image in your site. You are then returned to Dreamweaver. The new image is inserted automatically in your document, replacing the image placeholder.

  Figure 8.12. Click the Create button in the Property Inspector when an image placeholder is selected to launch Macromedia Fireworks so that you can replace the placeholder with a finished graphic.

  

• When you use the Property Inspector to align images, Dreamweaver applies an alignment property to the <img> tag. While that's acceptable, you can also use CSS to align images, as described in Chapter 5.