Digital Media Designer: Tutorial: Can ImageReady and Dreamweaver Get Along?

Can ImageReady and Dreamweaver Get Along?
[Page 2 of 3]

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 <body> 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 </HEAD> 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 </HEAD> tag.

page 1, 2, 3, complete, Home