Frames/Framesets
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
A frame is a region in a browser window that can display an HTML document independent of what's being displayed in the rest of the browser window. A frameset is an HTML file that defines the layout and properties of a set of frames.

The most common use of frames is for navigation. A set of frames often includes one frame containing a navigation bar and another frame to display the main content pages.

Not all browsers provide good frame support, and frames may be difficult for visitors with disabilities to navigate, so if you do use frames, always provide a noframes section in your frameset, for visitors who can't view them.

<html>
<head>
</head>
<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">

<frame src="menu.html" name="menu" scrolling="NO" noresize>
<frame src="contents.html" name="contents">

</frameset>
<noframes>
   --put normal html code here
</noframes>
</html>

NOTE: the name attribute will be used in conjunction with the target attribute (used in the <a href>)

EX: <a href="painting1.html" target="contents">painting one</a>

 

Frameset attributes:

cols = size and proportion of columns.
rows = size and proportion of rows.
border - 3-d border by default, use border=0; effects outermost frameset.
bordercolor - when border is equal to 1 or greater.
frameborder - effects all borders, but can be over-ridden by individual frames' border settings.
framespacing - more accurate way to create borders across various operating systems.

Frame attributes:

name = "identifying name"
src = "url"
scrolling = "auto", "yes", "no" --vertical or horizontal scrollbars.
noresize - keeps users from adjusting frame size.
bordercolor
frameborder

 

Code - horizontal:

<frameset rows="150,*">

<frame name="menu" src ="menu.html">
<frame name="contents" src="contents.html">

</frameset>

menu
contents

 

Code - vertical:

<frameset cols="150,*">

<frame name="menu" src ="menu.html">
<frame name="contents" src="contents.html">

</frameset>

menu contents

 

 

Code - nested:

<frameset rows="150,*" cols="*" frameborder="NO" border="0" framespacing="0">

<frame name="mainMenu" src="mainMenu.html" scrolling="NO" noresize>
<frameset cols="150,*" frameborder="NO" border="0" framespacing="0">

<frame name="secondaryMenu" src="secondaryMenu.html" scrolling="NO" noresize>
<frame name="contents" src="contents.html">

</frameset>

</frameset>

main menu
sec. menu contents

nested frames sample

 

Code - noframes (browsers that don't support frames):

<frameset rows="150,*">

<frame name="menu" src ="menu.html">
<frame name="content" src="contents.html">

</frameset>
<noframes>

<body>
NON-FRAME CONTENT HERE
</body>

</noframes>