LEARNING FRAMES

Welcome to
Lesson 15(a)

Frame Basics.

Welcome back! I hope you had fun playing with your pages last week and made some cool changes to their look. This week will be an introduction on making a page divided into sections by frames. Looks very techie and can produce quite a sleek-looking document.

Say what???
You have a page that you want to divide into different sections of information. You could of course do this with tables easily. With frames however, the information in each section is a separate html document in it's own right which can interact with the other documents, in different frames, on the same page. You know, click on a link in a frame on the left side of the page and a whole new page appears in the right without the entire screen changing.
The pages using frames that I like the best are actually the simplest to make. A narrow frame containing links on the left side of the page with the larger frame on the right side functioning as the top page. So, without further ado, let's get to it!
Let's start doing!

Make a new folder and call it framestuff.

Open notepad.

Copy the code below.

<HTML>
<HEAD>
<TITLE>Frame attempt</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
Add the frame title,
1st frame.

<HTML>
<HEAD>
<TITLE>Frame attempt</TITLE>
</HEAD>
<BODY>
1st frame
</BODY>
</HTML>

Save this page in your framestuff folder. Call it frame1.html

Now, open notepad again and copy this to make a 2nd page.
<HTML>
<HEAD>
<TITLE>Frame attempt</TITLE>
</HEAD>
<BODY>
2nd frame
</BODY>
</HTML>

Save this page in your framestuff folder. Call it frame2.html

Now, you should have a folder called framestuff with 2 html documents saved in it.
frame1.html and frame2.html
Great you say! Now what?
Well, these two documents won't work on their own
so we need to make a 3rd html document. This will be the main page.

Copy the code below and save it in your framestuff folder.

Call it index.html.

<HTML>
<HEAD>
<TITLE>Frame attempts main page</TITLE>
</HEAD>

<frameset>
</frameset>

</HTML>

NOTE : This document doesn't have <BODY> </BODY> tags.
They have been replaced by <FRAMESET> </FRAMESET> tags.

Now, you should have a folder called framestuff with 3 html documents saved in it.
frame1.html, frame2.html and index.html

Put frame1.html to the left side and frame2.html to the right in your main page called, index.html

<HTML>
<HEAD>
<TITLE>Frame attempts main page</TITLE>
</HEAD>

<frameset>
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</frameset>

</HTML>

Add COLS="220, 380" in the <frameset> tag.

<HTML>
<HEAD>
<TITLE>
Frame attempts main page
</TITLE>
</HEAD>

<frameset COLS="220, 380">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</frameset>

</HTML>

In this step we are defining how wide the left and right sides of the main page will be.
Remember the main page is called, index.html.
The left side, frame1.html, will be 220 pixels wide.
The right side, frame2.html, will be 380 pixels wide.

Check out your framed page!

Flexible frame size.

Great. Now, be safe and change the number 380 in the <frameset> tag to an asterix (*) for a 'free' column size.
The line should now read : <frameset COLS="220, *">
Now, no matter what size screen people are using to look at your pages, frame1.html will be 220 pixels wide and frame2.html will be flexible and fill the rest of the screen space.

This is extremely useful because your page will expand or shrink to fill the screens of people's monitors. If the right side of the page, frame2html, is in 'flexible' mode, then people who have their computers set at a different screen size to yours will still see a good-looking page with no stuff cut off.

Check out the main page again.

Don't want columns?

Let's play around a bit and make frame1.html and frame.html rows instead of columns.
Just replace COLS with ROWS in the <frameset> tag.

<frameset ROWS="220, *">

frame1.html will be 220 pixels high and frame2.html will fill the rest of the page.

Your page should now look like this!