Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to the Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents

This course was developed in much earlier days of the web and has been updated into Web Design Basics for iPad (same Dave, much better course!)
iPage Web Hosting -- Go Green for only $1.99/mo.
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code MiniChapter 14.3: Even More About Using Frames

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

Special attributes of <frame>

There are two special attributes you should be aware of for the <frame> tag. Let's go back to the side menu example.

<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu">
 <frame src="main.htm" name="mainwindow">
</frameset>

Say you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn't resize it. (Imagine the user moving the divider bar so that half the browser has the menu, and half has the main window. Wouldn't that look silly?)

In order to lock the size, add the words noresize to the frame you want to lock:


<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu" noresize>
 <frame src="main.htm" name="mainwindow">
</frameset>

This does not prevent you from changing the pages inside the windows, it just prevents the user from modifying the frame size when the page loads.

The other useful attribute is scrolling. Say you always want a scrollbar to appear in the main window. Add scrolling="yes". Want there to never be a scrollbar? Add scrolling="no".

Example:


<frameset cols="15%,85%">
 <frame src="menu_bar.htm" name="sidemenu" noresize>
 <frame src="main.htm" name="mainwindow" scrolling="yes">
</frameset>

More Advanced HTML Frames

You can embed a frameset anywhere there is a frame if you want to split that section further. Want a special, fixed area for your logo graphic at the top of the menu bar? Try this:

<frameset cols="15%,85%">
 <frameset rows="20%,80%">
   <frame src="logo.htm" noresize>
   <frame src="menu_bar.htm" name="sidemenu" noresize>
 </frameset>
 <frame src="main.htm" name="mainwindow" scrolling="yes">
</frameset>

Now, here are some things to think about. How would you get four even frames in two rows?

You could do:


<frameset rows="50%,50%">
 <frameset cols="50%,50%">
   <frame>
   <frame>
 </frameset>
 <frameset cols="50%,50%">
   <frame>
   <frame>
 </frameset>

Three even columns?


<frameset cols="33%,33%,33%">
  <frame>
  <frame>
  <frame>
</frameset>

How about three rows, the first one 1/4 of the screen, the second 1/2 of the screen, and the third 1/4 of the screen?


<frameset rows="25%,50%,25%">
 <frame>
 <frame>
 <frame>
</frameset>

Same as above, but the very bottom frame split into two equal columns?

old...


<frameset rows="25%,50%,25%">
 <frame>
 <frame>
 <frame> <-- replace this
</frameset>

new...


<frameset rows="25%,50%,25%">
 <frame>
 <frame>
 <frameset cols="50%,50%">
  <frame>
  <frame>
 </frameset>
</frameset>

There you go! Now you know how to create frames!

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.

Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap14_3.shtml