<HTML>
<HEAD>
<TITLE>PageTutor.com - HTML Tutorials - Javascript - How to make a Web Page: Frames Tutor - Templates</TITLE>
<META NAME="DESCRIPTION" CONTENT="Visit Pagetutor for web design, free html tutorials, frames, mouseover tutorial, javascript tutorial, password, and professional web design service.">
<META NAME="KEYWORDS" CONTENT="free html tutorials, MouseOver tutorial, javascript tutorial, pagetutor, web design, HTML, tables, frames tutorial, forms, password protection, gatekeeper, gate keeper, magic buttons, color picker">
<META NAME="GENERATOR" CONTENT="Grey Matter Web Pro - http://www.pagetutor.com/misc/grey.html">
<SCRIPT language="JavaScript"><!--
// navigation variables
PathAndPage = "pagetutor_frames_templates_main";
DepthOfPage = 3;
navline1 = "<P CLASS=\"ptnav\">You are here:\&nbsp\;\&nbsp\;\&nbsp\;";
navline2 = "<A CLASS=\"ptnav\" TARGET=\"_top\" HREF=\"http://www.pagetutor.com/\">Home</A> » ";
navline3 = "<A CLASS=\"ptnav\" TARGET=\"_top\" HREF=\"../../index.html\">PageTutor</A> » ";
navline4 = "<A CLASS=\"ptnav\" TARGET=\"_top\" HREF=\"../index.html\">Frames Tutor</A> » ";
navline5 = "<A CLASS=\"ptnav2\" TARGET=\"_top\" HREF=\"main.html\">Templates</A>";
navline6 = "";
navline7 = "";
navline8 = "";
navline9 = "</P>";
navline = navline1 + navline2 + navline3 + navline4 + navline5 + navline6 + navline7 + navline8 + navline9;
//--></SCRIPT>
<SCRIPT language="JavaScript" SRC="../../../tack/common.js"></SCRIPT>
<LINK REL="stylesheet" TYPE="text/css" HREF="../../../tack/common.css">

</HEAD>
<BODY MARGINHEIGHT="0" MARGINWIDTH="0" LEFTMARGIN="0" TOPMARGIN="0" BGCOLOR="#FFFFFF">




<!-- Header table start -->
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%">

<!-- NavLine -->
<TR><TD CLASS="blue" WIDTH="98%"><SCRIPT language="JavaScript">document.write(navline);</SCRIPT></TD><TD CLASS="white" WIDTH="1"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="13" BORDER="0" ALT=""></TD><TD CLASS="blue"><A CLASS="ptnav" HREF="http://www.pagetutor.com/">&nbsp;&nbsp;PageTutor</A><A CLASS="ptnav3" HREF="http://www.pagetutor.com/">.com&nbsp;</A></TD></TR>

</TABLE>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%">

<TR><TD CLASS="white"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="10" BORDER="0" ALT=""></TD></TR>

<!-- top ad -->
<TR><TD CLASS="white" ALIGN="center" VALIGN="top" WIDTH="96%">
<SCRIPT language="JavaScript">grabAd("randad");</SCRIPT>
</TD></TR>

<TR><TD CLASS="white" COLSPAN="3"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="6" BORDER="0" ALT=""></TD></TR>
<TR><TD COLSPAN="3" CLASS="mdgray"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=""></TD></TR>
<TR><TD COLSPAN="3"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="20" BORDER="0" ALT=""></TD></TR>
</TABLE>
<!-- Header table end -->


<DIV CLASS="nsb">


<!--content -->

<P>&nbsp;<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" ALIGN="center" WIDTH="530">
<TR BGCOLOR="#FF0000"><TD><IMG SRC="nothing" WIDTH="1" HEIGHT="1" ALT="" BORDER=0></TD></TR>
<TR BGCOLOR="#FFFFDD"><TD ALIGN="center"><FONT SIZE="4" FACE="trebuchet ms,arial" COLOR="#EE0000">This material is available to members only.</FONT></TD></TR>
<TR BGCOLOR="#FF0000"><TD><IMG SRC="nothing" WIDTH="1" HEIGHT="1" ALT="" BORDER=0></TD></TR>
<TR BGCOLOR="#F9F9F9"><TD><FONT SIZE="2" FACE="trebuchet ms,arial" COLOR="#00000"><P STYLE="padding:20px;">This site has an awful lot of free material. Unfortunately, this page ain't part of the free stuff. You are welcome to consider becoming a member which will allow free access anywhere around this web site.
   <BR>&nbsp;
   <BR>In addition to free access to ALL material and full versions of tutorials, member pages don't run ads, members can download full zip files of the tutorials for use offline, plus members have access to a site wide search facility. Oh, and the best part... if you use this site and you like this site, becoming a member is a good way to <I>support</I> this site as well.
   <BR>&nbsp;
   <BR><A HREF="http://www.pagetutor.com/membership/"><B>Click here to become a member.</B></A>
   <BR>&nbsp;
   </P></FONT></TD></TR>
<TR BGCOLOR="#666666"><TD><IMG SRC="nothing" WIDTH="1" HEIGHT="1" ALT="" BORDER=0></TD></TR>
</TABLE><P>&nbsp;








<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" ALIGN="center">
<TR><TD CLASS="navbarheading" ALIGN="center"><P CLASS="navbarheading">PageTutor - Frames Tutor</TD></TR>
<TR><TD CLASS="navbarwhite" ALIGN="center"><P CLASS="navbarwhite">&nbsp;&nbsp;&nbsp;Lessons:&nbsp;&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/index.html" CLASS="navbarwhite">Intro</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson01.html" CLASS="navbarwhite">1</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson02.html" CLASS="navbarwhite">2</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson03.html" CLASS="navbarwhite">3</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson04.html" CLASS="navbarwhite">4</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson05.html" CLASS="navbarwhite">5</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson06.html" CLASS="navbarwhite">6</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson07.html" CLASS="navbarwhite">7</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson08.html" CLASS="navbarwhite">8</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson09.html" CLASS="navbarwhite">9</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson10.html" CLASS="navbarwhite">10</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson11.html" CLASS="navbarwhite">11</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson12.html" CLASS="navbarwhite">12</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson13.html" CLASS="navbarwhite">13</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson14.html" CLASS="navbarwhite">14</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson15.html" CLASS="navbarwhite">15</A>&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/lesson16.html" CLASS="navbarwhite">16</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A 
HREF="../../../pagetutor/frames/templates/main.html" CLASS="navbarwhiteb">Templates</A>&nbsp;&nbsp;&nbsp;</P></TD></TR>

<TR><TD CLASS="mdgray"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=""></TD></TR>

<TR><TD CLASS="navbarwhite" ALIGN="center"><A 
HREF="../../../tack/barebones/barebone.html" CLASS="navbarwhiteb">Barebones HTML Guide</A><FONT SIZE="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT><A 
HREF="../../../tack/jokebreak.html" CLASS="navbarwhiteb"><IMG SRC="../../../tack/jokesmile.gif" HSPACE="2" BORDER="0" ALT="" WIDTH="8" HEIGHT="8"></A><A 
HREF="../../../tack/jokebreak.html" CLASS="navbarwhiteb" TARGET="_blank">Joke Break</A></TD></TR>

<TR><TD CLASS="mdgray"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=""></TD></TR>

<TR><TD CLASS="navbarwhite" ALIGN="center"><A 
HREF="http://www.pagetutor.com/membership/index.html" CLASS="navbarwhiteb">Print version available - Get the PageTutor book & CD</A></TD></TR>

<TR><TD CLASS="mdgray"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT=""></TD></TR>

<TR><TD CLASS="navbarwhite2" ALIGN="center"><A 
HREF="http://www.pagetutor.com/membership/index.html" CLASS="navbarwhiteb2">Become a member - Get more good stuff!</A></TD></TR>

<TR><TD CLASS="blue"><IMG SRC="../../../tack/empty.gif" WIDTH="1" HEIGHT="2" BORDER="0" ALT=""></TD></TR>
<TR><TD CLASS="white" ALIGN="right"><A HREF="http://www.pagetutor.com/"><IMG SRC="../../../tack/ptlogos/ptlogo_small.gif" WIDTH="118" HEIGHT="22" BORDER="0" ALT="pagetutor.com"></A></TD></TR>

</TABLE>




<SCRIPT language="JavaScript">grabAd("randad");</SCRIPT>
 
</DIV>


<!-- wall --><TABLE CELLSPACING="8" CELLPADDING="0" BORDER="0" WIDTH="98%" ALIGN="center"><TR><TD VALIGN="top">


<!-- QUICK SITE GUIDE start -->
<P><TABLE CELLSPACING="0" CELLPADDING="1" BORDER="0" CLASS="sidebar_nsb"><TR><TD>
   <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
   <TR><TD CLASS="green" ALIGN="center"><P CLASS="sidebarhd">QUICK SITE GUIDE</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb_sm" HREF="../../../tack/toc.html" TARGET="_top">SITE MAP</A></TD></TR>

   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/" TARGET="_top">HOME</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/members/index.html" TARGET="_top">MEMBER'S HOME</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/search.html" TARGET="_top">SEARCH THIS SITE</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="../../../pagetutor/other/faqs.html" TARGET="_top">FAQ</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/membership/index.html" TARGET="_top">MEMBERSHIP INFO</A></TD></TR>

   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="../../../pagetutor/index.html">PageTutor</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebarb" HREF="../../../pagetutor/makapage/index.html" TARGET="_top">Basic HTML Tutor<IMG SRC="../../../tack/star_red.gif" WIDTH="10" HEIGHT="10" HSPACE="4" BORDER="0"></A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebarb" HREF="../../../pagetutor/tables/index.html" TARGET="_top">Table Tutor</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebarb" HREF="../../../pagetutor/forms/index.html" TARGET="_top">Form Tutor</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebarb" HREF="../../../pagetutor/frames/index.html" TARGET="_top">Frames Tutor</A></TD></TR>

   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebar" HREF="../../../pagetutor/makapage/picker/index.html" TARGET="_blank">ColorPicker</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebar" HREF="../../../pagetutor/makapage/upload.html" TARGET="_top">Upload Your Page</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt">&nbsp;&nbsp;<A CLASS="sidebar" HREF="../../../pagetutor/exercises/index.html" TARGET="_top">Practice Exercises</A></TD></TR>

   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="../../../tack/barebones/barebone.html" TARGET="_top">Barebones HTML Guide</A></TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/membership/index.html" TARGET="_top">PageTutor Book & Companion CD</A> - take PageTutor anywhere.</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/idiot/idiot.html" TARGET="_top">How to keep an idiot busy</A> - a classic little amusement.</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/weblinks/index.html" TARGET="_top">Web Resources</A> - a listing of quality resources useful to any web author... graphics, javascripts, cgi, etc.</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/keeper/index.html" TARGET="_top">GateKeeper</A> - cool password protection with javascript.</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/buttons/index.html" TARGET="_top">Magic Buttons</A> - learn to make javascript mouseovers.</TD></TR>

   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/javascript/" TARGET="_top">Javascript Tutor</A><B STYLE="background-color:FFFF00;color:FF0000;font-weight:bold">&nbsp;NEW!&nbsp;</B> - A solid beginner's javascript course (print version available)</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/cssprimer/" TARGET="_top">CSS Primer</A><B STYLE="background-color:FFFF00;color:FF0000;font-weight:bold">&nbsp;NEW!&nbsp;</B> - Basic Style Sheets 101</TD></TR>
   <TR><TD CLASS="white"><P CLASS="sidebar_txt_nl"><A CLASS="sidebarb" HREF="http://www.pagetutor.com/metaprimer/" TARGET="_top">Meta Tag Primer</A><B STYLE="background-color:FFFF00;color:FF0000;font-weight:bold">&nbsp;NEW!&nbsp;</B> - Learn about META tags and effective search engine ranking strategies</TD></TR>

   <TR><TD CLASS="white" ALIGN="center"><P CLASS="sidebar00"><IMG SRC="../../../tack/empty.gif" WIDTH="180" HEIGHT="6" BORDER="0" ALT=""></TD></TR>
   </TABLE>
</TD></TR></TABLE>
<!-- QUICK SITE GUIDE end -->

<!-- wall --></TD><TD VALIGN="top">

<form name="mt" action="http://www.marketingtips.com/t.cgi/46811" method="GET" target="_blank">
<!-- OFFERS start -->
<P><TABLE CELLSPACING="0" CELLPADDING="1" BORDER="0" CLASS="sidebar_nsb"><TR><TD>
   <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
   <TR><TD CLASS="green" ALIGN="center"><P CLASS="sidebarhd">WEBMASTER OFFERS</TD></TR>
   <!-- padding --><TR><TD CLASS="white" ALIGN="center"><P CLASS="sidebar00"><IMG SRC="../../../tack/empty.gif" WIDTH="140" HEIGHT="6" BORDER="0" ALT=""></TD></TR>

   <!-- Red Cross & PayPal -->
   <TR><TD CLASS="white"><P CLASS="sidebarsm" ALIGN="center">
   <a href="http://www.paypal.com/cgi-bin/webscr?cmd=p/gen/relief-outside" TARGET="_top"><IMG SRC="../../../tack/redcross2.gif" alt="America Stands United: Click here to give to the American Red Cross Disaster Relief Fund using PayPal." border="0" WIDTH="460" HEIGHT="68"></a>
   </TD></TR>
   <!-- separator --><TR><TD CLASS="white" ALIGN="left"><P CLASS="sidebar00"><IMG SRC="../../../tack/dot_gray.gif" WIDTH="468" HEIGHT="1" BORDER="0" ALT="--------" VSPACE="2"></TD></TR>

   <!-- nomonthlyfees.com -->
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://service.bfast.com/bfast/click?bfmid=12768212&siteid=22315569&bfpage=home" TARGET="_top"><IMG SRC="../../../tack/hot2.gif" WIDTH="28" HEIGHT="22" BORDER="0" ALIGN="left">Lifetime Web Hosting</A> - 200Mb for $200&nbsp;+&nbsp;$35/annual&nbsp;fee - 10 Day FREE TRIAL - FREE Domain Name - 24/7 Tech Support - Site Creation Tool - <B>NoMonthlyFees.com</B></TD></TR>
   <!-- separator --><TR><TD CLASS="white" ALIGN="left"><P CLASS="sidebar00"><IMG SRC="../../../tack/dot_gray.gif" WIDTH="468" HEIGHT="1" BORDER="0" ALT="--------" VSPACE="2"></TD></TR>

   <!-- affordablehost.com -->
   <TR><TD CLASS="white"><P CLASS="sidebar_txt"><A CLASS="sidebarb" HREF="http://www.affordablehost.com/pagetutor.html" TARGET="_top">AffordableHost.com</A> - Quality web hosting from $45/year. Top flight service, unbeatable rates and 5 full featured hosting plans to choose from. PERFECT HOST FOR A SMALL BUSINESS OR ORGANIZATION.</TD></TR>
   <!-- separator --><TR><TD CLASS="white" ALIGN="left"><P CLASS="sidebar00"><IMG SRC="../../../tack/dot_gray.gif" WIDTH="468" HEIGHT="1" BORDER="0" ALT="--------" VSPACE="2"></TD></TR>


   <!-- padding --><TR><TD CLASS="white" ALIGN="center"><P CLASS="sidebar00"><IMG SRC="../../../tack/empty.gif" WIDTH="468" HEIGHT="8" BORDER="0" ALT=""></TD></TR>
   </TABLE>
</TD></TR></TABLE>
<!-- OFFERS end -->
</form> 

<!-- wall --></TD></TR></TABLE>

<CENTER><HR SIZE="1" WIDTH="95%" ALIGN="center" NOSHADE>
<FONT SIZE="1" FACE="verdana,arial,helvetica" COLOR="#993333">Invest in the future - Hug your kid today.</FONT>
<BR><IMG SRC="../../../tack/smiley2.gif" WIDTH="13" HEIGHT="13" ALT="" BORDER="0">
<P>&nbsp;</CENTER>




</BODY>
</HTML>
