The layout we designed in Fireworks CS4 is shown below:

We will need to recreate this layout in Dreamweaver. Some portions will need to remain images e.g. gradient backgrounds, rounded edges, special fonts like those used in the menu and the logo. These images have already been created, sliced and exported from Fireworks as web optimized images and are available for use within the ‘images’ folder.

To design the layout within the template file:

• Select Insert > Layout Objects > Div Tag
  
• In the screen that opens up type the name ‘header’ against ID. We are creating the header area with the gradient background and the logo.
  
• Click the ‘New CSS Rule’ button.
• In the ‘New CSS Rule’ screen that appears, #header will already be typed in. Select the ‘New Style Sheet File’ from the ‘Rule Definition’ drop down menu. Click OK.
  
• Give the stylesheet name ‘styles’. Click ‘Save’.