The Disturbed Web Authoring Tutorials

The Disturbed Web Authoring Tutorials [ H T M L ] The Disturbed Web Authoring Tutorials

[ T u t o r i a l s ] [ H T M L ] [ C S S ] [ D H T M L ] [ T i p s ] [ D e s i g n ] [ M i s c ] [ A d d L i n k ] [ A d v e r t i s e ] [ F e e d b a c k ] [ C o n t a c t ] [ H o m e ]	Lesson Ten Frames At the moment, you are looking at this page, it is one file, in one window. Now imagine that there was a second window in your browser, so you could look at to files at once. That would be pretty cool, and it is possible, by using frames. You can have multiple windows, or "frames" showing multiple files. This can be incredibly good for you, making it easier to edit web pages, and can make sites look very good/classy. But this is where the problem comes in. Some people absolutly hate frames, and the early browsers, and even some recent ones aren't even frames compatible. Frames have two popular uses. One is the Sidebar, which has a frame on the left of the screen, which can be used for navigation through the site. The other is for advertising, a frame at either the top or bottom of the page, with a banner ad in it, so essentially, the advertising is always visible to the user, even if they scroll down the page. So it is up to you whether you go with frames or not. Now lets find out how to program frames!! Frames are very easy to learn to program. If you can program a normal webpage, with tables etc. then you will be fine. A web page which is made up of frames, although it looks like it is only one file, is actually multiple web pages linked together into one file. Open up your HTML editor and enter the following code. <HTML> <HEAD> <TITLE>My First Frames Page</TITLE> </HEAD> <FRAMESET COLS = 50%,> <FRAME NAME="frame1" SRC="frame1.htm"> <FRAME NAME="frame2" SRC="frame2.htm"> </FRAMESET> </HTML> Save that file as testframe.htm , and in the same directory, create 2 files named frame1.htm and frame2.htm. In the last two files, set them up as webpages, have text etc in them that identifies them as frame 1 and 2. Now that it is all saved, open up testframe.htm in your browser. Both frame1.htm and frame2.htm should be visible. Congratulations, you have just created your first page with frames - good on you. Now we can play around with this to make it look like what you want it to look like. You will notice in the code above that the first frame takes up 50% of the page, and the denotes that the other frame takes up the rest of the page. The * is a wildcard, so we dont have to figure out how much space is left on the page every time we decide to change the first frame. To see this in action, open up testframe.htm and change the 50% to 25%. Now the first frame takes up a 1/4 of the page and the second frame takes up the rest. Pretty nifty huh??. Now change it back to 50%. Delete the % sign and look at the page in your browser. The frame on the left should be very small now, about 50 pixels wide. When there is no % sign, the number is taken as pixels, so if you change the 50 to 289, the first frame will be exactly 289 pixels wide. Another thing about frames is that they dont have to be columns. Chagne the 'FRAMESET COLS' in the 5th line to 'FRAMESET ROWS'. Now the page will be split horizontaly instead of the vertical that we just had. Now that we have experimented with that, change it back to columns by replacing the ROWS, with COLS. The next great thing about frames is that you dont have to see that really annoying grey border inbetween the frames. In the <FRAMESET> tag, add another attribute FRAMEBORDER=NO . Now look in your browser, the grey line is gone. If you really like the border then you can change the size of it. Delete the attribute we just added and replace it with BORDER=50 . Now the border should be 50 pixels wide. Even better than that, you can change the color of it from grey to any color in the RGB spectrum. Add this attribute BORDERCOLOR=#FF0000 . Now your border will be red, dosn't it look good!!! Notice above that we gave names to the different frames. Well we did that so we could click on a link in one frame, but the page would appear in another. When you create the link, all you have to do is say which frame you want the link to be targeted to. Here is the code to do it. <A HREF="http://www.placelinkhere.com/" TARGET="FrameName">Link Name</a> Congratulations, you now have learnt enough about frames to experiment and create your own. I suggest you get a copy of 'The Bare Bones Guide to HTML'. It lists all the different attributes for frames, so you can extend your knowledge even further.

[ T u t o r i a l s ]

[ H T M L ]
[ C S S ]
[ D H T M L ]

[ T i p s ]

[ D e s i g n ]

[ M i s c ]

[ A d d L i n k ]
[ A d v e r t i s e ]
[ F e e d b a c k ]
[ C o n t a c t ]

[ H o m e ]

Lesson Ten

Frames

At the moment, you are looking at this page, it is one file, in one window. Now imagine that there was a second window in your browser, so you could look at to files at once. That would be pretty cool, and it is possible, by using frames. You can have multiple windows, or "frames" showing multiple files. This can be incredibly good for you, making it easier to edit web pages, and can make sites look very good/classy. But this is where the problem comes in. Some people absolutly hate frames, and the early browsers, and even some recent ones aren't even frames compatible. Frames have two popular uses. One is the Sidebar, which has a frame on the left of the screen, which can be used for navigation through the site. The other is for advertising, a frame at either the top or bottom of the page, with a banner ad in it, so essentially, the advertising is always visible to the user, even if they scroll down the page. So it is up to you whether you go with frames or not.

Now lets find out how to program frames!!

Frames are very easy to learn to program. If you can program a normal webpage, with tables etc. then you will be fine. A web page which is made up of frames, although it looks like it is only one file, is actually multiple web pages linked together into one file. Open up your HTML editor and enter the following code.

   <HTML>

   <HEAD>
   <TITLE>My First Frames Page</TITLE>
   </HEAD>

   <FRAMESET COLS = 50%,*>

   <FRAME NAME="frame1" SRC="frame1.htm">

   <FRAME NAME="frame2" SRC="frame2.htm">

   </FRAMESET>

   </HTML>

Save that file as testframe.htm , and in the same directory, create 2 files named frame1.htm and frame2.htm. In the last two files, set them up as webpages, have text etc in them that identifies them as frame 1 and 2. Now that it is all saved, open up testframe.htm in your browser. Both frame1.htm and frame2.htm should be visible. Congratulations, you have just created your first page with frames - good on you.

Now we can play around with this to make it look like what you want it to look like. You will notice in the code above that the first frame takes up 50% of the page, and the * denotes that the other frame takes up the rest of the page. The * is a wildcard, so we dont have to figure out how much space is left on the page every time we decide to change the first frame. To see this in action, open up testframe.htm and change the 50% to 25%. Now the first frame takes up a 1/4 of the page and the second frame takes up the rest. Pretty nifty huh??. Now change it back to 50%. Delete the % sign and look at the page in your browser. The frame on the left should be very small now, about 50 pixels wide. When there is no % sign, the number is taken as pixels, so if you change the 50 to 289, the first frame will be exactly 289 pixels wide.

Another thing about frames is that they dont have to be columns. Chagne the 'FRAMESET COLS' in the 5th line to 'FRAMESET ROWS'. Now the page will be split horizontaly instead of the vertical that we just had. Now that we have experimented with that, change it back to columns by replacing the ROWS, with COLS.

The next great thing about frames is that you dont have to see that really annoying grey border inbetween the frames. In the <FRAMESET> tag, add another attribute FRAMEBORDER=NO . Now look in your browser, the grey line is gone. If you really like the border then you can change the size of it. Delete the attribute we just added and replace it with BORDER=50 . Now the border should be 50 pixels wide. Even better than that, you can change the color of it from grey to any color in the RGB spectrum. Add this attribute BORDERCOLOR=#FF0000 . Now your border will be red, dosn't it look good!!!

Notice above that we gave names to the different frames. Well we did that so we could click on a link in one frame, but the page would appear in another. When you create the link, all you have to do is say which frame you want the link to be targeted to. Here is the code to do it.

   <A HREF="http://www.placelinkhere.com/" TARGET="FrameName">Link Name</a>

Congratulations, you now have learnt enough about frames to experiment and create your own. I suggest you get a copy of 'The Bare Bones Guide to HTML'. It lists all the different attributes for frames, so you can extend your knowledge even further.

Last modified Thursday 27 January 2000