Customize Dreamweaver to Your Needs

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.

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

MM DW Support Center
Information Database Help > Dreamweaver Support Center
http://www.macromedia.com/support/dreamweaver/

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

Customizing MM DW MX
Compressed Adobe PDF File
http://www.macromedia.com/support/dreamweaver/custom/customizing_dwmx/

MM DW MX Shortcut Matrix
Compressed Adobe PDF File
http://www.macromedia.com/support/dreamweaver/documentation/dwmx_shortcuts/

MM DW Updates
File Downloads
http://www.macromedia.com/support/dreamweaver/downloads_updaters.html

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!

Frequently Asked Questions about Customizing Dreamweaver

How can I change the code coloring in Dreamweaver?

Changing the code coloring in Dreamweaver is a simple process. Go to the ‘Preferences’ option in the ‘Edit’ menu. From there, select ‘Code Coloring’ in the category list. You can then choose the document type and modify the colors as per your preference. Remember to click ‘Apply’ to save your changes.

How can I customize the writing and editing of code in Dreamweaver?

Dreamweaver provides several options to customize the writing and editing of code. You can access these options from the ‘Preferences’ dialog box under the ‘Code Format’ category. Here, you can adjust settings like indent level, word wrap, and tag case.

Can I develop a form in Dreamweaver?

Yes, Dreamweaver allows you to develop forms. You can use the ‘Form’ option in the ‘Insert’ menu to create a new form. You can then add form elements like text fields, checkboxes, and buttons using the ‘Form’ category in the ‘Insert’ panel.

How can I change the code color scheme in Dreamweaver on a Mac?

The process to change the code color scheme in Dreamweaver on a Mac is similar to that on a Windows system. Go to ‘Dreamweaver’ > ‘Preferences’ > ‘Code Coloring’. Select the document type and modify the colors as per your preference.

How can I customize the workspace in Dreamweaver?

Dreamweaver allows you to customize your workspace according to your needs. You can choose from the predefined workspaces or create your own. To customize, go to ‘Window’ > ‘Workspace Layout’ > ‘New Workspace’. You can then add, remove, or rearrange panels as per your preference.

Can I use Dreamweaver to write and edit JavaScript code?

Yes, Dreamweaver supports JavaScript coding. It provides features like code hints, live syntax checking, and auto-completion to make JavaScript coding easier.

How can I use the split view in Dreamweaver?

The split view in Dreamweaver allows you to see the code and design views simultaneously. You can activate it by clicking on the ‘Split’ button in the document toolbar.

Can I customize the keyboard shortcuts in Dreamweaver?

Yes, Dreamweaver allows you to customize keyboard shortcuts. Go to ‘Edit’ > ‘Keyboard Shortcuts’. You can then create a new set of shortcuts or modify the existing ones.

How can I use the live view in Dreamweaver?

The live view in Dreamweaver allows you to preview your webpage without leaving the program. You can activate it by clicking on the ‘Live’ button in the document toolbar.

Can I use Dreamweaver to write and edit CSS code?

Yes, Dreamweaver supports CSS coding. It provides features like code hints, live syntax checking, and auto-completion to make CSS coding easier. You can also use the CSS Designer panel to visually create and edit CSS rules.