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 website. 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 design a web page based on a tracing image

  1. In the Layout Tables and Cells task pane, choose the predefined structured page layout that most closely matches the structure of the tracing image. For more information about layout tables, see Layout tables.

  2. Resize the cells in the table and insert other layout tables to reflect the structure of the tracing image.

  3. Insert images, buttons, and other structural elements into the layout so that they match the tracing image.

  4. Fine-tune the layout to match the tracing image by creating additional layout tables and cells or by adjusting the margins and padding values of cells.

  5. When the design is complete, turn off the tracing image to see the result.

To turn off a tracing image

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

Community Additions