Feature: Page (1) of 1 - 10/12/01 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Can ImageReady and Dreamweaver Get Along?

How to use ImageReady graphics with in Dreamweaver HTML files By Dave Nagel

Summary

1. Save ImageReady HTML and slices into your images directory.


2. Open the ImageReady HTML file in Dreamweaver, and "Save As" into a different directory, as desired.

3. In Code View in Dreamweaver, copy the three separate JavaScript code blocks from your ImageReady HTML file to your new Dreamweaver file.

4. Perform a find/replace to fix any remaining broken links.

It seems more and more users in the forums here are trying to get Adobe ImageReady and Macromedia Dreamweaver to work together. ImageReady, of course, is geared toward use with Adobe's own GoLive, while Dreamweaver prefers files imported from Macromedia's own Fireworks. But can ImageReady and Dreamweaver play well together?

Yes, they certainly can. It's not a terribly difficult process, but it's also not a convenient one. Nevertheless, it can be done.

Let's say we want to create an interactive animation in ImageReady. Nothing fancy, just a rollover button for this example, along with a few slices to spice things up. In the example you see here, I've simply created a button that shows the head of Steve Jobs in the "Normal" state and the head of Bill Gates in the "Over" state. Seems simple enough, right? Well, it is and it isn't.

When you create an interactive rollover in Adobe ImageReady, you're going to generate some JavaScript. No matter how simple or complicated the animation is, you're going to have to deal with it in exactly the same way. In all cases, you will have three distinct blocks of code you need to move from one HTML document to another without disrupting the relative links that are generated by ImageReady. Preparing for this move is the hard part.

1. The hard part
The main difficulty in dealing with ImageReady files in Dreamweaver has to do with planning. After all, ImageReady is going to write an HTML file using relative links for images, and, more likely than not, you're not going to want to put your ImageReady slices in the same folder as your HTML file. So the first step is to figure out where you want everything. Most important, consider where you want your images to go. We're going to work in one directory to begin with, then move our HTML file out of that directory. You'll see why later.




When you export your animation from ImageReady, you can customize
the name of the images directory. After you select "Save Optimized
As," click on the "Output Settings" button. Then select the "Saving
Files" option, and rename the images directory.


So, for now, export your ImageReady file into your desired Images folder within your site. If your main images folder on your site is called "Images" or something similar, you'll probably want to rename the folder that ImageReady creates. Do this as a part of the export process, rather than doing it later.

In my case, I have a directory for each month, which is broken down further into an images directory and several directories for my HTML files. So I'm going to export my ImageReady files into that directory and tell ImageReady to place all of the images it generates into a subfolder called "rollover1slices." It doesn't really matter what you call it, but just remember that it's harder to change later, so try to get it right the first time. I'm calling my HTML file "test1.html." It will also be saved into my Images folder, but not inside the subfolder that ImageReady generates.

2. The tricky part
So now we're done with ImageReady, and all that's left to do is to get it right in Dreamweaver. If we look in our Site Files list, we can see our "test1.html" file listed below our "rollover1slices folder." Now comes the tricky part. See, I don't want to use the HTML file that ImageReady generated. I want to put my rollover into a file that already exists. In this case, I want to put it into the document you're reading right now, called "imagedream-page1.htm." How am I going to do that? This file is located in a completely different directory, and all the links are going to be ruined.


ImageReady generates an HTML file (seen at the bottom) and a subfolder
containing the images (here called "rollover1slices"). Open the "test1.html"
document, and save it into a different directoy, if desired.


Fear not. Fortunately, Dreamweaver has some competent file management tools that will allow me to get around this dilemma in just two steps. The first one is to open the "test1.html" file and do a "Save As," making sure to save it into the same directory as my final document (the one you're reading now). In this case, I'm going to save test1.html into my "imagedream" directory, which is a subdirectory of my "tutorials" folder.

This will cause Dreamweaver automatically to update the links in the "test1.html" file so that, relative to my images directory, all of the link locations match up with my final document (the one you're reading now).

3. The touchy part
So now I should have two documents open in Dreamweaver: the one you're reading now and the one called "test1.html." The "test1.html" document contains all of the information I want to place into my final document. As I mentioned earlier, ImageReady has generated a JavaScript for me and placed it into this "test1.html" document. So all I have to do now is copy and paste that JavaScript into my final document.

Of course, it's a bit more touchy than that. ImageReady's code is divided into three distinct areas. One is inside the head information of the HTML document. One is inside the tag. And one is just floating around near the top of the document.

Let's look at the first two first.


Switch to Code View

1. In both of your open documents, switch to the HTML view. Look inside "test1.html." Up at the top, you should see something like: . This is the beginning of the ImageReady script. A bit further down (right above the tag), you should see: . In between these two tags, you see a bunch of code. Just select it all and copy it, including the beginning and ending tags.


This is a portion of the Preload script ImageReady generates. You'll
need to copy it into your new document.


Now switch over to your destination document (in HTML view) and paste all of that into the area just before the tag.

2. Now, back to the "test1.html" document. Look for the tag. In it, you will see something that looks like this: ONLOAD="preloadImages();" . Copy just that code (including the quotation marks), and paste it into the tag in your destination file.


The highlighted portion is the "ONLOAD" script, which you will also
need to paste into your new document.


3. Finally, the easy part is copying and pasting the remaining script, table and images. Go back to layout view in both of your documents. In the "test1.html" document, you should see your images with a yellow shield on top and bottom. Select everything, including the shields, and copy it all. Then paste it wherever you want in your destination document.



NOTE: Preview the "test1.html" document in your browser before you complete this last step. If the rollover shows broken images, you're going to have to do a simple manual tweak, detailed below.

4. Further problems?
Now, if you go ahead and preview your page, you might see that in all states besides Normal, you're getting broken images. This is because Dreamweaver's file management system sometimes doesn't recognize relative image links inside JavaScripts created by ImageReady. This is easy enough to fix.

In your Code view, you will see something like this: ONMOUSEOVER="changeImages('test1_03', 'rollover1slices/test1_03-over.gif' . The part that's relative is the 'rollover1slices/test1_03-over.gif' . So all you have to do is perform a find/replace for 'rollover1slices/ . In my case, my directory structure requires me to go up two levels in the directory, then into the images/ directory before I can get to the rollover1slices/ directory. So, in my find/replace dialog, I look for 'rollover1slices/ and replace it with '../../images/rollover1slices/ . (The little "../" tells the browser to go up one directory. If you need to go up more than one directory, you can just add in additional ones, such as "../../" for two directories, "../../../" for three directories, etc.)


Dreamweaver's Find/Replace

You need to do this again because some of the code will use single quotes, while other parts will use double quotes. So, open up the find/replace dialog again, and change the single quotes to double quotes, leaving everything else the same. Then click Replace All.

Final thoughts
So why all the trouble? If you use Dreamweaver, why not just use Fireworks? And if you use ImageReady, why not just use GoLive? Well, that's not the way it always works out. Some people swear by Fireworks and Dreamweaver. Others swear by GoLive and ImageReady. But there's an awful large part of the population that likes ImageReady and Dreamweaver. After all, if you prefer to do you animation in ImageReady and your HTML in Dreamweaver, a little five-minute conversion time isn't too much of a hassle.

Both Adobe and Macromedia should work to make this a little bit easier on the users. The burden will likely fall on Macromedia for two reasons. First, Dreamweaver is highly extensible, so writing an importer for ImageReady files shouldn't be too difficult. Second, practically every designer in the world has ImageReady by virtue of the fact that it's distributed free with Photoshop.

Neither company should consider this an issue of caving in to the other. It's simply a matter of making life easier on the user. And, at this stage, the company that offers more import formats is likely to come out ahead.

Page: 1


Related Keywords:Can ImageReady and Dreamweaver Get Along?

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved