|
Home
> Articles
> Web Building>
Website Construction for Absolute Beginners
Website
Construction for Absolute Beginners
BY Ronnie
Tucker
Part
3 of 6
READ
PART
ONE AND PART
TWO AND
PART
FOUR
AND
PART
FIVE AND
PART
SIX
Hi
there, and welcome to part three of a six part guide that will teach
all you beginners how to construct a website using Macromedia
Dreamweaver.
We
started part 2 with frames so lets move onto... more frames...
More
frames?!!
Yep... thats right. More frames. (Is there an echo in here??)
In part 2 we used a left and right frame. This time we'll use three
frames. A main frame, a top frame and a bottom frame. But: the bottom
frame will be split into left and right frames.
Why? Well its good for business sites. The top frame can contain
the company logo the left the navigation and the right being the
display. Infact... we'll go with that layout idea for part 3.
Lets
get to it...
Firstly
(if need be) look over part one and set up a New Site in
the Site menu and call the site Big Business.
And again, put some images into your (chosen) Big Business directory
for use with this exercise.
What
we'll do is set up the frames and make a quick logo in Photoshop...
So...
from the Window menu click the Frames option.
You'll see your Frames window:
Now...
under the Insert menu click Frames then choose Top.
This will add a frame to the top of the screen.
So...
now we have a topFrame and a mainFrame.
to
split the mainFrame left click it (to select it) and from
the Insert menu choose Frames and Left.
Voila!
I've actually showed you the long way of doing that. The short cut
is to choose Top Left from the Insert / Frames
menu.
But its always good to know how these things work...
Right,
lets keep the white background for the top frame. For our logo to
go into. Lets load up Photoshop and get a logo in there.
Hmm...
hang on... how are we meant to know what size to make the logo?
Guess work sucks!
Ahh!
Here's a little trick I use:
Goto Dreamweaver right? Now hold down the Right Alt key
and press Print Screen. This copies a screenshot of
your Dreamweaver window into the Windows clipboard.
Switch
to Photoshop and goto the File menu and click New.
Click OK, keep the size it says... Now goto the Edit
menu and choose Paste.
Cool!
(TIP:
double click the magnifying glass icon 
in Photoshop to see the image at full size (a zoom of 100%))
This
is how i took the screenshots for this guide.
Now
that you have your Dreamweaver window in Photoshop you can decide
how big we want the logo to be.
In Photoshop: choose the select icon 
and start at the top left of where you want the logo to go
ok? Now left click, hold down the left button and drag to the
bottom left of where the logo will fit in... Here's my Dreamweaver
screenshot in Photoshop. See the dotted rectangual shape on the
Dreamweaver screenshot? Well thats how big i'm going to make my
logo.
Agh! Programs within programs within programs!... my head hurts!!
Now...
one way of getting the size of that selection box is to look at
the Photoshop Navigation tab but in my view the easiest way
is just to goto the Edit menu and click Copy and,
like our screenshot, click File then New and it'll
open up a window for us at the same size as the bit we just copied!
Nice.
You'll
notice that by default Photoshop even gives us a white background
to work on!
So
we need a logo. Click the Text icon in Photoshop: 
Now
left click within our new logo window in Photoshop. This is Photoshop
now waiting for us to type in our text. Don't worry, Photoshop is
quite versatile now. Even once we've typed in the text we can still
go back and alter its colour, shape etc later on. So... type in:
Big
Business
(if,
like me, you seemed to have no text appear. Look at the top of Photoshop
and you'll see that your probably typing in white on the white background!
Click the white box at the top and change the colour to something
else)
Hmm...
i think the text might be a bit small...
I
think we need to resize the text, maybe even choose a different
font?
Click
the  to
the right of the big letter T at the top of the Photoshop
screen. This is the Text size. First: select your font (same
as you would in Dreamweaver) and then choose a font size from the
list...
Size
is ok but the font needs to be something nicer...
Select
the text again and click the
to the right of the T with the down arrow and right arrow.
This lets you choose a type of font for your text.
I chose this kinda cartoon-y font:
In
retrospect. Our logo size is far too wide huh?
If we save off that file for use it'd be pointless. All that white
space in the logo against the white space of the background??
Crazy.
But its no problem, we'll just resize slightly:
Click
the  icon.
This is 'move'. Your text is on a Layer in Photoshop. Think
of it like your text printed on a clear layer of plastic laid ontop
of the white background. Whatever changes you make to the font layer
now, WON'T affect your white background.
In this case were going to move the font over to the very
left side of our logo window.
So... with the move icon (
) selected left click and drag your text to the left:
Now we'll lob all that white space off...
Goto
the Image menu and click Canvas Size.
Ooohh! What's this do??
Width
is the width of your image at the moment.
Height is the image height
Anchor (with all the arrows) is where to lob from.
Our logo is at the far left so click the arrow button that is pointing
from the left to the middle  .
Now enter a width. What'll happen is Photoshop will start at the
far left, count out to your width size then lob off the rest of
the image.
A bit of guess work just click Edit then Undo from
the menu if it goes wrong...
Don't be afraid to lob a bit off then lob another bit off...
My
banner started out as 800 wide its now only 350 wide!
So
lets save it off. You've done this before in Photoshop so goto File
then Save As... from the menu...
BUT:
since this was made from nothing in Photoshop, Photoshop wants to
save it off as its own PSD format. Thats ok. Save it off
as Banner and click OK.
But Dreamweaver (and the web) doesn't like PSD files so click Save
As again and this time from the Format menu in the Save
window click the
and choose JPEG.
Click OK and dont worry about the compression settings...
we'll come to that in a later part of this guide.
So...
you have your Banner file as PSD and JPEG.
The reason i said save it off even though its useless to the web
is so that you can come back and alter it later if you want.
If you save it only as a JPEG file then you can't alter the font
layer. Saving as JPEG flattens the image into one single layer and
you lose all the versatility that comes with the Photoshop layers.
The moral of the story is: always save off your Photoshop
work as a PSD file so that its easier to edit later!
Ok...
back to Dreamweaver:
Left click in the top frame and insert your Banner JPEG.
Not bad...
If
you prefer you can left click the banner image and then click the
 icon to
have it in the middle of the frame. But keep it to the left for
now...
The
LeftFrame and the mainFrame are looking a bit bare. Give them a
bit of colour. Hint: Left click to select the frame then Right
click and choose Page Properties.
Save
your Dreamweaver pages off while you remember.
Click each frame and save off each page and then save off your FrameSet.
(call the pages Left, Top and Main respectively
with the FrameSet being Frames.)
Ok,
now that the pages are saved off: load up your Frames.htm page into
your browser and have a look...
Right,
so now you have three frames and a nice banner.
How
about some links...
Well...
rather than use text links this time. Lets use Rollovers.
A Rollover is when you display one image but display a second image
when the mouse pointer rolls over the first.
Lets
jump back to Photoshop and create a rollover.
Go
to File then New,
Make the width = 100
and the height = 40.
This will be our button.
First
we need to make the 'down' state. This is when the user doesnt have
the pointer over the button.
So...
choose a bright grey colour in Photoshop and fill in your button...
The grey box above is how you choose to change the colour in Photoshop.
Left click it and choose a nice bright grey like the one above for
your button colour.
To fill in. Click the 
button then left click on your button to fill it in...
Now
click the Text button
and add some text to your button:
I
used LINK1 on my button.
A
nice effect is when the title is faded out but springs to life when
the pointer moves over it. Lets do that...
You
see that bit in Photoshop that says Opacity?
(you may have to click Window then Layers on
the Photoshop menu to see the Layers window...)
Well
make sure the LINK 1 layer is hilighted in blue and click
the 100% text and change it to say 20%. Immediately your
text should fade. Yeah?
Ok...
Save As... and same it button_off
and save it as a JPEG
Now...
change the 20% Opacity back to 100% and Save As...,
call it button_on and save
it also as a JPEG.
We
now have the on and off states for our rollover button.
Lets head back to Dreamweaver and put it in our left frame...
Left
click in your left frame and DON'T click the 
icon!
Yes... DON'T click it! Let me introduce you to the Insert
Rollover button!
*round of applause*
He
lives just to the right of the Insert Image icon.
Click
the Insert Rollover button...
Image Name: lets just call it Link1
[NOTE: be careful what you call your buttons.
Spaces are not allowed]
Original Image: this is the OFF state so click Browse and
give it your button_off file.
Rollover Image: this is the ON state, so give it your button_on
file.
Preload: just keep this ticked for now.
When clicked...: we dont have a link for it yet but we can
specify it later on...
With
the two images and the name in place click OK.
You
can stop moving the pointer over the button... it wont work until
you save off the LeftFrame and test it in your
browser!
Click
it all you like. It aint going nowhere!
For
speed, click the LINK1 button and using the Properties
window, click the 
icon and assign one of your JPEG images to it.
Dont forget to give it the Target of mainFrame.
Now instead of loading up an html page into mainFrame it just shows
an image on a white background.
Not exciting but still a link none the less...
I
found this image on Google:
Right
click on the image above and choose Save Picture As...
and save it to your Big Business directory that you made.
Your going to need this image for the last
section of part 3.
What
were going to do is give the image 'hotspots'.
Hotspots give the image clickable regions.
Here...
let me show you...
In
Dreamweaver go to File then New and insert the above
image into your new page:
There's the picture in my new page. See the Map part
of the Properties window? The bit
i've outlined in red? Well thats the bit were going to
use now... Click your image to see the above options in your
Properties window...
Left
is the pointer (chosen in the image above) to its right is the rectangular
hotspot button. To its right is the circular hotspot
button and lastly is the polygon hotspot button. Rectangular
and Circular only do hotspots of that shape. They are easy to use.
We'll use the polygon tool here.
The
idea is to outline the girl on the right so that she'll link us
back to the Main.htm page.
So
click the polygon button, Now... we
dont want an EXACT outline here ok? Just a very brief
outline. So... with polygon selected click at the top of her head
then work round her outline:
Above
is my outline of her. Probably still used too many points but this
is only an example...
With
her outline still selected:
(if it becomes DEselected just use the pointer button near Map to
select it again) Click the
to the right of Link: and give the file request window your
Main.htm page.
Save
this page as kid1
Don't
forget to go to your LINK1 button and link it to the kid1.htm page.
(and don't forget to target Link1 to the mainFrame!)
Now...
when you click LINK1 button it'll display the three children
above (kid1.htm). Click the girl on the right and it'll take you
back to the Main.htm page.
Excellent!
This
means you can have quite elaborate images full of links. But don't
get carried away with it. All these good things come with loading
over heads that can discourage users. We'll cover that in detail
later but for now (if you've managed to come this far) you have
done well young Jedi.
Part
3 has come to an end but Part4 will cover:.
Layers.
These layers can be precisely positioned on your page and have...
Behaviours! These are small scripts attached to buttons or
text that give your page more interaction.
In behaviours we'll cover: how to show or hide a layer and
also changing the text inside a layer.
And also how to get some nice text hints in the browser status
bar. Not essential, but a nice touch...
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...
|
