• 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

At times, you may 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. The tracing image will appear behind everything on your page in Dreamweaver. While you're using a tracing image, the background color or background image of your page is hidden, but that background color or image will display when you look at the page in a browser.

Create a new document and save it as lights.html in the Lesson_04_Tables folder. Title the page Lights of the Coast: Lights.

In this exercise, you'll insert a tracing image into this document.

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 Open (Macintosh OS 9), Choose (Macintosh OS X), or OK (Windows).

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 to 50 percent. Click Apply to see the change.

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

Set the Left Margin, Top Margin, Margin Width and Margin Height all to 0. Then click OK to close the Page Properties dialog box.

Dreamweaver simulates the margin between the edge of the browser window and the items in the page. If you change this margin in the Page Properties dialog box, Dreamweaver will use the margin options you specify to place the tracing image. The default margin (used if the margin text field is left blank) may vary depending on the browser, but it is approximately 7 pixels.


You can change the position of a tracing image by choosing View > Tracing Image > Adjust Position and specifying the x-and y-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. When you move the tracing image into the space reserved for the margin, as defined in the Page Properties dialog box, 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 will be aligned with the top left corner of the selected element.

Type Creating the Lights…from bonfires to lenses at the top of the page.

Notice how the text is displayed with the tracing image behind it. A tracing image can be your guide while you lay out a page. The use of a tracing image reinforces how it is helpful to have a clear and thought-out plan for how your page will appear ahead of time.

You can save and close the lights.html document.

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