The most basic set of frames requires 3 .html documents: 1) The
Frameset Document 2) A Source Page 3) Another Source Page
Here is an example of this simple frameset, laid out in a very
common format: The Left Menu
face=”Arial” size=”-1″>menu.html (Menu)
|
Stuff, stuff, stuff, stuff |
|||||
In this example, only the 2 Source pages will be visible to the
user, and the Menu Frame will remain onscreen while the Main frame is updated by the links
in the Menu. Lets look at the HTML source of each document to see how they work to achieve
this effect:
1. The Frameset – index.html (_top)
<html>
<head>
<frameset cols="30%,70%">
<frame src="menu.htm" name="Menu">
<frame src="main.htm" name="Main">
</frameset>
</head>
<noframes><a
href="main.htm">Click Here</a></noframes>
</html>
All of the html tags in this example are required.
We will look at some optional frameset effects in the next chapter.
Now lets examine each tag individually:
<frameset cols="30%,70%">
Open Frameset creating Columns. Make the First Column 30% of the screen width, and the
second column 70%
<frame src="menu.html"
name="Menu">
For the First Column, display the contents of menu.html, and give this frame the name
"Menu"
<frame src="main.html"
name="Main">
For the First Column, display the contents of menu.html, and give this frame the name
"Menu"
</frameset>
Close Framesets
<noframes><a
href="menu.htm">Click Here</a></noframes>
Older Browsers and Search Engines sometimes have trouble with
frames. Adding a link to your menu page will make sure these users can get to your
content!
2. The Menu Frame – menu.html (Menu)
The source frames of any Frameset are normal html documents that you
can design in any way you like. The IMPORTANT thing to remember is that each of your links
will need a TARGET, which tells the link which frame it is to be opened in. If you do not
specify a target for your links, the link will open inside the current frame.
For our example, we will need to specify the target "Main"
in each link, so that the link gets displayed in the correct frame:
<a href="next.html" target="Main">Link
3. The Main Frame – main.html (Main)
This page can be anything you desire. As in the above example, you
may want to create a link which updates the Menu frame, while leaving the Main page
onscreen. Simply specify your target as "Menu":
<a href="menu2.html" target="Menu">Link
4. Important things to know about Frame Targets:
The Target of a Link must correspond to the name=""
of a frame created by the frameset document. Frame names/targets are case-sensitive, so be
sure you are consistent.
The frameset document is known as the parent of any
particular frame. There are some special target names you can use to "clear"
your frames – or break out of frames altogether. These names are _top and _parent.
In the above example, targeting either _top or _parent will remove the
frames completely and display the link in the full browser window.
Borderless Frames
One of the major things now in frame usage is borderless frames. To make borderless frames, just do these two simple things. Add framespacing=”0″ border=”0″ frameborder=”0″ into your <FRAMESET> tag. Then, add marginwidth=”0″ marginheight=”0″ into your <FRAME> tags. Thats it!
Post Your Comment