Computer Programmin 10

Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Using Frames on Web Pages

	When you have finished this project, you will be able to:
	describe how frames work
	describe the proper method of creating a Web page that uses frames
	use the target tag to control the position of a frame
	place a page within a frame
	place a page in full view
	use nested frames on a Web page
	describe the following terms: frames target column row scrolling resize

Before you start using frames and creating web pages that use frames, it is necessary to understand a little about them.
Up to now, you have been creating web pages that use a single window, or frame. However, it is possible to divide a browser window into more than one "window" or frame, as they are called. In fact, this page that you are now looking at contains two frames: the one on the left of your monitor use for navigation, and this frame, which contains the instructions.
As always, you begin a frames page using the standard HTML tags. Before going any further, create a new folder on your personal drive called Frames. Save everything to do with this project in that folder.
You can use frames to divide the browser window into rows or columns – or both, if you wish. The diagram below illustrates this concept:
For this project, you will be working on a frames page that uses two columns. The frame on the left will be defined as Frame Aand the frame on the right will be defined as Frame B.
Each frame width is defined as a per centage of the total viewing width of the monitor being viewed on. By using a per centage of the width, rather than the specific number of pixels, the widths of the frames will automatically adjust to the viewer's monitor. In other words, a viewer with a 17 inch monitor will see larger frames than a viewer with a 15 inch monitor.
The diagram below illustrates what your sample frames page will look like when you have finished programming the HTML tags.
Start a new HTML file using NotePad or WordPad (Text Editor), just as you have previously learned. Here are the first tags you should use:

<HTML>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META NAME="author" CONTENT="insert your name here">
<META NAME="description" CONTENT="insert a summary of the content of your home page here">
<META NAME="keywords" CONTENT="insert keywords for your web page here, separated by commas">
<TITLE>Frames page #1</TITLE>

NOTE: Be sure to change the appropriate information in the Meta Tags.
The HTML tag that defines the columns or rows is FRAMESET, and the width of the columns needs to be specified:

<FRAMESET COLS="15%,85%">

Notice the requirement for quotation marks around the FRAMESET variables.
The FRAMESET tells the browser to expect information about the frames and what file it should load into each frame. This is done with the Frame Source tag: FRAME SRC.

<FRAME SRC="sidebar.htm" SCROLLING="YES" NORESIZE NAME=FRA>

In this example, the name of the HTML file is called SIDEBAR, but you could use any legal file name. The other variables required are: Scrolling: Yes means a scroll bar will be displayed; No means there will be no scroll bar. NORESIZE means the user may not change the size of the frames; leaving this variable out allows the user to resize the frame. NAME assigns the name of this frame, in this case FRA (for frame A).
When typing in the frame source line, you should indent it. You have finished defining one of the two frames.

NOTE: The FRAME SRC tags should be tabbed in.
The second frame is defined in a similar manner:

<FRAME SRC="main.htm" SCROLLING="YES" NORESIZE NAME=FRB>
The final step in defining frames is to end the FRAMESET:

</FRAMESET>
Your NotePad file should look like the illustration below:

NOTE: There should be nothing else in your frames Index file!
In the illustration above, note that the frame source was tabbed in order to offset it from the frame set. This not only make a tidier page, but makes it easy to see how the frames were nested. If you used a frameset within a frameset (as you will for the frames project), then the second set of frames would be additionally tabbed as shown in the example below:
The next step is to create two more HTML files: one called sidebar.htm and another called main.htm. Note that the complete frame set for this project requires three files: index, sidebar, and main.
For this project, type the following as the body of the sidebar.htm: This is the sidebar.htm file and it is in Frame A. In the main.htm file type: This is the main.htm file and it is in Frame B.
View your first frames page in Internet Explorer and ask your teacher to look at it.
You now know how to create a very simple frames page.
In frames, it is possible to specify which frame you want a page or link to open in. For example, on the sidebar, you may have a link to the Ross Sheppard Home Page, but you might want it to open in the large, right hand frame. The code for this is:
In some cases, you may want to have the page or link open without frames. The code for this is:
Instead of creating columns for frames, you could also divide the screen horizontally by using the following code:
In addition to using rows or columns, you can use rows and columns in combination with each other to create nested frames. That is you could divide the large frame on the right into two smaller frames divided horizontally.
If you have an interest in learing more about frames, go to the following web site and complete the tutorial:

Sharkey's Netscape Frames Tutorial
http://www.newbie.net/sharky/frames/menu.html
To demonstrate your skill using frames, create a web page on a topic of your choice that demonstrates an understanding of frames as well as all of your previous HTML programming knowledge. This page must have content of substance, not simply links to cartoon pages or famous personalities.The frames page must demonstrate your knowledge of:
- creating frames consisting of at least 2 rows and at least 2 columns
- use of the TARGET=FRB tag
- use of the TARGET="_top" tag
Click here to see the marking guide for this project.
Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded..