Dreamweaver tip for screen shot creation

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 “[email protected]”. 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).

This entry was posted in Web Development. Bookmark the permalink.

One Response to Dreamweaver tip for screen shot creation

  1. Diptanshu says:

    Interesting tip.

    You have an excuse; i don’t. (I’ve been using DW for a long time)… and I din’t know this. I suppose there are others too out there who haven’t tried this.

    Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>