The Dreamweaver developers are strange people. For some reason they want to decide what and how you and I should work. Incredibly, they take it upon themselves to decide that we shouldn't use 'underline' -- available as Ctrl-U in every application under the sun, apart from theirs. I don't like bossy applications, do you?
It is possible to do it. It cost me an hour of my life finding out how, and reading interminable posts by prissy idiots who thought they knew better than I what I needed to do.
You need to use the Keyboard Shortcut editor: Edit|Keyboard shortcuts. This brings up a dialog box, with a Commands: Menu commands. In the box under this is all the menu items. Expand the Text|Style menus. This will show various styles. Highlight 'underline'.
Now move your mouse to the 'Shortcuts:' section and click on the little '+' button. This will give you a blank line, and the cursor will skip to the 'Press Key:' box. Now press Ctrl-U. Some text will appear on the dialog box whining that it is assigned to 'Preferences.' Ignore this and click on the 'Change' button. A message box will pop up again whining about being assigned to something else. Just press OK.
And, voila! You can use Ctrl-U in design mode as you always did.
Note that the keyboard shortcut editor may whine that it has to use a copy of the default shortcuts -- let it create one automatically, then carry on.
You know that every time you want something a particular color, you have to get the Color picker up? Instead of a single click as in normal applications? Well ... it annoys me too! But I've just found out how to do a bit of this. I want quite a lot of text in red in my case, but the majority in black.
First select in design mode a bit of text you want in red.
Then display the History panel (Window|Other|History). A panel will appear at the bottom right. Right click on the commands, and choose 'clear history', otherwise you won't be able to see what you're doing.
Leave that as it is, and record the process of changing the colour: Commands|Start Recording. Then do Text|Color and click on red, then OK. Then stop recording (Commands|Stop recording). At this point, the last entry in the history panel will be the format change (the label is 'Font color'), and it should be obvious which one it is. Right click on that command, and choose 'Save as command'. It will demand a name -- I chose 'Color_Red'. Then click OK. The new command will be under the Command menu.
You now want to give that a Keyboard short-cut. It should be possible to use the process above for assigning Ctrl-U. But it doesn't seem to be. [TBA -- add more when I find out how. Perhaps as a 'snippet']
Create a snippet under text, which inserts the needed HTML.
OK, so what is that? (Using the Help|Using Dreamweaver, and search for snippet). So: Window|Snippets opens a panel on the right. Expand the Text branch, right click on Text, and choose 'New snippet'. This opens a dialogue box. Give it a name and a description. Choose snippet type 'wrap selection'.
Insert Before:
<span style="position: relative; top: -1ex; font-size: 70%">
Insert After:
</span>
(It recommended that you avoid using <sup></sup> but instead use the above bit of CSS. The reason is that SUP pushes the lines apart, which looks ugly; the CSS code does not do this.)
Then do OK. This creates a new snippet. To run it, double-click on the snippet name in the snippet panel.
It ought to be possible to assign a hot-key to the snippet -- again I cannot find how to do this.
What is it with the people who document how to write macros in these products? Why don't they ever tell you how to get started? That's what this page is. It presumes you're new to Dreamweaver -- I am -- and tells you the basics.
In Dreamweaver, a macro is a normal .htm file containing some javascript functions and placed in the C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Commands folder. Your macros are written in Javascript. They do things to the document you're working on using the 'Object model' which is the same as the W3C object model for an HTML document. There are lists of the objects you can reference in the help. We'll outline enough to get you going below.
If you create an empty file 'fred.htm' in that folder, when you restart Dreamweaver, there will be a new menu item 'fred' at the bottom of the Commands menu. If you click on it, it will run. (Of course being empty it won't do anything).
Well, you can restart Dreamweaver... Alternatively, hold down the Ctrl key, click Command, then click your macro name. This will (usually!) force a reload from disk of the macro.
In your empty file fred.htm, enter the following:
<html><script> function myfunc(){ alert( 'hello world' ); } </script><body onload=myfunc()></body></html>
Now reload the macro and run it. A message box will appear. The onload=myfunc() runs the function myfunc as soon as the HTML has been read (i.e. in the same way as in a normal HTML page). Without something in the HTML to run the code, nothing will happen. alert() is the normal javascript function to pop up a message.
Now you have a skeleton macro, you can put interesting stuff in the function.
Let's display some bits of text. Change fred.htm to the following:
<html><script>
function myfunc(){
// Get the entire contents of the HTML and display it [Step 1]
var source = dreamweaver.getDocumentDOM("document").documentElement.outerHTML;
alert( source );
// Get the document
var entireDocument = dreamweaver.getDocumentDOM("document");
// Get the current selection
var thisSelection = dreamweaver.getSelection();
// Display selection
alert(entireDocument.documentElement.outerHTML.substring(thisSelection[0], thisSelection[1]));
}
</script><body onload=myfunc()></body></html>
Type in some text in Dreamweaver, select some of it, and run the macro. First the entire HTML should appear; then the selected text should be popped up.
So what is happening? [Step 1]
"The first Dreamweaver object that we encounter is actually the most used of the bunch, and it fills one of the biggest holes in regular JavaScript. The dreamweaver.getDocumentDOM() object tells our function to go look at the document that we are editing and get its document object model (DOM). This is vital to include because, without it, your script will start blithely altering the DOM of the command you're working on, and you really don't want that to happen right now.
"The statement goes on. Once it has the DOM of the document, it looks for the document element. This might seem redundant, but what it's actually doing is describing what part of the DOM you want to deal with; in this case the entire document.
"We end the statement by looking at the outerHTML property. All this gets set to the variable source. Now source contains a string that is the document's complete HTML. Now that we have the document's HTML loaded into a variable, we can start playing around with it."
[Step 2]:
Our next statement is the second-most-often used Dreamweaver-specific command. The dreamweaver.getSelection() method returns an array that represents the portion of the document that has been selected by the user. The getSelection() will return two numbers: the number of characters from the start of the document to the beginning of the selection and the number of characters from the start of the document to the end of the selection. These are generally referred to as "offsets." They allow you to perform commands on specific parts of the document that have been selected by the user.
The offsets are returned and loaded into an array called thisSelection. Then in the next line ...( thisSelection[0], thisSelection[1]), the actual text selected by the user is retrieved using the substring() function.
[This from the WebMonkey tutorial -- I haven't tried it yet]
"By default, your object's name is the name of the object's HTML file. It will appear in the Insert menu and whenever you mouse over its icon in the Objects palette. You can override the name that appears for this object by editing the insertMenu.htm file in the Objects directory. Here's how:
By default, your insertMenu.html file looks a little like this:
<ul
<li>Non-Brea<u>k</u>ing Space, , NBSP.htm</li>
<li>S<u>e</u>rver-Side Include, , SSI.htm</li>
<li>----------</li>
<li>H<u>e</u>ad</li>
<ul>
<li><u>M</u>eta, , Meta.htm</li>
<li><u>K</u>eywords, ,Keywords.htm</li>
<li><u>D</u>escription, ,Description.htm</li>
<li><u>R</u>efresh, , Refresh.htm</li>
<li><u>B</u>ase, , Base.htm</li>
<li><u>L</u>ink, , Link.htm</li>
</ul>
</ul>
The syntax is very simple: Each menu item is an HTML list item (<LI>) with the object's name, control key, and filename given in a comma-separated list. The Windows hotkey is created by placing a letter between underline tags. Separator lines are created by copious use of dashes, and submenus are created by nesting another <UL> list below an entry. You can edit this file at will."
[This from the WebMonkey tutorial -- I haven't tried it yet]
Once you've created an object file, you will also want to add an icon. All
you need to do is create an icon (an 18-by-18-pixel GIF with the same base name
as your object file) and place it in the same directory in which you put your
HTML file. If you simply can't be bothered to create an icon, you can use one of
the Webmonkey icons instead: 
or 
.
There is a Tutorial at WebMonkey which helped me a bit: it's at http://hotwired.lycos.com/webmonkey/templates/print_template.htmlt?meta=/webmonkey/99/11/index2a_meta.html
This simple tutorial seems to cover some basics about dreamweaver:
http://www.developingwebs.net/dreamweaver/
This is something I wanted to do for my own project. Say a user selects a few cells in a column in a table, and then runs my command. How can I loop through the cells in the selection, so that I can read and write the text in each cell? Here's how:
Final solution: a file called Chronicon.htm in the c:\program
files\macromedia\dreamweaver mx\configuration\commands folder.
Contents:
----start of file--
<html>
<script language=Javascript>
//-----------------------------
function populateCells() {
var dom = dw.getDocumentDOM()
// grab multiple selections, which corespond to pair's of offsets
var sel = dom.getSelection(true);
var objs = new Array();
//alert(sel.length/2); //--No of table cells selected
for(var i=0;i<sel.length;i+=2){
// take current selection pair and convert to a tag
// and stuff into an array to play with
objs.push(dom.offsetsToNode(sel[i],sel[i+1]));
}
// Value in first cell. Must subtract zero to force string to
// numeric.
var startValue = objs[0].innerHTML - 0;
if (startValue == 0) {
alert("First value in selection must contain a numeric");
return;
}
//-- Populate all cells
for(var i=0;i<sel.length/2;i++){
// set inertHTML of first node
objs[i].innerHTML= i + startValue;
}
} //--End of populateCells
//------------------------------
</script>
<body OnLoad=populateCells()>
</body>
</html>
----end of file---
Constructive feedback is welcomed to Roger Pearse.
Last updated 21st May, 2004.
Ctrl-U added 23rd February 2005.
Table cell loop added 24th March 2005.
This page has been online since 21st May 2004.
Return to Roger Pearse's Pages