Web: Lecture 8b

Lecture 8b: HTML: Frames

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 table.
The frameset document (often the index page) contains frameset and frame tags.
- 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).
The src attribute gives the source file for each frame, e.g. <frame src="navbar.html">.
The name attribute is the name of the frame for link targets, e.g. <frame name="navframe">.
scrolling="yes" or scrolling="no" specifies whether to use scrollbars. scrolling="auto" inserts scrollbars if needed.
noresize prevents the user from being able to resize the frame by dragging the border.
marginwidth and marginheight are the frame margins in pixels.

The 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 the frame.
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 <head> section of a document to change the page's default target.
- Use <base target="_top"> if most of the links in the page should use the entire window.
- Use <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 scrolled.
- 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 screens.
- 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 pages.
- 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 target="_top".
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 Window.
- 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.

The noframes tag displays content if the user's browser cannot or is not viewing frames.
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>

The iframe tag is used to insert an HTML document anywhere within another HTML document.
- 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.
Attributes: name, src, title, align, width, height, marginwidth, marginheight, frameborder, scrolling.

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 site.
- Use HTML comments to mark the sections of the code that contain the content and navigation.
-  (navigation elements) 
Avoid opening new browser windows (e.g. using target="_blank").
- The back button in the new window will not take the user to the previous window.
- Often new windows contain annoying advertisements so the user mistrusts them.
- Some sites try to keep users on their site by opening new windows to all external sites.
- 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.

See Lab 7. Also see Lecture 8 from the Java course.

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