HTML frames

I am designing a web site and want to know how to insert frames on it. Right now, i am using the very annoying frameset command. I want to get it so that it's like the files coloumn on the majorgeeks.com homepage. Is there any way to do this? Is it just done through placement commands, or is there some easy way I could do it, like a navigation frame on the side and the site in the middle, and when you clicked on the link, it would only reload the main frame and not the navigation one? I do not want to use the frameset command because it has that bad looking bar running in between the frames and it can make one frame bigger or smaller. Any ideas?

 

nevermind, i got notepad out and sicked it on majorgeeks.com. Surprisingly, it worked, unlike many other sites I have been to which just jumble all the code together. I should be able to get the code I need now.

 

frames are not your friend.. frames are evil..

 

Agreed, frames are the sux0r, tables rock.

 

Naaawwww., Frames have their place...















and it's not the trash

I'm beginning to like tables more though Kodo.

 

Virtual frames are MUCH better than frames.. frames are Teh suck..

 

virtual frames??? (what are those)

 

virtual frames are a little hard to explain, but it basically is making a header, index and footer file and then encapsulating the index page with the header and footer via an INCLUDE.

 

cool, so does that mean the header and footer would be the constant and the index would be the main viewing window?

then the index page could be changed to another page and so on by clicking on the links in the header of footer?

Sounds cool.

Am I on track with that or am I way off base, cus it sounds cool

 

I'm lost...

 

'


You got it man!!

here's a picture to show you.

 

so it only reloads the thing in the middle (labeled index)?

 

yes and no..

the index page has code at the top and bottom that CALL the header and the footer to be included in it. So any page that is set to be an "index" page must have this code. The header and footer get loaded along with the "index" page but it looks as though only the index page is changing.

 

interesting... so is it too much harder to program than just tables? (examples???)

 

actually it requires that you understand tables in order to implement it.

 

I understand tables. Why would that matter?

 

because the structure of the header to encapsulate the index and then start the footer is based on tables..

 

ahhh, so is there a site I could go to and see that would be a good example?

 

you're lookin at one right now

 

I see the tables, but I don't see where it calls a header and/or a footer...

the tables were a little obvious...

edit: I already have a site programmed with tables, so I don't think I need an example...

 

you won't see the include in the source.. it gets interpreted at runtime..

 

so how do I program this code?

 

here's a real simple example.

-header.html-
<table>
<tr>
<td>

--index.shtm--
<--#include file="header.html"-->
content goes here

<--#include file="footer.html"-->

--footer.html--
</td>
</tr>
</table

 

I still can't figure that code out. I changed it to work with the file names I have, etc, and it just shows up as text on the screen when I veiw it with IE. I even tried changing the code a little, but still can't get it to work.

 

that's because you MUST be running it off a web server or the SSI will NOT process at all.

 

does it have to be some sort of special web server such as a mysql or a php? If I tried to run it over the network, would it work?

 

mysql and php are not webservers..

SSI will work on any web-server like IIS or Apache.

 

You're just not very descriptive, there, Kodo.

PHP is a scripting language. It's used to dynamically create web pages. The document is first run through the PHP engine (kind of), then sent to the web server, then sent to the client for browsing.

mySQL is a database engine and DBMS. It can be accessed by numeerous programs, including web servers and scripting engines.

SSI is instructions to the web server, usually to insert a document inline in the middle of another document. It works a lot like PHP does in some senses, but it is NOT a scripting language. They're instructions to the web server to modify the content. There are more instructions than just include document, IIRC, but that's the most useful one, generally.

I don't think there's anything you can do with SII that can't be done with PHP, but I don't do enough with either to know for sure. SSI is limited in scope, though.

 

I know.. I'm hoping that he might do some light reading on it.. plenty of info on google about this stuff.

 

I never thought to google it, you should have suggested it...

thanks for the help everyone, especially kodo.

 

I did a search and still can't find out much more information.

Do I have to specify a header and footer? Can I just specify a header? How do I make the header appear on the left as a navigation bar? (like in your picture example)

 

you need to use tables for the left links cell..

think of it this way.. the whole page is one BIG table the header is a cell the left links is a cell the index is a cell and the footer is a cell..

 

so... how can I call a left cell?

 

Ok. say this is my original code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Elite</title>
<meta name="description" content="">
<meta name="keywords" content="Message Board, Alex">
<meta name="author" content="">
<meta name="generator" content="">
<script language="JavaScript">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.0. JavaScript version 1.2 is recommended to view this page.";
// End -->
</script>
<script language="JavaScript1.1">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.1. JavaScript version 1.2 is recommended to view this page.";
// End -->
</script>
<script language="JavaScript1.2">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.2";
// End -->
</script>
<script language="JavaScript1.3">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.3";
// End -->
</script>
<script language="JavaScript1.4">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.4";
// End -->
</script>
<script language="JavaScript1.5">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.5";
// End -->
</script>
<noscript>
<b>Your browser does not currently support JavaScript. JavaScript is required to properly view this page.</b>
<p>If your are using Netscape 2 or later or Explorer 3 or later then you can enable JavaScript.
<p><hr><p>
</noscript>
<script language="JavaScript1.2">
<!-- begin
function disableselect(e){
return false;
}
function reEnable(){
return true;
}
document.onselectstart=new Function ("return false");
if (window.sidebar){
document.onmousedown=disableselect;
document.onclick=reEnable;
}
// end -->
</script>
</head>
<body background="blumaz.gif" width="128" height="128">
<table class="navlink" width="10%" height="95%" border="2" align="left" cellspacing="3" bgcolor="#000000" bordercolor="#483D8B" summary="Navigation">
<tr><td height="10"><center><font face="arial" color="#FFFFFF"><u>Home</u></font></center></td></tr>
<tr><td height="10"><center><a href="elite.illusionfxnet.com/fourms"><font face="arial" color="#FFFFFF">Message Board</font></a></center></td></tr>
<tr><td height="10"><center><a href="www.majorgeeks.com/vb"><font face="arial" color="#FFFFFF">M.G. Message Board</font></a></center></td></tr>
<tr><td height="10"><center><a href="www.majorgeeks.com"><font face="arial" color="#FFFFFF">MajorGeeks.com - affiliate</font></a></center></td></tr>
<tr><td height="10"><center><a href="contact.html"><font face="arial" color="#FFFFFF">Contact</font></a></center></td></tr>
<tr><td height="10"><center><script language="JavaScript">
<!-- Begin
user = "suggestions";
site = "elite.illusionfxnet.com";
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
// End -->
</script><font face="arial" color="#FFFFFF">Site Suggestions</font></a></center></td></tr>
<tr><td></td></tr>
</table>
<table width="85%" border="2" align="center" bgcolor="#000000" bordercolor="#800000" summary="">
<tr><td><font face="arial" color="silver"><center>
<applet code="jhanabi4.class" width=600 height=300>
<param name="para_bits" value="10000">
<param name="para_max" value="400">
<param name="para_blendx" value="50">
<param name="para_blendy" value="50">
<param name="para_sound" value="2">
<param name="para_time" value="999999999">
<param name="para_back" value="back.jpg">
<param name="para_startx" value="225">
<param name="para_starty" value="325">
</applet>
<br><br>
Click anywhere above to see fireworks.
<br><br><br><br>
<script language="JavaScript">
<!-- Begin
document.write("<b>" + jsver + ".</b>");
// End -->
</script>
<br>
This site is hosted by illusionfxnet.com
</center></font></td></tr>
</table>
</body>
</html>

Ok, now would this be how you insert the navigation?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Elite</title>
<meta name="description" content="">
<meta name="keywords" content="Message Board, Alex">
<meta name="author" content="">
<meta name="generator" content="">
<script language="JavaScript">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.0. JavaScript version 1.2 is recommended to view this page.";
// End -->
</script>
<script language="JavaScript1.1">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.1. JavaScript version 1.2 is recommended to view this page.";
// End -->
</script>
<script language="JavaScript1.2">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.2";
// End -->
</script>
<script language="JavaScript1.3">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.3";
// End -->
</script>
<script language="JavaScript1.4">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.4";
// End -->
</script>
<script language="JavaScript1.5">
<!-- Begin
jsver = "Your browser supports JavaScript version 1.5";
// End -->
</script>
<noscript>
<b>Your browser does not currently support JavaScript. JavaScript is required to properly view this page.</b>
<p>If your are using Netscape 2 or later or Explorer 3 or later then you can enable JavaScript.
<p><hr><p>
</noscript>
<script language="JavaScript1.2">
<!-- begin
function disableselect(e){
return false;
}
function reEnable(){
return true;
}
document.onselectstart=new Function ("return false");
if (window.sidebar){
document.onmousedown=disableselect;
document.onclick=reEnable;
}
// end -->
</script>
</head>
<body background="blumaz.gif" width="128" height="128">
<table class="navlink" width="10%" height="95%" border="2" align="left" cellspacing="3" bgcolor="#000000" bordercolor="#483D8B" summary="Navigation">
<tr><td>
--navigation.html--
<--#include file="navigation.html"-->
</td></tr>
</table>
<table width="85%" border="2" align="center" bgcolor="#000000" bordercolor="#800000" summary="">
<tr><td><font face="arial" color="silver"><center>
<applet code="jhanabi4.class" width=600 height=300>
<param name="para_bits" value="10000">
<param name="para_max" value="400">
<param name="para_blendx" value="50">
<param name="para_blendy" value="50">
<param name="para_sound" value="2">
<param name="para_time" value="999999999">
<param name="para_back" value="back.jpg">
<param name="para_startx" value="225">
<param name="para_starty" value="325">
</applet>
<br><br>
Click anywhere above to see fireworks.
<br><br><br><br>
<script language="JavaScript">
<!-- Begin
document.write("<b>" + jsver + ".</b>");
// End -->
</script>
<br>
This site is hosted by illusionfxnet.com
</center></font></td></tr>
</table>
</body>
</html>

Ok, now you may have noticed that I included ALL of the code. That's because I also wanted to know if that there would be any conflicts with my current code. Also, do I just save it as a .html file or do I have to save it as something else? Also, I plan to reformat it into 1 table in the future. I edited the meta tags because they were a little "descriptive"

 

I'll help you out when I get a chance.. I'm not at my pc right now.

Note, that I am NOT going to edit your code and give you the answer.. I will HELP you and that is all.

Dump the java crap in the beginning. If they are using anything earlier than v5 of any browser than they deserve to not see anything at all.

 

k lose the java crap. got it.

 

I should clarify..
lose the detection script.. not your other java script code.

 

That's what I thought you meant anyway...

 

I was doing some research on apache and found this:

Including a standard footer
If you are managing any site that is more than a few pages, you may find that making changes to all those pages can be a real pain, particularly if you are trying to maintain some kind of standard look across all those pages.

Using an include file for a header and/or a footer can reduce the burden of these updates. You just have to make one footer file, and then include it into each page with the include SSI command. The include element can determine what file to include with either the file attribute, or the virtual attribute. The file attribute is a file path, relative to the current directory. That means that it cannot be an absolute file path (starting with /), nor can it contain ../ as part of that path. The virtual attribute is probably more useful, and should specify a URL relative to the document being served. It can start with a /, but must be on the same server as the file being served.

<!--#include virtual="/footer.html" -->
I'll frequently combine the last two things, putting a LAST_MODIFIED directive inside a footer file to be included. SSI directives can be contained in the included file, and includes can be nested - that is, the included file can include another file, and so on.

 

yes, this is definately what I'm getting at.. I just haven't had the time to literally draw you a picture of how the tables are assembled so you can visualize it .