HTML Help

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Creating a div layout with Dreamweaver is fairly simple. You must have at least working knowledge of Dreamweaver's Insert bar and creating styles. I will break this down into two parts, layout and css.

1. You should already know how to create a new page and we want a new xhtml transitional page.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

*We will be working in code view unless otherwise stated.

2. Place the cursor after the opening body tag and hit the enter key creating a blank line between the opening and closing body tags. The first div container will be the main container holding all the html elements.
3. There are two ways to insert a div tag, either the main menu Insert button or the Insert bar under the Common tab. I will be using the Insert bar. The Insert Div Tag icon should be about the fifth icon from the left. Click the Insert Div Tag icon and an Insert Div Tag window will open. In the Insert box select At insertion point if it is not already selected. Leave the Class box blank and type container in the ID box. Click OK.
4. Your body section should look like this.
Code: <body>
<div id="container">Content for id "container" Goes Here</div>
</body>
Delete this line Content for id "container" Goes Here so you code will look like this
Code: <body>
<div id="container"></div>
</body>
5. The cursor should be before the container closing tag. Click the Insert Div Tag icon to insert another div. In the Insert Div Tag window make sure At insertion point is selected in the Insert box. In the ID box type header and click OK.
6. If you do not want a horizontal menu you can skip this step. Place the cursor after the header closing tag and hit enter. Using the previous steps create a new div at the insertion point with an ID of nav.
Code: <body>
<div id="container">
<div id="header">Content for id "header" Goes Here</div>
<div id="nav">Content for id "nav" Goes Here</div>
</div>
</body>
7. Place the cursor after the nav closing tag and hit enter. Create a new div with the ID content. Delete the text Content for id "content" Goes Here leaving the cursor before the content closing tag.
8. Insert a new div with the class wrapper.
9. Place the cursor in front of the last div closing tag in the body and hit enter. Use the up arrow key to move the cursor to the empty line. Insert another div at this point with an ID of sidebar.
10. Place the cursor after the sidebar closing tag and hit enter. Creat a div with a class of clearer. The cursor should be after the clearer closing tag, hit enter.
11. Insert a new div with an ID of footer. This should now be your page code.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">
<div id="header">Content for id "header" Goes Here</div>
<div id="nav">Content for id "nav" Goes Here</div>
<div id="content">
<div class="wrapper">Content for class "wrapper" Goes Here
</div>
</div>
<div id="sidebar">Content for id "sidebar" Goes Here</div>
<div class="clearer">Content for class "clearer" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>

And there we have a two column layout using div's. It won't look pretty if viewed in a browser so now we need to make it pretty using css. Standby for Part 2

sticks464 · Joined: 31 Dec 2006 Posts: 2625

Styling with css
1. Select Window and css styles to open the css window or keyboard Shift+F11. With the css window open we will start to add rules for elements as they flow down

the pqag. Let's start with a rule to remove default margin and padding from all elements. The All tab should be selected in the css styles window. At the bottom

of this window select the icon for New css Rule (third from right). A New CSS Rule window will open. Select Tag and in the Selector drop down

box type *, then select This document only. Click OK. A new window will open that says CSS Rule definition for *. On the left side of this

window under the Category list select Box. On the right side under Padding enter the number 0 in the box for Top leaving the box

Same for all checked. Do the same for Margin and click OK. Ensure Pixels is the default size. This should now be entered in the head section

of the page
Code: <style type="text/css">

</style>

2. In the CSS Styles window select New Css rule. In the New CSS Rule window select Tag. In the Tag dropdown box select body an ensure

This document only is selected. Click OK. In the CSS Rule definition window select Type under Category. In the Font dropdown box select a font

family. In the Size box type 100 and select % in the dropdown box to the right. In the Category box select Background. In the Background

color box enter #87ceeb and click OK at the bottom of the window.
Code: <style type="text/css">

</style>

3. Now we can start adding rules for the div's that we have created inside the body. Select New css rule in the CSS Styles window. The Selector Type is

Advanced and in the Selector window type #container (This document only should always be selected), click OK.
In the Category box select Box. In the width box enter a width, I used 768 making sure Pixels is selected in the right side box.

If you want your layout to appear on the left side of the browser window skip this step.
In the Margin selection uncheck the Same for all box. Insert the number 0 for the Top and Bottom boxes and select Auto for the

Left and Right boxes making sure Pixels is also selected. Click OK. The container div will now be centered in the browser window regardless of resolution

or scree size.
Code: <style type="text/css">

</style>

4. Select New css rule in the CSS Styles window. The Selector Type is Advanced and in the Selector window type #header (This document

only should always be selected), click OK. In the Category box select Box. In the height box enter a height, I used 180 making sure

Pixels is selected in the right side box. Click OK.

You should now be able to create css rules without me defining step by step instructions.

5. Define a new css rule for the nav div. Use Advanced, #nav, Category- Background with a Background color of #ffffff, Category-

Box with a height of 26 pixels. Click OK.
Code: #menu {
background: #FFFFFF;
height:26px;
}

6. Now lets create a new rule for the content div. Advanced, #content, [b]Category- Background, Background color #9999cc. [b]Category- Box, width 100%, Float

right, and a margin of Top 0, Right 0. bottom 0 and Left -200px. (we are actuall making room for the sidebar)
Code: #content {
background: #9999cc;
margin: 0px 0px 0px -200px;
float: right;
width: 100%;
}

7. For the wrapper div which has a class. Class, .wrapper. Category- Background, Background color #87ceeb. Category- Box, Padding 10 pixels, and a

margin of Top 0, Right 0. bottom 0 and Left 200px. Category- Positioning, Overflow hidden.
Code: .wrapper {
background: #87ceeb;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px;
}

8. Now we come to the sidebar div. Advanced, #sidebar. Category- Background, Background color #9999cc. Category- Box, width 180 pixels, float left amd 10 pixels of padding.
Code: #sidebar {
background: #99C;
width: 180px;
float: left;
padding: 10px;
}

9. For the clearing div. Class, .clearer. Category- Type, Size -1px. Category- Box, height 1px, clear both.
Code: .clearer {
height: 1px;
font-size: -1px;
clear: both;
}

10. And finally the footer div. Advanced, #footer. Category- Type, Size 50%, weight bold. Category- Block, text align center. Category- Box, padding top and bottom 10px.
Code:
#footer {
text-align: center;
font-size: 50%;
font-weight: bold;
padding: 10px 0;
}

See the full code with moderate differences.

11. Inside the wrapper div replace the text Content for class "wrapper" Goes Here with
Code:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>

12. Repeat step 11 for the sidebar div adding this
Code: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>

lizchris610 · Joined: 21 Feb 2010 Posts: 18

I just read sticks' post with instructions for division layout. Is this like a page break? Does it insert a new page? Thank you for your patience with me!

sticks464 · Joined: 31 Dec 2006 Posts: 2625

This is for a css, fluid, centered, 2 column page layout.