 This site designed with Web Page Creator 32 HTML Editor ver. 6.0 |
| Introduction |
| Backgrounds |
| Fonts and Text |
| Accents |
| Lists |
| Images |
| Links |
| Tables |
| Frames |
| Forms |
| JavaScript |
| Great Books |
| Members Area |
Frames are one of the coolest things you can do with your web pages, but beware! If you are planning on registering your site with the major Search Engines, your pages will not be indexed properly because of the fact that your information will be on at least 2 different pages.
Frames is actually displaying more than one page at a time on the same screen. It can be 2 pages, it can be 10 pages. The use of Frames simply divides your browser's window into sections. You specify whether it is divided into rows, or colums, or both.
The idea is that one frame controls what appears on the rest of the screen. For our purposes here we'll start out simple with a top Frame (Row) that controls what appears in the bottom of the screen.
Get out the old text editor again, grab a steaming hot cup of Java (We'll do java later), this may take a while.
Step # 1: Create 3 separate pages that are simple, and fast, and save them in the same file folder called "Frames". Save the 3 pages as Alice.html, Carol.html, and Denise.html. They should simply look like this:
<HTML>
You can put whatever text and content on these pages that you want, change the colors, that's up to you.
Step # 2: Create a new page now called "Navigate.html" like so:
<HTML>
Step # 3: Create another page called "Window.html". Make sure that all 5 pages are in the same file folder called "Frames". Window.html should look like this:
<HTML>
Step # 4: Create a brand new document and name it "Girlfriends.html". It should look like this and use the <FRAMESET> and </FRAMESET> tags.
<HTML>
<FRAMESET ROWS="120,*"> - (specifies 120 pixels height and the " * "= the rest of the screen)
<FRAME SRC="Navigate.html" NAME="Navigate">
<FRAME SRC="Window.html" NAME="Window">
</FRAMESET>
<BODY>
</BODY>
Step # 5: Got all that? Good! Now just open up "Girlfriends.html" in your browser and click to your heart's content. You've made your first Frames pages!
Click here to view what it looks like!
You can also use a screen percentage to declare the height of the Top, Navigation frame. You could use for example,
<FRAMESET COLS=15%, 85%>
The * - asterix tells the browser "The rest of the screen" is to be used to display the other page in what's left of the window after the Navigation page's reserved space.
You can also declare that the navigation frame be in Columns rather than rows, left or right on the screen. To build a Frames layout with the navigation frame on the left of the screen simply use this sytax:
<HTML>
<FRAMESET COLS="100,*"> - (specifies 100 pixels width and the " * "= the rest of the screen)
<FRAME SRC="Navigate.html" NAME="Navigate">
<FRAME SRC="Window.html" NAME="Window">
</FRAMESET>
<BODY>
</BODY>
Of course you can adjust the width in pixels or in percentages any way you see fit to get the right look and feel for your pages. A little bit of "tweeking" goes a long way.
To divide up your screen even more, you can set up Frameset tags nested inside other Frameset tags. The following example shows how to set up a frames display that gives you the title frame on top, a navigation frame to the left, and the main display fram in the middle, lower-right.
<HTML>
<FRAMESET ROWS="100,*">
<FRAME SRC="Navigate.html" NAME="Navigate">
<FRAMESET COLS="100,*">
<FRAME SRC="Alice.html" NAME="Alice">
<FRAME SRC="Window.html" NAME="Window">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
You can also choose from a few more options to customize your frames layout by limiting or eliminating the viewers ability to scroll or resize the frames.
To eliminate the "scrollbars" simply include the "SCROLLING=NO" attribute in the FRAME Tags.
<FRAME SRC="BlahBlah.html" NAME="Blah" SCROLLING="NO">
To control the size and prevent a user from resizing your frames just include the NORESIZE attribute.
<FRAME SRC="BlahBlah.html" NAME="Blah" SCROLLING="NO" RESIZE="NO">
Many older browsers do not support frames at all, so it's a good idea to always include the use of the <NOFRAMES> and the </NOFRAMES> tags. What these tags do is present at least a few readable lines to viewers who are still using browsers without frames capability. Use them like this:
<HTML>
<FRAMESET ROWS="100,*">
<FRAME SRC="Navigate.html" NAME="Navigate">
<FRAMESET COLS="100,*">
<FRAME SRC="Alice.html" NAME="Alice">
<FRAME SRC="Window.html" NAME="Window">
</FRAMESET>
</FRAMESET> <NOFRAMES>
<BODY BGCOLOR=#FFFFFF>
Sorry, you are using a non-frames capable browser. You should get a real browser, they're all free now!
</BODY>
Frames provide a great degree of versatility for your web page design, but keep in mind that they'll not do you any good with Search Engines, and there is still a lot of people without frames capable browsers and many who simply keep their frames viewing switched off.
<HEAD>
<TITLE>Alice</TITLE> (and Carol and Denise, respectively)
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Alice</H1> (and Carol and Denise, respectively)
</BODY>
</HTML>
<HEAD>
<TITLE>Navigate</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>My Frames</H1>
<P><FONT SIZE=3 COLOR=#000000 FACE="Arial">My girlfriends (Use boyfriends if you prefer!)
<BR><A HREF="Alice.html" TARGET=Window>Alice</A>
<A HREF="Carol.html" TARGET=Window>Carol</A>
<A HREF="Denise.html" TARGET=Window>Denise</A>
<A HREF="Window.html" TARGET=Window>Home</A>
</BODY>
</HTML>
<HEAD>
<TITLE>Window</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>My Girlfriends!</H1>
</BODY>
</HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD>
</HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD>
</HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD>
</HTML>
<HEAD>
<TITLE>Girlfriends</TITLE></HEAD>
</HTML>
Images /
Links /
Tables /
Forms /
JavaScript
Cool Free Web Stuff /
Web Site Design /
Recommended Books /
WilRose.com Home