Click on any phrase to play the video from that point.
Hi -- I'm Scott Fegette-- Product Manager for Dreamweaver. I'd like to show you Dreamweaver CS5's new CSS Inspect Mode today. Now--Box Model in CSS has always vexed designers-- particularly in a way to work with it visually. One thing we did add in Dreamweaver CS4 was the ability to go into Live View. Normally you have Design View, which is the editable mode of Dreamweaver. But when you turn on Live View, you get a WebKit-rendered version of it. This is a lot closer to what you're generally going to see in a browser. You, of course, do the things you're used to in Dreamweaver. Click on these various areas and get your selection to where you can work with it in CSS Styles panel. But working this way left a little bit to be desired visually, particularly when working with the CSS Box Model. So, let's just take a look at how this works. I'm going to turn on Inspect Mode--click the button right here and now--see, a few things happen. As I hover over elements in the page, I get a lot more richer information about the Box Model. In this case, the blue overlay of this is the box itself. Around that, we've got the purple padding shown and then, for example, if I come down to a more complex section here and click-- you can see we've got purple padding. On the top and the bottom, we've actually got a colored border at the very top and bottom that give it that nice effect around the heading. And then there is, of course, the yellow margin around the outer edge of it. So we can really quickly see how these CSS properties are hanging together to make our design. We can also see there's a problem here. Down below, this paragraph isn't quite lined up like the rest. It looks like it's off-set a little bit, so let's just turn on Inspect mode again and click on this paragraph and we can already see--you bet--that padding there on the left is a little bit out of control. And when I come over here--I can just change that to 15 pixels padding and everything looks a lot more in line. So this is obviously a simple example, but you can see how--very quickly--Inspect Mode will really help you jump into all areas of your design-- in this case, even CSS drop-downs, complex layouts, and the like. If you're used to jumping over to a browser to do this--now CS5 makes it a lot easier for you just to stay in Dreamweaver and get more of your work done. So I hope you enjoyed this little peek into Dreamweaver and be sure and check back for the rest of little sneak peeks that I'm going to be posting up for CS5. Thanks.
