Astro
Lesson #36:
playing.with.layering
RetroGrrl finally conquered her fear of Style Sheets and has boldly
gone on to lash some Layers into shape. She soon found that just as
Style Sheets give more control over fonts and the appearance of pages,
Layers allow her to do tricky things with positioning - and moving
and hiding things.
about.layering.about
So - just what is a Layer? In simple terms ('cos we know you is simple
folk!) a layer is a rectangular container. Up until now we have only
been able to use Tables as containers, and use them we did - stuffing
them to the brim with text and graphics and whatever else we could
manage to squeeze in. And that was fine but always just that wee bit
tricky when trying to get things to go exactly where we wanted.
By using Layers - big containers that we can put anything in (tables,
graphics, text, Flash) we can be much more precise. Yep, we can actually
specify exact coordinates and some other neato stuff like hiding particular
layers. That's right - as if one layer on a page wasn't enough we
can have many layers on one page and hide each one until required.
Think of them as trays stacked on top of each other.
Layers are part of DHTML - Dynamic HTML - which really means that
after a page has loaded things can still happen with the content -
whether by some action on the visitor's part or by design. Layers
can really only be successfully used with version 4+ browsers and
as usual there are many cross-browser issues to take into account
(uh, duh). However, we can take a look at some of the mechanics of
'fun with layers'...
(Netscape offers its own brand of layers but as the only work in
NN they are pretty useless - we will stick to DHTML Layers)
layer.layer.pants.on.fayer
Here's a relatively simple example we prepared earlier.
Have a play with it.
Now -we're not gonna get all technical on ya just yet - today is
really just an introduction to the world of layers. If everything
worked well, you would have seen the layer a go go window pop-up:
Everything
on the go go page has been built into a Layer - we set the Layer to
be 500 pixels wide and 307 pixels high, positioned it at 0 pixels
from the left of the browser window and 10 pixels from the top. This
gives us some coordinates and means the Layer will display at precisely
the same position in any capable browser.
Here's what the code says:
<div
id="firstlayer"
style="position:absolute; width:500px; height:307px; z-index:20; left:
0px; top: 10px; 0;
visibility: visible">
all
the content of the layer goes in here - just like regular old HTML
content
</div>
Firstly, the Div tag keeps all the information about the structure
of the Layer together and makes sure things are hunky dorey in both
NN and IE. It's a tag common to CSS, or Style Sheets and really just
means "everything after Div goes together so all these instructions
affect what comes next" . We've given this Layer a name 'firstlayer'
- this is very important when you get to the tricky stuff. We used
the ever trusty Dreamweaver to build our Layers, a program which makes
it easy to keep track of all this jiggery-pokery.
Next comes the description of "firstlayer", it's 'style'.
This Layer is using absolute positioning, which just means that we
can specify an exact location on the page. What fun! Width and Height
are, well width and height, and then comes the absolute positions.
Left: 0px, that's zero pixels away from the Left Margin. Top: 10px,
that's 10 pixels away from the Top Margin. Visibility: visible means
the Layer can be seen unless we say otherwise elsewhere.
The stacking order of Layers is determined by something called the
z-index. The Layer with the highest z-index gets to be king of the
castle and be on top. The z-index of this Layer is 20. Handy Hint:
it's a good idea to leave some room for maneuvering around Layers
- don't give them z-indices of 1,2,3. Instead use 10,20,30 - that
way if you need to add a Layer or swap stacking you've left some room
to add, say 15, 25, 28.
Inside the Layer we used a table to set up the design - as we said
this is simple, simon. This Layer is top of the stacking order and
is visible at the beginning.
show.and.tell
This
is the second layer - which you can't see as it has a different z-index
(10) and is hidden until you perform an action to bring it into view.
That action was a piece of javascript that swung into operation when
the 'Menu' text was clicked.
Here's the Layer information for this "secondlayer":
<div
id="secondlayer"
style="position:absolute; width:500px; height:307px; z-index:10; left:
0px; top: 10px;
visibility: hidden">
Here
is all the content of the second Layer - mind boggling isn't it?
< /div >
Note that everything is the same (although it doesn't have to be!)
except the name of this new Layer, its content and the fact that visibility
is 'hidden'. You don't see it until you are meant to. Pretty sparky,
huh?
Here's how Dreamweaver 3 shows the 2 Layers in it's Layer Window:
Both
Layers are known by their names (always nice to know people's names
isn't it?) and the z-index for each is displayed - it's easy to see
and change the stacking order simply by selecting any Layer.
"Firstlayer" has an open eye symbol, meaning it is a visible
layer, and "Secondlayer" - well, appears to be asleep we
guess but is really playing possum and hiding out.
laying.out.the.java
Layers can be easily manipulated using Javascript. In ReTroGrrl's
little example Clicking on the 'Menu' graphic causes a Javascript
function to make Firstlayer invisible and Secondlayer visible. Clicking
the text 'here' calls another function to reverse the process - Firstlayer
says howdee doody again and Secondlayer slinks away. This is 'dynamically'
changing what you see on the page - you make it happen! Some more
Javascript has been used to cause the buttons to rollover and highlight.
Remember that all of this happening on one page. A marvel of modern
science to be sure. It's now time for tea - Til
next time when ReTroGrrl shows you how to move a layer around a bit.
Sounds like fun don't it?
next.pod
