Using a Tracing Image

This tutorials will illustrate using a tracing image in Dreamweaver CS5.

We're now going to look at a useful tool for laying out web pages.

One of the problems when you're creating web pages is laying them out accurately. You may have a layout for your pages prepared, possibly even by a specialist designer, but making the pages fit that design can be tricky.

Suppose that I have a layout based on MSN, and I want to make my images and text fit that layout. Here is a typical page.

As you can see, there are locations for images, headlines, text, unordered list of items, and so on.

I can use this sample page as a tracing image, i.e. an image that appears in the background when I'm working on my pages to help me to position content, but that won't appear when I actually publish the pages (unlike a page background, which will appear when the pages are published).

Let's see that in action.

Start a new page. Click the View menu, then hover over Tracing Image.

Select Load and the Select Image Source dialog appears.

Dreamweaver is asking you to locate the tracing image you're going to use. This will be a JPEG, GIF or PNG of the required size to act as your guide for web page design.

Locate the image and press OK. The Page Properties dialog appears.

Use this dialog to specify the transparency to be used for the tracing image. You'll need to experiment with this setting to see what suits you. I've chosen 50%. Then click OK.

The semi-transparent tracing image now appears on my page, and I can start to develop my page using it as a guide.

One option is to now create a table to replicate all of part of the layout of the page and use that for positioning content. I can also use the other alignment tools we looked at earlier.

And finally, once the tracing image is in place, we can make changes to its position etc to fine tune our design. Click the View menu then hover over Tracing Image.

The Show option lets us hide or show the tracing image.

The Align with Selection option lets us align the image with an object selected on the page.

The Adjust Position... option invokes the Adjust Tracing Image Position dialog that lets us position the tracing image accurately on the page.

Note that you will need to use a tracing image of a size that suits your web page design,. Often a simple tracing image drawn in an application like Adobe Fireworks will do a good job.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Using a Tracing Image in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!