Tips, web design book reviews, resources and observations for teaching and learning web development.
Some of my most popular posts on eHow:
In Dreamweaver CS4, there’s a new item called Application Bar. It behaves differently in Windows and Mac. This is what it looks like on a Mac.
It’s placed across the top. It contains a workspace switcher, menus (Windows only), and other application controls. On the Mac you can show or hide it using the Window menu. Other Creative Suite CS4 tools also contain an Application Bar now.
Starting from the left, here’s what the icons represent. On the far left, of course, you see the Dreamweaver logo telling you which app you are using. The pull down menu next to that allows layout choices. You can select from Code, Split Code, Design, or Code and Design. The circular gear icon is Extend Dreamweaver. That pull down menu allows access to the Extension Manager or you can Browse for Web Widgets or Browse for more extensions. The icon that looks vaguely like a wireframe site diagram is the Site icon, where you can define a new site or manage sites.
Where you see the word Classic in the Application Bar image at the start of the post, there is a pull down menu to choose a workspace configuration. There are several new choices in CS4. The default workspace is called Designer. In the Designer workspace, the Insert menu is in a panel that takes up a great deal of screen space when compared with the more compact “classic” Insert bar arrangement. The full menu choice for workspace configurations is shown in the image. You can create the optimal workspace for your setup using the “New Workspace” option. Once you define it, you can set it as your default.
Not being a Windows user, I can’t tell you what the Menus option of the Application Bar offers.
It’s unusual for Adobe to create versions that differ significantly from Windows to Mac, so I’d like to know what I’m missing and how important it is. Maybe one of you out there in readerland can supply some information.
Related Posts: The Best New Features in Dreamweaver CS4
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:
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.
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 in a span tag in the code that will trigger the tooltip. A div containing the tooltip contents (hidden by the CSS until needed) is also added to the page. In Design view, you see a blue box with the Spry Tooltip label where you type the content that you want to appear in the tooltip. Note that the box for the tooltip contents would normally appear at the very bottom of the page, which you might have to scroll to find. It’s near the example sentence here because that’s the entire content of the example page.
Save the page. Dreamweaver will notify you that there are two dependent files needed. Click OK and the files will be added to a folder called SpryAssets at the site root level. You can set some properties for the tooltip using the Property inspector. Click on the blue tooltip label to see the tooltip Property inspector. For example, you can set horizontal offset and mouse behavior in the Property inpector, get rid of the generic ID name or add effects. If you look at Code view, you’ll see a JavaScript operator that Dreamweaver inserts at the end of the page. This is in addition to the JavaScript file that is saved to the SpryAssets folder.
You’ll see a new CSS file in your CSS panel called SpryTooltip.css. Use this stylesheet to set colors and background color and other properties related to the appearance of the tooltip. The SpryTooltip.js file is also in the SpryAssets folder and can be modified.
There are other new Spry widgets in CS4, including several very handy ones for forms. Among the new Spry tools for forms is a password validation and password confirmation widgets, a radio button group widget, and a checkbox group widget.
This item should probably be first, because it’s really cool. Notice the two new View buttons near the old faithful Code, Split and Design buttons? The Live View button lets you render the page right in Dreamweaver (using a webkit browser) that works like, well, a live view in a browser. Except it’s in Dreamweaver. Scripts run, Flash runs, links work, onMouseOver works. It’s live and it’s a big time saver. Of course, you can still preview in a variety of browsers in the same way as always.
Live Code lets you open any page of code that might be connected to a page in Dreamweaver, edit and save, and see the page change as you work.
Another change to note that you see in the preceeding image is that now all dependent files are listed across the top of document window and can be acted on in the document window merely by selecting them. In the image Source Code (the HTML page) is selected, but clicking on SpryTooltip.js or SpryTooltip.css would open them right there without having to find them in the Files panel.
In Design view, you choose View > Code Navigator to see this new tool. In Code view, you see a little icon that looks like s ship’s wheel. 
Code Navigator connects you to all the code linked to a page, you can pull it up in a Dreamweaver window and edit it right there.
In Design view, it looks like this:
All the listed files are linked and clickable. It’s contextual. Click in the appropriate spot and you can see JavaScript links. In addition, if you hover over a CSS rule, but don’t click, you see all the properties for that selector. You can see code related to all of the following using Code Navigator:
A set of buttons that allow you to toggle between HTML properties and CSS properties in the Dreamweaver CS4 Properties panel is a great new feature. When an element in the document window is selected, or when a tag is selected from the Tag selector, you can choose which properties you want to view for the element. To see the HTML properties, click the button on the Property inspector that says HTML.
To see the CSS properties for the same element, click the button for CSS. You can edit the rule using the edit button, if needed, or you can create a new rule if none exists.
It takes a bit of getting used to at first to remember to toggle between HTML and CSS depending on what you’re doing, but it is a great convenience.
In Dreamweaver CS4 there are new ways to view both code and design or just code.
To view Code and Design, you can click the Split button that has been in use in Dreamweaver for several versions. But now, you can choose View > Split Vertically and see Code and Design side by side.
As always, a change in one view is instantly changed in the other. When you make a change in the Code, you still have to click in the Design window to see the change take effect.
When viewing just the Code, you can also choose View > Split View or View > Split Vertically.
You can copy and paste from one window to another. Anything you change in one window is also immediately changed in the other. When you combine this with some of the other Code View tools, such as Collapse, it will make moving things or copying things in the code easier to do.
If you add a new element to a page and want to create a CSS rule for it, click the CSS button in the Property inspector. Or, choose ‘New CSS Rule’ from the Targeted Rule menu and click on the Edit Rule button.
The New CSS Rule dialog is quite different. The menu and description of Selector Type is much more accurate now. The “Advanced Selector” type is gone. The choices now include tag, class, id, and compound selector. Dreamweaver now uses the term ‘contextual selector’ to describe what they mean by Compound Selector. Dreamweaver still suggests a selector based on the selection in the document. It also offers you a detailed description of the specificity of that selector and allows you to either make the selector Less Specific or More Specific. You can also pick the location where the new rule will be saved.
There are other changes, not all big, but some nice refinements. If you get CS4 and start working you’ll notice and appreciate them, but they are not so significant as the ones I’ve described.
Technorati Tags: Dreamweaver CS4
Cross-posted at BlogHer.
★★★★ Mastering CSS with Dreamweaver CS3 by Stephanie Sullivan and Greg Rewis (New Riders, 2008) is an excellent book, which I recommend and would be happy to teach with myself. I’m giving it four stars because it’s Dreamweaver specific, even though you could learn a great deal about CSS from this book if you’d never seen Dreamweaver in your life.
Before I get into the details about the book, I want to give you a bit of background disclaimer. I’ve been aware of co-author Stephanie Sullivan for a number of years. She participated in her early days as a web designer in some of the same lists that I do, and she was so eager to learn it was something to watch—she sucked up new information like it was manna from the gods. Back in those days she wouldn’t let anybody know what she looked like. She wanted to build a reputation based on skill. She certainly succeeded in that endeavor, and now here she is on the cover of this book, as gorgeous as a movie star, teaching others how to used Dreamweaver according the best practices in CSS.
If you are familiar with the Classroom in a Book series from Adobe, this book is rather like that. It takes you through a number of different processes in Dreamweaver in a step by step way. But it’s also more than a Classroom in a Book text. The difference is the amount of space devoted to explaining things like CSS syntax, the cascade, specificity, document flow, source order, bugs, best practices on all sorts of topics, typography, measurement and a number of CSS related topics. That’s in addition to the step by step process for applying the information in Dreamweaver CS3. Another difference is that this is not a Dreamweaver beginner book; you need to have a basic knowledge of the software already.
One chapter in the book styles a fixed-width Dreamweaver CSS layout. Another does the same with an em-based layout. There’s a chapter showing you how to take an older, table-based site and put it in CSS. One chapter uses the Adobe Spry Framework for Ajax to build an image gallery.
Standards, best practices, validation and accessibility are stressed in every chapter. That always earns stars from me.
Summary: An excellent resource
It’s that time of year when taking kids to the zoo or the swimming pool seems like the most important thing on my schedule. Makes it harder to keep up with blogging, but I did get some eHow articles written.
Last year at this time I was getting ready to go to Greece. My favorite part of the trip was the stay on the island Naxos, where this rock formation tantalizes a few yards away from the shore near Naxos Town.
Here’s how I spent April this year, at least the eHow writing for April.
Welcome to Spring, and to that indescribable and delicious time of year known as SXSW Interactive. Here’s what I was thinking about during March at eHow.