INTRODUCING FRAMES and FRAMES IN ROWS
(1) the top frame with only "LESSON THIRTEEN - FRAMES" written in it; and
(2) the larger frame that you are reading in now.
Since all browsers do not support fancy fonts, the title "LESSON THIRTEEN - FRAMES" in the top frame is a simple .gif image created using Paint Shop Pro and choosing one of its fonts.
Frames will be easier to understand if you understand how HTML TABLES work. I will assume that you have read or know the material in Lessons 11 and 12 on tables. On this browser screen, the frames are set up like a table with two rows as in:
| frame 1 |
| frame 2 |
(1) the HTML document that creates the frames (that is, the document that creates the template for the frames)
(2) the document that goes into the top frame (I named it "frame1.htm")
(3) the document that goes into the lower frame (I named it "frame2.htm")
Here is the complete HTML document that created these two frames:
<HTML>
<HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<NOFRAMES>Sorry, but your browser does not support
frames. <A HREF="Normal13.htm">Please click here to see this lesson without frames.</A></NOFRAMES>
<FRAME SRC="frame1.htm" NORESIZE SCROLLING="NO">
<FRAME SRC="frame2.htm">
</FRAMESET>
</HTML>
Problem 1:What appears to be missing in these statements?
| go to the answer section |
Here is a discussion on these statements:- The FRAMESET element defines a set of frames that will make up the browser window. The ROWS attribute defines two frames to be set up in rows (as opposed to columns). The value of the ROWS attribute is "20%,80%". This value states that there are to be two rows of frames (one frame per row). The top frame is to have a "height" of 20% of the browser screen and the bottom frame to take up the remaining 80% space. In other words, I wanted a small frame at the top of the screen (to only display "LESSON THIRTEEN - FRAMES") and one larger frame below to display this lesson. Instead of using percentages, the ROWS attribute can also be expressed in pixels or as a relative size (*). As a relative size, it would be ROWS="20%,*". The "*" means whatever percent is left.
- FRAMESET is a container element which means that everything contained between the opening and closing tags (<FRAMESET> and </FRAMESET>) is part of the frame setup.
- The FRAMESET tag is used instead of the BODY tag. Your frames will not work if you include the BODY element (try it).
- If for some reason, a viewer is using a browser or a technology that does not support frames, you need to consider having an alternate page just for those browsers. If a browser does not support frames, the message between the NOFRAMES tags will be displayed. If you do not include the NOFRAMES container element, these browsers will either give an error code or simply display a blank page. Note: you can include the BODY element inside the NOFRAMES tags.
- The FRAME tag denotes what goes into the frame. The SRC attribute specifies the source file (or source document) for the frame. Since I only have two frames in this example, I only need two FRAME tags. Row frames are set up from top to bottom. In our example, the web page that goes into the top frame is called "frame1.htm" and the web page that goes into the bottom frame is called "frame2.htm". If for some reason you want a page somewhere in the WWW to go into a frame, be sure to include the complete URL of the web page.
- For the top frame, I added two attributes to the FRAME tag:
- The NORESIZE attribute to prevent the viewer from resizing the frame (try resizing the frame). Note that I did not use the NORESIZE attribute for the bottom frame so the viewer will be able to resize this frame (try it).
- SCROLLING="NO" will prevent a scroll bar from being displayed. Note that there is no scroll bar in the "Lesson Thirteen" title frame. Other values are "YES" (put in a scroll bar) and "AUTO" (let the browser determine if a scroll bar is needed). Note in the second FRAME tag, I do not have a SCROLLING attribute and there is a scroll bar on the right side of the frame. In other words, if you do not specify a scroll bar, the browser will place one if needed.
- Since each frame represents a web page, you can do whatever is allowed with web pages, such as inserting images, links to other web pages, etc.
LEAVING THE FRAMES PAGE
If you use links in a frames window, the web page that you are linking to will appear in the frame when the viewer clicks on the link. For example, if you click on the statement below, my alternate home page will load into this frame. Try it and when you have seen enough click on the BACK button to return to this page.The problem is you are still in the frames window. When you are ready to leave this web page to go on to the next lesson or to go back to one of my home pages, you also want to leave this frames page. In other words, you want the link to load the web page with no frames. To do this, simply add the TARGET attribute with the value "_top" to the URL. For example, to go to my alternate home page and at the same time eliminate the frames, it is:
<A HREF="altern.htm" TARGET="_top">
Note the underline before the word "top". It must be there. The TARGET attribute targets the hypertext link to be its own web page. To see this, click on the following sentence and the alternate home page will be loaded with no frames. Again, click the BACK button to return here.
Send me to the alternate home page
Problem 2: Suppose you want three rows of frames instead of two rows with the condition that the top frame is to be 20% in height, and the middle frame 30%. What is the FRAMESET tag for this situation?Problem 3: Repeat Problem 2 but with the condition that each frame is to occupy the same space on the screen (that is, each frame is take up one third of the screen).
| go to the answer section |
FRAMES IN COLUMNS
Instead of having two (or more) rows of frames, suppose you want two (or more) columns of frames? For example, suppose you want the layout of frames to be:| frame 1 | frame 2 |
<FRAMESET COLS="50%,50%">
Columns frames are generated from left to right. So if you want the left frame to be 30% of the width of the screen, the FRAMESET tag would be:
<FRAMESET COLS="30%,70%">
ROW AND COLUMN FRAMES MIXED TOGETHER
Suppose you want the browser screen configuration to look approximately like the following:| frame 1 | frame 3 |
| frame 4 | |
| frame 2 | frame 5 |
Here is the complete HTML document to accomplish this. We will leave out the NOFRAMES, NORESIZE and SCROLLING attributes. You can of course include them in your own applications - especially the NOFRAMES attribute. I have also numbered the lines for discussion purposes.
Line1: <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
Line2: <FRAMESET COLS="50%,50%">
Line3: <FRAMESET ROWS="75%,25%">
Line4: <FRAME SRC="Lesson1.htm">
Line5: <FRAME SRC="Lesson2.htm">
Line6: </FRAMESET>
Line7: <FRAMESET ROWS="33%,33%,33%">
Line8: <FRAME SRC="Lesson3.htm">
Line9: <FRAME SRC="Lesson4.htm">
Line10: <FRAME SRC="Lesson5.htm">
Line11: </FRAMESET>
Line12: </FRAMESET>
Line13: </HTML>
Discussion:
- Note that there is no BODY tag. Remember that the FRAMESET tag takes the place of the BODY tag.
- Since this configuration of frames consists of 2 equally sized columns of frames, we will first set up the two columns of frames (line 2) with each column one half or 50% of the screen width. We then divide each column into row frames beginning with the left column.
- Now in the left column, we want two rows - that is, two frames. Lines 3 to 6 take care of this. As indicated, the top frame is to take up 75% of the column and the lower frame is to take up the remaining 25% (line 3).
- Line 4 places my Lesson One in the top left frame and line 5 places Lesson Two in the lower left frame. This completes the first column of frames. That is, we are finished setting up the two rows of frames in the first column as indicated in line 6.
- We are now in the second column of frames. Line 7 sets up three frames to go into this column, with each frame being 33% (or one-third of the column). Although 33%+33%+33% only adds to 99%, we learned earlier in this lesson that the browser will take the remaining 1% and distribute it over these three sizes.
- We now need to place web pages into these three frames and they will be placed going from top to bottom. Thus Lesson Three will be placed in the top frame (line 8), Lesson Four in the middle frame (line 9) and Lesson Five in the bottom frame (line 10). This completes the three rows in this second column of frames.
- Line 11 closes these three rows of frames.
- We are now finished with setting up the two columns and line 12 ends setting up the two columns of frames that were opened in line 2. Remember that we need an ending tag for each opening tag and that the tags cannot overlap.
- To make any particular frame active, just click inside that frame. For example, if you want to print out the contents of frame 2, then click somewhere in frame 2 and then choose PRINT from the menu.
| frame 1 | frame 2 |
| frame 3 |
| go to the answer section |
Problem 5: Make up the web page that will set up the following configuration of frames. Again make up your own filenames and use 50% for all values.| frame 1 | |
| frame 2 | frame 3 |
| go to the answer section |
SENDING INFORMATION FROM ONE FRAME TO ANOTHER
It is not uncommon to see two frames on the screen at the same time - a smaller frame on the left containing mainly links and a larger frame on the right to display the information when a link is chosen. To see this configuration at work, click here and when you are finished testing the situation, click the BACK button to return here (you may have to click it a few times depending on the amount of testing).In this example, the configuration is two columns as in:
| frame A | frame B |
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="links.htm" NAME="A">
<FRAME SRC="showlink.htm" NAME="B">
</FRAMESET>
</HTML>
Note that the NAME attribute names the frames.
Here is the document "links.htm":
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<P>This is frame A. In this frame you see links. If you click on any link, that is, on any lesson, that lesson will appear in frame B. Go ahead, choose a lesson.
<P><A HREF="lesson1.htm" TARGET="B">Lesson One</A>
<P><A HREF="lesson2.htm" TARGET="B">Lesson Two</A>
<P><A HREF="lesson3.htm" TARGET="B">Lesson Three</A>
<P><A HREF="lesson4.htm" TARGET="B">Lesson Four</A>
</BODY></HTML>
Note that the TARGET attribute points to the frame named "B" as the target to receive any lesson clicked on.
Here is "showlink.htm":
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
This is frame B and will display the links from frame A.
</BODY></HTML>
Note that the above example will also work for any number of frames. If you need three frames, just name them A, B and C.
SUMMARY OF FRAMESET AND FRAME ATTRIBUTES
We used two container elements (FRAMESET and FRAME) and each have their own attributes. We already studied a number of them but there are also other attributes.FRAMESET ATTRIBUTES
- BORDER=" " specifies the width in pixels of the border drawn around the frames.
- COLS=" " creates the frames as columns. The width of each column may be specified as a percent (%), in pixels, or in relative size (*).
- FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frames. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)
- FRAMESPACING=" " specifies the amount of space between the frames in pixels.
- ROWS=" " creates the frames as rows. The height of each row may be specified as a percent, in pixels, or in relative size.
- SCROLLING=" " to determine whether or not scroll bars are to be displayed on all the frames. Values are either "yes", "no" or "auto".
- BORDER=" " specifies the width in pixels of the border drawn around the frame.
- FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frame. Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)
- MARGINHEIGHT=" " specifies the top and bottom margins of the frame in pixels
- MARGINWIDTH=" " specifies the left and right margins of the frame in pixels
- NORESIZE prevents the frame from being resized by the viewer
- SCROLLING=" " determines whether or not scroll bars are to be displayed along the frame. Values are either "yes", "no" or "auto".
- SRC=" " specifies the source document to be placed in the frame.
- <NOFRAMES> and </NOFRAMES> tags to be placed inside the FRAMESET tags. Anything placed between the NOFRAMES tags is printed only by browsers not supporting frames.
- TARGET="_top" is to be used as part of the URL of a link to ensure that the frames page is properly exited. For example,<A HREF="http://www.html/index.htm" TARGET="_top">
allows the browser to exit the frames screen and load the web page called "index.htm". Without the TARGET attribute, "index.htm" will be loaded into the current frame.
ANSWERS
- The BODY tags are missing. This is because the FRAMESET tag replaces the BODY tag. If you put in a BODY tag, the frames won't work. You will receive exactly the same error message or blank page that a browser not supporting frames displays.
- If the first frame takes up 20% of the screen and the second frame takes up 30%, then the third frame must take up 100%-20%-30% = 50%. Therefore the FRAMESET tag is:<FRAMESET ROWS="20%,30%,50%">
Now if you do not want to do the arithmetic, then use relative size (*) and let the browser do the calculating as in:
<FRAMESET ROWS="20%,30%,*">
- 1/3 of 100% means that each frame is to take up 33 1/3% space. However, browsers will allow the percents to add to 99 as well as to 100. For example, one solution to the problem is:<FRAMESET ROWS="33%,33%,33%">
This only adds to 99%. What the browser then does is take the remaining one percent and distributes it over the three sizes. - In this solution, we first set up two columns, and then split the second column into two frames. Here is the complete HTML document:<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage1.htm">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="webpage2.htm">
<FRAME SRC="webpage3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
where "webpage1.htm" represents the complete URL of the page to be loaded into frame 1. Similarly "webpage2.htm" will be loaded into frame 2 and "webpage3.htm" into frame 3. - This answer is similar to the answer to Problem 4. In Problem 4, we first set up two column frames and then split the second column into two row frames. In this answer, we first set up two row frames and then split the second row into two column frames. Here is the HTML document that solves this problem:<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="webpage1.htm">
<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage2.htm">
<FRAME SRC="webpage3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Post a Comment
THANKS for comment!!!!