- Tracing Images, Layers, and Tables
- Applying a Tracing Image
- Tracing Images, Background Colors, and Images
- Adding Layers
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Applying a Tracing Image
In this exercise, you will learn how to apply a Tracing Image to your Web page, as well as how to change its transparency and position on the page. You'll work with a Tracing Image that was supplied on the H.O.T CD-ROM. If you were to create your own Tracing Image, you would create a mock-up of your Web page in a graphics application of your choice, such as Photoshop, Fireworks, Illustrator, or whatever, and save it as a GIF, JPEG, or PNG. You would then specify this mock-up as a Tracing Image, so that you could use it in Dreamweaver as your guide to re-create your page design.
A Tracing Image is visible only in Dreamweaver. Visitors to your site cannot see it. Keep in mind that when you are viewing the Tracing Image in Dreamweaver while building your page, you cannot see the background image or background color that you are setting unless you decrease the Tracing Image transparency setting.
-
Copy chap_08 from the book's CD-ROM to your hard drive. Define your site for Chapter 8 using the chap_08 folder as the Local Root Folder. If you need a refresher on this process, visit Exercise 1 in Chapter 3, "Site Control."
-
Open index.html. This page is blank, but it won't be for long. Choose Modify > Page Properties.... The shortcut keys for this are Cmd+J (Mac) and Ctrl+J (Windows).
-
Click Choose (Mac) or Browse (Windows) next to the Tracing Image option.
-
Browse to tracingimage.jpg inside the images folder and click Choose (see Figure 1).
-
For this exercise, make sure the Image Transparency Slider is at 100% (see Figure 2). This will enable your Tracing Image to be visible when you insert it.
-
Click Choose and then OK in the Page Properties dialog box.
-
Press F12 to preview this page in a Web browser. When you do this, notice that the page appears as a blank screen. This is supposed to happen! The Tracing Image only appears in Dreamweaver, and it won't be visible to your end user.
-
Return to Dreamweaver and choose Modify > Page Properties to access the Tracing Image settings again.
-
Drag the Image Transparency Slider down to 50% and click OK (see Figure 4).
-
Choose File > Save and leave this file open for the next exercise, in which you'll add images to match this layout.
){kind=link}
){kind=link}
This is what your page should look like with the Tracing Image applied. It was inserted at 100% opacity in the Page Properties dialog box, which makes it opaque. Note: The white border you see to the left of the Tracing Image is an offset created by Dreamweaver to emulate a Web browser. An explanation of this feature is supplied on the next page.
){kind=link}
){kind=link}
With the opacity reduced, it's much easier to use the Tracing Image as a guide rather than competing with foreground images and text.