Applying a Tracing Image and Adding Layers in Dreamweaver
- 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
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!