Development 201, using the right tool....Dreamweaver -vs- Fireworks

I know, this entry is a little off topic, but only a little and did offer my brain some good "reminders" of some valued principles.

Valued Principles

1. Think about the tool you are using to solve a problem.
2. Think if the approach you are using is the only approach.
3. Are you asking the question correctly?
4. Think if the approach you are using makes the most sense.
5. Take time to consider and research *other approaches.
6. Take a leap of faith once in awhile.

I have been creating some new content for one of our moodle services the past few weeks.  This is the home page.  I know that I am not an expert *front end developer (HTML, CSS, Javascript, images, buttons etc).  But, I am adequate.  Today, I spend about 3 hrs trying to figure out how to make a *simple mouse over image swap effect using Fireworks.  That's right, Fireworks.  I have been using Fireworks a bit the past few weeks because I have been messing around a little creating animated images, like the registration button, and a couple others.  I assumed this would be pretty straight forward.  It is not, at least for me.

Fireworks is professional grade stuff and gets complicated quickly when dealing with layers, frames, animations etc.  I must have looked at 3-4 *tutorials or approaches to creating what I was after.

After taking a break and going for a walk, I asked the question a little differently.  This time I said "how to build an image rollover", omitting the word Fireworks.  Quickly I was reminded that another excellent development tool Dreamweaver is at my disposal.  I have been using Notepad ++ the past year or longer while doing my PHP development.  It was fine.  But, Dreamweaver is a much more feature rich program (IDE) than Notepad.  I like the lightness and simplicity of Notepad, but for this case, Dreamweaver hit a home run.

Dreamweaver making things simple!
In about 2 minutes, I had dreamweaver open and was looking at this dialog.

No kidding, all I had to do was browse to and select each of my two images.  Could it be any simpler?

After choosing the images and clicking OK, I had both the javascript needed to do the actual switching and the html to complete the trick.  This is what Dreamweaver inserted into my document.

            a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/staffphotos/james2.jpg',1)"
            img src="images/staffphotos/james.png" name="Image1" width="200" height="164" border="0" id="Image1" / /a

I removed the opening and closing "< >" brackets.

I moved the code into the proper location on the page, saved it and my image rollover worked like a charm!

One final thought.

I changed my php page to html.

I am so programmed to saving all my pages as .php, I forget, that if I am not going to the DB and if the page does not contain some other necessary scripting logic, I can create all my content (html, css, text) in a .htm or .html format.  It is actually a little easier, because I am not having to echo ''; all the content.

I changed the file housing the image rollover from .php to .html.  Then I removed all the echo '' ing from the file.

Inspiration to use Dreamweaver and not Fireworks, dummy!