Note the first line DTD, it is different from the regular html pages, it uses "DTD HTML 4.01 Frameset" and the frameset defining the code does NOT have a <BODY> tag, nor any text or images.
Cols="x,x" and Rows="x,x" are attributes of the frameset tag. Cols stands for columns, so you cut up your page into as many columns as you need. Rows allows for setting up the rows. These values are put in as either pixel values or percentages of the screen width; with a comma between each value. The below example is set up to have two columns each at 50 percent of the page and two rows, the top one at 40 percent and the bottom at 60 percent of the page.
The actual content of the frames, the text and images, are stored in separate html files referenced by the <FRAME src => tags in the frameset. These pages are regular HTML pages. A framed "page" is made up of multiple html pages, some of which could be normal pages on their own if they weren't in a frame.
You will notice a link will only open in the frame it was clicked in unless you name your frames, then you can specify in the link which frame you want the page to open in.
Here is the code for naming frames: <frame src="pagea.html" name="something"> then you set up your link code to target a particular named frame and open the link in it. Here is the link code for targets: <a href="mypage.html" target="something"> My Page </a>
And to confuse you a little more there are even more uses of targets, if you want to click on a link and have it open free from any frames at all, use target="_top" and your frame layout will be left behind. This is also how you would open a new frameset. Don't forget the underscore ( _ ) it has to be there, to tell the browser that it's not the name of a frame, and 'top' must to be in lower case letters. If you want to open a new page in a completely new, pop-up window, use target="_new". This will keep your original page open in the background so your reader can come back to it after they have viewed the linked page.
Instead of having to add a target to every link in your navigation frame, just add <base target="name"> to the <head> part of the navigation page, where name is the name of the frame you're targeting. This will make it the default target for all links in the navigation frame.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>
Frame Tutorial
</title>
</head>
<frameset rows="40%,60%">
<frame src="pagec.html">
<frameset cols="50%,50%">
<frame src="pagea.html">
<frame src="pageb.html">
</frameset>
</frameset>
</html>
TIP - For borderless frames use this code:
<html>
<head>
<title>
Frame Tutorial
</title>
</head>
<frameset rows="40%,60%" framespacing="0" border="0" frameborder="0">
<frame src="pagec.html" marginwidth="0" marginheight="0" />
<frameset cols="50%,50%" framespacing="0" border="0" frameborder="0">
<frame src="pagea.html" marginwidth="0" marginheight="0" />
<frame src="pageb.html" marginwidth="0" marginheight="0" />
</frameset>
</frameset>
</html>
OK, now you have learned how to design frames, but here are some problems encountered when using frames.
So what can you use instead of frames, use tables or nested tables and you won't encounter any of the above problems.
© Copyright 2001,2002 Southern Twilight All rights reserved.