350:465 Frames Tutorial, October 22, 2001
(corrected and revised Oct 24 -- see Addenda).

BACKGROUND

Just as TABLES can divide a file into two or more separate areas, so FRAMES can divide the screen into two or more separate files.
The FRAMES areas are either horizontal rectangles (ROWS) or vertical rectangles (COLS). These areas can be defined as pixels, percentages, or by the asterisk wildcard.
A FRAMES set requires three or more files:
- the FRAMESET structure
- the first FRAME content
- the second FRAME content...
PREPARATION

To create today's demonstration, create the following files, each named after its visible color.

Hint 1: Save the first file with CTRL-O in Pico and then change the color words and save it as the secodn file, etc.

Hint 2: For demonstration purposes, skip the full regular file structure and include only the BODY tag and the data content:

Filename BODY tag Data Content
white.html <BODY BGCOLOR=white> This is white
yellow.html <BODY BGCOLOR=yellow> This is yellow
tan.html <BODY BGCOLOR=tan> This is tan
ivory.html <BODY BGCOLOR=ivory> This is ivory
red.html <BODY BGCOLOR=red> This is red
gray.html <BODY BGCOLOR=gray> This is gray

Create in Pico a menu file called menu1.html with links to each of the color files, using the actual color names:
In your browser bring up menu1.html and confirm that each of the six color files displays correctly.
THE DEMO
In Pico create frames1.html, a FRAMESET file of two rows.
Note: frameset files do not have a BODY. The HEAD is usually added (you may skip it here)
Load frames1.html in your browser.
In Pico open frames1.html and change rows to cols with the following values, adding a third FRAME SRC, changing the colors, and saving the result as frames2.html.
When complete, load frames2.html in your browser.
In Pico open frames2.html and make the following changes, saving the result as frames3.html. Now there should be two "cols" values, 25% and 75%; the SRC files should be menu2.html and white.html; and there should be a NAME attribute as shown for each of these files.
The values "left" and "right" are arbitrary; they could also be called "nav" and "display" or "menu" and "data," etc. Once these frames are named they can be targetted, as in the next instruction.
In Pico reload menu1.html and make the following changes, adding a TARGET value of "right" to correspond to the previous NAME value, saving the result as menu2.html.
When ready, load and test frames3.html in your browser.
FUTURES
FRAMESETS can combine rows and cols.
FRAMESETS can call other framesets: the main frames menu (example US and its states) can call submenus (example a state and its cities), etc.
FRAMESETS can bring up a combination of areas -- example, static logo at top and help at bottom with dynamic menu at left and data area at right

Filename	BODY tag	Data Content
white.html	<BODY BGCOLOR=white>	This is white
yellow.html	<BODY BGCOLOR=yellow>	This is yellow
tan.html	<BODY BGCOLOR=tan>	This is tan
ivory.html	<BODY BGCOLOR=ivory>	This is ivory
red.html	<BODY BGCOLOR=red>	This is red
gray.html	<BODY BGCOLOR=gray>	This is gray

ADDENDA 1 -- Borders, margins, spacing (October 24, 2001):

A full set of FRAMESET and FRAME commands is available to control frame borders, margins, and spacing (similar to these attributes in TABLES)

FRAMESET attributes apply to the entire screen while FRAME attributes apply to just one FRAME (and sometimes its adjacent neighbor).

Frameset Attribute Default other values Comment
BORDER 5 0-n see FRAMEBORDER
BORDERCOLOR - any
FRAMEBORDER - any if 0, use with BORDER=0
FRAMESPACING - any like BORDER, I.E. only
MARGINWIDTH 8 0-n sides internal spacing
MARGINHEIGHT 8 0-n top/bottom internal spacing
SCROLLING auto yes, no scrollbars?
NORESIZE - NORESIZE window size
TARGET - NAME value as in FRAMESET
TARGET - "_top" replaces entire window
TARGET - "_blank" adds new window
TARGET - "_self" replaces this FRAME
NOFRAMES - NOFRAMES tag pair, alt. text

ADDENDA 2: IFRAME: inline frame
IFRAMES are useful as inline frames within other pages (like tables) but with their own borders and scrollbars. IFRAMES are "inline" elements which fall within the text flow, unlike TABLEs, which are "block" elements which have separate placement attributes.
Since the IFRAME inserts the contents of a SRC "url," multiple uses can be made of that SRC "url" (just as an image can be reused). For example, a list of links which is constantly updated and which is referenced in several places can be kept in a single source file both visible on its own and also inserted as an inline frame (IFRAME) in other files. Other uses are help files, reading bibliographies, to-do lists, signature blocks, etc. The IFRAME can also show just a sample of a longer file which can be scrolled. The IFRAME does not use a separate FRAMESET file. Here are the attributes of the IFRAME tag:
- IFRAME SRC={url}
- NAME="{name}"
- WIDTH=x HEIGHT=y
- ALIGN=LEFT or RIGHT (for following text)
- /IFRAME closing tag -- essential!
- other attributes: FRAMEBORDER, HSPACE/VSPACE, SCROLLING, MARGINWIDTH/MARGINHEIGHT (see above)
- Note: The IFRAME is not supported by Netscape 4
ADDENDA 3 -- Wildcard variable (*) correction
The size of Frame elements may be specified by percentages (50%), pixels (200), or the wildcard variable (*). Multiples of the wildcard variable are expressed as "2*", "3*", etc, not "**", "***", etc.

Frameset Attribute	Default	other values	Comment
BORDER	5	0-n	see FRAMEBORDER
BORDERCOLOR	-	any
FRAMEBORDER	-	any	if 0, use with BORDER=0
FRAMESPACING	-	any	like BORDER, I.E. only
MARGINWIDTH	8	0-n	sides internal spacing
MARGINHEIGHT	8	0-n	top/bottom internal spacing
SCROLLING	auto	yes, no	scrollbars?
NORESIZE	-	NORESIZE	window size
TARGET	-	NAME value	as in FRAMESET
TARGET	-	"_top"	replaces entire window
TARGET	-	"_blank"	adds new window
TARGET	-	"_self"	replaces this FRAME
NOFRAMES	-	NOFRAMES	tag pair, alt. text

PROBLEMS

Some problems in working with multiple frames:

Printing the correct frame.
Saving or downloading the correct frame. -
Viewing source of the correct frame.
Using a search engine to arrive at a particular frame without a sense of its overall structure
The danger of reframing frames
Problems in some browsers with "back" keys --do they go to the previously viewed frame or the previous frameset?

REVIEW

Files created:

	5,592 framesdemo.html
	   36  white.html
	   38  yellow.html
	   32  tan.html
	   34  ivory.html
	   30  red.html
	   32  gray.html
	   88  frame1.html
	  117  frames2.html
	  115  frames3.html
	  220  menu1.html
	  310  menu2.html

FRAMES DEMOS -- LINKS

SEE CASTRO, CHAPTER 10: LESSONS/EXERCISES

350:465 Frames Tutorial, October 22, 2001 (corrected and revised Oct 24 -- see Addenda).

350:465 Frames Tutorial, October 22, 2001
(corrected and revised Oct 24 -- see Addenda).