Understanding Draw Layers
DMXzone premium tutor, Jason Cranford Teague (author of DHTML and CSS for the World Wide Web: Visual QuickStart Guide) begins a new series today on CSS and DHTML.
CSS allows you to set up elements called “layers” on the screen that can be absolutely positioned in relation to the Web page. For example, you can set up a layer containing graphics, text, forms, or any other HTML elements and then position that layer 25 pixels from the top of the page and 360 pixels over. This layer will ignore all other content on the page even if it overlaps the content that is underneath it.
Dreamweaver refers to these CSS positioned layers as Draw Layers and provides special tools, not only to add and move these layers, but also to allow you to animate these layers, show and hide them, change their size, or even allow the visitor to move them around in the browser window.
Because draw layers can work as free agents in the page, this not only opens a lot of possibilities for layout, but can be used to add a bit of dynamic zest to your page. You can place the draw layers around the page for the exact positioning you need in your design, crop parts of a layer to create independently scrollable regions, or even hide draw layers and then use Dreamweaver behaviors to show them when needed.
Overview
Table of Content:
- Netscape Layers vs. Dreamweaver Draw Layers
- Creating a New Draw Layer
- Setting Up the Draw Layer
- Layer Name
- Tag Type
- Position (left and top)
- Aligning Layers
- 3D Position (Z-Index)
- Dimensions (width and height)
- Clip (left, right, top, bottom)
- Overflow
- Background (image and color)
- Visibility
- Setting a Draw Layer's Preferences
- Adding Content to a Draw Layer
- Nesting Draw Layers
- Preventing Draw Layers from Overlapping
- Next time
Jason Cranford Teague has been working in digital media design since 1994. Over the years, his clients have included Bank of America, Coca-Cola, Virgin, CNN, Kodak, Siemens, The European Space Agency, and WebMD. A graduate of Rensselaer Polytechnic Institute where he spent a very cold year getting his M.S. in Technical Communication, Jason is regularly asked to speak at conferences about design for Web, print, and video. An internationally recognized writer and columnist, Jason is the author of numerous books and articles including the best selling DHTML and CSS for the World Wide Web (Peachpit Press), Final Cut Express Solutions (Sybex), Dreamweaver MX Magic (New Riders), and Photoshop CS at Your Fingertips (Sybex). In addition, he has written for the Apple Developers Connection, Computer Arts Magazine, Macworld Magazine, and The Independent Newspaper as well as appearing on TechTV's “The Screen Savers.” Jason is currently running Bright Eye Media (www.brighteyemedia.com), which specializes in Web sites for education and entertainment.
See All Postings From Jason Cranford Teague >>
Reviews
Be the first to write a review
You must me logged in to write a review.