|
|
Home » HTML » Article
Creating Navigation with Frames
|
| Article by: |  Jeff Anderson ( 1362 ) (3/25/2002) |
|
| Sponsored by: | FindMyHosting - Web Hosting Search |
| 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: 34065 times |
Rating (54 votes): |
|
3 out of 5 |
|
|
|
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:
<HTML>
<HEAD><TITLE>My First Frame Page</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="navigation_page.htm">
<FRAME SRC="content_page.htm">
</FRAMESET>
</HTML>
|
|
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.
|
|
View highlighted Comments
 User Comments on 'Creating Navigation with Frames '
|
Posted by :
 Archive Import (raz) at 07:08 on Thursday, June 05, 2003
|
Please Bare With Me As I Am Updating
| |
|
Posted by :
Archive Import (BYRON) at 13:30 on Thursday, June 12, 2003
|
HOW A IMAGE IN A FRAME PEGAR WITH THE BORDER PLEASE??
| |
|
Posted by :
Archive Import (Joel) at 17:08 on Sunday, July 27, 2003
|
Your link "specifying frames", doesn't work. How do do make a link in the nav bar, without the new page opening in the nav frame.
| |
|
Posted by :
Archive Import (K) at 00:33 on Wednesday, August 13, 2003
|
Hello, I need to know how to make links to my page, from my page. Like having links that change the content in just my text box. Rather than opening another page or window. Or "To Top Of Page" button links. Can you please help me? Please and Thank You! :)
K
| |
|
Posted by :
Archive Import (jason) at 05:39 on Tuesday, August 26, 2003
|
i need to see your specifying frames page but it is not working. I cannot get my pages to appear in the frames, can you help me as this frames idea i great......
email me at jtriphook@hotmail.com
thx alot :)
| |
Posted by :
 aznfantasi at 21:05 on Friday, November 21, 2003
|
i did everything you said, but my frames aren't in the right spots. my first frame, which should be navigation, is showing up in the content area, and nothing is showing up where the navigation should be. I don't know what to do! HELP ME!
| |
|
Posted by :
sureshkumar at 04:12 on Wednesday, March 03, 2004
|
<frameset cols="150,*">
<frame src="Left.htm">
<frame src="Right.htm">
</frameset>
<Added>
Try this code
| |
|
Posted by :
angad_1388 at 13:37 on Saturday, April 15, 2006
|
Hi,
Can you help me, I want to make navigation frames using checkboxes.
Is it possible, to select the frame by a checkbox and it will be
displayed on the other frame.
Thanks
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
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. |
|
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. |
|
Pre Tag
by Jeff Anderson
No need to reformat text files with line breaks and tabs if you use the pre tag |
|
ASCII characters and their codes
by Jeff Anderson
A full list of all the ASCII characters. |
|
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. |
|
Validate Date
by Kannadasan Ramiah
Validating Date entered in a text box, pure HTML page |
|
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. |
|
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 |
|
| |
