Support Contact:
Phone: +40 (21) 310.63.42; Forums:

Changes in Dreamweaver CS5

With the new release of Adobe Creative Suite CS5 we expected more than a few changes in the Adobe Products. We all had our share of good and bad things when using the CS4 products.

So what have changed after the new CS5 splash screen?

The new Dreamweaver CS5 loading image

New layout for the working environment, better tools for code inspection and testing in CS5

The split view is now vertical by default; it looks a bit unusual if you are used with the old horizontal split view, but from our tests you get used to it fairly quickly as it has the great benefit of showing more code without having to scroll. To help even more, CS5 comes with great additional tools to inspect the code:  a search bar, the CS Live option on the top right part of the interface before the minimize button and next to the Live view we have the Inspect button which is a cool new feature. It’s like having Firebug installed directly into Dreamweaver.

We also have some new tabs in the right panel that also have to do with the way you code: one is Adobe BrowserLab that can be found after clicking on the CS live button.

The CS live button from the top right is a new feature of Dreamweaver CS5 and it has the following : Adobe BrowserLab with the Preview in BrowserLab and BrowserLab home. In order to use these features you need an Adobe account. I think that in the near future we will do more and more testing online and also we’ll create web pages online:

Another addition is Business Catalyst which helps you to manage your online businesses. With Business Catalyst you can build powerful online stores, amazing websites and it has many other cool features.  Using the flexible content management you can insert the BC modules into your design. With the in-context editing tool BC is one step closer to your clients, making the editing much easier for your clients. So now you don’t have to worry if you’re hard-coding a client’s website. You can learn more from their website.

And take a look at the new CSS Styles Tab that was improved as well. You can see a better organization for your CSS styles:

Dreamweaver CS5 new layout

Adobe BrowserLab – the quick way to test your page in multiple browsers

BrowserLab is an online tool from Adobe (you don’t have to install any third party applications). It comes embedded in the new Dreamweaver CS5 and in order to use it you just have to sign in with your Adobe account. BrowserLab helps you deliver quality web pages that are compatible on a wide variety of browsers. All you have to do is select which type of browser you want to test your design, it doesn’t matter if it’s Internet Explorer 6, Firefox 3 or any other browser that you want to test it on. BrowserLab is even better than a paid service that allows you only to test on different types of browsers because it also lets you choose the operating system. So you can test from IE6 on a Windows XP to Firefox 3.5 on a OS X operating system. You can even use side by side viewing on your design, or even better you can use the onion skin which overlays two screenshots on top of each other so you can easily spot any discrepancies between the screenshots.

Working with CSS in Dreamweaver CS5

I was telling you before about this new cool feature -CSS Inspect mode- that is like having Firebug into Dreamweaver. Well, in order to use it you have to start the Live View and then press  Inspect. While you hover with your mouse over your design, you can see how different elements are highlighted and the CSS Panel starts to show their rules. And the cool feature is that this is in real time. To edit,  go to the CSS Panel and start modifying the rules that you like. The border, margin and the padding rules have a different color than the color for your element that you have selected or hovered. You can even see the CSS rules for your JavaScript navigation or slideshows.

The new CSS Styles

Using the Inspect Mode with the Live View helps you focus better on the CSS rules. So if you want to hide a border or a padding for an element that you have selected, now you can hide those rules or temporarily disable them from the CSS Panel, using the “No” symbol. It’s like using Inspect mode from Firebug directly into Dreamweaver. When you are satisfied with the results you can use Dreamweaver to save your changes and to make those modifications permanent by removing those rules.  So in the end, you’ll get a clean CSS file.

Enhanced code hinting

The hand coding experience from Dreamweaver has been improved big time. You now get hinting for core and extended functions, custom classes, applications and frameworks, live documentation and more. You get hinting even from your own custom classes and libraries.

Setup Window

Site setup settings and testing environment in CS5

With the new site setup settings, you can easily define more than one server for your design. It doesn’t matter if it’s a remote or a testing server you can change these settings whenever you like.

To wrap things up, Dreamweaver CS5 brings a new interface that is smoother and more streamlined. I think Adobe team is getting closer to creating a good website developing product, all there is to do now is to test your skills with the new Dreamweaver CS5.

Facebook comments:

2 Responses to “Changes in Dreamweaver CS5”

  1. Riz says:

    Hi how do I made and edit buttons in it that i made in cs3 they appear in design mode though when i try and edit it nothing comes up. Please help.


  2. Kor says:

    “The split view is now vertical by default; it looks a bit unusual if you are used with the old horizontal split view, but from our tests you get used to it fairly quickly as it has the great benefit of showing more code without having to scroll.”

    I assure you that is not true. Now, how can I change the Split to horizontal by default, without being obliged to do that for each document, each time when I open it?

Leave a Reply