Converting From iframes
While I'm reassured occasionally that iframes have their uses, I cannot stand them or their often 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 stop them scrolling. This creates a seemingly endless vertical scrollbar, and can often cause the web browser to lock up. They prevent users from bookmarking individual pages and can prevent screen-readers from doing their job. This is exactly why you should convert...
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. Let's begin converting.
<html>
<head>
<title>my website with iframes</title>
</head>
<body>
<iframe src="start.html" width="300" height="1000"> </iframe>
</body>
</html>
The iframe coding, seen above in bold, is the key to viewing the separate pages but is really not required anymore. Instead, the properties you've assigned to the iframe like width and height, can be assigned to a <div>. First, you code in the <div> with some kind of descriptive name (id), like so:
..etc..
<body>
<div id="content">
</div>
</body>
..etc..
Then you can customise that <div> using CSS (explained in greater detail at the bottom of my separating style from content & class/id tutorial):
<style type="text/css">
#content {
width: 300px;
height: auto;
}
</style>
You may have noticed that instead of copying the height (1000) from the iframe above, I've assigned a property of "auto" — this means the height of the <div> is automatically assumed based on the size of the content entered, which means we no longer have to rely on a super-long page to prevent scrollbars.
Anyway, this is all well and good but how do we get our pages to load in this new <div>? Unfortunately, there's no easy way to source them as with iframes, but you can use includes. There are two 'main' types of includes both of which you can convert to and both of which are covered in this tutorial: PHP Includes and Server Side Includes.
Converting to PHP 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: <? include('header.php'); ?> into every file before your content and: <? include('footer.php'); ?> into every file after your content.
As you've been using frames, your index page no doubt contains the frame coding — 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.
Converting to Server Side Includes
To convert to server side (.shtml) 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.txt 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.txt 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 .shtml extension. For example, aboutme.html should be renamed to aboutme.shtml and so on. After renaming all of the files you need to insert: <!--#include file="header.txt" --> into every file before your content and: <!--#include file="footer.txt" --> into every file after your content.
As you've been using frames, your index page no doubt contains the frame coding — delete this page. Once deleted you can rename the "home" page file (whichever page you had loading in the <iframe> by default) to index.shtml. Upload your files and away you go.
Tags:
iframes, semantics, php, ssi, includes,
Last Updated On: 12th March 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Top Links
Resources