3-Column Web Page Using CSS Layers in Dreamweaver CS4

By Dawn Pedersen · 03/10/2009 ·

3-Column CSS Layout

Doing layout for Web pages with tables is so 1998. Tables should be used for data, not to arrange the elements on your Web page. A better method is to use CSS layers. They are much easier to format than tables, once you get the hang of it. But the best thing is that if you use CSS layers to design your site, you can make a site-wide layout change in the blink of an eye.

If you’ve never tried CSS layers for your site layout, try this one. Dreamweaver CS4 makes it a cinch, if you pay attention to the details.

Your feedback is encouraged and much appreciated!

P.S. If you do not have Firefox installed, I highly recommend you install it.

What You Should Know First

The Dreamweaver CS4 Workspace

Step 1: Create the Body

We’ll build a Web page design essentially like the class Web site I built at nhsdesigns.com. First, we’ll set up a gray background behind it all, and set the font style. To do this, we will use CSS to redefine the formatting of the <body> tag.

Create a new, blank HTML document in Dreamweaver.
Save the file as index.html inside your CSS Layers folder.
In the Document tool bar, change the Title to CSS Layers.
Show the CSS Styles (Window > CSS Styles) and click on the All button.
Click on the New CSS Rule icon.
Use these settings and click OK:
1. Selector Type: Tag
2. Selector Name: body
3. Rule Definition: New Style Sheet File
Save the style sheet file as main.css in your CSS Layers folder.
In the CSS Rule definition for body box, use these settings and click OK:
1. In the Type category, change the Font-family to Verdana, Geneva, sans-serif, the Font-size to 10px, and the Color to #000000.

CSS Rule definition for body

In the Background category, change the Background-color to #CCCCCC (a light gray).

CSS Rule Definition for body

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step one

Step 2: Create the Outer Container

Next, we’ll create the large white layer that contains everything else. Using this layer to contain the others layers will create a nice, 15-pixel white border around your page. To do this, we will create an ID selector, which can be used only once by a single div tag on the page. ID styles begin with a pound (#) sign.

In the CSS Styles panel, click on the New CSS Style icon.
In the New CSS Rule box, use these setting and click OK:
1. Selector Type: ID
2. Selector Name: #container
3. Rule Definition: main.css
In the CSS Rule definition for #container box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Background		Background color:	#ffffff
Box		Width	720 pixels
	Padding (UNCHECK same for all)	Top	0
	Margin (UNCHECK same for all)	Top	0
		Right	Auto
		Bottom	0
		Left	Auto
Border (same for all)		Style	solid
		Width	15 pixels
		Color	#ffffff

To insert the layer into the page, click inside the page and choose the following menu command: Insert > Layout Objects > Div Tag.
In the dialog box, select ID: container and click OK.
Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 2

Step 3: Create the Header

Here we’ll create a header area in which a banner image could go later. It will have a baby blue background, and have a 1-pixel white bottom border which separates it from the navigation bar.

Click inside the #container layer. Delete the text that automatically filled the layer but leave your cursor inside the layer.
Let’s try a quicker way to insert the Div tag:
1. Open the Insert panel (Window > Insert).
2. Make sure that Common is selected in the drop-down menu at the top of the panel.
3. Click on the Insert Div Tag button.
In the Insert Div Tag box, click on the New CSS Rule button.
In the New CSS Rule box, use these settings and click OK:
1. Selector Type: ID
2. Selector Name: #header
3. Rule Definition: main.css
In the CSS Rule definition for #header box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Background		Background color:	#22b5ff
Box		Width	720 pixels
Box		Height	220 pixels
Border (UNCHECK same for all in all 3 columns)	Bottom	Style	solid
		Width	1 pixel
		Color	#ffffff

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 3

Step 4: Create the Navigation Area

We need a rectangle below the banner for links. It will have a dark blue background and white text. It will also have a 1-pixel white bottom border, and 10 pixels of padding around its text. First, we need to tell Dreamweaver precisely where to put it (after the header div) by viewing the code.

Click on the Code button on the Document tool bar.
Find this bit of code and click just before it:
</div>
</body>
</html>
Click on the Design button on the Document tool bar.
In the Insert panel, click on the Insert Div Tag button.
Click on the New CSS Rule button.
In the New CSS Rule box, use these settings and click OK:
1. Selector Type: ID
2. Selector Name: #navigation
3. Rule Definition: main.css
In the CSS Rule definition for #navigation box, use these settings and click OK twice:

Category	Subcategory	Setting	Value
Type		Color	#ffffff
Background		Background color:	#005ac9
Box		Width	700 pixels
Box		Height	20 pixels
	Padding (same for all)	Top	10 pixels
Border (UNCHECK same for all in all 3 columns)	Bottom	Style	solid
		Width	1 pixel
		Color	#ffffff

Save both the source code and main.css (Save > Save All.) With index.html active, press F12 to view the page in a browser. It should look like this:

end of step 4

Page 1 Page 2 Page 3

Share this Article

You can share this article almost anywhere but on your car's back bumper.
Hover over this bar to access the menu.

Category: CSS, Dreamweaver, Tutorials

Tags: box model, CSS, Dreamweaver, layers

Comments

24 Comments

By Sarah, 04/27/2009 @ 1:27 am

This is a great tutorial. I want to encourage my students to use DIVs and CSS instead of tables. They should easily be able to follow this in a lesson its very clear.
By Siobhan, 05/06/2009 @ 9:16 am

I just set up my homepage following your tutorial – it has been of great help to me and it worked a treat, so thank you.
By Dawn Pedersen, 05/06/2009 @ 6:00 pm

You are so welcome, Sioban! Thanks for the feedback, Sarah. I’m glad it is useful to you.
By Jober, 05/14/2009 @ 6:37 am

This has been a real help, particularly with regard to getting the columns to drop all the way down evenly to the footer.
By Dawn Pedersen, 05/20/2009 @ 4:08 pm

I received this comment from Lucy, but for some reason it’s not showing up:

“This tutorial makes creating a website in CSS just so simple. I was really nervous about making the change from tables to CSS but Dawn gave me the confidence to create my very first site in CSS! I just tweaked her example dimensions and background colours to suit my own and here’s the finished result for my charity website – http://www.richiekeefelifeandsoultrust.org.uk
Thanks Dawn!”
By Dawn Pedersen, 05/20/2009 @ 4:09 pm

P.S. Good job, Lucy!
By Shanny, 05/28/2009 @ 7:45 am

That was so awesome,thanks!

I just can’t work out how to do that last bit where you put the picture in, do you have to do this for every css webpage? Sorry I’m very new at CSS!
By Dawn Pedersen, 05/28/2009 @ 5:05 pm

Hi Shanny!

Step 11 adds “css-layers-bgcolor.gif” to all pages that are using that external CSS file and also using the #container div. You have one single external CSS file, and you attach all HTML Web pages to it that should look the same. Check out the “link” icon at the bottom of the CSS Styles panel in this image: http://blulob.com/images/tutorials/css-layers-01.gif. Or just do a “Save As” on your first page to create a second page.
By JayR, 05/28/2009 @ 8:55 pm

Nice tutorial..and easy to understand..keep up the good work! even to those who doesn’t have any knowledge in css can follow your directions.
By Dawn Pedersen, 05/30/2009 @ 12:34 am

Thanks, JayR!
By drleadbasedpaint, 06/02/2009 @ 8:56 pm

This is a great tutorial. I’ve always avoided learning css because I don’t have the time. Now with layers gone from Dreamweaver, I’m sort of forced into it. You made everything very clear and easy to follow. I’m going to have to do this several times to get the hang of it though!
By Dawn Pedersen, 06/03/2009 @ 10:27 am

Dreamweaver’s “layers” were really just CSS divs all along. The name “layers” derives from the fact that you can overlap them by using different z-index values. In this tutorial, the divs don’t overlap, but they still work essentially the same way as “layers”. They could overlap if we wanted them to. I’m glad you found the tutorial useful and easy to follow!
By drleadbasedpaint, 06/09/2009 @ 9:28 am

I’ve been working with your layout tutorial for a while now, trying to get familiar with how it’s done. I’ve learned a lot, but there’s one thing I can’t do & I am hoping you could give me a pointer or two.

In the navigation, I want to add a CSS menu bar. I tried a few including the one at http://webdesigninfo.wordpress.com/2007/04/28/creating-simple-css-menu-bar/ and the one at http://toshuo.com/2006/how-to-make-a-css-menubar/

No matter what I do, I can’t get this concept to work. I invariably end up with a vertical list of each menu item in a vertical column, or I get the menu bar & I can’t reposition it to be in the navigation area. Also, when that happens I lose out on the column adjustments in your tutorial that make the columns go all the way down the page.

I really would appreciate it if you could give me a suggestion!

Best regards,

Dr. Paint
By Dawn Pedersen, 06/09/2009 @ 9:32 pm

Hi Dr. Paint,

I would not be able to diagnose this without the source files. I’d be happy to work with you on an hourly consultation basis. I will be available after this week is over. Email me at dawn@blulob.com.
By Josh, 06/20/2009 @ 1:38 pm

thank you so much – this is an amazing!!! tutorial best one on the internet thanks you
By Dawn Pedersen, 06/20/2009 @ 3:15 pm

You’re welcome, Josh. And thanks for the compliment!
By Donna, 07/03/2009 @ 5:18 pm

Dawn, I have been struggling to put together a website from scratch for a couple of weeks now. I have taken all kinds of Paid For classes that have left me very frustrated. Your tutorials are clear concise and are greatly appreciated. GREAT JOB!!!!!
By Dawn Pedersen, 07/05/2009 @ 3:18 pm

Thanks, Donna!
By Pam, 07/18/2009 @ 5:06 pm

Thank you for this it’s fantastic. I’m off to update my boring website. You’re a star
By Dawn Pedersen, 07/20/2009 @ 9:20 am

Thanks, Pam!
By Hussain M Hamid, 08/13/2009 @ 7:59 am

Thank you very very much for your guidence
two days back i am stucked in creating three column layout using Dreamwever CS3, but after reading your tutorials it solved my problem
this is really a good stuff
By Hector M., 09/08/2009 @ 2:38 pm

I just want to tell you that I have seen many Tutorials, but never one as Thorough, Precise and Easy to follow as this. You have done a masterful job helping me and others. Dawn, You are the BOMB!!! Keep them coming…. Thanks.
By John, 10/10/2009 @ 7:58 pm

great tutorial! Explained very well, and easy to follow`-`
One note: however in the beginning steps when creating the main.css file, I choose body and having dreamweaver writing everything for me. It creates the tag .body and not body.

This took a while to figure out why the css was not working. Dreamweaver did give a warning saying this was a general tag, are you sure?

This is more of a bug in dreamweaver!

I think as this is one of the best html/CSS that I have encountered, well done and thank you!
By Henry Nwankwoala, 07/28/2010 @ 3:15 am

Your tutorial is really awesome. I did enjoy it.
Please i need a favour from you. Am trying to design a website where users(or registers for new users) enters their username and password to enter the main webpage.
Can you help me out on what to do