Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
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.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.