Time Machine: Frame Set and Frames in HTML webpage

Frames:

Frames are graphical and logical subdivisions of a single web "page" into two or more sections or areas .
Frames make your website less linear but more browse able --- This means that :
Frames allow one to create web sites which are less "linear" than non-framed sites. But on the other hand

frames make a site more "browse able"as easy as flipping through a book. Most

current sites use a two-frame format. The first serves as the site navigation index, while the other is

the frame holding the selected "content" pages

Good Points of Frames:

Making efficient use of frames and maximizing "content" page space .
Lets you decide and divide the content on the page . For example you can divide the content on the page from the HTML links on the page .
Improves readability for the users as the content is already logically divided into sections.

Frame Set:

The frameset tag in HTML ,<FRAMESET> defines the general layout of a web page that uses frames. <FRAMESET> is used in conjunction with<FRAME> and <NOFRAMES>.

<FRAMESET> creates a table for content in which each rectangle (called a "frame") in the table holds a separate document or a HTML page. In its simplest use, <FRAMESET> states how many columns and/or rows will be in the "table"

Difference between Frames and frameset:

The <frame> tag defines one particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

Frameset attributes:

A. cols - values can be pixels, %, * -Specifies the number and size of columns in a frameset

B. rows - values can be pixels, %, * -Specifies the number and size of rows in a frameset

Frameset important property:

Frameset can be nested .

In the following example, the outer FRAMESET divides the available space into three columns.
The inner FRAMESET then divides the second area into two rows of unequal height.

<FRAMESET cols="25%, 25%, 50%">
     ...contents of first frame...
     <FRAMESET rows="40%, 50%">
        ...contents of second frame, first row...
        ...contents of second frame, second row...
     </FRAMESET>
     ...contents of third frame...
</FRAMESET>

NOFRAMES:

This element specifies the content that should be displayed when the frames are not displayed.The user agent that supports frames can only display the content of the this element when it is congirured to not display the frames.

Lets see an example :

<html>

<head>

<title>Demo of NOFRAMES</title>

</head>

<body>

<p>Hey ! This is the non frame version of the document</p>

</noframes>

</frameset>

</body>

</html>

Vertical use of Frames:

Example.html

<!DOCTYPE html>
<html>
<frameset cols="20%,70%">
<frame src="C:\Users\SunShine\Desktop\New folder\nav.html"/>
<frame src="C:\Users\SunShine\Desktop\New folder\content.html"/>
</frameset>
</html>

nav.html

<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li> // # means empty link
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>

content.html

<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li>
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>

Horizontal use of Frames:

Example.html

<!DOCTYPE html>
<html>
<frameset rows="20%,70%">
<frame src="C:\Users\SunShine\Desktop\New folder\nav.html"/>
<frame src="C:\Users\SunShine\Desktop\New folder\content.html"/>
</frameset>
</html>

nav.html

<html>
<head>
<title>Nav</title>
<body bgcolor=”red”>
<h1>Navigation area</h1>
<ul>
<li><a href=”#”>some</a></li> // # means empty link
<li><a href=”#”>something</a></li>
<li><a href=”#”>something else</a></li>
</ul>
</body>
</head>
</html>

content.html

<html>

<head>

<h1>Navigation area</h1>

<ul>

<li><a href=”#”>something</a></li>

<li><a href=”#”>something else</a></li>

</ul>

</body>

</head>

</html>

hey guys i have uploaded a video on the same topic on you tube : http://www.youtube.com/watch?v=0wWMcmJDGfQ

Part 1:

Part 2:

Time Machine

Sunday, 17 June 2012

Frame Set and Frames in HTML webpage

Frameset important property:

NOFRAMES:

Vertical use of Frames:

Horizontal use of Frames:

No comments:

Post a Comment