- Share This Post
- submit
- 2
-
Sparkle (0)
Today Adobe announces its new Creative Suite CS4, which includes web tools Dreamweaver, Photoshop, and Flash and several more. It's available from the Adobe Store.
For the past few months I've been working with Adobe and Peachpit Press on the upcoming version of Dreamweaver CS4 Classroom in a Book. I've helped Adobe update the book by writing some lessons and revising others. I've spent all that time working with the beta versions of Dreamweaver CS4. But today is the end of the beta. Today Adobe is making as much splash as possible about its new software.
You may have been trying out the beta version yourself. Feel free to chime in with your favorite features, too. Here are what I consider the best new features in the Dreamweaver part of CS4.
Features discussed:
- Photoshop SmartObjects
- New Spry Widgets
- Live view and Live code
- Code Navigator
- HTML and CSS buttons in the Properties panel
- Vertical and Horizontal Split Views
- The CSS Interface
Photoshop SmartObjects
One of my favorite features in Dreamweaver CS4 is Photoshop SmartObjects. The SmartObject is connected to a Photoshop PSD file that can be used and modified on various pages as a web image. SmartObjects from a single PSD file can be used in multiple instances in a web site. Each instance can be modified and still remain connected to the originial PSD image.
Here's a bit about how it works. Start with a page that has been saved. Select Insert > Image or drag and drop a PSD file onto the page. The Image Preview Dialog will appear. Here you can select the file format you want, crop, set quality and make other image optimization choices.
The image appears on the Dreamweaver page with a SmartObject badge in the upper left corner. The badge will notify you that the image is in sync with the original Photoshop image, or out of sync.
The image above shows a badge indicating "in sync".
The image above show an image "out of Sync." When the image is out of sync, it means that the image has been modified, either in Dreamweaver or in Photoshop. Perhaps you scaled the image in Dreamweaver to be smaller than the original Photoshop object.
You have several choices in Dreamweaver when your image is out of sync. You can see them by right-clicking (Ctrl-Click on Mac) on the image to see the menu.
If you select "Update from Original" the web image will be re-rendered in the selected size and optimized for that placement. You can select "Reset Size to Original" and the image will return to its original size.
If you modify the image in Photoshop, the changes are made automatically in Dreamweaver when you save in Photoshop. When a SmartObject has been modified in Photoshop, you see a red arrow at the bottom of the web image in Dreamweaver. If you choose "Update from Original" now, the image contents will update, but NOT the size being used in a particular instance of the SmartObject. So, for example, if you are using a single PSD image in a thumbnail, a sidebar graphic, and a footer graphic, each will retain its size settings while updating its contents.
You can also work on SmartObjects by accessing them in the Assets panel. Using this method, you can choose "Update from Original" when an image was changed in Photoshop and all the SmartObjects will be updated at once, rather than going through the Dreamweaver pages where the SmartObjects were placed one by one.
When SmartObjects are used in Templates, updating the template's dependent pages will update the images.
New Spry Widgets
There are several new Spry widgets. The Spry Tooltip widget is similar to a title attribute in a tag, except this tooltip has a style sheet and a JavaScript file that you can customize attached to it. Create the text in Dreamweaver where you want to add the tooltip. In the following example, I highlighted the acronym STEM. In the Spry category of the Insert bar, select the Spry Tooltip icon. In the classic workspace layout of the Insert bar, it's the last Spry icon on the right. (Dreamweaver CS4 now has other Workspace choices for the Insert bar, but they take up a lot more space on the page than the classic horizontal Insert bar display. If you use a big monitor or two monitors, you may like the newer Workspace arrangements.)
The term gets wrapped
