Adobe’s Dreamweaver (previously Macromedia) is a great application. I’ve been using it for years and never found another application that performs so well overall in code editing, WYSIWYG editing, user interface design, extendability, automatic code cleanup and formatting, and compatibility with other applications (such as Fireworks and now Photoshop). And no, it doesn’t mess up your hand-written code.

Recently, I discovered couple of specific text coding features that I believe are not included. I don’t believe there is a command for wrapping a span or code tag around text. In the Insert panel (normally the bar above the page view), there is a text input sub-menu that contains buttons for blockquotes, preformatted text, lists, definition lists, etc., but lacks the span or code tags.

So, if you use Dreamweaver’s code editor a lot, like me, you can add a couple of custom commands to wrap a span or code tag around text. This can easily be done with the Snippet feature. To create it, open Dreamweaver and:

  1. Select the Snippets tab in the Files panel.
  2. Select the New Snippet icon.
  3. Enter as name (such as “wrap a Span”).
  4. Enter a Description if you’d like, it’s optional.
  5. Leave as wrap selection.
  6. In before block, enter “<span>”.
  7. In after block, enter “</span>”.
  8. Select OK. The custom Snippet is created.

Now to use it, just wipe-select some code and double-click the Snippet in the Panel (or select the Snippet and click the Insert button at the bottom left of the panel).

Dreamweaver’s new snippet icon