Tracing Images - Page 2
September 6, 2002
If you're the kind of designer who creates your layouts first by sketching
them with pencil and paper, or building prototypes in a graphics program, and
then recreating the effect in Dreamweaver, you might find the Dreamweaver tracing
image feature a great help. A tracing image is any GIF, JPEG, or PNG file that
you choose, that will appear as a ghosted-back image in Design view—as
if you were viewing it through tracing paper. The idea is, you place your layout
sketch "behind" your Dreamweaver design and use it as a guide to construct
the tables or layers that will create your HTML layout. When you're done,
you remove the tracing image, and all is well with the world. Tracing images
are configured and set using the commands in the View > Tracing Image submenu,
or the Modify > Page Properties dialog box. Figure
10.3 shows a tracing image being used.
Figure 10.3
A Dreamweaver document with tracing image in place.
Setting a Tracing Image
To put a tracing image "behind" your Dreamweaver Design view, do
this:
Create the GIF, JPEG, or PNG file any way you like—by scanning
a sketch, saving a Fireworks or Photoshop file, taking a screenshot of a desired
layout, and so on. -
In Dreamweaver, open your document and go to Modify > Page Properties
(see Figure 10.4).
Figure 10.4
Using Modify > Page Properties to set the tracing
image.
From the Page Properties dialog box, find the tracing image options
and click the Choose button. Browse to select your tracing image file. Still in the Page Properties dialog box, set the image opacity
slider to around 30–50% (to create the faded-back, tracing paper effect).
Click Apply to see how your tracing image looks, and adjust the opacity more
until you like the effect. Click OK to close the Page Properties
dialog box. There you go!
Tip
You can also use View > Tracing Image > Load to choose a tracing image,
but you can't assign it an opacity value using that method.
To see how Dreamweaver creates the tracing image, go to Code view and examine
the code for your <body> tag. You'll see several nonstandard
attributes assigned (shown in bold):
<body bgcolor="#FFFFFF"
text="#000000"
tracingsrc="images/myLayout.gif"
tracingopacity="40">
The browser won't recognize these attributes, and so will ignore them.
If you Preview in Browser with a tracing image in position, it won't show.
But it will show in Dreamweaver Design view.
Note
If your page has a background image assigned, either as part of the
<body> tag or in a Cascading Style Sheet, the tracing image won't be
visible—it's hidden behind the other image. To see the tracing image,
you'll have to temporarily remove your background image.
Adjusting Tracing Image Position
Your tracing image might not be positioned exactly where you need it—by
default, it appears slightly offset from the top and left of the Document
window.
To adjust the tracing image position manually, do this:
Go to View > Tracing Image > Adjust Position. A dialog box
will appear, displaying the current x (horizontal) and y (vertical) coordinates
of the image, and allowing you to change these. You can change the image's position either by entering new
values in these fields, or by using your arrow keys to nudge the image one pixel
at a time in any direction. When you're done, click OK!
To adjust the tracing position to match a certain page element (such as a
graphic, table or layer), do this:
Select the element you want to align the image with. Go to View > Tracing Image > Align with Selection.
After you've done your repositioning, check your code, and you'll
see that more attributes have been added to the <body> tag (shown
in bold):
<body bgcolor="#FFFFFF"
text="#000000"
tracingsrc="images/myLayout.gif"
tracingopacity="40"
tracingx="-5"
tracingy="150">
Tip
Don't use the tracing image to get pixel-perfect layouts in
place—use it to get the overall positioning down, and then remove it. HTML
layouts can't always perfectly match layouts created in graphics programs.
Removing a Tracing Image
Eventually, the tracing image will start getting in your way, and you'll
want to remove it—either temporarily, by hiding it, or permanently, by
removing its code from the <body> tag.
To temporarily hide the tracing image, go to View > Tracing Image >
Show, to toggle the command off; or go to Modify > Page Properties, and set
the opacity slider to 0%.
To remove the tracing image permanently, go to Modify > Page Properties,
and delete it from the Tracing Image input field; or go to Code view and remove
the tracing image attributes.
Inside Dreamweaver MX
Inside Dreamweaver MX
Layout View - Page 3
|
