This video will cover creating a three column layout in Dreamweaver.

A template file has been made for a new website, and a style sheet has been attached to it. Start by switching to Code view.

Start by writing a new <div> called "wrapper".

Then, create a new CSS rule for this id.

Once you are in the CSS Rule Definition dialog box, open the Box category and set the width to 960 pixels. That is the only configuration we'll make for this <div>.

Click OK to finish this rule.

Now, we'll add a header <div> inside the wrapper <div>.

Now, place your cursor inside the header <div> and use the Properties panel below to open the Targeted Rule dropdown and select New CSS Rule.

Then, click the Edit Rule button.

Make sure the Selector Name is #wrapper #header, and click OK.

In the Rule Definition dialog for this rule, go to the Box category and set the header to be 960 pixels wide by 50 pixels tall. Then use the Background category to set the header's background color.

Use the Type category to set the properties and color for text in the header.

Lastly for this rule, use the Block category set header text to centered alignment.

Switch to Design view and add some header text. We'll call this website "Teen Reporter."

Now we'll return to Code view to create a navigation bar <div> under the header <div>.

As always, we'll create a rule for this navbar <div> using the CSS Styles panel.

Your Selector Name should be #wrapper #navbar because the navbar is within the wrapper. Click OK to configure the navbar rule.

Use the Box category to set the width of the navbar to 960 pixels, but leave the Height undefined. Your text can determine how tall the navbar is based on the text size you'll set.

Let's give the navbar right and left margins by unchecking Same for all, and setting Right and Left to Auto.

Now move to the Type category and set the navbar text properties.

As with your header, set center alignment for the navbar text.

Now you need to add the navbar text. Type News, Sports, and Editorial, inserting spaces and a vertical separator between each word.

The next step is to add three columns, which we'll call columnl, columnc, and columnr. Write a new <div> for each of these under the navbar <div>, and then we'll configure their CSS rules.

Begin configuring CSS rules for these columns by placing your cursor within the columnl <div>, and creating a new rule with the CSS Styles panel.

Make sure your Selector Name is #wrapper #columnl, and configure the rule.

We'll use the Box category to set the width of each column to 310 pixels, and the padding so that text doesn't run together between the columns.

Uncheck Padding > Same for all, and give this column a padding of 5 pixels on the left and right sides. This will prevent words at the column edges bleeding together, which could make the page hard to read for users.

Make sure the margins on all sides are zero'd out, and set the Float field to left.

Now, set similar rules for columnc.

Repeat the process for columnr.

At this point, save all your files.

Now that your column rules are configured, you need to add content to the columns themselves. For this demonstration, we'll paste in some filler text to test your rule configurations.

In Design view, you can now see the column rules in action. You have successfully created a three column layout using Dreamweaver.