Subtitles of the Movie

As you would expect from a major software release from Adobe, Dreamweaver CS3 has been substantially upgraded from the previous version of Dreamweaver, Dreamweaver version eight. If you visit the Dreamweaver page on the Adobe website there's a section there called, What's New. Scroll down to that section and you'll get a nice concise list of new features and reasons to upgrade to Dreamweaver CS3, including Spry Framework for Ajax, Spry Data Widgets and Effects. Dreamweaver's been upgraded in terms of it's integration capabilities with both Photoshop and Fireworks. There's a new browser compatibility check feature, a new CSS advisor website, more and better CSS layouts and improved CSS management. To learn more details click on the learn about new feature link here and that'll take you to another page with some more details of these new features. So let me spend some time in this movie reviewing the more important of these new features in Dreamweaver CS3. Perhaps the most important upgrade is Spry Framework for Ajax. This is a Javascript library that lets you quickly build dynamic user interfaces. I have an example of one of these interfaces here in my Dreamweaver document. If we preview this in a browser you can see that this is a completely animated series of popup menus. You use HTML, CSS and a minimal amount of Javascript to incorporate XML data into your HTML documents when using the Spry Framework. You can create widgets such as accordion menus or menu bars as I have here. You can also add different kinds of effects to various page elements. An example here is a wiggle effect. Here's a color effect. I've also got an element here on the page that will disappear when I click on it or fade away. I can customize for example my menu here using the property inspector. Click on the widget there and notice that I have complete control over how many menu items I have and submenus. You can even control the styling of these widgets using CSS. For example the menu that I have has a specific CSS call here that Dreamweaver added to my page. Actually it added it to my site when I added the widget onto the page. And I have here a background color that I can change. Let's go ahead and change the background color of the UI menu bar horizontal. That'll be the hover color from that green to red. So if I preview this now in the browser with that change, go ahead and save my changes. Notice as I roll over these menu elements they change from the green, dark green, blue to the red color. So it's very easy using CSS styles to change all aspects of the appearance of each of these spry widgets. Spry effects can also be customized. These are applied from the behaviors window. And in this case I've applied spry effect behaviors to each of my layers on this document. This layer here had the highlight spry effect applied to it. To change this I'd simply open up the behaviors window, double click on my behavior and that'll bring up the highlight dialog or I can change the effect duration. Let's change that from one-second to two-seconds. Let's change the end color from red to a dark blue. click OK. And now let's go ahead and preview this change in my browser. Save the changes. Bring up my browser here. And when I click on the Flash articles layer, it now changes to that dark blue color and also it duration has been changed from one-second to two-seconds. So adding and modifying these spry effects is as simple as just opening up the behaviors window and added it to the HTML element. Let me now move onto the next movie and cover some more features that are new with Dreamweaver CS3.