Dreamweaver: A Visual Tool for Serious Web Coders
Pages: 1, 2

Formatting HTML

Dreamweaver offers complete control over HTML code coloring and formatting. For example, under Edit->Preferences->Code Colors, you can specify the colors to use when displaying HTML code (these don't affect the browser page display). You can specify separate colors for text, comments, tags, reserved JavaScript keywords, JavaScript function names, and JavaScript string literals. You have infinite control over the color applied to each tag and its attributes. For example, you can use one color for <img> tags, another color for <img> attributes, and a third color for <a> tags.

Furthermore, you can control HTML formatting under Edit->Preferences->Code Format. These preferences allow precise control over indentation (using either tabs or spaces), line wrapping, and line breaks. You can specify the case for HTML tags, such as <lowercase> or <UPPERCASE> (use <lowercase> for XHTML compliance). You can also specify whether attributes should be in lowercase or uppercase.

Still not convinced Dreamweaver is useful? Take a look at the SourceFormat.txt file, which gives greater control over HTML tag formatting than the preferences allow. Use this file to specify how many line breaks to add before and after each tag; specify groups of tags to be indented (such as <tr> and <td> tags); specify exact capitalization for tags and keywords, such as onMouseOver. You can apply the source formatting to individual files using Commands->Apply Source Formatting.

Customizing Dreamweaver

The SourceFormat.txt file is but one example of how Dreamweaver's operation and UI are completely customizable. You can change Dreamweaver's default behavior or augment it by simply editing external files. Even if you never change these settings, it is comforting as a programmer to be able to inspect the blueprints that control Dreamweaver. For example, Dreamweaver offers complete customization over keyboard shortcuts via Edit->Keyboard Shortcuts. But if you prefer to hand-code your configuration files, simply open and edit the menus.xml file. This XML-like file defines all of Dreamweaver menus and keyboard shortcuts, allowing you to customize the UI. This allows developers who extend Dreamweaver to add custom menu items for new functionality.

Extending Dreamweaver

Dreamweaver was designed to be completely extensible. In fact, Macromedia's Dreamweaver UltraDev application is built atop the Dreamweaver "platform." As a skilled JavaScript developer, you may want to augment Dreamweaver and even sell your extensions. The Dreamweaver Exchange is a forum where you can upload and download Dreamweaver extensions. About 500 extensions (most of them free) exist already, and more are added frequently. Macromedia writes some extensions, but most are offered by third-party programmers. Dreamweaver itself is completely scriptable. Macromedia documents the API in "Extending Dreamweaver" available under Help->Extending Dreamweaver or from Macromedia's site.

You might write Dreamweaver extensions to share with other developers on your team, or you might want to upload them to the Exchange. The Extension Manager application (included with Dreamweaver) lets you package extensions for uploading. It also lets you install extensions you've downloaded from the Dreamweaver Exchange. If you are uploading your own extensions, Macromedia offers extensive documentation for testing your extension and complying with their UI guidelines (Macromedia will "certify" compliant extensions).

• Macromedia Exchange for Dreamweaver
• About Extension Testing and Approval
• Dreamweaver user interface guidelines

Dreamweaver's architecture for downloading and installing an extension is controlled via an .mxi file, as documented in The Macromedia Extension Installation File Format.

Using an .mxi file, you can instruct Dreamweaver to make your extension accessible via one or more menus or the Objects panel. For example, if you extension inserts a new asset type, such as a QuickTime movie, you might add it to the Special category of the Objects panel. Although an .mxi file will handle the mechanics for you, this panel serves as another good illustration of Dreamweaver's extensibility. The appearance of the Objects panel is controlled by the files in the Dreamweaver 4/Configuration/Objects folder. To add, move, or delete items from the Objects panel simply modify the files in this folder and its subfolders. For example, to add an item to the Special category of the Objects panel, add your files--typically a GIF to define the icon and a .js file to implement the necessary code--to the Dreamweaver 4/Configuration/Objects/Special folder.

XML Import and Export

So we've seen that Dreamweaver is both configurable and extensible. But does it play nice with open standards like XML? Dreamweaver includes a Templates feature that lets you define a document template and editable regions within it. This is naturally akin to an XML structure, which separates a document's format definition from the data within it. Therefore, you can export a Dreamweaver template in XML format and you can import an XML document to act as a Dreamweaver Template using the File->Export as XML and File->Import XML commands.

Dreamweaver itself isn't geared towards heavily data-driven Web sites. If you expect to use a back-end database or extensive server-side scripting, you'll want to look into Dreamweaver UltraDev. Fortunately, UltraDev is a superset of the basic Dreamweaver application, so everything you've learned about Dreamweaver applies equally to UltraDev. (UltraDev adds Data Bindings and Server-Side Behaviors panels to Dreamweaver, but it is otherwise 95 percent identical.)

Conclusion

Dreamweaver improves the productivity of both people who develop visually and those who prefer to work directly in Code view. We've barely scratched the surface of what Dreamweaver can do and how to do it. All the topics mentioned here are discussed in greater detail in Dreamweaver in a Nutshell. I hope that I've exposed you to enough of Dreamweaver to motivate you to investigate it further. A free 30-day trial can be downloaded from Macromedia. Best of luck in all your Web development.

Bruce A. Epstein is the author of Director in a Nutshell and Lingo in a Nutshell, the coauthor of Dreamweaver in a Nutshell and the editor of ActionScript: The Definitive Guide.

Return to the JavaScript and CSS DevCenter.

Would you, as a professional Web coder, consider working in a clean environment such as Dreamweaver if you aren't already?
You must be logged in to the O'Reilly Network to post a talkback.

Showing messages 1 through 4 of 4.

• Just Wondering....
  2004-10-22 23:04:19  jtaha [Reply | View]
  
  
  First of all, this article is very interesting. I don't find much information on Dreamweaver aimed at the "coder" audience.
  
  
  I am a coder who normally uses Homesite and hard codes most of my sites. I currently have a client who want me to create a template of their site in Dreamweaver. I've been able to figure the template part out, but I'm still struggling with the table cells resizing themselves. Is there a setting where I can turn this off? I have them set at specific pixel widths and everytime I go to design view, it alters them.
  
  Thanks,
  
  Julie Taha

• does deserve more consideration
  2002-11-24 11:30:40  anonymous2 [Reply | View]
  
  
  The other two comments reflect the constant challenge of pursuading web app developers to consider DWMX. Yes, it used to be a web page tool (but the integration of Ultradev into MX changed that). Yes, the code it used to build may not have been what you would write, but it's gotten better. Yes, one may prefer it not generate or even change their code, but that's controllable as an option. More important, there are a lot of features it has that are as or more valuable than those the "generate code". Then again, all those "features" can cause it to perform poorly in some environments (depends on processor speed, complexity of the page being edited, and more). There are ways to improve its performance by changing various settings that may be better suited in some environments/uses than others. There are articles at Macromedia's DesDev that identify some of these as well as discuss other matters of transitioning to DWMX from other editors. See the MM DesDev site, http://www.macromedia.com/desdev/mx/dreamweaver/, for more.
  
  /charlie
  
  /charlie

• #define Serious_Web_Coders
  2002-09-13 07:34:28  anonymous2 [Reply | View]
  
  
  When I saw the topic "Serious Web Coders", I expected some things written about using a complete OO business layer, nicely nested in Dreamweaver between the database layer (ADOdb!) and the html GUI, but I saw none of that here. Too bad.

• confused
  2002-05-15 17:08:52  jesushouston [Reply | View]
  
  
  Apparently, the appeal of Dreamweaver lies in its ability to not change the formatting of your code. Wow is that so amazing that it actually leaves your code alone??!!