Frames tutorial

This is actually a tutorial on how to make frames. Some people with web sites sometimes come to have too many pages, and visitors have to click the "Back" button of their browser every time they want to change the page, or even the "reload" button. Three of my visitors complained about this in my site. The best thing I could do was to put an index page, which had the list of the cars at each page. Now, I've added frames, which is the best solution to this problem. If you are here, you probably want to know how to put frames. Well you've come to the right place.

Just follow the steps: (I recommend you to disconnect for the time you stay here)

Step 1

Let's start by creating three pages. You can use Windows' Note pad for this. One page for each frame. Let's name them: ("menu1.html" "menu2.html" and "menu3.html"). You may put just the basic contents. The three of them will look like this:


<html>
<body> <head> <title> put a title </title> </head>
This is menuX.html
</body>
</html>

Step 2

Ok. now we have what to put on those frames. Now let's create a page that will contain the frames. Let's name it: "frame.html". Always use Notepad. Put the following to the page:

<frameset rows="100%" cols="50%,*">
	   <frame name="frame1" src="menu1.html" scrolling="auto" marginwidth=20>
	   <frame name="frame2" src="menu2.html" scrolling="auto" marginwidth=80>
</frameset>

rows="100%" set the height of rows of a frame, but we will use only columns ("cols="50%"). The frame name is for frames to target each other. If you don't set a frame name, you won't be able to display a link to that frame. In this case, the left frame name is "frame1", and right frame name is "frame2".
"SRC" is the source page that will be shown in a frame. In this case we will use the ones we created in Step 1, {"menu1.html" "and menu2.html" ("menu3.html" will be our linked page)} "scrolling" may be set to "no", "yes" or "auto". It's better to set them to "auto" if your page has a lot of contents.

Step 3

Now the frames are done. But how about those that do not have a browser that supports frames? They'll have to see something. For those visitors do the next thing below the "</frameset>" tag:


<noframes>
Put something here. (A link to your page without frames, for instance)
</noframes>

Step 4

The next thing you'll want to know is: "How to make a link appear in another frame?" First go to "menu.html" and make a link to "menu2.html". That'll be something like this:

<html>
<body><head><title>Example of frame1</title></head>

This is "menu1.html"

Please visit <a href="menu3.html"> "menu3.html"</a>

</body>
</html>

...then, you'll have to add this: (target="frame2") to that link. Like this:


Please visit <a href="menu3.html target="frame2"> "menu3.html"</a>

Step 5

How to exit without frames? This is optional, but I really recommend you use it. Your visitors will appreciate it.

In any link you want to appear using all the window, put: (target="_top") instead of (target="frameX"). Example:


<a href="menu1.html" target="_top"> Go to menu1.html</;a>

Please note that if you use "_TOP" instead of "_top", you may get some problems.

Step 6

You're done. If you followed all steps just how it says, your page will look like this (remember to reconnect if you disconnected at the beginning)

If you want to know something that is not here, please e-mail me to : cena_@hotmail.com

O.K. Now you can go and start making your web site look pretty cool.

Go to my Home page