Export (0) Print
Expand All

Tracing images

You can create a mock-up of a web page image in a graphics program and then use it as a visual guide to re-create or trace the web page design. This is called a tracing image and it can be a JPEG, GIF, PNG, or BMP image.

To use a tracing image, you add it to a page. It appears in the background of the Microsoft Expression Web document window in Design view. You can show or hide the image, set its opacity, and change its position. The tracing image is stored in a layer between the background image and the editor in Expression Web.

The X and Y coordinates of the tracing image correspond to the upper-left corner of the editing window. You adjust set the placement of the tracing image in pixels by choosing the X (side to side) and Y (up or down) coordinates in the Tracing Image dialog box.

Placement of a tracing image at different X and Y coordinates


When you save a web page that contains a tracing image, you will be prompted to save the tracing image as an embedded file in your site. Doing this will not affect the appearance of your site in a browser. If you set a second tracing image for a page, the first image disappears.

To add a tracing image to a web page

  1. In Design view, on the View menu, point to Tracing Image, and then click Configure.

  2. In the Tracing Image dialog box, do the following:

    Use this To do this

    File Name

    Click Browse to select the prototype image to use as a tracing image.

    X and Y

    Type or select the horizontal and vertical coordinates to align the upper-left corner of the web page in the tracing image with the upper-left corner of the Design view.


    Move the slider to set the opacity of the tracing image. For example, when you want to see how the page under construction looks without the tracing image, reduce the opacity of the tracing image by moving the slider to adjust the opacity to the desired level.


    Click to preview the tracing image.

    With the prototype image visible in Design view, you can now begin designing the page.

To turn off a tracing image

  • On the View menu, point to Tracing Image, and then click Show Image.

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

© 2015 Microsoft