|
Page 2
Beginning HTML - Frames
written by Nicole Bibee
Frames
Frames are windows that allow the browser to display several HTML files within its display window.
Think of frames like a divided plate that has three sections of food but they are presented as one meal.
Or you could think of stained glass windows. The pieces are presented as beautiful picture but they are
still separate pieces of glass.
A good example of frames would be having a hyperlinks list on the left edge and the information that is
specific to each link on the right. And we feel it is important to keep this list on each page so the
user may access whatever page in random order. To do this without frames, we would have to cut and paste
the code to each HTML file and this would take a great deal of time. But with frames we can create a table
of contents file that will always appear on the left without duplicating the code to several pages.
Planning Our Frames
We should consider planning the layout of our frames before creating them. Here are some questions you should keep in mind:
1. What information will be displayed in each frame?
2. Where will your frames be placed?
3. What size will the frames be?
4. Which frames will change when a hyperlink is clicked?
5. Which frames will show the same content?
6. What pages will be the first viewed?
7. Can the user resize the frames or change the layout of the page?
For example, you have a company that sells various computer products. Lets also say that you have different types of products such as: hard-drives, printers and monitors. First off, we need to give the user easy access to each category by creating a link or table of contents. This section will be on the left edge of our page so that they can navigate through each section easily and randomly.
Here are our sample files:
table.html - table of contents
intro.html - introduction page
hdrives.html - hard drive page
printers.html - printer products page
monitors.html - monitors products page
Creating Frame Layout
To create a frame layout you will need to create an HTML file with the frameset tags. This HTML file will contain the code that will bring all the pages together to form our presentation. Here's the code:
<.HTML>
<.HEAD>
<.TITLE>page title<./TITLE>
<./HEAD>
<.!--notice the body tag is missing-->
<.FRAMESET>
frame definitions
<./FRAMESET>
<./HTML>
There is a reason the body tag is excluded from the file, the page with frames displays the content of other pages. These pages will already have their body properties set.
Specifying Frame Size And Orientation
The frameset has two properties: ROWS and COLS. You use the ROWS property when you want your pages laid out in rows and COLS laid out in columns. Here is how:
<.FRAMESET ROWS="row height, row height">
OR
<.FRAMESET COLS="col width, col width">
You can specify the width or height in three ways: pixels, percentages of the total size of the frameset or by using an asterisk (*). Simply put, you can tell the browser to use whatever space is left in the display area.
For example your dislpay is 500 pixels high and you use <.FRAMESET ROWS="100, *">. The first row would be 100 pixels high and the second would be 400 pixels high.
Specify Frame Source
Going back to our example computer store, we will need to specify the pages in the frames. The code to use would be:
<.FRAMESET COLS="150, *">
<.FRAME SRC="table.html">
<.FRAME SRC="intro.html">
<./FRAMESET>
Controlling Appearance
There are three properties used to control the appearance of the frames. They include: scrollbars; margins between the source content & the frame border AND whether or not the user may change the width/height of the frame.
Normally scroll bars appear only when the contents of the source cannot fit in the frame. A value of YES will display scrollbars and NO will not display them. But you can override this by using:
<.FRAME SRC=document SCROLLING=YES>
Next, to change the margin height or width in pixels use:
<.FRAME SRC=document MARGINHEIGHT=5 MARGINWIDTH=10>
Also you can keep the user from resizing the frame. To NOT allow them to resize use:
<.FRAME SRC=document NORESIZE>
*Otherwise do not add the code for the user to resize the frame.
However if you have more frames, you can specify which link in your table of contents, opens in a specific frame. First name the frame in the frame src tag and then edit the <.a href="filename"> tag to include: target=framename. If you would like more detail on how this process is done and how to nest frames inside another; please email me at Nicole Bibee
The Disadvantage
There is a disadvantage to working with frames. Some older browsers do not support them so it is necessary to add code that can be viewed by these older browsers. Here is where we will use the body tag we talked about earlier. Add <.NOFRAMES> after your ending frameset tag <./FRAMESET>. Next you can then add the body tag and your other tags to be viewed. Make sure you end with the <./NOFRAMES> tag.
Here is an example of the computer store page with code for non-frame browsers:
<.HTML>
<.HEAD><.TITLE>PC's R US<./TITLE>
<./HEAD>
<.FRAMESET COLS="140, *" NORESIZE>
<.FRAME SRC="table.html">
<.FRAME SRC="intro.html">
<./FRAMESET>
<.NOFRAMES>
<.BODY BGCOLOR="#000000">
<.TABLE WIDTH=600>
<.TR>
<.!--First column-->
<.TD bgcolor="#FFFFFF">Table of Contents
<.br><.a href="home.html">Home<./a><.br>
<.a href="hdrives.html">Hard Drives<./a><.br>
<.a href="printers.html">Printers<./a><.br>
<.a href="monitors.html">Monitors<./a><./td>
<.!--Second column-->
<.TD>Welcome to PC's R US<.br><.br><.br>
We ship all over the world and our
products are lifetime guaranteed. Please
click on a link to left to view our
products and prices.<.br><./td>
<./TR>
<./TABLE>
<./BODY>
<./NOFRAMES>
<./HTML>
Well folks, that finishes up our discussion on frames. Next week we will start covering web page forms.
Notice:
We had to insert a period after the less than sign to
make the tags viewable by your browser. When writting
your own code please do not add the period to the
tags.
On To Page 3
|
