My Family Tree Expression Web DWT
If you are using Firefox and click the Download button, you will see a bunch of gibberish. Instead, right click the Download button and save the file to your computer.
Layout
This is a fluid layout in that the container is set at a width of 90% and will resize according to the viewer's browser window. No maximum width has been set.
Masthead
The font used to create the Our Family Tree logo is Vivaldi in color #4A6C22. 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 tree image used with the masthead is 151 pixels wide x 170 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>. If you choose to use a different image for the masthead background, make sure your logo and the image do not overlap.
Menu
The menu used is an unordered list and each level is a hyperlink styled to look like a button. 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 screenshot of the color palette shows the application of the class imgrgt. The is also a style to float images to the left.
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 navigation and the footer are locked regions in the DWT. The left navigation is an include that is an editable region to allow for sectional navigation if you choose.
This template requires you have Expression Web as it is in the form of a Personal Web Package. The template 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!
