Single Page Frame Sets
Mark Cloyd on 2002 May 28
Mark Cloyd on 2002 May 28
It is not a fact that demons came to the Internet and created frame sets to frustrate Internet surfers and to make developers cringe at their very name. In fact, frame sets are our friends. Can you say frame set?
I work on a daily basis with people who are trying very hard to instill in me the evils of the dreaded frame set. As with anything there are some development styles that are controversial but very useful if used correctly. With static HTML sites, frame sets can be a bad and frustrating thing, even the most skillful web developer can not ignore the fact that book-marking a frame set can lead to disaster. With the progression of programming languages being used on the Web however, the convenience and ease of frame sets can make sites more attractive, easier to navigate, and open a whole world of non-redundant web-site development.
Another hassle with the typical frame set is that it is generally made up of multiple pages, one for each element of the frame set, and of course, the frame set itself that calls all the pages together. This tutorial focuses on using a single page to create a frame set and all subsequent pages.
Through practice and a little consideration, frames can be used now more than ever to present design elements that are consistent and stationary. Making navigating a site more pleasurable because you aren't constantly chasing your navigation elements.
So... Let's get started.
Overview
1. Creating the common.php file.
2. Creating the Frame Set.
3. General tips and tricks.
Creating the common.php file
This may seem "Old Hat" to a lot of folks, but there is something to be said for the common file. It can contain much more than database connection information. In fact if you are new to PHP/MySQL, you may not know that PHP can be used independently of MySQL. If you have no use for a database, you can still enjoy the benefits of passing variables and making dynamic web content without the need for a database. (The only real difference is that for the most part the dynamics of the site are for your benefit, not the client).
To start with, I like to pack my common.php file with as much information as possible. Common files enable developers to make a single change in one location that will impact an entire site, the common file can also be as rigid or as flexible as needed.
I will mention that the more carried away with functions you get sometimes it makes it a little harder to work with frame sets. This is not a limitation, it is a matter of planning. For the purpose of this tutorial, I will just present the basics.
NOTE: it is important to know that the common.php file is not required. You can simply create the frame set with all the formatting information if you like. It is just a little easier to make changes within a function to impact the entire site that looking through your code later to make multiple changes. I would highly recommend doing a little additional reading and learning functions.
Here you can see an example of a common file (common.php):
NOTE: You can use .inc extensions for your common files, but if someone happens to know your coding style, they can type in the URL for your common file. If it has an .inc extension it might display the contents of your file in the browser much like a text document. Best to stick with .php extensions even for your includes.
( common.php )
<?php
// ---- Global Variables ---- //
$glbl_Title = "Single Page Frame Set Tutorial";
// ---- Common Header ---- //
function glbl_Header($title) {
echo "
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>$title</title>
<style type=text/css>
A {text-decoration: none}
body { font-family: arial, helvetica, sans-serif; font-size: 12px}
td {font-family: arial, helvetica, sans-serif; font-size: 12px}
p {font-family: arial, helvetica, sans-serif; font-size: 12px}
small {font-family: arial, helvetica, sans-serif; font-size: 12px}
font {font-family: arial, helvetica, sans-serif; font-size: 12px}
big {font-family: arial, helvetica, sans-serif; font-size: 14px}s
</style>
</head>
";
}
// ---- Common Body ---- //
function Body($c,$t,$l,$al,$vl,$tm,$mh,$lm,$mw) {
echo "
<body bgcolor=$c text=$t link=$l
alink=$al vlink=$vl topmargin=$tm
marginheight=$mh leftmargin=$lm marginwidth=$mw>
<center>
";
}
// ---- Common EOF ---- //
function glbl_EOF() {
echo "
</center>
</body>
</html>
";
}
?>
As you can see there are three separate functions included within the common.php file;
[i]glbl_Header( );[/i]
[i]Body();[/i]
[i]glbl_EOF( );[/i]
The glbl_Header( ); function simply holds all the beginning information for your document, along with any scripts you may want to include for rollovers etc.
The Body( ); function holds the formatting information for your text (as you can see, I have left a little flexibility for colors of text, links and body color by leaving them out of the CSS code. This will be important later on in the development of the frame set.)
The glbl_EOF( ); function, this is simply the end of your document. You may wonder why this isn't called the glbl_Footer( ); well, I use another function sometimes as a footer for text links, but there may be some pages I don't want the footer on.
NOTE: You can adjust your functions for better formatting if you are going to use different scripts within your <head>...</head> tags.
Creating the FrameSet
( frames.php )
<?php
require('common.php');
glbl_Header("$glbl_Title");
SWITCH ($action)
{
CASE ('ftitle');
Body("000000","ffffff","ffff00","ff0000","cccccc","10","10","10","10");
echo "This is the title";
BREAK;
CASE ('flinks');
Body("000000","ffffff","ffff00","ff0000","cccccc","0","0","0","0");
echo "
<table width=115 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href=frames.php?action=fbody&page=page_one.php
target=mbody>Link One</a></td>
</tr>
<tr>
<td><a href=frames.php?action=fbody&page=page_two.php
target=mbody>Link Two</a></td>
</tr>
</table>
";
BREAK;
CASE ('fbody');
Body("ffffff","000000","000099","ff0000","99ffcc","16","16","16","16");
if ($page != "start") {
include ($page);
} else {
echo "This is the default page content";
}
BREAK;
DEFAULT;
echo "
<frameset rows=50,* border=0 framespacing=0 frameborder=NO>
<frame src=frames.php?action=ftitle
frameborder=NO noresize scrolling=NO marginwidth=0
marginheight=0 name=mtitle>
<frameset cols=115,* border=0 framespacing=0 frameborder=NO>
<frame src=frames.php?action=flinks frameborder=NO
noresize scrolling=NO marginwidth=0 marginheight=0 name=mlinks>
<frame src=frames.php?action=fbody&page=start
frameborder=NO noresize marginwidth=0 marginheight=0 name=mbody>
</frameset>
</frameset>
";
}
glbl_EOF();
?>
If all goes well, you should see a nice looking page with one frame on top, one at the left and the main one in center.
That's it..... But I won't leave you hanging. I remember reading tutorials when I was learning, being left to decipher what I just read and it was just as much a mystery as when I started reading, but I had a headache to boot.
Okay, first thing we see is the < ?, this just opens the page as a .PHP document. Next we see require('common.php'); , this tells the frames page that it needs to include the document common.php. This is a good thing since all of our formatting information is there, and if we don't include it, we will get a lot of errors telling us that we have unsupported functions on the frames.php page.
Next is the first of our functions. The glbl_Header(); function if you remember, (if not look back a little in this tutorial... And maybe consume a little ginseng) this held the header information as well as the formatting for text and colors to be used throughout the site.
Next, familiar to some, a mystery to others, is the SWITCH( ). A switch is used in place of IF statements. This takes the variable $action, from a little farther down, in the actual frame set, and lets the page load specific parts of the page into their proper location. (The $action variable can be called anything you like, for example you could just as easily write SWITCH($cow), but that might get a little confusing later.)
Next we see CASE('flinks'); this is the equivalent of the value passed from the frame set at the bottom of the page. In essence, if you look at the frame set. The frame named mtitle passed the variable action=ftitle. Once the page is loaded, it matches what was passed from the frame set, sees that is matches the CASE within the SWITCH and loads it into the body of the specified frame. The same holds true for each subsequent CASE();.
Next you see the formatting information within each CASE( ); this represents what would normally be the separate pages that make up your frame set. Notice that each CASE( ); has it's own "body" tag (or in our case the Body( ); function). This is because a frame set can not live within a "body" tag. So you need to format the text and background color for each "page" separately. (Nothing you wouldn't have to do anyway) But you can see now the power of our functions at work. The only thing we need to worry about is adding the attributes for each "body" tag as we see fit. This allows for less typing and adds the flexibility of making the text, links, and background colors anything we like.
Three more things I would like to point out. First if you look at the links within CASE('flinks');. You will notice a new variable $page. This is used in CASE('fbody');. What this does is sends the variables for the page you are linking to outside of your frame set. It is important to know that this variable is only needed when you are creating links in the frames.php page. If you are viewing your frame set in a browser, and you have a link on a page that is occupying the mbody frame. You don't need to target the link, and you don't need to add the variable $page. One last thing about the links within the frame set. Notice that they first call the framset.php page. This is necessary for the frames.php page to reload allowing the new $page variable to load correctly.
The next thing worth mentioning is within CASE('fbody');. You notice an IF statement. This would be used in the event that the frame set is your index page. (It would of course be named index.php) What this will allow you to do is have a "default" page that is viewed when people first come to your site. You may be wondering why the IF statement references "start". Well, this takes us to the last part of our code.
If you look at the frame set, you will see in the mbody frame, the link src=frames.php?action=fbody&page=start This will load the information in the ELSE portion of the IF statement if the $page variable is anything but "start".
One final thing. You will find many different styles of writing code. I would recommend defining your own style of writing code and not rely on any one method defined by someone else. The style presented within this tutorial can be frustrating when error messages occur. This is my style and works for me. If you are just starting out, I would recommend being a little more lucrative with the "echo" or "print" statements.
For example, where you see this in the code above:
<?php
echo "
<table width=115 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href=frames.php?action=fbody&page=page_one.php
target=mbody>Link One</a></td>
</tr>
<tr>
<td><a href=frames.php?action=fbody&page=page_two.php
target=mbody>Link Two</a></td>
</tr>
</table>
";
?>
You might try one of the alternate styles instead:
Alternate style one:
<?php
echo "<table width=115 border=0 cellpadding=0 cellspacing=0>n<tr>n";
echo "<td><a href=frames.php?action=fbody&page=page_one.php
target=mbody>Link One</a></td>n";
echo "</tr>n<tr>n";
echo "<td><a href=frames.php?action=fbody&page=page_two.php
target=mbody>Link Two</a></td>n";
echo "</tr>n</table>n";
?>
Alternate style two:
<table width="115" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<?php
echo "<a href=frames.php?action=fbody&page=page_one.php
target=mbody>";
?>
<tr>
<tr>
<td>
<?php
echo"<a href=frames.php?action=fbody&page=page_two.php
target=mbody>";
?>
<tr>
</table>
This may seem a little redundant, but you will find that if you miss an operator, you will be able to find it MUCH easier this way since PHP will tell you where your error is base on the line number of the echo or print statement.
I hope you have found this tutorial helpful. Happy coding.
Mark Cloyd