(Note: If you have not already downloaded the html Template Files please do so by clicking here.)
Frames are used to divided the main window into separate sections (or frames). Each frame has one name but, like a picture frame, can have any content. A link in one frame may update the content in another frame. See an example.
Tag | Attribute |
<FRAMESET> (replaces BODY tag) |
|
ExampleOpen the file frame-qu.htm in your browser. Note how it has 4 frames, each occuping 50% of the height and width. Now, open the file in your text editor, and note how this is implemented: <FRAMESET ROWS="50%,50%" COLS="50%,50%">Open the file in your text editor. Try modifying these percentages. Save the file, then display it in your browser. |
ExampleSuppose you wanted to nest a frame within another. For example, open the file framem.html in your browser. Take a moment to think how you might implement this. Now open this file in your text editor. Note how we've nested multiple <FRAMESET> tags. This serves to embed a set of frames within the a larger, surrounding frame. Modify this file in your text editor. See if you can embed yet another
set of frames within a larger frame. |
Tag | Attribute | Function |
<FRAME> | SRC="URL" | The URL specifies the content of the frame. It can be a full URL or just a file name if the file is in the same directory as the top level frameset file. |
NAME="framename" | "framename" becomes the name of the particular frame. The name is case sensitive. | |
SCROLLING =
|
Indicates if the frame should have a scrollbar. "Yes" means add a scrollbar, "No" means don't, and "Auto" means add one if it is needed (if the contents of the frame are bigger than the frame size. | |
NORESIZE | The presences of this attributes means the user cannot resize individual frames. Because you don't know the size of your user's browser window, doing this is usually a bad idea. |
ExampleOpen the file frame-qu.html in your browser and note what the document looks like. Now open it in your text editor, and looks at the < font Class=HTMLTags><FRAME> tags.
Open this file in your text editor, and try modifying this file. Add the SCROLLING and NORESIZE attributes. Put in different destination URLs. Save the file then view it in your browser. |
The power of frames lies in navigation. Clicking on a link in one frame can change the content in another. The way to do this is by adding the TARGET attribute in the anchor <A> tag. Remember, the <A> tag is used to create hypertext links. When you add the TARGET attribute, you are simply saying where (in what frame) the contents of the link should be displayed.
ExampleOpen the file frame-qu.html in your browser. Note that when you click on a link, the contents change in a different frame. Now let's look at how this is implemented. We don't want to look at the HTML source for frame-qu.htm, because this document only serves to divide to the window into frames. This top level file also assigns names to each of the four frames (remember, frame names are case sensitive). Instead, we want to open one of the frame content documents, for example, frame.htm. Open the file frame.htm in your text editor. The link in questions is implemented as: <A HREF= "frame.htm" target="frAme">frAme</ A>Thus, clicking on the link will cause the contents of the document "frame.htm" to be displayed in the frame named "frAme". |
The <BASE> tag enables you to specify a
default TARGET URL for the entire document. Thus, if most links in your document
will result in the same document being loaded, then you can pre-specify this
destination URL by using the BASE tag in the document. You do then not need
to provide TARGET attributes for links that load this base URL.
Tag | Pre-defined attribute values |
<A TARGET= > |
|
<BASE TARGET= "URL"> | provides default target for all links without explicit targets. |
ExampleLet's tie all of these ideas together with an example. Open the document index.html in your browser. This is a typical example of a use of frames, with the left column acting as a table of contents and the right frame displaying contents. Click around a bit so that you understand its functionality. Now let's examine how this is implemented. First let's look at the HTML source of the top-level file, index.htm. Open it in your text editor. Note how it specifies 2 frames, and names the left frame "contents" and the right frame "main". Let's look at the HTML source of the table of contents file, contents.htm. Open it in your text editor. Or you can view the source in your browser by holding the mouse button down over the frame, and selecting "Page Source." Note how it contains 3 links, like the following: <A HREF= "main.htm" TARGET="main">page </A>This indicates that when the link is clicked upon, the document main.htm should be displayed in the frame named "main" (the right frame). Let's look at the HTML source of the table of file me.htm. Open it in your text editor. It contains 2 links: <A HREF= "http://www.usu.edu">USU</A><A HREF= "http://cc.usu.edu/~mimi/" TARGET="_self">Mimi Recker </A> The first link does NOT specify a TARGET. What happens when you click on it? Unfortunately, the contents of the USU home page are displayed INSIDE of the frameset. This can be considered bad design, because it implies that the USU home page is part of the frameset. Imagine someone using frames, and steals content by 'imbedding' another entire website into his frame. Unknowing readers might be mistaken into thinking that the site belongs to the other person. One of the many reasons why frames are unpopular. The second link (uses the pre-defined "_parent" TARGET. What happens when you click on it? This makes the contents of my (unrelated) home page replace the top-level frameset. Cons: it also replaces the navigation menu (on the left frame). Selecting an approapriate TARGET is a common error when implementing frames. A simple Rule of Thumb would be to use TARGET: (_self) to replace ONLY the right frame, so as to keep navigation menu constant; (_blank) to open a new window that points to an external website; (_parent) if the link opens up a window that you want to replace the top-level frameset. |
ExampleLet's now modify this example. Let's add a new link to the table of contents that points to a document describing hobbies. Here is what is required:
|
Essentially, you enclose everything intended for users with non-frame aware browsers inside the <NOFRAMES> </NOFRAMES> pair of tags. This content is ignored by Frames-aware browsers, and only made available to non-frame aware browsers.
Some of the more vocal web designers decide to forsake frames altogether. Example: http://budugllydesign.com/frame9806/framebad.html