DW NEWBIE: What your WYSIWIG is doing
Okay. So my buddy Janelle at Sapling Design Studio is learning how to build websites. She’s an amazing print designer. She will be an amazing web designer if she is patient.
We’re learning about absolute positioning now. And I made her a bunch of screen shots to show her how the “draw Layer” tool works on our admittedly old but still-Macromedia-and-not-Death-Star-Adobe-Version copy of DreamWeaver. It’s a great way to understand how DW writes CSS and what you’re actually doing when you move things. It doesnt matter if you have a new copy of DW, code is code. Learn the -code- Do not be held hostage by software. Beat it into submission. Then you too can point and laugh at people who use DW in design view.
So I will share, for other lost souls wrestling with a WYSIWIG, what the #$%$ thing is actually doing.
The context here was that she was trying to place an image. I told her to make a new div and then place her image within it. She didn’t quite get there…
(and yes I know she should add this to the unordered list and position it and use image replacement, but bear with me. She needs to learn to position first.)

Draw the layer, it will grow handles when you are done. Doesn't matter where you put it. This is absolute positioning.

Give your layer a unique name in the properties inspector. This is the name that comes after the # sign in css.

Now open split screen with the layer still selected in design view. Notice your layer is a div. Notice the css in the header of the html.

Place the button where you want it in design view. Your div in code view will stay in the same place.
Hopefully now you have a basic understanding of how Dreamweaver uses the design view to write your css, which is really what you need to make a web layout. Since you’re going to learn the code, eventually you will just write the css yourself, but sometimes it will still be faster to use design view and it’s good if you do, to understand how it works so you know how to fix things when something goes awry.
cheers.









