Web Design Tutorials : Frames in Rows and Columns

Banner iklan disini
You can mix Rows and Columns in the same Frameset document. It's not done much in web design, these days. But it's useful to know how to do it.
If you want a frame split like this one below:
Frames in Rows and Columns
Then the way to do it is to nest one set of FRAMESET tags inside another. The frame in the diagram has two Rows. The second Rows is split into two columns. So the code would be this:
<FRAMESET ROWS = "20%, 80%">
<FRAME NAME = frameOne SRC = RowOne.html>
<FRAMESET COLS = "25%, 75%">
<FRAME NAME = frameTwo SRC = ColOne.html>
<FRAME NAME = frameThree SRC = ColTwo.html>
</FRAMESET>
</FRAMESET>
It looks a little complicated, but note that there are now two sets of FRAMESET tags, each with there own start and end tag.
The first FRAMESET Tag sets out the rows
<FRAMESET ROWS = "20%, 80%">
Into the 20% Row has gone the first FRAME tag, as normal. But the 80% row is now not a FRAME tag but another FRAMESET tag. So you are filling that 80% with two FRAME columns. The two FRAME columns will have a size of 25% and 75%
<FRAMESET COLS = "25%, 75%">
The FRAME tags for this new FRAMESET code are as normal:
<FRAME NAME = frameTwo SRC = ColOne.html>
<FRAME NAME = frameThree SRC = ColTwo.html>

The first of those FRAME tags will go into the 25% column of the second Row, and the other one will go into the 75% column.
Finally, the two FRAMESET tags have their end tags </FRAMESET>

 

Inline Frames

You can add something called an inline frame, or IFRAME, to a web page. (However, the Netscape browser doesn't recognize the IFRAME tag, so you'd have to be certain that all your users will have Internet Explorer if you're going to insert an IFRAME onto your page.)
An IFRAME looks like this:
An example of an IFRAME
The code for an Inline Frame goes into a normal HTML document, between the two BODY tags. This code is this:
<IFRAME SRC =page2.html Width = 70% height = 40%>
</IFRAME>
The first IFRAME tag needs a Source (SRC) attribute and a width and height. Don't forget the end IFRAME tag </IFRAME>.
Inline Frames can present security problems, which is why Netscape is so touchy about them. They can be quite handy, though.

 

Other Frame Attributes

There are a number of useful attributes that you can add to FRAMESET and FRAME code. You've already met the BORDER attribute, which when set to zero will hide those awful grey bars. Here are some attributes that you should be familiar with.

Frame Margin

By default, the contents of each frame will have a border around the contents of 8 pixels. You can change this margin with the MARGINWIDTH and MARGINHEIGHT. The attribute goes inside the FRAME tag whose margins you want to change. Like this:
<FRAME NAME =f1 SRC = p1.html MARGINWIDTH = 10 MARGINHEIGHT = 20>
Or you can remove the margin altogether by setting both to zero. (Not the word zero, the number 0)

NORESIZE

If you have the grey borders showing in your frames, the size of each of your frames can be changed by the user. If the cursor is placed over the grey bar, the user can click with the left mouse button and drag the border to a new position. To prevent them doing this, use the NORESIZE attribute. It doesn't need a value. The attribute goes inside the FRAME tag whose border you don't want to be changed:
<FRAME NAME =f1 SRC = p1.html NORESIZE>
You can decide whether a frame should have a scroll bar or not. The attribute to use is SCROLLING followed by either Yes or No. The default for browsers is to show scroll bars only when needed. Then, they will appear only if the page contents are longer than the screen. You should only use this tag if you're certain that no scroll bars should appear at all on your pages. Again, the attribute goes in the FRAME tag whose scrolling you want to switch off:
<FRAME NAME =f1 SRC = p1.html SCROLLING = No>

No Frames

Some earlier browsers are just not capable of displaying frames at all. In which case, the NOFRAMES tag comes in handy. It's a rare visitor these days, though, who doesn't have a browser that can't support frames. Still, it's considered polite to include the tag, anyway. You use it like this:
…FRAMESET code here
</FRAMESET>
<NOFRAMES>
<BODY>
This page uses frames, but your browser doesn't seem to support them. Our alternative page can be found here AltPage

</BODY>
</NOFRAMES>
</HTML>

Notice the use of the two BODY tags inside the NOFRAMES tags. The text you want to display if the user doesn't have a browser that supports frames is then typed between the two BODY tags. This can be anything you want.

And that wraps up our section on frames. You may, or may not, be happy to learn that this is also the end of the HTML course. Now that you have a good grasp of HTML, you can move on to Cascading Style Sheets, and JavaScript.

Related Posts

Web Design Tutorials : Frames in Rows and Columns
4/ 5
Oleh