Site 4 - Our Family Template Rose
Masthead
Font used to create the Our Family Logo is Vivaldi in color #183D4A. The logo is inserted into the html code. The logo was created using The Logo Creator program and the file is include in the download. However you will not be able to edit it without the program.
The image used with the masthead is 352 pixels wide x 204 pixels high. At this size, the masthead image and the logo will not overlap if the browser is resized to 800x600 pixels. The masthead photo is the background of the banner <div>.
Menu
The menu is from a SitePoint article Nifty Navigation Tricks Using CSS with an extra list level added. It is meant to be used where each list level is a hyperlink. If you so choose, you can add a search box to the left navigation <div> Examples of search boxes inserted into a left navigation <div>.
CSS
All styling for the presentation of the content is within an external style sheet. Changes in colors, font families and sizes should be made within the style sheet and NOT added as part of the html code.
Images
The images used on this page are examples only. All images should be resized within an graphics program and NOT by changing the size from within the html code. A class has been applied to the image to float it left or right. The top image has a drop shadow applied by adding it with your graphics program while the bottom image does not. Both images have a 1 pixel black border applied using a graphics program.
Lists
The bullets used as part of the content unordered lists are added via the style sheet rules. You can change to a different image of your choice but may have to adjust the margins and padding.
This is how a list will look:
- Main item
- Main Item
- Main Item
- Sub Item
- Sub Item
General Information
The masthead, top or left navigation as well as the footer can be easily converted to SSI's by following the server side include tutorial OR to a FrontPage or Expression Web include. Likewise, the template can also be converted to a dynamic web template by following the Expression Web Design Time Includes tutorial.
This template does NOT require any special web editor to use it. It should work with any of them - even a plain text editor. The templates uses a XHTML Transitional doctype which requires tags be self closing <br />or opened and closed <p></p>. Remember, if you are located in another country to change the language statement. Both the style sheet and XHTML code validate.
You are welcome to use the template for any of your projects, however, the link back to my site MUST remain. ENJOY!
