| CIS 207 | Web Page Development - HTML |
Frames allow authors to present web pages with multiple pages on the screen at the same time. These views offer designers a way to keep certain information visible, while other views are scrolled or replaced.
Frames allow elements like control bars, copyright notices, and title graphics, to be placed in an individual frame. As the user navigates the site, one frame's contents remain fixed, even though adjoining frames redraw. Frames make table of contents are more functional. One frame can contain a table of contents that, when clicked, display results in an adjoining frame. Check out what W3C says about frames.
For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.
Frames are windows that appear within the browser's display area, each capable of displaying the contents of a different HTML file.
Here are a few sample web pages that use frames: (They are getting harder to find.)
Some people use frames to keep visitors from leaving their site. Actually, visitors leave the site by clicking links, but frames can allow a banner or menu to stay on the screen. As the user clicks on links which open in a different frame, the banner or menu stays on the screen. This technique gives the appearance that the linked pages are a part of the same site. See this example of how you could create this appearance.
Update: HTML5 does not support frames.
Before you create a frames page, you need to plan exactly what you want displayed in each frame and how you want the frames placed on the page. Figure out how many frames you will have, and exactly what size each frame will be. Do you want the user to be able to resize a frame? What about users with different screen resolution settings? Do you want a frame to appear without borders, and just blend into the page? Will frames make it easier for users to navigate your site? Do you want to give your users a choice of a frames version of your page and a non-frames version?
First of all, you need to decide if you want your page to have frames at all. Many users do not like frames and some users absolutely HATE frames! Check out these links:|
|
Frame layout is defined using the <FRAMESET> tag. The general syntax for the <FRAMESET> tag in your HTML code is:
<html>
<head>
<title>Page Title</title>
</head>
<framset>
Frame Definitions
</frameset>
</html>
When you use the <FRAMESET> tag, you omit the <BODY> tag. This is because a frames page displays other pages. It does not have any body text to display. However, if you create a page that will be displayed whether the browser supports frames or not, you will include a <BODY> tag.
The <FRAMESET> tag has two properties: ROWS and COLS. Use the ROWS property to create frames that are laid out in rows, and use the COLS property to lay frames out in columns. You can only use one property inside one <FRAMESET> tag.
| First Frame
| Second Frame
| Third Frame
|
| First Frame
|
| Second Frame
|
| Third Frame
|
The syntax for specifying the row or column layout for the <FRAMESET> tag is:
<frameset rows="row height 1, row height 2, row height 3, ...">
or
<frameset cols="column width 1, column width 2, column width 3, ...">
where row height is the height of each row, and the
column width is the width
of each column.
Rows and columns are specified in three ways:
<frameset rows="150,300"><frameset rows="35%,65%"><frameset rows="35%,*">Pixels tell the browser exactly how many pixels wide or tall to make the frame. Percentage tells the browser what percentage of the screen to use for the frame. Asterisk tells the browser to use the remaining space for that particular row or column.
The tag used to specify the page that will be inserted into a frame is the <frame> tag. The syntax for the <FRAME> tag is:
<frame src="document">
where document is the URL or filename of the page you
want to load. <FRAME> tags must be inserted between the <FRAMESET> and
</FRAMESET> tags.
For example, the following <FRAMESET> tag will create the frames page linked below:
<frameset rows="35%,65%">
<frame src="198frame1example.htm">
<frame src="198frame2example.htm">
</frameset>
I am a frameset page named 198framesetexample1.htm (I display above two files in ROWS)
Let's create the exact same FRAMESET page, except we'll set COLS instead, with the following code:
<frameset sols="35%,65%">
<frame src="198frame1example.htm">
<frame src="198frame2example.htm">
</frameset>
These pages look great if you're happy with just two columns or two rows. However, many frames pages use multiple columns and rows.
Since <frameset> tags can include either ROWS or COLS, but not both, we nest <frameset> tags to create a frames on rows and columns. Nested <frameset> tags refer to the space given it by the <frameset> tag it is nested within. For example, if we set the ROWS equal to 10%, the row will take up 10% of the row it was inserted into - not 10% of the entire display height.
Many frames pages will use multiple rows and columns. For example, a common frames page layout will include a row across the top of the page for the company logo, address, etc. The bottom row will be split into a left frame which displays a table of contents or navigation links, and a right frame which displays the bulk of the content of the web page.
Let's take a look at an example of a frames layout with a row across the top and a second row, split into a left frame and a right frame. Frames pages will always use one more file than the page has frames. This example uses four files since it displays three frames.
You can control three properties of a frame's appearance: the frame's scroll bars, the size of the margin between the source document and the frame border, and whether or not the user is allowed to change the frame's width or height.
By default, scroll bar appear whenever the content of the source page cannot fit within the frame. You can override this setting by using the SCROLLING property. The syntax for this property is:
<frame src="document" scrolling="value">
where value can either be YES (always display scroll
bars) or NO (never display scroll bars). If you do not specify a setting, the
browser will display scroll bars whenever it needs to.
In the example above, the frameset page named 198frameexample-frameset.htm used the following code:
<frameset rows="80,*">
<frame src="198frameexample-topframe.htm" name="top" scrolling="no">
<frameset cols="150,*">
<frame src="198frameexample-leftframe.htm" name="left">
<frame src="198frameexample-rightframe.htm" name="right">
</frameset>
</frameset>
Notice that scrolling is set to NO for the top frame only. We would need to set the first row to 84 pixels in order for the browser not to display scroll bars by default. Since setting the row height to 84 would waste space and place too much white space below the words, the height was set to 80 pixels and we specified no scrolling.
When designing web pages, keep in mind that you should remove scroll bars
from a frame only when you are sure that all the contents of the frame source
will be displayed. Check you page in different browsers, different monitor
resolutions, and on different platforms to make sure everything displays as you
expect. If the frame source will not fit, the browser will simply chop it off as
you can see in this example (file:
198frameexample-frameset63.htm) - with the rows set to 63, not 80 (with the
code
<frameset rows="63,*">).
When the browser retrieves a web page to display inside a frame, it automatically determines the amount of space between the page's content and the frame border. You can control this value by specifying the frame's margin with the following syntax:
<frame src="document" marginheight="value" marginwidth="value">
where MARGINHEIGHT is the amount of space (in pixels) that appears above and below the content of the page in the frame, and MARGINWIDTH is the amount of space that appears to the page's left or right. The browser assumes you want the default if you omit one or both of these properties.
By default, users can resize frame borders in the browser by dragging a frame border. To keep users from being able to resize frame borders, use the following syntax:
<FRAME SRC=document NORESIZE>
The NORESIZE property takes no value - you simply include it with the <FRAME> tag to prevent users from modifying the size of your frames.
By default, clicking a hyperlink within a frame will open the linked file inside the same frame. To control the behavior of hyperlinks in a framed page, you have to do two things:
To assign a name to a frame, add the NAME property to the FRAME tag. The syntax for this property is:
<FRAME SRC=document NAME=frame_name>
where frame_name is any single word you want to assign to
the frame. Case is important in assigning frame names. A frame named "Main" is
different than one named "main."
In the example above, the frameset page named 198frameexample-frameset.htm used the following code:
<FRAMESET ROWS="80,*">
<FRAME SRC="198frameexample-topframe.htm" name="top"
SCROLLING=NO>
<FRAMESET COLS="150,*">
<FRAME SRC="198frameexample-leftframe.htm"
NAME="left">
<FRAME SRC="198frameexample-rightframe.htm"
NAME="right">
</FRAMESET>
</FRAMESET>
To display a page within a specific frame of another page, you add the TARGET property to the <A> tag of the hyperlink. The syntax for this property is:
<A HREF=URL TARGET=frame_name>
where frame_name is the name you assigned to a frame on
your page. To specify a link to Sun's Java page, that will open in the frame we
named "right", we use
<A HREF="http://java.sun.com" TARGET="right">.
In the example above, the left page in our frame, named 198frameexample-leftframe.htm, used the following code:
Filename:<br>
198frameexample-leftframe.htm<p>
<B>Links</B><br>
<A HREF="http://www.jscc.cc.al.us" TARGET="right">JSCC</A><BR>
<A HREF="http://java.sun.com" TARGET="right">JAVA</A><BR>
<A HREF="http://www.microsoft.com" TARGET="right">MSFT</A><BR>
<A HREF="198frameexample-rightframe.htm" TARGET="right">HOME</A>
Notice how each link includes the property TARGET="right" to
make the link open in the frame we named "right" in the frameset page.
Since, it is common to place several links in a table of contents page similar
to this one, HTML gives us a way to specify a target for all the hyperlinks in a
single file - which saves us from having to type all these TARGET properties for
each link, as we did above.
The <BASE> tag appears within the <HEAD> tags of your HTML file and is used to specify global options for the page. One of the properties of the <BASE> tag is the TARGET property, which defines a default target for all the page's hyperlinks. The syntax for this property is:
<BASE TARGET=frame_name>
where frame_name is the name of the target frame. When the
<BASE> tag points to one target, and an individual <A> tag points to a different
target, the target in the <A> tag rules. This allows us to override the default
target for a few individual links that we want to open in a different frame.
In our example, the left page in our frame named 198frameexample-leftframe.htm, could have used the following code,
saving us from having to type
TARGET="right" so many times.
<BASE TARGET="right">
Filename:<br>
198frameexample-leftframe.htm<p>
<B>Links</B><br>
<A HREF="http://www.jscc.cc.al.us">JSCC</A><BR>
<A HREF="http://java.sun.com">JAVA</A><BR>
<A HREF="http://www.microsoft.com">MSFT</A><BR>
<A HREF="198frameexample-rightframe.htm">HOME</A>
Magic target names are special names that can be used in place of a frame name as a target for a hypertext link. Magic target names are useful in situations where you want the page to appear in a new window or to replace the current frame layout. Here is a list of the magic target names and a description of what each does.
| Magic Target Name | Description |
_blank
| Loads the document into a new browser window |
_self
| Loads the document into the same frame or window that contains the hyperlink tag |
_parent
| In a layout of nested frames, loads the document into the frame that contains the frame with the hyperlink tag |
_top
| Loads the document into the full display area, replacing the current frame layout |
All magic target names begin with the underscore character ( _ ) to distinguish them from other target names. Magic target names are case sensitive and must be entered in lowercase.
We can create the illusion of an expanding Table of Contents by linking to an
extra copy of the Table of Contents page that has expanded choices. The
following example allows the user to click on the
to expand a branch in the Table of
Contents frame or click on the 
to
collapse a branch of choices. Expanding
Table of Contents
If you want your page to be viewable by browsers that do not support frames, as well as by those that do, we can use the <NOFRAMES> tags, which identify a section of your HTML file that contains code to be read by frame-blind browsers (browsers that don't support frames). The general syntax for the <NOFRAMES> tag is:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
Frame Definitions
</FRAMESET>
<NOFRAMES>
<BODY>
Page Layout
</BODY>
</NOFRAMES>
</HTML>
If a browser that supports frames loads this page, it knows to ignore everything within the <NOFRAMES> tags. If a browser that does not support frames loads this page, it doesn't know what to do with the <FRAMESET> and <NOFRAMES> tags, so it just ignores them. Remember, HTML ignores tags it does not know.
Frame extensions allow us to remove borders from frames and change the width and color of frame borders.
The BORDERCOLOR property can be applied to either an entire set of frames (within the <FRAMESET> tag) or to individual frames (within the <FRAME> tag). The syntax for this property is:
<FRAMESET BORDERCOLOR=color>
or
<FRAME BORDERCOLOR=color>
where color is either a color name or color value. Since
different browsers apply the BORDERCOLOR property in different ways, it is a
good idea to check your page in all browsers.
The BORDER property allows you to specify the width of the frame borders. The syntax for the BORDER property is:
<FRAMESET BORDER=value>
where value is the width of the frame borders in pixels.
You can completely remove the frame borders by setting the BORDER property to
zero.
A floating frame or internal frame appears as a separate box or window with a web page rather than on one side or the top or bottom. A floating frame can be placed within a web page in the same way that an inline image is place within a web page. To create a floating frame, you the <IFRAME> tag. The syntax for the IFRAME tag is:
<IFRAME WIDTH=value HEIGHT=value SRC=URL>
</IFRAME>
where the width and height values are the width and height of the floating frame in pixels. The URL is the document that appears within the frame. Also, you can add the ALIGN property, as we did with the <IMG> tag, to control the placement of the frame on the page and the way text flows around the frame. Unfortunately, only Internet Explorer supports floating frames.