At the recent Adobe MAX conference in San Francisco, I had the pleasure to show off Dreamweaver CS4 and it’s improved support for Ajax in the Day 2 keynote. In addition to continued support of the Spry Framework for Ajax, Dreamweaver CS4 also now provides the ability to add jQuery, YUI and MooTools web widgets to your pages. This ability, combined with the new Live Preview and Live Code features, means that you can see and style these widgets without needing to run to the browser. In fact, due to these enhancements, lots of folks who had even “given up” on Dreamweaver in favor of hand-coding are taking another look.

If you’re already using Dreamweaver CS4 and you’ve not yet visited the Dreamweaver Exchange to download any of the widgets already available, I’d encourage you to do so. You can even head over to the exchange directly from within Dreamweaver by clicking upon the “gear” icon in the Application bar and choosing “Get More Web Widgets”. By working with the OAA (Open Ajax Alliance), we’ve made it easy for developers to package any widget which conforms to the widget specification. You can read more about all of this by checking out the Dreamweaver Widget Packager on Adobe Labs.

Among the 20 initial widgets available, one of my favorites is the phatfusion “Image Menu”. This menu uses images that slide open to expose more of the selected image, which a potential visitor could then click to head off to that section of the site.

When I saw this for the first time, I was really amazed – the only problem being that I don’t use the MooTools framework very often. Instead, I spend my time with either Spry or jQuery.

So, I decided to build the same basic functionality (in a vertical orientation) using the jQuery accordion widget – which is also what I showed during the keynote at MAX. (If you’d like to try this yourself, you’ll first need to head over to the exchange and grab the jQuery Accordion widget. And if you need the files, you can download the finished version.)
(more…)

Just wanted to announce that the new version of “Mastering CSS with Dreamweaver CS4” has been released and is available in your local bookstores, as well as online. And this is not just a simple update to change screenshots. Due to the fact that Dreamweaver CS4 is so radically different from previous versions and the fact that several of these new features mean that the our web workflow actually changes (for the better), Stephanie Sullivan and I have gone over the book page-by-page. In addition to a new chapter that covers just what is new in Dreamweaver CS4, we have completely rewritten over 60% of the book. We’ve also responded to reader’s requests and enhanced the supporting files, providing incremental files, so that you can easily pick up at any point – or compare your version to ours as you work through the exercises.

Happy coding!

As one of the “experts” on Dreamweaver in the world (at least according to all of you), I always get a kick out of discovering something new in my favorite program. And, since it just happened, I thought I’d share…

Back in CS3 we implemented copy/paste between Dreamweaver and Photoshop, allowing Dreamweaver to then optimize and save the image before placing it on the Dreamweaver page. With CS4, we updated the workflow to allow you to drag-and-drop a PSD directly into Dreamweaver with the same optimization/save process happening.

However, in seminars, I have always pointed out that if you want to use a piece of the PSD as a background image, you needed to do the copy/paste procedure. Then delete the image from the page, create a CSS rule and link to the newly created image as a background image.

Well, here’s the newly discovered enhancement: there’s no need to do the copy/paste/delete! The next time you’re thinking that you need a CSS background image for an element, simply choose to edit the rule (or create a new one if necessary) using the CSS dialog box in Dreamweaver CS4. Select the Background category and click the Browse button to locate the PSD file you’re interested in. Once you click OK to choose the PSD, you should see the optimization window open within Dreamweaver. You can then use the Crop tool (located at the bottom of the window) to isolate the area you wish to use as the background image. Set your optimization format and amount and click OK. Dreamweaver will prompt you to save the file in your site, and then return you to the CSS dialog with the image field filled out so that you can set additional properties (such as repeat, positioning, etc).

The only caveat to this procedure is that your PSD file needs to have been saved in a “useable” state. In other words, if you need to turn on/off a layer or layer group in order to get the “right” image, then this technique won’t work.

Hope this helps… Cheers!