|
I think what we'll do now is make a Framed Page from scratch.
Nothing fancy, just something ordinary.
Before we start, let me stress... keep it simple! A site with
a bunch of frames and links pointing all over the place is going
to be confusing to build and even more confusing to navigate.
That said, let's go to it!
First we must think about what we want the end result to be.
I think a good simple design would be a banner across the top, a
directory window on the left, and the main window on the right.
Let's make the Master Page first. (I'm not going to show
any examples for this. You open a note pad and keep checking it
with your Browser)
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Make another new folder and save this as index.html.
Also the image we will be using for the banner is the "MY
FRAMZ PAGE" image or you can use your own image of your
choice.
Divide the screen horizontally.
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
</FRAMESET>
</HTML>
Note we get 83 by adding 8 to the height of the image
(75+8=83). Also note that since we are using an absolute
dimension we are including an elastic frame.
Next specify banner.html to go in the top frame
(we will make that document in a couple minutes). Also throw in
a <FRAMESET> tag pair because we are going to
divide that bottom portion further.
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
You can run this now but you may get error messages
because it's incomplete.
We will divide the bottom window into two sections. We will
also specify that the left window contain directory.html
and the right window contain home.html. Once again,
we have not made these documents so you may still get an error
message (or two) (or three).
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directory.html">
<FRAME SRC="home.html">
</FRAMESET>
</FRAMESET>
</HTML>
Since we will have our directory on the left and pages will
load into the righthand frame, we should name that frame. Its
the only one that will have stuff loaded into it so its the only
one we really need to name.
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="directory.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>
</HTML>
OK. We are done with this one... for now.
Lets make banner.html. Start with the following
and save it.
<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>
Notice we have specified a background color of blue.
Pop in the image and <CENTER> it. (Any
image of your choice)
<HTML>
<HEAD>
<TITLE>Practice Page- Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif"
WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>
While I'm thinking about it, I just wanted to mention that if
you look at the source of my documents to assist you in
creating your documents you may find a few things that
don't make sense or that may confuse. That is because I have to
make my pages jump through a few things so that the
lessons work right when viewed. Make sense? If not, just don't
look at the source of these pages unless you want to confuse
yourself.
Alright... as you can see we have a problem. We have a
scrollbar getting in the way and the image is not positioned in
the window very well. Open your Master Page. Turn off the scroll
bars and get rid of the margins.
<HTML>
<HEAD>
<TITLE>A Practice Page</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html" SCROLLING=NO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAMESET COLS="20%,80%">
<FRAME SRC="directory.html">
<FRAME SRC="home.html"
NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>
</HTML>
Now let's make our Directory page. Start with the following
and save it as directory.html.
<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Give it a heading and write in the text of all the links.
We'll add the link info in a minute.
<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3>Directory</H3>
Home<P>
Go here<BR>
or there<P>
or visit<BR>
Yahoo<BR>
Netscape
</BODY>
</HTML>
Now add the link information.
<HTML>
<HEAD>
<TITLE>Practice Page- Directory</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3>Directory</H3>
<A HREF="home.html">Home</A><P>
<A HREF="here.html">Go
here</A><BR>
<A HREF="there.html">or
there</A><P>
or visit<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>
</BODY>
</HTML>
Wasn't THAT fun! No I suppose it wasn't. Take 4. Stretch, get
cup of coffee, scratch your whatever. Take a break. I am of
to.....
<--BACK
NEXT-->
|
