So, Adobe has finally released details of Creative Suite 5, and you’ll be able to get your hands on it at the end of this month. As the author of a forthcoming book on Dreamweaver (Adobe Dreamweaver CS5 with PHP: Training from the Source), I’ve had the opportunity to explore the new features of Dreamweaver CS5 for some time. Here are my thoughts.
When CS4 was released 18 months ago, I described it as the “most significant release of Dreamweaver since Dreamweaver MX ”. To my mind, Dreamweaver CS5 just blows CS4 out of the water. Before I explain why, let me address the negatives. At least three groups of people are going to be disappointed by this new release:
- Early adopters of HTML5 and CSS3—support is close to zero.
- Developers of dynamic sites hoping for new server behaviors—there aren’t any.
- Former users of GoLive—Dreamweaver CS5 hasn’t incorporated any features from GL.
With the debate that has been raging over Apple’s decision to ban Flash from the iPad and iPhone in the name of HTML5 and “web standards”, many will be stunned to learn that the only concession to HTML5 in Dreamweaver CS5 is the option to use an HTML5 DOCTYPE. There’s also no support for CSS3. Has Adobe missed the boat on this? In publicity terms, maybe. In reality, I don’t think so.
HTML5 and CSS3 are still evolving. The current web standards are still HTML 4.01, XHTML 1.0, and CSS2.1. Moreover, Dreamweaver is extensible. Rick Curran has already created an extension for CSS3 code hints. You can also add HTML5 tags to Dreamweaver through the Tag Library. No doubt someone will come up with an extension for that, too. In my view, it would have been a mistake for Adobe to release a half-baked implementation of incomplete standards that are still not supported on all browsers in widespread use.
The other decision that’s likely to cause controversy is the lack of new server behaviors. In fact, some have been removed: CS5 has continued the process of weeding out support for less popular (at least among Dreamweaver users) server-side technologies. JSP and ASP.NET were dropped in CS4. Now, ASP JavaScript has gone, too, although ASP VBScript still survives. There are a few minor security improvements and bug fixes to the PHP server behaviors, but nothing new.
The basic design of the server behaviors is now eight years old, so many people had been asking for new, improved ones, particularly after the decision to drop Adobe Dreamweaver Developer Toolbox (ADDT) last year. Few people realized the significance of that move. This is only my personal opinion, but I think Adobe was sending a clear signal that it’s not in the business of creating server behaviors to automate the generation of server-side code. It’s leaving that market to extension developers like WebAssist, CartWeaver, DMXZone, and others.
So, what is it about Dreamweaver CS5 that I like so much? Lots!
One of the biggest improvements is that Live View now works like a browser. “What’s new about that?” you might think. The difference is that in CS5, the links work. Hold down Ctrl/Cmd while clicking a link, and the target page loads into the Dreamweaver Document window—even if it’s a live page on the internet (assuming, of course, that you’re connected). The Related Files toolbar gives you direct access to the code of all pages linked to the new page. If the target page is on a remote site, the code is read-only; but on a local site, you can edit the code, and press F5 to see the results in Live View. If you want to keep the changes, there’s a new option on the File menu to Save All Related Files.
If you’re still wondering why this is an improvement, just try it with a content management system (CMS) like WordPress, Drupal, or Joomla! As long as you have set up a testing server, you can now view a CMS in Live View. Not only that, Dreamweaver CS5 lets you interact directly with a database. You can test online forms in Live View, inserting database records, updating, and deleting them. Dreamweaver CS5 eliminates the need to make constant round trips to a browser for testing, because the browser is right there in the Document window.
Of course, you still need to test pages in a variety of browsers, but you can launch BrowserLab directly from Dreamweaver to test your pages in Adobe’s online service. Up to now, BrowserLab has been free, but it’s being turned into a paid-for service. Your purchase of Dreamweaver CS5 or one of the suites gives you continued free access to BrowserLab and InContext Editing for another year. [Update] Adobe announced today that development of InContext Editing is being terminated. You will be able to maintain existing sites, but the service will cease to exist as a standalone service in 2011. For more details, see the InContext Editing FAQ.
The related files feature now searches for dynamically related files, in addition to those directly linked to the current page. This gives users of WordPress and other CMSs access to the style sheets, which you can edit in Split view or through the CSS Styles panel, seeing the results immediately right inside Dreamweaver. You can even navigate to inside pages of a CMS to style them. And to make it easier to work with CSS, Live View has a CSS Inspect button that highlights block-level elements, padding, and margins in the same way as Firebug—all within the Document window. Another Firebug-like feature is the ability to disable a style rule temporarily by clicking next to the property name in the CSS Styles panel.
As a PHP developer, it’s the changes in Code view that really excite me. When you start typing a PHP script in Dreamweaver CS5, you’ll immediately notice a red marker in the line numbers column and an alert about a syntax error.
Complete the line without errors, and the marker and warning disappear. Dreamweaver constantly checks your syntax on the fly. It doesn’t tell you what the errors are, but it highlights all lines with errors, making the debugging process much quicker. PHP code hints have also been improved dramatically. There’s full support for all core functions, constants, and classes (as of PHP 5.2).
Code hinting is also much smarter. Instead of needing to search through code hints alphabetically, Dreamweaver CS5 searches for substrings. This is helpful when you can’t remember the exact name of function or class—just type the part of the name that you remember, and Dreamweaver includes it in the list. You can also work out your own shortcuts. For example, if you press Ctrl+spacebar and type gesi, the code hints take you straight to getimagesize() by recognizing the ge of “image” and the si of “size”. And in case you don’t know how a function or class works, the official manual page—complete with code examples—appears as a tooltip at the bottom of the selected code hint.
Incidentally, the smart nature of code hints also applies to style sheets. If, like me, you constantly pick widows instead of width, just type dt—it takes you straight to width.
For serious PHP developers, it gets even better. Dreamweaver CS5 is capable of code introspection, so it builds code hints on the fly for your own functions and classes, as well as for third-party libraries, such as the Zend Framework.
The definition files don’t even need to be directly attached to the page you’re working in. With Site-Specific Code Hints, you tell Dreamweaver where your library files are located, and it scans them for you automatically.
My feeling is that Adobe made the right decisions. HTML5 and CSS3 are not ready for prime time; and server behaviors can offer only a limited number of options if they’re to remain manageable. Site-Specific Code Hints and the improvements to Live View open up a vast new range of opportunities to the beginner and more experienced PHP developer alike. I liked Dreamweaver CS4 a lot, but CS5 is a huge improvement.
Of course, Adobe can’t stop there. CS6 will need to offer solid support for HTML5 and CSS3, but by that time the specification should have settled down and browsers should have caught up.
Pingback: Enlaces Interesantes 20100412 – #CS5 | Adobe User Group Granada
I have to admit, I wasn’t that interested in Dreamweaver CS5 but after reading this, I’m definitly going to take a look. Especially considering it’s the Adobe product I use the most.
Excellent review of Dw CS5. Thank you for highlighting what’s so great in new version of this code editor!
With the dropped support for JavaScript, what does this mean for jQuery development in Dreamweaver…
Support for JavaScript has not been dropped. What has been dropped are server behaviors for ASP JavaScript, which were apparently used by fewer than one percent of Dreamweaver users.
Dreamweaver CS5 has good support for JavaScript, although nothing specifically for jQuery.
I’m definitely excited to see this new support for coding in Dreamweaver. There’s one missing gap that confuses me though. I wish Adobe would update their code coloring, I know they have the Code Coloring preference but it really hasn’t changed since the days of Macromedia. Try editing the coloring scheme for PHP and then get back to me in a few months! It’s very labor intensive and not worth the effort. There is also no easy way I know of to share code coloring between machines.
Adobe should take a page from text editors such as Coda or Textmate, both of which offer a level of syntax coloring and “themes” that make Dreamweavers look bush league.
Pingback: Dreamweaver CS5 and PHP
I was still undecided about switching (from classic ASP) to PHP or .NET. Seeing Dreamweaver now choosing clearly for PHP and open source CMS support gives me more confidence about the future of Dreamweaver and PHP as my new best friend.
@benny
In my case, I am learning PHP in order to add it my arsenal but I won’t stop using ColdFusion any time soon. Unlike classic ASP, it is still actively developed and is a modern Web centric RAD environment.
The main reason I am adding PHP is that I had to use it on a current client project but what is making it fun is that I’m falling in love with the WordPress platform and want to be able to leverage it and tweak it for client sites.
PHP has a lot of momentum so it’s a no brainer to bet on it now. Having Dreamweaver support it better and helping us to learn is that much more incentive to go forward with it.
@David
I thanked you on my site but want to thank you again here for this great review! I also wanted to ask you which one of your books you would recommend to someone with experience developing in other languages and wanting to get a solid PHP foundation. I also don’t really need something for Dreamweaver but would prefer a book on PHP itself.
Thanks again!
This is the broadest review of DW cs5 which I got after reading around ten reviews including adobe feature introduction page.
I also tried to write review on my blog but that is also not sufficient as yours.
I am pretty impressed by your review. I like the cms maanagement feature where I may be able to draw a personalized theme for my blog soon.
Thanks
Thanks very much, Stéphane. The best book of mine for working with PHP is likely to be the new one, Adobe Dreamweaver CS5 with PHP: Training from the Source. Because of the new features in CS5, the book devotes only one chapter (out of 12) to the server behaviors. Most of the PHP in the book uses the Zend Framework, which speeds up development for beginners and more experienced users alike. The approach I’m taking is different from existing books on the Zend Framework, whcih all assume that you want to build an enterprise-level application using the MVC design pattern. The great thing about the Zend Framework is that you can use individual modules to enhance the functionality of an existing site without the need to write reams of code.
For a more general introduction to PHP, my PHP Solutions is still relevant, even though it was written four years ago.
Has the MANDATORY pop-up CSS window in CS4 Dreamweaver been made optional for some of the few situations were CSS isn’t applicable? If not, not gonna buy CS5.
There is no mandatory pop-up CSS window in Dreamweaver. If you’re getting the New CSS Rule dialog box popping up in situations where it’s not needed, the problem lies with the way you’re using Dreamweaver. It seems as though a lot of people don’t understand the difference between the HTML and CSS modes of the Property inspector. Click the HTML button on the left of Property inspector, and the only time you’ll see the New CSS Rule dialog box is if you launch it yourself from the CSS Styles panel or the Format menu.
I hope they’ll integrate some cool PHP tools like debugger and unit test support (as netbeans already does)
Debugger and unit test support are not in CS5. Sure, they’re great ideas, but I don’t work for Adobe, so you need to contact Adobe directly to get your ideas on the agenda for future versions. If you would like to see them added to Dreamweaver, file a feature request through the official form on the Adobe site.
Thanks for the great review David.
Having bought your previous manual on DW and PHP I know that you really know what you are talking about and will buy buy the next version for CS5.
Thanks, Neil. I must create a page describing the book, but I’m still very busy writiing it. Publication is planned for mid-August, but there are plans to release chapters in electronic format as soon as they become available. Half the chapters are ready to be put online as soon as Dreamweaver CS5 goes on sale. The rest should follow at roughly ten-day intervals. Naturally, some of the book covers material that will be familiar to you from previous books, but only one chapter (of 12) uses Dreamweaver server behaviors. Five chapters use the Zend Framework, and another works with WordPress.
Good solid review, thanks for that. It’s my first time on your site but I’m going to stick around a bit.
Dependant file discovery being improved so CMS systems can use it sounds great, but does CS5 finally understand how to load and preview a site running off Zend Framework? I love the new integration with browser labs but it’s a big turnoff for me if I still can’t compare browsers on my bigger projects..
Thanks again!
I haven’t tried it with an MVC site created with the Zend Framework, but I see no reason why Dreamweaver CS5 shouldn’t be able to do it. It can load any dynamically generated page into Live View, and you can follow links by holding the Ctrl/Cmd key when clicking a link. You can even log into password protected parts of a site in Live View.
Thanks for your quick reply. I’ll give it a shot as I’ll be buying it anyway, but previous versions only seem to work on require() or include() functions.
I don’t suppose you’ve found a way to have code-completion pop up without having to press CTRL-Space? It would be nice for it to pop up after x characters..
Thanks again and good luck with the book!
With variables, CS5 automatically offers code completion when you type $. It also does it automatically after typing new. For functions, you need to press Ctrl+Spacebar.
I was using cs5 on a mag site. What I really wanted it to do is to tell me which .php file the loaded page is referencing. For example if I want to change my account to your account, It wont let me edit it in the live code. (if it would let me edit the live code and change the php itself – now thats improvement!) But once I turn off live code to edit the source it doesnt tell me which php I should be editing. There are 100s of magento php files. Am I missing something here? With this ability I dont see how its any better than local host and firebug in one.
I have never used Magento, so it’s difficult for me to envisage what you’re trying to do. However, it’s true that you can’t edit Live Code. It’s impossible, because Live Code is generated dynamically. Desirable though it might be, Dreamweaver is not a magic wand. The Dynamically Related Files feature should be able to detect the PHP files being accessed by your page, but it’s up to you as the developer to have the knowledge which ones to edit.
nice quick response!
Since DW puts the page together, why can it not detect which php file is being accessed by which part of the page?
To be clearer – if I have a page: header.php, body.php & footer.php. & I want to edit something that is being called from footer.php, can I click in the live design/code and have DW tell me to go to footer.php? Or do I just have to know that that file is being called there?
Since it accesses them and dynamically creates them, can it not tell me where it got it from?
I doubt its impossible to edit live code. Some parts of the created page, are being called directly from the corresponding php. So theoretically it could find the php causing that output, and change the php file (so when created the page has changed)
@magento, You really want jam on it, don’t you?
If you want Dreamweaver to do lots of clever things for you, submit a feature request to Adobe through the official form at https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform.
When a page is being displayed, the Related Files toolbar should be able to show you all dynamically related files. You can click the file name in the toolbar to access it through Split view, and edit it there, but you will probably need to toggle Live View on and off to get it to display the change unless it’s purely in the HTML or CSS code of the related file.
It is impossible to edit Live Code. What’s being displayed it the browser output. You can’t edit a web page in the browser. You need to access the file that generates the output to do that.
I think its less jam, and more – all DW CS5 is firebug with a save button, for $500.
Magento runs with a ridiculous amount of php related files. So the Related Files toolbar shows probably 100 files. So it would only help with more simple php files.
But seriously – DW5 needs a localhost and the CMS installed on it to work. So once you have that and firebug – what is the advancement of DW5? A save on the page is very nice, and its not DW fault that firebug is so good and so free. Firebug now has addons to save the changed css. So a nice catch up, but where is the beef?
@magento, If you think Dreamweaver CS5 is no more than Firebug with a save button, I hope you took advantage of Adobe’s 30-day free trial and saved your money. On the other hand, perhaps you ought to spend the rest of your free trial period digging deeper into Dreamweaver’s capabilities.
For one thing, the Dynamically Related Files toolbar lets you filter the files displayed. Unfortunately, you can’t save a filter (that’s a definite minus), but .css is one of the default filters. And if you’re working with the Zend Framework, as I am, the Site-Specific Code Hints are a massive productivity booster. Before, I had to switch back and forth constantly between Zend Studio and Dreamweaver to work on a site. Now it can be done entirely in Dreamweaver.
As I said before, I have never worked with Magento, so I can’t comment on how well (or badly) Dreamweaver works with it. Each developer has different needs. I find that Dreamweaver CS5 has gone a long way towards meeting mine. Yes, there are other improvements I would like to see, but this version is a positive leap forward for me. If it doesn’t meet your requirements, good luck with finding something that does.
I was quite excited and using the 30 day trial I think CS5 is pretty good. I dont use the zend framework but Ill prob wait for cs6 till I part with my cash. unless some zend work comes my way I guess. Thanks for sharing your views.
I have been using Zend Studio v5.5 for 24 months and i find the most useful feature is the debugger, which allows you to place break points in your “dynamic” code and then run your local version in debug mode, by switching zend debugger to break at a specific point in your code. you can then step through the code, watch variables on the fly and easily debug your code, it even gives an output window and an error window so you can see any lazy coding mistakes, which don’t actually stop your app from working, but may require your attention. the debugger is so effective, i miss it in my DW8, so i looked at CS5 and i cannot believe Adobe (Macromedia) never considered developing a code debugger. I have been using DW since UltraDev 3, but i am so used to ZS debugger, i cannot work in DW8 anymore and as for CS5, i don’t even think i will use the full 30 day trial.
I must admit that I have never used the debugger in Zend Studio. I have developed my own debugging techniques using echo and print_r(). But if that’s what you find useful, stick with Zend Studio by all means. Although I like Zend Studio 7, I find its handling of HTML and CSS too clunky. Dreamweaver CS5 provides the right balance for me, but I can see it won’t satisfy the demands of heavy programmers.
It is SO simple… In Zend Studio select the breakpoint by clicking on the line number, identified by a highlight. In your browser, the zend toolbar allows you the choice of no debugging (so you dont have to remove all your breakpoints), debugging at the start of the page or start debugging at the breakpoint, then simply refresh page and you can step through your code, watch variables, even hover over or highlight variables and see exactly what they contain, excellent tool and i have become so reliant on Zend, im struggling with DW CS5. DW’s Live View does not give developers anything beyond them having not to switch to their browser for a “live” view! i am disappointed at DW, i would have expected the development team to have easily picked up on the likes of Zend and others delivering nice little features.
I have your essential guide to DW CS4… Can I use it whit CS5 or is there to much differens.
The CS4 book works fine with CS5, but obviously doesn’t cover the new features in CS5. However, the server behaviors work identically in both versions. There are some changes to the code generated, but they don’t affect anything described in the CS4 book.
Ok, nice. Thanks for the fast answer.
Does anyone know how to open and modify phtml pages in dreamweaver cs5? Trying to modify Magento….
still not even 5% at the power of zend studio / eclipse pdt or netbeans php for working with php, zend framework, symfony or cakephp (many others).
for cms like drupal, wordpress or magento, pdt or netbeans is way better.
and why so expensive for less futures?
@iMadalin. You’re entitled to your opinion, but I think your 5% estimate is way off target. Dreamweaver doesn’t have all the features, such as a debugger, that a hardcore back-end developer might want. Where it beats the others hands down is in the combination of back-end and front-end features. I spend as much of my time working with HTML and CSS as I do with PHP. Using that combination in Zend Studio is so painful, I found myself constantly switching programs. Now, I can do virtually all I need in Dreamweaver.
As for price, I find Zend Studio expensive for the amount of use I get out of it. Everyone has to make their own decisions as to which offers the best value. For anyone who does both front-end and back-end development, the improvements in Dreamweaver CS5 make it a serious candidate for PHP development. It might not have as many PHP features as the others, but it makes up for that with the wealth of HTML/CSS features. But if you’re happy with the IDE you’re using, I’m not going to argue with that.
Stef,
To edit PHTML files from Magento in Dreamweaver, see this link:
http://www.e-commercewebdesign.co.uk/blog/magento/phtml-files-in-dreamweaver.php
…still pushing Spry rather than obvious choice of jQuery.
So long overpriced editor and Adobe sinking bloat… [link removed]
Yes, Dreamweaver does use Spry for its built-in widgets. Spry’s not my choice of JavaScript library, either. But jQuery was still only in its very early stages when Dreamweaver first introduced Spry. If Adobe had wanted to use a third-party library at the time, it would almost certainly have chosen Prototype and script.aculo.us.
Dreamweaver CS5 is now integrated with the Adobe Widget Browser, which follows a specification laid down by the OpenAjax Alliance. This makes it very easy to insert widgets created with any JavaScript library, including jQuery. In fact, most of the widgets on the Adobe Exchange now use jQuery, but there are some pretty neat photo galleries that use Spry.
If you don’t want to use Dreamweaver, that’s your choice. It’s not the only web development IDE out there, but I haven’t found one that matches up to Dreamweaver’s capabilities.
I like your article. I don’t know if its right place to ask question. But i would ask!? When i try to change my live html code on Dreamweaver cs5 I CANT . its coming a message ”LIVE CODE IS READ-ONLY CANNOT BE MODIFIED. TURN LIVE CODE OFF TO EDIT SOURCE CODE” But i don’t know how??? please i need help. Thanks
To turn off Live Code, click the Live Code button in the Document toolbar. Clicking it toggles it on and off.
What is up with dreamweaver cs5. Ive just recently installed it, setup my present clients sites to work on it and suddenly,
When I go to change (for example) a p tag, it doesnt recognise it???
I cant change h1, p, strong tags. I can change the colour but nothing else. It happens with all my sites. Very strange. Can anyone give me a reason before I go back to dreamweaver cs4.
Thank you
Sounds like a corrupted installation. Try deleting your personal configuration folder. See http://forums.adobe.com/thread/494812.
It was quite interesting review about Dreamweaver CS5. I like it. Dreamweaver CS5 help me a lot doing my job. Thanks Dave
Syntax check is great when you actualy need to find what’s wrong, but it’s really annoying when you’re expecting tips to popup and instead you get the syntax error msg (that disables tips). What good is it to have good tips when you can only get them after you’re done writing them? A tip’s supposed to be given BEFORE you found the answer…
After working with Dreamweaver CS5 for a long time, I have also experienced this problem. It happens mainly when you’re adding code in the middle of a script. I have discovered that the secret is to add curly braces in pairs. If you add the closing brace at the same time as an opening brace, the code hinting works normally. On the occasions that this hasn’t worked, I have usually discovered afterwards that I have left out a closing parenthesis higher in the script. The automatic insertion of closing braces and parentheses would, in my view, significantly reduce the problem, perhaps eliminate it entirely. It’s definitely a feature that I’ll be requesting for the next version of Dreamweaver.
I may be mistaken but i cannot find a debug utility in CS5, such as Zend version, which provides line breaks and variable watches!
If i am mistaken and there is a way to line break PHP scripts using LIVE VIEW in CS5 please enlighten me, otherwise, i cannot see any significant progress of this version over UltraDev 4, to me, knowing my PHP syntax is not the problem, so code highlighter and warnings about code errors is not a problem, its trying to debug variables, class outputs, methods and functions, which at times can become difficult to read so watching the script in debug mode in Zend helps a great deal.
There isn’t a debug utility in Dreamweaver CS5. If your main focus is developing back-end PHP scripts, a dedicated IDE such as Zend Studio is probably a better choice. Where Dreamweaver CS5 beats Zend Studio is in its support for front-end development with HTML and CSS. Combined with the improved support for PHP, I believe it’s a good choice for anyone involved in developing both the front and back end of PHP sites. If you’re not involved in front-end development, Dreamweaver is probably not for you.
By the way, UltraDev 4 didn’t support PHP. Dreamweaver CS5 has far more than just code highlighting and syntax checking. It has full documentation for PHP 5.2 and supports code introspection, providing hints and autocompletion for custom functions and classes, and third-party frameworks. I like it, but if it doesn’t suit your needs, stick with the tools you prefer.
I’m currently using your book “Adobe Dreamweaver CS5 with PHP: Training from the Source” and was wondering is there a site that covers errors/typos in the book and the code supplied with it?