Dreamweaver CS5 Website Header

Need a Website? Contact Us Now!

This entry is part 6 of 20 in the series Dreamweaver CS5 Tutorial

Now let’s create our website header. This is the top portion of the website with the logo and masthead.

As per our layout it looks like this:

We will need to create a div called ‘header’ and a style also by the same name ‘header’.

Select ‘Insert’
Select ‘Layout Objects’
Select ‘Div Tag’

Since we are going to have only one header on the page, we can make this an ID.

In the Insert Div Tag Window enter ‘header’ next to ID.

Now click on the ‘New CSS Rule’ button.

In the New CSS Rule window:

You will see ‘#header’ is automatically entered by Dreamweaver.

Select ‘New Style Sheet File’ from the bottom drop down menu.
Click the OK button

Give the file name ‘style’ for the stylesheet.
Click the ‘Save’ button.

You have now created a stylesheet file names style.css and saved it in your site’s folder.

In the ‘Style Rule Definition for #header in style.css’ window we can now specify the style properties of the header div tag. We can specify the background color, dimensions and borders. We can also specify the path to the logo image as well as it’s position in this style.