Example Page 9

 

For this example we are going to change our menu page into a frames menu page. I have decided to go with the banner and contents frame layout. This is what my frame page layout will look like:

Banner and Contents

Feel free to choose any other layout you want, but keep in mind that you would have to place at least two, or, in this case, three pages on the screen to get the desired effect. To create my frame layout though, we have to create four new HTML documents. Do not delete or edit your current menu page, since we are going to change our welcome page to allow the user to choose whether they want to view a frame or non-frame version of your personal homepage. Your existing menu page will thus be your non-frame version.

Let's start off by creating our title frame page. For this I'm going to create a page with my title image and a burning torch on both sides, remember that this is accomplished again with a table. Save the document as title.html, and this is what the code should look like:

<HTML>
<HEAD>
<TITLE>Title Frame</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
<TABLE ALIGN="center" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80%">
<TR>
<TD WIDTH="33%" VALIGN="middle" ALIGN="center">
<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"><BR>
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</TD>
<TD WIDTH="33%" VALIGN="middle" ALIGN="center">
<IMG SRC="title.jpg" WIDTH="250" HEIGHT="82" ALT="The Tentacle Homepage">
</TD>
<TD WIDTH="34%" VALIGN="middle" ALIGN="center">
<IMG SRC="fire.gif" WIDTH="30" HEIGHT="52"><br>
<IMG SRC="torch.gif" WIDTH="50" HEIGHT="82">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
 
screen.gif (1270 bytes) Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

Next is our menu frame. Create the same menu options as mentioned in Example Page 6. You can align the menu options any way you want, but I put them to the left of my page. In case you can't remember the menu options, they are: "ABOUT MYSELF" - (about.html), "LINKS" - (mylinks.html), "SIGN MY GUESTBOOK" - (guestbk.html) and "E-MAIL ME" - (mailto:contact_tentacle@hotmail.com), with the links in brackets of course. Remember to open the links in the body of your frame page. In my page I named my body frame "contents" so my target has to point to that. Save your menu document as frmmenu.html, the code should look something like this:

<HTML>
<HEAD>
<TITLE>Menu Frame</TITLE>
</HEAD>
<BODY BACKGROUND="bricks.jpg">
<P ALIGN="LEFT"><A HREF="about.html" TARGET="contents"><FONT FACE="Arial" SIZE="3" COLOR="#008000"><B>About Myself</B></FONT></A></P>
<P ALIGN="LEFT"><A HREF="mylinks.html" TARGET="contents"><FONT FACE="Arial" SIZE="3" COLOR="#008000"><B>Links</B></FONT></A></P>
<P ALIGN="LEFT"><A HREF="guestbk.html" TARGET="contents"><FONT FACE="Arial" SIZE="3" COLOR="#008000"><B>Sign My<BR>Guestbook</B></FONT></A></P>
<P ALIGN="LEFT"><A HREF="mailto:contact_tentacle@hotmail.com"><FONT FACE="Arial" SIZE="3" COLOR="#008000"><B>e-mail Me</B></FONT></A></P>
</BODY>
</HTML>
screen.gif (1270 bytes) Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

For the body of my frame page, I'm going to use my about document. This is the page I created in Example 5, and which I saved as about.html.

And last, but not least, our frame page has to be created to tie all of this together. Create a new document and save the file as framepge.html.

<HTML>
<HEAD>
<TITLE>Body Frame</TITLE>
</HEAD>
<FRAMESET FRAMESPACING="0" BORDER="false" FRAMEBORDER="0" ROWS="169,*">
<FRAME NAME="title" SCROLLING="no" NORESIZE SRC="title.html">
<FRAMESET COLS="182,*">
<FRAME NAME="menu" TARGET="contents" SRC="frmmenu.html" SCROLLING="no" NORESIZE>
<FRAME NAME="contents" SRC="body.html" SCROLLING="auto" NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY>
<P>This page uses frames, but your browser doesn't support them.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
screen.gif (1270 bytes) Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in.

Just a reminder to keep all your HTML and other related files in the same directory on your computer. If you don't you have to make sure your links point to the file with the correct path, otherwise your browser won't find the files and will display an error page.

 

[Return to Tutorial]

Introduction | Basic Tags | More HTML Tags | List Tags | Adding Graphics | Creating Links | Adding Forms | Adding Tables
Creating Frames | Multimedia | Uploading Files | Downloads | Questions & Answers | Useful Links | e-mail Me
 
Example Page 1 | Example Page 2 | Example Page 3 | Example Page 4 | Example Page 5 | Example Page 6
Example Page 7 | Example Page 8 | Example Page 9 | Example Page 10
 
Color Chart | HTML Tester
bar.gif (1848 bytes)
Copyright © 1999 - 2000 Green Tentacle. All rights reserved. This tutorial is protected by SA and international copyright laws.
1