JavaScript Multiple Slideshows
SMTP FormMail Script with Attachments
Pre-Populate Forms with Javascript
Replacing frames in an existing website is not difficult, it's just a slow, boring process. It boils down to inserting the missing components of a conventional HTML page into your existing pages that were designed to be displayed within a <frameset>, and deciding if you want to maintain the current look of your site or starting over from scratch. I've recently written a simple script that can automatically convert frame pages into regular webpages. You'll find more information about this script at the end of this article.
Your task here is to take all of the old parts that used to be in <frame>s and enclose them in a plain HTML design structure to visually replicate the appearance of the original site. The <frameset> page is the place to start. It will point to both the pages that were designed to remain unchanged while the user browsed your website, as well as at least one page that would change. These pages should be easily identified by their contents.
Start by opening all of the pages pointed to by the <frame> tags within the <frameset> in your favorite text editor. If there is a "header" file, you can use it as the basis of your new web design template. If not, open a new window in your text editor and fill it with the basic components of an HTML page, starting with a <!DOCTYPE> statement and ending with a </html> tag, with everything from <body> to </body> removed. This gives you a blank slate to start with. Save this new file or the old header file on your computer with the filename "newindex.html" in a folder you can easily locate. Then open this new template file in your browser by selecting File->Open.
Return to the text editor and bring up the page that contained the content that changes. Use the mouse to select all of the content from <body> to </body>, and then use Edit->Copy to copy that content to the clipboard. Next bring up the template file again and use the mouse to move the selection pointer to just after the <body> tag. Then select Edit->Paste to paste in the content from the previous page. Go back to your browser and press the Reload or Refresh button. Violla! You're on your way to removing the <frame>s from your website.
If you're using one of my No Frames Navigation methods, this is the time to install it in your new design template. I can't tell you exactly how to do it on your site because every website design is different. One of the easiest ways to integrate the No Frames Navigation system into a design is to use a <div> with it's CSS style setting to "float" so that it will nestle itself with the existing design layout. If you're not familiar with CSS, you can simply insert a <table> in your template page just after the <body> tag to set up a column to hold your menu. I suggest that you start with the JavaScript version of the No Frames Navigation system, so that you can work on your own computer without relying on any services from the server that hosts your website. Just be sure to include some plain HTML links to your most important pages in a <noscript> section somewhere on your pages to accommodate users who are running with JavaScript disabled.
If you're content to duplicate your menus on all of the pages, the design issues are identical. It just depends on how you want your site to look, and whether or not you will use the same layout on all of your pages. If all of your pages will have the same layout, you should really consider one of the options in my No Frames Navigation system because it will save you a lot of time in maintnenance. Just be sure to remove the "target" attribute from all of the <a>nchor tags (links) in your menu, because the new target will be the main browser window from now on.
Once you have your main page replicated, you have a template for all of the other content pages in your site. To change those pages, just start with the template file, copy the <body> to </body> section of the old <frame>d page into the same section of the template file, copy over the <title> tag as well as the keyword and description <meta> tags, and save the resulting new page using the same filename as the page you want to replace. Lather, rinse, and repeat for all of the website's internal pages.
Starting over is a big step. It's almost as difficult as creating an entirely new site. The only advantage is that you have the content, so the only issue is the page layout. For this, you're really on your own except for my Single File Navigation system.
The best advice I can give you in this case is to try to use the same filenames for your new design as you did for the old design that used <frame>s. This will help maintain your position within the search engines, and will also prevent users from receiving "Page Not Found" errors when they come to your site from other sites or via bookmarks.
My script rdUpdater.php removes the unique content from your old frame pages and merges it with an HTML template for your new frameless webpage design and then saves the result. The script is limited in what it can do because there are so many possible variations in web page design, and frames can make it more complicated. But if your old frame design was simple with the navigation menu in a separate frame, this script can do the work for you. You just have to design the new template, add some special tags that tell the frame removal script where everything from the old pages is supposed to be in your new design, and let it work. It leaves your original files intact, so you don't have to worry about damaging your existing pages if it doesn't work well for you. The documentation and a sample template file is included in the .zip file available by just clicking the button below:
Rainbo Design's Frame Remover rdUpdater.php© is provided free of charge. If you use
and enjoy this software, I would appreciate it if you would place the following link on your site:
<a href="https://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tools for Webmasters</a>
The button below will allow you to download a .zip archive containing all of the
files in this package. Just install them in their own directory on your computer.
This page was last modified on August 27, 2020
Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.
Looking for more website design information? See my Sitemap!