Design your template in Dreamweaver CS4

This entry is part 4 of 19 in the series Dreamweaver CS4 Tutorials

We will now design the template in Dreamweaver CS4.

The layout we designed in Fireworks CS4 is shown below:

layout design

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’.

Dreamweaver CS4 Tutorials

Series Navigation Create a template in Dreamweaver CS4Design the CSS Style Sheet in Dreamweaver CS4