Frames Lesson


Simple Frameset    Frames in Columns     Frames in Columns & Rows     Combining Framesets

Attributes for Frame tags     Targets     Nesting Framesets     Dealing with Old Browsers


See an example of frames here!


CREATING A SIMPLE FRAMESET

Window with individual panes. Choose the number of frames, sizes, borders, scrollbars, etc.

1	You must place this code AFTER the </HEAD>

2	<FRAMESET ROWS="a,b"  (a=height of the first row), (b=height of 2nd row), etc.

			% of the browser window,

			#of pixels, or 

			* variable (depends on the size of the other rows)

3	Repeat this (a,b,c) for each row that you need.

4	Close your FRAMESET>

5	<FRAME (to assign the URL and other attributes to that frame)

6	NAME="name"  (word that identifies the frame's use (i.e. banner, index, etc.) TARGET NAME!

7	SRC="content.hmtl"  URL of the page that will be displayed in that frame.

8	REPEAT steps 5-7 for each row that you defined in Step #2

9	</FRAMESET> to complete your window construction.

10	CREATE the pages that will be displayed initially in these frames (SRC file in #7)



* Use (*) for leftover space in the window.

* If you use more than one (*)variable, then ill diece evenetween those frames.

	(2*) will divy 2/3 of the space to that frame, and 1/3 to the other(*)

* DON'T USE THE BODY TAG AT ALL IN THE FRAMESET PAGES!!

CREATING FRAMES IN COLUMNS INSTEAD OF ROWS

1	</HEAD>  <FRAMESET

2	COLS="a,b"  (a=width of the first column), (b=width of 2nd column), etc.

			% of window,

			#of pixels, or 

			variable* which depends on other column sizes

3	repeat this for each column you need...

4	Close the tag  >

5	<FRAME  (to assign the URL and other attributes to that frame)

6	NAME="name"  (word that identifies the frame's use (i.e. banner, index, etc.) TARGET NAME!

7	SRC="content.html"  (URL for the page that will be INITIALLY displayed in this frame)

8	REPEAT steps 5-7 for each column that you defined in Step #2

9	Create the html pages that will be displayed initially in the frames.(SRC files)

CREATING FRAMES IN COLUMNS AND ROWS

1	</HEAD>  <FRAMESET 

2	ROWS="a,b"  (a=height of the first row), (b=height of 2nd row), etc.

3	COLS="x,y"  (x=width of the first column), (y=width of 2nd column), etc.

4	Close the tag  >

5	<FRAME NAME="name"   SRC="content.hmtl">

6	Repeat Steps 4-5 for each ROW and COLUMNS, top to bottom

7	</FRAMESET> to complete window construction.

8	CREATE the pages that will be displayed initially in these frames (SRC file in 5)


* Limits you to the SAME NUMBER of FRAMES in each Row or Column;  For one row with 2 Frames and another

with three, we'll have to combine multiple framesets (see below).

COMBINING FRAMESETS

When irregular - one row at the top that spans the width of the browser, and a 2nd row divided into 2 frames. Use a FRAMESET for the 2nd Row.

1	MAKE A SKETCH of your plan! to determine how many rows and columns you need.

2	</HEAD>  <FRAMESET 

3	ROWS="a,b"  (a=height of the first row), (b=height of 2nd row), etc.

4	IF it's a SINGLE FRAME:

		<FRAME  NAME="name" SRC="content.html"> (the normal way)

or

5	If COLUMNS:  <FRAMESET COLS="x,y"> 

6	<FRAME NAME="name"   SRC="content.hmtl"> for EACH COLUMN

7	</FRAMESET> after define all the frames/columns in that row.

8	Continue to define each row with either single FRAME(step 4) or FRAMESET for multiple 

	frames (step 5-7)

9	</FRAMESET> to complete window construction for OUTER FRAMESET.



* MUST CLOSE EACH OPENING FRAMESET!!

* Not every row must be a column! If it's a row with just a single frame (FULL SPAN) use FRAME tag.

* If you have the SAME NUMBER of ROWS and COLUMNS, don't DO THE MULTIPLES, just use ROWS & COLUMNS!


ATTRIBUTES FOR FRAME and FRAMESET TAGS

ADJUSTING MARGINS (Default is 8 pixels on each side)
In <FRAME MARGINWIDTH=w MARGINHEIGHT=h (in pixels; margins are transparent, so they'll be whatever color the background is)

SCROLL BARS
options are: always, never, when needed (if there is more information than what will fit on that page)

In <FRAME SCROLLING=

	YES (for scrollbar)  

	NO (for no scrollbar)  

	AUTO (DEFAULT)

* Make sure that Non-Scrolling frames are BIG ENOUGH To HOLD THE CONTENTS!!

BORDERS

BORDER COLORS
You can change the individual frame colors, but remember that the borders are shared by the different frames, so you may need to adjust accordingly

TO ADJUST THE BORDERS OF ALL THE COLORS IN THE FRAMESET

<FRAMESET BORDERCOLOR=color "#rrggbb" or colorname

To Adjust Color of individual ROWs, COLUMNS, or FRAMES

<FRAMESET or FRAME   BORDERCOLOR=color "#rrggbb" or colorname

** BORDERCOLOR in INDIVIDUAL frame overrides the default tag in topmost FRAMESET!

ADJUSTING FRAME BORDERS (control the width of the space between frames)
By default, browser draws a sculpted border around each frame in a frameset.

To Adjust Amount of SPACE BETWEEN FRAMES:

At Topmost FRAMESET:

<FRAMESET BORDER=n  (default=5, none=0)

To HIDE SCULPTED BORDERS

Use BOTH FRAMEBORDER=0 and BORDER=0 to get rid of ALL space!

* You can set for individual FRAME or FRAMESET tags

* Add to all FRAME tags in a column/frame to make HORIZONTAL borders disappear.

* USE FRAMEBORDER with Inidividual frames  

	(IE displays with individual frames, but NETSCAPE displays for entire row)

To RESIZE FRAMES
Frames with relative/variable sizes (*) change when the user changes their browser window size

<FRAME NORESIZE  (if BORDER=less than 5 in IE, automatically won't resize)

TARGETS

To TARGET A LINK TO A PARTICULAR FRAME:
Initial content=SRC, pointer is a TARGET to open links to other pages; SAYS: Open this link in the contents frame (Or whatever else you've named it)
1	Make sure that the target frame has a NAME (<FRAME NAME="banner">

2	On the page where the link should appear: <A HREF="page.html" (file that should be in that frame)

3	TARGET="banner"  (the NAME of the target FRAME (within FRAME tag))

4	Add any other attributes and final >



* Frame MUST have a NAME!!

* Name must begin with an alphanumeric character! (number or letter, no special characters)

* If you DON'T specify a target, the link will open in the frame that COMTAINS that link (HREF)!

OTHER TARGETS (If you DON'T want it to open in a frame)

1	<A HREF="contents.html"

2	TARGET=_blank   (opens up a NEW, BLANK window - use this for links to other sites)

	TARGET=_self	(opens in the same frame that contains the link. Replaces the info with new contents)

	TARGET=_top		(Opens link in the current browser window, BUT indepently of the rest of the frameset which

		it belongs to.

	TARGET=_parent	(opens link in FRAME THAT CONTAINS the Current Frameset) only different from using _top

		when you are using nested framesets

Changing the DEFAULT TARGET

To change default target of ALL links on a page
1	<HEAD> <BASE 

2	TARGET="name" (name=frame/window which you want links to appear in by default).

3	> Close the tag



* You can ALWAYS override the BASE target by putting a target in the link!

NESTING FRAMESETS

1	Build the CHILD, or inner, frameset (the HTML page that CALLS the source html files (NO BODY!)

2	Build the PARENT, or outer, frameset. When you reach the frame you want to NEST the child in, TYPE:

	SRC="child.html", where child is the NESTED frameset from step 1.
	
FRAMESET1.html page calls child FRAMESET2.html page, which calls childCONTENT.html page

ALTERNATES TO FRAMES FOR OLDER BROWSERS


1	Type in all your FRAMESET information.

2	Type in <NOFRAMES> just before the LAST CLOSING FRAMESET TAG. (</FRAMESET>)

3	Create the content that you want to appear IF the FRAMES DON'T. 

		This page uses frames. Your browser is too old, so get a new browser, here's a link to netscape...

4	</NOFRAMES> </FRAMESET>



* The alternate text DOES NOT appear if the frames work!

* You can put ANYTHING in the NOFRAMES tag! (can be more than just text!)

* If you DON'T Use the alternate, the user with an old browser will get NOTHING on their screen!