Friends

Saturday, October 1, 2011

Design your template in Dreamweaver CS4

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
    Design your template in Dreamweaver CS4
  • 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.
    Design your template in Dreamweaver CS4
  • 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.
    Design your template in Dreamweaver CS4
  • Give the stylesheet name ‘styles’. Click ‘Save’.
    Design your template in Dreamweaver CS4

0 comments:

Post a Comment

#
### ###