Working with the Content First Site Templates

These instructions were written using the content first left fixed width 1024px template with Expression Web 4.0 SP2. Depending on the template you choose to use and the changes you choose to make, you may have to make different corrections/additions.

Create a new Site

Before you can start working with your new layout, you need to create a new site.

Import the web package

Next, you will need to import the web package or unzip the files into your newly created website.

Images

Create and save any new images you plan on using to replace those used as part of the DWT in your images folder within the new site. I created a new image for the masthead and the #contentWrapper background for my Expression Web site. The image used to create the equal column look is 220 pixels wide by 100 pixels high. This includes a 2px border on the right or left side. If you change the size of this image, you will need to make changes to some of the other widths used. The three column image is 964 pixels wide by 73 pixels high.

If you create a new image and give it the same name, then you will not need to edit the image location in the style rules.

Edit the style rules

Practically all of the changes to the "look" of your site will be made within the external style sheet. Start editing your style sheet to reflect the changes you want for your site.

The first change I made was to change the body color to white (#ffffff). Preview each change you make in your browser. While you can preview your work in your default browser, it is NOT going to display problems that will show up in other browsers or different versions of the same browser. OK so far.

I cannot stress enough that you check your page with each change before you go on to the next one.

Next I changed the background color for the #header to solid black and removed the background image. At the same time, I changed the #banner style rules to reflect the image I wanted to use. Depending on the size of the banner image, you may have to adjust the height for your #header as well as your #banner divs.

Make sure you refresh your browser display. It is here I notice the problem with the display.

View Screenshot

Solution: Adjust the top margin of the style rules for #outerWrapper.

View Screenshot

My next change is to the background image of the #contentWrapper style rules. If you wish to keep the equal column but change the color, you will need to create a new image. The image used in this layout is 220px wide by 100px high. The right border is 2px wide so the image is 218px + 2 px = 220px. Again, save all and refresh your view in your browser as you make your changes.

The last change I wanted to make, was to have the footer cover the entire width of the bottom of the page. First I change the background color of the #footer div but that does not give me the look I want. I add a new set of style rules for a #footerwrapper { clear: both; width: 100%; display: block; margin: 0px; background-color: #1A1B1D; border-top: solid 10px #000000; }

and add the following to the DWT just after the comment <!-- Page Container ends here -->

<div id="footerwrapper"></div>

I then copy and paste the entire code of the #footer between the opening and closing <div> for the #footerwrapper. Your code should look something like

<!-- Footer begins here -->
<div id="footerwrapper">
<div id="footer">
<p>Copyright © 2011 Company Name. All Rights Reserved.</p>
<p><a title="Copy and Paste the email address to your email editor to send me mail.">your-name<code>@</code>your-domain.com</a> | <a href="../privacy-policy.html" title="Privacy Policy.">Privacy Policy</a></p>
</div></div>
<!-- Footer ends here -->

Again, check the display in your browser to see if the result is what you expect.

View Screenshot

Menus

I wanted to use one of the menus from Beautiful CSS Centered Menus. Make sure you save any needed images to your image folder. I copied the style rules to a Notetab file first so I could work with it. I then copied the style rules into the style sheet and changed the id on all the rules to #topnavigation. Your other choice would be to change the id in the html to match the menu you choose to use. Again view in SP. Having already used this menu, I know there is a display problem in Internet Explorer as you can see by the screenshot.

View Screenshot

Solution: Add position: relative; to the style rules for the #topNavigation id.

Again, check the display in your browser and you will see the problem has been solved.

Summary

Once you have made all changes to the DWT and the style sheet, and checked that you have NO display issues in any of the browsers, you are ready to use the DWT to develop your site. If you are going to use this layout with an old site, now is the time to make sure your html code is squeaky clean BEFORE you start attaching the DWT.

You can save yourself a lot of headaches by previewing each change you make to the DWT before going on to the next one.

Make sure and check all of your colors for heading tags and hyperlinks as well as the side menus so they reflect reflect YOUR color choices.

Resources