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.
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.
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 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.
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.
The Google Custom search box will need to be adjusted with the code for YOUR custom search. You can, of course, use any search engine you choose. The styling for the search areas is part of the external style sheet.
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.
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.