|Page (1) of 1 - 10/12/01||email article||print page|
Can ImageReady and Dreamweaver Get Along?How to use ImageReady graphics with in Dreamweaver HTML files
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.
4. Perform a find/replace to fix any remaining broken links.
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.
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
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?
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.)
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.
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.
Related Keywords:Can ImageReady and Dreamweaver Get Along?