Frames
divide a browser window into several pieces or panes, each pane containing a
separate XHTML/HTML document. One of the key advantages that frames offer is
that you can then load and reload single panes without having to reload the
entire contents of the browser window. A collection of frames in the browser
window is known as a frameset.
The
window is divided up into frames in a similar pattern to the way tables are
organized: into rows and columns. The simplest of framesets might just divide
the screen into two rows, while a complex frameset could use several rows and
columns.
There
are few drawbacks also you should be aware of with frames are as follows:
·
Some
browsers do not print well from framesets.
·
Some
smaller devices cannot cope with frames, often because their screen is not big
enough to be divided up.
·
Some
time your page will be displayed differently on different computers due to
different screen resolution.
·
The
browser's back button might not work as the user hopes.
·
There
are still few browsers who do not support farme technology.
To
create a frameset document, first you need the <frameset> element, which
is used instead of the <body> element. The frameset defines the rows and
columns your page is divided into, which in turn specify where each individual
frame will go. Each frame is then represented by a <frame> element.
You
also need to learn the <noframes> element, which provides a message for
users whose browsers do not support frames.
Now we
will discuss these tags in detail one by one.
Creating Frames - The <frameset> Element:
·
The
<frameset> tag replaces the <body> element in frameset documents.
·
The
<frameset> tag defines how to divide the window into frames.
·
Each
frameset defines a set of rows or columns. If you define frames by using
rows then horizontal frames are created. If you define frames by using columns
then vertical farmes are created.
·
The
values of the rows/columns indicate the amount of screen area each row/column
will occupy.
·
Each
farme is indicated by <frame> tag and it defines what HTML document to
put into the frame.
Introduction:
Frames can divide the screen into separate
windows.
|
|
|
|
|
Each of these windows can contain an HTML document.
A file that specifies how the screen is divided into frames is called a frameset.
If you want to make a homepage that uses frames you should:
- make an HTML document with the frameset
- make the normal HTML documents that should be loaded into each of these frames.
When a frameset page is loaded, the browser automatically loads
each of the pages associated with the frames.
Basic example:
A frameset is simply an
HTML document that tells the browser how to divide the screen into split
windows.
|
|
|
|
|
The HTML for the above frameset:
<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="120,*">
<frame src="menupage.htm"
name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm"
name="main">
<frame src="bottombanner.htm"
name="bottom">
</frameset>
</frameset>
</html>
Note that the frameset is only seven lines!
Let's split it all up and add the lines one by one...
Let's split it all up and add the lines one by one...
Creating a frameset:
As stated on the previous page, a frameset
is simply an HTML document that tells the browser how to divide the screen into
split windows.
If the frameset looked like this:
If the frameset looked like this:
|
|
|
The code would be:
<frameset cols="120,*">
</frameset>
The screen is divided into two coloumns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).
The frame windows would have no names, so the frameset really couldn't be used for any purpose.
Proceed to learn how to add names and default pages that load into your frame windows...
The left being 120 pixels and the right using the rest of the screen (indicated by the *).
The frame windows would have no names, so the frameset really couldn't be used for any purpose.
Proceed to learn how to add names and default pages that load into your frame windows...
Default pages:
You can add default pages to frame windows
with the src setting.
Default pages are the pages that will be loaded when the frameset is opened the first time.
Furthermore, we can add names to each frame window using the name setting.
This will allow us to make a link in one frame window, open a page in another frame window.
In this example we added names and default pages to the frame windows:
Default pages are the pages that will be loaded when the frameset is opened the first time.
Furthermore, we can add names to each frame window using the name setting.
This will allow us to make a link in one frame window, open a page in another frame window.
In this example we added names and default pages to the frame windows:
<frameset cols="120,*" >
<frame src="menu.htm"
name="menu" >
<frame src="frontf.htm"
name="main" >
</frameset>
The entire frameset will look like this:
|
m
e n u |
main |
We still have the screen divided in two columns, the left being 120 pixels the right using the rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats why the * is needed).
But now we also have told the browser that the left frame window should load an HTML page called menu.htm and that the right window should load an HTML document called frontf.htm.
In addition we have assigned the names menu and main to the two frame windows, so now we're even able to link to specific windows.
We called the frame windows menu and main, but you could name them whatever you pleased.
The frameset with a menu window to the left and a main window to the right is the most common frameset seen on the web.
There are a few more settings we could add to the frameset.
For instance you might want the frame borders to be invisible.
Proceed to the next page to learn how....
Borders:
You've probably noticed those ugly gray lines that appear
between the frames. It is possible to remove these and manipulate the spacing
between frames withframeborder and framespacing.
These attributes appear within the frameset tag.
Note: Framespacing and border are the same attribute, but some
browsers only recognize one or the other, so use both, with the same value, to
be safe.- frameborder="#" - Determines whether there will be a border.
- border="#"- Modifies the border width.
- framespacing="#" -Modifies the border width, used by Internet Explorer.
Here's
an example of the same frameset without the borders.
HTML Code:
<html>
<body>
<frameset
border="0" frameborder="0" framespacing="0"
rows="20%,*">
<frame
src="title.html">
<frameset border="0" frameborder="0"
framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</body>
</html>
To make frame borders invisible you simply
need to add the parameters "cols-line" to the frameset :
<frameset cols="120,*"
frameborder="0" border="0" framespacing="0">
<frame src="menu.htm"
name="menu" >
<frame src="frontf.htm"
name="main" >
</frameset>
The entire frameset would now look like this:
|
We could still add a few more parameters to our frameset....
Resizeable windows:
If you don’t want the frame windows to be
resizeable, you should add the parameter "noresize" to the frame src
lines:
<frameset cols="120,*"
frameborder="0" border="0" framespacing="0">
<frame src="menu.htm"
name="menu" noresize>
<frame src="frontf.htm"
name="main" noresize>
</frameset>
Now let's proceed with even more parameters for our frameset...
Scrollbars:
Lets say you don’t want a scroll bar in the menu window.
Furthermore the main window should have a scrollbar if needed (if the HTML document doesn’t fit in the window), but if not needed - there should be no scrollbars.
Then the code should look like this:
Furthermore the main window should have a scrollbar if needed (if the HTML document doesn’t fit in the window), but if not needed - there should be no scrollbars.
Then the code should look like this:
<frameset cols="120,*"
frameborder="0" border="0" framespacing="0">
<frame src="menu.htm" name="menu" noresize scrolling=no>
<frame src="frontf.htm" name="main" noresize scrolling=auto>
</frameset>
<frame src="menu.htm" name="menu" noresize scrolling=no>
<frame src="frontf.htm" name="main" noresize scrolling=auto>
</frameset>
If you leave out the setting for scrolling, a scrollbar will appear
if needed - otherwise not.
The next page explains in detail how to link within a frameset...
The next page explains in detail how to link within a frameset...
Links within:
If you have an HTML document with a
hyperlink on the text "Analysis" for instance, that links to a page
called "analysis.htm" then it appears in the document as:
Jump to the <a
href="analysis.htm">Analysis</a> of the project
Now if the link was in the menu window of
our example, and we wanted it to load a page in the main window, the HTML code
would be:
Jump to the <a href="analysis.htm"
target="main">Analysis</a> of the project
We simply added the parameter target="main" to
the <a href> tag.
Now the link will be opened in the main frame window instead of the menu frame window where the link itself is located.
Four target names are reserved, and will be interpreted by the browser in this way:
the <a href> tag.
Now the link will be opened in the main frame window instead of the menu frame window where the link itself is located.
Four target names are reserved, and will be interpreted by the browser in this way:
- _blank loads the page into a new browser window
- _self loads the page into the current window.
- _parent loads the page into the frame that is superior to the frame the hyperlink is in.
- _top cancels all frames, loads in full browser windo
If you read through the pages in this section you should know just about all there is to know about framesets in HTML.
It is possible to further enhance the control of your framesets with javascript. For example javascript can prevent pages that were designed to work only within framesets, from being loaded outside the frameset.
The last page in this section will show you examples of different framesets. You can probably find and customize an example that is very close to what you want for your own site....
Examples:
On this page you can see examples of
different framesets.
|
top
|
|
bottom
|
<frameset rows="16%,84%">
<frame src="top.htm"
name="top">
<frame src="bottom.htm"
name="bottom">
</frameset>
|
tl
|
tr
|
|
bottom
|
|
<frameset rows="16%,84%">
<frameset cols="50%,50%">
<frame src="tl.htm"
name="tl">
<frame src="tr.htm"
name="tr">
</frameset>
<frame src="bottom.htm"
name="bottom">
</frameset>
|
top
|
|
|
left |
right |
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm"
name="left">
<frame src="right.htm"
name="right">
</frameset>
</frameset>
|
topleft
|
topright
|
|
botleft |
botright |
<frameset rows="50%,50%"
cols="50%,50%">
<frame src="topleft.htm"
name="topleft">
<frame src="topright.htm"
name="topright">
<frame src="botleft.htm"
name="botleft">
<frame src="botright.htm"
name="botright">
</frameset>
|
topleft
|
topright
|
|
|
botleft |
brtl
|
brtr
|
|
botrbot
|
||
<frameset rows="50%,50%"
cols="50%,50%">
<frame src="topleft.htm" name="topleft">
<frame src="topright.htm"
name="topright">
<frame src="botleft.htm"
name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.htm"
name="brtl">
<frame src="brtr.htm"
name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>
|
topleft
|
topright
|
|
botleft |
botright |
<frameset rows="240,240"
cols="320,320">
<frame src="topleft.htm"
name="topleft">
<frame src="topright.htm"
name="topright">
<frame src="botleft.htm"
name="botleft">
<frame src="botright.htm"
name="botright">
</frameset>
|
topleft
|
topright
|
|
botleft |
botright |
<frameset rows="50%,*"
cols="320,*">
<frame src="topleft.htm"
name="topleft">
<frame src="topright.htm"
name="topright">
<frame src="botleft.htm"
name="botleft">
<frame src="botright.htm"
name="botright">
</frameset>
Example:
Following is the example to
create three horizontal frames:
<html>
<head>
<title>Frames example</title>
</head>
<frameset
rows="10%,80%,10%">
<frame
src="/html/top_frame.htm" />
<frame
src="/html/main_frame.htm" />
<frame
src="/html/bottom_frame.htm" />
<noframes>
<body>
Your
browser does not support frames.
</body>
</noframes>
</frameset>
</html>
Now
create three HTML files called top_frame.htm, main_frame.htm and bottom_frame.htm to be loaded into three frames with
some content.
The <frameset> Element Attributes:
Following
are important attributes of <frameset> and should be known to you to use
frameset.
·
cols: specifies how many columns are contained
in the frameset and the size of each column. You can specify the width of each
column in one of four ways:
o
Absolute
values in pixels. For example to create three vertical frames, usecols="100,
500,100".
o
A
percentage of the browser window. For example to create three vertical frames,
use cols="10%,
80%,10%".
o
Using
a wildcard symbol. For example to create three vertical frames, usecols="10%,
*,10%". In this case wildcard takes remainder of the window.
o
As
relative widths of the browser window. For example to create three vertical
frames, use cols="3*,2*,1*".
This is an alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the first column takes
up half of the window, the second takes one third, and the third takes one
sixth.
·
rows: attribute works just like the cols
attribute and can take the same values, but it is used to specify the rows in
the frameset. For example to create two horizontal frames, use rows="10%, 90%". You
can specify the height of each row in the same way as explained above for
columns.
·
border: attribute specifies the width of the
border of each frame in pixels. For example border="5". A value of
zero specifies that no border should be there.
·
frameborder: specifies whether a three-dimensional
border should be displayed between frames. This attrubute takes value either 1
(yes) or 0 (no). For example frameborder="0" specifies no border.
·
framespacing: specifies the amount of space between
frames in a frameset. This can take any integer value. For example
framespacing="10" means there should be 10 pixels spacing between
each frames.
Loading Content - The <frame> Element:
The
<frame> element indicates what goes in each frame of the frameset. The
<frame> element is always an empty element, and therefore should not have
any content, although each <frame> element should always carry one
attribute, src, to indicate the page that should represent that frame.
From
the above example, lets take small snippet:
<frame src="/html/top_frame.htm" />
<frame
src="/html/main_frame.htm" />
<frame
src="/html/bottom_frame.htm" />
The <frame> Element Attributes:
Following
are important attributes of and should be known to you to use frames.
·
src: indicates the file that should be used in
the frame. Its value can be any URL. For example,
src="/html/top_frame.htm" will load an HTML file avaible in html
directory.
·
name: attribute allows you to give a name to a
frame. It is used to indicate which frame a document should be loaded into.
This is especially important when you want to create links in one frame that
load pages into a second frame, in which case the second frame needs a name to
identify itself as the target of the link.
·
frameborder: attribute specifies whether or not the
borders of that frame are shown; it overrides the value given in the
frameborder attribute on the <frameset> element if one is given, and the
possible values are the same. This can take values either 1 (yes) or 0 (no).
·
marginwidth: allows you to specify the width of the
space between the left and right of the frame's borders and the frame's
content. The value is given in pixels. For example marginwidth="10".
·
marginheight: allows you to specify the height of the
space between the top and bottom of the frame's borders and its contents. The
value is given in pixels. For example marginheight="10".
·
noresize: By default you can resize any frame by
clicking and dragging on the borders of a frame. The noresize attribute
prevents a user from being able to resize the frame. For example noresize="noresize".
·
scrolling: controls the appearance of the scrollbars
that appear on the frame. This takes values either "yes",
"no" or "auto". For example scrolling="no" means
it should not have scroll bars.
·
longdesc: allows you to provide a link to another
page containing a long description of the contents of the frame. For example
longdesc="framedescription.htm"
Browser Support - The <noframes> Element:
If a
user is using any old browser or any browser which does not support frames then
<noframes> element should be displayed to the user.
In
XHTML you must place a <body> element inside the <noframes> element
because the <frameset> element is supposed to replace the <body>
element, but if a browser does not understand the <frameset> element it
should understand what is inside the <body> element contained in the
<noframes> element.
You
can put some nice message for your user having old browsers. For example Sorry!! your browser does not
support frames.
Frame's name and target attributes:
One of
the most popular uses of frames is to place navigation bars in one frame and
then load the pages with the content into a separate frame.
As you
have already seen, each <frame> element can carry the name attribute to give each frame a
name.This name is used in the links to indicate which frame the new page should
load into. Consider this very simple example, create following content in
index.htm file:
<frameset cols="200, *">
<frame src="/html/menu.htm" name="menu_page"
/>
<frame src="/html/main.htm" name="main_page"
/>
</frameset>
There
are two columns in this example. The first is 200 pixels wide and will contain
the navigation bar. The second column or frame will contain the main part of
the page. The links on the left side navigation bar will load pages into the
right side main page.
Keep
some content in main.htm file and the links in the menu.htm file look like
this:
<a href="http://www.google.com"
target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com"
target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk/"
target="main_page">BBC News</a>
The target attribute can also take the attribute
values listed in the table that follows.
|
Vlaue
|
Description
|
|
_self
|
Loads the page into the current frame.
|
|
_blank
|
Loads a page into a new browser window.opening a new
window.
|
|
_parent
|
Loads the page into the parent window, which in the
case of a single frameset is the main browser window.
|
|
_top
|
Loads the page into the browser window, replacing
any current frames..
|
Inline Frames - The <iframe> Element:
You
can define an inline frame with the <iframe> tag. The <iframe> tag
is not used within a <frameset> tag. Instead, it appears anywhere in your
document. The <iframe> tag defines a rectangular region within the
document in which the browser displays a separate document, including
scrollbars and borders.
Use
the src attribute with <iframe> to
specify the URL of the document that occupies the inline frame.
All of
the other, optional attributes for the <iframe> tag, including name, class, frameborder, id,
longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding
attributes for the <frame> tag.
Following
is the example to show how to use the <iframe>. This tag is used along
with <body> tag:
<body>
...other document content...
<iframe src="/html/menu.htm"
width="75" height="200" align="right">
Your browser does not support inline
frames. To view this
<a
href="/html/menu.htm">document</a> correctly, you'll need
a copy of Internet Explorer or the latest
Netscape Navigator.
</iframe>
...subsequent document content...
</body>
The align attribute lets you control where the
frame gets placed in line with the adjacent text or moved to the edge of the
document, allowing text to flow around the frame.
For
inline alignment, use top,
middle, or bottom as the
value of this attribute. The frame is aligned with the top, middle, or bottom of the adjacent text, respectively. To
allow text to flow around the inline frame, use the left or right values for this attribute. The frame
is moved to the left or right edge of the text flow, respectively, and the
remaining content of the document is flowed around the frame. A value of center places the inline frame in the middle
of the display, with text flowing above and below.
Adding a banner or title frame:
Add a
row to the top for a title and graphics with the code as follows:
HTML Code:
<html>
<body>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</body>
</html>
No comments:
Post a Comment