Using a Tracing Image


At times, you might be given pages that someone else has designed in a graphics program (such as Macromedia FreeHand, Adobe Photoshop, or QuarkXPress) or you may have a screen shot of a page. If you can convert the design 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 is not displayed in the browser. The tracing image appears 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 displays when you look at the page in a browser.

1.

Open the layout.html document from the Lesson_06_Tables folder and switch to Standard mode.

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

2.

Choose View > Tracing Image > Load.

The Select Image Source dialog box opens.

3.

Choose the file design_trace.jpg, located in Lesson_06_Tables/Images; then click Choose (Macintosh), or OK (Windows).

The Page Properties dialog box opens.

4.

Select the Tracing Image category. 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.

5.

Click the Appearance category in the Page Properties dialog box and set the Left, Right, Top, and Bottom margins to 0. 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 uses the margin options you specify to place the tracing image. The default margin (used if the margin text field is left blank) can vary depending on the browser, but it is approximately seven pixels.

Note

You can change the position of a tracing image by choosing View > Tracing Image > Adjust Position and specifying the x and y coordinate values. If you move the tracing image into the space reserved for the margin, as defined in the Page Properties dialog box, the coordinate values 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 + margin, 0 + margin). 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.

6.

Type Download the latest schedule of classes at Yoga Sangha at the top of the page.

Notice that 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 emphasizes how it is helpful to have a clear and thought-out plan for the way your page will appear ahead of time.

You can save and close all open documents.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net