1. Computing

How to Use Dreamweaver Tracing Images

By , About.com Guide

Dreamweaver makes it easy to take a design built by a graphic artist and convert it to HTML. Tracing images put the graphic design in as a faded background that you then put your HTML elements on top of.

Tracing images are one of the lesser known features of Dreamweaver, but once you start using them, you’ll wonder how you ever made web pages before.

I use them primarily to show me how wide I should make my pages and where the “fold” will be on various monitor resolutions. And this tutorial will provide you with both the tracing image to determine page widths and also how to incorporate it into your Dreamweaver web pages.

Dreamweaver Version Compatibility

  • Dreamweaver CS5
  • Dreamweaver CS4
  • Dreamweaver CS3
  • Dreamweaver 8
  • Dreamweaver MX 2004
  • Dreamweaver MX
  • Dreamweaver 5
  • Dreamweaver 4
  • Dreamweaver 3

Images 1-11 of 11

Save Your PageSave Your PagePage PropertiesPage PropertiesTracing Image PanelTracing Image PanelSelect Your Tracing ImageSelect Your Tracing Image
Move the ImageMove the ImageSelect the OpacitySelect the Opacity50 Percent Opaque50 Percent OpaqueTracing Image AppearsTracing Image Appears
Style your HTML and BodyStyle your HTML and BodyZero Out Margins and PaddingZero Out Margins and PaddingReady to DesignReady to Design

©2013 About.com. All rights reserved.