Baubles Template
This is a liquid layout template which will resize to fit the viewers browser window. It does NOT have a maximum width specified so you may not be happy with the results on a large screen monitor open to full size. The left navigation column and the content column use percentages for the width. You can read more about using the CSS max-width Property.
The triple layered look is obtained by using three background images. One for the <body> tag, one for the container <div> and one for the outerWrapper <div>. The images are from Eos Backgrounds (Baubles). There are numerous color combinations you can use. If you do use the background images, a link to their site IS REQUIRED.
Both the template and the CSS validate. The templates uses an XHTML doctype. If you are currently using the HTML doctype, please read Differences Between XHTML And HTML.
Masthead
The current site name in the masthead is simple text. If you want to use a fancy font and/or images, I suggest you create a graphic and add it to the style rules for the header <div>. As an example see Site Template. If you do that, make sure and remove the line of text from the template.
Images
Classes have been created for you to use in floating your images right, left or centering on the page. Remember that ALL images require an alt tag for accessibility. If thery are decorative, then use an empty alt tag.
Menus
Both menus used are simple unordered lists. You can use both menus or remove one of them. Or use the top menu for the main areas of your site and the side menu for the various sections that can change from section to section. An example of a site that uses the menus in that manner is Family Genealogy.
If you would like to try a fancier horizontal menu see CSS Library Horizontal CSS Menus
Search Box
The sample search box on the left sidebar uses the code for FreeFind search. If you use that search engine you can change this line of code <input name="id" type="hidden" value="12345678" /> and replace value with your number. If you are using another search engine, you will need to replace what is currently in the template with their code.
Package Includes
This template package includes:
- A complete DWT Site Template package which requires FrontPage 2003, any versions of Expression Web or Sharepoint Designer.
- A blank template that can be used with any web editor. This particular templates shows an example of using a graphic image as the site name.
- A blank template which uses server side includes for the top menu, left menu and footer and can be used by any web editor.
License Information:
This contribution is licensed to you under Creative Commons by the owner, Pat Geary. You must attribute the template design to Expression Web Tutorials & Templates by the link in the footer or the copyright statement meta tag.