 |
Those used to the flexibility of QuarkXPress or Adobe PageMaker are likely to experience culture shock when learning to create designs for the Web. That’s because alignment tags in HTML simply don’t support anything beyond left, right, or center justification. You can get more-precise alignment with Cascading Style Sheets (CSS), but it comes with a high price–CSS layers aren’t compatible with browsers earlier than version 4.0, and Netscape Navigator and Microsoft Internet Explorer support CSS differently. If you use CSS, you have to write the code differently for each browser.
HTML tables come to the rescue. Tables are the next best thing to CSS when it comes to giving you precision alignment. They’re also much better than CSS in compatibility, working consistently with multiple platforms and with all version 2 or later browsers.
While tables work beautifully for creating precise alignment, they’re not intuitive to program. Fortunately, many WYSIWYG HTML editors, such as Macromedia Dreamweaver and Adobe GoLive, make creating tables a lot easier than doing it by hand-coding.
Dreamweaver’s Novel ApproachDreamweaver 2 is notable for its inno-vative approach to alignment–it’s the first HTML editor to offer a tracing feature. A tracing image, as Dreamweaver calls it, lets you use an image as a reference for designing a Web page. For example, if I wanted to position all my links around a half circle, I could first draw the half circle in an image editor; save it as a GIF, JPEG, or PNG file; and then bring that drawing into Dreamweaver as a tracing image. Once I have the half-circle tracing image in Dreamweaver, I can use it to position my links along a precise path. Dreamweaver also lets me change the transparency of the tracing image so I can control how much of the image shows through. In addition, I can change its position and hide the tracing image. When I pub-lish my page to the Web, the links show up along a half-circle path, but the tracing image does not appear.
This article shows how to use a page layout created in Adobe Photoshop as a tracing image in Dreamweaver (see “The Magic of Dreamweaver 2’s Tracing Images”). Dreamweaver uses CSS layers to create my sample layout. Since I want all my site visitors to be able to view my page, whether they have a current browser or not, I show how to take an additional step–converting layers into tables. Dreamweaver lets me do this almost effortlessly, giving me the best of both worlds: the precision of layers and the compatibility of tables.
LYNDA WEINMAN ( https://www.lynda.com ) has written several top-selling Web design books and is currently writing Dreamweaver 2 Hands-On Training (Peachpit Press, August 1999).August 1999 page: 108
The Magic of Dreamweaver 2’s Tracing ImagesDreamweaver 2 makes it easier to create artistic layouts on your Web pages. That’s because it has a new feature, the tracing image, that lets you use a mock-up image created in Macromedia Fireworks, Adobe Photoshop, or any other image-editing application as a guide for setting up your layout. The following steps illustrate how to use a tracing image to lay out a page. To prepare your mock-up layout for this process, create it in an image editor and save it as a GIF, JPEG, or PNG file.
1 Apply a Tracing Image
A Open a new untitled HTML document in Dreamweaver. Save the document. Select Page Properties from the Modify menu. Click on the Choose button next to the Tracing Image text box. Navigate to the tracing image you created. Select it and then click on OK.
B The tracing image appears in the background of your page.
Note that you can change various settings for the tracing image by selecting Tracing Image from the View menu. The Show setting toggles the tracing image layer off and on. This is helpful when you want to view your background color or image. The Align With Selection setting lets you align the upper left corner of the tracing image with the upper left corner of a selected object. The Adjust Position setting lets you adjust the exact position of the tracing image by x and y coordinates. By default, an 8-by-11-pixel offset accommodates the offset in the browser window. The Reset Position setting lets you reset the position of a tracing image if you move it and then decide you liked it better where it was.
2 Create Layers
A  |
Now that you’ve got a tracing image in place, you can start setting up the page layout using layers. This is where the true power of tracing images and layers begins to reveal itself.
Layers make it possible to get absolute positioning of objects on a page. You can insert images and text inside layers and move them around the page by simply clicking on and dragging the layer. Here are the steps for working with layers in Dreamweaver:
A Click on the Draw Layer button in the Objects palette.
B Draw a layer around each area in which you want to place an image. (In this example, I started with the top box.)
TIP As you draw the layers on your page, small yellow icons appear in the upper left corner of the screen. These icons represent the layers you’ve added. If you prefer to have them hidden, select Invisible Elements from the View menu.
C Click inside a layer and click on the Insert Image button in the Objects palette. Browse to the image you want to insert and click on OK. If you want to add HTML text to a layer, simply click inside the layer and begin typing.
B
TIP If you want to move layers around the page, make sure you grab them by the handle (the small box in the upper left corner of the layer). If you click and drag in the middle of a layer and try to move it, you will more than likely remove the contents from the layer.
3 Convert Layers to a Table
Layers are cool, but they don’t work on anything less than a 4.0 Web browser. Don’t worry–Dreamweaver has a great feature that ensures your Web pages are compatible with earlier Web browsers. With just a few clicks you can convert the layout you created with layers into a table. Version 2.0 and later Web browsers can handle tables.
All you have to do is select Convert and then 3.0 Browser Compatible from the File menu. Then select Layers To Table. That’s it. Dreamweaver automatically creates a new document and converts your layers into tables. This is nice if you want to save the layers version and the tables version as separate documents.
 The Layered Look: This is what my page looks like when I use layers to construct the layout. | 
The Final Web Page |