View and vote on the article here: Putting frames in your webpage
Putting frames in your webpage| Category | | | Summary | | | Body | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]
<html xmlns="http://www.w3.org/1999/xhtml]
<head>
<title>Putting Frames in a Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css]
<!--
.style1 {font-size: small}
-->
</style>
</head>
<body>
<strong>Putting frames in your webpage</strong>
by theeye
<hr />
<strong>What is a Frame? </strong>
Frames allows a single browser window to be divided into multiple section, each with independent HTML page loaded inside it and can interact with each other. It's like having a webpage inside another webpage with other webpage in it! A lot of web page designers use this because it adds efficiency in viewing the webpage and that it also looks cool. Here is one example:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td><html>
<head><title>How to create Frames</title></head>
<frameset cols="25%,75%">
<frameset>
<frameset src="another html file.html" name="index bar">
<frameset>
<frameset>
<frame src="main.html" name="main">
</frameset>
<frameset>
<noframes>
This page requires a frames-capable browser please get one!
</noframes>
</html></td>
</tr>
</table>
You might ask me where the heck is the body tag?!?! In here, the body of the page is replaced with frameset and an additional noframes tag. The frames page mostly did not contain any content. This is because all the content and settings are positioned on the separate HTML pages the you loaded within this section, specifically, on the <strong><frameset src="filename.html"></strong> tag.
<strong>The FRAMESET Tag </strong>
The frameset tag is used for multiple times throughout a single section or frames page. This defines the characteristics of the frames.
- In the first frameset tag, it defines the number of separate frame columns within the browser window.
- The second defines what would be the width of each window.
- The next set of frameset tags, define how many frame rows will be in the browser window.
- The next defines each frame's height.
You might also wonder what the noframes tags is for. Well, it identifies what browser that is not frames-enabled to see. The contents in this would be considered as a normal HTML page because frameset tags are ignored by a non-frames browser. And this is how you do it.
Type first the<strong> <noframes> </strong>tag, the the <strong><body></strong> tag. Then type what you want to write inside, and ending it, type the <strong></body></strong> tag, followed by the <strong></noframes></strong> tag to close it.
<strong>Setting the COLUMNS and ROWS </strong>
When we define columns and rows in a frame, we start it with a <strong><frameset></strong> tag and then close it with a <strong></frameset></strong> tag.
There are three kinds of numbers that we can use in setting the size of the column or the row.
a. x%(x is a number between 1 to 100)- it determines the width of the column by a percent available in the browser window. The same thing with the row, only that it determines the height of the available browser window in percent.
b. x(defines any number)- tells a defined pixel value in width(if you use it in making a column) or height(if you use it in making a row).
c. *- tells the browser to use the all the available space left.
To make it more clear, here are the examples:
for columns:
1. <strong><frameset cols="45%,55%></strong>- means that the first column is 45% of the window and the second column is 55% of the browser window.
2. <strong><frameset cols="180,*"></strong> means the browser will use 120 pixels of width for the first column and the remaining space left for the second column.
For the rows, it's almost the same with the columns, only that you use the <strong><frameset rows="size of first row, size of second row, size of third row, size of so on and so on row"></strong> tag.
ADITTIONAL ATTRIBUTES OF THE FRAME TAG
- noresize- commands the browser that the frame can not be resize by the user. If you don't use this tag, the user will be able to resize your frame.
- scrolling="yes"- puts a scroll bar in the frame
scrolling="no- doesn't place a scroll bar in the frame
scrolling="auto"- this makes the browser determine if you need a scroll bar.
- name="name of the frame"- this one is optional. It assigns a name to the frame. If you don't use this, the browser will not name the frame. It is also often targeted by links in other documents.
example:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td height="26]<frame src="filename.html" scrolling="yes" noresize name="main"></td>
</tr>
</table>
<hr />
Written by <strong>theeye</strong> (13 March 2005)
<strong>theeye</strong> is a Member of <strong>Knowledge Bank Tutorial Writers</strong>
<p class="style1].:edited by purefreak
</body>
</html>
|
|
This article was imported from the CyberArmy University site. (original author: theeye)
There are no replies to this post yet.
|