Section 5.4. Creating a Tracing Image

5.4. Creating a Tracing Image

A tracing image is a to-scale mockup of your layout. You draw the tracing image in your graphics software, save it, and file it away. When design time rolls around, you attach your tracing image to the document window in Dreamweaver and literally draw your layout on top of the mockup.

This isn't a mandatory step. If you don't have graphics software, or if you'd rather not bother with a tracing image, then you may certainly proceed in Dreamweaver without one. Still, having the tracing image almost always works to your advantage.

Toward the end of Chapter 4, you assigned pixel measurements to the widths and heights of the areas in your layout sketch. Most of these measurements were probably estimates, not that anyone can blame you for guessing. You were working in the abstract, with empty rectangles standing in for the sections of your design. Making the tracing image is your first step toward finalizing those measurements. You see firsthand what a 100-pixel-wide navigation area looks like in relation to the rest of your design, and if the area seems too narrow, you can widen it.

You might also take the opportunity to start filling the areas of your tracing image with sample content. You can design the banner of your page and connect it to the navigation bar that you envision running down the left side of the screen. You can type some sample text in the main content area. You can try out different color schemes. Experiment as much as you like, and save when you're happy with the results. As long as you build your layout in Dreamweaver to match the size of the areas in your tracing imagewhich is extremely easy, since you're tracing over themthere's no reason why your design can't look exactly like your mockup. You don't even need to recreate the art. Simply export the graphics from the tracing image.

To create a tracing image, here's what you do:

1. Get out the sketch of your design from Chapter 4, and open a new document window in your graphics software.

2. Start by setting the canvas size of your document to match the dimensions of the browser window. Your tracing image should be to scale, so make sure the width of the canvas is exact. Refer back to the page width that you chose for your layout sketch in Chapter 4. (If you're planning to build a liquid layout, use the page width on which you initially based your design.) The height doesn't matter so much in this case, because the height of your main content area is variableit changes from page to page depending upon the content. Make the height of the canvas a hundred pixels or so longer than the above-the-fold cutoff. You may want to draw a line to mark the above-the-fold threshold. Also, for your convenience later, you can label the areas and give their dimensions.

   TIP

   To resize the canvas in Macromedia Fireworks, choose Modify Canvas Canvas Size, or click the Canvas Size button on the Property Inspector. Type the width and height values for your page in the appropriate fields of the Canvas Size dialog box, and click OK.

   
   

3. 
   

   Figure 5-8. Flesh out your tracing image with art and sample content

   
   
   

   TIP

   The art that you mock up in your tracing image doesn't have to go to waste. You can use the very same art on your site. To do this, export the desired areas as separate image files. Eventually, you'll place these image files into your Dreamweaver document.

   If you're using Macromedia Fireworks, select the rectangle from Step 4 that you want to export. Right-click the mouse button, and choose Insert Slice from the context menu. Fireworks adds an identical, rectangular slice to the web layer. Right-click again, and choose Export Selected Slice. You now have a web-ready image, tailored exactly to size, for your layout.