CSS, JavaScript and XHTML Explained

Dreamweaver tip for screen shot creation October 24, 2009

I write a lot of tutorials. Really, really basic tutorials.  While I generally program in BBedit, Eclipse, vi, gEdit, NoteTab, or whatever makes sense at the moment, I write most of my tutorials and blog posts in Dreamweaver.  While this blog doesn’t contain many screen shots, my basic tutorials are filled with them.  I made a new discovery today that is going to make my tutorial writing so much easier. This may be old news for avid Dreamweaver users, but it’s new to me, so I thought I would share.

The Tip: When you do a screen capture in Firefox (or any other open application) and you  go to Dreamweaver, pasting whatever is in memory (your screenshot) into Dreamweaver design view enables you to save and add your screen shot directly into your open page.

I’ve been spending a huge amount of time creating my tutorial images for my Community MX workshops in Fireworks.  I’ve successfully reduced the time to create screen shots.

Here are my steps:

1. While in Firefox, I go into Firebug to alter the  text of what i want to take a screen shot of so I can anonymize my  email address and provide generic domain names. I don’t really own “you@yourdomain.com”. With Firebug, I can change all the email address examples, IP addresses, domain names, etc., to make them generic to hide from possible creeps who enjoy stalking in their spare time.  Using firebug to alter text is much faster than trying to create text that fits into the available space and matches the other text in an image editing program.
2. Then I use “screengrab”, another firefox extension, to take a screen shot of just the section of my Firefox. I could also use “grab” to capture a selection on my Mac.
3. Then, in Dreamweaver, I hit where I  want the picture added to my tutorial. I get the Fireworks style “Export image as” and “Save” screens, enabling me to save the image to my images folder.   If i am in design view, I also get prompted for an alt attribute, and  the image is added to the page. If I am in code view, the image is not  actually added to the page.

Maybe this is old news, but I just discovered it (I don’t use DW much).