spacer

HTML Frames

 
The HTML Frames section of Iron Spider contains a series of tutorials which will teach the aspiring web author all about how to create web page frames. The following provides an introductory paragraph from each page in this section which includes:




Using Frames for Layout


HTML frames split your web page into two or more sections within each of which is loaded a distinct and separate web page. Simply put, a web page using frames simultaneously displays multiple web pages in the same browser window...






Advanced Frame Layouts


Okay so you got the basics about making frames down and we've examined some simple layouts using either two framed columns or two framed rows. Now let's move on to an advanced frame layout that uses both rows and columns...






Creating Hyperlinks in Frames


Creating hyperlinks in HTML frames is a little more complicated than creating them in standard web pages. The key difference is outlined in the following:
  • In a standard web page, clicking on a hyperlink will —by default— reload the original browser window with the new page.
  • In a framed web page, on the other hand, clicking on a hyperlink will —by default— reload the frame in which the hyperlink is located in with the new page...






Frame Border Width


It's unfortunate that those who take the time to learn about the presentational aspects of web page frames are few and far between and it's even more unfortunate that the default appearance of web page frames is essentially butt-ugly (probably because it's so overused)...






Color, Margin and Control


Alright then, so far we've learned how to make basic and advanced frame layouts, how to make hyperlinks in frames and how to adjust the border widths in frames. Now let's round out our frame rendering skills by learning how to add some color and how to tweak some of the user controls...






Problems with Frames


Sprucing up your web page frames by tinkering with the borders and colors is only half the battle. Now you have to make them user friendly and search engine friendly.

This page outlines some common problems that framed pages pose for web designers. On the next page you'll find my SmartFrames template that solves all those problems in one fell swoop...






SmartFrames: A Solution


Here's what I call my SmartFrames layout that I specially developed to address all of the problems described on the previous page.

It features the following:

  1. It uses META tags and the noframes element in the frameset document to help search engines index your site.
  2. It uses Javascript to write a cross-browser compatible hyperlink in the top right corner of the content frame that the user can click on to create a proper browser bookmark ("favorites" in Internet Explorer).
  3. It uses Javascript to write the actual web address of the content page at the bottom to help users when sending links.
  4. It uses Javascript to make sure that all frame source pages are always loaded inside of the frame layout...





SSI: An Alternative to Frames


SSI or Server Side Includes can be used to automatically insert snippets of HTML code on all your web pages. This is useful for any section of your web page that tends to get repeated across many other pages. As well as a header or a footer, SSI is often used to insert a site menu which needs to be frequently updated every time a new page is added to the site.

Here's a crash course on using SSI to create a site menu on all your web pages: