Working With Site DWT's

Each of the twelve site templates comes with a heavily commented external style sheet. You are going to need some knowledge of CSS and X/HTML coding to work with the site DWT's. Good resources for learning are:

Create Your Website

Open Expression Web 3.0   in the Site Menu > New Site > My Templates or Templates > Choose the layout you want and the location > name your web > Click OK 

Open Expression Web 1.0 or 2.0 in the File Menu> New > Web Site > Templates > Choose the layout you want and the location > name your web > Click OK

Using Two Columns Left Liquid as an example. Click on the site.dwt to open.  

Modifying the External Style Sheet

The information included here is basic and is to get you started. Styles will be modified using the CSS Properties Task Panel/Pane.   If the CSS Properties Task Panel/Pane is not showing Click the Panels Menu > Make sure CSS Properties is ticked.

The Show set properties on top button Screenshot show set properties on top button. organizes the list of properties so that properties that you have set in the selected style appear at the top of the list.

By default the CSS Properties listed are not expanded. If you click the + sign in front of the css property, that property will expand and you will be able to enter your styles using css shorthand.

Modifying body style

To add a background image to the body style do the following:

  • Select the image you wish to use as a background of the page. It should be a seamless image that can be tiled. It should also NOT overwhelm the page design. Example Save the image to your images folder.
  • Click body under the Applied Rules. If you scroll down to the CSS Properties, you will see the current style rules. Click the + sign in front of the background the background properties will expand and will allow you to use css shorthand.
  • Click background color and copy the color # there
  • Click background image> browse to the image you want to use as the background > The image will now show as the background of your page
  • The following was added to your style sheet background: #353c48 url('../images/eosbaga3.jpg'); as part of the body style rules.
  • Make sure you delete the following from the style rules background-color: #353c48; as you do not need the background color listed twice.
  • NOTE: The background image used is from EOS Backgrounds

View Screenshot background NOT expanded

View Screenshot background expanded

Modifying #header style

To add a background image to the header style do the following:

  • Select the image you wish to use as a background for the masthead of the page. For this example, I created a transparent gif image to use in place of the Site Name. Example Save the image to your images folder. Note the image size. If you are using a fixed width outerWrapper, the image should be no wider than the width of the outerWrapper. If you are using a liquid design, it needs to fill the header space when the browser window size changes.
  • Click header under the Applied Rules. If you scroll down to the CSS Properties, you will see the current style rules. Click the + sign in front of the background the background properties will expand and will allow you to use css shorthand.
  • Click background color and copy the color # there
  • Click background image> browse to the image you want to use as the background > The image will now show as the background of your masthead. In this case I also selected background-repeat:no-repeat; as I do not want the logo to repeat across the page.
  • The following was added to your style sheet background: #9bb6d2 url('../images/site-logo.gif') no-repeat; as part of the header style rules.
  • Make sure you delete the following from the style rules
    • background-color: #9bb6d2; as you do not need the background color listed twice.
    •  the code <p class="title">My Site Name</p> as it is no longer needed.
  • If necessary, change the height to allow enough room for your image.

View Screenshot #header styles NOT expanded

View Screenshot #header styles expanded 

More Details on using http://www.w3schools.com/css/css_background.asp

#topNavigation

The menu included as part of the #topNavigation is for a small site and offers no submenus. If you require a menu that offers submenus, we recommend:

#leftColumn or #rightColumn

None of the site templates packages includes a vertical navigation menu as part of the styling for the left and/or right columns. If you choose to add one, some resources you might find helpful include: