Ocean Template

Download Ocean Mobile Friendly Personal Web Package.  Instructions.

The Ocean template uses one of the site templates offered on our sister site Migrating from FrontPage to Expression Web  as a starting point. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fixed width layout and is mobile friendly. 

Brief Description of Picture.

Package Includes

This template package includes:

  • A complete DWT Site Template package which requires FrontPage 2003, any versions of Expression Web or Sharepoint Designer.
  • A blank template that can be used with any web editor.

Images

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.

Fonts

This templates makes use of one of the Google web fonts, Euphoria Script. Read more about Google web fonts.

Top Navigation

The menu on the Ocean template uses one of the commercial add-ins for Expression Web, Advanced CSS Drop Down Menu 4 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 and is mobile friendly.

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.

Additional Resources

You can find detailed instructions for working with the mobile friendly site templates as well as a pdf file you can download and print.

Also resources on both drop shadows and rounded corners.

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.