Frames

Frames - give you a way to organize and structure the content of your HTML documents by letting you create compound documents that the user can view within the main window of Internet Explorer. To use frames, you create a document that uses the FRAMESET and FRAME elements to divide the main window into rectangular frames (like panes in a window). Then, for each frame, you specify an HTML document that contains the content (text and images) to fill the frame. Floating frames enable you to open a browser within a browser. You can insert a floating frame in the same manner in which you can insert an image on an HTML page. You can specify the size of the frame and its border, and you can align it with other text and images on the page. With frames, you can create sophisticated layouts that add and mix sounds, video, animation, and colours. Using two frames in a single page, you can display an index in one frame and the content in another. For example, you can split the main window into two equal frames and fill these with different documents by using the following elements:

 
Two Frames  
<frameset cols="150,*">
<frame name="contents" target="main" src="frame1.html"> <frame name="main" src="frame2.html" target="_self">
</frameset>
   
Three Frames  
<frameset cols="24%,*">
<frame name="left" scrolling="no" noresize target="rtop" src="frame1.html"> <frameset rows="50%,50%">
<frame name="rtop" target="rbottom" src="frame2.html">
<frame name="rbottom" src="frame3.html" target="_self">
</frameset>
</frameset>
   
Four Frames  
<frameset rows="50%,72%,50%">
<frame name="top" scrolling="no" noresize target="contents" src="frame2.html">
<frameset cols="50%,50%"> <frame name="contents" target="main" src="frame1.html" scrolling="auto"><frame name="main" src="frame3.html" target="_self" scrolling="auto"></frameset>
<frame name="bottom" scrolling="auto" noresize target="contents" src="frame4.html">
</frameset>
   
Five Frames  
<frameset border="1"frameSpacing="0" rows="33%,50%,33%"><frame name="frame1" scrolling="auto" noresize target="frame1" src="frame1.html">
<frameset cols="34%,33%,33%">
<frame name="frame2" src="frame2.html" target="_self" scrolling="auto"><frame name="frame5" src="frame5.html" target="_self" scrolling="auto"><frame name="frame3" scrolling="auto" src="frame3.html" target="_self">
</frameset><frame name="frame4" scrolling="auto" noresize target="bottomframe" src="frame4.html">
</frameset>
   
No Borders  
<frameset border="0"frameSpacing="0" rows="33%,50%,33%" frameborder="0"> <frame name="frame1" scrolling="auto" noresize target="frame1" src="frame1.html"> <frameset cols="34%,33%,33%">
<frame name="frame2" src="frame2.html" target="_self" scrolling="auto"> <frame name="frame5" src="frame5.html" target="_self" scrolling="auto">
<frame name="frame3" scrolling="auto" src="frame3.html" target="_self"></frameset><frame name="frame4" scrolling="auto" noresize target="bottomframe"
src="frame4.html"></frameset>
   
Inline Frame  
<iframe name="I5" src="iframe.html"></iframe>

 
Inline Frame with Border  
<iframe name="I6" src="iframe.html" style="border: 10px solid #000099"></iframe>
Larger Border  
<iframe name="I7" src="iframe.html" style="border: 15px double navy"></iframe>
   
No Frame  
<body onLoad="if (self != top) top.location = self.location"> To prevent your site from being added in frames, add the above code to the body tag
   
   

 

frameset="" This lets the browser know that this is the start of the frame
cols="" This lets the browser know what size the columns of frame will be with either the star * or percentage %
rows="" This tell the browser what size each frame size is, either being the star * or a percentage %
frame name="" This lets the browser know what each frames is named
src="" This lets the browser know the location of each html file with in the frameset
bordercolor="" This lets the browser know what colour is used for the frame
scrolling="" This lets the browser know if a frame is able to scroll, either being yes, no or auto
norezise This lets the browser know if a frame can be resized
noframes="" This lets people visiting your page know if there are frames in the page that they can't view because of their browsers not being able to see it
marginwidth="" This lets the browser know the width of the frame
marginheight="" This lets the browser know the height of the frame
target="" This lets the frame know what page to link to with hyperlinks
bullet _main - opens in the main window
bullet _parent - same as main window
bullet _top - opens the frame in the top window
bullet _self - opens the link in the same window
bullet _blank - same as main window
frameborder="" This lets the browser know if the frame has a border and what size to display it
height="' This lets the browser know what height the inline frame will be
width="" This lets the browser know what width the inline frame will be
framespacing="" This lets the browser know what spacing there is between each frame
scrolling="" This lets the browser know if scrollbars will be used
bullet Yes
bullet No
bullet Auto - to let the browser add a scrollbar when needed
align="" Sets the alignment of the frame or of the surrounding text. The align-type can be one of these values:
bullet TOP Surrounding text is aligned with the top of the frame.
bullet MIDDLE Surrounding text is aligned with the middle of the frame.
bullet BOTTOM Surrounding text is aligned with the bottom of the frame.
bullet LEFT The frame is drawn as a left-flush "floating frame," and text flows around it.
bullet RIGHT The frame is drawn as a right-flush "floating frame," and text flows around it.
bullet Center The frame is drawn as a center-flush frame," and the text flows around it.

top of page

Last Updated
Monday, 27 September 2004