Home Site Map Gallery Your Two Cents Service Order


Home Webdesign Banners and Graphics Promotional Services HTML Tutorials Consulting Hosting Domain Registration WIN PRIZES!! FLASH

Get Your Free E-Mail Account

Isn't it time you
updated your site?




Not all pages are candidates for a frame style presentation and its use should be selective. Frames do, however, provide a super way of indexing data by allowing the user to have constant visibility of selectable information. Thoughtful layout is the first step. You need to decide what form or "look" you require before starting construction.
The <frameset> tag is the container for all code in the layout and must appear before <body> open and close tags. The attributes of <frameset> are columns and rows so you must decide how they apply to your layout.
For starters we will look at a page divided into columns and a page divided into rows. These can also be subdivided into columns or rows as shown here. Columns division uses <frameset cols=>; and rows, <frameset rows=>. Widths of columns (or heights of rows) may be specified in pixels or percentages of window size. Inserting an asterick (*) conveniently allows for use of remaining space.
(Two columns with two rows in column #1.)
col 1, row 1 col 2
col 1, row 2

The basic code:
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="col1row1.html">
<frame src="col1row2.html">
<frame src="col2.html">

(Two rows with two columns in row #1.)
row 1, col 1 row 1, col 2
row 2

The basic code:
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="row1col1.html">
<frame src="row1col2.html">
<frame src="row2.html">


Above examples demonstrated division by only two although additional division is possible and may be desirable for your project. In a following example, I use a window divided into three rows.

Elements of the Frame tag.

Name, scrolling, and noresize are three important attributes of <frame>. Applying a name to the frame, name=" ", provides its use as a target as I will discuss later, but may be omitted if the frame is not to be targeted. Scrolling is specified as scrolling="yes", scrolling="no" and scrolling="auto". Scrolling= "auto" lets the browser decide if scroll bars are required which may provide increased frame area for data. As an author, you may restrict browsers from changing frame size by adding noresize.


This example includes all elements of the <frame> tag.

<frameset rows="30,*,20">

<frame name="banner" scrolling="no"
noresize src="banner.html">

<frame name="content" scrolling="yes"
noresize src="content.html">

<frame scrolling="no" noresize src="toolbar.html">



The resultant layout.

30 pixel banner, no scrolling
"content", scrolling
20 pixel toolbar, no scrolling
A word of caution:

Not all browsers are "frames-capable" and Netscape has provided a <noframes> tag set to follow the <frameset> command. Those surfers with Netscape 2.0 will see the frames layout and others will view an alternate or normal page. The code for the "normal" page is bounded by the <noframes> and </noframes> tag set and includes the <body> and </body> tag set and all code therein.

A basic sequence of code is shown here.


<frameset cols="20%,80%">
<frame src="col1.html">
<frame src="col2.html">

<body bgcolor="#ffffcc">

col 1, 20% col 2
Viewed with a "frames-capable" browser
normal window
Viewed with a "noframes" browser








Removing borders from the frameset is simple. Include frameborder="no" framespacing="0" border="0" within the opening frameset tag. Those are zeroes, not "Ohs".


<frameset rows="50,*" frameborder="no" framespacing="0" border="0">
<frame src="aa.html">
<frame src="bb.html">
<frame src="cc.html">

Another example:





TIP: Setting border="1/2" will provide narrower borders and a "cleaner" look to your page.




For each <frameset> in the layout a separate html file is required for each <frame>. These are "normal" pages but must be sized to fit within the areas assigned in the layout. Each page is named to match that used in the layout and included in the <frame src="___.html"> tag. Since these html files are viewed in a smaller window pane (frame), attention must be given to the size of images and fonts used and the arrangement of text.

Hint: <table> tags combined with height and width specification provides good control of these smaller frames. The <nobreak> and <br> tags are useful in controlling text.

Here are a few ideas that might stir your imagination:

Frames can be used to keep footers and/or headers visible at all times. These may include a toolbar for selecting linked pages that will open in an adjacent frame above or below the toolbar.

Fixed or scrollable vertical linking lists can be made visible in a left or right frame that will display the selection in the adjacent frame while keeping the list visible.

Horizontally scrollable panoramas or lists are possible and may add interest to a presentation.



It is necessary to provide "control" within the frame that changes information in another frame. Consider a frameset of two columns, the left an index frame for making a selection and the right a content frame for displaying the selection. If the <frame> tag in the layout frameset included name="content", the controlling frame (index.html) should include <base target="content"> within the <head> tag. All links in the index.html frame will then target the "content" frame. Without this entry, it will be necessary to include target="content" within each of the links.


Example Layout:
<frameset cols="20%,80%">
<frame src="index.html">
<frame name="content" src="content.html">
Frame, index.html:
<base target="content">

Frame, content.html:


A review of the Netscape page on
frame syntax and targeting windows may be beneficial at this time to learn of other tag options that control how targeted frames respond.


1. When targeting a web page from a frame within the frameset and you wish for it to load in the 'full' window, include target="_parent" in the anchor for that link. Otherwise, the linked document will load in the frame.

2. If you wish for a targeted web page to open in a 'new' browser window that is layered over your current window, include target="_blank" in the anchor for that link. This is handy if you wish to keep visitors at your site. When they close the layered window they are back on your page.


Since framesets can be "nested", you can target a frame that is itself a frameset. This technique will allow you to change from one category to another, each with its own index frame and content frame. This is equivalent to targeting two frames with one anchor tag (link). Other tutorials, I've seen go into great detail to explain how to target two frames simultaneously, but thinking of this action as "nesting" seems easier and more straight forward to understand. Here is a complete starter kit with demo of code for nesting.Caution: Nesting framesets below one level is likely not too practical as each pane (frame) becomes smaller and dealing with text and/or graphics can be a challenge and provide diminishing return.


HTML Basics ] Headlines ] Paragraphs ] Links ] Free Links ] Mail-to ] Bold Italic ] Font Color ] Font Size ] Background Image ] Graphics ] Background Color ] Aligning Text ] Aligning Images ] HTML -Adding Audio ] [ HTML - Frames ] HTML Tables ] Meta Tags ] Forms ] Mouse Over ] Mega Search ] Browser Support ]

Webdesign ] Banners and Graphics ] Promotional Services ] HTML Tutorials ] Consulting ] Hosting ] Domain Registration ] WIN PRIZES!! ]

BizRate Customer Certified (GOLD) Site We are members of the Chamber or Commerce!

Verify our security!
Verify Our Security

Better Business!

AOL Members Choice Award


Webmaster-at-Large:     webmasteratlarge@planetwebdesign.com  

Planet T-Shirt Logo

  PO Box 22157  Knoxville, Tennessee 37933-0157

Telephone:    865-300-3804      FAX:    865-692-9247

PlanetWebDesign LogoCopyright © 1998, 1999, 2000 PLANETWEBDESIGN TECHNOLOGIES, Inc. All rights reservedBye Bye!!