The Making of a Simple, but Useful Dreamweaver Extension

Author: Colm Gallagher
Author's Site: ColmGallagher.com
Reference ID: 15621

Creating the HTML file. Part 1 - The interface.

First thing to do is open a blank document in Dreamweaver and give it a title. The title you give this document will appear as the tooltip when you mouse over the icon in the objects panel, so choose wisely. We're going to call ours "Advanced Mailto Link". Now save the document, preferably in an empty folder set aside for your extension files. Give it a meaningful name. I called mine mailto_link.html.

Next we'll build our form. Click Insert» Form. In the Property Inspector, give the form a name. In this case, let's call it "emailform".

Inside the form we'll place a table. Click Insert» Table. We have five possible input fields and we'll need to put some text beside each of them, so let's make this table with five rows and two columns.

Now we'll add our form elements and text to the equation. We'll put our text on the left side and our textfields on the right. We'll put two buttons in the bottom row, one on the left and one on the right. When we've finished, we'll clear the width attribute of the table (if it has been set)and it should collapse to the width of it's contents. We should end up with something like this.

Now all we need to do is name each of the text fields. Click inside the first one and rename the field in the Property Inspector. We'll call it linktext.

Repeat for each field. We'll call them emailtext, subtext, cctext and bodytext.

Finally, clear the background colour for your page, Modify» Page Properties and clear the background colour.

That's the interface done.