|HTML Frames(and Free Code!)|
As you may have noticed, this site is done using frames. We'd like to share with you some of the "behind the scenes" technical work that went into making Issues Magazine come together. Grab your backstage pass and hold on to your hat.
There are 3 frames on each page of this site. There is a header, a navigation sidebar, and a main area which contains the articles. The content in each frame is really coming from a separate page, stuck together in what is called a frameset.
The following code illustrates this, in blue are the 3 pages which are loading into the frameset:
The above is the code for the frameset you are now viewing. Copy this code and replace the filenames with filenames of your pages and see what happens when you view it. When you use frames, you should always include a message or non-frames page for those viewers who have browsers which do not support frames. In this example we simply alert the viewer that they cannot view the site because it contains frames.
On its most basic level, all you need to know for linking when using frames is that your links must be targeted, that is, you must specify which frame a page should load in when a link is clicked.
For example, when the following link is clicked, it loads the page in the frame named "main" in your framset, as in the above example:
There are several target values(eg. target="_blank") which are inherent in HTML, as follows:
_blank - Page opens in new browser window when the link is clicked.
_self - Page opens in the same area of the frameset that the link is located.
_parent - Page opens in the window containing the frame the link is located in.
_top - Page opens in the main browser window.
In complex and/or large sites, many web developers prefer not to use frames, as they can get very complicated when it comes to linking and pages loading in the correct area of the frameset.
For example, to use a drop down navigation menu as you see in the left frame of this page with a frameset, you have to alter the code slightly so that the destination page loads properly. Thanks to Tanya of HyperGurl.com for her assistance with this code.
Following is the drop down code used in our drop down menu, in blue is the portion of the code which tells the browser to load the page in the full window, as opposed to loading in the same frame which contains the menu:
Try out this code with your framed pages and see what different effects you can create by changing the highlighted portion.
The following portion should be between the head tags in your page:
Links would look like this:
Here is the code that goes in the page(between the head tags) you want to force into the frameset when a viewer comes to it from an outside link:
I would place the above code in this page for example, if you view the source you will see it. This will get the filename of the page the code is in, and pass it to the PHP script frameSetFile.php via the URL.
Here is the code for the PHP script file:
I hope this article has helped you to conquer some of the perils of frames. If you have questions, comments, frames tips, or suggestions about this article, please contact email@example.com.