|
Topic: HTML
Introduction to <Frame> Tag
The <FRAME> Tag
The <FRAME> tag is used within the <FRAMESET> container to determine what will actually appear in a particular frame. Each <FRAME> tag is an empty tag-and it's not unlike the <LI> tags you add to HTML lists. It's simply there, within the <FRAMESET> container, to determine what URL or name is associated with the particular frame it defines. It takes the following format:
<frameset>
Function:
Define a collection of frames
Attributes:
BORDER (Netscape)
BORDERCOLOR (Netscape)
COLS
FRAMEBORDER
FRAMESPACING (Internet Explorer)
ONBLUR
ONFOCUS
ONLOAD
ONUNLOAD
ROWS
End tag:
</frameset>; never omitted
Contains:
frameset_content
Used in:
html_content
<FRAMESET COLS/ROWS="numbers">
<FRAME SRC="URL">
...
</FRAMESET>
The SRC attribute is used to tell the frame what URL should be loaded in that frame. For instance, the following would create two frame rows-one that loaded the URL index.html at the top of the Web page and one that loaded the URL help.html at the bottom of the page :
Example: The <FRAME> tag assigns URLs to each frame window.
<FRAMESET ROWS="50%,50%">
<FRAME SRC="index.html">
<FRAME SRC="help.html">
</FRAMESET>
By using the <FRAME> tag, you create what's known as a frame window. Each window corresponds to a "row" or "column" definition in the <FRAMESET> tag, but nothing is drawn or displayed until an appropriate <FRAME> tag is used to define each individual window.
Example: A Simple Frame Document
You'll essentially create the same document that was shown in the previous figure, but you should feel free to play with the numbers a bit to see how different percentages and even different attributes to <FRAMESET> changes how the page displays. Enter Below Example in your text editor.
smpframe.html Simple Frame Document
<HTML>
<HEAD>
<TITLE>Frame Example</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="help.html">
</FRAMESET>
</HTML>
While you're at it, you also need to create some files to put in those frames. If you have some HTML documents hanging around, you can rename menu.html and help.html to any HTML file you'd like to load. For this example, any HTML document names will work.
Example: Loading separate HTML documents into a frame-based page.
If you'd like to experiment further, try changing the <FRAMESET> tag to the following:
<FRAMESET COLS="25%,75%">
Or, change the percentages to see how that affects your layout.
Attributes for <FRAME>
Aside from SRC, the <FRAME> tag can accept the attributes NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE. All of these but NAME are appearance-oriented. Let's deal with them first and come back to NAME in a moment.
MARGINWIDTH and MARGINHEIGHT are used to control the right/left margins and the top/bottom margins of the text and graphics within a frame, respectively. Each takes a numerical value in pixels. For example:
<FRAME SRC="text.html" MARGINWIDTH="5" MARGINHEIGHT="5">
This creates a five pixel border between the contents of text.html and the frame edges.
SCROLLING can accept the values yes, no, and auto and is used to determine whether or not scroll bars will appear in the frame window. The default value is auto, and this is probably the best to use in most cases. Since users have all different screen resolutions and available browser window space, even short documents will sometimes need to be scrolled.
The NORESIZE attribute doesn't require a value assignment, and is used to keep the user from resizing a frame window. (Frame windows can be resized by dragging the frame with the mouse in the viewer window.)
An example of SCROLLING and NORESIZE would be:
<FRAME SRC="text.html" SCROLLING="yes" NORESIZE>
The <NOFRAMES> Tag
This container tag is used to contain HTML markup intended for browsers that do not support the frames specification. Text and HTML tags inside the <NOFRAMES> container are ignored by frames-capable browsers. All others should generally ignore the other frames tags (which they won't recognize), but display the text in between the <NOFRAMES> tags. The following is an example:
<FRAMESET ROWS="25%,75%">
<FRAME SRC="menu.html">
<FRAME SRC="index.html">
<NOFRAMES>
<P>This page requires a Frames capable browser to view. If you'd prefer,
you can access our <a href="2_index.html">HTML 2.0 compliant pages</a>
to view this information without the frames interface.</P>
</NOFRAMES>
</FRAMESET>
Example: Frames and No Frames
Now we'll create another example, this time using the attributes and additional tags you've seen since the last example. Create a new HTML document and enter the following
frames2.html Frames and No Frames
<HTML>
<HEAD>
<TTLE>Frames Example #2</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<NOFRAMES>
<P>If you are seeing this message, then your browser isn't capable of viewing Frames. Please access our <A HREF="2_index.html">HTML 2.0 compliant</A> Web pages.</P>
<P>If you like, you can go directly to these pages in our site:
<UL>
<LI><A HREF="products.html">Product pages</A>
<LI><A HREF="support.html">Support pages</A>
<LI><A HREF="help.html">Help page</A>
</UL>
</NOFRAMES>
<FRAME SRC="index.html" MARGINWIDTH="5" MARGINHEIGHT="2" SCROLLING="no">
<FRAME SRC="info.html" MARGINWIDTH="5" MARGINHEIGHT="2" NORESIZE>
</FRAMESET>
</HTML>
Notice that you've used the attribute NORESIZE with the <FRAME> tags for the second column. What's interesting about this is that it forces the first column to also be non-resizable, since the columns share a common frame border. This is the case with any <FRAME> tag.
Example: The <FRAME> and <NOFRAME> tags in action.
Experiment with different values for the <FRAME> attributes and see what makes a big difference in terms of margins, scrolling, and resizing. Also, if you have access to a browser that isn't frames-capable, load the page and see how the <NOFRAMES> markup looks.
Example: The <NOFRAME> HTML message
|
