QuickStart! - Adobe Dreamweaver CS3 Course

 00:00:01,001 --> 00:00:07,000Hello and welcome to this quick review of Adobe Dreamweaver CS3. 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 8. 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 has been upgraded in terms of its 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 Features link here and that will 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 pop-up 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. For example, here's 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. It will fade away. These are using Spry widgets, which are pre-built common user interface components that you can customize using CSS. I can customize, for example, my menu here. Using the Property Inspector, click on the widget there. I 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. 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 will 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 that as I roll over these menu elements, they change from the 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 have 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 would simply open up the behaviors window, double click on my behavior and that will bring up the highlight dialog, where 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 okay 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 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 adding it to the HTML element.