Use a tracing image

You can use a tracing image as a guide to re‑create a page design that was created in a graphics application such as Adobe Freehand or Fireworks.

A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.

The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color are not visible in the Document window; however, the background image and color will be visible when the page is viewed in a browser.

Place a tracing image in the Document window

Do one of the following:
- Select View > Tracing Image > Load.
- Select Modify > Page Properties, then click Browse (next to the Tracing Image text box).
Select an image file, then click Select (Windows) or Choose (Macintosh).
Specify the transparency for the image by dragging the Image Transparency slider, then click OK.
To switch to another tracing image or change the transparency of the current tracing image at any time, select Modify > Page Properties.

Show or hide the tracing image

Select View > Tracing Image > Show.

Change the position of a tracing image

Select View > Tracing Image > Adjust Position.

To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
To move the image 1 pixel at a time, use the arrow keys.
To move the image 5 pixels at a time, press Shift and an arrow key.

Reset the position of the tracing image

Select View > Tracing Image > Reset Position.

The tracing image returns to the upper-left corner of the Document window (0,0).

Align the tracing image to a selected element

Select an element in the Document window.
Select View > Tracing Image > Align with Selection.
The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.

Dreamweaver