Working with Frames
Concept of Frames
Code for Frames Index
Frameset options
Individual Frame options
Targets
Pros:
- keeps part of the page (menu, header...) stationary while the other parts can scroll and change
- you don't have to put a repeated region on every page (menu, for example), if the one file is a frame - less maintenance
- consistency
- can see the menu/header at all times
Cons:
- true URL path isn't displayed in url field of browser window (can't see which page you're on - it shows the main site's url, all the time, even when you seem to be on a different page.)
- can't bookmark an individual page (unless you right-click, open page in new window and view the content outside the frameset).
- some sites may open within one of your frames, making it difficult to read
- limited space; harder to read; more scrolling
- more steps and knowledge required to print just the main page (without framework)
- goes against ADA guidelines (hard to interpret for readers/viewers)
- difficult for search engines to find, and content could be displayed out of context.
- longer load time - accessing multiple files
- more difficult to track hits to a certain page
- usually can't print entire page - have to print one frame - depends on browser
Working with Frames
It's important that when you are performing an action that involves your page, your cursor is active in the appropriate frame: printing, refreshing, viewing source, find/search, etc. You can right-click inside a frame to get some options. Most of the browser menu items apply only to one frame at a time.
Concept of Frames
The idea is to have several windows that work together. Each window/frame is its own file. The advantage is that not all the frames have to refresh each time something changes. You can have a list of links in one frame and have the content come up in another, without losing your list. Or you can have a header or footer to a page that never changes, even when the content changes. (This can also be accomplished by CSS, Cascading Style Sheets.)
With each frame being a separate html file, there is one index file that pulls them all together and defines the size of each frame and which file will appear. The frameset is defined in between the head and body tags.
2 Frames - in the appearance of 2 rows See example
<html>
<head></head>
<frameset rows="188,*">
<frame name="top" src="menu.html">
<frame name="bottom" src="main.html">
</frameset>
<body> </body>
</html>
2 Frames - in the appearance of 2 columns See example
<frameset cols="188,*">
<frame name="left" src="menu.html">
<frame name="right" src="main.html">
</frameset>
3 Frames - See example
With 3 + frames, we have nested frames - a frameset within a frameset, much like embedded tables. So the first frameset is defined, indicating either rows or columns. Then the second frameset is set within one of those row or columns.
Nested frames allows you to take one row and divide it into two columns, or divide a column into several rows.
This example has the appearance of a top row and two columns below it. In the frame definition, you'll see that the first frameset defines two rows (top and bottom). Then inside the bottom "row" another frameset is define for 2 columns. You can also switch this around so that it look like a left column and 2 rows in the right column, or any other combination for three frames.
<frameset rows="188,*">
<frame name="topFrame" src="top.html">
<frameset cols="182,555">
<frame name="menu" src="menu.html">
<frame name="main" src="main.html">
</frameset>
</frameset>
Other combinations of 3 frames (View Source to see the code for these examples):
Frameset Options - affects all frames defined in that frameset
- Border - <frameset frameborder="1"> ...</frameset>
This is the frame border (set in pixels) that appears between all the frames. To turn borders on, you can use the valeu "1" or the word "yes"; to turn them off: "0" or "no." In Netscape, you may also have to define the border within each frame.
Example of no borders
Example of borders
- Columns or Rows - <frameset cols="100,*"> ...</frameset>
This specifies the number and sizes of columns or rows in a frameset. The number of columns or rows is determined by how many size values are listed. The size values can be determined by pixels, percentages or relative values:
<frameset cols="100,*"> ...</frameset> 2 values = 2 columns: left is 100 pixels in width, the right column is whatever's left over
<frameset rows="400,350,215"> ...</frameset> 3 values = 3 rows: 1st row (top) is 400 pixels, the 2nd row is 350 pixels, and the 3rd row is 215 pixels.
- Frame spacing - <frameset framespacing="7"> ...</frameset>
This adds space (in pixels) in between frames - only supported by IE, not Netscape. View example of framespacing
No Frames
Adding the <noframes> ... </noframes> tag to your index document will allow you to display content to users who do not support frames or have them turned off. You can provide a simple text message or a link to an alternative site inside the noframes tag.
<html>
<head></head>
<frameset rows="188,*">
<frame name="top" src="menu.html">
<frame name="bottom" src="main.html">
</frameset>
<noframes>Your browser does not support frames. For the no frames version of this site, go to http://www.mypages.com/noframesindex.html</noframes>
<body> </body>
</html>
Frame Options - applies to individual frames
- Border - <frame frameborder="1">
Affirmative values are "yes" and "1"; negative values are "no" and "0."
- marginwidth/marginheight - <frame marginwidth="10" marginheight="10">
This specifies the amount of space (in pixels) between the frame edge and the contents of the frame. Marginwidth is for the space on the left and right; marginheight is for the space on the top and bottom of the frame. "1" is the minimum value in Netscape; IE will allow a value of "0" to flush the contents right against the edge of the frame.
- noresize - <frame noresize>
"noresize" will lock your frame's size in place so that the user can not drag it to adjust the viewing size. The default is to allow resizing. Example of resizing
No resizing
- scrolling - <frame scrolling="auto">
Scrolling values can be "yes" "no" or "auto" - determines whether scrollbars will appear in your frame. "Auto" scrolling means they will only appear whenever scrolling is necessary, otherwise, no.
- file source - <frame src="menu.html">
Src specifies the html file that this frame will display.
- Name - <frame name="main">
The name is very important when you have links in one frame that will dispaly contents in another. To keep the contents from replacing the menu frame, you need to designate where the content will be displayed (which frame). The name is case sensitive in any reference to it. In a link, you define a target with the frame name inside:
<a href="family.html" target="main">My Family Page</a>
The link above is pointing to a file called "family.html" and will display the file in the frame named "main."
Troubleshooting Hint: If your link is opening a new window or dispalying in the same frame, check the spelling on your target against the frame name carefully. Make sure they're spelled exactly the same and in the same upper or lower case.
See example site - notice how when you click on the links in the top frame, the content in the bottom frame changes. The links point to files that have defined a target of that bottom frame.
More on Targets
- To set a default target for the entire page, you can define it in the document's head:
<html>
<head>
<base target="main">
</head>
<body>
all links defined on this page will automatically appear in the frame named "main."
</body>
</html>
- Target options: See examples of various targets
- _blank - opens a new window
- _self - opens the file in the same window (this is the default and is the same as if no target were defined)
- _parent - will laod in the parent frame (one step up in the file structure)
- _top - this will break out of the frame structure, replacing your frames page with the new contents (not in a new window; same window, but no frames).
Replacing your window or breaking out of frames is recommended when you are linking to another person's or company's site, so that
1) it's easier to read,
2) it doesn't get confused with your site and
3) if they have frames, your user won't get lost in all the nested frames.