Using a tracing image

Using 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 Macromedia 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.

To place a tracing image in the Document window:

  1. Do one of the following:
    • Select View > Tracing Image > Load.
    • Select Modify > Page Properties, then click the Browse button next to the Tracing Image text box.
  2. In the dialog box that appears, select an image file, then click Select (Windows) or Choose (Macintosh).

    The Page Properties dialog box appears.

  3. 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.

To show or hide the tracing image:

  • Select View > Tracing Image > Show.

The tracing image is visible only in Dreamweaver. It is never 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.

To change the position of a tracing image:

  1. Select View > Tracing Image > Adjust Position.
  2. Do one of the following:
    • To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
    • To move the image one pixel at a time, use the arrow keys.
    • To move the image 5 pixels at a time, press Shift and an arrow key.

To 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).

To align the tracing image to a selected element:

  1. Select an element in the Document window.
  2. 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.

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly