On Tuesday, the public beta for Adobe’s Dreamweaver CS4 was released. The new program has significant changes to the 10-year-old design and development tool with big changes to the user interface and many new features aimed at the professional web developer. Dreamweaver has been used by individuals and large companies over the years like Manchester Web Design.

The new interface is much more user friendly. Panels and windows mesh together well and are easier to shuffle around making the application easy to use on any size of monitor. The program has also taken advantage of a feature that’s been in other Creative Suite programs for a long time – SmartObjects. You can now drag a Photoshop PSD file into a web page within Dreamweaver, optimize the image for the web and re-size it.

Web developing novices and experts alike have always found ways of using Dreamweaver effectively and this latest version offers a bunch of new features that assist those who feel comfortable using raw HTML, JavaScript and CSS as well as those who prefer the Visual, dialog-driven tools.

There is a new ‘related files’ bar, which appears between the document toolbar and the document itself. This lists all the CSS and JavaScript files linked to the page. If you click one of these files you will be taken to the code in that file. The related file bar is a neat feature as it now makes it possible, when mixed with the new ‘vertical spilt view’ because you can now see a page’s raw HTML code and its visual design on the same page. This allows you to edit the CSS code and see the changes taking place on the web page.

While earlier versions of Dreamweaver provide similar tools through the CSS Styles Panel, the new ‘code navigator’ lets you view a list of CSS styles that affect the current selection. This means you can view all of the properties set for that style and even jump directly to the CSS code for that style.

With the new Live View option, Dreamweaver provides a real WYSIWYG view of your Web pages. CS4 beta embeds the WebKit rendering image so by clicking a live view button you can actually see the page as it’s rendered in a Web browser. This means you can interact with the page and view JavaScript effects like rollovers, drop-down menus and tool tip pop-ups without having to switch from Dreamweaver to a Web browser.

If your head is already spinning, you’ll be pleased to now that Dreamweaver wants to help new designers to.

JavaScript-based Spry Tools that were introduced in Dreamweaver CS3 makes it easier for non-programmers to add sophisticated JavaScript-based user interface elements such as drop-down nav bars, tabbed interfaces and user friendly form validation.

Lastly, the new HTML dataset tool lets you treat a regular HTML file like a small database system. You can create a HTML table full of rows and columns of data, and use Dreamweaver to import that table into another Web page. There you can present that data in a variety of different ways such as a “Master/Detail” page that lets a user view a master summary of rows from the table, click an item in the list and instantly see all of the details for that table row.