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

Cc295031.445c3898-38d6-4710-afc7-a89937ef1926(en-us,Expression.30).gif

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.

  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.

    Opacity

    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.

    Apply

    Click to preview the tracing image.

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

  1. In the Layout Tables and Cells panel, choose the predefined structured page layout that most closely matches the structure of the tracing image. For more information about layout tables, see Working with 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.

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

Community Additions

ADD
Show:
© 2014 Microsoft