Golden Oldies: Using Placeholder Images in Dreamweaver MX

At the earliest stages of creating and laying out a design or graphical components for your interface, you may not have the finished graphics to work with; indeed, you may not have any graphics at all. Trying to create a design and evaluating the size of images for layout purposes can be nearly impossible at times without the actual images.

But sometimes a project just cannot wait for the final graphics—you need to get started. In such cases, you should use the image placeholder object to lay out graphics that don’t even exist yet. Another benefit to using image placeholders is that as you build the design, you can share the info with those who will create the final graphics, so that they can build the graphics to order.

Using Placeholder Images

In the following example, you can practice using Dreamweaver’s placeholder image feature.

1. Create a new document and insert a new table by selecting Insert | Table or via the keyboard shortcut Ctrl+Alt+T ( Option+Alt+T for Mac).

2. With the table dialog box open, assign 3 columns and 1 row, width of 450 pixels and border of 0

3. Select the top left cell of the table and select Insert | Image Placeholder. In the dialog box enter the following details:
• Name: Logo
• Width: 100
• Height : 50
• Color: #CCCCCC

4.    Click OK.

5.    Repeat this process in the top right hand cell using the following information:
• Name: Navigation
• Width: 200

When you are finished, you will see that Dreamweaver inserts a rectangular graphic on the page, with its name and dimensions displaying on the screen. What’s cool about this feature is the code. Dreamweaver inserts a regular <img> tag, with all of its attributes. The only difference is that the source attribute is set to “”. If you preview the HTML file in a browser, you will see a broken link icon. In other words, rather than inserting non-standard code to hold the placeholder, Dreamweaver inserts standard code but browses it in a special way.

To substitute in the final graphic when it is ready, simply select the placeholder, and use the Property inspector’s Src field to insert the proper src attribute. You can also use the Browse button (which looks like a folder) or Dreamweaver’s Point to File arrow.

Tip: Try experimenting with this tool to create a layout for a new page, and use the image placeholder in place of any existing graphics you may be using, to see just how easy it is to be able to produce layout mockups using this approach.