1. Frames
Web Authoring

2. What are frames?
Frames technology allows you to have more than one web page on your screen at the same time.
Typically a frames site will include a navigation menu down the side or across the top, with the main or contents page filling the rest of the screen
There is a time and a place for using frames
If your strategy includes maximum visibility, frames are not the best solution.

3. To use Frames or Not to Use Frames? Some Advantages
Frames are one way to make your site easy to navigate because you can have a constantly visible navigation menu - and easy navigation is one of the most important aspects of website design.
Frames can make your site faster because you can include the site theme (images, logo, etc..) and the navigation menu in frames that do not have to download each time a visitor looks at a new page. Only the contents page changes.
Using frames can make site maintenance easy, especially if you have a large site. If for example you want to add a new page that is linked from the other pages on your site, you simply add a link on your navigation menu; you do not have to add links on each and every page.

4. To use Frames or Not to Use Frames? Some Disadvantages
The original argument was that not all browsers support frames, but this must be a very small percentage now. You can get around this by including an area below your frameset.
In this noframes area you can include information such as a simple navigation menu and a "Sorry your browser does not support frames" statement - OR if you want you can have a separate version of your website for non-frames browsers but be prepared to do twice as much work maintaining the site.
Search engines treat frames as hyperlinks to other pages, so if for example they manage to spider the frame containing your menu, they pages they index will be indexed but without the surrounding frames. If someone finds one or your pages on a search engine they will not be able to navigate around your site.
The most important disadvantage is that it is difficult to link to a particular page on your site other than the page containing the frames (usually the homepage) - this is a big disadvantage if you use to market your site and you want to link to different parts of your web site.

5. html code for Frames
Learning how to use frames is easy once you have mastered the concept that a hyperlink can lead to a page in its own frame (TARGET="self") the default option, or in another frame in the frameset
e.g.:(TARGET="main").

6. All this code only sets up your “holder” of your content
html code for Frames
All this code only sets up your “holder” of your content
<frameset rows="150,550" cols="150,590“>
<frame name="corner" src="page1.htm" scrolling="no" frameborder="0" noresize>
<frame name="header" src="page2.htm" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
<frame name="menu" src="page3.htm" marginwidth="0" marginheight="0 "scrolling="auto" frameborder="0" noresize>
<frame name="main" src="page4.htm" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" noresize>
</frameset>

7. What does all the code mean?
How many pages were made?
What was shown is a frames page that contains 4 other web pages which you would have to create.
page1.htm - where you could place your logo.
page2.htm - where you could place your header
page3.htm - where you could place a menu
page4.htm - where you could place the contents of your first page.

8. Linking the pages
The most difficult part of using frames is to get the links right on the menu page.
As well as specifying which page you want to link to, you also have to give the link the target frame you want the page to load in.
In the last example we have 4 frames, corner, header, menu and main. (you can name these whatever you want).
If you want to load a new page in the main frame your HTML link in the menu page should look like this:
<a href="page5.htm" target="main">Click here</a>

9. One note….
If you do not specify a target for your link, it will load in the current frame by default
so if you did not specify target="main" in the last example the new page would simply replace the menu page.
If you have links in the main content of your frames (page4.htm in the last example) you would not need to specify any target.

10. Still confused? That’s ok…
Remember, frame commands are used to break up the screen.
So, what goes in the frame cells?
Other pages go in the frame cells.
Frame commands allow you to display more than one page at the same time, in the same browser screen.
Here’s a sample:
If that table were a browser screen using FRAME commands, there would be THREE pages involved:
The frames page template that breaks up the page and "Page_A.htm", "Page_B.htm". The frame commands that would create a page like the example above would look like this:
<HTML> <TITLE>First Frame Page</TITLE>
<FRAMESET COLS="50%,50%"> <FRAME SRC="PAGE_A.htm"> <FRAME SRC="PAGE_B.htm"> </FRAMESET> </HTML>
PAGE_A.html  
PAGE_B.html  

11. What happened… There were two pages displayed at the same time.
I simply split the screen into two parts and placed a different page in each part.

12. Let’s get the terms down
FRAMESET starts any frame page. It alerts the browser that FRAMES are going here.
COLS denotes that you want columns.
In this case, I want two; each 50% of the screen. Can I do other percentages? Of course you can. Go nuts if you want, just separate the percentages by commas and get it all to add up to 99% or 100%. 99%?! Yes. You see, 33%, 33%, 33% adds to 99 and splits the screen three ways. The browser just distributes the final 1% over the three spaces. Dig?
FRAME SRC denotes the source of the frame. Frames read like you do, left to right. The first source offered will be hard left. I only have two frame sections so I need only 2 sources.
/FRAMESET ends the whole deal.

13. Q’s & A’s
Q: Do I have to write pages skinny enough to fit in only one-half of the page frame? A: Nope. The browser will cram it all in there, but it tends to look smooshy.
Q: What if my page is taller than the screen? How do I put in a vertical scroll bar? A: The browser will do it for you. Don't concern yourself with it. Write for content, not for frame.
Q: Columns are nice, but can I get rows too? A: Yes. Here's how you do it...

14. Adding Rows To Columns Perhaps you want this look: Enter this:
<FRAMESET>
<FRAMESET COLS="50%, 50%"> <FRAME NAME="A" SRC="cell_1.htm"> <FRAMESET ROWS="50%, 50%"> <FRAME NAME="B" SRC="cell_2.htm"> <FRAME NAME="C" SRC="cell_3.htm"> </FRAMESET>
</FRAMESET>
This is B
This is A
This is C
See any new html terms?

15. NAME command
In order for me to ask the computer to send data to another frame cell, I have to make a point of naming each of the cells.
That's the NAME deal in the example.
Name them whatever you want, but it's my suggestion to keep it simple -- like capital letters.

16. TARGET command
Now that you have the cells named, you can make any hypertext link inside of them targeted.
You're going to add a TARGET command to the usual <A HREF>.

17. Still confused? Let’s try it…
First we will work with just the name command

18. Enter this…save it as frameset.html
<head>
<title>Using Frames</title>
</head>
<FRAMESET>
<FRAMESET COLS="50%, 50%">
<FRAME NAME="A" SRC="cell_1.html">
<FRAMESET ROWS="50%, 50%">
<FRAME NAME="B" SRC="cell_2.html">
<FRAME NAME="C" SRC="cell_3.html">
</FRAMESET>
<body>
</body>
</html>
This is our “holder” for all of the pages and directs the other pages where to go!

19. Now what?
We need to make the three pages we referenced in the last html code
Cell_1.html
This will be the far left panel
Cell_2.html
This will be the top right panel
Cell_3.html
This will be the bottom right panel

20. Cell_1.html
<html>
<head>
<title>The Essentials for a Web Page</title>
</head>
<FRAME>
<FRAME NAME="A" SRC="cell_1.html">
</FRAME>
<body>
Let's put some link here to our other web pages we have made.
<br>
<a href=fruit.html">Fruit Page</a>
<a href=favorites.html">Favorites Page</a>
<a href=lists.html">List Page</a>
</body>
</html>
These links will only work if YOU saved your pages with these names!

21. Cell_2.html <html> <head>
<title>The Essentials for a Web Page</title>
</head>
<FRAME>
<FRAME NAME="A" SRC="cell_2.html">
</FRAME>
<body>
Let's put some junk here too!
</body>
</html>

22. Cell_3.html <html> <head>
<title>The Essentials for a Web Page</title>
</head>
<FRAME>
<FRAME NAME="A" SRC="cell_3.html">
</FRAME>
<body>
Let's put some junk in here.
<br>
</body>
</html>

23. A few more frame commands…
 Here are a few more commands that you can use in order to alter the frames on your page.
Each is fairly self-explanatory; stick the command, with whatever setting you want, into the FRAME command to see it work.
HEIGHT="--": This acts just like the height command in terms of an image. It defines the frame's height, in pixels or percentage.
WIDTH="--": Ditto this one in terms of frame width.
MARGINWIDTH="--": This sets the margin width in either pixels or percentage.
MARGINHEIGHT="--": Ditto, but on height.
SCROLLING="--": If the information inside the frame is too long to display, then a scroll bar will appear. You can stop it by adding this command set to "no."
ALIGN="--": This works like the align command in terms of images It denotes where text will appear when surrounding the frame.
NORESIZE: Add this, and the user will not be able to resize your frame.

24. What’s next?
Questions?
Your assignment