Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
Frames - An Introduction
Frames Page Generator
More Frames & Tables Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

Frames & Tables Tutorial
Part 2 - Frames

How Do Frames Pages Work?

Frames pages are basically an HTML file which breaks the browser window up into separate parts or frames. In each frame a different HTML file can be loaded. Links in one frame can then be used to change the content in any frame on the page. If a frame is not re-loaded, changes to the others do not affect it.

Frames In A WYSIWYG Program

The free WYSIWYG HTML editors are not particularly good at creating frames but you can do it using some of the more expensive ones. If your program does not have a frames option you will need to do the coding in HTML.

To create a frames page in FrontPage 97/98/2000 all you need to do is choose 'Frames Pages' in the new page dialog box (File, New, Page). It will really do the rest. You can change the size of the frames and set the target (the frame that is reloaded when a hyperlink is clicked) from the normal menus.

The two things you are likely to need to change are the frame borders and the option to resize them in the browser. These can be changed from the frame properties dialog box. To open this right-click on the frame you want to edit and choose frame properties. Turn off the option resizable in browser then click Frames Page Properties... and turn off the Show Frame Borders option.

FrontPage is actually very good at coping with frames and, if you are quite used to the program, youshould be able to use frames very easily.

Frames In HTML

To explain how to create frames in HTML code I will give you some sample code and then explain it. This code creates a page with a left frame for contents.

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset border="0" cols="150,*" frameborder="0">
<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>
<frame name="main" src="main.htm" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

I will now explain this code:

<html>
<head>
<title>My Frames Page</title>
</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar for every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should fill up the rest of the screen. This is a very versatile tag. You can use percentages instead of the values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links in it will open in the frame called main, the page to be loaded in the frame is contents.htm and that scrollbars should be used if needed. It also tells the browser not to allow the user to resize the frame. Other values which could have been used for scrolling could be yes and no. These would set the browser to always display scollbars or never display them respectively.

<frame name="main" src="main.htm" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>

This is the area where you can put the information to be displayed by browsers which don't support frames. It is a normal HTML page between the <body></body> tags.

</frameset>
</html>

This text c
loses the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To do this you add target="framename" to the hyperlink tag. For example to make a page load in the main frame you would use:

<a href="page.htm" target="main">Click Here</a>

You can also use:

_self - Opens in same frame
_top and _parent - Opens over the top of the frames page, removing the frames
_blank - A new window (not necessarily for frames pages).

Part 3

In the next partI will show you how to create tables.

© 1999 - 2001 FreeWebmasterHelp.com