Adobe Dreamweaver CS5 : Working with Web Page Tables - Using a Tracing Image

6/24/2013 7:20:35 PM

You can use a tracing image as a guide to create a page design in Dreamweaver. For example, you can use Adobe Photoshop to create an exact replica of what you want your Web page to look like (i.e. headings, body text areas, navigation, etc), and then use that image as a tracing image to help design the actual Web page. A tracing image is a JPEG, GIF, or PNG formatted image that appears in the background of the Document window. In addition, a tracing image is visible only in Dreamweaver, not 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 is visible when the page is viewed in a browser.

Insert a Tracing Image

1. Open a Web page that you want to insert the tracing image.

2. Click the View menu, point to Tracing Image, and then click Load.

3. Navigate to the image you want to use, select it, and then click OK.

4. Drag the Transparency slider to adjust the transparency of the tracing image.

Note

If the chosen graphic file is not located in the current Site, Dreamweaver prompts you to save a copy within the active Site folder (recommended).

5. Click OK.

The tracing image now appears in the background of the current Web document.

Modify a Tracing Image

1. Click the View menu, and then point to Tracing Image.

2. Select from the following options:

Show. Select to show or hide the tracing image.
Align With Selection. Select an element in the document window, and then use this option to align the upper-left corner of the tracing image with the upper left corner of the selected element (i.e. a table cell).
Adjust Position. Select to open a dialog box where you can precisely specify the position of the tracing image by entering coordinate values in the X and Y text boxes.
Reset Position. Select to return the tracing image to its default position, the upper-left corner of the Web document.

Others

- Adobe Dreamweaver CS5 : Working with Web Page Tables - Changing Cell, Row, or Column Properties

- Adobe Photoshop CS5 : Intermediate Selection Techniques (part 4) - Refine Edge Command

- Adobe Photoshop CS5 : Intermediate Selection Techniques (part 3) - Creating a Path with the Pen Tool

- Adobe Photoshop CS5 : Intermediate Selection Techniques (part 2) - Quick Mask Mode

- Adobe Photoshop CS5 : Intermediate Selection Techniques (part 1) - Color Range Command

- Adobe Flash Catalyst CS5 : Managing the Library - Viewing the Library panel (part 2) - Preview files in the Library panel

- Adobe Flash Catalyst CS5 : Managing the Library - Viewing the Library panel (part 1) - Add assets to the Library panel

- Adobe After Effects CS5 : Expressions - Time Remapping Expressions

- Adobe After Effects CS5 : Expressions - Using Markers

- Adobe After Effects CS5 : Expressions - Looping Keyframes