- CHANGING LAYER STACKING ORDER
- DRAWING MULTIPLE CONSECUTIVE LAYERS
- LAYERS LIKE YOU LIKE 'EM
- TAKING PREVENTATIVE MEASURES
- MOVIN' AND GROOVIN' AND LAYIN' TO THE BEAT NOW
- NO SPECIAL MAGIC REQUIRED
- PUT THOSE LAYERS IN THEIR PLACE
- SUPER SIZING LAYERS
- NO TRESPASSING
- NESTING URGES
- THE OBVIOUS ESCAPES US SOMETIMES
- CHANGE LAYER CONTENTS
- INSERT DIV TAG
- FRAMESETS-A-PALOOZA
- SPLITS ARE ALL RELATIVE
- QUICK DRAW FRAMESETS
- WHY SO BLUE?
- GETTING IN TOUCH WITH YOUR INNER FRAMESET
- PLAYING THE FRAME NAME GAME
- A FRAMESET BY ANY OTHER NAMESET
- KEEPING FRAMES IN THEIR PLACE
- HELP, I'VE BEEN FRAMED, AGAIN!
- TARGETING MULTIPLE FRAMES
- OODLES OF UNDO-ODLES
- CREATING ACCESSIBLE FRAMES
- DÉJÀ VU FRAMES
- THE GUIDING LIGHT
This chapter is from the book
This chapter is from the book
This chapter is from the book
THE GUIDING LIGHT
Guides are a layout feature I've always wanted in Dreamweaver; I find them incredibly helpful in other programs such as Fireworks. A guide is a vertical or horizontal line that enables you to line up various elements in your design. Because Dreamweaver doesn't offer them, I found a way to make my own using Dreamweaver <div> tags and the magic of CSS.
Driving the heart of our Dreamweaver guides are two CSS classes, which I've called .horzGuide and .vertGuide. I've colored both guides a bright green and given them a high z-index of 100 to stand out—and on top—of the rest of the page. The key to the horizontal guide style is to set the border-top property to 1 pixel and the width to 100%, like this:
.horzGuide {
border-top: 1px solid #00FF00;
position:absolute;
left:100px;
top:0px; >
width:100%;
z-index:100;
}
I've also started the guide out so that it is flush to the left side of the screen, and a standard 100 pixels in.
Vertical guides are similar, with two key properties altered. To go vertical, we'll set border-left (or border-right, depending on your political leanings) instead of the horizontal guide's border-top and making the height 100% rather than width:
.vertGuide {
border-left: 1px solid #00FF00;
position:absolute;
left:0px;
top:100px;
height:100%;
z-index:100;
}
Now for the fun part—not that setting up CSS classes isn't a riot. Create a <div> tag by choosing Insert <div> Tag from the Insert bar's Layout category. When the <div> tag dialog pops up, choose either horzGuide or vertGuide from the Class list and there you go!
One additional helpful step is to deselect View > Visual Aids > Layer Borders so that when the guides are not selected, all you see are the lines. Hey, how 'bout some props for the guide master?
After the <div> is on the page, you can move it in a bunch of ways. Because it's a positionable <div> (a.k.a. a layer in Dreamweaver-speak), you can drag it wherever you like. Selected <div> tags can be moved using the arrow keys, one pixel at a time or, with the Shift key pressed, 10 pixels at a time. For an exact pixel placement, change the Left or Top fields on the Property inspector.
Because the CSS rules are set up as classes rather than IDs, you can create as many vertical and horizontal guides as you need. Store your CSS in an external style sheet and use the Design Time Style Sheet feature to turn it on whenever you need a little guidance.
)
Figure
5.23