Frames

Ahh...yes, the second method of website building. Frames are more often troublesome than helpful, but for some people, frames work. Frames were adopted in HTML 4.0 and XHTML 1.0 so they may not work well in older versions of HTML.

• To begin a frame, start with the frameset element. The frameset is then followed by the frame element.

• To create a frame page, you'll have to enforce several different frameset and frame attributes. Within the frameset element, use the cols attribute to create a vertical layout with pages side by side. If you use the row attribute, you can create a horizontal layout with pages on top of each other. Here's an example of a vertical layout:

<frameset cols='240, *' frameborder='0'>
<frame src="menu.html" noresize>
<frame src="menu1.html" noresize>
</frameset>

Click here to see the example.

Remember: you'll need to make your own pages to put in the src areas. Depending on how many pages you want on one page, that's how many pages you'll have to make.

• So now you want an example of a horizontal layout don't you. Well, here's one.

<frameset rows='200, *' frameborder='0'>
<frame src="menu.html" noresize>
<frame src="menu1.html" noresize>
</frameset>

Click here for an example. Same aspect, except you'll have to move around the elements so that they fit better in the horizontal frames.

• Here are some frameset attributes:

cols -- This creates columns of frames as covered above.
rows -- This creates rows of frames as covered above.
border -- This creates a border around your frames as specified in Netscape.
frameborder -- This creates a border in Internet Explorer.
framespacing -- Used in Internet Explorer, this controls border width.

• Here are some frame attributes:

frameborder -- This is used to control borders around individual frames.
marginheight -- This is used to control the frame's margin height.
marginwidth -- This is used to control the frame's margin width.
name -- This is used to name a frame so that other pages can open in it.
noresize -- This is used to keep your visitors from resizing your frames.
scrolling -- Using a yes, no, or auto you can moderate your scrollbar.
src -- This is for the page url of the page you wish to put in the frame.
title -- This is for giving a certain frame a certain descriptive name.

• In a case where a browser can't read frames, and yes there are those, you can use the noframe element to create an alternate page for those people. Now for the last lesson in this lesson, inline frames.

• Inline frames are what you would consider as floating frames. They don't require the frameset element. You can put an iframe anywhere in a simple html document. Here's an example:

<iframe width='320' height='100' src='iframe.html' frameborder='0'>....</iframe>

• Neat huh? I hope you've learned much about the construction of frames. You can go ahead and go to the forms tutorial when you are ready.

Back