Frames - How to build frames?

ganeshbala · Mar 14, 2009, 08:18 PM

[b]How to build frames?[/b]

To help you easily understand, I will use the HTML code of this page to show you how to buid frames. Following this example, you should be able to build frames and specify a frame target.

<html>
<head>
<title>Creating Frames For Your Web Pages.</title>
</head>

<FRAMESET COLS="100%" ROWS="60,*" border=no frameborder=0 framespacing=0>
   <FRAME NAME="upper" SRC="frameup_frame.htm" CROLLING="NO" NORESIZE>
  <FRAMESET COLS="160,*" border=no frameborder=0 framespacing=0>
    <FRAME NAME="left" SRC="framelf.html" SCROLLING="AUTO" NORESIZE>
    <FRAME NAME="main" SRC="right_frame.html" SCROLLING="AUTO" NORESIZE>
  </FRAMESET>
</FRAMESET>

<noframes>
<body bgcolor="#FFFFFF" text="#000000">
<p>This web page uses frames, but your browser doesn't support them.</p>
</body>   
</noframes>
</html>

ganeshbala · Mar 14, 2009, 08:19 PM

The step by step description of what each line means.

We don't need <body> tag for frame page. If you put the <body> tag before <frameset>, some browsers will not show the frames.

Look at my first mark [], <FRAMESET COLS="100%" ROWS="60,*" border=no frameborder=0 framespacing=0> We create frames with the opening tag <FRAMESET>. Within this tag, we specify column and row attributres.

As you may notice, this page is devided into two rows. We first specify column width = 100% (COLS="100%") and the height of the first row = 60 pixels (ROWS="60,*"). The asterisk mark

is the value of whatever space that left below. That means the second row will use the rest of the space. You also can specify the value in % such as ROWS="60%,40%", but specifying the value in pixels will give you a greater control over page composition.

Next, you will see that we have borderless frames here. This is possible by specifying border=no frameborder=0 framespacing=0. Generally, if you don't want borderless frames, you don't need to use border=, frameborder= and framespacing= attributes. You can just put this <FRAMESET COLS="100%" ROWS="60,*">, and the browsers will create frames with border for you.

Look at my second mark [],<FRAME NAME="upper" SRC="frameup_frame.htm" SCROLLING="NO" NORESIZE>.<FRAME> is used to specify the file inside <frameset>. I have to create a file and put it in SRC="".On this page, the upper frame is named upper. <SCROLLING="NO" means visitors don't have an ability to scroll up and down the page. You can put "yes" or "no". If you don't specify "auto" is the default value. Auto scrolling means the browsers will determine whether this section fit into the screen or need scrolling. NORESIZE means viewers of this page cannot put their mouse between the frame and resize it. If you don't specify this, they will be able to resize your frame.

We have specified the 60 pixels on the top. Now, were going to work on the space below top frame (*). Because we will split this section into 2 parts, we so put the <FRAMESET> tag again here. Look at the third mark [], <FRAMESET COLS="160,*" border=no frameborder=0 framespacing=0>, you 'll see that the same rule was applied. I specified the width of the left frame to 160 pixels and left the space on the right unspecified (*). There are two columns in this row. You need to specify the files for both sections. We are using <FRAME> again here.

Code Select Expand
<FRAME NAME="left" SRC="framelf.html" SCROLLING="AUTO" NORESIZE> <FRAME NAME="main" SRC="right_frame.html" SCROLLING="AUTO" NORESIZE>

This is not a new case. The left frame and the right frame are specified using the same rule as we previously assign a file for upper frame. Don't forget to close FRAMESET tag with </FRAMESET>.

If you don't specify scrolling and resize value, the defaults (scrollable and resizable) will take place.

OK, now the tag <noframes>is an alternative for people who use browsers that don't support frame. Browsers that support frames will not read anything inside this tag. This tag can be inside or outside <frameset> and </frameset>. If you want to set BODY attribute such as a background color, you should put <body> tag inside <noframe> tag.

ganeshbala · Mar 14, 2009, 08:19 PM

How to specify the frame target?

Here is HTML code from my left frame.

Code Select

<a HREF="begin.html" TARGET="_top">The easiest HTML guide for beginners</a>

Look at target="_top", this is the way you send the page to another frame. For emxample, if you want a click on the left brings a new page into the right frame, you have to specify target="main". (Absolutely, you first have to give the name to frame on the right as described ealier.)

You also can use the predefined targets as I've used ("_top"). The predefined targets are case sensitive and begin with underscore [_]. They are:

* _top: the document will be opened in the full browser windows. Use _top to open the linked document in full browser windows.
* _self: the document will be opened in the same frame. Example, if I specify "HOME" on the left frame as "_self", the home page will appear in the left frame. (pretty ugly, huh?)
* _parent: the document will be opened in the current windows' parent. Example, if there is a link in this right frame and it cause nested frame. Within the nested frame, I specify the link as "_parent". When you click that link it will appear back into this right frame and nested frame will disappear. NOTE: If there is no parent exists, it will acts like "_self"
* _blank: the document will be opened in the new browser windows. Browser will launch a new windows while your previous page, which is the frame page, is still open.

denniscrrom · Mar 17, 2011, 11:06 PM

HTML frames acquiesce authors to present abstracts in assorted views, which may be absolute windows or subwindows. Multiple views action designers a way to accumulate certain information visible, while other views are scrolled or replaced. Frames are very popular because they are one of the few ways to keep allotment of the page anchored while added locations change.

Discussion Community

News:

Frames - How to build frames?

ganeshbala

ganeshbala

ganeshbala

denniscrrom