With over 20 years of programming experience, I am skeptical of visual Web development environments.
This article will explore several of Dreamweaver's advanced features for hardcore Web developers:
Why use Dreamweaver if you prefer to hand-code your HTML? Dreamweaver lets you hand-code HTML, but it also adds site management, document management, and other time-saving tools. You can even use regular expressions to search and replace tags throughout your entire site. To hand-code your HTML, simply open Dreamweaver's Code view (View->Code). You can preview the page in Dreamweaver's Design view (View->Design) or view both source and output simultaneously in Code and Design view. You can preview your page in a browser using F12.
Although Dreamweaver 4 has an integrated HTML editor, it is bundled with two popular HTML text editors: BBEdit on the Macintosh and HomeSite on Windows. You can specify your favorite text editor under Edit->Preferences->File Types/Editors->External Code Editor. Your chosen text editor appears under Dreamweaver's Edit menu and can be accessed using Edit->Edit with YourEditorName, Ctrl+E (Windows), or Cmd+E (Macintosh).
Macromedia prides itself on Dreamweaver's so-called Roundtrip HTML, meaning that Dreamweaver doesn't muck with your HTML (or other code) unless you want it to. But you won't find a "Roundtrip HTML" command anywhere in Dreamweaver's UI. Instead, Dreamweaver sports a handful of preferences and commands that let you control exactly how your code is or isn't reformatted.
You can control how and when Dreamweaver rewrites HTML code using the options under Edit->Preferences->Code Rewriting. Options include fixing invalidly nested and unclosed tags, removing extra closing tags, and encoding special characters using %, and encoding of the <, >, &, and " characters. Best of all, you can specify the types of files for which Dreamweaver should never rewrite the code. The default file types are .asp, .cfm, .cfml, .ihtml, .js, .jsp, .php, and .php3, but you can add your own file extensions, such as .php4. To prevent Dreamweaver from ever rewriting any HTML code, simply add the .html and .htm extensions to the list of file types never to be rewritten. (You can specify the default file extension, .html or .htm, for HTML files under Edit->Preferences->General->Add Extension When Saving.)
Would you, as a professional Web coder, consider working in a clean environment such as Dreamweaver if you aren't already?
You can control whether Dreamweaver overrides the case for your tags and attributes separately using the Override Case of Tags and Override Case of Attributes options under Edit->Preferences->Code Format. If you enable these options, Dreamweaver will change the case of your tags and attributes according to the preferences set under Edit->Preferences->Code Format.
Dreamweaver can clean up HTML generated by other programs. Its Cleanup Word HTML command lets you strip out unwanted HTML generated by Microsoft Word. A free extension lets you clean up FrontPage HTML in a similar manner.
<img> tags, another color for
<img> attributes, and a third color for
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
<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
<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.
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.
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).
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.
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.)
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.
Copyright © 2009 O'Reilly Media, Inc.