|
         
Isn't
it time you
updated your site?
| |
GUIDES
TO LAYOUT
Not
all pages are candidates for a frame style presentation and its use
should be selective. Frames do, however, provide a super way of indexing
data by allowing the user to have constant visibility of selectable
information. Thoughtful layout is the first step. You need to decide
what form or "look" you require before starting construction.
The <frameset>
tag is the container for all code in the layout and must appear before <body>
open and close tags. The attributes of <frameset> are
columns and rows so you must decide how they apply to your layout.
For
starters we will look at a page divided into columns and a page divided
into rows. These can also be subdivided into columns or rows as shown
here. Columns division uses <frameset cols=>; and rows, <frameset
rows=>. Widths of columns (or heights of rows) may be specified
in pixels or percentages of window size. Inserting an asterick (*)
conveniently allows for use of remaining space.
|
Note:
Above examples demonstrated division by only two although additional
division is possible and may be desirable for your project. In a
following example, I use a window divided into three rows.
Elements
of the Frame tag.
Name, scrolling, and noresize are three important
attributes of <frame>. Applying a name to the frame, name="
", provides its use as a target as I will discuss later, but
may be omitted if the frame is not to be targeted. Scrolling is
specified as scrolling="yes", scrolling="no"
and scrolling="auto". Scrolling= "auto"
lets the browser decide if scroll bars are required which may provide
increased frame area for data. As an author, you may restrict browsers
from changing frame size by adding noresize.
|
A
word of caution:
Not all browsers are "frames-capable" and Netscape has
provided a <noframes> tag set to follow the <frameset>
command. Those surfers with Netscape 2.0 will see the frames layout and
others will view an alternate or normal page. The code for the
"normal" page is bounded by the <noframes> and </noframes>
tag set and includes the <body> and </body>
tag set and all code therein.
A
basic sequence of code is shown here.
|
<frameset
cols="20%,80%">
<frame
src="col1.html">
<frame
src="col2.html">
</frameset>
<noframes>
<body bgcolor="#ffffcc">
</body>
</noframes>
|
|
|
BORDERS VS.BORDERLESS
Removing
borders from the frameset is simple. Include frameborder="no"
framespacing="0" border="0" within the opening frameset tag.
Those are zeroes, not "Ohs".
Example:
<frameset
rows="50,*" frameborder="no" framespacing="0"
border="0">
<frame src="aa.html">
<frameset="100,*">
<frame src="bb.html">
<frame src="cc.html">
</frameset>
</frameset>
Another
example:
TIP:
Setting border="1/2" will provide narrower borders and a
"cleaner" look to your page.
FRAMES
& TARGETS
TARGETED
FRAMES
It is necessary to provide "control" within the frame that changes
information in another frame. Consider a frameset of two columns, the left an
index frame for making a selection and the right a content frame for displaying
the selection. If the <frame> tag in the layout frameset included name="content",
the controlling frame (index.html) should include <base
target="content"> within the <head> tag. All links
in the index.html frame will then target the "content" frame. Without
this entry, it will be necessary to include target="content"
within each of the links.
Example
Layout:
<frameset cols="20%,80%">
<frame src="index.html">
<frame
name="content" src="content.html">
</frameset>
|
Frame,
index.html:
<head>
<base target="content">
</head>
<body>
</body>
|
Frame,
content.html:
<body>
</body>
|
A review of the Netscape page on frame
syntax and targeting
windows may be beneficial at this time to learn of other tag options that
control how targeted frames respond.
Hints:
1. When
targeting a web page from a frame within the frameset and you wish for it to
load in the 'full' window, include target="_parent" in
the anchor for that link. Otherwise, the linked document will load in the
frame.
2. If you
wish for a targeted web page to open in a 'new' browser window that is layered
over your current window, include target="_blank" in the
anchor for that link. This is handy if you wish to keep visitors at your
site. When they close the layered window they are back on your page.
TARGETING
TWO FRAMES
Since framesets can be "nested", you can target a frame that is itself
a frameset. This technique will allow you to change from one category to
another, each with its own index frame and content frame. This is equivalent to
targeting two frames with one anchor tag (link). Other tutorials, I've seen go
into great detail to explain how to target two frames simultaneously, but
thinking of this action as "nesting" seems easier and more straight
forward to understand. Here is a complete starter
kit with demo of code for nesting.Caution: Nesting framesets below one
level is likely not too practical as each pane (frame) becomes smaller and
dealing with text and/or graphics can be a challenge and provide diminishing
return.
[ HTML Basics ] [ Headlines ] [ Paragraphs ] [ Links ] [ Free Links ] [ Mail-to ] [ Bold Italic ] [ Font Color ] [ Font Size ] [ Background Image ] [ Graphics ] [ Background Color ] [ Aligning Text ] [ Aligning Images ] [ HTML -Adding Audio ] [ HTML - Frames ] [ HTML Tables ] [ Meta Tags ] [ Forms ] [ Mouse Over ] [ Mega Search ] [ Browser Support ]
|
™
Copyright
© 1998, 1999, 2000 