Dumping Frames

Okay, so you've finally figured out that frames cause all kinds of usability problems for your site's visitors. Or maybe you've inherited a site that has been built using frames. Either way, you have come to the realization that it's time to get rid of the frames and convert to "normal" web pages. How do you convert your existing framed pages into normal pages? The exact process may differ slightly depending on the layout of the frameset, but we're going to use an example of a three frame frameset with a top banner, left navigation, and right side content.

This example assumes you're using Dreamweaver as your web design tool. We're going to convert this using a Dreamweaver template and we're going to lay out the page using a table. If the site is very large, like more than 100 or so pages, you'd probably be better off using include files instead of or in conjunction with a template. Perhaps I'll address that later on. CSS zealots will, of course, complain that you shouldn't use a table for page layout. I'm taking a slighly more pragmatic approach to it. I'm assuming that, if you're reading this, you are early in your web design learning curve. If that's the case, a table is the simplest and quickest way to accomplish your desired outcome. Since we're using a template, if you later decide to convert from a table to CSS layout, the changes can all be made in the template and the rest of the pages can be updated automatically.

Getting Started

BACK UP YOUR SITE CONTENT BEFORE YOU START!!!

Click File->New->Basic Page->HTML Template to create a new template page. Now, save the page. You will probably see a dialog informing you that you have no editable regions in your template. Don't worry about that for now. We'll address that shortly. For now, just click OK to acknowledge the warning. Dreamweaver will default to saving the page in a folder named Templates in your site's root directory. It's very important that you accept that default location. Enter a name for the template and save it.

Building the page framework

Insert a two row, two column table. Make certain, in the Insert Table dialog box, that you enter a width. The value you enter may be used, or you can remove it later. However, if you have nothing entered, it's very difficult to place your cursor in individual cells. Make sure that you also enter zeros for Border thickness, Cell padding and Cell spacing, and that you select None for Headers. When all of that is set, click OK.

Once the table has been inserted in the page, merge the top two cells so that you have one cell in the top row and two in the second row. You can accomplish that by clicking in the top left cell and dragging your mouse to the top right cell to select both cells. Now, right click and choose Table->Merge Cells from the context menu.

Creating the Page Header

Now, open the page that is displayed in the top frame. In Dreamweaver's design view, click Edit->Select All, then click Edit->Copy to copy everything to the clipboard. Switch back to the page with the table. Place your cursor in the top cell and click Edit->Paste to paste the copied header content.

Creating the Navigation

Now, open the page that is displayed in the left navigation frame. Repeat the process of copying everything. Switch back to the page with the table and place your cursor in the left, lower frame and paste the copied content. Go through each of the links to make sure that you remove the Target attribute from each of the links.

Creating an Editable Region for Content

Next, click in the right lower table cell. Click Insert->Template Objects->Editable Region. Save the page. You now have a template that can be used to create the rest of the pages.

Inserting Content

The final bit of tedious work will be to create new pages for each of the content pages that were displayed in the lower right frame. For each of those, open the page, select all, and click File->New->Templates and choose your site (if necessary) and your newly created template. It will open with the cursor in the one editable region you created. Paste the copied content in there and save the page with the same name as the original page you copied the content from.

Finishing Up

You will have to go back and re-link any style sheets and to redo any rollovers and such because the requisite style sheet links and JavaScript were not copied. Do that in the template. The template will update all of the pages that were made from that template.

If your frameset layout is different, you'll need to do things a bit differently, but this should give you a basic idea of how to proceed. If this process sounds too confusing, then you may want to hire someone to do it for you. While it's not difficult, some HTML and CSS knowledge will be required for the inevitable troubleshooting for some things that won't work just right.