Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. More...

Ocean Two Column Site 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 Two Column Left Fixed Width to 1024px  - as a starting point.

Changes made to the template include: style rules added for the #contentWrapper which include a background image. This allows for two equal height columns.

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 was taken on a trip to California of the Big Sur coastline. 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.

Left Navigation

The vertical menu on the Ocean template uses one of my favorites from CSS Drive, the dashed vertical menu. The alternative template includes another vertical menu I use quite often. If you want the menu to change from section to section, then you will need to make it an editable region.

Also included is the styling for a side box you can use as part of your left sidebar. Again if you wish to use different content in the side box for each page, you will need to make this section an editable region.

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.