In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.
Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.
So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.
Creating Frames
Two Column Frameset
HTML Code:The frameset (frame_example_frameset_1.html):
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
The left frame (frame_example_left.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left.html).</p>
</body>
</html>
The right frame (frame_example_right.html):
<html>
<body style="background-color:yellow">
<p>This is the right frame (frame_example_right.html).</p>
</body>
</html>
Add a Top Frame
You can do this by "nesting" a frame within another frame.HTML Code:
The frameset (frame_example_frameset_2.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
The top frame (frame_example_top.html):
<html>
<body style="background-color:maroon">
<p>This is the Top frame (frame_example_top.html).</p>
</body>
</html>
(The left and right frames don't change)Remove the Borders
You can get rid of the borders if you like. Officially, you do this usingframeborder="0"
. I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder
, border
, and framespacing
attributes.HTML Code:
The frameset (frame_example_frameset_3.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="/html/tutorial/frame_example_top.html">
<frameset cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left.html" />
<frame src ="/html/tutorial/frame_example_right.html" />
</frameset>
</frameset>
</html>
(The left, right, and top frames don't change)Load Another Frame
Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).This is achieved using the
name
attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target
attribute.Tip: You could use
base target="content"
at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.HTML Code:
The frameset (frame_example_frameset_4.html):
<html>
<head>
<title>Frameset page</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
<frame src ="/html/tutorial/frame_example_left_2.html" />
<frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
</frameset>
</html>
The left frame (frame_example_left_2.html):
<html>
<body style="background-color:green">
<p>This is the left frame (frame_example_left_2.html).</p>
<p>
<a target="content" href="frame_example_yellow.html">Yellow</a><br />
<a target="content" href="frame_example_lime.html">Lime</a>
</p>
</body>
</html>
The yellow frame (frame_example_yellow.html):
<html>
<body style="background-color:yellow">
<p>This is the yellow frame (frame_example_yellow.html).</p>
</body>
</html>
The lime frame (frame_example_lime.html):
<html>
<body style="background-color:Lime">
<p>This is the lime frame (frame_example_lime.html).</p>
</body>
</html>
Tag Reference
Here's some more info on the above tags.The frameset Tag
In your frameset tag, you specify eithercols
or rows
, depending on whether you want frames to go vertically or horizontally.Attribute | Description |
---|---|
rows | Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100% |
cols | Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100% |
The frame Tag
For each frame you want to display, you specify aframe
tag. You nest these within the frameset tag.Attribute | Description |
---|---|
name | Assigns a name to a frame. This is useful for loading contents into one frame from another. |
longdesc | A long description - this can elaborate on a shorter description specified with the title attribute. |
src | Location of the frame contents (for example, the HTML page to be loaded into the frame). |
noresize | Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not). |
scrolling | Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:
|
frameborder | Whether the frame should have a border or not. Possible values:
|
marginwidth | Specifies the margin, in pixels, between the frame's contents and it's left and right margins. |
marginheight | Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins. |
The noframe Tag
Thenoframes
tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.HTML Code:
<html>
<head>
<title>Frameset page<title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>
<frame src ="frame_example_left.html" />
<frame src ="frame_example_right.html" />
</frameset>
</html>
No comments:
Post a Comment