Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of

More Layout Techniques

In this compressed tutorial, I've shown you how to design a web page layout without tables, using CSS styles applied via apDiv tags in Dreamweaver CS4. The process is intuitive, graphical, and relatively accessible; with just the features I've introduced here, you can create attractive and stable page designs.

Other advantages of designing with apDiv tags are beyond the scope of what we can explore here in depth, but I'll mention them. One of those advantages is that you can connect named apDiv tags with JavaScript to create animation and interactivity. For example, you can define an apDiv tag's visibility as hidden (an option available from the Vis pop-up in the Properties inspector for a selected apDiv). Then you can write JavaScript to change that property from hidden to visible when a visitor takes action on the page, such as hovering the mouse pointer over a thumbnail image. By combining JavaScript and apDiv tags, you can create slideshows similar to those you might otherwise generate by using Flash ActionScript.

You can also layer apDiv tags on top of each other. The Z-index value (also accessible in the Properties inspector for a selected apDiv) defines the position of the selected apDiv within the stacking order: An apDiv with a Z-index value of 3 will appear on top of an apDiv with a Z-index value of 2 (or 1, or 0) if the two apDivs overlap. Overlapping apDivs are less stable and less supported as a CSS feature, so take your audience into account if you employ this technique—and avoid it if visitors will come to your site via mobile devices or nonstandard browsers.

Another feature of Dreamweaver that meshes well with apDiv tags is the ability to display grids. Choose View > Grid to access a submenu that allows you to define and apply grids, and even enable "snap to grid" for easier page design.

  • + Share This
  • 🔖 Save To Your Account