Dreamweaver 4 Overview

Introduction to Dreamweaver 4

1  Dreamweaver 4 Overview
2 The Interface: Same, but Different
3  Handling Code
4 How Buggy Are Your Scripts?
5 Inserting Flash Objects in a Flash
6 Handling Images
7 Site Management: All Together Now
8 Hits and Misses
Home Tired and Want to go HOME
Home Tired and Want to go HOME

Dreamweaver 4 Overview

Page 3 — Handling Code

Ah, yes, code. Whether coding is your favorite thing about working on the Web or the poisonous nemesis of your fragile sanity, I'm sure you've encountered certain situations that you can't WYSIWYG your way out of. Therefore, as any serious developer knows, it is important to keep a solid text editor in your arsenal of development tools.

Much to the disappointment of developers, Dreamweaver's text editing functions have consistently been a low point of the application. Sure, Dreamweaver has been lauded for effectively eliminating ugly code-bloat, but when you want to get down and dirty with your code, you find yourself Alt-tabbing over to your trusty copy of TextPad more often than you'd like.

Well the architects of Dreamweaver 4 have answered our cries and thrown together some substantially improved code-handling functions in this version. First of all, the code window looks great deal better. The flow of the code on the screen is still fully dynamic -- you can make a change in the design view and it is reflected instantly in the code window. Furthermore, there's an auto-indenting feature, and you can select and indent multiple lines of code at once (a nice addition if you're one of those neat-freaks). Another goodie: HTML and JavaScript are automatically color-coded for quick identification. (These are optional features that can be turned off if you're more comfortable working without the bells and whistles.) Lastly, Dreamweaver 4 has placed more importance on the XML standard than with previous versions. The application uses XML files for many of its collaborative features, and it allows you to edit XML files in the code view window.

Another substantial improvement is the "split view" option, which allows you to merge the code view and design view windows into one active window with two frames. You can work with your code above or to the side of your page layout without having to manipulate multiple floating windows. I set my copy of Dreamweaver 4 in split-view and haven't changed it since.

There are several other aspects of Dreamweaver 4's code handling functions that are quite unique. The most useful, especially for beginners, is the built-in O'Reilly code reference. O'Reilly and Associates, the leading publishing house for Web technology reference books, has provided an integrated reference file based largely on their book, DHTML: The Definitive Reference, that can be accessed by clicking on the Reference icon in the code view window. When you choose a tag from the reference file's drop-down menu, detailed information about the tag is displayed. You can also call up the O'Reilly reference file as you work with your HTML, Cascading Style Sheets or JavaScript.

For example, if I'm working in tables and my knowledge of <td> tags is a little rusty, I can highlight the nearest <td> tag, click the code reference icon (or press Shift+F10) and I get a short but detailed description of what the <td> tag is all about, its common attributes, related elements that I can use, and a neat little example of how the <td> tags are used in a table. Also, I can dig deeper by selecting from a list of tag attributes. I now know everything I've ever wanted to know about <td valign = "bottom"> but was afraid to ask.

There's another exciting feature in the Code View panel: the JavaScript debugging tool. Let's take a look.

next pagenext page »