Setting Up a Document > Using visual guides in the design process > Using a tracing image |
Use a tracing image as a guide to re-create a page design that was mocked up in a graphics application. 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 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 place a tracing image in the Document window:
1 | Do one of the following: |
Choose View > Tracing Image > Load. | |
Choose Modify > Page Properties and then click the Browse button next to the Tracing Image text box. | |
2 | In the dialog box that appears, select an image file and click Select (Windows) or Choose (Macintosh). |
3 | The Page Properties dialog box appears. 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, choose Modify > Page Properties. | |
To show or hide the tracing image:
Choose View > Tracing Image > Show.
To change the position of a tracing image:
Choose View > Tracing Image > Adjust Position. Then 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 five pixels at a time, press Shift and an arrow key. |
To reset the position of the tracing image:
Choose 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 | Choose 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. | |