Brown and Teal 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 Brown and Teal template uses one of the Site Templates offered on our sister site Migrating from FrontPage to Expression Web - the Two Column Left Liquid Equal Height Columns Layout - as a starting point. It uses the XHTML 1.0 Transitional doctype. The #contentWrapper style uses a background image which allows for two equal height columns. In this case the background is white but this allows the brown dividing line to extend the full height of both columns. The #outerWrapper (page container) is set with a width of 80% and will fill 80% of the viewer's browser window, At 800x600 resolution, there should be no horizontal scroll. There is NO maximum width set so if your viewer is using a large size monitor, the page content is still going to fill 80% of their viewport.
You can easily add more pages, delete any of the pages you do not need, or even rename existing pages. Pages included with this template are:
- Home Page
- About Us
- Contact Us
- Products
- Product One - sample two column layout for your products
- Product Two - sample individual product page
- Product Three - sample two column layout for your products (slightly different than the one above)
- Product Four - sample individual product page (slightly different than the one above)
- Resource Links
- Search
- Site Map
- Privacy Policy
Masthead
The masthead image is a 290px by 82px transparent gif created with the Logo Creator. You can use any graphics editing program to create your own image or request that I change the wording for you. The style rules within the external style sheet call the image as the background for the masthead.
The contact info in the masthead is also a graphic image. The icons used for the contact image are from Icons etc. They offer a wide selection for you to choose from in an assortment of colors.
Top Navigation Menu
The top navigation menu makes use of one of the new Expression Web add-ins, Ajatix Pure CSS Menu. You will need to have that add-in installed on your computer to edit the above menu or create a new one. The Products menu item has a drop down to show you how it would work. The menu is capable of having multiple level dropdowns BUT you will need to be careful of the number of items you add to your top level menu or it will break when viewed on small screen.
As an alternative, you can use one of the free menus available from
NOTES: Both menus uses absolute positioning for the dropdowns and flyouts. You will need to make sure and preview your changes at various resolutions to double check for display problems. The menus also use as the default font-size pixels for measurement. I made a change to using ems for the font-size. The top menu will not display properly in EW4. You will need to use Preview in Browser to view it.
Left Side Column
The left side column is currently a non-editable region on the DWT. You can use it for supplemental navigation, images, Google Ad Sense code or whatever you might choose. If you wish to have this section change from page to page or section to section, create an editable region BELOW the <div> for the search box. You can then use includes for the left column if you wish.
The left side includes a SAMPLE supplemental navigation that can change from section to section. It also makes use of the Ajatix Pure CSS Menu add-in for Expression Web.
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. Create the editable region for only that part of the left sidebar you want to change from page to page. Those areas that should remain the same on each page should be within the non-editable region.
Images
Classes have been included to float images both right and left as well as centered on the page. 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. Remember to add an alt tag to any images you insert for accessibility.
License Information
This template is licensed under a Creative Commons Attribution 3.0 United States License. You must attribute the template design to Expression Web Tutorials & Templates by the link in the footer.