Coronavirus (COVID-19) information: All courses at all locations are available as live online classes. Limited in-person classes in some locations. Our offices remain open. Learn more.


Dreamweaver tutorial: Adding Main and Sidebar content areas in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Adding main and sidebar content areas
  • Setting margins and borders
  • Overriding default margins

This tutorial provides you with a foundation for working with Adobe Dreamweaver content areas. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Adding Main and Sidebar content areas in Dreamweaver

Now you’ll add two more sections to your page: a main column which will feature the latest news from our fictional company Organic Utopia and a sidebar column which features incentives for visitors to become members.

1 Click on the Draw AP Div button (), then place your cursor below the intro box and click and drag down and to the right. As you are drawing the AP Div notice there are width and height values that are updated in the Status Bar on the bottom right of your document window

The width and height of an AP Div are updated in the Status bar as you draw the div.

Make the AP Div roughly 450px wide by 200px high. Don’t try to get the exact dimensions, as it is very difficult to be precise when drawing. You can always fine-tune the width and height in the Property Inspector.

2 Click on the border of the div and in the CSS-P text field rename the div to main. Next, click on the Bg color swatch in the Property Inspector and from the color swatches that appear choose white.

3 Click on the Draw AP Div button again and draw another box to the right of the Main div. Make this one approximately the same height, and the width should be about 250. Again don’t worry about the exact dimensions for now.

4 Click on the border of the new div and in the CSS-P text field, type sidebar to rename the AP Div. Click on the BG color menu and make this background White as well.

You’ll now make sure the top edges of the two boxes are lined up.

5 Click on the handle on the top-left of the main div and reposition it to the following left and top values: L (Left) should be 35 and T (Top) should be 260.

Setting the Left and Top values of an AP Div.

6 Click on the top-left edge of the sidebar div and type 260 for the Top value. You can use the left and right arrows on your keyboard to nudge the div horizontally. We ended up with a Left value of 490.

With the top values the same for both boxes, the top edges line up. Once the boxes are lined up, you can always move them as a unit by selecting and dragging or nudging them.

7 Click on the edge of the main div to select it and then Shift+click the sidebar. With both boxes selected, press your up arrow keys to move both boxes upwards. There is no right value here, use your judgment and push the two boxes closer to the intro text.

These tutorials are created by and the team of expert instructors at American Graphics Institute.