Review: Adobe Dreamweaver CS5

Web design software with improved layouts, CSS3 and HTML5 support. (October 22nd, 2010)

Dreamweaver adds a number of enhancements including simplified site setup, new starter templates, support for PHP-based CMS systems, Live View navigation, and a new Related Files toolbar. Use CSS inspection tools to get immediate feedback on your design, plus preview your site in multiple browsers.

Electronista Rating:

ratingratingratingratingrating

Product Manufacturer: Adobe Systems Inc.

Price: $399 US

The Good

  • Multiple ways to access most commands.
  • Can customize work environment and reset to default easily.
  • Provides reasonably reliable visual rendition.
  • Powerful PHP scripting environment.
  • HTML5 and CSS3 support.

The Bad

  • Steep learning curve.
  • Spreadsheet-like reports.
  • Design view may incorrectly place columns or margins.
  • Interface has commands and buttons all over the place. -Help will take you to non-Adobe sites, unless you set a preference.

Adobe Dreamweaver CS5 is a web authoring software for the casual to professional website developer. Its price and learning curve make it most useful to those who create websites regularly or work on several sites, not for casual web page development. With this third version of Dreamweaver under the Adobe Creative Suite umbrella, Dreamweaver strengthens its already strong Cascading Style Sheets (CSS) abilities and PHP-based content managed websites.

When I opened Dreamweaver CS5 for the first time, it recognized all my sites. The only complaint I have is that my Snippets didn't make the trip. Snippets are bits of code you create and save to use anytime you need them. When you first launch the program, the welcome screen appears in your workspace and it's a handy tool to access your pages, assets, or to start a new site. If you prefer to use menu commands or one of the numerous panels, you can turn off this window in the "Don't show again" checkbox.

welcome screen

Welcome Screen

Better Site and Server Setup

You might find it puzzling that that Adobe does not use File menu to create a site, but they reserve the New command to create individual pages. To create a new site you use the Manage site or New site commands, which exist in a variety of places, as shown in the screen shot below. Once you find the New Site command, you're on your way with this powerful program.

New site

New Site Commands Highlighted in Blue

Setup is much easier, just like Adobe claims. Gone is the need to enter the full complement of web server and file transfer information before you can begin your creative design. All that appears in the new Site Setup dialog are fields to name your site and tell Dreamweaver the folder in which your files reside.

New site dialog

New Site Setup

Unfortunately, Dreamweaver still lacks a clear way to reuse server information. You might have one server on which you stage sites, so rather than re-enter local and remote host information each time, it's nice to reuse that information. Instead of being part of the Site Setup window, Dreamweaver's reuse mechanism remains the Duplicate button in the Manage Sites window, and still lacks explanation. Duplicate typically means make a copy, but here it means: Duplicate the site settings, and create a new blank folder with this duplicate's name, both appended by the word copy.

One new feature lets you have multiple servers set for a site. This is great if you stage a site on your own server, then move the finished site to another server. Once you are into the fun of designing your site, many other new features come into play.

Multiple FTP window

Multiple FTP Site Setup

Better Templates

If you don't want to build your page structure by hand, Adobe has added new and improved pre-created layouts. Each template contains instructions within the page, rather than the previously used canned text, plus detailed comments help you understand and learn CSS.

Enhanced Live View Power

Live View, introduced in Adobe Suite CS4, is a WebKit-rendered view that enables you to remain in Dreamweaver as you work. This reduces the need for Browser Preview. With Live View you can freeze a JavaScript-enabled menu, edit your code, and view changes, without uploading the pages. Adobe Dreamweaver CS5 includes a whole slew of powerful "Live" features.

On top of Live View is the new Inspect mode. When you select an object on your page, lines and shading show you the item's boundary, margins, padding, and more. The Code window jumps to that object's code and the Current panel in your CSS Styles panel jumps to that object's style. Also, when you click the new Inspect button, which automatically turns on Live View, you get more information in a more accurate view, just by mousing over the area. Inspect mode is not editable but if you click any area on the page, it freezes that area so you can edit its code and styles.

Inspect is particularly useful when you work with template-based pages because you can see the details of the locked sections of the page that otherwise require opening the template.

Live Code works like Live View but for code. It shows you the code behind a page, as the browser would see it. This is handy when you build a dynamic site.

Multiple FTP window

Live Code

PHP and CMS Power

If you're a CMS developer, particularly if you use WordPress, Drupal, or Joomla!, there's a plethora of powerful new enhancements for you.

As with CS4, with MAMP or XAMPP installed, you can work with PHP files that reside on your Mac, but they are treated as if they're on a web server. This matured feature enables more levels of files to render. With Live View Navigation, which makes your links active in Live View, you can interact with server-side applications and dynamic data. The related new Address Bar enables you to see any page on the Web, view the code behind it, and even copy code.

Expanding on CS4's introduction of Related Files, the renamed Dynamically Related Files feature enables Dreamweaver to discover and work in the files that comprise your CMS-based site. In Dreamweaver CS4, you could work in your page's related files, such as .css, .js, .php, or .asp includes, by selecting any of those files from the horizontal list that tops your page's workspace. Dreamweaver CS5 expands that ability to include the many levels of files CMS systems typically require. This enables you to work with comments and other related states of your pages -- without having to dig for them in your Files panel. You can filter the related files by file name or type. In Live View, when you open these related files, you see the entire page rendered and can work with that file's code.

If you create PHP scripts, you'll celebrate the new custom class code and site-specific PHP code hinting. When you press Control and spacebar, it calls up about 2,000 PHP constants. As you type your function, you also see the arguments, examples, and official documentation. If you're at a loss for the name of the function, you can type a part of what the function may be and press the spacebar to bring up the code you seek. Dreamweaver gives you some suggestions as well, minimizing your possibility of errors. If your site is PHP with PHP server setup, you can also add and benefit from the new site-specific PHP code hints for systems such as WordPress, Drupal, or Joomla!, and Zend.

Cascading Style Sheets

Another new helpful feature is CSS Enable/Disable. In CS4 if you wondered what a property was doing, or needed to seek out a style clash, you would have to delete the property or comment it out in the style sheet. Now you can select a rule within the CSS Styles panel, click a button to turn that rule off and on again, and see the change rendered immediately in Live View.
Disable CSS

Disable/Enable CSS Property Button

BrowserLab Browser Previews

The new BrowserLab creates screen shots of what your page looks like in PC and Mac versions of Firefox, Chrome, Internet Explorer, and Safari. This welcome feature works from the browser or within Dreamweaver. To use it from inside Dreamweaver while your page is open and in Live View, choose Local and click Preview in the BrowserLab panel. It takes you to the BrowserLab sign in page if you're not already logged in, and starts to capture and display your site. The display of two browser views side-by-side or onion skinned with adjustable transparency provides excellent feedback.

onionskin overlay

Onionskin Overlay in BrowserLab

A benefit of using it from within Dreamweaver is that in conjunction with Live View, you can freeze an action to see how that mid-action event looks in different browsers-that is powerful! It is also handy to see your page while it resides on your hard drive and not on a server. However, in my tests I found its renditions of IE were inaccurate when done from Dreamweaver, yet fine when started at browserlab.adobe.com, or in the real browser. Adobe forums show others are seeing flaws. Perhaps this is simply a bug to be fixed. Adobe told us that some of the difference in rendering is due to their use of "the bare-bones default rendering in Windows/IE," which may be different then normal customer settings.

BrowserLab is part of the new CS Live, an online service Adobe offers free for a year. There are other such services including the Open Source browsershots.org, but the view control and Dreamweaver's integration may prove worth the future planned fee.

Other Changes and Additions

In previous versions, when you duplicate a file within the Files panel, the new name started with "Copy of," which places it out of alphabetical order. Now it is called filename - Copy, which is a welcome change.

Adobe also added full support for HTML5 and CSS3. This includes code hinting for HTML5 and for eleven CSS3 specifications. It also includes some HTML5 starter layouts. Although the HTML5 pack extension is part of the original release, it installs as part of a Dreamweaver CS5 update.

Another handy new tool is the new Multiscreen button on the workspace window. Multiscreen opens a pane that floats over all other windows and displays your currently open page in phone, tablet, and desktop sizes. The Viewpoint sizes button enables you to change the size of each, although ppi cannot be altered for previews such as the new 326ppi iPhone screen. For devices that support CSS3 Media Queries, you can also attach a CCS file to each preview. However, Dreamweaver template-based pages do not support this new feature yet. You must install the HTML5 pack to use Multiscreen.

If you or your client is using Subversion (SVN), you can now connect to it via Dreamweaver.

The new Dreamweaver Catalyst replaces InContext. Catalyst is a complete online service website tool for businesses that is beyond the scope of this Dreamweaver review.

A Few Disappointments

There are still some missing basic features that would enhance design efficiency:
  • Ability to save server name, path and log and add that info to other sites after they're created.
  • The ability to preview a graphic from within the Files panel.
  • An easy visual of which media files you used within a page.
  • A visual indicator in the Files panel of whether you have used a file.
  • An easier way to link to an anchor that's within a different page from the one on which you're working.
  • A way to see if you have used a style within the site and optionally remove unused styles.
  • The ability to track a Photoshop image that is used as a Smart Object, so if it's moved or renamed, the link from the web graphic to the original won't be lost.

Eighteen abilities were deprecated, which disappointed some people. Spry has replaced Behaviors, for example, so some users may opt to continue to use old versions of Dreamweaver. You can gain by more moving to the current technologies. Adobe told us that the "features we deprecated were either generating poor/outdated code, has newer ways of working in more recent versions of Dreamweaver, or simply focused on supporting browser that are no longer baseline requirements for web work."

Summary

The mix of Design and Code views make Dreamweaver CS5 comfortable for visual folks and programmers. The new Live views make this version a more comfortable program to use. The interface includes command elements in multiple places, which can be confusing. It may be time for Adobe to consider borrowing the ribbon style controls used in the new MS Office products.

If you still use Dreamweaver CS3 and are serious about professional website creation, this upgrade is well worth the price. If you're a GoLive user looking to make the move, you'll be comfortable in this new version. If you currently use Dreamweaver CS4, and wish to create Word Press themes, do other CMS development, or do PHP scripting, this version is for you.

Adobe Dreamweaver CS5 can be purchased as a stand-alone product for $399 or upgraded from a previous version for $199. You can also purchase it as part of one of the Adobe Web Premium, Design Premium, or Master Collection bundles and take advantage of the integrated suite of programs. It requires Mac OS X 10.5.7 or 10.6 and above.

Learning Resources

Deborah is a seasoned web developer and Dreamweaver user, but this is Ilene's first real jump into Dreamweaver. Ilene's web development focuses on HTML using BBEdit and other tools. To help shorten the learning curve, Ilene looked at various web resources and landed on the excellent Dreamweaver CS5 Essential Training by James Wiliamson on Lynda.com. This 15 hour, course walks you through everything you need to know to use Dreamweaver effectively in 16 lessons divided into 2 to 10 minute video segments. James' smooth tutorial presents the information simply, explains the details well, and he has a pleasing voice. The course covers everything you need to use Dreamweaver including the interface, site design, CSS styles, layout, adding links, forms, Flash, and video. While you may not want to spend $250 to pay for a year of Lynda.com access, the $25 monthly fee to take this course is money well spent. You can listen to a few of the episodes free to help convince you, from the link above.

by Deborah Shadovitz and ilene Hoffman


POST TOOLS:
toggle

Network Headlines

toggle

Most Popular

Sponsor

Recent Reviews

JBL Synchros E40BT headphones

For all the different configurations of headphones on the market, it's always a tough choice for buyers to get something that is just ...

Razer Taipan mouse

The list of gaming devices is growing larger with each passing day. A large number of companies have entered the gaming input arena, a ...

Cambridge Audio DacMagic XS

Every computer with a microphone or headphone port has one -- a digital to analog converter (DAC). There are nearly as many chipsets a ...

Sponsor

toggle

Most Commented

 
toggle

Popular News