Lesson 4a: Working with Tables for Page Design

Upon completion of this unit, you should be able to:

1. Use tracing images
2. Use tables to lay out your pages
3. Use tables for information and data

Using Tracing Images

Sometimes you will be given a page design that someone else has designed in a graphics program such as Macromedia FreeHand MX, Adobe Photoshop, or QuarkXPress. If you can convert the page to a JPEG, GIF, or PNG graphic, you can import that image into Macromedia Dreamweaver MX 2004 and use it as a guide-or a tracing image-to re-create the HTML page.

The tracing image is visible only inside Dreamweaver. It is referenced in the HTML code but will not be downloaded or displayed by the browser. While you're using a tracing image, the background color or background image of your page will be hidden, but it appears in the browser.

• Step-by-Step 4.1: Placing a Tracing Image

  1. Start Macromedia Dreamweaver MX.. Create a new document and save it as destinations, followed by your initials, in your compass tours/Lesson04 folder. In the document Title box, enter Featured Destinations.
  2. Click the View menu, point to Tracing Image, and then click Load. The Select Image Source dialog box opens.
  3. In the Lesson04 folder where you saved the page, double-click the Images folder and choose the file table trace.jpg. Then click OK (Windows) or Choose (Macintosh). The Page Properties dialog box opens. Make sure Tracing Image is selected in the Category list.
  4. Drag the Image Transparency slider to the left to about 30%. This will lighten the image considerably. You want to be able to see the image but not be distracted by it. Click OK.
  5. Save the document and remain in this screen for the next Step-by-Step.

Altering a Tracing Image

You can change the position of a tracing image, align it to a selected object, or hide the image by using options on the View menu's Tracing Image submenu.

To show or hide the tracing image, click the View menu, point to Tracing Image, and then click Show.

To align the tracing image to a selected element, select an element in the Document window. Click the View menu, point to Tracing Image, and then click Align with Selection. The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.

To reset the position of the tracing image, click the View menu, point to Tracing Image, and then click Reset Position to return the tracing image to the upper-left corner of the Document window (0,0).

• Step-By-Step 4.2 - Changing the Position of a Tracing Image
  

  1. Click the View menu, point to Tracing Image, and then click Adjust Position.
  2. Press the arrow keys to move the image 1 pixel at a time. Press Shift and an arrow key to move the image 5 pixels at a time. Enter coordinate values of your choice in the X and Y text boxes to precisely specify the position of the tracing image. Click OK when you finish.
  3. To reset the position of the tracing image, click the View menu, point to Tracing Image, and then click Reset Position to return the tracing image to the upper-left corner of the Document window. Remain in this screen for the next Step-by-Step.

Back to Lesson 3: Working with Links

Go to next section: Lesson 4b: Working with Tables