≡
  • Home
    • About Us
    • Site Map
  • Resources
    • Resources for Website Design
    • HTML Document Structure
    • Genealogy Web Site Design
      • Planning a genealogy website?
      • Organize your genealogy website
      • Creating a New Website
      • Customizing Your Website
      • Publishing your Genealogy Website
      • Maintaining Your Genealogy Website
    • Publishing With FTP
    • RootsWeb WorldConnect Project
    • Validation Tools
    • Browser Web Developer Toolbar
    • Website Design and Search Engines
    • Saving and Using a Complete Web Page from the Internet
  • Articles
    • Snagit and Genealogy
    • Top 10 Genealogy Mistakes to Avoid
    • Quick Tips for Beginner and Amateur Web Designers
    • Tennessee Family Bible Records
  • Tutorials
    • Tutorials & Articles
    • Add Search Box
    • Converting a Theme Based Site to DWT
    • Converting a Table Based Layout
    • Create custom Error Pages
    • Create 301 Redirects
    • Creating a New Website
    • Creating a FrontPage Web
    • Create a Gradient Image
    • Creating Layered Backgrounds
    • Creating A Navigation Menu
    • Creating Website Navigation
    • Heading Tags - <h1> to <h6> tags
    • Server Side Includes
    • www versus non www
    • Using Bordered Backgrounds
  • Templates
    • Fixed Width Templates
    • Mobile Friendly Templates
    • Liquid Layout Templates
    • Christmas CSS Layout Templates
    • Instructions for Using Templates
  • Contact

CSS Based Layout Templates

Each of these templates  uses a css based layout with the exception of one. The templates use an XHTML transitional doctype and have an external stylesheet. You are welcome to use them as a basis for site layout as is or change them as needed. Changes to colors, font families, font sizes and such should be made within the external stylesheet.

Clicking on the link under the template will take you to the full size template.

As time permits, each of the templates is being converted to a mobile friendly design.

Screenshot Green 3 Column Alternate Layout.
Green 3 Col Alternate
Fixed Width Layout - Equal Height Cols
Added November 2013
Download Green 3 Column Template

Screenshot Green Three Column template.
Green 3 Column
Fluid width Layout
Revised November 2013
Download Green 3 Column Template

Screenshot Blue Right Column Layout.
Right Column Layout 2 Template
Fluid Layout
Download Right Column2

Screenshot Ocean Blue Template.
Ocean Blue Template
Fluid Width
Download Ocean Blue Template

Screenshot of Right Column Layout Template.
Right Column Layout Template
fluid layout
Download Right Column Template

Triple Layered Background Layout.
Triple Layered Background Template
fluid layout
two inner tables for the content
Download Triple Layered Background template

Screenshot Multi Floral template.
Multi-floral Template
fluid layout
Revised: November 2013
Download Multi-floral template

The masthead on some of the templates uses a graphic image. Depending on MY time constraints, I will be happy to add a site title for you. Any of them can easily be converted to a dynamic web template if you are using FrontPage 2003 or Expression Web. Although created in Expression Web, they can be used with any WYSIWYG editor or any html editor for that matter.

The zipped files for each template contain:

  • blank template
  • external style sheet
  • all images used as part of the template

Instructions for using the template files. The templates and the css validate.

If you want to change the menu used with a specific template, check the Menu Resources listed below.

The layouts are free for your personal websites. A link back to this site is appreciated. If you are using any of them for a commercial layout, a link back to this site is required.

Templates

These are basic templates. There are other styles you will need to add as you go along. Google is your friend. Learn to use it to find style info you might need. There are many css resources on the Resource page of this site. If you have questions, don't hesitate to ask. Investigate both the code and the style sheet. Make changes so you understand how the style sheet and coding relate to each other. Explore different menus using the resources included in the sidebar.

Pat Geary.

Additional Template

  • Christmas Templates by Pat Geary
  • Fixed Width Templates by Pat Geary
  • Mobile Friendly Templates
  • Flying Angel DWT - table based by Tina Clarke
  • Sample DWT's by Cheryl Wise
  • Expression Web DWT's by Pat Geary (requires Expression Web)

Sources for Seamless Tile Backgrounds

Remember if you use someone else's graphics you may need to link back to their site.

  • Free Background Tiles
  • Pattern Cooler
  • GRSites
  • CSGreen Designs
  • The Inspiration Gallery
  • Pattern8
  • 50 Seamless Tiled Backgrounds

CSS Menus

  • Dashed Vertical Menu
  • CSS Play Menus
  • CSS Library
  • CSS Menu Generator
  • CSS Menus
  • Horizontal CSS Menus
  • Vertical CSS Menus
  • Animated Responsive Menu
  • How TO - Responsive Top Navigation

Color Tools

  • Color Palette Creator
  • Gradient Image Maker
  • ColRD
  • Color Combo Library
  • Stitch Palettes designed for stitchers but very helpful for color combinations for websites.

Planning a Genealogy Website 2nd Edition is available as a 42 page EBook in pdf format for you to download. It has been totally revised and updated with new content. The EBook is zipped for faster download. Save it to your desktop, extract the file and it is ready to use.

Microsoft MVP.
April 2007 - April 2013


Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Domain Registrations starting at $9.98*

Microsoft® and FrontPage® and Expression Web® are registered trademarks of Microsoft® Corporation.

Genealogy Computer Tips | Expression Web Tutorials & Templates