Customizing Dreamweaver
I love Dreamweaver, it's my code editor of choice, but sometimes the default settings totally stink. I couldn't help but feel that space was being wasted, and that there were features missing from a seasoned application like Dreamweaver. I have picked up a few things to tweak Dreamweaver to my liking. Some things are simple, while others require a bit more wrenching under the hood. Now, anytime you go messing with core application files I highly recommend you make a copy of them first and store them in a safe location. Making a mistake could cause Dreamweaver to stop working. Though these tweaks are pretty easy, consider yourself warned.
Edit Keyboard Shortcuts
I think it's great that Dreamweaver provides a method of customizing shortcuts for the application without messing with the entire system. This is a huge boost to my productivity and wish other applications would allow me to do the same thing. Here is a walk through of one of my favorite shortcut tweaks so you can see how to get started. Once you see how easy it is, I am sure your mind will spin with other creative ways to enhance your shortcuts.
I typically work on an HTML page and it's associated css files at the same time. I usually want to do a "Save All" so that I can test a page and recent css edits all at once. There is a save all command in the menu but no shortcut for it by default. The standard toolbar does include a button for this, but I feel it would be easier to save all my open documents with a single keyboard shortcut. Fortunately this is pretty easy to do with custom shortcuts.
Start by choosing "Keyboard Shortcuts" from the Dreamweaver Menu (PC Edit Menu). To the right of the Current Set drop down menu click the button to Duplicate set icon and give it a name. I choose "My Shortcut Set" Original I know… Now you can make changes and still have the originals to fall back on if you need to.
I want to use the shortcut Cmd+Shift+S for "Save All" however it is already associated with "Save As". I could us something else for the new shortcut but I never use the save as command, and it's easy to remember. I also wanted to demonstrate for you what is required if a shortcut is already in use.
In order to remap the Cmd+Shift+S shortcut to the Save All, we first have to remove the shortcut from the Save As. From the Commands drop down, choose the Save As item. Click the minus sign in the shortcuts box below to remove the current shortcut value.
Now, select "Save All" and click the plus icon. Move your focus to the Press Key field and type your new shortcut combination Cmd+Shift+S. Click ok and your done.
Snippet Shortcuts
If your a power user you will really love this feature. One of the cooler uses for shortcuts has to be the Snippets Shortcuts. Change the Commands drop down menu to Snippets. Select your desired snippet and add your shortcut command as you did earlier. Now you can add snippets with a simple keystroke rather than having to go to the snippets palette every time for reoccurring items. I reserve this for only my most frequently used snippets because finding an available shortcut that is easy enough to remember is hard to come by.
Customized Toolbars
I got really excited the day I figured out how to modify Dreamweaver's toolbars. At the time, I only had a 19" monitor so screen real estate was precious to me. The default organization of toolbars left me feeling a bit disappointed. The Standard Toolbar, Style Rendering toolbar and the Document toolbar are all on a row by themselves and some toolbars had only a few buttons each. This drove me nuts! What a waste of space. Fortunately these buttons are totally customizable.
After quitting dreamweaver and backing up you configuration files located in the Dreamweaver application folder > configuration > Toolbars > toolbars.xml and styleRendering.xml. Open the styleRendering.xml file in a plain text editor like Textwranger or notepad. Look for the phrase MM_mediatypes_screen this is the start of the Style Rendering toolbars. Select all the contents through the end of the MM_designtime_stylesheets item. Copy this entire block for now.
The toolbar.xml file is fairly easy to get around in. It does have comments but don't expect too much. Here is the basic structure:
<!-- main toolbar -->
<DW_Toolbar_Main>
<!-- Standard toolbar -->
<Standard_Toolbar>
<!-- Browser nav toolbar -->
<Browser_Toolbar>
<!-- Code view toolbar -->
<DW_CodeView_Toolbar>
<!-- Code inspector toolbar -->
<DW_CodeInspector_Toolbar>
We are going to paste the Style Rendering toolbar code at the end of the Standard Toolbar code. You can find the start of this section by looking for <!— Standard toolbar —> Locate the end of this section as signified by the </toolbar> closing tag.
Just above the closing tag we are going to add a separator by typing <separator/> After the separator paste in the Style Rendering toolbar code. Save the file and restart Dreamweaver. If you did everything correctly Dreamweaver will start as normal and both of your toolbars will be on the same row saving you quite a bit of space.
Additional Gems
While your in the toolbar you might notice that there are a few items commented out. For instance check out the Code Inspector Toolbar section. There are quite a few items commented out that might be very useful to you when you are in the code view. One of my favorites has to be the DW_CodeInspector_FormatSource. This will tidy up your source code adding proper indents or removing indents all together as specified in the Code Format tab in your preferences menu. This is pretty helpful if you want to compress your code for more performance, but expand it for easier editing.
Change the Title Bar Width
The tile bar area is pretty small, and for larger page titles it can be difficult to scrub through to edit. The default width is only 150, however you can change this to something larger like 250. Located in the Main Toolbar section find the item DW_SetTitle and change the width to something more appropriate.
Closing Remarks and Additional Resources
There are more ways to customize Dreamweaver than I can explain in one article. Dreamwearver Extensions allow you to create some really useful tools. I hope to get into that later in a future article if people find this article useful. Peachpit Press has some good tips on setting up your code environment that will come in handy too. I hope you found this article useful and informative. If you know of other great tips that I did not mention, please leave a comment below. Happy tweaking !
Tags: Code · General · Inspiration · Software
6 comments so far ↓
Didn't know about this stuff.
Thanks a ton!
I would like to get CTRL+D working in code edition mode, but I doesn't success...
Any idea ?
Thanks in advance !
-Kenneth
Leave a Comment