Frames and the Frameset

Frames help the developer split a page into two parts. One of the simplest frameset splits the page into main information and the menu.

Each window of a frameset contains an HTML document. Hence, a 2 frame "frameset" consists of three HTML documents. One is the frameset HTML, One is the Menu HTML, and the last is the Main Information HTML.

A file that is divided into frames is called a frame set. Each section of the frameset will have a name as well as an HTML document that loads into it. The name part is how the developer tells a page to load in a certain frame, a frame named "main" or "menu" or "info" or some other name.

1. Columns
2. Rows
3. Borders
4. Pages within the frameset
5. Naming frames
6. Mixing Columns and Rows
7. Other attributes
   1. Scrolling
   2. Noresize
   3. Noframes
8. Frameset Maker

1. Setting up the frameset in columns:

• A two frame frameset of two frames, one named "FRAME" (<frame name="FRAME">) the other named Window ( <frame name="Window">).
• the Frameset, or the collection of frames is divided into columns. In this case,

  <frameset cols="40,*"> </frameset>

  • the first column is 40 pixels (40),
  • and the second column is the remainder (*)

  OR

  <frameset cols="20%,*"> </frameset>

  • the first column is 20% of the browser screen
  • The second column is the rest, presumably 80%.

2. Setting up the frameset in Rows:

• A two frame frameset on the right consists of two frames, one named "Row1" (<frame name="Row1">) the other named Row2 (<frame name="Row2">).
• the Frameset, or the collection of frames is divided into rows. In this case,

  <frameset rows="40,*"> </frameset>

  • the first row is 40 pixels (40),
  • and the second row is the remainder (*)

  OR

  <frameset rows="20%,*"> </frameset>

  • the first row is 20% of the browser screen
  • The second row is the rest, presumably 80%.

3. Adding a border

• Framesets normally have a border on them. It is more the point to be able to adjust the border. The border is a simple attribute of the frameset. It can be set for a border from 0 (no border) to whatever thickness you desire.
• For differences in browsers you will need to use two diffrerent border codes

• frameborder="1"
• border="1"
• framespacing="1"

• Example of border code

<frameset cols="40, *" frameborder="1" border="1" framespacing=1"></frameset>

• For NO BORDER  set the following attributes in your frameset tag.

• frameborder="0"
• border="0"
• framespacing="0"

4. Adding HTML pages to your frameset frames

• To add HTML pages to each frame you must declare the frame with a frame tag (<frame src="your.html"> and set the document (your.html) using the src attribute.
• Example:

<frameset cols="40, *">
      <frame src="menu.htm">
      <frameset src="mainwindow.html">
</frameset>

In this example, the menu.html will load in the first frame that is 40 pixels wide. The mainwindow.html will load in the second frame of undetermined width.

5. Naming Frames

• Frames are names with a name attribute so that you can target where pages, images, animations, etc are to be loaded. When creating a frameset, use names that make sense like menu, content, ,main, banner, spacer, etc.
• Example

  <frameset cols="40, *">
      <frame scr="menu.html" name="menu">
      <frame scr="main.html" name="main">
  </frameset>

  In this example, you most likely will "target" the links on the menu frame to load into the main frame.

6. Mixing Rows and Columns

• Columns and rows can be mixed to form very elaborate framesets. The example on the right has rows declared first, then columns. You would write it as follows.

<frameset rows="20%,*">
    <frame src="row1top.html" name="banner">
    <frameset cols="100,*">
        <frame src="row2col1.html name="menu">
        <frame src="row2col2.html name="main">
    </frameset>
</frameset>

7. Other Advanced Options with fame sets

• Scrollbars- frame tag option

The normal state of the frame within the frameset is to add scroll bars, even if the frame does not scroll past the viewing area. These bars may be undesirable, particularly on frames that the scroll bar would occur in the middle of the frame set.

• Attribute name is scrolling
• Variables with scrolling are  yes or no
• Example of a frame with scroll bars
  <frame src="filename.htm" scrolling="yes">
• Example of a frame without scroll bars
  <frame src="filename.htm" scrolling="no">

• Resizing-  frame tag option

The normal state of the frameset allow the drag and drop of the frameset borders, thereby resizing the frameset on purpose or by mistake. You can turn this options off by simply adding a noresize attribute to your frameset.

• Example of frame tag with resizing turned off:
  <frame src="filename.htm" noresize>

 

• <noframes>- with all framesets

Some very old browsers do not allow the viewing of framesets. Also, some search engines will need content on a page to be able to index the page. These are the reasons we add the noframes tag <noframes> </noframes>

• All of the contents between the noframes tag set should be written in HTML. This can be a non frames version of the page, or simply a link to the menu frame so the viewer can navigate the site.
• Example:
  <noframes>
  Your browser does not support frames Click <a href="yourpage.html">here</a> to see the nonframes version of this page
  </noframes>