Converting From iframes

While I’m reassured occasionally that iframes have their uses, I cannot stand them or their oft misused presence. If they’re not being blasted out in lime green because of incorrect transparencies, then they’re being given heights of 10,000 just in case — to prevent them from scrolling. This creates a seemingly endless vertical scrollbar, and can often cause the web browser to lock up. Iframes prevent users from bookmarking individual pages and can prevent screen-readers from doing their job.

Converting to ‘real’ XHTML from an iframe is easy, because the unnecessary coding has already ‘removed’ — all of the pages will be free of layout-specific nonsense. Your pages should be just content. So, let’s begin converting.

Your base page/index.htm(l) probably looks a bit like this:

<html>
   <head>
      <title>my website with iframes</title>
   </head>
   <body>
      <iframe src="start.html" width="300" height="1000"> </iframe>
   </body>
</html>

The iframe part is what we need to get rid of. Instead of this, we can use a div:

<html>
   <head>
      <title>my website with iframes</title>
   </head>
   <body>
      <div id="content">
	  
	  </div>
   </body>
</html>

You can customise that <div> using CSS (explained in greater detail at the bottom of my separating style from content & class/ids tutorial) e.g.:

<style type="text/css">
#content {
   width: 300px;
}
</style>

divs, by default, stretch as high as the content, which means we no longer have to rely on a super-long page to prevent scrollbars.

Now that the new code is in place, iframe users may be wondering how we get pages to open in the div. Divs are not like iframes; you can’t just “target” a link at a div and expect it to open in the middle. This means that every page must have the original <html><head> (etc) code added. To save time, and to make a site easier to maintain, we’d do that with includes.

To convert to PHP includes, we first take out freshly <div>ed coding, like so:

<html>
  <head>
    <title>my website with iframes</title>
    <style type="text/css">
      #content {
        width: 300px;
        height: auto;
      }
    </style>

  </head>
  <body>
    <div id="content">

    </div>
  </body>
</html>

…and split it up into the appropriate “sections”. I always use a header and a footer, because that’s what a website basically consists of. Create a file called header.php and copy the “header coding” in. This consists of everything up to where your content will start, so the following coding:

<html>
  <head>
    <title>my website with iframes</title>
    <style type="text/css">
      #content {
        width: 300px;
        height: auto;
      }
    </style>

  </head>
  <body>
    <div id="content">

Now create a file called footer.php and copy the “footer coding” in. This is everything that will appear after your content, i.e.:

    </div>
  </body>
</html>

Now — the long and tedious part — you need to rename every file you have with a .php extension. For example, aboutme.html should be renamed to aboutme.php and so on. After renaming all of the files you need to insert: <?php include('header.php'); ?> into every file before your content and: <?php include('footer.php'); ?> into every file after your content.

As you’ve been using frames, your index page no doubt contains the original frame coding — you can delete this page. Once deleted you can rename the “home” page file (whichever page you had loading in the <iframe> by default) to index.php. Upload your files and away you go.

To convert to Server Side Includes (SSI) use the SSI tutorial, modifying the above code to suit.

Speak Your Mind

*