In the tenth major version of any professional application, most of the basics are already taken care of. So it is with Dreamweaver CS4. This version successfully continues Dreamweaver’s movement toward building properly structured, standards-compliant Web sites. Whether you’re a designer or a Web programmer, Dreamweaver CS4 makes it easier to work with today’s sites, split up as they are between HTML, CSS, and script files. Add tighter integration with Photoshop for creating Web graphics, and this is an upgrade worth paying for.

Getting Started

To run Dreamweaver CS4, you’ll need Windows XP SP2 or Vista, or Mac OS X 10.4.11 or later. On the Mac, you’ll also require a PowerPC G5 or Intel-based Macintosh. I installed Dreamweaver CS4 as part of the CS4 Master Collection package on Macintosh and as a standalone program on Windows. Installation on the Mac took a long time (almost an hour), as is now familiar when installing an Adobe suite. Windows installation took much less time because there was so much less to install.

Hey, This Looks Different…

The first thing you’ll notice when you open the program is the tweaked user interface. Dreamweaver now uses OWL, the cross-platform OS Widget Library meant to unify the user experience across all the Adobe applications.

You can pull panels out of the panel dock to become free-floating windows, or you can collapse the panels to icons for more document space. Clicking on the panel icon causes the panel to fly out so you can use it. You can arrange panels however you like, and you can save your workspace so it’s always available to you. Dreamweaver comes with several workspaces optimized for designers, coders, and application developers.

One drawback to the OWL interface, especially for Mac users, is that it really wants to take up your entire screen. When I open a document on my 20-inch monitor, Dreamweaver’s document window, toolbars, and panels cover up all background programs. You can shrink the document window, but the toolbars and panels stick stubbornly to the top, bottom, and left sides of your screen. In this way, the interface acts more like a maximized Windows program, which isn’t expected behavior on the Mac and sometimes gets in your way.

Longtime Dreamweaver users may be a bit disoriented at first, because the Insert bar has become the Insert panel. In fact, the whole interface has become more panel-oriented. Tip: If you’re more comfortable with the Insert bar, just drag the Insert panel out of the panel dock on the left side of the screen, and to the top of your screen, where it will turn back into the Insert bar.

New to Dreamweaver CS4, the Property Inspector now has two tabs, HTML and CSS. Depending on which tab you’re on, Dreamweaver applies properties of that type. For example, if you’re on the HTML tab and click the Italic button, Dreamweaver applies the style using the HTML <em> tag. If you’re on the CSS tab of the Property Inspector and click the Italic button, Dreamweaver walks you through creating a new CSS style rule for the selection.

Adobe has removed some features of the program that are either obsolete or not in line with current best practices for building Web sites. The old Table Layout mode is gone, and good riddance, as CSS-based layout is the way to go for modern sites. Other now-departed features include Timelines; the Site Map tool; server behaviors for ASP .NET and JSP; and Flash Buttons and Flash Text.

What You See Is a Whole Lot Closer to What You’ll Get

Web designers have long had to contend with the HTML and CSS rendering differences between browsers. Pages that looked great in Firefox, for example, might look terrible in Internet Explorer. In the past, Dreamweaver’s Design view rendered pages — sort of — but you still had to preview Web pages in several browsers to see what they would really look like to users.

Dreamweaver CS4 goes a long way towards true WYSIWG with the new Live View. Incorporating WebKit, the cross-platform rendering engine used by Apple’s Safari and Google’s Chrome browsers, Live View gives you a much more accurate view, right in Dreamweaver, of how your page will look in browsers that support Web standards. It even renders the CSS and runs the JavaScript. The prudent designer will still preview pages in all browsers that your site targets, but with Live View, you can get farther, faster when developing your sites.

The new Live Code complements Live View, because when you switch it on, it splits the window (Dreamweaver adds a vertical split to the previous horizontal-only Split View) so that your code is in one pane and the Live View in the other. With Live Code, you can interact with the page in the Live View pane as a user would in a browser, and see how your actions generate new code in a browser in the Live Code pane. You can even temporarily lock the code while performing a particular action to troubleshoot problems.

Finding Your Code

Code jockeys will also be pleased at two more new features that help you find and change code faster. Related Files shows the names of the support files that are often attached to HTML pages (such as CSS or script files) in a handy toolbar at the top of the document window. Clicking one of the names switches Dreamweaver to Split view and opens the document in the Code pane.

If you’ve ever spent time tracking down which linked stylesheet is affecting a particular element on a Web page, then the new Code Navigator is for you. When you place the cursor over an element and Alt-click (Option-click on Mac), the Code Navigator window appears, showing the related stylesheet(s) and rules that apply to the element.

Hovering over a rule pops up a tooltip with the rule’s properties. Clicking the rule’s name switches Dreamweaver to Split View, with the rule’s stylesheet in the Code pane, and the cursor placed in the rule, ready to edit. Code Navigator is a great tool when you’re building or maintaining a site, especially if you’re taking over a site from another designer and trying to figure out the style structure.

If you’re working on big sites that use the Subversion version control system, Dreamweaver can now act as a limited Subversion client to check files in and out of the repository. However, it’s not a substitute for a full Subversion client program.

Getting Chummier with Photoshop

It’s no surprise that Adobe has brought closer integration between Dreamweaver CS4 and its graphics powerhouse, Photoshop. In Dreamweaver CS3, you could copy images (and image layers) in Photoshop and paste them into your Web page layout in Dreamweaver, after a conversion step where you specified which graphics formats you wanted (PNG, JPEG, or GIF).

In Dreamweaver CS4, you can place Photoshop documents directly into the program, where it becomes a Smart Object; that is, it maintains a link to the original Photoshop .psd file.

When the .psd file is updated, Dreamweaver recognizes that it has changed and alerts you to update the copy in the Dreamweaver document. This means that you can use a single .psd file in many different pages of your site. When you update the Photoshop file, you’ll update all the copies throughout the site at once.

Look Ma, No Database!

Dreamweaver has long had the ability to interface with a server-side database to create dynamic Web sites, but this requires serious database and programming knowledge.

Dreamweaver CS4’s new HTML data set feature allows you to store your data in a standard HTML table, a series of div tags, or an unordered list. Through a wizard, you integrate the data into a dynamic table that’s displayed using the Spry framework for Ajax. Spry is Adobe’s JavaScript and CSS library that lets you place user interface elements or effects on your Dreamweaver pages. The wizard gives you several options for displaying the data, and when users load your page, they can interact with the page to sort or display detailed information, drawn on the fly from the data document.

The cool thing about the HTML data set is that other people without layout skills can update the data document. Thanks to the dynamic page generated by Spry, the results will still look good.

One interesting development that appeared after Dreamweaver shipped was the availability of widgets from other JavaScript frameworks on the Adobe Exchange Web site, including widgets based on Yahoo Interface Library (YUI), jQuery, and MooTools. This indicates that Adobe wants to give Dreamweaver users access to the fruits of other developer’s labors. Previously, if you wanted to take advantage of any JavaScript framework other than Spry, you needed to integrate it in Dreamweaver’s Code View. Now, you can do it without needing to dig into the code; after you install third-party widgets with the included Extension Manager, they appear in Dreamweaver’s Insert panel.

Source

Buy this software here:

http://www.softster.net/P2770/Development_Software/Dreamweaver_CS4.html