Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Fireworks integration with Dreamweaver doesn't stop at round trip editing. We have got another really cool option we can utilize that involves copy and paste. We can copy any object, or group of objects, from within Fireworks and then paste them into a Dreamweaver page. So I've got my olive stuff file open here, and I am just going to go ahead and select this little icon here. So there are several different elements in there, and I am going to copy, press Ctrl+C to copy, and I am going to switch over to Dreamweaver. Now in Dreamweaver I have a CSS-based layout opened up here, and I want to drop this icon into the body of this text down in here.
So I am going to click inside of my text. Press the Enter key. I am doing this in a CSS-based layout rather than an HTML images mockup, because we don't worry about breaking a table layout this way. So I am just going to hit and press the Enter key to give myself some space, and I am just going to choose Edit > Paste, and as soon as I do that, I get little Image Preview window opening up, and you might recall this window from Fireworks. The Image Preview window is integrated into Dreamweaver as well, so that if you're copying and pasting images in from Fireworks or Photoshop, you can put them into a format that Dreamweaver understands.
So we're just going to go ahead and change a couple of things here. I think I'll set this as a PNG 8, and I'm also going to change the file size. I want it to be a little bit smaller, so I think I'll set it to about 100 pixels wide by 99 pixels high, about 50% of its original size, and click OK. Now Dreamweaver asked me where do I save the image, so I am going to save it as olive_icon, and I'll click Save, give it some Alternate Text graphic, my Alternate Text, and click OK.
And right away, the image gets dropped right into Dreamweaver. Now I'm part of a CSS-based layout here, actually a little quick thing I'd like to do is I'd like to float this image over to the left-hand side, so my text wraps around to the top. So I am going to go ahead and create a New CSS Rule from my CSS Styles panel, and all I want here is a simple class. I am going to call it Float left, click OK, and I'll just go to my Box category, and I'll choose Float, Left, and click OK.
And once I do that, I can just select the image and change the Class to Float left. You can see my text now runs right along beside the image. I could certainly do other things I can increase the distance between the image and the text, but that's really more of a Dreamweaver thing than it is a Fireworks thing. But there you go. You can literally copy and paste anything on your canvas from Fireworks and drop it into Dreamweaver, even if it's part of a much larger design.
Get unlimited access to all courses for just $25/month.Become a member