Back to Section Main

Here are some examples of how to create framed pages (using tables to represent how a framed page might appear). On the right hand side, you'll find a representation of what some sample framed pages might look like. Below these examples, you'll find the HTML code that would be used to create a framed page similar to the example and description. This HTML code can be copied from the text box on the right and used to create your own framed pages. On the left side, you'll see descriptions of some of the various options available when using frames.
Descriptions Examples and sample HTML code
A basic framed page with two frames, the top frame being 50 pixels high, (which in this example is being used to display a hypothetical navigation bar), the bottom frame being used as the main display area. This framed page actually consists of three pages, the first one being the page that actually has the code on the right, a second page called navbar.htm which would be displayed in the top frame, and a third page called main.htm which would get displayed in the larger, bottom frame.

Some things to note:
  • BASE TARGET="main": This command in the HEAD section tells the browser that any linked page should be displayed in the main display frame, which in this case has been named main. Using a BASE TARGET is optional, but it's a convenient way of providing a default frame to which all linked pages will be displayed.
  • FRAMESET ROWS="50,*": The FRAMESET tag goes where the BODY tag would normally be. The ROWS attribute specifies that this page is to have two frames; the top frame being 50 pixels high, and the bottom frame taking the remaining browser window space. Either ROWS or COLS are required here.
  • FRAME SRC=: The first FRAME tag identifies the name of the page (navbar.htm in this example) that is to be loaded into the top frame. The second FRAME identifies the name of the page (main.htm in this example) that is to be loaded into the large, bottom frame. Also notice the NAME= option on the second FRAME tag. This assigns a name to the frame (main in this example) so that it can be TARGETed by hypertext links.
  • NOFRAMES: This container tag allows you to provide a message, alternate text, or a link to those visitors that do not have a frames capable browser.
Navigation Bar

Frame NAME="main"

All links in the Navigation Bar would get displayed in this frame.





Now for a slightly more complicated example, let's divide up the large, main frame into two frames. This would be done by nesting FRAMESETs, can can be accomplished by adding only three lines of HTML code.

The new lines:
  • FRAME SRC="banner.htm": This tells the browser to load a page named banner.htm into the topmost frame.
  • FRAMESET COLS="50,*": Starts a new, nested FRAMESET that's used to divide the large, main frame into two side by side frames. the COLS attribute defines one frame as being 50 pixels wide, while the other frame will take up any remaining browser window space.
  • /FRAMESET: The one right before NOFRAMES closes off the new FRAMESET.
Using the TARGET attribute on your links (HREF) in the "banner" FRAME, you could also have links in it display pages into the "navbar" frame. To do this, you would first have to give the "navbar" FRAME a NAME. For example:

<FRAME SRC="navbar.htm" NAME="navbar">

Next, in the banner.htm page, you would add a TARGET to any links you want to be displayed in the "navbar" frame. For example:

<A HREF="mypage.htm" TARGET="navbar"> click here </A>

When a visitor clicks on "click here", mypage.htm would be displayed in the "navbar" frame.
Banner
n
a
v
b
a
r

Frame NAME="main"

All links in the Navigation Bar would get displayed in this frame.








©1999-2001 Prodigy Communications Corporation | Privacy Policy | Trademark Notices
Jump to top of page