Wilson Frame DemonstrationBanner frame1.1 Index Frame1.2 Nested Frame Targets

Demonstration of Frames

What are Frames?

Frames allow page designers to divide pages into segments (sometimes called panes). One can create any number of rows and/or columns, thus gaining great control over the visual appearance of pages. Links in any segment can be designated to control what gets loaded into any of the other segments. Site designers use frames for purposes such as providing persistant banners which never change or indexes that remain constant and control what appears in other segments. Some in the Web design community doubt the value of frames - noting the dangers of clutter, user confusion, and space problems. Not all browsers support frames; Netscape does. Still frames do offer opportunities.

Setting Up the Basic Frame Layout.

Frames are established in a master frameset document which indicates the layout of the frames and the urls that should be loaded into each segment. The <FRAMESET> tag encloses the specification. The number of rows and columns is specified as an option within the tag. The number of pixels or percentage of the page must be specified for the division into rows or columns. For example the first example's code would establish a page with two rows - one taking up 20% of the page and the other 80%. It might be used to establish a banner. The second example divides the screen up into two columns - each taking 50% of the window. The list of sizes must be separated by commas and enclosed in quotes. Browsers use the list to determine the total number of segments.

After the main divisions are specified the layout must specify what should appear in each segment. The <FRAME>tag indicates which URL should be loaded into each segment as well as other options which are explained later.

Divide into 2 rows 20/80%

<frameset ROWS="20%,80%">

   <frame SRC="ban.gif" NAME="banner">

   <frame SRC="main.html" NAME="mainbody">

</frameset>

Divide into 2 columns 300/100 pixels

<FRAMESET COLS="300,100">

   <FRAME SRC="toc.html" NAME="index">    <FRAME SRC="main.html" NAME="mainbody">

</FRAMESET>

Nesting Frames.

Frames structures can also be nested within each other by inserting additional <FRAMESET> structures. The logic of tag placement must indicate the logic of which screen segments should be subdivided. The following example combines the previous two. The window is divided into a 20% banner row and 80% main body. The main body is additionally divided into two equal columns. Notice the main frameset's closing tag comes only after the internal frameset has been closed. The <FRAME> tags must be inside the framesets to declare what each window segment should contain.

Divide into 2 rows 80/20%.

Divide row 2 into 2 columns  50/50%

</FRAMESET>

Options within Frameset Tags.

The division of the screen within the <FRAMESET> tag can be indicated in several ways. You can indicate percentages (30%,40%,30%) or actual pixels (100,200,50). Use of explicit pixels can cause design headarches because it is difficult to predict how big any user's screen will be. You can also indicate relative size by using the special * symbol. The browser will allocate all remaining space to the frame indicated by the *. For example (ROWS="100,200,*") would cause the browser to allocate 100 pixels to the first row, 200 pixels to the second row, and whatever remains to the third row. Values in front of the * can specify relative allocation; for example (COLS="3*,*") would create a two window vertical segments with the first occupying 3 times the space of the second (75%/ 25%).

Options within Frame Tags.

Each Frame tag can include any of six attributes (SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, and NORESIZE). SRC indicates the address of the url to be loaded into the page. NAME indicates a name tag to be assigned to the particular frame. This name is essential when using links to target frames other than the one which contains the link (explained further later). MARGINWIDTH and MARGINHEIGHT indicate the number of pixels to be placed on the sides of the page loaded into the frame. SCROLLING determines whether scrollbars are offered to the viewer for that particular frame. It can assume the values of yes (always offer scrollbars), no (never offer scrollbars), or auto (browser determines if scrollbar is necessary - used as default setting). NORESIZE keeps the browser from resizing the web page. Options are separated by spaces

The following example would create a frame that had the name "froggy", used a 4 pixels horizontal margin and a 2 pixel vertical margin, never allowed scrollbars and did not allow resizing.

NOFRAMES Tag

The <NOFRAMES> and </NOFRAMES> tags can be used to enclose alternative HTML code that will be displayed when a viewer's browser cannot display frames. A frames capable browser will ignore the material inside the tags. Since frame support is not universal, it is a good idea to provide alternative access.

Controlling Links among Frames

In a normal Web page clicking on a link results in the new page loading into the same window as the page that contained the link; it replaces the page. Frames allow the Web designer to create links that load pages into other accompaning frames. This targeting is accomplished by adding a TARGET attribute to a link specification. The NAME attribute included in FRAME specifications provides the names that can be used in targeted links.

The example below shows a web window that has been divided into three parts: a banner at the top, a main body where pages can be loaded, and a persistent set of navigational links that controls what can be loaded into the main body. Each link in the navigational section includes a TARGET attribute that specifies the main body

*Divide into 3 rows 10/70/20%. *Banner on the top. *Navigational Links at the bottom *Links load into central main section. <FRAMESET ROWS="10%,80%, 10%">

<FRAME SRC="ban.gif" NAME="ban"> <FRAME SRC="main.html" NAME="main"> <FRAME SRC="nav.gif" NAME="nav"> </FRAMESET> *Sample target links in navigation setion
Music Pictures

Special Targeting Options

Netscape provides some special terms that can be used with the TARGET attribute instead of the name of a frame. Some versions of browsers will understand the BASE tag. This sets up the global target for all links unless special targets are indicated. It is specified in the header. For example < BASE TARGET="main" > used in the previous example would have made all links load into the central section (named "main") unless specific targets were noted in links.

Netscape provides other special target options. These all start with the underscore character.

The TARGET="_blank" option will load the linked url into a new blank window.
The TARGET="_self" option will load the linked url into the same frame as the link.
The TARGET="_parent" will load the url into the frameset parent of the frame that contained the link. (It defaults to acting like the "_self" target if it doesn't have a parent.)
The TARGET="_top" will load the url into the full window, replacing all the frames.

This one replaces the frame with the link in it with a new html page in that frame
<A HREF="new.html" TARGET="_self"> New </A>

This shows the results of using the _top target:
<A HREF="new.html" TARGET="_top"> New </A>

(In this example the TARGET="_parent" produces the same result as the _top target because the page has only one level of framesets. If it were deeper, the _parent target would place the new page one level up.)

This one illustrates the use of the _blank target.  It opens an entire new browser window.
Note you could use this _blank target option even when there are no frames.  It would mean that the link
would open a new window and leave the original page with the links in tact underneath.

<A HREF="new.html" TARGET="_blank"> New </A>

Borderless Frames

Microsoft Explorer supports the creation of borderless frames. This means that it does not display any of the 3-d borders that separate frames - placing them right next to each other to make a seemless page. Netscape may support this feature in Navigator 4. The default creates borders. You can create borderless tags with the following tags.

1. First you must set up the frameset indicating 0 frameborder and 0 framespacing.

2. Next you usually want to set up each frame so its body does not insert any margins; this will insure that the separate frames seem to postion themselves seemlessly. The topmargin=0 and leftmargin=0 tags should be included in the body tag of each frame.

New HTML 4 Extensions on Frames

Frame Targets

_blank - new page
_self replace current frame
_parent - load into parent frame
_ replace all frames

BORDER = PIX BORDORCOLOR = "RED" FRAMEBORDER = (NO, YES, ID =

Options

BORDER = PIX BORDORCOLOR = "RED" FRAMEBORDER = (NO, YES, ID =
MARGINEHEIGHT= pix MARGINWEIDTH = pix NORRESIZE SCROLLING = yes,no,auto

------

<NOFRAMES> put in FRAMESET with alternative text for browsers without frame capabilitiies

Floating frames (microsoft IE 4