ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || RAM 
Search Site:

Home » HTML » Article

Creating Navigation with Frames

Article by:  Jeff Anderson  ( 1362 ) (3/25/2002)
Bookmark us now! Add to Favourites
Email a friend!Tell a friend
Summary: The most popular use of frames is to allow a static navigation to stay on one part of the screen (in one frame) while the content changes in another.
Viewed: 55857 times Rating (69 votes): 
 3.2 out of 5
 Rate this Article  Read Comments  Post Comments

The most popular use of frames is to allow a static navigation to stay on one part of the screen (in one frame) while the content changes in another like so:


The user clicks the links on the navigation panel on the left and these bring up new pages of content on the right.

To acheive this affect in HTML you actually need three pages of code.
  • The navigation page
  • The content page
  • A 'parent' page containing references to the two 'child' pages.

This is how frames work. The page the user types into their browser address bar actually only contains the frame page information - no actual content. It will look something like this:

<HEAD><TITLE>My First Frame Page</TITLE>

<FRAMESET COLS="25%,75%">
<FRAME SRC="navigation_page.htm">
<FRAME SRC="content_page.htm">

The tag to produce your set of frame-based pages is, conveniently enough, called the FRAMESET. Within the frameset tag we specify the size of each frame. If you want a traditional vertical frame, as in the diagram above, use COLS="25%,75%" (or whatever percentage you like). If you want horizontal frames replace COLS with ROWS.

You can also user precise amounts in pixels. Another very common use is to specify one half precisely and leave the other to fill in any remaining space (bearing in mind users' screens may have a variety of proportions. In this case, the FRAMESET tag looks something like this:


with the * here indicating 'fill all remaining space with this frame.

Whether it's vertical, or horizontal, within the FRAMESET we have two FRAME tags, one for each of the frames specified in the frameset. This refer to the two html pages we want to use.

To complete your framed page, all you need to do is create an html page to display the navigation (long and thin if it's a vertical frame), and a more proportioned page for the content frame. Save them in the same directory as the Frameset page and use the names you specified in the Framset page. Type in the address of the framset page and you should see the navigation and content pages appear in the correct place.

Next you might want to look at our specifying frames tutorial to see how to make the links in the navigation frame change the content frame.

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
Rate this article:     Poor Excellent
View highlighted Comments
User Comments on 'Creating Navigation with Frames '
Image Submit Button
by Jeff Anderson
You can keep your forms from slipping into mundanity by substituting the default gray submit button to a colourful graphic of your choosing.
Parent _self _blank and _top Frame Target Specifications
by Jeff Anderson
How to specify frames and how to break out of them using standard link tags.
ASCII characters and their codes
by Jeff Anderson
A full list of all the ASCII characters.
Pre Tag
by Jeff Anderson
No need to reformat text files with line breaks and tabs if you use the pre tag
Image Rollovers
by Jeff Anderson
A bit of code to swap to different images on the page. You often see this on sites to display a rollover on the navigation buttons.
In-Line Frames (IFrames)
by Jeff Anderson
Inline frames or IFrames are the ones which appear in the midst of a standard page, but actually reference a totally separate url.
HTML Hspace and Vspace Image Borders
by Jeff Anderson
A lesser known feature in HTML is the ability to add a blank border around images both horizontally and vertically.
Validate Date
by Kannadasan Ramiah
Validating Date entered in a text box, pure HTML page
Creating Navigation with Frames
by Jeff Anderson
The most popular use of frames is to allow a static navigation to stay on one part of the screen (in one frame) while the content changes in another.
The OSI Reference Model - A Clear and Concise Illustration !
by James Opiko
The OSI Reference Model - A Resource For IT Certification Candidates & Networking Professionals

Recent Forum Threads
• Run a program both on windows and linux
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2
• Petrel.V2013.2
• Altair.HyperWorks.v12
• VoluMill.v6.1
• VoluMill.NEXION.6
• VERO.SurfCAM.v2014
• Schlumberger.Petrel.V2013.2

Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text

© Copyright 2001-2015