Frames

<frameset></frameset>
FRAMES add character to any web site.

The first rule to follow when using FRAMES is to replace the BODY tag with the FRAMESET tag.

FRAMES can be set up in either a row or column configuration. The first FRAMESET tag determines which set up is chosen.

Codes 1 and 2 (below) are diagrams of a row configuration.

The first and defining FRAMESET code:

<frameset rows="40% ,10%, 50%"></frameset> The three numbers represent 3 individual frames (rows) within the FRAMESET. They are percentages of available (vertical) space and should add up to 100. Each individual frame within the FRAMESET must now be defined by either a FRAME or FRAMESET tag. If the FRAME is a single column it is defined with a FRAME tag. If it contains multiple columns it is defined by a second FRAMESET tag.

For code 2:

<frameset rows="30%,30%,40%"> <!--row 1--> <frame src=""> <!--row 2--> <frameset cols="50%,50%"> <frame src=""> <frame src=""> </frameset> <!--row 3--> <frame src=""> </frameset> Notice that the second row in code 2 contains 2 columns. Each column in that nested FRAMESET must be defined with a FRAME tag.

The SRC or source attribute is used to name the html page that will be located within the appropriate FRAME.

Example:
src="index.html"

Codes 3 and 4 (below) are diagrams of a column configuration.

The first and defining FRAMESET code:

<frameset cols="20% ,80%"></frameset> The two numbers are percentages of available (horizontal) space and should add up to 100.

Each individual FRAME within the FRAMESET must now be defined by either a FRAME or FRAMESET tag. If the FRAME is a single row it is defined with a FRAME tag. If it contains multiple rows it is defined by a second FRAMESET tag.

For code 4:

<frameset cols="20%,80%"> <!--column 1--> <frame src=""> <!--column 2--> <frameset rows="30%,70%"> <frame src=""> <frame src=""> </frameset> </frameset> Notice that the second column in code 4 contains 2 rows. Each row in that nested FRAMESET must be defined with a FRAME tag.

The SRC or source attribute is used to name the html page that will be located within the appropriate FRAME.

Target and Scrolling

TARGET

When using FRAMES, each individual FRAME within a FRAMESET will contain either an html page or an image.

Some of the FRAMES will be static (information will never change) , others will be dynamic (information will change).

For a FRAME to be dynamic it requires a name. You will then use the target attribute to send different html pages to it.

Below we will label each individual FRAME within the FRAMESET.

Frame A will be a static frame containing hyperlinks to fill Frame C.
Frame B will be static and will contain the heading of our Document.
Frame C will be dynamic and you will use it to display different pages, chosen in Frame A.

To do this we must:
1. Give a name to Frame C.
2. Create a Heading page and assign it to Frame B.
3. Create a links page, Assign it to Frame A and use target to send the pages to Frame C

The code:

<frameset cols="20%,80%"> <!--column 1--> <!--Frame A--> <frame src="links.html"> <!--column 2--> <frameset rows="30%,70%"> <!--Frame B--> <frame src="heading.html"> <!--Frame C--> <frame src="index.html" name="frame_c"> </frameset> </frameset> The code for the hyperlinks of links.html would look something like: <a href="index.html" target="frame_c">Home Page</a> <a href="index.html" target="frame_c">Page 1</a> <a href="index.html" target="frame_c">Page 2</a> SCROLLING

Scroll bars will appear automatically by default if a document is too large for a frame.

The code for the scrolling attribute would be:

<frame src="index.html" name="frame_c" scrolling="no"> <frame src="index.html" name="frame_c" scrolling="yes"> <frame src="index.html" name="frame_c" scrolling="auto">

BACK