Email Article

A Web Developer Looks Into Dreamweaver CS4: The Basics

A Look Into Dreamweaver CS4: The Basics By Curtis Dicken

Introduction to Web Design Software

In this series I am going to take a look at some of the most popular web design software packages in use today. I'll first take a look at Adobe's Dreamweaver CS4 before moving on to Microsoft's Expressions and then Beach Software's Web Studio. I'll take a look at the basics and then highlight some of the best features that each software package has to offer. Once we've taken a look at each package I'll do a side-by-side comparison so that you can easily see which package will best fits your needs.

Dreamweaver Has Something for Everyone

The first thing that will probably stand out to you when you load up Dreamweaver is the fact that it includes just about every major web technology. In fact, the first window that you see after you install Dreamweaver lets you choose which file types that you want to Dreamweaver to take over as the default viewer. There is an incredible number file types that it covers:

ASP (Active Server Pages)
JSP (Java Server Pages)
Cold Fusion (.cfm,. cfc)
ASP.NET (.aspx, .ascx)
PHP (.php, .php3, .php4)
JavaScript
CSS (Cascading Style Sheets)
XML
XSL Style Sheets (.xsl, . xslt)

The goal of Adobe's Dreamweaver is to provide a web design package that makes it easy to create web designs, regardless of what technology you favor. While they do this well, keep in mind that Dreamweaver is not intended to replace other web development tools, only enhance them. For example, while you can easily view and change your ASP.NET pages (.aspx) and controls (.ascx), you cannot create code-behind files or compile an application.

All of the basic elements of web design are well represented, though. You can layout and preview HTML, manage CSS styles, add JavaScript, import Flash, and do just about any other common web design task that you can think of.

The World of Adobe

Ever since Adobe acquired Macromedia there have been steady improvements across the board with regards to how all of the Adobe products integrate with each other. Obviously, the goal of Adobe is to sell as many of their products as possible. To that end they have become masters at packaging their products into suites that really make sense together. They have also gotten very good at getting each of the pieces in a suite to integrate seamlessly together.

It is a beautiful thing to be able to design an icon in Illustrator, drag it onto an image in Photoshop, move that image to a Flash presentation then port the finished Flash presentation into Dreamweaver and my web page. By the way, they allow you to download and try out the entire web design suite (premium or standard) for 30 days. Also, it should be noted that the learning curve on Adobe products is not nearly as steep as it once was. Don't get me wrong, there is still a climb, it's just not like scaling Mount McKinley anymore.

Live View: "Real Time" Developer Window

One of the newest features that I really like about this product is what Adobe calls Live View. This isn't rocket science; it's just a helpful tool. In a nutshell, a Live View window runs next to your design window and updates itself any time you make a change to your page source (this part is called Live Code). No more clicking back and forth between preview mode and design mode to see what your changes are really going to look like. It's always there with instant feedback. You wouldn't think would be a big deal but it really is a great time saver.

JavaScript Friendly

Whether you are a JavaScript beginner or a seasoned veteran you will appreciate the JavaScript support that is built into Dreamweaver. For starters, the JavaScript engine provides code hinting for all your standard JavaScript objects. That means that if you are writing some JavaScript code using the window object and you type "window", the code hinting engine will give you a list of all the properties and methods of the window object. You will spend a lot less time looking up unfamiliar or infrequently used object methods.

The code hinting engine also goes as far as allowing you to include your own JavaScript libraries. This is invaluable for those of you that use JavaScript libraries, be it your own or third party. Often times libraries can become quite large, especially if you use any third party libraries. You'll love this feature.

Lastly, you can also externalize your page's JavaScript. What that simply means is that with the click of a button, Dreamweaver will strip out all of your JavaScript, create an external .js file of the code, and link the JavaScript file to your page. A very handy feature for you neat freaks that require your code be separate from your markup.

Conclusion

The Dreamweaver version I tested is version CS4 running on Windows Vista. It's also available for the Mac as well. In the next installment we'll take a look at some more features that Dreamweaver has to offer and see what kind of overall marks it gets. If you want to download and try Dreamweaver for yourself you can download the trial version directly from the Adobe website. Happy designing!