Free Web Template: Left Navigation Top Header with Photo and Colors

About this Web Template:

This template does more than the other templates in this series; it adds photos, color, and fonts to the layout. It uses a standard left navigation with top header bar layout, but the image defines the entire page. The colors are defined by the photo of the iris and I used a font set that I felt looked nice with the iris as well. Plus, for the navigation I used an image of a "wingding" to add a little more to the design.

See The Template

Works in Browsers:

Windows

• Firefox and Mozilla 1
• Internet Explorer 5 and 6
• Opera 8.5 and 9

Macintosh

• Firefox and Mozilla 1
• Internet Explorer 5
• Netscape 7
• Safari 1

The Colors:

• Blue - #859CFE
• Pink - #FE859C
• Green - #9CFE85

These are not browser-safe colors, so there might be some dithering on older monitors, but I'm willing to risk that.

The Fonts:

I used a series of fonts in my order of preference for the headers of this layout:

• Balthazar
• "Blackadder ITC"
• "Comic Sans MS"
• "Arial Rounded MT Bold"
• Arial
• sans-serif

Note that the last font listed is a generic font type.

The Photos:

I based the layout on a photo of an iris from my backyard. Plus, I created a small icon using the letter "a" in the Wingdings2 font. I didn't want to trust that everyone viewing this page would have this font, so I created an image rather than using text.

Details:

• top header with 15px pink lower border, 100px high
• left column topped with image of iris 150x139px
• "button" links in left navigation are created with CSS and anchor tags: green background color, blue bottom border, and blue font color with pink hover color
• main column takes up remaining space, and is positioned using margins

To Use the Free Web Template:

1. Copy the CSS into a document named styles.css
2. Copy the HTML into another document in the same directory
3. Download the iris image and the icon and place them in the same directory
4. Change the text to your content
5. Publish all four documents

The Web Site Template Data:

• The XHTML
• The CSS
• Iris Photo
• Iris Icon

More Web Site Templates:

• Free Web Site Templates
• Free Menu Templates
• Other Web Site Templates

Terms of Use:

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.