[warebiz] :: HTML Made Simple :: Frames - Structuring Static Document Layout

You are here --> [Frames - Structuring Static Document Layout] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

TABLE OF CONTENTS
***************************************************************************************
    --> Getting Started with HTML - First Things First
    --> Ground Zero - Where Do I Begin?
    --> HTML Tags - It's All About Tags
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> HTML Tables - Far From Picnic Tables
    --> Displaying Images - Adding Life to Your Pages
    --> HTML Forms - Forming What?
    --> Image Mapping and Editing - Importance of Being Unique
    --> [Frames - Structuring Static Document Layout]

***************************************************************************************

Frames - Structuring Static Document Layout

Frames allow a web page to be viewed as a window divided into a specific number of subwindows. In the web page, each frame will represent an HTML document. This allows for a web page to be divided into a specified amount of rectangular regions with each region representing a different HTML document. Frames are commonly used when particular web content, such as a web page logo and navigational menu, needs to be displayed in multiple web pages. This allows for one frame region (such as the frame with the web page logo and navigational menu) to be static while other frame regions are being loaded with different web documents.

In a normal HTML document, the "body" section immediately follows the "head" section. When using frames, the "body" section will be moved to a "noframes" section where only browsers that do not support frames seek for information about the page. This calls for the normal "body" section of a frames web page to be replaced with a "frameset" section which defines the frame layout of the web document.

To define a web page using frames, web authors must use the opening and closing <frameset> </frameset> tags, which can also contain nested "framesets" and "frames" referencing the actual URL's of the web documents to be rendered in the frame cells. The <frameset> tag has the following attributes:

    row="#" --> specifies horizontal frame divisions represented by #; can be pixel values, percentage values, or "*" asterisk entry denoting whatever space is left.
    col="#" --> specifies vertical frame divisions represented by #; can be pixel values, percentage values, or "*" asterisk entry denoting whatever space is left.
    frameborder="#" --> specifies whether frame cells will have borders; 1 (default) representing show borders; 0 is often used with border="0" and framespacing="0"
    border="#" --> specifies the thickness of the border between cells; default value is 5.
    framespacing="#" --> specifies the thickness of the border between cells; default value is 5.

To specify the web documents to be rendered in each frame division, use the <frame> element, which must be placed inside the <frameset> </frameset> tags. The <frame> element has the following attributes:

    src="URL" --> specifies the URL of the web document to be placed inside the current frame cell.
    name="" --> declares a name for the current frame cell so <a>, <base>, <area>, and <form> can use their target="" attribute to render documents in the cell.
    frameborder="#" --> specifies whether frame cells will have borders; 1 (default) representing show borders; 0 no borders; also overrides <frameset> info.
    marginwidth="#" --> specifies left and right margins of the cell represented by #
    marginheight="#" --> specifies top and bottom margins of the cell represented by #
    scrolling="" --> specifies whether scroll bars will be displayed if needed; "yes" represents use scroll bars, "no" represents no scroll bars.
    noresize --> disables visitor ability to resize frame regions

The <noframes> element is used to provide information to browsers which do not support frames. A browser that supports frames will ignore text inside <noframes>, but a browser that does not support frames will ignore the <noframes> tags and display the internal text. Text inside the <noframes> </noframes> tags should be used to supply the visitor with an alert that the web page is constructed with frames and also a link to a web page that is not constructed using frames.

Frame cells can also be given a name for hypertext referencing techniques. This allows for hyperlinks to place certain web documents into certain frame cells. This is a common technique when using frame documents. This is accomplished by giving names to frame cells through the use of the name="" attribute of the <frame> tag. Then, the hyperlink can issue an operation using the target="" attribute of the anchor tag ( <a> ) using the name of the frame cell to use as the target value. If no target value is specified, the web document will be displayed in the current frame cell. Elements that are capable of using the target="" attribute are <a>, <base>, <area>, and <form>.

Frames also come equip will four pre-defined frame names used when specifying target attributes for hyperlinks. The predefined frame names are as follows:

    _blank --> causes the linked web document to be displayed in a new unnamed browser window
    _top --> causes the linked web document to be displayed in a full window space of the current browser window
    _parent --> causes the linked web document to be displayed in the frame cell occupied by the <frameset> parent of the current web document
    _self --> causes the linked web document to be displayed in the current frame cell

Study the following frame web document examples to see how all frame elements combine to complete the structure layout of a frames web document.

The following is a example of how frames can be used to design a simple links navigation as a left pane region of the web page with the leftover space of the document designated as the current web page's information.

----------------------------------------------------------------- <html> <head><title>Simple Web Page Using 2 Frames (Main Page)</title> </head> <frameset cols="20%, *"> <frame src="frame1.htm" name="contents" noresize> <frame src="frame2.htm" name="pageinfo" noresize> <noframes> <body> This web page is constructed using frames. Your web browser does not support frames. Seek, nonframes version. </body> </noframes> </frameset> </html> ----------------------------------------------------------------- <html> <head><title>Left Pane (frame1.htm)</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000"> <h3>Page Contents</h3> <br> <h5> Link 1<br><br> Link 2<br><br> Link 3<br><br> Link 4<br><br> </h5> </body> </html> ----------------------------------------------------------------- <html> <head><title>Right Pane (frame2.htm)</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000"> <h3 align="center">Information Page</h3> <br> <h5>Welcome. Here you can find....</h5> </body> </html> -----------------------------------------------------------------

Click on the following link to see the above code in rendered form: Frames Example 1

The following is an example of how frames can be used to display a website logo and title in the top region of the layout with a left pane region containing navigational links, and a right pane lower region used as the current web document information.

----------------------------------------------------------------- <html> <head><title>Simple Web Page Using 3 Frames (main page)</title> </head> <frameset rows="10%, *" > <frame src="frame22.htm" name="head" noresize> <frameset cols="20%, *" > <frame src="frame1.htm" name="contents" noresize> <frame src="frame2.htm" name="pageinfo" noresize> </frameset> <noframes> <body> This web page is constructed using frames. Your web browser does not support frames. Seek, nonframes version. </body> </noframes> </frameset> </html> ----------------------------------------------------------------- <html> <head><title>Top Frame (frame22.htm)</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000"> <h2 align="center">Web Page Logo / Title</h2> </body> </html> ----------------------------------------------------------------- <html> <head><title>Right Lower Pane (frame2.htm)</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000"> <h3 align="center">Information Page</h3> <br> <h5>Welcome. Here you can find....</h5> </body> </html> ----------------------------------------------------------------- <html> <head><title>Left Lower Pane (frame1.htm)</title> </head> <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#FF0000"> <h3>Page Contents</h3> <br> <h5> Link 1<br><br> Link 2<br><br> Link 3<br><br> Link 4<br><br> </h5> </body> </html> -----------------------------------------------------------------

Click on the following link to see the above code in rendered form: Frames Example 2

Frames are useful because they can make particular regions in a web document remain "static" while other regions render new web documents. This allows web designers to save time by not writing repetitive HTML code for multiple documents; they can simply "include" the HTML code as a "static" frame. On the other hand, there are serious drawbacks that have led many designers to avoid using frames. Firstly, without diligent updating, a website constructed using frames can lead visitors to "mystery" destinations, such as clicking on a link and being sent to a wrong web page. Bookmarking can become tricky because the address of the website will only show the top-level web document; normally, the frames specification page. This causes many visitors to bookmark web pages that they did not intend to bookmark. Also, older browser versions may not be able to support frame documents. Whatever the case may be, any website created using frames can also be created without frames, and the nonframes version will generally be more stable and efficient.

You have reached the end of the HTML Made Simple tutorial. If you have any questions concerning any content in the tutorial or have a question about particular HTML code used in the tutorial, please contact me about it. I'll be sure to make an attempt to get back with you as soon as possible. Happy coding and be sure to check back for updates!

Back to Top