first of all (if you can get past the mind numbing soundtrack)
all he has done is made an APdiv not an apdiv, yet it's still being "called" #apdiv1,
for those that cant be bothered to watch the video this is his process
1. insert > layout objects > AP div
2. open the properties panel change the width to 950 height to 500
3. open the css styles panel (window > css styles) and view the properties for #apdiv1
4. change position absolute to position relative
5. add new property margin with value auto
6. then go to the pages properties panel and change bg colour of the page
7. then using the properties panel again change the bg colour of apdiv#1
8. save
9. preview in browser.
this being the result.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#apDiv1 {
position: relative;
width: 950px;
height: 500px;
z-index: 1;
margin: auto;
background-color: #FFFFFF;
}
body { background-color: #000; }
</style>
</head>
<body>
<div id="apDiv1"></div>
</body>
</html>
I'm going to ignore the fact that apdivs are added to the <head> of the document and fantasise for one minute that it's automagically added it to a separate css document. in which case it hasn't strayed too far off the mark however a few things DW has "done" which I wouldn't.
1. our newly created "box" is called a non-semantic nothing name (apdiv1) I know this may seem pedantic but by following this approach pretty soon you'll have style names apdiv46, apdiv172, etc etc.
2. because of the order of operations we now have the body after the apdiv in the css. again you might see this as pedantic, but css (cascading style sheets) are a lot easier to maintain running in the order of the cascade, and your stylesheet is going to run in the order you create the boxes, so in theory you might have a apdiv which is a parent container and it's child is found a further 25 selectors away. that is simply NOT maintainable....
3. z-index has been left in our css even though we don't need it, by applying position:relative; you are in essence "activating" the z-index, which means further apdivs created can have odd and unforseen overlapping effects, particularly if the z-index is increased on any of the apdivs.
4. by adding a height value the apbox may "appear" correct on the screen but the content will simply overflow out of it once it reaches the height value.
so that's 4 things (for the addition of just one div) that he does that I wouldn't do.
if using that technique you then added (in this order) a box for the header, a box for the navigation, a box for the content of the body, then a box for the logo (which is an image) IN the header box, then a footer, then 5 menu items in the nav this is what the resultant html would look like. (for brevity i'll keep it to just the <body>.
HTML:
<body>
<div id="apDiv1">
<div id="apDiv2">
<div id="apDiv5">
<img src="#" alt="image"/>
</div>
</div>
<div id="apDiv3">
<div id="apDiv7">
</div>
<div id="apDiv8">
</div>
<div id="apDiv9">
</div>
<div id="apDiv10">
</div>
<div id="apDiv11">
</div>
</div>
<div id="apDiv4"></div>
<div id="apDiv6"></div>
</div>
</body>
now tell me which one is the 2nd navigation item?
(apDiv8)
so... assuming you had a blank html page and a blank css page (linked) both open in DW here's how you would do the same thing (but in the code instead)
1. open the html file, click "code view"
and find where is says
<body>
</body>
(there will be about 8 lines so it'll not be hard to spot)
2. insert a new line type in the body.
HTML:
<body>
<div id="wrapper"></div>
</body>
2. open the css file.
type the following
Code:
body {
background-color:black;
}
#wrapper {
background-color:white;
width:950px;
margin:0 auto;
}
if you intend on having floated content within the wrapper I'd also add
overflow:hidden to it so it clears the floats. I wouldn't add a height as that would result in overflowing text/images/elements once it reaches the max height set.
3. file > save all
4. preview in browser
Now expanding the previous example i'll add to my html a header, a nav, a content section, a logo, a footer and 5 navigational items.
HTML:
<body>
<div id="wrapper">
<header>
<img class="logo" src="#" alt="image" />
</header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<div id="content"></div>
<footer></footer>
</body>
now can you guess which is the second nav item in this one?
(the 2nd <li>)
mind you neither navigation item had the link in it so it made it a bit more difficult, but can you see the difference? thats with 11 items. imagine what DW would "do" for you if you made a complete website in that fashion (and yes we haven't even touched on the fact that the styles are not automatically added to a separate sheet but in the <head>)