All Freelance Work : Website Construction for Absolute Beginners

Hi there, and welcome to part two of a six part guide that will teach all you beginners how to construct a website using Macromedia Dreamweaver.

Now that you have a basic understanding of Dreamweaver we'll start part two with frames.

What are frames?
Frames are used to split the screen into two or more panes. Each pane has a seperate page.

Frames are extremely useful and greatly enhance the navigation of a site. Imagine you have a site with a squillion pages and each page has your navigation links on them. Now imagine that you want to add a navigation link! You'd have to alter every one of those squillion pages!

Most unpleasant!

(although Dreamweaver has advanced options to make this easier but we wont go there yet)

But with frames you can have a left pane with your navigation links and the right pane having the result of the navigation link.
Now... since the navigation and result panes are seperate pages the navigation one need never change, it'd follow you everywhere on the site. But more importantly: if you want to add a navigation link. You just add the link to your navigation page and... voila! Done!

Firstly look over part one and set up a New Site in the Site menu and call the site Family Album 2. And again, put some images into your (chosen) Family Album 2 directory for use with this exercise.,

Ok, from the Window menu click the Frames option. You'll see a little window that looks like this:

Now... under the Insert menu click Frames then choose Left. This will add a frame to the left side of the screen.

It looks just like your layout so far. It has a left frame, a right frame but most important to consider is that it also has a main frames page (denoted by the black border on your frames window). We are now dealing with THREE html pages. The first tells the browser to use a left frame and a right frame. The second page to load into the left frame and: A third page to load into the right frame.

The left frame is a bit too narrow so we need to drag its right side out to the right more. This is done by putting the pointer over the vertical dotted bar (where the pointer will change to a '<=>' shape), holding down the left mouse button and moving the vertical bar a bit more to the right:

Click, hold and drag this vertical bar to the right...

Now... to prove that its three seperate pages. Lets make the background colours of the two pages different.

Left click in the left frame (just to select it), then right click in the left frame and choose Page Properties.

Title	Whatever you type in here becomes the page title shown at the top of your browser. (ie: just beside where it says 'Internet Explorer' or ' Netscape'.
Background Image	The image you put in here will be tiled over the entire page and used as a background for your page.
Background	This sets the colour of your page
Text	This sets the colour of your basic text
Links	This allows you to change the link colour. By default it is blue but you can make it anything you wish
Left Margin	Don't worry about this for now...
Top Margin	Don't worry about this either for now...
Visited Links	Links that have already been clicked will become the colour that you put in here... Handy for letting people know that they've already clicked this option...
Active Links	Again you specify a colour for this. The colour is shown when the person clicks and holds down the left mouse button. When the link is clicked as normal the active link colour is only seen very briefly...
Margin Width	Don't worry about this for now...
Margin Height	Don't worry about this either for now...
	Don't worry about the other options for now...

So... goto where it says Background and click the

icon.
Now choose a colour for your page and click OK.

Now left click on the right frame (again, to select it), then right click... choose Page Properties, and again choose a colour and click OK.

Left click in the left frame.
Go to the menu and click File then Save As...
And save the left frame as LeftFrame.

Go to the menu and click File,
BUT: choose Save Frameset As...
This saves the main frames page. Call it frames.
This is the page that will tell your browser to split the screen and load up the necessary pages. In our case it'll load LeftFrame to the left and RightFrame to the right.

Notice how it says 'Untitled Document' at the top left of your browser? Not very nice is it?

With your outer border selected in the Frames window goto the menu and choose Modify,
then Page Properties.
In the Title area type in This is a test.

Now goto the menu, click File and choose Save Frameset
(this saves the current FrameSet over the old one)

Goto your browser and either reload the page or click the refresh button.
Look at the top left.
It now says This is a test! Lovely!

Lets go on the LeftFrame being our navigation pane huh? Left click in the left frame and type:

So... up to the File menu and click New
In that new window insert an image
(

icon) and save the page as Page1

Up to the File menu again, open up another New page,
insert a different image onto this page and save it as Page2.

Select the Page1 text...
(remember, left click, hold and drag)
with the text outlined in black head over to the Properties window:

Ok. Left click in your Left frame and from the File menu select Save. (this saves the modified LeftFrame over the old LeftFrame be careful using this option! Think before clicking Save! When the old ones over written its gone. For good!)

Ok, load up your frames.htm page in your browser and give that new link a quick test.

Uhh... hang on... The Page1 is supposed to be on the right side! Not the left!

Ah... *cough* what happens is this:
You click the link and it loads the new page over the old page.
Thats NOT what we want.

Ok, lets sort that out:
First, have a look at your Frames window:

See how the left frame is called leftFrame and the right is called mainFrame? Well thats their Target names. Just think of them as names. (you can change these names by clicking on the frame in the Frame window and editing the Frame Name text in the Properties window)

Anyway... Select your Page1 text again,
look down at the Properties window. Click the

to the right of Target: What were going to do is specify a Target for Page1. This tells Page1 where to load up the page its linking to.
From the Target menu you need to choose mainFrame from the list. (since thats where we want the Page1.htm file to load into).

Ok... sorted.
Left click in the left frame again and goto File then Save.

A little bit of 'homework' for you :
You do the Page2 link yourself.
Same idea. We want Page2 text to load up Page2.htm in the mainFrame. Go on... give it a try.

But when Page1.htm is displayed how can you get back to the RightFrame page? Ok, you can use the Back button on your browser but you should give the user the benefit of the doubt and give them a back link on each page.

Now... link the Back text to the RightFrame.htm
Make sure to specify the Target! (even though really you don't need to in this case, but its a good habit to get into)

Hmm... ok, you've got a point. Since the Page2 is loaded up outwith the FrameSet it doesnt HAVE any Targets available.

Ok... left click on the right frame on your FrameSet.
Goto the File menu and click Open in Frame...
Now choose your Page2.htm file and click OK.

So now with Frames and Targets you can make a really nice navigation system to your website. No matter where the user is within the site the navigation page is always at hand. Of course... you needn't always have it on the left. You can split the screen horizontally, or vertically, as many times as you wish.
But: beware. The more frames you use the more pages you need to use and thus the longer the loading time for your site and long loading times are baaad!
M'kay?

Wouldn't it be nice to see a preview of the image on Page1 and Page2 before seeing the full thing? Well seeing a preview before viewing the full things is called a thumbnail. (since in theory the preview should be as big as your thumbnail).

Load up Photoshop for me would you? Thanks... Just like Dreamweaver it has a menu at the top. Click File then Open... and choose the image thats you have on your Page1.

What were going to do is resize this image down to quite a small size and place it in LeftFrame just below Page1.

So... with your image loaded up in Photoshop:
goto the menu and click Image, and then Image Size:

Pixel Dimensions: shows you the width and height of your image in this case in pixels. (for now, think of pixels as being coloured dots on your monitor) So... my image is 158 pixels by 225 pixels. Since the Constrain Proportions is ticked
(just down at the bottom of the window) the image will keep is width and height ratio. In other words, it wont go wider than it is high and look squashed. (or vice versa)...

So i'm going to use that smaller image as my thumbnail.
In the Photoshop File menu choose Save As... and enter a filename for it. But whats this:

Photoshop just wants to know how compressed you want the image to be. We'll come to this in a later part of this guide, for now just click OK to save it. Were not too bothered with compression and loading times yet. Thats for later.

Oki doki... back to Dreamweaver.
Load up your frames.htm.
Now insert (

) the thumbnail image into LeftFrame just BELOW the Page1 text:

Here's my thumbnail in place...

Homework time!!
I'm sure you know what its going to be. Yep... make a thumbnail for the image on your Page2 and insert it below the Page2 text. Infact, if your feeling adventurous why not try linking the images to their respective pages? Its just the same principle as linking the text but you select the image instead of the text. Go on... you know you want to!...

In Part Three were going to delve into the possibility of THREE frames! (ie: four pages) Also, Rollovers... no... nothing to do with your dog or its tacky tricks. All to do with swapping to a second image as the mouse 'rolls over' the first image. I'll even show you how to make your very own roll over images using Photoshop!
Aaaaand. As if that wasnt enough, we'll load up an image and make only sections of that image clickable!

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.

I work freelance and am always available for work.
Feel free to email me regarding work or articles...


	SignUp / Login		Find a Job! Take a Course Health Insurance Articles ManageJobs About Us Contact Us