Embed Size (px)
Citation preview
HTML Frames HTML Frames
Frames Frames
With frames, you can display more than With frames, you can display more than one HTML document in the same browser one HTML document in the same browser window. Each HTML document is called a window. Each HTML document is called a frame, and each frame is independent of frame, and each frame is independent of the others.the others.
The disadvantages of using frames are:The disadvantages of using frames are: The web developer must keep track of The web developer must keep track of
more HTML documents more HTML documents It is difficult to print the entire page It is difficult to print the entire page
The Frameset Tag The Frameset Tag
The <frameset> tag defines how to The <frameset> tag defines how to divide the window into frames divide the window into frames
Each frameset defines a set of rows Each frameset defines a set of rows oror columns columns
The values of the rows/columns The values of the rows/columns indicate the amount of screen area indicate the amount of screen area each row/column will occupy each row/column will occupy
The Frame Tag The Frame Tag The <frame> tag defines what HTML document to put into The <frame> tag defines what HTML document to put into
each frame each frame In the example below we have a frameset with two In the example below we have a frameset with two
columns. The first column is set to 25% of the width of the columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the browser window. The second column is set to 75% of the width of the browser window. The HTML document width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%"><frameset cols="25%,75%"><frame src="frame_a.htm"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_b.htm"> </frameset></frameset>
Basic Notes - Useful Tips Basic Notes - Useful Tips
If a frame has visible borders, the If a frame has visible borders, the user can resize it by dragging the user can resize it by dragging the border. To prevent a user from doing border. To prevent a user from doing this, you can add this, you can add noresize="noresize" to the <frame> noresize="noresize" to the <frame> tag.tag.
Add the <noframes> tag for Add the <noframes> tag for browsers that do not support frames.browsers that do not support frames.
Frame Tags Frame Tags
TagTag DescriptionDescription
<frameset><frameset> Defines a set of framesDefines a set of frames
<frame><frame> Defines a sub window (a Defines a sub window (a frame)frame)
<noframes><noframes> Defines a noframe section for Defines a noframe section for browsers that don’t support browsers that don’t support framesframes
<iframe><iframe> Defines an inline sub window Defines an inline sub window (frame)(frame)
Vertical FramesetVertical Frameset <html><html>
<frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm"><frame src="tryhtml_frame_a.htm"> <frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_b.htm"> <frame src="tryhtml_frame_c.htm"><frame src="tryhtml_frame_c.htm">
</frameset></frameset>
</html></html>
Horizontal FramesetHorizontal Frameset
<html><html>
<frameset rows="25%,50%,25%"><frameset rows="25%,50%,25%">
<frame src="tryhtml_frame_a.htm"><frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm"><frame src="tryhtml_frame_c.htm">
</frameset></frameset>
</html></html>
No FramesNo Frames
<html><html><frameset cols="25%,50%,25%"><frameset cols="25%,50%,25%"><frame src="tryhtml_frame_a.htm"><frame src="tryhtml_frame_a.htm"><frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_c.htm"><frame src="tryhtml_frame_c.htm"><noframes><noframes><body>Your browser does not handle frames!<body>Your browser does not handle frames!</body></body></noframes></noframes></frameset></frameset></html></html>
Mixed FramesetMixed Frameset
<html><html><frameset rows="50%,50%"><frameset rows="50%,50%"><frame src="tryhtml_frame_a.htm"><frame src="tryhtml_frame_a.htm"><frameset cols="25%,75%"><frameset cols="25%,75%"><frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_b.htm"><frame src="tryhtml_frame_c.htm"><frame src="tryhtml_frame_c.htm"></frameset></frameset></frameset></frameset></html></html>
Frameset with no resizeFrameset with no resize
<html><html><frameset rows="50%,50%"><frameset rows="50%,50%"><frame noresize="noresize" <frame noresize="noresize"
src="tryhtml_frame_a.htm">src="tryhtml_frame_a.htm"><frameset cols="25%,75%"><frameset cols="25%,75%"><frame noresize="noresize" <frame noresize="noresize"
src="tryhtml_frame_b.htm">src="tryhtml_frame_b.htm"><frame noresize="noresize" <frame noresize="noresize"
src="tryhtml_frame_c.htm">src="tryhtml_frame_c.htm"></frameset></frameset></frameset></frameset></html></html>
Navigation FramesNavigation Frames
<html><html>
<frameset cols="120,*"><frameset cols="120,*">
<frame src="tryhtml_contents.htm"><frame src="tryhtml_contents.htm">
<frame src="tryhtml_frame_a.htm" <frame src="tryhtml_frame_a.htm"
name="showframe">name="showframe">
</frameset></frameset>
</html></html>
Inline FramesInline Frames
<html><html><body><body><iframe src="default.asp"></iframe><iframe src="default.asp"></iframe><p>Some older browsers don't support <p>Some older browsers don't support
iframes.iframes.</p></p><p>If they don't, the iframe will not be<p>If they don't, the iframe will not bevisible.</p>visible.</p></body></body></html></html>
