Microsoft.NET

……………………………………………….Expertise in .NET Technologies

HTML Frames – Part 5

Posted by Ravi Varma Thumati on December 15, 2009

HTML Frames

Frames allow for multiple “.html” documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP, frames have become outdated, but if you wish to use them, read on.

Frames – A Generic Frame Page

Frames are most typically used to have a menu in one frame, and content in another frame. When someone clicks a link on the menu that web page is then opened on the content page. Here is a classic example of a basic “index” frameset with a menu on the left and content on the right.

HTML Code:

<html>

<head>

</head>

<frameset cols=”30%,*”>

<frame src=”menu.html”>

<frame src=”content.html”>

</frameset>

</html>

Frame Set:

frameset – The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it.

frameset cols=”#%, *”– Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a “*”, which means the content (the 2nd column) will use the remaining width for itself.

frame src=”” -The location of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information “index.html” because that is typically a site’s main page.

Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:

HTML Code:

<html><head></head>

<frameset rows=”20%,*”>

<frame src=”title.html”>

<frameset cols=”30%,*”>

<frame src=”menu.html”>

<frame src=”content.html”>

</frameset>

</html>

frameset rows=”#%, *”– rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a “*”, which means that menu and content (which are the 2nd row) will use the remaining height.

FrameBorder and FrameSpacing

You probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.

frameborder=”#” – A zero value shows no “window” border.

border=”#”– Modifies the border width, used by Netscape.

framespacing=”#” -Modifies the border width, used by Internet Explorer.

Here’s an example of the same frameset without the borders.

HTML Code:

<html><head></head>

<frameset border=”0″ frameborder=”0″ framespacing=”0″ rows=”20%,*”>

<frame src=”title.html”>

<frameset border=”0″ frameborder=”0″ framespacing=”0″ cols=”30%,*”>

<frame src=”menu.html”>

<frame src=”content.html”>

</frameset>

</html>

Frame Borders:

Frame Name and Frame Target

How nice would it be to make each menu link load into the content page? We do this by naming each frame and setting the correct base target inside menu.html.

HTML Code:

<html><head></head>

<frameset rows=”20%,*”>

<frame src=”title.html”>

<frameset cols=”30%,*”>

<frame src=”menu.html”>

<name=”content” src=”content.html”>

</frameset>

</html>

HTML Code:

<html>

<head>
<base target="content">
</head>
...

</html>

Frame Target:

We first named the content frame “content” on our frame page and then we set the base target inside menu.html to point to that frame. Our frame page is now a perfectly functional menu & content layout!

Noresize and Scrolling

It’s possible to further customize the <frame> tag using the noresize and scrolling=”” attributes.

HTML Code:

<html><head></head>

<frameset border=”2″ frameborder=”1″ framespacing=”2″ rows=”20%,*”>

<frame src=”title.html” noresize scrolling=”no”>

<frameset border=”4″ frameborder=”1″ framespacing=”4″ cols=”30%,*”>

<frame src=”menu.html” scrolling=”auto” noresize>

<frame src=”content.html” scrolling=”yes” noresize>

</frameset>

</html>

Noresize and Scrolling:

noresize – Do not let the frames be resized by the visitor.

scrolling=”(yes/no)”– Allow scrolling or not inside a frame.

We set the scrolling for our content frame to yes to ensure our visitors will be able to scroll if the content goes off the screen. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.

HTML – Layout

HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.

<table bgcolor=”black” border=”1″ heigh=”200″ width=”300″>

<tr><td>

<table bgcolor=”white” heigh=”100″ width=”100″>

<tr><td>Tables inside tables!</td></tr>

</table>

</td></tr></table>

The white table (identified as inner) exists inside of the (shell) table, the black one. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.

HTML – Standard Layout

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

HTML Code:

<table cellspacing=”1″ cellpadding=”0″ border=”0″

bgcolor=”black” height=”250″ width=”400″>

<tr height=”50″><td colspan=”2″ bgcolor=”white”>

<table title=”Banner” border=”0″>

<tr><td>Place a banner here</td></tr>

</table>

</td></tr>

<tr height=”200″><td bgcolor=”white”>

<table title=”Navigation” border=”0″>

<tr><td>Links!</td></tr>

<tr><td>Links!</td></tr>

<tr><td>Links!</td></tr>

</table>

</td><td bgcolor=”white”>

<table title=”Content” border=”0″>

<tr><td>Content goes here</td></tr>

</table>

</td></tr></table>

This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less debugging you will have to perform.

Advertisements

One Response to “HTML Frames – Part 5”

  1. naila said

    I’m interested in referencing the Masterpage.master to the .htm file with framesets that I’ve created. My professor taught us how to do this as part of our education, but I haven’t been able to repeat this since the course ended. I also haven’t been able to find the answer anywhere on the web; a Yahoo! Answers post returned zero responses! I read that framesets are outdated, and I’m looking into PHP, but its I solve this problem, too. Thank you for your time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: