How do I make a basic frameset?
My advice is to stay away from frames. Search engines hate them, and you can do the same layout with CSS. That being said, frames are pretty easy once you understand how they work. When you're looking at a page with frames you see the left frame and the right frame (example 4). What you don't see is the index page that keeps these two pages in their frames.
- index.html: This is the page that tells your frames what to do, it will not have any text or images on it that you can view. This index page is set up so that if someone has a browser that does not support frames, it has a link that will link to your main page. Your HTML should look like this (you can change the information in bold text):
<html>
<head>
<title>My Page</title>
</head>
<frameset cols=20%,80%>
<frame src="left.html" name="leftside">
<frame src="right.html" name="rightside">
</frameset>
<body>
</body>
<noframes>
<a href="your main page.html">Click Here</a>
</noframes>
</html>
- left.html: This page is a regular html page, you can name it left.html and this is the page that will appear in the left frame.
- right.html: This page is a regular html page, you can name it right.html and this is the page that will appear in the right frame when someone accesses your page.
- result: This is what your page should look like if you do it right =)
How do I add links to my left or top frame? In order to have your links on the left side or top of your frame link to a new page on the right side or bottom of your frame, you need to add this tag either to your image or text link (substitute your own information where you see bold text):
<a href="newpage.html" target="rightside">Name of your link</a>
You can also target any frame using this tag. Just substitute the name of your frame (rightside, leftside, bottom, top) in the "target=" portion of the above tag. If you don't target the right frame or bottom frame, your links will just open up in the same frame.
How do I get rid of my frames border? In the basic frames code (on the index.html page) substitute this tag:
<frameset cols=20%,80% border=0 frameborder=0 framespacing=0>
For this one:
<frameset cols=20%,80%>
How do I get rid of my frames scrollbar? On your index.html page, you need to add the "scrolling=no" tag to the "frame src" tag that has the frame you don't want to scroll, for example:
<frame src="left.html" name="leftside" scrolling=no>
<frame src="right.html" name="rightside">
You can also make sure that your frame cannot be resized if you include this tag in the frame src tag:
<frame src="left.html" name="leftside" scrolling=no noresize>
<frame src="right.html" name="rightside">
How do I set exact pixel widths for my frames?
On the index.html page, where you see the tag "frameset cols," instead of putting 20%,80% you can just remove the percentage sign and put in widths. Most often people use this kind of tag:
<frameset cols=160,*>
The first number, 160, is the width of the first frame (left or top). You can make this number any number you want. The second number is replaced with an asterisk. The asterisk tells the right (or main) frame to stretch all the way across the screen. If you use exact pixel widths for ALL your frames they will not fit on people's monitors properly because everyone has a different size, with different screen area settings.
How do I make sure people don't get stuck in my frames? There is nothing more annoying to me than getting stuck in someone else's frames when I'm surfing. If you're going to make a page with frames, you have to make sure you add this tag to any link that leaves your page (links, guestbook, etc.):
<target="_blank">
For instance, if you were linking to my page from your frames page you would put this tag on your page:
<a href="http://www.lissaexplains.com" target="_blank">
If you use the above tag, someone clicking on the link will leave your frames. This tag is VERY useful and I wouldn't make a frames page without it.
How do I make a frameset with a top frame? It's fairly easy to change your frames so your page is split up horizontally into a top and bottom frame, the top being the one with the links. The following html is what you would put on your "index.html" page (just make sure your links target the proper frame):
|
<html> <head> <title>My Page</title> </head> <frameset rows=20%,80%> <frame src="top.html" name="top"> <frame src="bottom.html" name="bottom"> </frameset> <body> </body> <noframes> <a href="your main page.html">Click Here</a> </noframes> </html> |
 |
Frameset with a top and left side frame:
|
<html> <head> <title>My Page</title> </head> <frameset rows="100,*"> <frame src="top.html" NAME="top"> <frameset cols="160,*"> <frame src="left.html" NAME="left"> <frame src="right.html" NAME="right"> </frameset> </frameset> <body> </body> <noframes> <a href="your main page.html">Click Here</a> </noframes> </html> |
 |
|
<html> <head> <title>My Page</title> </head> <frameset cols="160,*"> <frame src="left.html" name="left"> <frameset rows="85,*"> <frame src="top.html" name="top"> <frame src="right.html" name="right"> </frameset> </frameset> <body> </body> <noframes> <a href="your main page.html">Click Here</a> </noframes> </html> |
 |
How do I add a solid color border around my frames? Adding a border to your frames is easy, just include this tag in the "frame src" tag on your index page, you can have it on one frame or all of your frames:
style="border: 5 solid #000000"
Substitute your color # where you see the 6 zeros above in bold. You can also change the thickness of the border by changing the number "5" to another number in the above code.
Your "frame src" tag would look like this:
<frame src="right.html" name="rightside" style="border: 5 solid #000000">
How do I make iframes? Inline frames are frames that can be placed anywhere on your page by absolute positioning. If you have a newer browser, you'll be able to see the following example:
Use the following code to create your frame:
This is the code for a regular iframe:
<IFRAME name="inlineframe" src="yoururl.html" width=200 height=200 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME>
And this is the code for an iframe with transparent scrollbars (IE only):
<IFRAME name="inlineframe" src="yoururl.html" width=200 height=200 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto style="FILTER: chroma(color=#ff0000)" allowtransparency="true"></IFRAME>
To make your iframe scrollbar transparent, you need to add this tag, remember that this only works in the IE browser: style="FILTER: chroma(color=#ff0000)" allowtransparency="true" to your iframe tag.
- Make a style sheet that will appear on each of the pages that appear in your iframe. Include scrollbar colors, the instructions can be found on my css page. For my demo, I made all of the scrollbar colors red (ff0000) except for the highlight color, and shadow color, I made those black. I made the others red, because that is the color I will make transparent.
- Add the filter tag, style="FILTER: chroma(color=#ff0000)" allowtransparency="true", to your tag with the iframe code in it. Change the number in bold to reflect the color YOU want to make transparent. Since I chose to make the color red transparent, I put the hex code "FF0000" in my tag. I chose red, because red does not appear on my site, if I chose my yellow color, ALL yellow would be transparent and it would not look the way I want it to. You have to choose a color that does not appear on your site.
- Add a background to all of your pages that will appear in the frame.
- Add the SAME background if you like to the page that the frame is called from (like my demo).
<a href="inline.html" target="inlineframe">Your link name here</a>
Of course, all the information in bold can be changed to have your own information.
Frames FAQ: I will be adding the most frequently asked questions that I receive about frames here.
- Why does my link open up in the same frame? Links will open up in the same frame if you do not target the frame you want the link to appear in. For instance, if your links are on the left and you want them to open on the right, your tag needs to look like this: <a href="http://address you want to link to" target="rightside">your link name</a> or it will not open in the left frame.
- Why does the "home" link on my frames page open up my right and left frames in the right frame? This happens because you called your "home" link "index.html." You need to name the link whatever your right main frame page is called, like "right.html" or "main.html" and then the frame won't repeat itself.
Copyright 1997-2016 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.
