Frames

Frames let you divide an HTML page into different areas, each displaying different content. If you are using a frames-compatible browser (Netscape Navigator 2.X or IE 3.X or later) you are seeing this section in frames. The table of contents to your left is in one frame. The words you are reading right now, are in another frame. <frameset cols="XX,XX" or rows="xx,XX"> <frame src="URL" name="frame-name" marginwidth="X" marginheight="X"> <frame src="URL" name="framename" marginwidth="X" marginheight="X"> </frameset> Designing with Frames Frames can make your site easier to navigate, cleaner, faster, and more attractive. They can also be overused and ugly. The code you write to create frames is very simple; the real challenge lies in designing with frames. There is an element on the web that is "anti-frame." These people have some good reasons to discourage frame use. Early implementation of frames had some odd technical quirks that made the reader's experience awkward. In addition, there were many places where frames were poorly applied and made the page confusing and ugly. And that's all the more reason to think about why you are using frames and to explore, through your design process, whether frames are the best solution. What Frames Do With frames, you can create a user interface to your Web sites. Frames let you: 1. Continually display components without refreshing them. This makes frames an ideal application for a navigational bar that appears throughout your site. 2. Define a relationship between pieces of the web page. For example, clicking on a button in one frame can make content appear in another frame. This lets the table of contents control what appears in the content window. A set of defined frames is called, logically enough, a frameset. The frameset defines each frame's size, name, and contents. Each frameset can define a group of vertical frames or a group of horizontal frames. Framesets can be nested within each other, which is how you create a page with both horizontal and vertical divisions. You can tell different files to display in a specific frame within the frameset. Planning for Frames Before you start typing frame commands and building a framed page, take a few moments to really look at the components of your site. Some people find it helpful to make an outline or a list. As you review the contents of your site ask yourself:
• • • •

How is the information organized? How will people navigate through the information? Will there be repeated elements—a table of contents? A set of buttons? A graphic? How are the elements related to each other? Do you want certain elements to always appear together?

If you've done print design, building a frameset is a little like building a grid. It defines the underlying structure within which information will be displayed.

. 40%"> <FRAME SRC="framea.. so think about your frames carefully....> defines what files will actual go into those frames.html"> <FRAME SRC="frameb. You must use either the COLS or the ROWS attributes or both.> itself only define how many rows and columns of frames there will be. <FRAMESET . This set of nested framesets creates the popular "title and sidebar" layout.*"> produces this this page .> is used in conjunction with <FRAME .. In its simplest use. it's a little like setting up a flowerbed into which different flowers will appear in different sections throughout the year. FRAMESET tag Allowed properties: • • • COLS: how many cols in the frameset ROWS: how many rows in the frameset FRAMEBORDER: if the frames should have borders • • • FRAMESPACING: space between the frames BORDER: space between frames BORDERCOLOR: color of frame borders <FRAMESET .> creates a "table of documents" in which each rectangle (called a "frame") in the table holds a separate document. By doing this you can create frames that are not strict grids like in the example above...html"> <FRAME SRC="framed.. if you've done any gardening.. this code creates a set of frames that is two columns wide and two rows deep: this code <HTML> <HEAD> <TITLE>A Basic Example of Frames</TITLE> </HEAD> <FRAMESET ROWS="75%.Or......> to create a "table within a table". <FRAMESET .. <FRAME .> defines the general layout of a web page that uses frames.> and <NOFRAMES>. For example.> can be nested within another <FRAMESET . <FRAMESET ..html"> <FRAME SRC="framec. The success of your overall website is related to your underlying presentation structure..> states how many columns and/or rows will be in the "table". *" COLS="*.html"> </FRAMESET> </HTML> produces this this page <FRAMESET . <FRAMESET . this code <HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD> <FRAMESET ROWS="15%.

. you'll use these names to tell the browser where to display the files that are linked from the current file... and displays the linked page in another frame. Here's how it works: You have a table of contents list in one frame.*"> <FRAME SRC="recipesidebar. A framed document works differently. If it is a one time direction of content. you can tell the browser to display linked pages with a specific frame in the frameset. For example.<FRAME SRC="recipetitlebar.>. You can direct the browser to do this in two ways. The frame-name is the name of the frame into which the browser will display linked files. The first row in the frameset is filled in by the first <FRAME . Whenever someone clicks on a table of content item. When you put a document into a frame. the linked page replaces the current page in the window.html" NAME=SIDEBAR> <FRAME SRC="recipes. the browser reads the link.>.>'s.html" NAME=RECIPES> </FRAMESET> </FRAMESET> </HTML> The first <FRAMESET .. one-window layout. The current window is the target location for the linked page. Base Tag <base target="frame-name"> The base tag tells the browser to display all linked file in the specified frame. gets the linked page. In a normal. The base tag has one attribute: target="frame-name".. you'll want to use the "target=" attribute of the anchor tag. untouched. If all your links will be opening to the same frame. this base tag tells the browser to display all the linked files in the frame named "content": <base target="content"> . Remember that you named each frame as part of the frame tag in your frameset? Well. leaving the table of contents on the screen.. which are filled in by two <FRAMESET .> creates a "table" of two rows and only one column (because there is no COLS attribute). The row in the frameset is filled in not by a frame but by another <FRAMESET .html" NAME=TITLE SCROLLING=NO> <FRAMESET COLS="20%. This inner frameset has two columns. you probably want to use the <base> tag to set a default target for all links in the file.. Targeting Content An HTML page usually has links to other pages.. when you click on the link.

you set the target value to _top. For example.html" in the frame named "content": <a href="design. like this: <base target="_self"> Don't forget to use the underscore bar before the word self. To do this. make the target be the name of a frame that doesn't exist. you might want to make the name something like "new" or "anotherwindow. It places the linked page into the current frameset. set your target value to equal _self. Filling the Frameset If you are using a nested frame. To do this. For example.html" target="content"> Other Target Options Most of the time. Overwriting the Frame Every now and then. you might want to use this setting from time to time. don't forget the underscore before the word top. you may want the framed file to be replaced with another file. set the target value to _parent. this anchor tag tells the browser to display the file "design." For example. Making a New Window If you want the browser to open a new window. the browser opens a new window for the linked page and leaves the current page on the screen: <base target="newpage"> You can use this tag in a file even when you aren't using frames. Filling the Full Page You can have the linked page fill the entire browser window. However. there are a few other values you can use for the target attribute. You can tell the browser to display a particular linked file in a specific frame by including the target within the anchor tag. overwriting all frames within the set. creates a link in your page.Anchor Tag <a href="URL" target="frame-name"> The anchor tag. overwriting all frames. you'd like the Table of Contents to disappear and be replaced with the Site Map graphic. It's a nice little shortcut for creating a new window on your reader's screens. To do this. To remember what you've done. One of this tag's attributes is "target="frame-name". <a href="URL">. like this: . when you click on links in a file that contains this base tag. your target frame will be the name of one of the frames in your frameset. you might have an site map you want to display. When people click on Site Map in the Table of Contents. like this: <base target="_top"> Again. These values work in both the base and the anchor tags.

width:500px. the result will be identical to setting the value to _top. border:0px. Frames in a table Use iframe tag to put a frame into a table cell: <td> <iframe src="frameurl" style="height:500px.<base target="_parent"> If you have only one frameset." name="myiframe"><a href="frameurl">Your browser does not support iframes</a></iframe> </td> .

Sign up to vote on this title
UsefulNot useful