From Chapter 8: "Layout"
IN TRADITIONAL LAYOUT programs, such as Adobe PageMaker and QuarkXPress, most people take it for granted that they can move blocks of text and images around almost anywhere on the screen. Unfortunately, standard HTML doesn't have any tags to easily position elements. This has caused considerable frustration among Web-page designers. There is good news -- Dreamweaver has built-in functions that give you the freedom of absolute positioning while still conforming to strict HTML guidelines!
The following two exercises cover Dreamweaver's key features that allow you to position elements anywhere on your Web page -- Tracing Images and Layers. The rest of the chapter in the book shows you how to convert Layers to Tables.
Tracing Images, Layers, and Tables
What is a Tracing Image? Let's say that you have been in Photoshop, Fireworks, Illustrator, or any drawing or painting program of your choice, and you've mocked up a wonderful Web page. Don't you just wish you could take that mock-up and put it up on the Web? Dreamweaver's Tracing Image option allows you to place any GIF, JPEG, or PNG into a Tracing Layer on your page, which can then be used as an alignment reference for your HTML elements.
So far, if you've been following along in the book, you have been putting artwork and text directly on your page. With that method, you can right-, left-, or center-align elements, and that's the end of the story. This frustrates most people because it would be a lot nicer if you could stick that artwork or text anywhere you wanted on the page and have it stay there.Layers are your saviors, as they can be positioned freely on your page! Rather than simply placing artwork and text on a page, as you have been doing so far, you can put your content into Layers and move it anywhere you want.
If Layers are so flexible and let you move your images and text around so easily, why doesn't everyone use them? There's a little problem: They are not backward compatible with older browsers. If you're targeting an audience who uses a 3.0 browser or earlier, or an AOL browser, Layers aren't going to work for you. But there's more good news: Once you've designed a freeform layout using Layers, Dreamweaver allows you to then convert your Layers to HTML Tables so that the Web page is compatible with older versions of Netscape and Explorer.
Tables were originally developed to insert data into HTML pages; however, many people use them for layout by turning off the borders and making them invisible. This trick allows you to use Tables as you would a grid in page layout. You can put images and text into an invisible Table, and the rows and columns and cells hold the objects in place. The bummer about Tables is that they're not intuitive to work with, and the code for creating them can get quite complex. Besides, when you are designing, it's best to be able to change your mind and nudge something up, down, left, or right at your whim. You can do that easily with Layers.
Dreamweaver again offers a great solution. You can go back and forth freely between converting Layers to Tables and Tables to Layers so that you can really fine-tune your layout without worrying about writing complex code. With Dreamweaver, you can finally focus more of your energy on design, and less on HTML workarounds for layout. Life is good!
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....
- ...For this exercise, make sure the Image Transparency Slider is at 100%. This will enable your Tracing Image to be visible when you insert it.
- Click Choose and then OK in the Page Properties dialog box....
...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.
- 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....
...With the opacity reduced, it's much easier to use the Tracing Image as a guide rather than competing with foreground images and text.
- Choose File > Save and leave this file open for the next exercise, in which you'll add images to match this layout....