Lecture 8b: HTML: Frames
What You Will Learn Today
- Describe the function and HTML structure of of frames.
- Use frameset and frame tags for page layout.
- Use targets and the base tag to specify target frames.
- Describe the usability issues associated with frames.
- Use noframes tags for accessibility.
- Use inline frames and compare with framesets.
- Use other layout tools and techniques.
- Insert applets and other multimedia objects.
- Frames are separately scrolling parts of a single browser window.
- The most common layout of frames is a thin navigation frame in the left
column and a content frame in the right.
- The frameset tag creates the page layout of rows and columns, somewhat like a
- The frameset document (often the index page) contains frameset and frame
- Use a frameset tag instead of a body tag.
- Sizes of rows and columns are either in percentages or pixels.
- cols="20%,80%" gives two columns, one is four times the other.
- rows="100,400" gives two rows of height 100 and 400 pixels.
- Using * for a row or column will automatically calculate the remaining
space and divide it equally.
- rows="100,*" gives one row of height 100 and another to fill the screen.
- cols="10%,*,*" is the same as cols="10%,45%,45%".
- You can nest framesets within other framesets (not advisable) to get rows within a column
or columns within a row.
frameborder="0" hides the frame borders.
- Within the frameset tag is a
frame tag for each frame
(two or more).
src attribute gives the source file for each frame, e.g.
name attribute is the name of the frame for link targets,
whether to use scrollbars.
scrolling="auto" inserts scrollbars if
noresize prevents the user from being able to resize the
frame by dragging the border.
marginheight are the frame
margins in pixels.
target attribute indicates a frame or window where the clicked link will open.
- The link has the format
<a href="myfile.html" target="name"> where name is
target="_top" is the entire window.
target="_parent" is the parent window. (Same as
_top unless the frameset is nested.)
target="_blank" opens a new window.
target="_self" is the current frame. (default; used
to override the base tag)
- Insert a
base tag in the
of a document to change the page's default target.
<base target="_top"> if most of the links in the page should use the
<base href="myfolder"> to use a folder
other than the current directory for most links in the page.
- Frames separate content from navigation.
- The navigation frame remains in view in a fixed place even if the content frame is
- Content frame pages can be printed without navigation elements.
- Frames reduce data redundancy.
- Maintaining a navigation bar on every content
page is repetitive and error-prone.
- Navigation elements in a frame only need to be updated and maintained in one place.
- Jakob Nielsen's usability site useit.com listed
frames as the top mistake in Web design!
- Navigation frames take up a relatively large amount of screen space that cannot be
used for page content.
- Frames are especially wasteful on small windows, e.g. for users with small
- Keep navigation frames as small as possible. Limit the number of frames to
2 or 3.
- Using a frame for an organization logo or name is a particularly bad use
of screen space.
- By separating navigation and content, frames behave differently than other
- Navigating frames is more complex than navigating in units of pages.
- The titles and URLs of framed pages are not displayed; only the
frameset title and URL appears.
- Your site can frame another site and make it appear as part of your site,
which is confusing and misleading.
- Frames can't really keep people from leaving your site.
- When linking to external sites, use
- Opening a content frame in a new window may be necessary for bookmarking,
saving and printing.
- Right-click the frame or link you want to use, then select Open in New
- Opening a new window is extra work, and beginner users do not know how.
- Framesets do not print well in most browsers.
- Framed sites are more difficult to design than non-framed sites.
- Search engines have trouble with frames. If your home page is a
frameset, your site may be ignored.
- User tests show they prefer frame-free versions of sites.
noframes tag displays content if the user's browser cannot or is not
- Providing a
noframes tag is essential for search engines and increases accessibility.
- At minimum the
noframes tag should an error/explanation message and a link to
the navigation frame file.
<noframes>Your browser is not showing frames.
You can still use the <a href="navbar.html">navigation bar</a>.</noframes>
iframe tag is used to insert an HTML document anywhere within another
- Inline frames can be used very much like an image or other embedded object.
- iframes have the maintenance advantages of frames without the disadvantages
of embedded windows.
- iframes are useful for creating a uniform navigation bar.
- Jakob Nielsen recommends replacing frames with iframes.
Other Layout Tools and Techniques
- To create a text-based navigation bar,
- vertical: use a bulleted or numbered list of links, or <br> tags after each
item to save space.
- To limit the width of a vertical navigation bar, put it in a table cell
and specify the cell width.
- horizontal: use links separated by vertical bars
- Home | About | News | Products | Downloads | Links | Contact
- Horizontal bars take less space and can be put both at the top and
bottom of the page.
- To visually separate the navigation cell or frame from content, use a
different (contrasting) background colour.
- Create a template of a page that can be used many times in your
- Use HTML comments to mark the sections of the code that contain the
content and navigation.
<!-- start of page content --> (navigation elements)
<!-- end of page content -->
- Avoid opening new browser windows (e.g. using
- The back button in the new window will not take the user to the previous
- Often new windows contain annoying advertisements so the user mistrusts
- Some sites try to keep users on their site by opening new windows to all
- It is usually best to leave window management to users; let them open new
windows when they want.
- At least inform the user if a link will open a new window.
Applets and Multimedia
See Lab 7. Also see Lecture 8 from the
To Do After Class
- Complete Lab 7 by Friday.
Lab 8 is due next Friday.
- Paper References: Sklar Unit H, Reding/Vodnik F6-F11, Carey Tutorial
5, QuickStudy HTML p. 4
- Electronic References: HTML 4.01 Specification Ch. 16, Bare Bones Guide