Transcript Slide 1
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 >
ROWS="75%, *"
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 noframes.
</FRAMESET>
Put the four files into the frames.
<NOFRAMES> ... </NOFRAMES>
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">
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%">
Start the "table of documents".
End the frameset.
There are several other aspects of frames to note from this example:
ATTRIBUTES OF FRAMESET AND FRAME
TAGS
•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.
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
<Frameset cols=“30%,70%”>
<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,