Step 1: Under the "Site" menu choose New Site... After the site is set up... export the site for later use (.ste file)
Step 2: Using Dreamweaver create a new html document
Step 3: Select Insert>Layout Options> Div Tag
Step 4: Name ID: "wrapper" and click the New CSS Style button
Step 5: Name and save the .css file for the wrapper: div_exercise.css
Step 6: Under the CSS Rule Definition select: Box
Step 7: Set the size of the "wrapper". In order to keep this exercise simple use whole numbers. Example: Width = 800 pixels Height = 400 pixels.
Step 8: Click the Background category and set the "background color"
Step 9: Click the Box category: set the padding to 10 same for all
Step 10: In order to center the design in a browser window...
Set the Margin: Right (Auto) and Left (Auto)
Step 11: Apply
Step 12: Click the "Split" icon to show code and design view
Step 13: Using your insertion / type tool: put your cursor directly after the word Here:
<div id="wrapper">Content for id "wrapper" Goes Here</div>
Step 14: Select Insert>Layout Options> Div Tag.
Step 15: Name the ID: "header" and click New CSS Style button
Step 16: Notice that the same .css file is being used and click OK
Step 17: Set the background color (to a different color)... margins, and padding in the same manner as step 6, 7, 8, 9
Step 18: In order to create a "Content" area...
Using your insertion / type tool...
put your cursor directly after the end of the header's ending div tag:
<div id="header">Content for id "header" Goes Here</div>Cursor goes here
Step 19: Select Insert>Layout Options> Div Tag
Step 20: Name ID: "content" and click the New CSS Style button
Step 21: Set the background color (to a different color)... margins, and padding in the same manner as step 6, 7, 8, 9
Step 22: Under the CSS Styles Panel: Click "ALL"... Toggle on the "triangle/arrow"... Notice the #wrapper, #header and #content CSS
Step 23: Click on the individual names and access specific tags. Experiment with color, size, borders and type.