How to use Dreamweaver to trace images

Tracing image (tracing image) is an added feature in Dreamweaver 2.0, but we still have to mention it when we introduce Dreamweaver 4.0. A good way to get a good understanding of something strange is to compare it to something similar but already familiar, so let's take a look at the similarities and differences between it and what we usually call background images:

Same point: Tracing image is a picture that exists in the background of a page like a background image, and I think that's the only thing they have in common.

Different points:

1, tracing image will not be Dreamweaver tile (for a background image, if the image size is less than the size of the page will be tiled. )

2, you can specify the transparency of tracing image. 3, tracing image is only visible in the Dreamweaver, it will be ignored in the browser.

4, when the tracing image is visible in the Dreamweaver, the background image and background color will become invisible. But there's a switch that lets you choose whether you want to display tracing image or background images.

The following is a tracing image displayed in the document window (see Figure 1).

The procedure is as follows:

1, first of all, we want to make a model image. You can use any of your favorite image-editing applications to make this model image, as long as you end up saving it as a GIF, JPG, JPEG, or PNG format. Later, we'll use this model image as a guide to building the page layout. That is to say, first design and make a image of the page layout, and then put it as tracing image into the page, and then follow the image of the layout of the line, which for the overall planning of complex page layout is very good.

Figure 1

2, Next, I want to put this good image model into the required page. Select "View→tracing image→load", a dialog box will appear, find your image model and select it, then click [Select].

3. The Page Properties dialog box will appear immediately, by dragging the slider to specify the transparency of the image (transparent), and then clicking [OK]. You can choose another tracing image or change the transparency of the current tracing image by selecting "Modify→page Properties" at any time.

4, Figure 2 is the way I put my tracing image on the page (I set the transparency to 70%).

Figure 2

5, loaded into tracing image, observed a while, always feel that this tracing image does not appear to be in the center of the document, so I decided to adjust the position. Select "View→tracing image→adjust Position". Enter the coordinates of the x and Y axes (the default position is 8,11) in the dialog box that pops up, and then click [OK].

In addition to adjusting the location, you can also use the following options:

Show--Used to hide and display tracing image, and when tracing image is hidden, background images and background colors can be displayed (of course, if you set them up).

Align with Selection (aligned with options)-lets you align the upper-left corner of the tracing image with the upper-left corner of a selected object (you need to select an object to be aligned first).

Reset Position (Reset)--You can send your tracing image back to (x:0,y:0) position.

6, now that we have a good tracing Image, we can draw the layout according to it. Click [Layer] in the object palette, and drag and drop two layers to cover the green area of tracing image respectively.

7, as you can see, tracing image has successfully assisted me to complete this simple layout, of course, tracing image can do much more than this more complex page layout task. But my work is not finished yet, my design is to put a picture of a digital camera in the large layer on the right, and a description of the camera in the small layer on the left. The page looks like this (see Figure 3) When you insert pictures and input text in large and small layers, respectively.

Figure 3

8, well, all the work has been done. Let's preview it in the browser (see Figure 4).

Figure 4

There is no need to worry about how the browser will look at tracing Image, which is neither displayed nor downloaded in the browser, and it can only be displayed in Dreamweaver.