Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Dreamweaver: A Visual Tool for Serious Web Coders

by Bruce A. Epstein, coauthor of Dreamweaver in a Nutshell

With over 20 years of programming experience, I am skeptical of visual Web development environments.

Dreamweaver has made me a convert. Even if you prefer to hand-code your HTML and JavaScript, perhaps especially if you do, Dreamweaver is a tool worth learning. Dreamweaver lets novices apply JavaScript behaviors to create rollovers and other effects, but it also lets JavaScript developers manage and distribute their own libraries of JavaScript behaviors.

Dreamweaver has numerous time-saving features including File Check In/Check Out, integration with SourceSafe or WebDAV, and Design Notes for Web team collaboration. Furthermore, its Templates, Libraries, and HTML Styles features speed site development. But you're not going to use those features unless Dreamweaver lets you continue working the way you want to work. You demand the ability to use your favorite text editor to hand-code HTML and JavaScript. You won't tolerate a visual tool writing lousy HTML or changing your code.

Dreamweaver gives you the best of both worlds. You can use its Design view to work visually and hide the underlying HTML, or you can use its Code view to write HTML and JavaScript by hand. Dreamweaver even offers support for server-side tags, including ASP, JSP, ColdFusion, and PHP.

This article will explore several of Dreamweaver's advanced features for hardcore Web developers:

  • Hand Coding in Dreamweaver
  • Roundtrip HTML
  • Customizing Dreamweaver
  • Extending Dreamweaver
  • XML import and export

Hand Coding in Dreamweaver

Related Reference

Dreamweaver in a NutshellDreamweaver in a Nutshell
By Heather Williamson & Bruce Epstein
Table of Contents
Sample Chapter
Full Description

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.

Even in Design view, Dreamweaver's Tag Selector helps you to quickly select the desired tag. Then you can use the Quick Tag Editor (Ctrl+T on Windows or Cmd+T on the Mac) to hand-code a tag without switching to full Code view. The Reference panel (Window->Reference) contains an HTML tag reference excerpted from O'Reilly's own HTML & XHTML: The Definitive Guide, 4th Edition. (The Reference panel also includes O'Reilly documentation on CSS Styles and JavaScript.)

Using an External Editor

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).

Roundtrip HTML

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.

Controlling HTML Code Rewriting

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.)

Comment on this articleWould you, as a professional Web coder, consider working in a clean environment such as Dreamweaver if you aren't already?
Post your comments

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.

Pages: 1, 2

Next Pagearrow