A frame is a webpage in which the browser screen is separated into two or more parts, with different content in each part. Frames are a little hard to understand at first, because each "part" is a whole different HTML page, brought together in the same window.
Say you want a frameset with two different sections, one for the menu and one for the content. Like this:
| menu | content |
To do that you would make a different page for each section. Two pages, one for the menu, and one for the content. You don't need to worry about making them both fit into one browser window, they will wrap to fit automatically.
To put the two pages together, we make one more page, with code like this:
<html> <head> <title>whatever you like</title> </head> <frameset cols="20%,80%"> <frame src="menu.html" name="menu"> <frame src="content.html" name="content"> </frameset> </html>When you call this page up in your browser, it will bring together the two other pages you made into a frameset. To see an example, click here. A new window will pop up.
Notice how if you click on a link in the "menu" frame, it opens up in the "content" frame. This is called "targeting" the links, and is why we give each frame a different name. To open a link from the menu frame into the content frame, we would use this code:
<a href="aboutme.html" target="content">About Me</a>Where it says target="content", we would change "content" to whatever the name is of the frame we want the link to open up in. Otherwise, all the links would just open up in the menu frame.
Now, what does the rest of the frame code mean? cols="20%,80%" means that we want two columns, one 20% of the screen wide, the other 80% wide. You can put whatever percentages you like. You can also use pixels, like this:
<frameset cols="100,*">
Here, the first column is 100 pixels wide, and the second column is "*" wide, which means "the rest of the screen."
Here are a few more ways to use frames. The parts in bold are the parts you would change.
<html>
<head>
<title>whatever you like</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html" name="top">
<frame src="bottom.html" name="bottom">
</frameset>
</html>
|
| |||||
<html>
<head>
<title>whatever you like</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html" name="top">
<frameset cols="20%,80%">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset>
</html>
|
| |||||
<html>
<frameset cols="50%,50%">
<frameset rows="80%,20%">
<frame src="big.html" name="big">
<frame src="left.html" name="left">
</frameset>
<frameset rows="40%,40%,20%">
<frame src="top.html" name="top">
<frame src="middle.html" name="middle">
<frame src="bottom.html" name="bottom">
</frameset>
</frameset>
</html>
|
| |||||
Tips & Tricks
To force the page to have no scroll bar, no matter what the size of the frame, add scrolling="no" to the <frame>tags.
To prevent people from resizing your frames, add noresize="yes" to the <frame> tags.
To get rid of the margins, add marginwidth="0" marginheight="0" to the <frame> tags.
To change the color of the borders around the frames, add bordercolor="red" to the <frameset> tags. Change "red" to whatever color you like.
To get rid of the borders around the frames, add frameborder="0" border="0" framespacing="0" to the <frameset>tags.
To link a page to the whole browser window, rather than to a specific frame, add target="_top" to your <a href>tags.
Coding Tutorials 
Hosting Tutorials 
Software 
Design Tutorials 
Site Tools 
0 Comments:
Post a Comment