Frames allow you to display two or more separate HTML documents in the browser window. Each frame can then be updated or have new documents loaded into them from any of the frames. A Framed layout can be useful for such things as a table of contents.
A Framed structure is made up of at least two documents; one or more frame document(s) and one or more HTML documents. Frames are generated by two HTML elements, the <frameset> </frameset> and the <frame> </frame>. A <noframes> </noframes> element can also be included for browsers that don’t display frames or visitors that have turned off frames.
A Framed document has the same basic structure as any HTML document, except that a <frameset> container replaces the <body> container. The frameset describes the sub-HTML documents, or frames, that will make up the page.
No HTML should be included within the <frameset> ... </frameset> elements.
A sample frame document;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<title>A basic frame document</title>
<frameset rows="44,*" frameborder="0" framespacing="0" border="0">
<frame name="banner" src="banner.html" marginwidth="0" marginheight="0" noresize>
<frameset cols="150,*" frameborder="0" framespacing="0" border="0">
<frame name="nav" src="nav.html" scrolling="no">
<frame name="content" src="main.html" scrolling="auto">
<a href=”main.html”>Click here for the main page”</a>
The frameset element attributes include:
- rows - indicate the size of each row separated with a comma based on the total screen size. The size can be absolute, relative or percentage.
- cols - indicate the size of each column and use the same format as rows.
- borders display differently in different browsers. Use “frameborder=0 framespacing=0” border=0 to remove borderlines from all the frames within a set.
- The border and bordercolor also display differently across different browsers and different browser versions. Use a thin frame with a solid background color as a work-around.
The frame element attributes include:
- src - sets the location of the default HTML document.
- name - sets the name of the frame to address it from other frames. There are 4 reserved names that cannot be used; _top, _parent, _self, and _blank.
- marginwidth and marginheight are used to control the left and right, top and bottom margins in pixels. Don’t include these attributes to allow the browser to automatically optimize the margins.
- scrolling can be yes, no or auto and controls whether a scrollbar appears in the frame window. Use caution with “scrolling=no” as you can’t be sure of the size of the visitors window.
- noresize added to a frame keeps visitors from adjusting the width or height of the frame.
- borders (see frameset borders above)
When creating a link you must always address the name of the frame that you want the document to appear in using the target=”” attribute. For example a link on the nav.html page that is meant to appear in the content frame would look like this;
<a href=”newdocument.html” target=”content”>New Document</a>
Without the target attribute the document will appear in the current frame.
To pop a framed document out of a frame use target=”_top”. The frameset of a document is considered it’s parent so to have a document appear in the frameset space use target=_parent”. To have the document appear in the current frame (default) use target=”_self”. To have the document appear in a new window use target=”_blank”. You can also reference the name of a currently open window using target=”open_window_name”.
Always use care when addressing another frameset document as the page can get quite messy if a framed document is accidentally opened within another framed document by a misplaced url or target.
Last update: January 5, 2014