So up to this point we have been working in Dreamweaver's code view to manage our HTML and CSS even though there are a few things Dreamweaver could have done to make it easier for us. The reason we went through the code first is because if something goes wrong, you need to be able to go back into your code to debug any issues.

What we will most often do is work in Dreamweaver's split screen mode, use some functionality offered by Dreamweaver when we can, and when it will be more efficient we can write the code ourselves. So let's take a look at some of the things Dreamweaver can do for us. This may vary depending on your version of Dreamweaver:

• Create Div's for layout
  By going to Insert>Layout>Div Tag, you are able to drop in a new div tag to your page. This includes the option to add it before, inside, or after specific tags and other divs which is pretty nice. It includes some text to let you know where the div is at. This is one Dreamweaver feature I personally don't use, I feel that it would be quicker to code the <div></div> tags by hand and can see that this could potentially lead to a mashup of unintended div tags all over the place. Note that this is different than the AP Div, which will create an auto-positioned div which we will talk about later.
• Create a new stylesheet
  By simply going to File>New Then clicking CSS and Create, we can be setup with a new CSS file.
• Attach stylesheets to your HTML document
  The CSS file does us no good if we don't attach it to our HTML file. In your CSS Styles pane, click on the Attach Stylesheet button (bottom right, looks like a chain link) and then browse for the CSS file and select Link as the "Add as" option.
• Manage your stylesheet
  Now that your stylesheet is attached to your document, you can add and manage styles using the same CSS Styles pane. Clicking the "New CSS Rule" button (Looks like a document with a + symbol) will let you add a new style for a class, id, or HTML tag. Under the option for Rule Definition, make sure to select your CSS file if it isn't already selected. The window that opens next lets you modify most common CSS options for that element (Some more advanced CSS properties like "min-height" or using "!important" still need to be managed in the code directly). To open this up again for an existing style simple doubleclick the style name in the CSS pane or select it and use the edit icon (pencil).