|
Lesson 16a.
 |
Framed Pages. |
Simple frames + Simple Design = Great Site!
|
As a review from last lesson, let's make a framed page from scratch.
To keep things simple, we'll make a page with only 3 frames.
A frame for the title, a frame for a list of links on the left of the page and a frame on the right to load pages into.
Here's the page you'll have when we're finished.
|
Make the main/ master page.
|
Before we even think about the main page, I want you to make a new folder and call it framey.
Everything you do from now on should be saved in good 'ol framey.
Next, let's thing about the main page.
Instructions for the layout and size of your frames get put in this page.
Follow the the steps below to make your main page.
|
Copy the code!
|
<html>
<head>
<title>frames-main page</title>
</head>
<frameset> </frameset>
</html>
|
Copy the code on the left to form the basic skeleten of your main page.
Save it as index.html in your framey folder.
Notice that there are no
<body> </body> tags?
They have been replaced by <frameset> </frameset> tags.
|
********************
Make a horizontal divider!
|
<html>
<head>
<title>Frames-main page</title>
</head>
<frameset
rows="100,*"
>
</frameset>
</html>
|
Put rows="100,*"
in the <frameset> tag.
This divides the screen horizontally.
The first frame row is set at 100 pixels high.
This is where title.html will go once we have made it.
The asterix means the second frame row will be a free size.
|
********************
Specify what goes in in the top frame!
|
<html>
<head>
<title>Frames-main page</title>
</head>
<frameset
rows="100,*"
>
<frame src="title.html">
</frameset>
</html>
|
Put <frame src="title.html">
between the 2 <frameset> </frameset> tags.
This code tells the computer to put the page, title.html, in our top, horizontal frame.
We haven't made title.html yet, but that will be the page
in which we make our heading or page title.
|
********************
Add a second pair of <frameset> </frameset> tags!
|
<html>
<head>
<title>Frames-main page</title>
</head>
<frameset
rows="100,*"
>
<frame src="title.html">
<frameset> </frameset>
</frameset>
</html>
|
Add a second pair of <frameset> </frameset> tags
between the first pair.
This means we are preparing to divide the screen under the top frame row.
Remember, we are planning on having a frame on the left side of the page for links
and a second frame on the right to load pages into.
|
********************
Set the width of your frame columns and their content!
|
<html>
<head>
<title>Frames-main page</title>
</head>
<frameset
rows="100,*"
>
<frame src="title.html">
<frameset
cols="150,*"
>
<frame src="links.html">
<frame src="top.html">
</frameset>
</frameset>
</html>
|
Add cols="150,*" to the frameset tag to set the width of your 2 columns.
150 is the width of the left frame and the right frame is left flexible with an unspecified width.
Also, tell the computer what you want to put in these 2 frame columns.
If you put <frame src="links.html"> and <frame src="top.html">
between the 2 <frameset> </frameset> tags,
you are telling the computer that you want the left window to contain links.html and the right window to contain top.html
Again, we haven't made links.html or top.html yet, but we will!
|
********************
Give your right hand frame a name!
|
<html>
<head>
<title>Frames-main page</title>
</head>
<frameset
rows="100,*"
>
<frame src="title.html">
<frameset
cols="150,*"
>
<frame src="links.html">
<frame src="top.html" name="top-page">
</frameset>
</frameset>
</html>
|
Add name="top-page" in the right hand frame tag.
We need to give the right-hand frame a name because this is where where want
the pages from the links we 'click on' in the left hand frame to load into.
When we make our links we'll be able to tell them some direction.
When someone 'clicks on' you, please appear in the frame that is named, "top-page".
|
|
Don't forget this page has to be saved as, index.html in your
folder called, framey.
|
HERE IS THE MAIN PAGE SO FAR!
|
I know, I know!!!
Inside each of these frames on your main page, you'll probably see some kind of error message.
This is because although we've specified how we want the page divided up, we have'nt actually made the documents
that we told the computer would be in each of the frames.
title.html, links.html and top.html
Let's make them now.
|
To the top
Back to lesson 15.
Go to the next lesson.
Read Kimberly's diary entry for this lesson.
 Back to index page.
Thank you for visiting this page
Click to peruse our SpinNet Homepage.
 Page created by Kimberly Rigby. / For any comments or questions, click here!
|
