Red and Black 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 Red and Black 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. 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.
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 466px by 110px 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 were changed to include the image as the background for the masthead.
Top Navigation Menu
The top navigation menu makes use of one of the new Expression Web add-ins, HorizontalMenu Advancer by cssmenutools. 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
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.
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.