How to Add a Tracing Image to a Page in Dreamweaver - dummies

How to Add a Tracing Image to a Page in Dreamweaver

By Janine Warner

The Tracing Image feature in Dreamweaver is especially popular among designers. The concept, which dates back to the earliest days of design, enables you to use graphics as guides for your page designs, much as you might copy a cartoon through thin transparent paper.

The Tracing Image feature is ideal for people who like to first create a design in a program, such as Photoshop or Fireworks, and then model their web page after it. By using the Tracing Image feature, you can insert any web-ready image into the background of any Dreamweaver page.

Then you can position <div> tags or insert tables or other elements on top of the tracing image, making it easier to re-create your design in Dreamweaver. You can use JPG, GIF, or PNG images as tracing images and you can create them in any graphics application that supports these formats.

Although the tracing image appears in the background of a page, it doesn’t take the place of a background image and won’t appear in a browser.

To add a tracing image to your page, follow these steps:

  1. Create a new page or open an existing page in Dreamweaver.

  2. Choose View→Tracing Image→Load.

    The Select Image Source dialog box opens.

  3. Select the image you want to serve as your tracing image and click OK.

    The Page Properties dialog box opens with the Tracing Image category selected.

    [Credit: Photo by]
    Credit: Photo by
  4. Click the Browse button to locate the image you want to use as a tracing image.

    The Select Image Source dialog box appears.

  5. Click the image you want to trace from, and then click Apply to preview how the image looks behind the page.

  6. Set the opacity for the tracing image with the Transparency slider.

    Lowering the transparency level causes the tracing image to appear faded, which makes distinguishing between the tracing image and content on the page easy. You can set the transparency level to suit your preferences, but somewhere around 50 percent works well with most images.

  7. Click OK.

    The tracing image appears in the Document window, and the dialog box closes.

You have a few other options with the Tracing Image feature. Choose View→Tracing Image to reveal the following options:

  • Show: Hides the tracing image if you want to check your work without the image but don’t want to remove it.

  • Align with Selection: Enables you to automatically line up the tracing image with a selected element on a page.

  • Adjust Position: Enables you to use the arrow keys or enter X, Y coordinates to control the position of the tracing image behind the page.

  • Reset Position: Resets the tracing image to 0, 0 on the X, Y coordinates.

  • Load: Enables you to add or replace a tracing image.

After the tracing image is in place, you can use it as a guide while you design your page. Because the tracing image is behind the page, it won’t interfere with your design work, and you can add any elements over the tracing image that you could add to any other web page. Use the tracing image as a reference to insert and position <div> tags, images, and other elements.