Ocean 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 Ocean template uses one of the Site Templates offered on our sister site Migrating from FrontPage to Expression Web - the one column fixed width to 1024px - as a starting point.
Changes made to the template include a gradient image added to the body style for the band across the top of the page. Then a top margin was added to the outerWrapper style so that it begins just below the gradient image.
Viewing the style sheet and comparing it to the original site template will allow you to see the changes made to the styles.
Masthead
The masthead image is 1200px wide by 245 pixels high. You could also use this masthead image with a fluid layout by limiting the maximum size of the container to 1200px. The photo of the Big Sur coastline was taken on a trip to California. The style rules within the external style sheet were changed to include the image as the background.
Adjustments were also made to the style rules for the site name. If you wanted to use a fancy script, the site name could be an image inserted into the DWT as was done with the alternative template.
Top Navigation
The menu on the Ocean template uses one of the commercial add-ins for Expression Web, CSS Drop Down Menus by Ajatix. If you do not have this program you can substitute another horizontal menu for it. There are several available from Dynamic Drive. This add-in allows for both horizontal menus with drop downs and vertical menus with flyouts.
I have included an alternative menu with this set. The alternative template uses 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. Too many links will cause the menu to break.
The rounded corners styles will cause the style sheet to throw up four errors when you try and validate it as they rely on CSS3 style rules. You can see the difference in the menu tabs by viewing the template in Firefox and Internet Explorer.
Images
Classes have been included to float images both right and left as well as centered on the page. The image within the content of this page has a drop shadow added using an graphics editor. All images you insert should be resized to the size you want displayed NOT resized by changing the width and height within the html code.
License Information:
This contribution is licensed to you under Creative Commons by the owner, Pat Geary. You must attribute the template design to Expression Web Tutorials & Templates by the link in the footer or the copyright statement meta tag.