January 2009 Archives

Hi,

In this, the latest post on new features of CS4, I will be talking about the CSS Property Inspector (CSS PI).

With CS4 we continue to improve (hopefully) the CSS editing experience. We continually try to meet the needs of design pros, who know the code and want to be efficient, and those that are learning CSS, and need to understand what they are creating.

The new CSS PI is a good step towards that goal.

First, why the CSS PI? A couple of reasons:

We, and you, have been pained by 'style1,style2' for a few releases now. We knew we had to get rid of that. (For those of you that don't know, those are the names of DW auto-generated classes.)

We wanted to make the distinction between editing the HTML and editing CSS properties. In the old PI, those properties were mashed together (Format wrote HTML, Size wrote CSS).

So now the text PI has 2 buttons on the far left. The HTML button shows the properties that write or change HTML: Link, Class, Format, etc.

The CSS button shows those properties that will change CSS properties: Font, Size, etc.

But in the past, DW would blindly make that change and fester the page with style1, style2. Not only that, it didn't educate the user on what was being created on the code level.

So the PI now prompts for and helps to determine intent. If you set a Size property, DW will open a dialog that prompts for a class name. It assumes a class in this instance, but in the dialog, you have an opportunity to set an ID or contextual selector.

The Size property is added to this newly formed class and that class name shows up in the Targeted Rule field. No more style1. Hopefully, this will help new users learn about classes, IDs, CSS properties and how to properly harness the abilities of CSS.

There are many ways to design features like this and we hope we have struck a good balance between experienced user efficiency and new user education.

And yes, even we panicked a little bit when we looked at the PI and didn't see the Link field. Hopefully the change is workflow is worth it.

Let us know either way.

Thanks,
Don

Dreamweaver Design-time Style Sheets (DTSS) allow you to show or hide design applied by a CSS style sheet as you work in a document in Design View. They only apply while you are working on the document in DW. When the page is displayed in a browser window, only the styles that are actually attached to or embedded in the document appear in a browser. This is handy for working around shortcomings in DW's rendering engine.

DTSS are implemented as "User" style sheets. More info here:
http://www.w3.org/TR/CSS21/cascade.html#cascade

"By default, rules in an author's style sheet override those in a user's style sheet. However, for balance, an '!important' declaration takes precedence over a normal declaration. Both author and user style sheets may contain '!important' declarations, and user '!important' rules override author '!important' rules."
http://www.w3.org/TR/CSS21/cascade.html#important-rules

So, give your DTSS properties the !important modifier to always override what's on your page.

DW CS4 has a new split code view. Use: View > Split Code from the main menu.

You might not have found it because a button was not added to the toolbar with the Code, Split, and Design buttons for the sake of avoiding confusion. The good news is that the markup to add the button was left in the Configuration/Toolbars/toolbars.xml file, but simply "commented out". So, you can "uncomment" the markup if you'd like that button on your toolbar.

By default, Dreamweaver recognizes Internet Explorer Conditional Comments (IECC) in "downlevel" mode just as any non-IE browser would. One problem caused by this is that files referenced in IECCs are not seen by the DW DOM, so the file paths are not fixed when they are moved, and they are not recognized as dependent files. See http://msdn.microsoft.com/en-us/library/ms537512.aspx for more information regarding IECCs.

In DW8 and above, the IECC support "level" can be changed. I wrote an extension for doing this:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1564018

Note that the IECC Support Level affects which markup is seen by the DW DOM, so it affects all related features. So, while it fixes the file path fixing and dependent file problem, it also affects Design View rendering. Live View is not affected.

Happy New Year to all and here's hoping that we work together to make 2009 successful.

Today I am going to continue the discussion on the new features in CS4. Today's topic is Web Widgets.

We introduced Spry widgets in DW CS3 and they were well received. But we noticed many many other widgets out there, some more complicated than others, and wanted a way to let DW users easily get and insert these widgets into their pages.

Web Widgets is a couple of things. First: It is a set of widget extensions from 3rd party developers that can be installed into Dreamweaver, much like Spry widgets. Second: It is the ability to create these widget extensions.

When CS4 was released, we introduced a set of 15-20 Web Widgets from Yahoo, jQuery and Phatfusion. This allows you to install these extension into DW and insert, say, a YUI Calendar directly into a page.

These Web Widgets can be downloaded for free from the Dreamweaver Exchange. There is a new menu option in DW CS4 that takes you right to the Web Widgets Exchange. Check the gear icon to the right of the Help menu. (Note that these widgets are for CS4 and higher.)

The second big part of the Web Widgets world is the Widget Packager. The Packager is an extension that installs into DW. This then consumes a Widget Descriptor File (WDF), which is an XML file that describes all the properties of the widget. The WDF file follows the spec of the Open Ajax Alliance.

When a WDF is run through the packager, DW will create all the files needed to create a new widget object, and then it will wrap it up into an extension (and install it into DW if you wish). This extension can be uploaded to the Exchange and distributed to the world. We tried to make it easy for people to create widget objects for Dreamweaver and share them with the community. You don't have to be a widget developer to make a Web Widget. If you can write XML, you can easily package up an existing widget (following all licence agreements of course).

So we hope that users will see the benefit of a wide range of widgets for DW and take the initiative to create and upload widgets.

The Widget Packager is available for free on Labs here.

Thanks for reading,
Don

The Adobe Exchange has extensions for Dreamweaver and other Adobe products:
http://www.adobe.com/cfusion/exchange/

A few years ago, the number of uploads and downloads of DW extensions on the Exchange slowed to a crawl because the web site was, uh, a bit challenged. OK, it sucked. But the web site has been redesigned, so please give it another look. I currently see 1,408 extensions for DW.

Also, there are many Dreamweaver extensions written by third party developers that do not get uploaded to the Exchange, so be sure to search the web for more. There are too many good developers to list them all here, and I don't want to play favorites :)