Lesson 4 -- Printer Friendly Version

INSTRUCTIONS:

To print this lesson exactly as it appears on your screen, wait a minute or two for the entire page to load. The download should not be considered complete until you see the copyright notice at the bottom of the page. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save a text-only version of this lesson, click your browser's File menu and choose Save As. Select a disk drive and folder to receive the file, and change the name of the file to less4.htm To view the file while you are offline, just go to the drive and folder you selected when you saved the file and double-click the file named less4.htm. Your browser will start and you will have access to the file.
If you use the Microsoft Internet Explorer browser and the Microsoft Outlook mail program, you can e-mail a text-only version of this file to yourself. To do so, click the File menu, choose Send, and then select Page by e-mail.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

Today, we're going to learn how to create a frame definition document that's a bit more sophisticated than those we worked on in our last lesson.
Before we can create our frame definition document, we'll need to create a bunch of real basic HTML files. The files you need to create are all listed below. You can just copy each of these files below and paste them into your favorite text editor. Then, save each file with the name indicated.
HTML File Number 1: logo.html
      <html>  
      <body BGCOLOR="#FFFFFF">  
      <H1 ALIGN="CENTER">Ace Industries</H1>  
      </body>  
      </html> 
HTML File Number 2: newlogo.html
      <html>  
      <body BGCOLOR="#000000">  
      <FONT FACE="Helvetica" COLOR="#66FFCC">  
      <H1 ALIGN="CENTER">Ace Industries</H1>  
      </FONT>  
      </body>  
      </html> 
HTML File Number 3: one.html
      <html>  
      <body BGCOLOR="#FFFFFF">  
      <H2 ALIGN="CENTER">Page One</H2>  
      </body>  
      </html> 
HTML File Number 4: two.html
      <html>  
      <body BGCOLOR="#009933" TEXT="#FFFFFF">  
      <H2 ALIGN="CENTER">Page Two</H2>  
      </body>  
      </html> 
HTML File Number 5: three.html
      <html>  
      <body BGCOLOR="#993300" TEXT="#FFFFFF">  
      <H2 ALIGN="CENTER">Page Three</H2>  
      </body>  
      </html>

Chapter 2

Now, we'll need to create our frame definition document. You'll notice that this document differs from the frame definition document we created last time in two ways:
First of all, each frame will be assigned a name within the <frame> tag in this document. These names must all begin with a letter or number.
By giving each frame a name, we can place a link in one frame that, when clicked, will display a new page in another frame. This is called 'frame targeting.'
When we finish our frame definition document, you will learn exactly how frame targeting works.
Secondly, you will notice that this document has three frames instead of the two we created in the last lesson. What's interesting is that we will be nesting two <frameset> tags to create the effect. The first <frameset> tag creates two horizontal rows of frames. The uppermost frame (which will display the file named "logo.html") is 65 pixels tall.
The lower frame occupies the rest of the document window. However, another <frameset> tag divides this horizontal frame into two vertical columns.
The first frame on this row will be 150 pixels wide and will hold a file called "links.html." The second frame on this row will hold a file named "one.html."
Here's an example of what we're trying to create:

topframe

leftframe

bigframe

You can also see a working example by clicking the link labeled 'frame.html' on the Supplementary Material page.

HTML File Number 6: frame.html

<HTML>
<HEAD>
<TITLE>Three way frames with links</TITLE>
</HEAD>
<FRAMESET ROWS="65,*">
<FRAME NAME="topframe" SRC="logo.html">
<FRAMESET COLS="150,*">
<FRAME NAME="leftframe" SRC="links.html">
<FRAME NAME="bigframe" SRC="one.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Build an alternate web page here for people who have older browsers. Please note that (other than the HEAD) this may be the only section of your web site that the search engines will see. To help the search engines catalog your site correctly, be sure to work key words into your text here and don't forget to include links to other pages on your site.
</NOFRAMES>
</HTML>

Chapter 3

The frame definition document we just created will load three pages initially. We created two of those pages in chapter 1, but we still need to create the file named links.html. This file will be displayed in the frame on the left hand side of the second row of frames. The file is filled with links to the other web pages we've created. The code for this file can be found a little further down this page.
Look closely at the tags in this file. See all those 'target' attributes tucked inside the <A> tags? Ordinarily, when someone clicks a link, the new document appears in the same frame as the link. But the target attribute redirects the incoming data to specific frames.
In order for this to work, the receiving frame must have been named in the frame definition document. If you'll recall, we named the horizontal frame at the top of our browser window 'topframe.' The first frame on the second row was named 'leftframe,' and the second frame on the second row was named 'bigframe.'
If you misspell the name in the 'target' attribute, or use upper case when you should have used lower case, or otherwise specify a name that simply does not otherwise exist, the linked document will open in a new browser window.
You'll notice that the first three links target the frame on the right side of the bottom row. When you click these links, the document specified will appear in the frame named 'bigframe.'
The next two links target the long horizontal frame at the top of the browser window.
The sixth link targets the frame containing the links itself!
The last link has an interesting target attribute: target="_top" This special target can be used any time you want to break out of frames.
target="_top" forces the linked document to load into the full browser window, getting rid of any frames you may have set up. This attribute should always be used when your link leads to another site. Otherwise, visitors trying to leave your site will forevermore be trapped inside your frames.

HTML File Number 7: links.html
   <html>  
   <body BGCOLOR="#FFFFFF">  
   <P>
   <A TARGET="bigframe" HREF="one.html">Page one</A>
   </P>  
   <P>
   <A TARGET="bigframe" HREF="two.html">Page two</A>
   </P>  
   <P>
   <A TARGET="bigframe" HREF="three.html">Page three</A>
   </P>  
   <P>
   <A TARGET="topframe" HREF="newlogo.html">New Logo</A>
   </P>  
   <P>
   <A TARGET="topframe" HREF="logo.html">Old Logo</A>
   </P>  
   <P>
   <A TARGET="leftframe" HREF="newlinks.html">New Links</A>
   </P>  
   <P>
   <A TARGET="_top" HREF="http://www.yahoo.com">Yahoo!</A>
   </P>  
   </body>  
   </html> 
Here's a (slightly changed) version of the file above. It's designed to replace 'links.html' when you click the sixth link above.

HTML File Number 8: newlinks.html

<html> <body BGCOLOR="#FF9933"> <P> <A TARGET="bigframe" HREF="one.html">Page one</A> </P> <P> <A TARGET="bigframe" HREF="two.html">Page two</A> </P> <P> <A TARGET="bigframe" HREF="three.html">Page three</A> </P> <P> <A TARGET="topframe" HREF="newlogo.html">New Logo</A> </P> <P> <A TARGET="topframe" HREF="logo.html">Old Logo</A> </P> <P> <A TARGET="leftframe" HREF="links.html">Old Links</A> </P> <P> <A TARGET="_top" HREF="http://www.yahoo.com">Yahoo!</A> </P> </body> </html>
You're done! Once you've created and saved all the HTML files described in this and the preceding chapters, open the file named frame.html in your favorite frames-friendly web browser and play with the links.
Thanks to frames, site navigation is a snap! Notice how easy it is to switch from one page to another without scrolling or searching for the links--they're always ready and waiting in the frame on the left!

Chapter 4

If you'd like to change the way your frames look, try inserting these additional attributes into your <frame> tags:

scrolling="yes" scrolling="no"

The attribute above allows you to give the frame a scrollbar or take it away. The default is scrolling-"auto", which lets the browser decide whether the frame needs scrollbars and display them where necessary.
noresize

Including these parameters in a <frame> tag prevents the user from resizing the frame. By default, the user can resize frames by using the mouse to drag the frame borders to a new position. Since we never inserted this attribute into our <frame> tag, you should be free to resize your frames. Bring up your frame.html file and try resizing the frames yourself!
border="0" border="no"

Specifying these attributes in both the <FRAMESET> and <FRAME> tags allows you to get rid of the borders that normally surround your frames. Netscape (version 3 or better) uses the value "no", while MS Internet Explorer uses the value 0 (zero). If you want to make sure the frame border is turned off in both browsers, you must use both of the attributes listed above.

Below, you'll find an alternate version of our frame definition document. This version disallows scrolling, resizing, and frame borders. We'll call it 'frame2.html.' Check it out on the Supplementary Material page.

HTML File Number 9: Frame2.html
   
<HTML>
<HEAD>
<TITLE>Three way frames with links</TITLE>
</HEAD>
<FRAMESET BORDER="0" BORDER="NO" ROWS="65,*">
<FRAME BORDER="0" BORDER="NO" SCROLLING="NO"
NORESIZE NAME="topframe" SRC="logo.html">
<FRAMESET BORDER="0" BORDER="NO" COLS="150,*">
<FRAME BORDER="0" BORDER="NO" SCROLLING="NO"
NORESIZE  NAME="leftframe" SRC="links.html">
<FRAME BORDER="0" BORDER="NO" SCROLLING="NO"
NORESIZE  NAME="bigframe" SRC="one.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Provide another page for older browsers.
</NOFRAMES>
</HTML>

Chapter 5

-Quiz 4-
When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 4' selected. Good luck!

-Assignment C-

Click here to preview the page that we'll be creating in this assignment. Click on the 'Assignments' link at the top of this page. When the 'Assignments' page appears, click fill out the form with your name, e-mail address, and password, and click on Assignment C. Then, click on the 'Submit' button. A form will appear with numbered text boxes. Fill in each line of code exactly as specified below. When you're typing a tag that contains multiple parameters, please include the parameters in the order specified in the directions below. When you're done, click on the 'Validate' button and your assignment will be validated for accuracy.

*In the assignment below, we're assuming that '1.html,' '2.html,' and '3.html' have already been created.

Line 1 - Type a tag that will open your HTML document.

Line 2 - Type a tag that will create a frameset. Specify that there should be two rows. The first row should be 220 pixels in height, and the second row should take up the rest of the screen.

Line 3 - Type a tag that will create a frameset. Specify that there should be two columns. The first column should be 300 pixels in width, and the second column should take up the rest of the screen.

Line 4 - Type a tag that will make the HTML document '1.html' appear in the first frame. Specify that the frame should not have a scroll bar and should not be resizable.

Line 5 - Type a tag that will make the HTML document '2.html' appear in the second frame.

Line 6 - Type a tag that will close the frameset.

Line 7 - Type a tag that will make the HTML document '3.html' appear in the third frame. Specify that the frame should not have a scroll bar and should not be resizable.

Line 8 - Type a tag that will close the framset.

Line 9 - Type a tag that will close your HTML document.

Remember to click on the 'Validate' button after completing all 9 lines.

-Bonus Assignment-

If you haven't already done so, please create the nine HTML files described within this lesson. Load each frame definition document in your browser, and test the links.

You should be able to tell if the frame targeting is working as described in this lesson, so you do not have to send me these files.

No need to send me anything, but please feel free to post a message in the Discussion Area if you have any problems.

That's it for frames! Next lesson: Intro to forms.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.