The Webmaster's Resource

Main Page Main Page

HTML Tutorials HTML

Design Tips Style

Promotion Tips Promotion

Links Links
      Web Rings
      Credits

Send the Webmaster E-mail Feedback
      Critique
      Sign In
      Guestbook



Sponsored by GeoCities
Get your
FREE web site!

 

<Frames>

 
     OK, lets just dig into this subject.  Check out the following code.  I've used indentation to show the nested frameset better.  You don't have to indent like this, browsers ignore it, but it is much easier to read.

<HTML>
<HEAD>
<TITLE>The Webmaster's Resource</TITLE>
</HEAD>

<frameset cols="170,*">
[pixel]<frame src="controls.htm" name="controls">
[pixel]<frameset rows="*,75">
[pixel]<frame src="intro.html" name="lesson">
[pixel]<frame src="credits.htm" name="credits">
[pixel]</frameset>
</frameset>

</HTML>



Hey, where are the <BODY> tags?   In a frame definition
they are replaced by the <FRAMESET>
tags.


[pixel]Which gives us something that looks like this.

Frames Example



[pixel]When you design your web site it helps to draw out your frames.  Notice that the frames can be in columns, rows, or a combination, like in this example.  When you write your frame definition start with the frame that goes all the way across the browser, either from top to bottom or from side to side.  Here my frame definition begins with the column definition because the left column, frame #1, goes all the way from top to bottom.  To define the columns you use the cols= attribute.  The data in parentheses after the attribute defines the width of each column to be displayed in the browser.  This data can be in three different formats.

1.  A number indicating the number of pixels wide you want the column to be.
2.  A percentage indicating the percentage of the browser window width that you want for your column.
3.  An asterisk indicating that you want the column to fill up what ever space is left.

[pixel]So <frameset cols="170,*">, defines two columns.  The first is frame #1 and it is 170 pixels wide. The second holds frames 2 and 3 and takes up the rest of the browser window.

[pixel]OK, you with me so far?  After you've defined your frameset you need to tell the browser what to name the frame and what to display in it.  In the format, <frame src="file.htm" name="framename">.  The src= attribute defines the file to be displayed in that frame.  The name= attribute gives the frame a unique name. [pixel]This will become important later on.  So frame #1 is named controls and will display the file controls.htm.  Frame #2 is named lesson and displays the file intro.html.  Finally, frame #3 is named credits and displays the file credits.htm.

[pixel]If your web site only has two columns to define then you would include a second <frame> tag with a different src file and a different name.  However, in this case my right column is divided into two rows (Frames #2 and #3).  We can define this by nesting another frameset definition, for rows, inside the first frameset definition.  Make sure you put the second frameset definition in the place of the definition for the column it is replacing.  Defining rows works just the same as defining columns just use the rows= attribute instead of the cols= attribute.

Links that open pages in another frame

[pixel]You may have noticed, if you've been playing with frames that the links in an HTML document only open pages within that frame.  Well, if you've gotten this far into this site you know that that doesn't have to be.   Use the target= attribute in yout links to tell browsers which frame you want the page to open in.   Use the format,

<a href="file.html" target="framename">myLink<a>.

[pixel]I told you the frame name would be important.  The <BASE> tag lets you set the target for all of the links in an HTML document.  It must be used within the <HEAD> section of the file.  Use the format:

<base target="framename">


Reserved Target Names

[pixel]HTML reserves certain target names for special purposes.  Here is a list with definitions.

Reserved Targets
target="_blank" Forces the file being loaded to be loaded into a new window.
target="_self" Forces the file being loaded to be loaded into the same window that held the link.
target="_parent" Forces the document to be loaded into the <FRAMESET> parent window.  If no parent is available then target="_self" will be used.
target="_top" My favorite.  This one forces the document referenced by the link to be loaded in the full browser window.  If you have a link to another web site be sure to include this in the link.  It's poor form to have a link to an external site that will only load into one of your frames.   I hate it when that happens!!!


     To learn more about HTML, Site Design and Management, check out the books in my Book Store.


Back Main Page Next
    Copyright © 1997 by Jim Meeker
    E-mail: jim314@oocities.com    ICQ: 724480
Updated on: 1/17/98 21:01:34 CDT