Ocean Template

Ocean Template with Alternative Menu

Download Ocean Site Template Web Package.  Instructions.

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 at the halfway point of 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.


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.

This template uses a transparent image for the site name. It was created with the Logo Creator that is a commerical program but any graphics editor that allows you to create transparent graphic images would work. 

Top Navigation

This alternative template makes use of one of the css menus from  Dynamic Drive, the Inverted Shift Down Menu.  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.

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.

Picture of coast off Big Sur.


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.