N.Design Studio

This is a simple tutorial on how to make a basic Cascading Style Sheet tableless webpage. I will show you how to use Dreamweaver to code a tableless webpage without any knowledge of CSS coding. It is intended for non-experienced CSS coders or beginners.

In this tutorial, I will use a simple webpage with the following containers: Header, Left Column, Right Column, and Footer.

Click here to preview the page >

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.