N.Design Studio

2. Header Tag

Now, add another CSS style and name it ‘.header’. Enter Width:770px, Height:130px, Background:#CCCCCC.

Go to Dreamweaver Code view and enter the following code within the body tag. Then preview your page by pressing F12 in Dreamweaver, and you should see a 770×130 grey rectangle with text "header" in it .

3. Left Column

Add another CSS class, ‘.left_column’ and enter the following information:

Float:left is use to align ‘.left_column’ to the left.

4. Right Column

Again, very similar to ‘.left_column’ butthis will align to right because I set Float: right.

5. Footer

Finally, add the last CSS class ‘.footer’ and enter the following information:

Notice this time I entered Clear: right ? This will clear the right float of the ‘.right_column’ and display ‘.footer’ below.

6. Enter the HTML codes

Now enter the final HTML codes as follow and your page should look like this.

Editing CSS styles

At any time you can edit your CSS styles by double click on the class name or in the source code window.