Framed Web Site

Does your genealogy web site use frames? If so, this may cause you a problem with the search engines indexing your site. Google says:

"Google supports frames to the extent that it can. Frames can cause problems for search engines because they don't correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames display several URLs (one for each frame) within a single page. If Google determines that a user's query matches the page as a whole, it will return the entire frame set. However, if the user's query matches an individual frame within the larger frame set, Google returns only the relevant frame. In this case, the entire frame set of the page will not appear." Read more . . . .

How Search Engines Read Web Sites Created Using Frames by S. R. Emerson

A special thank you to Jean McCarthy for allowing me to use her site in this tutorial and for Cricket Walker for her SEO Training Class and E-book with a lesson on framed websites that inspired me to write this tutorial.

Most often, the genealogy web sites I have seen that are using frames, are using them for the side navigation. As you can also see by this example, the RootsWeb banner will appear on both parts of the page.

framed-web-site-sm.jpg
Site using Frames - click image for larger screenshot

A change in the layout of your page can give you a frame-like look, allow you use the same navigation on all pages and the search engines will more easily read your page.

unframed-site-sm.jpg
Same Site Without Frames - Click image for larger screenshot

I knew that Jean was using FrontPage 2003 as her editor so created the site with Expression Web which is the successor to FrontPage. Any files I created she would still be able to use. I decided to use design time includes for the left side navigation and footer. You could just as easily us server side includes (SSI) if you are using a different editor or Note Pad.

Step-by-step instructions on moving from a framed web site to CSS Based Layout

Step 1 - Create a blank web site. FrontPage will automatically create a folder called images. With Expression Web you will have to create the images folder. I also add a folder  named  _includes (note leading dash). All images will be saved to the images folder and any page I create as an include will be saved to that folder.

If you are not using either FrontPage or Expression Web, you can still follow along with this tutorial to move from a framed site to a css based layout.

Step 2 - From CSSeasy select a layout that most closely resembles what you are currently using or a new layout if you prefer.  For this site I chose a two column layout with left sidebar including a banner area and footer. The basic styles for the four divs are created as part of the layout you download to your computer. I selected a percentage width (fluid layout) so that content would expand or contract depending on the viewer's screen resolution. Save the file to your newly created web site.

NOTE: If you don't already know how to use cascading style sheets, they are many resources at Genealogy Web Creations. Scroll down to the style sheet section. If you are using FP2003, you may want to download Top Style Lite (scroll down to the bottom for the link) to use as your css editor. You can configure FrontPage so that it uses Top Style as the css editor in FrontPage by selecting Tools | Options | Configure Editors and adding TopStyle as the editor for CSS files.

Step 3 -  The layout.html that you downloaded has very basic styles created. You will need to add to or make changes to those styles for your site. (View source to see the styles - right click | View Page Source). Add a style for the body tag that would include the background color, font family, size and color.  I used a darker color for the background although the same color could be used. All style formatting will be moved to an external style sheet once the page looks as you want it to and both the style sheet and template validate.

Step 4 - For the masthead, I took Jean's current logo and moved it into the banner style declaration as the background for that <div>. This will allow her to easily change the banner if she chooses.

#banner {
    background-position: center center;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #FFFFC0;
    background-image: url('images/mainlogo.gif');
    background-repeat: no-repeat;
    border-bottom: solid 2px #990000;
    height: 110px;
}

Revised layout with new styles

Step 5 - I next copied her navigation frame to a new page, cleaned up the code to remove all formatting
(Ctrl + A then Ctrl + Shift + Z) or Ctrl + A | Format | Remove Formatting
and changed the paragraphs she was using to an unordered list without the bullets. The page was then saved as navbar.htm in the _includes folder. Only the content between the opening and closing <body>content</body> will be used as the include.

Screenshot of navbar frame

Step 6 - Insert the Include Page into the sidebar <div>

In FrontPage    Insert | Web Component | Included Content | Page | Select the Page | OK
In Expression Web   Insert | Include Page | Select the Page | OK (This will only work if you have installed the Free Expression Web Include AddOn)

Step 7 - Repeat the process for the footer.htm

Step 8 - I add additional styles for elements I know I will be using. Others can be added as development of the site progresses.

layout-revised.html with all styles still in the <head> section

Step 9 - Create a new blank style sheet and save it

In FrontPage  File | New | More Page Templates | Style Sheet | Normal Style Sheet | OK

In Expression Web   File | New | CSS

Save your layout-revised.html as template.html. File | Save As | In the File Name box type template.html | OK.
Copy everything between <style type="text/css"> and </style> and paste it into your newly created style sheet.  Save the page then delete that section from the template.html including the two style tags.

Step 10 - Attach your newly created style sheet to the template.html page

In FrontPage  Format | Style Sheet Links |  Add | Select the style sheet | OK | OK

In Expression Web  Format | Styles | Attach Style Sheet

Step 11 - View your page in at least Firefox and Internet Explorer and validate both the html page and style sheet one last time. If you receive no errors then you are ready to use your template to create new pages or take the next step and create a dynamic web template

template.html

template.css

template.dwt

Additional Resources

Using FrontPage Includes by Tina Clarke, Microsoft MVP - FrontPage

FrontPage Includes Tutorial by Cricket Walker

FREE FrontPage 2003 DWT e-book by Tina Clarke, Microsoft MVP - Expression Web

FREE Expression Web DWT e-book by Tina Clarke, Microsoft MVP - Expression Web

Create a Dynamic Web Template by Microsoft

Creating Web Site Navigation Structure by Pat Geary, Microsoft MVP - Expression Web

Server Side Includes Tutorial by Pat Geary, Microsoft MVP - Expression Web

How to Make a Navigation Menu by Pat Geary, Microsoft MVP - Expression Web