Frame is just another form of partitioning your web page into cells. Instead of using table you use the frameset tag. The significant difference is that you can move (or scroll) one frame independently of the other frame.
However you must choose to use either a non-frame format or a frame format for your page. You cannot have both of them in the same page. Once you choose to use frames, it is strictly frames.
For a frameset format we use frameset tags instead of body tags.
<html>
<frameset>
</frameset>
</html>
In between the pair of frameset tags you can design the number and type of frame you want. I will now discuss how to design the page you are looking at in a frameset format.
FRAME WEBPAGE 1
<html>
<frameset rows=120,* framespacing="0">
<frame name=header src="header.html" marginwidth="0" scrolling=no>
<frameset cols=130,* framespacing="0">
<frame name=menu src="leftcolumn.html" marginwidth="0">
<frame name=main src="main.html" marginwidth="0">
</frameset>
</frameset>
</html>
This program will give me a top section of 120 pixels tall (row=120,*) and a section beneath it. The bottom section will be divided into two cells. The left cell (it is understood that we start from the left) is 130 pixels wide (col=130,*) and the right cell will occupy the remaining width of the page by default.
Click here to view the page
Since two <frameset> tags were used there must be two closing </frameset> tags. And since the framesets are two rows on top of each other, the </frameset> should then be written at the end of the program.
For vertical columns with rows in them, the </frameset> tag must be written at the end of each column. This is demonstrated below.
FRAME WEBPAGE 2
<html>
<frameset cols=130,* framespacing="0">
<frameset rows=120,* framespacing="0">
<frame name=web src="web.html" marginwidth="0" scrolling=no>
<frame name=menu src="leftcolumn.html" marginwidth="0" scrolling=no>
</frameset>
<frameset rows=120,* framespacing="0">
<frame name=cawp src="cawp.html" scrolling=no>
<frame main=header src="main.html" marginwidth="0">
</frameset>
</frameset>
</html>
Click here to view the page.
Note that in this case the "web" image is separated from the "creating a webpage" image, and stacked on top of the menu page (leftcolumn.html).
Creating the link pages
The next step (actually it will be better to do this first) is to create the three web pages linked via src= " ? ".
The fame will recall the three links every time you open the page. The path I have chosen is to place the three pages in the same folder as this page. If you have problem doing this click
Note that the dimensions of the table for the header is identical to that for the corresponding frame.
The menu.html is not tabulated, the corresponding frame will just show the area 130 pixels wide from the left margin of this page.
Of course for FRAME WEBPAGE 2, there will be four frames. We will have to break up the header into two pages; namely web.html and cawp.html. If you have problem designing them click
Attributes
The frameset and frame elements can have the following attributes.
Frameset
- cols (columns) and rows: It is good to note that the normal width and height of a monitor screen is about 800x400 pixels. If you see a margin by the side it may be that your link page is not wide enough to fit the frame. If you see that the page is falling out at the bottom it may be that the height of your link page is more than 400 pixels.
- frameSpacing: Spacing between the frame. The default is frameSpacing="0" (or no spacing between frames, or seamless)
Frame
- name: This is just a remark and the computer will not compute this.
- marginwidth: left and right margin. The default is marginwidth="0"
- marginheight: top margin. The default is marginheight="0". It must be noted that if both marginwidth and marginheight is not given then you will get a margin around the frame. So it is best to set either marginheight="0" (or marginwidth="0") if you do not want a margin around your frame.
- scrolling: The default is yes. However if you do not set scrolling=yes and there is no need for scrolling as the content is all within the frame, then the scrolling button will not be seen.
TARGET the LINK
Another important character of frame is that if you wrote the link in the usual manner, then when you click on the link it will open in that particular frame. For example, the web page Lesson One is linked by
Let use now try to open up the lesson page in the main frame. We shall try this with LESSON ONE A. Now we write the link with a target attribute. The targetted frame is the main frame (this is the name we have used for this frame).
One advantage of using frame is it allows you to change the content of the web page without bothering about the other components for the page, assuming that they are repetative. For example if the header and the menu in the left column are the same for every page and the change is only in the content, then just design a simple web page for the content, like I have done for LESSON ONE B. Go back to the frame web page and click on LESSON ONE B, and you will know what I mean.
If you want to see how the web page for LESSON ONE B looks like just go up to the top left hand corner of this page and click on LESSON ONE B.
