|
Home
> Articles
> Web Building>
Website Construction for Absolute Beginners
Website
Construction for Absolute Beginners
BY Ronnie
Tucker
Part
4 of 6
READ
PART
ONE AND PART
TWO AND
PART
THREE AND
PART
FIVE AND
PART
SIX
Hi
there, and welcome to part four of a six part guide that will teach
all you beginners how to construct a website using Macromedia
Dreamweaver.
We
finished part 3 with a three frame layout so lets continue with
that layout in part 4...
So... lets continue where we left off... with this:
Your
mission, should you choose to accept it:
Have two links in the left frame, one of which will show and
hide an info layer that will be to the right of our Big Business
banner, and the second link will change the text within another
layer that will be in our right frame... adventurous eh? Also...
you may have noticed that when you move your pointer over a link
of any kind your browser displayes the link in the status bar. (the
status bar us the bottom part of your browser with the info saying
'loading' or thereabouts) Doesn't look very nice does it? Well we'll
soon sort that out by using a Dreamweaver Behaviour.
Ok,
lets get to it by first: loading up Dreamweaver and Open
the Frames.htm page from Part3 of this guide...
Right
then... get the sleeves rolled up.
Uh
oh... i can feel a new icon creeping up on me...
Draw Layer
This
little baby lets you 'draw' a layer out on a Dreamweaver page. You
draw it out as we've done before: Click and hold and the top left
and drag down and let go at the bottom right. Easy.
So
lets do just that in the top frame:
follow
my blue arrow next to the Big Business banner.
Left click the Draw Layer icon
then left click and hold where the start
of the blue arrow is, drag down to the right and roughly
where the point of the blue arrow is let go of the mouse button...
You'll
notice that your Big Banner image has moved in a bit... dont worry.
That little yellow square to the left of the banner is going to
be invisible so dont worry about it. If you can click this to select
your layer as well as the 'tab' thats at the top of your newly drawn
Layer.
Left
click the 'tab' on the top left of your layer to get the Layer Properties
in your Properties window:
Now
usually options that are together will go side by side right?
Not this time... For some reason they've put them in columns.
You can see (beside the Layer ID) the letters L, W, T and H.
You'd think that L and W would be a pair yeah? Wrong.
L and T are a pair, W and H are the
other pair. L and T are Left and Top. This is how many pixels
across and down the Layer is.
W and H are the Width and Height (again in pixels) of your
layer. Have a little play with the numbers and you'll see what it
mean. L will move the layer left and right. T will move it up and
down. W will make it wider, H will make it less tall. As you can
see from the other property names you can give your layer a background
colour (Bg Color), a background image (Bg Image) and
a name (Layer ID) Lets give it a name... type Info
into the Layer ID box.
The
Vis setting is its default visibility. Does it start of as
visible or hidden? For now we'll keep it at default.
Now...
lets put some text into our Layer. Left click our Info Layer and
type in:
You
have moved your mouse pointer over Link 1. Please click this link
to continue...
Its
boring i know, leave me alone! its all i could think of...
That'll
do for our Info layer. Left click its tab again and set its Vis
setting to hidden.
Left
click away from the Layer and you'll see it vanish. You can click
the little yellow square to get it back if need be.
Time
for a new thing:
Click the 
icon below on your Frames Window:
This
is the Behaviours tab.
Infact,
while were here, click the tab beside it, that your Layers tab:
The Layers tab allows you to set the visible/hidden properties
of your tab as well as its depth. Don't
worry about the depth setting for now...
Ok.
Click the Link1 button and your Behaviours tab
...
You
see that (OnMouseOut) stuff in the Behaviours window?
Your wondering how that got there hm? I'll tell you:
when you made the rollover (in Part3) what you did was use a shortcut.
Dreamweaver did all the hard work by inserting those behaviours
and setting them up properly. Good
ol' Dreamweaver!
Ok.
Your Link1 is selected. Your in the Behaviours tab... Click the
button in the Behaviours tab:
and from the menu choose:
Show-Hide Layers.
The
blue bar is Dreamweaver selecting the only Layer you have. Our Info
Layer. Click the Show button.
You'll
notice that a third line has been added to your Behaviours tab.
OnClick 
Show-Hide Layers
Click
that little
button and change the OnClick to OnMouseOver
So
now OnMouseOver it'll Show the Info Layer.
Yeah? You get what i mean here?
Basically we've clicked the Link1 button,
Added a Show Layer behaviour,
(by default its set at OnClick)
but we change it to OnMouseOver.
I'm
sure you can guess whats next. OnMouseOut we want to hide the
Layer. So:
Click
the Link1 rollover and your Behaviours tab .
Click the
and choose Show-Hide Layer and this time click Hide. And again on
the OnClick line click the
and choose OnMouseOut.
Good!
Ok...
left click in the top frame and click File / Save, same for
the left Frame too... Have a look at the results in your browser.
Load up the Frames.htm in your browser and have a play with
the Link1 button.
Now
is that cool or what?
Now
we know how to show and hide a layer lets alter whats in
a layer.
Left
click your right frame and draw out a shallow rectangle. Just enough
for some short text. Ok, now enter the text into that Layer2 you've
just made:
This
is text 1
Good.
Now rename that Layer2 to TextTest
Now
put the text:
TEXT2
In
the left frame below the Link1 button.
Pick
a nice font and make it kinda small and bold for a change.
Now
select your TEXT2 and goto the Behaviours Tab ,
Click the
and choose Set Text, then Set Text of Layer:
The
top dropdown menu says Layer: This is to let us choose a
layer since we now have two layers in our site.
Make sure the TextTest layer
is selected here... New HTML: is where we enter
the new text. So... type in:
This is now text 2!
And
click OK.
Now then... left click the left frame and save it and same with
the right frame.
Back
your browser and give it a test.
Lovely!
Eh?
It doesn't change back?
Back to what?
Text1?
Course it won't! Text1 is gone when you moved over TEXT2!
Homework!:
Click your Link1 button and add a Set Text of Layer and OnMouseOut
show This is text1.
Oki
doki?
One
last thing before i leave you,
In
your browser: put the pointer over the Link1 rollover.
See
down at the bottom of your browser it says something like:
file:///c:/blah/blah/blah/...
Not
very nice is it? Lets cover up where the link is going to...
Left
click the Link1 button.
In the Behaviours tab ,
click the
button,
Choose Set Text then Set Text of Status Bar,
And enter:
Link
1
And
click OK. Make sure that the Action is set to OnMouseOver.
With
Link1 still selected:
Click the
again, then, again, choose Set Text and Set Text of Status
Bar, This time enter nothing (as in: a blank space) and
click OK, and set the Action to OnMouseOut.
Save
off your LeftFrame.
Give
the Link1 button a try now...
Look
down at the status bar and it should say:
Link 1
Not
exactly ground breaking stuff but it covers up big, long, ugly looking,
urls!
*sigh*
well Part 4 has come to an end and I must leave thee but in Part5
we'll cover:.
Optimisation:
where we compress our images to as best we can to make our pages
load fast.
Download speed: where we fine tune our pages since most of
the world doesn't have ADSL/cable!
Additions: where we'll talk about adding Flash movies, Java
applets, Shockwave and so on...
and
so... once again: I bid thee well...
Until
next time...
Have
fun!
Ronnie.
email me
or
visit my website:
Hi
there, i'm Ronnie Tucker and I live and work in Glasgow, Scotland
(UK).
I am entirely self taught in art and i've been using 3dsMax for
over 7 years now.
(Infact I was using when it was called 3ds4! Years before it was
called 'Max'!)
I've had images published in the UK art magazine Computer Arts
(issue 9), and helped
produce a computer animated short for a large car firm in the United
States.
I use a large variety of software: 3dsMax, Photoshop, Premier, Poser4
and various plugins, but
I still use pencil and paper whenever i can.
My
friend and I are also looking to animate our characters Worm &
Lump for TV.
If you can help us out in any way, please email
me.
Worm & Lump
©2001-2002, Ronnie Tucker & Jamie
Byers.
I
work freelance and am always available for work.
Feel free to email me
regarding work or articles...
|
