• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Elements of Page Design > Using a Tracing Image

Using a Tracing Image

Many times, you will be given pages that someone else has designed in a graphics program such as Macromedia FreeHand, Adobe Photoshop, or QuarkXPress. If you can convert the page to a JPEG, GIF, or PNG graphic, you can import that image into Dreamweaver and use it as a guide, or tracing image, to re-create the HTML page.

The tracing image is visible only inside Dreamweaver. It is not embedded in the HTML code and will not be displayed in the browser. While you're using a tracing image, the background color or background image of your page is hidden, but it displays in the browser.

Create a new document and save it as destinations.htm in the Lesson_04_Tables folder. Title the page Featured Destinations.

You'll insert a tracing image into this document in this exercise.

Choose View > Tracing Image > Load.

The Select Image Source dialog box opens.

Choose the file table_trace.jpg, located in Lesson_04_Tables/Images; then click Select.

The Page Properties dialog box opens.

To see your image on the page, click Apply. Drag the Image Transparency slider to the left to lighten the image. Click Apply to see the change. Then click OK.

You want to be able to see the image but not be distracted by it.


You can change the position of a tracing image, align it to a selected object, or hide the image by choosing View > Tracing Image.

Choose View > Tracing Image > Adjust Position. To specify the position of the tracing image precisely, type coordinate values.

You can also move the tracing image one pixel at a time by using the arrow keys while the Adjust Position dialog box is open. To move the image five pixels at a time, press Shift and an arrow key. Dreamweaver simulates the margin created by the browser between the edge of the browser window and the items in the page.


You can get rid of this margin by entering 0 in all four margin text boxes in the Page Properties dialog box; but this may not work on older browsers.

This margin may vary depending on the browser, but it is approximately 7 pixels. When you move the tracing image into the margin space, the coordinate values will appear to be negative numbers.


Choosing View > Tracing Image > Reset Position returns the tracing image to the top-left corner of the document window with margin space (0,0). Choosing View > Tracing Image > Align with Selection aligns the tracing image with the selected element. The top-left corner of the tracing image is aligned with the top-left corner of the selected element

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint