It’s been many years since I reviewed the previous version of Dreamweaver (CS3) and I have been looking forward to the updates in this application. This version of Dreamweaver has several important updates, which include:
- Enhanced CSS starter layouts
- Support for PHP-based content management systems
- Custom and site-specific code hinting
- Comprehensive CSS support
- Integration with Adobe BrowserLab
Adobe kindly provided us with a copy of Dreamweaver CS5 for this review. While I would like to cover the PHP aspects of the program, PHP is beyond my knowledge base, so I’ll be sticking to the CSS aspects, as well as the BrowserLab feature.
First up are the enhanced CSS starter layouts. These layouts give the user a starting point, a template which can be modified if necessary. An important change in this version is the instructions given when using the templates. In the screen shot above, I’m using 2 Column, Fixed, left sidebar, header and footer.
In the Document toolbar, select Designer view, then click on Live View.
Codeview.gif
The next step is to click on Code view in the Document toolbar, which shows the HTML and the comments.
To get more information, click on local.css in the Document toolbar. This shows you the CSS document and also gives you a lot of information about the selectors. This will help you learn CSS.
CSS Support
When HMTL is separated from CSS it becomes easier to work on the actual design. The challenge can be working with CSS, especially understanding the box model.
The new CSS inspection tools allow you to view the box model properties of a given element and make adjustments in the CSS panel by using visual cues. The screen shot above shows how this would work in actual practice.
The first thing to notice is the Document toolbar. Note that both the Design view and the Live View are enabled. Next, click on the Inspect button to activate it. As you mouse over the different elements, you’ll notice that the individual elements light up in combinations of aqua, lavender and yellow. This is also reflected in the CSS Styles panel on the right of the workspace.
When you look at the screen shot, you’ll see that the center column of text doesn’t fit properly and also displays a yellow highlighting to the right and below the text. To fix the text, click on it to freeze it.
Next, go to the CSS Styles panel and click on the value for the margin-right property (which is set to 40px).
Doing so opens the CSS Rule Definition dialog box. In the Box category, change the right margin property to zero and click on OK.
This fixes the text flow problem.
Another way of fixing problems is to turn properties on and off, then view the changes. Making sure that the Inspect button is enabled, we go back to the text in the center column.
You’ll notice that there’s too much padding on the left side of the text, which is shown by the lavender highlighting. Instead of setting the value to zero, you can disable the property instead. To do so, click on the text to freeze it, then go to the CSS Styles panel and move your cursor over the individual properties. As you do so, you’ll notice a gray disable icon to the left of each property.
Clicking on it will disable the property and you’ll immediately see the change in Live View (as indicated by the red disabled icon).
To see what’s happened in your code, right-click on the disabled property and in the pop up, choose Go to Code. Note the CSS comment. You can reactivate this property at any time if you wish. To do so, click on the red Enable CSS Property icon (as in the previous screen shot). Doing so reactivates the property and removes the comment from your CSS code.
Using Dreamweaver with the Adobe Browser Lab
The one huge challenge for web designers is to create designs that look good in all browsers. A way of dealing with that issue is to use Adobe Browser Lab, which is part of the CS Online service.+ The first thing to do is open a file. Next, choose Designer view on the Document toolbar and activate Live View. When you do this, you can use your JavaScript as if you were using it in web browser.
In this case, the JavaScript has a bug. To see it, I trigger the columns pull down menu, right-click on it and choose Freeze JavaScript (F6).
Now I can test this out. To do so, I go to the top of the Document toolbar and click on the on Preview/Debug in Browser icon and choose Preview in Adobe Browser Lab (Ctrl+Shift+F12). You’ll need to enter your Adobe username and password to continue. If you don’t have one, you’ll need to set that up first. Also, when you load the Browser Lab, it can take awhile to load (several minutes) if you’re on a slow connection.
In the Browser Lab, I’ve used the 2-up setting to compare two versions of Internet Explorer (IE 7 and IE8 side by side). Note that for each browser you choose for comparison, it will take time to load. Also note the effect of the JavaScript bug in the left pane. You can clearly see that the pull down menu has shifted to the right.
This is only one example, though you can see how the Browser Lab will simplify the ability test out web designs.
+Note: If you register your product before April 30, 2011, you will get 12 months of access to the Adobe CS Live service.
Conclusion
This review gives you an overview of some of the latest features of Dreamweaver CS5. It’s definitely an improvement over the previous version that I reviewed (CS3). If you’re a serious web designer, I recommend that you have a look at this program.
About the Author
Nathan Segal has been working as a technical writer for 13 years. His specialty is taking complex subjects and turning them into language that anyone can understand. To improve your photography, image processing and results, visit: DigitalArtistU.com
