Hypergurl HTML Frames Tutorial. How to make webpages using frames.





Summary: Frames make it easy to change one page and seeing that change occur over your entire website. But today frames are being slowly phased out for easier to use code such as css, server side includes and dynamic scripting.



How to make frames

When your visiting a site with frames you see the left frame and the right frame . There is also a hidden index page that keeps these two pages in their frames. The index page tells your frames what to do. It won't have any text or images on it that your visitor can see. Your index page is set up tell your visitor if their browser does not support frames and gives them a link to your main page.
The first step to making a framed page is to make2 regular pages saved as left.html and right.html
  • left.html is the page that will appear in the left frame.
  • right.html is the page that will appear in the right frame

Click here to see an example of my left.html

Click here to see an example of my right.html

Then make a page called index.html and insert the html script below. Parts of the script shown in red may be substituted for your own preferences.


<html>
<head>
<title>Your Page</title>
</head>
<frameset cols=
160,*>
<frame src="
left.html" name="leftside">
<frame src="
right.html" name="rightside">
</frameset>
<body>
</body>
<noframes>
<a href="
your main page.html">Your browser does not support frames. Click Here to enter my main Page</a>
</noframes>
</html>



In the 5th line, "160" is the width of the first frame (left or top). You can make this any pixel size you want. The second number is replaced with an asterisk. The asterisk tells the right frame to stretch all the way across the screen. This will make your frames compatible with all monitor / resolution sizes.

Click here to see an example of how your frames should look when you view your index.html


How to make a frameset with a top frame

To make a frameset with a top frame, call your two frame pages, top.html and bottom.html
Then change the 6th and 7th lines in the script to :

<frame src="top.html" name="top">
<frame src="bottom.html" name="bottom">



Related Tutorials

  • How to get rid of your frames border
  • How to get rid of your frames scroll bar
  • How to add links to my frames
  • Don't let visitors get stuck in your frames
  • Frameset with top and left hand side
  •  
    Search Site
    Custom Search





    Site design copyright 2000 - 2011 © Tanya Puntti Hypergurl.com