frames. frames allow you to divide the page into several rectangular areas and to display a separate...

FRAMES

Frames allow you to divide the page into several rectangular

areas and to display a separate document in each rectangle. Each of those rectangles is

called a "frame".

Name: Password: What kind of shirt are you wearing? Shade: Dark Light Size: Small Medium Large Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo College Degree? Musical Taste

Think of frames as creating a "table of documents" on the page. Like a table, a group of frames has rows and columns. Each cell of the table contains a document which is stored in a separate file.

<FRAMESET ...> defines the beginning and end of the table, and how many rows and columns that table will have. <FRAME ...> defines what will go into each cell ("frame") of the table.

<HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD>

<FRAMESET ROWS="75%,25%" COLS=“60%,40%">

<FRAME SRC="framea.html"> <FRAME SRC="frameb.html"> <FRAME SRC="framec.html"> <FRAME SRC="framed.html">

</FRAMESET> </HTML>

<FRAMESET > Start the "table of documents".

ROWS="75%, *" The table should have two rows. The first row should take up 75% of the height of the page, the

second should take up the rest.

COLS="*, 40%"> The table should also have two columns. The second column should take up 40% of the width of the

page, the first column should take up the rest.

<FRAME SRC="framea.html"><FRAME SRC="frameb.html"><FRAME SRC="framec.html"><FRAME SRC="framed.html">

Put the four files into the frames.

<NOFRAMES> ... </NOFRAMES> Every framed page should have a no-frames alternative. The <NOFRAMES> content should go

inside the outermost <FRAMESET ...> tag, usually just before the last </FRAMESET>. The most efficicent method for no-frames content is to link to a page which is specifically designed for no-frames.

</FRAMESET> End the frameset.

There are several other aspects of frames to note from this example:

•src="address" (Frame)

Specifies the address of the document to be displayed in the frame.

•name="window_name" (frame)

The NAME attribute is used to assign a name to a frame so it can be targeted by links in other documents.

ATTRIBUTES OF FRAMESET AND FRAME TAGS

frameborder="1|0" (frameset) When set to "1" a separator is drawn on every

side next to another frame. When set to "0" the decision to draw separators is left to surrounding frames.

marginwidth="value" (frame)The MARGINWIDTH attribute is used to control

the left and right margins. The value for MARGINWIDTH is in pixels. This insures that frame objects won't touch frame edges

marginheight="value"

It controls the upper and lower margins.

noresize (frame) The NORESIZE attribute doesn't require a

value. It is used to indicate that the frame is not resizable by the user.

The NORESIZE attribute is optional; by default all frames are resizable.

scrolling="yes|no|auto" (frame) The SCROLLING attribute indicates whether

the frame should have scrollbars or not. "yes" results in scrollbars always being visible

on that frame. "no" results in scrollbars never being visible. "auto" instructs the browser to decide whether

scrollbars are needed, and to place them where necessary.

Framespacing =“value” (frameset)

To increase the space between adjacent frames.

NESTED FRAME

Name: Password: What kind of shirt are you wearing? Shade: Dark Light Size: Small Medium Large Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo College Degree? Musical Taste

<HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD>

<FRAMESET ROWS="15%,85%"> <FRAME SRC=“address1" SCROLLING=NO>

<FRAMESET COLS="20%,80%"> <FRAME SRC=“address2"> <FRAME SRC=“address3"></FRAMESET>

</FRAMESET>

The first <FRAMESET ...> tag says "this frameset will have two rows".

The first <FRAME ...> tag puts a document in the first frame.

The second frame is filled in not by a document but by another frameset. The second <FRAMESET ...> is creating a "table within a table", or, to be more correct, a frameset within a frameset.

Links in a frame

Source code for the linked page

<A HREF=“link.HTML" TARGET=c>CONTENTS</A>

<frameset rows=15%,85%>

<frame src="title.HTML" NAME=a>

<frameset COLS=20%,80%>

<frame src=“sidemenu.HTML" name=b>

<frame src="MAIN.HTML" name=c>

</frameset>

</frameset>

Targeting the Whole Window Eventually in a framed site you want to "break out"... link to a page and

have that page take over the entire window. To create this sort of link, we add TARGET="_top" to the <A ...> tag:

this codeproduces this<A HREF="wwtarget.html" TARGET="_top"> the link in this page

In the previous example we used TARGET to refer to a frame we had named MAIN. In this example, however, we refer to a frame we never named: "_top". We can do this because the outermost frame (that is, the entire window) is already named "_top". "_top" is a reserved name which is automatically given to the entire window. So when we say TARGET="_top", we are saying "put the new web page in the entire window". Note that "_top" needs to be in all lower-case, it should have quotes around it, and don't forget the underscore ("_").

TARGET=NAME OF THE DOCUMENT,

frames. frames allow you to divide the page into several rectangular areas and to display a separate...

Documents