Frames
Frames are when you have one or more splits in the screen of the page.
Each frame is an independent html document. Each frame can scroll
independentally of each other. Frames are a very good way of organizing
your whole web site. You can sort your whole site into catagories, and
then make a menu in one frame. As with many things, there are some
drawbacks. The drawbacks are, you can get stuck in frames. Don't get
what I'm saying? Here's an example: you're at someone's site, and they
have frames. They put a link to another site, but you're still stuck in
the original person's frame, and after awhile, you just have frame after
frame after frame. It gets tedious and annoying. So what's the soultion?
Make sure you bust out of frames. How do you do that? I'll show you.
First off, you need to know how to make frames. You make a frame by
creating a document that splits the screen. With in that
"screen-spliting" document, you assign each frame to a HTML document.
Each frame is also given a name. So when you make a link, you can send it
to the frame that you want. You just target it to the correct frame.
Confused? Hold on.
I'll show you the source code from the "screen-splitting" document:
<html>
<head>
<title>My frame based site</title>
</head>
<frameset cols="140,*" frameborder="NO" border="0">
<frame scrolling="AUTO" marginheight="0" marginwidth="5"
noresize src="menu.html" name="left"0>
<frame scrolling="AUTO" marginheight="0" marginwidth="5"
noresize src="intro.html" name="right">
<noframes>
<body bgcolor="000000" text="FFFFFF" link="#0000FF"
vlink="#0000FF" alink="#0000FF">
Sorry, but your browser cannot view frames.
</body>
</noframes>
</frameset>
</html>
Need me to explain that? Okay. Well, the <html> and <head> tags
should be familiar to you. The <frameset> tag is how you split the
screen. If you want a vertical split, you use <frameset cols="120,*">,
where the 120 is 120 pixels wide for the left column, and * is whatever is
left over for the right column. The properties of the
<frameset tag apply to that frame. The frameborder="no" means
that the line between frames won't be shown, you can change "no"
to "yes" and border="0" is how much padding there is between the
frame line and the actual document. Inbetween the <frameset> and
</franeset> tags, there are two <frame> tags, the first representing
the left frame (120 pixels) and the second representing the right frame.
The properties of the <frame> tag are frameborder, marginheight,
marginwidth, name, noresize, scrolling and src. Frameborder determines
wether the frame is displayed with a border, 1 for a border and 0 for no
border. Marginheight and marginwidth determine how big a margin (in
pixels) the frame has. Name is the name that you call that frame, in this
case, left and right. Noresize is a toggle switch that disallows the user
from resizing the frames. Scrolling has three settings, "yes" "no" and
"auto" which determine if the scrolling bars are present. Src is the name
of the html document that goes in that frame. In this case, menu.html
goes on the left and intro.html goes on the right.
Now, after you make that setup, you have to edit the menu.html and
intro.html files. Menu.html will now appear in the left frame, and
intro.html will appear in the right frame. If you change menu.html, and
reload, you'll see the changes in the left frame. If you want a link to
appear in a frame, use this tag: <a target="name" href="URL">, where
name is the name of the targeted frame (probably left in this case) and
URL is the URL. So if I want the file link.html to appear in the left
frame, I'll make this link:
<a target="left" href="link.html">click here</a>
And that will be a link that says "click here" Alright, that's simple
enough. Want to see a complex frame setup? Here's the source code:
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<frameset rows="33%,33%,*">
<frame src="frame3.html">
<frame src="frame4.html">
<frame src="frame5.html">
</frameset>
</frameset>
check it out here
Now to explain that. The first <frameset> split the screen into two,
down the middle (two columns), where each piece had 50% of the screen.
The second <frameset> split the first frame (left one) into two, across
the middle (two rows), where each piece had 50% of the frame. The third
<frameset> split the second frame (right one) into three, going across
(three rows), where each piece had 33% of the frame. Get it?
Next lecture