|
|
 |
|
|
|
Tutorials - Frames Explained!
Frames, they are a convenient way to list the contents of your web page. But many webmasters don't have them because they look hard and can't understand how they work. Well fear no longer. After reading this hopefully you will be able to master frames and implement them on your page.
Basically how frames work is the instead of an index file containing your first page, it contains the HTML code to made two pages load on the one screen. For a basic frame structure you need three files, your index.html, your page that you want to be the main page, which is normally the biggest and normally called main.html and the side menu page, normally called nav.html.
A good idea before you begin frames is to save your current index.html file as something else such as main.html, because your index.html file will contain your HTML code for the frames.
Copy the below code for column frames, frames which go vertically down your page and after you save your current index.html file as main.html, paste them in the index.html file.
<title>Java City 2000</title>
<head><base target="main"></head>
<frameset cols ="153,*" border=0>
<frame src="nav.html" name="nav" noresize omarginwidth=0 omarginheight=0 scrolling=auto>
<frame src="main.html" name="main">
</frameset>
</HTML>
</BODY>
Lets explain what all this means. This will be the only content in your index.html file. Change the title to your page title. The tag "<base target="main">" means that any link that is clicked on in any of your pages will automatically load that page in the frame or window called "main". If at a later time you want to load something from your "main" window and make it load in the side menu, simply add the tag "TARGET="buttons">" at the end of a href link such as "<a href="dog.html"Target="buttons">. Okay, back to it. The tag "frameset cols" means it will be in columns. If you want rows, change the "cols" to "rows". The number 153 is how many pixel's the side or nav window will be. The star means unlimited or the rest of the screen size for the other window. Leave these this size, but if you need more room in your side window, make the number bigger. Or, if you want your menu on the otherside of the screen, change the names of the files around. If you swap these around it will mean your main window will be 153 pixel's and your nav window will be unlimited. The border tag means how large a border you want, except this is ignored in IE3.
Now the hard part. The <frame src="nav.html" tag tells the browser what page to load in the nav window. Create this file called nav.html with your list your web page normally. The tag name="nav" is the name of the window. Change this to what ever you like but remember to change your base target line if you change the name in the name="main" tag so your files load in that named window. "Noresize" means people can't mover the frame, take this out if you want to allow this. "onmarginwidth=0" and "on marginheight=0" means the margins of the frames are none, these margins are similar to those in Word. "scrolling=auto" mean it will only have scroll bars if the page don't fit in the window. Change this to "no" if you don't want any scroll bars at all, but be aware that they won't be able to get to things on the page if it don't fit in the window size. Now, the next frame src="main.html" is the page that loads in the big window. It's name is "main" and the page that loads in this window is main.html. Then the </frameset> ends it all. And the </html> and </body> closes it all off.
If you want any link open in totally new window, put target="new" in the ahref link code.
Confused?
My advice to you is to save your existing index.html as main.html and then delete everything in the index.html file and paste the above frame code. Create a new file called nav.html which will be the little window or, your menu. Leave the frame code how it is and only change the title. This is basically the frame code I use and is perfect for any page.
If you want your windows that have your pages horizontal then change it to this code.
<title>Java City 2000</title>
<head><base target="main"></head>
<frameset rows ="153,*" border=0>
<frame src="nav.html" name="nav" noresize omarginwidth=0 omarginheight=0 scrolling=auto>
<frame src="main.html" name="main">
</frameset>
</HTML>
</BODY>
Note: In IE4, you can't put META TAGS before the frame code. What I did it place a new head at the end of my index page and put it there, then closed the head.
|
