|
|
|
|
The main
JayDax web page is actually made up of 'three' frames. However,
they share the same background and the frame borders have
been turned off, so sometimes you can't easily see where they
are. Clicking on a link in one frame can be made to alter
the content of another frame. This is used by the right-hand
and top frames as an index to JayDax web site. If you want
to see a frame in a window on its own, this can be done with
Netscape by right clicking where the frames are, and choosing
'open frame in new window'.
If you want to create your own frames, there is an excellent
tutorial on writing the HTML involved at http://www.newbie.net/sharky/frames
, this may perhaps be a little beyond a novice to HTML, and
we have to admit, we find writing the HTML code a chore. One
way around this is to use a webpage editor such as Dreamweaver
by Macromedia, which makes producing frames a breeze. Dreamweaver
is not cheap, but, if you value your time, it's worth it!
Lets look at some HTML
code for a simple HTML page which creates the following layout.
|
Title
Frame
|
|
Menu
Frame
|
Main
Frame
|
Text
in gray is not relevant to the HTML codes used to
produce a frameset. They are there to show the correct
placement of the frames codes.
|
<HTML>
<HEAD>
<TITLE>Basic Example Frameset</TITLE>
<META NAME="Description"
CONTENT="This is an example of a simple frameset">
<META NAME="Keywords" CONTENT="understanding
frames">
<META NAME="Author" CONTENT="JayDax
Web Design Services">
</HEAD>
<FRAMESET ROWS="100,*">
<FRAME NAME="title" SRC="title.htm" SCROLLING="no">
<FRAMESET COLS="20%,*">
<FRAME NAME="menu" SRC="menu.htm" SCROLLING="auto">
<FRAME NAME="main" SRC="main.htm" SCROLLING="auto">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<H2>Those people who can't display frames with
their browser will see this.</H2>
</BODY>
</NOFRAMES>
</HTML> |
| <FRAMESET ROWS="100,*"> |
Frameset
replaces the <BODY> tag - it can have a number
of parameters:
ROWS="100,*" - means 2 rows, the top being 100
pixels high, the bottom, taking up the rest of the space.
COLS="20%,*" - means 2 columns, the left taking
up 20% of the available space, the right the remainder. |
| <FRAME NAME="title" SRC="title.htm"
SCROLLING="no"> |
This section defines
what will appear in each frame. This frame has been
given the name 'title' and loads the file 'title.htm'
SCROLLING="no" - means no scroll bars will be
visible. The value "yes" would always show a
scroll bar - the value "auto" would show a scroll
bar, only if it's necessary.
MARGINWIDTH="5" - optional parameter, which forces
a 5 pixel margin at the left and right side of
the frame.
MARGINHEIGHT="8" - optional parameter, which
forces an 8 pixel margin at the top and bottom
of the frame.
NORESIZE - optional parameter, which prevents
the frame from being resized. |
| <NOFRAMES>Content</NOFRAMES> |
The <NOFRAMES>
tag is used to avoid a blank page being displayed by
those people whose browser can't display frames. It's
also a useful place to put links so that search engine
robots can read the content inside your frames - essential
if this page is the index.html of your web site. |
If
you want more details on how frames can be used in a web site,
take a look at the source code
of our home page. This 'real
life' page uses a similar layout. |
Page
design by:JayDaxDesigns
© 2000 JayDax Designs
|
|
|
