CSS Based Layout Templates
What is a CSS based layout? Rather than using a table to layout the elements on your page, a template with CSS-based layout uses a Cascading Style Sheet to place the various elements. The "look" for the site - colors, fonts, graphic images that are part of the layout - are called from the cascading style sheet.
Official web standards recommend the use of CSS to achieve layout rather than the use of tables. Tables are still used for presenting data.
This is the start of a project to offer a series of CSS based layout templates to the RootsWeb Community. They are posted on the RootsWeb server so that you can see how your site might look with the RW banners in place. the template packages are housed on the Genealogy Web Creations or Expression Web Tutorials server space as RootsWeb does not allow zipped files and the templates and all supporting files. folders, and images are packaged in a zipped file.
The thumbnail of the template will take you to a full page using that template. You can then download the template package to your computer. Complete instructions for working with the templates is also available.
Each of these template packages includes two templates, one that uses server side includes for the top and side menus and the footer. Since the majority of people will NOT be able to view the server side includes on their own computer, the other template contains all regions as part of the main template. Both the template and style sheet validate. The template and the style sheet have been heavily commented to help you in the learning process.
IMPORTANT NOTE: You will need to have a basic understanding of writing both HTML code and cascading Style Sheets to successfully work with these packages.
If you find it difficult working with the templates without being able to view the menus and footers, please see Barry Carlson's solution. View SSI Data in your Local Folders.
Christmas Nutcracker Template
The
Christmas Nutcracker Template is is based on one of the newest templates offered
on our sister site -
Expression Web Mobile Friendly Site Templates. This template uses some CSS3
for the rounded corners. The rounded corners will display as intended in
newer modern browsers. They will degrade gracefully in older browsers and default
to rectangular corners. This template uses a fluid width layout with a
maximum width specified and is mobile friendly. The template
package includes a dwt package as well as a blank template and a template
that makes use of server side includes. Use the one that works best for your
site. Added DECEMBER 2013.
Roots and Branches Template
The
Roots and Branches Template is is based on one of the newest templates offered
on our sister site -
Expression Web Mobile Friendly Site Templates. This template uses some CSS3
for the rounded corners. The rounded corners will display as intended in
newer modern browsers. They will degrade gracefully in older browsers and default
to rectangular corners. This template uses a fixed width layout and is
mobile friendly. The template package includes a dwt
package as well as a blank template and a template that makes use of server
side includes. Use the one that works best for your site. Updated
July 2015.
Download the Roots and Branches template package.
This template is also available in a different color combination for use with Expression Web or FrontPage 2003.
Nightlights Template
The Nightlights template package is a fixed width (1024px) two equal column
layout. It is set up to use server side includes for the menus and footer.
Added February 2011.
Download the Nightlights template.
Nightlights for Expression Web, FP2003, SPD2007
Baubles Template
The Baubles Site Template package is a liquid layout with a triple layered background.
The package includes three separate templates - a DWT, a blank template, and
a blank template that uses ssi's.
Download the Baubles Template package. The packages includes three
templates and all supporting files/images. There is a template for any web editor
including one that uses server side includes. Added February 2011.
Additional Template Resources
- Fixed Width Layout Templates from Genealogy Web Creations
- CSS Based Liquid Layout Templates from Genealogy Web Creations
- Expression Web Liquid Layout Templates by Expression Web Tutorials
- Expression Web Site Templates by Expression Web Tutorials
- Expression Web DWT's by Cheryl Wise
