Categories
design education technology

3-Column Web Page Using CSS Layers in Dreamweaver CS4

Step 5: Create the Lower Container

Now we’ll create the main content rectangle. It won’t be visible by itself, but it is necessary as a frame for the multi-colored columns. First, we’ll tell Dreamweaver that we want this layer just below the navigation layer.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code again and click just before it:
    </div>
    </body>
    </html>
  3. Click on the Design button on the Document tool bar.
  4. In the Insert panel, click on the Insert Div Tag button.
  5. Click on the New CSS Rule button.
  6. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #local-container
    3. Rule Definition: main.css
  7. In the CSS Rule definition for #local-container box, use these settings and click OK twice:
Category Setting Value
Type Color #000000
Box Width 720 pixels
Positioning Type relative
  1. 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 5

 

Step 6: Create the Left-Hand Column

We’ll create three columns for the content. The first column will be for sidebar information. It has a grass green background, 10 pixels of padding around its text, and a 1-pixel white border on its right side. We need to tell it to float left because we will be putting layers side-by-side here, rather than one atop the other. I used the left column as a sidebar.

  1. Click inside the local-container layer and delete the text there. Leave your cursor inside the layer.
  2. In the Insert panel, click on the Insert Div Tag button.
  3. Click on the New CSS Rule button.
  4. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #left
    3. Rule Definition: main.css
  5. In the CSS Rule definition for #left box, use these settings and click OK twice:
Category Subcategory Setting Value
Background Background color #9cff00
Box Width 150 pixels
Float Left
  Padding (Same for all) Top 10
Border (UNCHECK same for all for all 3 columns) Right Style solid
Width 1 pixel
Color #ffffff
  1. 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 in Firefox (other browsers will vary):

end of step 6

 

Step 7: Create the Center Column

This column will contain the main content. It has a white background, 10 pixels of text padding, and 1-pixel white borders on the top and bottom. It also needs to float left. We’ll tell Dreamweaver to put it just after the left column.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just after it:
    <div id="left">Content for id "left" Goes Here</div>
    code view
  3. Click on the Design button on the Document tool bar.
  4. In the Insert panel, click on the Insert Div Tag button.
  5. Click on the New CSS Rule button.
  6. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #center
    3. Rule Definition: main.css
  7. In the CSS Rule definition for #center box, use these settings and click OK twice:
Category Subcatategory Setting Value
Background Background color: #ffffff
Box Width 358 pixels
Float Left
  Padding (same for all) Top 10
Border (UNCHECK same for all in all 3 columns) Top Style solid
Width 1 pixel
Color #ffffff
Bottom Style solid
Width 1 pixel
Color #ffffff
  1. 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 in Firefox (other browsers will vary):

end of step 7

 

Step 8: Create the Center Column

This last column could be for secondary navigation or a second sidebar. We’ll tell Dreamweaver to put it just after the center column.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just after it:
    <div id="center">Content for id "center" Goes Here</div>
    code view
  3. Click on the Design button on the Document tool bar.
  4. In the Insert panel, click on the Insert Div Tag button.
  5. Click on the New CSS Rule button.
  6. In the New CSS Rule box, use these settings and click OK:
    1. Selector Type: ID
    2. Selector Name: #right
    3. Rule Definition: main.css
  7. In the CSS Rule definition for #right box, use these settings and click OK twice:
Category Subcategory Setting Value
Background Background color #22ffd8
Box Width 150 pixels
Float Left
  Padding (Same for all) Top 10
Border (UNCHECK same for all for all 3 columns) Left Style solid
Width 1 pixel
Color #ffffff
  1. 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 in Firefox (other browsers will vary):

end of step 8

 

32 replies on “3-Column Web Page Using CSS Layers in Dreamweaver CS4”

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.

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.

This has been a real help, particularly with regard to getting the columns to drop all the way down evenly to the footer.

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!”

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!

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.

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.

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!

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!

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

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!!!!!

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

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.

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!

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

Thank you for this great tutorial.
I didn’t find such a detailed explanation of layout using dreamweaver with css any where else.

Fantastic tutorial! I’ve been struggling with how to use the CSS tools in Dreamweaver and your instruction was the clearest I’ve come across. Thank you!

Well I must say a million thanks to you for this wonderful “in-easier-steps” explanation of css. I have been strugling with great tool for months, until I came across this site. Some articles here worked a great deal for me, and now, I have become a professional web-designer.
Thanks very much for your great tutorials and God bless you!

Well I must say a million thanks to you for this wonderful “in-easier-steps” explanation of css. I’ve been strugling with it for months, until I came across this site. Some articles here worked a great deal for me, and now, I have become a professional web-designer.
Thanks very much for your great tutorials and God bless you!

I’ll recomend this site in many of my posts as a means of showing my appreciation for your effort and time in puting down these tutorials for free.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.