We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
Adobe Fireworks CS3 Tutorials
Exporting / Inserting Images into Dreamweaver
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Exporting / Inserting Images into Dreamweaver)
Continuing my discussion and demonstrations from the previous movie on ways to integrate your Fireworks and Dreamweaver work, Fireworks recognizes and preserves most types of edits made to a document in Dreamweaver including Change to Links, Edited Image Maps, Edited Text, and also HTML and HTML Slices. Behaviors can also be shared pretty transparently between Fireworks and Dreamweaver. For example, in this document here, I created some Swap Image Behaviors on these menu items up here in Fireworks. If I open up the Behaviors panel in Dreamweaver and then click on those former slices that are now table elements, notice that I have the swap image and the swap image restore behavior right here in Dreamweaver where I can modify those behaviors. You can use the Properties Inspector in Dreamweaver to identify Fireworks generated images, table slices, and tables in a document. Do that by selecting the object and then notice here in the Properties Inspector, there's a little Fireworks icon right there. Although Fireworks supports most types of Dreamweaver edits, radical changes made to a table's structure in Dreamweaver can create problems between the two applications. We ran into that In the previous movie, here for page 4. I'd made some modifications to this table and then when I selected this image placeholder and clicked on the Create button I got a warning last time that the table had been modified. I didn't get the error this time. Let's go ahead and try something different. Let's try taking this, I'm going to move this layer out of the way, but if I try changing this table a little bit, and now let's click on the Fireworks button down there. There we go. There's the error. The structure of the HTML table that you are editing does not match the table structure in the original Fireworks source PNG, so you need to be careful about making drastic changes in Dreamweaver. I try to finish up my Fireworks work, get it pretty much finalized before moving it over to Dreamweaver for that very reason. There are a variety of ways for placing Fireworks graphics into a Dreamweaver document. You can place a finished Fireworks graphic using the Files panel in Dreamweaver, or the Insert menu in Dreamweaver, or you can even create a new Fireworks document from a Dreamweaver image placeholder; I demonstrated that in the previous movie. In this case, let me go ahead and delete that placeholder there, and I've created a layer, and then I just chose from the Main menu, Insert, Image Objects, Image Placeholder. That'll place a placeholder there and then later on you can change that or exchange that placeholder with an actual Fireworks graphic. You can insert any graphic file format supported by Fireworks and Dreamweaver directly into a Dreamweaver document using either, again, the Files panel, or the Insert menu, however, you must first export the images from Fireworks. Let me go ahead and demonstrate these techniques. First, let me demonstrate how to insert a Fireworks image into a Dreamweaver document using the Files panel. Here I've opened up the Files panel in Dreamweaver by choosing Window, Files. Here I have a list of all of the files in this site root. If you're not quite sure what a site root is, do some research in Dreamweaver, the Help area, on what a site root is. And I have an image here, I'm going to drag and drop it onto my canvas, or document right there in Dreamweaver. click OK. And notice that the image has been placed right into Dreamweaver. Let's go ahead and delete that. Another method is to insert a Fireworks image into Dreamweaver using the Insert menu. You'll want to place the insertion point where you want the image to appear in the Dreamweaver document window and then select Insert, Image from the Main menu, browse to the location of your images. Here in my sample files folder I have a photos folder. Let's go ahead and choose that first folder. click OK, and there's my image. Previously I demonstrated how to make modifications to Fireworks documents in Dreamweaver. You can also make modifications to Dreamweaver documents here in Fireworks, namely, you can update Fireworks HTML that you've already exported into Dreamweaver. The File, Update HTML command allows you to make changes to an HTML document that you've previously exported to Dreamweaver. Go ahead and locate the HTML file that you've created in Fireworks and then modified in Dreamweaver. I have one here called BOL menu. Click open, and you'll get these two options: you can replace images and associated HTML, or you can update the images only. Oftentimes I'll change an image slightly here in Fireworks after I've previously exported it and worked on it in Dreamweaver, so rather than replacing all the HTML, I just want to update those images. Now, while this update HTML is useful for updating HTML you've previously exported to Dreamweaver, the round trip HTML that I demonstrated previously over in Dreamweaver, provides probably more power and more benefits than this method, but this is sometimes useful because with this update HTML command you can edit a source PNG image file in Fireworks and then automatically update any exported HTML code and image files that have been placed in a Dreamweaver document. What's kind of nice about this command is it lets you update Dreamweaver files even when Dreamweaver is not running. One potential snag with this technique is, make sure to choose Dreamweaver as the HTML type in that HTML setup dialog box that I demonstrated earlier. As a reminder, find that under the File, Export, and then click on the Options button right here for such an important dialog as this HTML setup. It's kind of hidden, so again, for HTML style, make sure that says Dreamweaver HTML. Let me move on now to another movie and demonstrate some techniques for integrating Fireworks graphics in Flash and Photoshop.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
