 |
Layout
Here is the layout:
1. Body Tag
Open your CSS Styles pallate, click on the New CSS Rule(+) icon to make a new css style.
Then the new CSS window will pop. Select Tag in the Selector Type. In the Tag dropdown, select ‘body’ or type in ‘body’. In general, you should define all your CSS in a separate file by selecting “Define in: New Style Sheet File“. But for this tutorial purpose, I’m going to write the CSS in the same file: “This document only“.
Now in your CSS definition window, it allows to define almost everything with CSS. You can set style for Type, Background, Box area, Border, Padding, Margin, List style, etc. In the Box options, enter Width=770, Margin Right=auto, Margin Left=auto. This will set the html ‘body’ tag to 770px wide, align to center.
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.
