Springtime Template
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.
The Springtime Template was created using one of the layouts from
Eric Meyer's CSS Sculptor for Expression Web. It is a one column fluid layout
which will resize to 800x600 with no horizontal scroll. However, the maximum
width of the container has been set at 1024px. Both the style sheet and
the template validate. The page was coded using an XHTML Transitional doctype. Editable
regions in the dwt include the doctitle, headsection (description and keywords),
and the main content area. All of the gradient images were created using
Dynamic Drive's Gradient Image Maker.
NOTES:
- The page background uses a gradient image 20px by 700px tiled horizontally with the top color #4A3C32 and the bottom color #786159. The bottom color of the gradient is also the background color of the page.
- The background for the Site Name is a gradient image which measures 5px by 60px and is tiled horizontally. The top color of the gradient is #44583A and the bottom color is #5A754D.
- The background image for the masthead is 1024px by 355px although the height of the header div is set at 250px. You can certainly increase the height if you wish. You can also change the header image to one of your choice.
- The container for the page is set at 80% but a maximum width of 1024px is set to constrain the container to the size of the header image.
- The menu uses the Project Seven CSS Express Menu. The menu is an include so that it is easier for you to edit.
The
images are floated to the left and right by applying a classs imglft or imgrgt.
Classes are included for using small text and for centering content within a <p>
tag. Others classes should be added as you need them.
To change colors, font families and sizes, edit the style rules in the external style sheet. As you work in Expression Web, the masthead image will look like it does not fill the area BUT if you preview in your browser, you will see that it does. The templates has been checked in IE6, IE 7, Firefox 3 and Opera 9.
Nulla placerat pharetra libero. Cras lectus nulla, posuere non, sodales non, condimentum vel; justo. Cras luctus quam non nibh. Donec condimentum pulvinar nisi. Nullam tempus mauris a lorem. Proin scelerisque? Quisque bibendum dictum mauris. Vestibulum id felis non sem tempus tempor. Quisque eros? Proin facilisis tempus leo. Donec vitae quam. Proin ultricies nisl in mauris. Sed tristique. Phasellus gravida. Nullam ante tellus, eleifend quis, volutpat sed; adipiscing at, diam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin nulla at sapien. Maecenas elementum imperdiet metus. Maecenas risus. Sed non neque vel ipsum tempor sollicitudin. Donec at justo et leo pellentesque sodales? Nulla condimentum, neque pulvinar vestibulum laoreet, felis enim mollis dui, ut scelerisque dui mi sit amet magna? Ut laoreet, lorem accumsan fermentum blandit, mi lacus semper felis, ac porta arcu ante sed eros. Nullam scelerisque turpis accumsan leo. Cras non tortor. Vestibulum egestas massa a urna. Aliquam erat volutpat. Phasellus hendrerit, velit id euismod suscipit, dui velit convallis enim, non mattis ligula diam in nunc. Duis laoreet augue eu metus.
Donec placerat laoreet risus. Curabitur libero. Aliquam a justo. Etiam rutrum convallis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa. Donec massa. Duis placerat commodo lacus. Nam nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mattis felis. In eu neque. Praesent consectetur, tellus eget adipiscing scelerisque, erat felis ultricies felis; quis dignissim nisl mi id massa? Ut arcu. Fusce est. Proin bibendum.