HTML Frames
Frames - Give you the ability to show more than one html file on
a single page. They allow you to divide up the display area of your
browser into cells. Each cell has a name and an hmtl file to display.
Basics
- to create a frame based website, you need to create one html file
that specifies the structure of the frames(frameset) and a separate html
file for each cell.
- The frameset HTML file does not have a "body" tag, instead it has
a frameset tag.
- This tag specifies the amount of space to allocate for each row
and for each column
- <FRAMESET ROWS = "row height list" COLS = "column width list">
- Row height list and column width lists have one entry for each cell,
each entry can be an absolute pixel value, percentage of screen space, or
"*" which says use up what’s left over. Example:
- <FRAMESET ROWS = "20%,20%,*" COLS = "30%,*">
- this creates a frameset with 3 rows and 2 columns
- Between the <FRAMESET ...> and </FRAMESET> tags
may come other FRAMESETs or <FRAME> tags specifiying the contents
of each frame.
- <FRAME SRC = "url" NAME = "window name" MARGINWIDTH = N MARGINHEIGHT=N
NORESIZE SCROLLING="yes/no/auto" >
- Cells are filled using the frames going across the rows.
- Margin height/width are in pixels
- NORESIZE is optional and specifies whether or not user should be
allowed to make a frame bigger.
- Window name is important and is used to target the output of forms
and links.
- Scrolling can be enabled (Yes), disabled (No), or used when needed
(AUTO
Example 1 Frameset with two rows and two
columns
<HTML>
<HEADER>
</HEADER>
<FRAMESET ROWS = "20%,*" COLS = "30%,*">
<FRAME SRC = "http://www.google.com" SCROLLING=YES>
<FRAME SRC = "http://www.yahoo.com" SCROLLING = NO>
<FRAME SRC = "http://www.espn.com" SCROLLING = YES>
<FRAME SRC = "http://www.fgcu.edu" SCROLLING = AUTO>
</FRAMESET>
</HTML>
Example2 Frameset within a Frameset, Google
is across the top, the other four are in a 2x2 grid below it.
<HTML>
<HEADER>
</HEADER>
<FRAMESET ROWS = "20%,*" COLS = "*">
<FRAME SRC = "http://www.google.com" NAME = GOOGLE SCROLLING=YES>
<FRAMESET ROWS = "50%,*" COLS = "50%,*">
<FRAME SRC = "http://www.espn.com" NAME = ESPN SCROLLING = YES>
<FRAME SRC = "http://www.yahoo.com" NAME = YAHOO SCROLLING = AUTO>
<FRAME SRC = "http://www.msnbc.com" NAME = MSNBC SCROLLING = YES>
<FRAME SRC = "http://www.fgcu.edu" NAME = FOX SCROLLING = YES>
</FRAMESET>
</FRAMESET>
</HTML>