Customize Dreamweaver to Your Needs
Jason, owner of the By: Jason Siegel
January 17th, 2003
Cartoonists pick and choose their pens. Contractors select their wood. Teachers decorate their classrooms. Why can't developers customize their editors? Wait a minute... they can!
This article explains a few of the most useful customization tricks which can be achieved by you, the Macromedia Dreamweaver user.
Important Notes
This tutorial is written for Macromedia Dreamweaver MX, the latest version as of December 2002. Many of the examples provided, however, can be achieved in earlier versions (especially v4, a nearly identical Dreamweaver product).
Dreamweaver tweaks may include modifications of the /Configuration/ directory. The files in this folder are essential to the software's stability. Therefore, a backup is suggested.
When editing a Dreamweaver config file, do not open the document in Dreamweaver. This may compromise stability. Other choices may include Microsoft Notepad or Macromedia HomeSite. I'll assume you have a basic knowledge of this product and its capabilities.
Controlling Your Document Extensions
One of the very first things I noticed after purchasing Macromedia's Dreamweaver MX was the default naming of HTML files as .htm documents. Though this is just as acceptable as the traditional .html extension, the transition from my own standards, quite frankly, bugged me. To manage your document extensions, let's pull up DW's extension config file at:
../Macromedia/Dreamweaver MX/Configuration/DocumentTypes/MMDocumentTypes.xml
Here you'll find the document extension settings for our program. To change the default HTML extension, locate line 3 and change the following code from:
winfileextension="htm,html,shtml,shtm,stm,lasso,xhtml,inc"
to:
winfileextension="html,htm,shtml,shtm,stm,lasso,xhtml,inc"
In addition, Mac users may make the same alteration to the macfileextension attribute. All we've really done here is change the priority of the HyperText Markup Language's extension. It's quite simple, really. And by editing things such as this in the file, we can generate entirely new actions for Dreamweaver.
Here's another that I edited. I found that the browser-readable PHP document type PHPS lacks color coding, so I decided to add this extension to PHP's extension library. How? On line 67, I changed the winfileextension and macfileextension attributes to include the .phps filetype. They originally read:
winfileextension="php,php3"
So I changed them to:
winfileextension="php,php3,phps"
And, of course, the same changes can be made for macfileextension. With this information you should be able to control your Dreamweaver extension actions effortlessly.
Alter Default Document Templates
Standards change, personal preferences vary, and sometimes we just get plain lazy. Luckily, those kind Macromedia developers have left us a few handy options. Let's pull up our new document directory at:
../Macromedia/Dreamweaver MX/Configuration/DocumentTypes/NewDocuments/
Here you'll find all the basic document templates for Dreamweaver-initiated files. All you'll have to do is open the appropriate filetype document and edit the template to suit your needs. For this example, let's pretend we want to use the same external cascading stylesheet location for every HTML document we make for the foreseeable future. To make this a part of Dreamweaver's natural code, we'll edit the contents of the HTML template, Default.html. It looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
</head>
<body>
</body>
< /html>
Simply edit your code as shown below, and save.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
< /html>
It's as simple as that!
Edit the Tag Library
The Dreamweaver tag library is the source for all of your tag settings, including line breaks, contents, and capitalization. This is primarily used to optimize code for filesize and browser compatibility, as things such as white space tend to cause problems. But you might also wish to change a few other options for the sake of convenience. To open the tag library editor, go to:
Edit > Tag Libraries...
A master list of Dreamweaver-written tags and attributes provides concise insight as to what the software is able to produce. New additions will extend both the code-view dropdown menus, and Dreamweaver's ability to comprehend your documents. Tag formatting should also be taken advantage of. Though Macromedia has created the most respected Internet development software, the default settings are less than stellar.
Key Dreamweaver Preferences
For the typical Dreamweaver novice, the large list of software tweaks can be quite daunting. Most can be completely ignored, however, as only a select few impact your work environment. I'll highlight the major preferences you should customize. First, let's get into the preference panel by selecting:
Edit > Preferences...
Category Important Tweaks
Here's a list of the most essential changes you should approve.
- General - Document Options: Open Files in New Window; Editing Options: Use <strong> and <em> in place of <b> and <i>
- Accessibility - None
- Code Coloring - None
- Code Format - Indent; Tab Size; Automatic Wrapping; Default Tag Case; Default Attribute Case; Override Case Of; Centering
- Code Hints - Delay
- Code Rewriting - Rewrite Code: Rename Form Items When Pasting
- CSS Styles - None
- File Types/Editors - None
- Fonts - Code View
- Highlighting - None
- Invisible Elements - Show; Server-Side Includes
- Layers - Netscape 4 Compatibility
- Layout View - None
- New Document - Default Document Type; Make Document XHTML Compliant
- Panels - None
- Preview in Browser - Browsers
- Quick Tag Editor - Options
- Site - All
- Status Bar - Connection Speed (56k preferably)
- Validator - All
Edit Keyboard Shortcuts
Keyboard shortcuts are a developer's best friend. Once you get used to them, work becomes a whole lot easier. However, what if you switched to Dreamweaver from a program that used different shortcuts? Or if you just really hate the ones Macromedia has provided? Not to worry!
Edit > Keyboard Shortcuts...
This is the master control panel for your Dreamweaver keyboard shortcuts. A 'set' is simply a database of shortcuts that can be activated or deactivated.
For example, let's pretend we're pulling a practical joke on our friend Joe. Our buddy always uses the Ctrl+N and Ctrl+O shortcuts to create and open documents. Yes, we're evil. Let's switch them.
Make sure Macromedia Standard is selected as the active set, and click on the first icon to duplicate the database. Rename the set to 'Our Evil Scheme'. Under the Menu Commands section, maximize the File category and find 'New...'. Delete the old shortcut by highlighting it and hitting the minus action. Place your pointer in the text field and press Ctrl+O on your keyboard (don't type it literally -- carry out the action). Then select Change.
Now we have a duplicate Ctrl+O entry, but Dreamweaver will only use the first entry that occurs in the database. So go back and replace the 'Open...' action with Ctrl+N as we did before. Hit OK.
Well, our prank was a success... sort of. Joe has until tomorrow to fix the software or he will be fired by his boss! Open the Keyboard Shortcut editor. Select Macromedia Standard as your set and hit OK. Open it back up and hit the trash can. Confirm the deletion of Our Evil Scheme so there's no evidence. Hit OK and exit. That's it!
Let's not abuse this feature, eh?
Utilizing Macromedia Extensions
If you don't already have the Extension software installed, you can download it here [1].
The Extension Manager is Macromedia's most useful tool for customizing the way Dreamweaver reads, writes, and expedites. Widespread popularity and the product's targeted audience have produced an exceptional database of add-on modules that work with this software.
To locate a plugin that's suitable for you, visit http://www.macromedia.com/exchange/ [2]. Here you'll find the list of extendable Macromedia products, as well as the link for the Exchange Manager. Point your browser to the Dreamweaver (MX) section, and get a Macromedia ID. Once you've signed up, you'll have access to a myriad of downloads.
Log in, and use the 'browse extensions...' dropdown to locate an appropriate plugin and platform. Save the desired file into:
../Macromedia/Extension Manager/Downloads/
Once the transfer is complete, open Macromedia Extension Manager.
Select:
File > Install Extension...
Then simply follow the on-screen directions, and finally restart Dreamweaver. Instructions concerning the module's use and location are available in the manager's extension list.
Important References
The following is a list of official Macromedia Dreamweaver MX documents and references that will aid the customization process. Some of these files have been used in the creation of this tutorial and may be further utilized to enhance your Dreamweaver experience.
Don't forget to back up important files!
MM DW Exchange
Databased Downloads - Help > Dreamweaver Exchange
http://dynamic.macromedia.com/bin/MM/exchange/main.jsp?product=dreamweaver [3]
MM DW Support Center
Information Database Help > Dreamweaver Support Center
http://www.macromedia.com/support/dreamweaver/ [4]
Extending DW MX
Local Information Database Help > Extending Dreamweaver
MM Support: Online Forums
Online Message Boards Help > Macromedia Online Forums
http://www.macromedia.com/support/forums [5]
Customizing MM DW MX
Compressed Adobe PDF File
http://www.macromedia.com/support/dreamweaver/custom/customizing_dwmx/ [6]
MM DW MX Shortcut Matrix
Compressed Adobe PDF File
http://www.macromedia.com/support/dreamweaver/documentation/dwmx_shortcuts/ [7]
MM DW Updates
File Downloads
http://www.macromedia.com/support/dreamweaver/downloads_updaters.html [8]
Thumbnail Generator and Optimizer
The thumbnail generator/optimizer is a little-known capability of the software. Though it's not hidden in any way, I know barely a single person who's taken advantage of this convenient tool. Go to:
Commands > Create Web Photo Album...
Here you'll find a quick, easy, and painless way to process images on the go. Select a source and destination folder, tweak the other optional settings, and let Dreamweaver do the rest. I usually throw out the automatically generated HTML page, though you may find it useful.
With these tips you should have success in changing the way your Dreamweaver software assists you in your Web development. Good luck!
[1] http://www.macromedia.com/exchange/em_download/
[2] http://www.macromedia.com/exchange/
[3] http://dynamic.macromedia.com/bin/MM/exchange/main.jsp?product=dreamweaver
[4] http://www.macromedia.com/support/dreamweaver/
[5] http://www.macromedia.com/support/forums
[6] http://www.macromedia.com/support/dreamweaver/custom/customizing_dwmx/
[7] http://www.macromedia.com/support/dreamweaver/documentation/dwmx_shortcuts/
[8] http://www.macromedia.com/support/dreamweaver/downloads_updaters.html