Christmas Wreath Template

The Christmas Wreath One Column Template is based on Eric Meyer's CSS Sculptor for Expression Web which is no longer available. However this has no effect on how the template works and can help in the process of learning CSS. It is a one column fluid layout which will resize to 800x600 with no horizontal scroll. The maximum width of the container has been set at 1200 px. Because IE 6 and below do NOT recognize max width, I have added minmax.js so that the page will render properly in those browsers. You can read CSS minimum and maximum sizes to learn more. This script makes these CSS properties work transparently in IE version 5.0 upwards.

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), scripting area for any scripts you might need to run, and the main content area.

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.

Images

The photograph used in the masthead is The Microsoft clipart collection. It is the background image for the masthead while the Site Name was is inserted as a transparent image. You may create your own to use or request that I change the name for you.  The font used for the Site Name is Vivaldi

The transparent image for the site name is 419px by 126px. The Angel ornament image used in the masthead is 171px by 170px.

Classes for floating images right or left are part of the style sheet. This particular float has been cleared so that the next heading falls below the image.

Menu

The menu used in this template is the Inverted Shift Down Menu  from Dynamic Drive. Credits within the style sheet should remain in place if you use this menu. This menu is only going to work for a small site as there is no dropdown capability and you are limited in the number of links you can add to the menu. If you view this template at different resolutions you will see what happens with the menu with only these six menu items. The menu is an include for ease of use in editing. There is a class for the current page which is not being used. If you wish to use it, you should make the menu part of the dwt and it will need to be an editable region.

This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it. And just for demonstration, it shows how to make the bottom corners of each tab rounded using both CSS3 and Mozilla's proprietary declarations for rounded corners. Note that the rounded corners effect is currently only visible in Firefox (and future CSS3 browsers).

The rounded corners  styles will cause the style sheet to throw up four errors when you try and validate it. You can see the difference in the menu tabs by viewing the template in Firefox and Internet Explorer. If you need a menu with a one level dropdown, I can highly recommend the free Project Seven CSS Express Menu. NOTE: Thanks to Barry Carlson for the additional code that cover Safari and Chrome and make provision for the W3C proposed CSS3 standard.

Search Box

The included search box is for display only. The styling is via the style sheet BUT you will need to update it with your own code in order for it to work. See Add a Search Box for instructions on adding and validating a search box.

Contact Form

Included in this template package is a contact form based on James Huggins' Email Form Script. Note that the form is not active. You can however, test a sample of this contact form. Filling out the form will send a message to tutors (at) frontpage-to-expression (dot) com. If you use a valid e-mail address, that address will receive a copy of the email. Once to click the Send button, you will be directed to a thank you page. Clicking the Send button without filling in the fields will show you a sample error page. The form and the error page have been styled using a separate external style sheet. You will need to copy the styles in the form.css to whichever of the style sheets you are using with your chosen template. No DWT has been attached to the contact.html page or the error template page. You will need to create your own thank-you.html page.

If you want the form to work for you, you will need to make some changes in the code. The instruction are given using the line numbers in the code of the contact.html as it is currently written BEFORE attaching a DWT. Be extremely careful in editing this file.

To use this script, your web host must provide the ability to process PHP 5. It must support at least PHP 5.1 (released 24.Nov.2005). The form script is capable of much more than the sample included with this template package. Please see James Huggins' Email Form Script for further details and the entire package. You should check to make sure you are running James most current revision of the script.