1. Introduction: Frames are used to divide your web screen in different parts that can behave independently. For example, one part of the screen can display and change data regardless of what the other(s) screen(s) is (are) displaying. You can also make different frames depend on each other.
2. Frame Structure:
Frames are not parts of the body of an HTML page. Thus, they don't require a
<body> tag. Frames are arranged in columns and rows, and that's how you
define their layout. Since frames are independent, each require its own file.
And each frame should have a name that will distinguish it from the other
frames. To occupy a frame, you tell the browser what file should load in what
frame: that's why you provide a file name to load and the name of the frame as
the target.
To define a framed page, you give columns or row attributes to its
<frameset> tag, then you define each <frame> within a frameset. You
have to define the width or the height of a can use extra attributes to control
the frames. The width or the height is specified in pixels or by percentage.
3. Two-Frames: At its basic layout, you can have a screen made of two frames. To get two vertical frames, you define a page as having two columns. Here is an example of a screen divided in two vertical frames:
<html>
<head><title>A Two-Frame Page</title>
<head>
<frameset cols="15%,75%">
<frame src="file1.html" name="leftframe">
<frame src="file2.html" name="rightframe">
</frameset>
</html>
Here is an example of a two horizontally framed page:
<html>
<head><title>A Two-Frame Page</title>
<head>
<frameset rows="15%,75%">
<frame src="file1.html" name="topframe">
<frame src="file2.html" name="bottomframe">
</frameset>
</html>
3. Three Frames:
4. Complex Frames:
5. Exploring Frame Attributes:
6. Frame Samples: Create the following five files:
a) Preparation
1) top.html: Create a file saved as top.html that has the following listing:
<html>
<head><title>Frames - Top</title>
</head>
<body bgcolor="yellow">
Top Frame
</body>
</html>
2) left.html: Create a file saved as left.html that has the following listing:
<html>
<head><title>Frames - Left</title>
</head>
<body bgcolor="lightgreen">
Left Frame
</body>
</html>
3) center.html: Create a file saved as center.html that has the following listing:
<html>
<head><title>Frame Samples Center</title>
</head>
<body bgcolor="lightblue">
Center Frame
</body>
</html>
4) right.html: Create a file saved as right.html that has the following listing:
<html>
<head><title>Frames - Right</title>
</head>
<body bgcolor="cyan">
Right Frame
</body>
</html>
4) bottom.html: Create a file saved as bottom.html that has the following listing:
<html>
<head><title>Frames - Bottom</title>
</head>
<body bgcolor="lightyellow">
bottom Frame
</body>
</html>
b) Samples:
| <html> <head><title>Frame Samples</title> </head> <frameset cols="100,*"> <frame name="topframe" src="top.html"> <frame name="bottomframe" src="bottom.html"> </frameset> </html>
|
|
|||||||||
| <html> <head><title>Frame Samples 2</title> </head> <frameset rows="60,*"> <frame name="leftframe" src="left.html"> <frame name="rightframe" src="right.html"> </frameset> </html>
|
|
|||||||||
| <html> <head><title>Frame Samples</title> </head> <frameset cols="12%,*"> <frame name="leftframe" src="left.html"> <frameset rows="14%,*"> <frame name="topframe" src="top.html"> <frame name="rightframe" src="right.html"> </frameset> </frameset> </html>
|
|
|||||||||
| <html> <head><title>Frame Samples</title> </head> <frameset rows="12%,*"> <frame name="topframe" src="top.html"> <frameset cols="14%,*,14%"> <frame name="leftframe" src="left.html"> <frame name="mainframe" src="main.html"> <frame name="rightframe" src="right.html"> </frameset> </frameset> </html>
|
|
|||||||||
| <html> <head><title>Frame Samples</title> </head> <frameset cols="12%,*"> <frame name="leftframe" src="left.html"> <frameset rows="14%,*,12%"> <frame name="topframe" src="top.html"> <frame name="mainframe" src="main.html"> <frame name="bottomframe" src="bottom.html"> </frameset> </frameset
|
|
|||||||||
| <html> <head><title>Frame Samples</title> </head> <frameset cols="12%,*,12%"> <frame name="leftframe" src="left.html"> <frameset rows="14%,*,12%"> <frame name="topframe" src="top.html"> <frame name="mainframe" src="main.html"> <frame name="bottomframe" src="bottom.html"> </frameset> <frame name="rightframe" src="right.html"> </frameset> </html>
|
|
|||||||||
| <html> <head><title>Frame Samples</title> </head> <frameset rows="12%,*,12%"> <frame name="topframe" src="top.html"> <frameset cols="14%,*,14%"> <frame name="leftframe" src="left.html"> <frame name="mainframe" src="main.html"> <frame name="rightframe" src="right.html"> </frameset> <frame name="bottomframe" src="bottom.html"> </frameset> </html> |
|
|||||||||